luna-plus 0.0.5

package/dist/PinInput/index.js

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

package/dist/PinInput/types.d.ts

@@ -0,0 +1,31 @@
+/** PinInput 类型 */
+export type PinInputType = 'text' | 'number' | 'password';
+/** PinInput 尺寸 */
+export type PinInputSize = 'small' | 'medium' | 'large';
+/** PinInput 属性 */
+export interface PinInputProps {
+    /** 绑定值 */
+    value?: string;
+    /** 输入框数量 */
+    length?: number;
+    /** 输入类型 */
+    type?: PinInputType;
+    /** 尺寸 */
+    size?: PinInputSize;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否遮罩（密码模式） */
+    mask?: boolean;
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否自动聚焦 */
+    autoFocus?: boolean;
+    /** 输入事件 */
+    oninput?: (value: string) => void;
+    /** 完成事件 */
+    oncomplete?: (value: string) => void;
+    /** 自定义类名 */
+    class?: string;
+    /** 其他属性 */
+    [key: string]: unknown;
+}

package/dist/PinInput/types.js

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

package/dist/Popconfirm/Popconfirm.svelte

@@ -0,0 +1,293 @@
+<script lang="ts" module>
+  let currentVisiblePopconfirm: symbol | null = $state(null);
+</script>
+
+<script lang="ts">
+  import type { PopconfirmProps } from "./types";
+  import { onDestroy } from "svelte";
+  import { scale } from "svelte/transition";
+  import { CircleHelp } from "lucide";
+  import Button from "../Button/Button.svelte";
+  import Icon from "../Icon/Icon.svelte";
+  import { portal } from "../utils/portal";
+  import {
+    computeFixedFloatingPosition,
+    getTransformOriginForPlacement,
+    type FloatingPlacement,
+    type TransformOrigin,
+  } from "../utils/floating";
+
+  let {
+    title = "",
+    confirmButtonText = "确定",
+    cancelButtonText = "取消",
+    confirmButtonType = "primary",
+    cancelButtonType = "default",
+    iconColor = "#f90",
+    hideIcon = false,
+    hideAfter = 200,
+    persistent = false,
+    width = 150,
+    placement = "top",
+    disabled = false,
+    showArrow = true,
+    trigger = "click",
+    onConfirm,
+    onCancel,
+    children,
+    icon,
+    actions,
+    class: cls = "",
+    ...attrs
+  }: PopconfirmProps = $props();
+
+  const instanceId = Symbol("popconfirm");
+
+  let internalVisible = $state(false);
+  let isVisible = $derived(internalVisible);
+  let popperElement: HTMLElement | null = $state(null);
+  let referenceElement: HTMLElement | null = $state(null);
+  let adjustedPlacement = $state<string | null>(null);
+  let actualPlacement = $derived(adjustedPlacement || placement);
+
+  let popperX = $state(0);
+  let popperY = $state(0);
+  let transformOrigin = $derived<TransformOrigin>(
+    getTransformOriginForPlacement(actualPlacement as FloatingPlacement),
+  );
+
+  let positionRafId: number | null = null;
+
+  const scheduleUpdatePosition = (): void => {
+    if (positionRafId !== null) cancelAnimationFrame(positionRafId);
+    positionRafId = requestAnimationFrame(() => {
+      positionRafId = null;
+      updatePosition();
+    });
+  };
+
+  const updatePosition = (): void => {
+    if (!referenceElement || !popperElement) return;
+
+    const referenceRect = referenceElement.getBoundingClientRect();
+    const floatingSize = {
+      width: popperElement.offsetWidth,
+      height: popperElement.offsetHeight,
+    };
+
+    if (floatingSize.width <= 0 || floatingSize.height <= 0) return;
+
+    const {
+      x,
+      y,
+      placement: finalPlacement,
+    } = computeFixedFloatingPosition(referenceRect, floatingSize, {
+      placement: placement as FloatingPlacement,
+      offset: 12,
+      padding: 8,
+    });
+
+    popperX = x;
+    popperY = y;
+    adjustedPlacement = finalPlacement;
+  };
+
+  /** 隐藏定时器 */
+  let hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const clearHideTimer = (): void => {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  };
+
+  const showPopconfirm = (): void => {
+    if (disabled) return;
+    if (
+      currentVisiblePopconfirm !== null &&
+      currentVisiblePopconfirm !== instanceId
+    ) {
+      window.dispatchEvent(
+        new CustomEvent("popconfirm:close", { detail: { except: instanceId } }),
+      );
+    }
+    currentVisiblePopconfirm = instanceId;
+    internalVisible = true;
+    clearHideTimer();
+  };
+
+  const closePopconfirm = (): void => {
+    internalVisible = false;
+    if (currentVisiblePopconfirm === instanceId)
+      currentVisiblePopconfirm = null;
+  };
+
+  const handleConfirm = (): void => {
+    onConfirm?.();
+    clearHideTimer();
+    closePopconfirm();
+  };
+
+  const handleCancel = (): void => {
+    onCancel?.();
+    clearHideTimer();
+    closePopconfirm();
+  };
+
+  const handleTriggerClick = (e: MouseEvent): void => {
+    if (disabled || trigger !== "click") return;
+    e.stopPropagation();
+    if (!internalVisible) showPopconfirm();
+    else closePopconfirm();
+  };
+
+  const handleRefEnter = (): void => {
+    if (trigger !== "hover") return;
+    showPopconfirm();
+  };
+
+  const handleRefLeave = (): void => {
+    if (trigger !== "hover") return;
+    clearHideTimer();
+    hideTimer = setTimeout(closePopconfirm, hideAfter);
+  };
+
+  const handlePopperEnter = (): void => {
+    if (trigger !== "hover") return;
+    clearHideTimer();
+  };
+
+  const handlePopperLeave = (): void => {
+    if (trigger !== "hover") return;
+    hideTimer = setTimeout(closePopconfirm, hideAfter);
+  };
+
+  const handlePointerDownOutside = (e: PointerEvent): void => {
+    if (!isVisible) return;
+    const path = e.composedPath();
+    if (referenceElement && path.includes(referenceElement)) return;
+    if (popperElement && path.includes(popperElement)) return;
+    closePopconfirm();
+  };
+
+  const handleGlobalClose = (e: Event): void => {
+    const customEvent = e as CustomEvent;
+    if (customEvent.detail?.except !== instanceId && internalVisible)
+      closePopconfirm();
+  };
+
+  $effect(() => {
+    window.addEventListener("popconfirm:close", handleGlobalClose);
+    return () =>
+      window.removeEventListener("popconfirm:close", handleGlobalClose);
+  });
+
+  onDestroy(() => {
+    clearHideTimer();
+    if (currentVisiblePopconfirm === instanceId)
+      currentVisiblePopconfirm = null;
+  });
+
+  $effect(() => {
+    if (isVisible) {
+      const handleViewportChange = (): void => {
+        scheduleUpdatePosition();
+      };
+
+      document.addEventListener("pointerdown", handlePointerDownOutside, true);
+      window.addEventListener("resize", handleViewportChange);
+      window.addEventListener("scroll", handleViewportChange, true);
+
+      queueMicrotask(scheduleUpdatePosition);
+      scheduleUpdatePosition();
+
+      return () => {
+        document.removeEventListener(
+          "pointerdown",
+          handlePointerDownOutside,
+          true,
+        );
+        window.removeEventListener("resize", handleViewportChange);
+        window.removeEventListener("scroll", handleViewportChange, true);
+        if (positionRafId !== null) cancelAnimationFrame(positionRafId);
+      };
+    } else {
+      adjustedPlacement = null;
+    }
+  });
+
+  const widthValue = $derived(
+    typeof width === "number" ? `${Math.max(150, width)}px` : width,
+  );
+
+  const classes = $derived(
+    `lm-popconfirm${isVisible ? " is-visible" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  const popperClasses = $derived(`lm-popconfirm__popper is-${actualPlacement}`);
+</script>
+
+<div {...attrs} class={classes}>
+  <div
+    bind:this={referenceElement}
+    class="lm-popconfirm__reference"
+    role="button"
+    tabindex="0"
+    onclick={handleTriggerClick}
+    onkeydown={(e: KeyboardEvent) =>
+      e.key === "Enter" && handleTriggerClick(e as unknown as MouseEvent)}
+    onmouseenter={handleRefEnter}
+    onmouseleave={handleRefLeave}
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+
+  {#if isVisible || persistent}
+    <div
+      bind:this={popperElement}
+      class={popperClasses}
+      class:is-hidden={!isVisible && persistent}
+      role="dialog"
+      aria-modal="false"
+      tabindex="-1"
+      use:portal
+      style={`top: ${popperY}px; left: ${popperX}px; width: ${widthValue}; transform-origin: ${transformOrigin};`}
+      onclick={(e: MouseEvent) => e.stopPropagation()}
+      onkeydown={(e: KeyboardEvent) => e.stopPropagation()}
+      onmouseenter={handlePopperEnter}
+      onmouseleave={handlePopperLeave}
+      transition:scale={{ duration: 150, start: 0.9 }}
+    >
+      {#if showArrow}
+        <div class="lm-popconfirm__arrow"></div>
+      {/if}
+      <div class="lm-popconfirm__main">
+        {#if !hideIcon}
+          <span class="lm-popconfirm__icon" style="color: {iconColor};">
+            {#if icon}
+              {@render icon()}
+            {:else}
+              <Icon icon={CircleHelp} size={16} />
+            {/if}
+          </span>
+        {/if}
+        <span class="lm-popconfirm__title">{title}</span>
+      </div>
+      <div class="lm-popconfirm__action">
+        {#if actions}
+          {@render actions({ confirm: handleConfirm, cancel: handleCancel })}
+        {:else}
+          <Button size="small" type={cancelButtonType} onclick={handleCancel}>
+            {cancelButtonText}
+          </Button>
+          <Button size="small" type={confirmButtonType} onclick={handleConfirm}>
+            {confirmButtonText}
+          </Button>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/Popconfirm/Popconfirm.svelte.d.ts

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

package/dist/Popconfirm/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Popconfirm } from './Popconfirm.svelte';
+export type * from './types';

package/dist/Popconfirm/index.js

@@ -0,0 +1 @@
+export { default as Popconfirm } from './Popconfirm.svelte';

package/dist/Popconfirm/types.d.ts

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+/** Popconfirm 位置 */
+export type PopconfirmPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+/** 按钮类型 */
+export type PopconfirmButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default';
+/** Popconfirm 属性 */
+export interface PopconfirmProps {
+    /** 标题 */
+    title?: string;
+    /** 确认按钮文字 */
+    confirmButtonText?: string;
+    /** 取消按钮文字 */
+    cancelButtonText?: string;
+    /** 确认按钮类型 */
+    confirmButtonType?: PopconfirmButtonType;
+    /** 取消按钮类型 */
+    cancelButtonType?: PopconfirmButtonType;
+    /** 图标颜色 */
+    iconColor?: string;
+    /** 是否隐藏图标 */
+    hideIcon?: boolean;
+    /** 隐藏后延迟关闭时间 (ms) */
+    hideAfter?: number;
+    /** 非活跃时是否保留 DOM */
+    persistent?: boolean;
+    /** 弹出框宽度，最小 150px */
+    width?: string | number;
+    /** 位置 */
+    placement?: PopconfirmPlacement;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示箭头 */
+    showArrow?: boolean;
+    /** 触发方式 */
+    trigger?: 'click' | 'hover';
+    /** 确认事件 */
+    onConfirm?: () => void;
+    /** 取消事件 */
+    onCancel?: () => void;
+    /** 触发器插槽 */
+    children?: Snippet;
+    /** 图标插槽 */
+    icon?: Snippet;
+    /** 操作区域插槽 */
+    actions?: Snippet<[{
+        confirm: () => void;
+        cancel: () => void;
+    }]>;
+    /** 自定义类名 */
+    class?: string;
+    /** 其他属性 */
+    [key: string]: unknown;
+}

package/dist/Popconfirm/types.js

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

package/dist/Popover/Popover.svelte

@@ -0,0 +1,245 @@
+<script lang="ts" module>
+  let currentVisiblePopover: symbol | null = $state(null);
+</script>
+
+<script lang="ts">
+  import type { PopoverProps } from "./types";
+  import { onDestroy } from "svelte";
+  import { scale } from "svelte/transition";
+  import { portal } from "../utils/portal";
+  import {
+    computeFixedFloatingPosition,
+    getTransformOriginForPlacement,
+    type FloatingPlacement,
+    type TransformOrigin,
+  } from "../utils/floating";
+
+  let {
+    content = undefined,
+    placement = "top",
+    width = 200,
+    visible = undefined,
+    disabled = false,
+    showArrow = true,
+    trigger = "hover",
+    class: cls = "",
+    children,
+    ...attrs
+  }: PopoverProps & { trigger?: "hover" | "click" } = $props();
+
+  const instanceId = Symbol("popover");
+
+  let internalVisible = $state(false);
+  let isVisible = $derived(visible !== undefined ? visible : internalVisible);
+  let popperElement: HTMLElement | null = $state(null);
+  let referenceElement: HTMLElement | null = $state(null);
+  let adjustedPlacement = $state<string | null>(null);
+  let actualPlacement = $derived(adjustedPlacement || placement);
+
+  let popperX = $state(0);
+  let popperY = $state(0);
+  let transformOrigin = $derived<TransformOrigin>(
+    getTransformOriginForPlacement(actualPlacement as FloatingPlacement),
+  );
+
+  let positionRafId: number | null = null;
+
+  const scheduleUpdatePosition = (): void => {
+    if (positionRafId !== null) cancelAnimationFrame(positionRafId);
+    positionRafId = requestAnimationFrame(() => {
+      positionRafId = null;
+      updatePosition();
+    });
+  };
+
+  const updatePosition = (): void => {
+    if (!referenceElement || !popperElement) return;
+
+    const referenceRect = referenceElement.getBoundingClientRect();
+    const floatingSize = {
+      width: popperElement.offsetWidth,
+      height: popperElement.offsetHeight,
+    };
+
+    if (floatingSize.width <= 0 || floatingSize.height <= 0) return;
+
+    const {
+      x,
+      y,
+      placement: finalPlacement,
+    } = computeFixedFloatingPosition(referenceRect, floatingSize, {
+      placement: placement as FloatingPlacement,
+      offset: 12,
+      padding: 8,
+    });
+
+    popperX = x;
+    popperY = y;
+    adjustedPlacement = finalPlacement;
+  };
+
+  /** 隐藏定时器（普通变量，无需响应式） */
+  let hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const clearHideTimer = (): void => {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  };
+
+  const showPopover = (): void => {
+    if (disabled) return;
+    if (
+      currentVisiblePopover !== null &&
+      currentVisiblePopover !== instanceId
+    ) {
+      window.dispatchEvent(
+        new CustomEvent("popover:close", { detail: { except: instanceId } }),
+      );
+    }
+    currentVisiblePopover = instanceId;
+    internalVisible = true;
+    clearHideTimer();
+  };
+
+  const closePopover = (): void => {
+    internalVisible = false;
+    if (currentVisiblePopover === instanceId) currentVisiblePopover = null;
+  };
+
+  const handleTriggerClick = (e: MouseEvent): void => {
+    if (disabled || trigger !== "click") return;
+    e.stopPropagation();
+    if (!internalVisible) showPopover();
+    else closePopover();
+  };
+
+  const handleRefEnter = (): void => {
+    if (trigger !== "hover") return;
+    showPopover();
+  };
+
+  const handleRefLeave = (): void => {
+    if (trigger !== "hover") return;
+    clearHideTimer();
+    hideTimer = setTimeout(closePopover, 120);
+  };
+
+  const handlePopperEnter = (): void => {
+    if (trigger !== "hover") return;
+    clearHideTimer();
+  };
+
+  const handlePopperLeave = (): void => {
+    if (trigger !== "hover") return;
+    hideTimer = setTimeout(closePopover, 120);
+  };
+
+  const handleGlobalClose = (e: Event): void => {
+    const customEvent = e as CustomEvent;
+    if (customEvent.detail?.except !== instanceId && internalVisible)
+      closePopover();
+  };
+
+  $effect(() => {
+    window.addEventListener("popover:close", handleGlobalClose);
+    return () => window.removeEventListener("popover:close", handleGlobalClose);
+  });
+
+  onDestroy(() => {
+    clearHideTimer();
+    if (currentVisiblePopover === instanceId) currentVisiblePopover = null;
+  });
+
+  $effect(() => {
+    if (isVisible) {
+      const handlePointerDownOutside = (e: PointerEvent): void => {
+        const path = e.composedPath();
+        if (referenceElement && path.includes(referenceElement)) return;
+        if (popperElement && path.includes(popperElement)) return;
+        closePopover();
+      };
+
+      const handleViewportChange = (): void => {
+        scheduleUpdatePosition();
+      };
+
+      document.addEventListener("pointerdown", handlePointerDownOutside, true);
+      window.addEventListener("resize", handleViewportChange);
+      window.addEventListener("scroll", handleViewportChange, true);
+
+      queueMicrotask(scheduleUpdatePosition);
+      scheduleUpdatePosition();
+
+      return () => {
+        document.removeEventListener(
+          "pointerdown",
+          handlePointerDownOutside,
+          true,
+        );
+        window.removeEventListener("resize", handleViewportChange);
+        window.removeEventListener("scroll", handleViewportChange, true);
+        if (positionRafId !== null) cancelAnimationFrame(positionRafId);
+      };
+    } else {
+      adjustedPlacement = null;
+    }
+  });
+
+  const classes = $derived(
+    `lm-popover${isVisible ? " is-visible" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  const popperClasses = $derived(`lm-popover__popper is-${actualPlacement}`);
+
+  const widthValue = $derived(
+    typeof width === "number" ? `${Math.max(0, width)}px` : width,
+  );
+</script>
+
+<div {...attrs} class={classes}>
+  <div
+    bind:this={referenceElement}
+    class="lm-popover__reference"
+    role="button"
+    tabindex="0"
+    onclick={handleTriggerClick}
+    onkeydown={(e: KeyboardEvent) =>
+      e.key === "Enter" &&
+      trigger === "click" &&
+      handleTriggerClick(e as unknown as MouseEvent)}
+    onmouseenter={handleRefEnter}
+    onmouseleave={handleRefLeave}
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+
+  {#if isVisible}
+    <div
+      bind:this={popperElement}
+      class={popperClasses}
+      role="dialog"
+      aria-modal="false"
+      tabindex="-1"
+      use:portal
+      style={`top: ${popperY}px; left: ${popperX}px; width: ${widthValue}; transform-origin: ${transformOrigin};`}
+      onclick={(e: MouseEvent) => e.stopPropagation()}
+      onkeydown={(e: KeyboardEvent) => e.stopPropagation()}
+      onmouseenter={handlePopperEnter}
+      onmouseleave={handlePopperLeave}
+      transition:scale={{ duration: 150, start: 0.9 }}
+    >
+      {#if showArrow}
+        <div class="lm-popover__arrow"></div>
+      {/if}
+      <div class="lm-popover__content">
+        {#if content}
+          {@render content()}
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/Popover/Popover.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PopoverProps } from './types';
+type $$ComponentProps = PopoverProps & {
+    trigger?: 'hover' | 'click';
+};
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/Popover/index.d.ts

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

package/dist/Popover/index.js

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

package/dist/Popover/types.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+/** Popover 位置 */
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+/** Popover 属性 */
+export interface PopoverProps {
+    /** 内容 */
+    content?: Snippet;
+    /** 位置 */
+    placement?: PopoverPlacement;
+    /** 宽度 */
+    width?: string | number;
+    /** 是否可见 */
+    visible?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示箭头 */
+    showArrow?: boolean;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+    /** 其他属性 */
+    [key: string]: unknown;
+}

package/dist/Popover/types.js

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