vueless 0.0.2 → 0.0.4

package/{service.ui → src/service.ui}/index.js

@@ -1,35 +1,36 @@
-import merge from "lodash.merge";
+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, cx, compose } = defineConfig({
+export const {
+  cva: classVarianceAuthority,
+  cx,
+  compose,
+} = defineConfig({
   hooks: { onComplete: (className) => twMerge(className) },
 });
 
-/*
-  Export TailwindCSS config.
-  https://tailwindcss.com
-*/
-export const { default: tailwindConfig } = require("/tailwind.config");
+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 {
-  default: {
-    fallbackLocale,
-    backgroundsPath,
-    layout,
-    strategyOverwrite,
-    component: globalComponentConfig,
-  },
-} = require("/Users/ivan.hridniev/PhpstormProjects/vuelessjs/vueless/vueless.config");
+export const { layout, strategy, gray, brand, component: globalComponentConfig } = vuelessConfig;
 
 export default class UIServiceDefault {
   isMac = false;
@@ -38,6 +39,7 @@ export default class UIServiceDefault {
   isAndroid = false;
   isMobileApp = false;
   PX_IN_REM = 16;
+  HYPHEN_SYMBOL = "-";
 
   constructor() {
     this.isMac = this.checkIsMac();
@@ -80,20 +82,53 @@ export default class UIServiceDefault {
     return navigator.userAgentData?.platform || navigator.platform || "unknown";
   }
 
-  getBasePath() {
-    const basePath = import.meta.env.VITE_BASE_PATH;
+  static convertHexInRgb(hex) {
+    const color = hex.replace(/#/g, "");
+
+    let r, g, b;
 
-    return !basePath || basePath === "/" ? "/" : `/${basePath}`;
+    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}` : "";
   }
 
-  convertHexInRgb(hex) {
-    const color = hex.replace(/#/g, "");
+  setBrandColor(brandColor) {
+    function getBrandColor(color, grayColor, brandColors) {
+      if (color === "grayscale") {
+        return grayColor;
+      }
 
-    const r = parseInt(color.substring(0, 2), 16);
-    const g = parseInt(color.substring(2, 4), 16);
-    const b = parseInt(color.substring(4, 6), 16);
+      return brandColors.includes(color) ? colors[color][500] : color;
+    }
 
-    return `${r}, ${g}, ${b}`;
+    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) {
@@ -108,28 +143,6 @@ export default class UIServiceDefault {
     return id;
   }
 
-  removeOutlineFocus() {
-    const styleTag = document.createElement("style");
-    let focusRing = true;
-
-    document.head.appendChild(styleTag).innerHTML = `
-      "body.hide-focus-ring *:focus {
-        outline: none !important;
-      }`;
-
-    document.addEventListener("mousedown", () => {
-      if (focusRing) document.body.classList.add("hide-focus-ring");
-
-      focusRing = false;
-    });
-
-    document.addEventListener("keydown", () => {
-      if (!focusRing) document.body.classList.remove("hide-focus-ring");
-
-      focusRing = true;
-    });
-  }
-
   static setTitle({ title, separator = " / ", suffix = "" }) {
     document.title = title ? title + separator + suffix : suffix;
   }
@@ -149,19 +162,24 @@ export default class UIServiceDefault {
     Get default component props value related on default and global config.
     @param { Object } defaultConfig
     @param { String } name
-    @returns string
+    @returns { Object }
   */
   static get(defaultConfig, name) {
+    const globalVuelessColor = brand ? { color: brand } : {};
+
     return {
-      default: merge(defaultConfig.defaultVariants, globalComponentConfig[name]?.defaultVariants),
+      default: merge(
+        defaultConfig.defaultVariants,
+        globalVuelessColor,
+        globalComponentConfig[name]?.defaultVariants,
+      ),
     };
   }
 }
 
 export const {
-  getBasePath,
   getRandomId,
-  removeOutlineFocus,
+  setBrandColor,
   convertHexInRgb,
   setTitle,
   setFavicon,
@@ -171,4 +189,5 @@ export const {
   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/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UDivider = "UDivider";

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>