@ims360/svelte-ivory 0.5.3 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/components/basic/toggle/Toggle.svelte +1 -0
  2. package/dist/components/basic/toggle/Toggle.svelte.d.ts +1 -0
  3. package/dist/components/basic/toggle/Toggle.svelte.d.ts.map +1 -1
  4. package/dist/components/inputs/ColorInput.svelte +2 -1
  5. package/dist/components/inputs/Input.svelte +9 -13
  6. package/dist/components/inputs/Input.svelte.d.ts +6 -16
  7. package/dist/components/inputs/Input.svelte.d.ts.map +1 -1
  8. package/dist/components/inputs/PasswordCreateInput.svelte +1 -1
  9. package/dist/components/inputs/PasswordInput.svelte +2 -12
  10. package/dist/components/inputs/PasswordInput.svelte.d.ts +0 -1
  11. package/dist/components/inputs/PasswordInput.svelte.d.ts.map +1 -1
  12. package/dist/components/inputs/ToggleInput.svelte +2 -2
  13. package/dist/components/inputs/index.d.ts +0 -1
  14. package/dist/components/inputs/index.d.ts.map +1 -1
  15. package/dist/components/inputs/index.js +0 -1
  16. package/dist/components/layout/modal/Modal.svelte +1 -6
  17. package/dist/components/layout/modal/Modal.svelte.d.ts +1 -5
  18. package/dist/components/layout/modal/Modal.svelte.d.ts.map +1 -1
  19. package/package.json +4 -4
  20. package/src/lib/components/basic/toggle/Toggle.svelte +1 -0
  21. package/src/lib/components/inputs/ColorInput.svelte +2 -1
  22. package/src/lib/components/inputs/Input.svelte +9 -13
  23. package/src/lib/components/inputs/PasswordCreateInput.svelte +1 -1
  24. package/src/lib/components/inputs/PasswordInput.svelte +2 -12
  25. package/src/lib/components/inputs/ToggleInput.svelte +2 -2
  26. package/src/lib/components/inputs/index.ts +0 -1
  27. package/src/lib/components/layout/modal/Modal.svelte +1 -6
  28. package/dist/components/inputs/TextareaInput.svelte +0 -23
  29. package/dist/components/inputs/TextareaInput.svelte.d.ts +0 -7
  30. package/dist/components/inputs/TextareaInput.svelte.d.ts.map +0 -1
  31. package/src/lib/components/inputs/TextareaInput.svelte +0 -23
package/dist/components/basic/toggle/Toggle.svelte CHANGED
@@ -8,6 +8,7 @@
8
8
  value?: boolean;
9
9
  class?: ClassValue;
10
10
  children?: Snippet;
11
+ onclick?: () => void;
11
12
  };
12
13
  </script>
13
14
 
package/dist/components/basic/toggle/Toggle.svelte.d.ts CHANGED
@@ -5,6 +5,7 @@ export type ToggleProps = IvoryComponent<HTMLElement> & {
5
5
  value?: boolean;
6
6
  class?: ClassValue;
7
7
  children?: Snippet;
8
+ onclick?: () => void;
8
9
  };
9
10
  declare const Toggle: import("svelte").Component<ToggleProps, {}, "">;
10
11
  type Toggle = ReturnType<typeof Toggle>;
package/dist/components/basic/toggle/Toggle.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AA8BN,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AA8BN,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
package/dist/components/inputs/ColorInput.svelte CHANGED
@@ -6,7 +6,7 @@
6
6
  </script>
7
7
 
8
8
  <Input {...props}>
9
- {#snippet children({ id, class: inputClass })}
9
+ {#snippet children({ id, class: inputClass, ...inputProps })}
10
10
  <div class={merge(inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0')}>
11
11
  <input
12
12
  type="text"
@@ -17,6 +17,7 @@
17
17
  class={['h-full rounded', INPUT_UNSET_OUTLINE]}
18
18
  {id}
19
19
  {...props.form.as('color')}
20
+ {...inputProps}
20
21
  />
21
22
  </div>
22
23
  {/snippet}
package/dist/components/inputs/Input.svelte CHANGED
@@ -3,20 +3,18 @@
3
3
  import { merge, pseudoRandomId } from '../../utils/functions';
4
4
  import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
5
5
  import type { Snippet } from 'svelte';
6
- import type { ClassValue } from 'svelte/elements';
6
+ import type { HTMLAttributes } from 'svelte/elements';
7
7
  import { slide } from 'svelte/transition';
8
8
  import FormIssues from './issues/FormIssues.svelte';
9
9
 
10
- interface CommonProps {
11
- id?: string;
12
- class?: ClassValue;
13
- style?: string;
10
+ export interface InputProps<T extends RemoteFormFieldValue> extends Omit<
11
+ HTMLAttributes<HTMLInputElement>,
12
+ 'children'
13
+ > {
14
+ form: RemoteFormField<T>;
14
15
  label?: string;
15
16
  disabled?: boolean;
16
- }
17
-
18
- export interface InputProps<T extends RemoteFormFieldValue> extends CommonProps {
19
- form: RemoteFormField<T>;
17
+ fixTitle?: boolean;
20
18
  }
21
19
 
22
20
  export const INPUT_UNSET_OUTLINE =
@@ -24,10 +22,8 @@
24
22
  </script>
25
23
 
26
24
  <script lang="ts" generics="T extends RemoteFormFieldValue">
27
- interface Props<K extends RemoteFormFieldValue> extends CommonProps {
28
- children: Snippet<[{ class: string; id: string; disabled?: boolean }]>;
29
- fixTitle?: boolean;
30
- form: Pick<RemoteFormField<K>, 'value' | 'issues'>;
25
+ interface Props<K extends RemoteFormFieldValue> extends InputProps<K> {
26
+ children: Snippet<[HTMLAttributes<HTMLInputElement>]>;
31
27
  }
32
28
 
33
29
  let {
package/dist/components/inputs/Input.svelte.d.ts CHANGED
@@ -1,25 +1,15 @@
1
1
  import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
2
2
  import type { Snippet } from 'svelte';
3
- import type { ClassValue } from 'svelte/elements';
4
- interface CommonProps {
5
- id?: string;
6
- class?: ClassValue;
7
- style?: string;
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+ export interface InputProps<T extends RemoteFormFieldValue> extends Omit<HTMLAttributes<HTMLInputElement>, 'children'> {
5
+ form: RemoteFormField<T>;
8
6
  label?: string;
9
7
  disabled?: boolean;
10
- }
11
- export interface InputProps<T extends RemoteFormFieldValue> extends CommonProps {
12
- form: RemoteFormField<T>;
8
+ fixTitle?: boolean;
13
9
  }
14
10
  export declare const INPUT_UNSET_OUTLINE = "border-none outline-none ring-transparent focus:outline-none";
15
- interface Props<K extends RemoteFormFieldValue> extends CommonProps {
16
- children: Snippet<[{
17
- class: string;
18
- id: string;
19
- disabled?: boolean;
20
- }]>;
21
- fixTitle?: boolean;
22
- form: Pick<RemoteFormField<K>, 'value' | 'issues'>;
11
+ interface Props<K extends RemoteFormFieldValue> extends InputProps<K> {
12
+ children: Snippet<[HTMLAttributes<HTMLInputElement>]>;
23
13
  }
24
14
  declare function $$render<T extends RemoteFormFieldValue>(): {
25
15
  props: Props<T>;
package/dist/components/inputs/Input.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/Input.svelte.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/Input.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAItD,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,oBAAoB,CAAE,SAAQ,IAAI,CACpE,cAAc,CAAC,gBAAgB,CAAC,EAChC,UAAU,CACb;IACG,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,iEACkC,CAAC;AAEnE,UAAU,KAAK,CAAC,CAAC,SAAS,oBAAoB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACjE,QAAQ,EAAE,OAAO,CAAC,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;CACzD;AAAC,iBAAS,QAAQ,CAAC,CAAC,SAAS,oBAAoB;WAiEzB,KAAK,CAAC,CAAC,CAAC;;;;;EAA4E;AACjH,cAAM,iBAAiB,CAAC,CAAC,SAAS,oBAAoB;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,oBAAoB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACzZ,CAAC,CAAC,SAAS,oBAAoB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACxJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,KAAK,EAAE,qBAAmC,CAAC;AAC/B,KAAK,KAAK,CAAC,CAAC,SAAS,oBAAoB,IAAI,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7E,eAAe,KAAK,CAAC"}
package/dist/components/inputs/PasswordCreateInput.svelte CHANGED
@@ -24,7 +24,7 @@
24
24
  </script>
25
25
 
26
26
  <div bind:this={target} class={['bg-inherit ', clazz]}>
27
- <PasswordInput {...props} newPassword onfocusin={popover?.open} onfocusout={popover?.close} />
27
+ <PasswordInput {...props} onfocusin={popover?.open} onfocusout={popover?.close} />
28
28
  </div>
29
29
 
30
30
  <Popover
package/dist/components/inputs/PasswordInput.svelte CHANGED
@@ -3,25 +3,15 @@
3
3
  import Input from './Input.svelte';
4
4
 
5
5
  type Props = InputProps<string> & {
6
- newPassword?: boolean;
7
6
  onfocusin?: () => void;
8
7
  onfocusout?: () => void;
9
8
  };
10
9
 
11
- let { newPassword = false, onfocusin, onfocusout, ...props }: Props = $props();
10
+ let { onfocusin, onfocusout, ...props }: Props = $props();
12
11
  </script>
13
12
 
14
13
  <Input {...props}>
15
14
  {#snippet children(inputProps)}
16
- <input
17
- {...inputProps}
18
- {...props.form.as?.('password')}
19
- type="password"
20
- autocapitalize="off"
21
- autocomplete={newPassword ? 'new-password' : 'current-password'}
22
- required
23
- {onfocusin}
24
- {onfocusout}
25
- />
15
+ <input {...inputProps} {...props.form.as?.('password')} {onfocusin} {onfocusout} />
26
16
  {/snippet}
27
17
  </Input>
package/dist/components/inputs/PasswordInput.svelte.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import type { InputProps } from './Input.svelte';
2
2
  type Props = InputProps<string> & {
3
- newPassword?: boolean;
4
3
  onfocusin?: () => void;
5
4
  onfocusout?: () => void;
6
5
  };
package/dist/components/inputs/PasswordInput.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/PasswordInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI7C,KAAK,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAiBN,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/PasswordInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI7C,KAAK,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAiBN,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
package/dist/components/inputs/ToggleInput.svelte CHANGED
@@ -8,8 +8,8 @@
8
8
  const value = $derived(form.value());
9
9
  </script>
10
10
 
11
- <div class={['flex flex-col gap-2', clazz]} {...props}>
12
- <input {...form.as('checkbox')} class="hidden" />
11
+ <div class={['flex flex-col gap-2', clazz]}>
12
+ <input {...form.as('checkbox')} class="hidden" {...props} />
13
13
  <button
14
14
  type="button"
15
15
  class="flex flex-row items-center gap-2"
package/dist/components/inputs/index.d.ts CHANGED
@@ -10,7 +10,6 @@ export { default as PasswordCreateInput, type PasswordCreateInputProps, type Pas
10
10
  export { default as PasswordInput } from './PasswordInput.svelte';
11
11
  export { default as Select } from './select/Select.svelte';
12
12
  export { default as SelectOption } from './select/SelectOption.svelte';
13
- export { default as TextareaInput } from './TextareaInput.svelte';
14
13
  export { default as TextInput } from './TextInput.svelte';
15
14
  export { default as ToggleInput } from './ToggleInput.svelte';
16
15
  //# sourceMappingURL=index.d.ts.map
package/dist/components/inputs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EACH,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,EAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACH,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EAC3B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EACH,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,EAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACH,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EAC3B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
package/dist/components/inputs/index.js CHANGED
@@ -10,6 +10,5 @@ export { default as PasswordCreateInput } from './PasswordCreateInput.svelte';
10
10
  export { default as PasswordInput } from './PasswordInput.svelte';
11
11
  export { default as Select } from './select/Select.svelte';
12
12
  export { default as SelectOption } from './select/SelectOption.svelte';
13
- export { default as TextareaInput } from './TextareaInput.svelte';
14
13
  export { default as TextInput } from './TextInput.svelte';
15
14
  export { default as ToggleInput } from './ToggleInput.svelte';
package/dist/components/layout/modal/Modal.svelte CHANGED
@@ -17,12 +17,7 @@
17
17
  </script>
18
18
 
19
19
  <script lang="ts">
20
- interface Props extends ModalProps {
21
- /** If you don't want the title and close button to be included you can overwrite the default modal */
22
- inner?: Snippet;
23
- }
24
-
25
- let { children, dialog: dialogProps = {}, ...props }: Props = $props();
20
+ let { children, dialog: dialogProps = {}, ...props }: ModalProps = $props();
26
21
 
27
22
  let dialog = $state<Dialog>();
28
23
 
package/dist/components/layout/modal/Modal.svelte.d.ts CHANGED
@@ -11,12 +11,8 @@ export type ModalProps = IvoryComponent<HTMLDivElement> & {
11
11
  children?: Snippet;
12
12
  onclick?: MouseEventHandler<HTMLDivElement>;
13
13
  };
14
- interface Props extends ModalProps {
15
- /** If you don't want the title and close button to be included you can overwrite the default modal */
16
- inner?: Snippet;
17
- }
18
14
  /** A modal inside a dialog element */
19
- declare const Modal: import("svelte").Component<Props, {
15
+ declare const Modal: import("svelte").Component<ModalProps, {
20
16
  close: () => void | undefined;
21
17
  open: () => void | undefined;
22
18
  isOpen: () => boolean | undefined;
package/dist/components/layout/modal/Modal.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACtD,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAuCL,sCAAsC;AACtC,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACtD,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAsCN,sCAAsC;AACtC,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ims360/svelte-ivory",
3
- "version": "0.5.3",
3
+ "version": "0.5.4",
4
4
  "keywords": [
5
5
  "svelte"
6
6
  ],
@@ -88,12 +88,12 @@
88
88
  "@sveltejs/adapter-auto": "^7.0.1",
89
89
  "@sveltejs/kit": "^2.55.0",
90
90
  "@sveltejs/package": "^2.5.7",
91
- "@sveltejs/vite-plugin-svelte": "^6.2.4",
91
+ "@sveltejs/vite-plugin-svelte": "^7.3.0",
92
92
  "@testing-library/jest-dom": "^6.9.1",
93
93
  "@testing-library/svelte": "^5.3.1",
94
94
  "@testing-library/user-event": "^14.6.1",
95
95
  "@vitest/browser": "^4.1.4",
96
- "@vitest/coverage-v8": "^4.1.4",
96
+ "@vitest/coverage-v8": "^4.1.5",
97
97
  "@vitest/spy": "^4.1.4",
98
98
  "eslint": "^10.0.2",
99
99
  "eslint-config-prettier": "^10.1.8",
@@ -107,7 +107,7 @@
107
107
  "svelte-check": "^4.4.4",
108
108
  "typescript": "^5.9.3",
109
109
  "typescript-eslint": "^8.56.1",
110
- "vite": "^7.0.0",
110
+ "vite": "^8.0.0",
111
111
  "vitest": "^4.1.4",
112
112
  "zod": "^4.3.6"
113
113
  },
package/src/lib/components/basic/toggle/Toggle.svelte CHANGED
@@ -8,6 +8,7 @@
8
8
  value?: boolean;
9
9
  class?: ClassValue;
10
10
  children?: Snippet;
11
+ onclick?: () => void;
11
12
  };
12
13
  </script>
13
14
 
package/src/lib/components/inputs/ColorInput.svelte CHANGED
@@ -6,7 +6,7 @@
6
6
  </script>
7
7
 
8
8
  <Input {...props}>
9
- {#snippet children({ id, class: inputClass })}
9
+ {#snippet children({ id, class: inputClass, ...inputProps })}
10
10
  <div class={merge(inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0')}>
11
11
  <input
12
12
  type="text"
@@ -17,6 +17,7 @@
17
17
  class={['h-full rounded', INPUT_UNSET_OUTLINE]}
18
18
  {id}
19
19
  {...props.form.as('color')}
20
+ {...inputProps}
20
21
  />
21
22
  </div>
22
23
  {/snippet}
package/src/lib/components/inputs/Input.svelte CHANGED
@@ -3,20 +3,18 @@
3
3
  import { merge, pseudoRandomId } from '$lib/utils/functions';
4
4
  import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
5
5
  import type { Snippet } from 'svelte';
6
- import type { ClassValue } from 'svelte/elements';
6
+ import type { HTMLAttributes } from 'svelte/elements';
7
7
  import { slide } from 'svelte/transition';
8
8
  import FormIssues from './issues/FormIssues.svelte';
9
9
 
10
- interface CommonProps {
11
- id?: string;
12
- class?: ClassValue;
13
- style?: string;
10
+ export interface InputProps<T extends RemoteFormFieldValue> extends Omit<
11
+ HTMLAttributes<HTMLInputElement>,
12
+ 'children'
13
+ > {
14
+ form: RemoteFormField<T>;
14
15
  label?: string;
15
16
  disabled?: boolean;
16
- }
17
-
18
- export interface InputProps<T extends RemoteFormFieldValue> extends CommonProps {
19
- form: RemoteFormField<T>;
17
+ fixTitle?: boolean;
20
18
  }
21
19
 
22
20
  export const INPUT_UNSET_OUTLINE =
@@ -24,10 +22,8 @@
24
22
  </script>
25
23
 
26
24
  <script lang="ts" generics="T extends RemoteFormFieldValue">
27
- interface Props<K extends RemoteFormFieldValue> extends CommonProps {
28
- children: Snippet<[{ class: string; id: string; disabled?: boolean }]>;
29
- fixTitle?: boolean;
30
- form: Pick<RemoteFormField<K>, 'value' | 'issues'>;
25
+ interface Props<K extends RemoteFormFieldValue> extends InputProps<K> {
26
+ children: Snippet<[HTMLAttributes<HTMLInputElement>]>;
31
27
  }
32
28
 
33
29
  let {
package/src/lib/components/inputs/PasswordCreateInput.svelte CHANGED
@@ -24,7 +24,7 @@
24
24
  </script>
25
25
 
26
26
  <div bind:this={target} class={['bg-inherit ', clazz]}>
27
- <PasswordInput {...props} newPassword onfocusin={popover?.open} onfocusout={popover?.close} />
27
+ <PasswordInput {...props} onfocusin={popover?.open} onfocusout={popover?.close} />
28
28
  </div>
29
29
 
30
30
  <Popover
package/src/lib/components/inputs/PasswordInput.svelte CHANGED
@@ -3,25 +3,15 @@
3
3
  import Input from './Input.svelte';
4
4
 
5
5
  type Props = InputProps<string> & {
6
- newPassword?: boolean;
7
6
  onfocusin?: () => void;
8
7
  onfocusout?: () => void;
9
8
  };
10
9
 
11
- let { newPassword = false, onfocusin, onfocusout, ...props }: Props = $props();
10
+ let { onfocusin, onfocusout, ...props }: Props = $props();
12
11
  </script>
13
12
 
14
13
  <Input {...props}>
15
14
  {#snippet children(inputProps)}
16
- <input
17
- {...inputProps}
18
- {...props.form.as?.('password')}
19
- type="password"
20
- autocapitalize="off"
21
- autocomplete={newPassword ? 'new-password' : 'current-password'}
22
- required
23
- {onfocusin}
24
- {onfocusout}
25
- />
15
+ <input {...inputProps} {...props.form.as?.('password')} {onfocusin} {onfocusout} />
26
16
  {/snippet}
27
17
  </Input>
package/src/lib/components/inputs/ToggleInput.svelte CHANGED
@@ -8,8 +8,8 @@
8
8
  const value = $derived(form.value());
9
9
  </script>
10
10
 
11
- <div class={['flex flex-col gap-2', clazz]} {...props}>
12
- <input {...form.as('checkbox')} class="hidden" />
11
+ <div class={['flex flex-col gap-2', clazz]}>
12
+ <input {...form.as('checkbox')} class="hidden" {...props} />
13
13
  <button
14
14
  type="button"
15
15
  class="flex flex-row items-center gap-2"
package/src/lib/components/inputs/index.ts CHANGED
@@ -17,6 +17,5 @@ export {
17
17
  export { default as PasswordInput } from './PasswordInput.svelte';
18
18
  export { default as Select } from './select/Select.svelte';
19
19
  export { default as SelectOption } from './select/SelectOption.svelte';
20
- export { default as TextareaInput } from './TextareaInput.svelte';
21
20
  export { default as TextInput } from './TextInput.svelte';
22
21
  export { default as ToggleInput } from './ToggleInput.svelte';
package/src/lib/components/layout/modal/Modal.svelte CHANGED
@@ -17,12 +17,7 @@
17
17
  </script>
18
18
 
19
19
  <script lang="ts">
20
- interface Props extends ModalProps {
21
- /** If you don't want the title and close button to be included you can overwrite the default modal */
22
- inner?: Snippet;
23
- }
24
-
25
- let { children, dialog: dialogProps = {}, ...props }: Props = $props();
20
+ let { children, dialog: dialogProps = {}, ...props }: ModalProps = $props();
26
21
 
27
22
  let dialog = $state<Dialog>();
28
23
 
package/dist/components/inputs/TextareaInput.svelte DELETED
@@ -1,23 +0,0 @@
1
- <script lang="ts">
2
- import TextArea from '../basic/Textarea.svelte';
3
- import Input, { type InputProps } from './Input.svelte';
4
-
5
- let { ...props }: InputProps<string> = $props();
6
-
7
- let inputElement = $state<TextArea>();
8
- export function focus() {
9
- inputElement?.focus();
10
- }
11
- </script>
12
-
13
- <Input {...props}>
14
- {#snippet children(inputProps)}
15
- {@const { name } = props.form.as('text')}
16
- <TextArea
17
- {...inputProps}
18
- {name}
19
- bind:value={props.form.value, props.form.set}
20
- bind:this={inputElement}
21
- />
22
- {/snippet}
23
- </Input>
package/dist/components/inputs/TextareaInput.svelte.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import { type InputProps } from './Input.svelte';
2
- declare const TextareaInput: import("svelte").Component<InputProps<string>, {
3
- focus: () => void;
4
- }, "">;
5
- type TextareaInput = ReturnType<typeof TextareaInput>;
6
- export default TextareaInput;
7
- //# sourceMappingURL=TextareaInput.svelte.d.ts.map
package/dist/components/inputs/TextareaInput.svelte.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextareaInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/TextareaInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAuBxD,QAAA,MAAM,aAAa;;MAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
package/src/lib/components/inputs/TextareaInput.svelte DELETED
@@ -1,23 +0,0 @@
1
- <script lang="ts">
2
- import TextArea from '../basic/Textarea.svelte';
3
- import Input, { type InputProps } from './Input.svelte';
4
-
5
- let { ...props }: InputProps<string> = $props();
6
-
7
- let inputElement = $state<TextArea>();
8
- export function focus() {
9
- inputElement?.focus();
10
- }
11
- </script>
12
-
13
- <Input {...props}>
14
- {#snippet children(inputProps)}
15
- {@const { name } = props.form.as('text')}
16
- <TextArea
17
- {...inputProps}
18
- {name}
19
- bind:value={props.form.value, props.form.set}
20
- bind:this={inputElement}
21
- />
22
- {/snippet}
23
- </Input>