@sprawlify/vue 0.0.67 → 0.0.72

package/dist/components/listbox/index.js

@@ -0,0 +1,533 @@
+import { t as __exportAll } from "../../chunk-BN_g-Awi.js";
+import { n as useMachine, r as normalizeProps$1 } from "../../core-DNndr38p.js";
+import { a as useLocaleContext, c as useEnvironmentContext, i as DEFAULT_LOCALE, s as DEFAULT_ENVIRONMENT } from "../../providers-DNBWT-O_.js";
+import { t as createContext } from "../../create-context-Ds1GbsVc.js";
+import { t as useForwardExpose } from "../../use-forward-expose-CCAmHTUB.js";
+import { t as sprawlify } from "../../factory-Co08Aw8u.js";
+import { t as cleanProps } from "../../clean-props-D2R4tz5e.js";
+import { o as createListCollection } from "../../collection-DGKjEgOz.js";
+import { computed, createBlock, createCommentVNode, createTextVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, openBlock, renderSlot, toDisplayString, toValue, unref, useId, useSlots, withCtx } from "vue";
+import * as listbox from "@sprawlify/primitives/machines/listbox";
+import { anatomy } from "@sprawlify/primitives/machines/listbox";
+
+//#region src/components/listbox/use-listbox-context.ts
+const [ListboxProvider, useListboxContext] = createContext("ListboxContext");
+
+//#endregion
+//#region src/components/listbox/listbox-context.vue?vue&type=script&setup=true&lang.ts
+var listbox_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-context",
+	setup(__props) {
+		const listbox = useListboxContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(listbox))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-context.vue
+var listbox_context_default = listbox_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox-content.vue?vue&type=script&setup=true&lang.ts
+var listbox_content_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-content",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const listbox = useListboxContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(listbox).getContentProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-content.vue
+var listbox_content_default = listbox_content_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox-anatomy.ts
+const listboxAnatomy = anatomy.extendWith("empty");
+
+//#endregion
+//#region src/components/listbox/listbox-empty.vue?vue&type=script&setup=true&lang.ts
+var listbox_empty_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-empty",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const parts = listboxAnatomy.build();
+		const listbox = useListboxContext();
+		const isEmpty = computed(() => listbox.value.collection.size === 0);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return isEmpty.value ? (openBlock(), createBlock(unref(sprawlify).div, mergeProps({ key: 0 }, unref(parts).empty.attrs, {
+				role: "presentation",
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-empty.vue
+var listbox_empty_default = listbox_empty_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox-input.vue?vue&type=script&setup=true&lang.ts
+var listbox_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-input",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const listbox = useListboxContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).input, mergeProps(unref(listbox).getInputProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-input.vue
+var listbox_input_default = listbox_input_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/use-listbox-item-context.ts
+const [ListboxItemProvider, useListboxItemContext] = createContext("ListboxItemContext");
+
+//#endregion
+//#region src/components/listbox/use-listbox-item-props-context.ts
+const [ListboxItemPropsProvider, useListboxItemPropsContext] = createContext("ListboxItemPropsContext");
+
+//#endregion
+//#region src/components/listbox/listbox-item.vue?vue&type=script&setup=true&lang.ts
+var listbox_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-item",
+	props: {
+		item: {
+			type: null,
+			required: true
+		},
+		highlightOnHover: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const listbox = useListboxContext();
+		ListboxItemPropsProvider(props);
+		ListboxItemProvider(computed(() => listbox.value.getItemState(props)));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(listbox).getItemProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-item.vue
+var listbox_item_default = listbox_item_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox-item-context.vue?vue&type=script&setup=true&lang.ts
+var listbox_item_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-item-context",
+	setup(__props) {
+		const context = useListboxItemContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-item-context.vue
+var listbox_item_context_default = listbox_item_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/use-listbox-item-group-props-context.ts
+const [ListboxItemGroupPropsProvider, useListboxItemGroupPropsContext] = createContext("ListboxItemGroupPropsContext");
+
+//#endregion
+//#region src/components/listbox/listbox-item-group.vue?vue&type=script&setup=true&lang.ts
+var listbox_item_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-item-group",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const listbox = useListboxContext();
+		const uid = useId();
+		const id = props.id ?? uid;
+		ListboxItemGroupPropsProvider({ id });
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(listbox).getItemGroupProps({ id: unref(id) }), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-item-group.vue
+var listbox_item_group_default = listbox_item_group_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox-item-group-label.vue?vue&type=script&setup=true&lang.ts
+var listbox_item_group_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-item-group-label",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const listbox = useListboxContext();
+		const itemGroupProps = useListboxItemGroupPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(listbox).getItemGroupLabelProps({ htmlFor: unref(itemGroupProps).id }), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-item-group-label.vue
+var listbox_item_group_label_default = listbox_item_group_label_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox-item-indicator.vue?vue&type=script&setup=true&lang.ts
+var listbox_item_indicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-item-indicator",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const listbox = useListboxContext();
+		const itemProps = useListboxItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(listbox).getItemIndicatorProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-item-indicator.vue
+var listbox_item_indicator_default = listbox_item_indicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox-item-text.vue?vue&type=script&setup=true&lang.ts
+var listbox_item_text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-item-text",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const listbox = useListboxContext();
+		const ItemProps = useListboxItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(listbox).getItemTextProps(unref(ItemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-item-text.vue
+var listbox_item_text_default = listbox_item_text_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox-label.vue?vue&type=script&setup=true&lang.ts
+var listbox_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-label",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const listbox = useListboxContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).label, mergeProps(unref(listbox).getLabelProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-label.vue
+var listbox_label_default = listbox_label_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/use-listbox.ts
+const useListbox = (props, emit) => {
+	const id = useId();
+	const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
+	const locale = useLocaleContext(DEFAULT_LOCALE);
+	const context = computed(() => {
+		const localProps = toValue(props);
+		return {
+			id,
+			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);
+				localProps.onHighlightChange?.(details);
+			},
+			onSelect: (details) => {
+				emit?.("select", details);
+				localProps.onSelect?.(details);
+			}
+		};
+	});
+	const service = useMachine(listbox.machine, context);
+	return computed(() => listbox.connect(service, normalizeProps$1));
+};
+
+//#endregion
+//#region src/components/listbox/listbox-root.vue?vue&type=script&setup=true&lang.ts
+var listbox_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		collection: {
+			type: null,
+			required: true
+		},
+		defaultHighlightedValue: {
+			type: String,
+			required: false
+		},
+		defaultValue: {
+			type: Array,
+			required: false
+		},
+		deselectable: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		disallowSelectAll: {
+			type: Boolean,
+			required: false
+		},
+		highlightedValue: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		loopFocus: {
+			type: Boolean,
+			required: false
+		},
+		modelValue: {
+			type: Array,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false
+		},
+		scrollToIndexFn: {
+			type: Function,
+			required: false
+		},
+		selectOnHighlight: {
+			type: Boolean,
+			required: false
+		},
+		selectionMode: {
+			type: null,
+			required: false
+		},
+		typeahead: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		deselectable: void 0,
+		disabled: void 0,
+		disallowSelectAll: void 0,
+		loopFocus: void 0,
+		selectOnHighlight: void 0,
+		typeahead: void 0
+	}),
+	emits: [
+		"highlightChange",
+		"select",
+		"valueChange",
+		"update:modelValue"
+	],
+	setup(__props, { emit: __emit }) {
+		const listbox = useListbox(__props, __emit);
+		ListboxProvider(listbox);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(listbox).getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-root.vue
+var listbox_root_default = listbox_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox-root-provider.vue?vue&type=script&setup=true&lang.ts
+var listbox_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const listbox = computed(() => props.value);
+		ListboxProvider(listbox);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(listbox.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-root-provider.vue
+var listbox_root_provider_default = listbox_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox-value-text.vue?vue&type=script&setup=true&lang.ts
+var listbox_value_text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "listbox-value-text",
+	props: {
+		placeholder: {
+			type: String,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const listbox = useListboxContext();
+		const slots = useSlots();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).span, mergeProps(unref(listbox).getValueTextProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(slots.default?.() || unref(listbox).valueAsString || props.placeholder), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/listbox/listbox-value-text.vue
+var listbox_value_text_default = listbox_value_text_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/listbox/listbox.ts
+var listbox_exports = /* @__PURE__ */ __exportAll({
+	Content: () => listbox_content_default,
+	Context: () => listbox_context_default,
+	Empty: () => listbox_empty_default,
+	Input: () => listbox_input_default,
+	Item: () => listbox_item_default,
+	ItemContext: () => listbox_item_context_default,
+	ItemGroup: () => listbox_item_group_default,
+	ItemGroupLabel: () => listbox_item_group_label_default,
+	ItemIndicator: () => listbox_item_indicator_default,
+	ItemText: () => listbox_item_text_default,
+	Label: () => listbox_label_default,
+	Root: () => listbox_root_default,
+	RootProvider: () => listbox_root_provider_default,
+	ValueText: () => listbox_value_text_default
+});
+
+//#endregion
+export { listbox_exports as Listbox, listbox_content_default as ListboxContent, listbox_context_default as ListboxContext, listbox_empty_default as ListboxEmpty, listbox_input_default as ListboxInput, listbox_item_default as ListboxItem, listbox_item_context_default as ListboxItemContext, listbox_item_group_default as ListboxItemGroup, listbox_item_group_label_default as ListboxItemGroupLabel, listbox_item_indicator_default as ListboxItemIndicator, listbox_item_text_default as ListboxItemText, listbox_label_default as ListboxLabel, listbox_root_default as ListboxRoot, listbox_root_provider_default as ListboxRootProvider, listbox_value_text_default as ListboxValueText, createListCollection, listboxAnatomy, useListbox, useListboxContext, useListboxItemContext };