wip: VbenComponent5

package.json

@@ -52,7 +52,7 @@
     "intro.js": "^5.1.0",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
-    "naive-ui": "^2.28.4",
+    "naive-ui": "^2.29.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.1",
     "pinia": "2.0.12",

src/main.ts

@@ -18,6 +18,7 @@ import { registerGlobComp } from '/@/components/registerGlobComp';
 
 import { initVbenComponent, setMessage } from '/@/vbenComponents';
 
+// 按需导入组件
 import {
   NTag,
   NCard,
@@ -53,11 +54,17 @@ import {
   NRadioGroup,
   NText,
   NConfigProvider,
+  NDynamicTags,
+  NColorPicker,
+  NDescriptions,
+  NDescriptionsItem,
 } from 'naive-ui';
 
 async function bootstrap() {
   const app = createApp(App);
   await setupI18n(app);
+  //VBenComponents 缩写为 VC
+  // 注册组件至VC，入参：app
   initVbenComponent(app, {
     Tag: NTag,
     Card: NCard,
@@ -92,7 +99,12 @@ async function bootstrap() {
     RadioGroup: NRadioGroup,
     Text: NText,
     Config: NConfigProvider,
+    DynamicTags: NDynamicTags,
+    ColorPicker: NColorPicker,
+    Descriptions: NDescriptions,
+    DescriptionsItem: NDescriptionsItem,
   });
+  // 注册useMessage函数
   setMessage(useMessage);
   // Configure store
   setupStore(app);

src/vbenComponents/colorPicker/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import ColorPicker from './src/ColorPicker.vue';
+
+export const VbenColorPicker = withInstall(ColorPicker);

src/vbenComponents/colorPicker/src/ColorPicker.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup name="VbenColorPicker">
+  import { maps } from '/@/vbenComponents';
+  const ColorPicker = maps.get('ColorPicker');
+</script>
+<template>
+  <ColorPicker v-bind="$attrs">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+  </ColorPicker>
+</template>
+
+<style scoped></style>

src/vbenComponents/config/src/Config.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup name="VbenConfig">
   import { maps } from '/@/vbenComponents';
   import { theme, ThemeEnum } from './data';
-  import { darkTheme, dateZhCN } from 'naive-ui';
+  import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
   import { computed } from 'vue';
 
   const Config = maps.get('Config');
@@ -10,7 +10,7 @@
   });
 </script>
 <template>
-  <Config v-bind="$attrs" :theme="themeValue" :date-locale="dateZhCN" abstract>
+  <Config v-bind="$attrs" :theme="themeValue" :date-locale="dateZhCN" :locale="zhCN" abstract>
     <slot></slot
   ></Config>
 </template>

src/vbenComponents/descriptions/index.ts

@@ -0,0 +1,9 @@
+import { withInstall } from '/@/utils';
+import Descriptions from './src/Descriptions.vue';
+import DescriptionsItem from './src/DescriptionsItem.vue';
+import { DESCRIPTION_ITEM_FLAG } from 'naive-ui/es/descriptions/src/utils';
+// @ts-ignore
+DescriptionsItem[DESCRIPTION_ITEM_FLAG] = true;
+
+export const VbenDesc = withInstall(Descriptions);
+export const VbenDescItem = withInstall(DescriptionsItem);

src/vbenComponents/descriptions/src/Descriptions.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup name="VbenDesc">
+  import { maps } from '/@/vbenComponents';
+  const Descriptions = maps.get('Descriptions');
+</script>
+<template>
+  <Descriptions v-bind="$attrs">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot> </template
+  ></Descriptions>
+</template>
+
+<style scoped></style>

src/vbenComponents/descriptions/src/DescriptionsItem.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup name="VbenDescItem">
+  import { maps } from '/@/vbenComponents';
+  const DescriptionsItem = maps.get('DescriptionsItem');
+  console.log(DescriptionsItem, 111);
+</script>
+<template>
+  <DescriptionsItem v-bind="$attrs">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot> </template
+  ></DescriptionsItem>
+</template>
+
+<style scoped></style>

src/vbenComponents/index.ts

@@ -1,6 +1,6 @@
 import type { Component, App } from 'vue';
 import VXETable from 'vxe-table';
-//组件map
+//VC组件map
 export const maps = new Map<String, Component>();
 export let useMsg = () => {};
 export const setMessage = (func: Fn = () => {}) => {
@@ -9,7 +9,7 @@ export const setMessage = (func: Fn = () => {}) => {
 // 引入组件
 import { VbenPopover } from './popover';
 import { VbenDivider } from './divider';
-import { VbenTag } from './tag';
+import { VbenTag, VbenDynamicTags } from './tag';
 import { VbenTable } from './table';
 import { VbenCard } from './card';
 import { VbenSpace } from './space';
@@ -34,6 +34,8 @@ import { VbenPagination } from './pagination';
 import { VbenRadio, VbenRadioButton, VbenRadioGroup } from './radio';
 import { VbenText } from './typography';
 import { VbenConfig } from './config';
+import { VbenColorPicker } from './colorPicker';
+import { VbenDesc, VbenDescItem } from './descriptions';
 
 // 初始化组件
 // global 是否全局注册
@@ -76,5 +78,9 @@ export function initVbenComponent(app: App, comp: Object, global: boolean = true
     .use(VbenRadioGroup)
     .use(VbenRadioButton)
     .use(VbenText)
-    .use(VbenConfig);
+    .use(VbenConfig)
+    .use(VbenDynamicTags)
+    .use(VbenColorPicker)
+    .use(VbenDesc)
+    .use(VbenDescItem);
 }

src/vbenComponents/tag/index.ts

@@ -1,4 +1,6 @@
 import { withInstall } from '/@/utils';
 import Tag from './src/Tag.vue';
+import DynamicTags from './src/DynamicTags.vue';
 
 export const VbenTag = withInstall(Tag);
+export const VbenDynamicTags = withInstall(DynamicTags);

src/vbenComponents/tag/src/DynamicTags.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup name="VbenDynamicTags">
+  import { maps } from '/@/vbenComponents';
+  const DynamicTags = maps.get('DynamicTags');
+</script>
+<template>
+  <DynamicTags v-bind="$attrs">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot></template
+  ></DynamicTags>
+</template>
+
+<style scoped></style>