luna-plus 0.0.5

package/dist/Cascader/Cascader.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { createDropdownTransition } from "../utils";
+  import Icon from "../Icon/Icon.svelte";
+  import { ChevronRight, ChevronDown, X, Check } from "lucide";
+  import type { CascaderOption, CascaderProps as Props } from "./types";
+
+  let {
+    modelValue = $bindable([]),
+    options = [],
+    placeholder = "请选择",
+    disabled = false,
+    clearable = false,
+    separator = " / ",
+    expandTrigger = "click",
+    size = "default",
+    showMenuArrow = true,
+    class: cls = "",
+    ...attrs
+  }: Props = $props();
+
+  let visible = $state(false);
+  let reduceMotion = $state(false);
+  let inputRef: HTMLElement | null = $state(null);
+  let menus = $state<CascaderOption[][]>([]);
+  let activeOptions = $state<CascaderOption[]>([]);
+
+  $effect(() => {
+    menus = [options];
+  });
+
+  const getLabelsFromValue = (
+    values: (string | number)[],
+    opts: CascaderOption[],
+  ): string[] => {
+    const labels: string[] = [];
+    let current = opts;
+    for (const val of values) {
+      const opt = current.find((o) => o.value === val);
+      if (opt) {
+        labels.push(opt.label);
+        current = opt.children || [];
+      }
+    }
+    return labels;
+  };
+
+  const displayValue = $derived(
+    activeOptions.length > 0
+      ? activeOptions.map((o) => o.label).join(separator)
+      : modelValue.length > 0
+        ? getLabelsFromValue(modelValue, options).join(separator)
+        : "",
+  );
+
+  const initMenus = (): void => {
+    menus = [options];
+    activeOptions = [];
+    if (modelValue.length > 0) {
+      let current = options;
+      for (const val of modelValue) {
+        const opt = current.find((o) => o.value === val);
+        if (opt) {
+          activeOptions = [...activeOptions, opt];
+          if (opt.children?.length) {
+            menus = [...menus, opt.children];
+            current = opt.children;
+          }
+        }
+      }
+    }
+  };
+
+  const handleToggle = (): void => {
+    if (disabled) return;
+    visible = !visible;
+    if (visible) initMenus();
+  };
+
+  const handleOptionClick = (option: CascaderOption, level: number): void => {
+    if (option.disabled) return;
+    activeOptions = [...activeOptions.slice(0, level), option];
+    menus = [...menus.slice(0, level + 1)];
+    if (option.children?.length) {
+      menus = [...menus, option.children];
+    } else {
+      modelValue = activeOptions.map((o) => o.value);
+      visible = false;
+    }
+  };
+
+  const handleOptionHover = (option: CascaderOption, level: number): void => {
+    if (expandTrigger !== "hover" || option.disabled) return;
+    activeOptions = [...activeOptions.slice(0, level), option];
+    menus = [...menus.slice(0, level + 1)];
+    if (option.children?.length) menus = [...menus, option.children];
+  };
+
+  const handleClear = (e: MouseEvent): void => {
+    e.stopPropagation();
+    modelValue = [];
+    activeOptions = [];
+    menus = [options];
+  };
+
+  const handleClickOutside = (e: MouseEvent): void => {
+    if (inputRef && !inputRef.contains(e.target as Node)) visible = false;
+  };
+
+  const handleKeydown = (e: KeyboardEvent): void => {
+    if (e.key === "Escape") visible = false;
+  };
+
+  const dropdownTransition = $derived(createDropdownTransition(reduceMotion));
+
+  $effect(() => {
+    if (visible) document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  });
+
+  $effect(() => {
+    if (typeof window !== "undefined") {
+      reduceMotion =
+        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ??
+        false;
+    }
+  });
+
+  onMount(() => {
+    if (typeof window !== "undefined") {
+      reduceMotion =
+        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ??
+        false;
+    }
+  });
+
+  const isActive = (option: CascaderOption, level: number): boolean =>
+    activeOptions[level]?.value === option.value;
+
+  const classes = $derived(
+    [
+      "lm-cascader",
+      disabled && "is-disabled",
+      size !== "default" && `lm-cascader--${size}`,
+      cls,
+    ]
+      .filter(Boolean)
+      .join(" "),
+  );
+</script>
+
+<div bind:this={inputRef} class={classes} {...attrs}>
+  <div
+    class="lm-cascader__input"
+    class:is-focus={visible}
+    role="combobox"
+    tabindex={disabled ? -1 : 0}
+    aria-expanded={visible}
+    aria-controls="cascader-dropdown"
+    aria-haspopup="listbox"
+    onclick={handleToggle}
+    onkeydown={handleKeydown}
+  >
+    <span class="lm-cascader__value" class:is-placeholder={!displayValue}>
+      {displayValue || placeholder}
+    </span>
+    {#if clearable && modelValue.length > 0 && !disabled}
+      <button
+        type="button"
+        class="lm-cascader__clear"
+        onclick={handleClear}
+        aria-label="清除"
+      >
+        <Icon icon={X} size={14} />
+      </button>
+    {:else}
+      <span class="lm-cascader__arrow" class:is-open={visible}>
+        <Icon icon={ChevronDown} size={14} />
+      </span>
+    {/if}
+  </div>
+
+  {#if visible}
+    <div
+      class="lm-cascader__dropdown"
+      role="listbox"
+      id="cascader-dropdown"
+      transition:dropdownTransition
+    >
+      {#if showMenuArrow}
+        <div class="lm-cascader__menu-arrow" aria-hidden="true"></div>
+      {/if}
+      {#each menus as menu, level}
+        <ul class="lm-cascader__menu" role="group">
+          {#each menu as option (option.value)}
+            <li
+              class="lm-cascader__option"
+              class:is-active={isActive(option, level)}
+              class:is-disabled={option.disabled}
+              role="option"
+              aria-selected={isActive(option, level)}
+              onmousedown={() => handleOptionClick(option, level)}
+              onmouseenter={() => handleOptionHover(option, level)}
+            >
+              <span class="lm-cascader__option-label">{option.label}</span>
+              <span class="lm-cascader__option-suffix" aria-hidden="true">
+                {#if option.children?.length}
+                  <Icon icon={ChevronRight} size={14} />
+                {:else if isActive(option, level) && level === menus.length - 1}
+                  <Icon icon={Check} size={14} />
+                {/if}
+              </span>
+            </li>
+          {/each}
+        </ul>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/Cascader/Cascader.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CascaderProps as Props } from './types';
+declare const Cascader: import("svelte").Component<Props, {}, "modelValue">;
+type Cascader = ReturnType<typeof Cascader>;
+export default Cascader;

package/dist/Cascader/index.d.ts

@@ -0,0 +1,4 @@
+import Cascader from './Cascader.svelte';
+export default Cascader;
+export { Cascader };
+export type { CascaderOption, CascaderProps } from './types';

package/dist/Cascader/index.js

@@ -0,0 +1,3 @@
+import Cascader from './Cascader.svelte';
+export default Cascader;
+export { Cascader };

package/dist/Cascader/types.d.ts

@@ -0,0 +1,19 @@
+export interface CascaderOption {
+    value: string | number;
+    label: string;
+    children?: CascaderOption[];
+    disabled?: boolean;
+}
+export interface CascaderProps {
+    modelValue?: (string | number)[];
+    options?: CascaderOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    separator?: string;
+    expandTrigger?: 'click' | 'hover';
+    size?: 'small' | 'default' | 'large';
+    /** 弹层箭头（Popconfirm 风格） */
+    showMenuArrow?: boolean;
+    class?: string;
+}

package/dist/Cascader/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Checkbox/Checkbox.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import Icon from '../Icon/Icon.svelte'
+    import { Check, Minus } from 'lucide'
+    import type { Snippet } from 'svelte'
+
+    interface CheckboxProps {
+        checked?: boolean
+        value?: string | number
+        disabled?: boolean
+        indeterminate?: boolean
+        size?: 'small' | 'medium' | 'large'
+        label?: string
+        children?: Snippet
+        onchange?: (checked: boolean) => void
+        class?: string
+    }
+
+    let { checked = $bindable(false), value, disabled = false, indeterminate = false, size = 'medium', label, children, onchange, class: cls = '', ...attrs }: CheckboxProps = $props()
+
+    let inputRef: HTMLInputElement | null = $state(null)
+
+    const classes = $derived(`lm-checkbox lm-checkbox--${size}${checked ? ' is-checked' : ''}${disabled ? ' is-disabled' : ''}${indeterminate ? ' is-indeterminate' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleChange = (e: Event): void => {
+        checked = (e.currentTarget as HTMLInputElement).checked
+        onchange?.(checked)
+    }
+
+    $effect(() => {
+        if (inputRef) inputRef.indeterminate = indeterminate
+    })
+</script>
+
+<label class={classes}>
+    <span class="lm-checkbox__input">
+        <input bind:this={inputRef} bind:checked {...attrs} type="checkbox" class="lm-checkbox__original" {value} {disabled} onchange={handleChange} />
+        <span class="lm-checkbox__inner">
+            {#if checked}
+                <Icon icon={Check} size={12} />
+            {:else if indeterminate}
+                <Icon icon={Minus} size={12} />
+            {/if}
+        </span>
+    </span>
+
+    {#if children || label}
+        <span class="lm-checkbox__label">
+            {#if children}
+                {@render children()}
+            {:else if label}
+                {label}
+            {/if}
+        </span>
+    {/if}
+</label>

package/dist/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface CheckboxProps {
+    checked?: boolean;
+    value?: string | number;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    label?: string;
+    children?: Snippet;
+    onchange?: (checked: boolean) => void;
+    class?: string;
+}
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/Checkbox/CheckboxGroup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface CheckboxGroupProps {
+    modelValue?: (string | number)[];
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    children?: Snippet;
+    onchange?: (value: (string | number)[]) => void;
+    class?: string;
+  }
+
+  let {
+    modelValue = $bindable([]),
+    disabled = false,
+    size = "medium",
+    children,
+    onchange,
+    class: cls = "",
+    ...attrs
+  }: CheckboxGroupProps = $props();
+
+  const classes = $derived(
+    `lm-checkbox-group lm-checkbox-group--${size}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  const toggle = (value: string | number): void => {
+    if (disabled) return;
+    const index = modelValue.indexOf(value);
+    if (index === -1) {
+      modelValue = [...modelValue, value];
+    } else {
+      modelValue = modelValue.filter((v) => v !== value);
+    }
+    onchange?.(modelValue);
+  };
+</script>
+
+<div class={classes} role="group" {...attrs}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/Checkbox/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+interface CheckboxGroupProps {
+    modelValue?: (string | number)[];
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    children?: Snippet;
+    onchange?: (value: (string | number)[]) => void;
+    class?: string;
+}
+declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "modelValue">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;

package/dist/Checkbox/index.d.ts

@@ -0,0 +1,4 @@
+import Checkbox from './Checkbox.svelte';
+export { Checkbox };
+export type { CheckboxProps, CheckboxSize } from './types';
+export default Checkbox;

package/dist/Checkbox/index.js

@@ -0,0 +1,3 @@
+import Checkbox from './Checkbox.svelte';
+export { Checkbox };
+export default Checkbox;

package/dist/Checkbox/types.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+/** Checkbox 尺寸 */
+export type CheckboxSize = 'small' | 'medium' | 'large';
+/** Checkbox 属性 */
+export interface CheckboxProps {
+    /** 是否选中 */
+    checked?: boolean;
+    /** 值 */
+    value?: string | number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否为不确定状态 */
+    indeterminate?: boolean;
+    /** 尺寸 */
+    size?: CheckboxSize;
+    /** 标签文字 */
+    label?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 变化回调 */
+    onchange?: (checked: boolean) => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Checkbox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Collapse/Collapse.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { setContext } from "svelte";
+  import {
+    COLLAPSE_CONTEXT_KEY,
+    type CollapseContext,
+  } from "./CollapseContext";
+
+  interface CollapseProps {
+    modelValue?: string | string[];
+    accordion?: boolean;
+    onchange?: (value: string | string[]) => void;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    modelValue = $bindable([]),
+    accordion = false,
+    onchange,
+    children,
+    class: cls = "",
+    ...attrs
+  }: CollapseProps = $props();
+
+  const activeNames = $derived(
+    Array.isArray(modelValue) ? modelValue : modelValue ? [modelValue] : [],
+  );
+
+  const toggle = (name: string): void => {
+    let newValue: string | string[];
+    if (accordion) {
+      newValue = activeNames.includes(name) ? "" : name;
+    } else {
+      newValue = activeNames.includes(name)
+        ? activeNames.filter((n) => n !== name)
+        : [...activeNames, name];
+    }
+    modelValue = newValue;
+    onchange?.(newValue);
+  };
+
+  const context: CollapseContext = {
+    get activeNames() {
+      return activeNames;
+    },
+    get accordion() {
+      return accordion;
+    },
+    toggle,
+  };
+
+  setContext(COLLAPSE_CONTEXT_KEY, context);
+
+  const classes = $derived(cls ? `lm-collapse ${cls}` : "lm-collapse");
+</script>
+
+<div class={classes} role="tablist" {...attrs}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/Collapse/Collapse.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface CollapseProps {
+    modelValue?: string | string[];
+    accordion?: boolean;
+    onchange?: (value: string | string[]) => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const Collapse: import("svelte").Component<CollapseProps, {}, "modelValue">;
+type Collapse = ReturnType<typeof Collapse>;
+export default Collapse;

package/dist/Collapse/CollapseContext.d.ts

@@ -0,0 +1,6 @@
+export declare const COLLAPSE_CONTEXT_KEY: unique symbol;
+export interface CollapseContext {
+    activeNames: string[];
+    accordion: boolean;
+    toggle: (name: string) => void;
+}

package/dist/Collapse/CollapseContext.js

@@ -0,0 +1 @@
+export const COLLAPSE_CONTEXT_KEY = Symbol('collapse');

package/dist/Collapse/CollapseItem.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { getContext, onMount, tick } from "svelte";
+  import {
+    COLLAPSE_CONTEXT_KEY,
+    type CollapseContext,
+  } from "./CollapseContext";
+  import Icon from "../Icon/Icon.svelte";
+  import { ChevronRight } from "lucide";
+
+  interface CollapseItemProps {
+    name: string;
+    title?: string | Snippet;
+    disabled?: boolean;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    name,
+    title = "",
+    disabled = false,
+    children,
+    class: cls = "",
+    ...attrs
+  }: CollapseItemProps = $props();
+
+  const collapse = getContext<CollapseContext>(COLLAPSE_CONTEXT_KEY);
+
+  const isActive = $derived(collapse?.activeNames.includes(name) ?? false);
+
+  let wrapEl: HTMLDivElement | null = null;
+  let contentEl: HTMLDivElement | null = null;
+  let reduceMotion = $state(false);
+  let wrapHeight = $state("0px");
+
+  const getContentHeight = (): number => {
+    if (!contentEl) return 0;
+    const clone = contentEl.cloneNode(true) as HTMLElement;
+    clone.style.height = "auto";
+    clone.style.position = "absolute";
+    clone.style.visibility = "hidden";
+    clone.style.pointerEvents = "none";
+    document.body.appendChild(clone);
+    const height = clone.offsetHeight;
+    document.body.removeChild(clone);
+    return height;
+  };
+
+  const open = async (): Promise<void> => {
+    if (!wrapEl) return;
+
+    if (reduceMotion) {
+      wrapHeight = "auto";
+      return;
+    }
+
+    wrapHeight = "0px";
+    await tick();
+    const targetHeight = getContentHeight();
+    wrapHeight = `${targetHeight}px`;
+
+    setTimeout(() => {
+      if (isActive) {
+        wrapHeight = "auto";
+      }
+    }, 300);
+  };
+
+  const close = async (): Promise<void> => {
+    if (!wrapEl) return;
+
+    if (reduceMotion) {
+      wrapHeight = "0px";
+      return;
+    }
+
+    const currentHeight = wrapEl.offsetHeight;
+    wrapHeight = `${currentHeight}px`;
+    await tick();
+    requestAnimationFrame(() => {
+      wrapHeight = "0px";
+    });
+  };
+
+  onMount(() => {
+    if (typeof window !== "undefined") {
+      reduceMotion =
+        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ??
+        false;
+    }
+    if (isActive) {
+      wrapHeight = reduceMotion ? "auto" : `${getContentHeight()}px`;
+    }
+  });
+
+  let prevActive = $state(false);
+  $effect(() => {
+    const activeNow = isActive;
+    if (activeNow === prevActive) return;
+    prevActive = activeNow;
+
+    if (reduceMotion) {
+      wrapHeight = activeNow ? "auto" : "0px";
+      return;
+    }
+
+    if (activeNow) {
+      open();
+    } else {
+      close();
+    }
+  });
+
+  const handleClick = (): void => {
+    if (!disabled) collapse?.toggle(name);
+  };
+
+  const handleKeydown = (e: KeyboardEvent): void => {
+    if ((e.key === "Enter" || e.key === " ") && !disabled) {
+      e.preventDefault();
+      collapse?.toggle(name);
+    }
+  };
+
+  const classes = $derived(
+    `lm-collapse-item lm-collapse__item${isActive ? " is-active" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+</script>
+
+<div class={classes} {...attrs}>
+  <div
+    class="lm-collapse-item__header lm-collapse__header"
+    role="tab"
+    tabindex={disabled ? -1 : 0}
+    aria-expanded={isActive}
+    aria-disabled={disabled}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+  >
+    <span class="lm-collapse-item__title lm-collapse__title">
+      {#if typeof title === "string"}
+        {title}
+      {:else if title}
+        {@render title()}
+      {/if}
+    </span>
+    <span
+      class="lm-collapse-item__arrow lm-collapse__arrow"
+      class:is-active={isActive}
+    >
+      <Icon icon={ChevronRight} size={16} />
+    </span>
+  </div>
+
+  <div
+    class="lm-collapse-item__wrap lm-collapse__wrap"
+    class:is-active={isActive}
+    class:is-disabled={disabled}
+    role="tabpanel"
+    aria-hidden={!isActive}
+    bind:this={wrapEl}
+    style:height={wrapHeight}
+    style:overflow="hidden"
+  >
+    <div
+      class="lm-collapse-item__content lm-collapse__content"
+      bind:this={contentEl}
+    >
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+</div>