vunor 0.3.1 → 0.4.0

package/dist/Dialog.d.mts

@@ -7,7 +7,10 @@ interface TFooterButton {
 }
 type __VLS_Props = {
     defaultOpen?: boolean;
+    /** Styles the overlay as a modal backdrop. The dialog itself is always modal. */
     modal?: boolean;
+    /** Forwarded to Reka `DialogContent`. */
+    disableOutsidePointerEvents?: boolean;
     rounded?: boolean;
     title?: string;
     focusFirstSelector?: string;
@@ -39,13 +42,15 @@ type __VLS_Slots = {} & {
     footer?: (props: typeof __VLS_64) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean | undefined) => any;
+    "update:open": (value: boolean) => any;
 } & {
-    [x: string]: any;
+    "footer-click": (button: string, event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onFooter-click"?: ((button: string, event: MouseEvent) => any) | undefined;
 }>, {
     level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subheading" | "body-l" | "body" | "body-s" | "callout";
+    disableOutsidePointerEvents: boolean;
     focusFirstSelector: string;
     contentClass: TVueCssClass;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/Dialog.mjs

@@ -1,4 +1,5 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+import { n as useForwardToRoot, r as useModelState } from "./forward-root-DPGTBptG.js";
+import { ErrorCodes, Fragment, callWithAsyncErrorHandling, camelize, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeModels, mergeProps, nextTick, normalizeClass, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, toHandlerKey, unref, useAttrs, useModel, watch, withCtx } from "vue";
 import { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "reka-ui";
 import VuButton from "vunor/Button";
 import VuIcon from "vunor/Icon";
@@ -12,99 +13,35 @@ const _hoisted_3 = { class: "dialog-footer" };
 //#endregion
 //#region src/components/Dialog/Dialog.vue
 var Dialog_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
 	__name: "Dialog",
 	props: /* @__PURE__ */ mergeModels({
-		defaultOpen: {
+		defaultOpen: { type: Boolean },
+		modal: { type: Boolean },
+		disableOutsidePointerEvents: {
 			type: Boolean,
-			required: false
-		},
-		modal: {
-			type: Boolean,
-			required: false
-		},
-		rounded: {
-			type: Boolean,
-			required: false
-		},
-		title: {
-			type: String,
-			required: false
-		},
-		focusFirstSelector: {
-			type: String,
-			required: false,
-			default: "input"
-		},
-		class: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			required: false
-		},
-		overlayClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			required: false
-		},
-		contentClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			required: false,
-			default: "px-$card-spacing py-$m flex-grow-1 overflow-auto"
-		},
-		closeButton: {
+			default: void 0
+		},
+		rounded: { type: Boolean },
+		title: {},
+		focusFirstSelector: { default: "input" },
+		class: {},
+		overlayClass: {},
+		contentClass: { default: "px-$card-spacing py-$m flex-grow-1 overflow-auto" },
+		closeButton: { type: Boolean },
+		footerButtons: {},
+		level: { default: "h4" },
+		onEscapeKeyDown: {},
+		onPointerDownOutside: {},
+		onFocusOutside: {},
+		onInteractOutside: {},
+		onOpenAutoFocus: {},
+		onCloseAutoFocus: {}
+	}, {
+		"open": {
 			type: Boolean,
-			required: false
-		},
-		footerButtons: {
-			type: Array,
-			required: false
-		},
-		level: {
-			type: String,
-			required: false,
-			default: "h4"
+			default: void 0
 		},
-		onEscapeKeyDown: {
-			type: Function,
-			required: false,
-			skipCheck: true
-		},
-		onPointerDownOutside: {
-			type: Function,
-			required: false,
-			skipCheck: true
-		},
-		onFocusOutside: {
-			type: Function,
-			required: false,
-			skipCheck: true
-		},
-		onInteractOutside: {
-			type: Function,
-			required: false,
-			skipCheck: true
-		},
-		onOpenAutoFocus: {
-			type: Function,
-			required: false,
-			skipCheck: true
-		},
-		onCloseAutoFocus: {
-			type: Function,
-			required: false,
-			skipCheck: true
-		}
-	}, {
-		"open": { type: Boolean },
 		"openModifiers": {}
 	}),
 	emits: /* @__PURE__ */ mergeModels(["footer-click"], ["update:open"]),
@@ -112,7 +49,38 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 		const open = useModel(__props, "open");
 		const internalOpen = ref(false);
 		const props = __props;
+		const isOpen = useModelState(open, DialogRoot, "defaultOpen", props);
+		const contentProps = useForwardToRoot(DialogContent, props, void 0, [
+			"forceMount",
+			"asChild",
+			"as"
+		]);
 		const emit = __emit;
+		const instance = getCurrentInstance();
+		const firedOnce = /* @__PURE__ */ new Set();
+		function emitFooterLabel(event, ...args) {
+			const listeners = instance?.vnode.props ?? {};
+			let handlerName = toHandlerKey(event);
+			let handler = listeners[handlerName];
+			if (!handler) {
+				handlerName = toHandlerKey(camelize(event));
+				handler = listeners[handlerName];
+			}
+			const call = (fn) => callWithAsyncErrorHandling(fn, instance, ErrorCodes.COMPONENT_EVENT_HANDLER, args);
+			if (handler) call(handler);
+			const onceHandler = listeners[`${handlerName}Once`];
+			if (onceHandler && !firedOnce.has(handlerName)) {
+				firedOnce.add(handlerName);
+				call(onceHandler);
+			}
+		}
+		const FOOTER_LISTENER = /^on(FooterClick|Footer-click-)/;
+		const attrs = useAttrs();
+		function cardAttrs() {
+			const keys = Object.keys(attrs);
+			if (!keys.some((key) => FOOTER_LISTENER.test(key))) return attrs;
+			return Object.fromEntries(keys.filter((key) => !FOOTER_LISTENER.test(key)).map((k) => [k, attrs[k]]));
+		}
 		async function applyFocusFirstSelector() {
 			await nextTick();
 			const input = root.value?.$el?.querySelector(props.focusFirstSelector);
@@ -133,12 +101,12 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 		});
 		const root = ref();
 		function emitFooterClick(btn, event) {
-			emit(`footer-click-${btn.toLowerCase().replace(/\s*/g, "")}`, event);
-			emit(`footer-click`, btn, event);
+			emitFooterLabel(`footer-click-${btn.toLowerCase().replace(/\s*/g, "")}`, event);
+			emit("footer-click", btn, event);
 		}
 		const closing = ref(false);
-		watch([open], () => {
-			if (open.value) {
+		watch(isOpen, () => {
+			if (isOpen.value) {
 				internalOpen.value = true;
 				closing.value = false;
 				applyFocusFirstSelector();
@@ -150,10 +118,10 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 			}
 		});
 		function onUpdateOpen(newValue) {
-			open.value = newValue;
+			isOpen.value = newValue;
 		}
 		onMounted(() => {
-			internalOpen.value = !!open.value;
+			internalOpen.value = isOpen.value;
 			applyFocusFirstSelector();
 		});
 		return (_ctx, _cache) => {
@@ -166,7 +134,7 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [createVNode(unref(DialogOverlay), {
 						class: normalizeClass(unref(mergeCssClasses)({ "dialog-overlay": __props.modal }, __props.overlayClass)),
 						"data-closing": closing.value ? "" : void 0
-					}, null, 8, ["class", "data-closing"]), createVNode(unref(DialogContent), {
+					}, null, 8, ["class", "data-closing"]), createVNode(unref(DialogContent), mergeProps(unref(contentProps), {
 						"as-child": "",
 						onEscapeKeyDown: __props.onEscapeKeyDown,
 						onPointerDownOutside: __props.onPointerDownOutside,
@@ -174,16 +142,19 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 						onInteractOutside: __props.onInteractOutside,
 						onOpenAutoFocus: __props.onOpenAutoFocus,
 						onCloseAutoFocus: __props.onCloseAutoFocus
-					}, {
-						default: withCtx(() => [createVNode(VuCard, {
+					}), {
+						default: withCtx(() => [createVNode(VuCard, mergeProps({
+							...closing.value ? { "data-closing": "" } : {},
+							...cardAttrs(),
+							"aria-describedby": _ctx.$attrs["aria-describedby"]
+						}, {
 							ref_key: "root",
 							ref: root,
 							level: __props.level,
 							"no-padding": "",
 							rounded: __props.rounded,
-							class: normalizeClass(["dialog-card", props.class]),
-							"data-closing": closing.value ? "" : void 0
-						}, {
+							class: ["dialog-card", props.class]
+						}), {
 							default: withCtx(() => [
 								__props.title || _ctx.$slots.header || _ctx.$slots.title ? (openBlock(), createBlock(unref(DialogTitle), {
 									key: 0,
@@ -198,9 +169,9 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 									}, {
 										default: withCtx(() => [createElementVNode("button", _hoisted_2, [createVNode(VuIcon, { name: "i--close" })])]),
 										_: 1
-									})) : createCommentVNode("v-if", true)])])]),
+									})) : createCommentVNode("", true)])])]),
 									_: 3
-								})) : createCommentVNode("v-if", true),
+								})) : createCommentVNode("", true),
 								createElementVNode("section", { class: normalizeClass(__props.contentClass) }, [renderSlot(_ctx.$slots, "default")], 2),
 								_footerButtons.value?.length || _ctx.$slots.footer ? renderSlot(_ctx.$slots, "footer", { key: 1 }, () => [createElementVNode("footer", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(_footerButtons.value, (button) => {
 									return openBlock(), createElementBlock(Fragment, null, [!button.closeDialog ? (openBlock(), createBlock(VuButton, {
@@ -231,17 +202,16 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 										])]),
 										_: 2
 									}, 1024))], 64);
-								}), 256))])]) : createCommentVNode("v-if", true)
+								}), 256))])]) : createCommentVNode("", true)
 							]),
 							_: 3
-						}, 8, [
+						}, 16, [
 							"level",
 							"rounded",
-							"data-closing",
 							"class"
 						])]),
 						_: 3
-					}, 8, [
+					}, 16, [
 						"onEscapeKeyDown",
 						"onPointerDownOutside",
 						"onFocusOutside",

package/dist/Icon.mjs

@@ -3,10 +3,7 @@ import { createElementBlock, defineComponent, normalizeClass, openBlock } from "
 //#region src/components/Icon/Icon.vue
 var Icon_default = /* @__PURE__ */ defineComponent({
 	__name: "Icon",
-	props: { name: {
-		type: String,
-		required: true
-	} },
+	props: { name: {} },
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass([__props.name, "icon-color icon-size"]) }, null, 2);

package/dist/InnerLoading.mjs

@@ -6,10 +6,7 @@ const _hoisted_1 = { class: "inner-loading" };
 //#region src/components/Loading/InnerLoading.vue
 var InnerLoading_default = /* @__PURE__ */ defineComponent({
 	__name: "InnerLoading",
-	props: { size: {
-		type: String,
-		required: false
-	} },
+	props: { size: {} },
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(VuLoadingIndicator, { size: __props.size }, null, 8, ["size"])])]);

package/dist/Input.mjs

@@ -25,129 +25,38 @@ const _hoisted_7 = {
 var Input_default = /* @__PURE__ */ defineComponent({
 	__name: "Input",
 	props: /* @__PURE__ */ mergeModels({
-		iconBefore: {
-			type: String,
-			required: false
-		},
-		iconAfter: {
-			type: String,
-			required: false
-		},
-		error: {
-			type: [String, Boolean],
-			required: false
-		},
-		hint: {
-			type: String,
-			required: false
-		},
-		groupTemplate: {
-			type: String,
-			required: false,
-			default: "repeat(1, 1fr)"
-		},
-		stackLabel: {
-			type: Boolean,
-			required: false
-		},
-		onBeforeClick: {
-			type: Function,
-			required: false
-		},
-		onAfterClick: {
-			type: Function,
-			required: false
-		},
-		onClick: {
-			type: Function,
-			required: false
-		},
-		onBlur: {
-			type: Function,
-			required: false
-		},
-		onFocus: {
-			type: Function,
-			required: false
-		},
-		label: {
-			type: String,
-			required: false
-		},
-		design: {
-			type: String,
-			required: false
-		},
-		iconPrepend: {
-			type: String,
-			required: false
-		},
-		iconAppend: {
-			type: String,
-			required: false
-		},
-		groupItem: {
-			type: Boolean,
-			required: false
-		},
-		autoGrow: {
-			type: Boolean,
-			required: false
-		},
-		active: {
-			type: Boolean,
-			required: false
-		},
-		loading: {
-			type: Boolean,
-			required: false
-		},
-		noUnderline: {
-			type: Boolean,
-			required: false
-		},
-		onAppendClick: {
-			type: Function,
-			required: false
-		},
-		onPrependClick: {
-			type: Function,
-			required: false
-		},
-		placeholder: {
-			type: String,
-			required: false
-		},
-		type: {
-			type: String,
-			required: false
-		},
-		rows: {
-			type: Number,
-			required: false
-		},
-		required: {
-			type: Boolean,
-			required: false
-		},
-		maxlength: {
-			type: Number,
-			required: false
-		},
-		disabled: {
-			type: Boolean,
-			required: false
-		},
-		readonly: {
-			type: Boolean,
-			required: false
-		},
-		autocomplete: {
-			type: String,
-			required: false
-		}
+		iconBefore: {},
+		iconAfter: {},
+		error: { type: [String, Boolean] },
+		hint: {},
+		groupTemplate: { default: "repeat(1, 1fr)" },
+		stackLabel: { type: Boolean },
+		onBeforeClick: {},
+		onAfterClick: {},
+		onClick: {},
+		onBlur: {},
+		onFocus: {},
+		label: {},
+		design: {},
+		iconPrepend: {},
+		iconAppend: {},
+		groupItem: { type: Boolean },
+		autoGrow: { type: Boolean },
+		active: { type: Boolean },
+		loading: { type: Boolean },
+		noUnderline: { type: Boolean },
+		onAppendClick: {},
+		onPrependClick: {},
+		placeholder: {},
+		type: {},
+		rows: {},
+		required: { type: Boolean },
+		maxlength: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		autocomplete: {}
 	}, {
-		"modelValue": { type: [String, Number] },
+		"modelValue": {},
 		"modelModifiers": {}
 	}),
 	emits: /* @__PURE__ */ mergeModels([
@@ -181,12 +90,12 @@ var Input_default = /* @__PURE__ */ defineComponent({
 				}, [renderSlot(_ctx.$slots, "before", {}, () => [createElementVNode("div", {
 					class: "i8-icon-wrap",
 					onClick: _cache[0] || (_cache[0] = ($event) => emit("beforeClick", $event))
-				}, [createVNode(VuIcon, { name: __props.iconBefore }, null, 8, ["name"])])])], 2)) : createCommentVNode("v-if", true),
+				}, [createVNode(VuIcon, { name: __props.iconBefore }, null, 8, ["name"])])])], 2)) : createCommentVNode("", true),
 				createElementVNode("div", _hoisted_3, [
 					!!__props.label && __props.stackLabel ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(VuLabel, null, {
 						default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
 						_: 1
-					})])) : createCommentVNode("v-if", true),
+					})])) : createCommentVNode("", true),
 					createElementVNode("div", {
 						class: normalizeClass(["w-full", { "cursor-pointer": !!__props.onClick }]),
 						style: normalizeStyle({
@@ -221,7 +130,7 @@ var Input_default = /* @__PURE__ */ defineComponent({
 							key: "3"
 						} : void 0
 					]), 1040, ["modelValue"])])], 6),
-					createElementVNode("div", { class: normalizeClass(__props.stackLabel ? "i8-hint-wrapper-stack" : "i8-hint-wrapper") }, [__props.hint || __props.error ? (openBlock(), createElementBlock("div", _hoisted_5, [_ctx.$slots.error || typeof __props.error === "string" && __props.error.length ? renderSlot(_ctx.$slots, "error", { key: 0 }, () => [createElementVNode("span", _hoisted_6, toDisplayString(__props.error), 1)]) : !!__props.hint || _ctx.$slots.hint ? renderSlot(_ctx.$slots, "hint", { key: 1 }, () => [createElementVNode("span", null, toDisplayString(__props.hint), 1)]) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), !!__props.maxlength || _ctx.$slots.counter ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "counter", {}, () => [createTextVNode(toDisplayString(String(modelValue.value || "").length || 0) + "/" + toDisplayString(__props.maxlength), 1)])])) : createCommentVNode("v-if", true)], 2)
+					createElementVNode("div", { class: normalizeClass(__props.stackLabel ? "i8-hint-wrapper-stack" : "i8-hint-wrapper") }, [__props.hint || __props.error ? (openBlock(), createElementBlock("div", _hoisted_5, [_ctx.$slots.error || typeof __props.error === "string" && __props.error.length ? renderSlot(_ctx.$slots, "error", { key: 0 }, () => [createElementVNode("span", _hoisted_6, toDisplayString(__props.error), 1)]) : !!__props.hint || _ctx.$slots.hint ? renderSlot(_ctx.$slots, "hint", { key: 1 }, () => [createElementVNode("span", null, toDisplayString(__props.hint), 1)]) : createCommentVNode("", true)])) : createCommentVNode("", true), !!__props.maxlength || _ctx.$slots.counter ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "counter", {}, () => [createTextVNode(toDisplayString(String(modelValue.value || "").length || 0) + "/" + toDisplayString(__props.maxlength), 1)])])) : createCommentVNode("", true)], 2)
 				]),
 				_ctx.$slots.after || !!__props.iconAfter ? (openBlock(), createElementBlock("div", {
 					key: 1,
@@ -229,7 +138,7 @@ var Input_default = /* @__PURE__ */ defineComponent({
 				}, [renderSlot(_ctx.$slots, "after", {}, () => [createElementVNode("div", {
 					class: "i8-icon-wrap",
 					onClick: _cache[3] || (_cache[3] = ($event) => emit("afterClick", $event))
-				}, [createVNode(VuIcon, { name: __props.iconAfter }, null, 8, ["name"])])])], 2)) : createCommentVNode("v-if", true)
+				}, [createVNode(VuIcon, { name: __props.iconAfter }, null, 8, ["name"])])])], 2)) : createCommentVNode("", true)
 			])], 10, _hoisted_1);
 		};
 	}

package/dist/InputBase.mjs

@@ -25,94 +25,29 @@ const _hoisted_7 = { class: "i8-loading" };
 var InputBase_default = /* @__PURE__ */ defineComponent({
 	__name: "InputBase",
 	props: /* @__PURE__ */ mergeModels({
-		label: {
-			type: String,
-			required: false
-		},
-		design: {
-			type: String,
-			required: false,
-			default: "flat"
-		},
-		iconPrepend: {
-			type: String,
-			required: false
-		},
-		iconAppend: {
-			type: String,
-			required: false
-		},
-		groupItem: {
-			type: Boolean,
-			required: false
-		},
-		autoGrow: {
-			type: Boolean,
-			required: false
-		},
-		active: {
-			type: Boolean,
-			required: false
-		},
-		loading: {
-			type: Boolean,
-			required: false
-		},
-		noUnderline: {
-			type: Boolean,
-			required: false
-		},
-		onAppendClick: {
-			type: Function,
-			required: false
-		},
-		onPrependClick: {
-			type: Function,
-			required: false
-		},
-		onBlur: {
-			type: Function,
-			required: false
-		},
-		onFocus: {
-			type: Function,
-			required: false
-		},
-		placeholder: {
-			type: String,
-			required: false
-		},
-		type: {
-			type: String,
-			required: false
-		},
-		rows: {
-			type: Number,
-			required: false,
-			default: 3
-		},
-		required: {
-			type: Boolean,
-			required: false
-		},
-		maxlength: {
-			type: Number,
-			required: false
-		},
-		disabled: {
-			type: Boolean,
-			required: false
-		},
-		readonly: {
-			type: Boolean,
-			required: false
-		},
-		autocomplete: {
-			type: String,
-			required: false
-		}
+		label: {},
+		design: { default: "flat" },
+		iconPrepend: {},
+		iconAppend: {},
+		groupItem: { type: Boolean },
+		autoGrow: { type: Boolean },
+		active: { type: Boolean },
+		loading: { type: Boolean },
+		noUnderline: { type: Boolean },
+		onAppendClick: {},
+		onPrependClick: {},
+		onBlur: {},
+		onFocus: {},
+		placeholder: {},
+		type: {},
+		rows: { default: 3 },
+		required: { type: Boolean },
+		maxlength: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		autocomplete: {}
 	}, {
-		"modelValue": { type: [String, Number] },
+		"modelValue": {},
 		"modelModifiers": {}
 	}),
 	emits: /* @__PURE__ */ mergeModels([
@@ -165,15 +100,15 @@ var InputBase_default = /* @__PURE__ */ defineComponent({
 				"data-active": focused.value || __props.active
 			}), {
 				default: withCtx(() => [
-					!__props.noUnderline ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("v-if", true),
-					!!_ctx.$slots.overlay ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "overlay")])) : createCommentVNode("v-if", true),
+					!__props.noUnderline ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true),
+					!!_ctx.$slots.overlay ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "overlay")])) : createCommentVNode("", true),
 					_ctx.$slots.prepend || !!__props.iconPrepend ? (openBlock(), createElementBlock("div", {
 						key: 2,
 						class: normalizeClass(["i8-prepend", { "i8-icon-clickable": !!__props.onPrependClick }])
 					}, [renderSlot(_ctx.$slots, "prepend", mergeProps(unref(attrs), { dataHasValue: hasValue.value }), () => [createElementVNode("div", {
 						class: "i8-icon-wrap",
 						onClick: _cache[0] || (_cache[0] = ($event) => emit("prependClick", $event))
-					}, [createVNode(VuIcon, { name: __props.iconPrepend }, null, 8, ["name"])])])], 2)) : createCommentVNode("v-if", true),
+					}, [createVNode(VuIcon, { name: __props.iconPrepend }, null, 8, ["name"])])])], 2)) : createCommentVNode("", true),
 					createElementVNode("div", _hoisted_3, [!!__props.label ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						class: "i8-label-wrapper",
@@ -183,7 +118,7 @@ var InputBase_default = /* @__PURE__ */ defineComponent({
 						key: 0,
 						class: "i8-label",
 						"data-required": __props.required
-					}, toDisplayString(__props.label), 9, _hoisted_5)) : createCommentVNode("v-if", true)], 8, _hoisted_4)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", mergeProps(unref(inputAttrs), {
+					}, toDisplayString(__props.label), 9, _hoisted_5)) : createCommentVNode("", true)], 8, _hoisted_4)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default", mergeProps(unref(inputAttrs), {
 						onFocus,
 						onBlur
 					}), () => [__props.type === "textarea" ? (openBlock(), createElementBlock("div", _hoisted_6, [withDirectives(createElementVNode("textarea", mergeProps(unref(inputAttrs), {
@@ -202,14 +137,14 @@ var InputBase_default = /* @__PURE__ */ defineComponent({
 					_ctx.$slots.append || !!__props.iconAppend || __props.loading ? (openBlock(), createElementBlock("div", {
 						key: 3,
 						class: normalizeClass(["i8-append", { "i8-icon-clickable": !!__props.onAppendClick }])
-					}, [createElementVNode("div", _hoisted_7, [__props.loading ? (openBlock(), createBlock(VuLoadingIndicator, { key: 0 })) : createCommentVNode("v-if", true)]), _ctx.$slots.append || !!__props.iconAppend ? renderSlot(_ctx.$slots, "append", mergeProps({ key: 0 }, unref(attrs), {
+					}, [createElementVNode("div", _hoisted_7, [__props.loading ? (openBlock(), createBlock(VuLoadingIndicator, { key: 0 })) : createCommentVNode("", true)]), _ctx.$slots.append || !!__props.iconAppend ? renderSlot(_ctx.$slots, "append", mergeProps({ key: 0 }, unref(attrs), {
 						dataHasValue: hasValue.value,
 						emitClick: (event) => emit("appendClick", event),
 						iconAppend: __props.iconAppend
 					}), () => [createElementVNode("div", {
 						class: "i8-icon-wrap",
 						onClick: _cache[3] || (_cache[3] = ($event) => emit("appendClick", $event))
-					}, [createVNode(VuIcon, { name: __props.iconAppend }, null, 8, ["name"])])]) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)
+					}, [createVNode(VuIcon, { name: __props.iconAppend }, null, 8, ["name"])])]) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
 				]),
 				_: 3
 			}, 16, [