@wirekyt/vue 0.0.1 → 0.0.2

package/dist/select.js

@@ -0,0 +1,523 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { a as mergeProps$1, c as normalizeProps$1, d as useForwardExpose, m as createContext, n as RenderStrategyPropsProvider, s as useMachine } from "./utils-D95V66v9.js";
+import { a as DEFAULT_LOCALE, d as useEnvironmentContext, o as useLocaleContext, u as DEFAULT_ENVIRONMENT } from "./providers-C3XQH-uu.js";
+import { t as cleanProps } from "./clean-props--1kqQE0Y.js";
+import { n as wire } from "./factory-8Ao0DEy3.js";
+import { h as useFieldContext } from "./field-C3pLqz1S.js";
+import { n as useListCollection, o as createListCollection } from "./collection-Ea6ZCZKK.js";
+import { n as PresenceProvider, r as usePresenceContext } from "./presence-jaHZaD_O.js";
+import { t as usePresence } from "./use-presence-oNdFU2c2.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, openBlock, renderList, renderSlot, toDisplayString, toValue, unref, useId, useSlots, withCtx } from "vue";
+import * as select from "@wirekyt/dom/machines/select";
+import { anatomy as selectAnatomy } from "@wirekyt/dom/machines/select";
+//#region src/components/select/use-context.ts
+const [SelectProvider, useSelectContext] = createContext("SelectContext");
+//#endregion
+//#region src/components/select/clear-trigger.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "clear-trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).button, mergeProps(unref(select).getClearTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/content.vue
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "content",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		const presence = usePresenceContext();
+		const mergedProps = computed(() => mergeProps$1(select.value.getContentProps(), presence.value.presenceProps));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return !unref(presence).unmounted ? (openBlock(), createBlock(unref(wire).div, mergeProps({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/context.vue
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	__name: "context",
+	setup(__props) {
+		const select = useSelectContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(select))));
+		};
+	}
+});
+//#endregion
+//#region src/components/select/control.vue
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	__name: "control",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).div, mergeProps(unref(select).getControlProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/hidden-select.vue
+const _hoisted_1 = {
+	key: 0,
+	value: ""
+};
+const _hoisted_2 = ["value", "disabled"];
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+	__name: "hidden-select",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).select, mergeProps({ "aria-describedby": unref(field)?.ariaDescribedby }, unref(select).getHiddenSelectProps()), {
+				default: withCtx(() => [unref(select).value.length === 0 ? (openBlock(), createElementBlock("option", _hoisted_1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(select).collection.items, (item) => {
+					return openBlock(), createElementBlock("option", {
+						key: item.value,
+						value: unref(select).collection.getItemValue(item),
+						disabled: unref(select).collection.getItemDisabled(item)
+					}, toDisplayString(unref(select).collection.stringifyItem(item)) + " > ", 9, _hoisted_2);
+				}), 128))]),
+				_: 1
+			}, 16, ["aria-describedby"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/indicator.vue
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
+	__name: "indicator",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).div, mergeProps(unref(select).getIndicatorProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/use-item-context.ts
+const [SelectItemProvider, useSelectItemContext] = createContext("SelectItemContext");
+//#endregion
+//#region src/components/select/item-context.vue
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+	__name: "item-context",
+	setup(__props) {
+		const item = useSelectItemContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(item))));
+		};
+	}
+});
+//#endregion
+//#region src/components/select/use-item-group-props-context.ts
+const [SelectItemGroupPropsProvider, useSelectItemGroupPropsContext] = createContext("SelectItemGroupPropsContext");
+//#endregion
+//#region src/components/select/item-group-label.vue
+const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+	__name: "item-group-label",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		const itemGroupProps = useSelectItemGroupPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).div, mergeProps(unref(select).getItemGroupLabelProps({ htmlFor: unref(itemGroupProps).id }), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/item-group.vue
+const _sfc_main$8 = /*@__PURE__*/ defineComponent({
+	__name: "item-group",
+	props: {
+		id: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const select = useSelectContext();
+		const uid = useId();
+		const id = props.id ?? uid;
+		SelectItemGroupPropsProvider({ id });
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).div, mergeProps(unref(select).getItemGroupProps({ id: unref(id) }), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/use-item-props-context.ts
+const [SelectItemPropsProvider, useSelectItemPropsContext] = createContext("SelectItemPropsContext");
+//#endregion
+//#region src/components/select/item-indicator.vue
+const _sfc_main$10 = /*@__PURE__*/ defineComponent({
+	__name: "item-indicator",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		const itemProps = useSelectItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).div, mergeProps(unref(select).getItemIndicatorProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/item-text.vue
+const _sfc_main$11 = /*@__PURE__*/ defineComponent({
+	__name: "item-text",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		const itemProps = useSelectItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).span, mergeProps(unref(select).getItemTextProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/item.vue
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+	__name: "item",
+	props: {
+		item: {},
+		persistFocus: { type: Boolean },
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const select = useSelectContext();
+		SelectItemPropsProvider(props);
+		SelectItemProvider(computed(() => select.value.getItemState(props)));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).div, mergeProps(unref(select).getItemProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/label.vue
+const _sfc_main$12 = /*@__PURE__*/ defineComponent({
+	__name: "label",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).label, mergeProps(unref(select).getLabelProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/list.vue
+const _sfc_main$13 = /*@__PURE__*/ defineComponent({
+	__name: "list",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).div, mergeProps(unref(select).getListProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/positioner.vue
+const _sfc_main$14 = /*@__PURE__*/ defineComponent({
+	__name: "positioner",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		const presence = usePresenceContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return !unref(presence).unmounted ? (openBlock(), createBlock(unref(wire).div, mergeProps({ key: 0 }, unref(select).getPositionerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/root-provider.vue
+const _sfc_main$16 = /*@__PURE__*/ defineComponent({
+	__name: "root-provider",
+	props: {
+		value: {},
+		lazyMount: { type: Boolean },
+		unmountOnExit: { type: Boolean },
+		asChild: { type: Boolean }
+	},
+	emits: ["exitComplete"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const select = computed(() => props.value);
+		const presence = usePresence(computed(() => ({
+			present: select.value.open,
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})), emits);
+		SelectProvider(select);
+		PresenceProvider(presence);
+		RenderStrategyPropsProvider(computed(() => ({
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).div, mergeProps(select.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/use-select.ts
+const useSelect = (props, emit) => {
+	const id = useId();
+	const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
+	const locale = useLocaleContext(DEFAULT_LOCALE);
+	const field = useFieldContext();
+	const context = computed(() => {
+		const localProps = toValue(props);
+		return {
+			id,
+			ids: {
+				label: field?.value.ids.label,
+				hiddenSelect: field?.value.ids.control
+			},
+			disabled: field?.value.disabled,
+			readOnly: field?.value.readOnly,
+			invalid: field?.value.invalid,
+			required: field?.value.required,
+			dir: locale.value.dir,
+			value: localProps.modelValue,
+			getRootNode: env?.value.getRootNode,
+			...cleanProps(localProps),
+			onValueChange: (details) => {
+				emit?.("valueChange", details);
+				emit?.("update:modelValue", details.value);
+				localProps.onValueChange?.(details);
+			},
+			onHighlightChange: (details) => {
+				emit?.("highlightChange", details);
+				emit?.("update:highlightedValue", details.highlightedValue);
+				localProps.onHighlightChange?.(details);
+			},
+			onOpenChange: (details) => {
+				emit?.("openChange", details);
+				emit?.("update:open", details.open);
+				localProps.onOpenChange?.(details);
+			},
+			onFocusOutside: (details) => {
+				emit?.("focusOutside", details);
+				localProps.onFocusOutside?.(details);
+			},
+			onInteractOutside: (details) => {
+				emit?.("interactOutside", details);
+				localProps.onInteractOutside?.(details);
+			},
+			onPointerDownOutside: (details) => {
+				emit?.("pointerDownOutside", details);
+				localProps.onPointerDownOutside?.(details);
+			},
+			onSelect(details) {
+				emit?.("select", details);
+				localProps.onSelect?.(details);
+			}
+		};
+	});
+	const service = useMachine(select.machine, context);
+	return computed(() => select.connect(service, normalizeProps$1));
+};
+//#endregion
+//#region src/components/select/root.vue
+const _sfc_main$15 = /*@__PURE__*/ defineComponent({
+	__name: "root",
+	props: /*@__PURE__*/ mergeDefaults({
+		autoComplete: {},
+		closeOnSelect: { type: Boolean },
+		collection: {},
+		composite: { type: Boolean },
+		defaultHighlightedValue: {},
+		defaultOpen: { type: Boolean },
+		defaultValue: {},
+		deselectable: { type: Boolean },
+		disabled: { type: Boolean },
+		form: {},
+		highlightedValue: {},
+		id: {},
+		ids: {},
+		invalid: { type: Boolean },
+		loopFocus: { type: Boolean },
+		modelValue: {},
+		multiple: { type: Boolean },
+		name: {},
+		open: { type: Boolean },
+		positioning: {},
+		readOnly: { type: Boolean },
+		required: { type: Boolean },
+		scrollToIndexFn: { type: Function },
+		translations: {},
+		lazyMount: { type: Boolean },
+		unmountOnExit: { type: Boolean },
+		asChild: { type: Boolean }
+	}, {
+		closeOnSelect: void 0,
+		composite: void 0,
+		defaultOpen: void 0,
+		deselectable: void 0,
+		disabled: void 0,
+		invalid: void 0,
+		loopFocus: void 0,
+		multiple: void 0,
+		open: void 0,
+		readOnly: void 0,
+		required: void 0
+	}),
+	emits: [
+		"exitComplete",
+		"focusOutside",
+		"highlightChange",
+		"interactOutside",
+		"openChange",
+		"pointerDownOutside",
+		"select",
+		"valueChange",
+		"update:modelValue",
+		"update:open",
+		"update:highlightedValue"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const select = useSelect(props, emits);
+		const presence = usePresence(computed(() => ({
+			present: select.value.open,
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})), emits);
+		SelectProvider(select);
+		PresenceProvider(presence);
+		RenderStrategyPropsProvider(computed(() => ({
+			lazyMount: props.lazyMount,
+			unmountOnExit: props.unmountOnExit
+		})));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).div, mergeProps(unref(select).getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/trigger.vue
+const _sfc_main$17 = /*@__PURE__*/ defineComponent({
+	__name: "trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const select = useSelectContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).button, mergeProps(unref(select).getTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/value-text.vue
+const _sfc_main$18 = /*@__PURE__*/ defineComponent({
+	__name: "value-text",
+	props: {
+		placeholder: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const select = useSelectContext();
+		const slots = useSlots();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).span, mergeProps(unref(select).getValueTextProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(slots.default?.() || unref(select).valueAsString || props.placeholder), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/select/select.ts
+var select_exports = /* @__PURE__ */ __exportAll({
+	ClearTrigger: () => _sfc_main,
+	Content: () => _sfc_main$1,
+	Context: () => _sfc_main$2,
+	Control: () => _sfc_main$3,
+	HiddenSelect: () => _sfc_main$4,
+	Indicator: () => _sfc_main$5,
+	Item: () => _sfc_main$6,
+	ItemContext: () => _sfc_main$7,
+	ItemGroup: () => _sfc_main$8,
+	ItemGroupLabel: () => _sfc_main$9,
+	ItemIndicator: () => _sfc_main$10,
+	ItemText: () => _sfc_main$11,
+	Label: () => _sfc_main$12,
+	List: () => _sfc_main$13,
+	Positioner: () => _sfc_main$14,
+	Root: () => _sfc_main$15,
+	RootProvider: () => _sfc_main$16,
+	Trigger: () => _sfc_main$17,
+	ValueText: () => _sfc_main$18
+});
+//#endregion
+export { select_exports as Select, _sfc_main as SelectClearTrigger, _sfc_main$1 as SelectContent, _sfc_main$2 as SelectContext, _sfc_main$3 as SelectControl, _sfc_main$4 as SelectHiddenSelect, _sfc_main$5 as SelectIndicator, _sfc_main$6 as SelectItem, _sfc_main$7 as SelectItemContext, _sfc_main$8 as SelectItemGroup, _sfc_main$9 as SelectItemGroupLabel, _sfc_main$10 as SelectItemIndicator, _sfc_main$11 as SelectItemText, _sfc_main$12 as SelectLabel, _sfc_main$13 as SelectList, _sfc_main$14 as SelectPositioner, _sfc_main$15 as SelectRoot, _sfc_main$16 as SelectRootProvider, _sfc_main$17 as SelectTrigger, _sfc_main$18 as SelectValueText, createListCollection, selectAnatomy, useListCollection, useSelect, useSelectContext, useSelectItemContext };