@sprawlify/vue 0.0.67 → 0.0.72

package/dist/components/tags-input/index.js

@@ -0,0 +1,569 @@
+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 { m as useFieldContext } from "../../field-CtPR24u6.js";
+import { computed, createBlock, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, openBlock, renderSlot, toValue, unref, useId, withCtx } from "vue";
+import * as tagsInput from "@sprawlify/primitives/machines/tags-input";
+import { anatomy as tagsInputAnatomy } from "@sprawlify/primitives/machines/tags-input";
+
+//#region src/components/tags-input/use-tags-input-context.ts
+const [TagsInputProvider, useTagsInputContext] = createContext("TagsInputContext");
+
+//#endregion
+//#region src/components/tags-input/tags-input-clear-trigger.vue?vue&type=script&setup=true&lang.ts
+var tags_input_clear_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-clear-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const tagsInput = useTagsInputContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(tagsInput).getClearTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-clear-trigger.vue
+var tags_input_clear_trigger_default = tags_input_clear_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input-context.vue?vue&type=script&setup=true&lang.ts
+var tags_input_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-context",
+	setup(__props) {
+		const tagsInput = useTagsInputContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(tagsInput))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-context.vue
+var tags_input_context_default = tags_input_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input-control.vue?vue&type=script&setup=true&lang.ts
+var tags_input_control_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-control",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const tagsInput = useTagsInputContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(tagsInput).getControlProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-control.vue
+var tags_input_control_default = tags_input_control_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input-hidden-input.vue?vue&type=script&setup=true&lang.ts
+var tags_input_hidden_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-hidden-input",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const tagsInput = useTagsInputContext();
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).input, mergeProps({ "aria-describedby": unref(field)?.ariaDescribedby }, unref(tagsInput).getHiddenInputProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["aria-describedby", "as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-hidden-input.vue
+var tags_input_hidden_input_default = tags_input_hidden_input_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input-input.vue?vue&type=script&setup=true&lang.ts
+var tags_input_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-input",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const tagsInput = useTagsInputContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).input, mergeProps(unref(tagsInput).getInputProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-input.vue
+var tags_input_input_default = tags_input_input_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/use-tags-input-item-context.ts
+const [TagsInputItemProvider, useTagsInputItemContext] = createContext("TagsInputItemContext");
+
+//#endregion
+//#region src/components/tags-input/tags-input-item-context.vue?vue&type=script&setup=true&lang.ts
+var tags_input_item_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-item-context",
+	setup(__props) {
+		const tagsInput = useTagsInputItemContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(tagsInput))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-item-context.vue
+var tags_input_item_context_default = tags_input_item_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/use-tags-input-item-props-context.ts
+const [TagsInputItemPropsProvider, useTagsInputItemPropsContext] = createContext("TagsInputItemPropsContext");
+
+//#endregion
+//#region src/components/tags-input/tags-input-item-delete-trigger.vue?vue&type=script&setup=true&lang.ts
+var tags_input_item_delete_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-item-delete-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const tagsInput = useTagsInputContext();
+		const itemProps = useTagsInputItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(tagsInput).getItemDeleteTriggerProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-item-delete-trigger.vue
+var tags_input_item_delete_trigger_default = tags_input_item_delete_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input-item-input.vue?vue&type=script&setup=true&lang.ts
+var tags_input_item_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-item-input",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const tagsInput = useTagsInputContext();
+		const itemProps = useTagsInputItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).input, mergeProps(unref(tagsInput).getItemInputProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-item-input.vue
+var tags_input_item_input_default = tags_input_item_input_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input-item-preview.vue?vue&type=script&setup=true&lang.ts
+var tags_input_item_preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-item-preview",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const tagsInput = useTagsInputContext();
+		const itemProps = useTagsInputItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(tagsInput).getItemPreviewProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-item-preview.vue
+var tags_input_item_preview_default = tags_input_item_preview_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input-item-text.vue?vue&type=script&setup=true&lang.ts
+var tags_input_item_text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-item-text",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const tagsInput = useTagsInputContext();
+		const itemProps = useTagsInputItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).span, mergeProps(unref(tagsInput).getItemTextProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-item-text.vue
+var tags_input_item_text_default = tags_input_item_text_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input-item.vue?vue&type=script&setup=true&lang.ts
+var tags_input_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-item",
+	props: {
+		index: {
+			type: [String, Number],
+			required: true
+		},
+		value: {
+			type: String,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const tagsInput = useTagsInputContext();
+		TagsInputItemPropsProvider(props);
+		TagsInputItemProvider(computed(() => tagsInput.value.getItemState(props)));
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(tagsInput).getItemProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-item.vue
+var tags_input_item_default = tags_input_item_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input-label.vue?vue&type=script&setup=true&lang.ts
+var tags_input_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-label",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const tagsInput = useTagsInputContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).label, mergeProps(unref(tagsInput).getLabelProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-label.vue
+var tags_input_label_default = tags_input_label_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input-root-provider.vue?vue&type=script&setup=true&lang.ts
+var tags_input_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const tagsInput = computed(() => props.value);
+		TagsInputProvider(tagsInput);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(tagsInput.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-root-provider.vue
+var tags_input_root_provider_default = tags_input_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/use-tags-input.ts
+const useTagsInput = (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,
+				hiddenInput: field?.value.ids.control
+			},
+			disabled: field?.value.disabled,
+			invalid: field?.value.invalid,
+			readOnly: field?.value.readOnly,
+			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);
+			},
+			onFocusOutside: (details) => {
+				emit?.("focusOutside", details);
+				localProps.onFocusOutside?.(details);
+			},
+			onHighlightChange: (details) => {
+				emit?.("highlightChange", details);
+				localProps.onHighlightChange?.(details);
+			},
+			onInputValueChange: (details) => {
+				emit?.("inputValueChange", details);
+				emit?.("update:inputValue", details.inputValue);
+				localProps.onInputValueChange?.(details);
+			},
+			onInteractOutside: (details) => {
+				emit?.("interactOutside", details);
+				localProps.onInteractOutside?.(details);
+			},
+			onPointerDownOutside: (details) => {
+				emit?.("pointerDownOutside", details);
+				localProps.onPointerDownOutside?.(details);
+			},
+			onValueInvalid: (details) => {
+				emit?.("valueInvalid", details);
+				localProps.onValueInvalid?.(details);
+			}
+		};
+	});
+	const service = useMachine(tagsInput.machine, context);
+	return computed(() => tagsInput.connect(service, normalizeProps$1));
+};
+
+//#endregion
+//#region src/components/tags-input/tags-input-root.vue?vue&type=script&setup=true&lang.ts
+var tags_input_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "tags-input-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		addOnPaste: {
+			type: Boolean,
+			required: false
+		},
+		allowOverflow: {
+			type: Boolean,
+			required: false
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false
+		},
+		blurBehavior: {
+			type: String,
+			required: false
+		},
+		defaultInputValue: {
+			type: String,
+			required: false
+		},
+		defaultValue: {
+			type: Array,
+			required: false
+		},
+		delimiter: {
+			type: null,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		editable: {
+			type: Boolean,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		inputValue: {
+			type: String,
+			required: false
+		},
+		invalid: {
+			type: Boolean,
+			required: false
+		},
+		max: {
+			type: Number,
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		modelValue: {
+			type: Array,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		translations: {
+			type: null,
+			required: false
+		},
+		validate: {
+			type: Function,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		addOnPaste: void 0,
+		allowOverflow: void 0,
+		autoFocus: void 0,
+		disabled: void 0,
+		editable: void 0,
+		invalid: void 0,
+		readOnly: void 0,
+		required: void 0
+	}),
+	emits: [
+		"focusOutside",
+		"highlightChange",
+		"inputValueChange",
+		"interactOutside",
+		"pointerDownOutside",
+		"valueChange",
+		"valueInvalid",
+		"update:modelValue",
+		"update:inputValue"
+	],
+	setup(__props, { emit: __emit }) {
+		const tagsInput = useTagsInput(__props, __emit);
+		TagsInputProvider(tagsInput);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(tagsInput).getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/tags-input/tags-input-root.vue
+var tags_input_root_default = tags_input_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/tags-input/tags-input.ts
+var tags_input_exports = /* @__PURE__ */ __exportAll({
+	ClearTrigger: () => tags_input_clear_trigger_default,
+	Context: () => tags_input_context_default,
+	Control: () => tags_input_control_default,
+	HiddenInput: () => tags_input_hidden_input_default,
+	Input: () => tags_input_input_default,
+	Item: () => tags_input_item_default,
+	ItemContext: () => tags_input_item_context_default,
+	ItemDeleteTrigger: () => tags_input_item_delete_trigger_default,
+	ItemInput: () => tags_input_item_input_default,
+	ItemPreview: () => tags_input_item_preview_default,
+	ItemText: () => tags_input_item_text_default,
+	Label: () => tags_input_label_default,
+	Root: () => tags_input_root_default,
+	RootProvider: () => tags_input_root_provider_default
+});
+
+//#endregion
+export { tags_input_exports as TagsInput, tags_input_clear_trigger_default as TagsInputClearTrigger, tags_input_context_default as TagsInputContext, tags_input_control_default as TagsInputControl, tags_input_hidden_input_default as TagsInputHiddenInput, tags_input_input_default as TagsInputInput, tags_input_item_default as TagsInputItem, tags_input_item_context_default as TagsInputItemContext, tags_input_item_delete_trigger_default as TagsInputItemDeleteTrigger, tags_input_item_input_default as TagsInputItemInput, tags_input_item_preview_default as TagsInputItemPreview, tags_input_item_text_default as TagsInputItemText, tags_input_label_default as TagsInputLabel, tags_input_root_default as TagsInputRoot, tags_input_root_provider_default as TagsInputRootProvider, tagsInputAnatomy, useTagsInput, useTagsInputContext, useTagsInputItemContext };