zartui 3.0.2 → 3.0.3

package/es/date-time-picker/DateTimePicker.mjs

@@ -0,0 +1,248 @@
+import { withDirectives as _withDirectives, vShow as _vShow, mergeProps as _mergeProps, createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { defineComponent, ref, watch } from "vue";
+import { createNamespace, ELLIPSIS, extend, HAPTICS_FEEDBACK, isSameValue, pick } from "../utils/index.mjs";
+import DateTimePicker, { dateTimePickerProps } from "./DateTimePickerWrapper.mjs";
+import { pickerInheritKeys } from "./utils.mjs";
+import Popup from "../popup/Popup.mjs";
+import Toolbar, { pickerToolbarPropKeys, pickerToolbarSlots } from "../picker/PickerToolbar.mjs";
+import Divider from "../divider/Divider.mjs";
+import { showToast } from "../toast/index.mjs";
+const [name, bem] = createNamespace("date-time-picker");
+var stdin_default = defineComponent({
+  name,
+  props: dateTimePickerProps,
+  emits: ["confirm", "cancel", "change", "startChange", "endChange", "update:show", "update:modelValue", "update:startValue", "update:endValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    if (!props.range && props.modelValue.length > 0 && props.modelValue.length !== props.columnsType.length) {
+      console.error("[ZartUI] <DateTimePicker> \u53C2\u6570modelValue\u3001columnsType\u957F\u5EA6\u4E0D\u4E00\u81F4");
+    } else if (props.range) {
+      if (props.startValue.length > 0 && props.startValue.length !== props.columnsType.length) {
+        console.error("[ZartUI] <DateTimePicker> \u53C2\u6570startValue\u3001columnsType\u957F\u5EA6\u4E0D\u4E00\u81F4");
+      }
+      if (props.endValue.length > 0 && props.endValue.length !== props.columnsType.length) {
+        console.error("[ZartUI] <DateTimePicker> \u53C2\u6570endValue\u3001columnsType\u957F\u5EA6\u4E0D\u4E00\u81F4");
+      }
+    }
+    const currentShow = ref(props.show);
+    const currentValue = ref(props.modelValue);
+    const currentStartValue = ref(props.startValue);
+    const currentEndValue = ref(props.endValue);
+    const currentPickerRef = ref();
+    const currentStartPickerRef = ref();
+    const currentEndPickerRef = ref();
+    const rangeSelectedIndex = ref(0);
+    const currentText = ref("");
+    const currentStartText = ref("");
+    const currentEndText = ref("");
+    const genValueText = (dateValue, timeValue) => {
+      let text = "";
+      if (dateValue.length > 0) {
+        text += dateValue.join("/");
+      }
+      if (timeValue.length > 0) {
+        text = text + " " + timeValue.join(":");
+      }
+      return text;
+    };
+    const genOriginValueText = (values) => {
+      const dateValues = [];
+      const timeValues = [];
+      props.columnsType.forEach((type, index) => {
+        if (index < values.length) {
+          if (["year", "month", "day"].includes(type)) {
+            dateValues.push(values[index]);
+          } else if (["hour", "minute", "second"].includes(type)) {
+            timeValues.push(values[index]);
+          }
+        }
+      });
+      return genValueText(dateValues, timeValues);
+    };
+    currentText.value = genOriginValueText(props.modelValue);
+    currentStartText.value = genOriginValueText(props.startValue);
+    currentEndText.value = genOriginValueText(props.endValue);
+    watch(currentShow, (newValue) => {
+      if (newValue !== props.show) {
+        emit("update:show", newValue);
+      }
+    });
+    watch(() => props.show, (newValue) => {
+      if (newValue !== currentShow.value) {
+        currentShow.value = newValue;
+      }
+    });
+    const checkRangeValid = () => {
+      const types = ["year", "month", "day", "hour", "minute", "second"];
+      for (const type of types) {
+        const index = props.columnsType.indexOf(type);
+        if (index >= 0) {
+          if (currentStartValue.value[index] < currentEndValue.value[index]) {
+            return true;
+          } else if (currentStartValue.value[index] > currentEndValue.value[index]) {
+            return false;
+          }
+        }
+      }
+      return true;
+    };
+    const onChange = (...args) => {
+      emit("change", ...args);
+      currentValue.value = args[0];
+      currentText.value = genValueText(args[1], args[2]);
+    };
+    const onStartChange = (...args) => {
+      emit("startChange", ...args);
+      currentStartValue.value = args[0];
+      currentStartText.value = genValueText(args[1], args[2]);
+    };
+    const onEndChange = (...args) => {
+      emit("endChange", ...args);
+      currentEndValue.value = args[0];
+      currentEndText.value = genValueText(args[1], args[2]);
+    };
+    const onClose = () => {
+      emit("update:show", false);
+    };
+    const onCancel = () => {
+      onClose();
+      emit("cancel");
+    };
+    const onConfirm = () => {
+      if (props.popup) {
+        if (props.range) {
+          if (!checkRangeValid()) {
+            showToast("\u7ED3\u675F\u65E5\u671F\u4E0D\u80FD\u65E9\u4E8E\u5F00\u59CB\u65E5\u671F");
+            return;
+          }
+          emit("update:startValue", currentStartValue.value);
+          emit("update:endValue", currentEndValue.value);
+        } else {
+          emit("update:modelValue", currentValue.value);
+        }
+      }
+      onClose();
+      emit("confirm");
+    };
+    const onOpen = () => {
+      var _a, _b, _c;
+      if (!props.range && !isSameValue(currentValue.value, props.modelValue)) {
+        currentValue.value = props.modelValue;
+        currentText.value = genOriginValueText(props.modelValue);
+        (_a = currentPickerRef == null ? void 0 : currentPickerRef.value) == null ? void 0 : _a.onOpen();
+      } else if (props.range) {
+        rangeSelectedIndex.value = 0;
+        if (!isSameValue(currentStartValue.value, props.startValue)) {
+          currentStartValue.value = props.startValue;
+          currentStartText.value = genOriginValueText(props.startValue);
+          (_b = currentStartPickerRef == null ? void 0 : currentStartPickerRef.value) == null ? void 0 : _b.onOpen();
+        }
+        if (!isSameValue(currentEndValue.value, props.endValue)) {
+          currentEndValue.value = props.endValue;
+          currentEndText.value = genOriginValueText(props.endValue);
+          (_c = currentEndPickerRef == null ? void 0 : currentEndPickerRef.value) == null ? void 0 : _c.onOpen();
+        }
+      }
+    };
+    const renderTitle = () => {
+      if (!props.range) {
+        return _createVNode("div", {
+          "class": bem("title-bar")
+        }, [_createVNode("div", {
+          "class": [ELLIPSIS, bem("title")]
+        }, [props.title]), _createVNode("div", {
+          "class": [ELLIPSIS, bem("value")]
+        }, [currentText.value])]);
+      }
+      return _createVNode("div", {
+        "class": bem("title-tab-bar")
+      }, [_createVNode("div", {
+        "class": [HAPTICS_FEEDBACK, bem("title-bar", {
+          selected: rangeSelectedIndex.value === 0,
+          unselected: rangeSelectedIndex.value === 1
+        })],
+        "onClick": () => {
+          rangeSelectedIndex.value = 0;
+        }
+      }, [_createVNode("div", {
+        "class": [ELLIPSIS, bem("title", {
+          selected: rangeSelectedIndex.value === 0,
+          unselected: rangeSelectedIndex.value === 1
+        })]
+      }, [_createTextVNode("\u5F00\u59CB\u65F6\u95F4")]), _createVNode("div", {
+        "class": [ELLIPSIS, bem("value")]
+      }, [currentStartText.value])]), _createVNode("span", {
+        "class": bem("title-separator")
+      }, null), _createVNode("div", {
+        "class": [HAPTICS_FEEDBACK, bem("title-bar", {
+          selected: rangeSelectedIndex.value === 1,
+          unselected: rangeSelectedIndex.value === 0
+        })],
+        "onClick": () => {
+          rangeSelectedIndex.value = 1;
+        }
+      }, [_createVNode("div", {
+        "class": [ELLIPSIS, bem("title", {
+          selected: rangeSelectedIndex.value === 1,
+          unselected: rangeSelectedIndex.value === 0
+        })]
+      }, [_createTextVNode("\u7ED3\u675F\u65F6\u95F4")]), _createVNode("div", {
+        "class": [ELLIPSIS, bem("value")]
+      }, [currentEndText.value])])]);
+    };
+    const renderPicker = () => {
+      if (!props.range) {
+        return _createVNode(DateTimePicker, _mergeProps({
+          "ref": currentPickerRef,
+          "modelValue": props.modelValue,
+          "onUpdate:modelValue": ($event) => props.modelValue = $event,
+          "onChange": onChange,
+          "columnsType": props.columnsType
+        }, extend(pick(props, pickerInheritKeys), {
+          showTitle: false
+        })), null);
+      }
+      return [_withDirectives(_createVNode(DateTimePicker, _mergeProps({
+        "ref": currentStartPickerRef,
+        "modelValue": props.startValue,
+        "onUpdate:modelValue": ($event) => props.startValue = $event,
+        "onChange": onStartChange,
+        "columnsType": props.columnsType
+      }, extend(pick(props, pickerInheritKeys), {
+        showTitle: false
+      })), null), [[_vShow, rangeSelectedIndex.value === 0]]), _withDirectives(_createVNode(DateTimePicker, _mergeProps({
+        "ref": currentEndPickerRef,
+        "modelValue": props.endValue,
+        "onUpdate:modelValue": ($event) => props.endValue = $event,
+        "onChange": onEndChange,
+        "columnsType": props.columnsType
+      }, extend(pick(props, pickerInheritKeys), {
+        showTitle: false
+      })), null), [[_vShow, rangeSelectedIndex.value === 1]])];
+    };
+    const renderToolbar = () => {
+      if (props.showToolbar) {
+        return [_createVNode(Divider, {
+          "style": "margin: 0"
+        }, null), _createVNode(Toolbar, _mergeProps(pick(props, pickerToolbarPropKeys), {
+          "onConfirm": onConfirm,
+          "onCancel": onCancel
+        }), pick(slots, pickerToolbarSlots))];
+      }
+    };
+    return () => _createVNode(Popup, {
+      "round": true,
+      "position": "bottom",
+      "onOpen": onOpen,
+      "show": currentShow.value,
+      "onUpdate:show": ($event) => currentShow.value = $event
+    }, {
+      default: () => [renderTitle(), renderPicker(), renderToolbar()]
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/date-time-picker/DateTimePickerWrapper.d.ts

@@ -0,0 +1,334 @@
+import { PropType } from 'vue';
+import type { DateTimePickerColumnType } from './DateTimePicker';
+export declare const dateTimePickerProps: {
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    filter: {
+        type: PropType<(columnType: string, options: import("../picker").PickerOption[]) => import("../picker").PickerOption[]>;
+    };
+    formatter: {
+        type: PropType<(type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption>;
+        default: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    };
+} & {
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: PropType<import("../utils").Interceptor>;
+    overlayStyle: PropType<import("vue").CSSProperties>;
+    overlayClass: PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    range: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    columnsType: {
+        type: PropType<DateTimePickerColumnType[]>;
+        default: () => string[];
+    };
+    columnsUnit: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    startValue: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    endValue: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+};
+declare const _default: import("vue").DefineComponent<{
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    filter: {
+        type: PropType<(columnType: string, options: import("../picker").PickerOption[]) => import("../picker").PickerOption[]>;
+    };
+    formatter: {
+        type: PropType<(type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption>;
+        default: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    };
+} & {
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: PropType<import("../utils").Interceptor>;
+    overlayStyle: PropType<import("vue").CSSProperties>;
+    overlayClass: PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    range: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    columnsType: {
+        type: PropType<DateTimePickerColumnType[]>;
+        default: () => string[];
+    };
+    columnsUnit: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    startValue: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    endValue: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    filter: {
+        type: PropType<(columnType: string, options: import("../picker").PickerOption[]) => import("../picker").PickerOption[]>;
+    };
+    formatter: {
+        type: PropType<(type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption>;
+        default: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    };
+} & {
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: PropType<import("../utils").Interceptor>;
+    overlayStyle: PropType<import("vue").CSSProperties>;
+    overlayClass: PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    range: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    columnsType: {
+        type: PropType<DateTimePickerColumnType[]>;
+        default: () => string[];
+    };
+    columnsUnit: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    startValue: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    endValue: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    range: boolean;
+    title: string;
+    formatter: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    modelValue: string[];
+    readonly: boolean;
+    show: boolean;
+    overlay: boolean;
+    lockScroll: boolean;
+    lazyRender: boolean;
+    transitionAppear: boolean;
+    closeOnClickOverlay: boolean;
+    popup: boolean;
+    loading: boolean;
+    showTitle: boolean;
+    minDate: Date;
+    maxDate: Date;
+    allowHtml: boolean;
+    optionHeight: string | number;
+    showToolbar: boolean;
+    swipeDuration: string | number;
+    visibleOptionNum: string | number;
+    columnsUnit: string[];
+    columnsType: DateTimePickerColumnType[];
+    startValue: string[];
+    endValue: string[];
+}>;
+export default _default;