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/es/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/es/index.mjs CHANGED
@@ -78,7 +78,7 @@ import { Timeline } from "./timeline/index.mjs";
78
78
  import { Toast } from "./toast/index.mjs";
79
79
  import { Uploader } from "./uploader/index.mjs";
80
80
  import { Video } from "./video/index.mjs";
81
- const version = "3.1.87";
81
+ const version = "3.1.89";
82
82
  function install(app) {
83
83
  const components = [
84
84
  ActionSheet,
package/es/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/es/media-picker/MediaPicker.mjs CHANGED
@@ -18,7 +18,7 @@ var __async = (__this, __arguments, generator) => {
18
18
  step((generator = generator.apply(__this, __arguments)).next());
19
19
  });
20
20
  };
21
- import { createVNode as _createVNode, mergeProps as _mergeProps, vShow as _vShow, withDirectives as _withDirectives } from "vue";
21
+ import { createVNode as _createVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, Fragment as _Fragment, vShow as _vShow, withDirectives as _withDirectives } from "vue";
22
22
  import { createNamespace, isDef, isWeixin, makeArrayProp, makeNumberProp, makeStringProp, truthProp } from "../utils/index.mjs";
23
23
  import { computed, defineComponent, nextTick, onBeforeUnmount, ref, watch } from "vue";
24
24
  import { showFailToast, showLoadingToast, closeToast } from "../toast/index.mjs";
@@ -60,6 +60,7 @@ const COMPATIBLE_TYPE_MAPPINGS = {
60
60
  "m4a": /* @__PURE__ */ new Set(["mp4", "mp4a", "x-m4a"])
61
61
  };
62
62
  const mediaPickerProps = {
63
+ variant: makeStringProp("default"),
63
64
  sortable: {
64
65
  type: Boolean,
65
66
  default: false
@@ -133,6 +134,7 @@ var stdin_default = defineComponent({
133
134
  }) {
134
135
  const videoOptionsVisible = ref(false);
135
136
  const audioOptionsVisible = ref(false);
137
+ const photoOptionsVisible = ref(false);
136
138
  const actionVisible = ref(false);
137
139
  const mediaPlayerVisible = ref(false);
138
140
  const mediaTypeToPlay = ref("file");
@@ -147,7 +149,10 @@ var stdin_default = defineComponent({
147
149
  const gridRef = ref();
148
150
  const mediaListPlaceholder = ref([]);
149
151
  const sort = ref();
150
- const shouldIsolateSortableTouch = () => props.sortable && props.mediaList.length > 0;
152
+ const isAttachmentVariant = computed(() => props.variant === "attachment");
153
+ const attachmentMediaList = computed(() => props.mediaList.filter((media) => media.type === "photo"));
154
+ const attachmentMediaListPlaceholder = computed(() => mediaListPlaceholder.value.filter((media) => media.type === "photo"));
155
+ const shouldIsolateSortableTouch = () => !isAttachmentVariant.value && props.sortable && props.mediaList.length > 0;
151
156
  const stopSortableTouchStartPropagation = (event) => {
152
157
  if (!shouldIsolateSortableTouch()) {
153
158
  return;
@@ -163,7 +168,7 @@ var stdin_default = defineComponent({
163
168
  };
164
169
  const initSortable = () => __async(this, null, function* () {
165
170
  var _a;
166
- if (sort.value || !props.sortable || !props.mediaList.length)
171
+ if (sort.value || isAttachmentVariant.value || !props.sortable || !props.mediaList.length)
167
172
  return;
168
173
  yield nextTick();
169
174
  const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
@@ -279,6 +284,19 @@ var stdin_default = defineComponent({
279
284
  };
280
285
  const imageList = computed(() => props.mediaList.filter((media) => media.type === "photo"));
281
286
  const actionOptions = computed(() => {
287
+ if (photoOptionsVisible.value) {
288
+ return [{
289
+ name: "\u62CD\u7167",
290
+ callback: () => {
291
+ mediaPickAction("photo", "take");
292
+ }
293
+ }, {
294
+ name: "\u7167\u7247",
295
+ callback: () => {
296
+ mediaPickAction("photo", "pick");
297
+ }
298
+ }];
299
+ }
282
300
  if (videoOptionsVisible.value) {
283
301
  return [{
284
302
  name: "\u62CD\u6444",
@@ -730,6 +748,40 @@ var stdin_default = defineComponent({
730
748
  }
731
749
  return buttons;
732
750
  };
751
+ const renderAttachmentAdd = () => {
752
+ const canTakePhoto = props.allowTakePhoto;
753
+ const canPickPhoto = props.allowPickPhoto;
754
+ if (!canTakePhoto && !canPickPhoto) {
755
+ return;
756
+ }
757
+ if (props.allowTakePhoto && props.allowPickPhoto) {
758
+ return _createVNode("button", {
759
+ "type": "button",
760
+ "class": bem("attachment-add"),
761
+ "disabled": props.disabled,
762
+ "onClick": () => {
763
+ if (props.disabled) {
764
+ return;
765
+ }
766
+ actionVisible.value = true;
767
+ photoOptionsVisible.value = true;
768
+ videoOptionsVisible.value = false;
769
+ audioOptionsVisible.value = false;
770
+ }
771
+ }, [_createVNode("span", {
772
+ "class": bem("attachment-add-icon")
773
+ }, [_createTextVNode("+")])]);
774
+ }
775
+ const addType = canTakePhoto ? "take" : "pick";
776
+ return _createVNode("button", {
777
+ "type": "button",
778
+ "class": bem("attachment-add"),
779
+ "disabled": props.disabled,
780
+ "onClick": () => mediaPickAction("photo", addType)
781
+ }, [_createVNode("span", {
782
+ "class": bem("attachment-add-icon")
783
+ }, [_createTextVNode("+")])]);
784
+ };
733
785
  const genThumbnailMask = (media) => {
734
786
  const {
735
787
  status,
@@ -896,12 +948,45 @@ var stdin_default = defineComponent({
896
948
  default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), deleteIcon]
897
949
  });
898
950
  });
951
+ const renderAttachmentDelete = (media, index) => {
952
+ if (!media.deletable || media.status === "uploading") {
953
+ return;
954
+ }
955
+ return _createVNode("button", {
956
+ "type": "button",
957
+ "class": bem("attachment-delete"),
958
+ "onClick": (event) => {
959
+ event.stopPropagation();
960
+ onDelete(media, index);
961
+ }
962
+ }, [_createTextVNode("\xD7")]);
963
+ };
964
+ const renderAttachmentMedia = (media) => {
965
+ const index = props.mediaList.indexOf(media);
966
+ return _createVNode("div", {
967
+ "key": media.uniqueCode,
968
+ "class": bem("attachment-item"),
969
+ "onClick": () => previewMedia(index)
970
+ }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), renderAttachmentDelete(media, index)]);
971
+ };
972
+ const renderAttachmentPlaceholder = (media) => _createVNode("div", {
973
+ "key": media.uniqueCode || media.fileName,
974
+ "class": bem("attachment-item")
975
+ }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media)]);
976
+ const renderAttachment = () => _createVNode("div", {
977
+ "class": bem("attachment")
978
+ }, [_createVNode("div", {
979
+ "class": bem("attachment-track")
980
+ }, [attachmentMediaList.value.map(renderAttachmentMedia), attachmentMediaListPlaceholder.value.map(renderAttachmentPlaceholder), renderAttachmentAdd()])]);
899
981
  const selectAction = (action) => {
900
982
  actionVisible.value = false;
983
+ photoOptionsVisible.value = false;
984
+ videoOptionsVisible.value = false;
985
+ audioOptionsVisible.value = false;
901
986
  action.func && action.func();
902
987
  };
903
- watch(() => [props.sortable, props.mediaList.length], (_0) => __async(this, [_0], function* ([sortable, mediaCount]) {
904
- if (!sortable || !mediaCount) {
988
+ watch(() => [props.sortable, props.mediaList.length, props.variant], (_0) => __async(this, [_0], function* ([sortable, mediaCount]) {
989
+ if (isAttachmentVariant.value || !sortable || !mediaCount) {
905
990
  destroySortable();
906
991
  return;
907
992
  }
@@ -925,7 +1010,9 @@ var stdin_default = defineComponent({
925
1010
  }, [props.title]);
926
1011
  const showButtons = props.allowTakePhoto || props.allowPickPhoto || props.allowTakeVideo || props.allowPickVideo || props.allowTakeAudio || props.allowPickAudio || props.allowPickFile;
927
1012
  return _createVNode("div", {
928
- "class": bem()
1013
+ "class": bem({
1014
+ attachment: isAttachmentVariant.value
1015
+ })
929
1016
  }, [title, hiddenInput(), _createVNode(ZtMediaPlayer, _mergeProps({
930
1017
  "show": mediaPlayerVisible.value,
931
1018
  "onUpdate:show": ($event) => mediaPlayerVisible.value = $event,
@@ -941,7 +1028,7 @@ var stdin_default = defineComponent({
941
1028
  "teleport": "body",
942
1029
  "close-on-click-action": true,
943
1030
  "onSelect": selectAction
944
- }, null), _withDirectives(_createVNode("div", {
1031
+ }, null), isAttachmentVariant.value ? renderAttachment() : _createVNode(_Fragment, null, [_withDirectives(_createVNode("div", {
945
1032
  "class": bem("line")
946
1033
  }, [renderButtons(), slots["extend"] ? slots.extend() : ""]), [[_vShow, showButtons]]), _withDirectives(_createVNode(ZtGrid, {
947
1034
  "ref": gridRef,
@@ -961,7 +1048,7 @@ var stdin_default = defineComponent({
961
1048
  "class": bem("grid")
962
1049
  }, {
963
1050
  default: () => [renderMediaListPlaceholder()]
964
- }), [[_vShow, mediaListPlaceholder.value.length]])]);
1051
+ }), [[_vShow, mediaListPlaceholder.value.length]])])]);
965
1052
  };
966
1053
  }
967
1054
  });
package/es/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/es/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/es/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
  };