ropav 0.0.5 → 0.0.7

package/dist/button.css

@@ -1,14 +1,26 @@
-.rp-button[data-v-b8d57358] {
-  --_rp-button-accent: var(--rp-color-primary);
-  --_rp-button-accent-hover: var(--rp-color-primary-hover);
-  --_rp-button-accent-active: var(--rp-color-primary-active);
-  --_rp-button-accent-on: var(--rp-color-on-primary);
-  --_rp-button-accent-subtle-bg: var(--rp-color-primary-subtle-bg);
-  --_rp-button-accent-subtle-bg-hover: var(--rp-color-primary-subtle-bg-hover);
-  --_rp-button-accent-subtle-bg-active: var(--rp-color-primary-subtle-bg-active);
-  --_rp-button-accent-border: var(--rp-color-primary-border);
-  --_rp-button-accent-border-hover: var(--rp-color-primary-border-hover);
-  --_rp-button-accent-fg: var(--rp-color-primary-fg);
+.rp-button[data-v-4a751fe6] {
+  --_rp-button-accent: var(--_rp-button-custom-color, var(--rp-color-primary));
+  --_rp-button-accent-hover: var(--_rp-button-custom-hover, var(--rp-color-primary-hover));
+  --_rp-button-accent-active: var(--_rp-button-custom-active, var(--rp-color-primary-active));
+  --_rp-button-accent-on: var(--_rp-button-custom-on, var(--rp-color-on-primary));
+  --_rp-button-accent-subtle-bg: var(
+      --_rp-button-custom-subtle-bg,
+      var(--rp-color-primary-subtle-bg)
+  );
+  --_rp-button-accent-subtle-bg-hover: var(
+      --_rp-button-custom-subtle-bg-hover,
+      var(--rp-color-primary-subtle-bg-hover)
+  );
+  --_rp-button-accent-subtle-bg-active: var(
+      --_rp-button-custom-subtle-bg-active,
+      var(--rp-color-primary-subtle-bg-active)
+  );
+  --_rp-button-accent-border: var(--_rp-button-custom-border, var(--rp-color-primary-border));
+  --_rp-button-accent-border-hover: var(
+      --_rp-button-custom-border-hover,
+      var(--rp-color-primary-border-hover)
+  );
+  --_rp-button-accent-fg: var(--_rp-button-custom-fg, var(--rp-color-primary-fg));
   --_rp-button-bg: var(--rp-color-button-default-bg);
   --_rp-button-bg-hover: var(--rp-color-button-default-bg-hover);
   --_rp-button-bg-active: var(--rp-color-button-default-bg-active);
@@ -26,8 +38,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  position: relative;
   box-sizing: border-box;
-  gap: var(--rp-spacing-2);
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-medium);
   line-height: var(--rp-line-height-none);
@@ -45,18 +57,18 @@
   font-size: var(--_rp-button-font-size);
   border-radius: var(--_rp-button-radius);
 }
-.rp-button[data-v-b8d57358]:hover:not(:disabled) {
+.rp-button[data-v-4a751fe6]:hover:not(:disabled) {
   background-color: var(--_rp-button-bg-hover);
   border-color: var(--_rp-button-border-hover);
   box-shadow: var(--_rp-button-shadow-hover);
 }
-.rp-button[data-v-b8d57358]:active:not(:disabled) {
+.rp-button[data-v-4a751fe6]:active:not(:disabled) {
   background-color: var(--_rp-button-bg-active);
   border-color: var(--_rp-button-border-active);
   box-shadow: var(--_rp-button-shadow-active);
   transform: translateY(1px);
 }
-.rp-button--color-primary[data-v-b8d57358] {
+.rp-button--color-primary[data-v-4a751fe6] {
   --_rp-button-accent: var(--rp-color-primary);
   --_rp-button-accent-hover: var(--rp-color-primary-hover);
   --_rp-button-accent-active: var(--rp-color-primary-active);
@@ -73,7 +85,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-secondary[data-v-b8d57358] {
+.rp-button--color-secondary[data-v-4a751fe6] {
   --_rp-button-accent: var(--rp-color-secondary);
   --_rp-button-accent-hover: var(--rp-color-secondary-hover);
   --_rp-button-accent-active: var(--rp-color-secondary-active);
@@ -90,7 +102,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-success[data-v-b8d57358] {
+.rp-button--color-success[data-v-4a751fe6] {
   --_rp-button-accent: var(--rp-color-success);
   --_rp-button-accent-hover: var(--rp-color-success-hover);
   --_rp-button-accent-active: var(--rp-color-success-active);
@@ -107,7 +119,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-warning[data-v-b8d57358] {
+.rp-button--color-warning[data-v-4a751fe6] {
   --_rp-button-accent: var(--rp-color-warning);
   --_rp-button-accent-hover: var(--rp-color-warning-hover);
   --_rp-button-accent-active: var(--rp-color-warning-active);
@@ -124,7 +136,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-danger[data-v-b8d57358] {
+.rp-button--color-danger[data-v-4a751fe6] {
   --_rp-button-accent: var(--rp-color-danger);
   --_rp-button-accent-hover: var(--rp-color-danger-hover);
   --_rp-button-accent-active: var(--rp-color-danger-active);
@@ -141,7 +153,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-info[data-v-b8d57358] {
+.rp-button--color-info[data-v-4a751fe6] {
   --_rp-button-accent: var(--rp-color-info);
   --_rp-button-accent-hover: var(--rp-color-info-hover);
   --_rp-button-accent-active: var(--rp-color-info-active);
@@ -158,7 +170,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-neutral[data-v-b8d57358] {
+.rp-button--color-neutral[data-v-4a751fe6] {
   --_rp-button-accent: var(--rp-color-neutral);
   --_rp-button-accent-hover: var(--rp-color-neutral-hover);
   --_rp-button-accent-active: var(--rp-color-neutral-active);
@@ -175,42 +187,42 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--size-xs[data-v-b8d57358] {
+.rp-button--size-xs[data-v-4a751fe6] {
   --_rp-button-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
   --_rp-button-padding-x: var(--rp-spacing-2);
   --_rp-button-font-size: var(--rp-font-size-xs);
 }
-.rp-button--size-sm[data-v-b8d57358] {
+.rp-button--size-sm[data-v-4a751fe6] {
   --_rp-button-height: var(--rp-size-control-sm);
   --_rp-button-padding-x: var(--rp-spacing-3);
   --_rp-button-font-size: var(--rp-font-size-sm);
 }
-.rp-button--size-lg[data-v-b8d57358] {
+.rp-button--size-lg[data-v-4a751fe6] {
   --_rp-button-height: var(--rp-size-control-lg);
   --_rp-button-padding-x: var(--rp-spacing-5);
   --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--size-xl[data-v-b8d57358] {
+.rp-button--size-xl[data-v-4a751fe6] {
   --_rp-button-height: calc(var(--rp-size-control-lg) + var(--rp-spacing-2));
   --_rp-button-padding-x: var(--rp-spacing-6);
   --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--radius-xs[data-v-b8d57358] {
+.rp-button--radius-xs[data-v-4a751fe6] {
   --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-b8d57358] {
+.rp-button--radius-sm[data-v-4a751fe6] {
   --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-b8d57358] {
+.rp-button--radius-md[data-v-4a751fe6] {
   --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-b8d57358] {
+.rp-button--radius-lg[data-v-4a751fe6] {
   --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-b8d57358] {
+.rp-button--radius-xl[data-v-4a751fe6] {
   --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--solid[data-v-b8d57358] {
+.rp-button--solid[data-v-4a751fe6] {
   --_rp-button-bg: var(--_rp-button-accent);
   --_rp-button-bg-hover: var(--_rp-button-accent-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-active);
@@ -219,7 +231,7 @@
   --_rp-button-border-active: var(--_rp-button-accent-active);
   --_rp-button-fg: var(--_rp-button-accent-on);
 }
-.rp-button--subtle[data-v-b8d57358] {
+.rp-button--subtle[data-v-4a751fe6] {
   --_rp-button-bg: var(--_rp-button-accent-subtle-bg);
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -231,7 +243,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--surface[data-v-b8d57358] {
+.rp-button--surface[data-v-4a751fe6] {
   --_rp-button-bg: var(--_rp-button-accent-subtle-bg);
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -243,7 +255,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--outline[data-v-b8d57358] {
+.rp-button--outline[data-v-4a751fe6] {
   --_rp-button-bg: transparent;
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -255,7 +267,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--ghost[data-v-b8d57358] {
+.rp-button--ghost[data-v-4a751fe6] {
   --_rp-button-bg: transparent;
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -267,7 +279,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--plain[data-v-b8d57358] {
+.rp-button--plain[data-v-4a751fe6] {
   --_rp-button-bg: transparent;
   --_rp-button-bg-hover: transparent;
   --_rp-button-bg-active: transparent;
@@ -279,31 +291,49 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button[data-v-b8d57358]:disabled {
+.rp-button[data-v-4a751fe6]:disabled {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
   box-shadow: none;
   transform: none;
 }
-.rp-button[data-v-b8d57358]:focus-visible {
+.rp-button[data-v-4a751fe6]:focus-visible {
   outline: none;
   border-color: var(--rp-color-primary);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-button__left[data-v-b8d57358], .rp-button__right[data-v-b8d57358] {
+.rp-button--loading .rp-button__content[data-v-4a751fe6] {
+  visibility: hidden;
+}
+.rp-button__content[data-v-4a751fe6] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rp-spacing-2);
+}
+.rp-button__left[data-v-4a751fe6], .rp-button__right[data-v-4a751fe6] {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
 }
-.rp-button__spinner[data-v-b8d57358] {
+.rp-button__loading[data-v-4a751fe6] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+.rp-button__spinner[data-v-4a751fe6] {
   display: block;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
   transform-origin: center;
-  animation: rp-button-spin-b8d57358 700ms linear infinite;
+  animation: rp-spinner-spin-4a751fe6 700ms linear infinite;
 }
-@keyframes rp-button-spin-b8d57358 {
+@keyframes rp-spinner-spin-4a751fe6 {
 to {
     transform: rotate(360deg);
 }

package/dist/button.js

@@ -1,11 +1,14 @@
 import './button.css';
-import { t as loader_circle_default } from "./loader-circle.js";
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setProp, template, unref } from "vue";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { r as isComponentPresetColor } from "./componentColors.js";
+import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
+import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/button/button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-b8d57358 class=rp-button__left>");
-var t1 = template("<span data-v-b8d57358 class=rp-button__right>");
-var t2 = template("<button data-v-b8d57358><span data-v-b8d57358 class=rp-button__label></span>", 1);
+var t0 = template("<span data-v-4a751fe6 class=rp-button__loading aria-hidden=true>");
+var t1 = template("<span data-v-4a751fe6 class=rp-button__left>");
+var t2 = template("<span data-v-4a751fe6 class=rp-button__right>");
+var t3 = template("<button data-v-4a751fe6><span data-v-4a751fe6 class=rp-button__content><span data-v-4a751fe6 class=rp-button__label></span>", 1);
 //#endregion
 //#region src/components/button/button.vue
 var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -28,46 +31,54 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	},
 	setup(__props, { slots: $slots }) {
 		const props = __props;
-		const isLoading = computed(() => props.loading && !props.disabled);
 		const rootClass = computed(() => bem("rp-button", {
 			[props.variant ?? ""]: Boolean(props.variant),
-			[`color-${props.color}`]: Boolean(props.color),
+			[`color-${props.color}`]: isComponentPresetColor(props.color),
 			[`size-${props.size}`]: Boolean(props.size),
-			[`radius-${props.radius}`]: Boolean(props.radius)
+			[`radius-${props.radius}`]: Boolean(props.radius),
+			loading: props.loading
 		}));
-		const n13 = t2();
-		const n8 = child(n13, 2);
+		const rootStyle = computed(() => getButtonColorStyle(props.color));
+		const n17 = t3();
+		const n16 = child(n17, 1);
+		const n11 = child(n16, 1);
 		renderEffect(() => {
-			setClass(n13, rootClass.value);
-			setProp(n13, "disabled", __props.disabled || isLoading.value || void 0);
-			setProp(n13, "type", __props.type);
+			const _loading = __props.loading;
+			setClass(n17, rootClass.value);
+			setStyle(n17, rootStyle.value);
+			setProp(n17, "disabled", __props.disabled || _loading || void 0);
+			setProp(n17, "type", __props.type);
+			setAttr(n17, "aria-busy", _loading || void 0);
 		});
-		setInsertionState(n13, 0, 0);
-		createIf(() => isLoading.value, () => {
-			return createComponent(unref(loader_circle_default), {
-				class: "rp-button__spinner",
-				"aria-hidden": "true"
-			});
+		setInsertionState(n17, 0, 0);
+		createIf(() => __props.loading, () => {
+			const n5 = t0();
+			setInsertionState(n5, null, 0);
+			createSlot("loading", null, () => {
+				return createComponent(unref(loader_circle_default), { class: "rp-button__spinner" });
+			}, 1);
+			return n5;
 		});
-		setInsertionState(n13, 0, 1);
-		createIf(() => $slots.left && !isLoading.value, () => {
-			const n6 = t0();
-			setInsertionState(n6, null, 0);
+		renderEffect(() => setAttr(n16, "aria-hidden", __props.loading || void 0));
+		setInsertionState(n16, 0, 0);
+		createIf(() => $slots.left, () => {
+			const n9 = t1();
+			setInsertionState(n9, null, 0);
 			createSlot("left", null, null, 1);
-			return n6;
+			return n9;
 		});
-		setInsertionState(n8, null, 0);
+		setInsertionState(n11, null, 0);
 		createSlot("default", null, null, 1);
-		setInsertionState(n13, null, 3);
+		setInsertionState(n16, null, 2);
 		createIf(() => $slots.right, () => {
-			const n12 = t1();
-			setInsertionState(n12, null, 0);
+			const n15 = t2();
+			setInsertionState(n15, null, 0);
 			createSlot("right", null, null, 1);
-			return n12;
+			return n15;
 		});
-		return n13;
+		return n17;
 	}
-}), [["__scopeId", "data-v-b8d57358"]]);
+}), [["__scopeId", "data-v-4a751fe6"]]);
 //#endregion
 export { button_default as t };
 

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../src/components/button/button.vue","../src/components/button/button.vue"],"sourcesContent":["<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst isLoading = computed(() => props.loading && !props.disabled);\n\nconst rootClass = computed(() =>\n    bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: Boolean(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst isLoading = computed(() => props.loading && !props.disabled);\n\nconst rootClass = computed(() =>\n    bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: Boolean(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAMd,MAAM,YAAY,eAAe,MAAM,WAAW,CAAC,MAAM,QAAQ;EAEjE,MAAM,YAAY,eACd,IAAI,aAAa;IACZ,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;IAC3C,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;IAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;IACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;EACpD,CAAC,CACL;;;;iBArCoB,UAAA,KAAS;gBAAG,YAAU,QAAA,YAAY,UAAA,SAAa,KAAA,CAAS;gBAAG,QAAM,QAAA,IAAI;;;iBACzD,UAAA,aAAS;;IAAE,OAAM;IAAqB,eAAY;;;;iBAC9D,OAAM,QAAA,CAAU,UAAA,aAAS;;;cAC3B,QAAW,MAAA,MAAA,CAAA;;;;;;iBAKT,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA"}
+{"version":3,"file":"button.js","names":[],"sources":["../src/components/button/button.vue","../src/components/button/button.vue"],"sourcesContent":["<template>\n    <button\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :disabled=\"disabled || loading || undefined\"\n        :type=\"type\"\n        :aria-busy=\"loading || undefined\"\n    >\n        <span v-if=\"loading\" class=\"rp-button__loading\" aria-hidden=\"true\">\n            <slot name=\"loading\">\n                <IconLoaderCircle class=\"rp-button__spinner\" />\n            </slot>\n        </span>\n        <span class=\"rp-button__content\" :aria-hidden=\"loading || undefined\">\n            <span v-if=\"$slots.left\" class=\"rp-button__left\">\n                <slot name=\"left\" />\n            </span>\n            <span class=\"rp-button__label\">\n                <slot />\n            </span>\n            <span v-if=\"$slots.right\" class=\"rp-button__right\">\n                <slot name=\"right\" />\n            </span>\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\nimport { getButtonColorStyle } from './useButtonColor';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst rootClass = computed(() =>\n    bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: isComponentPresetColor(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        loading: props.loading,\n    }),\n);\n\nconst rootStyle = computed(() => getButtonColorStyle(props.color));\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :disabled=\"disabled || loading || undefined\"\n        :type=\"type\"\n        :aria-busy=\"loading || undefined\"\n    >\n        <span v-if=\"loading\" class=\"rp-button__loading\" aria-hidden=\"true\">\n            <slot name=\"loading\">\n                <IconLoaderCircle class=\"rp-button__spinner\" />\n            </slot>\n        </span>\n        <span class=\"rp-button__content\" :aria-hidden=\"loading || undefined\">\n            <span v-if=\"$slots.left\" class=\"rp-button__left\">\n                <slot name=\"left\" />\n            </span>\n            <span class=\"rp-button__label\">\n                <slot />\n            </span>\n            <span v-if=\"$slots.right\" class=\"rp-button__right\">\n                <slot name=\"right\" />\n            </span>\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\nimport { getButtonColorStyle } from './useButtonColor';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst rootClass = computed(() =>\n    bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: isComponentPresetColor(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        loading: props.loading,\n    }),\n);\n\nconst rootStyle = computed(() => getButtonColorStyle(props.color));\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCA,MAAM,QAAQ;EAMd,MAAM,YAAY,eACd,IAAI,aAAa;IACZ,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;IAC3C,SAAS,MAAM,UAAU,uBAAuB,MAAM,KAAK;IAC3D,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;IACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;GAChD,SAAS,MAAM;EACnB,CAAC,CACL;EAEA,MAAM,YAAY,eAAe,oBAAoB,MAAM,KAAK,CAAC;;;;;;iBAnDjD,UAAA,KAAS;iBACT,UAAA,KAAS;gBAChB,YAAU,QAAA,YAAY,YAAW,KAAA,CAAS;gBAC1C,QAAM,QAAA,IAAI;gBACV,aAAW,YAAW,KAAA,CAAS;;;iBAEpB,QAAA,eAAO;;;cACT,WAAc,YAAA;2DACE,OAAM,qBAAoB,CAAA;;;;kCAGlB,eAAa,QAAA,WAAW,KAAA,CAAS,CAAA;;iBACnD,OAAM,YAAA;;;cACR,QAAW,MAAA,MAAA,CAAA;;;;;;iBAKT,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA"}

package/dist/card.js

@@ -1,5 +1,6 @@
 import './card.css';
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setText, template, toDisplayString, txt } from "vue";
 //#region src/components/card/card.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-v-c3ae62b7 class=rp-card__title> ");

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../src/components/card/card.vue","../src/components/card/card.vue"],"sourcesContent":["<template>\n    <div :class=\"rootClass\">\n        <div v-if=\"hasHeader\" class=\"rp-card__header\">\n            <div v-if=\"hasTitle\" class=\"rp-card__title\">\n                {{ title }}\n            </div>\n            <p v-if=\"hasDescription\" class=\"rp-card__description\">\n                {{ description }}\n            </p>\n        </div>\n\n        <div v-if=\"$slots.default\" class=\"rp-card__body\">\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { CardProps } from './types';\n\ndefineOptions({ name: 'RpCard' });\n\nconst props = withDefaults(defineProps<CardProps>(), {\n    border: true,\n    title: '',\n    description: '',\n});\n\nconst hasTitle = computed(() => Boolean(props.title));\nconst hasDescription = computed(() => Boolean(props.description));\nconst hasHeader = computed(() => Boolean(hasTitle.value || hasDescription.value));\n\nconst rootClass = computed(() =>\n    bem('rp-card', {\n        [`layer-${props.layer}`]: Boolean(props.layer),\n        [`padding-${props.padding}`]: Boolean(props.padding),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        borderless: !props.border,\n    }),\n);\n</script>\n\n<style src=\"./card.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\n        <div v-if=\"hasHeader\" class=\"rp-card__header\">\n            <div v-if=\"hasTitle\" class=\"rp-card__title\">\n                {{ title }}\n            </div>\n            <p v-if=\"hasDescription\" class=\"rp-card__description\">\n                {{ description }}\n            </p>\n        </div>\n\n        <div v-if=\"$slots.default\" class=\"rp-card__body\">\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { CardProps } from './types';\n\ndefineOptions({ name: 'RpCard' });\n\nconst props = withDefaults(defineProps<CardProps>(), {\n    border: true,\n    title: '',\n    description: '',\n});\n\nconst hasTitle = computed(() => Boolean(props.title));\nconst hasDescription = computed(() => Boolean(props.description));\nconst hasHeader = computed(() => Boolean(hasTitle.value || hasDescription.value));\n\nconst rootClass = computed(() =>\n    bem('rp-card', {\n        [`layer-${props.layer}`]: Boolean(props.layer),\n        [`padding-${props.padding}`]: Boolean(props.padding),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        borderless: !props.border,\n    }),\n);\n</script>\n\n<style src=\"./card.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,QAAQ;EAMd,MAAM,WAAW,eAAe,QAAQ,MAAM,KAAK,CAAC;EACpD,MAAM,iBAAiB,eAAe,QAAQ,MAAM,WAAW,CAAC;EAChE,MAAM,YAAY,eAAe,QAAQ,SAAS,SAAS,eAAe,KAAK,CAAC;EAEhF,MAAM,YAAY,eACd,IAAI,WAAW;IACV,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;IAC5C,WAAW,MAAM,YAAY,QAAQ,MAAM,OAAO;IAClD,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;GAChD,YAAY,CAAC,MAAM;EACvB,CAAC,CACL;;mCAxCiB,UAAA,KAAS,CAAA;;iBACP,UAAA,aAAS;;;kBACL,SAAA,aAAQ;;;mDACZ,QAAA,KAAK,CAAA,CAAA;;;;kBAEH,eAAA,aAAc;;;mDAChB,QAAA,WAAW,CAAA,CAAA;;;;;;iBAIX,OAAM,eAAA"}
+{"version":3,"file":"card.js","names":[],"sources":["../src/components/card/card.vue","../src/components/card/card.vue"],"sourcesContent":["<template>\n    <div :class=\"rootClass\">\n        <div v-if=\"hasHeader\" class=\"rp-card__header\">\n            <div v-if=\"hasTitle\" class=\"rp-card__title\">\n                {{ title }}\n            </div>\n            <p v-if=\"hasDescription\" class=\"rp-card__description\">\n                {{ description }}\n            </p>\n        </div>\n\n        <div v-if=\"$slots.default\" class=\"rp-card__body\">\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { CardProps } from './types';\n\ndefineOptions({ name: 'RpCard' });\n\nconst props = withDefaults(defineProps<CardProps>(), {\n    border: true,\n    title: '',\n    description: '',\n});\n\nconst hasTitle = computed(() => Boolean(props.title));\nconst hasDescription = computed(() => Boolean(props.description));\nconst hasHeader = computed(() => Boolean(hasTitle.value || hasDescription.value));\n\nconst rootClass = computed(() =>\n    bem('rp-card', {\n        [`layer-${props.layer}`]: Boolean(props.layer),\n        [`padding-${props.padding}`]: Boolean(props.padding),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        borderless: !props.border,\n    }),\n);\n</script>\n\n<style src=\"./card.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\n        <div v-if=\"hasHeader\" class=\"rp-card__header\">\n            <div v-if=\"hasTitle\" class=\"rp-card__title\">\n                {{ title }}\n            </div>\n            <p v-if=\"hasDescription\" class=\"rp-card__description\">\n                {{ description }}\n            </p>\n        </div>\n\n        <div v-if=\"$slots.default\" class=\"rp-card__body\">\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { CardProps } from './types';\n\ndefineOptions({ name: 'RpCard' });\n\nconst props = withDefaults(defineProps<CardProps>(), {\n    border: true,\n    title: '',\n    description: '',\n});\n\nconst hasTitle = computed(() => Boolean(props.title));\nconst hasDescription = computed(() => Boolean(props.description));\nconst hasHeader = computed(() => Boolean(hasTitle.value || hasDescription.value));\n\nconst rootClass = computed(() =>\n    bem('rp-card', {\n        [`layer-${props.layer}`]: Boolean(props.layer),\n        [`padding-${props.padding}`]: Boolean(props.padding),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        borderless: !props.border,\n    }),\n);\n</script>\n\n<style src=\"./card.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,QAAQ;EAMd,MAAM,WAAW,eAAe,QAAQ,MAAM,KAAK,CAAC;EACpD,MAAM,iBAAiB,eAAe,QAAQ,MAAM,WAAW,CAAC;EAChE,MAAM,YAAY,eAAe,QAAQ,SAAS,SAAS,eAAe,KAAK,CAAC;EAEhF,MAAM,YAAY,eACd,IAAI,WAAW;IACV,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;IAC5C,WAAW,MAAM,YAAY,QAAQ,MAAM,OAAO;IAClD,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;GAChD,YAAY,CAAC,MAAM;EACvB,CAAC,CACL;;mCAxCiB,UAAA,KAAS,CAAA;;iBACP,UAAA,aAAS;;;kBACL,SAAA,aAAQ;;;mDACZ,QAAA,KAAK,CAAA,CAAA;;;;kBAEH,eAAA,aAAc;;;mDAChB,QAAA,WAAW,CAAA,CAAA;;;;;;iBAIX,OAAM,eAAA"}