@youcan/celeste 0.6.102 → 0.7.1

package/dist/cjs/chunks/BubbleSelect.cjs

@@ -0,0 +1,332 @@
+require("./chunk.cjs");
+const require_ohash_D__AXeF1 = require("./ohash.D__AXeF1.cjs");
+const require_createContext = require("./createContext.cjs");
+const require_nullish = require("./nullish.cjs");
+const require_dist = require("./dist.cjs");
+const require_useDirection = require("./useDirection.cjs");
+const require_useFormControl = require("./useFormControl.cjs");
+const require_Collection = require("./Collection.cjs");
+const require_VisuallyHidden = require("./VisuallyHidden.cjs");
+const require_PopperRoot = require("./PopperRoot.cjs");
+let vue = require("vue");
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Select/utils.js
+var OPEN_KEYS = [
+	" ",
+	"Enter",
+	"ArrowUp",
+	"ArrowDown"
+];
+var SELECTION_KEYS = [" ", "Enter"];
+function valueComparator(value, currentValue, comparator) {
+	if (value === void 0) return false;
+	else if (Array.isArray(value)) return value.some((val) => compare(val, currentValue, comparator));
+	else return compare(value, currentValue, comparator);
+}
+function compare(value, currentValue, comparator) {
+	if (value === void 0 || currentValue === void 0) return false;
+	if (typeof value === "string") return value === currentValue;
+	if (typeof comparator === "function") return comparator(value, currentValue);
+	if (typeof comparator === "string") return value?.[comparator] === currentValue?.[comparator];
+	return require_ohash_D__AXeF1.isEqual(value, currentValue);
+}
+function shouldShowPlaceholder(value) {
+	return value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Select/SelectRoot.js
+var _hoisted_1 = ["value"];
+var [injectSelectRootContext, provideSelectRootContext] = /* @__PURE__ */ require_createContext.createContext("SelectRoot");
+var SelectRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "SelectRoot",
+	props: {
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false
+		},
+		defaultValue: {
+			type: null,
+			required: false
+		},
+		modelValue: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		nullableValue: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		by: {
+			type: [String, Function],
+			required: false
+		},
+		dir: {
+			type: String,
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["update:modelValue", "update:open"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { required, disabled, multiple, dir: propDir } = (0, vue.toRefs)(props);
+		const modelValue = require_dist.useVModel(props, "modelValue", emits, {
+			defaultValue: props.defaultValue ?? (multiple.value ? [] : void 0),
+			passive: props.modelValue === void 0,
+			deep: true
+		});
+		const open = require_dist.useVModel(props, "open", emits, {
+			defaultValue: props.defaultOpen,
+			passive: props.open === void 0
+		});
+		const triggerElement = (0, vue.ref)();
+		const valueElement = (0, vue.ref)();
+		const triggerPointerDownPosRef = (0, vue.ref)({
+			x: 0,
+			y: 0
+		});
+		const isEmptyModelValue = (0, vue.computed)(() => {
+			if (multiple.value && Array.isArray(modelValue.value)) return modelValue.value?.length === 0;
+			else return require_nullish.isNullish(modelValue.value);
+		});
+		require_Collection.useCollection({ isProvider: true });
+		const dir = require_useDirection.useDirection(propDir);
+		const isFormControl = require_useFormControl.useFormControl(triggerElement);
+		const optionsSet = (0, vue.ref)(/* @__PURE__ */ new Set());
+		const nativeSelectKey = (0, vue.computed)(() => {
+			return Array.from(optionsSet.value).map((option) => option.value).join(";");
+		});
+		function handleValueChange(value) {
+			if (multiple.value) {
+				const array = Array.isArray(modelValue.value) ? [...modelValue.value] : [];
+				const index = array.findIndex((i) => compare(i, value, props.by));
+				index === -1 ? array.push(value) : array.splice(index, 1);
+				modelValue.value = [...array];
+			} else modelValue.value = value;
+		}
+		function getOption(value) {
+			return Array.from(optionsSet.value).find((option) => valueComparator(value, option.value, props.by));
+		}
+		provideSelectRootContext({
+			triggerElement,
+			onTriggerChange: (node) => {
+				triggerElement.value = node;
+			},
+			valueElement,
+			onValueElementChange: (node) => {
+				valueElement.value = node;
+			},
+			contentId: "",
+			modelValue,
+			onValueChange: handleValueChange,
+			by: props.by,
+			open,
+			multiple,
+			required,
+			onOpenChange: (value) => {
+				open.value = value;
+			},
+			dir,
+			triggerPointerDownPosRef,
+			disabled,
+			isEmptyModelValue,
+			optionsSet,
+			onOptionAdd: (option) => {
+				const existingOption = getOption(option.value);
+				if (existingOption) optionsSet.value.delete(existingOption);
+				optionsSet.value.add(option);
+			},
+			onOptionRemove: (option) => {
+				const existingOption = getOption(option.value);
+				if (existingOption) optionsSet.value.delete(existingOption);
+			}
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_PopperRoot.PopperRoot_default), null, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {
+					modelValue: (0, vue.unref)(modelValue),
+					open: (0, vue.unref)(open)
+				}), (0, vue.unref)(isFormControl) && _ctx.name ? ((0, vue.openBlock)(), (0, vue.createBlock)(BubbleSelect_default, {
+					key: nativeSelectKey.value,
+					"aria-hidden": "true",
+					tabindex: "-1",
+					multiple: (0, vue.unref)(multiple),
+					required: (0, vue.unref)(required),
+					name: _ctx.name,
+					autocomplete: _ctx.autocomplete,
+					disabled: (0, vue.unref)(disabled),
+					value: (0, vue.unref)(modelValue)
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.unref)(require_nullish.isNullish)((0, vue.unref)(modelValue)) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("option", {
+						key: 0,
+						value: _ctx.nullableValue
+					}, null, 8, _hoisted_1)) : (0, vue.createCommentVNode)("v-if", true), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(Array.from(optionsSet.value), (option) => {
+						return (0, vue.openBlock)(), (0, vue.createElementBlock)("option", (0, vue.mergeProps)({ key: option.value ?? "" }, { ref_for: true }, option), null, 16);
+					}), 128))]),
+					_: 1
+				}, 8, [
+					"multiple",
+					"required",
+					"name",
+					"autocomplete",
+					"disabled",
+					"value"
+				])) : (0, vue.createCommentVNode)("v-if", true)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Select/BubbleSelect.js
+var BubbleSelect_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "BubbleSelect",
+	props: {
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		autofocus: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		size: {
+			type: Number,
+			required: false
+		},
+		value: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const selectElement = (0, vue.ref)();
+		const rootContext = injectSelectRootContext();
+		(0, vue.watch)(() => props.value, (cur, prev) => {
+			const selectProto = window.HTMLSelectElement.prototype;
+			const setValue = Object.getOwnPropertyDescriptor(selectProto, "value").set;
+			if (cur !== prev && setValue && selectElement.value) {
+				const event = new Event("change", { bubbles: true });
+				setValue.call(selectElement.value, cur);
+				selectElement.value.dispatchEvent(event);
+			}
+		});
+		/**
+		* Form autofill will trigger an `input` event on the `select` element.
+		* We listen to that event and update our internal state to support it.
+		*/
+		function handleInput(event) {
+			rootContext.onValueChange(event.target.value);
+		}
+		/**
+		* We purposefully use a `select` here to support form autofill as much
+		* as possible.
+		*
+		* We purposefully do not add the `value` attribute here to allow the value
+		* to be set programmatically and bubble to any parent form `onChange` event.
+		*
+		* We use `VisuallyHidden` rather than `display: "none"` because Safari autofill
+		* won't work otherwise.
+		*/
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_VisuallyHidden.VisuallyHidden_default), { "as-child": "" }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("select", (0, vue.mergeProps)({
+					ref_key: "selectElement",
+					ref: selectElement
+				}, props, { onInput: handleInput }), [(0, vue.renderSlot)(_ctx.$slots, "default")], 16)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "OPEN_KEYS", {
+	enumerable: true,
+	get: function() {
+		return OPEN_KEYS;
+	}
+});
+Object.defineProperty(exports, "SELECTION_KEYS", {
+	enumerable: true,
+	get: function() {
+		return SELECTION_KEYS;
+	}
+});
+Object.defineProperty(exports, "SelectRoot_default", {
+	enumerable: true,
+	get: function() {
+		return SelectRoot_default;
+	}
+});
+Object.defineProperty(exports, "injectSelectRootContext", {
+	enumerable: true,
+	get: function() {
+		return injectSelectRootContext;
+	}
+});
+Object.defineProperty(exports, "provideSelectRootContext", {
+	enumerable: true,
+	get: function() {
+		return provideSelectRootContext;
+	}
+});
+Object.defineProperty(exports, "shouldShowPlaceholder", {
+	enumerable: true,
+	get: function() {
+		return shouldShowPlaceholder;
+	}
+});
+Object.defineProperty(exports, "valueComparator", {
+	enumerable: true,
+	get: function() {
+		return valueComparator;
+	}
+});

package/dist/cjs/chunks/CollapsibleRoot.cjs

@@ -0,0 +1,90 @@
+require("./chunk.cjs");
+const require_createContext = require("./createContext.cjs");
+const require_dist = require("./dist.cjs");
+const require_Primitive = require("./Primitive.cjs");
+const require_useForwardExpose = require("./useForwardExpose.cjs");
+let vue = require("vue");
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Collapsible/CollapsibleRoot.js
+var [injectCollapsibleRootContext, provideCollapsibleRootContext] = /* @__PURE__ */ require_createContext.createContext("CollapsibleRoot");
+var CollapsibleRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "CollapsibleRoot",
+	props: {
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnHide: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	emits: ["update:open"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const open = require_dist.useVModel(props, "open", __emit, {
+			defaultValue: props.defaultOpen,
+			passive: props.open === void 0
+		});
+		const { disabled, unmountOnHide } = (0, vue.toRefs)(props);
+		provideCollapsibleRootContext({
+			contentId: "",
+			disabled,
+			open,
+			unmountOnHide,
+			onOpenToggle: () => {
+				if (disabled.value) return;
+				open.value = !open.value;
+			}
+		});
+		__expose({ open });
+		require_useForwardExpose.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive.Primitive), {
+				as: _ctx.as,
+				"as-child": props.asChild,
+				"data-state": (0, vue.unref)(open) ? "open" : "closed",
+				"data-disabled": (0, vue.unref)(disabled) ? "" : void 0
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { open: (0, vue.unref)(open) })]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"data-state",
+				"data-disabled"
+			]);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "CollapsibleRoot_default", {
+	enumerable: true,
+	get: function() {
+		return CollapsibleRoot_default;
+	}
+});
+Object.defineProperty(exports, "injectCollapsibleRootContext", {
+	enumerable: true,
+	get: function() {
+		return injectCollapsibleRootContext;
+	}
+});

package/dist/cjs/chunks/Collection.cjs

@@ -0,0 +1,79 @@
+require("./chunk.cjs");
+const require_Primitive = require("./Primitive.cjs");
+const require_usePrimitiveElement = require("./usePrimitiveElement.cjs");
+let vue = require("vue");
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Collection/Collection.js
+var ITEM_DATA_ATTR = "data-reka-collection-item";
+function useCollection(options = {}) {
+	const { key = "", isProvider = false } = options;
+	const injectionKey = `${key}CollectionProvider`;
+	let context;
+	if (isProvider) {
+		const itemMap = (0, vue.ref)(/* @__PURE__ */ new Map());
+		context = {
+			collectionRef: (0, vue.ref)(),
+			itemMap
+		};
+		(0, vue.provide)(injectionKey, context);
+	} else context = (0, vue.inject)(injectionKey);
+	const getItems = (includeDisabledItem = false) => {
+		const collectionNode = context.collectionRef.value;
+		if (!collectionNode) return [];
+		const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
+		const orderMap = new Map(orderedNodes.map((node, index) => [node, index]));
+		const orderedItems = Array.from(context.itemMap.value.values()).sort((a, b) => (orderMap.get(a.ref) ?? -1) - (orderMap.get(b.ref) ?? -1));
+		if (includeDisabledItem) return orderedItems;
+		else return orderedItems.filter((i) => i.ref.dataset.disabled !== "");
+	};
+	const CollectionSlot = /* @__PURE__ */ (0, vue.defineComponent)({
+		name: "CollectionSlot",
+		inheritAttrs: false,
+		setup(_, { slots, attrs }) {
+			const { primitiveElement, currentElement } = require_usePrimitiveElement.usePrimitiveElement();
+			(0, vue.watch)(currentElement, () => {
+				context.collectionRef.value = currentElement.value;
+			});
+			return () => (0, vue.h)(require_Primitive.Slot, {
+				ref: primitiveElement,
+				...attrs
+			}, slots);
+		}
+	});
+	const CollectionItem = /* @__PURE__ */ (0, vue.defineComponent)({
+		name: "CollectionItem",
+		inheritAttrs: false,
+		props: { value: { validator: () => true } },
+		setup(props, { slots, attrs }) {
+			const { primitiveElement, currentElement } = require_usePrimitiveElement.usePrimitiveElement();
+			(0, vue.watchEffect)((cleanupFn) => {
+				if (currentElement.value) {
+					const key$1 = (0, vue.markRaw)(currentElement.value);
+					context.itemMap.value.set(key$1, {
+						ref: currentElement.value,
+						value: props.value
+					});
+					cleanupFn(() => context.itemMap.value.delete(key$1));
+				}
+			});
+			return () => (0, vue.h)(require_Primitive.Slot, {
+				...attrs,
+				[ITEM_DATA_ATTR]: "",
+				ref: primitiveElement
+			}, slots);
+		}
+	});
+	return {
+		getItems,
+		reactiveItems: (0, vue.computed)(() => Array.from(context.itemMap.value.values())),
+		itemMapSize: (0, vue.computed)(() => context.itemMap.value.size),
+		CollectionSlot,
+		CollectionItem
+	};
+}
+//#endregion
+Object.defineProperty(exports, "useCollection", {
+	enumerable: true,
+	get: function() {
+		return useCollection;
+	}
+});