wip: more VbenComponent2

src/vbenComponents/button/index.ts

@@ -1,4 +1,6 @@
 import { withInstall } from '/@/utils';
 import Button from './src/Button.vue';
+import ButtonGroup from './src/ButtonGroup.vue';
 
 export const VbenButton = withInstall(Button);
+export const VbenButtonGroup = withInstall(ButtonGroup);

src/vbenComponents/button/src/Button.vue

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

src/vbenComponents/button/src/ButtonGroup.vue

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

src/vbenComponents/checkbox/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '/@/utils';
+import Checkbox from './src/Checkbox.vue';
+import CheckboxGroup from './src/CheckboxGroup.vue';
+
+export const VbenCheckbox = withInstall(Checkbox);
+export const VbenCheckboxGroup = withInstall(CheckboxGroup);

src/vbenComponents/checkbox/src/Checkbox.vue

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

src/vbenComponents/checkbox/src/CheckboxGroup.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup name="VbenCheckboxGroup">
+  import { maps } from '/@/vbenComponents';
+  import Checkbox from './Checkbox.vue';
+  import { computed, ref } from 'vue';
+  import { VbenButton, VbenButtonGroup } from '../../button';
+  const CheckboxGroup = maps.get('CheckboxGroup');
+  const props = defineProps({
+    options: {
+      type: Array,
+      default: [],
+    },
+    labelField: {
+      type: String,
+      default: 'label',
+    },
+    valueField: {
+      type: String,
+      default: 'value',
+    },
+    mode: {
+      type: String,
+      default: 'default',
+    },
+  });
+  const value = ref([]);
+  const emit = defineEmits(['update:value']);
+  const option = computed(() => {
+    console.log(props.options);
+    const { options } = props;
+
+    return options
+      ? options.map((v) => {
+          return { label: v[props.labelField], value: v[props.valueField], selected: false };
+        })
+      : [];
+  });
+  const select = (v) => {
+    const i = value.value.findIndex((a) => a == v);
+    if (i === -1) {
+      value.value.push(v);
+    } else {
+      value.value.splice(i, 1);
+    }
+    emit('update:value', value.value);
+  };
+  const getType = (v) => {
+    if (value.value.length == 0) {
+      return '';
+    }
+    return value.value.find((a) => a == v) ? 'primary' : '';
+  };
+</script>
+<template>
+  <div>
+    <CheckboxGroup v-bind="$attrs" v-model:value="value">
+      <Checkbox
+        v-for="(o, k) in option"
+        :key="k"
+        :value="o.value"
+        :label="o.label"
+        v-if="mode === 'default'"
+      ></Checkbox>
+
+      <VbenButtonGroup v-if="mode === 'button'"
+        ><VbenButton
+          v-for="(o, k) in option"
+          :value="o.value"
+          @click="select(o.value)"
+          :type="getType(o.value)"
+          >{{ o.label }}</VbenButton
+        ></VbenButtonGroup
+      >
+    </CheckboxGroup></div
+  >
+</template>
+
+<style scoped></style>

src/vbenComponents/ellipsis/index.ts

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

src/vbenComponents/ellipsis/src/Ellipsis.vue

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

src/vbenComponents/empty/index.ts

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

src/vbenComponents/empty/src/Empty.vue

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

src/vbenComponents/grid/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '/@/utils';
+import Grid from './src/Grid.vue';
+import GridItem from './src/GridItem.vue';
+GridItem.__GRID_ITEM__ = true;
+export const VbenGrid = withInstall(Grid);
+export const VbenGridItem = withInstall(GridItem);

src/vbenComponents/grid/src/Grid.vue

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

src/vbenComponents/grid/src/GridItem.vue

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

src/vbenComponents/image/index.ts

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

src/vbenComponents/image/src/Image.vue

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

src/vbenComponents/index.ts

@@ -2,7 +2,10 @@ import type { Component, App } from 'vue';
 
 //组件map
 export const maps = new Map<String, Component>();
-
+export let useMsg = () => {};
+export const setMessage = (func: Fn = () => {}) => {
+  useMsg = func;
+};
 // 引入组件
 import { VbenPopover } from './popover';
 import { VbenDivider } from './divider';
@@ -10,7 +13,7 @@ import { VbenTag } from './tag';
 import { VbenTable } from './table';
 import { VbenCard } from './card';
 import { VbenSpace } from './space';
-import { VbenButton } from './button';
+import { VbenButton, VbenButtonGroup } from './button';
 import { VbenAvatar } from './avatar';
 import { VbenStatistic } from './statistic';
 import { VbenSelect } from './select';
@@ -18,6 +21,16 @@ import { VbenInput } from './input';
 import { VbenThing } from './thing';
 import { VbenPopconfirm } from './popconfirm';
 import { VbenIcon } from './icon';
+import { VbenCheckbox, VbenCheckboxGroup } from './checkbox';
+import { VbenModal } from './modal';
+import { VbenEmpty } from './empty';
+import { VbenUpload } from './upload';
+import { VbenTabs, VbenTabPane } from './tabs';
+import { VbenGrid, VbenGridItem } from './grid';
+import { VbenEllipsis } from './ellipsis';
+import { VbenImage } from './image';
+import { VbenMessageProvider } from './message';
+import { VbenPagination } from './pagination';
 
 // 初始化组件
 // global 是否全局注册
@@ -25,6 +38,7 @@ export function initVbenComponent(app: App, comp: Object, global: boolean = true
   Object.keys(comp).forEach((k) => {
     maps.set(k, comp[k]);
   });
+
   if (!global) return;
   app
     .use(VbenCard)
@@ -34,11 +48,25 @@ export function initVbenComponent(app: App, comp: Object, global: boolean = true
     .use(VbenSpace)
     .use(VbenPopover)
     .use(VbenButton)
+    .use(VbenButtonGroup)
     .use(VbenAvatar)
     .use(VbenStatistic)
     .use(VbenSelect)
     .use(VbenInput)
     .use(VbenThing)
     .use(VbenPopconfirm)
-    .use(VbenIcon);
+    .use(VbenIcon)
+    .use(VbenCheckbox)
+    .use(VbenCheckboxGroup)
+    .use(VbenModal)
+    .use(VbenEmpty)
+    .use(VbenUpload)
+    .use(VbenTabs)
+    .use(VbenTabPane)
+    .use(VbenGrid)
+    .use(VbenGridItem)
+    .use(VbenEllipsis)
+    .use(VbenImage)
+    .use(VbenMessageProvider)
+    .use(VbenPagination);
 }

src/vbenComponents/message/index.ts

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

src/vbenComponents/message/src/MessageProvider.vue

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

src/vbenComponents/modal/index.ts

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

src/vbenComponents/modal/src/Modal.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup name="VbenModal">
+  import { maps } from '/@/vbenComponents';
+  import { computed } from 'vue';
+  const Modal = maps.get('Modal');
+  const props = defineProps({
+    width: {
+      type: [String, Number],
+      default: '600px',
+    },
+  });
+  const bodyStyle = computed(() => {
+    return {
+      width: props.width,
+    };
+  });
+</script>
+<template>
+  <Modal v-bind="$attrs" :style="bodyStyle">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot> </template
+  ></Modal>
+</template>
+
+<style scoped></style>

src/vbenComponents/pagination/index.ts

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

src/vbenComponents/pagination/src/Pagination.vue

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

src/vbenComponents/tabs/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '/@/utils';
+import Tabs from './src/Tabs.vue';
+import TabPane from './src/TabPane.vue';
+TabPane.__TAB_PANE__ = true;
+export const VbenTabs = withInstall(Tabs);
+export const VbenTabPane = withInstall(TabPane);

src/vbenComponents/tabs/src/TabPane.vue

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

src/vbenComponents/tabs/src/Tabs.vue

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

src/vbenComponents/upload/index.ts

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

src/vbenComponents/upload/src/Upload.vue

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