niuma-ui 2.0.2 → 2.0.4

package/dist/components/upload/index.d.ts

@@ -1,3 +1,4 @@
 export { default as RsUpload } from './src/RsUpload.js';
-export type { RsUploadValidationError, RsUploadValidationRules } from './src/upload-utils';
+export type { RsUploadExpose, RsUploadInstance, } from './src/RsUpload.js';
+export type { RsUploadBeforeRemove, RsUploadBeforeSelect, RsUploadCapture, RsUploadListType, RsUploadValidationError, RsUploadValidationRules, RsUploadVariant, } from './src/upload-utils';
 export { createUploadFileFromContent, downloadUploadFile, formatFileSize, isFileAccepted, mergeUploadFiles, removeUploadFileAt, resolveUploadFileIcon, validateUploadFiles, } from './src/upload-utils';

package/dist/components/upload/src/RsUpload.css

@@ -1,20 +1,42 @@
 
-.rs-upload[data-v-9d8ef208] {
+.rs-upload[data-v-8c6abb48] {
+  position: relative;
   display: grid;
-  gap: var(--rs-space-md);
+  gap: var(--rs-upload-gap);
+}
+.rs-upload--ssm[data-v-8c6abb48] {
+  --rs-upload-dropzone-min-height: 5.5rem;
+  --rs-upload-icon-box: 2.25rem;
+  --rs-upload-card-size: 5rem;
+}
+.rs-upload--sm[data-v-8c6abb48] {
+  --rs-upload-dropzone-min-height: 7rem;
+  --rs-upload-icon-box: 2.5rem;
+  --rs-upload-card-size: 5.75rem;
+}
+.rs-upload--md[data-v-8c6abb48] {
+  --rs-upload-dropzone-min-height: var(--rs-upload-dropzone-min-height-md);
+  --rs-upload-icon-box: var(--rs-upload-icon-box-md);
+  --rs-upload-card-size: var(--rs-upload-card-size-md);
 }
-.rs-upload__dropzone[data-v-9d8ef208] {
+.rs-upload--lg[data-v-8c6abb48] {
+  --rs-upload-dropzone-min-height: 10rem;
+  --rs-upload-icon-box: 3.5rem;
+  --rs-upload-card-size: 7.5rem;
+}
+.rs-upload__dropzone[data-v-8c6abb48] {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--rs-space-md);
-  min-height: 8.5rem;
-  padding: var(--rs-space-xl) var(--rs-space-lg);
-  border: 1px dashed var(--rs-border);
-  border-radius: var(--rs-radius);
-  background: color-mix(in srgb, var(--rs-surface) 82%, var(--rs-bg));
+  min-height: var(--rs-upload-dropzone-min-height);
+  padding-block: var(--rs-space-xl);
+  padding-inline: var(--rs-space-lg);
+  border: 1px dashed var(--rs-upload-border);
+  border-radius: var(--rs-upload-radius);
+  background: var(--rs-upload-bg);
   cursor: pointer;
   text-align: center;
   transition:
@@ -22,33 +44,42 @@
     background var(--rs-transition-fast),
     box-shadow var(--rs-transition-fast);
 }
-.rs-upload__dropzone[data-v-9d8ef208]:hover:not(.rs-upload__dropzone--disabled),
-.rs-upload__dropzone--dragging[data-v-9d8ef208]:not(.rs-upload__dropzone--disabled) {
-  border-color: color-mix(in srgb, var(--rs-primary) 55%, var(--rs-border));
-  background: color-mix(in srgb, var(--rs-primary) 6%, var(--rs-surface));
+.rs-upload__dropzone[data-v-8c6abb48]:hover:not(.rs-upload__dropzone--disabled),
+.rs-upload__dropzone--dragging[data-v-8c6abb48]:not(.rs-upload__dropzone--disabled) {
+  border-color: var(--rs-upload-border-active);
+  background: var(--rs-upload-bg-active);
 }
-.rs-upload__dropzone[data-v-9d8ef208]:focus-within:not(.rs-upload__dropzone--disabled) {
+.rs-upload__dropzone[data-v-8c6abb48]:focus-within:not(.rs-upload__dropzone--disabled) {
   border-color: var(--rs-focus-border, var(--rs-primary));
   box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-.rs-upload__dropzone--disabled[data-v-9d8ef208] {
-  opacity: 0.38;
+.rs-upload__dropzone--disabled[data-v-8c6abb48] {
+  opacity: var(--rs-upload-disabled-opacity);
   cursor: not-allowed;
 }
-.rs-upload__input[data-v-9d8ef208] {
+.rs-upload__dropzone--tile[data-v-8c6abb48] {
+  min-height: var(--rs-upload-card-size);
+  inline-size: var(--rs-upload-card-size);
+  padding-block: var(--rs-space-sm);
+  padding-inline: var(--rs-space-sm);
+}
+.rs-upload__input[data-v-8c6abb48] {
   position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: inherit;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
-.rs-upload__icon[data-v-9d8ef208] {
+.rs-upload__icon[data-v-8c6abb48] {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 3rem;
-  height: 3rem;
+  width: var(--rs-upload-icon-box);
+  height: var(--rs-upload-icon-box);
   border-radius: var(--rs-radius-full);
   border: 1px solid color-mix(in srgb, var(--rs-primary) 24%, var(--rs-border));
   background: var(--rs-primary-container);
@@ -58,39 +89,83 @@
     transform var(--rs-transition-fast),
     box-shadow var(--rs-transition-fast);
 }
-.rs-upload__dropzone:hover:not(.rs-upload__dropzone--disabled) .rs-upload__icon[data-v-9d8ef208],
-.rs-upload__dropzone--dragging:not(.rs-upload__dropzone--disabled) .rs-upload__icon[data-v-9d8ef208] {
+.rs-upload__dropzone:hover:not(.rs-upload__dropzone--disabled) .rs-upload__icon[data-v-8c6abb48],
+.rs-upload__dropzone--dragging:not(.rs-upload__dropzone--disabled) .rs-upload__icon[data-v-8c6abb48] {
   transform: translateY(-1px);
   box-shadow: var(--rs-shadow);
 }
-.rs-upload__text[data-v-9d8ef208] {
+.rs-upload__text[data-v-8c6abb48] {
   display: grid;
-  gap: 0.25rem;
-  max-width: 20rem;
+  gap: var(--rs-space-xs);
+  max-inline-size: 20rem;
 }
-.rs-upload__label[data-v-9d8ef208] {
-  color: var(--rs-text);
+.rs-upload__label[data-v-8c6abb48] {
+  color: var(--rs-text-primary);
   font-size: var(--rs-font-size-sm);
   font-weight: var(--rs-font-weight-semibold);
   line-height: var(--rs-line-height-tight);
 }
-.rs-upload__hint[data-v-9d8ef208] {
-  color: var(--rs-muted);
+.rs-upload__hint[data-v-8c6abb48] {
+  color: var(--rs-text-secondary);
   font-size: var(--rs-font-size-xs);
   line-height: var(--rs-line-height-normal);
 }
-.rs-upload__list[data-v-9d8ef208] {
+.rs-upload__trigger[data-v-8c6abb48] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rs-space-sm);
+  min-height: var(--rs-control-height-md);
+  padding-inline: var(--rs-space-md);
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-surface);
+  color: var(--rs-text-primary);
+  font-size: var(--rs-font-size-sm);
+  cursor: pointer;
+  transition:
+    border-color var(--rs-transition-fast),
+    background var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast);
+}
+.rs-upload--ssm .rs-upload__trigger[data-v-8c6abb48] {
+  min-height: var(--rs-control-height-ssm);
+}
+.rs-upload--sm .rs-upload__trigger[data-v-8c6abb48] {
+  min-height: var(--rs-control-height-sm);
+}
+.rs-upload--lg .rs-upload__trigger[data-v-8c6abb48] {
+  min-height: var(--rs-control-height-lg);
+}
+.rs-upload__trigger[data-v-8c6abb48]:hover:not(:disabled) {
+  border-color: var(--rs-upload-border-active);
+  background: var(--rs-upload-bg-active);
+}
+.rs-upload__trigger[data-v-8c6abb48]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-upload__trigger[data-v-8c6abb48]:disabled {
+  opacity: var(--rs-upload-disabled-opacity);
+  cursor: not-allowed;
+}
+.rs-upload__list[data-v-8c6abb48] {
   display: grid;
   gap: var(--rs-space-xs);
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.rs-upload__file[data-v-9d8ef208] {
+.rs-upload--picture-card .rs-upload__list[data-v-8c6abb48] {
+  grid-template-columns: repeat(auto-fill, minmax(var(--rs-upload-card-size), 1fr));
+  gap: var(--rs-space-sm);
+}
+.rs-upload__file[data-v-8c6abb48] {
   display: flex;
   align-items: center;
   gap: var(--rs-space-sm);
-  padding: var(--rs-space-sm) var(--rs-space-md);
+  padding-block: var(--rs-space-sm);
+  padding-inline: var(--rs-space-md);
   border: 1px solid var(--rs-border-subtle);
   border-radius: var(--rs-radius-sm);
   background: var(--rs-surface);
@@ -98,94 +173,167 @@
     border-color var(--rs-transition-fast),
     background var(--rs-transition-fast);
 }
-.rs-upload__file[data-v-9d8ef208]:hover {
+.rs-upload__file[data-v-8c6abb48]:hover {
   border-color: var(--rs-border);
   background: color-mix(in srgb, var(--rs-surface-hover) 35%, var(--rs-surface));
 }
-.rs-upload__file-icon[data-v-9d8ef208] {
+.rs-upload__file--card[data-v-8c6abb48] {
+  position: relative;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-end;
+  min-block-size: var(--rs-upload-card-size);
+  padding: 0;
+  overflow: hidden;
+}
+.rs-upload__file--add[data-v-8c6abb48] {
+  border-style: dashed;
+  background: transparent;
+}
+.rs-upload__file--add[data-v-8c6abb48]:hover {
+  background: transparent;
+}
+.rs-upload__file-icon[data-v-8c6abb48] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
+  width: var(--rs-upload-file-icon-size);
+  height: var(--rs-upload-file-icon-size);
   border-radius: var(--rs-radius-sm);
   border: 1px solid var(--rs-border-subtle);
   background: color-mix(in srgb, var(--rs-bg) 55%, var(--rs-surface));
-  color: var(--rs-muted);
+  color: var(--rs-text-secondary);
 }
-.rs-upload__file-icon--file-image[data-v-9d8ef208] {
-  color: var(--rs-info, #2563eb);
+.rs-upload__file-icon--file-image[data-v-8c6abb48],
+.rs-upload__file-icon--file-music[data-v-8c6abb48],
+.rs-upload__file-icon--file-video-camera[data-v-8c6abb48] {
+  color: var(--rs-info);
 }
-.rs-upload__file-icon--file-code[data-v-9d8ef208],
-.rs-upload__file-icon--file-braces[data-v-9d8ef208],
-.rs-upload__file-icon--file-terminal[data-v-9d8ef208] {
+.rs-upload__file-icon--file-code[data-v-8c6abb48],
+.rs-upload__file-icon--file-braces[data-v-8c6abb48],
+.rs-upload__file-icon--file-terminal[data-v-8c6abb48] {
   color: var(--rs-primary);
 }
-.rs-upload__file-icon--file-key[data-v-9d8ef208],
-.rs-upload__file-icon--key-round[data-v-9d8ef208],
-.rs-upload__file-icon--file-lock[data-v-9d8ef208] {
-  color: var(--rs-warning, #d97706);
+.rs-upload__file-icon--file-key[data-v-8c6abb48],
+.rs-upload__file-icon--key-round[data-v-8c6abb48],
+.rs-upload__file-icon--file-lock[data-v-8c6abb48] {
+  color: var(--rs-warning);
 }
-.rs-upload__file-icon--file-archive[data-v-9d8ef208] {
-  color: var(--rs-secondary, #7c3aed);
+.rs-upload__file-icon--file-archive[data-v-8c6abb48] {
+  color: var(--rs-primary);
 }
-.rs-upload__file-icon--file-spreadsheet[data-v-9d8ef208] {
-  color: var(--rs-success, #16a34a);
+.rs-upload__file-icon--file-spreadsheet[data-v-8c6abb48] {
+  color: var(--rs-success);
 }
-.rs-upload__file-icon--file-type[data-v-9d8ef208],
-.rs-upload__file-icon--file-text[data-v-9d8ef208] {
-  color: var(--rs-danger, #dc2626);
+.rs-upload__file-icon--file-type[data-v-8c6abb48],
+.rs-upload__file-icon--file-text[data-v-8c6abb48] {
+  color: var(--rs-danger);
 }
-.rs-upload__file-icon--file-music[data-v-9d8ef208],
-.rs-upload__file-icon--file-video-camera[data-v-9d8ef208] {
-  color: var(--rs-info, #2563eb);
+.rs-upload__thumb[data-v-8c6abb48] {
+  display: block;
+  flex-shrink: 0;
+  width: var(--rs-upload-file-icon-size);
+  height: var(--rs-upload-file-icon-size);
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--rs-border-subtle);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-bg);
+  cursor: pointer;
 }
-.rs-upload__file-meta[data-v-9d8ef208] {
+.rs-upload__file--card .rs-upload__thumb[data-v-8c6abb48],
+.rs-upload__file--card .rs-upload__file-icon[data-v-8c6abb48] {
+  width: 100%;
+  height: var(--rs-upload-card-size);
+  border: 0;
+  border-radius: 0;
+}
+.rs-upload__thumb-img[data-v-8c6abb48] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.rs-upload__file-meta[data-v-8c6abb48] {
   display: grid;
   gap: 0.125rem;
   min-width: 0;
   flex: 1;
 }
-.rs-upload__file-name[data-v-9d8ef208] {
+.rs-upload__file-name[data-v-8c6abb48] {
   overflow: hidden;
-  color: var(--rs-text);
+  color: var(--rs-text-primary);
   font-size: var(--rs-font-size-sm);
   font-weight: var(--rs-font-weight-medium);
   line-height: var(--rs-line-height-tight);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-upload__file-size[data-v-9d8ef208] {
-  color: var(--rs-muted);
+.rs-upload__file-name--card[data-v-8c6abb48] {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding-block: var(--rs-space-xs);
+  padding-inline: var(--rs-space-sm);
+  background: color-mix(in srgb, var(--rs-bg) 72%, transparent);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-upload__file-size[data-v-8c6abb48] {
+  color: var(--rs-text-secondary);
   font-size: var(--rs-font-size-xs);
   line-height: var(--rs-line-height-tight);
 }
-.rs-upload__file-action[data-v-9d8ef208],
-.rs-upload__file-remove[data-v-9d8ef208] {
+.rs-upload__file-actions[data-v-8c6abb48] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--rs-space-xs);
+}
+.rs-upload__file--card .rs-upload__file-actions[data-v-8c6abb48] {
+  position: absolute;
+  inset-block-start: var(--rs-space-xs);
+  inset-inline-end: var(--rs-space-xs);
+}
+.rs-upload__file-action[data-v-8c6abb48],
+.rs-upload__file-remove[data-v-8c6abb48] {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: var(--rs-upload-action-size);
+  height: var(--rs-upload-action-size);
   padding: 0;
   border: none;
   border-radius: var(--rs-radius-sm);
   background: transparent;
-  color: var(--rs-muted);
+  color: var(--rs-text-secondary);
   cursor: pointer;
   transition:
     background var(--rs-transition-fast),
     color var(--rs-transition-fast);
 }
-.rs-upload__file-action[data-v-9d8ef208]:hover,
-.rs-upload__file-remove[data-v-9d8ef208]:hover {
+.rs-upload__file-action[data-v-8c6abb48]:hover,
+.rs-upload__file-remove[data-v-8c6abb48]:hover {
   background: var(--rs-item-hover);
-  color: var(--rs-text);
+  color: var(--rs-text-primary);
 }
-.rs-upload__file-action[data-v-9d8ef208]:focus-visible,
-.rs-upload__file-remove[data-v-9d8ef208]:focus-visible {
+.rs-upload__file-action[data-v-8c6abb48]:focus-visible,
+.rs-upload__file-remove[data-v-8c6abb48]:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
+@media (prefers-reduced-motion: reduce) {
+.rs-upload__dropzone[data-v-8c6abb48],
+  .rs-upload__icon[data-v-8c6abb48],
+  .rs-upload__trigger[data-v-8c6abb48],
+  .rs-upload__file[data-v-8c6abb48],
+  .rs-upload__file-action[data-v-8c6abb48],
+  .rs-upload__file-remove[data-v-8c6abb48] {
+    transition: none;
+}
+.rs-upload__dropzone:hover:not(.rs-upload__dropzone--disabled) .rs-upload__icon[data-v-8c6abb48],
+  .rs-upload__dropzone--dragging:not(.rs-upload__dropzone--disabled) .rs-upload__icon[data-v-8c6abb48] {
+    transform: none;
+}
+}

package/dist/components/upload/src/RsUpload.d.ts

@@ -1,3 +1,19 @@
+import type { RsComponentSize } from '../../../theme/types';
+import { type RsUploadBeforeRemove, type RsUploadBeforeSelect, type RsUploadCapture, type RsUploadListType, type RsUploadVariant } from './upload-utils';
+/**
+ * 模板 ref 请用此类型。
+ * 不要写 `InstanceType<typeof RsUpload>`：组件实例类型过深，vue-tsc 会报 Excessive stack depth。
+ */
+export interface RsUploadExpose {
+    open: () => void;
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+}
+export type RsUploadInstance = RsUploadExpose & {
+    $el: HTMLElement;
+};
+export type { RsUploadBeforeRemove, RsUploadBeforeSelect, RsUploadCapture, RsUploadListType, RsUploadVariant, };
 type __VLS_Props = {
     accept?: string;
     multiple?: boolean;
@@ -12,27 +28,87 @@ type __VLS_Props = {
     showDownload?: boolean;
     /** 达到 maxCount 后隐藏拖拽区（仅保留列表） */
     hideDropzoneWhenFull?: boolean;
+    size?: RsComponentSize;
+    id?: string;
+    /** 向 Form 注册字段。不写到原生 file input（选完会清空，不能靠它提交）。 */
+    name?: string;
+    ariaLabel?: string;
+    listType?: RsUploadListType;
+    variant?: RsUploadVariant;
+    directory?: boolean;
+    capture?: RsUploadCapture;
+    /** 新文件覆盖已有列表，而不是追加 */
+    replace?: boolean;
+    /** 焦点在控件上时允许从剪贴板粘贴文件 */
+    paste?: boolean;
+    skipDuplicate?: boolean;
+    showPreview?: boolean;
+    beforeSelect?: RsUploadBeforeSelect;
+    beforeRemove?: RsUploadBeforeRemove;
 };
 type __VLS_ModelProps = {
     modelValue?: File[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_21: {
+    file: File;
+    index: number;
+}, __VLS_23: {
+    file: File;
+    index: number;
+}, __VLS_40: {}, __VLS_42: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_3) => any;
+} & {
+    hint?: (props: typeof __VLS_10) => any;
+} & {
+    extra?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    file?: (props: typeof __VLS_21) => any;
+} & {
+    'file-icon'?: (props: typeof __VLS_23) => any;
+} & {
+    default?: (props: typeof __VLS_40) => any;
+} & {
+    icon?: (props: typeof __VLS_42) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsUploadExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (files: File[]) => any;
     download: (file: File, index: number) => any;
     "update:modelValue": (value: File[]) => any;
     remove: (file: File, index: number) => any;
     reject: (errors: import("./upload-utils").RsUploadValidationError[]) => any;
+    preview: (file: File, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((files: File[]) => any) | undefined;
     onDownload?: ((file: File, index: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
     onRemove?: ((file: File, index: number) => any) | undefined;
     onReject?: ((errors: import("./upload-utils").RsUploadValidationError[]) => any) | undefined;
+    onPreview?: ((file: File, index: number) => any) | undefined;
 }>, {
+    replace: boolean;
+    variant: RsUploadVariant;
+    paste: boolean;
     disabled: boolean;
     multiple: boolean;
     showFileList: boolean;
     showDownload: boolean;
     hideDropzoneWhenFull: boolean;
+    listType: RsUploadListType;
+    directory: boolean;
+    skipDuplicate: boolean;
+    showPreview: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};