Merge branch 'main' into VL-29_UBreadcrumbs-new-component_Vitalii-Dudnik

package.json

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

src/ui.button-link/storybook/stories.ts

@@ -43,7 +43,7 @@ const DefaultTemplate: StoryFn<ULinkArgs> = (args: ULinkArgs) => ({
     return { args, slots };
   },
   template: `
-    <div v-if="args.block" class="border-2 border-dashed border-green-500 p-2">
+    <div v-if="args.block" class="border-2 border-dashed border-green-500 p-2 rounded-dynamic">
       <ULink v-bind="args">
         ${args.slotTemplate || getSlotsFragment("")}
       </ULink>
@@ -153,8 +153,9 @@ export const UnderlineVariants: StoryFn<ULinkArgs> = (args: ULinkArgs, { argType
   setup() {
     const variants = [
       { name: "Default", props: {} },
-      { name: "Underlined", props: { underlined: true } },
       { name: "Dashed", props: { dashed: true } },
+      { name: "Underlined", props: { underlined: true } },
+      { name: "No underline", props: { underlined: false } },
     ];
 
     const colors = argTypes?.color?.options;

src/ui.button-toggle/storybook/stories.ts

@@ -179,7 +179,7 @@ DefaultSlot.args = {
         <UBadge label="Download" color="green" right-icon="download" />
       </UToggleItem>
       <UToggleItem value="2">
-        <UBadge label="Edit" color="amber" right-icon="edit" />
+        <UBadge label="Edit" color="amber" right-icon="edit_note" />
       </UToggleItem>
       <UToggleItem value="3">
         <UBadge label="Delete" color="red" right-icon="delete" />

src/ui.container-modal/config.ts

@@ -34,7 +34,7 @@ export default /*tw*/ {
   footerLeft: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full",
   footerRight: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full justify-end",
   modal: {
-    base: "mx-auto rounded-2xl bg-white",
+    base: "mx-auto rounded-dynamic-lg bg-white",
     variants: {
       size: {
         xs: "md:w-[25rem]",

src/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"

src/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",

src/ui.dropdown-badge/UDropdownBadge.vue

@@ -89,7 +89,7 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
       <template #left>
         <!--
           @slot Use it to add something before the label.
-          @binding {string} label
+          @binding {boolean} opened
         -->
         <slot name="left" :opened="isShownOptions" />
       </template>
@@ -105,10 +105,10 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
 
       <template #right>
         <!--
-          @slot Use it to add something after the label.
+          @slot Use it to add something instead of the toggle icon.
           @binding {boolean} opened
         -->
-        <slot v-if="!noIcon" name="right" :opened="isShownOptions">
+        <slot v-if="!noIcon" name="toggle" :opened="isShownOptions">
           <UIcon
             internal
             color="inherit"
@@ -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"

src/ui.dropdown-badge/storybook/stories.ts

@@ -7,7 +7,9 @@ import {
 
 import UDropdownBadge from "../../ui.dropdown-badge/UDropdownBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -17,7 +19,7 @@ interface DefaultUDropdownBadgeArgs extends Props {
 }
 
 interface EnumUDropdownBadgeArgs extends DefaultUDropdownBadgeArgs {
-  enum: keyof Pick<Props, "color" | "size">;
+  enum: keyof Pick<Props, "color" | "size" | "variant" | "xPosition" | "yPosition">;
 }
 
 export default {
@@ -42,7 +44,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<DefaultUDropdownBadgeArgs> = (args: DefaultUDropdownBadgeArgs) => ({
-  components: { UDropdownBadge, UIcon },
+  components: { UDropdownBadge, UIcon, ULink },
   setup() {
     const slots = getSlotNames(UDropdownBadge.__name);
 
@@ -81,48 +83,106 @@ const EnumVariantTemplate: StoryFn<EnumUDropdownBadgeArgs> = (
   `,
 });
 
+const VariantColorsTemplate: StoryFn<EnumUDropdownBadgeArgs> = (
+  args: EnumUDropdownBadgeArgs,
+  { argTypes },
+) => ({
+  components: { UDropdownBadge, URow, UCol },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant?.options,
+      colors: argTypes.color?.options,
+    };
+  },
+  template: `
+    <UCol>
+      <URow v-for="(variant, index) in variants" :key="index">
+        <UDropdownBadge
+          v-for="(color, index) in colors"
+          :key="index"
+          v-bind="args"
+          :color="color"
+          :variant="variant"
+          :label="color"
+        />
+      </URow>
+    </UCol>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Variants = EnumVariantTemplate.bind({});
+Variants.args = { enum: "variant" };
+
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Colors = EnumVariantTemplate.bind({});
-Colors.args = { enum: "color" };
+export const DropdownListXPosition = EnumVariantTemplate.bind({});
+DropdownListXPosition.args = { enum: "xPosition" };
+
+export const DropdownListYPosition = EnumVariantTemplate.bind({});
+DropdownListYPosition.args = { enum: "yPosition" };
+
+export const VariantColors = VariantColorsTemplate.bind({});
+VariantColors.args = {};
 
 export const WithoutDropdownIcon = DefaultTemplate.bind({});
 WithoutDropdownIcon.args = { noIcon: true };
 
-export const DefaultSlot = DefaultTemplate.bind({});
-DefaultSlot.args = {
-  slotTemplate: `
-    <template #default>
-      Custom label
-    </template>
-  `,
+export const CustomDropdownIcon = DefaultTemplate.bind({});
+CustomDropdownIcon.args = {
+  config: {
+    dropdownIcon: {
+      defaults: {
+        size: "sm",
+      },
+    },
+    defaults: {
+      dropdownIcon: "expand_circle_down",
+    },
+  },
 };
 
-export const LeftSlot = DefaultTemplate.bind({});
-LeftSlot.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="archive"
-        color="red"
-        size="sm"
-      />
-    </template>
+export const Slots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
+  components: { UDropdownBadge, UIcon, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UDropdownBadge v-bind="args" label="Add to favorite">
+        <template #left>
+          <UIcon
+            name="heart_plus"
+            size="xs"
+            color="green"
+            class="mx-1"
+          />
+        </template>
+      </UDropdownBadge>
+
+      <UDropdownBadge v-bind="args" no-icon>
+        <template #default>
+          <UIcon name="unfold_more" color="white" />
+        </template>
+      </UDropdownBadge>
+    </URow>
   `,
-};
+});
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
+export const SlotToggle = DefaultTemplate.bind({});
+SlotToggle.args = {
   slotTemplate: `
-    <template #right>
-      <UIcon
-        name="archive"
-        color="red"
+    <template #toggle="{ opened }">
+      <ULink
+        :label="opened ? 'collapse' : 'expand'"
+        color="green"
         size="sm"
+        :ring=false
+        class="mx-1"
       />
     </template>
   `,

src/ui.dropdown-button/UDropdownButton.vue

@@ -107,7 +107,7 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
 
       <template #right>
         <!--
-          @slot Use it to add something after the label.
+          @slot Use it to add something instead of the toggle icon.
           @binding {boolean} opened
         -->
         <slot v-if="!noIcon" name="toggle" :opened="isShownOptions">
@@ -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"

src/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",

src/ui.dropdown-button/storybook/stories.ts

@@ -152,6 +152,7 @@ DefaultSlot.args = {
     </template>
   `,
   noIcon: true,
+  square: true,
 };
 
 export const LeftSlot = DefaultTemplate.bind({});

src/ui.dropdown-link/UDropdownLink.vue

@@ -106,10 +106,10 @@ const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs,
     </ULink>
 
     <!--
-      @slot Use it to add something after the label.
+      @slot Use it to add something instead of the toggle icon.
       @binding {boolean} opened
     -->
-    <slot name="right" :opened="isShownOptions">
+    <slot name="toggle" :opened="isShownOptions">
       <UIcon
         v-if="!noIcon"
         internal
@@ -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"