@uzum-tech/ui 1.3.1 → 1.4.0

package/lib/upload/src/UploadFileList.js

@@ -18,8 +18,8 @@ exports.default = (0, vue_1.defineComponent)({
             (0, _utils_1.throwError)('upload-file-list', '`u-upload-file-list` must be placed inside `u-upload`.');
         }
         const { abstractRef, mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListStyleRef, cssVarsRef, themeClassRef, maxReachedRef, showTriggerRef, imageGroupPropsRef } = UUpload;
-        const isImageCardTypeRef = (0, vue_1.computed)(() => listTypeRef.value === 'image-card');
-        const renderFileList = () => mergedFileListRef.value.map((file) => ((0, vue_1.h)(UploadFile_1.default, { clsPrefix: mergedClsPrefixRef.value, key: file.id, file: file, listType: listTypeRef.value })));
+        const isImageCardTypeRef = (0, vue_1.computed)(() => listTypeRef.value === 'image-card' || listTypeRef.value === 'image');
+        const renderFileList = () => mergedFileListRef.value.map((file) => ((0, vue_1.h)(UploadFile_1.default, { clsPrefix: mergedClsPrefixRef.value, key: file.id, file: file, listType: listTypeRef.value }, slots)));
         const renderUploadFileList = () => isImageCardTypeRef.value ? ((0, vue_1.h)(image_1.UImageGroup, Object.assign({}, imageGroupPropsRef.value), { default: renderFileList })) : ((0, vue_1.h)(_internal_1.UFadeInExpandTransition, { group: true }, {
             default: renderFileList
         }));

package/lib/upload/src/UploadProgress.d.ts

@@ -6,123 +6,12 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     status: {
-        type: PropType<"error" | "info" | "success">;
+        type: PropType<"info" | "error" | "success">;
         required: true;
     };
 }, {
     mergedTheme: import("vue").Ref<{
-        common: {
-            scrollbarColor: string;
-            scrollbarColorHover: string;
-            scrollbarWidth: string;
-            scrollbarHeight: string;
-            scrollbarBorderRadius: string;
-            opacityDisabled: string;
-            brandPrimary50: string;
-            brandPrimary100: string;
-            brandPrimary200: string;
-            brandPrimary300: string;
-            brandPrimary400: string;
-            brandPrimary500: string;
-            brandPrimary550: string;
-            brandPrimary600: string;
-            brandSecondary500: string;
-            brandSecondary300: string;
-            brandSecondary600: string;
-            brandTertiary500: string;
-            brandTertiary300: string;
-            brandTertiary600: string;
-            brandQuaternary500: string;
-            brandQuaternary300: string;
-            brandQuaternary600: string;
-            brandQuinary500: string;
-            brandQuinary300: string;
-            brandQuinary600: string;
-            brandQuinary100: string;
-            surfacePrimary: string;
-            surfaceSecondary: string;
-            containerPrimary: string;
-            containerSecondary: string;
-            textPrimary: string;
-            textSecondary: string;
-            textTertiary: string;
-            textQuaternary: string;
-            textBrand: string;
-            elementsPrimary: string;
-            elementsSecondary: string;
-            elementsTertiary: string;
-            elementsQuaternary: string;
-            elementsQuinary: string;
-            elementsDarkQuinary: string;
-            elementsSenary: string;
-            elementsOnContainer: string;
-            transparencyPrimary: string;
-            transparencySecondary: string;
-            transparencyTertiary: string;
-            transparencyQuinary: string;
-            transparencyModal: string;
-            staticBlack: string;
-            staticDarkGrey: string;
-            staticWhite: string;
-            staticRed: string;
-            staticOrange: string;
-            staticGreen: string;
-            staticDeepBlue: string;
-            staticErrorAccent: string;
-            shadowDepth2: string;
-            shadowDepth: string;
-            fontFamily: string;
-            fontFamilyMono: string;
-            cubicBezierEaseInOut: string;
-            cubicBezierEaseOut: string;
-            cubicBezierEaseIn: string;
-            borderRadiusLarge: string;
-            borderRadius: string;
-            borderRadiusMedium: string;
-            borderRadiusSmall: string;
-            borderRadiusTiny: string;
-            heightMini: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            heightHuge: string;
-            fontDisplayLarge: string;
-            fontDisplaySmall: string;
-            fontHeadingLarge: string;
-            fontHeadingMedium: string;
-            fontHeadingSmall: string;
-            fontTitleLarge: string;
-            fontTitleMedium: string;
-            fontTitleSmall: string;
-            fontBodyLarge: string;
-            fontBodyMedium: string;
-            fontBodySmall: string;
-            lineHeightDisplayLarge: string;
-            lineHeightDisplaySmall: string;
-            lineHeightHeadingLarge: string;
-            lineHeightHeadingMedium: string;
-            lineHeightHeadingSmall: string;
-            lineHeightTitleLarge: string;
-            lineHeightTitleMedium: string;
-            lineHeightTitleSmall: string;
-            lineHeightBodyLarge: string;
-            lineHeightBodyMedium: string;
-            lineHeightBodySmall: string;
-            fontWeight: string;
-            fontWeightStrong: string;
-            fontWeightBold: string;
-            iconSmall: string;
-            iconMedium: string;
-            iconLarge: string;
-            iconHuge: string;
-            closeSmall: string;
-            closeMedium: string;
-            closeLarge: string;
-            closeHuge: string;
-            closeBorderRadius: string;
-            name: "common";
-        };
+        common: import("../..").ThemeCommonVars;
         self: {
             baseColor: string;
             fontSize: string;
@@ -145,6 +34,12 @@ declare const _default: import("vue").DefineComponent<{
             draggerTitleColor: string;
             draggerTextColor: string;
             labelColor: string;
+            widthSmall: string;
+            widthMedium: string;
+            widthLarge: string;
+            containerSecondary: string;
+            brandPrimary300: string;
+            elementsQuaternary: string;
         };
         peers: {
             Button: import("../../_mixins").Theme<"Button", {
@@ -402,7 +297,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     status: {
-        type: PropType<"error" | "info" | "success">;
+        type: PropType<"info" | "error" | "success">;
         required: true;
     };
 }>>, {

package/lib/upload/src/UploadTrigger.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
-const icons_1 = require("../../_internal/icons");
-const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const interface_1 = require("./interface");
 const utils_1 = require("./utils");
 const UploadDragger_1 = __importDefault(require("./UploadDragger"));
+const _internal_1 = require("../../_internal");
+const icons_1 = require("./icons");
 exports.default = (0, vue_1.defineComponent)({
     name: 'UploadTrigger',
     props: {
@@ -20,7 +20,7 @@ exports.default = (0, vue_1.defineComponent)({
         if (!UUpload) {
             (0, _utils_1.throwError)('upload-trigger', '`u-upload-trigger` must be placed inside `u-upload`.');
         }
-        const { mergedClsPrefixRef, mergedDisabledRef, maxReachedRef, listTypeRef, dragOverRef, openFileDialog, draggerInsideRef, handleFileAddition, mergedDirectoryDndRef, triggerStyleRef } = UUpload;
+        const { mergedClsPrefixRef, mergedDisabledRef, maxReachedRef, listTypeRef, dragOverRef, openFileDialog, draggerInsideRef, handleFileAddition, mergedDirectoryDndRef, triggerStyleRef, iconRef, noIconRef, titleRef, subtitleRef, localeRef } = UUpload;
         const isImageCardTypeRef = (0, vue_1.computed)(() => listTypeRef.value === 'image-card');
         function handleTriggerClick() {
             if (mergedDisabledRef.value || maxReachedRef.value)
@@ -65,6 +65,7 @@ exports.default = (0, vue_1.defineComponent)({
         return () => {
             var _a;
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
+            const rootClass = `${mergedClsPrefix}-upload-dragger-inner`;
             return props.abstract ? ((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots, {
                 handleClick: handleTriggerClick,
                 handleDrop: handleTriggerDrop,
@@ -78,9 +79,21 @@ exports.default = (0, vue_1.defineComponent)({
                     isImageCardTypeRef.value &&
                         `${mergedClsPrefix}-upload-trigger--image-card`
                 ], style: triggerStyleRef.value, onClick: handleTriggerClick, onDrop: handleTriggerDrop, onDragover: handleTriggerDragOver, onDragenter: handleTriggerDragEnter, onDragleave: handleTriggerDragLeave }, isImageCardTypeRef.value ? ((0, vue_1.h)(UploadDragger_1.default, null, {
-                default: () => (0, _utils_1.resolveSlot)(slots.default, () => [
-                    (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.AddIcon, null) })
-                ])
+                default: () => {
+                    var _a, _b;
+                    return ((0, vue_1.h)("div", { class: [rootClass, `${rootClass}--vertical`] },
+                        !noIconRef.value && ((0, vue_1.h)("div", { class: `${rootClass}__icon` },
+                            (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                default: () => iconRef.value ? iconRef.value : icons_1.uploadIcon
+                            }))),
+                        (0, vue_1.h)("div", { class: `${rootClass}__content` },
+                            (0, vue_1.h)("p", { class: `${rootClass}__title` }, titleRef.value ||
+                                ((_a = slots.title) === null || _a === void 0 ? void 0 : _a.call(slots)) ||
+                                localeRef.value.title),
+                            (0, vue_1.h)("p", { class: `${rootClass}__subtitle` }, subtitleRef.value ||
+                                ((_b = slots.subtitle) === null || _b === void 0 ? void 0 : _b.call(slots)) ||
+                                localeRef.value.subtitle))));
+                }
             })) : (slots)));
         };
     }

package/lib/upload/src/interface.d.ts

@@ -69,6 +69,16 @@ export interface UploadInjection {
     mergedDisabledRef: Ref<boolean>;
     maxReachedRef: Ref<boolean>;
     abstractRef: Ref<boolean>;
+    iconRef: Ref<VNodeChild | undefined>;
+    noIconRef: Ref<boolean>;
+    titleRef: Ref<string | undefined>;
+    subtitleRef: Ref<string | undefined>;
+    verticalRef: Ref<boolean>;
+    localeRef: Ref<{
+        title: string;
+        subtitle: string;
+        uploading: string;
+    }>;
     imageGroupPropsRef: Ref<ImageGroupProps | undefined>;
     cssVarsRef: undefined | Ref<CSSProperties>;
     themeClassRef: undefined | Ref<string>;
@@ -125,3 +135,35 @@ export interface FileAndEntry {
     entry: FileSystemFileEntry | null;
     source: 'dnd' | 'input';
 }
+type CreateXhrHandlersType = (inst: UploadInternalInst, file: SettledFileInfo, xhr: XMLHttpRequest) => XhrHandlers;
+type CustomSubmitImplType = (options: {
+    inst: Omit<UploadInternalInst, 'isErrorState'>;
+    data?: FuncOrRecordOrUndef<string | Blob>;
+    headers?: FuncOrRecordOrUndef;
+    action?: string;
+    withCredentials?: boolean;
+    file: SettledFileInfo;
+    customRequest: CustomRequest;
+}) => void;
+type RegisterHandlerType = (inst: UploadInternalInst, file: SettledFileInfo, request: XMLHttpRequest) => void;
+type UnwrapFunctionValueType = <T>(data: FuncOrRecordOrUndef<T>, file: SettledFileInfo) => Record<string, T>;
+type SetHeadersType = (request: XMLHttpRequest, headers: FuncOrRecordOrUndef, file: SettledFileInfo) => void;
+type AppendDataType = (formData: FormData, data: FuncOrRecordOrUndef<string | Blob>, file: SettledFileInfo) => void;
+type SubmitImplType = (inst: UploadInternalInst, fieldName: string, file: SettledFileInfo, options: {
+    method: string;
+    action?: string;
+    withCredentials: boolean;
+    responseType: XMLHttpRequestResponseType;
+    headers: FuncOrRecordOrUndef;
+    data: FuncOrRecordOrUndef<string | Blob>;
+}) => void;
+export interface UseUploadReturn {
+    createXhrHandlers: CreateXhrHandlersType;
+    customSubmitImpl: CustomSubmitImplType;
+    registerHandler: RegisterHandlerType;
+    unwrapFunctionValue: UnwrapFunctionValueType;
+    setHeaders: SetHeadersType;
+    appendData: AppendDataType;
+    submitImpl: SubmitImplType;
+}
+export {};

package/lib/upload/src/styles/index.cssr.js

@@ -18,7 +18,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
 })]), (0, cssr_1.cB)('upload-dragger', `
  cursor: pointer;
  box-sizing: border-box;
- width: 100%;
+ width: var(--u-upload-dragger-width);
  text-align: center;
  border-radius: var(--u-border-radius);
  padding: 16px 20px;
@@ -36,7 +36,25 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
  `)]), (0, cssr_1.cB)('upload-dragger-inner', {
   display: 'flex',
   alignItems: 'center'
+}, [(0, cssr_1.cM)('vertical', {
+  flexDirection: 'column',
+  alignItems: 'center'
 }, [(0, cssr_1.cE)('content', {
+  textAlign: 'center'
+}), (0, cssr_1.cE)('icon', {
+  flexShrink: '0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  backgroundColor: 'transparent',
+  width: '24px',
+  height: '24px',
+  fontSize: '24px',
+  color: 'var(--u-dragger-icon-color)',
+  marginRight: '0px',
+  marginBottom: '8px'
+})]), (0, cssr_1.cE)('content', {
   textAlign: 'left'
 }), (0, cssr_1.cE)('title', {
   fontSize: '16px',
@@ -66,8 +84,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
  opacity: var(--u-item-disabled-opacity);
  cursor: not-allowed;
  `), (0, cssr_1.cM)('image-card', `
- width: 96px;
- height: 96px;
+ width: 238px;
+ min-height: 170px;
+ max-height: 210px;
  `, [(0, cssr_1.cB)('base-icon', `
  font-size: 24px;
  `), (0, cssr_1.cB)('upload-dragger', `
@@ -77,6 +96,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
  display: flex;
  align-items: center;
  justify-content: center;
+ padding: 0px 24px;
  `)]), (0, cssr_1.cM)('block', {
   display: 'block'
 })]), (0, cssr_1.cB)('upload-file-list', `
@@ -88,27 +108,36 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
  cursor: not-allowed;
  `, [(0, cssr_1.cB)('upload-file', 'cursor: not-allowed;')]), (0, cssr_1.cM)('grid', `
  display: grid;
- grid-template-columns: repeat(auto-fill, 96px);
+ grid-template-columns: repeat(auto-fill, 238px);
  grid-gap: 8px;
  margin-top: 0;
  `), (0, cssr_1.cB)('upload-file', `
  display: block;
  box-sizing: border-box;
  cursor: default;
- padding: 0px 12px 0 6px;
  transition: background-color .3s var(--u-bezier);
  border-radius: var(--u-border-radius);
  `, [(0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)(), (0, cssr_1.cB)('progress', [(0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
   foldPadding: true
-})]), (0, cssr_1.c)('&:hover', `
- background-color: var(--u-item-color-hover);
- `, [(0, cssr_1.cB)('upload-file-info', [(0, cssr_1.cE)('action', `
+})]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cM)('text-type', [(0, cssr_1.cB)('upload-file-info', [(0, cssr_1.cE)('preview', `
+ filter: blur(3px);
+ `), (0, cssr_1.cE)('action', `
  opacity: 1;
- `)])]), (0, cssr_1.cM)('image-type', `
- border-radius: var(--u-border-radius);
- text-decoration: underline;
- text-decoration-color: #0000;
- `, [(0, cssr_1.cB)('upload-file-info', `
+ z-index: 10;
+ `)])]), (0, cssr_1.cM)('image-card-type', [(0, cssr_1.cB)('upload-file-info', [(0, cssr_1.cE)('name', `
+ filter: blur(3px);
+ `), (0, cssr_1.cE)('action', `
+ opacity: 1;
+ z-index: 10;
+ `)])])]), (0, cssr_1.cM)('text-type', `
+ border: var(--u-item-border-image-card);
+ margin-bottom: 12px;
+ max-height: 90px;
+ `, [(0, cssr_1.cB)('progress', `
+ box-sizing: border-box;
+ padding-bottom: 6px;
+ margin-bottom: 6px;
+ `), (0, cssr_1.cB)('upload-file-info', `
  padding-top: 0px;
  padding-bottom: 0px;
  width: 100%;
@@ -116,31 +145,32 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
  display: flex;
  justify-content: space-between;
  align-items: center;
- padding: 6px 0;
  `, [(0, cssr_1.cB)('progress', `
  padding: 2px 0;
  margin-bottom: 0;
  `), (0, cssr_1.cE)('name', `
- padding: 0 8px;
+ padding: 0 16px;
  `), (0, cssr_1.cE)('thumbnail', `
- width: 48px;
- height: 48px;
- font-size: 28px;
- display: flex;
- justify-content: center;
- align-items: center;
+ width: 140px !important;
+ height: 100% !important;
+ border-radius: 0 !important;
+ margin: 0 !important;
+ border-top-right-radius: 0px !important;
+ border-top-left-radius: 16px !important;
+ border-bottom-right-radius: 0px !important;
+ border-bottom-left-radius: 16px !important;
  `, [(0, cssr_1.c)('img', `
  width: 100%;
- `)])])]), (0, cssr_1.cM)('text-type', [(0, cssr_1.cB)('progress', `
- box-sizing: border-box;
- padding-bottom: 6px;
- margin-bottom: 6px;
- `)]), (0, cssr_1.cM)('image-card-type', `
+ `)]), (0, cssr_1.cE)('preview', `
+ overflow: hidden;
+ margin-top: 16px;
+ max-height: 70px;
+ `)])]), (0, cssr_1.cM)('image-card-type', `
  position: relative;
- width: 96px;
- height: 96px;
+ width: 238px;
+ min-height: 170px;
+ max-height: 210px;
  border: var(--u-item-border-image-card);
- border-radius: var(--u-border-radius);
  padding: 0;
  display: flex;
  align-items: center;
@@ -196,6 +226,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
  padding-bottom: 6px;
  display: flex;
  flex-wrap: nowrap;
+ `, [(0, cssr_1.cM)('vertical', `
+ flex-direction: column;
  `, [(0, cssr_1.cE)('thumbnail', `
  font-size: 24px;
  opacity: 1;
@@ -205,6 +237,63 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
  margin-right: 2px;
  vertical-align: middle;
  transition: color .3s var(--u-bezier);
+ `), (0, cssr_1.cM)('icon', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'var(--u-dragger-icon-bg-color)',
+  borderRadius: '0',
+  marginRight: '0px',
+  width: '100%',
+  height: '118px'
+})])]), (0, cssr_1.cE)('preview', {
+  position: 'relative',
+  marginTop: '16px',
+  overflow: 'hidden',
+  backgroundColor: '#fff',
+  width: '96px',
+  height: '113px',
+  borderTopRightRadius: '12px',
+  borderTopLeftRadius: '12px'
+}, [(0, cssr_1.cB)('upload-file-info__preview--ext', {
+  fontSize: '12px',
+  color: 'var(--u-upload-preview-color)',
+  position: 'absolute',
+  top: '5px',
+  left: '12px'
+}), (0, cssr_1.cB)('upload-file-info__preview--content', {
+  position: 'absolute',
+  top: '50px',
+  left: '12px',
+  width: '72px',
+  borderRadius: '4px',
+  height: '6px',
+  backgroundColor: 'var(--u-upload-info-bg-color)'
+}, [(0, cssr_1.c)('&::before', `
+ content: '';
+ position: absolute;
+ top: -10px;
+ width: 72px;
+ border-radius: 4px;
+ height: 6px;
+ background-color: var(--u-upload-info-bg-color);
+ `), (0, cssr_1.c)('&::after', `
+ content: '';
+ position: absolute;
+ top: 10px;
+ width: 39px;
+ border-radius: 4px;
+ height: 6px;
+ background-color: var(--u-upload-info-bg-color);
+ `)])]), (0, cssr_1.cE)('thumbnail', `
+ font-size: 24px;
+ opacity: 1;
+ transition: opacity .2s var(--u-bezier);
+ color: var(--u-item-icon-color);
+ `, [(0, cssr_1.cB)('base-icon', `
+ margin-right: 2px;
+ vertical-align: middle;
+ transition: color .3s var(--u-bezier);
  `), (0, cssr_1.cM)('icon', {
   display: 'flex',
   alignItems: 'center',
@@ -218,18 +307,25 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
  padding-top: inherit;
  padding-bottom: inherit;
  position: absolute;
+ left: 0;
  right: 0;
  top: 0;
  bottom: 0;
- width: 80px;
  display: flex;
  align-items: center;
  transition: opacity .2s var(--u-bezier);
- justify-content: flex-end;
+ justify-content: center;
  opacity: 0;
- `, [(0, cssr_1.cB)('button', [(0, cssr_1.c)('&:not(:last-child)', {
-  marginRight: '4px'
-}), (0, cssr_1.cB)('base-icon', [(0, cssr_1.c)('svg', [(0, icon_switch_cssr_1.iconSwitchTransition)()])])]), (0, cssr_1.cM)('image-type', `
+ `, [(0, cssr_1.cB)('button', `
+ background-color: #fff;
+ width: 44px;
+ height: 44px;
+ border-radius: 200px;
+ box-shadow: 0px 2px 4px 0px rgba(68, 83, 113, 0.05);
+ box-shadow: 0px 0px 8px 0px rgba(68, 83, 113, 0.1);
+ `, [(0, cssr_1.c)('&:not(:last-child)', `
+ margin-right: 4px;
+ `), (0, cssr_1.cB)('base-icon', [(0, cssr_1.c)('svg', [(0, icon_switch_cssr_1.iconSwitchTransition)()])])]), (0, cssr_1.cM)('image-type', `
  position: relative;
  max-width: 80px;
  width: auto;
@@ -251,6 +347,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
  display: flex;
  justify-content: center;
  text-overflow: ellipsis;
+ text-wrap: nowrap;
+ padding: 16px;
  overflow: hidden;
  flex-direction: column;
  text-decoration-color: #0000;
@@ -261,9 +359,36 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('upload', 'width: var(--u-upload
  `, [(0, cssr_1.c)('a', `
  color: inherit;
  text-decoration: underline;
+ `), (0, cssr_1.c)(':nth-child(1)', `
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-wrap: nowrap;
+ `), (0, cssr_1.c)(':nth-child(2)', `
+ font-size: 12px;
+ color: #83888B
+ `), (0, cssr_1.c)(':nth-child(3)', `
+ font-size: 12px;
+ color: var(--u-item-text-color-success);
  `)])])])]), (0, cssr_1.cB)('upload-file-input', `
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
+ `), (0, cssr_1.cB)('upload-file-overlay', `
+ position: absolute;
+ top: 0; 
+ left: 0;
+ width: 100%; 
+ height: 100%;
+ background-color: var(--u-upload-info-bg-color);
+ z-index: 10;
+ border-radius: 16px;
+ `), (0, cssr_1.cB)('upload-file-loader--default', [(0, cssr_1.cB)('spin-body', `
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ `), (0, cssr_1.cB)('spin-description', `
+ margin-top: 0px
+ `)]), (0, cssr_1.c)('.u-upload-file-info__action.u-upload-file--text-type', `
+ width: 140px !important;
  `)]);

package/lib/upload/src/useUpload.d.ts

@@ -0,0 +1,2 @@
+import { UseUploadReturn } from './interface';
+export declare function useUpload(): UseUploadReturn;