Merge pull request #20 from bhcha/main

add : textarea
L-DXD · Aug 2, 2024 · a0446d8 · a0446d8
2 parents 9a1c20b + 75c2673
commit a0446d8
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 50 deletions.
diff --git a/src/components/container/InputContainer.js b/src/components/container/InputContainer.js
@@ -61,7 +61,6 @@ export class InputContainer extends LitParents {
 
     static get properties() {
         return {
-
             id: {type: String},
             class: {type: String},
             width: {type: String},

diff --git a/src/components/input/Input.js b/src/components/input/Input.js
@@ -53,6 +53,12 @@ class LInput extends InputContainer {
         };
     }
 
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        console.log('root', root);
+        return root
+    }
+
     render() {
         let isLabelLeft = (this['label-align'] && this['label-align'] === 'left');
 
@@ -69,7 +75,6 @@ class LInput extends InputContainer {
                     feedback-type="${ifDefined(this['feedback-type'])}"
                     feedback-visible-type="${ifDefined(this['feedback-visible-type'])}"
             >
-                
                 <input
                         slot="input"
                         type="${this['type'] === 'planText' ? 'text' : this['type']}"
@@ -92,7 +97,7 @@ class LInput extends InputContainer {
                         placeholder="${ifDefined(this['placeholder'])}"
                         pattern="${ifDefined(this['pattern'])}"
                         value="${ifDefined(this['value'])}"
-                        @blur="${this['validate']}"
+                        @blur="${super.validate}"
                 >
             </l-input-container>
 

diff --git a/src/components/input/Textarea.js b/src/components/input/Textarea.js
@@ -52,9 +52,11 @@ class LTextarea extends InputContainer {
         };
     }
 
+
     render() {
         let isLabelLeft = (this['label-align'] && this['label-align'] === 'left');
 
+        // type, pattern 삭제
         return html`
             <l-input-container
                     width="${ifDefined(this['width'])}"
@@ -88,10 +90,8 @@ class LTextarea extends InputContainer {
                         ?disabled=${this['disabled']}
                         ?readonly=${this['readonly']}
                         placeholder="${ifDefined(this['placeholder'])}"
-                        pattern="${ifDefined(this['pattern'])}"
-                        value="${ifDefined(this['value'])}"
-                        @blur="${this['validate']}"
-                ></textarea>
+                        @blur="${super.validate}"
+                >${ifDefined(this['value'])}</textarea>
             </l-input-container>
 
         `;

diff --git a/stories/Input.stories.js b/stories/Input.stories.js
@@ -106,6 +106,24 @@ export default {
                 subcategory: "text",
             }
         },
+        'valid-trigger-type': {
+            control: {type: 'select'},
+            options: ['blur', 'change', 'focus'],
+            table: {
+                category: "attribures",
+                subcategory: "validate",
+                defaultValue: {summary: 'blur'},
+            }
+        },
+        'valid-length-type': {
+            control: {type: 'select'},
+            options: ['length', 'byte'],
+            table: {
+                category: "attribures",
+                subcategory: "validate",
+                defaultValue: {summary: 'length'},
+            }
+        },
         maxlength: {
             control: {type: 'number'},
             table: {

diff --git a/stories/Textarea.stories.js b/stories/Textarea.stories.js
@@ -112,14 +112,6 @@ export default {
                 subcategory: "validate",
             }
         },
-        pattern: {
-            control: {type: 'text'},
-            table: {
-                category: "attribures",
-                subcategory: "validate",
-            },
-            description: "ex) [0-9]{3}-[0-9]{4}-[0-9]{4}",
-        },
 
         required: {
             control: 'boolean',
@@ -286,41 +278,6 @@ InputRequireValidity.args = {
     readonly: false,
 };
 
-export const InputPatternValidity = Template.bind({});
-InputPatternValidity.args = {
-    id: 'input01',
-    name: 'name',
-    width: '100%',
-    label: 'Phone',
-    'label-align': 'top',
-    'label-width': 'auto',
-    'label-text-align': 'left',
-    feedback: 'invalid pattern',
-    'feedback-type': 'error',
-    'feedback-visible-type': 'invalid',
-    pattern: '[0-9]{3}-[0-9]{4}-[0-9]{4}',
-    required: false,
-    disabled: false,
-    readonly: false,
-};
-
-export const InputPatternAndRequireValidity = Template.bind({});
-InputPatternAndRequireValidity.args = {
-    id: 'input01',
-    name: 'name',
-    width: '100%',
-    label: 'Phone',
-    'label-align': 'top',
-    'label-width': 'auto',
-    'label-text-align': 'left',
-    feedback: 'invalid value',
-    'feedback-type': 'error',
-    'feedback-visible-type': 'invalid',
-    pattern: '[0-9]{3}-[0-9]{4}-[0-9]{4}',
-    required: true,
-    disabled: false,
-    readonly: false,
-};
 
 const sizeTemplate = (args) => {
     return html`