fix: add missing fields to $$Props in FloatingLableInput (#1461)

themesberg · Oct 27, 2024 · 294397b · 294397b
1 parent 2ab9a76
commit 294397b
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 11 deletions.
diff --git a/src/lib/forms/FloatingLabelInput.svelte b/src/lib/forms/FloatingLabelInput.svelte
@@ -11,6 +11,9 @@
     size?: 'small' | 'default';
     color?: 'base' | 'green' | 'red';
     value?: any;
+    classDiv?: string;
+    classInput?: string;
+    classLabel?: string;
   }
 
   export let id: $$Props['id'] = generateId();
@@ -19,6 +22,9 @@
   export let size: NonNullable<$$Props['size']> = 'default';
   export let color: NonNullable<$$Props['color']> = 'base';
   export let value: $$Props['value'] = undefined;
+  export let classDiv: $$Props['classDiv'] = '';
+  export let classInput: $$Props['classInput'] = '';
+  export let classLabel: $$Props['classLabel'] = '';
 
   const divClasses = {
     filled: 'relative',
@@ -81,10 +87,10 @@
   };
 </script>
 
-<div class={twMerge(divClasses[style], $$props.classDiv)}>
-  <input {id} {...$$restProps} bind:value on:blur on:change on:click on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...{ type }} placeholder=" " class={twMerge(inputClasses[style], inputColorClasses[color], inputSizes[style][size], $$props.classInput)} />
+<div class={twMerge(divClasses[style], classDiv)}>
+  <input {id} {...$$restProps} bind:value on:blur on:change on:click on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...{ type }} placeholder=" " class={twMerge(inputClasses[style], inputColorClasses[color], inputSizes[style][size], classInput)} />
 
-  <label for={id} class={twMerge(labelClasses[style], labelColorClasses[color], labelSizes[style][size], $$props.classLabel)}>
+  <label for={id} class={twMerge(labelClasses[style], labelColorClasses[color], labelSizes[style][size], classLabel)}>
     <slot />
   </label>
 </div>
@@ -99,4 +105,7 @@
 @prop export let size: NonNullable<$$Props['size']> = 'default';
 @prop export let color: NonNullable<$$Props['color']> = 'base';
 @prop export let value: $$Props['value'] = undefined;
+@prop export let classDiv: $$Props['classDiv'] = '';
+@prop export let classInput: $$Props['classInput'] = '';
+@prop export let classLabel: $$Props['classLabel'] = '';
 -->
diff --git a/src/routes/component-data/FloatingLabelInput.json b/src/routes/component-data/FloatingLabelInput.json
@@ -1,13 +1,65 @@
 {
   "name": "FloatingLabelInput",
   "slots": [],
-  "events": ["blur", "change", "click", "focus", "input", "keydown", "keypress", "keyup", "mouseenter", "mouseleave", "mouseover", "paste"],
+  "events": [
+    "blur",
+    "change",
+    "click",
+    "focus",
+    "input",
+    "keydown",
+    "keypress",
+    "keyup",
+    "mouseenter",
+    "mouseleave",
+    "mouseover",
+    "paste"
+  ],
   "props": [
-    ["id?", "string", "generateId()"],
-    ["style?", "'filled' | 'outlined' | 'standard'", ""],
-    ["type?", "InputType", ""],
-    ["size?", "'small' | 'default'", ""],
-    ["color?", "'base' | 'green' | 'red'", ""],
-    ["value?", "any", "undefined"]
+    [
+      "id?",
+      "string",
+      "generateId()"
+    ],
+    [
+      "style?",
+      "'filled' | 'outlined' | 'standard'",
+      ""
+    ],
+    [
+      "type?",
+      "InputType",
+      ""
+    ],
+    [
+      "size?",
+      "'small' | 'default'",
+      ""
+    ],
+    [
+      "color?",
+      "'base' | 'green' | 'red'",
+      ""
+    ],
+    [
+      "value?",
+      "any",
+      "undefined"
+    ],
+    [
+      "classDiv?",
+      "string",
+      "''"
+    ],
+    [
+      "classInput?",
+      "string",
+      "''"
+    ],
+    [
+      "classLabel?",
+      "string",
+      "''"
+    ]
   ]
-}
+}