vueless 0.0.675 → 0.0.677

package/ui.image-icon/UIcon.vue

@@ -2,7 +2,6 @@
 import { computed, defineAsyncComponent } from "vue";
 
 import useUI from "../composables/useUI.ts";
-import { vTooltip } from "../directives";
 import { getDefaults } from "../utils/ui.ts";
 import { isSSR } from "../utils/helper.ts";
 import { VUELESS_ICONS_CACHED_DIR, VUELESS_LIBRARY } from "../constants.js";
@@ -12,13 +11,11 @@ import defaultConfig from "./config.ts";
 
 import type { AsyncComponentLoader } from "vue";
 import type { Props, Config, IconLibraries } from "./types.ts";
-import type { Props as TippyProps, Instance as TippyInstance } from "tippy.js";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  tooltipSettings: () => ({}) as TippyProps,
 });
 
 const emit = defineEmits([
@@ -128,18 +125,6 @@ const dynamicComponent = computed(() => {
   return defineAsyncComponent(libraries[library] as AsyncComponentLoader);
 });
 
-const tooltipConfig = computed(() => ({
-  ...props.tooltipSettings,
-  content: props.tooltip,
-  onShow: (instance: TippyInstance) => {
-    const userOnShow = props.tooltipSettings?.onShow;
-
-    userOnShow && userOnShow(instance);
-
-    return !!props.tooltip;
-  },
-}));
-
 function onClick(event: MouseEvent) {
   emit("click", event);
 }
@@ -148,16 +133,15 @@ function onClick(event: MouseEvent) {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { config, iconAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, config, iconAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <component
     :is="dynamicComponent"
-    v-tooltip="tooltipConfig"
     tabindex="-1"
     v-bind="iconAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
     @click="onClick"
   />
 </template>

package/ui.image-icon/storybook/stories.ts

@@ -79,8 +79,5 @@ Sizes.args = { enum: "size" };
 export const Variants = EnumVariantTemplate.bind({});
 Variants.args = { enum: "variant", color: "red" };
 
-export const Tooltip = DefaultTemplate.bind({});
-Tooltip.args = { tooltip: "Some text" };
-
 export const Interactive = DefaultTemplate.bind({});
 Interactive.args = { interactive: true };

package/ui.image-icon/types.ts

@@ -3,7 +3,6 @@ import defaultConfig from "./config.ts";
 import type { DefineComponent, SVGAttributes } from "vue";
 
 import type { ComponentConfig } from "../types.ts";
-import type { Props as TippyProps } from "tippy.js";
 
 export type Config = typeof defaultConfig;
 
@@ -68,17 +67,6 @@ export interface Props {
    */
   interactive?: boolean;
 
-  /**
-   * Add tooltip text on hover.
-   */
-  tooltip?: string;
-
-  /**
-   * Tooltip settings.
-   * [See all settings here](https://kabbouchi.github.io/vue-tippy/4.0/features/placement.html).
-   */
-  tooltipSettings?: TippyProps;
-
   /**
    * Mark that Icon used inside Vueless components (used to get icons from vueless library).
    */
@@ -92,5 +80,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.loader/types.ts

@@ -51,5 +51,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.loader-overlay/types.ts

@@ -44,5 +44,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.loader-progress/types.ts

@@ -53,5 +53,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.navigation-pagination/types.ts

@@ -82,5 +82,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.navigation-progress/types.ts

@@ -63,7 +63,7 @@ export interface UProgressProps {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }
 
 export interface StepperProgressProps {
@@ -90,5 +90,5 @@ export interface StepperProgressProps {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.navigation-tab/types.ts

@@ -31,5 +31,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.navigation-tabs/types.ts

@@ -43,5 +43,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.other-dot/types.ts

@@ -43,5 +43,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.other-theme-color-toggle/UThemeColorToggle.vue

@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import { computed, useId, watch } from "vue";
+import { computed, useId } from "vue";
 
-import { vTooltip } from "../directives";
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
 import { setTheme, getSelectedBrandColor, getSelectedGrayColor } from "../utils/theme.ts";
 import { GRAYSCALE_COLOR } from "../constants.js";
 
 import UDivider from "../ui.container-divider/UDivider.vue";
-import UButton from "../ui.button/UButton.vue";
+import UColorPicker from "../ui.form-color-picker/UColorPicker.vue";
 
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { BrandColors, GrayColors } from "../types.ts";
 import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  modelValue: () => ["", ""],
+  brand: "",
+  gray: "",
   brandColors: () => ({}),
   grayColors: () => ({}),
   brandLabels: () => ({}),
@@ -29,78 +28,61 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits([
   /**
-   * Triggers when color value changes.
+   * Triggers when the brand color changes.
    * @property {string} value
    */
-  "update:modelValue",
+  "update:brand",
+
+  /**
+   * Triggers when the gray color changes.
+   * @property {string} value
+   */
+  "update:gray",
 ]);
 
 const elementId = props.id || useId();
 
-const selectedBrand = getSelectedBrandColor();
-const selectedGray = getSelectedGrayColor();
+const selectedBrandColor = computed({
+  get: () => props.brand || getSelectedBrandColor(),
+  set: (brand: string) => {
+    const prevBrand = getSelectedBrandColor();
+    const isBrandGrayscale = brand === GRAYSCALE_COLOR;
+    const isPrevBrandGrayscale = prevBrand === GRAYSCALE_COLOR;
 
-const selectedItem = computed({
-  get: () => {
-    const [brand, gray] = props.modelValue;
+    if (brand !== prevBrand && (isBrandGrayscale || isPrevBrandGrayscale)) {
+      window.location.reload();
+    }
 
-    return [brand || selectedBrand, gray || selectedGray];
+    setTheme({ brand });
+    emit("update:brand", brand);
   },
-  set: (value) => emit("update:modelValue", value),
 });
 
-watch(selectedItem, (newValue, oldValue) => {
-  const [oldBrand, oldGray] = oldValue;
-  const [brand, gray] = newValue;
-
-  if (oldBrand === brand && oldGray === gray) {
-    return;
-  }
-
-  setTheme({ brand, gray });
-
-  if (oldBrand !== brand && (brand === GRAYSCALE_COLOR || oldBrand === GRAYSCALE_COLOR)) {
-    window.location.reload();
-  }
+const selectedGrayColor = computed({
+  get: () => props.gray || getSelectedGrayColor(),
+  set: (value: string) => {
+    setTheme({ gray: value });
+    emit("update:gray", value);
+  },
 });
 
-function onClickBrandColor(brand: BrandColors) {
-  const [, gray] = selectedItem.value;
-
-  selectedItem.value = [brand, gray];
-}
-
-function onClickGrayColor(gray: GrayColors) {
-  const [brand] = selectedItem.value;
-
-  selectedItem.value = [brand, gray];
-}
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { listAttrs, colorButtonAttrs, circleAttrs, colorDividerAttrs } =
+const { listAttrs, colorDividerAttrs, brandColorPickerAttrs, grayColorPickerAttrs } =
   useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <div :id="elementId" v-bind="listAttrs">
-    <UButton
-      v-for="(brandColorClass, color) in brandColors"
-      :key="color"
-      v-tooltip="brandLabels?.[color] || color"
-      square
-      size="xs"
-      :ring="false"
-      color="grayscale"
-      variant="thirdary"
-      :filled="selectedItem[0] === color"
-      v-bind="colorButtonAttrs"
-      @click="onClickBrandColor(color)"
-    >
-      <div :class="brandColorClass" v-bind="circleAttrs" />
-    </UButton>
+    <UColorPicker
+      v-model="selectedBrandColor"
+      :size="size"
+      :colors="brandColors"
+      :labels="brandLabels"
+      v-bind="brandColorPickerAttrs"
+    />
 
     <UDivider
       v-if="Object.keys(brandColors).length && Object.keys(grayColors).length"
@@ -108,20 +90,12 @@ const { listAttrs, colorButtonAttrs, circleAttrs, colorDividerAttrs } =
       v-bind="colorDividerAttrs"
     />
 
-    <UButton
-      v-for="(grayColorClass, color) in grayColors"
-      :key="color"
-      v-tooltip="brandLabels?.[color] || color"
-      square
-      size="xs"
-      :ring="false"
-      color="grayscale"
-      variant="thirdary"
-      :filled="selectedItem[1] === color"
-      v-bind="colorButtonAttrs"
-      @click="onClickGrayColor(color)"
-    >
-      <div :class="grayColorClass" v-bind="circleAttrs" />
-    </UButton>
+    <UColorPicker
+      v-model="selectedGrayColor"
+      :size="size"
+      :colors="grayColors"
+      :labels="grayLabels"
+      v-bind="grayColorPickerAttrs"
+    />
   </div>
 </template>

package/ui.other-theme-color-toggle/config.ts

@@ -1,28 +1,7 @@
 export default /*tw*/ {
   list: "flex flex-wrap gap-0.5",
-  colorButton: {
-    base: "{UButton}",
-    button: {
-      compoundVariants: [
-        {
-          filled: true,
-          variant: "thirdary",
-          color: "grayscale",
-          class: "bg-gray-800/10 dark:bg-gray-200/10",
-        },
-      ],
-    },
-  },
-  circle: {
-    base: "rounded-full",
-    variants: {
-      size: {
-        sm: "size-4",
-        md: "size-5",
-        lg: "size-6",
-      },
-    },
-  },
+  brandColorPicker: "{UColorPicker}",
+  grayColorPicker: "{UColorPicker}",
   colorDivider: "{UDivider}",
   defaults: {
     size: "md",

package/ui.other-theme-color-toggle/storybook/stories.ts

@@ -19,13 +19,13 @@ interface UThemeColorToggleArgs extends Props {
 
 export default {
   id: "100020",
-  title: "Other / Theme Color Switcher",
+  title: "Other / Theme Color Toggle",
   component: UThemeColorToggle,
   args: {
-    modelValue: ["", ""],
+    brand: "",
+    gray: "",
     brandColors: {
       grayscale: "bg-gray-900",
-      gray: "bg-gray-600",
       red: "bg-red-600",
       orange: "bg-orange-600",
       amber: "bg-amber-600",
@@ -71,7 +71,7 @@ const DefaultTemplate: StoryFn<UThemeColorToggleArgs> = (args: UThemeColorToggle
   },
   template: `
     <UCol>
-      <UThemeColorToggle v-bind="args" v-model="args.modelValue">
+      <UThemeColorToggle v-bind="args" v-model:brand="args.brand" v-model:gray="args.gray">
         ${args.slotTemplate || getSlotsFragment("")}
       </UThemeColorToggle>
 
@@ -97,7 +97,8 @@ const EnumVariantTemplate: StoryFn<UThemeColorToggleArgs> = (
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        v-model="args.modelValue"
+        v-model:brand="args.brand"
+        v-model:gray="args.gray"
         :[args.enum]="option"
       />
     </UCol>

package/ui.other-theme-color-toggle/types.ts

@@ -6,9 +6,14 @@ export type Config = typeof defaultConfig;
 
 export interface Props {
   /**
-   * Selected values.
+   * Selected brand color (v-model).
    */
-  modelValue: [BrandColors, GrayColors];
+  brand: BrandColors;
+
+  /**
+   * Selected gray color (v-model).
+   */
+  gray: GrayColors;
 
   /**
    * Component size.
@@ -48,5 +53,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.text-alert/types.ts

@@ -73,5 +73,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.text-badge/types.ts

@@ -83,5 +83,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.text-block/types.ts

@@ -32,5 +32,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.text-empty/types.ts

@@ -27,5 +27,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.text-file/types.ts

@@ -42,5 +42,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.text-files/types.ts

@@ -42,5 +42,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.text-header/types.ts

@@ -63,5 +63,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.text-money/types.ts

@@ -98,5 +98,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.text-notify/types.ts

@@ -50,5 +50,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.text-number/types.ts

@@ -78,5 +78,5 @@ export interface Props {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/utils/theme.ts

@@ -115,7 +115,7 @@ export function setTheme(config: Config = {}) {
   const roundingLg = config.roundingLg ?? vuelessConfig.roundingLg ?? rounding * 2;
   const isDarkMode = isCSR && document.documentElement.classList.contains(DARK_MODE_SELECTOR);
 
-  const brand: BrandColors =
+  let brand: BrandColors =
     config.brand ?? getSelectedBrandColor() ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
 
   let gray: GrayColors =
@@ -138,10 +138,17 @@ export function setTheme(config: Config = {}) {
   const defaultGrayShade = isDarkMode ? 400 : 600;
   const defaultRingOffsetColor = isDarkMode ? ringOffsetColorDark : ringOffsetColorLight;
 
+  localStorage.setItem("brand", brand);
+  localStorage.setItem("gray", gray);
+
   if (gray === COOL_COLOR) {
     gray = GRAY_COLOR;
   }
 
+  if (brand === GRAYSCALE_COLOR) {
+    brand = gray;
+  }
+
   /* Remove deprecated color aliases. */
   delete (tailwindColors as Partial<DefaultColors>).lightBlue;
   delete (tailwindColors as Partial<DefaultColors>).warmGray;
@@ -169,9 +176,6 @@ export function setTheme(config: Config = {}) {
     console.warn(`The gray color '${gray}' is missing in your palette.`);
   }
 
-  localStorage.setItem("brand", brand);
-  localStorage.setItem("gray", gray);
-
   const variables: Partial<VuelessCssVariables> = {
     "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,