npm - svelte-comp - Versions diffs - 1.3.3 → 1.3.6 - Mend

svelte-comp 1.3.3 → 1.3.6

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 (138) hide show

package/LICENSE.md +21 -21
package/README.md +101 -100
package/dist/App.svelte +507 -507
package/dist/Container.svelte +59 -59
package/dist/app.css +234 -235
package/dist/app.d.ts +10 -0
package/dist/lib/Accordion.svelte +155 -155
package/dist/lib/Badge.svelte +44 -44
package/dist/lib/Button.svelte +185 -170
package/dist/lib/Calendar.svelte +384 -384
package/dist/lib/Card.svelte +103 -103
package/dist/lib/Carousel.svelte +293 -293
package/dist/lib/Carousel.svelte.d.ts +1 -1
package/dist/lib/CheckBox.svelte +210 -210
package/dist/lib/CodeView.svelte +308 -307
package/dist/lib/ColorPicker.svelte +159 -159
package/dist/lib/ContextMenu.svelte +328 -322
package/dist/lib/DatePicker.svelte +246 -246
package/dist/lib/Dialog.svelte +233 -233
package/dist/lib/Field.svelte +299 -299
package/dist/lib/FilePicker.svelte +295 -240
package/dist/lib/FilePicker.svelte.d.ts +6 -1
package/dist/lib/Form.svelte +438 -438
package/dist/lib/Hamburger.svelte +217 -217
package/dist/lib/InstallPWA.svelte +94 -94
package/dist/lib/Menu.svelte +623 -623
package/dist/lib/NoticeBase.svelte +140 -140
package/dist/lib/PaginatedCard.svelte +73 -73
package/dist/lib/Pagination.svelte +119 -119
package/dist/lib/PrimaryColorSelect.svelte +111 -111
package/dist/lib/ProgressBar.svelte +141 -141
package/dist/lib/ProgressCircle.svelte +190 -190
package/dist/lib/Radio.svelte +189 -189
package/dist/lib/SearchInput.svelte +104 -104
package/dist/lib/Select.svelte +524 -524
package/dist/lib/Slider.svelte +253 -253
package/dist/lib/Splitter.svelte +159 -150
package/dist/lib/Switch.svelte +168 -167
package/dist/lib/Table.svelte +299 -299
package/dist/lib/Tabs.svelte +213 -213
package/dist/lib/ThemeToggle.svelte +128 -127
package/dist/lib/TimePicker.svelte +312 -312
package/dist/lib/TimePickerNew.svelte +634 -0
package/dist/lib/TimePickerNew.svelte.d.ts +49 -0
package/dist/lib/Toast.svelte +123 -123
package/dist/lib/Tooltip.svelte +110 -110
package/dist/lib/Topbar.svelte +107 -107
package/dist/lib/__tests__/Accordion.test.d.ts +1 -0
package/dist/lib/__tests__/Accordion.test.js +171 -0
package/dist/lib/__tests__/Badge.test.d.ts +1 -0
package/dist/lib/__tests__/Badge.test.js +41 -0
package/dist/lib/__tests__/Button.test.d.ts +1 -0
package/dist/lib/__tests__/Button.test.js +269 -0
package/dist/lib/__tests__/Calendar.test.d.ts +1 -0
package/dist/lib/__tests__/Calendar.test.js +171 -0
package/dist/lib/__tests__/Card.test.d.ts +1 -0
package/dist/lib/__tests__/Card.test.js +148 -0
package/dist/lib/__tests__/Carousel.test.d.ts +1 -0
package/dist/lib/__tests__/Carousel.test.js +439 -0
package/dist/lib/__tests__/CheckBox.test.d.ts +1 -0
package/dist/lib/__tests__/CheckBox.test.js +152 -0
package/dist/lib/__tests__/CodeView.test.d.ts +1 -0
package/dist/lib/__tests__/CodeView.test.js +157 -0
package/dist/lib/__tests__/ColorPicker.test.d.ts +1 -0
package/dist/lib/__tests__/ColorPicker.test.js +93 -0
package/dist/lib/__tests__/ContextMenu.test.d.ts +1 -0
package/dist/lib/__tests__/ContextMenu.test.js +67 -0
package/dist/lib/__tests__/DatePicker.test.d.ts +1 -0
package/dist/lib/__tests__/DatePicker.test.js +108 -0
package/dist/lib/__tests__/Dialog.test.d.ts +1 -0
package/dist/lib/__tests__/Dialog.test.js +183 -0
package/dist/lib/__tests__/Field.test.d.ts +1 -0
package/dist/lib/__tests__/Field.test.js +190 -0
package/dist/lib/__tests__/FilePicker.test.d.ts +1 -0
package/dist/lib/__tests__/FilePicker.test.js +179 -0
package/dist/lib/__tests__/Form.integration.test.d.ts +1 -0
package/dist/lib/__tests__/Form.integration.test.js +158 -0
package/dist/lib/__tests__/Form.test.d.ts +1 -0
package/dist/lib/__tests__/Form.test.js +463 -0
package/dist/lib/__tests__/Hamburger.test.d.ts +1 -0
package/dist/lib/__tests__/Hamburger.test.js +161 -0
package/dist/lib/__tests__/InstallPWA.test.d.ts +1 -0
package/dist/lib/__tests__/InstallPWA.test.js +15 -0
package/dist/lib/__tests__/Menu.test.d.ts +1 -0
package/dist/lib/__tests__/Menu.test.js +285 -0
package/dist/lib/__tests__/NoticeBase.test.d.ts +1 -0
package/dist/lib/__tests__/NoticeBase.test.js +60 -0
package/dist/lib/__tests__/PaginatedCard.test.d.ts +1 -0
package/dist/lib/__tests__/PaginatedCard.test.js +89 -0
package/dist/lib/__tests__/Pagination.test.d.ts +1 -0
package/dist/lib/__tests__/Pagination.test.js +168 -0
package/dist/lib/__tests__/PrimaryColorSelect.test.d.ts +1 -0
package/dist/lib/__tests__/PrimaryColorSelect.test.js +92 -0
package/dist/lib/__tests__/ProgressBar.test.d.ts +1 -0
package/dist/lib/__tests__/ProgressBar.test.js +69 -0
package/dist/lib/__tests__/ProgressCircle.test.d.ts +1 -0
package/dist/lib/__tests__/ProgressCircle.test.js +71 -0
package/dist/lib/__tests__/Radio.test.d.ts +1 -0
package/dist/lib/__tests__/Radio.test.js +127 -0
package/dist/lib/__tests__/SearchInput.test.d.ts +1 -0
package/dist/lib/__tests__/SearchInput.test.js +80 -0
package/dist/lib/__tests__/Select.test.d.ts +1 -0
package/dist/lib/__tests__/Select.test.js +408 -0
package/dist/lib/__tests__/Slider.test.d.ts +1 -0
package/dist/lib/__tests__/Slider.test.js +213 -0
package/dist/lib/__tests__/Splitter.test.d.ts +1 -0
package/dist/lib/__tests__/Splitter.test.js +87 -0
package/dist/lib/__tests__/Switch.test.d.ts +1 -0
package/dist/lib/__tests__/Switch.test.js +97 -0
package/dist/lib/__tests__/Table.test.d.ts +1 -0
package/dist/lib/__tests__/Table.test.js +349 -0
package/dist/lib/__tests__/Tabs.test.d.ts +1 -0
package/dist/lib/__tests__/Tabs.test.js +262 -0
package/dist/lib/__tests__/ThemeToggle.test.d.ts +1 -0
package/dist/lib/__tests__/ThemeToggle.test.js +84 -0
package/dist/lib/__tests__/TimePicker.test.d.ts +1 -0
package/dist/lib/__tests__/TimePicker.test.js +146 -0
package/dist/lib/__tests__/TimePickerNew.test.d.ts +1 -0
package/dist/lib/__tests__/TimePickerNew.test.js +322 -0
package/dist/lib/__tests__/Toast.test.d.ts +1 -0
package/dist/lib/__tests__/Toast.test.js +135 -0
package/dist/lib/__tests__/Tooltip.test.d.ts +1 -0
package/dist/lib/__tests__/Tooltip.test.js +171 -0
package/dist/lib/__tests__/Topbar.test.d.ts +1 -0
package/dist/lib/__tests__/Topbar.test.js +25 -0
package/dist/lib/__tests__/setupLangContext.d.ts +1 -0
package/dist/lib/__tests__/setupLangContext.js +65 -0
package/dist/lib/__tests__/storage.test.d.ts +1 -0
package/dist/lib/__tests__/storage.test.js +124 -0
package/dist/lib/__tests__/utils.test.d.ts +1 -0
package/dist/lib/__tests__/utils.test.js +11 -0
package/dist/lib/index.d.ts +1 -0
package/dist/lib/index.js +1 -0
package/dist/lib/lang.d.ts +4 -0
package/dist/lib/lang.js +4 -0
package/dist/styles.css +234 -232
package/dist/utils/index.js +15 -4
package/package.json +52 -52

package/dist/lib/PrimaryColorSelect.svelte CHANGED Viewed

@@ -1,111 +1,111 @@
-<!-- src/lib/PrimaryColorSelect.svelte -->
-<script lang="ts">
-  /**
-   * @component PrimaryColorSelect
-   * @description Theme primary-color selector built on top of Select. Provides a fixed palette,
-   * handles persistence, and updates the global <html> attribute.
-   *
-   * @prop sz {SizeKey} - Sizing preset passed directly to Select
-   * @options xs|sm|md|lg|xl
-   * @default sm
-   *
-   * @prop label {string} - Custom label text. Falls back to localized copy when omitted.
-   *
-   * @prop class {string} - Extra classes forwarded to the underlying Select component
-   * @default ""
-   *
-   * @note The palette is predefined internally (`{ value, label, swatch }`).
-   * @note Selected value is stored in localStorage under "primary".
-   * @note The `html` element receives `data-primary="{value}"` for theme styling.
-   * @note Uses the same onChange contract as Select and forwards palette options as-is.
-   */
-  import Select from "./Select.svelte";
-  import type { PrimaryKey, PaletteOption, SizeKey } from "./types";
-  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
-  type Props = {
-    sz?: SizeKey;
-    label?: string;
-    class?: string;
-  };
-  let { sz = "sm", label, class: externalClass = "" }: Props = $props();
-  const langCtx = getLangContext();
-  const langKey = $derived(getLangKey(langCtx));
-  const L = $derived(getComponentText("primaryColorSelect", langKey));
-  const labelFinal = $derived(label ?? L.text);
-  const palette: PaletteOption[] = [
-    {
-      value: "default",
-      label: "Indigo",
-      swatch: "oklch(62.3% 0.214 259.8deg)",
-    },
-    { value: "cyan", label: "Cyan", swatch: "oklch(71.5% 0.143 215.221)" },
-    { value: "red", label: "Red", swatch: "oklch(58% 0.24 30deg)" },
-    { value: "green", label: "Green", swatch: "oklch(65% 0.22 140deg)" },
-    { value: "yellow", label: "Yellow", swatch: "oklch(75% 0.18 90deg)" },
-    { value: "pink", label: "Pink", swatch: "oklch(70% 0.25 350deg)" },
-    { value: "orange", label: "Orange", swatch: "oklch(72% 0.22 60deg)" },
-    { value: "purple", label: "Purple", swatch: "oklch(55% 0.22 290deg)" },
-  ];
-  const paletteMap = palette.reduce<Record<PrimaryKey, PaletteOption>>(
-    (acc, option) => {
-      acc[option.value] = option;
-      return acc;
-    },
-    {} as Record<PrimaryKey, PaletteOption>
-  );
-  let selected = $state<PrimaryKey>("default");
-  let mounted = $state(false);
-  function isPrimaryKey(value: unknown): value is PrimaryKey {
-    return typeof value === "string" && value in paletteMap;
-  }
-  $effect(() => {
-    if (!mounted) {
-      try {
-        if (typeof window !== "undefined") {
-          const saved = localStorage.getItem("primary");
-          if (isPrimaryKey(saved)) {
-            selected = saved;
-          }
-        }
-      } catch {
-        // ignore unavailable storage/environment
-      }
-      mounted = true;
-    }
-  });
-  $effect(() => {
-    if (mounted) {
-      try {
-        if (typeof document !== "undefined") {
-          document.documentElement.setAttribute("data-primary", selected);
-        }
-        if (typeof window !== "undefined") {
-          localStorage.setItem("primary", selected);
-        }
-      } catch {
-        // ignore unavailable storage/environment
-      }
-    }
-  });
-</script>
-<Select
-  {sz}
-  label={labelFinal}
-  options={palette}
-  value={selected}
-  onChange={(v) => {
-    if (isPrimaryKey(v)) selected = v;
-  }}
-  class={externalClass}
-/>
+<!-- src/lib/PrimaryColorSelect.svelte -->
+<script lang="ts">
+  /**
+   * @component PrimaryColorSelect
+   * @description Theme primary-color selector built on top of Select. Provides a fixed palette,
+   * handles persistence, and updates the global <html> attribute.
+   *
+   * @prop sz {SizeKey} - Sizing preset passed directly to Select
+   * @options xs|sm|md|lg|xl
+   * @default sm
+   *
+   * @prop label {string} - Custom label text. Falls back to localized copy when omitted.
+   *
+   * @prop class {string} - Extra classes forwarded to the underlying Select component
+   * @default ""
+   *
+   * @note The palette is predefined internally (`{ value, label, swatch }`).
+   * @note Selected value is stored in localStorage under "primary".
+   * @note The `html` element receives `data-primary="{value}"` for theme styling.
+   * @note Uses the same onChange contract as Select and forwards palette options as-is.
+   */
+  import Select from "./Select.svelte";
+  import type { PrimaryKey, PaletteOption, SizeKey } from "./types";
+  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
+  type Props = {
+    sz?: SizeKey;
+    label?: string;
+    class?: string;
+  };
+  let { sz = "sm", label, class: externalClass = "" }: Props = $props();
+  const langCtx = getLangContext();
+  const langKey = $derived(getLangKey(langCtx));
+  const L = $derived(getComponentText("primaryColorSelect", langKey));
+  const labelFinal = $derived(label ?? L.text);
+  const palette: PaletteOption[] = [
+    {
+      value: "default",
+      label: "Indigo",
+      swatch: "oklch(62.3% 0.214 259.8deg)",
+    },
+    { value: "cyan", label: "Cyan", swatch: "oklch(71.5% 0.143 215.221)" },
+    { value: "red", label: "Red", swatch: "oklch(58% 0.24 30deg)" },
+    { value: "green", label: "Green", swatch: "oklch(65% 0.22 140deg)" },
+    { value: "yellow", label: "Yellow", swatch: "oklch(75% 0.18 90deg)" },
+    { value: "pink", label: "Pink", swatch: "oklch(70% 0.25 350deg)" },
+    { value: "orange", label: "Orange", swatch: "oklch(72% 0.22 60deg)" },
+    { value: "purple", label: "Purple", swatch: "oklch(55% 0.22 290deg)" },
+  ];
+  const paletteMap = palette.reduce<Record<PrimaryKey, PaletteOption>>(
+    (acc, option) => {
+      acc[option.value] = option;
+      return acc;
+    },
+    {} as Record<PrimaryKey, PaletteOption>
+  );
+  let selected = $state<PrimaryKey>("default");
+  let mounted = $state(false);
+  function isPrimaryKey(value: unknown): value is PrimaryKey {
+    return typeof value === "string" && value in paletteMap;
+  }
+  $effect(() => {
+    if (!mounted) {
+      try {
+        if (typeof window !== "undefined") {
+          const saved = localStorage.getItem("primary");
+          if (isPrimaryKey(saved)) {
+            selected = saved;
+          }
+        }
+      } catch {
+        // ignore unavailable storage/environment
+      }
+      mounted = true;
+    }
+  });
+  $effect(() => {
+    if (mounted) {
+      try {
+        if (typeof document !== "undefined") {
+          document.documentElement.setAttribute("data-primary", selected);
+        }
+        if (typeof window !== "undefined") {
+          localStorage.setItem("primary", selected);
+        }
+      } catch {
+        // ignore unavailable storage/environment
+      }
+    }
+  });
+</script>
+<Select
+  {sz}
+  label={labelFinal}
+  options={palette}
+  value={selected}
+  onChange={(v) => {
+    if (isPrimaryKey(v)) selected = v;
+  }}
+  class={externalClass}
+/>

package/dist/lib/ProgressBar.svelte CHANGED Viewed

@@ -1,141 +1,141 @@
-<!-- src/lib/ProgressBar.svelte -->
-<script lang="ts">
-  /**
-   * @component ProgressBar
-   * @description A simple and accessible progress bar component that visually represents task completion.
-   *
-   * @prop value {number} - Current progress value from 0 to 100
-   * @default 0
-   *
-   * @prop indeterminate {boolean} - Enables the animated indeterminate state
-   * @default false
-   *
-   * @prop sz {SizeKey} - Controls the bar height
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ComponentVariant} - Visual style of the progress bar
-   * @options default|neutral
-   * @default default
-   *
-   * @prop class {string} - Additional CSS classes for the wrapper element
-   * @default ""
-   *
-   * @prop label {string} - Optional text label displayed above the bar
-   * @default ""
-   *
-   * @prop disabled {boolean} - Applies a muted inactive visual style
-   * @default false
-   *
-   * @note Indeterminate animation for unknown progress.
-   * @note Auto-clamping between 0 and 100.
-   * @note Adaptive height based on size.
-   * @note Theming support via CSS variables.
-   * @note Fully accessible with proper `aria` roles.
-   * @note No invalid ARIA attributes.
-   */
-  import type { HTMLAttributes } from "svelte/elements";
-  import { type SizeKey, type ComponentVariant, TEXT } from "./types";
-  import { cx, clamp } from "../utils";
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    value?: number;
-    indeterminate?: boolean;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-  };
-  let {
-    value = 0,
-    indeterminate = false,
-    sz = "md",
-    variant = "default",
-    class: externalClass = "",
-    label = "",
-    disabled = false,
-    ...rest
-  }: Props = $props();
-  const pct = $derived(`${clamp(value, 0, 100)}%`);
-  const sizeTrack = $derived(
-    {
-      xs: "h-[4px]",
-      sm: "h-[5px]",
-      md: "h-[6px]",
-      lg: "h-[7px]",
-      xl: "h-[8px]",
-    }[sz]
-  );
-  const bar = $derived(
-    variant === "neutral"
-      ? "bg-[var(--color-bg-secondary)]"
-      : "bg-[var(--color-bg-primary)]"
-  );
-  const rootClass = $derived(
-    cx(
-      "relative flex flex-col gap-1 w-full data-[disabled=true]:opacity-[var(--opacity-disabled)] data-[disabled=true]:cursor-not-allowed",
-      externalClass
-    )
-  );
-  const trackClass = $derived(
-    cx(
-      "absolute top-1/2 -translate-y-1/2 w-full bg-[var(--border-color-default)] rounded overflow-hidden",
-      sizeTrack
-    )
-  );
-  const barClass = $derived(cx("h-full", bar));
-</script>
-<div
-  class={rootClass}
-  role="progressbar"
-  aria-valuemin="0"
-  aria-valuemax="100"
-  aria-valuenow={indeterminate ? undefined : Math.round(clamp(value, 0, 100))}
-  data-disabled={disabled ? "true" : undefined}
-  {...rest}
->
-  {#if label}
-    <span class={cx("text-[var(--color-text-muted)] select-none", TEXT[sz])}>
-      {label}
-    </span>
-  {/if}
-  <div class="relative w-full h-10">
-    <div class={trackClass}>
-      {#if indeterminate}
-        <div class={cx(barClass, "pb-indet")}></div>
-      {:else}
-        <div
-          class={cx(barClass, "transition-[width]")}
-          style={`width:${pct}`}
-        ></div>
-      {/if}
-    </div>
-  </div>
-</div>
-<style>
-  :global {
-    @keyframes pb-indeterminate {
-      0% {
-        transform: translateX(-100%);
-      }
-      100% {
-        transform: translateX(250%);
-      }
-    }
-  }
-  .pb-indet {
-    width: 40%;
-    animation: pb-indeterminate 2s linear infinite;
-  }
-</style>
+<!-- src/lib/ProgressBar.svelte -->
+<script lang="ts">
+  /**
+   * @component ProgressBar
+   * @description A simple and accessible progress bar component that visually represents task completion.
+   *
+   * @prop value {number} - Current progress value from 0 to 100
+   * @default 0
+   *
+   * @prop indeterminate {boolean} - Enables the animated indeterminate state
+   * @default false
+   *
+   * @prop sz {SizeKey} - Controls the bar height
+   * @options xs|sm|md|lg|xl
+   * @default md
+   *
+   * @prop variant {ComponentVariant} - Visual style of the progress bar
+   * @options default|neutral
+   * @default default
+   *
+   * @prop class {string} - Additional CSS classes for the wrapper element
+   * @default ""
+   *
+   * @prop label {string} - Optional text label displayed above the bar
+   * @default ""
+   *
+   * @prop disabled {boolean} - Applies a muted inactive visual style
+   * @default false
+   *
+   * @note Indeterminate animation for unknown progress.
+   * @note Auto-clamping between 0 and 100.
+   * @note Adaptive height based on size.
+   * @note Theming support via CSS variables.
+   * @note Fully accessible with proper `aria` roles.
+   * @note No invalid ARIA attributes.
+   */
+  import type { HTMLAttributes } from "svelte/elements";
+  import { type SizeKey, type ComponentVariant, TEXT } from "./types";
+  import { cx, clamp } from "../utils";
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    indeterminate?: boolean;
+    sz?: SizeKey;
+    variant?: ComponentVariant;
+    class?: string;
+    label?: string;
+    disabled?: boolean;
+  };
+  let {
+    value = 0,
+    indeterminate = false,
+    sz = "md",
+    variant = "default",
+    class: externalClass = "",
+    label = "",
+    disabled = false,
+    ...rest
+  }: Props = $props();
+  const pct = $derived(`${clamp(value, 0, 100)}%`);
+  const sizeTrack = $derived(
+    {
+      xs: "h-[4px]",
+      sm: "h-[5px]",
+      md: "h-[6px]",
+      lg: "h-[7px]",
+      xl: "h-[8px]",
+    }[sz]
+  );
+  const bar = $derived(
+    variant === "neutral"
+      ? "bg-[var(--color-bg-secondary)]"
+      : "bg-[var(--color-bg-primary)]"
+  );
+  const rootClass = $derived(
+    cx(
+      "relative flex flex-col gap-1 w-full data-[disabled=true]:opacity-[var(--opacity-disabled)] data-[disabled=true]:cursor-not-allowed",
+      externalClass
+    )
+  );
+  const trackClass = $derived(
+    cx(
+      "absolute top-1/2 -translate-y-1/2 w-full bg-[var(--border-color-default)] rounded overflow-hidden",
+      sizeTrack
+    )
+  );
+  const barClass = $derived(cx("h-full", bar));
+</script>
+<div
+  class={rootClass}
+  role="progressbar"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-valuenow={indeterminate ? undefined : Math.round(clamp(value, 0, 100))}
+  data-disabled={disabled ? "true" : undefined}
+  {...rest}
+>
+  {#if label}
+    <span class={cx("text-[var(--color-text-muted)] select-none", TEXT[sz])}>
+      {label}
+    </span>
+  {/if}
+  <div class="relative w-full h-10">
+    <div class={trackClass}>
+      {#if indeterminate}
+        <div class={cx(barClass, "pb-indet")}></div>
+      {:else}
+        <div
+          class={cx(barClass, "transition-[width]")}
+          style={`width:${pct}`}
+        ></div>
+      {/if}
+    </div>
+  </div>
+</div>
+<style>
+  :global {
+    @keyframes pb-indeterminate {
+      0% {
+        transform: translateX(-100%);
+      }
+      100% {
+        transform: translateX(250%);
+      }
+    }
+  }
+  .pb-indet {
+    width: 40%;
+    animation: pb-indeterminate 2s linear infinite;
+  }
+</style>