vueless 0.0.477 → 0.0.478-beta.1

package/ui.navigation-progress/config.js

@@ -107,4 +107,13 @@ export default /*tw*/ {
     variant: "progress",
     indicator: false,
   },
+  safelist: (colors) => [
+    { pattern: `text-(${colors})-600` },
+    { pattern: `text-(${colors})-100` },
+    { pattern: `stroke-(${colors})-100` },
+    {
+      pattern: `bg-(${colors})-50`,
+      variants: ["[&::-webkit-progress-bar]", "[@supports(selector(&::-moz-progress-bar))]"],
+    },
+  ],
 };

package/ui.other-dot/config.js

@@ -19,4 +19,5 @@ export default /*tw*/ {
     color: "brand",
     size: "md",
   },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };

package/ui.text-alert/config.js

@@ -54,4 +54,11 @@ export default /*tw*/ {
     /* icons */
     closeIcon: "close",
   },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-50` },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `border-(${colors})-100` },
+    { pattern: `border-(${colors})-600` },
+  ],
 };

package/ui.text-badge/config.js

@@ -63,4 +63,12 @@ export default /*tw*/ {
     round: false,
     bordered: false,
   },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-50` },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `border-(${colors})-100` },
+    { pattern: `border-(${colors})-600` },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `ring-(${colors})-700`, variants: ["focus", "focus-within"] },
+  ],
 };

package/ui.text-block/UText.vue

@@ -1,71 +1,27 @@
-<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>
+<script lang="ts" setup>
+import { getDefault } from "../utilsTs/utilUI.ts";
 
-<script setup>
-import { getDefault } from "../utils/utilUI.js";
+import { UText } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-import { UText } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
+import type { UTextProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-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 props = withDefaults(defineProps<UTextProps>(), {
+  size: getDefault<UTextProps>(defaultConfig, UText).size,
+  align: getDefault<UTextProps>(defaultConfig, UText).align,
+  line: getDefault<UTextProps>(defaultConfig, UText).line,
 });
 
 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 "../../utils/utilStorybook.js";
+import { getSource } from "../../utilsTs/utilStorybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

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

@@ -1,8 +1,16 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utilsTs/utilStorybook.ts";
 
 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)
  */
@@ -14,7 +22,7 @@ export default {
     ...getArgTypes(UText.__name),
   },
   args: {},
-};
+} as Meta;
 
 const defaultTemplate = `
   <p>
@@ -24,7 +32,7 @@ const defaultTemplate = `
   </p>
 `;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UTextArgs> = (args) => ({
   components: { UText, URow },
   setup() {
     const slots = getSlotNames(UText.__name);
@@ -38,12 +46,12 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate: StoryFn<UTextArgs> = (args, { argTypes }) => ({
   components: { UText, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options || [],
     };
   },
   template: `
@@ -88,7 +96,6 @@ Paragraphs.args = {
         rapidly changing landscape and emerge stronger and more competitive.
       </p>
     </template>
-
   `,
 };
 
@@ -102,8 +109,6 @@ 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/types.ts

@@ -0,0 +1,33 @@
+import defaultConfig from "./config.ts";
+
+export interface UTextProps {
+  /**
+   * HTML markdown or plain text.
+   */
+  html?: string;
+
+  /**
+   * Text size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Text align.
+   */
+  align?: "left" | "center" | "right";
+
+  /**
+   * Remove line height (useful for 1-line text).
+   */
+  line?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.text-block/useAttrs.ts

@@ -0,0 +1,20 @@
+import useUI from "../composablesTs/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UTextProps } from "./types.ts";
+
+type Config = Partial<typeof defaultConfig>;
+
+export default function useAttrs(props: UTextProps): UseAttrs {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.text-file/UFile.vue

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

package/ui.text-file/config.js

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

package/ui.text-header/config.js

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

package/ui.text-money/config.js

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

package/ui.text-money/utilMoney.js

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

package/utils/utilUI.js

@@ -7,7 +7,6 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
   NESTED_COMPONENT_REG_EXP,
-  SYSTEM_CONFIG_KEY,
 } from "../constants.js";
 
 /**
@@ -41,209 +40,6 @@ 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:

package/utilsTs/utilHelper.ts

@@ -0,0 +1,68 @@
+/**
+ * Deeply clone given object (same as lodash.cloneDeep).
+ */
+export function cloneDeep(entity: unknown, cache = new WeakMap()): unknown {
+  // primitives
+  if (Object(entity) !== entity || !entity) {
+    return entity;
+  }
+
+  // cyclic reference
+  if (cache.has(entity)) {
+    return cache.get(entity);
+  }
+
+  const result =
+    entity instanceof Set
+      ? new Set(entity)
+      : entity instanceof Map
+        ? new Map(Array.from(entity, ([key, val]) => [key, cloneDeep(val, cache)]))
+        : entity instanceof Date
+          ? new Date(entity)
+          : entity instanceof RegExp
+            ? new RegExp(entity.source, entity.flags)
+            : entity.constructor
+              ? new (entity.constructor as { new (): typeof entity })()
+              : Object.create(null);
+
+  cache.set(entity, result);
+
+  return Object.assign(
+    result,
+    ...Object.keys(entity).map((key) => ({
+      [key]: cloneDeep((entity as Record<string | number, unknown>)[key], cache),
+    })),
+  );
+}
+
+/**
+ * Creates a debounced function with delay (same as lodash.debounce).
+ */
+export function createDebounce(func: () => void, ms: number) {
+  let timeout: ReturnType<typeof setTimeout>;
+
+  return function (...args: []) {
+    clearTimeout(timeout);
+    // @ts-expect-error - this implicitly has type any because it does not have a type annotation.
+    timeout = setTimeout(() => func.apply(this as unknown, args), ms);
+  };
+}
+
+/**
+ * Change page title in runtime by provided config.
+ */
+export function setTitle({ title = "", separator = " / ", suffix = "" }) {
+  if (isCSR) {
+    document.title = title ? title + separator + suffix : suffix;
+  }
+}
+
+/**
+ * Check is code rendering on the server side.
+ */
+export const isSSR: boolean = typeof window === "undefined";
+
+/**
+ * Check is code rendering on the client side.
+ */
+export const isCSR: boolean = typeof window !== "undefined";