luna-plus 0.0.40 → 0.0.42

package/dist/ColorPicker/ColorPicker.svelte

@@ -80,7 +80,7 @@
   });
 
   const classes = $derived(
-    `lm-color-picker lm-color-picker--${size}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-color-picker ln-color-picker--${size}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   const dropdownTransition = $derived(createDropdownTransition(reduceMotion));
@@ -89,15 +89,15 @@
 <div class={classes} bind:this={pickerRef} {...attrs}>
   <button
     type="button"
-    class="lm-color-picker__trigger"
+    class="ln-color-picker__trigger"
     class:is-focus={visible}
     onclick={toggle}
     {disabled}
   >
-    <span class="lm-color-picker__color" style="background-color:{modelValue}"
+    <span class="ln-color-picker__color" style="background-color:{modelValue}"
     ></span>
     <span
-      class="lm-color-picker__icon"
+      class="ln-color-picker__icon"
       class:is-open={visible}
       aria-hidden="true"
     >
@@ -106,20 +106,20 @@
   </button>
 
   {#if visible}
-    <div class="lm-color-picker__dropdown" transition:dropdownTransition>
-      <div class="lm-color-picker__panel">
+    <div class="ln-color-picker__dropdown" transition:dropdownTransition>
+      <div class="ln-color-picker__panel">
         <input
           type="color"
-          class="lm-color-picker__input"
+          class="ln-color-picker__input"
           value={tempValue}
           oninput={handleInputChange}
         />
 
         {#if predefine.length > 0}
-          <div class="lm-color-picker__predefine">
+          <div class="ln-color-picker__predefine">
             {#each predefine as color (color)}
               <span
-                class="lm-color-picker__predefine-color{tempValue === color
+                class="ln-color-picker__predefine-color{tempValue === color
                   ? ' is-active'
                   : ''}"
                 style="background-color:{color}"
@@ -133,21 +133,21 @@
           </div>
         {/if}
 
-        <div class="lm-color-picker__footer">
+        <div class="ln-color-picker__footer">
           <input
             type="text"
-            class="lm-color-picker__hex"
+            class="ln-color-picker__hex"
             value={tempValue}
             oninput={handleInputChange}
           />
           <button
             type="button"
-            class="lm-color-picker__btn lm-color-picker__btn--cancel"
+            class="ln-color-picker__btn ln-color-picker__btn--cancel"
             onclick={cancel}>取消</button
           >
           <button
             type="button"
-            class="lm-color-picker__btn lm-color-picker__btn--confirm"
+            class="ln-color-picker__btn ln-color-picker__btn--confirm"
             onclick={confirm}>确定</button
           >
         </div>

package/dist/Container/Aside.svelte

@@ -9,7 +9,7 @@
 
     let { width, children, class: cls = '', ...attrs }: AsideProps = $props()
 
-    const classes = $derived(cls ? `lm-aside ${cls}` : 'lm-aside')
+    const classes = $derived(cls ? `ln-aside ${cls}` : 'ln-aside')
     const style = $derived(width ? `width: ${width}` : '')
 </script>
 

package/dist/Container/Container.svelte

@@ -9,7 +9,7 @@
 
     let { direction = 'vertical', children, class: cls = '', ...attrs }: ContainerProps = $props()
 
-    const classes = $derived(`lm-container${direction === 'horizontal' ? ' is-horizontal' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-container${direction === 'horizontal' ? ' is-horizontal' : ''}${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div {...attrs} class={classes}>

package/dist/Container/Footer.svelte

@@ -9,7 +9,7 @@
 
     let { height, children, class: cls = '', ...attrs }: FooterProps = $props()
 
-    const classes = $derived(cls ? `lm-footer ${cls}` : 'lm-footer')
+    const classes = $derived(cls ? `ln-footer ${cls}` : 'ln-footer')
     const style = $derived(height ? `height: ${height}` : '')
 </script>
 

package/dist/Container/Header.svelte

@@ -9,7 +9,7 @@
 
     let { height, children, class: cls = '', ...attrs }: HeaderProps = $props()
 
-    const classes = $derived(cls ? `lm-header ${cls}` : 'lm-header')
+    const classes = $derived(cls ? `ln-header ${cls}` : 'ln-header')
     const style = $derived(height ? `height: ${height}` : '')
 </script>
 

package/dist/Container/Main.svelte

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

package/dist/DatePicker/DatePicker.svelte

@@ -95,7 +95,7 @@
   });
 
   const classes = $derived(
-    `lm-date-picker lm-date-picker--${size}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-date-picker ln-date-picker--${size}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   const handleClickOutside = (e: MouseEvent): void => {
@@ -192,18 +192,18 @@
 <div class={classes} bind:this={pickerRef} {...attrs}>
   <button
     type="button"
-    class="lm-date-picker__trigger"
+    class="ln-date-picker__trigger"
     class:is-focus={visible}
     onclick={toggle}
     {disabled}
   >
-    <Icon icon={Calendar} size={14} class="lm-date-picker__prefix" />
-    <span class="lm-date-picker__input" class:is-placeholder={!displayValue}
+    <Icon icon={Calendar} size={14} class="ln-date-picker__prefix" />
+    <span class="ln-date-picker__input" class:is-placeholder={!displayValue}
       >{displayValue || placeholder}</span
     >
     {#if clearable && modelValue && !disabled}
       <span
-        class="lm-date-picker__clear"
+        class="ln-date-picker__clear"
         role="button"
         tabindex="0"
         onclick={handleClear}
@@ -215,54 +215,54 @@
   </button>
 
   {#if visible}
-    <div class="lm-date-picker__dropdown" transition:dropdownTransition>
+    <div class="ln-date-picker__dropdown" transition:dropdownTransition>
       {#if showMenuArrow}
-        <div class="lm-date-picker__menu-arrow" aria-hidden="true"></div>
+        <div class="ln-date-picker__menu-arrow" aria-hidden="true"></div>
       {/if}
-      <div class="lm-date-picker__header">
-        <div class="lm-date-picker__nav-group">
+      <div class="ln-date-picker__header">
+        <div class="ln-date-picker__nav-group">
           <button
             type="button"
-            class="lm-date-picker__nav"
+            class="ln-date-picker__nav"
             onclick={prevYear}
             aria-label="上一年"><Icon icon={ChevronsLeft} size={16} /></button
           >
           <button
             type="button"
-            class="lm-date-picker__nav"
+            class="ln-date-picker__nav"
             onclick={prevMonth}
             aria-label="上个月"><Icon icon={ChevronLeft} size={14} /></button
           >
         </div>
-        <span class="lm-date-picker__title"
+        <span class="ln-date-picker__title"
           >{currentYear}年 {currentMonth + 1}月</span
         >
-        <div class="lm-date-picker__nav-group">
+        <div class="ln-date-picker__nav-group">
           <button
             type="button"
-            class="lm-date-picker__nav"
+            class="ln-date-picker__nav"
             onclick={nextMonth}
             aria-label="下个月"><Icon icon={ChevronRight} size={14} /></button
           >
           <button
             type="button"
-            class="lm-date-picker__nav"
+            class="ln-date-picker__nav"
             onclick={nextYear}
             aria-label="下一年"><Icon icon={ChevronsRight} size={16} /></button
           >
         </div>
       </div>
-      <div class="lm-date-picker__body">
-        <div class="lm-date-picker__week">
-          {#each weekDays as day}<span class="lm-date-picker__week-day"
+      <div class="ln-date-picker__body">
+        <div class="ln-date-picker__week">
+          {#each weekDays as day}<span class="ln-date-picker__week-day"
               >{day}</span
             >{/each}
         </div>
-        <div class="lm-date-picker__days">
+        <div class="ln-date-picker__days">
           {#each daysInMonth as { date, isCurrentMonth }}
             <button
               type="button"
-              class="lm-date-picker__day{!isCurrentMonth
+              class="ln-date-picker__day{!isCurrentMonth
                 ? ' is-other-month'
                 : ''}{isSelected(date) ? ' is-selected' : ''}{isToday(date)
                 ? ' is-today'

package/dist/DateTimePicker/DateTimePicker.svelte

@@ -132,7 +132,7 @@
   let tempDateText = $state("");
   let tempTime = $state("");
 
-  const dropdownId = `lm-date-time-picker-dropdown-${Math.random().toString(36).slice(2)}`;
+  const dropdownId = `ln-date-time-picker-dropdown-${Math.random().toString(36).slice(2)}`;
 
   const selectedCommitted = $derived(modelValue ? toDate(modelValue) : null);
 
@@ -316,8 +316,8 @@
 
   const classes = $derived(
     [
-      "lm-date-time-picker",
-      `lm-date-time-picker--${size}`,
+      "ln-date-time-picker",
+      `ln-date-time-picker--${size}`,
       disabled && "is-disabled",
       cls,
     ]
@@ -328,7 +328,7 @@
 
 <div bind:this={rootRef} class={classes} {...attrs}>
   <div
-    class="lm-date-time-picker__trigger"
+    class="ln-date-time-picker__trigger"
     class:is-focus={visible}
     role="combobox"
     tabindex={disabled ? -1 : 0}
@@ -338,11 +338,11 @@
     onclick={toggle}
     onkeydown={handleKeydown}
   >
-    <span class="lm-date-time-picker__prefix">
+    <span class="ln-date-time-picker__prefix">
       <Icon icon={Calendar} size={14} />
     </span>
     <span
-      class="lm-date-time-picker__value"
+      class="ln-date-time-picker__value"
       class:is-placeholder={!displayValue}
     >
       {displayValue || placeholder}
@@ -351,7 +351,7 @@
     {#if clearable && modelValue && !disabled}
       <button
         type="button"
-        class="lm-date-time-picker__clear"
+        class="ln-date-time-picker__clear"
         onclick={handleClear}
         aria-label="清除"
       >
@@ -359,7 +359,7 @@
       </button>
     {:else}
       <span
-        class="lm-date-time-picker__arrow"
+        class="ln-date-time-picker__arrow"
         class:is-open={visible}
         aria-hidden="true"
       >
@@ -371,22 +371,22 @@
   {#if visible}
     <div
       id={dropdownId}
-      class="lm-date-time-picker__dropdown"
+      class="ln-date-time-picker__dropdown"
       role="dialog"
       transition:dropdownTransition
     >
       {#if showMenuArrow}
-        <div class="lm-date-time-picker__menu-arrow" aria-hidden="true"></div>
+        <div class="ln-date-time-picker__menu-arrow" aria-hidden="true"></div>
       {/if}
 
-      <div class="lm-date-time-picker__panel">
-        <div class="lm-date-time-picker__date-panel">
+      <div class="ln-date-time-picker__panel">
+        <div class="ln-date-time-picker__date-panel">
           <div
-            class="lm-date-time-picker__time-inputs"
+            class="ln-date-time-picker__time-inputs"
             aria-label="日期时间输入"
           >
             <input
-              class="lm-date-time-picker__date-input"
+              class="ln-date-time-picker__date-input"
               type="text"
               value={tempDateText}
               placeholder={datePlaceholder}
@@ -403,7 +403,7 @@
               }}
             />
             <input
-              class="lm-date-time-picker__time-input"
+              class="ln-date-time-picker__time-input"
               type="text"
               value={tempTime}
               placeholder={timePlaceholder}
@@ -416,11 +416,11 @@
             />
           </div>
 
-          <div class="lm-date-time-picker__header">
-            <div class="lm-date-time-picker__nav-group" aria-hidden="false">
+          <div class="ln-date-time-picker__header">
+            <div class="ln-date-time-picker__nav-group" aria-hidden="false">
               <button
                 type="button"
-                class="lm-date-time-picker__nav"
+                class="ln-date-time-picker__nav"
                 onclick={prevYear}
                 aria-label="上一年"
               >
@@ -428,20 +428,20 @@
               </button>
               <button
                 type="button"
-                class="lm-date-time-picker__nav"
+                class="ln-date-time-picker__nav"
                 onclick={prevMonth}
                 aria-label="上个月"
               >
                 <Icon icon={ChevronLeft} size={14} />
               </button>
             </div>
-            <span class="lm-date-time-picker__title"
+            <span class="ln-date-time-picker__title"
               >{currentYear}年 {currentMonth + 1}月</span
             >
-            <div class="lm-date-time-picker__nav-group" aria-hidden="false">
+            <div class="ln-date-time-picker__nav-group" aria-hidden="false">
               <button
                 type="button"
-                class="lm-date-time-picker__nav"
+                class="ln-date-time-picker__nav"
                 onclick={nextMonth}
                 aria-label="下个月"
               >
@@ -449,7 +449,7 @@
               </button>
               <button
                 type="button"
-                class="lm-date-time-picker__nav"
+                class="ln-date-time-picker__nav"
                 onclick={nextYear}
                 aria-label="下一年"
               >
@@ -458,17 +458,17 @@
             </div>
           </div>
 
-          <div class="lm-date-time-picker__body">
-            <div class="lm-date-time-picker__week">
+          <div class="ln-date-time-picker__body">
+            <div class="ln-date-time-picker__week">
               {#each weekDays as day}
-                <span class="lm-date-time-picker__week-day">{day}</span>
+                <span class="ln-date-time-picker__week-day">{day}</span>
               {/each}
             </div>
-            <div class="lm-date-time-picker__days">
+            <div class="ln-date-time-picker__days">
               {#each daysInMonth as item (item.date.toISOString())}
                 <button
                   type="button"
-                  class="lm-date-time-picker__day"
+                  class="ln-date-time-picker__day"
                   class:is-other={!item.isCurrentMonth}
                   class:is-today={isToday(item.date)}
                   class:is-selected={isSelected(item.date)}
@@ -482,15 +482,15 @@
         </div>
       </div>
 
-      <div class="lm-date-time-picker__footer">
+      <div class="ln-date-time-picker__footer">
         <button
           type="button"
-          class="lm-date-time-picker__btn lm-date-time-picker__btn--text"
+          class="ln-date-time-picker__btn ln-date-time-picker__btn--text"
           onclick={setNow}>此刻</button
         >
         <button
           type="button"
-          class="lm-date-time-picker__btn"
+          class="ln-date-time-picker__btn"
           onclick={handleConfirm}
           disabled={!isDateValid || !isTimeValid}>确定</button
         >

package/dist/Descriptions/Descriptions.svelte

@@ -34,14 +34,14 @@
 
     setContext(DESCRIPTIONS_CONTEXT_KEY, context)
 
-    const classes = $derived(`lm-descriptions lm-descriptions--${size}${border ? ' is-bordered' : ''}${cls ? ` ${cls}` : ''}`)
+    const classes = $derived(`ln-descriptions ln-descriptions--${size}${border ? ' is-bordered' : ''}${cls ? ` ${cls}` : ''}`)
 </script>
 
 <div class={classes} {...attrs}>
     {#if title || extra}
-        <div class="lm-descriptions__header">
+        <div class="ln-descriptions__header">
             {#if title}
-                <div class="lm-descriptions__title">
+                <div class="ln-descriptions__title">
                     {#if typeof title === 'string'}
                         {title}
                     {:else}
@@ -50,15 +50,15 @@
                 </div>
             {/if}
             {#if extra}
-                <div class="lm-descriptions__extra">
+                <div class="ln-descriptions__extra">
                     {@render extra()}
                 </div>
             {/if}
         </div>
     {/if}
 
-    <div class="lm-descriptions__body">
-        <table class="lm-descriptions__table">
+    <div class="ln-descriptions__body">
+        <table class="ln-descriptions__table">
             <tbody>
                 {#if children}
                     {@render children()}

package/dist/Descriptions/DescriptionsItem.svelte

@@ -21,19 +21,19 @@
     const labelStyle = $derived(labelWidth ? `width: ${typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth}; text-align: ${labelAlign}` : `text-align: ${labelAlign}`)
 
     const contentStyle = $derived(`text-align: ${align}`)
-    const classes = $derived(cls ? `lm-descriptions-item ${cls}` : 'lm-descriptions-item')
+    const classes = $derived(cls ? `ln-descriptions-item ${cls}` : 'ln-descriptions-item')
 </script>
 
 {#if isBordered}
     <tr class={classes} {...attrs}>
-        <th class="lm-descriptions-item__label" style={labelStyle}>
+        <th class="ln-descriptions-item__label" style={labelStyle}>
             {#if typeof label === 'string'}
                 {label}
             {:else if label}
                 {@render label()}
             {/if}
         </th>
-        <td class="lm-descriptions-item__content" colspan={span * 2 - 1} style={contentStyle}>
+        <td class="ln-descriptions-item__content" colspan={span * 2 - 1} style={contentStyle}>
             {#if children}
                 {@render children()}
             {/if}
@@ -41,15 +41,15 @@
     </tr>
 {:else}
     <tr class={classes} {...attrs}>
-        <td class="lm-descriptions-item__cell" colspan={span}>
-            <span class="lm-descriptions-item__label" style={labelStyle}>
+        <td class="ln-descriptions-item__cell" colspan={span}>
+            <span class="ln-descriptions-item__label" style={labelStyle}>
                 {#if typeof label === 'string'}
                     {label}
                 {:else if label}
                     {@render label()}
                 {/if}
             </span>
-            <span class="lm-descriptions-item__content" style={contentStyle}>
+            <span class="ln-descriptions-item__content" style={contentStyle}>
                 {#if children}
                     {@render children()}
                 {/if}

package/dist/Dialog/Dialog.svelte

@@ -45,7 +45,7 @@
   }: DialogProps = $props();
 
   const classes = $derived(
-    `lm-dialog${center ? " is-center" : ""}${scrollable ? " is-scrollable" : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-dialog${center ? " is-center" : ""}${scrollable ? " is-scrollable" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   const dialogStyle = $derived(
@@ -94,12 +94,12 @@
 
 {#if visible}
   <div
-    class="lm-dialog-wrapper"
+    class="ln-dialog-wrapper"
     onclick={handleModalClick}
     role="presentation"
   >
     {#if modal}
-      <div class="lm-dialog-overlay" transition:fade={overlayTransition}></div>
+      <div class="ln-dialog-overlay" transition:fade={overlayTransition}></div>
     {/if}
 
     <div
@@ -111,17 +111,17 @@
       transition:scale={panelTransition}
     >
       {#if header || title || showClose}
-        <div class="lm-dialog__header">
+        <div class="ln-dialog__header">
           {#if header}
             {@render header()}
           {:else if title}
-            <span class="lm-dialog__title">{title}</span>
+            <span class="ln-dialog__title">{title}</span>
           {/if}
 
           {#if showClose}
             <button
               type="button"
-              class="lm-dialog__close"
+              class="ln-dialog__close"
               onclick={handleClose}
               aria-label="Close"
             >
@@ -132,13 +132,13 @@
       {/if}
 
       {#if children}
-        <div class="lm-dialog__body">
+        <div class="ln-dialog__body">
           {@render children()}
         </div>
       {/if}
 
       {#if footer}
-        <div class="lm-dialog__footer">
+        <div class="ln-dialog__footer">
           {@render footer()}
         </div>
       {/if}

package/dist/Divider/Divider.svelte

@@ -19,7 +19,7 @@
   }: DividerProps = $props();
 
   const classes = $derived(
-    `lm-divider lm-divider--${direction} lm-divider--${borderStyle}${direction === "horizontal" && children ? ` is-${contentPosition}` : ""}${cls ? ` ${cls}` : ""}`,
+    `ln-divider ln-divider--${direction} ln-divider--${borderStyle}${direction === "horizontal" && children ? ` is-${contentPosition}` : ""}${cls ? ` ${cls}` : ""}`,
   );
 </script>
 
@@ -32,16 +32,16 @@
   {#if direction === "horizontal"}
     {#if children}
       {#if contentPosition !== "left"}
-        <span class="lm-divider__line" aria-hidden="true"></span>
+        <span class="ln-divider__line" aria-hidden="true"></span>
       {/if}
-      <span class="lm-divider__text">{@render children()}</span>
+      <span class="ln-divider__text">{@render children()}</span>
       {#if contentPosition !== "right"}
-        <span class="lm-divider__line" aria-hidden="true"></span>
+        <span class="ln-divider__line" aria-hidden="true"></span>
       {/if}
     {:else}
-      <span class="lm-divider__line" aria-hidden="true"></span>
+      <span class="ln-divider__line" aria-hidden="true"></span>
     {/if}
   {:else}
-    <span class="lm-divider__line" aria-hidden="true"></span>
+    <span class="ln-divider__line" aria-hidden="true"></span>
   {/if}
 </div>

package/dist/Drawer/Drawer.svelte

@@ -54,7 +54,7 @@
 
     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 classes = $derived(`ln-drawer ln-drawer--${direction}${visible ? ' is-open' : ''}${closing ? ' is-closing' : ''}${cls ? ` ${cls}` : ''}`)
 
     const close = async (): Promise<void> => {
         if (closing) return
@@ -101,15 +101,15 @@
 {#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>
+            <div class="ln-drawer__overlay" onclick={handleOverlayClick} aria-hidden="true"></div>
         {/if}
 
-        <div class="lm-drawer__panel" style={panelStyle}>
-            <header class="lm-drawer__header">
+        <div class="ln-drawer__panel" style={panelStyle}>
+            <header class="ln-drawer__header">
                 {#if header}
                     {@render header()}
                 {:else if title}
-                    <span class="lm-drawer__title">
+                    <span class="ln-drawer__title">
                         {#if typeof title === 'string'}
                             {title}
                         {:else}
@@ -119,20 +119,20 @@
                 {/if}
 
                 {#if showClose}
-                    <button type="button" class="lm-drawer__close" onclick={close} aria-label="Close">
+                    <button type="button" class="ln-drawer__close" onclick={close} aria-label="Close">
                         <Icon icon={X} size={16} />
                     </button>
                 {/if}
             </header>
 
-            <div class="lm-drawer__body">
+            <div class="ln-drawer__body">
                 {#if children}
                     {@render children()}
                 {/if}
             </div>
 
             {#if footer}
-                <footer class="lm-drawer__footer">
+                <footer class="ln-drawer__footer">
                     {@render footer({ close })}
                 </footer>
             {/if}