fix: Input component

Author: shinokada

.changeset/clean-tables-grab.md

@@ -0,0 +1,5 @@
+---
+'svelte-5-ui-lib': patch
+---
+
+fix: Input component

src/app.pcss

@@ -195,6 +195,55 @@
     height: 1.5rem;
     width: 1.5rem;
   }
+  /* input file */
+  [type='file'] {
+    background: unset;
+    border-color: inherit;
+    border-width: 0;
+    border-radius: 0;
+    padding: 0;
+    font-size: unset;
+    line-height: inherit;
+  }
+  
+  [type='file']:focus {
+    outline: 1px auto inherit;
+  }
+  
+  input[type=file]::file-selector-button {
+    color: white;
+    background: #1F2937;
+    border: 0;
+    font-weight: 500;
+    font-size: 0.875rem;
+    cursor: pointer;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+    padding-left: 2rem;
+    padding-right: 1rem;
+    -webkit-margin-start: -1rem;
+            margin-inline-start: -1rem;
+    -webkit-margin-end: 1rem;
+            margin-inline-end: 1rem;
+  }
+  
+  input[type=file]::file-selector-button:hover {
+    background: #374151;
+  }
+  
+  :is([dir=rtl]) input[type=file]::file-selector-button {
+    padding-right: 2rem;
+    padding-left: 1rem;
+  }
+  
+  .dark input[type=file]::file-selector-button {
+    color: white;
+    background: #4B5563;
+  }
+  
+  .dark input[type=file]::file-selector-button:hover {
+    background: #6B7280;
+  }
 
 }
 

src/lib/buttongroup/ButtonGroup.svelte

@@ -10,7 +10,7 @@
   }: Props = $props();
 
   let groupClass = $derived(buttonGroup({ size, className }));
-  setContext('group', { size });
+  setContext('group', size);
 </script>
 
 <div {...attributes} class={groupClass} role="group">

src/lib/forms/checkbox/Checkbox.svelte

@@ -14,7 +14,7 @@
     choices = [],
     checked = $bindable(false),
     spacing,
-    groupLabelClass,
+    classLabel,
     indeterminate,
     class: className,
     ...attributes
@@ -26,7 +26,7 @@
 </script>
 {#if choices.length > 0}
   {#each choices as {value, checkboxLabel}, i}
-    <Label class={label({ class: groupLabelClass })} for={`checkbox-${i}`}>
+    <Label class={label({ class: classLabel })} for={`checkbox-${i}`}>
       { checkboxLabel }
       <input id={`checkbox-${i}`} type="checkbox" value={ value } bind:group {...attributes} 
       class={base({ class: className })}
@@ -37,7 +37,7 @@
     </Label>
   {/each}
 {:else}
-<Label class={label({ class: groupLabelClass })}>
+<Label class={label({ class: classLabel })}>
   <input
     type="checkbox"
     bind:checked
@@ -66,7 +66,7 @@
 @prop group = []
 @prop checked = $bindable(false)
 @prop spacing
-@prop groupLabelClass
+@prop classLabel
 @prop indeterminate
 @prop class: className
 @prop ...attributes

src/lib/forms/checkbox/index.ts

@@ -24,7 +24,7 @@ interface CheckboxProps extends HTMLInputAttributes {
   choices?: CheckboxItem[];
   checked?: boolean | undefined | null;
   spacing?: string | undefined | null;
-  groupLabelClass?: string | undefined;
+  classLabel?: string | undefined;
   indeterminate?: boolean;
   class?: string | undefined | null;
 }

src/lib/forms/fileupload/Fileupload.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { type FileuploadProps as Props, fileupload } from '.'
+  
+  let {
+    files = $bindable(),
+    value = $bindable(),
+    size = 'md',
+    class: className, 
+    ...attributes 
+  }: Props = $props();
+  const base = $derived(fileupload({ size, class: className }));
+</script>
+
+<input type="file" bind:files {...attributes} class={base}/>
+

src/lib/forms/fileupload/index.ts

@@ -0,0 +1,13 @@
+import Fileupload from "./Fileupload.svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { InputProps } from '$lib'
+import { fileupload } from './theme';
+
+interface FileuploadProps extends Omit<HTMLInputAttributes, 'size'> {
+  files?: FileList;
+  value?: any;
+  size?: InputProps['size'];
+  color?: InputProps['color'];
+}
+
+export { Fileupload, fileupload, type FileuploadProps }

src/lib/forms/fileupload/theme.ts

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+export const fileupload = tv({
+  base: 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right p-2.5 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:placeholder-gray-400 border-gray-300 dark:border-gray-600 text-sm rounded-lg border !p-0 dark:text-gray-400',
+  variants: {
+    size: {
+      sm: 'text-xs ps-9 pe-9 p-2',
+      md: 'text-sm ps-10 pe-10 p-2.5',
+      lg: 'sm:text-base ps-11 pe-11 p-3'
+    }
+  }
+});

src/lib/forms/input/Input.svelte

@@ -7,30 +7,15 @@
 
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  import { getContext, type Snippet } from 'svelte';
-  import type { HTMLInputAttributes } from 'svelte/elements';
-
-  interface Props extends HTMLInputAttributes {
-    children?: Snippet;
-    left?: Snippet;
-    right?: Snippet;
-    inputSize?: FormSizeType;
-    value?: any;
-    defaultClass?: string | undefined | null;
-    color?: 'base' | 'green' | 'red';
-    floatClass?: string | undefined | null;
-    classLeft?: string | undefined | null;
-    classRight?: string | undefined | null;
-    class?: string | undefined | null;
-    show?: boolean;
-  }
+  import { getContext } from 'svelte';
+  import { type InputProps as Props, input} from '.'
 
   let {
     children,
     left,
     right,
     value = $bindable(),
-    inputSize,
+    size,
     defaultClass = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right',
     color = 'base',
     floatClass = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400',
@@ -41,80 +26,88 @@
     ...attributes
   }: Props = $props();
 
-  const borderClasses = {
-    base: 'border border-gray-300 dark:border-gray-600',
-    tinted: 'border border-gray-300 dark:border-gray-500',
-    green: 'border border-green-500 dark:border-green-400',
-    red: 'border border-red-500 dark:border-red-400'
-  };
+  // const borderClasses = {
+  //   base: 'border border-gray-300 dark:border-gray-600',
+  //   tinted: 'border border-gray-300 dark:border-gray-500',
+  //   green: 'border border-green-500 dark:border-green-400',
+  //   red: 'border border-red-500 dark:border-red-400'
+  // };
 
-  const ringClasses = {
-    base: 'focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500',
-    green:
-      'focus:ring-green-500 focus:border-green-500 dark:focus:border-green-500 dark:focus:ring-green-500',
-    red: 'focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500'
-  };
+  // const ringClasses = {
+  //   base: 'focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500',
+  //   green:
+  //     'focus:ring-green-500 focus:border-green-500 dark:focus:border-green-500 dark:focus:ring-green-500',
+  //   red: 'focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500'
+  // };
 
-  const colorClasses = {
-    base: 'bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400',
-    tinted:
-      'bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400',
-    green:
-      'bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-gray-700',
-    red: 'bg-red-50 text-red-900 placeholder-red-700 dark:text-red-500 dark:placeholder-red-500 dark:bg-gray-700'
-  };
+  // const colorClasses = {
+  //   base: 'bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400',
+  //   tinted:
+  //     'bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400',
+  //   green:
+  //     'bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-gray-700',
+  //   red: 'bg-red-50 text-red-900 placeholder-red-700 dark:text-red-500 dark:placeholder-red-500 dark:bg-gray-700'
+  // };
 
   // tinted if put in component having its own background
   let background: boolean = getContext('background');
 
   let group: { size: SizeType } = getContext('group');
-  // console.log('group', group);
+  let isGroup = !!group;
+  // console.log('isGroup', isGroup);
 
-  const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
-  const leftPadding = { sm: 'ps-9', md: 'ps-10', lg: 'ps-11' };
-  const rightPadding = { sm: 'pe-9', md: 'pe-10', lg: 'pe-11' };
-  const inputPadding = { sm: 'p-2', md: 'p-2.5', lg: 'p-3' };
+  // const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
+  // const leftPadding = { sm: 'ps-9', md: 'ps-10', lg: 'ps-11' };
+  // const rightPadding = { sm: 'pe-9', md: 'pe-10', lg: 'pe-11' };
+  // const inputPadding = { sm: 'p-2', md: 'p-2.5', lg: 'p-3' };
 
-  let _size = inputSize || clampSize(group?.size) || 'md';
+  let _size = $derived(size || clampSize(group?.size) || 'md');
   const _color = $derived(color === 'base' && background ? 'tinted' : color);
-  let inputClass = $derived(
-    twMerge(
-      defaultClass,
-      inputPadding[_size],
-      (left && leftPadding[_size]) || (right && rightPadding[_size]),
-      ringClasses[color],
-      colorClasses[_color],
-      borderClasses[_color],
-      textSizes[_size],
-      group ? '' : 'rounded-lg',
-      group && 'first:rounded-s-lg last:rounded-e-lg',
-      group && '[&:not(:first-child)]:-ms-px',
-      className
-    )
-  );
+
+  const { input:inputCls, left: leftCls, right: rightCls } = $derived(input({ size:_size, color:_color, group:isGroup, class: className }));
+  // let inputClass = $derived(
+  //   twMerge(
+  //     defaultClass,
+  //     inputPadding[_size],
+  //     (left && leftPadding[_size]) || (right && rightPadding[_size]),
+  //     ringClasses[color],
+  //     colorClasses[_color],
+  //     borderClasses[_color],
+  //     textSizes[_size],
+  //     group ? '' : 'rounded-lg',
+  //     group && 'first:rounded-s-lg last:rounded-e-lg',
+  //     group && '[&:not(:first-child)]:-ms-px',
+  //     className
+  //   )
+  // );
 </script>
 
-<div class="relative w-full">
+{#snippet inputContent()}
   {#if left}
     <div
-      class="{twMerge(
-        floatClass,
-        classLeft
-      )} pointer-events-none start-0 ps-2.5"
+      class={leftCls({ class: classLeft})}
     >
       {@render left()}
     </div>
   {/if}
-  <input {...attributes} bind:value class={inputClass} />
+  <input {...attributes} bind:value class={inputCls({ class: className })} />
   {#if children}
     {@render children()}
   {/if}
   {#if right}
-    <div class="{twMerge(floatClass, classRight)} end-0 pe-2.5">
+    <div class={rightCls({ class: classRight })}>
       {@render right()}
     </div>
   {/if}
-</div>
+{/snippet}
+
+{#if group}
+  {@render inputContent()}
+{:else}
+  <div class="relative w-full">
+    {@render inputContent()}
+  </div>
+{/if}
 
 <!--
 @component
@@ -124,7 +117,7 @@
 @prop left
 @prop right
 @prop value = $bindable()
-@prop inputSize
+@prop size
 @prop defaultClass = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right'
 @prop color = 'base'
 @prop floatClass = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400'

src/lib/forms/input/index.ts

@@ -1,3 +1,22 @@
 import Input from './Input.svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { FormSizeType } from '$lib/types';
+import type { Snippet } from 'svelte';
+import { input } from './theme';
 
-export { Input };
+interface InputProps extends Omit<HTMLInputAttributes, 'size'>  {
+  children?: Snippet;
+  left?: Snippet;
+  right?: Snippet;
+  size?: FormSizeType;
+  value?: any;
+  defaultClass?: string | undefined | null;
+  color?: 'base' | 'green' | 'red';
+  floatClass?: string | undefined | null;
+  classLeft?: string | undefined | null;
+  classRight?: string | undefined | null;
+  class?: string | undefined | null;
+  show?: boolean;
+}
+
+export { Input, input, type InputProps };