vueless 0.0.3 → 0.0.4

package/src/service.tailwind/index.js

@@ -0,0 +1,114 @@
+import colors from "tailwindcss/colors";
+import forms from "@tailwindcss/forms";
+import vuelessConfig from "../../vueless.config";
+
+export const grayColors = ["slate", "gray", "zinc", "neutral", "stone"];
+export const brandColors = [
+  "brand",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+];
+
+export default class TailwindServiceDefault {
+  constructor() {
+    this.vuelessPreset = this.get();
+  }
+
+  /**
+   * Transform CSS variable with RGB numbers into CSS color.
+   * @returns {Function}
+   */
+  static twColorWithOpacity(variableName) {
+    return ({ opacityValue }) => {
+      return opacityValue !== undefined
+        ? `rgba(var(${variableName}), ${opacityValue})`
+        : `rgb(var(${variableName}))`;
+    };
+  }
+
+  /**
+   * Convert sting patterns to RegExp.
+   * @returns {Array} - TailwindCSS safelist.
+   */
+  static getSafelist() {
+    return JSON.parse(process.env.SAFELIST_JSON || "[]").map((rule) => ({
+      ...rule,
+      pattern: new RegExp(rule.pattern),
+    }));
+  }
+
+  /**
+   * Generates preset for TailwindCSS base on Vueless config.
+   * @returns {Object}
+   */
+  get() {
+    const isProd = process.env.NODE_ENV === "production";
+    const brandColor = TailwindServiceDefault.twColorWithOpacity("--color-brand");
+    const { brand, gray } = vuelessConfig;
+
+    let brandPalette = brandColors.includes(brand) ? colors[brand] : colors.green;
+    let grayPalette = grayColors.includes(gray) ? colors[gray] : colors.zinc;
+
+    if (brand === "grayscale") {
+      brandPalette = grayPalette;
+    }
+
+    const prodSafelist = TailwindServiceDefault.getSafelist();
+    const devSafelist = [
+      {
+        pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
+        variants: ["hover", "focus", "focus-within", "active"],
+      },
+    ];
+
+    return {
+      content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx,vue}",
+        "./vueless.config.{js,ts}",
+        "./node_modules/vueless/**/*.{js,ts,vue}",
+        // TODO: remove it after creating the package
+        "./.vueless/**/*.{js,ts,vue}",
+        "./.vueless-layouts/**/*.{js,ts,vue}",
+        "./.vueless-services/**/*.{js,ts,vue}",
+      ],
+      safelist: isProd ? prodSafelist : devSafelist,
+      theme: {
+        extend: {
+          colors: {
+            brand: { ...brandPalette, DEFAULT: brandColor },
+            gray: grayPalette,
+          },
+          spacing: {
+            "safe-top": "env(safe-area-inset-top)",
+            "safe-bottom": "env(safe-area-inset-bottom)",
+            "safe-left": "env(safe-area-inset-left)",
+            "safe-right": "env(safe-area-inset-right)",
+            "mobile-menu-height": "3.5rem",
+          },
+          fontSize: {
+            "2xs": ["0.625rem", "0.875rem"], //  10px
+          },
+        },
+      },
+      plugins: [forms],
+    };
+  }
+}
+
+export const { vuelessPreset } = new TailwindServiceDefault();

package/src/service.ui/index.js

@@ -0,0 +1,193 @@
+import { merge } from "lodash-es";
+import { defineConfig } from "cva";
+import { twMerge } from "tailwind-merge";
+import colors from "tailwindcss/colors";
+import { brandColors, grayColors } from "../service.tailwind";
+import vuelessConfig from "/vueless.config";
+
+/*
+  Export cva (class variance authority) methods extended with tailwind-merge.
+  It helps to make class variation switchers and removes class duplications.
+  https://beta.cva.style
+*/
+export const {
+  cva: classVarianceAuthority,
+  cx,
+  compose,
+} = defineConfig({
+  hooks: { onComplete: (className) => twMerge(className) },
+});
+
+export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>
+  classVarianceAuthority({
+    base,
+    variants,
+    compoundVariants,
+    defaultVariants,
+  });
+
+/*
+  Export global config settings for the current library.
+  Did as a separate variables for more comfortable usage.
+*/
+export const { layout, strategy, gray, brand, component: globalComponentConfig } = vuelessConfig;
+
+export default class UIServiceDefault {
+  isMac = false;
+  isPWA = false;
+  isIOS = false;
+  isAndroid = false;
+  isMobileApp = false;
+  PX_IN_REM = 16;
+  HYPHEN_SYMBOL = "-";
+
+  constructor() {
+    this.isMac = this.checkIsMac();
+
+    this.isPWA = this.checkIsPWA();
+    this.isIOS = this.checkIsIOS();
+    this.isAndroid = this.checkIsAndroid();
+
+    this.isMobileApp = this.isPWA || this.isIOS || this.isAndroid;
+  }
+
+  checkIsPWA() {
+    return !!navigator.standalone;
+  }
+
+  checkIsMac() {
+    return this.getPlatform().toUpperCase().indexOf("MAC") >= 0;
+  }
+
+  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;
+  }
+
+  checkIsAndroid() {
+    return this.getPlatform().toUpperCase().indexOf("ANDROID") >= 0;
+  }
+
+  getPlatform() {
+    return navigator.userAgentData?.platform || navigator.platform || "unknown";
+  }
+
+  static convertHexInRgb(hex) {
+    const color = hex.replace(/#/g, "");
+
+    let r, g, b;
+
+    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);
+    }
+
+    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}` : "";
+  }
+
+  setBrandColor(brandColor) {
+    function getBrandColor(color, grayColor, brandColors) {
+      if (color === "grayscale") {
+        return grayColor;
+      }
+
+      return brandColors.includes(color) ? colors[color][500] : color;
+    }
+
+    function getGrayColor(color, grayColors) {
+      return grayColors.includes(color) ? colors[color][900] : colors.zinc[900];
+    }
+
+    const grayColor = getGrayColor(gray, grayColors);
+    const localBrandColor = getBrandColor(brandColor, grayColor, brandColors);
+    const globalBrandColor = getBrandColor(brand, grayColor, brandColors);
+
+    const style = document.createElement("style");
+    const rgb = UIServiceDefault.convertHexInRgb(localBrandColor || globalBrandColor || grayColor);
+
+    style.innerHTML = `
+      :root {
+        --color-brand: ${rgb};
+      }
+    `;
+
+    document.head.appendChild(style);
+  }
+
+  getRandomId(idLength = 15) {
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+    const charactersLength = characters.length;
+    let id = "";
+
+    while (id.length < idLength) {
+      id += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+
+    return id;
+  }
+
+  static setTitle({ title, separator = " / ", suffix = "" }) {
+    document.title = title ? title + separator + suffix : suffix;
+  }
+
+  static setFavicon(faviconPath) {
+    if (!faviconPath) return;
+
+    const head = document.querySelector("head");
+    const faviconTag = document.createElement("link");
+
+    faviconTag.setAttribute("rel", "shortcut icon");
+    faviconTag.setAttribute("href", `${faviconPath}?${Math.random()}`);
+    head.appendChild(faviconTag);
+  }
+
+  /**
+    Get default component props value related on default and global config.
+    @param { Object } defaultConfig
+    @param { String } name
+    @returns { Object }
+  */
+  static get(defaultConfig, name) {
+    const globalVuelessColor = brand ? { color: brand } : {};
+
+    return {
+      default: merge(
+        defaultConfig.defaultVariants,
+        globalVuelessColor,
+        globalComponentConfig[name]?.defaultVariants,
+      ),
+    };
+  }
+}
+
+export const {
+  getRandomId,
+  setBrandColor,
+  convertHexInRgb,
+  setTitle,
+  setFavicon,
+  isMac,
+  isPWA,
+  isIOS,
+  isAndroid,
+  isMobileApp,
+  PX_IN_REM,
+  HYPHEN_SYMBOL,
+} = new UIServiceDefault();

package/src/ui.container-divider/composables/attrs.composable.js

@@ -0,0 +1,65 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { wrapper, divider, label } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaDivider = cva({
+    base: divider.base,
+    variants: divider.variants,
+    compoundVariants: divider.compoundVariants,
+  });
+
+  const cvaLabel = cva({
+    base: label.base,
+    variants: label.variants,
+    compoundVariants: label.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      size: props.size,
+      vertical: props.vertical,
+      noPadding: props.noPadding,
+      noTopPadding: props.noTopPadding,
+      noBottomPadding: props.noBottomPadding,
+      noLeftPadding: props.noLeftPadding,
+      noRightPadding: props.noRightPadding,
+      label: Boolean(props.label),
+    }),
+  );
+
+  const dividerClasses = computed(() =>
+    cvaDivider({
+      variant: props.variant,
+      dashed: props.dashed,
+      dotted: props.dotted,
+      vertical: props.vertical,
+      noBorder: props.noBorder,
+      label: Boolean(props.label),
+    }),
+  );
+
+  const labelClasses = computed(() => cvaLabel({ variant: props.variant }));
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const dividerAttrs = getAttrs("divider", { classes: dividerClasses });
+  const labelAttrs = getAttrs("label", { classes: labelClasses });
+
+  return {
+    hasSlotContent,
+    wrapperAttrs,
+    dividerAttrs,
+    labelAttrs,
+  };
+}

package/src/ui.container-divider/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <div v-bind="dividerAttrs" />
+    <template v-if="label && !vertical">
+      <span v-bind="labelAttrs" v-text="label" />
+      <div v-bind="dividerAttrs" />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import UIService from "../service.ui";
+
+import { UDivider } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDivider", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Divider label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Divider padding size.
+   * @values xs, sm, md, lg, xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDivider).default.size,
+  },
+
+  /**
+   * Divider color.
+   * @values light, default, dark
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UDivider).default.variant,
+  },
+
+  /**
+   * Set line dashed.
+   */
+  dashed: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.dashed,
+  },
+
+  /**
+   * Set line dotted.
+   */
+  dotted: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.dotted,
+  },
+
+  /**
+   * Set divider orientation to vertical.
+   */
+  vertical: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.vertical,
+  },
+
+  /**
+   * Remove border (keeps only spacings).
+   */
+  noBorder: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noBorder,
+  },
+
+  /**
+   * Remove all paddings.
+   */
+  noPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noPadding,
+  },
+
+  /**
+   * Remove top padding.
+   */
+  noTopPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noTopPadding,
+  },
+
+  /**
+   * Remove bottom padding.
+   */
+  noBottomPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noBottomPadding,
+  },
+
+  /**
+   * Remove left padding.
+   */
+  noLeftPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noLeftPadding,
+  },
+
+  /**
+   * Remove right padding.
+   */
+  noRightPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noRightPadding,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs, dividerAttrs, labelAttrs } = useAttrs(props);
+</script>