zartui 3.1.87 → 3.1.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/es/index.d.ts +1 -1
  2. package/es/index.mjs +1 -1
  3. package/es/media-picker/MediaPicker.d.ts +14 -1
  4. package/es/media-picker/MediaPicker.mjs +95 -8
  5. package/es/media-picker/index.css +1 -1
  6. package/es/media-picker/index.d.ts +10 -1
  7. package/es/media-picker/type.d.ts +10 -0
  8. package/lib/index.css +1 -1
  9. package/lib/index.d.ts +1 -1
  10. package/lib/index.js +1 -1
  11. package/lib/media-picker/MediaPicker.d.ts +14 -1
  12. package/lib/media-picker/MediaPicker.js +94 -7
  13. package/lib/media-picker/index.css +1 -1
  14. package/lib/media-picker/index.d.ts +10 -1
  15. package/lib/media-picker/type.d.ts +10 -0
  16. package/lib/web-types.json +1 -1
  17. package/lib/zartui.cjs.js +95 -8
  18. package/lib/zartui.es.js +95 -8
  19. package/lib/zartui.js +95 -8
  20. package/lib/zartui.min.js +1 -1
  21. package/package.json +28 -28
package/lib/index.d.ts CHANGED
@@ -85,4 +85,4 @@ declare namespace _default {
85
85
  }
86
86
  export default _default;
87
87
  export function install(app: any): void;
88
- export const version: "3.1.87";
88
+ export const version: "3.1.89";
package/lib/index.js CHANGED
@@ -184,7 +184,7 @@ __reExport(stdin_exports, require("./timeline"), module.exports);
184
184
  __reExport(stdin_exports, require("./toast"), module.exports);
185
185
  __reExport(stdin_exports, require("./uploader"), module.exports);
186
186
  __reExport(stdin_exports, require("./video"), module.exports);
187
- const version = "3.1.87";
187
+ const version = "3.1.89";
188
188
  function install(app) {
189
189
  const components = [
190
190
  import_action_sheet.ActionSheet,
package/lib/media-picker/MediaPicker.d.ts CHANGED
@@ -1,8 +1,12 @@
1
1
  import { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue';
2
- import type { Media, MediaAddType, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPreview, MediaSizeType, MediaType } from './type';
2
+ import type { Media, MediaAddType, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPickerVariant, MediaPreview, MediaSizeType, MediaType } from './type';
3
3
  import { MediaPlayerProps } from '../media-player';
4
4
  import { DownloadActionParams } from '../image-preview/ImagePreview';
5
5
  declare const mediaPickerProps: {
6
+ variant: {
7
+ type: PropType<MediaPickerVariant>;
8
+ default: MediaPickerVariant;
9
+ };
6
10
  sortable: {
7
11
  type: BooleanConstructor;
8
12
  default: boolean;
@@ -96,6 +100,10 @@ export type MediaPickerInstance = ComponentPublicInstance<{
96
100
  mediaPickAction: (mediaType: MediaType, mediaAddType: MediaAddType) => void;
97
101
  }>;
98
102
  declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
103
+ variant: {
104
+ type: PropType<MediaPickerVariant>;
105
+ default: MediaPickerVariant;
106
+ };
99
107
  sortable: {
100
108
  type: BooleanConstructor;
101
109
  default: boolean;
@@ -184,6 +192,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
184
192
  };
185
193
  mediaPlayerProps: PropType<Partial<MediaPlayerProps>>;
186
194
  }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "processing" | "update:mediaList")[], "delete" | "processing" | "update:mediaList", import("vue").PublicProps, Readonly<ExtractPropTypes<{
195
+ variant: {
196
+ type: PropType<MediaPickerVariant>;
197
+ default: MediaPickerVariant;
198
+ };
187
199
  sortable: {
188
200
  type: BooleanConstructor;
189
201
  default: boolean;
@@ -280,6 +292,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
280
292
  disabled: boolean;
281
293
  showTitle: boolean;
282
294
  showDownload: boolean;
295
+ variant: MediaPickerVariant;
283
296
  sortable: boolean;
284
297
  useFileNameAsLabel: boolean;
285
298
  mediaList: Media[];
package/lib/media-picker/MediaPicker.js CHANGED
@@ -92,6 +92,7 @@ const COMPATIBLE_TYPE_MAPPINGS = {
92
92
  "m4a": /* @__PURE__ */ new Set(["mp4", "mp4a", "x-m4a"])
93
93
  };
94
94
  const mediaPickerProps = {
95
+ variant: (0, import_utils.makeStringProp)("default"),
95
96
  sortable: {
96
97
  type: Boolean,
97
98
  default: false
@@ -165,6 +166,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
165
166
  }) {
166
167
  const videoOptionsVisible = (0, import_vue2.ref)(false);
167
168
  const audioOptionsVisible = (0, import_vue2.ref)(false);
169
+ const photoOptionsVisible = (0, import_vue2.ref)(false);
168
170
  const actionVisible = (0, import_vue2.ref)(false);
169
171
  const mediaPlayerVisible = (0, import_vue2.ref)(false);
170
172
  const mediaTypeToPlay = (0, import_vue2.ref)("file");
@@ -179,7 +181,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
179
181
  const gridRef = (0, import_vue2.ref)();
180
182
  const mediaListPlaceholder = (0, import_vue2.ref)([]);
181
183
  const sort = (0, import_vue2.ref)();
182
- const shouldIsolateSortableTouch = () => props.sortable && props.mediaList.length > 0;
184
+ const isAttachmentVariant = (0, import_vue2.computed)(() => props.variant === "attachment");
185
+ const attachmentMediaList = (0, import_vue2.computed)(() => props.mediaList.filter((media) => media.type === "photo"));
186
+ const attachmentMediaListPlaceholder = (0, import_vue2.computed)(() => mediaListPlaceholder.value.filter((media) => media.type === "photo"));
187
+ const shouldIsolateSortableTouch = () => !isAttachmentVariant.value && props.sortable && props.mediaList.length > 0;
183
188
  const stopSortableTouchStartPropagation = (event) => {
184
189
  if (!shouldIsolateSortableTouch()) {
185
190
  return;
@@ -195,7 +200,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
195
200
  };
196
201
  const initSortable = () => __async(this, null, function* () {
197
202
  var _a;
198
- if (sort.value || !props.sortable || !props.mediaList.length)
203
+ if (sort.value || isAttachmentVariant.value || !props.sortable || !props.mediaList.length)
199
204
  return;
200
205
  yield (0, import_vue2.nextTick)();
201
206
  const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
@@ -311,6 +316,19 @@ var stdin_default = (0, import_vue2.defineComponent)({
311
316
  };
312
317
  const imageList = (0, import_vue2.computed)(() => props.mediaList.filter((media) => media.type === "photo"));
313
318
  const actionOptions = (0, import_vue2.computed)(() => {
319
+ if (photoOptionsVisible.value) {
320
+ return [{
321
+ name: "\u62CD\u7167",
322
+ callback: () => {
323
+ mediaPickAction("photo", "take");
324
+ }
325
+ }, {
326
+ name: "\u7167\u7247",
327
+ callback: () => {
328
+ mediaPickAction("photo", "pick");
329
+ }
330
+ }];
331
+ }
314
332
  if (videoOptionsVisible.value) {
315
333
  return [{
316
334
  name: "\u62CD\u6444",
@@ -762,6 +780,40 @@ var stdin_default = (0, import_vue2.defineComponent)({
762
780
  }
763
781
  return buttons;
764
782
  };
783
+ const renderAttachmentAdd = () => {
784
+ const canTakePhoto = props.allowTakePhoto;
785
+ const canPickPhoto = props.allowPickPhoto;
786
+ if (!canTakePhoto && !canPickPhoto) {
787
+ return;
788
+ }
789
+ if (props.allowTakePhoto && props.allowPickPhoto) {
790
+ return (0, import_vue.createVNode)("button", {
791
+ "type": "button",
792
+ "class": bem("attachment-add"),
793
+ "disabled": props.disabled,
794
+ "onClick": () => {
795
+ if (props.disabled) {
796
+ return;
797
+ }
798
+ actionVisible.value = true;
799
+ photoOptionsVisible.value = true;
800
+ videoOptionsVisible.value = false;
801
+ audioOptionsVisible.value = false;
802
+ }
803
+ }, [(0, import_vue.createVNode)("span", {
804
+ "class": bem("attachment-add-icon")
805
+ }, [(0, import_vue.createTextVNode)("+")])]);
806
+ }
807
+ const addType = canTakePhoto ? "take" : "pick";
808
+ return (0, import_vue.createVNode)("button", {
809
+ "type": "button",
810
+ "class": bem("attachment-add"),
811
+ "disabled": props.disabled,
812
+ "onClick": () => mediaPickAction("photo", addType)
813
+ }, [(0, import_vue.createVNode)("span", {
814
+ "class": bem("attachment-add-icon")
815
+ }, [(0, import_vue.createTextVNode)("+")])]);
816
+ };
765
817
  const genThumbnailMask = (media) => {
766
818
  const {
767
819
  status,
@@ -928,12 +980,45 @@ var stdin_default = (0, import_vue2.defineComponent)({
928
980
  default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), deleteIcon]
929
981
  });
930
982
  });
983
+ const renderAttachmentDelete = (media, index) => {
984
+ if (!media.deletable || media.status === "uploading") {
985
+ return;
986
+ }
987
+ return (0, import_vue.createVNode)("button", {
988
+ "type": "button",
989
+ "class": bem("attachment-delete"),
990
+ "onClick": (event) => {
991
+ event.stopPropagation();
992
+ onDelete(media, index);
993
+ }
994
+ }, [(0, import_vue.createTextVNode)("\xD7")]);
995
+ };
996
+ const renderAttachmentMedia = (media) => {
997
+ const index = props.mediaList.indexOf(media);
998
+ return (0, import_vue.createVNode)("div", {
999
+ "key": media.uniqueCode,
1000
+ "class": bem("attachment-item"),
1001
+ "onClick": () => previewMedia(index)
1002
+ }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), renderAttachmentDelete(media, index)]);
1003
+ };
1004
+ const renderAttachmentPlaceholder = (media) => (0, import_vue.createVNode)("div", {
1005
+ "key": media.uniqueCode || media.fileName,
1006
+ "class": bem("attachment-item")
1007
+ }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media)]);
1008
+ const renderAttachment = () => (0, import_vue.createVNode)("div", {
1009
+ "class": bem("attachment")
1010
+ }, [(0, import_vue.createVNode)("div", {
1011
+ "class": bem("attachment-track")
1012
+ }, [attachmentMediaList.value.map(renderAttachmentMedia), attachmentMediaListPlaceholder.value.map(renderAttachmentPlaceholder), renderAttachmentAdd()])]);
931
1013
  const selectAction = (action) => {
932
1014
  actionVisible.value = false;
1015
+ photoOptionsVisible.value = false;
1016
+ videoOptionsVisible.value = false;
1017
+ audioOptionsVisible.value = false;
933
1018
  action.func && action.func();
934
1019
  };
935
- (0, import_vue2.watch)(() => [props.sortable, props.mediaList.length], (_0) => __async(this, [_0], function* ([sortable, mediaCount]) {
936
- if (!sortable || !mediaCount) {
1020
+ (0, import_vue2.watch)(() => [props.sortable, props.mediaList.length, props.variant], (_0) => __async(this, [_0], function* ([sortable, mediaCount]) {
1021
+ if (isAttachmentVariant.value || !sortable || !mediaCount) {
937
1022
  destroySortable();
938
1023
  return;
939
1024
  }
@@ -957,7 +1042,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
957
1042
  }, [props.title]);
958
1043
  const showButtons = props.allowTakePhoto || props.allowPickPhoto || props.allowTakeVideo || props.allowPickVideo || props.allowTakeAudio || props.allowPickAudio || props.allowPickFile;
959
1044
  return (0, import_vue.createVNode)("div", {
960
- "class": bem()
1045
+ "class": bem({
1046
+ attachment: isAttachmentVariant.value
1047
+ })
961
1048
  }, [title, hiddenInput(), (0, import_vue.createVNode)(import_media_player.default, (0, import_vue.mergeProps)({
962
1049
  "show": mediaPlayerVisible.value,
963
1050
  "onUpdate:show": ($event) => mediaPlayerVisible.value = $event,
@@ -973,7 +1060,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
973
1060
  "teleport": "body",
974
1061
  "close-on-click-action": true,
975
1062
  "onSelect": selectAction
976
- }, null), (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
1063
+ }, null), isAttachmentVariant.value ? renderAttachment() : (0, import_vue.createVNode)(import_vue.Fragment, null, [(0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
977
1064
  "class": bem("line")
978
1065
  }, [renderButtons(), slots["extend"] ? slots.extend() : ""]), [[import_vue.vShow, showButtons]]), (0, import_vue.withDirectives)((0, import_vue.createVNode)(import_grid.default, {
979
1066
  "ref": gridRef,
@@ -993,7 +1080,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
993
1080
  "class": bem("grid")
994
1081
  }, {
995
1082
  default: () => [renderMediaListPlaceholder()]
996
- }), [[import_vue.vShow, mediaListPlaceholder.value.length]])]);
1083
+ }), [[import_vue.vShow, mediaListPlaceholder.value.length]])])]);
997
1084
  };
998
1085
  }
999
1086
  });
package/lib/media-picker/index.css CHANGED
@@ -1 +1 @@
1
- :root{--zt-media-picker-image-color: var(--zt-text-color);--zt-media-picker-button-background: linear-gradient(135deg, #e6ebf0 0%, #fff 100%, #fff 100%);--zt-media-picker-button-box-shadow: -4px -4px 8px 0 var(--zt-white), 4px 4px 8px 0 var(--zt-gray-a1);--zt-media-picker-button-border: 0;--zt-media-picker-button-active-border: 1px solid rgba(255, 255, 255, .75);--zt-media-picker-button-active-box-shadow: inset 4px 4px 8px 0 var(--zt-gray-a2);--zt-media-picker-line-height: 46px;--zt-media-picker-box-size: 48px;--zt-media-picker-icon-size: 32px;--zt-media-picker-title-height: 44px;--zt-media-picker-thumbnail-label-background: rgba(var(--zt-gray-rgb), .5);--zt-media-picker-thumbnail-label-color: var(--zt-white)}:root[zt-theme-size=large]{--zt-media-picker-line-height: 52px;--zt-media-picker-box-size: 54px;--zt-media-picker-icon-size: 38px;--zt-media-picker-title-height: 56px}.zt-media-picker__hidden{display:none}.zt-media-picker__title{position:relative;height:var(--zt-media-picker-title-height);line-height:var(--zt-media-picker-title-height);font-weight:700;font-size:var(--zt-font-size-lg);color:var(--zt-text-color);padding:0 16px}.zt-media-picker__title:before{position:absolute;width:4px;height:16px;background:var(--zt-primary-color);left:0;top:14px;content:" "}.zt-media-picker__title:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-media-picker__line{width:100%;height:calc(var(--zt-media-picker-line-height) * 2);display:flex;align-items:center;overflow-x:auto}.zt-media-picker__line::-webkit-scrollbar{width:0;height:0}.zt-media-picker__line:after{content:" ";min-width:16px;height:10px}.zt-media-picker__box{width:var(--zt-media-picker-box-size);display:flex;flex-direction:column;align-items:center}.zt-media-picker__box:first-child{margin-left:16px}.zt-media-picker__box:not(:last-child){margin-right:24px}.zt-media-picker__button{display:flex;align-items:center;justify-content:center;width:var(--zt-media-picker-box-size);height:var(--zt-media-picker-box-size);background:var(--zt-media-picker-button-background);box-shadow:var(--zt-media-picker-button-box-shadow);border:var(--zt-media-picker-button-border);border-radius:8px;box-sizing:border-box}.zt-media-picker__button:active{background:var(--zt-gray-a04);border:var(--zt-media-picker-button-active-border);box-shadow:var(--zt-media-picker-button-active-box-shadow)}.zt-media-picker__icon{width:var(--zt-media-picker-icon-size);height:var(--zt-media-picker-icon-size);color:var(--zt-media-picker-image-color)}.zt-media-picker__label{margin-top:8px;font-size:var(--zt-font-size-sm);color:var(--zt-gray-a8);letter-spacing:0;text-align:center;line-height:var(--zt-line-height-sm);-webkit-user-select:none;-moz-user-select:none;user-select:none}.zt-media-picker__grid{padding:0 16px 8px!important}.zt-media-picker__delete{box-sizing:content-box;width:20px;height:20px;position:absolute;padding:4px;top:0;right:0}.zt-media-picker .zt-image{width:100%;height:100%}.zt-media-picker .zt-grid-item__content{padding:0}.zt-media-picker__thumbnail{width:100%;height:100%}.zt-media-picker__thumbnail-label{position:absolute;bottom:0;left:0;box-sizing:border-box;width:100%;height:var(--zt-line-height-lg);line-height:var(--zt-line-height-lg);padding:0 var(--zt-padding-xs);overflow:hidden;text-align:center;border-radius:0 0 4px 4px;font-size:var(--zt-font-size-sm);text-overflow:ellipsis;word-break:break-all;white-space:nowrap;color:var(--zt-media-picker-thumbnail-label-color);background-color:var(--zt-media-picker-thumbnail-label-background)}.zt-media-picker__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--zt-white);background-color:var(--zt-uploader-mask-background);border-radius:4px}.zt-media-picker__mask-icon{font-size:var(--zt-font-size-xxxl)}.zt-media-picker__mask-message{margin-top:6px;padding:0 var(--zt-padding-base);font-size:var(--zt-font-size-sm);line-height:var(--zt-uploader-mask-message-line-height)}.zt-media-picker__loading{width:var(--zt-uploader-loading-icon-size);height:var(--zt-uploader-loading-icon-size);color:var(--zt-uploader-icon-color)}.zt-theme-dark{--zt-media-picker-button-background: linear-gradient(135deg, #111c29 0%, #1d2c3e 100%, #1c2a3c 100%);--zt-media-picker-button-box-shadow: -4px -4px 8px 0 rgba(255, 255, 255, .08), 4px 4px 8px 0 rgba(0, 12, 24, .8);--zt-media-picker-button-border: 1px solid var(--zt-gray-a1);--zt-media-picker-button-active-border: 1px solid var(--zt-gray-a1);--zt-media-picker-button-active-box-shadow: inset 6px 6px 6px 0 #000d1b}
1
+ :root{--zt-media-picker-image-color: var(--zt-text-color);--zt-media-picker-button-background: linear-gradient(135deg, #e6ebf0 0%, #fff 100%, #fff 100%);--zt-media-picker-button-box-shadow: -4px -4px 8px 0 var(--zt-white), 4px 4px 8px 0 var(--zt-gray-a1);--zt-media-picker-button-border: 0;--zt-media-picker-button-active-border: 1px solid rgba(255, 255, 255, .75);--zt-media-picker-button-active-box-shadow: inset 4px 4px 8px 0 var(--zt-gray-a2);--zt-media-picker-line-height: 46px;--zt-media-picker-box-size: 48px;--zt-media-picker-icon-size: 32px;--zt-media-picker-title-height: 44px;--zt-media-picker-thumbnail-label-background: rgba(var(--zt-gray-rgb), .5);--zt-media-picker-thumbnail-label-color: var(--zt-white);--zt-media-picker-attachment-padding: 12px;--zt-media-picker-attachment-gap: 16px;--zt-media-picker-attachment-item-size: 140px;--zt-media-picker-attachment-radius: 10px;--zt-media-picker-attachment-add-border: 1px dashed #d7deee;--zt-media-picker-attachment-add-color: #9aa8c0;--zt-media-picker-attachment-add-background: #f8f9fc;--zt-media-picker-attachment-delete-background: var(--zt-primary-color);--zt-media-picker-attachment-delete-color: var(--zt-white)}:root[zt-theme-size=large]{--zt-media-picker-line-height: 52px;--zt-media-picker-box-size: 54px;--zt-media-picker-icon-size: 38px;--zt-media-picker-title-height: 56px}.zt-media-picker__hidden{display:none}.zt-media-picker__title{position:relative;height:var(--zt-media-picker-title-height);line-height:var(--zt-media-picker-title-height);font-weight:700;font-size:var(--zt-font-size-lg);color:var(--zt-text-color);padding:0 16px}.zt-media-picker__title:before{position:absolute;width:4px;height:16px;background:var(--zt-primary-color);left:0;top:14px;content:" "}.zt-media-picker__title:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-media-picker__line{width:100%;height:calc(var(--zt-media-picker-line-height) * 2);display:flex;align-items:center;overflow-x:auto}.zt-media-picker__line::-webkit-scrollbar{width:0;height:0}.zt-media-picker__line:after{content:" ";min-width:16px;height:10px}.zt-media-picker__box{width:var(--zt-media-picker-box-size);display:flex;flex-direction:column;align-items:center}.zt-media-picker__box:first-child{margin-left:16px}.zt-media-picker__box:not(:last-child){margin-right:24px}.zt-media-picker__button{display:flex;align-items:center;justify-content:center;width:var(--zt-media-picker-box-size);height:var(--zt-media-picker-box-size);background:var(--zt-media-picker-button-background);box-shadow:var(--zt-media-picker-button-box-shadow);border:var(--zt-media-picker-button-border);border-radius:8px;box-sizing:border-box}.zt-media-picker__button:active{background:var(--zt-gray-a04);border:var(--zt-media-picker-button-active-border);box-shadow:var(--zt-media-picker-button-active-box-shadow)}.zt-media-picker__icon{width:var(--zt-media-picker-icon-size);height:var(--zt-media-picker-icon-size);color:var(--zt-media-picker-image-color)}.zt-media-picker__label{margin-top:8px;font-size:var(--zt-font-size-sm);color:var(--zt-gray-a8);letter-spacing:0;text-align:center;line-height:var(--zt-line-height-sm);-webkit-user-select:none;-moz-user-select:none;user-select:none}.zt-media-picker__grid{padding:0 16px 8px!important}.zt-media-picker--attachment{width:100%;height:100%}.zt-media-picker__attachment{box-sizing:border-box;width:100%;height:100%;padding:var(--zt-media-picker-attachment-padding);overflow:hidden}.zt-media-picker__attachment-track{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--zt-media-picker-attachment-gap);width:100%;height:100%;overflow-x:auto;overflow-y:hidden}.zt-media-picker__attachment-track::-webkit-scrollbar{width:0;height:0}.zt-media-picker__attachment-item,.zt-media-picker__attachment-add{position:relative;flex:0 0 var(--zt-media-picker-attachment-item-size);width:var(--zt-media-picker-attachment-item-size);height:var(--zt-media-picker-attachment-item-size);border-radius:var(--zt-media-picker-attachment-radius);box-sizing:border-box;overflow:hidden}.zt-media-picker__attachment-add{display:flex;align-items:center;justify-content:center;padding:0;color:var(--zt-media-picker-attachment-add-color);background:var(--zt-media-picker-attachment-add-background);border:var(--zt-media-picker-attachment-add-border)}.zt-media-picker__attachment-add:disabled{opacity:var(--zt-disabled-opacity)}.zt-media-picker__attachment-add-icon{font-size:48px;line-height:1;font-weight:300}.zt-media-picker__attachment-delete{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:calc(var(--zt-media-picker-attachment-item-size) * .2);height:calc(var(--zt-media-picker-attachment-item-size) * .2);padding:0;color:var(--zt-media-picker-attachment-delete-color);font-size:calc(var(--zt-media-picker-attachment-item-size) * .15);line-height:1;background:var(--zt-media-picker-attachment-delete-background);border:0;border-radius:50%}.zt-media-picker__delete{box-sizing:content-box;width:20px;height:20px;position:absolute;padding:4px;top:0;right:0}.zt-media-picker .zt-image{width:100%;height:100%}.zt-media-picker .zt-grid-item__content{padding:0}.zt-media-picker__thumbnail{width:100%;height:100%}.zt-media-picker__thumbnail-label{position:absolute;bottom:0;left:0;box-sizing:border-box;width:100%;height:var(--zt-line-height-lg);line-height:var(--zt-line-height-lg);padding:0 var(--zt-padding-xs);overflow:hidden;text-align:center;border-radius:0 0 4px 4px;font-size:var(--zt-font-size-sm);text-overflow:ellipsis;word-break:break-all;white-space:nowrap;color:var(--zt-media-picker-thumbnail-label-color);background-color:var(--zt-media-picker-thumbnail-label-background)}.zt-media-picker__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--zt-white);background-color:var(--zt-uploader-mask-background);border-radius:4px}.zt-media-picker__mask-icon{font-size:var(--zt-font-size-xxxl)}.zt-media-picker__mask-message{margin-top:6px;padding:0 var(--zt-padding-base);font-size:var(--zt-font-size-sm);line-height:var(--zt-uploader-mask-message-line-height)}.zt-media-picker__loading{width:var(--zt-uploader-loading-icon-size);height:var(--zt-uploader-loading-icon-size);color:var(--zt-uploader-icon-color)}.zt-theme-dark{--zt-media-picker-button-background: linear-gradient(135deg, #111c29 0%, #1d2c3e 100%, #1c2a3c 100%);--zt-media-picker-button-box-shadow: -4px -4px 8px 0 rgba(255, 255, 255, .08), 4px 4px 8px 0 rgba(0, 12, 24, .8);--zt-media-picker-button-border: 1px solid var(--zt-gray-a1);--zt-media-picker-button-active-border: 1px solid var(--zt-gray-a1);--zt-media-picker-button-active-box-shadow: inset 6px 6px 6px 0 #000d1b}
package/lib/media-picker/index.d.ts CHANGED
@@ -1,4 +1,8 @@
1
1
  export declare const MediaPicker: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
2
+ variant: {
3
+ type: import("vue").PropType<import("./type").MediaPickerVariant>;
4
+ default: import("./type").MediaPickerVariant;
5
+ };
2
6
  sortable: {
3
7
  type: BooleanConstructor;
4
8
  default: boolean;
@@ -77,6 +81,10 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
77
81
  };
78
82
  mediaPlayerProps: import("vue").PropType<Partial<import("..").MediaPlayerProps>>;
79
83
  }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "processing" | "update:mediaList")[], "delete" | "processing" | "update:mediaList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
84
+ variant: {
85
+ type: import("vue").PropType<import("./type").MediaPickerVariant>;
86
+ default: import("./type").MediaPickerVariant;
87
+ };
80
88
  sortable: {
81
89
  type: BooleanConstructor;
82
90
  default: boolean;
@@ -163,6 +171,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
163
171
  disabled: boolean;
164
172
  showTitle: boolean;
165
173
  showDownload: boolean;
174
+ variant: import("./type").MediaPickerVariant;
166
175
  sortable: boolean;
167
176
  useFileNameAsLabel: boolean;
168
177
  mediaList: import("./type").Media[];
@@ -187,7 +196,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
187
196
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
188
197
  export default MediaPicker;
189
198
  export type { MediaPickerProps, MediaPickerInstance } from './MediaPicker';
190
- export type { Media, MediaType, MediaAddType, MediaUploadStatus, MediaPreview, MediaPick, MediaBeforeRead, MediaAfterRead, MediaBeforeDelete, MediaPickerThemeVars, MediaSizeType, } from './type';
199
+ export type { Media, MediaType, MediaAddType, MediaUploadStatus, MediaPreview, MediaPick, MediaBeforeRead, MediaAfterRead, MediaBeforeDelete, MediaPickerThemeVars, MediaPickerVariant, MediaSizeType, } from './type';
191
200
  export { defaultMedia } from './type';
192
201
  declare module 'vue' {
193
202
  interface GlobalComponents {
package/lib/media-picker/type.d.ts CHANGED
@@ -3,6 +3,7 @@ export type MediaAddType = 'take' | 'pick' | 'take_and_pick';
3
3
  export type MediaUploadStatus = 'processing' | 'uploading' | 'done' | 'failed';
4
4
  export type WxMediaType = 'camera' | 'album';
5
5
  export type MediaSizeType = 'original' | 'compressed';
6
+ export type MediaPickerVariant = 'default' | 'attachment';
6
7
  export type Media = {
7
8
  file?: File;
8
9
  url?: string;
@@ -48,4 +49,13 @@ export type MediaPickerThemeVars = {
48
49
  mediaPickerBoxSize?: string;
49
50
  mediaPickerIconSize?: string;
50
51
  mediaPickerTitleHeight?: string;
52
+ mediaPickerAttachmentPadding?: string;
53
+ mediaPickerAttachmentGap?: string;
54
+ mediaPickerAttachmentItemSize?: string;
55
+ mediaPickerAttachmentRadius?: string;
56
+ mediaPickerAttachmentAddBorder?: string;
57
+ mediaPickerAttachmentAddColor?: string;
58
+ mediaPickerAttachmentAddBackground?: string;
59
+ mediaPickerAttachmentDeleteBackground?: string;
60
+ mediaPickerAttachmentDeleteColor?: string;
51
61
  };