@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/date-picker/RangePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,461 @@
+import { cls } from "../_util/index.js";
+import { useControlled } from "../_util/hooks/useControlled.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useLocale } from "../locale/index.js";
+import PickerPopup_default from "../picker/PickerPopup.js";
+import PickerTrigger_default from "../picker/PickerTrigger.js";
+import { usePickerField } from "../picker/usePickerField.js";
+import Segmented_default from "../segmented/Segmented.js";
+import DatePickerView_default from "./DatePickerView.js";
+import { createDateContext, formatDate, settleDate, toDayjs, toValue as toValue$1 } from "./util.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, markRaw, mergeProps, normalizeClass, openBlock, reactive, ref, renderList, renderSlot, shallowRef, toDisplayString, toRef, unref, watch, withCtx } from "vue";
+import { SwapRightOutlined } from "@antdv-next/icons";
+import dayjs from "dayjs";
+// src/date-picker/RangePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "am-range-picker-separator"
+};
+var _hoisted_2 = ["data-range"];
+var _hoisted_3 = { class: "am-range-picker-tabs" };
+var _hoisted_4 = { class: "am-range-picker-tab-title" };
+var RangePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmRangePicker",
+	inheritAttrs: false,
+	__name: "RangePicker",
+	props: {
+		value: {},
+		defaultValue: {},
+		placeholder: {},
+		separator: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		allowEmpty: {
+			type: [Boolean, Array],
+			default: false
+		},
+		disabled: {
+			type: [Boolean, Array],
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		status: {},
+		variant: {},
+		size: {},
+		trigger: {
+			type: Boolean,
+			default: true
+		},
+		suffixIcon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		id: {},
+		title: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		okText: {},
+		cancelText: {},
+		getContainer: {
+			type: [
+				String,
+				Function,
+				Boolean
+			],
+			default: void 0
+		},
+		zIndex: {},
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			default: false
+		},
+		rootClass: {},
+		classes: {},
+		styles: {},
+		picker: { default: "date" },
+		showTime: {
+			type: [Boolean, Object],
+			default: false
+		},
+		format: {},
+		valueFormat: {},
+		minDate: {},
+		maxDate: {},
+		disabledDate: {},
+		disabledTime: {},
+		defaultPickerValue: {},
+		use12Hours: {
+			type: Boolean,
+			default: void 0
+		},
+		hourStep: {},
+		minuteStep: {},
+		secondStep: {},
+		filter: {},
+		renderLabel: {},
+		itemHeight: {},
+		visibleItemCount: {},
+		virtual: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"update:value",
+		"update:open",
+		"openChange",
+		"change",
+		"calendarChange",
+		"confirm",
+		"cancel",
+		"clear"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const SIDES = [0, 1];
+		const RANGES = ["start", "end"];
+		const locale = useLocale("DatePicker");
+		const ctx = computed(() => createDateContext(props, locale.value));
+		const fallbackFormat = computed(() => typeof ctx.value.format === "string" ? ctx.value.format : void 0);
+		const parse = (value) => toDayjs(value, props.valueFormat, fallbackFormat.value);
+		const fieldProps = reactive({
+			open: toRef(props, "open"),
+			defaultOpen: toRef(props, "defaultOpen"),
+			disabled: computed(() => Array.isArray(props.disabled) ? props.disabled[0] && props.disabled[1] || void 0 : props.disabled)
+		});
+		const { open, setOpen, disabled, commit } = usePickerField(fieldProps, (value) => {
+			emit("update:open", value);
+			emit("openChange", value);
+		});
+		const sideDisabled = computed(() => {
+			const [start, end] = Array.isArray(props.disabled) ? props.disabled : [false, false];
+			return [disabled.value || !!start, disabled.value || !!end];
+		});
+		const allowEmpty = computed(() => Array.isArray(props.allowEmpty) ? [!!props.allowEmpty[0], !!props.allowEmpty[1]] : [!!props.allowEmpty, !!props.allowEmpty]);
+		const [value, setValue] = useControlled(props, "value", { defaultValue: () => props.defaultValue ?? null });
+		const valueDates = computed(() => [parse(value.value?.[0]), parse(value.value?.[1])]);
+		const texts = computed(() => [formatDate(ctx.value, valueDates.value[0]), formatDate(ctx.value, valueDates.value[1])]);
+		const hasValue = computed(() => !!(valueDates.value[0] || valueDates.value[1]));
+		const label = computed(() => hasValue.value ? texts.value.join(" ~ ") : "");
+		const placeholders = computed(() => {
+			const fallback = props.picker === "time" ? [locale.value.rangeStart, locale.value.rangeEnd] : locale.value.rangePlaceholder;
+			return [props.placeholder?.[0] ?? fallback[0], props.placeholder?.[1] ?? fallback[1]];
+		});
+		const active = ref(0);
+		/** tabs the user has seen since the popup opened */
+		const visited = ref([false, false]);
+		/** dates of the two wheels while the popup is open */
+		const pending = shallowRef();
+		/** tab to open on, set by the half of the trigger that was tapped */
+		let requested;
+		const earlier = (a, b) => a && b ? a.isBefore(b) ? a : b : a ?? b;
+		const later = (a, b) => a && b ? a.isAfter(b) ? a : b : a ?? b;
+		/** start wheel: capped by a disabled (fixed) end */
+		const startCtx = computed(() => {
+			const fixedEnd = sideDisabled.value[1] ? valueDates.value[1] : void 0;
+			return fixedEnd ? createDateContext({
+				...props,
+				maxDate: earlier(fixedEnd, toDayjs(props.maxDate, props.valueFormat))
+			}, locale.value) : ctx.value;
+		});
+		/** end wheel: its min follows the chosen start */
+		const endCtx = computed(() => {
+			const start = sideDisabled.value[0] ? valueDates.value[0] : pending.value?.[0];
+			return start ? createDateContext({
+				...props,
+				minDate: later(start, toDayjs(props.minDate, props.valueFormat))
+			}, locale.value) : ctx.value;
+		});
+		const activeCtx = computed(() => active.value === 0 ? startCtx.value : endCtx.value);
+		function initPending() {
+			const [startValue, endValue] = valueDates.value;
+			let start = startValue ?? parse(props.defaultPickerValue) ?? dayjs();
+			if (!startValue && endValue && start.isAfter(endValue)) start = endValue;
+			start = settleDate(startCtx.value, start);
+			pending.value = [start, start];
+			pending.value = [start, settleDate(endCtx.value, endValue ?? start)];
+		}
+		function enabledSide(side) {
+			return sideDisabled.value[side] && !sideDisabled.value[1 - side] ? 1 - side : side;
+		}
+		function activate(side) {
+			active.value = side;
+			if (!visited.value[side]) {
+				const next = [...visited.value];
+				next[side] = true;
+				visited.value = next;
+			}
+		}
+		watch(open, (val) => {
+			if (val) {
+				initPending();
+				visited.value = [false, false];
+				activate(enabledSide(requested ?? 0));
+			}
+			requested = void 0;
+		}, { immediate: true });
+		watch(valueDates, () => {
+			if (open.value) initPending();
+		});
+		/** what a confirm would commit: disabled sides keep their value, untouched `allowEmpty` sides stay empty */
+		const resolved = computed(() => {
+			const side = (index) => {
+				const current = valueDates.value[index] ?? null;
+				if (sideDisabled.value[index]) return current;
+				if (!current && allowEmpty.value[index] && !visited.value[index]) return null;
+				return pending.value?.[index] ?? current;
+			};
+			return [side(0), side(1)];
+		});
+		const resolvedTexts = computed(() => resolved.value.map((date) => formatDate(ctx.value, date ?? void 0)));
+		const toValues = (dates) => dates.map((date) => date ? toValue$1(ctx.value, markRaw(date)) : null);
+		const toStrings = (dates) => dates.map((date) => formatDate(ctx.value, date ?? void 0));
+		function update(dates) {
+			const next = dates && (dates[0] || dates[1]) ? toValues(dates) : null;
+			setValue(next);
+			emit("update:value", next);
+			emit("change", next, dates ? toStrings(dates) : ["", ""]);
+			commit();
+		}
+		function onSelect(next) {
+			if (!pending.value) return;
+			const side = active.value;
+			const date = next;
+			if (side === 1) pending.value = [pending.value[0], date];
+			else {
+				const end = !visited.value[1] && !valueDates.value[1] ? date : pending.value[1];
+				pending.value = [date, end];
+				if (!sideDisabled.value[1]) pending.value = [date, settleDate(endCtx.value, end)];
+			}
+			emit("calendarChange", toValues(resolved.value), toStrings(resolved.value), { range: RANGES[side] });
+		}
+		function onConfirm() {
+			const dates = resolved.value;
+			if (SIDES.some((index) => {
+				const prev = valueDates.value[index];
+				const next = dates[index];
+				return prev && next ? !prev.isSame(next) : !!prev !== !!next;
+			})) update(dates);
+			emit("confirm", toValues(dates), toStrings(dates));
+			setOpen(false);
+		}
+		function onCancel() {
+			emit("cancel");
+			setOpen(false);
+		}
+		function onClear() {
+			update(null);
+			emit("clear");
+		}
+		function toggle(next, range) {
+			const target = typeof next === "boolean" ? next : !open.value;
+			if (target) requested = range === "end" ? 1 : 0;
+			setOpen(target);
+		}
+		function onTriggerClick(event) {
+			const half = event.target?.closest?.("[data-range]");
+			toggle(void 0, half?.dataset.range === "end" ? "end" : "start");
+		}
+		const tabOptions = computed(() => SIDES.map((side) => ({
+			value: side,
+			label: side === 0 ? locale.value.rangeStart : locale.value.rangeEnd,
+			disabled: sideDisabled.value[side]
+		})));
+		function onTabChange(side) {
+			activate(side === 1 ? 1 : 0);
+		}
+		const triggerClasses = computed(() => ({
+			...props.classes,
+			content: cls("am-range-picker-content", props.classes?.content)
+		}));
+		__expose({ toggle });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", {
+				open: unref(open),
+				value: unref(value),
+				label: label.value,
+				labels: texts.value,
+				disabled: unref(disabled),
+				toggle
+			}, void 0, void 0, 0) : __props.trigger ? (openBlock(), createBlock(PickerTrigger_default, mergeProps({ key: 1 }, _ctx.$attrs, {
+				id: __props.id,
+				class: "am-range-picker",
+				label: label.value || placeholders.value.join(" ~ "),
+				open: unref(open),
+				disabled: unref(disabled),
+				"allow-clear": __props.allowClear && hasValue.value,
+				status: __props.status,
+				variant: __props.variant,
+				size: __props.size,
+				"suffix-icon": __props.suffixIcon,
+				"root-class": __props.rootClass,
+				classes: triggerClasses.value,
+				styles: __props.styles,
+				onClick: onTriggerClick,
+				onClear
+			}), createSlots({
+				default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(SIDES, (side) => {
+					return openBlock(), createElementBlock(Fragment, { key: side }, [side === 1 ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "separator", {}, () => [__props.separator !== void 0 ? (openBlock(), createBlock(unref(RenderNode_default), {
+						key: 0,
+						node: __props.separator
+					}, null, 8, ["node"])) : (openBlock(), createBlock(unref(SwapRightOutlined), { key: 1 }))])])) : createCommentVNode("", true), createElementVNode("span", {
+						class: normalizeClass(["am-range-picker-input", {
+							"am-range-picker-input-placeholder": !texts.value[side],
+							"am-range-picker-input-active": unref(open) && active.value === side,
+							"am-range-picker-input-disabled": sideDisabled.value[side]
+						}]),
+						"data-range": RANGES[side]
+					}, toDisplayString(texts.value[side] || placeholders.value[side]), 11, _hoisted_2)], 64);
+				}), 64))]),
+				_: 2
+			}, [_ctx.$slots.suffixIcon ? {
+				name: "suffixIcon",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "suffixIcon")]),
+				key: "0"
+			} : void 0]), 1040, [
+				"id",
+				"label",
+				"open",
+				"disabled",
+				"allow-clear",
+				"status",
+				"variant",
+				"size",
+				"suffix-icon",
+				"root-class",
+				"classes",
+				"styles"
+			])) : createCommentVNode("", true), createVNode(PickerPopup_default, {
+				open: unref(open),
+				title: __props.title,
+				"ok-text": __props.okText,
+				"cancel-text": __props.cancelText,
+				"get-container": __props.getContainer,
+				"z-index": __props.zIndex,
+				"mask-closable": __props.maskClosable,
+				"destroy-on-hidden": __props.destroyOnHidden,
+				"root-class": __props.rootClass,
+				"popup-class": __props.classes?.popup,
+				"popup-style": __props.styles?.popup,
+				onConfirm,
+				onCancel
+			}, createSlots({
+				default: withCtx(() => [
+					createElementVNode("div", _hoisted_3, [createVNode(Segmented_default, {
+						block: "",
+						value: active.value,
+						options: tabOptions.value,
+						classes: {
+							item: "am-range-picker-tab",
+							label: "am-range-picker-tab-label"
+						},
+						onChange: onTabChange
+					}, {
+						labelRender: withCtx((option) => [createElementVNode("span", _hoisted_4, toDisplayString(option.label), 1), createElementVNode("span", { class: normalizeClass(["am-range-picker-tab-value", { "am-range-picker-tab-value-empty": !resolvedTexts.value[option.value] }]) }, toDisplayString(resolvedTexts.value[option.value] || placeholders.value[option.value]), 3)]),
+						_: 1
+					}, 8, ["value", "options"])]),
+					renderSlot(_ctx.$slots, "header"),
+					pending.value ? (openBlock(), createBlock(DatePickerView_default, {
+						key: active.value,
+						value: pending.value[active.value],
+						picker: __props.picker,
+						"show-time": __props.showTime,
+						format: __props.format,
+						"min-date": activeCtx.value.min,
+						"max-date": activeCtx.value.max,
+						"disabled-date": __props.disabledDate,
+						"disabled-time": __props.disabledTime,
+						"use12-hours": __props.use12Hours,
+						"hour-step": __props.hourStep,
+						"minute-step": __props.minuteStep,
+						"second-step": __props.secondStep,
+						filter: __props.filter,
+						"render-label": __props.renderLabel,
+						"item-height": __props.itemHeight,
+						"visible-item-count": __props.visibleItemCount,
+						virtual: __props.virtual,
+						onChange: onSelect
+					}, null, 8, [
+						"value",
+						"picker",
+						"show-time",
+						"format",
+						"min-date",
+						"max-date",
+						"disabled-date",
+						"disabled-time",
+						"use12-hours",
+						"hour-step",
+						"minute-step",
+						"second-step",
+						"filter",
+						"render-label",
+						"item-height",
+						"visible-item-count",
+						"virtual"
+					])) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "footer")
+				]),
+				_: 2
+			}, [_ctx.$slots.title ? {
+				name: "title",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
+				key: "0"
+			} : void 0]), 1032, [
+				"open",
+				"title",
+				"ok-text",
+				"cancel-text",
+				"get-container",
+				"z-index",
+				"mask-closable",
+				"destroy-on-hidden",
+				"root-class",
+				"popup-class",
+				"popup-style"
+			])], 64);
+		};
+	}
+});
+export { RangePicker_vue_vue_type_script_setup_true_lang_default as default };