luna-plus 0.0.5

package/dist/Descriptions/DescriptionsItem.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface DescriptionsItemProps {
+    label?: string | Snippet;
+    span?: number;
+    labelWidth?: string | number;
+    align?: 'left' | 'center' | 'right';
+    labelAlign?: 'left' | 'center' | 'right';
+    children?: Snippet;
+    class?: string;
+}
+declare const DescriptionsItem: import("svelte").Component<DescriptionsItemProps, {}, "">;
+type DescriptionsItem = ReturnType<typeof DescriptionsItem>;
+export default DescriptionsItem;

package/dist/Descriptions/index.d.ts

@@ -0,0 +1,5 @@
+import Descriptions from './Descriptions.svelte';
+import DescriptionsItem from './DescriptionsItem.svelte';
+export { Descriptions, DescriptionsItem };
+export type { DescriptionsProps, DescriptionsItemProps, DescriptionsSize, DescriptionsDirection } from './types';
+export default Descriptions;

package/dist/Descriptions/index.js

@@ -0,0 +1,4 @@
+import Descriptions from './Descriptions.svelte';
+import DescriptionsItem from './DescriptionsItem.svelte';
+export { Descriptions, DescriptionsItem };
+export default Descriptions;

package/dist/Descriptions/types.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+/** Descriptions 尺寸 */
+export type DescriptionsSize = 'large' | 'default' | 'small';
+/** Descriptions 方向 */
+export type DescriptionsDirection = 'horizontal' | 'vertical';
+/** Descriptions 属性 */
+export interface DescriptionsProps {
+    /** 标题 */
+    title?: string | Snippet;
+    /** 额外内容 */
+    extra?: Snippet;
+    /** 是否显示边框 */
+    border?: boolean;
+    /** 一行显示的列数 */
+    column?: number;
+    /** 方向 */
+    direction?: DescriptionsDirection;
+    /** 尺寸 */
+    size?: DescriptionsSize;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** DescriptionsItem 属性 */
+export interface DescriptionsItemProps {
+    /** 标签 */
+    label?: string | Snippet;
+    /** 占用列数 */
+    span?: number;
+    /** 标签宽度 */
+    labelWidth?: string | number;
+    /** 内容对齐方式 */
+    align?: 'left' | 'center' | 'right';
+    /** 标签对齐方式 */
+    labelAlign?: 'left' | 'center' | 'right';
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Descriptions/types.js

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

package/dist/Dialog/Dialog.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cubicOut } from "svelte/easing";
+  import { fade, scale } from "svelte/transition";
+  import Icon from "../Icon/Icon.svelte";
+  import { X } from "lucide";
+
+  interface DialogProps {
+    visible?: boolean;
+    title?: string;
+    width?: string;
+    showClose?: boolean;
+    modal?: boolean;
+    closeOnClickModal?: boolean;
+    closeOnEsc?: boolean;
+    center?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    onclose?: () => void;
+    onopen?: () => void;
+    class?: string;
+  }
+
+  let {
+    visible = $bindable(false),
+    title = "",
+    width = "50%",
+    showClose = true,
+    modal = true,
+    closeOnClickModal = true,
+    closeOnEsc = true,
+    center = false,
+    header,
+    footer,
+    children,
+    onclose,
+    onopen,
+    class: cls = "",
+    ...attrs
+  }: DialogProps = $props();
+
+  const classes = $derived(
+    `lm-dialog${center ? " is-center" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  const dialogStyle = $derived(`width: ${width}`);
+
+  const overlayTransition = { duration: 200 };
+  const panelTransition = {
+    duration: 200,
+    start: 0.96,
+    opacity: 0,
+    easing: cubicOut,
+  };
+
+  /** 关闭对话框 */
+  const handleClose = (): void => {
+    visible = false;
+    onclose?.();
+  };
+
+  /** 遮罩层点击 */
+  const handleModalClick = (e: MouseEvent): void => {
+    if (closeOnClickModal && e.target === e.currentTarget) {
+      handleClose();
+    }
+  };
+
+  /** 键盘事件 */
+  const handleKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClose();
+    }
+  };
+
+  /** ESC 键处理 */
+  const handleEscKey = (e: KeyboardEvent): void => {
+    if (closeOnEsc && e.key === "Escape") {
+      handleClose();
+    }
+  };
+
+  // ESC 键监听
+  $effect(() => {
+    if (!visible || !closeOnEsc) return;
+
+    onopen?.();
+    document.addEventListener("keydown", handleEscKey);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscKey);
+    };
+  });
+</script>
+
+{#if visible}
+  <div
+    class="lm-dialog-wrapper"
+    onclick={handleModalClick}
+    onkeydown={handleKeyDown}
+    role="presentation"
+  >
+    {#if modal}
+      <div class="lm-dialog-overlay" transition:fade={overlayTransition}></div>
+    {/if}
+
+    <div
+      {...attrs}
+      class={classes}
+      style={dialogStyle}
+      role="dialog"
+      aria-modal="true"
+      transition:scale={panelTransition}
+    >
+      {#if header || title || showClose}
+        <div class="lm-dialog__header">
+          {#if header}
+            {@render header()}
+          {:else if title}
+            <span class="lm-dialog__title">{title}</span>
+          {/if}
+
+          {#if showClose}
+            <button
+              type="button"
+              class="lm-dialog__close"
+              onclick={handleClose}
+              aria-label="Close"
+            >
+              <Icon icon={X} size={18} />
+            </button>
+          {/if}
+        </div>
+      {/if}
+
+      {#if children}
+        <div class="lm-dialog__body">
+          {@render children()}
+        </div>
+      {/if}
+
+      {#if footer}
+        <div class="lm-dialog__footer">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/Dialog/Dialog.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface DialogProps {
+    visible?: boolean;
+    title?: string;
+    width?: string;
+    showClose?: boolean;
+    modal?: boolean;
+    closeOnClickModal?: boolean;
+    closeOnEsc?: boolean;
+    center?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    onclose?: () => void;
+    onopen?: () => void;
+    class?: string;
+}
+declare const Dialog: import("svelte").Component<DialogProps, {}, "visible">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/Dialog/index.d.ts

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

package/dist/Dialog/index.js

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

package/dist/Dialog/types.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+/** Dialog 属性 */
+export interface DialogProps {
+    /** 是否可见 */
+    visible?: boolean;
+    /** 标题 */
+    title?: string;
+    /** 宽度 */
+    width?: string;
+    /** 是否显示关闭按钮 */
+    showClose?: boolean;
+    /** 是否显示遮罩层 */
+    modal?: boolean;
+    /** 点击遮罩层是否关闭 */
+    closeOnClickModal?: boolean;
+    /** 按 ESC 是否关闭 */
+    closeOnEsc?: boolean;
+    /** 是否居中 */
+    center?: boolean;
+    /** 头部内容 */
+    header?: Snippet;
+    /** 底部内容 */
+    footer?: Snippet;
+    /** 子内容 */
+    children?: Snippet;
+    /** 关闭回调 */
+    onclose?: () => void;
+    /** 打开回调 */
+    onopen?: () => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Dialog/types.js

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

package/dist/Divider/Divider.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface DividerProps {
+    direction?: "horizontal" | "vertical";
+    contentPosition?: "left" | "center" | "right";
+    borderStyle?: "solid" | "dashed" | "dotted";
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    direction = "horizontal",
+    contentPosition = "center",
+    borderStyle = "solid",
+    children,
+    class: cls = "",
+    ...attrs
+  }: DividerProps = $props();
+
+  const classes = $derived(
+    `lm-divider lm-divider--${direction} lm-divider--${borderStyle}${direction === "horizontal" && children ? ` is-${contentPosition}` : ""}${cls ? ` ${cls}` : ""}`,
+  );
+</script>
+
+<div
+  {...attrs}
+  class={classes}
+  role="separator"
+  aria-orientation={direction === "vertical" ? "vertical" : "horizontal"}
+>
+  {#if direction === "horizontal"}
+    {#if children}
+      {#if contentPosition !== "left"}
+        <span class="lm-divider__line" aria-hidden="true"></span>
+      {/if}
+      <span class="lm-divider__text">{@render children()}</span>
+      {#if contentPosition !== "right"}
+        <span class="lm-divider__line" aria-hidden="true"></span>
+      {/if}
+    {:else}
+      <span class="lm-divider__line" aria-hidden="true"></span>
+    {/if}
+  {:else}
+    <span class="lm-divider__line" aria-hidden="true"></span>
+  {/if}
+</div>

package/dist/Divider/Divider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface DividerProps {
+    direction?: 'horizontal' | 'vertical';
+    contentPosition?: 'left' | 'center' | 'right';
+    borderStyle?: 'solid' | 'dashed' | 'dotted';
+    children?: Snippet;
+    class?: string;
+}
+declare const Divider: import("svelte").Component<DividerProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/Divider/index.d.ts

@@ -0,0 +1,4 @@
+import Divider from './Divider.svelte';
+export { Divider };
+export type { DividerProps, DividerDirection, DividerContentPosition, DividerBorderStyle } from './types';
+export default Divider;

package/dist/Divider/index.js

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

package/dist/Divider/types.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+/** Divider 方向 */
+export type DividerDirection = 'horizontal' | 'vertical';
+/** Divider 内容位置 */
+export type DividerContentPosition = 'left' | 'center' | 'right';
+/** Divider 边框样式 */
+export type DividerBorderStyle = 'solid' | 'dashed' | 'dotted';
+/** Divider 属性 */
+export interface DividerProps {
+    /** 方向 */
+    direction?: DividerDirection;
+    /** 内容位置 */
+    contentPosition?: DividerContentPosition;
+    /** 边框样式 */
+    borderStyle?: DividerBorderStyle;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Divider/types.js

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

package/dist/Drawer/Drawer.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { DrawerDirection } from './types'
+    import Icon from '../Icon/Icon.svelte'
+    import { X } from 'lucide'
+
+    interface DrawerProps {
+        open?: boolean
+        title?: string | Snippet
+        direction?: DrawerDirection
+        size?: string | number
+        showClose?: boolean
+        modal?: boolean
+        closeOnClickModal?: boolean
+        closeOnPressEscape?: boolean
+        lockScroll?: boolean
+        appendToBody?: boolean
+        beforeClose?: () => boolean | Promise<boolean>
+        onclose?: () => void
+        onopen?: () => void
+        header?: Snippet
+        footer?: Snippet<[{ close: () => void }]>
+        children?: Snippet
+        class?: string
+    }
+
+    let {
+        open = $bindable(false),
+        title = '',
+        direction = 'rtl',
+        size = '30%',
+        showClose = true,
+        modal = true,
+        closeOnClickModal = true,
+        closeOnPressEscape = true,
+        lockScroll = true,
+        appendToBody = false,
+        beforeClose,
+        onclose,
+        onopen,
+        header,
+        footer,
+        children,
+        class: cls = '',
+        ...attrs
+    }: DrawerProps = $props()
+
+    let drawerRef: HTMLDivElement | null = $state(null)
+    let visible = $state(false)
+    let closing = $state(false)
+
+    const sizeStyle = $derived(typeof size === 'number' ? `${size}px` : size)
+    const isHorizontal = $derived(direction === 'ltr' || direction === 'rtl')
+
+    const panelStyle = $derived(isHorizontal ? `width: ${sizeStyle}` : `height: ${sizeStyle}`)
+
+    const classes = $derived(`lm-drawer lm-drawer--${direction}${visible ? ' is-open' : ''}${closing ? ' is-closing' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const close = async (): Promise<void> => {
+        if (closing) return
+        if (beforeClose) {
+            const result = await beforeClose()
+            if (!result) return
+        }
+        closing = true
+        setTimeout(() => {
+            open = false
+            visible = false
+            closing = false
+            onclose?.()
+        }, 300)
+    }
+
+    const handleOverlayClick = (): void => {
+        if (closeOnClickModal) close()
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape' && closeOnPressEscape) close()
+    }
+
+    $effect(() => {
+        if (open && !closing) {
+            visible = true
+            onopen?.()
+            if (lockScroll) document.body.style.overflow = 'hidden'
+            setTimeout(() => drawerRef?.focus(), 0)
+        } else if (!open && !closing) {
+            visible = false
+            if (lockScroll) document.body.style.overflow = ''
+        }
+    })
+
+    $effect(() => {
+        return () => {
+            if (lockScroll) document.body.style.overflow = ''
+        }
+    })
+</script>
+
+{#if visible || closing}
+    <div bind:this={drawerRef} class={classes} role="dialog" aria-modal="true" tabindex="-1" onkeydown={handleKeydown} {...attrs}>
+        {#if modal}
+            <div class="lm-drawer__overlay" onclick={handleOverlayClick} aria-hidden="true"></div>
+        {/if}
+
+        <div class="lm-drawer__panel" style={panelStyle}>
+            <header class="lm-drawer__header">
+                {#if header}
+                    {@render header()}
+                {:else if title}
+                    <span class="lm-drawer__title">
+                        {#if typeof title === 'string'}
+                            {title}
+                        {:else}
+                            {@render title()}
+                        {/if}
+                    </span>
+                {/if}
+
+                {#if showClose}
+                    <button type="button" class="lm-drawer__close" onclick={close} aria-label="Close">
+                        <Icon icon={X} size={16} />
+                    </button>
+                {/if}
+            </header>
+
+            <div class="lm-drawer__body">
+                {#if children}
+                    {@render children()}
+                {/if}
+            </div>
+
+            {#if footer}
+                <footer class="lm-drawer__footer">
+                    {@render footer({ close })}
+                </footer>
+            {/if}
+        </div>
+    </div>
+{/if}

package/dist/Drawer/Drawer.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { DrawerDirection } from './types';
+interface DrawerProps {
+    open?: boolean;
+    title?: string | Snippet;
+    direction?: DrawerDirection;
+    size?: string | number;
+    showClose?: boolean;
+    modal?: boolean;
+    closeOnClickModal?: boolean;
+    closeOnPressEscape?: boolean;
+    lockScroll?: boolean;
+    appendToBody?: boolean;
+    beforeClose?: () => boolean | Promise<boolean>;
+    onclose?: () => void;
+    onopen?: () => void;
+    header?: Snippet;
+    footer?: Snippet<[{
+        close: () => void;
+    }]>;
+    children?: Snippet;
+    class?: string;
+}
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/Drawer/index.d.ts

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

package/dist/Drawer/index.js

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

package/dist/Drawer/types.d.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+/** Drawer 方向 */
+export type DrawerDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';
+/** Drawer 属性 */
+export interface DrawerProps {
+    /** 是否显示 */
+    open?: boolean;
+    /** 标题 */
+    title?: string | Snippet;
+    /** 方向 */
+    direction?: DrawerDirection;
+    /** 尺寸（宽度或高度） */
+    size?: string | number;
+    /** 是否显示关闭按钮 */
+    showClose?: boolean;
+    /** 是否显示遮罩 */
+    modal?: boolean;
+    /** 点击遮罩是否关闭 */
+    closeOnClickModal?: boolean;
+    /** 按 ESC 是否关闭 */
+    closeOnPressEscape?: boolean;
+    /** 是否锁定 body 滚动 */
+    lockScroll?: boolean;
+    /** 是否追加到 body */
+    appendToBody?: boolean;
+    /** 关闭前回调 */
+    beforeClose?: () => boolean | Promise<boolean>;
+    /** 关闭事件 */
+    onclose?: () => void;
+    /** 打开事件 */
+    onopen?: () => void;
+    /** 头部插槽 */
+    header?: Snippet;
+    /** 底部插槽 */
+    footer?: Snippet;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Drawer/types.js

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