zartui 3.0.1 → 3.0.3

package/es/media-player/MediaPlayer.d.ts

@@ -0,0 +1,42 @@
+import type { MediaType } from '../media-picker/type';
+import { ExtractPropTypes } from 'vue';
+declare const mediaPlayerProps: {
+    show: BooleanConstructor;
+    mediaType: {
+        type: import("vue").PropType<MediaType>;
+        default: MediaType;
+    };
+    mediaUrl: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+};
+export declare type MediaPlayerProps = ExtractPropTypes<typeof mediaPlayerProps>;
+declare const _default: import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    mediaType: {
+        type: import("vue").PropType<MediaType>;
+        default: MediaType;
+    };
+    mediaUrl: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:show"[], "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    show: BooleanConstructor;
+    mediaType: {
+        type: import("vue").PropType<MediaType>;
+        default: MediaType;
+    };
+    mediaUrl: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+}, {
+    show: boolean;
+    mediaType: MediaType;
+    mediaUrl: string;
+}>;
+export default _default;

package/es/media-player/MediaPlayer.mjs

@@ -0,0 +1,105 @@
+import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import { createNamespace, isIOS, isWeixin, makeStringProp } from "../utils/index.mjs";
+import { defineComponent, nextTick, ref } from "vue";
+import ZtPopup from "../popup/index.mjs";
+const mediaPlayerProps = {
+  show: Boolean,
+  mediaType: makeStringProp("file"),
+  mediaUrl: makeStringProp("")
+};
+const [name, bem] = createNamespace("media-player");
+var stdin_default = defineComponent({
+  name,
+  props: mediaPlayerProps,
+  emits: ["update:show"],
+  setup(props, {
+    emit
+  }) {
+    const audioRef = ref();
+    const videoRef = ref();
+    const getMediaElement = () => {
+      let player;
+      if (props.mediaType === "audio") {
+        player = audioRef.value;
+      } else if (props.mediaType === "video") {
+        player = videoRef.value;
+      }
+      return player;
+    };
+    const onOpen = () => {
+      nextTick(() => {
+        const player = getMediaElement();
+        if (!player) {
+          return;
+        }
+        if (isWeixin()) {
+          if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
+            WeixinJSBridge.invoke("getNetworkType", {}, () => {
+              player.play();
+            });
+          }
+        } else if (!isIOS()) {
+          player.play();
+        }
+      });
+    };
+    const onClose = () => {
+      emit("update:show", false);
+      const player = getMediaElement();
+      if (!player) {
+        return;
+      }
+      player.pause();
+      player.currentTime = 0;
+      if (props.mediaUrl && !props.mediaUrl.startsWith("http")) {
+        (URL || window.webkitURL).revokeObjectURL(props.mediaUrl);
+      }
+    };
+    const renderTag = () => {
+      if (props.mediaUrl) {
+        if (props.mediaType === "video") {
+          return _createVNode("video", {
+            "class": bem("video"),
+            "src": props.mediaUrl,
+            "ref": videoRef,
+            "controls": true,
+            "autoplay": true,
+            "id": "video",
+            "webkit-playsinline": true,
+            "playsinline": true
+          }, [_createTextVNode("\u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301video\u6807\u7B7E")]);
+        } else if (props.mediaType === "audio") {
+          return _createVNode("audio", {
+            "class": bem("audio"),
+            "src": props.mediaUrl,
+            "ref": audioRef,
+            "controls": true,
+            "autoplay": true,
+            "id": "audio"
+          }, [_createTextVNode("\u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301audio\u6807\u7B7E")]);
+        }
+      }
+    };
+    return () => _createVNode(ZtPopup, {
+      "class": bem(),
+      "show": props.show,
+      "position": "bottom",
+      "overlay": true,
+      "safe-area-inset-bottom": true,
+      "close-on-popstate": true,
+      "onOpen": onOpen,
+      "onClickOverlay": onClose
+    }, {
+      default: () => [renderTag(), _createVNode("div", {
+        "class": bem("cancel")
+      }, [_createVNode("button", {
+        "type": "button",
+        "class": bem("cancel-btn"),
+        "onClick": onClose
+      }, [_createTextVNode("\u5173\u95ED")])])]
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/media-player/index.css

@@ -0,0 +1 @@
+.zt-media-player{background-color:var(--zt-background);font-size:0}.zt-media-player__video{width:100%;height:400px;max-height:70%;background-color:rgba(0,0,0,.8)}.zt-media-player__audio{width:100%}.zt-media-player__cancel{padding:8px 16px;color:var(--zt-text-color)}.zt-media-player__cancel-btn{width:100%;border:none;cursor:pointer;background-color:var(--zt-gray-a04);border-radius:20px;height:44px;font-size:16px;color:var(--zt-text-color);line-height:24px}.zt-media-player__cancel-btn:active{opacity:var(--zt-active-opacity)}

package/es/media-player/index.d.ts

@@ -0,0 +1,34 @@
+export declare const MediaPlayer: import("../utils").WithInstall<import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    mediaType: {
+        type: import("vue").PropType<import("../media-picker/type").MediaType>;
+        default: import("../media-picker/type").MediaType;
+    };
+    mediaUrl: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:show"[], "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    mediaType: {
+        type: import("vue").PropType<import("../media-picker/type").MediaType>;
+        default: import("../media-picker/type").MediaType;
+    };
+    mediaUrl: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+}, {
+    show: boolean;
+    mediaType: import("../media-picker/type").MediaType;
+    mediaUrl: string;
+}>>;
+export default MediaPlayer;
+export type { MediaPlayerProps } from './MediaPlayer';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtMediaPlayer: typeof MediaPlayer;
+    }
+}

package/es/media-player/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _MediaPlayer from "./MediaPlayer.mjs";
+const MediaPlayer = withInstall(_MediaPlayer);
+var stdin_default = MediaPlayer;
+export {
+  MediaPlayer,
+  stdin_default as default
+};

package/es/media-player/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/media-player/style/index.mjs

@@ -0,0 +1,6 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../../overlay/index.css";
+import "../../popup/index.css";
+import "../index.css";

package/es/multiple-picker/MultiplePicker.d.ts

@@ -0,0 +1,167 @@
+import { ExtractPropTypes } from 'vue';
+import { PickerOption } from './types';
+declare const multiplePickerProps: {
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    itemHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+    showPicker: BooleanConstructor;
+    allowHtml: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: import("vue").PropType<PickerOption[]>;
+        default: () => PickerOption[];
+    };
+    toolbarPosition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    valueKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    selectedIndex: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+};
+export declare type MultiplePickerProps = ExtractPropTypes<typeof multiplePickerProps>;
+declare const _default: import("vue").DefineComponent<{
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    itemHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+    showPicker: BooleanConstructor;
+    allowHtml: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: import("vue").PropType<PickerOption[]>;
+        default: () => PickerOption[];
+    };
+    toolbarPosition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    valueKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    selectedIndex: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "cancel" | "confirm" | "update:showPicker" | "update:selectedIndex")[], "change" | "cancel" | "confirm" | "update:showPicker" | "update:selectedIndex", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    itemHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+    showPicker: BooleanConstructor;
+    allowHtml: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: import("vue").PropType<PickerOption[]>;
+        default: () => PickerOption[];
+    };
+    toolbarPosition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    valueKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    selectedIndex: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    "onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:selectedIndex"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly: boolean;
+    closeOnClickOverlay: boolean;
+    closeOnPopstate: boolean;
+    loading: boolean;
+    options: PickerOption[];
+    allowHtml: boolean;
+    showToolbar: boolean;
+    toolbarPosition: string;
+    showPicker: boolean;
+    valueKey: string;
+    itemHeight: string | number;
+    columnCounts: number;
+    selectedIndex: number[];
+}>;
+export default _default;

package/es/multiple-picker/MultiplePicker.mjs

@@ -0,0 +1,170 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, watch, computed, defineComponent } from "vue";
+import { createNamespace, makeArrayProp, makeNumberProp, makeNumericProp, makeStringProp, truthProp } from "../utils/index.mjs";
+import { unitToPx } from "../utils/format.mjs";
+import Loading from "../loading/index.mjs";
+import MultiplePickerOptions from "./MultiplePickerOptions.mjs";
+import Popup from "../popup/index.mjs";
+import Button from "../button/index.mjs";
+const [name, bem] = createNamespace("multiple-picker");
+const multiplePickerProps = {
+  title: String,
+  loading: Boolean,
+  readonly: Boolean,
+  itemHeight: makeNumericProp(0),
+  cancelButtonText: String,
+  confirmButtonText: String,
+  showPicker: Boolean,
+  allowHtml: truthProp,
+  closeOnPopstate: truthProp,
+  closeOnClickOverlay: truthProp,
+  showToolbar: truthProp,
+  options: makeArrayProp(),
+  toolbarPosition: makeStringProp("bottom"),
+  valueKey: makeStringProp("text"),
+  columnCounts: makeNumberProp(3),
+  selectedIndex: makeArrayProp([])
+};
+var stdin_default = defineComponent({
+  name,
+  props: multiplePickerProps,
+  emits: ["cancel", "confirm", "change", "update:showPicker", "update:selectedIndex"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const confirmIndexes = ref(props.selectedIndex);
+    const pickerOptions = ref();
+    const currentShow = ref(props.showPicker);
+    const DEFAULT_ITEM_HEIGHT = ref(36);
+    watch(currentShow, (newValue) => {
+      if (newValue !== props.showPicker) {
+        emit("update:showPicker", newValue);
+      }
+      confirmIndexes.value = props.selectedIndex;
+    });
+    watch(() => props.showPicker, (newValue) => {
+      var _a;
+      if (newValue !== currentShow.value) {
+        currentShow.value = newValue;
+      }
+      (_a = pickerOptions.value) == null ? void 0 : _a.setConfirmIndex(confirmIndexes.value);
+    });
+    const itemPxHeight = computed(() => {
+      props.itemHeight ? unitToPx(Number(props.itemHeight)) : DEFAULT_ITEM_HEIGHT;
+    });
+    const onCancel = () => {
+      emit("update:showPicker", false);
+      emit("cancel");
+    };
+    const updateShow = (value) => emit("update:showPicker", value);
+    const getOptions = () => {
+      const indexes = confirmIndexes.value;
+      const result = [];
+      indexes == null ? void 0 : indexes.forEach((index) => {
+        if (index > -1 && index < props.options.length && props.options[index]) {
+          result.push({
+            text: props.options[index].text,
+            value: props.options[index].value,
+            initialIndex: index
+          });
+        }
+      });
+      return result;
+    };
+    const onChange = () => emit("change", getOptions());
+    const confirm = () => {
+      const options = getOptions();
+      emit("confirm", options);
+    };
+    const genTitle = () => {
+      if (slots.title) {
+        return slots.title();
+      }
+      return _createVNode("div", {
+        "class": ["zt-ellipsis", bem("title")]
+      }, [props.title ? props.title : "\u8BF7\u9009\u62E9"]);
+    };
+    const genCancel = () => {
+      const text = props.cancelButtonText || "\u53D6\u6D88";
+      return _createVNode(Button, {
+        "size": "normal",
+        "block": true,
+        "style": {
+          marginRigth: "4px",
+          backgroundColor: "white"
+        },
+        "onClick": onCancel
+      }, {
+        default: () => [slots.cancel ? slots.cancel() : text]
+      });
+    };
+    const genConfirm = () => {
+      const text = props.confirmButtonText || "\u786E\u5B9A";
+      return _createVNode(Button, {
+        "type": "primary",
+        "size": "normal",
+        "block": true,
+        "style": {
+          marginLeft: "8px"
+        },
+        "onClick": confirm
+      }, {
+        default: () => [slots.confirm ? slots.confirm() : text]
+      });
+    };
+    const genToolbar = () => {
+      if (props.showToolbar) {
+        return _createVNode("div", {
+          "class": bem("toolbar")
+        }, [slots.toolbar ? slots.toolbar() : [genCancel(), genConfirm()]]);
+      }
+    };
+    const genOptionItems = () => {
+      let formatOptions = [];
+      if (props.options && props.options[0] && typeof props.options[0] !== "object") {
+        formatOptions = props.options.map((v) => ({
+          value: v,
+          text: v
+        }));
+      } else {
+        formatOptions = props.options;
+      }
+      return _createVNode(MultiplePickerOptions, {
+        "ref": pickerOptions,
+        "currentIndexes": confirmIndexes.value,
+        "onUpdate:currentIndexes": ($event) => confirmIndexes.value = $event,
+        "columnCounts": props.columnCounts,
+        "initialOptions": formatOptions,
+        "allowHtml": props.allowHtml,
+        "valueKey": props.valueKey,
+        "readonly": props.readonly,
+        "itemHeight": Number(itemPxHeight),
+        "onChange": onChange
+      }, {
+        option: slots.option
+      });
+    };
+    const genOptions = () => _createVNode("div", {
+      "class": bem("options")
+    }, [genOptionItems()]);
+    const renderMultiplePicker = () => _createVNode("div", {
+      "class": bem()
+    }, [genTitle(), props.loading ? _createVNode(Loading, {
+      "class": bem("loading")
+    }, null) : "", genOptions(), props.toolbarPosition === "bottom" ? genToolbar() : ""]);
+    return () => _createVNode(Popup, {
+      "show": currentShow.value,
+      "onUpdate:show": [($event) => currentShow.value = $event, updateShow],
+      "round": true,
+      "position": "bottom",
+      "closeOnPopstate": props.closeOnPopstate,
+      "closeOnClickOverlay": props.closeOnClickOverlay
+    }, {
+      default: renderMultiplePicker
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/multiple-picker/MultiplePickerOptions.d.ts

@@ -0,0 +1,85 @@
+import { ExtractPropTypes } from 'vue';
+declare const multiplePickerOptionsProps: {
+    valueKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    itemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialOptions: {
+        type: import("vue").PropType<object[]>;
+        default: () => object[];
+    };
+    currentIndexes: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+};
+export declare type MultiplePickerOptionsProps = ExtractPropTypes<typeof multiplePickerOptionsProps>;
+declare const _default: import("vue").DefineComponent<{
+    valueKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    itemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialOptions: {
+        type: import("vue").PropType<object[]>;
+        default: () => object[];
+    };
+    currentIndexes: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:currentIndexes")[], "change" | "update:currentIndexes", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    valueKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    itemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    initialOptions: {
+        type: import("vue").PropType<object[]>;
+        default: () => object[];
+    };
+    currentIndexes: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:currentIndexes"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly: boolean;
+    allowHtml: boolean;
+    valueKey: string;
+    itemHeight: number;
+    columnCounts: number;
+    initialOptions: object[];
+    currentIndexes: number[];
+}>;
+export default _default;