vueless 0.0.675 → 0.0.677

package/ui.dropdown-link/UDropdownLink.vue

@@ -68,12 +68,18 @@ const mutatedProps = computed(() => ({
   opened: isShownOptions.value,
 }));
 
-const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIconAttrs } =
+const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, toggleIconAttrs } =
   useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
+    <!--
+      @slot Use it to add something before the label.
+      @binding {boolean} opened
+    -->
+    <slot name="left" :opened="isShownOptions" />
+
     <ULink
       :id="elementId"
       :ring="ring"
@@ -84,48 +90,38 @@ const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIcon
       :disabled="disabled"
       :underlined="underlined"
       v-bind="dropdownLinkAttrs"
-      :data-test="dataTest"
+      :data-test="getDataTest()"
       @click="onClickLink"
       @keydown.enter="onClickLink"
       @keydown.space.prevent="onClickLink"
     >
-      <template #left>
+      <template #default>
         <!--
-          @slot Use it to add something before the label.
+          @slot Use it to add something instead of the default label.
+          @binding {string} label
           @binding {boolean} opened
         -->
-        <slot name="left" :opened="isShownOptions" />
-      </template>
-
-      <template #default>
-        <!--
-            @slot Use it to add something instead of the default label.
-            @binding {string} label
-            @binding {boolean} opened
-          -->
         <slot :label="label" :opened="isShownOptions" />
       </template>
-
-      <template #right>
-        <!--
-            @slot Use it to add something after the label.
-            @binding {boolean} opened
-          -->
-        <slot name="right" :opened="isShownOptions">
-          <UIcon
-            v-if="!noIcon"
-            internal
-            interactive
-            :color="color"
-            :name="config.defaults.dropdownIcon"
-            v-bind="dropdownIconAttrs"
-            :data-test="`${dataTest}-dropdown`"
-            @click="onClickLink"
-          />
-        </slot>
-      </template>
     </ULink>
 
+    <!--
+      @slot Use it to add something after the label.
+      @binding {boolean} opened
+    -->
+    <slot name="right" :opened="isShownOptions">
+      <UIcon
+        v-if="!noIcon"
+        internal
+        interactive
+        :color="color"
+        :name="config.defaults.toggleIcon"
+        v-bind="toggleIconAttrs"
+        :data-test="getDataTest('toggle')"
+        @click="onClickLink"
+      />
+    </slot>
+
     <UDropdownList
       v-if="isShownOptions"
       ref="dropdown-list"
@@ -133,7 +129,7 @@ const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIcon
       :options="options"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
-      :data-test="`${dataTest}-list`"
+      :data-test="getDataTest('list')"
       @click-option="onClickOption"
     />
   </div>

package/ui.dropdown-link/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "relative inline-block",
+    base: "relative inline-flex",
     variants: {
       opened: {
         true: "group",
@@ -8,7 +8,7 @@ export default /*tw*/ {
     },
   },
   dropdownLink: "{ULink}",
-  dropdownIcon: {
+  toggleIcon: {
     base: "{UIcon} block transition duration-300 group-[]:rotate-180",
     defaults: {
       size: {
@@ -43,6 +43,6 @@ export default /*tw*/ {
     noIcon: false,
     disabled: false,
     /* icons */
-    dropdownIcon: "keyboard_arrow_down",
+    toggleIcon: "keyboard_arrow_down",
   },
 };

package/ui.dropdown-link/types.ts

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

package/ui.dropdown-list/types.ts

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

package/ui.form-calendar/types.ts

@@ -80,7 +80,7 @@ export interface UCalendarProps<TModelValue extends DateValue> {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }
 
 export interface UCalendarViewProps {

package/ui.form-checkbox/types.ts

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

package/ui.form-checkbox-group/types.ts

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

package/ui.form-checkbox-multi-state/types.ts

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

package/ui.form-color-picker/UColorPicker.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, useId } from "vue";
+
+import { vTooltip } from "../directives";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
+import UButton from "../ui.button/UButton.vue";
+
+import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config.ts";
+
+import type { Props, Config } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  modelValue: "",
+  colors: () => ({}),
+  labels: () => ({}),
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when color value changes.
+   * @property {string} value
+   */
+  "update:modelValue",
+]);
+
+const elementId = props.id || useId();
+
+const selectedItem = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+function onClickColor(color: string) {
+  selectedItem.value = color;
+}
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { listAttrs, colorButtonAttrs, circleAttrs } = useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <div :id="elementId" v-bind="listAttrs">
+    <UButton
+      v-for="(colorClass, color) in colors"
+      :key="color"
+      v-tooltip="labels?.[color] || color"
+      square
+      size="xs"
+      :ring="false"
+      color="grayscale"
+      variant="thirdary"
+      :filled="selectedItem === color"
+      v-bind="colorButtonAttrs"
+      @click="onClickColor(color)"
+    >
+      <div :class="colorClass" v-bind="circleAttrs" />
+    </UButton>
+  </div>
+</template>

package/ui.form-color-picker/config.ts

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

package/ui.form-color-picker/constants.ts

@@ -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 COMPONENT_NAME = "UColorPicker";

package/ui.form-color-picker/storybook/docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-color-picker/storybook/stories.ts

@@ -0,0 +1,97 @@
+import {
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook.ts";
+
+import UColorPicker from "../UColorPicker.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UButton from "../../ui.button/UButton.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Props } from "../types.ts";
+
+interface UColorPickerArgs extends Props {
+  slotTemplate?: string;
+  enum: "size";
+}
+
+export default {
+  id: "3190",
+  title: "Form Inputs & Controls / Color Picker",
+  component: UColorPicker,
+  args: {
+    modelValue: "",
+    colors: {
+      grayscale: "bg-gray-900",
+      gray: "bg-gray-600",
+      red: "bg-red-600",
+      orange: "bg-orange-600",
+      amber: "bg-amber-600",
+      yellow: "bg-yellow-600",
+      lime: "bg-lime-600",
+      green: "bg-green-600",
+      emerald: "bg-emerald-600",
+      teal: "bg-teal-600",
+      cyan: "bg-cyan-600",
+      sky: "bg-sky-600",
+      blue: "bg-blue-600",
+      indigo: "bg-indigo-600",
+      violet: "bg-violet-600",
+      purple: "bg-purple-600",
+      fuchsia: "bg-fuchsia-600",
+      pink: "bg-pink-600",
+      rose: "bg-rose-600",
+    },
+  },
+  argTypes: {
+    ...getArgTypes(UColorPicker.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UColorPicker.__name),
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs) => ({
+  components: { UColorPicker, UButton, UCol },
+  setup() {
+    const slots = getSlotNames(UColorPicker.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UColorPicker v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UColorPicker>
+  `,
+});
+
+const EnumVariantTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs, { argTypes }) => ({
+  components: { UCol, UColorPicker },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <UCol>
+      <UColorPicker
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+      />
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };

package/ui.form-color-picker/types.ts

@@ -0,0 +1,42 @@
+import defaultConfig from "./config.ts";
+
+import type { BrandColors, GrayColors, ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Selected values.
+   */
+  modelValue: string;
+
+  /**
+   * Component size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Color list.
+   */
+  colors?: Record<BrandColors, string>;
+
+  /**
+   * Color labels.
+   */
+  labels?: Record<GrayColors, string>;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}

package/ui.form-date-picker/types.ts

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

package/ui.form-date-picker-range/types.ts

@@ -189,5 +189,5 @@ export interface UDatePickerRangeProps<TModelValue> {
   /**
    * Data-test attribute for automated testing.
    */
-  dataTest?: string;
+  dataTest?: string | null;
 }

package/ui.form-input/types.ts

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

package/ui.form-input-file/storybook/stories.ts

@@ -17,7 +17,7 @@ interface UInputFileArgs extends Props {
 }
 
 export default {
-  id: "30232",
+  id: "3200",
   title: "Form Inputs & Controls / Input File",
   component: UInputFile,
   args: {

package/ui.form-input-file/types.ts

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

package/ui.form-input-money/types.ts

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

package/ui.form-input-number/types.ts

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

package/ui.form-input-rating/types.ts

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

package/ui.form-input-search/types.ts

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

package/ui.form-label/storybook/stories.ts

@@ -20,7 +20,7 @@ interface ULabelArgs extends Props {
 }
 
 export default {
-  id: "3240",
+  id: "3210",
   title: "Form Inputs & Controls / Label",
   component: ULabel,
   args: {

package/ui.form-label/types.ts

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

package/ui.form-radio/types.ts

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

package/ui.form-radio-group/types.ts

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

package/ui.form-select/USelect.vue

@@ -416,6 +416,7 @@ const mutatedProps = computed(() => ({
 
 const {
   config,
+  getDataTest,
   selectLabelAttrs,
   wrapperAttrs,
   innerWrapperAttrs,
@@ -453,7 +454,7 @@ const {
     centred
     interactive
     v-bind="selectLabelAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
     :tabindex="-1"
   >
     <template #label>
@@ -503,6 +504,7 @@ const {
         v-show="!multiple || (!isLocalValue && multiple)"
         v-bind="toggleWrapperAttrs"
         :tabindex="-1"
+        :data-test="getDataTest('toggle')"
         @mousedown.prevent.stop="toggle"
       >
         <!--
@@ -517,7 +519,6 @@ const {
             color="gray"
             :name="config.defaults.dropdownIcon"
             v-bind="toggleIconAttrs"
-            :data-test="`${dataTest}-toggle`"
             :tabindex="-1"
           />
         </slot>
@@ -526,6 +527,7 @@ const {
       <div
         v-if="isLocalValue && clearable && !disabled && !multiple"
         v-bind="clearAttrs"
+        :data-test="getDataTest('clear')"
         @mousedown="onMouseDownClear"
       >
         <!--
@@ -539,7 +541,6 @@ const {
             color="gray"
             :name="config.defaults.clearIcon"
             v-bind="clearIconAttrs"
-            :data-test="`${dataTest}-clear`"
           />
         </slot>
       </div>
@@ -599,6 +600,7 @@ const {
             <div
               v-if="!disabled"
               v-bind="clearMultipleAttrs"
+              :data-test="getDataTest('clear-item')"
               @mousedown.prevent.capture
               @click.prevent.capture
               @mousedown="onMouseDownClearItem($event, item)"
@@ -614,7 +616,6 @@ const {
                   color="gray"
                   :name="config.defaults.clearMultipleIcon"
                   v-bind="clearMultipleIconAttrs"
-                  :data-test="`${dataTest}-clear-all`"
                 />
               </slot>
             </div>
@@ -634,7 +635,7 @@ const {
             :disabled="disabled"
             :aria-controls="'listbox-' + elementId"
             v-bind="searchInputAttrs"
-            :data-test="`${dataTest}-search`"
+            :data-test="getDataTest('search')"
             @focus="activate"
             @blur.prevent="deactivate"
             @keyup.esc="deactivate"
@@ -674,6 +675,7 @@ const {
         <div
           v-if="isLocalValue && clearable && !disabled && multiple"
           v-bind="clearMultipleTextAttrs"
+          :data-test="getDataTest('clear-all')"
           @mousedown.prevent.capture="onMouseDownClear"
           @click.prevent.capture
           v-text="currentLocale.clear"
@@ -693,7 +695,7 @@ const {
         :add-option="addOption"
         tabindex="-1"
         v-bind="dropdownListAttrs as KeyAttrsWithConfig<UDropdownListConfig>"
-        :data-test="dataTest"
+        :data-test="getDataTest()"
         @add="onAddOption"
         @focus="activate"
         @mousedown.prevent.capture

package/ui.form-select/types.ts

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

package/ui.form-switch/types.ts

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

package/ui.form-textarea/types.ts

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

package/ui.image-avatar/types.ts

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