vueless 0.0.684 → 0.0.686

package/package.json

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

package/ui.data-table/UTable.vue

@@ -406,6 +406,20 @@ function onToggleExpand(row: Row, expanded: boolean) {
   }
 }
 
+function isRowSelectedWithin(rowIndex: number) {
+  const prevRow = sortedRows.value[rowIndex - 1];
+  const isPrevRowSelected = prevRow && selectedRows.value.find((rowId) => rowId === prevRow.id);
+  const isRowsSelected = selectedRows.value.find(
+    (rowId) => rowId === sortedRows.value[rowIndex].id,
+  );
+
+  if (prevRow) {
+    return isPrevRowSelected && isRowsSelected;
+  }
+
+  return isRowsSelected;
+}
+
 defineExpose({
   /**
    * Allows to clear selected rows.
@@ -438,6 +452,7 @@ const {
   bodyRowBeforeCellAttrs,
   footerAttrs,
   bodyRowDateDividerAttrs,
+  bodyRowCheckedDateDividerAttrs,
   headerCellBaseAttrs,
   headerCellCheckboxAttrs,
   headerActionsCheckboxAttrs,
@@ -446,6 +461,7 @@ const {
   headerCounterAttrs,
   bodyEmptyStateAttrs,
   bodyDateDividerAttrs,
+  bodySelectedDateDividerAttrs,
   bodyCellDateDividerAttrs,
   headerActionsCounterAttrs,
   stickyHeaderCounterAttrs,
@@ -666,7 +682,10 @@ const {
               </td>
             </tr>
 
-            <tr v-if="isShownDateDivider(rowIndex) && row.rowDate" v-bind="bodyRowDateDividerAttrs">
+            <tr
+              v-if="isShownDateDivider(rowIndex) && !isRowSelectedWithin(rowIndex) && row.rowDate"
+              v-bind="bodyRowDateDividerAttrs"
+            >
               <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
                 <UDivider
                   size="xs"
@@ -676,6 +695,19 @@ const {
               </td>
             </tr>
 
+            <tr
+              v-if="isShownDateDivider(rowIndex) && isRowSelectedWithin(rowIndex) && row.rowDate"
+              v-bind="bodyRowCheckedDateDividerAttrs"
+            >
+              <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
+                <UDivider
+                  size="xs"
+                  :label="getDateDividerLabel(row.rowDate)"
+                  v-bind="bodySelectedDateDividerAttrs"
+                />
+              </td>
+            </tr>
+
             <UTableRow
               v-model:selected-rows="selectedRows"
               :selectable="selectable"

package/ui.data-table/config.ts

@@ -50,6 +50,7 @@ export default /*tw*/ {
   bodyRowBeforeCell: "{>bodyCellBase} py-1",
   bodyRowAfter: "!p-0",
   bodyRowDateDivider: "",
+  bodyRowCheckedDateDivider: "{>bodyRowChecked} {>bodyRowChecked}",
   bodyCellBase: {
     base: "p-4 truncate align-top",
     variants: {
@@ -78,6 +79,10 @@ export default /*tw*/ {
     base: "{UDivider}",
     label: "py-0",
   },
+  bodySelectedDateDivider: {
+    base: "{>bodyDateDivider}",
+    label: "bg-gray-200 transition",
+  },
   bodyEmptyState: "{UEmpty} my-8",
   footer: {
     base: "group/footer border-t border-solid border-gray-200",

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.
    */