vueless 0.0.475 → 0.0.476

package/ui.form-input-number/UInputNumber.vue

@@ -6,9 +6,8 @@
     :error="error"
     :size="size"
     :align="labelAlign"
-    centred
-    v-bind="labelAttrs"
     :data-test="dataTest"
+    v-bind="labelAttrs"
   >
     <UButton
       variant="thirdary"
@@ -18,7 +17,6 @@
       round
       :disabled="isRemoveButtonDisabled || disabled"
       v-bind="removeButtonAttrs"
-      :data-test="`${dataTest}-remove`"
       @click="onClickRemove"
     >
       <UIcon
@@ -26,6 +24,7 @@
         :size="size"
         :name="config.defaults.removeIcon"
         :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
+        :data-test="`${dataTest}-remove`"
         v-bind="removeIconAttrs"
       />
     </UButton>
@@ -42,7 +41,6 @@
       round
       :disabled="isAddButtonDisabled || disabled"
       v-bind="addButtonAttrs"
-      :data-test="`${dataTest}-add`"
       @click="onClickAdd"
     >
       <UIcon
@@ -50,6 +48,7 @@
         :size="size"
         :name="config.defaults.addIcon"
         :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
+        :data-test="`${dataTest}-add`"
         v-bind="addIconAttrs"
       />
     </UButton>

package/ui.form-label/config.js

@@ -20,8 +20,8 @@ export default /*tw*/ {
       { align: "right", size: "sm", class: "gap-2.5" },
       { align: "right", size: "md", class: "gap-3" },
       { align: "right", size: "lg", class: "gap-3.5" },
-      { align: "left", centred: true, class: "items-center justify-end w-auto" },
-      { align: "right", centred: true, class: "items-center justify-start w-auto" },
+      { align: "left", centred: true, class: "items-center w-auto" },
+      { align: "right", centred: true, class: "items-center w-auto" },
     ],
   },
   content: {

package/ui.form-radio/config.js

@@ -26,10 +26,4 @@ export default /*tw*/ {
     checked: false,
     disabled: false,
   },
-  safelist: (colors) => [
-    { pattern: `border-(${colors})-500`, variants: ["focus"] },
-    { pattern: `border-(${colors})-800`, variants: ["active"] },
-    { pattern: `text-(${colors})-600`, variants: ["checked"] },
-    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
-  ],
 };

package/ui.form-switch/config.js

@@ -79,10 +79,4 @@ export default /*tw*/ {
     onIcon: "check",
     offIcon: "close",
   },
-  safelist: (colors) => [
-    { pattern: `ring-(${colors})-700` },
-    { pattern: `bg-(${colors})-600` },
-    { pattern: `bg-(${colors})-700`, variants: ["hover"] },
-    { pattern: `bg-(${colors})-800`, variants: ["active"] },
-  ],
 };

package/ui.image-avatar/config.js

@@ -43,9 +43,4 @@ export default /*tw*/ {
     /* icons */
     placeholderIcon: "image",
   },
-  safelist: (colors) => [
-    { pattern: `bg-(${colors})-100` },
-    { pattern: `text-(${colors})-600` },
-    { pattern: `border-(${colors})-200` },
-  ],
 };

package/ui.image-icon/config.js

@@ -40,9 +40,4 @@ export default /*tw*/ {
     style: "outlined",
     weight: 500,
   },
-  safelist: (colors) => [
-    { pattern: `text-(${colors})-400` },
-    { pattern: `text-(${colors})-600` },
-    { pattern: `text-(${colors})-800` },
-  ],
 };

package/ui.loader/config.js

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

package/ui.loader-overlay/config.js

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

package/ui.loader-progress/config.js

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

package/ui.navigation-progress/config.js

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

package/ui.text-alert/config.js

@@ -54,11 +54,4 @@ 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,12 +63,4 @@ 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,27 +1,71 @@
-<script lang="ts" setup>
-import { getDefault } from "../utilsTs/utilUI";
+<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";
-import defaultConfig from "./config";
-import useAttrs from "./useAttrs";
+<script setup>
+import { getDefault } from "../utils/utilUI.js";
 
-import type { UTextProps } from "./types";
+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(defaultConfig, UText).size,
-  align: getDefault(defaultConfig, UText).align,
-  line: getDefault(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 "../../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 "../../utils/utilStorybook.js";
 
 import UText from "../../ui.text-block/UText.vue";
 import URow from "../../ui.container-row/URow.vue";
 
-import type { UTextProps } from "../types";
-
-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) => ({
+const DefaultTemplate = (args) => ({
   components: { UText, URow },
   setup() {
     const slots = getSlotNames(UText.__name);
@@ -46,12 +38,12 @@ const DefaultTemplate: StoryFn<UTextArgs> = (args) => ({
   `,
 });
 
-const EnumVariantTemplate: StoryFn<UTextArgs> = (args, { 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-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"
       />
@@ -139,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-money/config.js

@@ -61,5 +61,4 @@ 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: 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";
-import { isSSR, isCSR } from "./utilHelper";
-import { vuelessConfig } from "./utilUI";
+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";
-
-import type { ThemeConfig, GrayColors, BrandColors, VuelessCssVariables } from "../types";
-
-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;