@hkdigital/lib-sveltekit 0.2.8 → 0.2.10

package/dist/components/icons/SteezeIcon.svelte

@@ -1,97 +1,97 @@
-<script>
-  /**
-   * Steeze like icon component
-   * The main difference with the original Steeze svelte component is that
-   * the component follows the conventions used for components in
-   * this library
-   *
-   * @see https://github.com/steeze-ui/icons
-   *
-   * Install icons
-   * For icon packs @see https://github.com/steeze-ui/icons
-   *
-   * @eg install Hero Icons
-   *
-   * pnpm add -D @steeze-ui/heroicons
-   */
-
-  /**
-   * Properties
-   * ----------
-   * src - icon component
-   * size - width and height of the icon as percentage (..%) or in pixels
-   * theme - name of the icon theme (e.g. 'solid' or 'outline')
-   *
-   * @type {{
-   *   src: import('./typedef.js').IconSource,
-   *   size?: string,
-   *   theme?: string,
-   *   base?: string,
-   *   classes?: string
-   * } & { [attr: string]: any }}
-   */
-  let {
-    // Style
-    base,
-    classes,
-
-    size = 'md',
-    variant = '',
-
-    // Functional
-    src,
-    theme = 'default', // icon theme 'default'|'solid'|'outline'...
-
-    // States
-    // ...
-
-    // Attributes
-    ...attrs
-  } = $props();
-
-  /** @type {any} */
-  let icon = $state();
-
-  $effect(() => {
-    icon = src?.[theme] ?? src?.['default'] ?? Object.values(src)?.[0];
-  });
-
-  // if (size !== '100%') {
-  //   if (size.slice(-1) !== '%') {
-  //     try {
-  //       size = parseInt(size, 10) + 'px';
-  //     } catch (error) {
-  //       size = '100%';
-  //     }
-  //   }
-  // }
-</script>
-
-<svg
-  data-component="icon"
-  data-type="steeze"
-  data-size={size}
-  {...icon?.a}
-  xmlns="http://www.w3.org/2000/svg"
-  class="{base} {classes}"
-  {...attrs}
->
-  {#each icon?.path ?? [] as a}
-    <path {...a} />
-  {/each}
-  {#each icon?.rect ?? [] as a}
-    <rect {...a} />
-  {/each}
-  {#each icon?.circle ?? [] as a}
-    <circle {...a} />
-  {/each}
-  {#each icon?.polygon ?? [] as a}
-    <polygon {...a} />
-  {/each}
-  {#each icon?.polyline ?? [] as a}
-    <polyline {...a} />
-  {/each}
-  {#each icon?.line ?? [] as a}
-    <line {...a} />
-  {/each}
-</svg>
+<script>
+  /**
+   * Steeze like icon component
+   * The main difference with the original Steeze svelte component is that
+   * the component follows the conventions used for components in
+   * this library
+   *
+   * @see https://github.com/steeze-ui/icons
+   *
+   * Install icons
+   * For icon packs @see https://github.com/steeze-ui/icons
+   *
+   * @eg install Hero Icons
+   *
+   * pnpm add -D @steeze-ui/heroicons
+   */
+
+  /**
+   * Properties
+   * ----------
+   * src - icon component
+   * size - width and height of the icon as percentage (..%) or in pixels
+   * theme - name of the icon theme (e.g. 'solid' or 'outline')
+   *
+   * @type {{
+   *   src: import('./typedef.js').IconSource,
+   *   size?: string,
+   *   theme?: string,
+   *   base?: string,
+   *   classes?: string
+   * } & { [attr: string]: any }}
+   */
+  let {
+    // Style
+    base,
+    classes,
+
+    size = 'md',
+    variant = '',
+
+    // Functional
+    src,
+    theme = 'default', // icon theme 'default'|'solid'|'outline'...
+
+    // States
+    // ...
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  /** @type {any} */
+  let icon = $state();
+
+  $effect(() => {
+    icon = src?.[theme] ?? src?.['default'] ?? Object.values(src)?.[0];
+  });
+
+  // if (size !== '100%') {
+  //   if (size.slice(-1) !== '%') {
+  //     try {
+  //       size = parseInt(size, 10) + 'px';
+  //     } catch (error) {
+  //       size = '100%';
+  //     }
+  //   }
+  // }
+</script>
+
+<svg
+  data-component="icon"
+  data-type="steeze"
+  data-size={size}
+  {...icon?.a}
+  xmlns="http://www.w3.org/2000/svg"
+  class="{base} {classes}"
+  {...attrs}
+>
+  {#each icon?.path ?? [] as a}
+    <path {...a} />
+  {/each}
+  {#each icon?.rect ?? [] as a}
+    <rect {...a} />
+  {/each}
+  {#each icon?.circle ?? [] as a}
+    <circle {...a} />
+  {/each}
+  {#each icon?.polygon ?? [] as a}
+    <polygon {...a} />
+  {/each}
+  {#each icon?.polyline ?? [] as a}
+    <polyline {...a} />
+  {/each}
+  {#each icon?.line ?? [] as a}
+    <line {...a} />
+  {/each}
+</svg>

package/dist/components/icons/index.js

@@ -1,6 +1,6 @@
-export { default as HkIcon } from './HkIcon.svelte';
-export { default as HkTabIcon } from './HkTabIcon.svelte';
-
-export { default as SteezeIcon } from './SteezeIcon.svelte';
-
-export * from './typedef.js';
+export { default as HkIcon } from './HkIcon.svelte';
+export { default as HkTabIcon } from './HkTabIcon.svelte';
+
+export { default as SteezeIcon } from './SteezeIcon.svelte';
+
+export * from './typedef.js';

package/dist/components/icons/typedef.js

@@ -1,16 +1,16 @@
-/**
- * @typedef {'path' | 'circle' | 'rect' | 'polygon' | 'polyline' | 'line'} AllowedTags
- */
-
-/**
- * @typedef { { a: { [attribute: string]: string }} &
- *            { [tag in AllowedTags]?: { [attribute: string]: string }[] }
- *   } IconThemeSource
- */
-
-/**
- * @typedef {{[theme: string]: IconThemeSource}} IconSource
- */
-
-// Export default is required for exporting typedefs
-export default {};
+/**
+ * @typedef {'path' | 'circle' | 'rect' | 'polygon' | 'polyline' | 'line'} AllowedTags
+ */
+
+/**
+ * @typedef { { a: { [attribute: string]: string }} &
+ *            { [tag in AllowedTags]?: { [attribute: string]: string }[] }
+ *   } IconThemeSource
+ */
+
+/**
+ * @typedef {{[theme: string]: IconThemeSource}} IconSource
+ */
+
+// Export default is required for exporting typedefs
+export default {};

package/dist/components/index.js

@@ -1,2 +1,2 @@
-// export * as area from "./area/index.js";
-// export * as icon from "./icon/index.js";
+// export * as area from "./area/index.js";
+// export * as icon from "./icon/index.js";

package/dist/components/inputs/index.js

@@ -1 +1 @@
-export { default as TextInput } from './text-input/TextInput.svelte';
+export { default as TextInput } from './text-input/TextInput.svelte';

package/dist/components/inputs/text-input/TestTextInput.svelte__

@@ -1,102 +1,102 @@
-<script>
-  /**
-   * @type {{
-   *   base?: string,
-   *   error?: string,
-   *   classes?: string,
-   *   fieldClasses?: string,
-   *   fieldError?: string,
-   *   legendBase?: string,
-   *   legendClasses?: string,
-   *   legendError?: string,
-   *   value?: string,
-   *   type?: 'text' | 'url' | 'email' | 'number',
-   *   pattern?: string,
-   *   required?: boolean,
-   *   title?: string,
-   *   valid?: boolean,
-   *   pristine?: boolean,
-   *   validate?: (value: string) => string | undefined,
-   * } & { [attr: string]: any }}
-   */
-  let {
-    base = '',
-    error = '',
-    classes = '',
-
-    fieldClasses,
-    fieldError,
-
-    legendBase = 'ml-16tp px-8tp',
-    legendClasses,
-    legendError,
-
-    value = $bindable(''),
-    type = 'text',
-    pattern,
-    required = false,
-
-    title = '',
-
-    valid = $bindable(true),
-    pristine = $bindable(true),
-
-    validate,
-
-    ...attrs
-  } = $props();
-
-  let inputRef = $state();
-  let validationMessage = $state('');
-  let initialValue = $state('');
-
-  $effect(() => {
-    if (!inputRef) return;
-    initialValue = value;
-    validateInput(inputRef, value);
-  });
-
-  function validateInput(input, currentValue) {
-    input.setCustomValidity('');
-    const isBuiltInValid = input.checkValidity();
-
-    if (isBuiltInValid && validate) {
-      const customError = validate(currentValue);
-      input.setCustomValidity(customError || '');
-    }
-
-    pristine = currentValue === initialValue;
-    valid = input.validity.valid;
-    validationMessage = input.validationMessage;
-  }
-
-  function handleInput(event) {
-    validateInput(event.target, event.target.value);
-  }
-</script>
-
-<fieldset
-  data-inputs="text-input"
-  class="flex w-full items-center rounded {fieldClasses}"
->
-  <legend class="{legendBase} {legendClasses}">{title}</legend>
-
-  <input
-    bind:this={inputRef}
-    {type}
-    {pattern}
-    {required}
-    {value}
-    class="w-full border-none bg-transparent {base} {classes}"
-    aria-invalid={!valid}
-    aria-errormessage={!valid ? 'validation-message' : undefined}
-    oninput={handleInput}
-    {...attrs}
-  />
-
-  {#if !valid}
-    <small id="validation-message" class="text-error" role="alert">
-      {validationMessage}
-    </small>
-  {/if}
-</fieldset>
+<script>
+  /**
+   * @type {{
+   *   base?: string,
+   *   error?: string,
+   *   classes?: string,
+   *   fieldClasses?: string,
+   *   fieldError?: string,
+   *   legendBase?: string,
+   *   legendClasses?: string,
+   *   legendError?: string,
+   *   value?: string,
+   *   type?: 'text' | 'url' | 'email' | 'number',
+   *   pattern?: string,
+   *   required?: boolean,
+   *   title?: string,
+   *   valid?: boolean,
+   *   pristine?: boolean,
+   *   validate?: (value: string) => string | undefined,
+   * } & { [attr: string]: any }}
+   */
+  let {
+    base = '',
+    error = '',
+    classes = '',
+
+    fieldClasses,
+    fieldError,
+
+    legendBase = 'ml-16tp px-8tp',
+    legendClasses,
+    legendError,
+
+    value = $bindable(''),
+    type = 'text',
+    pattern,
+    required = false,
+
+    title = '',
+
+    valid = $bindable(true),
+    pristine = $bindable(true),
+
+    validate,
+
+    ...attrs
+  } = $props();
+
+  let inputRef = $state();
+  let validationMessage = $state('');
+  let initialValue = $state('');
+
+  $effect(() => {
+    if (!inputRef) return;
+    initialValue = value;
+    validateInput(inputRef, value);
+  });
+
+  function validateInput(input, currentValue) {
+    input.setCustomValidity('');
+    const isBuiltInValid = input.checkValidity();
+
+    if (isBuiltInValid && validate) {
+      const customError = validate(currentValue);
+      input.setCustomValidity(customError || '');
+    }
+
+    pristine = currentValue === initialValue;
+    valid = input.validity.valid;
+    validationMessage = input.validationMessage;
+  }
+
+  function handleInput(event) {
+    validateInput(event.target, event.target.value);
+  }
+</script>
+
+<fieldset
+  data-inputs="text-input"
+  class="flex w-full items-center rounded {fieldClasses}"
+>
+  <legend class="{legendBase} {legendClasses}">{title}</legend>
+
+  <input
+    bind:this={inputRef}
+    {type}
+    {pattern}
+    {required}
+    {value}
+    class="w-full border-none bg-transparent {base} {classes}"
+    aria-invalid={!valid}
+    aria-errormessage={!valid ? 'validation-message' : undefined}
+    oninput={handleInput}
+    {...attrs}
+  />
+
+  {#if !valid}
+    <small id="validation-message" class="text-error" role="alert">
+      {validationMessage}
+    </small>
+  {/if}
+</fieldset>