wip: VbenComponent7

src/vbenComponents/cascader/index.ts

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

src/vbenComponents/config/index.ts

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

src/vbenComponents/config/src/Config.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup name="VbenConfig">
   import { maps } from '/@/vbenComponents';
-  import { theme, ThemeEnum } from './data';
   import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
   import { computed } from 'vue';
+  import { theme, ThemeEnum } from './data';
 
   const Config = maps.get('Config');
+
   const themeValue = computed(() => {
-    return theme.value == ThemeEnum.Dark ? darkTheme : null;
+    return theme.value === ThemeEnum.Dark ? darkTheme : null;
   });
 </script>
 <template>

src/vbenComponents/config/src/data.ts

@@ -1,7 +1,9 @@
-import { ref } from 'vue';
-export enum ThemeEnum {
-  Light,
-  Dark,
-}
+import { useAppStoreWithOut } from '/@/store/modules/app';
+import { computed } from 'vue';
 
-export const theme = ref(ThemeEnum.Dark);
+export enum ThemeEnum {
+  Light = 'light',
+  Dark = 'dark',
+}
+const appStore = useAppStoreWithOut();
+export const theme = computed(() => appStore.getDarkMode);

src/vbenComponents/datePicker/index.ts

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

src/vbenComponents/datePicker/src/DatePicker.vue

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

src/vbenComponents/drawer/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '/@/utils';
+import Drawer from './src/Drawer.vue';
+import DrawerContent from './src/DrawerContent.vue';
+
+export const VbenDrawer = withInstall(Drawer);
+export const VbenDrawerContent = withInstall(DrawerContent);

src/vbenComponents/drawer/src/Drawer.vue

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

src/vbenComponents/drawer/src/DrawerContent.vue

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

src/vbenComponents/dropdown/index.ts

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

src/vbenComponents/dropdown/src/Dropdown.vue

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

src/vbenComponents/form/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '/@/utils';
+import Form from './src/Form.vue';
+import FormItem from './src/FormItem.vue';
+import FormItemGi from './src/FormItemGi.vue';
+FormItemGi.__GRID_ITEM__ = true;
+export const VbenForm = withInstall(Form);
+export const VbenFormItem = withInstall(FormItem);
+export const VbenFormItemGi = withInstall(FormItemGi);

src/vbenComponents/form/src/Form.vue

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

src/vbenComponents/form/src/FormItem.vue

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

src/vbenComponents/form/src/FormItemGi.vue

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

src/vbenComponents/index.ts

@@ -44,7 +44,7 @@ import { VbenButton, VbenButtonGroup } from './button';
 import { VbenAvatar } from './avatar';
 import { VbenStatistic } from './statistic';
 import { VbenSelect } from './select';
-import { VbenInput } from './input';
+import { VbenInput, VbenInputGroup } from './input';
 import { VbenThing } from './thing';
 import { VbenPopconfirm } from './popconfirm';
 import { VbenIcon } from './icon';
@@ -64,7 +64,14 @@ import { VbenConfig } from './config';
 import { VbenColorPicker } from './colorPicker';
 import { VbenDesc, VbenDescItem } from './descriptions';
 import { VbenNotificationProvider } from './notification';
-
+import { VbenTimePicker } from './timePicker';
+import { VbenDatePicker } from './datePicker';
+import { VbenInputNumber } from './inputNumber';
+import { VbenDrawer, VbenDrawerContent } from './drawer';
+import { VbenForm, VbenFormItem, VbenFormItemGi } from './form';
+import { VbenCascader } from './cascader';
+import { VbenDropdown } from './dropdown';
+export { theme } from './config';
 // 初始化组件
 // global 是否全局注册
 export function initVbenComponent(app: App, comp: Object, global: boolean = true) {
@@ -111,5 +118,16 @@ export function initVbenComponent(app: App, comp: Object, global: boolean = true
     .use(VbenColorPicker)
     .use(VbenDesc)
     .use(VbenDescItem)
-    .use(VbenNotificationProvider);
+    .use(VbenNotificationProvider)
+    .use(VbenTimePicker)
+    .use(VbenDatePicker)
+    .use(VbenInputNumber)
+    .use(VbenDrawer)
+    .use(VbenDrawerContent)
+    .use(VbenForm)
+    .use(VbenFormItemGi)
+    .use(VbenFormItem)
+    .use(VbenCascader)
+    .use(VbenDropdown)
+    .use(VbenInputGroup);
 }

src/vbenComponents/input/index.ts

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

src/vbenComponents/input/src/InputGroup.vue

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

src/vbenComponents/inputNumber/index.ts

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

src/vbenComponents/inputNumber/src/InputNumber.vue

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

src/vbenComponents/table/src/Table.vue

@@ -7,11 +7,20 @@
   import { isBoolean, isFunction } from '/@/utils/is';
   import { VxeTableInstance } from 'vxe-table';
   import { theme, ThemeEnum } from '/@/vbenComponents/config/src/data';
-
   if (theme.value == ThemeEnum.Dark) {
     import('./scss/dark.scss');
   }
-
+  watch(
+    () => theme.value,
+    () => {
+      if (theme.value === ThemeEnum.Light) {
+        window.location.reload();
+      }
+    },
+  );
+  const titleClass = computed(() => {
+    return { backgroundColor: theme.value === ThemeEnum.Dark ? '#262626' : '#FFF' };
+  });
   const props = defineProps({
     options: {
       type: Object as PropType<VbenTableProps>,
@@ -79,7 +88,7 @@
   const slot = useSlots();
 </script>
 <template>
-  <div class="m-2 p-2 bg-white">
+  <div class="m-2 p-2" :style="titleClass">
     <div v-if="title" class="flex m-2">
       <div class="ml-2 text-xl">{{ title }}</div>
     </div>

src/vbenComponents/table/src/scss/dark.scss

@@ -2,13 +2,17 @@
 $vxe-font-color: #fff;
 
 $vxe-table-header-background-color: #262626;
-
+$vxe-toolbar-background-color:#262626;
+$vxe-button-default-background-color:#262626;
 $vxe-table-body-background-color: #151515;
 $vxe-table-row-striped-background-color: #1d1d1d;
 $vxe-table-row-hover-background-color: #262626;
 $vxe-table-row-hover-striped-background-color: #1e1e1e;
 $vxe-table-footer-background-color: #151515;
-
+$vxe-table-row-current-background-color:	#8C8C8C;
+$vxe-table-column-current-background-color:	#8C8C8C;
+$vxe-table-column-hover-background-color:#8C8C8C;
+$vxe-table-row-hover-current-background-color: #8C8C8C ;
 $vxe-pager-background-color: #151515;
 
 $vxe-input-background-color: #151515;

src/vbenComponents/table/src/type.ts

@@ -3,8 +3,7 @@ import { VxeGridPropTypes } from 'vxe-table';
 
 export type VbenTableProps<D = any> = VxeGridProps<D> & {
   api?: Function;
-  Params?: Object;
-
+  params?: Object;
   title?: string;
   pagination?: boolean | VxeGridPropTypes.PagerConfig;
   afterFetch?: Fn;

src/vbenComponents/timePicker/index.ts

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

src/vbenComponents/timePicker/src/TimePicker.vue

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