luna-plus 0.0.40 → 0.0.43

package/dist/Tabs/Tabs.svelte

@@ -53,7 +53,7 @@
         unregister,
     })
 
-    const classes = $derived(`lm-tabs lm-tabs--${type} lm-tabs--${size}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-tabs ln-tabs--${type} ln-tabs--${size}${cls ? ` ${cls}` : ''}`)
 
     const setActive = (name: string): void => {
         modelValue = name
@@ -72,7 +72,7 @@
     const scrollActiveIntoView = (): void => {
         queueMicrotask(() => {
             if (!navRef) return
-            const activeEl = navRef.querySelector('.lm-tabs__item.is-active') as HTMLElement | null
+            const activeEl = navRef.querySelector('.ln-tabs__item.is-active') as HTMLElement | null
             if (!activeEl) return
 
             const navRect = navRef.getBoundingClientRect()
@@ -102,9 +102,9 @@
     const updateIndicator = (): void => {
         queueMicrotask(() => {
             if (!navRef) return
-            const activeEl = navRef.querySelector('.lm-tabs__item.is-active') as HTMLElement | null
+            const activeEl = navRef.querySelector('.ln-tabs__item.is-active') as HTMLElement | null
             if (!activeEl) return
-            const labelEl = activeEl.querySelector('.lm-tabs__label') as HTMLElement | null
+            const labelEl = activeEl.querySelector('.ln-tabs__label') as HTMLElement | null
             if (labelEl) {
                 const labelRect = labelEl.getBoundingClientRect()
                 const navRect = navRef.getBoundingClientRect()
@@ -148,11 +148,11 @@
 </script>
 
 <div class={classes} role="tablist" {...attrs}>
-    <div class="lm-tabs__header" class:has-scroll={showScroll}>
+    <div class="ln-tabs__header" class:has-scroll={showScroll}>
         {#if showScroll}
             <button
                 type="button"
-                class="lm-tabs__scroll-btn lm-tabs__scroll-btn--prev"
+                class="ln-tabs__scroll-btn ln-tabs__scroll-btn--prev"
                 aria-label="Scroll left"
                 disabled={!canScrollPrev}
                 onclick={(e: MouseEvent) => {
@@ -163,10 +163,10 @@
                 <Icon icon={ChevronLeft} size={14} />
             </button>
         {/if}
-        <div bind:this={navRef} class="lm-tabs__nav" onscroll={handleNavScroll}>
+        <div bind:this={navRef} class="ln-tabs__nav" onscroll={handleNavScroll}>
             {#each panes as pane}
                 <div
-                    class="lm-tabs__item"
+                    class="ln-tabs__item"
                     class:is-active={pane.name === modelValue}
                     class:is-disabled={pane.disabled}
                     class:is-closable={pane.closable || (type === 'editable' && editable)}
@@ -182,7 +182,7 @@
                         }
                     }}
                 >
-                    <span class="lm-tabs__label">
+                    <span class="ln-tabs__label">
                         {#if type === 'card' || type === 'button' || type === 'editable'}
                             {#if typeof pane.label === 'string'}
                                 {pane.label}
@@ -199,7 +199,7 @@
                     </span>
                     {#if pane.closable || (type === 'editable' && editable)}
                         <button
-                            class="lm-tabs__close"
+                            class="ln-tabs__close"
                             type="button"
                             aria-label="Close tab"
                             onclick={(e: MouseEvent) => {
@@ -213,12 +213,12 @@
                     {/if}
                 </div>
             {/each}
-            <div class="lm-tabs__indicator" style={`transform: translateX(${indicatorStyle.x}px); width: ${indicatorStyle.width}px;`}></div>
+            <div class="ln-tabs__indicator" style={`transform: translateX(${indicatorStyle.x}px); width: ${indicatorStyle.width}px;`}></div>
         </div>
         {#if showScroll}
             <button
                 type="button"
-                class="lm-tabs__scroll-btn lm-tabs__scroll-btn--next"
+                class="ln-tabs__scroll-btn ln-tabs__scroll-btn--next"
                 aria-label="Scroll right"
                 disabled={!canScrollNext}
                 onclick={(e: MouseEvent) => {
@@ -231,7 +231,7 @@
         {/if}
         {#if type === 'editable' && editable && onadd}
             <button
-                class="lm-tabs__add"
+                class="ln-tabs__add"
                 aria-label="Add tab"
                 onclick={(e: MouseEvent) => {
                     e.stopPropagation()
@@ -243,7 +243,7 @@
             </button>
         {/if}
     </div>
-    <div class="lm-tabs__content">
+    <div class="ln-tabs__content">
         {#if children}
             {@render children()}
         {/if}

package/dist/Tabs/TabsContext.js

@@ -1 +1 @@
-export const TABS_CONTEXT_KEY = Symbol('lm-tabs');
+export const TABS_CONTEXT_KEY = Symbol('ln-tabs');

package/dist/Tag/Tag.svelte

@@ -17,7 +17,7 @@
 
     let visible = $state(true)
 
-    const classes = $derived(`lm-tag lm-tag--${type} lm-tag--${size}${round ? ' is-round' : ''}${closable ? ' is-closable' : ''}${!visible ? ' is-hidden' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-tag ln-tag--${type} ln-tag--${size}${round ? ' is-round' : ''}${closable ? ' is-closable' : ''}${!visible ? ' is-hidden' : ''}${cls ? ` ${cls}` : ''}`)
 
     const handleClose = (): void => {
         visible = false
@@ -31,7 +31,7 @@
             {@render children()}
         {/if}
         {#if closable}
-            <button class="lm-tag__close" type="button" aria-label="Close" onclick={handleClose}>
+            <button class="ln-tag__close" type="button" aria-label="Close" onclick={handleClose}>
                 <Icon icon={X} size={12} />
             </button>
         {/if}

package/dist/Textarea/Textarea.svelte

@@ -33,7 +33,7 @@
 
     let textareaRef: HTMLTextAreaElement | null = $state(null)
 
-    const classes = $derived(`lm-textarea${disabled ? ' is-disabled' : ''}${readonly ? ' is-readonly' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-textarea${disabled ? ' is-disabled' : ''}${readonly ? ' is-readonly' : ''}${cls ? ` ${cls}` : ''}`)
 
     const handleInput = (e: Event): void => {
         value = (e.target as HTMLTextAreaElement).value
@@ -57,7 +57,7 @@
 <div class={classes}>
     <textarea
         bind:this={textareaRef}
-        class="lm-textarea__input"
+        class="ln-textarea__input"
         bind:value
         rows={autosize ? 1 : rows}
         {placeholder}
@@ -69,7 +69,7 @@
         {...attrs}
     ></textarea>
     {#if clearable && value && !readonly && !disabled}
-        <button type="button" class="lm-textarea__clear" aria-label="Clear" onclick={handleClear}>
+        <button type="button" class="ln-textarea__clear" aria-label="Clear" onclick={handleClear}>
             <Icon icon={X} size={16} />
         </button>
     {/if}

package/dist/TimePicker/TimePicker.svelte

@@ -230,9 +230,9 @@
 
   const classes = $derived(
     [
-      "lm-time-picker",
+      "ln-time-picker",
       disabled && "is-disabled",
-      size !== "default" && `lm-time-picker--${size}`,
+      size !== "default" && `ln-time-picker--${size}`,
       cls,
     ]
       .filter(Boolean)
@@ -242,7 +242,7 @@
 
 <div bind:this={inputRef} class={classes} {...attrs}>
   <div
-    class="lm-time-picker__input"
+    class="ln-time-picker__input"
     class:is-focus={visible}
     role="combobox"
     tabindex={disabled ? -1 : 0}
@@ -251,23 +251,23 @@
     onclick={handleToggle}
     onkeydown={handleKeydown}
   >
-    <span class="lm-time-picker__prefix">
+    <span class="ln-time-picker__prefix">
       <Icon icon={Clock} size={16} />
     </span>
-    <span class="lm-time-picker__value" class:is-placeholder={!modelValue}>
+    <span class="ln-time-picker__value" class:is-placeholder={!modelValue}>
       {modelValue || placeholder}
     </span>
     {#if clearable && modelValue && !disabled}
       <button
         type="button"
-        class="lm-time-picker__clear"
+        class="ln-time-picker__clear"
         onclick={handleClear}
         aria-label="清除"
       >
         <Icon icon={X} size={14} />
       </button>
     {:else}
-      <span class="lm-time-picker__arrow" class:is-open={visible}>
+      <span class="ln-time-picker__arrow" class:is-open={visible}>
         <Icon icon={ChevronDown} size={14} />
       </span>
     {/if}
@@ -275,18 +275,18 @@
 
   {#if visible}
     <div
-      class="lm-time-picker__dropdown"
+      class="ln-time-picker__dropdown"
       id="time-picker-listbox"
       role="listbox"
       transition:dropdownTransition
     >
       {#if showMenuArrow}
-        <div class="lm-time-picker__menu-arrow" aria-hidden="true"></div>
+        <div class="ln-time-picker__menu-arrow" aria-hidden="true"></div>
       {/if}
-      <div class="lm-time-picker__panel">
+      <div class="ln-time-picker__panel">
         <ul
           bind:this={hourColRef}
-          class="lm-time-picker__column"
+          class="ln-time-picker__column"
           role="group"
           aria-label="小时"
           onscroll={(e: Event) =>
@@ -294,7 +294,7 @@
         >
           {#each hours as h}
             <li
-              class="lm-time-picker__cell"
+              class="ln-time-picker__cell"
               class:is-selected={selectedTime.h === h}
               role="option"
               aria-selected={selectedTime.h === h}
@@ -306,7 +306,7 @@
         </ul>
         <ul
           bind:this={minuteColRef}
-          class="lm-time-picker__column"
+          class="ln-time-picker__column"
           role="group"
           aria-label="分钟"
           onscroll={(e: Event) =>
@@ -314,7 +314,7 @@
         >
           {#each minutes as m}
             <li
-              class="lm-time-picker__cell"
+              class="ln-time-picker__cell"
               class:is-selected={selectedTime.m === m}
               role="option"
               aria-selected={selectedTime.m === m}
@@ -327,7 +327,7 @@
         {#if showSeconds}
           <ul
             bind:this={secondColRef}
-            class="lm-time-picker__column"
+            class="ln-time-picker__column"
             role="group"
             aria-label="秒"
             onscroll={(e: Event) =>
@@ -335,7 +335,7 @@
           >
             {#each seconds as s}
               <li
-                class="lm-time-picker__cell"
+                class="ln-time-picker__cell"
                 class:is-selected={selectedTime.s === s}
                 role="option"
                 aria-selected={selectedTime.s === s}
@@ -347,15 +347,15 @@
           </ul>
         {/if}
       </div>
-      <div class="lm-time-picker__footer">
+      <div class="ln-time-picker__footer">
         <button
           type="button"
-          class="lm-time-picker__btn lm-time-picker__btn--text"
+          class="ln-time-picker__btn ln-time-picker__btn--text"
           onclick={handleNow}>此刻</button
         >
         <button
           type="button"
-          class="lm-time-picker__btn"
+          class="ln-time-picker__btn"
           onclick={() => (visible = false)}>确定</button
         >
       </div>

package/dist/Timeline/Timeline.svelte

@@ -8,7 +8,7 @@
 
     let { children, class: cls = '', ...attrs }: TimelineProps = $props()
 
-    const classes = $derived(cls ? `lm-timeline ${cls}` : 'lm-timeline')
+    const classes = $derived(cls ? `ln-timeline ${cls}` : 'ln-timeline')
 </script>
 
 <ul class={classes} {...attrs}>

package/dist/Timeline/TimelineItem.svelte

@@ -31,15 +31,15 @@
         ...attrs
     }: TimelineItemProps = $props()
 
-    const classes = $derived(`lm-timeline-item${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-timeline-item${cls ? ` ${cls}` : ''}`)
 
-    const nodeClasses = $derived(`lm-timeline-item__node lm-timeline-item__node--${type} lm-timeline-item__node--${size}${hollow ? ' is-hollow' : ''}`)
+    const nodeClasses = $derived(`ln-timeline-item__node ln-timeline-item__node--${type} ln-timeline-item__node--${size}${hollow ? ' is-hollow' : ''}`)
 
     const nodeStyle = $derived(color ? `border-color: ${color}; ${hollow ? '' : `background-color: ${color}`}` : undefined)
 </script>
 
 <li class={classes} {...attrs}>
-    <div class="lm-timeline-item__tail"></div>
+    <div class="ln-timeline-item__tail"></div>
 
     <div class={nodeClasses} style={nodeStyle}>
         {#if dot}
@@ -49,19 +49,19 @@
         {/if}
     </div>
 
-    <div class="lm-timeline-item__wrapper">
+    <div class="ln-timeline-item__wrapper">
         {#if !hideTimestamp && placement === 'top'}
-            <div class="lm-timeline-item__timestamp is-top">{timestamp}</div>
+            <div class="ln-timeline-item__timestamp is-top">{timestamp}</div>
         {/if}
 
-        <div class="lm-timeline-item__content">
+        <div class="ln-timeline-item__content">
             {#if children}
                 {@render children()}
             {/if}
         </div>
 
         {#if !hideTimestamp && placement === 'bottom'}
-            <div class="lm-timeline-item__timestamp is-bottom">{timestamp}</div>
+            <div class="ln-timeline-item__timestamp is-bottom">{timestamp}</div>
         {/if}
     </div>
 </li>

package/dist/Tooltip/OverflowTooltip.svelte

@@ -57,16 +57,16 @@
         }
     })
 
-    const tooltipClasses = $derived(`lm-tooltip__popper is-${placement}${showArrow ? ' has-arrow' : ''}${tooltipEffect === 'light' ? ' is-light' : ''}`)
+    const tooltipClasses = $derived(`ln-tooltip__popper is-${placement}${showArrow ? ' has-arrow' : ''}${tooltipEffect === 'light' ? ' is-light' : ''}`)
 </script>
 
-<div {...attrs} class="lm-overflow-tooltip lm-tooltip{cls ? ` ${cls}` : ''}" class:is-visible={tooltipVisible} onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
+<div {...attrs} class="ln-overflow-tooltip ln-tooltip{cls ? ` ${cls}` : ''}" class:is-visible={tooltipVisible} onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
     {#if children}
-        <div class="lm-overflow-tooltip__text" bind:this={textRef}>
+        <div class="ln-overflow-tooltip__text" bind:this={textRef}>
             {@render children()}
         </div>
     {:else}
-        <span class="lm-overflow-tooltip__text" bind:this={textRef}>
+        <span class="ln-overflow-tooltip__text" bind:this={textRef}>
             {displayText}
         </span>
     {/if}
@@ -74,7 +74,7 @@
         <div class={tooltipClasses} role="tooltip">
             {displayContent}
             {#if showArrow}
-                <div class="lm-tooltip__arrow"></div>
+                <div class="ln-tooltip__arrow"></div>
             {/if}
         </div>
     {/if}

package/dist/Tooltip/Tooltip.svelte

@@ -44,11 +44,11 @@
   };
 
   const classes = $derived(
-    `lm-tooltip${isVisible ? " is-visible" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-tooltip${isVisible ? " is-visible" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   const tooltipClasses = $derived(
-    `lm-tooltip__popper is-${placement}${tooltipEffect === "light" ? " is-light" : ""}${showArrow ? " has-arrow" : ""}`,
+    `ln-tooltip__popper is-${placement}${tooltipEffect === "light" ? " is-light" : ""}${showArrow ? " has-arrow" : ""}`,
   );
 </script>
 
@@ -70,7 +70,7 @@
     >
       {content}
       {#if showArrow}
-        <div class="lm-tooltip__arrow"></div>
+        <div class="ln-tooltip__arrow"></div>
       {/if}
     </div>
   {/if}

package/dist/Transfer/Transfer.svelte

@@ -52,7 +52,7 @@
     const isLeftIndeterminate = $derived(leftCheckedCount > 0 && leftCheckedCount < leftEnabledItems.length)
     const isRightIndeterminate = $derived(rightCheckedCount > 0 && rightCheckedCount < rightEnabledItems.length)
 
-    const classes = $derived(`lm-transfer${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-transfer${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
 
     const handleCheck = (direction: TransferDirection, key: string | number, checked: boolean): void => {
         const targetSet = direction === 'left' ? leftChecked : rightChecked
@@ -81,65 +81,69 @@
 </script>
 
 <div class={classes} {...attrs}>
-    <div class="lm-transfer__panel">
-        <div class="lm-transfer__header">
+    <div class="ln-transfer__panel">
+        <div class="ln-transfer__header">
             <Checkbox checked={isAllLeftChecked} indeterminate={isLeftIndeterminate} disabled={disabled || filteredLeftData.length === 0} onchange={(c: boolean) => handleCheckAll('left', c)} />
-            <span class="lm-transfer__title">{titles[0]}</span>
-            <span class="lm-transfer__count">{leftChecked.size}/{filteredLeftData.length}</span>
+            <span class="ln-transfer__title">{titles[0]}</span>
+            <span class="ln-transfer__count">{leftChecked.size}/{filteredLeftData.length}</span>
         </div>
         {#if filterable}
-            <div class="lm-transfer__filter">
-                <Input size="small" placeholder={filterPlaceholder} bind:value={leftFilter} {disabled} prefixIcon={Search} clearable />
+            <div class="ln-transfer__filter">
+                <Input size="small" placeholder={filterPlaceholder} bind:value={leftFilter} {disabled} clearable>
+                    {#snippet prefix()}<Icon icon={Search} size={14} />{/snippet}
+                </Input>
             </div>
         {/if}
-        <div class="lm-transfer__body">
+        <div class="ln-transfer__body">
             {#if filteredLeftData.length > 0}
-                <ul class="lm-transfer__list">
+                <ul class="ln-transfer__list">
                     {#each filteredLeftData as item (item.key)}
-                        <li class="lm-transfer__item{leftChecked.has(item.key) ? ' is-checked' : ''}{item.disabled ? ' is-disabled' : ''}">
+                        <li class="ln-transfer__item{leftChecked.has(item.key) ? ' is-checked' : ''}{item.disabled ? ' is-disabled' : ''}">
                             <Checkbox checked={leftChecked.has(item.key)} disabled={disabled || item.disabled} onchange={(c: boolean) => handleCheck('left', item.key, c)} label={item.label} />
                         </li>
                     {/each}
                 </ul>
             {:else}
-                <div class="lm-transfer__empty">无数据</div>
+                <div class="ln-transfer__empty">无数据</div>
             {/if}
         </div>
     </div>
 
-    <div class="lm-transfer__buttons">
-        <button type="button" class="lm-transfer__button" disabled={disabled || leftChecked.size === 0} onclick={moveToRight}>
+    <div class="ln-transfer__buttons">
+        <button type="button" class="ln-transfer__button" disabled={disabled || leftChecked.size === 0} onclick={moveToRight}>
             {#if buttonTexts[1]}<span>{buttonTexts[1]}</span>{/if}
             <Icon icon={ChevronRight} size={14} />
         </button>
-        <button type="button" class="lm-transfer__button" disabled={disabled || rightChecked.size === 0} onclick={moveToLeft}>
+        <button type="button" class="ln-transfer__button" disabled={disabled || rightChecked.size === 0} onclick={moveToLeft}>
             <Icon icon={ChevronLeft} size={14} />
             {#if buttonTexts[0]}<span>{buttonTexts[0]}</span>{/if}
         </button>
     </div>
 
-    <div class="lm-transfer__panel">
-        <div class="lm-transfer__header">
+    <div class="ln-transfer__panel">
+        <div class="ln-transfer__header">
             <Checkbox checked={isAllRightChecked} indeterminate={isRightIndeterminate} disabled={disabled || filteredRightData.length === 0} onchange={(c: boolean) => handleCheckAll('right', c)} />
-            <span class="lm-transfer__title">{titles[1]}</span>
-            <span class="lm-transfer__count">{rightChecked.size}/{filteredRightData.length}</span>
+            <span class="ln-transfer__title">{titles[1]}</span>
+            <span class="ln-transfer__count">{rightChecked.size}/{filteredRightData.length}</span>
         </div>
         {#if filterable}
-            <div class="lm-transfer__filter">
-                <Input size="small" placeholder={filterPlaceholder} bind:value={rightFilter} {disabled} prefixIcon={Search} clearable />
+            <div class="ln-transfer__filter">
+                <Input size="small" placeholder={filterPlaceholder} bind:value={rightFilter} {disabled} clearable>
+                    {#snippet prefix()}<Icon icon={Search} size={14} />{/snippet}
+                </Input>
             </div>
         {/if}
-        <div class="lm-transfer__body">
+        <div class="ln-transfer__body">
             {#if filteredRightData.length > 0}
-                <ul class="lm-transfer__list">
+                <ul class="ln-transfer__list">
                     {#each filteredRightData as item (item.key)}
-                        <li class="lm-transfer__item{rightChecked.has(item.key) ? ' is-checked' : ''}{item.disabled ? ' is-disabled' : ''}">
+                        <li class="ln-transfer__item{rightChecked.has(item.key) ? ' is-checked' : ''}{item.disabled ? ' is-disabled' : ''}">
                             <Checkbox checked={rightChecked.has(item.key)} disabled={disabled || item.disabled} onchange={(c: boolean) => handleCheck('right', item.key, c)} label={item.label} />
                         </li>
                     {/each}
                 </ul>
             {:else}
-                <div class="lm-transfer__empty">无数据</div>
+                <div class="ln-transfer__empty">无数据</div>
             {/if}
         </div>
     </div>

package/dist/Tree/Tree.svelte

@@ -125,7 +125,7 @@
         oncheck?.(Array.from(newKeys), node)
     }
 
-    const classes = $derived(`lm-tree${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-tree${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div class={classes} role="tree" {...attrs}>

package/dist/Tree/TreeNode.svelte

@@ -73,12 +73,12 @@
         if (!node.disabled) oncheck?.(node, !isChecked)
     }
 
-    const classes = $derived(`lm-tree-node${isCurrent ? ' is-current' : ''}${node.disabled ? ' is-disabled' : ''}`)
+    const classes = $derived(`ln-tree-node${isCurrent ? ' is-current' : ''}${node.disabled ? ' is-disabled' : ''}`)
 </script>
 
 <div class={classes}>
     <div
-        class="lm-tree-node__content"
+        class="ln-tree-node__content"
         style="padding-left:{level * 18}px"
         onclick={handleClick}
         onkeydown={handleKeyDown}
@@ -90,7 +90,7 @@
     >
         <button
             type="button"
-            class="lm-tree-node__expand-icon{isExpanded ? ' is-expanded' : ''}{!hasChildren ? ' is-leaf' : ''}"
+            class="ln-tree-node__expand-icon{isExpanded ? ' is-expanded' : ''}{!hasChildren ? ' is-leaf' : ''}"
             onclick={handleToggle}
             onkeydown={handleToggleKeyDown}
             tabindex="-1"
@@ -103,16 +103,16 @@
         </button>
 
         {#if showCheckbox}
-            <span class="lm-tree-node__checkbox" role="presentation" onclick={(e: MouseEvent) => e.stopPropagation()}>
+            <span class="ln-tree-node__checkbox" role="presentation" onclick={(e: MouseEvent) => e.stopPropagation()}>
                 <Checkbox checked={isChecked} disabled={node.disabled} onchange={handleCheck} />
             </span>
         {/if}
 
-        <span class="lm-tree-node__label">{node.label}</span>
+        <span class="ln-tree-node__label">{node.label}</span>
     </div>
 
     {#if hasChildren && isExpanded}
-        <div class="lm-tree-node__children" role="group" transition:slide={{ duration: expandCollapseDuration }}>
+        <div class="ln-tree-node__children" role="group" transition:slide={{ duration: expandCollapseDuration }}>
             {#each node.children as child (child.id)}
                 <TreeNode
                     node={child}