luna-plus 0.0.5

package/dist/Dropdown/Dropdown.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+  import type { DropdownProps } from "./types";
+  import { setDropdownContext } from "./DropdownContext";
+  import { onMount, onDestroy } from "svelte";
+  import { fly } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+
+  let {
+    trigger = "hover",
+    placement = "bottom-start",
+    disabled = false,
+    hideOnClick = true,
+    showTimeout = 100,
+    hideTimeout = 200,
+    maxHeight,
+    showArrow = true,
+    offset = 8,
+    size = "default",
+    popperClass = "",
+    children,
+    dropdown,
+    class: cls = "",
+    oncommand,
+    onvisibleChange,
+  }: DropdownProps = $props();
+
+  let visible = $state(false);
+  let reduceMotion = $state(false);
+  let rootEl = $state<HTMLElement | null>(null);
+  let showTimer: ReturnType<typeof setTimeout> | null = null;
+  let hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const dropdownId = `lm-dropdown-${Math.random().toString(36).slice(2, 9)}`;
+
+  const clearTimers = (): void => {
+    if (showTimer) {
+      clearTimeout(showTimer);
+      showTimer = null;
+    }
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  };
+
+  const open = (): void => {
+    if (disabled || visible) return;
+    clearTimers();
+    visible = true;
+    onvisibleChange?.(true);
+  };
+
+  const close = (): void => {
+    if (!visible) return;
+    clearTimers();
+    visible = false;
+    onvisibleChange?.(false);
+  };
+
+  const delayOpen = (): void => {
+    if (disabled) return;
+    clearTimers();
+    showTimer = setTimeout(open, showTimeout);
+  };
+
+  const delayClose = (): void => {
+    clearTimers();
+    hideTimer = setTimeout(close, hideTimeout);
+  };
+
+  const handleHoverEnter = (): void => {
+    if (trigger !== "hover") return;
+    if (disabled) return;
+    // Hovering back in should always cancel a pending close.
+    if (visible) {
+      clearTimers();
+      return;
+    }
+    delayOpen();
+  };
+
+  const handleHoverLeave = (e: PointerEvent): void => {
+    if (trigger !== "hover") return;
+    // Moving between trigger and popper is still "inside" the dropdown.
+    const next = e.relatedTarget as Node | null;
+    if (next && rootEl?.contains(next)) return;
+    delayClose();
+  };
+
+  const handleTriggerClick = (e: MouseEvent): void => {
+    if (disabled) return;
+    e.stopPropagation();
+    if (trigger === "click") {
+      visible ? close() : open();
+    }
+  };
+
+  const handleTriggerContextMenu = (e: MouseEvent): void => {
+    if (disabled || trigger !== "contextmenu") return;
+    e.preventDefault();
+    e.stopPropagation();
+    open();
+  };
+
+  const handleCommand = (
+    command: string | number | object | undefined,
+  ): void => {
+    if (command !== undefined) {
+      oncommand?.(command);
+    }
+    if (hideOnClick) close();
+  };
+
+  const handleClickOutside = (e: PointerEvent): void => {
+    if (!visible || !rootEl) return;
+    const path =
+      typeof e.composedPath === "function"
+        ? (e.composedPath() as EventTarget[])
+        : ([] as EventTarget[]);
+    if (path.includes(rootEl)) return;
+    close();
+  };
+
+  const handleKeydown = (e: KeyboardEvent): void => {
+    if (e.key === "Escape") {
+      close();
+      return;
+    }
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      e.preventDefault();
+      open();
+    }
+  };
+
+  // 设置上下文供子组件使用
+  setDropdownContext({
+    handleCommand,
+    close,
+  });
+
+  // 动画参数（与 placement 对齐方向）
+  const flyY = $derived(placement.startsWith("top") ? 8 : -8);
+  const flyParams = $derived({ y: flyY, duration: 200, easing: cubicOut });
+
+  onMount(() => {
+    if (typeof window !== "undefined") {
+      reduceMotion =
+        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ??
+        false;
+    }
+    document.addEventListener("pointerdown", handleClickOutside, true);
+  });
+
+  onDestroy(() => {
+    clearTimers();
+    document.removeEventListener("pointerdown", handleClickOutside, true);
+  });
+
+  const rootClasses = $derived(
+    `lm-dropdown lm-dropdown--${size}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  const dropdownClasses = $derived(
+    `lm-dropdown__popper is-${placement}${popperClass ? ` ${popperClass}` : ""}`,
+  );
+
+  const maxHeightStyle = $derived(
+    maxHeight
+      ? typeof maxHeight === "number"
+        ? `${maxHeight}px`
+        : maxHeight
+      : undefined,
+  );
+</script>
+
+<div
+  class={rootClasses}
+  bind:this={rootEl}
+  style="--lm-dropdown-offset: {offset}px;"
+  role="group"
+  tabindex="-1"
+  onpointerover={handleHoverEnter}
+  onpointerout={handleHoverLeave}
+>
+  <div
+    class="lm-dropdown__trigger"
+    role="button"
+    tabindex={disabled ? -1 : 0}
+    aria-haspopup="menu"
+    aria-expanded={visible}
+    aria-controls={dropdownId}
+    aria-disabled={disabled}
+    onclick={handleTriggerClick}
+    oncontextmenu={handleTriggerContextMenu}
+    onkeydown={handleKeydown}
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+
+  {#if visible}
+    <div
+      id={dropdownId}
+      class={dropdownClasses}
+      role="menu"
+      tabindex="-1"
+      style:--lm-dropdown-max-height={maxHeightStyle}
+      in:fly={flyParams}
+      out:fly={flyParams}
+    >
+      {#if showArrow}
+        <div class="lm-dropdown__arrow" aria-hidden="true"></div>
+      {/if}
+      <div class="lm-dropdown__content">
+        {#if dropdown}
+          {@render dropdown()}
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/Dropdown/Dropdown.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownProps } from "./types";
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/Dropdown/DropdownContext.d.ts

@@ -0,0 +1,7 @@
+export declare const DROPDOWN_CONTEXT_KEY: unique symbol;
+export interface DropdownContext {
+    handleCommand: (command: string | number | object | undefined) => void;
+    close: () => void;
+}
+export declare const setDropdownContext: (ctx: DropdownContext) => void;
+export declare const getDropdownContext: () => DropdownContext | undefined;

package/dist/Dropdown/DropdownContext.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte";
+export const DROPDOWN_CONTEXT_KEY = Symbol("dropdown");
+export const setDropdownContext = (ctx) => {
+    setContext(DROPDOWN_CONTEXT_KEY, ctx);
+};
+export const getDropdownContext = () => {
+    return getContext(DROPDOWN_CONTEXT_KEY);
+};

package/dist/Dropdown/DropdownItem.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { DropdownItemProps } from "./types";
+  import { getDropdownContext } from "./DropdownContext";
+
+  let {
+    command,
+    disabled = false,
+    divided = false,
+    danger = false,
+    icon,
+    children,
+    class: cls = "",
+  }: DropdownItemProps = $props();
+
+  const ctx = getDropdownContext();
+
+  const handleClick = (): void => {
+    if (disabled) return;
+    ctx?.handleCommand(command);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent): void => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      ctx?.handleCommand(command);
+    }
+  };
+
+  const classes = $derived(
+    `lm-dropdown-item${disabled ? " is-disabled" : ""}${divided ? " is-divided" : ""}${danger ? " is-danger" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+</script>
+
+<li
+  class={classes}
+  role="menuitem"
+  tabindex={disabled ? -1 : 0}
+  aria-disabled={disabled}
+  onclick={handleClick}
+  onkeydown={handleKeyDown}
+>
+  {#if icon}
+    <span class="lm-dropdown-item__icon">
+      {@render icon()}
+    </span>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+</li>

package/dist/Dropdown/DropdownItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownItemProps } from "./types";
+declare const DropdownItem: import("svelte").Component<DropdownItemProps, {}, "">;
+type DropdownItem = ReturnType<typeof DropdownItem>;
+export default DropdownItem;

package/dist/Dropdown/DropdownMenu.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { DropdownMenuProps } from "./types";
+
+  let { children, class: cls = "" }: DropdownMenuProps = $props();
+
+  const classes = $derived(`lm-dropdown-menu${cls ? ` ${cls}` : ""}`);
+</script>
+
+<ul class={classes} role="menu">
+  {#if children}
+    {@render children()}
+  {/if}
+</ul>

package/dist/Dropdown/DropdownMenu.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownMenuProps } from "./types";
+declare const DropdownMenu: import("svelte").Component<DropdownMenuProps, {}, "">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/Dropdown/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Dropdown } from "./Dropdown.svelte";
+export { default as DropdownMenu } from "./DropdownMenu.svelte";
+export { default as DropdownItem } from "./DropdownItem.svelte";
+export * from "./types";
+export * from "./DropdownContext";

package/dist/Dropdown/index.js

@@ -0,0 +1,5 @@
+export { default as Dropdown } from "./Dropdown.svelte";
+export { default as DropdownMenu } from "./DropdownMenu.svelte";
+export { default as DropdownItem } from "./DropdownItem.svelte";
+export * from "./types";
+export * from "./DropdownContext";

package/dist/Dropdown/types.d.ts

@@ -0,0 +1,68 @@
+import type { Snippet } from "svelte";
+import type { Component } from "svelte";
+export type DropdownTrigger = "hover" | "click" | "contextmenu";
+export type DropdownPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
+export type DropdownSize = "small" | "default" | "large";
+export interface DropdownMenuItem {
+    key: string | number;
+    label?: string;
+    icon?: Component;
+    disabled?: boolean;
+    divided?: boolean;
+    danger?: boolean;
+    children?: Snippet;
+}
+export interface DropdownProps {
+    /** 触发方式 */
+    trigger?: DropdownTrigger;
+    /** 弹出位置 */
+    placement?: DropdownPlacement;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 点击菜单项后是否收起 */
+    hideOnClick?: boolean;
+    /** 展开延迟（毫秒） */
+    showTimeout?: number;
+    /** 收起延迟（毫秒） */
+    hideTimeout?: number;
+    /** 下拉菜单最大高度 */
+    maxHeight?: number | string;
+    /** 是否显示箭头 */
+    showArrow?: boolean;
+    /** 菜单偏移量 */
+    offset?: number;
+    /** 尺寸 */
+    size?: DropdownSize;
+    /** 自定义弹出层 class */
+    popperClass?: string;
+    /** 触发器内容 */
+    children?: Snippet;
+    /** 下拉菜单内容 */
+    dropdown?: Snippet;
+    /** 自定义 class */
+    class?: string;
+    /** 菜单项点击回调 */
+    oncommand?: (command: string | number | object) => void;
+    /** 可见性变化回调 */
+    onvisibleChange?: (visible: boolean) => void;
+}
+export interface DropdownMenuProps {
+    children?: Snippet;
+    class?: string;
+}
+export interface DropdownItemProps {
+    /** 指令 */
+    command?: string | number | object;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示分割线 */
+    divided?: boolean;
+    /** 是否为危险操作 */
+    danger?: boolean;
+    /** 图标 */
+    icon?: Snippet;
+    /** 内容 */
+    children?: Snippet;
+    /** 自定义 class */
+    class?: string;
+}

package/dist/Dropdown/types.js

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

package/dist/Empty/Empty.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface EmptyProps {
+        description?: string
+        image?: Snippet
+        children?: Snippet // description slot
+        actions?: Snippet
+        class?: string
+    }
+
+    let { description = '暂无数据', image, children, actions, class: cls = '', ...attrs }: EmptyProps = $props()
+
+    const classes = $derived(cls ? `lm-empty ${cls}` : 'lm-empty')
+</script>
+
+<div {...attrs} class={classes} aria-live="polite">
+    <div class="lm-empty__image" aria-hidden="true">
+        {#if image}
+            {@render image()}
+        {:else}
+            <svg viewBox="0 0 64 41" width="64" height="41" xmlns="http://www.w3.org/2000/svg" fill="none">
+                <g opacity=".8" stroke="#D3D4DA">
+                    <path d="M63 30H1l8-10 10 6 12-16 8 10 7-6z" />
+                    <circle cx="24" cy="7" r="2" />
+                </g>
+            </svg>
+        {/if}
+    </div>
+    <div class="lm-empty__description">
+        {#if children}
+            {@render children()}
+        {:else}
+            {description}
+        {/if}
+    </div>
+    {#if actions}
+        <div class="lm-empty__actions">{@render actions()}</div>
+    {/if}
+</div>

package/dist/Empty/Empty.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface EmptyProps {
+    description?: string;
+    image?: Snippet;
+    children?: Snippet;
+    actions?: Snippet;
+    class?: string;
+}
+declare const Empty: import("svelte").Component<EmptyProps, {}, "">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/Empty/index.d.ts

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

package/dist/Empty/index.js

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

package/dist/Empty/types.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+/** Empty 属性 */
+export interface EmptyProps {
+    /** 描述文字 */
+    description?: string;
+    /** 自定义图片 */
+    image?: Snippet;
+    /** 子内容（描述插槽） */
+    children?: Snippet;
+    /** 操作区域 */
+    actions?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Empty/types.js

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

package/dist/Form/Form.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { FormProps } from './types'
+    import { setContext } from 'svelte'
+    import { FORM_CONTEXT_KEY } from './FormContext'
+    import { createFormController } from './FormInternals'
+
+    interface Props extends FormProps {
+        children?: Snippet
+    }
+
+    let {
+        model = $bindable({}),
+        rules = {},
+        inline = false,
+        labelWidth = '80px',
+        size = 'medium',
+        disabled = false,
+        class: cls = '',
+        onsubmit: onSubmit,
+        children,
+        ...attrs
+    }: Props = $props()
+
+    let formRef = $state<HTMLFormElement | null>(null)
+
+    const dispatch = (name: string, detail?: any): void => {
+        formRef?.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, cancelable: true }))
+    }
+
+    const {
+        context: formContext,
+        validate,
+        validateField,
+        clearValidation,
+        resetFields,
+        scrollToField,
+    } = createFormController({
+        get model() {
+            return model
+        },
+        get rules() {
+            return rules
+        },
+        get labelWidth() {
+            return labelWidth
+        },
+        get size() {
+            return size
+        },
+        get disabled() {
+            return disabled
+        },
+        get inline() {
+            return inline
+        },
+        dispatch,
+    })
+
+    setContext(FORM_CONTEXT_KEY, formContext)
+
+    const classes = $derived(`lm-form lm-form--${size}${inline ? ' lm-form--inline' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const clearValidate = (props?: string[]) => clearValidation(props)
+
+    export { validate, validateField, clearValidation, clearValidate, resetFields, scrollToField }
+
+    const VALIDATED_SUBMIT_FLAG = '__lm_form_validated_submit__'
+
+    const handleSubmit = async (event: SubmitEvent): Promise<void> => {
+        if (event instanceof CustomEvent && (event as any)?.detail?.[VALIDATED_SUBMIT_FLAG]) {
+            return
+        }
+
+        event.preventDefault()
+
+        const isValid = await validate()
+        const detail = { [VALIDATED_SUBMIT_FLAG]: true, valid: isValid, model, event }
+        onSubmit?.(new CustomEvent('submit', { detail, cancelable: true }))
+        dispatch('submit', detail)
+    }
+</script>
+
+<form bind:this={formRef} class={classes} onsubmit={handleSubmit} {...attrs}>
+    {#if children}
+        {@render children()}
+    {/if}
+</form>

package/dist/Form/Form.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { FormProps } from './types';
+interface Props extends FormProps {
+    children?: Snippet;
+}
+declare const Form: import("svelte").Component<Props, {
+    validate: (props?: string[]) => Promise<boolean>;
+    validateField: (props: string | string[]) => Promise<boolean>;
+    clearValidation: (props?: string[]) => void;
+    clearValidate: (props?: string[]) => void;
+    resetFields: (props?: string[]) => void;
+    scrollToField: (prop: string) => void;
+}, "model">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/Form/FormContext.d.ts

@@ -0,0 +1,19 @@
+import type { FormItemRule, FormValidateTrigger } from './types';
+export interface FormRegisterItem {
+    prop: string;
+    el?: HTMLElement | null;
+    validate: (trigger?: FormValidateTrigger) => Promise<boolean>;
+    clearValidation: () => void;
+    resetField: () => void;
+}
+export interface FormContext {
+    model: Record<string, any>;
+    rules: Record<string, FormItemRule[]>;
+    labelWidth?: string;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    inline?: boolean;
+    register: (item: FormRegisterItem) => void;
+    unregister: (prop: string) => void;
+}
+export declare const FORM_CONTEXT_KEY: unique symbol;

package/dist/Form/FormContext.js

@@ -0,0 +1 @@
+export const FORM_CONTEXT_KEY = Symbol('form-context');

package/dist/Form/FormInternals.d.ts

@@ -0,0 +1,40 @@
+import type { FormContext } from './FormContext';
+import type { FormItemRule, FormItemValidateResult } from './types';
+export interface RunValidateOptions {
+    value: any;
+    rules: FormItemRule[];
+    trigger?: 'input' | 'change' | 'blur' | 'submit';
+    setState: (s: {
+        message?: string;
+        type?: 'error' | 'success' | 'warning';
+    } | null) => void;
+    setValidating: (v: boolean) => void;
+}
+export interface CreateFormControllerOptions {
+    model: Record<string, any>;
+    rules: Record<string, FormItemRule[]>;
+    labelWidth?: string;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    inline?: boolean;
+    dispatch: (name: string, detail?: any) => void;
+}
+export declare const runValidate: ({ value, rules, trigger, setState, setValidating }: RunValidateOptions) => Promise<FormItemValidateResult>;
+export declare const createFormController: (opts: CreateFormControllerOptions) => {
+    context: FormContext;
+    validate: (props?: string[]) => Promise<boolean>;
+    validateField: (props: string | string[]) => Promise<boolean>;
+    clearValidation: (props?: string[]) => void;
+    resetFields: (props?: string[]) => void;
+    scrollToField: (prop: string) => void;
+};
+interface MergeRulesParams {
+    required: boolean;
+    label?: string;
+    prop: string;
+    itemRules?: FormItemRule[];
+    formRules?: FormItemRule[];
+}
+export declare const mergeFormItemRules: ({ required, label, prop, itemRules, formRules }: MergeRulesParams) => FormItemRule[];
+export declare const shouldTriggerChange: (rules: FormItemRule[]) => boolean;
+export {};