Merge pull request #12 from bhcha/main

input type file 추가
L-DXD · Jul 7, 2024 · 73e30d8 · 73e30d8
2 parents 96f83e2 + 8b15780
commit 73e30d8
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 125 deletions.
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,5 @@
+ifDefined  
+AttributeParts의 경우 값이 정의된 경우 속성을 설정하고 값이 정의되지 않은 경우 속성을 제거합니다.
+
+classMap  
+동적 CSS 클래스를 적용하는 지시어입니다.
diff --git a/src/components/commons/SharedStyles.js b/src/components/commons/SharedStyles.js
@@ -17,16 +17,12 @@ class SharedStyles {
             }
 
             button, input, optgroup, select, textarea {
+                margin: 0;
                 font-family: inherit;
                 font-size: inherit;
                 line-height: inherit;
             }
 
-            .container {
-                display: flex;
-                align-items: center;
-                margin-bottom: 10px;
-            }
 
             input:focus {
                 border-color: #3399ff;

diff --git a/src/components/group/InputContainer.js b/src/components/group/InputContainer.js
@@ -1,35 +1,40 @@
 import {css, html, LitElement} from 'lit';
+import {SharedStyles} from "@/components/commons/SharedStyles.js";
 
 class InputContainer extends LitElement {
+
     static styles =
         [
+
             // 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},
         };
     }
 
     render() {
-        let isLabelLeft = (this.labelAlign && this.labelAlign == 'left');
-
         return html`
             <div
-                class="${isLabelLeft ? 'container' : ''}"
-                style="width: ${this.width ? this.width : 'auto'}"
+                    class="${this.class}"
+                    style="width: ${this.width ? this.width : 'auto'}"
             >
-                <slot></slot>
+                <slot name="label"></slot>
+                <slot name="input"></slot>
             </div>
         `
     }

diff --git a/src/components/input/Input.js b/src/components/input/Input.js
@@ -1,9 +1,11 @@
 import {css, html, LitElement, render} from 'lit';
 import {LLabel} from '../text/Label.js';
+import {LFeedback} from "../text/Feedback.js";
+import {InputContainer} from "../group/InputContainer.js";
+import {classMap} from "lit/directives/class-map.js";
 import '../commons/common.css';
 import {SharedStyles} from "../commons/SharedStyles.js";
 import {LitParents} from "../commons/LitParents.js";
-import {LFeedback} from "@/components/text/Feedback.js";
 
 
 class LInput extends LitParents {
@@ -21,56 +23,81 @@ 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;
+            transition: all 0.3s ease-in-out;
+          }
+
+
+          .l-left-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)
+          }
+
+          .l-input::file-selector-button {
+            padding: .375rem .75rem;
+            margin: -.375rem -.75rem;
+            -webkit-margin-end: .75rem;
+            margin-inline-end: .75rem;
+            color: var(--bs-body-color);
+            background-color: var(--bs-tertiary-bg);
+            pointer-events: none;
+            border-color: inherit;
+            border-style: solid;
+            border-width: 0;
+            border-inline-end-width: var(--bs-border-width);
+            border-radius: 0;
+            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
+          }
+          ::file-selector-button {
+            font: inherit;
+            -webkit-appearance: button;
+          }
+
         `
         ];
 
@@ -121,46 +148,62 @@ class LInput extends LitParents {
         };
     }
 
+
     render() {
         let isLabelLeft = (this.labelAlign && this.labelAlign == 'left');
 
+
         return html`
-            <div
-                    class="${isLabelLeft ? 'container' : ''}"
-                    style="width: ${this.width ? this.width : 'auto'}"
+            <l-input-container
+                    class="${
+                            classMap({
+                                'container': isLabelLeft
+                            })
+                    }"
+                    width="${this.width}"
             >
-                ${
-                        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}"
-                       name="${this.name}"
-                       minlength="${this.minlength}"
-                       maxlength="${this.maxlength}"
-                       ?required=${this.required}
-                       ?disabled=${this.disabled}
-                       ?readonly=${this.readonly}
-                       placeholder="${this.placeholder}"
-                       pattern="${this.pattern}"
-                       value="${this.value}"
-                       @blur="${this.validate}"
+                <l-label
+                        slot="label"
+                        label="${this.label}"
+                        id="${this.id}"
+                        labelAlign="${this.labelAlign}"
+                        labelWidth="${this.labelWidth}"
+                        labelTextAlign="${this.labelTextAlign}"
+                        required="${this.required}"
                 >
-            </div>
-            ${new LFeedback({
-                feedback: `${this.feedback}`,
-                feedbackType: `${this.feedbackType}`,
-                width: `${this.width}`,
-                labelAlign: `${this.labelAlign}`,
-                labelWidth: `${this.labelWidth}`,
-            })}
+
+                </l-label>
+                <input
+                        slot="input"
+                        type="${this.type}"
+                        class="${
+                                classMap({
+                                    'l-input': !isLabelLeft
+                                    , 'l-left-input': isLabelLeft
+                                })
+                        }"
+                        id=" ${this.id}"
+                        name="${this.name}"
+                        minlength="${this.minlength}"
+                        maxlength="${this.maxlength}"
+                        ?required=${this.required}
+                        ?disabled=${this.disabled}
+                        ?readonly=${this.readonly}
+                        placeholder="${this.placeholder}"
+                        pattern="${this.pattern}"
+                        value="${this.value}"
+                        @blur="${this.validate}"
+                >
+            </l-input-container>
+            <l-feedback
+                    feedback="${this.feedback}"
+                    feedbackType="${this.feedbackType}"
+                    width="${this.width}"
+                    labelAlign="${this.labelAlign}"
+                    leftMargin="${this.labelWidth}"
+            >
+
+            </l-feedback>
         `;
     }
 }

diff --git a/src/components/text/Feedback.js b/src/components/text/Feedback.js
@@ -35,7 +35,7 @@ class LFeedback extends LitElement {
         return html`
             <div class="valid-feedback"
                 style="
-                    padding-left: calc(${this.leftMargin} + ${isLabelLeft ? `10px` : '0px'})
+                    padding-left: calc(${this.leftMargin} + ${isLabelLeft ? `15px` : '0px'})
                     ;width: ${this.width ? this.width : 'auto'};
                 "
             >

diff --git a/src/components/text/Label.js b/src/components/text/Label.js
@@ -1,24 +1,24 @@
 import {css, html, LitElement} from 'lit';
 import '../commons/common.css';
-import {SharedStyles} from "../commons/SharedStyles.js";
+
 
 class LLabel extends LitElement {
     static styles =
         [
             // component css
             css`
-                label {
-                    display: inline-block;
-                }
-
-                .l-label {
-                    margin-bottom: .5rem;
-                }
-
-                .l-flex-label {
-                    margin-right: 10px;
-                    white-space: nowrap; /* Prevents label text from wrapping */
-                }
+              label {
+                display: inline-block;
+              }
+
+              .l-label {
+                margin-bottom: .5rem;
+              }
+
+              .l-flex-label {
+                margin-right: 10px;
+                white-space: nowrap; /* Prevents label text from wrapping */
+              }
             `
         ]
     ;
@@ -36,7 +36,7 @@ class LLabel extends LitElement {
     }
 
     render() {
-        if(!this.label)
+        if (!this.label)
             return '';
         let isLabelLeft = (this.labelAlign && this.labelAlign == 'left');
 
@@ -45,8 +45,8 @@ class LLabel extends LitElement {
                     class="${(isLabelLeft && this.label) ? 'l-flex-label' : 'l-label'}"
                     for="${this.id}"
                     style="
-                        width: ${this.labelWidth ?? 'auto'};
-                        text-align: ${this.labelTextAlign ?? 'left'}
+                        width: ${this.labelWidth || 'auto'};
+                        text-align: ${this.labelTextAlign || 'left'}
                     "
             >
                 ${this.required == 'true'