@hoci/components 0.8.0 → 0.9.0

package/dist/index.js

@@ -0,0 +1,831 @@
+import { classPropType, defineHookComponent, defineHookEmits, defineHookProps, elementRef, getFirstChilld, isWindow, labelPropType, throttleByRaf, toReactive, useElement, useSharedConfig, valuePropType } from "@hoci/shared";
+import { KeepAlive, Teleport, computed, defineComponent, h, inject, provide, reactive, ref, renderSlot, shallowRef, triggerRef, watch, watchPostEffect } from "vue";
+import { isDefined, syncRef, tryOnScopeDispose, useElementBounding, useElementVisibility, useEventListener } from "@vueuse/core";
+import { capitalize, cls, each, px } from "tslx";
+import { affixProps, configProviderProps, fileUploadEmits, fileUploadProps, iconProps, itemEmits, itemProps, popoverEmits, popoverProps, provideSharedConfig, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useFileUpload, useIcon, usePopover, useSelectionItem, useSelectionList, useSwitch } from "@hoci/core";
+import { Virtualizer, elementScroll, observeElementOffset, observeElementRect } from "@tanstack/virtual-core";
+
+//#region rolldown:runtime
+var __defProp = Object.defineProperty;
+var __exportAll = (all, symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+//#region ../core/src/affix/index.ts
+const affixProps$1 = defineHookProps({
+	fixedClass: {
+		type: String,
+		default: ""
+	},
+	offset: {
+		type: Number,
+		default: 0
+	},
+	position: {
+		type: String,
+		default: "top"
+	},
+	target: { type: [
+		String,
+		Object,
+		Function
+	] },
+	zIndex: {
+		type: Number,
+		default: 998
+	}
+});
+const affixEmits = defineHookEmits(["scroll", "change"]);
+const AFFIX_TARGET_KEY = Symbol("AFFIX_TARGET_KEY");
+function getTargetRect(target) {
+	return isWindow(target) ? {
+		top: 0,
+		bottom: window.innerHeight
+	} : target.getBoundingClientRect();
+}
+const useAffix$1 = defineHookComponent({
+	props: affixProps$1,
+	setup(props, { emit }) {
+		const wrapperRef = elementRef();
+		const wrapperRect = toReactive(useElementBounding(wrapperRef));
+		const parentRef = inject(AFFIX_TARGET_KEY, void 0);
+		const targetRef = useElement(props.target, parentRef);
+		const isFixed = ref(false);
+		const placeholderStyle = ref({});
+		const fixedStyle = ref({});
+		const className = computed(() => {
+			return isFixed.value ? props.fixedClass : "";
+		});
+		const wrapperVisible = useElementVisibility(wrapperRef);
+		const containerRef = computed(() => {
+			if (!wrapperVisible.value) return null;
+			return targetRef.value ?? window;
+		});
+		const updatePosition = throttleByRaf(async () => {
+			if (!wrapperRef.value || !containerRef.value) return;
+			if (wrapperRect.width * wrapperRect.height === 0) return;
+			const newPlaceholderStyles = {
+				width: px(wrapperRect.width),
+				height: px(wrapperRect.height)
+			};
+			const targetRect = getTargetRect(containerRef.value);
+			let newIsFixed = false;
+			let newFixedStyles = {};
+			const offset = props.offset;
+			if (props.position === "top") {
+				newIsFixed = wrapperRect.top - targetRect.top < offset && offset >= 0;
+				newFixedStyles = newIsFixed ? {
+					position: "fixed",
+					zIndex: props.zIndex,
+					top: px(targetRect.top + offset)
+				} : {};
+			} else {
+				newIsFixed = targetRect.bottom - wrapperRect.bottom < offset;
+				newFixedStyles = newIsFixed ? {
+					position: "fixed",
+					bottom: px(window.innerHeight - targetRect.bottom + offset)
+				} : {};
+			}
+			if (newIsFixed !== isFixed.value) {
+				isFixed.value = newIsFixed;
+				emit("change", newIsFixed);
+			}
+			placeholderStyle.value = newPlaceholderStyles;
+			fixedStyle.value = {
+				...newFixedStyles,
+				...newIsFixed ? newPlaceholderStyles : {}
+			};
+		});
+		useEventListener(containerRef, "scroll", () => {
+			emit("scroll");
+			updatePosition();
+		});
+		useEventListener(containerRef, "resize", updatePosition);
+		watchPostEffect(updatePosition);
+		return {
+			className,
+			wrapperRef,
+			containerRef,
+			isFixed,
+			placeholderStyle,
+			fixedStyle,
+			updatePosition
+		};
+	}
+});
+function provideAffixTarget(target) {
+	provide(AFFIX_TARGET_KEY, target);
+}
+
+//#endregion
+//#region ../core/src/affix-target/component.ts
+const HiAffixTarget = defineComponent({
+	name: "HiAffixTarget",
+	setup(_, context) {
+		const targetRef = elementRef();
+		provideAffixTarget(targetRef);
+		return () => h("div", {
+			ref: targetRef,
+			...context.attrs
+		}, renderSlot(context.slots, "default"));
+	}
+});
+
+//#endregion
+//#region ../core/src/affix/component.ts
+const HiAffix = defineComponent({
+	name: "HiAffix",
+	props: {
+		...affixProps,
+		as: {
+			type: String,
+			default: "div"
+		}
+	},
+	setup(props, context) {
+		const { className, wrapperRef, isFixed, placeholderStyle, fixedStyle } = useAffix(props, context);
+		return () => h(props.as, { ref: wrapperRef }, [isFixed.value && h("div", { style: placeholderStyle.value }), h("div", {
+			class: className.value,
+			style: fixedStyle.value
+		}, renderSlot(context.slots, "default"))]);
+	}
+});
+
+//#endregion
+//#region ../core/src/config-provider/component.ts
+const HiConfigProvider = defineComponent({
+	props: {
+		...configProviderProps,
+		as: { type: String }
+	},
+	setup(props, context) {
+		provideSharedConfig(props);
+		return () => {
+			const content = renderSlot(context.slots, "default", void 0);
+			if (props.as) return h(props.as, content);
+			return content;
+		};
+	}
+});
+
+//#endregion
+//#region ../core/src/file-upload/component.ts
+const HiFileUpload = defineComponent({
+	name: "HiFileUpload",
+	props: {
+		...fileUploadProps,
+		accept: {
+			type: String,
+			default: "*/*"
+		},
+		as: {
+			type: String,
+			default: "div"
+		}
+	},
+	emits: fileUploadEmits,
+	setup(props, context) {
+		const { slots } = context;
+		const { fileInputRef, files, openFileInput } = useFileUpload(props, context);
+		return () => {
+			return h(props.as, { onClick: openFileInput }, [h("input", {
+				ref: fileInputRef,
+				type: "file",
+				accept: props.accept,
+				multiple: props.multiple,
+				style: { display: "none" }
+			}), renderSlot(slots, "default", { files: files.value })]);
+		};
+	}
+});
+
+//#endregion
+//#region ../core/src/icon/component.ts
+const HiIcon = defineComponent({
+	props: {
+		...iconProps,
+		as: {
+			type: String,
+			default: "div"
+		}
+	},
+	setup(props, context) {
+		const { style } = useIcon(props, context);
+		return () => {
+			return h(props.as, { style: style.value });
+		};
+	}
+});
+
+//#endregion
+//#region ../core/src/item/component.ts
+const HiItem = defineComponent({
+	name: "HiItem",
+	props: {
+		...itemProps,
+		as: {
+			type: String,
+			default: "div"
+		}
+	},
+	emits: itemEmits,
+	setup(props, context) {
+		const { render, activate, className, isDisabled, activateEvent } = useSelectionItem(props, context);
+		return () => h(props.as, {
+			class: className.value,
+			[`on${capitalize(activateEvent.value)}`]: activate,
+			disabled: isDisabled.value
+		}, render());
+	}
+});
+
+//#endregion
+//#region ../core/src/popover/component.ts
+const HiPopover = defineComponent({
+	name: "HiPopover",
+	props: {
+		...popoverProps,
+		as: {
+			type: String,
+			default: "div"
+		}
+	},
+	emits: popoverEmits,
+	setup(props, context) {
+		const { triggerRef, popupClass, events, popupRef, popupStyle } = usePopover(props, context);
+		return () => {
+			let content = h("div", {
+				class: popupClass.value,
+				style: popupStyle.value,
+				ref: popupRef
+			}, renderSlot(context.slots, "popup"));
+			if (props.teleport) content = h(Teleport, { to: props.teleport === true ? "body" : props.teleport }, content);
+			return h(props.as, {
+				ref: triggerRef,
+				...events
+			}, [renderSlot(context.slots, "default"), content]);
+		};
+	}
+});
+
+//#endregion
+//#region ../core/src/selection/component.ts
+const HiSelection = defineComponent({
+	name: "HiSelection",
+	props: {
+		...selectionProps,
+		as: {
+			type: String,
+			default: "div"
+		}
+	},
+	emits: selectionEmits,
+	setup(props, context) {
+		const { render } = useSelectionList(props, context);
+		return () => h(props.as, {}, render());
+	}
+});
+
+//#endregion
+//#region ../core/src/switch/component.ts
+const HiSwitch = defineComponent({
+	name: "HiSwitch",
+	props: {
+		...switchProps,
+		as: {
+			type: String,
+			default: "div"
+		}
+	},
+	emits: switchEmits,
+	setup(props, context) {
+		const { slots } = context;
+		const { className, toggle, modelValue, isDisabled, activateEvent } = useSwitch(props, context);
+		return () => {
+			return h(props.as, {
+				class: className.value,
+				[`on${capitalize(activateEvent.value)}`]: toggle
+			}, renderSlot(slots, "default", {
+				active: modelValue.value,
+				isDisabled: isDisabled.value
+			}));
+		};
+	}
+});
+
+//#endregion
+//#region ../core/src/selection/index.ts
+const selectionProps$1 = defineHookProps({
+	modelValue: {
+		type: valuePropType,
+		default: () => null
+	},
+	activeClass: {
+		type: classPropType,
+		default: "active"
+	},
+	itemClass: {
+		type: classPropType,
+		default: ""
+	},
+	disabledClass: {
+		type: classPropType,
+		default: "disabled"
+	},
+	unactiveClass: {
+		type: classPropType,
+		default: ""
+	},
+	label: { type: labelPropType },
+	multiple: {
+		type: [
+			Boolean,
+			Number,
+			Array
+		],
+		default: () => false
+	},
+	clearable: { type: Boolean },
+	defaultValue: {
+		type: valuePropType,
+		default: () => null
+	},
+	activateEvent: { type: String }
+});
+const selectionEmits$1 = defineHookEmits([
+	"update:modelValue",
+	"change",
+	"load",
+	"unload",
+	"reject"
+]);
+const HiSelectionContextSymbol = Symbol("[hi-selection]context");
+function useSelectionContext() {
+	return inject(HiSelectionContextSymbol, {
+		isActive: () => false,
+		activate: () => {},
+		changeActive: () => {},
+		reject: () => {},
+		activeClass: "active",
+		unactiveClass: "unactive",
+		disabledClass: "disabled",
+		itemClass: "",
+		activateEvent: useSharedConfig().activateEvent,
+		label: null,
+		multiple: false,
+		limit: [0, Number.POSITIVE_INFINITY]
+	});
+}
+const useSelectionList$1 = defineHookComponent({
+	props: selectionProps$1,
+	emits: selectionEmits$1,
+	setup(props, { emit, slots }) {
+		const options = reactive([]);
+		function toArray(value) {
+			if (!isDefined(value)) return [];
+			if (props.multiple && Array.isArray(value)) return value.filter((v) => v != null || v !== void 0);
+			return [value];
+		}
+		const actives = reactive([...toArray(props.modelValue ?? props.defaultValue)]);
+		const currentValue = computed({
+			get() {
+				return props.multiple ? actives : actives[0];
+			},
+			set(val) {
+				actives.splice(0, actives.length, ...toArray(val));
+			}
+		});
+		syncRef(currentValue, computed({
+			get() {
+				return props.modelValue ?? props.defaultValue;
+			},
+			set(val) {
+				emit("update:modelValue", val);
+			}
+		}), {
+			immediate: true,
+			deep: true
+		});
+		const emitChange = () => emit("change", currentValue.value);
+		function isActive(value) {
+			return actives.includes(value);
+		}
+		const multipleActive = computed(() => !!props.multiple);
+		/**
+		* [min,max]
+		*/
+		const multipleLimit = computed(() => {
+			if (Array.isArray(props.multiple)) {
+				if (props.multiple[1] === void 0) return [props.multiple[0], Number.POSITIVE_INFINITY];
+				return props.multiple;
+			}
+			return [0, Number.POSITIVE_INFINITY];
+		});
+		function activate(value) {
+			const [min, max] = multipleLimit.value;
+			if (isActive(value)) {
+				if (multipleActive.value && actives.length > min || props.clearable) {
+					actives.splice(actives.indexOf(value), 1);
+					emitChange();
+				}
+			} else if (props.multiple) {
+				if (actives.length < max) {
+					actives.push(value);
+					emitChange();
+				}
+			} else {
+				actives.splice(0, actives.length, value);
+				emitChange();
+			}
+		}
+		function reject(value) {
+			emit("reject", value);
+		}
+		const init = (option) => {
+			function remove() {
+				const index = options.findIndex((e) => e.id === option.id);
+				if (index > -1) {
+					options.splice(index, 1);
+					emit("unload", option);
+				}
+			}
+			for (let i = 0; i < options.length; i++) if (options[i].value === option.value) {
+				options.splice(i, 1);
+				i--;
+			}
+			options.push(option);
+			emit("load", option);
+			return remove;
+		};
+		const sharedConfig = useSharedConfig();
+		provide(HiSelectionContextSymbol, toReactive({
+			activeClass: computed(() => cls(props.activeClass)),
+			unactiveClass: computed(() => cls(props.unactiveClass)),
+			disabledClass: computed(() => cls(props.disabledClass)),
+			itemClass: computed(() => cls(props.itemClass)),
+			label: computed(() => props.label),
+			multiple: multipleActive,
+			limit: multipleLimit,
+			clearable: computed(() => props.clearable),
+			defaultValue: computed(() => props.defaultValue),
+			activateEvent: computed(() => props.activateEvent ?? sharedConfig.activateEvent),
+			active: currentValue,
+			activate,
+			changeActive: activate,
+			isActive,
+			reject,
+			init
+		}));
+		const renderItem = () => {
+			const children = options.filter((e) => actives.includes(e.value)).map((e) => e.render());
+			return props.multiple ? children : getFirstChilld(children);
+		};
+		const slotData = {
+			isActive,
+			changeActive: activate,
+			renderItem
+		};
+		const render = () => {
+			return renderSlot(slots, "default", slotData);
+		};
+		return {
+			options,
+			actives,
+			isActive,
+			changeActive: activate,
+			renderItem,
+			render
+		};
+	}
+});
+
+//#endregion
+//#region ../core/src/item/index.ts
+const itemProps$1 = defineHookProps({
+	value: {
+		type: valuePropType,
+		default() {
+			return Math.random().toString(16).slice(2);
+		}
+	},
+	label: { type: [Function, String] },
+	keepAlive: {
+		type: Boolean,
+		default: () => true
+	},
+	activateEvent: { type: String },
+	disabled: {
+		type: Boolean,
+		default: false
+	}
+});
+const itemEmits$1 = defineHookEmits(["reject"]);
+const useSelectionItem$1 = defineHookComponent({
+	props: itemProps$1,
+	emits: itemEmits$1,
+	setup(props, { slots, emit }) {
+		const context = useSelectionContext();
+		const activate = () => {
+			if (props.disabled) {
+				emit("reject", props.value);
+				context.reject(props.value);
+				return;
+			}
+			context.activate(props.value);
+		};
+		const label = computed(() => {
+			let label = props.label ?? context.label;
+			if (label && typeof label === "function") label = label(props.value);
+			return Array.isArray(label) ? label : [label];
+		});
+		function render() {
+			return slots.default?.({
+				active: context.isActive(props.value),
+				activate
+			}) ?? label.value.filter(Boolean);
+		}
+		let remove = () => {};
+		const init = context.init;
+		if (init) {
+			watch(() => props.value, (value) => {
+				remove();
+				remove = init({
+					id: Math.random().toString(16).slice(2),
+					label: typeof props.label === "string" ? props.label : void 0,
+					value,
+					render
+				});
+			}, { immediate: true });
+			tryOnScopeDispose(remove);
+		}
+		const isActive = computed(() => context.isActive(props.value));
+		const isDisabled = computed(() => props.disabled);
+		return {
+			activate,
+			render,
+			isActive,
+			isDisabled,
+			className: computed(() => {
+				const array = [context.itemClass];
+				if (!isDisabled.value) array.push(context.isActive(props.value) ? context.activeClass : context.unactiveClass);
+				else array.push(context.disabledClass);
+				return cls(array);
+			}),
+			activateEvent: computed(() => props.activateEvent ?? context.activateEvent),
+			label
+		};
+	}
+});
+
+//#endregion
+//#region ../core/src/tab-pane/component.ts
+const HiTabPane = defineComponent({
+	name: "HiTabPane",
+	props: { ...itemProps$1 },
+	emits: itemEmits$1,
+	inheritAttrs: true,
+	setup(props, context) {
+		const { className, activateEvent, activate, isDisabled, label } = useSelectionItem$1(props, context);
+		return () => {
+			return h("div", {
+				class: className.value,
+				[`on${capitalize(activateEvent.value)}`]: activate,
+				disabled: isDisabled.value
+			}, label.value);
+		};
+	}
+});
+
+//#endregion
+//#region ../core/src/tabs/component.ts
+const HiTabs = defineComponent({
+	name: "HiTabs",
+	props: {
+		...selectionProps$1,
+		headerClass: { type: classPropType },
+		as: {
+			type: String,
+			default: "div"
+		},
+		headerAs: {
+			type: String,
+			default: "div"
+		},
+		contentAs: {
+			type: String,
+			default: "div"
+		},
+		contentClass: { type: classPropType },
+		keepAlive: {
+			type: [Boolean, Object],
+			default: false
+		}
+	},
+	inheritAttrs: true,
+	setup(props, context) {
+		const selection = useSelectionList$1(props, context);
+		return () => {
+			let component = selection.renderItem();
+			if (props.keepAlive) component = h(KeepAlive, { ...typeof props.keepAlive === "object" ? props.keepAlive : {} }, component);
+			if (context.slots.content) component = context.slots.content({ component });
+			else component = h(props.contentAs, { class: props.contentClass }, component);
+			return h(props.as, [h(props.headerAs, { class: props.headerClass }, renderSlot(context.slots, "default")), component]);
+		};
+	}
+});
+
+//#endregion
+//#region ../core/src/virtual-list/index.ts
+const virtualListProps = defineHookProps({
+	options: {
+		type: Object,
+		default: () => ({})
+	},
+	count: {
+		type: Number,
+		default: () => 0
+	},
+	estimateSize: {
+		type: [Function, Number],
+		default: () => 50
+	},
+	horizontal: {
+		type: Boolean,
+		default: () => false
+	}
+});
+const virtualListEmits = defineHookEmits({
+	scrollEnd: () => true,
+	scrollStart: () => true,
+	scroll: (_) => true
+});
+const useVirtualList = defineHookComponent({
+	props: virtualListProps,
+	emits: virtualListEmits,
+	setup(props, context) {
+		const { emit } = context;
+		const scrollElementRef = elementRef();
+		const propsEstimateSize = props.estimateSize;
+		const estimateSize = typeof propsEstimateSize === "function" ? propsEstimateSize : () => propsEstimateSize;
+		const options = computed(() => {
+			return {
+				...props.options || {},
+				count: props.count,
+				estimateSize,
+				horizontal: props.horizontal,
+				getScrollElement: () => scrollElementRef.value,
+				observeElementRect,
+				observeElementOffset,
+				scrollToFn: elementScroll
+			};
+		});
+		const virtualizer = new Virtualizer(options.value);
+		const state = shallowRef(virtualizer);
+		const virtualItems = computed(() => state.value.getVirtualItems());
+		const virtualIndexes = computed(() => state.value.getVirtualIndexes());
+		const totalSize = computed(() => state.value.getTotalSize());
+		watch(virtualIndexes, (indexes) => {
+			if (indexes.length === 0) return;
+			if (indexes[indexes.length - 1] === props.count - 1) emit("scrollEnd");
+			else if (indexes[0] === 0) emit("scrollStart");
+			emit("scroll", indexes);
+		}, { immediate: true });
+		watch(options, (opts) => {
+			virtualizer.setOptions({
+				...opts,
+				onChange: (instance, sync) => {
+					opts.onChange?.(instance, sync);
+					triggerRef(state);
+				}
+			});
+			virtualizer._willUpdate();
+			triggerRef(state);
+		}, { immediate: true });
+		watch(scrollElementRef, (el) => {
+			if (el) {
+				virtualizer._willUpdate();
+				triggerRef(state);
+			}
+		}, { immediate: true });
+		tryOnScopeDispose(virtualizer._didMount());
+		const measureElement = (el) => {
+			virtualizer.measureElement(el);
+		};
+		const scrollToIndex = (index, options = { behavior: "smooth" }) => {
+			virtualizer.scrollToIndex(index, options);
+		};
+		const scrollToStart = (options = { behavior: "smooth" }) => {
+			scrollToIndex(0, options);
+		};
+		const scrollToEnd = (options = { behavior: "smooth" }) => {
+			scrollToIndex(props.count - 1, options);
+		};
+		return {
+			virtualizer,
+			virtualItems,
+			virtualIndexes,
+			totalSize,
+			scrollElementRef,
+			measureElement,
+			scrollToIndex,
+			scrollToStart,
+			scrollToEnd
+		};
+	}
+});
+
+//#endregion
+//#region ../core/src/virtual-list/component.ts
+const HiVirtualList = defineComponent({
+	name: "HiVirtualList",
+	inheritAttrs: true,
+	props: {
+		...virtualListProps,
+		as: {
+			type: String,
+			default: () => "div"
+		},
+		wrapperAs: {
+			type: String,
+			default: () => "div"
+		},
+		wrapperStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		wrapperClass: {
+			type: classPropType,
+			default: () => ""
+		}
+	},
+	emits: virtualListEmits,
+	setup(props, context) {
+		const { slots, expose } = context;
+		const { totalSize, scrollElementRef, virtualItems, scrollToIndex, scrollToStart, scrollToEnd } = useVirtualList(props, context);
+		expose({
+			scrollToIndex,
+			scrollToStart,
+			scrollToEnd
+		});
+		const wrapperStyle = computed(() => {
+			return {
+				position: "relative",
+				[props.horizontal ? "width" : "height"]: `${totalSize.value}px`,
+				...props.wrapperStyle
+			};
+		});
+		return () => h(props.as, {
+			ref: scrollElementRef,
+			style: { [props.horizontal ? "overflowX" : "overflowY"]: "auto" }
+		}, [h(props.wrapperAs, {
+			style: wrapperStyle.value,
+			class: props.wrapperClass
+		}, each(virtualItems.value, (item) => {
+			return renderSlot(slots, "item", {
+				...item,
+				style: {
+					position: "absolute",
+					[props.horizontal ? "left" : "top"]: `${item.start}px`,
+					[props.horizontal ? "width" : "height"]: `${item.size}px`
+				}
+			});
+		}))]);
+	}
+});
+
+//#endregion
+//#region components.ts
+var components_exports = /* @__PURE__ */ __exportAll({
+	HiAffix: () => HiAffix,
+	HiAffixTarget: () => HiAffixTarget,
+	HiConfigProvider: () => HiConfigProvider,
+	HiFileUpload: () => HiFileUpload,
+	HiIcon: () => HiIcon,
+	HiItem: () => HiItem,
+	HiPopover: () => HiPopover,
+	HiSelection: () => HiSelection,
+	HiSwitch: () => HiSwitch,
+	HiTabPane: () => HiTabPane,
+	HiTabs: () => HiTabs,
+	HiVirtualList: () => HiVirtualList
+});
+
+//#endregion
+//#region install.ts
+function install(app) {
+	for (const key in components_exports) app.component(key, components_exports[key]);
+}
+
+//#endregion
+export { HiAffix, HiAffixTarget, HiConfigProvider, HiFileUpload, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, HiVirtualList, install };