vueless 0.0.280 → 0.0.282

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.280",
+  "version": "0.0.282",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/service.platform/index.js

@@ -0,0 +1,45 @@
+const isBrowser = typeof window !== "undefined";
+const isMac = isBrowser && checkIsMac();
+const isPWA = isBrowser && checkIsPWA();
+const isIOS = isBrowser && checkIsIOS();
+const isWindows = isBrowser && checkIsWindows();
+const isAndroid = isBrowser && checkIsAndroid();
+const isMobileApp = isPWA || isIOS || isAndroid;
+
+function checkIsWindows() {
+  return getPlatform().toUpperCase().indexOf("WINDOWS") >= 0;
+}
+
+function checkIsMac() {
+  return getPlatform().toUpperCase().indexOf("MAC") >= 0;
+}
+
+function checkIsPWA() {
+  return !!navigator.standalone;
+}
+
+function checkIsIOS() {
+  const iOSDevices = [
+    "iPad Simulator",
+    "iPhone Simulator",
+    "iPod Simulator",
+    "iPad",
+    "iPhone",
+    "iPod",
+  ];
+
+  const platform = getPlatform();
+  const isIpodIOS13 = platform.includes("Mac") && "ontouchend" in document;
+
+  return iOSDevices.includes(platform) || isIpodIOS13;
+}
+
+function checkIsAndroid() {
+  return getPlatform().toUpperCase().indexOf("ANDROID") >= 0;
+}
+
+function getPlatform() {
+  return navigator.userAgentData?.platform || navigator.platform || "unknown";
+}
+
+export { isBrowser, isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows };

package/service.ui/index.js

@@ -90,277 +90,179 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
     defaultVariants,
   });
 
-export default class UIService {
-  isMac = false;
-  isPWA = false;
-  isIOS = false;
-  isAndroid = false;
-  isMobileApp = false;
-  PX_IN_REM = 16;
-  HYPHEN_SYMBOL = "-";
-
-  constructor() {
-    // Needed to avoid error in server context for ssr
-    // TODO: Find way call it in browser
-    // Possible solution: https://github.com/nuxt/nuxt/discussions/7878
-    const isBrowser = typeof window !== "undefined";
-
-    this.isMac = isBrowser && this.checkIsMac();
-    this.isPWA = isBrowser && this.checkIsPWA();
-    this.isIOS = isBrowser && this.checkIsIOS();
-    this.isAndroid = isBrowser && this.checkIsAndroid();
-    this.isMobileApp = this.isPWA || this.isIOS || this.isAndroid;
-
-    this.initTheme();
-  }
+const PX_IN_REM = 16;
+const HYPHEN_SYMBOL = "-";
 
-  initTheme() {
-    const prefersColorSchemeDark = window && window.matchMedia("(prefers-color-scheme: dark)");
+(() => {
+  const prefersColorSchemeDark = window && window.matchMedia("(prefers-color-scheme: dark)");
 
-    this.setTheme({ systemDarkMode: prefersColorSchemeDark.matches });
+  setTheme({ systemDarkMode: prefersColorSchemeDark.matches });
 
-    prefersColorSchemeDark.addEventListener("change", (event) =>
-      this.setTheme({ systemDarkMode: event.matches }),
-    );
-  }
+  prefersColorSchemeDark.addEventListener("change", (event) =>
+    setTheme({ systemDarkMode: event.matches }),
+  );
+})();
 
-  checkIsPWA() {
-    return !!navigator.standalone;
-  }
+function getRandomId(length = 15) {
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+  const charactersLength = characters.length;
+  let id = "";
 
-  checkIsMac() {
-    return this.getPlatform().toUpperCase().indexOf("MAC") >= 0;
+  while (id.length < length) {
+    id += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
 
-  checkIsIOS() {
-    const iOSDevices = [
-      "iPad Simulator",
-      "iPhone Simulator",
-      "iPod Simulator",
-      "iPad",
-      "iPhone",
-      "iPod",
-    ];
-    const platform = this.getPlatform();
-    const isIpodIOS13 = platform.includes("Mac") && "ontouchend" in document;
-
-    return iOSDevices.includes(platform) || isIpodIOS13;
-  }
+  return id;
+}
 
-  checkIsAndroid() {
-    return this.getPlatform().toUpperCase().indexOf("ANDROID") >= 0;
-  }
+function setTitle({ title, separator = " / ", suffix = "" }) {
+  document.title = title ? title + separator + suffix : suffix;
+}
 
-  getPlatform() {
-    return navigator.userAgentData?.platform || navigator.platform || "unknown";
-  }
+function setFavicon(faviconPath) {
+  if (!faviconPath) return;
 
-  /**
-   Generate random string.
-   @param { Number } length
-   @returns { String }
-   */
-  getRandomId(length = 15) {
-    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-    const charactersLength = characters.length;
-    let id = "";
-
-    while (id.length < length) {
-      id += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-
-    return id;
-  }
+  const head = document.querySelector("head");
+  const faviconTag = document.createElement("link");
 
-  static setTitle({ title, separator = " / ", suffix = "" }) {
-    document.title = title ? title + separator + suffix : suffix;
-  }
+  faviconTag.setAttribute("rel", "shortcut icon");
+  faviconTag.setAttribute("href", `${faviconPath}?${Math.random()}`);
+
+  head.appendChild(faviconTag);
+}
 
-  /**
-   Change favicon in runtime.
-   @param { String } faviconPath
-   @returns { void }
-   */
-  static setFavicon(faviconPath) {
-    if (!faviconPath) return;
+function getDefault(defaultConfig, name) {
+  const defaultVariants = merge(
+    cloneDeep(defaultConfig.defaultVariants),
+    globalComponentConfig[name]?.defaultVariants,
+  );
 
-    const head = document.querySelector("head");
-    const faviconTag = document.createElement("link");
+  defaultVariants.color = getColor(defaultVariants.color);
 
-    faviconTag.setAttribute("rel", "shortcut icon");
-    faviconTag.setAttribute("href", `${faviconPath}?${Math.random()}`);
+  return defaultVariants;
+}
 
-    head.appendChild(faviconTag);
-  }
+function getColor(color) {
+  return (brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR && color === BRAND_COLOR
+    ? GRAYSCALE_COLOR
+    : color;
+}
 
-  /**
-    Get default component props value related on default and global config.
-    @param { Object } defaultConfig
-    @param { String } name
-    @returns { Object }
-  */
-  static get(defaultConfig, name) {
-    const defaultVariants = merge(
-      cloneDeep(defaultConfig.defaultVariants),
-      globalComponentConfig[name]?.defaultVariants,
-    );
-
-    defaultVariants.color = getColor(defaultVariants.color);
-
-    return {
-      default: defaultVariants,
-    };
+function setColor(classes, color) {
+  if (typeof classes !== "string") {
+    return "";
   }
 
-  /**
-   Get color for props.
-   @param { String } color
-   @returns { String }
-   */
-  getColor(color) {
-    return (brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR && color === BRAND_COLOR
-      ? GRAYSCALE_COLOR
-      : color;
+  return classes?.replaceAll("{color}", color);
+}
+
+function setDarkMode(config) {
+  config?.darkMode === undefined
+    ? localStorage.removeItem(DARK_MODE_SELECTOR)
+    : localStorage.setItem(DARK_MODE_SELECTOR, Number(!!config?.darkMode));
+
+  const storedDarkMode = localStorage.getItem(DARK_MODE_SELECTOR);
+
+  let isDarkMode =
+    storedDarkMode !== null
+      ? !!Number(storedDarkMode)
+      : !!(config?.darkMode ?? vuelessConfig?.darkMode ?? config?.systemDarkMode);
+
+  isDarkMode
+    ? document.documentElement.classList.add(DARK_MODE_SELECTOR)
+    : document.documentElement.classList.remove(DARK_MODE_SELECTOR);
+
+  return isDarkMode;
+}
+
+function setTheme(config = {}) {
+  const isDarkMode = setDarkMode(config);
+  const ring = config?.ring ?? vuelessConfig?.ring ?? DEFAULT_RING;
+  const ringOffset = config?.ringOffset ?? vuelessConfig?.ringOffset ?? DEFAULT_RING_OFFSET;
+  const rounding = config?.rounding ?? vuelessConfig?.rounding ?? DEFAULT_ROUNDING;
+  let brand = config?.brand ?? vuelessConfig?.brand ?? DEFAULT_BRAND_COLOR;
+  let gray = config?.gray ?? vuelessConfig?.gray ?? DEFAULT_GRAY_COLOR;
+
+  const isBrandColor = BRAND_COLORS.some((color) => color === brand);
+  const isGrayColor = GRAY_COLORS.some((color) => color === gray);
+
+  if (!isBrandColor) {
+    // eslint-disable-next-line no-console
+    console.warn(`Brand color '${brand}' is incorrect.`);
   }
 
-  /**
-   Find and replace all {color} variables in class names into given color.
-   @param { String } classes
-   @param { String } color
-   @returns { String }
-   */
-  setColor(classes, color) {
-    if (typeof classes !== "string") {
-      return "";
-    }
-
-    return classes?.replaceAll("{color}", color);
+  if (!isGrayColor) {
+    // eslint-disable-next-line no-console
+    console.warn(`Gray color '${gray}' is incorrect.`);
   }
 
-  /**
-   Set dark mode
-   @param { Object } config
-   @returns { Boolean } isDarkMode
-   */
-  setDarkMode(config) {
-    config?.darkMode === undefined
-      ? localStorage.removeItem(DARK_MODE_SELECTOR)
-      : localStorage.setItem(DARK_MODE_SELECTOR, Number(!!config?.darkMode));
+  const defaultBrandShade = isDarkMode ? 400 : 600;
+  const defaultGrayShade = isDarkMode ? 400 : 600;
 
-    const storedDarkMode = localStorage.getItem(DARK_MODE_SELECTOR);
+  if (gray === COOL_COLOR) {
+    gray = GRAY_COLOR;
+  }
 
-    let isDarkMode =
-      storedDarkMode !== null
-        ? !!Number(storedDarkMode)
-        : !!(config?.darkMode ?? vuelessConfig?.darkMode ?? config?.systemDarkMode);
+  if (brand === GRAYSCALE_COLOR) {
+    brand = gray;
+  }
 
-    isDarkMode
-      ? document.documentElement.classList.add(DARK_MODE_SELECTOR)
-      : document.documentElement.classList.remove(DARK_MODE_SELECTOR);
+  const variables = {
+    "--vl-ring": `${ring}px`,
+    "--vl-ring-offset": `${ringOffset}px`,
+    "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
+    "--vl-color-gray-default": convertHexInRgb(colors[gray][defaultBrandShade]),
+    "--vl-color-brand-default": convertHexInRgb(colors[brand][defaultGrayShade]),
+  };
 
-    return isDarkMode;
+  for (const key in colors[gray]) {
+    variables[`--vl-color-gray-${key}`] = convertHexInRgb(colors[gray][key]);
   }
 
-  /**
-   Set theme css variables and dark mode.
-   @param { Object } config
-   @returns { void }
-   */
-  setTheme = (config = {}) => {
-    const isDarkMode = this.setDarkMode(config);
-    const ring = config?.ring ?? vuelessConfig?.ring ?? DEFAULT_RING;
-    const ringOffset = config?.ringOffset ?? vuelessConfig?.ringOffset ?? DEFAULT_RING_OFFSET;
-    const rounding = config?.rounding ?? vuelessConfig?.rounding ?? DEFAULT_ROUNDING;
-    let brand = config?.brand ?? vuelessConfig?.brand ?? DEFAULT_BRAND_COLOR;
-    let gray = config?.gray ?? vuelessConfig?.gray ?? DEFAULT_GRAY_COLOR;
-
-    const isBrandColor = BRAND_COLORS.some((color) => color === brand);
-    const isGrayColor = GRAY_COLORS.some((color) => color === gray);
-
-    if (!isBrandColor) {
-      // eslint-disable-next-line no-console
-      console.log(`Brand color '${brand}' is incorrect.`);
-    }
-
-    if (!isGrayColor) {
-      // eslint-disable-next-line no-console
-      console.log(`Gray color '${gray}' is incorrect.`);
-    }
-
-    // set default shade related to the selected mode
-    const defaultBrandShade = isDarkMode ? 400 : 600;
-    const defaultGrayShade = isDarkMode ? 400 : 600;
-
-    // handling custom `cool` color
-    if (gray === COOL_COLOR) {
-      gray = GRAY_COLOR;
-    }
-
-    // handling custom `grayscale` color
-    if (brand === GRAYSCALE_COLOR) {
-      brand = gray;
-    }
-
-    const variables = {
-      "--vl-ring": `${ring}px`,
-      "--vl-ring-offset": `${ringOffset}px`,
-      "--vl-rounding": `${Number(rounding) / this.PX_IN_REM}rem`,
-      "--vl-color-gray-default": UIService.convertHexInRgb(colors[gray][defaultBrandShade]),
-      "--vl-color-brand-default": UIService.convertHexInRgb(colors[brand][defaultGrayShade]),
-    };
-
-    for (const key in colors[gray]) {
-      variables[`--vl-color-gray-${key}`] = UIService.convertHexInRgb(colors[gray][key]);
-    }
-
-    for (const key in colors[brand]) {
-      variables[`--vl-color-brand-${key}`] = UIService.convertHexInRgb(colors[brand][key]);
-    }
-
-    const style = document.createElement("style");
-    const stringVariables = Object.entries(variables)
-      .map(([key, value]) => `${key}: ${value};`)
-      .join(" ");
-
-    style.innerHTML = `:root {${stringVariables}`;
-
-    document.head.appendChild(style);
-  };
+  for (const key in colors[brand]) {
+    variables[`--vl-color-brand-${key}`] = convertHexInRgb(colors[brand][key]);
+  }
+
+  const style = document.createElement("style");
+  const stringVariables = Object.entries(variables)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join(" ");
 
-  static convertHexInRgb(hex) {
-    const color = hex.replace(/#/g, "");
+  style.innerHTML = `:root {${stringVariables}`;
+
+  document.head.appendChild(style);
+}
 
-    let r, g, b;
+function convertHexInRgb(hex) {
+  const color = hex.replace(/#/g, "");
 
-    if (color.length === 6) {
-      r = parseInt(color.substring(0, 2), 16);
-      g = parseInt(color.substring(2, 4), 16);
-      b = parseInt(color.substring(4, 6), 16);
-    }
+  let r, g, b;
 
-    if (color.length === 3) {
-      r = parseInt(color.substring(0, 1).repeat(2), 16);
-      g = parseInt(color.substring(1, 2).repeat(2), 16);
-      b = parseInt(color.substring(2, 3).repeat(2), 16);
-    }
+  if (color.length === 6) {
+    r = parseInt(color.substring(0, 2), 16);
+    g = parseInt(color.substring(2, 4), 16);
+    b = parseInt(color.substring(4, 6), 16);
+  }
 
-    return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
+  if (color.length === 3) {
+    r = parseInt(color.substring(0, 1).repeat(2), 16);
+    g = parseInt(color.substring(1, 2).repeat(2), 16);
+    b = parseInt(color.substring(2, 3).repeat(2), 16);
   }
+
+  return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
 }
 
-export const {
+export {
+  PX_IN_REM,
+  HYPHEN_SYMBOL,
   getRandomId,
+  setTitle,
+  setFavicon,
+  getDefault,
   getColor,
   setColor,
+  setDarkMode,
   setTheme,
-  setTitle,
-  setFavicon,
   convertHexInRgb,
-  isMac,
-  isPWA,
-  isIOS,
-  isAndroid,
-  isMobileApp,
-  PX_IN_REM,
-  HYPHEN_SYMBOL,
-} = new UIService();
+};

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

@@ -6,7 +6,7 @@ export default /*tw*/ {
       border border-solid transition
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
       focus-within:ring-{color}-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
-      disabled:ring-0 disabled:cursor-not-allowed cursor-pointer
+      disabled:ring-0 disabled:ring-offset-0 disabled:cursor-not-allowed cursor-pointer
     `,
     variants: {
       size: {

package/ui.button/index.vue

@@ -83,7 +83,7 @@
 <script setup>
 import { computed, ref } from "vue";
 
-import UIService, { getRandomId } from "../service.ui";
+import { getRandomId, getDefault } from "../service.ui";
 import ULoader from "../ui.loader";
 import UIcon from "../ui.image-icon";
 
@@ -101,7 +101,7 @@ const props = defineProps({
    */
   variant: {
     type: String,
-    default: UIService.get(defaultConfig, UButton).default.variant,
+    default: getDefault(defaultConfig, UButton).variant,
   },
 
   /**
@@ -110,7 +110,7 @@ const props = defineProps({
    */
   color: {
     type: String,
-    default: UIService.get(defaultConfig, UButton).default.color,
+    default: getDefault(defaultConfig, UButton).color,
   },
 
   /**
@@ -119,7 +119,7 @@ const props = defineProps({
    */
   size: {
     type: String,
-    default: UIService.get(defaultConfig, UButton).default.size,
+    default: getDefault(defaultConfig, UButton).size,
   },
 
   /**
@@ -151,7 +151,7 @@ const props = defineProps({
    */
   tag: {
     type: String,
-    default: UIService.get(defaultConfig, UButton).default.tag,
+    default: getDefault(defaultConfig, UButton).tag,
   },
 
   /**
@@ -159,7 +159,7 @@ const props = defineProps({
    */
   filled: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.filled,
+    default: getDefault(defaultConfig, UButton).filled,
   },
 
   /**
@@ -167,7 +167,7 @@ const props = defineProps({
    */
   disabled: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.disabled,
+    default: getDefault(defaultConfig, UButton).disabled,
   },
 
   /**
@@ -175,7 +175,7 @@ const props = defineProps({
    */
   block: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.block,
+    default: getDefault(defaultConfig, UButton).block,
   },
 
   /**
@@ -183,7 +183,7 @@ const props = defineProps({
    */
   pill: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.pill,
+    default: getDefault(defaultConfig, UButton).pill,
   },
 
   /**
@@ -191,7 +191,7 @@ const props = defineProps({
    */
   square: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.square,
+    default: getDefault(defaultConfig, UButton).square,
   },
 
   /**
@@ -199,7 +199,7 @@ const props = defineProps({
    */
   loading: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.loading,
+    default: getDefault(defaultConfig, UButton).loading,
   },
 
   /**
@@ -207,7 +207,7 @@ const props = defineProps({
    */
   noRing: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.noRing,
+    default: getDefault(defaultConfig, UButton).noRing,
   },
 
   /**

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

@@ -10,7 +10,7 @@ export default /*tw*/ {
         white: "focus-within:ring-white/15",
       },
       disabled: {
-        true: "focus-within:ring-0 cursor-not-allowed",
+        true: "focus-within:ring-0 focus-within:ring-offset-0 cursor-not-allowed",
       },
       noRing: {
         true: "focus-within:ring-0 focus-within:ring-offset-0",