@vuecs/elements 1.2.3 → 1.2.5

package/dist/index.mjs

@@ -52,7 +52,11 @@ const alertProps = {
 	},
 	/** HTML tag to render. */
 	as: {
-		type: [String, Object],
+		type: [
+			String,
+			Object,
+			Function
+		],
 		default: "div"
 	},
 	...themableProps()
@@ -118,7 +122,11 @@ var AlertTitle_default = defineComponent({
 		* heading). Override via `:as` for nested-heading hierarchies.
 		*/
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "h4"
 		},
 		...themableProps()
@@ -136,7 +144,11 @@ var AlertDescription_default = defineComponent({
 	props: {
 		/** HTML tag to render. */
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "div"
 		},
 		...themableProps()
@@ -154,7 +166,11 @@ var AlertClose_default = defineComponent({
 	props: {
 		/** HTML tag to render. */
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "button"
 		},
 		/**
@@ -343,16 +359,35 @@ var Badge_default = defineComponent({
 			type: String,
 			default: void 0
 		},
-		/** HTML tag to render. */
-		tag: {
-			type: String,
+		/**
+		* Element or component to render as. Pass a string tag (`'span'`,
+		* `'div'`) or a component (`RouterLink` / `NuxtLink`).
+		*/
+		as: {
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "span"
 		},
+		/**
+		* @deprecated Use `as` instead. Non-breaking alias — takes precedence
+		* over `as` when set.
+		*/
+		tag: {
+			type: [
+				String,
+				Object,
+				Function
+			],
+			default: void 0
+		},
 		...themableProps()
 	},
 	setup(props, { attrs, slots }) {
 		const theme = useComponentTheme("badge", useThemeProps(props, "color", "variant", "size"), badgeThemeDefaults);
-		return () => h(props.tag, mergeProps(attrs, { class: theme.value.root || void 0 }), slots.default?.());
+		return () => h(props.tag ?? props.as, mergeProps(attrs, { class: theme.value.root || void 0 }), slots.default?.());
 	}
 });
 //#endregion
@@ -402,7 +437,11 @@ var Card_default = defineComponent({
 		},
 		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "div"
 		},
 		/** Render the consumer's slot child as the card root (Reka `asChild` pattern). */
@@ -431,7 +470,11 @@ var CardHeader_default = defineComponent({
 	props: {
 		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "header"
 		},
 		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
@@ -478,7 +521,11 @@ var CardTitle_default = defineComponent({
 	props: {
 		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "h3"
 		},
 		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
@@ -525,7 +572,11 @@ var CardDescription_default = defineComponent({
 	props: {
 		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "p"
 		},
 		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
@@ -572,7 +623,11 @@ var CardBody_default = defineComponent({
 	props: {
 		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "div"
 		},
 		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
@@ -619,7 +674,11 @@ var CardFooter_default = defineComponent({
 	props: {
 		/** HTML tag to render. Use `:as-child` to compose onto an existing component. */
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "footer"
 		},
 		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
@@ -794,7 +853,11 @@ var Collapse_default = defineComponent({
 		},
 		/** HTML tag to render. */
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "div"
 		},
 		/** Render the consumer's slot child as the root (Reka `asChild` pattern). */
@@ -835,7 +898,11 @@ const collapseTriggerProps = {
 	},
 	/** HTML tag (or component) to render as. Reka default: `'button'`. */
 	as: {
-		type: [String, Object],
+		type: [
+			String,
+			Object,
+			Function
+		],
 		default: "button"
 	},
 	/** Render the consumer's slot child as the trigger (Reka `asChild` pattern). */
@@ -889,7 +956,11 @@ var CollapseContent_default = defineComponent({
 		},
 		/** HTML tag to render. */
 		as: {
-			type: [String, Object],
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "div"
 		},
 		/** Render the consumer's slot child as the pane root (Reka `asChild` pattern). */
@@ -1139,7 +1210,11 @@ var VisuallyHidden_default = defineComponent({
 	props: { 
 	/** HTML tag to render. */
 as: {
-		type: [String, Object],
+		type: [
+			String,
+			Object,
+			Function
+		],
 		default: "span"
 	} },
 	setup(props, { attrs, slots }) {