@smartos-lib/components 1.7.0 → 1.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@smartos-lib/components",
   "type": "module",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "packageManager": "pnpm@8.14.3",
   "author": "Wei Zhang <https://github.com/Zhang-Wei-666>",
   "devDependencies": {

package/src/composables/useNaiveTheme.ts

@@ -1,58 +1,5 @@
-import type { GlobalThemeOverrides } from 'naive-ui';
 import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
-import { deepMerge } from 'mixte';
-import { colors, fontFamily } from '@/shared/unocss.theme';
-
-/** 通用主题变量覆盖 */
-export const commonOverrides: GlobalThemeOverrides = {
-  common: {
-    // 默认字体
-    fontFamily: fontFamily.sans,
-    // 等宽字体
-    fontFamilyMono: fontFamily.mono,
-
-    // Primary 颜色
-    primaryColor: colors.primary,
-    primaryColorHover: colors['primary-hover'],
-    primaryColorPressed: colors['primary-active'],
-    primaryColorSuppl: colors.primary,
-    // Info 颜色
-    infoColor: colors.info,
-    infoColorHover: colors['info-hover'],
-    infoColorPressed: colors['info-active'],
-    infoColorSuppl: colors.info,
-    // Success 颜色
-    successColor: colors.success,
-    successColorHover: colors['success-hover'],
-    successColorPressed: colors['success-active'],
-    successColorSuppl: colors.success,
-    // Warning 颜色
-    warningColor: colors.warning,
-    warningColorHover: colors['warning-hover'],
-    warningColorPressed: colors['warning-active'],
-    warningColorSuppl: colors.warning,
-    // Error 颜色
-    errorColor: colors.error,
-    errorColorHover: colors['error-hover'],
-    errorColorPressed: colors['error-active'],
-    errorColorSuppl: colors.error,
-  },
-};
-
-/** 亮色主题变量覆盖 */
-export const lightThemeOverrides: GlobalThemeOverrides = deepMerge({}, commonOverrides, {
-
-});
-/** 深色主题变量覆盖 */
-export const darkThemeOverrides: GlobalThemeOverrides = deepMerge({}, commonOverrides, {
-  Button: {
-    textColorPrimary: '#FFF',
-    textColorHoverPrimary: '#FFF',
-    textColorPressedPrimary: '#FFF',
-    textColorFocusPrimary: '#FFF',
-    textColorDisabledPrimary: '#FFF',
-  },
-});
+import { darkThemeOverrides, lightThemeOverrides } from '@/shared/naiveThemeOverrides';
 
 export const useNaiveTheme = createSharedComposable(() => {
   const themeStore = useThemeStore();

package/src/shared/naiveThemeOverrides.ts

@@ -0,0 +1,54 @@
+import type { GlobalThemeOverrides } from 'naive-ui';
+import { deepMerge } from 'mixte';
+import { colors, fontFamily } from './unocss.theme';
+
+/** 通用主题变量覆盖 */
+export const commonOverrides: GlobalThemeOverrides = {
+  common: {
+    // 默认字体
+    fontFamily: fontFamily.sans,
+    // 等宽字体
+    fontFamilyMono: fontFamily.mono,
+
+    // Primary 颜色
+    primaryColor: colors.primary,
+    primaryColorHover: colors['primary-hover'],
+    primaryColorPressed: colors['primary-active'],
+    primaryColorSuppl: colors.primary,
+    // Info 颜色
+    infoColor: colors.info,
+    infoColorHover: colors['info-hover'],
+    infoColorPressed: colors['info-active'],
+    infoColorSuppl: colors.info,
+    // Success 颜色
+    successColor: colors.success,
+    successColorHover: colors['success-hover'],
+    successColorPressed: colors['success-active'],
+    successColorSuppl: colors.success,
+    // Warning 颜色
+    warningColor: colors.warning,
+    warningColorHover: colors['warning-hover'],
+    warningColorPressed: colors['warning-active'],
+    warningColorSuppl: colors.warning,
+    // Error 颜色
+    errorColor: colors.error,
+    errorColorHover: colors['error-hover'],
+    errorColorPressed: colors['error-active'],
+    errorColorSuppl: colors.error,
+  },
+};
+
+/** 亮色主题变量覆盖 */
+export const lightThemeOverrides: GlobalThemeOverrides = deepMerge({}, commonOverrides, {
+
+});
+/** 深色主题变量覆盖 */
+export const darkThemeOverrides: GlobalThemeOverrides = deepMerge({}, commonOverrides, {
+  Button: {
+    textColorPrimary: '#FFF',
+    textColorHoverPrimary: '#FFF',
+    textColorPressedPrimary: '#FFF',
+    textColorFocusPrimary: '#FFF',
+    textColorDisabledPrimary: '#FFF',
+  },
+});

package/src/web-components/smart-upload/index.ts

@@ -1,5 +1,38 @@
+import type { NUpload, UploadFileInfo } from 'naive-ui';
+import { defineCustomElement } from 'vue';
 import VueComponent from './index.vue';
 import { tag } from './info';
 import { defineCustomElements } from '@/utils/defineCustomElements';
+import { getCustomElementExposed } from '@/utils/callCustomElementExposed';
 
-defineCustomElements(tag, VueComponent);
+type UploadRef = InstanceType<typeof NUpload>;
+
+// 组件转为 Vue 自定义元素
+const VueCustomElement = defineCustomElement(VueComponent);
+
+// 暴露组件属性/方法
+Object.assign(VueCustomElement.prototype, {
+  getUploadRef() {
+    return (getCustomElementExposed(this, 'uploadRef') as Ref<UploadRef>).value;
+  },
+  getFileList() {
+    return (getCustomElementExposed(this, 'fileList') as Ref<UploadFileInfo[]>).value;
+  },
+  submit() {
+    return this.getUploadRef().submit();
+  },
+  clear() {
+    return this.getUploadRef().clear();
+  },
+});
+
+// 注册组件
+defineCustomElements(tag, VueCustomElement);
+
+// 暴露组件类型
+export type SmartUploadElement = typeof VueCustomElement & {
+  getUploadRef: () => UploadRef
+  getFileList: () => UploadFileInfo[]
+  submit: UploadRef['submit']
+  clear: UploadRef['clear']
+};

package/src/web-components/smart-upload/index.vue

@@ -1,7 +1,8 @@
 <template>
   <NConfigProvider :cls-prefix="classPrefix" :theme-overrides="commonOverrides" :locale="zhCN" abstract>
     <NUpload
-      v-bind="props"
+      ref="uploadRef"
+      v-bind="bindProps"
       v-model:file-list="fileList"
       :custom-request="customRequest"
       @remove="onRemoved"
@@ -19,14 +20,21 @@
   import { NButton, NConfigProvider, NUpload, zhCN } from 'naive-ui';
   import { getConfigProvider } from '@smartos-lib/core';
   import type { Props } from './types';
+  import { commonOverrides } from '@/shared/naiveThemeOverrides';
 
   const props = defineProps<Props>();
   const list = defineModel<UploadFieldValueItem[]>('fileList', {
     default: () => [],
   });
 
+  const uploadRef = ref<InstanceType<typeof NUpload>>();
+
   const { classPrefix } = useSmart();
 
+  const bindProps = reactiveOmit(props, [
+    'beforeUpload',
+  ]);
+
   /** 内部维护的文件列表 */
   const fileList = ref<UploadFileInfo[]>(
     list.value.map(({ fileName: url }) => ({ id: url, name: url, url, status: 'finished' })),
@@ -35,11 +43,12 @@
   /** 自定义上传 */
   function customRequest({ file, onFinish, onError, onProgress }: UploadCustomRequestOptions) {
     const originFile = file.file as File;
+    const beforeUpload = props.beforeUpload ?? (c => c);
 
     const form = new FormData();
     form.set('file', originFile);
 
-    getConfigProvider('request')!({
+    const config = beforeUpload({
       method: 'post',
       url: '/admin/sys-file/upload',
       data: form,
@@ -49,14 +58,21 @@
       onUploadProgress({ loaded, total }) {
         onProgress({ percent: total ? Math.ceil((loaded / total) * 100) : 0 });
       },
-    })
+    });
+
+    getConfigProvider('request')!(config)
       .then((res) => {
         const data = res.data.data;
 
         file.url = data.url;
+        file.status = 'finished';
         onFinish();
 
         nextTick(() => {
+          // fix: 手动上传完成时, fileList 中的文件信息不会更新
+          if (!props.defaultUpload)
+            fileList.value.splice(fileList.value.findIndex(({ id }) => id === file.id), 1, file);
+
           list.value.includes(data.url) || list.value.push({ fileName: data.url, originalFileName: originFile.name });
         });
       })
@@ -98,4 +114,9 @@
         i++;
     }
   });
+
+  defineExpose({
+    uploadRef,
+    fileList,
+  });
 </script>

package/src/web-components/smart-upload/types.ts

@@ -1,6 +1,12 @@
+import type { AxiosRequestConfig } from 'axios';
 import type { UploadProps } from 'naive-ui';
 
 export interface Props {
+  /** 发起请求前的钩子, 用于修改请求配置 */
+  beforeUpload?: <T extends AxiosRequestConfig>(config: T) => T
+
+  /* ------------------ 以下为 NaiveUI 上传组件原有 Props ------------------ */
+
   accept?: UploadProps['accept']
   defaultFileList?: UploadProps['defaultFileList']
   defaultUpload?: UploadProps['defaultUpload']
@@ -25,4 +31,6 @@ export interface Props {
   showTrigger?: UploadProps['showTrigger']
   triggerClass?: UploadProps['triggerClass']
   triggerStyle?: UploadProps['triggerStyle']
+  onError?: UploadProps['onError']
+  onFinish?: UploadProps['onFinish']
 };

package/types/auto-imports.d.ts

@@ -8,7 +8,6 @@ declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const commonOverrides: typeof import('../src/composables/useNaiveTheme')['commonOverrides']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
@@ -29,7 +28,6 @@ declare global {
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
-  const darkThemeOverrides: typeof import('../src/composables/useNaiveTheme')['darkThemeOverrides']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const deepUnref: typeof import('@mixte/use')['deepUnref']
@@ -49,7 +47,6 @@ declare global {
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
-  const lightThemeOverrides: typeof import('../src/composables/useNaiveTheme')['lightThemeOverrides']
   const logicAnd: typeof import('@vueuse/math')['logicAnd']
   const logicNot: typeof import('@vueuse/math')['logicNot']
   const logicOr: typeof import('@vueuse/math')['logicOr']
@@ -336,7 +333,6 @@ declare module 'vue' {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
-    readonly commonOverrides: UnwrapRef<typeof import('../src/composables/useNaiveTheme')['commonOverrides']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
@@ -357,7 +353,6 @@ declare module 'vue' {
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
-    readonly darkThemeOverrides: UnwrapRef<typeof import('../src/composables/useNaiveTheme')['darkThemeOverrides']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly deepUnref: UnwrapRef<typeof import('@mixte/use')['deepUnref']>
@@ -377,7 +372,6 @@ declare module 'vue' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
-    readonly lightThemeOverrides: UnwrapRef<typeof import('../src/composables/useNaiveTheme')['lightThemeOverrides']>
     readonly logicAnd: UnwrapRef<typeof import('@vueuse/math')['logicAnd']>
     readonly logicNot: UnwrapRef<typeof import('@vueuse/math')['logicNot']>
     readonly logicOr: UnwrapRef<typeof import('@vueuse/math')['logicOr']>
@@ -657,7 +651,6 @@ declare module '@vue/runtime-core' {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
-    readonly commonOverrides: UnwrapRef<typeof import('../src/composables/useNaiveTheme')['commonOverrides']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
@@ -678,7 +671,6 @@ declare module '@vue/runtime-core' {
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
-    readonly darkThemeOverrides: UnwrapRef<typeof import('../src/composables/useNaiveTheme')['darkThemeOverrides']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly deepUnref: UnwrapRef<typeof import('@mixte/use')['deepUnref']>
@@ -698,7 +690,6 @@ declare module '@vue/runtime-core' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
-    readonly lightThemeOverrides: UnwrapRef<typeof import('../src/composables/useNaiveTheme')['lightThemeOverrides']>
     readonly logicAnd: UnwrapRef<typeof import('@vueuse/math')['logicAnd']>
     readonly logicNot: UnwrapRef<typeof import('@vueuse/math')['logicNot']>
     readonly logicOr: UnwrapRef<typeof import('@vueuse/math')['logicOr']>