vueless 0.0.685 → 0.0.687

package/package.json

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

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -124,6 +124,7 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
       v-if="isShownOptions"
       ref="dropdown-list"
       :size="size"
+      :color="color"
       :options="options"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"

package/ui.dropdown-button/UDropdownButton.vue

@@ -125,6 +125,7 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
     <UDropdownList
       v-if="isShownOptions"
       ref="dropdown-list"
+      :color="color"
       :options="options"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"

package/ui.dropdown-button/config.ts

@@ -38,7 +38,7 @@ export default /*tw*/ {
       size: {
         "2xs": "sm",
         xs: "sm",
-        sm: "sm",
+        sm: "md",
         md: "md",
         lg: "lg",
         xl: "lg",

package/ui.dropdown-link/UDropdownLink.vue

@@ -126,6 +126,7 @@ const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs,
       v-if="isShownOptions"
       ref="dropdown-list"
       :size="size"
+      :color="color"
       :options="options"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"

package/ui.dropdown-list/UDropdownList.vue

@@ -8,6 +8,7 @@ import { isMac } from "../utils/platform.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
+import UDivider from "../ui.container-divider/UDivider.vue";
 
 import usePointer from "./usePointer.ts";
 import { useLocale } from "../composables/useLocale.ts";
@@ -136,7 +137,7 @@ function onClickAddOption() {
 }
 
 function isMetaKey(key: string) {
-  return ["isSubGroup", "groupLabel", "level", "isHidden", "onClick"].includes(key);
+  return ["isSubGroup", "groupLabel", "level", "isHidden", "onClick", "divider"].includes(key);
 }
 
 function select(option: Option, keyCode?: string) {
@@ -261,6 +262,7 @@ const {
   subGroupAttrs,
   groupAttrs,
   optionContentAttrs,
+  optionDividerAttrs,
 } = useUI<Config>(defaultConfig);
 </script>
 
@@ -285,9 +287,14 @@ const {
         :role="!(option && option.groupLabel) ? 'option' : undefined"
         :data-group-label="Boolean(option.groupLabel)"
       >
+        <UDivider v-if="option.divider" padding="none" v-bind="optionDividerAttrs" />
         <!-- option title -->
         <span
-          v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
+          v-if="
+            !(option && (option.groupLabel || option.isSubGroup)) &&
+            !option.isHidden &&
+            !option.divider
+          "
           v-bind="isSelectedOption(option) ? optionActiveAttrs : optionAttrs"
           :data-test="`${dataTest}-option`"
           :class="optionHighlight(index, option)"

package/ui.dropdown-list/config.ts

@@ -11,7 +11,7 @@ export default /*tw*/ {
     base: `
       rounded-dynamic-sm px-2 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
       font-normal !leading-none text-gray-900
-      hover:bg-brand-50 active:bg-brand-100
+      hover:bg-{color}-50 active:bg-{color}-100
       overflow-hidden text-ellipsis
     `,
     variants: {
@@ -21,12 +21,12 @@ export default /*tw*/ {
         lg: "text-base",
       },
       disabled: {
-        true: "pointer-events-none",
+        true: "pointer-events-none text-gray-400",
       },
     },
   },
-  optionActive: "{>option} font-semibold bg-brand-100 hover:bg-brand-100 text-brand-600",
-  optionHighlighted: "bg-brand-50",
+  optionActive: "{>option} font-semibold bg-{color}-100 hover:bg-{color}-100 text-brand-600",
+  optionHighlighted: "bg-{color}-50",
   optionContent: "overflow-visible text-ellipsis",
   groupBase: {
     base: "px-2 pb-2.5 font-medium !leading-none text-gray-400 overflow-hidden text-ellipsis",
@@ -50,11 +50,13 @@ export default /*tw*/ {
   addOptionLabelHotkey: "text-gray-500",
   addOptionButton: "{UButton} !leading-none sticky left-[calc(100%-2.15rem)] bottom-2 p-1",
   addOptionIcon: "{UIcon} bg-transparent",
+  optionDivider: "{UDivider}",
   i18n: {
     noDataToShow: "No data to show.",
     add: "Add",
   },
   defaults: {
+    color: "brand",
     size: "md",
     labelKey: "label",
     valueKey: "id",

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

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.ts";
@@ -12,5 +12,23 @@ import defaultConfig from "../config.ts?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+## Row meta keys
+Keys you may/have to provide to component in an option object.
+
+<Markdown>
+{`
+|  Key name         | Description                        | Type           |
+| ------------------| ---------------------------------- | ---------------|
+| id                | A unique identifier for option     | String, Number |
+| label             | Option label                       | String         |
+| isHidden          | Indicates if option is hidden      | Boolean        |
+| isSubGroup        | Indicates if option is subGroup    | Boolean        |
+| groupLabel        | Option group label                 | String         |
+| level             | Indicates option nesting level     | Number         |
+| divider           | Adds divider instead of option     | Boolean        |
+| onClick           | Option event handler               | Function       |        
+`}
+</Markdown>
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.dropdown-list/storybook/stories.ts

@@ -16,7 +16,7 @@ interface DefaultUDropdownListArgs extends Props {
 }
 
 interface EnumUDropdownListArgs extends DefaultUDropdownListArgs {
-  enum: keyof Pick<Props, "size">;
+  enum: keyof Pick<Props, "size" | "color">;
 }
 
 export default {
@@ -25,9 +25,11 @@ export default {
   component: UDropdownList,
   args: {
     options: [
-      { label: "option 1", id: "1" },
-      { label: "option 2", id: "2" },
-      { label: "option 3", id: "3" },
+      { label: "New York", id: "1" },
+      { label: "Los Angeles", id: "2" },
+      { label: "Chicago", id: "3" },
+      { label: "Houston", id: "4" },
+      { label: "San Francisco", id: "5" },
     ],
   },
   argTypes: {
@@ -37,7 +39,7 @@ export default {
     docs: {
       ...getDocsDescription(UDropdownList.__name),
       story: {
-        height: "180px",
+        height: "250px",
       },
     },
   },
@@ -48,10 +50,16 @@ const DefaultTemplate: StoryFn<DefaultUDropdownListArgs> = (args: DefaultUDropdo
   setup() {
     const slots = getSlotNames(UDropdownList.__name);
 
-    return { args, slots };
+    const showAlert = (message: string) => alert(message);
+
+    return { args, slots, showAlert };
   },
   template: `
-    <UDropdownList v-bind="args" class="mx-4 w-[24rem]">
+    <UDropdownList
+      v-bind="args"
+      class="mx-4 w-[24rem]"
+      @add="showAlert('You triggered the add action!')"
+    >
       ${args.slotTemplate || getSlotsFragment("")}
     </UDropdownList>
   `,
@@ -69,27 +77,51 @@ const EnumVariantTemplate: StoryFn<EnumUDropdownListArgs> = (
     };
   },
   template: `
-    <div class="flex flex-col gap-6">
-      <URow>
+      <URow class="w-fit">
         <UDropdownList
           v-for="(option, index) in options"
           :key="index"
           v-bind="args"
           :[args.enum]="option"
+          class="static w-36"
         />
       </URow>
-    </div>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+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 Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = { enum: "color", modelValue: "2" };
+
 export const VisibleOptions = DefaultTemplate.bind({});
 VisibleOptions.args = { visibleOptions: 3 };
+VisibleOptions.parameters = {
+  docs: {
+    description: {
+      story: "`visibleOptions` prop regulates number of options to show without a scroll.",
+    },
+  },
+};
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
 
 export const WithoutOptions = DefaultTemplate.bind({});
 WithoutOptions.args = { options: [] };
@@ -111,16 +143,54 @@ GroupedOptions.args = {
     { name: "Phoenix" },
   ],
 };
+GroupedOptions.parameters = {
+  docs: {
+    story: {
+      height: "500px",
+    },
+  },
+};
+
+export const Divider = DefaultTemplate.bind({});
+Divider.args = {
+  options: [
+    { label: "North America", id: "1" },
+    { label: "South America", id: "2" },
+    { divider: true },
+    { label: "Europe", id: "3" },
+    { divider: true },
+    { label: "Asia", id: "4" },
+  ],
+};
+Divider.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "In addition to grouping options, you can insert a divider between specific items by adding an object with a single `divider: true` property.",
+    },
+  },
+};
 
 export const OptionSettings = DefaultTemplate.bind({});
 OptionSettings.args = {
   options: [
-    { label: "option 1", id: "1" },
-    { label: "option 2", id: "2", isHidden: true },
+    { label: "New York", id: "1" },
+    { label: "Los Angeles", id: "2", isHidden: true },
     {
-      label: "option 3",
+      label: "Chicago",
       id: "3",
-      onClick: (option: Option) => alert("onClick option 3 " + JSON.stringify(option)),
+      onClick: (option: Option) =>
+        alert("onClick function for the third option: " + JSON.stringify(option)),
     },
   ],
 };
+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))`",
+    },
+  },
+};

package/ui.dropdown-list/types.ts

@@ -47,6 +47,32 @@ export interface Props {
    */
   size?: "sm" | "md" | "lg";
 
+  /**
+   * Option highlight color.
+   */
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
+
   /**
    * Number of options to show without a scroll.
    */

package/utils/node/loaderIcon.js

@@ -189,7 +189,7 @@ async function findAndCopyIcons(files) {
       const iconName = groupMatch ? groupMatch[3] : null;
 
       try {
-        if (!iconName) return;
+        if (!iconName) continue;
 
         if (iconName?.includes("?") && iconName?.includes(":")) {
           const [trueName, falseName] = getTernaryValues(iconName);