@neatui/vue 1.1.0 → 1.2.0

package/README.md

@@ -1,139 +1,3 @@
-# 基础 UI 组件
+# @neatui/vue
 
-```javascript
-// 规则描述 Rule Description 简称 RD
-const rd = {
-  // 筛选配置
-  limit: [
-    {
-      label: '',
-      field: '',
-      paths: '',
-      enums: [],
-      modle: '',
-      value: '',
-      rules: [],
-      logic: true | false,
-      _view: 1,
-    }
-  ],
-
-  // 表格配置
-  table: [
-    {
-      label: '', // 标签名
-      field: '', // 字段名
-      paths: '', // 源数据里的JSON结构层级 如{a:{aa:{aaaa:1},b:{bb:{bbb:2}}} 如果field是bbb则需要在paths里填写'b.bb'告诉驱动器这个字段在源数据中所处的位置
-      enums: [], // 枚举
-      modle: '', // 模型 链接Link|复制Copy|图片Image|标签Tag|... 有一个特殊的自定义代码'@',当驱动器不会自动处理这个字段需要手工在业务代码里处理
-      value: '', // 显示内容，一般不填写，只有需要计算显示值时才使用，比如给显示值设置特殊格式{ value: ()=> idate(val).format('YYYY-MM-DD') }
-      event: {}, // 事件
-      attrs: {}, // 属性
-      popup: {}, // 提示（无限套娃遍历）
-      logic: true, // 逻辑控制（开启关闭）
-      fixed: true|false|1｜0｜'l'|'r' // 是否固定
-      rules: [], // 校验规则
-      view: true|false|'always', // 是否显示（自动生成静态值交互可控）
-      chlid:[], // 子元素（无限套娃遍历）
-      clear: true|false // 是否清除字段，代替logic，logic另有他用
-    }
-  ],
-
-  // 表单配置
-  form: [
-    {
-      label: '', // 标签名
-      field: '', // 字段名
-      paths: '', // 源数据里的JSON结构层级 如{a:{aa:{aaaa:1},b:{bb:{bbb:2}}} 如果field是bbb则需要在paths里填写'b.bb'告诉驱动器这个字段在源数据中所处的位置
-      enums: [], // 枚举
-      modle: '', // 模型 简写'Select'，详细写法 ['Select',{ attrName:'1' }]
-      value: '',
-      event: {}, // 事件
-      attrs: {}, // 属性
-      logic: true, // 逻辑控制（开启关闭）
-      rules: [
-        {
-          type: 'risk',
-          msg: '这是必填项',
-          required: true
-        },
-        {
-          type: 'risk',
-          msg: '请正确填写中文名',
-          validator: () => validateChineseName
-        }
-      ],
-      logic: true | false, // 是否显示
-      media: 'mob-24 pad-12 dpc-8', // 媒体查询
-
-      // 数组类型
-      array: true,
-      // 子块标题
-      title: (data: any, item: any) => {
-        return item.customerName + '的评价';
-      },
-      // 子块字段
-      child: []
-    }
-  ]
-};
-```
-
-## 封装组件
-
-```
-TableLoader           ✓
-LimitLoader           ✓
-FormView              ✓
-FormRowView           ✓
-FormColView           ✓
-
-
-Grid                  0%
-Button                0%
-Input                 ✓
-NumberInput           0%
-Radio                 0%
-Checkbox              0%
-Rate                  0%
-Slider                0%
-Select                ✓
-MoreSelect            ✓
-SearchSelect          ✓
-SearchMoreSelect      ✓
-PageSelect            ✓
-TreeSelect            ✓
-CascaderSelect        ✓
-DatePicker            50%  急
-TimePicker            50%  急
-DateTimePicker        50%  急
-Switch                50%
-Textarea              50%
-FileUpload            0%
-ImageUpload           ✓
-Avatar                0%
-Badge                 0%
-Calendar              0%
-Card                  0%
-Carousel              0%
-Collapse              0%
-Empty                 0%
-Image                 ✓
-InfiniteScroll        0%
-Pagination            ✓
-Progress              0%
-Result                0%
-Tag                   0%
-Timeline              0%
-Tree                  0%
-Tabs                  0%
-Divider               0%
-Message               0%
-```
-
-## Version
-
-```
-v1.0.0
-开源第一版本
-```
+[http://neatui.fekit.cn](http://neatui.fekit.cn)

package/package.json

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

package/src/components/display/ChartView.vue

@@ -1,19 +1,30 @@
 <template>
-  <div ref="dom"></div>
+  <div class="neatui-charts-view">
+    <div :style="`padding-top: ${size * 100}%;`">
+      <div ref="dom"></div>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
-  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+  import { ref, watch, reactive, onMounted, onBeforeUnmount } from 'vue';
   import ResizeObserver from 'resize-observer-polyfill';
   import * as echarts from 'echarts';
+  import { isArray, isObject, isString, deepcopy } from '@fekit/utils';
+  import { useMyuiStore } from '@neatui/vue';
+
+  // 框架数据
+  const myui: any = useMyuiStore();
 
   // 类型
   interface Props {
-    option?: object;
+    data?: object;
+    size?: number;
   }
 
   // 入参
   const props: any = withDefaults(defineProps<Props>(), {
-    option: () => ({})
+    data: () => ({}),
+    size: 1
   });
 
   const dom: any = ref(null);
@@ -21,6 +32,36 @@
   let ex: any = null;
   let timer: any = null;
 
+  const status: any = reactive({});
+
+  // 设置颜色
+  const color = (obj: any) => {
+    if (isArray(obj)) {
+      const _obj = obj.map((i: any) => {
+        return color(i);
+      });
+      return _obj;
+    } else if (isObject(obj)) {
+      const _obj: any = {};
+      for (const key in obj) {
+        _obj[key] = color(obj[key]);
+      }
+      return _obj;
+    } else {
+      if (isString(obj)) {
+        if (isArray(myui.themes)) {
+          const _theme: any = myui.themes[myui.theme] || myui.themes[Object.keys(myui.themes)[0]] || {};
+          if (_theme) {
+            obj = obj?.replace(/^co\((\w*)\)$/, (res: any, co: any) => {
+              return _theme[co] || '';
+            });
+          }
+        }
+      }
+      return obj;
+    }
+  };
+
   // 重绘
   const redraw = () => {
     if (ex) {
@@ -31,12 +72,18 @@
     }
   };
 
+  // 设置
+  const config = () => {
+    if (ex) {
+      const data = color(deepcopy(props.data));
+      ex?.setOption(data);
+    }
+  };
+
   watch(
-    () => props.option,
+    [() => props.data, () => myui.theme],
     () => {
-      if (ex) {
-        ex?.setOption(props.option);
-      }
+      config();
     },
     { deep: true }
   );
@@ -44,7 +91,7 @@
   onMounted(() => {
     if (dom.value) {
       ex = echarts.init(dom.value);
-      ex?.setOption(props.option);
+      config();
 
       // 监听参考元素变化
       obs = new ResizeObserver(redraw);
@@ -57,3 +104,20 @@
     obs?.disconnect();
   });
 </script>
+<style lang="scss">
+  .neatui-charts-view {
+    position: relative;
+    & > * {
+      width: 100%;
+      box-sizing: content-box;
+      height: 0;
+      & > * {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+      }
+    }
+  }
+</style>

package/src/index.ts

@@ -1,3 +1,7 @@
+// 数据
+export * from './store/myui';
+
+// 组件
 export * from './components/basic';
 export * from './components/display';
 export * from './components/form';

package/src/store/myui.ts

@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia';
+
+// 基础数据
+export const useMyuiStore = defineStore('myui', {
+  state: () => {
+    return {
+      full: 0,
+      // 字号
+      fontSize: localStorage.getItem('fontSize') || 'm',
+      // 主题
+      theme: localStorage.getItem('theme') || 'auto',
+      // 所有主题
+      themes: [],
+      // 侧边
+      side: 1
+    };
+  },
+  getters: {},
+  actions: {
+    // 设置全屏显示
+    async setFull(then = (res: any) => {}) {
+      const full = this.full ? 0 : 1;
+      localStorage.setItem('neatui_full', `${full}`);
+      this.full = full;
+      then(full);
+    },
+    // 设置系统主题
+    async setTheme() {
+      return document.documentElement.setAttribute('theme', this.theme);
+    },
+    // 设置系统字号
+    async setFontSize() {
+      document.documentElement.setAttribute('size', this.fontSize);
+    }
+  }
+});