wip: more VbenComponent

src/vbenComponents/avatar/index.ts

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

src/vbenComponents/avatar/src/Avatar.vue

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

src/vbenComponents/icon/index.ts

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

src/vbenComponents/icon/src/Icon.vue

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

src/vbenComponents/index.ts

@@ -11,6 +11,13 @@ import { VbenTable } from './table';
 import { VbenCard } from './card';
 import { VbenSpace } from './space';
 import { VbenButton } from './button';
+import { VbenAvatar } from './avatar';
+import { VbenStatistic } from './statistic';
+import { VbenSelect } from './select';
+import { VbenInput } from './input';
+import { VbenThing } from './thing';
+import { VbenPopconfirm } from './popconfirm';
+import { VbenIcon } from './icon';
 
 // 初始化组件
 // global 是否全局注册
@@ -26,5 +33,12 @@ export function initVbenComponent(app: App, comp: Object, global: boolean = true
     .use(VbenDivider)
     .use(VbenSpace)
     .use(VbenPopover)
-    .use(VbenButton);
+    .use(VbenButton)
+    .use(VbenAvatar)
+    .use(VbenStatistic)
+    .use(VbenSelect)
+    .use(VbenInput)
+    .use(VbenThing)
+    .use(VbenPopconfirm)
+    .use(VbenIcon);
 }

src/vbenComponents/input/index.ts

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

src/vbenComponents/input/src/Input.vue

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

src/vbenComponents/popconfirm/index.ts

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

src/vbenComponents/popconfirm/src/Popconfirm.vue

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

src/vbenComponents/select/index.ts

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

src/vbenComponents/select/src/Select.vue

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

src/vbenComponents/statistic/index.ts

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

src/vbenComponents/statistic/src/Statistic.vue

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

src/vbenComponents/table/src/Table.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup name="VbenTable">
   import type { VbenTableProps } from './type';
-  import { computed, PropType, ref } from 'vue';
+  import { computed, PropType, ref, useSlots } from 'vue';
   import { isFunction, isBoolean } from '/@/utils/is';
 
   const props = defineProps({
@@ -16,7 +16,7 @@
     delete options?.title;
     getProxyConfig(options);
     getPageConfig(options);
-    console.log(options);
+    // console.log(options);
     return {
       ...options,
     };
@@ -59,6 +59,9 @@
       options.pagerConfig = pagination;
     }
   };
+  const slot = useSlots();
+
+  console.log(slot);
 </script>
 <template>
   <div class="m-2 p-2 bg-white">

src/vbenComponents/thing/index.ts

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

src/vbenComponents/thing/src/Thing.vue

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