Skip to content

Commit

Permalink
Merge pull request #14 from bhcha/main
Browse files Browse the repository at this point in the history 
fix : feedback visible 오류
  • Loading branch information
@bhcha
bhcha authored Jul 13, 2024
2 parents 785451f + 4dc141b commit d6f3ebb
Show file tree
Hide file tree
Showing 9 changed files with 161 additions and 165 deletions.
1 change: 1 addition & 0 deletions .storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const config = {
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
'@storybook/addon-docs',
"@chromatic-com/storybook",
],
framework: {
Expand Down
63 changes: 57 additions & 6 deletions src/components/commons/LitParents.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,40 @@
// EventManager.js
import {css, LitElement} from "lit";
import {SharedStyles} from "@/components/commons/SharedStyles.js";
import {TextStyles} from "@/components/commons/TextStyles.js";

class LitParents extends LitElement{
class LitParents extends LitElement {

constructor() {
super();

}

static styles = [
SharedStyles.styles
, TextStyles.styles];

static get properties() {
return {
// common properties
id: {type: String},
width: {type: String},
required: {type: Boolean},

// feedback properties
feedback: {type: String},
'feedback-type': {type: String},
'feedback-visible-type': {type: String},

// label properties
label: {type: String},
'label-align': {type: String},
'label-width': {type: String},
'label-text-align': {type: String},
};
}


setSelector(selector) {
this.selector = selector;
}
Expand All @@ -22,12 +48,37 @@ class LitParents extends LitElement{
const inputElement = this.shadowRoot.querySelector(this.selector);
if (inputElement) {
inputElement.value = value;
this.inputValue = value;
}
}

isValid() {
return !!getValue();
isValid(value, pattern, required) {
const regex = new RegExp(pattern);

if (!value && required) {
return false;
} else return !((regex && value) && !regex.test(value));
}

validate() {
const value = this.getValue().trim();
const feedbackElement = this.shadowRoot.querySelector('l-feedback');
const inputElement = this.shadowRoot.querySelector(this.selector);
const isValid = this.isValid(value, this.pattern, this.required);
const feedbackVisibleType = this['feedback-visible-type'];

inputElement.classList.toggle('is-invalid', !isValid); // Toggle 'is-invalid' based on validity

if(feedbackVisibleType == 'visible') {
return;
}
feedbackElement.setAttribute('hidden', true); // Assume hidden first
if ((isValid && feedbackVisibleType == 'valid') || (!isValid && feedbackVisibleType == 'invalid')) {
feedbackElement.removeAttribute('hidden');
}
}

checkValidity() {
this.validate();
}

addEventListener(type, listener, options) {
Expand All @@ -40,16 +91,16 @@ class LitParents extends LitElement{

connectedCallback() {
super.connectedCallback();

}

disconnectedCallback() {
super.disconnectedCallback();
}

attributeChangedCallback(name, oldVal, newVal) {

super.attributeChangedCallback(name, oldVal, newVal);
}
}

export { LitParents };
export {LitParents};
20 changes: 9 additions & 11 deletions src/components/group/InputContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,21 @@ class InputContainer extends LitElement {
[

// component css
, css`
.container {
display: flex;
align-items: center;
margin-bottom: 10px;
}
`
css`
.container {
display: flex;
align-items: center;
margin-bottom: 10px;
}
`
];

static get properties() {
return {
class: {type: String},
width: {type: String},
labelAlign: {type: String},
'label-align': {type: String},
};
}

Expand Down
116 changes: 29 additions & 87 deletions src/components/input/Input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,93 +14,36 @@ class LInput extends LitParents {

constructor() {
super();

super.setSelector('input');
}

static styles =
[
// common css
SharedStyles.styles,
// text css
TextStyles.styles,
// component css
css`
.form-left-control {
flex-grow: 1;
padding: .375rem .75rem;
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
-webkit-appearance: none;
-moz-appearance: none;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: 8px;
outline: none;
transition: all 0.3s ease-in-out;
}
`
];


formatValue(value) {
// 예시: 숫자 포맷팅 (쉼표 추가)
return value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

isValid(pattern, required) {
const regex = new RegExp(pattern);
const value = this.getValue().trim();

console.log(regex, regex.test(value), !(regex && !regex.test(value)))

if (!value && required) {
return false;
} else return !((regex && value) && !regex.test(value));
}

validate() {
if(this.feedbackVisibleType !== 'visible') {
this.shadowRoot.querySelector('l-feedback').setAttribute('hidden',true);
}

if (this.isValid(this.pattern, this.required)) {
this.shadowRoot.querySelector(this.selector).classList.remove('is-invalid');
if(this.feedbackVisibleType === 'valid') {
this.shadowRoot.querySelector('l-feedback').removeAttribute('hidden');
}
} else {
this.shadowRoot.querySelector(this.selector).classList.add('is-invalid');
if(this.feedbackVisibleType === 'invalid') {
this.shadowRoot.querySelector('l-feedback').removeAttribute('hidden');
}
}
}

checkValidity() {
this.validate();
}

static styles = [
...super.styles,
css`
.form-left-control {
flex-grow: 1;
padding: .375rem .75rem;
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
-webkit-appearance: none;
-moz-appearance: none;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: 8px;
outline: none;
transition: all 0.3s ease-in-out;
}
`
];

static get properties() {
return {
// input properties
type: {type: String},
size: {type: String},
id: {type: String},
name: {type: String},
width: {type: String},
label: {type: String},
feedback: {type: String},
feedbackType: {type: String},
feedbackVisibleType: {type: String},
labelAlign: {type: String},
labelWidth: {type: String},
labelTextAlign: {type: String},
required: {type: Boolean},
size: {type: String},
disabled: {type: Boolean},
readonly: {type: Boolean},
value: {type: String},
Expand All @@ -111,9 +54,8 @@ class LInput extends LitParents {
};
}


render() {
let isLabelLeft = (this.labelAlign && this.labelAlign == 'left');
let isLabelLeft = (this['label-align'] && this['label-align'] === 'left');

return html`
<l-input-container
Expand All @@ -128,9 +70,9 @@ class LInput extends LitParents {
slot="label"
label="${ifDefined(this.label)}"
id="${this.id}"
labelAlign="${ifDefined(this.labelAlign)}"
labelWidth="${ifDefined(this.labelWidth)}"
labelTextAlign="${ifDefined(this.labelTextAlign)}"
label-align="${ifDefined(this['label-align'])}"
label-width="${ifDefined(this['label-width'])}"
label-text-align="${ifDefined(this['label-text-align'])}"
required="${ifDefined(this.required)}"
>
Expand Down Expand Up @@ -162,11 +104,11 @@ class LInput extends LitParents {
</l-input-container>
<l-feedback
feedback="${ifDefined(this.feedback)}"
feedbackType="${ifDefined(this.feedbackType)}"
feedback-type="${ifDefined(this['feedback-type'])}"
width="${ifDefined(this.width)}"
labelAlign="${ifDefined(this.labelAlign)}"
leftMargin="${ifDefined(this.labelWidth)}"
?hidden="${this.feedbackVisibleType !== 'visible'}"
label-align="${ifDefined(this['label-align'])}"
left-margin="${ifDefined(this['label-width'])}"
?hidden="${this['feedback-visible-type'] !== 'visible'}"
>
</l-feedback>
Expand Down
12 changes: 6 additions & 6 deletions src/components/text/Feedback.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,15 +84,15 @@ class LFeedback extends LitElement {
static get properties() {
return {
feedback: {type: String},
feedbackType: {type: String},
'feedback-type': {type: String},
width: {type: String},
labelAlign: {type: String},
leftMargin: {type: String},
'label-align': {type: String},
'left-margin': {type: String},
};
}

render() {
let isLabelLeft = (this.labelAlign && this.labelAlign == 'left');
let isLabelLeft = (this['label-align'] && this['label-align'] === 'left');

const feedbackHtml = {
'normal': html`<div class="valid-feedback">${this.feedback}</div>`,
Expand All @@ -104,11 +104,11 @@ class LFeedback extends LitElement {
return html`
<div
style="
padding-left: calc(${this.leftMargin} + ${isLabelLeft ? `15px` : '0px'})
padding-left: calc(${this['left-margin']} + ${isLabelLeft ? `15px` : '0px'})
;width: ${this.width ? this.width : 'auto'};
"
>
${feedbackHtml[this.feedbackType]}
${feedbackHtml[this['feedback-type']]}
</div>
`
}
Expand Down
12 changes: 6 additions & 6 deletions src/components/text/Label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,25 +52,25 @@ class LLabel extends LitElement {
return {
label: {type: String},
id: {type: String},
labelAlign: {type: String},
labelWidth: {type: String},
labelTextAlign: {type: String},
'label-align': {type: String},
'label-width': {type: String},
'label-text-align': {type: String},
required: {type: String},
};
}

render() {
if (!this.label)
return '';
let isLabelLeft = (this.labelAlign && this.labelAlign == 'left');
let isLabelLeft = (this['label-align'] && this['label-align'] === 'left');

return html`
<label
class="${(isLabelLeft && this.label) ? 'form-left-label' : 'form-label'}"
for="${this.id}"
style="
width: ${this.labelWidth || 'auto'};
text-align: ${this.labelTextAlign || 'left'}
width: ${this['label-width'] || 'auto'};
text-align: ${this['label-text-align'] || 'left'}
"
>
${this.required == 'true'
Expand Down
2 changes: 1 addition & 1 deletion src/doc/Introduce.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function CodeHighlight({ children, language }) {

return (
<div>
<code className={`language-${language}`}>
<code class={`language-${language}`}>
{children}
</code>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<script type="module" src="components/input/Input.js"></script>


<l-input type="text" label="Phone" labelalign="top" feedback="invalid value" feedbacktype="error" feedbackvisibletype="invalid" id="input01" name="name" width="100%" required="" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">
<l-input type="text" label="Phone" label-align="top" feedback="invalid value" feedback-type="error" feedback-visible-type="invalid" id="input01" name="name" width="100%" required="" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">
</l-input>


Expand All @@ -20,10 +20,10 @@
// document.querySelector('l-input').addEventListener('click', ()=>{
// alert('dd');
// })
// setTimeout(()=>{
//
// document.querySelector('l-input').checkValidity();
// },1000)
setTimeout(()=>{

document.querySelector('l-input').checkValidity();
},1000)
})

</script>
Expand Down
Loading

0 comments on commit d6f3ebb

Please sign in to comment.