vueless 0.0.711 → 0.0.712

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.711",
+  "version": "0.0.712",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.dropdown-list/storybook/docs.mdx

@@ -12,7 +12,7 @@ import defaultConfig from "../config.ts?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## Row meta keys
+## Option meta keys
 Keys you may/have to provide to component in an option object.
 
 <Markdown>

package/ui.form-select/USelect.vue

@@ -10,6 +10,7 @@ import useUI from "../composables/useUI.ts";
 import { createDebounce, hasSlotContent } from "../utils/helper.ts";
 import { getDefaults } from "../utils/ui.ts";
 import { isMac } from "../utils/platform.ts";
+import { useMutationObserver } from "../composables/useMutationObserver.ts";
 
 import {
   filterOptions,
@@ -334,6 +335,12 @@ function onMouseDownClear() {
   emit("remove", props.options);
 }
 
+useMutationObserver(leftSlotWrapperRef, (mutations) => mutations.forEach(setLabelPosition), {
+  childList: true,
+  characterData: true,
+  subtree: true,
+});
+
 function setLabelPosition() {
   if (props.labelAlign === "top" || (!hasSlotContent(slots["left"]) && !props.leftIcon)) {
     return;

package/ui.form-select/config.ts

@@ -114,10 +114,8 @@ export default /*tw*/ {
       selected: {
         false: "w-full",
       },
-      opened: {
-        true: "w-full",
-      },
     },
+    compoundVariants: [{ opened: true, searchable: false, class: "w-0" }],
   },
   searchInput: {
     base: `

package/ui.form-select/storybook/docs.mdx

@@ -12,5 +12,8 @@ import defaultConfig from "../config.ts?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+## Option meta keys
+Full list of keys you may/have to provide to component in an option object can be found here: [UDropdownList docs](https://ui.vueless.com/?path=/docs/2050--docs).
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -1,3 +1,4 @@
+import { ref, computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -7,16 +8,18 @@ import {
 
 import USelect from "../../ui.form-select/USelect.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import ULink from "../../ui.button-link/ULink.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface USelectArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "openDirection";
+  enum: "size" | "openDirection" | "labelAlign";
 }
 
 interface SelectOption {
@@ -30,13 +33,14 @@ export default {
   title: "Form Inputs & Controls / Select",
   component: USelect,
   args: {
-    label: "Label",
+    label: "Choose a city",
     modelValue: null,
     options: [
-      { id: 1, label: "value 1", badge: "10%" },
-      { id: 2, label: "value 2", badge: "20%" },
-      { id: 3, label: "value 3", badge: "30%" },
-      { id: 4, label: "value 4", badge: "40%" },
+      { label: "New York", id: "1" },
+      { label: "Los Angeles", id: "2" },
+      { label: "Chicago", id: "3" },
+      { label: "Houston", id: "4" },
+      { label: "San Francisco", id: "5" },
     ],
   },
   argTypes: {
@@ -46,49 +50,63 @@ export default {
     docs: {
       ...getDocsDescription(USelect.__name),
       story: {
-        height: "280px",
+        height: "300px",
       },
     },
   },
 } as Meta;
 
 const DefaultTemplate: StoryFn<USelectArgs> = (args: USelectArgs) => ({
-  components: { USelect, UIcon, UBadge, ULink },
+  components: { USelect, UIcon, UBadge, ULink, UAvatar },
   setup() {
     function getSelectedBadge(options: SelectOption[], currentValue: string | number) {
       return options?.find((option) => option.id === currentValue);
     }
 
     const slots = getSlotNames(USelect.__name);
+    const errorMessage = computed(() => (!args.modelValue ? args.error : ""));
+    const showAlert = (message: string) => alert(message);
 
-    return { args, slots, getSelectedBadge };
+    return { args, slots, getSelectedBadge, errorMessage, showAlert };
   },
   template: `
-    <USelect v-bind="args" v-model="args.modelValue">
+    <USelect
+      v-bind="args"
+      v-model="args.modelValue"
+      :error="errorMessage"
+      class="max-w-96"
+      @add="showAlert('You triggered the add action!')"
+    >
       ${args.slotTemplate || getSlotsFragment("")}
     </USelect>
   `,
 });
 
 const EnumVariantTemplate: StoryFn<USelectArgs> = (args: USelectArgs, { argTypes }) => ({
-  components: { USelect, URow },
+  components: { USelect, UCol },
   setup() {
-    return {
-      args,
-      options: argTypes?.[args.enum]?.options,
-    };
+    let filteredOptions = argTypes?.[args.enum]?.options;
+
+    if (args.enum === "labelAlign") {
+      filteredOptions = argTypes?.[args.enum]?.options?.filter(
+        (item) => item !== "right" && item !== "topWithDesc",
+      );
+    }
+
+    return { args, filteredOptions };
   },
   template: `
-    <URow>
+    <UCol>
       <USelect
-        v-for="(option, index) in options"
+        v-for="(option, index) in filteredOptions"
         :key="index"
         v-bind="args"
         v-model="args.modelValue"
         :[args.enum]="option"
-        :label="option"
+        :description="option"
+        class="max-w-96"
       />
-    </URow>
+    </UCol>
   `,
 });
 
@@ -118,6 +136,24 @@ const GroupValuesTemplate: StoryFn<USelectArgs> = (args: USelectArgs) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Placeholder = DefaultTemplate.bind({});
+Placeholder.args = { placeholder: "Start typing to search for a city..." };
+
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "You can only select a city from the list." };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { error: "Please select a city from the list" };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign" };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", multiple: true, modelValue: [] };
+
 export const LargeItemList = DefaultTemplate.bind({});
 LargeItemList.args = {
   options: [...new Array(1000)].map((_, index) => {
@@ -128,6 +164,18 @@ LargeItemList.args = {
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { multiple: true, modelValue: [] };
 
+export const ClearableAndSearchable = DefaultTemplate.bind({});
+ClearableAndSearchable.args = { clearable: false, searchable: false };
+ClearableAndSearchable.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "The `clearable` and `searchable` props control whether users can clear the selected value or search within the list. <br/> In this example, both are set to `false`, meaning the selection cannot be cleared, and searching is disabled.",
+    },
+  },
+};
+
 export const OpenDirection = EnumVariantTemplate.bind({});
 OpenDirection.args = { enum: "openDirection" };
 
@@ -159,36 +207,181 @@ GroupValue.args = {
   ],
 };
 
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
-
-export const Error = DefaultTemplate.bind({});
-Error.args = { error: "some error text" };
-
-export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { placeholder: "some placeholder text" };
-
-export const Description = DefaultTemplate.bind({});
-Description.args = { description: "some description text" };
-
 export const OptionsLimit2 = DefaultTemplate.bind({});
 OptionsLimit2.args = { optionsLimit: 2 };
+OptionsLimit2.parameters = {
+  docs: {
+    description: {
+      story: "`optionsLimit` prop controls the number of options displayed in the dropdown.",
+    },
+  },
+};
+
+export const VisibleOptions = DefaultTemplate.bind({});
+VisibleOptions.args = { visibleOptions: 3 };
+VisibleOptions.parameters = {
+  docs: {
+    description: {
+      story: "`visibleOptions` prop controls the number of options you can see without a scroll.",
+    },
+  },
+};
 
 export const AddOption = DefaultTemplate.bind({});
 AddOption.args = { addOption: true };
+AddOption.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "The `addOption` prop displays an 'Add option' button, while the `add` event allows handling custom functionality when the button is clicked.",
+    },
+  },
+};
 
-export const OptionIsHidden = DefaultTemplate.bind({});
-OptionIsHidden.args = {
+export const OptionSettings = DefaultTemplate.bind({});
+OptionSettings.args = {
   options: [
-    { id: 1, label: "value 1", isHidden: true },
-    { id: 2, label: "value 2" },
-    { id: 3, label: "value 3" },
-    { id: 4, label: "value 4" },
+    { label: "1. New York", id: "1" },
+    { label: "2. Los Angeles", id: "2", isHidden: true },
+    {
+      label: "3. Chicago",
+      id: "3",
+      onClick: (option) =>
+        alert("onClick function for the third option: " + JSON.stringify(option)),
+    },
+    { label: "4. Houston", id: "4" },
+    { label: "5. San Francisco", id: "5" },
   ],
 };
+OptionSettings.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "The second option of the array is hidden (`isHidden` object property is set to `true`). <br/> The third option has `onClick` event handler: <br/> `onClick: (option: Option) => alert('onClick function for option 3: ' + JSON.stringify(option))`",
+    },
+  },
+};
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size", multiple: true, modelValue: [] };
+export const IconProps: StoryFn<USelectArgs> = (args) => ({
+  components: { USelect, URow },
+  setup() {
+    const levelOptions = [
+      { label: "Awesome", id: "1" },
+      { label: "Good", id: "2" },
+      { label: "Could be better", id: "3" },
+      { label: "Terrible", id: "4" },
+    ];
+
+    const roleOptions = [
+      { label: "Admin", id: "1" },
+      { label: "CEO", id: "2" },
+      { label: "Manager", id: "3" },
+      { label: "Guest", id: "4" },
+    ];
+
+    return { args, levelOptions, roleOptions };
+  },
+  template: `
+    <URow no-mobile>
+      <USelect
+        left-icon="feedback"
+        label="Choose the level of our services"
+        placeholder="Share your feedback with us"
+        :options="levelOptions"
+      />
+      <USelect
+        right-icon="person"
+        label="Select your role"
+        placeholder="Choose a role from the list"
+        :options="roleOptions"
+      />
+    </URow>
+  `,
+});
+
+export const Slots: StoryFn<USelectArgs> = (args) => ({
+  components: { USelect, UCol, URow, ULink, UBadge, UAvatar },
+  setup() {
+    const clearModel = ref(null);
+    const clearMultipleModel = ref([]);
+    const beforeToggleModel = ref(null);
+    const afterToggleModel = ref(null);
+    const leftModel = ref(null);
+    const rightModel = ref(null);
+
+    return {
+      args,
+      clearModel,
+      clearMultipleModel,
+      beforeToggleModel,
+      afterToggleModel,
+      leftModel,
+      rightModel,
+    };
+  },
+  template: `
+    <UCol no-mobile>
+      <USelect v-bind="args" v-model="args.clearModel" label="Slot clear">
+        <template #clear>
+          <ULink label="Close" />
+        </template>
+      </USelect>
+
+      <USelect
+        v-bind="args"
+        v-model="args.clearMultipleModel"
+        multiple
+        label="Slot clear-multiple"
+      >
+        <template #clear-multiple>
+          <ULink label="Close" color="green" />
+        </template>
+      </USelect>
+
+      <URow no-mobile>
+        <USelect v-bind="args" v-model="args.beforeToggleModel" label="Slot before-toggle">
+          <template #before-toggle>
+            <UAvatar />
+          </template>
+        </USelect>
+
+        <USelect
+          v-bind="args"
+          v-model="args.afterToggleModel"
+          :config="{ afterToggle: 'pt-0 items-center' }"
+          label="Slot after-toggle"
+        >
+          <template #after-toggle>
+            <UAvatar />
+          </template>
+        </USelect>
+      </URow>
+
+      <URow no-mobile>
+        <USelect v-bind="args" v-model="args.leftModel" label="Slot left">
+          <template #left>
+            <UAvatar />
+          </template>
+        </USelect>
+
+        <USelect v-bind="args" v-model="args.rightModel" label="Slot right">
+          <template #right>
+            <UAvatar />
+          </template>
+        </USelect>
+      </URow>
+    </UCol>
+  `,
+});
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "500px",
+    },
+  },
+};
 
 export const SlotToggle = DefaultTemplate.bind({});
 SlotToggle.args = {
@@ -202,67 +395,29 @@ SlotToggle.args = {
   `,
 };
 
-export const SlotClear = DefaultTemplate.bind({});
-SlotClear.args = {
-  slotTemplate: `
-    <template #clear>
-      <ULink label="Close" />
-    </template>
-  `,
-};
-
-export const SlotClearMultiple = DefaultTemplate.bind({});
-SlotClearMultiple.args = {
-  multiple: true,
-  modelValue: [],
-  slotTemplate: `
-    <template #clear-multiple>
-      <ULink label="Close" />
-    </template>
-  `,
-};
-
 export const SlotSelectedValueLabel = DefaultTemplate.bind({});
 SlotSelectedValueLabel.args = {
   slotTemplate: `
-    <template #selected-label>
-      🤘🤘🤘
+    <template #selected-label="{ selectedLabel }">
+      <UBadge :label="selectedLabel" color="green" />
     </template>
   `,
 };
 
 export const SlotSelectedValueLabelAfter = DefaultTemplate.bind({});
 SlotSelectedValueLabelAfter.args = {
+  options: [
+    { label: "Venice", id: "1", icon: "sailing", color: "green" },
+    { label: "Paris", id: "2", icon: "flight", color: "orange" },
+  ],
   slotTemplate: `
-    <template #selected-label-after>
-      🤘🤘🤘
-    </template>
-  `,
-};
-
-export const SlotOption = DefaultTemplate.bind({});
-SlotOption.args = {
-  slotTemplate: `
-    <template #option>
-      🤘🤘🤘
-    </template>
-  `,
-};
-
-export const SlotAfterToggle = DefaultTemplate.bind({});
-SlotAfterToggle.args = {
-  slotTemplate: `
-    <template #after-toggle>
-      🤘
-    </template>
-  `,
-};
-
-export const SlotBeforeToggle = DefaultTemplate.bind({});
-SlotBeforeToggle.args = {
-  slotTemplate: `
-    <template #before-toggle>
-      🤘
+    <template #selected-label-after="{ option }">
+      <UIcon
+        :name="option.icon"
+        :color="option.color"
+        size="xs"
+        class="ml-1"
+      />
     </template>
   `,
 };
@@ -270,32 +425,26 @@ SlotBeforeToggle.args = {
 export const SlotBeforeOption = DefaultTemplate.bind({});
 SlotBeforeOption.args = {
   slotTemplate: `
-    <template #before-option>
-      🤘
+    <template #before-option="{ option, index }">
+      <UBadge v-if="index === 3" label="Special offer!" color="blue" class="mr-1" />
     </template>
   `,
 };
 
-export const LeftIcon = DefaultTemplate.bind({});
-LeftIcon.args = { leftIcon: "star" };
-
-export const RightIcon = DefaultTemplate.bind({});
-RightIcon.args = { rightIcon: "star" };
-
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
+export const SlotOption = DefaultTemplate.bind({});
+SlotOption.args = {
   slotTemplate: `
-    <template #left>
-      🤘
+    <template #option="{ option, index }">
+      <UBadge v-if="index === 1" :label="option.label" />
     </template>
   `,
 };
 
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
+export const SlotAfterOption = DefaultTemplate.bind({});
+SlotAfterOption.args = {
   slotTemplate: `
-    <template #right>
-      🤘
+    <template #after-option="{ option, index }">
+      <UBadge v-if="index === 2" label="Special offer!" color="blue" class="ml-1" />
     </template>
   `,
 };

package/ui.form-select/types.ts

@@ -24,7 +24,7 @@ export interface Props {
   /**
    * Label placement.
    */
-  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+  labelAlign?: "topInside" | "top" | "topWithDesc" | "left" | "right";
 
   /**
    * Select placeholder.