@neatui/vue 2.15.1 → 2.15.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.15.1",
+  "version": "2.15.3",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -27,7 +27,8 @@
     "@fekit/scale": "^2.0.1",
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
-    "@fekit/utils": "^4.3.0",
+    "@fekit/utils": "^4.3.1",
+    "@neatui/css": "^3.10.3",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/display/PhotoEditor.vue

@@ -3,7 +3,7 @@
     <div class="mt-mm" ui-note="@b risk">抠图和压缩处理需要较长时间，期间请耐心等待不要关闭本窗口或进行操作，本功能需要付费，请尽量珍惜每一次处理避免不必要的浪费～</div>
     <div v-if="state.img" class="photo-editor-viewer bg-weak my-mm" ui-flex="row">
       <div class="mr-mm" style="flex: 1">
-        <vue-cropper ref="cropperRef" :img="state.img" :autoCrop="state.autoCrop" @realTime="realTime"></vue-cropper>
+        <vue-cropper ref="cropperRef" :img="state.img" :auto-crop="state.autoCrop" @real-time="realTime" />
       </div>
       <div style="flex: 1" class="photo-editor-transparent">
         <img :src="state.previews || ''" />
@@ -32,14 +32,14 @@
   import { VueCropper } from 'vue-cropper/next';
   import Compressor from 'compressorjs';
   import { LayerById } from '../basic';
-  import axios from 'axios';
+  // import axios from 'axios';
   import 'vue-cropper/next/dist/index.css';
 
   const props: any = defineProps({
     layerId: {
       type: String,
-      default: 'PhotoEditor'
-    }
+      default: 'PhotoEditor',
+    },
   });
 
   const state = reactive({
@@ -47,7 +47,7 @@
     // outputType: 'jepg', // 裁剪生成图片格式
     autoCrop: true,
     previews: null, //base格式
-    cropLoad: 0
+    cropLoad: 0,
   });
 
   const emit = defineEmits(['fileChange']);
@@ -63,7 +63,7 @@
         success: resolve,
         maxWidth: 1000,
         maxHeight: 700,
-        error: reject
+        error: reject,
       });
     });
     const _file = blobToFile(blob);
@@ -91,36 +91,36 @@
     if (!state.cropLoad) {
       state.cropLoad = 1;
 
-      const formData = {
-        image_file_b64: state.previews,
-        image_url: '',
-        size: 'preview',
-        type: 'auto',
-        type_level: '1',
-        format: 'auto',
-        roi: '0% 0% 100% 100%',
-        crop: false,
-        crop_margin: '0',
-        scale: 'original',
-        position: 'original',
-        channels: 'rgba',
-        add_shadow: false,
-        semitransparency: true,
-        bg_color: '',
-        bg_image_url: ''
-      };
-      const res: any = await axios.post(
-        'https://api.remove.bg/v1.0/removebg',
-        { ...formData },
-        { responseType: 'arraybuffer', headers: { 'X-Api-Key': 'kg4jrcKZd6Gjdx5CmBYmksuN' } }
-      );
-      if (res.status === 200) {
-        const blob = new Blob([res.data], { type: 'image/png' });
-        blobToDataURI(blob, (data: any) => {
-          state.previews = data;
-          state.cropLoad = 0;
-        });
-      }
+      // const formData = {
+      //   image_file_b64: state.previews,
+      //   image_url: '',
+      //   size: 'preview',
+      //   type: 'auto',
+      //   type_level: '1',
+      //   format: 'auto',
+      //   roi: '0% 0% 100% 100%',
+      //   crop: false,
+      //   crop_margin: '0',
+      //   scale: 'original',
+      //   position: 'original',
+      //   channels: 'rgba',
+      //   add_shadow: false,
+      //   semitransparency: true,
+      //   bg_color: '',
+      //   bg_image_url: '',
+      // };
+      // const res: any = await axios.post(
+      //   'https://api.remove.bg/v1.0/removebg',
+      //   { ...formData },
+      //   { responseType: 'arraybuffer', headers: { 'X-Api-Key': 'kg4jrcKZd6Gjdx5CmBYmksuN' } },
+      // );
+      // if (res.status === 200) {
+      //   const blob = new Blob([res.data], { type: 'image/png' });
+      //   blobToDataURI(blob, (data: any) => {
+      //     state.previews = data;
+      //     state.cropLoad = 0;
+      //   });
+      // }
     }
   };
 

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

@@ -66,7 +66,7 @@
       </div>
     </div>
     <div v-if="!state.isNoTime" class="ny-sm nx-ms">
-      <div class="full ac b-solid bk-back b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
+      <div class="full ac b-solid bk-line b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
         <ul
           :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
           class="fekit-date-view-time-scroll"

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

@@ -7,7 +7,7 @@
         </div>
       </div>
       <div ui-btns="@a none s" @click="setPanelType()">
-        <p v-if="state.type > 2" class="nowrap" ui-flex="row cm">
+        <p v-if="state.type === 2" class="nowrap" ui-flex="row cm">
           <b class="nx-ss">{{ panel.sta }}年</b>
           <span class="nx-xs">-</span>
           <b class="nx-ss">{{ panel.end }}年</b>
@@ -26,7 +26,7 @@
         </div>
       </div>
     </div>
-    <div ui-date-body="" class="flex-block pr">
+    <div ui-date-body="" class="flex-block pr min-h-ls+">
       <div v-if="state.type === 2" class="full n-ms">
         <ul ui-row="mob-6" class="n-ms ny-sm-sub">
           <li v-for="(year, idx) in panel.years" :key="idx" ui-flex="col cm" @click="setDateValue('y', year)">
@@ -51,7 +51,7 @@
         </ul>
       </div>
       <div v-else class="full">
-        <ul ui-flex="row am" class="fs-xs nx-sm nt-sm">
+        <ul ui-flex="row am" class="fs-xs nx-sm nt-ss">
           <li class="flex-block ac"><span>日</span></li>
           <li class="flex-block ac"><span>一</span></li>
           <li class="flex-block ac"><span>二</span></li>
@@ -73,9 +73,9 @@
               >
                 <div
                   ui-flex="col cm"
-                  class="r-sm b-solid bk-none b-xs my-ss ux-scale co-main:hover"
+                  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-o-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-w' : 'bg-weak:hover co-main:hover'}`"
                 >
                   <span>{{ item.day }}</span>
                 </div>
@@ -86,54 +86,57 @@
         </ul>
       </div>
     </div>
-    <div v-if="!state.isNoTime && state.type === 0" class="ny-sm nx-ms">
-      <div class="full ac b-solid bk-back b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
-        <ul
-          :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
-          class="fekit-date-view-time-scroll"
-          ref="ths"
-          ui-scroll=":y xs"
-          ui-btns="@a none s :block"
-          data-type="h"
-          @scroll="timeScroll"
-        >
-          <li v-for="(item, idx) in hours" :key="idx">
-            {{ item }}
-          </li>
-        </ul>
-        <ul
-          :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
-          class="fekit-date-view-time-scroll"
-          ref="tms"
-          ui-scroll=":y xs"
-          ui-btns="@a none s :block"
-          data-type="m"
-          @scroll="timeScroll"
-        >
-          <li v-for="(item, idx) in seconds" :key="idx">
-            {{ item }}
-          </li>
-        </ul>
-        <ul
-          :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
-          class="fekit-date-view-time-scroll"
-          ref="tss"
-          ui-scroll=":y xs"
-          ui-btns="@a none s :block"
-          data-type="s"
-          @scroll="timeScroll"
-        >
-          <li v-for="(item, idx) in seconds" :key="idx">
-            {{ item }}
-          </li>
-        </ul>
+    <template v-if="!state.isNoTime">
+      <div v-if="state.type === 0" class="h-ss ny-sm nx-ms">
+        <div class="full ac b-solid bk-back b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
+          <ul
+            :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
+            class="fekit-date-view-time-scroll"
+            ref="ths"
+            ui-scroll=":y xs"
+            ui-btns="@a none s :block"
+            data-type="h"
+            @scroll="timeScroll"
+          >
+            <li v-for="(item, idx) in hours" :key="idx">
+              {{ item }}
+            </li>
+          </ul>
+          <ul
+            :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
+            class="fekit-date-view-time-scroll"
+            ref="tms"
+            ui-scroll=":y xs"
+            ui-btns="@a none s :block"
+            data-type="m"
+            @scroll="timeScroll"
+          >
+            <li v-for="(item, idx) in seconds" :key="idx">
+              {{ item }}
+            </li>
+          </ul>
+          <ul
+            :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
+            class="fekit-date-view-time-scroll"
+            ref="tss"
+            ui-scroll=":y xs"
+            ui-btns="@a none s :block"
+            data-type="s"
+            @scroll="timeScroll"
+          >
+            <li v-for="(item, idx) in seconds" :key="idx">
+              {{ item }}
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
+      <div v-else class="h-ss"></div>
+    </template>
     <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'" class="nx-ss">{{ idate(state.panel).format('YYYY-MM-DD') }}</span>
-          <span v-if="!state.isNoTime" :anim-editing="state.type === 'time'" class="nx-ss">{{ idate(state.panel).format('HH:mm:ss') }}</span>
+          <span :anim-editing="state.type === 0" class="nx-ss">{{ idate(state.panel).format('YYYY-MM-DD') }}</span>
+          <span v-if="!state.isNoTime" :anim-editing="state.type === 0" class="nx-ss">{{ idate(state.panel).format('HH:mm:ss') }}</span>
         </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">
@@ -153,12 +156,9 @@
 <script setup lang="ts">
   import { computed, ref, reactive, watch, onMounted } from 'vue';
   import { isDateString, isObject, isString } from '@fekit/utils';
-  // import { idate } from '@fekit/utils';
   import { idate } from './date';
   import { Icon } from '../basic';
 
-  // const _level: any = { 0: ['d', 1], 1: ['m', 1], 2: ['y', 10], 3: ['y', 100] };
-
   // 创建日期
   const cDate = (date: any = null) => {
     return isDateString(date) ? new Date(date) : new Date();
@@ -218,7 +218,7 @@
     picker: 'date',
     // 额外内容
     extras: (item: any) => {
-      return `<i class="dib o-ms mb-xs r-xl ${item.today ? 'bg-main' : 'bg-none'}" style="width:.6em; height:.6em;"></i>`;
+      return `<i class="dib o-ms mb-xs r-xl ${item.today ? 'bg-main' : 'bg-none'}" style="width:.5em; height:.5em;"></i>`;
     },
     // 快捷选择
     shortcuts: () => ['yesterday', 'today', 'tomorrow'],
@@ -256,7 +256,6 @@
     years: 0,
     // 当前时间计算
     curr: computed(() => {
-      // console.log(158, state.panel);
       const date = idate(state.panel);
       const days = date.calendar({ group: true, value: [state.panel] });
       return { days, ...date.attr };
@@ -303,7 +302,7 @@
   const setDateValue = (type: any, value: number = 0, add: number = 0) => {
     state.panel = upload(type, value, add);
     // 面板返回上一级
-    state.type -= 1;
+    state.type = Math.max(0, state.type - 1);
   };
 
   // 时分秒
@@ -420,8 +419,10 @@
 
   // 向外通信
   const change = (item: any) => {
-    state.panel = item ? idate(item.date).format(props.format) : item;
-    emits('change', state.value);
+    const panelValue = item ? idate(item.date).format(props.format) : item;
+    state.panel = panelValue;
+    state.value = panelValue;
+    emits('change', panelValue);
     if (state.isNoTime) {
       update();
     }
@@ -441,7 +442,7 @@
 
   // 面板类型
   const setPanelType = () => {
-    if (state.type < 3) {
+    if (state.type < 2) {
       state.type += 1;
     }
   };
@@ -456,16 +457,18 @@
       _timer.value = setTimeout(() => {
         const h = item.offsetHeight;
         const idx = Math.floor(ev.target.scrollTop / h);
+        const maxIdx = type === 'h' ? 23 : 59;
+        const safeIdx = Math.min(Math.max(idx, 0), maxIdx);
         const { YYYY = 0, MM = 0, DD = 0, HH = '', mm = '', ss = '' }: any = state.curr || {};
         let _panel = `${YYYY}-${MM}-${DD}`;
         if (type === 'h') {
-          _panel += ` ${idx}:${mm}:${ss}`;
+          _panel += ` ${safeIdx}:${mm}:${ss}`;
         }
         if (type === 'm') {
-          _panel += ` ${HH}:${idx}:${ss}`;
+          _panel += ` ${HH}:${safeIdx}:${ss}`;
         }
         if (type === 's') {
-          _panel += ` ${HH}:${mm}:${idx}`;
+          _panel += ` ${HH}:${mm}:${safeIdx}`;
         }
         state.panel = idate(_panel).format('YYYY-MM-DD HH:mm:ss');
       }, 100);

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

@@ -73,7 +73,6 @@
 
   const emits = defineEmits(['update:modelValue', 'change', 'onshow', 'onhide', 'update:other']);
 
-
   /**
    * 入参说明
    * modelValue     值
@@ -107,7 +106,7 @@
 
   // 类型
   interface Props {
-    modelValue?: string | number | null;
+    modelValue?: string | number | null | boolean;
     options: Array<object>;
     all?: { label: string; value: null | '*' };
     other?: {
@@ -217,7 +216,7 @@
           const otherLabel = found.label || '其他';
           return {
             label: `${otherLabel}-${props.otherValue}`,
-            value: found.value
+            value: found.value,
           };
         }
         return found;
@@ -230,7 +229,7 @@
         const otherLabel = otherOption?.label || '其他';
         return {
           label: `${otherLabel}-${props.modelValue}`,
-          value: props.modelValue
+          value: props.modelValue,
         };
       }
 
@@ -281,7 +280,7 @@
         customInputValue.value = '';
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
 
   // 监听并验证modelValue的有效性
@@ -312,7 +311,7 @@
         }
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
 
   // 选择

package/src/utils/theme.ts

@@ -1,5 +1,5 @@
 // 主题
-export const theme = (then = (_theme: any) => {}) => {
+export const theme = (then: (theme: string) => void = () => {}) => {
   // 自动设置主题
   const auto = (scheme: any) => {
     const _theme = window.localStorage.getItem('theme') || (scheme.matches ? 'dark' : 'light');