feat: add useDesign

.ls-lint.yml

@@ -3,6 +3,7 @@ ls:
     .js: kebab-case | PascalCase
     .vue: PascalCase | regex:^index
     .ts: camelCase | PascalCase
+    .tsx: camelCase | PascalCase
     .d.ts: kebab-case
     .mock.ts: kebab-case
     .data.ts: camelCase | kebab-case

src/App.vue

@@ -4,7 +4,9 @@
     :locale="antConfigLocale"
     :transform-cell-text="transformCellText"
   >
-    <router-view />
+    <AppProvider>
+      <router-view />
+    </AppProvider>
   </ConfigProvider>
 </template>
 
@@ -17,9 +19,11 @@
   import { useLockPage } from '/@/hooks/web/useLockPage';
   import { useLocale } from '/@/hooks/web/useLocale';
 
+  import { AppProvider } from '/@/components/Application';
+
   export default defineComponent({
     name: 'App',
-    components: { ConfigProvider },
+    components: { ConfigProvider, AppProvider },
     setup() {
       // Initialize vuex internal system configuration
       initAppConfigStore();

src/components/Application/index.ts

@@ -1,6 +1,10 @@
-import AppLocalePickerLib from './src/AppLocalePicker.vue';
-import AppLogoLib from './src/AppLogo.vue';
+import AppLocalePicker from './src/AppLocalePicker.vue';
+import AppLogo from './src/AppLogo.vue';
+import AppProvider from './src/AppProvider.vue';
 import { withInstall } from '../util';
 
-export const AppLocalePicker = withInstall(AppLocalePickerLib);
-export const AppLogo = withInstall(AppLogoLib);
+withInstall(AppLocalePicker, AppLogo, AppProvider);
+
+export { useAppProviderContext } from './src/useAppContext';
+
+export { AppLocalePicker, AppLogo, AppProvider };

src/components/Application/src/AppLocalePicker.vue

@@ -69,8 +69,8 @@
   });
 </script>
 
-<style lang="less">
-  .app-locale-picker-overlay {
+<style lang="less" scoped>
+  :global(.app-locale-picker-overlay) {
     .ant-dropdown-menu-item {
       min-width: 160px;
     }

src/components/Application/src/AppLogo.vue

@@ -4,12 +4,14 @@
 -->
 <template>
   <div
-    class="app-logo anticon"
-    :class="{ theme, 'collapsed-show-title': getCollapsedShowTitle }"
+    class="anticon"
+    :class="[prefixCls, theme, { 'collapsed-show-title': getCollapsedShowTitle }]"
     @click="handleGoHome"
   >
     <img src="/@/assets/images/logo.png" />
-    <div class="app-logo__title ml-2 ellipsis" v-show="showTitle">{{ globSetting.title }}</div>
+    <div class="ml-2 ellipsis" :class="[`${prefixCls}__title`]" v-show="showTitle">
+      {{ globSetting.title }}
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -23,6 +25,8 @@
 
   import { propTypes } from '/@/utils/propTypes';
 
+  import { useDesign } from '/@/hooks/web/useDesign';
+
   export default defineComponent({
     name: 'AppLogo',
     props: {
@@ -34,6 +38,8 @@
       showTitle: propTypes.bool.def(true),
     },
     setup() {
+      const { prefixCls } = useDesign('app-logo');
+
       const { getCollapsedShowTitle } = useMenuSetting();
 
       const globSetting = useGlobSetting();
@@ -48,17 +54,19 @@
         handleGoHome,
         globSetting,
         getCollapsedShowTitle,
+        prefixCls,
       };
     },
   });
 </script>
 <style lang="less" scoped>
   @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-app-logo';
 
-  .app-logo {
+  .@{prefix-cls} {
     display: flex;
     align-items: center;
-    padding-left: 10px;
+    padding-left: 12px;
     cursor: pointer;
 
     &.collapsed-show-title {

src/components/Application/src/AppProvider.vue

@@ -0,0 +1,24 @@
+<template>
+  <slot />
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, toRefs } from 'vue';
+
+  import { createAppProviderContext } from './useAppContext';
+  export default defineComponent({
+    name: 'AppProvider',
+    inheritAttrs: false,
+    props: {
+      prefixCls: {
+        type: String as PropType<string>,
+        default: 'vben',
+      },
+    },
+    setup(props) {
+      const { prefixCls } = toRefs(props);
+      createAppProviderContext({ prefixCls });
+      return {};
+    },
+  });
+</script>

src/components/Application/src/useAppContext.ts

@@ -0,0 +1,16 @@
+import { InjectionKey, Ref } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface AppProviderContextProps {
+  prefixCls: Ref<string>;
+}
+
+const key: InjectionKey<AppProviderContextProps> = Symbol();
+
+export function createAppProviderContext(context: AppProviderContextProps) {
+  return createContext<AppProviderContextProps>(context, key);
+}
+
+export function useAppProviderContext() {
+  return useContext<AppProviderContextProps>(key);
+}

src/components/Authority/index.ts

@@ -1,5 +1,7 @@
-import AuthorityLib from './src/index.vue';
+import Authority from './src/index.vue';
 
 import { withInstall } from '../util';
 
-export const Authority = withInstall(AuthorityLib);
+withInstall(Authority);
+
+export { Authority };

src/components/Basic/index.ts

@@ -1,9 +1,9 @@
-import BasicArrowLib from './src/BasicArrow.vue';
-import BasicHelpLib from './src/BasicHelp.vue';
-import BasicTitleLib from './src/BasicTitle.vue';
+import BasicArrow from './src/BasicArrow.vue';
+import BasicHelp from './src/BasicHelp.vue';
+import BasicTitle from './src/BasicTitle.vue';
 
 import { withInstall } from '../util';
 
-export const BasicArrow = withInstall(BasicArrowLib);
-export const BasicHelp = withInstall(BasicHelpLib);
-export const BasicTitle = withInstall(BasicTitleLib);
+withInstall(BasicArrow, BasicHelp, BasicTitle);
+
+export { BasicArrow, BasicHelp, BasicTitle };

src/components/Button/index.ts

@@ -1,4 +1,6 @@
-import ButtonLib from './src/BasicButton.vue';
+import Button from './src/BasicButton.vue';
 import { withInstall } from '../util';
 
-export const Button = withInstall(ButtonLib);
+withInstall(Button);
+
+export { Button };

src/components/ClickOutSide/index.ts

@@ -1,4 +1,6 @@
-import ClickOutSideLib from './src/index.vue';
+import ClickOutSide from './src/index.vue';
 import { withInstall } from '../util';
 
-export const ClickOutSide = withInstall(ClickOutSideLib);
+withInstall(ClickOutSide);
+
+export { ClickOutSide };

src/components/Container/index.ts

@@ -1,10 +1,10 @@
-import ScrollContainerLib from './src/ScrollContainer.vue';
-import CollapseContainerLib from './src/collapse/CollapseContainer.vue';
-import LazyContainerLib from './src/LazyContainer.vue';
+import ScrollContainer from './src/ScrollContainer.vue';
+import CollapseContainer from './src/collapse/CollapseContainer.vue';
+import LazyContainer from './src/LazyContainer.vue';
 import { withInstall } from '../util';
 
+withInstall(ScrollContainer, CollapseContainer, LazyContainer);
+
 export * from './src/types';
 
-export const ScrollContainer = withInstall(ScrollContainerLib);
-export const CollapseContainer = withInstall(CollapseContainerLib);
-export const LazyContainer = withInstall(LazyContainerLib);
+export { ScrollContainer, CollapseContainer, LazyContainer };

src/components/CountTo/index.ts

@@ -1,6 +1,7 @@
 // Transform vue-count-to to support vue3 version
 
-import CountToLib from './src/index.vue';
+import CountTo from './src/index.vue';
 import { withInstall } from '../util';
 
-export const CountTo = withInstall(CountToLib);
+withInstall(CountTo);
+export { CountTo };

src/components/Description/index.ts

@@ -1,8 +1,9 @@
-import DescriptionLib from './src/index';
+import Description from './src/index';
 
 import { withInstall } from '../util';
 
+withInstall(Description);
+
 export * from './src/types';
 export { useDescription } from './src/useDescription';
-
-export const Description = withInstall(DescriptionLib);
+export { Description };

src/components/Drawer/index.ts

@@ -1,6 +1,7 @@
-import BasicDrawerLib from './src/BasicDrawer';
+import BasicDrawer from './src/BasicDrawer';
 import { withInstall } from '../util';
 
+withInstall(BasicDrawer);
 export * from './src/types';
 export { useDrawer, useDrawerInner } from './src/useDrawer';
-export const BasicDrawer = withInstall(BasicDrawerLib);
+export { BasicDrawer };

src/components/Dropdown/index.ts

@@ -1,6 +1,7 @@
-import DropdownLib from './src/Dropdown';
+import Dropdown from './src/Dropdown';
 import { withInstall } from '../util';
 
+withInstall(Dropdown);
 export * from './src/types';
 
-export const Dropdown = withInstall(DropdownLib);
+export { Dropdown };

src/components/Excel/index.ts

@@ -1,11 +1,12 @@
-import ImportExcelLib from './src/ImportExcel.vue';
-import ExportExcelModelLib from './src/ExportExcelModel.vue';
+import ImportExcel from './src/ImportExcel.vue';
+import ExportExcelModel from './src/ExportExcelModel.vue';
 
 import { withInstall } from '../util';
 
+withInstall(ImportExcel, ExportExcelModel);
+
 export * from './src/types';
 
 export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
 
-export const ImportExcel = withInstall(ImportExcelLib);
-export const ExportExcelModel = withInstall(ExportExcelModelLib);
+export { ImportExcel, ExportExcelModel };

src/components/Form/index.ts

@@ -1,10 +1,12 @@
-import BasicFormLib from './src/BasicForm.vue';
+import BasicForm from './src/BasicForm.vue';
 import { withInstall } from '../util';
 
+withInstall(BasicForm);
+
 export * from './src/types/form';
 export * from './src/types/formItem';
 
 export { useComponentRegister } from './src/hooks/useComponentRegister';
 export { useForm } from './src/hooks/useForm';
 
-export const BasicForm = withInstall(BasicFormLib);
+export { BasicForm };

src/components/Loading/index.ts

@@ -1,8 +1,9 @@
 import './src/indicator';
-import LoadingLib from './src/index.vue';
+import Loading from './src/index.vue';
 import { withInstall } from '../util';
 
+withInstall(Loading);
 export { useLoading } from './src/useLoading';
 export { createLoading } from './src/createLoading';
 
-export const Loading = withInstall(LoadingLib);
+export { Loading };

src/components/Markdown/index.ts

@@ -1,7 +1,9 @@
-import MarkDownLib from './src/index.vue';
+import MarkDown from './src/index.vue';
 
 import { withInstall } from '../util';
 
+withInstall(MarkDown);
+
 export * from './src/types';
 
-export const MarkDown = withInstall(MarkDownLib);
+export { MarkDown };

src/components/Menu/index.ts

@@ -1,4 +1,5 @@
-import BasicMenuLib from './src/BasicMenu';
+import BasicMenu from './src/BasicMenu';
 import { withInstall } from '../util';
 
-export const BasicMenu = withInstall(BasicMenuLib);
+withInstall(BasicMenu);
+export { BasicMenu };