@uf_lee/leeui 1.0.19 → 1.0.20

package/README.md

@@ -2,8 +2,8 @@
  * @Author: 李天惊 uf_lee@163.com
  * @Date: 2025-03-20 12:35:35
  * @LastEditors: 李天惊 uf_lee@163.com
- * @LastEditTime: 2025-03-20 14:50:41
- * @FilePath: \leelcp2022\lee_ui\README.md
+ * @LastEditTime: 2025-03-27 13:04:15
+ * @FilePath: \leeui\lee_ui\README.md
  * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
 -->
 # LeeUI
@@ -16,3 +16,425 @@
 ```bash
 npm install @uf_lee/leeui
 
+```vue3
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { ElDivider } from "element-plus";
+import { LElForm, LElFormItemCom } from "@uf_lee/leeui";
+import type { FormSchema } from "@uf_lee/leeui/dist/types/types";
+// import type { FormItemRule } from "element-plus";
+// import type { FormRules } from "element-plus";
+
+// --------------------- Autocomplete 使用的一些设置 start -------------------------
+interface RestaurantItem {
+  value: string;
+  link: string;
+}
+const restaurants = ref<RestaurantItem[]>([]);
+const querySearch = (queryString: string, cb: any) => {
+  const results = queryString
+    ? restaurants.value.filter(createFilter(queryString))
+    : restaurants.value;
+  // call callback function to return suggestions
+  cb(results);
+};
+const createFilter = (queryString: string) => {
+  return (restaurant: RestaurantItem) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    );
+  };
+};
+const loadAll = () => {
+  return [
+    { value: "vue", link: "https://github.com/vuejs/vue" },
+    { value: "element", link: "https://github.com/ElemeFE/element" },
+    { value: "cooking", link: "https://github.com/ElemeFE/cooking" },
+    { value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
+    { value: "vuex", link: "https://github.com/vuejs/vuex" },
+    { value: "vue-router", link: "https://github.com/vuejs/vue-router" },
+    { value: "babel", link: "https://github.com/babel/babel" },
+  ];
+};
+const handleSelect = (item: Record<string, any>) => {
+  console.log(item);
+};
+
+onMounted(() => {
+  restaurants.value = loadAll();
+});
+// --------------------- Autocomplete 使用的一些设置 end -------------------------
+
+// const aaa = (rule: any, value: any, callback: any) => {
+//   if (value === "") {
+//     callback(new Error("Please input the password again"));
+//   } else if (value !== "222") {
+//     callback(new Error("Two inputs don't match!"));
+//   } else {
+//     callback();
+//   }
+// };
+
+// const rules = reactive<FormRules>({
+//   Input: [
+//     {
+//       validator: aaa,
+//       trigger: "blur",
+//     },
+//   ],
+// });
+
+const schema: FormSchema[] = [
+  {
+    field: "undefined",
+    label: "undefined",
+    componentProps: {
+      placeholder: "默认输入框",
+    },
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: "Radio",
+    label: "Radio",
+    component: "Radio",
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "1",
+        },
+        {
+          label: "选项2",
+          value: "2",
+        },
+      ],
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: "RadioButton",
+    label: "RadioButton",
+    component: "RadioButton",
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "1",
+        },
+        {
+          label: "选项2",
+          value: "2",
+        },
+      ],
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: "Checkbox",
+    label: "Checkbox",
+    component: "Checkbox",
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "1",
+        },
+        {
+          label: "选项2",
+          value: "2",
+        },
+      ],
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: "CheckboxButton",
+    label: "CheckboxButton",
+    component: "CheckboxButton",
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "1",
+        },
+        {
+          label: "选项2",
+          value: "2",
+        },
+      ],
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: "Input",
+    label: "Input",
+    component: "Input",
+    componentProps: {
+      placeholder: "输入框",
+    },
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: "Autocomplete",
+    label: "Autocomplete",
+    component: "Autocomplete",
+    componentProps: {
+      placeholder: "自动补全输入框",
+      fetchSuggestions: querySearch,
+      onselect: handleSelect,
+    },
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: "InputNumber",
+    label: "InputNumber",
+    component: "InputNumber",
+    componentProps: {},
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: "Select",
+    label: "Select",
+    component: "Select",
+    componentProps: {
+      placeholder: "请选择下拉框",
+      options: [
+        {
+          label: "选项1",
+          value: "1",
+        },
+        {
+          label: "选项2",
+          value: "2",
+        },
+      ],
+    },
+    colProps: {
+      span: 10,
+    },
+  },
+  {
+    field: "Cascader",
+    label: "Cascader",
+    component: "Cascader",
+    componentProps: {
+      placeholder: "级联选择器",
+      options: [
+        {
+          label: "选项1",
+          value: "1",
+          children: [
+            {
+              label: "选项1-1",
+              value: "1001",
+            },
+            {
+              label: "选项1-2",
+              value: "1002",
+            },
+            {
+              label: "选项1-3",
+              value: "1003",
+            },
+            {
+              label: "选项1-4",
+              value: "1004",
+            },
+          ],
+        },
+        {
+          label: "选项2",
+          value: "2",
+          children: [
+            {
+              label: "选项2-1",
+              value: "2001",
+            },
+            {
+              label: "选项2-2",
+              value: "2002",
+            },
+            {
+              label: "选项2-3",
+              value: "2003",
+            },
+            {
+              label: "选项2-4",
+              value: "2004",
+            },
+          ],
+        },
+        {
+          label: "选项3",
+          value: "3",
+          children: [
+            {
+              label: "选项3-1",
+              value: "3001",
+              children: [
+                {
+                  label: "选项3-1-1",
+                  value: "3001001",
+                },
+                {
+                  label: "选项3-1-1",
+                  value: "3001--2",
+                },
+              ],
+            },
+            {
+              label: "选项3-2",
+              value: "3002",
+            },
+          ],
+        },
+        {
+          label: "选项4",
+          value: "4",
+        },
+        {
+          label: "选项5",
+          value: "5",
+        },
+      ],
+    },
+    colProps: {
+      span: 10,
+    },
+  },
+  {
+    field: "Switch",
+    label: "Switch",
+    component: "Switch",
+    componentProps: {},
+    colProps: {
+      span: 4,
+    },
+  },
+  {
+    field: "Slider",
+    label: "Slider",
+    component: "Slider",
+    componentProps: {},
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: "TimePicker",
+    label: "TimePicker",
+    component: "TimePicker",
+    componentProps: {},
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: "DatePicker",
+    label: "DatePicker",
+    component: "DatePicker",
+    componentProps: {},
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: "Rate",
+    label: "Rate",
+    component: "Rate",
+    componentProps: {},
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: "ColorPicker",
+    label: "ColorPicker",
+    component: "ColorPicker",
+    componentProps: {},
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: "Transfer",
+    label: "Transfer",
+    component: "Transfer",
+    componentProps: {},
+    colProps: {
+      span: 12,
+    },
+  },
+  {
+    field: "Divider",
+    label: "Divider",
+    component: "Divider",
+    componentProps: {
+      contentPosition: "center",
+    },
+    colProps: {
+      span: 12,
+    },
+  },
+  {
+    field: "TimeSelect",
+    label: "TimeSelect",
+    component: "TimeSelect",
+    componentProps: {},
+    colProps: {
+      span: 12,
+    },
+  },
+  {
+    field: "SelectV2",
+    label: "SelectV2",
+    component: "SelectV2",
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "1",
+        },
+        {
+          label: "选项2",
+          value: "2",
+        },
+      ],
+    },
+    colProps: {
+      span: 12,
+    },
+  },
+];
+
+// 值
+const model: any = reactive({
+  undefined: "12312",
+});
+</script>
+
+<template>
+  <el-divider content-position="left">model</el-divider>
+  {{ model }}
+  <el-divider content-position="left">LElForm</el-divider>
+  <LElForm :schema="schema" :model="model" />
+  <el-divider content-position="left">LElFormItemCom</el-divider>
+  <LElFormItemCom :data="schema[0]" v-model="model.undefined" />
+  <LElFormItemCom :data="schema[1]" v-model="model[schema[1].field]" />
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uf_lee/leeui",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "自己的组件库",
   "main": "dist/leeui.umd.js",
   "module": "dist/leeui.es.js",