ropav 0.0.9 → 0.0.11

package/dist/badge.css

@@ -1,94 +1,96 @@
-.rp-badge[data-v-fdf959f0] {
-  --_rp-badge-height: 20px;
-  --_rp-badge-padding-x: 10px;
-  --_rp-badge-font-size: 11px;
-  --_rp-badge-radius: var(--rp-radius-full);
-  --_rp-badge-bg: var(--rp-color-default);
-  --_rp-badge-fg: var(--rp-color-default-color);
-  --_rp-badge-border: var(--rp-color-default-border);
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  min-width: 0;
-  height: var(--_rp-badge-height);
-  padding: 0 var(--_rp-badge-padding-x);
-  gap: var(--rp-spacing-1);
-  color: var(--_rp-badge-fg);
-  font-family: var(--rp-font-family);
-  font-size: var(--_rp-badge-font-size);
-  font-weight: var(--rp-font-weight-medium);
-  line-height: calc(var(--_rp-badge-height) - 2px);
-  vertical-align: middle;
-  white-space: nowrap;
-  background-color: var(--_rp-badge-bg);
-  border: var(--rp-border-width-thin) solid var(--_rp-badge-border);
-  border-radius: var(--_rp-badge-radius);
-  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
-}
-.rp-badge--size-xs[data-v-fdf959f0] {
-  --_rp-badge-height: 16px;
-  --_rp-badge-padding-x: 6px;
-  --_rp-badge-font-size: 9px;
-}
-.rp-badge--size-sm[data-v-fdf959f0] {
-  --_rp-badge-height: 18px;
-  --_rp-badge-padding-x: 8px;
-  --_rp-badge-font-size: 10px;
-}
-.rp-badge--size-md[data-v-fdf959f0] {
-  --_rp-badge-height: 20px;
-  --_rp-badge-padding-x: 10px;
-  --_rp-badge-font-size: 11px;
-}
-.rp-badge--size-lg[data-v-fdf959f0] {
-  --_rp-badge-height: 26px;
-  --_rp-badge-padding-x: 12px;
-  --_rp-badge-font-size: 13px;
-}
-.rp-badge--size-xl[data-v-fdf959f0] {
-  --_rp-badge-height: 32px;
-  --_rp-badge-padding-x: 16px;
-  --_rp-badge-font-size: 16px;
-}
-.rp-badge--radius-none[data-v-fdf959f0] {
-  --_rp-badge-radius: var(--rp-radius-none);
-}
-.rp-badge--radius-xs[data-v-fdf959f0] {
-  --_rp-badge-radius: var(--rp-radius-xs);
-}
-.rp-badge--radius-sm[data-v-fdf959f0] {
-  --_rp-badge-radius: var(--rp-radius-sm);
-}
-.rp-badge--radius-md[data-v-fdf959f0] {
-  --_rp-badge-radius: var(--rp-radius-md);
-}
-.rp-badge--radius-lg[data-v-fdf959f0] {
-  --_rp-badge-radius: var(--rp-radius-lg);
-}
-.rp-badge--radius-xl[data-v-fdf959f0] {
-  --_rp-badge-radius: var(--rp-radius-xl);
-}
-.rp-badge--radius-full[data-v-fdf959f0] {
-  --_rp-badge-radius: var(--rp-radius-full);
-}
-.rp-badge__left[data-v-fdf959f0], .rp-badge__right[data-v-fdf959f0] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  line-height: 0;
-}
-.rp-badge__left[data-v-fdf959f0] >  svg, .rp-badge__right[data-v-fdf959f0] >  svg {
-  display: block;
-  width: 1em;
-  height: 1em;
-}
-.rp-badge__label[data-v-fdf959f0] {
-  display: inline-block;
-  min-width: 0;
-  overflow: hidden;
-  text-transform: uppercase;
-  text-overflow: ellipsis;
+@layer ropav.components {
+.rp-badge[data-v-0b9a55a5] {
+    --_rp-badge-height: 20px;
+    --_rp-badge-padding-x: 10px;
+    --_rp-badge-font-size: 11px;
+    --_rp-badge-radius: var(--rp-radius-full);
+    --_rp-badge-bg: var(--rp-color-default);
+    --_rp-badge-fg: var(--rp-color-default-color);
+    --_rp-badge-border: var(--rp-color-default-border);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    min-width: 0;
+    height: var(--_rp-badge-height);
+    padding: 0 var(--_rp-badge-padding-x);
+    gap: var(--rp-spacing-1);
+    color: var(--_rp-badge-fg);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-badge-font-size);
+    font-weight: var(--rp-font-weight-medium);
+    line-height: calc(var(--_rp-badge-height) - 2px);
+    vertical-align: middle;
+    white-space: nowrap;
+    background-color: var(--_rp-badge-bg);
+    border: var(--rp-border-width-thin) solid var(--_rp-badge-border);
+    border-radius: var(--_rp-badge-radius);
+    transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
+}
+.rp-badge--size-xs[data-v-0b9a55a5] {
+    --_rp-badge-height: 16px;
+    --_rp-badge-padding-x: 6px;
+    --_rp-badge-font-size: 9px;
+}
+.rp-badge--size-sm[data-v-0b9a55a5] {
+    --_rp-badge-height: 18px;
+    --_rp-badge-padding-x: 8px;
+    --_rp-badge-font-size: 10px;
+}
+.rp-badge--size-md[data-v-0b9a55a5] {
+    --_rp-badge-height: 20px;
+    --_rp-badge-padding-x: 10px;
+    --_rp-badge-font-size: 11px;
+}
+.rp-badge--size-lg[data-v-0b9a55a5] {
+    --_rp-badge-height: 26px;
+    --_rp-badge-padding-x: 12px;
+    --_rp-badge-font-size: 13px;
+}
+.rp-badge--size-xl[data-v-0b9a55a5] {
+    --_rp-badge-height: 32px;
+    --_rp-badge-padding-x: 16px;
+    --_rp-badge-font-size: 16px;
+}
+.rp-badge--radius-none[data-v-0b9a55a5] {
+    --_rp-badge-radius: var(--rp-radius-none);
+}
+.rp-badge--radius-xs[data-v-0b9a55a5] {
+    --_rp-badge-radius: var(--rp-radius-xs);
+}
+.rp-badge--radius-sm[data-v-0b9a55a5] {
+    --_rp-badge-radius: var(--rp-radius-sm);
+}
+.rp-badge--radius-md[data-v-0b9a55a5] {
+    --_rp-badge-radius: var(--rp-radius-md);
+}
+.rp-badge--radius-lg[data-v-0b9a55a5] {
+    --_rp-badge-radius: var(--rp-radius-lg);
+}
+.rp-badge--radius-xl[data-v-0b9a55a5] {
+    --_rp-badge-radius: var(--rp-radius-xl);
+}
+.rp-badge--radius-full[data-v-0b9a55a5] {
+    --_rp-badge-radius: var(--rp-radius-full);
+}
+.rp-badge__left[data-v-0b9a55a5], .rp-badge__right[data-v-0b9a55a5] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    line-height: 0;
+}
+.rp-badge__left[data-v-0b9a55a5] >  svg, .rp-badge__right[data-v-0b9a55a5] >  svg {
+    display: block;
+    width: 1em;
+    height: 1em;
+}
+.rp-badge__label[data-v-0b9a55a5] {
+    display: inline-block;
+    min-width: 0;
+    overflow: hidden;
+    text-transform: uppercase;
+    text-overflow: ellipsis;
+}
 }

package/dist/badge.js

@@ -1,8 +1,9 @@
 import './badge.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi } from "./styles-api.js";
 import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setStyle, template } from "vue";
+import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/badge/useBadgeColor.ts
 function getBadgeColorStyle(color, variant, autoContrast) {
 	if (!color && !variant) return void 0;
@@ -20,14 +21,13 @@ function getBadgeColorStyle(color, variant, autoContrast) {
 }
 //#endregion
 //#region src/components/badge/badge.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-fdf959f0 class=rp-badge__left>");
-var t1 = template("<span data-v-fdf959f0 class=rp-badge__label>");
-var t2 = template("<span data-v-fdf959f0 class=rp-badge__right>");
-var t3 = template("<span data-v-fdf959f0>", 1);
+var t0 = template("<span data-v-0b9a55a5>");
+var t1 = template("<span data-v-0b9a55a5>", 1);
 //#endregion
 //#region src/components/badge/badge.vue
 var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpBadge",
+	inheritAttrs: false,
 	__name: "badge",
 	props: {
 		variant: {},
@@ -35,7 +35,9 @@ var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		autoContrast: { type: Boolean },
 		size: {},
 		radius: {},
-		ariaLabel: {}
+		ariaLabel: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props, { slots: $slots }) {
 		const props = __props;
@@ -45,38 +47,49 @@ var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}));
 		const rootStyle = computed(() => getBadgeColorStyle(props.color, props.variant, props.autoContrast));
-		const n12 = t3();
-		renderEffect(() => {
-			setClass(n12, rootClass.value);
-			setStyle(n12, rootStyle.value);
-			setAttr(n12, "aria-label", __props.ariaLabel || void 0);
-		});
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			style: rootStyle.value,
+			"aria-label": props.ariaLabel || void 0
+		}));
+		const n12 = t1();
+		renderEffect(() => setDynamicProps(n12, [rootAttrs.value]));
 		setInsertionState(n12, null, 0);
 		createIf(() => $slots.left, () => {
 			const n3 = t0();
+			renderEffect(() => setDynamicProps(n3, [unref(getPartAttrs)("left", { class: "rp-badge__left" })]));
 			setInsertionState(n3, null, 0);
 			createSlot("left", null, null, 1);
 			return n3;
 		});
 		setInsertionState(n12, null, 1);
 		createIf(() => $slots.default, () => {
-			const n7 = t1();
+			const n7 = t0();
+			renderEffect(() => setDynamicProps(n7, [unref(getPartAttrs)("label", { class: "rp-badge__label" })]));
 			setInsertionState(n7, null, 0);
 			createSlot("default", null, null, 1);
 			return n7;
 		});
 		setInsertionState(n12, null, 2);
 		createIf(() => $slots.right, () => {
-			const n11 = t2();
+			const n11 = t0();
+			renderEffect(() => setDynamicProps(n11, [unref(getPartAttrs)("right", { class: "rp-badge__right" })]));
 			setInsertionState(n11, null, 0);
 			createSlot("right", null, null, 1);
 			return n11;
 		});
 		return n12;
 	}
-}), [["__scopeId", "data-v-fdf959f0"]]);
+}), [["__scopeId", "data-v-0b9a55a5"]]);
 //#endregion
 //#region src/components/badge/types.ts
+var badgeParts = [
+	"root",
+	"left",
+	"label",
+	"right"
+];
 var badgeColors = componentColors;
 var badgeSizes = [
 	"xs",
@@ -101,4 +114,4 @@ var badgeVariants = [
 	"outline"
 ];
 //#endregion
-export { badge_default as a, badgeVariants as i, badgeRadiuses as n, badgeSizes as r, badgeColors as t };
+export { badgeVariants as a, badgeSizes as i, badgeParts as n, badge_default as o, badgeRadiuses as r, badgeColors as t };