@neatui/vue 2.0.8 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",

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/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/index.ts

@@ -3,6 +3,7 @@ import InputRange from './InputRange.vue';
 import Switch from './Switch.vue';
 import TextArea from './TextArea.vue';
 
+import Checkbox from './Checkbox.vue';
 import Select from './Select@v3.vue';
 import SelectList from './SelectList.vue';
 import SelectTags from './SelectTags.vue';
@@ -32,6 +33,7 @@ export {
   InputRange,
   Switch,
   TextArea,
+  Checkbox,
   Select,
   SelectList,
   SelectTags,