@neatui/nuxt 0.1.0 → 1.0.1

package/src/components/display/Calendar.vue

@@ -19,8 +19,8 @@
             <div
               ui-flex="col cm"
               class="r-ss b-solid bk-none b-xs"
-              :class="`${item.isToday ? 'bk-main-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
-                state.selected && state.selected === item.date ? 'active bg-main-ls co-fore' : 'hover-bg-weak'
+              :class="`${item.isToday ? 'bk-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+                state.selected && state.selected === item.date ? 'active bg-main-o-ls co-fore' : 'hover-bg-weak'
               }`"
             >
               <span>{{ item.day }}</span>
@@ -108,40 +108,40 @@
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     // 提示文案
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     // 格式
     format: {
       type: String,
-      default: ''
+      default: '',
     },
     // 值
     value: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 值
     modelValue: { type: [String, Number], default: '' },
     // 节假日
     holiday: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     // 校验规则
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     // 是否是示校验图标
     verify: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   // 内部数据
@@ -186,7 +186,7 @@
         calendar.unshift({
           date: `${last_y}-${last_m}-${prevdays}`,
           day: prevdays,
-          isLastMonth: 1
+          isLastMonth: 1,
         });
         prevdays = prevdays - 1;
       }
@@ -197,7 +197,7 @@
           day: _i,
           isToday: curr_y === y && curr_m === m && curr_d === i,
           isHoliday: props.holiday[`${y}-${m}-${_i}`]?.name ? 1 : 0,
-          holiday: props.holiday[`${y}-${m}-${_i}`]?.name
+          holiday: props.holiday[`${y}-${m}-${_i}`]?.name,
         });
       }
       for (let i = 1; calendar.length < 42; i++) {
@@ -205,14 +205,14 @@
         calendar.push({
           date: `${next_y}-${next_m}-${_i}`,
           day: _i,
-          isNextMonth: 1
+          isNextMonth: 1,
         });
       }
       return { days: calendar, y, m, d };
     }),
     value: computed(() => {
       return props.format ? idate(state.selected || props.value).format(props.format) : state.selected || props.value;
-    })
+    }),
   });
   const { curr = {} }: any = toRefs(state);
 

package/src/components/display/CalendarReg.vue

@@ -19,8 +19,8 @@
             <div
               ui-flex="col cm"
               class="r-ss b-solid bk-none b-xs"
-              :class="`${item.isToday ? 'bk-main-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
-                state.selected && state.selected === item.date ? 'active bg-main-ls co-fore' : 'hover-bg-weak'
+              :class="`${item.isToday ? 'bk-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+                state.selected && state.selected === item.date ? 'active bg-main-o-ls co-fore' : 'hover-bg-weak'
               }`"
             >
               <span>{{ item.day }}</span>
@@ -108,40 +108,40 @@
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     // 提示文案
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     // 格式
     format: {
       type: String,
-      default: ''
+      default: '',
     },
     // 值
     value: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 值
     modelValue: { type: [String, Number], default: '' },
     // 节假日
     holiday: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     // 校验规则
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     // 是否是示校验图标
     verify: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   // 内部数据
@@ -186,7 +186,7 @@
         calendar.unshift({
           date: `${last_y}-${last_m}-${prevdays}`,
           day: prevdays,
-          isLastMonth: 1
+          isLastMonth: 1,
         });
         prevdays = prevdays - 1;
       }
@@ -197,7 +197,7 @@
           day: _i,
           isToday: curr_y === y && curr_m === m && curr_d === i,
           isHoliday: props.holiday[`${y}-${m}-${_i}`]?.name ? 1 : 0,
-          holiday: props.holiday[`${y}-${m}-${_i}`]?.name
+          holiday: props.holiday[`${y}-${m}-${_i}`]?.name,
         });
       }
       for (let i = 1; calendar.length < 42; i++) {
@@ -205,14 +205,14 @@
         calendar.push({
           date: `${next_y}-${next_m}-${_i}`,
           day: _i,
-          isNextMonth: 1
+          isNextMonth: 1,
         });
       }
       return { days: calendar, y, m, d };
     }),
     value: computed(() => {
       return props.format ? idate(state.selected || props.value).format(props.format) : state.selected || props.value;
-    })
+    }),
   });
   const { curr = {} }: any = toRefs(state);
 

package/src/components/display/Image.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div :class="`mc-img b-solid bk-case b-xs ${imgClass}`" :style="imgStyle">
+    <div :class="`mc-img ${imgClass}`" :style="imgStyle">
       <img :src="src[srcName]" :style="`object-fit: ${fit}`" @click.stop="showPreview" />
       <div v-if="tools" class="mc-img-tools">
         <slot name="tools">
@@ -19,33 +19,33 @@
 
   const props: any = defineProps({
     tools: { type: Boolean, default: true },
-    srcName: { type: String, default: 'imgUrl' },
+    srcName: { type: String, default: 'url' },
     theme: { type: String, default: '@a' },
     co: { type: String, default: 'note' },
     imgClass: { type: String, default: '' },
     imgStyle: { type: String, default: '' },
     src: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     files: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     // 图片如何适应容器框,同原生object-fit
     fit: {
       type: String,
-      default: 'contain'
+      default: 'contain',
     },
     // 是否开启图片预览放大
     preview: {
       type: Boolean,
-      default: true
+      default: true,
     },
     initialSlide: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   });
 
   const emit = defineEmits(['delImg']);

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>