vueless 0.0.163 → 0.0.164

package/composable.ui/index.js

@@ -8,7 +8,7 @@ import {
   Text,
   Fragment,
 } from "vue";
-import { cx, globalComponentConfig, strategy } from "../service.ui";
+import { cx, globalComponentConfig, strategy, getColor, setColor } from "../service.ui";
 import { cloneDeep } from "../service.helper";
 
 const strategyType = {
@@ -94,6 +94,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
   return {
     config,
     getAttrs,
+    getColor,
     setColor,
     hasSlotContent,
   };
@@ -350,7 +351,3 @@ function hasSlotContent(slot, props = {}) {
 
   return !isVNodeEmpty(slot?.(props));
 }
-
-function setColor(classes, color) {
-  return classes?.replaceAll("{color}", color);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.163",
+  "version": "0.0.164",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.29",
+    "@vueless/plugin-vite": "^0.0.30",
     "@vueless/storybook": "^0.0.31",
     "@vueless/web-types": "^0.0.11",
     "autoprefixer": "^10.4.19",

package/service.ui/index.js

@@ -43,7 +43,7 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
 */
 export const { layout, strategy, gray, brand, component: globalComponentConfig } = vuelessConfig;
 
-export default class UIServiceDefault {
+export default class UIService {
   isMac = false;
   isPWA = false;
   isIOS = false;
@@ -137,7 +137,7 @@ export default class UIServiceDefault {
     const globalBrandColor = getBrandColor(brand, grayColor, BRAND_COLORS);
 
     const style = document.createElement("style");
-    const rgb = UIServiceDefault.convertHexInRgb(localBrandColor || globalBrandColor || grayColor);
+    const rgb = UIService.convertHexInRgb(localBrandColor || globalBrandColor || grayColor);
 
     style.innerHTML = `
       :root {
@@ -187,22 +187,41 @@ export default class UIServiceDefault {
       globalComponentConfig[name]?.defaultVariants,
     );
 
-    if (brand === GRAYSCALE_COLOR && defaultVariants.color === BRAND_COLOR) {
-      defaultVariants.color = GRAYSCALE_COLOR;
-    }
+    defaultVariants.color = getColor(defaultVariants.color);
 
     return {
       default: defaultVariants,
     };
   }
+
+  /**
+   Get color for props.
+   @param { String } color
+   @returns { String }
+   */
+  getColor(color) {
+    return brand === GRAYSCALE_COLOR && color === BRAND_COLOR ? GRAYSCALE_COLOR : color;
+  }
+
+  /**
+   Find and replace all {color} variables in class names into given color.
+   @param { String } classes
+   @param { String } color
+   @returns { String }
+   */
+  setColor(classes, color) {
+    return classes?.replaceAll("{color}", color);
+  }
 }
 
 export const {
   getRandomId,
-  setBrandColor,
-  convertHexInRgb,
+  getColor,
+  setColor,
   setTitle,
   setFavicon,
+  setBrandColor,
+  convertHexInRgb,
   isMac,
   isPWA,
   isIOS,
@@ -210,4 +229,4 @@ export const {
   isMobileApp,
   PX_IN_REM,
   HYPHEN_SYMBOL,
-} = new UIServiceDefault();
+} = new UIService();

package/ui.button/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { button, text } = config.value;
 
   const cvaButton = cva({
@@ -24,7 +24,7 @@ export function useAttrs(props) {
     setColor(
       cvaButton({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         variant: props.variant,
         pill: props.pill,
         block: props.block,
@@ -40,7 +40,7 @@ export function useAttrs(props) {
   const textClasses = computed(() =>
     setColor(
       cvaText({
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.button/configs/default.config.js

@@ -160,7 +160,6 @@ export default /*tw*/ {
     { pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
     { pattern: `text-(${colors})-800`, variants: ["active"] },
     { pattern: `text-(${colors})-300`, variants: ["disabled"] },
-    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
-    { pattern: `ring-(${colors})-800`, variants: ["active"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus", "focus-within"] },
   ],
 };

package/ui.button-link/composables/attrs.composable.js

@@ -8,7 +8,10 @@ import defaultConfig from "../configs/default.config";
 export function useAttrs(props, { isActive, isExactActive }) {
   const slots = useSlots();
 
-  const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const { wrapper, link, text, rightSlot, leftSlot } = config.value;
 
   const cvaWrapper = cva({
@@ -45,7 +48,7 @@ export function useAttrs(props, { isActive, isExactActive }) {
     setColor(
       cvaWrapper({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         block: props.block,
         noRing: props.noRing,
         disabled: props.disabled,
@@ -58,7 +61,7 @@ export function useAttrs(props, { isActive, isExactActive }) {
     setColor(
       cvaLink({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         dashed: props.dashed,
         underlined: props.underlined,
       }),

package/ui.container-modal-confirm/composable/attrs.composable.js

@@ -4,8 +4,11 @@ import { cva } from "../../service.ui/index.js";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
-  const { modal, footerLeftFallback, confirmButton, cancelButton } = config.value;
+  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const { modal, footerLeftFallback } = config.value;
 
   const cvaModal = cva({
     base: modal.base,
@@ -19,40 +22,26 @@ export function useAttrs(props) {
     compoundVariants: footerLeftFallback.compoundVariants,
   });
 
-  const cvaConfirmButton = cva({
-    base: confirmButton.base,
-    variants: confirmButton.variants,
-    compoundVariants: confirmButton.compoundVariants,
-  });
-
-  const cvaCancelButton = cva({
-    base: cancelButton.base,
-    variants: cancelButton.variants,
-    compoundVariants: cancelButton.compoundVariants,
-  });
-
-  const modalClasses = computed(() => setColor(cvaModal({ color: props.color }), props.color));
+  const modalClasses = computed(() =>
+    setColor(
+      cvaModal({
+        color: getColor(props.color),
+      }),
+      props.color,
+    ),
+  );
 
   const footerLeftFallbackClasses = computed(() =>
-    setColor(cvaFooterLeftFallback({ color: props.color }), props.color),
+    setColor(cvaFooterLeftFallback({ color: getColor(props.color) }), props.color),
   );
 
-  const confirmButtonClasses = computed(() => cvaConfirmButton({ color: props.color }));
-
-  const cancelButtonClasses = computed(() => cvaCancelButton({ color: props.color }));
-
-  const modalAttrsRaw = getAttrs("modal", { isComponent: true, classes: modalClasses });
   const footerLeftFallbackAttrs = getAttrs("footerLeftFallback", {
     classes: footerLeftFallbackClasses,
   });
-  const confirmButtonAttrs = getAttrs("confirmButton", {
-    isComponent: true,
-    classes: confirmButtonClasses,
-  });
-  const cancelButtonAttrs = getAttrs("cancelButton", {
-    isComponent: true,
-    classes: cancelButtonClasses,
-  });
+
+  const confirmButtonAttrs = getAttrs("confirmButton", { isComponent: true });
+  const cancelButtonAttrs = getAttrs("cancelButton", { isComponent: true });
+  const modalAttrsRaw = getAttrs("modal", { isComponent: true, classes: modalClasses });
 
   const modalAttrs = computed(() => ({
     ...modalAttrsRaw.value,

package/ui.form-checkbox/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { checkbox, iconWrapper } = config.value;
 
   const cvaCheckbox = cva({
@@ -25,7 +25,7 @@ export function useAttrs(props) {
       cvaCheckbox({
         size: props.size,
         label: Boolean(props.label),
-        color: props.color,
+        color: getColor(props.color),
         disabled: props.color,
       }),
       props.color,
@@ -36,7 +36,7 @@ export function useAttrs(props) {
     setColor(
       cvaIconWrapper({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.form-radio/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props, { radioColor, radioSize }) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { radio } = config.value;
 
   const cvaRadio = cva({
@@ -17,7 +17,7 @@ export function useAttrs(props, { radioColor, radioSize }) {
   const radioClasses = computed(() =>
     setColor(
       cvaRadio({
-        color: radioColor.value,
+        color: getColor(radioColor.value),
         size: radioSize.value,
       }),
       radioColor.value,

package/ui.form-switch/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props, { checked }) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { wrapper, circle, toggleLabel } = config.value;
 
   const cvaWrapper = cva({
@@ -30,7 +30,7 @@ export function useAttrs(props, { checked }) {
     setColor(
       cvaWrapper({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         disabled: props.disabled,
         checked: Boolean(checked.value),
         toggleLabel: props.toggleLabel,
@@ -50,7 +50,7 @@ export function useAttrs(props, { checked }) {
     setColor(
       cvaToggleLabel({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         toggleLabel: props.toggleLabel,
         checked: Boolean(checked.value),
       }),

package/ui.image-avatar/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { avatar } = config.value;
 
   const cvaAvatar = cva({
@@ -18,7 +18,7 @@ export function useAttrs(props) {
     setColor(
       cvaAvatar({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         rounded: props.rounded,
         bordered: props.bordered,
       }),

package/ui.image-icon/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { wrapper, container, icon } = config.value;
 
   const cvaWrapper = cva({
@@ -31,7 +31,7 @@ export function useAttrs(props) {
       cvaWrapper({
         pill: props.pill,
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),
@@ -42,7 +42,7 @@ export function useAttrs(props) {
       cvaContainer({
         pill: props.pill,
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         variant: props.variant,
         interactive: props.interactive,
       }),

package/ui.loader/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { loader, ellipse } = config.value;
 
   const cvaLoader = cva({
@@ -30,7 +30,7 @@ export function useAttrs(props) {
     setColor(
       cvaEllipse({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.loader-rendering/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { getAttrs, setColor, config } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { wrapper } = config.value;
 
   const cvaWrapper = cva({
@@ -17,7 +17,7 @@ export function useAttrs(props) {
   const wrapperClasses = computed(() =>
     setColor(
       cvaWrapper({
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.loader-top/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { progress } = config.value;
 
   const cvaProgress = cva({
@@ -15,7 +15,12 @@ export function useAttrs(props) {
   });
 
   const progressClasses = computed(() =>
-    setColor(cvaProgress({ color: props.color }), props.color),
+    setColor(
+      cvaProgress({
+        color: getColor(props.color),
+      }),
+      props.color,
+    ),
   );
 
   const progressAttrs = getAttrs("progress", { classes: progressClasses.value });

package/ui.navigation-progress/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { progress } = config.value;
 
   const cvaProgress = cva({
@@ -18,7 +18,7 @@ export function useAttrs(props) {
     setColor(
       cvaProgress({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.other-dot/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { wrapper } = config.value;
 
   const cvaWrapper = cva({
@@ -18,7 +18,7 @@ export function useAttrs(props) {
     setColor(
       cvaWrapper({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.text-alert/composables/attrs.composable.js

@@ -5,7 +5,10 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const { wrapper, body } = config.value;
 
   const cvaWrapper = cva({
@@ -23,7 +26,7 @@ export function useAttrs(props) {
   const wrapperClasses = computed(() =>
     setColor(
       cvaWrapper({
-        color: props.color,
+        color: getColor(props.color),
         bordered: props.bordered,
       }),
       props.color,

package/ui.text-alert/configs/default.config.js

@@ -43,5 +43,9 @@ export default /*tw*/ {
     bordered: false,
     closeIcon: false,
   },
-  safelist: (colors) => [{ pattern: `bg-(${colors})-50` }, { pattern: `text-(${colors})-700` }, { pattern: `border-(${colors})-100` }],
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-50` },
+    { pattern: `text-(${colors})-700` },
+    { pattern: `border-(${colors})-100` },
+  ],
 };

package/ui.text-badge/composables/attrs.composable.js

@@ -5,7 +5,10 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const { wrapper, body } = config.value;
 
   const cvaWrapper = cva({
@@ -25,7 +28,7 @@ export function useAttrs(props) {
       cvaWrapper({
         variant: props.variant,
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         weight: props.weight,
       }),
       props.color,

package/ui.text-header/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { wrapper } = config.value;
 
   const cvaWrapper = cva({
@@ -20,7 +20,7 @@ export function useAttrs(props) {
         size: props.size,
         weight: props.weight,
         underlined: props.underlined,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.text-money/composables/attrs.composable.js

@@ -5,7 +5,10 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, hasSlotContent, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, hasSlotContent, getAttrs, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const { money, sum, penny } = config.value;
 
   const cvaMoney = cva({
@@ -30,7 +33,7 @@ export function useAttrs(props) {
     setColor(
       cvaMoney({
         align: props.align,
-        color: props.color,
+        color: getColor(props.color),
         weight: props.weight,
       }),
       props.color,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.163",
+  "version": "0.0.164",
   "contributions": {
     "html": {
       "description-markup": "markdown",