Merge pull request #1 from EralChen/dev

Dev
EralChen · Nov 20, 2024 · bbc109a · bbc109a
2 parents dd5726b + c1254f3
commit bbc109a
Show file tree

Hide file tree

Showing 58 changed files with 1,326 additions and 337 deletions.
diff --git a/docs/examples/routes-menu-content/basic/index.vue b/docs/examples/routes-menu-content/basic/index.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { ElMenu, ElIcon } from 'element-plus'
+import { Document } from '@element-plus/icons-vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { VkRoutesMenuContent } from '@vunk-plus/components/routes-menu-content'
+
+const constRoutes = [
+  {
+    path: '/ui',
+    name: 'ui',
+
+    children: [
+      {
+        path: 'menu',
+        name: 'menu',
+        children: [{
+          path: 'subItem1',
+          name: 'subItem1',
+   
+          children: [
+            {
+              path: 'subItem1-1',
+              name: 'subItem1-1',
+      
+            },
+            {
+              path: 'subItem1-2',
+              name: 'subItem1-1',
+    
+            },
+          ],
+        }],
+      },
+    ],
+  },
+] as unknown as RouteRecordRaw[]
+</script>
+<template>
+  <ElMenu :collapse="false">
+    <VkRoutesMenuContent 
+      :data="constRoutes" :popper-class="'vk-routes-menu-content-popper'"
+    >
+      <template #item>
+        <ElIcon><Document></Document></ElIcon>
+      </template>
+
+      <template #itemTitle="{data, href}">
+        {{ data.meta?.name || data.name }}
+        href: {{ href }}
+      </template>
+
+      <template #menuTitle="{ data }">
+        <ElIcon><Document></Document></ElIcon>
+        {{ data.meta?.name || data.name }}
+      </template>
+    </VkRoutesMenuContent>
+  </ElMenu>
+</template>
diff --git a/docs/examples/routes-menu-content/link/index.vue b/docs/examples/routes-menu-content/link/index.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { ElMenu, ElIcon } from 'element-plus'
+import { VkRoutesMenuContent } from '@vunk-plus/components/routes-menu-content'
+import { Document } from '@element-plus/icons-vue'
+import { RouteRecordRaw } from 'vue-router'
+
+const constRoutes = [
+  {
+    path: '/ui',
+    name: 'ui',
+    meta: {
+      title: 'UI',
+    },
+    children: [
+      {
+        path: 'menu',
+        name: 'menu',
+        children: [{
+          path: 'subItem1',
+          name: 'subItem1',
+   
+ 
+          children: [
+            {
+              path: 'subItem1-1',
+              name: 'subItem1-1',
+              meta: {
+                title: 'subItem1-1',
+              },
+            },
+            {
+              path: 'subItem1-2',
+              name: 'subItem1-1',
+              meta: {
+                title: 'subItem1-2',
+              },
+            },
+          ],
+        }],
+      },
+    ],
+  },
+] as unknown as RouteRecordRaw[]
+
+
+</script>
+<template>
+  <ElMenu>
+    <VkRoutesMenuContent 
+      :data="constRoutes"
+    >
+      <template #item="{ data, href }">
+        <a 
+          :href="href" 
+          class="demo-routes-menu-content-a"
+          :title="data.meta?.title"
+        >
+          <ElIcon>
+            <Document></Document>
+          </ElIcon>
+        </a>
+      </template>
+
+      <template #itemTitle="{ data }">
+        <span>{{ data.meta?.title || data.meta?.name }}</span> 
+      </template>
+
+      <template #menuTitle="{ data }">
+        <span>{{ data.meta?.title || data.meta?.name }}</span>
+      </template>
+    </VkRoutesMenuContent>
+  </ElMenu>
+</template>
+
+<style>
+.demo-routes-menu-content-a{
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  color: var(--el-color-primary);
+}
+</style>
diff --git a/docs/examples/routes-menu-content/link/link.vue b/docs/examples/routes-menu-content/link/link.vue
@@ -0,0 +1,20 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  props: {
+    to: {
+      type: String,
+      default: '',
+    },
+  },
+})
+</script>
+<template>
+  <a 
+    class="menu-link"
+    :href="to"
+  >
+    {{ to }}
+  </a>
+</template>
+
diff --git a/docs/examples/table-columns/basic.vue b/docs/examples/table-columns/basic.vue
@@ -0,0 +1,114 @@
+<script lang="tsx" setup>
+import { ElTable } from 'element-plus'
+import { VkTableColumns, __VkTableColumns } from '@vunk-plus/components/table-columns'
+import { computed, ref } from 'vue'
+import { sleep } from '@vunk/shared/promise'
+const children = ref<__VkTableColumns.Source[]>([])
+const colsSource = computed< __VkTableColumns.Source[]>(() => [
+  {
+    prop: 'date',
+    label: '日期',
+  },
+  {
+    label: '个人信息',
+    children: children.value,
+
+  },
+  {
+    label: 'xxx',
+    prop: 'xxx',
+    fixed: '',
+  },
+  
+]) 
+
+const data = ref([
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-08',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+])
+
+const setColChildren = async () => {
+  await sleep(1000)
+  children.value = children.value.length ? [] : [
+    {
+      prop: 'name',
+      label: '名称',
+      width: '200px',
+    },
+    {
+      label: '其他',
+      children: [],
+    },
+  ]
+}
+setColChildren()
+</script>
+<template>
+  <p>
+    <ElButton @click="setColChildren">
+      setColChildren
+    </ElButton>
+  </p>
+
+
+  <ElTable :data="data">
+    <VkTableColumns
+      :align="'center'"
+      :source="colsSource"
+    ></VkTableColumns>
+  </ElTable>
+</template>
diff --git a/docs/examples/table-columns/hidden.vue b/docs/examples/table-columns/hidden.vue
@@ -0,0 +1,87 @@
+<script lang="tsx" setup>
+import { ElTable } from 'element-plus'
+import { VkTableColumns, __VkTableColumns } from '@vunk-plus/components/table-columns'
+import { computed, ref } from 'vue'
+
+
+const colsSource = computed< __VkTableColumns.Source[]>(() => [
+  {
+    prop: 'date',
+    label: '日期',
+  },
+  {
+    label: 'xxx',
+    prop: 'xxx',
+    fixed: 'right',
+    hidden: true,
+  },
+]) 
+
+const data = ref([
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-08',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+])
+
+</script>
+<template>
+  <ElTable :data="data">
+    <VkTableColumns
+      :align="'center'"
+      :source="colsSource"
+    ></VkTableColumns>
+  </ElTable>
+</template>