Wm UI

.vscode/settings.json

@@ -137,6 +137,10 @@
     "styl",
     "postcss",
     "demoblock",
-    "extglob"
+    "extglob",
+    "VueTypeValidableDef",
+    "windicss",
+    "akar",
+    "unref"
   ]
 }

docs/.vitepress/config.ts

@@ -5,7 +5,7 @@ import sidebar from './configs/sidebar';
 
 export default defineConfig({
   lang: 'en-US',
-  title: 'tjl-ui',
+  title: 'WM-UI',
   base: '/tjl-ui/',
   lastUpdated: true,
   themeConfig: {

docs/.vitepress/configs/nav.ts

@@ -1,4 +1,4 @@
 export default [
   { text: '文档', link: '/guide/getting-started', activeMatch: '/guide/' },
-  { text: '组件', link: '/components/button', activeMatch: '/components/' },
+  { text: '组件', link: '/components/tree', activeMatch: '/components/' },
 ];

docs/.vitepress/configs/sidebar.ts

@@ -13,8 +13,8 @@ export default {
     {
       text: '组件',
       items: [
-        { text: 'Button 按钮', link: '/components/button' },
         { text: 'Tree 树形控件', link: '/components/tree' },
+        { text: 'TagList 标签列表', link: '/components/tagList' },
       ],
     },
   ],

docs/.vitepress/theme/custom.css

@@ -21,3 +21,8 @@ p,
   --c-bg: var(--vp-c-bg);
   --vp-code-block-color: var(--vp-c-text-1);;
 }
+
+.tag-list-add {
+  display: inline-flex;
+  align-items: center;
+}

docs/.vitepress/theme/index.ts

@@ -1,8 +1,8 @@
 import DefaultTheme from 'vitepress/theme';
 import DemoBlock from 'vite-plugin-vitepress-demo/dist/demo/index.vue';
-import { createUI } from '../../../dist/ui.es';
+import { createUI } from 'tjl-ui';
 import 'vite-plugin-vitepress-demo/dist/demo/code.css';
-import '../../../dist/style.css';
+import 'tjl-ui/dist/style.css';
 import './custom.css';
 
 export default {

docs/components/demo/tagList/baseTagList.vue

@@ -0,0 +1,42 @@
+<template>
+  <WMTagList
+    addName="添加版本号"
+    :list="list"
+    width="120"
+    @add="handleAdd"
+    @edit="handleEdit"
+    @delete="handleDelete"
+    @tag-click="handleTag"
+  >
+    <template #title="{ v, i }">内容: {{ v.label }} 下标: {{ i }}</template>
+  </WMTagList>
+</template>
+<script lang="tsx" setup>
+  const list = [
+    {
+      label: '1',
+      value: '1',
+    },
+    {
+      label: '2',
+      value: '2',
+    },
+    {
+      label: '3',
+      value: '3',
+    },
+  ];
+  const handleAdd = () => {
+    console.log('添加版本号');
+  };
+  const handleEdit = (item) => {
+    console.log('编辑标签', item);
+  };
+  const handleDelete = (item) => {
+    console.log('删除标签', item);
+  };
+  const handleTag = (item) => {
+    console.log('点击标签', item);
+  };
+</script>
+<style lang="less" scoped></style>

docs/components/demo/tagList/moreTagList.vue

@@ -0,0 +1,25 @@
+<template>
+  <WMTagList
+    addName="添加版本号"
+    :list="list"
+    width="120"
+    @more-click="handleMore"
+    :total="15"
+    :loading="loading"
+  >
+    <template #title="{ v, i }">内容: {{ v }} 下标: {{ i }}</template>
+  </WMTagList>
+</template>
+<script lang="tsx" setup>
+  import { ref, unref } from 'vue';
+  const list = ref([1, 2, 3, 4, 5, 6, 7]);
+  const loading = ref(false);
+  const handleMore = () => {
+    loading.value = true;
+    setTimeout(() => {
+      list.value = [...unref(list), 8, 9, 10, 11, 12, 13, 14, 15];
+      loading.value = false;
+    }, 2000);
+  };
+</script>
+<style lang="less" scoped></style>

docs/components/demo/tagList/slotsTagList.vue

@@ -0,0 +1,47 @@
+<template>
+  <WMTagList addName="添加版本号" :list="list" width="80">
+    <template #header>
+      <div style="display: flex; align-items: center">
+        <div
+          style="
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: var(--ant-primary-color);
+            margin-right: 6px;
+          "
+        >
+        </div>
+        状态1
+      </div>
+    </template>
+    <template #icon>
+      <span
+        style="
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: var(--ant-primary-color);
+        "
+      ></span>
+    </template>
+    <template #title="{ v, i }">内容: {{ v.label }} 下标: {{ i }}</template>
+  </WMTagList>
+</template>
+<script lang="tsx" setup>
+  const list = [
+    {
+      label: '1',
+      value: '1',
+    },
+    {
+      label: '2',
+      value: '2',
+    },
+    {
+      label: '3',
+      value: '3',
+    },
+  ];
+</script>
+<style lang="less" scoped></style>

docs/components/demo/tree/accordionTree.vue

@@ -0,0 +1,55 @@
+<template>
+  <div style="margin-bottom: 16px">
+    accordion:
+    <Switch v-model:checked="accordion" />
+  </div>
+  <WMTree :treeData="treeData" :accordion="accordion" />
+</template>
+<script lang="tsx" setup>
+  import { ref, watch } from 'vue';
+  import { Switch } from 'ant-design-vue';
+  import type { TreeProps } from 'ant-design-vue';
+
+  const expandedKeys = ref<string[]>([]);
+  const accordion = ref(true);
+
+  watch(expandedKeys, () => {
+    console.log('expandedKeys', expandedKeys);
+  });
+
+  const treeData: TreeProps['treeData'] = [
+    {
+      title: 'parent 1',
+      key: '0-0',
+      children: [
+        {
+          title: 'parent 1-0',
+          key: '0-0-0',
+          children: [
+            { title: 'leaf', key: '0-0-0-0' },
+            { title: 'leaf', key: '0-0-0-1' },
+          ],
+        },
+        {
+          title: 'parent 1-1',
+          key: '0-0-1',
+          children: [{ key: '0-0-1-0', title: 'sss' }],
+        },
+      ],
+    },
+    {
+      title: 'parent 2',
+      key: '1-0',
+      children: [
+        {
+          title: 'parent 2-0',
+          key: '1-0-0',
+        },
+        {
+          title: 'parent 2-1',
+          key: '2-0-1',
+        },
+      ],
+    },
+  ];
+</script>

docs/components/demo/tree/baseTree.vue

@@ -1,7 +1,50 @@
 <template>
-  <div> <TButton name="111" /> </div>
+  <WMTree
+    v-model:expandedKeys="expandedKeys"
+    v-model:selectedKeys="selectedKeys"
+    v-model:checkedKeys="checkedKeys"
+    checkable
+    :tree-data="treeData"
+  />
 </template>
 <script lang="tsx" setup>
-  import {} from 'vue';
+  import { ref, watch } from 'vue';
+  import type { TreeProps } from 'ant-design-vue';
+
+  const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+  const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+  const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+
+  watch(expandedKeys, () => {
+    console.log('expandedKeys', expandedKeys);
+  });
+  watch(selectedKeys, () => {
+    console.log('selectedKeys', selectedKeys);
+  });
+  watch(checkedKeys, () => {
+    console.log('checkedKeys', checkedKeys);
+  });
+
+  const treeData: TreeProps['treeData'] = [
+    {
+      title: 'parent 1',
+      key: '0-0',
+      children: [
+        {
+          title: 'parent 1-0',
+          key: '0-0-0',
+          disabled: true,
+          children: [
+            { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
+            { title: 'leaf', key: '0-0-0-1' },
+          ],
+        },
+        {
+          title: 'parent 1-1',
+          key: '0-0-1',
+          children: [{ key: '0-0-1-0', title: 'sss' }],
+        },
+      ],
+    },
+  ];
 </script>
-<style lang="less" scoped></style>

docs/components/demo/tree/loadTree.vue

@@ -0,0 +1,35 @@
+<template>
+  <WMTree
+    v-model:expandedKeys="expandedKeys"
+    v-model:selectedKeys="selectedKeys"
+    :load-data="onLoadData"
+    :tree-data="treeData"
+  />
+</template>
+<script lang="tsx" setup>
+  import { ref } from 'vue';
+  import type { TreeProps } from 'ant-design-vue';
+  const expandedKeys = ref<string[]>([]);
+  const selectedKeys = ref<string[]>([]);
+  const treeData = ref([
+    { title: 'Expand to load', key: '0' },
+    { title: 'Expand to load', key: '1' },
+    { title: 'Tree Node', key: '2', isLeaf: true },
+  ]);
+  const onLoadData: TreeProps['loadData'] = (treeNode: any) => {
+    return new Promise((resolve) => {
+      if (treeNode.dataRef.children) {
+        resolve();
+        return;
+      }
+      setTimeout(() => {
+        treeNode.dataRef.children = [
+          { title: 'Child Node', key: `${treeNode.eventKey}-0` },
+          { title: 'Child Node', key: `${treeNode.eventKey}-1` },
+        ];
+        treeData.value = [...treeData.value];
+        resolve();
+      }, 1000);
+    });
+  };
+</script>

docs/components/demo/tree/loadingTree.vue

@@ -0,0 +1,55 @@
+<template>
+  <div style="margin-bottom: 16px">
+    loading:
+    <Switch v-model:checked="loading" />
+  </div>
+  <WMTree :tree-data="treeData" :loading="loading" />
+</template>
+<script lang="tsx" setup>
+  import { ref, onMounted, watch } from 'vue';
+  import { Switch } from 'ant-design-vue';
+  import type { TreeProps } from 'ant-design-vue';
+
+  const loading = ref(true);
+
+  const treeData = ref<TreeProps['treeData']>([]);
+
+  watch(loading, (val) => {
+    if (val) {
+      onLoad();
+    }
+  });
+
+  const onLoad = () => {
+    treeData.value = [];
+    setTimeout(() => {
+      treeData.value = [
+        {
+          title: 'parent 1',
+          key: '0-0',
+          children: [
+            {
+              title: 'parent 1-0',
+              key: '0-0-0',
+              disabled: true,
+              children: [
+                { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
+                { title: 'leaf', key: '0-0-0-1' },
+              ],
+            },
+            {
+              title: 'parent 1-1',
+              key: '0-0-1',
+              children: [{ key: '0-0-1-0', title: 'sss' }],
+            },
+          ],
+        },
+      ];
+      loading.value = false;
+    }, 3000);
+  };
+
+  onMounted(() => {
+    onLoad();
+  });
+</script>