Skip to content

Commit

Permalink
Merge pull request #11 from bhcha/main
Browse files Browse the repository at this point in the history 
class 구조에서 컴포넌트 구조로 변경
  • Loading branch information
@bhcha
bhcha authored Jul 5, 2024
2 parents e2c55c5 + aff75d2 commit 96f83e2
Show file tree
Hide file tree
Showing 8 changed files with 120 additions and 129 deletions.
5 changes: 5 additions & 0 deletions assets/ico_hint_20.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions src/components/commons/SharedStyles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ class SharedStyles {
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
Expand Down
18 changes: 9 additions & 9 deletions src/components/commons/LLabelContainer.js → src/components/group/InputContainer.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {css, html, LitElement} from 'lit';

class LLabelContainer extends LitElement {
class InputContainer extends LitElement {
static styles =
[
// component css
Expand All @@ -14,26 +14,26 @@ class LLabelContainer extends LitElement {
]
;

constructor({labelAlign}) {
super();
this.labelAlign = labelAlign;
}

static get properties() {
return {
width: {type: String},
labelAlign: {type: String},
};
}

render() {
let isLabelLeft = (this.labelAlign && this.labelAlign == 'left');

return html`
<div class="${isLabelLeft && 'container'}">
<div
class="${isLabelLeft ? 'container' : ''}"
style="width: ${this.width ? this.width : 'auto'}"
>
<slot></slot>
</div>
`
}
}

customElements.define('l-label-container', LLabelContainer);
export {LLabelContainer};
customElements.define('l-input-container', InputContainer);
export {InputContainer};
163 changes: 79 additions & 84 deletions src/components/input/Input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,80 +21,79 @@ class LInput extends LitParents {

// component css
, css`
*, ::after, ::before {
box-sizing: border-box;
}
.l-input {
width: 100%;
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;
}
.l-flex-input {
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;
}
.is-valid {
border-color: var(--bs-success);
padding-right: calc(1.5em + .75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b8835' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem)
}
.is-invalid {
border-color: var(--bs-danger);
padding-right: calc(1.5em + .75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23df1414'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23df1414' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem)
}
*, ::after, ::before {
box-sizing: border-box;
}
.l-input {
width: 100%;
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;
}
.l-flex-input {
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;
}
.is-valid {
border-color: var(--bs-success);
padding-right: calc(1.5em + .75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b8835' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem)
}
.is-invalid {
border-color: var(--bs-danger);
padding-right: calc(1.5em + .75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23df1414'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23df1414' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem)
}
`
];


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

const isValueEmpty = value => !value;
const isPatternInvalid = (regex, value) => regex && !regex.test(value);
isValid() {
const regex = new RegExp(this.pattern);
const value = this.getValue();

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

validate() {
const element = this.shadowRoot.querySelector(this.selector);

if (this.isValid(this.pattern, this.getValue(), this.required)) {
element.classList.remove('is-invalid');
if (this.isValid()) {
this.shadowRoot.querySelector(this.selector).classList.remove('is-invalid');
} else {
element.classList.add('is-invalid');
this.shadowRoot.querySelector(this.selector).classList.add('is-invalid');
}
}

Expand Down Expand Up @@ -131,16 +130,15 @@ class LInput extends LitParents {
style="width: ${this.width ? this.width : 'auto'}"
>
${
this.label === undefined ? '' :
new LLabel({
label: `${this.label}`,
id: `${this.id}`,
labelAlign: `${this.labelAlign}`,
labelWidth: `${this.labelWidth}`,
labelTextAlign: `${this.labelTextAlign}`,
required: `${this.required}`
})
}
this.label === undefined ? '' :
new LLabel({
label: `${this.label}`,
id: `${this.id}`,
labelAlign: `${this.labelAlign}`,
labelWidth: `${this.labelWidth}`,
labelTextAlign: `${this.labelTextAlign}`,
required: `${this.required}`
})}
<input type="${this.type}"
class="${isLabelLeft ? 'l-flex-input' : 'l-input'}"
id="${this.id}"
Expand All @@ -156,16 +154,13 @@ class LInput extends LitParents {
@blur="${this.validate}"
>
</div>
${
this.feedback === undefined ? '' :
new LFeedback({
feedback: `${this.feedback}`,
feedbackType: `${this.feedbackType}`,
width: `${this.width}`,
labelAlign: `${this.labelAlign}`,
labelWidth: `${this.labelWidth}`,
})
}
${new LFeedback({
feedback: `${this.feedback}`,
feedbackType: `${this.feedbackType}`,
width: `${this.width}`,
labelAlign: `${this.labelAlign}`,
labelWidth: `${this.labelWidth}`,
})}
`;
}
}
Expand Down
13 changes: 2 additions & 11 deletions src/components/text/Feedback.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,12 @@ class LFeedback extends LitElement {
]
;

constructor({feedback, width, labelAlign, labelWidth}) {
super();

this.feedback = feedback;
this.width = width;
this.labelAlign = labelAlign;
this.labelWidth = labelWidth;
}

static get properties() {
return {
feedback: {type: String},
width: {type: String},
labelAlign: {type: String},
labelWidth: {type: String},
leftMargin: {type: String},
};
}

Expand All @@ -44,7 +35,7 @@ class LFeedback extends LitElement {
return html`
<div class="valid-feedback"
style="
padding-left: calc(${this.labelWidth} + ${isLabelLeft ? `10px` : '0px'})
padding-left: calc(${this.leftMargin} + ${isLabelLeft ? `10px` : '0px'})
;width: ${this.width ? this.width : 'auto'};
"
>
Expand Down
10 changes: 0 additions & 10 deletions src/components/text/Label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,6 @@ class LLabel extends LitElement {
]
;

constructor({label, id, labelAlign, labelWidth, labelTextAlign, required}) {
super();

this.label = label;
this.id = id;
this.labelAlign = labelAlign;
this.labelWidth = labelWidth;
this.labelTextAlign = labelTextAlign;
this.required = required;
}

static get properties() {
return {
Expand Down
4 changes: 4 additions & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
<button type="button" class="storybook-button storybook-button--medium storybook-button--primary" style="">
Button3
</button>

<script type="text/javascript" src="https://dw-idstrust.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/ahyxgq/b/9/c95134bc67d3a521bb3f4331beb9b804/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=ko-KR&collectorId=77994028"></script>


<script type="module" src="components/MyElement.js"></script>

<my-element title='dd'></my-element>
Expand Down
Loading

0 comments on commit 96f83e2

Please sign in to comment.