zartui 3.0.2 → 3.0.3

package/es/time-picker/TimePicker.d.ts

@@ -0,0 +1,286 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { PickerFieldNames, PickerOption } from '../picker';
+export declare type TimePickerColumnType = 'hour' | 'minute' | 'second';
+export declare const timePickerProps: {
+    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: PickerOption[]) => PickerOption[]>;
+    };
+    formatter: {
+        type: PropType<(type: string, option: PickerOption) => PickerOption>;
+        default: (type: string, option: PickerOption) => PickerOption;
+    };
+} & {
+    minHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    columnsUnit: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    columnsFieldNames: PropType<PickerFieldNames>;
+    columnsType: {
+        type: PropType<TimePickerColumnType[]>;
+        default: () => string[];
+    };
+};
+export declare type TimePickerProps = ExtractPropTypes<typeof timePickerProps>;
+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: PickerOption[]) => PickerOption[]>;
+    };
+    formatter: {
+        type: PropType<(type: string, option: PickerOption) => PickerOption>;
+        default: (type: string, option: PickerOption) => PickerOption;
+    };
+} & {
+    minHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    columnsUnit: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    columnsFieldNames: PropType<PickerFieldNames>;
+    columnsType: {
+        type: PropType<TimePickerColumnType[]>;
+        default: () => string[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "clickOption")[], "update:modelValue" | "change" | "clickOption", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<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: PickerOption[]) => PickerOption[]>;
+    };
+    formatter: {
+        type: PropType<(type: string, option: PickerOption) => PickerOption>;
+        default: (type: string, option: PickerOption) => PickerOption;
+    };
+} & {
+    minHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    columnsUnit: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    columnsFieldNames: PropType<PickerFieldNames>;
+    columnsType: {
+        type: PropType<TimePickerColumnType[]>;
+        default: () => string[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClickOption?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    formatter: (type: string, option: PickerOption) => PickerOption;
+    modelValue: string[];
+    readonly: boolean;
+    loading: boolean;
+    showTitle: boolean;
+    allowHtml: boolean;
+    optionHeight: string | number;
+    showToolbar: boolean;
+    swipeDuration: string | number;
+    visibleOptionNum: string | number;
+    columnsUnit: string[];
+    minHour: string | number;
+    maxHour: string | number;
+    minMinute: string | number;
+    maxMinute: string | number;
+    minSecond: string | number;
+    maxSecond: string | number;
+    columnsType: TimePickerColumnType[];
+}>;
+export default _default;

package/es/time-picker/TimePicker.mjs

@@ -0,0 +1,172 @@
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { ref, watch, computed, defineComponent } from "vue";
+import { extend, createNamespace, makeNumericProp, isSameValue, makeArrayProp, unitToPx, preventDefault } from "../utils/index.mjs";
+import { genOptions, sharedProps } from "../date-time-picker/utils.mjs";
+import { useChildren, useEventListener } from "@zartui/use";
+import { assignDefaultFields, findOptionByValue, formatCascadeColumns, getColumnsType, getFirstEnabledOption, isOptionExist } from "../picker/utils.mjs";
+import TimePickerColumn, { TIME_PICKER_KEY } from "./TimePickerColumn.mjs";
+const [name, bem] = createNamespace("time-picker");
+const timePickerProps = extend({}, sharedProps, {
+  minHour: makeNumericProp(0),
+  maxHour: makeNumericProp(23),
+  minMinute: makeNumericProp(0),
+  maxMinute: makeNumericProp(59),
+  minSecond: makeNumericProp(0),
+  maxSecond: makeNumericProp(59),
+  optionHeight: makeNumericProp(76),
+  visibleOptionNum: makeNumericProp(1),
+  columnsUnit: makeArrayProp(),
+  columnsFieldNames: Object,
+  columnsType: {
+    type: Array,
+    default: () => ["hour", "minute"]
+  }
+});
+var stdin_default = defineComponent({
+  name,
+  props: timePickerProps,
+  emits: ["clickOption", "change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const columns = computed(() => props.columnsType.map((type) => {
+      const {
+        filter,
+        formatter
+      } = props;
+      switch (type) {
+        case "hour":
+          return genOptions(+props.minHour, +props.maxHour, type, formatter, filter);
+        case "minute":
+          return genOptions(+props.minMinute, +props.maxMinute, type, formatter, filter);
+        case "second":
+          return genOptions(+props.minSecond, +props.maxSecond, type, formatter, filter);
+        default:
+          throw new Error(`[ZartUI] DatePicker: unsupported columns type: ${type}`);
+      }
+    }));
+    const columnsRef = ref();
+    const selectedValues = ref(props.modelValue.slice(0));
+    const {
+      linkChildren
+    } = useChildren(TIME_PICKER_KEY);
+    linkChildren();
+    const fields = computed(() => assignDefaultFields(props.columnsFieldNames));
+    const optionHeight = computed(() => unitToPx(props.optionHeight));
+    const columnsType = computed(() => getColumnsType(columns.value, fields.value));
+    const currentColumns = computed(() => {
+      switch (columnsType.value) {
+        case "multiple":
+          return columns.value;
+        case "cascade":
+          return formatCascadeColumns(columns.value, fields.value, selectedValues);
+        default:
+          return [columns.value];
+      }
+    });
+    const selectedOptions = computed(() => currentColumns.value.map((options, index) => findOptionByValue(options, selectedValues.value[index], fields.value)));
+    const setValue = (index, value) => {
+      const strValue = String(value);
+      if (selectedValues.value[index] !== strValue) {
+        const newValues = selectedValues.value.slice(0);
+        newValues[index] = strValue;
+        selectedValues.value = newValues;
+      }
+    };
+    const getEventParams = () => ({
+      selectedValues: selectedValues.value.slice(0),
+      selectedOptions: selectedOptions.value
+    });
+    const onChange = (value, columnIndex) => {
+      setValue(columnIndex, value);
+      if (columnsType.value === "cascade") {
+        selectedValues.value.forEach((value2, index) => {
+          const options = currentColumns.value[index];
+          if (!isOptionExist(options, value2, fields.value)) {
+            setValue(index, options.length ? options[0][fields.value.value] : void 0);
+          }
+        });
+      }
+      emit("change", extend({
+        columnIndex
+      }, getEventParams()));
+    };
+    const onClickOption = (currentOption, columnIndex) => emit("clickOption", extend({
+      columnIndex,
+      currentOption
+    }, getEventParams()));
+    const hasUnit = props.columnsUnit.length === currentColumns.value.length;
+    const renderColumnItems = () => currentColumns.value.map((options, columnIndex) => _createVNode(_Fragment, null, [_createVNode(TimePickerColumn, {
+      "value": selectedValues.value[columnIndex],
+      "fields": fields.value,
+      "options": options,
+      "unit": hasUnit ? props.columnsUnit[columnIndex] : "",
+      "columnCount": currentColumns.value.length,
+      "readonly": props.readonly,
+      "allowHtml": props.allowHtml,
+      "optionHeight": optionHeight.value,
+      "swipeDuration": props.swipeDuration,
+      "onChange": (value) => onChange(value, columnIndex),
+      "onClickOption": (option) => onClickOption(option, columnIndex)
+    }, {
+      option: slots.option
+    })]));
+    const renderSeparators = () => {
+      const separatorCount = currentColumns.value && currentColumns.value.length - 1;
+      if (separatorCount > 0) {
+        return _createVNode("div", {
+          "class": bem("separator")
+        }, [Array(separatorCount).fill(null).map(() => _createVNode("span", {
+          "class": bem("colon")
+        }, null))]);
+      }
+    };
+    const renderColumns = () => {
+      const wrapHeight = optionHeight.value * +props.visibleOptionNum;
+      const columnsStyle = {
+        height: `${wrapHeight}px`
+      };
+      return _createVNode("div", {
+        "ref": columnsRef,
+        "class": bem("columns"),
+        "style": columnsStyle
+      }, [renderSeparators(), renderColumnItems()]);
+    };
+    watch(currentColumns, (columns2) => {
+      columns2.forEach((options, index) => {
+        if (options.length && !isOptionExist(options, selectedValues.value[index], fields.value)) {
+          setValue(index, getFirstEnabledOption(options)[fields.value.value]);
+        }
+      });
+    }, {
+      immediate: true
+    });
+    let lastEmittedModelValue;
+    watch(() => props.modelValue, (newValues) => {
+      if (!isSameValue(newValues, selectedValues.value) && !isSameValue(newValues, lastEmittedModelValue)) {
+        selectedValues.value = newValues.slice(0);
+      }
+    }, {
+      deep: true
+    });
+    watch(selectedValues, (newValues) => {
+      if (!isSameValue(newValues, props.modelValue)) {
+        lastEmittedModelValue = newValues.slice(0);
+        emit("update:modelValue", lastEmittedModelValue);
+      }
+    }, {
+      immediate: true
+    });
+    useEventListener("touchmove", preventDefault, {
+      target: columnsRef
+    });
+    return () => _createVNode("div", {
+      "class": bem()
+    }, [renderColumns()]);
+  }
+});
+export {
+  stdin_default as default,
+  timePickerProps
+};

package/es/time-picker/TimePickerColumn.d.ts

@@ -0,0 +1,71 @@
+import { InjectionKey, PropType } from 'vue';
+import { PickerFieldNames, PickerOption } from '../picker';
+import { PickerColumnProvide } from '../picker/types';
+export declare const TIME_PICKER_KEY: InjectionKey<PickerColumnProvide>;
+declare const _default: import("vue").DefineComponent<{
+    value: (NumberConstructor | StringConstructor)[];
+    unit: {
+        type: PropType<string>;
+        default: string;
+    };
+    columnCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fields: {
+        type: PropType<Required<PickerFieldNames>>;
+        required: true;
+    };
+    options: {
+        type: PropType<PickerOption[]>;
+        default: () => PickerOption[];
+    };
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: NumberConstructor;
+        required: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "clickOption")[], "change" | "clickOption", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: (NumberConstructor | StringConstructor)[];
+    unit: {
+        type: PropType<string>;
+        default: string;
+    };
+    columnCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fields: {
+        type: PropType<Required<PickerFieldNames>>;
+        required: true;
+    };
+    options: {
+        type: PropType<PickerOption[]>;
+        default: () => PickerOption[];
+    };
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: NumberConstructor;
+        required: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        required: true;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onClickOption?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly: boolean;
+    columnCount: number;
+    options: PickerOption[];
+    allowHtml: boolean;
+    unit: string;
+}>;
+export default _default;