vueless 0.0.478-beta.3 → 0.0.479

package/ui.text-block/UText.vue

@@ -1,27 +1,71 @@
-<script lang="ts" setup>
-import { getDefault } from "../utilsTs/utilUI.ts";
+<template>
+  <div v-bind="wrapperAttrs" :data-test="dataTest">
+    <!-- @slot Use it to add something inside. -->
+    <div v-if="!hasSlotContent($slots['default'])" v-bind="htmlAttrs" v-html="html" />
+    <slot />
+  </div>
+</template>
 
-import { UText } from "./constants.ts";
-import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
+<script setup>
+import { getDefault } from "../utils/utilUI.js";
 
-import type { UTextProps } from "./types.ts";
+import { UText } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UTextProps>(), {
-  size: getDefault<UTextProps>(defaultConfig, UText).size,
-  align: getDefault<UTextProps>(defaultConfig, UText).align,
-  line: getDefault<UTextProps>(defaultConfig, UText).line,
+const props = defineProps({
+  /**
+   * НTML markdown or plain text.
+   */
+  html: {
+    type: String,
+    default: undefined,
+  },
+
+  /**
+   * Text size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: getDefault(defaultConfig, UText).size,
+  },
+
+  /**
+   * Text align.
+   * @values left, center, right
+   */
+  align: {
+    type: String,
+    default: getDefault(defaultConfig, UText).align,
+  },
+
+  /**
+   * Remove line height (useful for 1-line text).
+   */
+  line: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UText).line,
+  },
+
+  /**
+   * Component config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest: {
+    type: String,
+    default: "",
+  },
 });
 
 const { wrapperAttrs, htmlAttrs, hasSlotContent } = useAttrs(props);
 </script>
-
-<template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest">
-    <!-- @slot Use it to add something inside. -->
-    <div v-if="!hasSlotContent($slots['default'])" v-bind="htmlAttrs" v-html="html" />
-    <slot />
-  </div>
-</template>

package/ui.text-block/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utilsTs/utilStorybook.ts";
+import { getSource } from "../../utils/utilStorybook.js";
 
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.text-block/storybook/{stories.ts → stories.js}

@@ -1,16 +1,8 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utilsTs/utilStorybook.ts";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
 import UText from "../../ui.text-block/UText.vue";
 import URow from "../../ui.container-row/URow.vue";
 
-import type { UTextProps } from "../types.ts";
-
-interface UTextArgs extends UTextProps {
-  slotTemplate?: string;
-  enum: "size";
-}
-
 /**
  * The `UText` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-block)
  */
@@ -22,7 +14,7 @@ export default {
     ...getArgTypes(UText.__name),
   },
   args: {},
-} as Meta;
+};
 
 const defaultTemplate = `
   <p>
@@ -32,7 +24,7 @@ const defaultTemplate = `
   </p>
 `;
 
-const DefaultTemplate: StoryFn<UTextArgs> = (args: UTextArgs) => ({
+const DefaultTemplate = (args) => ({
   components: { UText, URow },
   setup() {
     const slots = getSlotNames(UText.__name);
@@ -46,12 +38,12 @@ const DefaultTemplate: StoryFn<UTextArgs> = (args: UTextArgs) => ({
   `,
 });
 
-const EnumVariantTemplate: StoryFn<UTextArgs> = (args: UTextArgs, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UText, URow },
   setup() {
     return {
       args,
-      options: argTypes?.[args.enum]?.options || [],
+      options: argTypes[args.enum].options,
     };
   },
   template: `
@@ -96,6 +88,7 @@ Paragraphs.args = {
         rapidly changing landscape and emerge stronger and more competitive.
       </p>
     </template>
+
   `,
 };
 
@@ -109,6 +102,8 @@ List.args = {
           <li>Update your profile information</li>
           <li>Check your email for updates</li>
         </ul>
+
+
         <ol>
           <li>Create an account by signing up</li>
           <li>Verify your email address</li>

package/ui.text-block/useAttrs.js

@@ -0,0 +1,15 @@
+import useUI from "../composables/useUI.js";
+
+import defaultConfig from "./config.js";
+
+export default function useAttrs(props) {
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.text-empty/storybook/stories.js

@@ -35,7 +35,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UEmpty, URow },
   setup() {
     return {

package/ui.text-file/UFile.vue

@@ -23,14 +23,16 @@
     </slot>
 
     <slot name="right" :file="{ elementId, label, url, imageUrl }">
-      <UIcon
+      <UButton
         v-if="removable"
-        internal
-        interactive
-        color="gray"
-        :size="removeIconSize"
-        :name="config.defaults.removeIcon"
-        v-bind="removeIconAttrs"
+        round
+        filled
+        square
+        no-ring
+        variant="thirdary"
+        :size="removeButtonSize"
+        :icon="config.defaults.removeIcon"
+        v-bind="removeButtonAttrs"
         :data-test="`${dataTest}-remove-item`"
         @click.stop.prevent="onRemove"
       />
@@ -43,6 +45,7 @@ import { computed, ref, useId } from "vue";
 
 import ULink from "../ui.button-link/ULink.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
+import UButton from "../ui.button/UButton.vue";
 
 import { getDefault } from "../utils/utilUI.js";
 
@@ -138,20 +141,20 @@ const {
   fileIconAttrs,
   fileLabelAttrs,
   fileImageAttrs,
-  removeIconAttrs,
+  removeButtonAttrs,
 } = useAttrs(props);
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
   };
 
   return sizes[props.size];
 });
 
-const removeIconSize = computed(() => {
+const removeButtonSize = computed(() => {
   const sizes = {
     sm: "2xs",
     md: "xs",

package/ui.text-file/config.js

@@ -1,15 +1,5 @@
 export default /*tw*/ {
-  file: {
-    component: "{ULink}",
-    base: "flex items-center",
-    variants: {
-      size: {
-        sm: "gap-0.5",
-        md: "gap-1",
-        lg: "gap-1.5",
-      },
-    },
-  },
+  file: "{ULink}",
   body: {
     base: "flex items-center",
     variants: {
@@ -23,7 +13,7 @@ export default /*tw*/ {
   fileImage: "rounded-sm max-w-7",
   fileIcon: "{UIcon}",
   fileLabel: "{ULink}",
-  removeIcon: "{UIcon}",
+  removeButton: "{UButton} ml-2",
   defaults: {
     size: "md",
     /* icons */

package/ui.text-files/config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   filesLabel: "{ULabel}",
-  items: "flex flex-col gap-1.5",
+  items: "flex flex-col gap-1",
   item: "{UFile} block",
   defaults: {
     size: "md",

package/ui.text-header/config.js

@@ -40,5 +40,4 @@ export default /*tw*/ {
     line: true,
     underlined: false,
   },
-  safelist: (colors) => [{ pattern: `text-(${colors})-600` }, { pattern: `border-(${colors})-600` }],
 };

package/ui.text-header/storybook/stories.js

@@ -32,7 +32,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UHeader, UCol },
   setup() {
     return {

package/ui.text-money/config.js

@@ -61,5 +61,4 @@ export default /*tw*/ {
     integer: false,
     symbolDivided: true,
   },
-  safelist: (colors) => [{ pattern: `text-(${colors})-600` }],
 };

package/ui.text-money/storybook/stories.js

@@ -46,7 +46,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UMoney, URow },
   setup() {
     const slots = getSlotNames(UMoney.__name);

package/ui.text-money/utilMoney.js

@@ -16,8 +16,8 @@ export function separatedMoney(
   thousandsSeparator = " ",
 ) {
   const options = {
-    minimumFractionDigits: Number(minFractionDigits),
-    maximumFractionDigits: Number(maxFractionDigits),
+    minimumFractionDigits: minFractionDigits,
+    maximumFractionDigits: maxFractionDigits,
   };
 
   const formattedMoney =

package/{utilsTs/utilTheme.ts → utils/utilTheme.js}

@@ -1,26 +1,23 @@
-import { fullTailwindConfig } from "./utilTailwind.ts";
-import { isSSR, isCSR } from "./utilHelper.ts";
-import { vuelessConfig } from "./utilUI.ts";
+import colors from "tailwindcss/colors.js";
+
+import { vuelessConfig } from "./utilUI.js";
+import { isSSR, isCSR } from "./utilHelper.js";
 import {
+  GRAY_COLOR,
+  COOL_COLOR,
   BRAND_COLORS,
   GRAYSCALE_COLOR,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
+  DEFAULT_RING_OFFSET_COLOR_LIGHT,
+  DEFAULT_RING_OFFSET_COLOR_DARK,
   DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
-  DEFAULT_RING_OFFSET_COLOR_LIGHT,
-  DEFAULT_RING_OFFSET_COLOR_DARK,
   DARK_MODE_SELECTOR,
   GRAY_COLORS,
   PX_IN_REM,
-} from "../constants.ts";
-
-import type { ThemeConfig, GrayColors, BrandColors, VuelessCssVariables } from "../types.ts";
-
-interface InternalThemeConfig extends ThemeConfig {
-  systemDarkMode?: boolean;
-}
+} from "../constants.js";
 
 export function themeInit() {
   if (isSSR) return;
@@ -34,12 +31,8 @@ export function themeInit() {
   );
 }
 
-export function setTheme(config: InternalThemeConfig = {}) {
+export function setTheme(config = {}) {
   const isDarkMode = setDarkMode(config);
-  const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
-  let brand: BrandColors | GrayColors = config?.brand ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
-  const gray = config?.gray ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
-
   const ring = config?.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
   const ringOffset = config?.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
 
@@ -53,7 +46,10 @@ export function setTheme(config: InternalThemeConfig = {}) {
     vuelessConfig.ringOffsetColorLight ??
     DEFAULT_RING_OFFSET_COLOR_LIGHT;
 
-  const colors = fullTailwindConfig.theme.colors;
+  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);
 
@@ -73,29 +69,29 @@ export function setTheme(config: InternalThemeConfig = {}) {
     ? defaultRingOffsetColorDark
     : defaultRingOffsetColorLight;
 
+  if (gray === COOL_COLOR) {
+    gray = GRAY_COLOR;
+  }
+
   if (brand === GRAYSCALE_COLOR) {
     brand = gray;
   }
 
-  const variables: Partial<VuelessCssVariables> = {
-    "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
+  const variables = {
     "--vl-ring": `${ring}px`,
     "--vl-ring-offset": `${ringOffset}px`,
-    "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
+    "--vl-ring-offset-color": `rgb(${convertHexInRgb(defaultRingOffsetColor)})`,
+    "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
     "--vl-color-gray-default": convertHexInRgb(colors[gray][defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand][defaultGrayShade]),
   };
 
   for (const key in colors[gray]) {
-    variables[`--vl-color-gray-${key}` as keyof VuelessCssVariables] = convertHexInRgb(
-      colors[gray][key],
-    );
+    variables[`--vl-color-gray-${key}`] = convertHexInRgb(colors[gray][key]);
   }
 
   for (const key in colors[brand]) {
-    variables[`--vl-color-brand-${key}` as keyof VuelessCssVariables] = convertHexInRgb(
-      colors[brand][key],
-    );
+    variables[`--vl-color-brand-${key}`] = convertHexInRgb(colors[brand][key]);
   }
 
   const stringVariables = Object.entries(variables)
@@ -114,14 +110,14 @@ export function setTheme(config: InternalThemeConfig = {}) {
   return rootVariables;
 }
 
-function setDarkMode(config: InternalThemeConfig) {
+function setDarkMode(config) {
   config?.darkMode === undefined
     ? isCSR && localStorage.removeItem(DARK_MODE_SELECTOR)
-    : isCSR && localStorage.setItem(DARK_MODE_SELECTOR, Number(config?.darkMode).toString());
+    : isCSR && localStorage.setItem(DARK_MODE_SELECTOR, Number(!!config?.darkMode));
 
   const storedDarkMode = isCSR ? localStorage.getItem(DARK_MODE_SELECTOR) : null;
 
-  const isDarkMode =
+  let isDarkMode =
     storedDarkMode !== null
       ? !!Number(storedDarkMode)
       : !!(config?.darkMode ?? vuelessConfig.darkMode ?? config?.systemDarkMode);
@@ -133,7 +129,7 @@ function setDarkMode(config: InternalThemeConfig) {
   return isDarkMode;
 }
 
-export function convertHexInRgb(hex: string) {
+export function convertHexInRgb(hex) {
   const color = hex.replace(/#/g, "");
 
   let r, g, b;

package/utils/utilUI.js

@@ -7,6 +7,7 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
   NESTED_COMPONENT_REG_EXP,
+  SYSTEM_CONFIG_KEY,
 } from "../constants.js";
 
 /**
@@ -27,7 +28,7 @@ if (isSSR) {
       if (!vuelessConfig) {
         vuelessConfig = (await import(/* @vite-ignore */ `${filePath}.ts`)).default;
       }
-    } catch {
+    } catch (error) {
       vuelessConfig = {};
     }
   })();
@@ -40,6 +41,209 @@ if (isCSR) {
     )[0] || {};
 }
 
+/**
+ * Recursively merge config objects with removing tailwind classes duplicates.
+ * @param {Object} defaultConfig
+ * @param {Object} globalConfig
+ * @param {Object} propsConfig
+ * @param {Object} config - final merged config.
+ * @param {boolean} isReplace - enables class replacement instead of merge.
+ * @param {boolean} isVarinants - if true, prevents adding a "base" key into nested objects.
+ *
+ * @returns {Object}
+ */
+export function mergeConfigs({
+  defaultConfig,
+  globalConfig,
+  propsConfig,
+  config = {},
+  isReplace = false,
+  isVariants = false,
+}) {
+  globalConfig = cloneDeep(globalConfig || {});
+  propsConfig = cloneDeep(propsConfig || {});
+
+  const isGlobalConfig = Object.keys(globalConfig).length;
+  const isPropsConfig = Object.keys(propsConfig).length;
+
+  // Add unique keys from defaultConfig to composedConfig
+  let composedConfig = cloneDeep(defaultConfig);
+
+  // Add unique keys from globalConfig to composedConfig
+  for (let key in globalConfig) {
+    if (!Object.keys(composedConfig).includes(key)) {
+      composedConfig[key] = globalConfig[key];
+    }
+  }
+
+  // Add unique keys from propsConfig to composedConfig
+  for (let key in propsConfig) {
+    if (!Object.keys(composedConfig).includes(key)) {
+      composedConfig[key] = propsConfig[key];
+    }
+  }
+
+  const {
+    i18n,
+    defaults,
+    strategy,
+    safelist,
+    component,
+    safelistColors,
+    defaultVariants,
+    compoundVariants,
+  } = SYSTEM_CONFIG_KEY;
+
+  for (let key in composedConfig) {
+    if (isGlobalConfig || isPropsConfig) {
+      if (key === safelist || key === safelistColors) {
+        if (propsConfig[key]) {
+          // eslint-disable-next-line no-console
+          console.warn(`Passing '${key}' key in 'config' prop is not allowed.`);
+        }
+      } else if (key === component) {
+        config[key] = propsConfig[key] || defaultConfig[key];
+
+        if (globalConfig[key]) {
+          // eslint-disable-next-line no-console
+          console.warn(`Passing '${key}' key in 'config' prop or by global config is not allowed.`);
+        }
+      } else if (key === strategy) {
+        config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
+      } else if (key === defaults || key === defaultVariants) {
+        config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
+      } else if (key === compoundVariants) {
+        config[key] = mergeCompoundVariants({
+          defaultConfig: composedConfig,
+          globalConfig,
+          propsConfig,
+          isReplace,
+          key,
+        });
+      } else {
+        const isObjectComposedConfig = typeof composedConfig[key] === "object";
+        const isObjectGlobalConfig = typeof globalConfig[key] === "object";
+        const isObjectPropsConfig = typeof propsConfig[key] === "object";
+
+        const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
+        const isEmpty = composedConfig[key] === null;
+        const isI18n = key === i18n;
+
+        if (key === "variants" && !isVariants) {
+          isVariants = true;
+        }
+
+        config[key] =
+          isObject && !isEmpty && !isI18n
+            ? mergeConfigs({
+                defaultConfig: stringToObject(composedConfig[key], { addBase: !isVariants }),
+                globalConfig: stringToObject(globalConfig[key], { addBase: !isVariants }),
+                propsConfig: stringToObject(propsConfig[key], { addBase: !isVariants }),
+                config: stringToObject(composedConfig[key], { addBase: !isVariants }),
+                isReplace,
+                isVariants,
+              })
+            : isReplace || isI18n
+              ? propsConfig[key] || globalConfig[key] || defaultConfig[key]
+              : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
+      }
+    } else {
+      config[key] = composedConfig[key];
+    }
+  }
+
+  return config;
+}
+
+/**
+ Turn simplified nested component config to regular config.
+ @param {Object | String} value
+ @param {Boolean} addBase
+ @returns {Object}
+ */
+function stringToObject(value, { addBase = false }) {
+  if (value === undefined) value = "";
+
+  return typeof value !== "object" ? addBase && { base: value } : value;
+}
+
+/**
+ * Merge CVA compound variants arrays.
+ * @param {Object} defaultConfig
+ * @param {Object} globalConfig
+ * @param {Object} propsConfig
+ * @param {string} key
+ * @param {boolean} isReplace - enables class replacement instead of merge.
+ *
+ * @returns {Array}
+ */
+function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key, isReplace }) {
+  if (
+    (globalConfig[key] && !Array.isArray(globalConfig[key])) ||
+    (propsConfig[key] && !Array.isArray(propsConfig[key])) ||
+    (defaultConfig[key] && !Array.isArray(defaultConfig[key]))
+  ) {
+    // eslint-disable-next-line no-console
+    console.error("CompoundVariants should be an array.");
+  }
+
+  let globalConfigUniqueItems = cloneDeep(globalConfig[key] || []);
+  let propsConfigUniqueItems = cloneDeep(propsConfig[key] || []);
+
+  const config = defaultConfig[key].map((defaultConfigItem) => {
+    /**
+     * Compare two objects by keys for match.
+     * @param {Object} configItem
+     * @returns {Boolean}
+     */
+    function isSameItem(configItem) {
+      const hasConfigItemKeys = Object.keys(defaultConfigItem)
+        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
+        .every((item) => !!item);
+
+      const hasDefaultConfigItemKeys = Object.keys(configItem)
+        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
+        .every((item) => !!item);
+
+      return hasConfigItemKeys && hasDefaultConfigItemKeys;
+    }
+
+    /**
+     * Find the same compound variant item in custom config if exist.
+     * @param {Object} config
+     * @returns {Object|undefined}
+     */
+    function findItem(config = []) {
+      const globalConfigUniqueItemIndex = globalConfigUniqueItems.findIndex(isSameItem);
+      const propsConfigUniqueItemIndex = propsConfigUniqueItems.findIndex(isSameItem);
+
+      if (~globalConfigUniqueItemIndex) {
+        globalConfigUniqueItems.splice(globalConfigUniqueItemIndex, 1);
+      }
+
+      if (~propsConfigUniqueItemIndex) {
+        propsConfigUniqueItems.splice(propsConfigUniqueItemIndex, 1);
+      }
+
+      return config.find(isSameItem);
+    }
+
+    const globalConfigItem = findItem(globalConfig[key]);
+    const propsConfigItem = findItem(propsConfig[key]);
+
+    return globalConfigItem || propsConfigItem
+      ? {
+          ...defaultConfigItem,
+          class: isReplace
+            ? propsConfigItem?.class || globalConfigItem?.class || defaultConfigItem.class
+            : cx([defaultConfigItem.class, globalConfigItem?.class, propsConfigItem?.class]),
+        }
+      : defaultConfigItem;
+  });
+
+  return [...config, ...globalConfigUniqueItems, ...propsConfigUniqueItems];
+}
+
 /**
  * Extend twMerge (tailwind merge) by vueless and user config:
  * All list of rules available here: