wip: more VbenComponent3

src/main.ts

@@ -20,12 +20,48 @@ import 'xe-utils';
 import VXETable from 'vxe-table';
 import 'vxe-table/lib/style.css';
 
-import { initVbenComponent } from '/@/vbenComponents';
-import { NTag, NCard, NDivider, NSpace, NPopover, NButton } from 'naive-ui';
+import { initVbenComponent, setMessage } from '/@/vbenComponents';
+
+import {
+  NTag,
+  NCard,
+  NDivider,
+  NSpace,
+  NPopover,
+  NButton,
+  NAvatar,
+  NStatistic,
+  NSelect,
+  NInput,
+  NThing,
+  NPopconfirm,
+  NIcon,
+  NCheckbox,
+  NCheckboxGroup,
+  NButtonGroup,
+  NModal,
+  NEmpty,
+  NUpload,
+  NUploadDragger,
+  NTabs,
+  NTabPane,
+  NGrid,
+  NGridItem,
+  NEllipsis,
+  NImage,
+  NMessageProvider,
+  useMessage,
+  NPagination,
+  NRadio,
+  NRadioButton,
+  NRadioGroup,
+  NText,
+  NConfigProvider,
+} from 'naive-ui';
 
 async function bootstrap() {
   const app = createApp(App);
-
+  await setupI18n(app);
   initVbenComponent(app, {
     Tag: NTag,
     Card: NCard,
@@ -33,7 +69,35 @@ async function bootstrap() {
     Space: NSpace,
     Popover: NPopover,
     Button: NButton,
+    ButtonGroup: NButtonGroup,
+    Avatar: NAvatar,
+    Statistic: NStatistic,
+    Select: NSelect,
+    Input: NInput,
+    Thing: NThing,
+    Popconfirm: NPopconfirm,
+    Icon: NIcon,
+    Checkbox: NCheckbox,
+    CheckboxGroup: NCheckboxGroup,
+    Modal: NModal,
+    Empty: NEmpty,
+    Upload: NUpload,
+    UploadDragger: NUploadDragger,
+    Tabs: NTabs,
+    TabPane: NTabPane,
+    Grid: NGrid,
+    GridItem: NGridItem,
+    Ellipsis: NEllipsis,
+    Image: NImage,
+    MessageProvider: NMessageProvider,
+    Pagination: NPagination,
+    Radio: NRadio,
+    RadioButton: NRadioButton,
+    RadioGroup: NRadioGroup,
+    Text: NText,
+    Config: NConfigProvider,
   });
+  setMessage(useMessage);
   // Configure store
   setupStore(app);
 
@@ -45,7 +109,6 @@ async function bootstrap() {
 
   // Multilingual configuration
   // Asynchronous case: language files may be obtained from the server side
-  await setupI18n(app);
 
   // Configure routing
   setupRouter(app);

src/vbenComponents/config/index.ts

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

src/vbenComponents/config/src/Config.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup name="VbenConfig">
+  import { maps } from '/@/vbenComponents';
+  const Config = maps.get('Config');
+  import { darkTheme } from 'naive-ui';
+</script>
+<template>
+  <Config v-bind="$attrs" :theme="darkTheme"> <slot></slot></Config>
+</template>
+
+<style scoped></style>

src/vbenComponents/index.ts

@@ -31,6 +31,9 @@ import { VbenEllipsis } from './ellipsis';
 import { VbenImage } from './image';
 import { VbenMessageProvider } from './message';
 import { VbenPagination } from './pagination';
+import { VbenRadio, VbenRadioButton, VbenRadioGroup } from './radio';
+import { VbenText } from './typography';
+import { VbenConfig } from './config';
 
 // 初始化组件
 // global 是否全局注册
@@ -68,5 +71,10 @@ export function initVbenComponent(app: App, comp: Object, global: boolean = true
     .use(VbenEllipsis)
     .use(VbenImage)
     .use(VbenMessageProvider)
-    .use(VbenPagination);
+    .use(VbenPagination)
+    .use(VbenRadio)
+    .use(VbenRadioGroup)
+    .use(VbenRadioButton)
+    .use(VbenText)
+    .use(VbenConfig);
 }

src/vbenComponents/radio/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '/@/utils';
+import Radio from './src/Radio.vue';
+import RadioGroup from './src/RadioGroup.vue';
+import RadioButton from './src/RadioButton.vue';
+
+export const VbenRadio = withInstall(Radio);
+export const VbenRadioButton = withInstall(RadioButton);
+export const VbenRadioGroup = withInstall(RadioGroup);

src/vbenComponents/radio/src/Radio.vue

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

src/vbenComponents/radio/src/RadioButton.vue

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

src/vbenComponents/radio/src/RadioGroup.vue

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

src/vbenComponents/table/src/Table.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup name="VbenTable">
   import type { VbenTableProps } from './type';
-  import { computed, PropType, ref, useSlots } from 'vue';
+  import { computed, PropType, ref, unref, useSlots } from 'vue';
   import { isFunction, isBoolean } from '/@/utils/is';
+  import { VxeTableInstance } from 'vxe-table';
 
   const props = defineProps({
     options: {
@@ -21,7 +22,15 @@
       ...options,
     };
   });
-
+  const xGrid = ref({} as VxeTableInstance);
+  const reload = () => {
+    const g = unref(xGrid);
+    if (!g) {
+      return;
+    }
+    g.commitProxy('query');
+  };
+  defineExpose({ reload });
   const getProxyConfig = (options: VbenTableProps) => {
     const { api, proxyConfig, data, afterFetch } = options;
     if (proxyConfig || data) return;
@@ -60,15 +69,13 @@
     }
   };
   const slot = useSlots();
-
-  console.log(slot);
 </script>
 <template>
   <div class="m-2 p-2 bg-white">
     <div v-if="title" class="flex m-2">
       <div class="ml-2 text-xl">{{ title }}</div>
     </div>
-    <vxeGrid v-bind="getProps">
+    <vxeGrid v-bind="getProps" ref="xGrid">
       <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
         <slot :name="item" v-bind="data || {}"></slot>
       </template>

src/vbenComponents/typography/index.ts

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

src/vbenComponents/typography/src/Text.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup name="VbenText">
+  import { maps } from '/@/vbenComponents';
+  const Text = maps.get('Text');
+</script>
+<template>
+  <Text v-bind="$attrs"> <slot></slot> </Text
+></template>
+
+<style scoped></style>

src/vbenComponents/typography/src/Typography.vue

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