@neatui/nuxt 0.1.0 → 1.0.1

package/src/components/form/DatePicker.vue

@@ -91,30 +91,29 @@
     prefix: () => [],
     suffix: () => [],
     interacted: false,
-    time: false
+    time: false,
   });
 
   const state: any = reactive({
-    // view: 1,
     show: 0,
-    value: ''
+    value: null,
   });
 
   watch(
     () => props.modelValue,
     (value: any) => {
-      state.value = value;
+      state.value = value || null;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   watch(
     () => state.value,
     (value: any) => {
-      emits('update:modelValue', value);
+      emits('update:modelValue', value || null);
       ifollow.value?.hide();
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   const toggle = () => {

package/src/components/form/DateRangePicker@v3.vue

@@ -82,12 +82,12 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
 
   const state: any = reactive({
     show: 0,
-    value: []
+    value: [],
   });
 
   watch(
@@ -95,7 +95,7 @@
     (value: any) => {
       state.value = value;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   watch(
@@ -106,7 +106,7 @@
         ifollow.value?.hide();
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   const toggle = () => {

package/src/components/form/DateRangeView@v3.vue

@@ -52,7 +52,7 @@
                     v-if="item.day"
                     :ui-date-day="item.day"
                     class="flex-block"
-                    :class="`${item.range ? 'bg-main-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
+                    :class="`${item.range ? 'bg-main-o-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
                     ui-flex="col cm"
                     @click="change(1, item)"
                   >
@@ -61,13 +61,13 @@
                       class="r-sm b-solid bk-none b-xs my-ss ux-scale"
                       style="width: 1.8em; height: 1.8em"
                       :class="`${item.isLastMonth || item.isNextMonth ? 'co-case' : item.holiday ? 'co-risk' : ''} ${
-                        item.selected ? 'active bg-main-lm co-fore' : 'hover-bg-weak'
+                        item.selected ? 'active bg-main-o-lm co-fore' : 'hover-bg-weak'
                       }`"
                     >
                       <span>{{ item.day }}</span>
                     </div>
                   </div>
-                  <div class="pa full-x lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
+                  <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
                 </div>
               </li>
             </ul>
@@ -126,7 +126,7 @@
                     v-if="item.day"
                     :ui-date-day="item.day"
                     class="flex-block"
-                    :class="`${item.range ? 'bg-main-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
+                    :class="`${item.range ? 'bg-main-o-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
                     ui-flex="col cm"
                     @click="change(2, item)"
                   >
@@ -135,13 +135,13 @@
                       class="r-sm b-solid bk-none b-xs my-ss ux-scale"
                       style="width: 1.8em; height: 1.8em"
                       :class="`${item.isLastMonth || item.isNextMonth ? 'co-case' : item.holiday ? 'co-risk' : ''} ${
-                        item.selected ? 'active bg-main-lm co-fore' : 'hover-bg-weak'
+                        item.selected ? 'active bg-main-o-lm co-fore' : 'hover-bg-weak'
                       }`"
                     >
                       <span>{{ item.day }}</span>
                     </div>
                   </div>
-                  <div class="pa full-x lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
+                  <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
                 </div>
               </li>
             </ul>
@@ -149,7 +149,7 @@
         </div>
       </div>
     </div>
-    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid bk-line-ls bt-xs">
+    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid bk-line-o-ls bt-xs">
       <div ui-flex="row lm" class="nl-ss">
         <p v-if="sta.value || end.value">
           <span class="nowrap">已选：</span>
@@ -158,8 +158,8 @@
         <div v-else-if="com.shortcuts?.length" ui-flex="row lm">
           <span class="nowrap">推荐：</span>
           <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-ss dib-sub" ui-scroll=":x y:hidden">
-            <p v-for="(item, idx) in com.shortcuts" :key="idx" class="bg-main-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
-            <p class="bg-main-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
+            <p v-for="(item, idx) in com.shortcuts" :key="idx" class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
+            <p class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>
         </div>
         <div v-else>&nbsp;</div>
@@ -186,20 +186,20 @@
       text: '昨天',
       func() {
         change(0, { date: idate(new Date().setDate(new Date().getDate() - 1)).format('YYYY-MM-DD') });
-      }
+      },
     },
     today: {
       text: '今天',
       func() {
         change(0, { date: idate(new Date()).format('YYYY-MM-DD') });
-      }
+      },
     },
     tomorrow: {
       text: '明天',
       func() {
         change(0, { date: idate(new Date().setDate(new Date().getDate() + 1)).format('YYYY-MM-DD') });
-      }
-    }
+      },
+    },
   };
 
   const emits: any = defineEmits(['update:modelValue', 'change']);
@@ -243,7 +243,7 @@
     // 数据格式化
     format: 'YYYY-MM-DD',
     // 节假日
-    holiday: () => ({})
+    holiday: () => ({}),
   });
 
   // 公共数据
@@ -253,7 +253,7 @@
       return props.shortcuts.map((item: any) => {
         return isString(item) ? shortcutsList[item] : item;
       });
-    })
+    }),
   });
 
   // 开始数据
@@ -268,7 +268,7 @@
       const days = date.calendar({ group: true, value: [sta.value, end.value] });
       const { y = 0, M: m = 0, d = 0 } = date.attr || {};
       return { days, y, m, d };
-    })
+    }),
   });
 
   // 结束数据
@@ -281,11 +281,10 @@
       const days = date.calendar({ group: true, value: [sta.value, end.value] });
       const { y = 0, M: m = 0, d = 0 } = date.attr || {};
       return { days, y, m, d };
-    })
+    }),
   });
 
   const init = ([a = '', b = '']: any = []) => {
-    console.log(a, b);
     // 开始
     if (a && isDateString(a)) {
       sta.panel = a;
@@ -326,7 +325,7 @@
         emits('update:modelValue', [sta, end]);
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 日期前翻

package/src/components/form/DateView.vue

@@ -44,7 +44,7 @@
                 v-if="item.day"
                 :ui-date-day="item.day"
                 class="flex-block"
-                :class="`${item.range ? 'bg-main-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
+                :class="`${item.range ? 'bg-main-o-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
                 ui-flex="col cm"
                 @click="change(item)"
                 @mouseenter="setRangeValue(item)"
@@ -53,18 +53,18 @@
                   ui-flex="col cm"
                   class="r-sm b-solid bk-none b-xs my-ss ux-scale"
                   style="width: 1.8em; height: 1.8em"
-                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-lm co-fore' : 'hover-bg-weak'}`"
+                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-o-lm co-fore' : 'hover-bg-weak'}`"
                 >
                   <span>{{ item.day }}</span>
                 </div>
               </div>
-              <div class="pa full-x lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
+              <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
             </div>
           </li>
         </ul>
       </div>
     </div>
-    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid bk-line-mm bt-xs">
+    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid bk-line-o-mm bt-xs">
       <div ui-flex="row lm" class="nl-ss">
         <p v-if="state.date">
           <span class="nowrap">已选：</span>
@@ -73,8 +73,8 @@
         <div v-else-if="state.shortcuts?.length" ui-flex="row lm">
           <span class="nowrap">推荐：</span>
           <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-ss dib-sub" ui-scroll=":x y:hidden">
-            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
-            <p class="bg-main-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
+            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
+            <p class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>
         </div>
         <div v-else>&nbsp;</div>
@@ -101,20 +101,20 @@
       text: '昨天',
       func() {
         change({ date: idate(new Date().setDate(new Date().getDate() - 1)).format('YYYY-MM-DD') });
-      }
+      },
     },
     today: {
       text: '今天',
       func() {
         change({ date: idate(new Date()).format('YYYY-MM-DD') });
-      }
+      },
     },
     tomorrow: {
       text: '明天',
       func() {
         change({ date: idate(new Date().setDate(new Date().getDate() + 1)).format('YYYY-MM-DD') });
-      }
-    }
+      },
+    },
   };
 
   const emits: any = defineEmits(['update:modelValue', 'change']);
@@ -152,7 +152,7 @@
     // 节假日
     holiday: () => ({}),
     // 范围时间
-    rangeValue: ''
+    rangeValue: '',
   });
 
   // 内部数据
@@ -174,7 +174,7 @@
       return props.shortcuts.map((item: any) => {
         return isString(item) ? shortcutsList[item] : item;
       });
-    })
+    }),
   });
 
   watch(
@@ -183,7 +183,7 @@
       state.date = value || '';
       state.value = value || '';
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
   // 范围时间值
   watch(
@@ -191,7 +191,7 @@
     (value: any) => {
       state.rangeValue = value;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 更新时间

package/src/components/form/DateView@v2.vue

@@ -45,7 +45,7 @@
                 v-if="item.day"
                 :ui-date-day="item.day"
                 class="flex-block"
-                :class="`${item.range ? 'bg-main-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
+                :class="`${item.range ? 'bg-main-o-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
                 ui-flex="col cm"
                 @click="change(item)"
                 @mouseenter="setRangeValue(item)"
@@ -54,12 +54,12 @@
                   ui-flex="col cm"
                   class="r-sm b-solid bk-none b-xs my-ss ux-scale"
                   style="width: 1.8em; height: 1.8em"
-                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-lm co-fore' : 'hover-bg-weak'}`"
+                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-o-lm co-fore' : 'hover-bg-weak'}`"
                 >
                   <span>{{ item.day }}</span>
                 </div>
               </div>
-              <div class="pa full-x lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 100%" ui-flex="row ct" v-html="extras(item)"></div>
+              <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 100%" ui-flex="row ct" v-html="extras(item)"></div>
             </div>
           </li>
         </ul>
@@ -109,7 +109,7 @@
       </div>
     </div>
 
-    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-mm bt-xs">
+    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-o-mm bt-xs">
       <div ui-flex="row lm" class="nl-ss">
         <div v-if="state.panel" ui-flex="row lm">
           <span :anim-editing="state.type === 'date'" ui-btn="@a xs none" class="nx-ss" @click="setPanelType('date')">{{ idate(state.panel).format('YYYY-MM-DD') }}</span>
@@ -119,8 +119,8 @@
         </div>
         <div v-else-if="state.shortcuts?.length" ui-flex="row lm">
           <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-ss dib-sub" ui-scroll=":x y:hidden">
-            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-ss co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
-            <p class="bg-main-ss co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
+            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-o-ss co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
+            <p class="bg-main-o-ss co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>
         </div>
         <div>&nbsp;</div>
@@ -149,20 +149,20 @@
       text: '昨天',
       func() {
         change({ date: idate(new Date().setDate(new Date().getDate() - 1)).format('YYYY-MM-DD') });
-      }
+      },
     },
     today: {
       text: '今天',
       func() {
         change({ date: idate(new Date()).format('YYYY-MM-DD') });
-      }
+      },
     },
     tomorrow: {
       text: '明天',
       func() {
         change({ date: idate(new Date().setDate(new Date().getDate() + 1)).format('YYYY-MM-DD') });
-      }
-    }
+      },
+    },
   };
 
   const emits: any = defineEmits(['update:modelValue', 'change', 'update']);
@@ -204,7 +204,7 @@
     format: 'YYYY-MM-DD',
     // 节假日
     holiday: () => ({}),
-    time: false
+    time: false,
   });
 
   // 小时
@@ -250,7 +250,7 @@
       } else {
         return !props.time;
       }
-    })
+    }),
   });
 
   const ths: any = ref(null);
@@ -289,7 +289,7 @@
       // 值
       state.value = value || '';
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   onMounted(() => {
@@ -299,7 +299,7 @@
     () => state.panel,
     () => {
       setTimeValue();
-    }
+    },
   );
 
   // 更新时间