luna-plus 0.0.5

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface CollapseItemProps {
+    name: string;
+    title?: string | Snippet;
+    disabled?: boolean;
+    children?: Snippet;
+    class?: string;
+}
+declare const CollapseItem: import("svelte").Component<CollapseItemProps, {}, "">;
+type CollapseItem = ReturnType<typeof CollapseItem>;
+export default CollapseItem;

package/dist/Collapse/index.d.ts

@@ -0,0 +1,5 @@
+import Collapse from './Collapse.svelte';
+import CollapseItem from './CollapseItem.svelte';
+export { Collapse, CollapseItem };
+export type { CollapseProps, CollapseItemProps } from './types';
+export default Collapse;

package/dist/Collapse/index.js

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

package/dist/Collapse/types.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+/** Collapse 属性 */
+export interface CollapseProps {
+    /** 当前激活的面板 */
+    modelValue?: string | string[];
+    /** 是否手风琴模式 */
+    accordion?: boolean;
+    /** 变更事件 */
+    onchange?: (value: string | string[]) => void;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** CollapseItem 属性 */
+export interface CollapseItemProps {
+    /** 唯一标识 */
+    name: string;
+    /** 标题 */
+    title?: string | Snippet;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Collapse/types.js

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

package/dist/ColorPicker/ColorPicker.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import type { ColorPickerSize } from "./types";
+  import Icon from "../Icon/Icon.svelte";
+  import { ChevronDown } from "lucide";
+  import { onMount, onDestroy } from "svelte";
+  import { fade } from "svelte/transition";
+  import { createDropdownTransition } from "../utils";
+
+  interface ColorPickerProps {
+    modelValue?: string;
+    disabled?: boolean;
+    size?: ColorPickerSize;
+    showAlpha?: boolean;
+    predefine?: string[];
+    class?: string;
+  }
+
+  let {
+    modelValue = $bindable("#409eff"),
+    disabled = false,
+    size = "default",
+    showAlpha = false,
+    predefine = [],
+    class: cls = "",
+    ...attrs
+  }: ColorPickerProps = $props();
+
+  let visible = $state(false);
+  let tempValue = $state(modelValue);
+  let reduceMotion = $state(false);
+  let pickerRef: HTMLDivElement | null = null;
+
+  const handleClickOutside = (e: MouseEvent): void => {
+    if (visible && pickerRef && !pickerRef.contains(e.target as Node)) {
+      visible = false;
+      tempValue = modelValue;
+    }
+  };
+
+  const toggle = (): void => {
+    if (disabled) return;
+    visible = !visible;
+    if (visible) {
+      tempValue = modelValue;
+    } else {
+      tempValue = modelValue;
+    }
+  };
+
+  const selectColor = (color: string): void => {
+    tempValue = color;
+  };
+
+  const handleInputChange = (e: Event): void => {
+    const target = e.target as HTMLInputElement;
+    tempValue = target.value;
+  };
+
+  const cancel = (): void => {
+    tempValue = modelValue;
+    visible = false;
+  };
+
+  const confirm = (): void => {
+    modelValue = tempValue;
+    visible = false;
+  };
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside);
+    if (typeof window !== "undefined") {
+      reduceMotion =
+        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ??
+        false;
+    }
+  });
+
+  onDestroy(() => {
+    document.removeEventListener("click", handleClickOutside);
+  });
+
+  const classes = $derived(
+    `lm-color-picker lm-color-picker--${size}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  const dropdownTransition = $derived(createDropdownTransition(reduceMotion));
+</script>
+
+<div class={classes} bind:this={pickerRef} {...attrs}>
+  <button
+    type="button"
+    class="lm-color-picker__trigger"
+    class:is-focus={visible}
+    onclick={toggle}
+    {disabled}
+  >
+    <span class="lm-color-picker__color" style="background-color:{modelValue}"
+    ></span>
+    <span
+      class="lm-color-picker__icon"
+      class:is-open={visible}
+      aria-hidden="true"
+    >
+      <Icon icon={ChevronDown} size={14} />
+    </span>
+  </button>
+
+  {#if visible}
+    <div class="lm-color-picker__dropdown" transition:dropdownTransition>
+      <div class="lm-color-picker__panel">
+        <input
+          type="color"
+          class="lm-color-picker__input"
+          value={tempValue}
+          oninput={handleInputChange}
+        />
+
+        {#if predefine.length > 0}
+          <div class="lm-color-picker__predefine">
+            {#each predefine as color (color)}
+              <span
+                class="lm-color-picker__predefine-color{tempValue === color
+                  ? ' is-active'
+                  : ''}"
+                style="background-color:{color}"
+                onclick={() => selectColor(color)}
+                role="button"
+                tabindex="0"
+                onkeydown={(e: KeyboardEvent) =>
+                  e.key === "Enter" && selectColor(color)}
+              ></span>
+            {/each}
+          </div>
+        {/if}
+
+        <div class="lm-color-picker__footer">
+          <input
+            type="text"
+            class="lm-color-picker__hex"
+            value={tempValue}
+            oninput={handleInputChange}
+          />
+          <button
+            type="button"
+            class="lm-color-picker__btn lm-color-picker__btn--cancel"
+            onclick={cancel}>取消</button
+          >
+          <button
+            type="button"
+            class="lm-color-picker__btn lm-color-picker__btn--confirm"
+            onclick={confirm}>确定</button
+          >
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/ColorPicker/ColorPicker.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ColorPickerSize } from './types';
+interface ColorPickerProps {
+    modelValue?: string;
+    disabled?: boolean;
+    size?: ColorPickerSize;
+    showAlpha?: boolean;
+    predefine?: string[];
+    class?: string;
+}
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "modelValue">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/ColorPicker/index.d.ts

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

package/dist/ColorPicker/index.js

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

package/dist/ColorPicker/types.d.ts

@@ -0,0 +1,17 @@
+/** ColorPicker 尺寸 */
+export type ColorPickerSize = 'small' | 'default' | 'large';
+/** ColorPicker 属性 */
+export interface ColorPickerProps {
+    /** 绑定值 */
+    modelValue?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 尺寸 */
+    size?: ColorPickerSize;
+    /** 是否显示透明度 */
+    showAlpha?: boolean;
+    /** 预定义颜色 */
+    predefine?: string[];
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/ColorPicker/types.js

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

package/dist/Container/Aside.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface AsideProps {
+        width?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let { width, children, class: cls = '', ...attrs }: AsideProps = $props()
+
+    const classes = $derived(cls ? `lm-aside ${cls}` : 'lm-aside')
+    const style = $derived(width ? `width: ${width}` : '')
+</script>
+
+<aside {...attrs} class={classes} {style}>
+    {#if children}
+        {@render children()}
+    {/if}
+</aside>

package/dist/Container/Aside.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface AsideProps {
+    width?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const Aside: import("svelte").Component<AsideProps, {}, "">;
+type Aside = ReturnType<typeof Aside>;
+export default Aside;

package/dist/Container/Container.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface ContainerProps {
+        direction?: 'horizontal' | 'vertical'
+        children?: Snippet
+        class?: string
+    }
+
+    let { direction = 'vertical', children, class: cls = '', ...attrs }: ContainerProps = $props()
+
+    const classes = $derived(`lm-container${direction === 'horizontal' ? ' is-horizontal' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div {...attrs} class={classes}>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>

package/dist/Container/Container.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface ContainerProps {
+    direction?: 'horizontal' | 'vertical';
+    children?: Snippet;
+    class?: string;
+}
+declare const Container: import("svelte").Component<ContainerProps, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/Container/Footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface FooterProps {
+        height?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let { height, children, class: cls = '', ...attrs }: FooterProps = $props()
+
+    const classes = $derived(cls ? `lm-footer ${cls}` : 'lm-footer')
+    const style = $derived(height ? `height: ${height}` : '')
+</script>
+
+<footer {...attrs} class={classes} {style}>
+    {#if children}
+        {@render children()}
+    {/if}
+</footer>

package/dist/Container/Footer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface FooterProps {
+    height?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const Footer: import("svelte").Component<FooterProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/Container/Header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface HeaderProps {
+        height?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let { height, children, class: cls = '', ...attrs }: HeaderProps = $props()
+
+    const classes = $derived(cls ? `lm-header ${cls}` : 'lm-header')
+    const style = $derived(height ? `height: ${height}` : '')
+</script>
+
+<header {...attrs} class={classes} {style}>
+    {#if children}
+        {@render children()}
+    {/if}
+</header>

package/dist/Container/Header.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface HeaderProps {
+    height?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const Header: import("svelte").Component<HeaderProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/Container/Main.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface MainProps {
+        children?: Snippet
+        class?: string
+    }
+
+    let { children, class: cls = '', ...attrs }: MainProps = $props()
+
+    const classes = $derived(cls ? `lm-main ${cls}` : 'lm-main')
+</script>
+
+<main {...attrs} class={classes}>
+    {#if children}
+        {@render children()}
+    {/if}
+</main>

package/dist/Container/Main.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface MainProps {
+    children?: Snippet;
+    class?: string;
+}
+declare const Main: import("svelte").Component<MainProps, {}, "">;
+type Main = ReturnType<typeof Main>;
+export default Main;

package/dist/Container/index.d.ts

@@ -0,0 +1,14 @@
+import ContainerBase from './Container.svelte';
+import Header from './Header.svelte';
+import Footer from './Footer.svelte';
+import Aside from './Aside.svelte';
+import Main from './Main.svelte';
+export type { ContainerProps, ContainerDirection, HeaderProps, FooterProps, AsideProps, MainProps, } from './types';
+export declare const Container: typeof ContainerBase & {
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Aside: typeof Aside;
+    Main: typeof Main;
+};
+export { Header, Footer, Aside, Main };
+export default Container;

package/dist/Container/index.js

@@ -0,0 +1,13 @@
+import ContainerBase from './Container.svelte';
+import Header from './Header.svelte';
+import Footer from './Footer.svelte';
+import Aside from './Aside.svelte';
+import Main from './Main.svelte';
+export const Container = Object.assign(ContainerBase, {
+    Header,
+    Footer,
+    Aside,
+    Main,
+});
+export { Header, Footer, Aside, Main };
+export default Container;

package/dist/Container/types.d.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+/** Container 方向 */
+export type ContainerDirection = 'horizontal' | 'vertical';
+/** Container 属性 */
+export interface ContainerProps {
+    /** 方向 */
+    direction?: ContainerDirection;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Header 属性 */
+export interface HeaderProps {
+    /** 高度 */
+    height?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Footer 属性 */
+export interface FooterProps {
+    /** 高度 */
+    height?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Aside 属性 */
+export interface AsideProps {
+    /** 宽度 */
+    width?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Main 属性 */
+export interface MainProps {
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Container/types.js

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