@neatui/nuxt 0.1.0 → 1.0.0

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/display/PhotoViewer.vue

@@ -5,14 +5,14 @@
       :initialSlide="initialSlide"
       :spaceBetween="30"
       :keyboard="{
-        enabled: true
+        enabled: true,
       }"
       :pagination="{
-        clickable: true
+        clickable: true,
       }"
       :navigation="true"
       :modules="[Keyboard, Pagination, Navigation]"
-      class="mySwiper"
+      class="full"
     >
       <SwiperSlide v-for="item in files" :key="item.id" class="ac" ui-flex="col cm">
         <img :src="item[srcName]" class="vc" />
@@ -32,19 +32,19 @@
   const props: any = defineProps({
     srcName: {
       type: String,
-      default: 'imgUrl'
+      default: 'url',
     },
     id: {
       type: String,
-      default: 'PhotoViewer'
+      default: 'PhotoViewer',
     },
     initialSlide: {
       type: Number,
-      default: 0
+      default: 0,
     },
     files: {
       type: Array as () => any[],
-      default: () => []
-    }
+      default: () => [],
+    },
   });
 </script>

package/src/components/display/Tree.vue

@@ -1,7 +1,7 @@
 <template>
   <ul :class="`${root ? '' : 'nl-ms'}`">
     <li v-if="root" class="pr">
-      <div ui-form="@a sz: co:risk type:none :block" class="full-w">
+      <div ui-form="@a sz: co:risk type:none :block" class="w-full">
         <div style="left: 0.75em" :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>
       </div>
     </li>
@@ -156,7 +156,7 @@
     line: false,
     interacted: false,
     rules: () => [],
-    block: false
+    block: false,
   });
 
   /*
@@ -227,7 +227,7 @@
     error: {},
     // 用户是否交互
     interacted: false,
-    tree: [] as Array<Record<string, any>>
+    tree: [] as Array<Record<string, any>>,
   });
 
   watch(
@@ -247,7 +247,7 @@
         return n;
       });
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 获取节点勾选状态
@@ -300,7 +300,7 @@
         change(state.selected);
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 校验
@@ -359,7 +359,7 @@
         state.error = { tips: props.tips, ontips: props.tips ? 'show' : '', verify: '', co: '' };
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 </script>
 <style lang="scss" scoped>

package/src/components/display/TreeView.vue

@@ -92,11 +92,11 @@
     suffix: () => [],
     active: () => ({ class: 'co-main' }),
     optional: 'all',
-    multiple: false
+    multiple: false,
   });
 
   const state: any = reactive({
-    value: ''
+    value: '',
   });
   watch(
     () => props.modelValue,
@@ -105,7 +105,7 @@
         state.value = value;
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
   watch(
     () => state.value,
@@ -114,7 +114,7 @@
         emits('update:modelValue', value);
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 事件处理

package/src/components/display/index.ts

@@ -3,6 +3,6 @@ import Tree from './Tree.vue';
 import Calendar from './Calendar.vue';
 import PhotoEditor from './PhotoEditor.vue';
 import TreeView from './TreeView.vue';
-import ChartView from './ChartView.vue';
+// import ChartView from './ChartView.vue';
 
-export { Image, Tree, Calendar, PhotoEditor, TreeView, ChartView };
+export { Image, Tree, Calendar, PhotoEditor, TreeView };

package/src/components/form/Cascader.vue

@@ -101,49 +101,49 @@
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     ui: {
       type: Object,
-      default: () => ({ sz: 'm' })
+      default: () => ({ sz: 'm' }),
     },
     modelValue: {
       type: [String, Number, Array as () => any[]],
-      default: ''
+      default: '',
     },
     tools: {
       type: Boolean,
-      default: true
+      default: true,
     },
     spare: {
       type: String,
-      default: '当前没有可选项'
+      default: '当前没有可选项',
     },
     multiple: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 单选时生效,当为true时选中任何一级节点都生效
     changeOnSelect: {
       type: Boolean,
-      default: false
+      default: false,
     },
     readonly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     disabled: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   const emit = defineEmits(['update:modelValue']);
@@ -156,7 +156,7 @@
     flatOpts: [], // 拉平的数据
     selectd: { label: '', value: '' },
     transSelected: { label: '', value: [] }, // 单选选中节点 - 单选过渡节点(记录选中的级联节点)
-    checkAll: false //全选
+    checkAll: false, //全选
   });
 
   // modelValue与input组件的v-model绑定属性重复，会造成覆盖问题。需要删掉
@@ -372,7 +372,7 @@
     } else {
       state.selectd = {
         label: '',
-        value: props.multiple ? [] : ''
+        value: props.multiple ? [] : '',
       };
       handleCheck(true);
     }
@@ -382,7 +382,7 @@
   const remove = () => {
     state.selectd = {
       label: '',
-      value: props.multiple ? [] : ''
+      value: props.multiple ? [] : '',
     };
     if (props.multiple) {
       handleCheck(true);
@@ -390,7 +390,7 @@
     } else {
       state.transSelected = {
         label: '',
-        value: []
+        value: [],
       };
     }
     ifollow.value.cancel();
@@ -405,7 +405,7 @@
     () => {
       init();
     },
-    { deep: true }
+    { deep: true },
   );
 
   watch(
@@ -423,13 +423,13 @@
         emit('update:modelValue', state.selectd.value);
       }
     },
-    { deep: true }
+    { deep: true },
   );
 
   defineExpose({
     select,
     remove,
-    cancel
+    cancel,
   });
 </script>
 . .

package/src/components/form/Checkbox.vue

@@ -0,0 +1,64 @@
+<template>
+  <form class="m-sm-sub">
+    <label v-for="(item, idx) in state.lists" :key="idx" :ui-form="`${theme} type:checkbox${item.disabled ? ' disabled' : ''}`">
+      <input v-model="item.__checked" type="checkbox" :disabled="item.disabled" />
+      <slot>
+        <span>{{ item.label }}</span>
+      </slot>
+    </label>
+  </form>
+</template>
+<script setup lang="ts">
+  import { reactive, watch } from 'vue';
+
+  // 定义类型
+  interface OptionsTypes {
+    label: string;
+    value: any;
+    disabled?: boolean;
+  }
+  interface Props {
+    modelValue: any[];
+    options: OptionsTypes[];
+    theme?: string;
+  }
+  // 外部入参
+  const props = withDefaults(defineProps<Props>(), {
+    theme: '@a',
+    modelValue: () => [],
+    options: () => [],
+  });
+
+  // 定义事件
+  const emits = defineEmits(['update:modelValue']);
+
+  // 内部数据
+  const state: any = reactive({
+    lists: [],
+  });
+
+  // 监听数据
+  watch(
+    [() => props.options, () => props.modelValue],
+    ([options, value]) => {
+      const lists = options?.map((item) => ({ ...item, __checked: value?.includes(item.value) }));
+      // 只有在内容变化时才更新
+      if (JSON.stringify(state.lists) !== JSON.stringify(lists)) {
+        state.lists = lists;
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+  watch(
+    () => state.lists,
+    (val) => {
+      const value = val.filter((item: any) => item.__checked).map((item: any) => item.value);
+      emits('update:modelValue', value);
+    },
+    {
+      deep: true,
+    },
+  );
+</script>

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 },
   );
 
   // 日期前翻