vueless 1.1.1-beta.9 → 1.2.0

package/ui.container-page/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UPage from "../../ui.container-page/UPage.vue";
 import UCard from "../../ui.container-card/UCard.vue";
@@ -22,7 +22,7 @@ import UCheckbox from "../../ui.form-checkbox/UCheckbox.vue";
 import UDivider from "../../ui.container-divider/UDivider.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface UPageArgs extends Props {
   slotTemplate?: string;

package/ui.container-page/tests/UPage.test.ts

@@ -4,8 +4,8 @@ import { createRouter, createWebHistory } from "vue-router";
 
 import UPage from "../UPage.vue";
 
-import type { Props } from "../types.ts";
-import type { UnknownObject } from "../../types.ts";
+import type { Props } from "../types";
+import type { UnknownObject } from "../../types";
 
 // Create a mock router for testing router-link functionality
 const router = createRouter({

package/ui.container-page/types.ts

@@ -1,7 +1,7 @@
-import defaultConfig from "./config.ts";
+import defaultConfig from "./config";
 
 import type { RouteLocationRaw } from "vue-router";
-import type { ComponentConfig } from "../types.ts";
+import type { ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 

package/ui.container-row/URow.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
 
-import { COMPONENT_NAME } from "./constants.ts";
-import defaultConfig from "./config.ts";
+import { COMPONENT_NAME } from "./constants";
+import defaultConfig from "./config";
 
-import type { Props, Config } from "./types.ts";
+import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 

package/ui.container-row/storybook/docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-import { getSource } from "../../utils/storybook.ts";
+import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.container-row/storybook/stories.ts

@@ -4,7 +4,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import URow from "../../ui.container-row/URow.vue";
 import UInput from "../../ui.form-input/UInput.vue";
@@ -12,7 +12,7 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface URowArgs extends Props {
   slotTemplate?: string;

package/ui.container-row/tests/URow.test.ts

@@ -3,7 +3,7 @@ import { describe, it, expect } from "vitest";
 
 import URow from "../URow.vue";
 
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 describe("URow.vue", () => {
   // Props tests

package/ui.container-row/types.ts

@@ -1,6 +1,6 @@
-import defaultConfig from "./config.ts";
+import defaultConfig from "./config";
 
-import type { ComponentConfig } from "../types.ts";
+import type { ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 

package/ui.data-list/UDataList.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
-import draggable from "vuedraggable";
+import draggable from "vuedraggable/src/vuedraggable";
 
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
-import { hasSlotContent } from "../utils/helper.ts";
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+import { hasSlotContent } from "../utils/helper";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UEmpty from "../ui.text-empty/UEmpty.vue";
 
-import { COMPONENT_NAME } from "./constants.ts";
-import defaultConfig from "./config.ts";
-import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages.ts";
+import { COMPONENT_NAME } from "./constants";
+import defaultConfig from "./config";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
-import type { Props, DataListItem, Config } from "./types.ts";
+import type { Props, DataListItem, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 

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

@@ -1,8 +1,8 @@
 import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-import { getSource } from "../../utils/storybook.ts";
+import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

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

@@ -4,7 +4,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UDataList from "../../ui.data-list/UDataList.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -14,10 +14,10 @@ import ULink from "../../ui.button-link/ULink.vue";
 import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 import UHeader from "../../ui.text-header/UHeader.vue";
 import ULoader from "../../ui.loader/ULoader.vue";
-import tooltip from "../../directives/tooltip/vTooltip.ts";
+import tooltip from "../../v.tooltip/vTooltip";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props, DataListItem } from "../types.ts";
+import type { Props, DataListItem } from "../types";
 
 interface UDataListArgs extends Props {
   slotTemplate?: string;

package/ui.data-list/tests/UDataList.test.ts

@@ -6,7 +6,7 @@ import UEmpty from "../../ui.text-empty/UEmpty.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import draggable from "vuedraggable";
 
-import type { Props, DataListItem } from "../types.ts";
+import type { Props, DataListItem } from "../types";
 
 describe("UDataList.vue", () => {
   const defaultList: DataListItem[] = [

package/ui.data-list/types.ts

@@ -1,8 +1,8 @@
-import defaultConfig from "./config.ts";
+import defaultConfig from "./config";
 
 import DraggableContext from "vuedraggable";
 
-import type { ComponentConfig, UnknownType } from "../types.ts";
+import type { ComponentConfig, UnknownType } from "../types";
 
 export type Config = typeof defaultConfig;
 

package/ui.data-table/UTable.vue

@@ -18,19 +18,19 @@ import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UTableRow from "./UTableRow.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 
-import useUI from "../composables/useUI.ts";
-import { getDefaults, cx, getMergedConfig } from "../utils/ui.ts";
-import { hasSlotContent } from "../utils/helper.ts";
-import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages.ts";
+import useUI from "../composables/useUI";
+import { getDefaults, cx, getMergedConfig } from "../utils/ui";
+import { hasSlotContent } from "../utils/helper";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
-import defaultConfig from "./config.ts";
-import { normalizeColumns, mapRowColumns, getFlatRows, getRowChildrenIds } from "./utilTable.ts";
+import defaultConfig from "./config";
+import { normalizeColumns, mapRowColumns, getFlatRows, getRowChildrenIds } from "./utilTable";
 
-import { PX_IN_REM } from "../constants.js";
-import { COMPONENT_NAME } from "./constants.ts";
+import { PX_IN_REM } from "../constants";
+import { COMPONENT_NAME } from "./constants";
 
 import type { ComputedRef } from "vue";
-import type { Config as UDividerConfig } from "../ui.container-divider/types.ts";
+import type { Config as UDividerConfig } from "../ui.container-divider/types";
 import type {
   Cell,
   Row,
@@ -40,7 +40,7 @@ import type {
   Config,
   DateDivider,
   FlatRow,
-} from "./types.ts";
+} from "./types";
 
 defineOptions({ inheritAttrs: false });
 
@@ -531,11 +531,15 @@ const {
           :data-test="getDataTest('select-all')"
         />
 
-        <div
-          v-if="localSelectedRows.length"
-          v-bind="stickyHeaderCounterAttrs"
-          v-text="localSelectedRows.length"
-        />
+        <div v-if="localSelectedRows.length" v-bind="stickyHeaderCounterAttrs">
+          <!--
+            @slot Use it to customize header counter.
+            @binding {number} total
+          -->
+          <slot name="header-counter" :total="localSelectedRows.length">
+            {{ localSelectedRows.length }}
+          </slot>
+        </div>
       </div>
 
       <!-- TODO: Remove any when key attrs are typed-->
@@ -657,11 +661,15 @@ const {
                 :data-test="getDataTest('select-all')"
               />
 
-              <div
-                v-if="localSelectedRows.length"
-                v-bind="headerCounterAttrs"
-                v-text="localSelectedRows.length"
-              />
+              <div v-if="localSelectedRows.length" v-bind="headerCounterAttrs">
+                <!--
+                  @slot Use it to customize header counter.
+                  @binding {number} total
+                -->
+                <slot name="header-counter" :total="localSelectedRows.length">
+                  {{ localSelectedRows.length }}
+                </slot>
+              </div>
             </th>
 
             <th

package/ui.data-table/UTableRow.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { computed, onMounted, useTemplateRef } from "vue";
-import { cx } from "../utils/ui.ts";
-import { hasSlotContent, isEmptyValue } from "../utils/helper.ts";
+import { cx } from "../utils/ui";
+import { hasSlotContent, isEmptyValue } from "../utils/helper";
 
-import { PX_IN_REM } from "../constants.js";
-import { mapRowColumns } from "./utilTable.ts";
+import { PX_IN_REM } from "../constants";
+import { mapRowColumns } from "./utilTable";
 
-import { useMutationObserver } from "../composables/useMutationObserver.ts";
-import useUI from "../composables/useUI.ts";
+import { useMutationObserver } from "../composables/useMutationObserver";
+import useUI from "../composables/useUI";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 
-import defaultConfig from "./config.ts";
+import defaultConfig from "./config";
 
-import type { Cell, CellObject, Row, UTableRowProps, Config } from "./types.ts";
+import type { Cell, CellObject, Row, UTableRowProps, Config } from "./types";
 
 const NESTED_ROW_SHIFT_REM = 1.5;
 const LAST_NESTED_ROW_SHIFT_REM = 1;

package/ui.data-table/config.ts

@@ -29,7 +29,7 @@ export default /*tw*/ {
   stickyHeaderLoader: "{ULoaderProgress} absolute top-auto bottom-0",
   headerActionsCheckbox: "{UCheckbox}",
   headerActionsCounter: "{>headerCounterBase} -ml-1.5",
-  tableWrapper: "border border-muted rounded-medium bg-default",
+  tableWrapper: "border border-muted rounded-medium bg-default overflow-x-auto",
   table: "min-w-full border-none text-medium w-full table-auto",
   header:
     "border-b border-muted [&>tr:first-child>*]:first:rounded-tl-medium [&>tr:last-child>*]:last:rounded-tr-medium relative",

package/ui.data-table/storybook/docs.mdx

@@ -1,8 +1,8 @@
 import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-import { getSource } from "../../utils/storybook.ts";
+import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.data-table/storybook/stories.ts

@@ -4,8 +4,8 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
-import { getRandomId } from "../../utils/helper.ts";
+} from "../../utils/storybook";
+import { getRandomId } from "../../utils/helper";
 
 import UTable from "../UTable.vue";
 import UButton from "../../ui.button/UButton.vue";
@@ -16,7 +16,7 @@ import URow from "../../ui.container-row/URow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import ULoader from "../../ui.loader/ULoader.vue";
 
-import type { Row, Props } from "../types.ts";
+import type { Row, Props } from "../types";
 
 interface UTableArgs extends Props {
   slotTemplate?: string;
@@ -474,6 +474,17 @@ DateDividerCustomLabel.parameters = {
   },
 };
 
+export const HeaderCounterSlot = DefaultTemplate.bind({});
+HeaderCounterSlot.args = {
+  selectable: true,
+  config: { headerCellCheckbox: "w-20" },
+  slotTemplate: `
+    <template #header-counter="{ total }">
+      Total: {{ total }}
+    </template>
+  `,
+};
+
 export const HeaderKeySlot = DefaultTemplate.bind({});
 HeaderKeySlot.args = {
   slotTemplate: `

package/ui.data-table/tests/UTable.test.ts

@@ -10,9 +10,9 @@ import UDivider from "../../ui.container-divider/UDivider.vue";
 import {
   LoaderProgressSymbol,
   createLoaderProgress,
-} from "../../ui.loader-progress/useLoaderProgress.ts";
+} from "../../ui.loader-progress/useLoaderProgress";
 
-import type { Column, Row, Props, ColumnObject } from "../types.ts";
+import type { Column, Row, Props, ColumnObject } from "../types";
 
 describe("UTable.vue", () => {
   const defaultColumns: ColumnObject[] = [
@@ -294,6 +294,24 @@ describe("UTable.vue", () => {
   });
 
   describe("Slots", () => {
+    it("Header Counter Slot – renders custom header counter content", () => {
+      const customHeaderCounterContent = "Custom Header Counter";
+
+      const component = mountUTable(
+        getDefaultProps({
+          selectable: true,
+          selectedRows: [defaultRows[0]],
+        }),
+        {
+          slots: {
+            "header-counter": customHeaderCounterContent,
+          },
+        },
+      );
+
+      expect(component.text()).toContain(customHeaderCounterContent);
+    });
+
     it("Header Slot – renders custom header content", () => {
       const customHeaderContent = "Custom Name Header";
 

package/ui.data-table/tests/UTableRow.test.ts

@@ -6,7 +6,7 @@ import UTableRow from "../UTableRow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UCheckbox from "../../ui.form-checkbox/UCheckbox.vue";
 
-import type { FlatRow, ColumnObject, UTableRowAttrs, Config } from "../types.ts";
+import type { FlatRow, ColumnObject, UTableRowAttrs, Config } from "../types";
 
 describe("UTableRow.vue", () => {
   const defaultColumns: ColumnObject[] = [

package/ui.data-table/types.ts

@@ -1,8 +1,8 @@
-import defaultConfig from "./config.ts";
+import defaultConfig from "./config";
 
 import type { Ref } from "vue";
-import type { ComponentConfig, UnknownObject } from "../types.ts";
-import type { Config as UDividerConfig } from "../ui.container-divider/types.ts";
+import type { ComponentConfig, UnknownObject } from "../types";
+import type { Config as UDividerConfig } from "../ui.container-divider/types";
 
 export type Config = typeof defaultConfig;
 

package/ui.data-table/utilTable.ts

@@ -1,4 +1,4 @@
-import type { Column, ColumnObject, FlatRow, Row, RowData, RowId } from "./types.ts";
+import type { Column, ColumnObject, FlatRow, Row, RowData, RowId } from "./types";
 
 export function normalizeColumns(columns: Column[]): ColumnObject[] {
   return columns.map((column) =>

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -2,20 +2,20 @@
 import { ref, computed, nextTick, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UBadge from "../ui.text-badge/UBadge.vue";
 import UListbox from "../ui.form-listbox/UListbox.vue";
 
-import { vClickOutside } from "../directives";
+import vClickOutside from "../v.click-outside/vClickOutside";
 
-import defaultConfig from "./config.ts";
-import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config";
+import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types.ts";
-import type { Option, SelectedValue } from "../ui.form-listbox/types.ts";
+import type { Props, Config } from "./types";
+import type { Option, SelectedValue } from "../ui.form-listbox/types";
 
 defineOptions({ inheritAttrs: false });
 

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

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-import { getSource } from "../../utils/storybook.ts";
+import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

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

@@ -4,7 +4,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UDropdownBadge from "../../ui.dropdown-badge/UDropdownBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
@@ -15,7 +15,7 @@ import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface DefaultUDropdownBadgeArgs extends Props {
   slotTemplate?: string;

package/ui.dropdown-badge/tests/UDropdownBadge.test.ts

@@ -6,7 +6,7 @@ import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UListbox from "../../ui.form-listbox/UListbox.vue";
 
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 describe("UDropdownBadge.vue", () => {
   const defaultOptions = [

package/ui.dropdown-badge/types.ts

@@ -1,7 +1,7 @@
-import defaultConfig from "./config.ts";
+import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types.ts";
-import type { ComponentConfig, UnknownObject } from "../types.ts";
+import type { Option } from "../ui.form-listbox/types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 

package/ui.dropdown-button/UDropdownButton.vue

@@ -2,20 +2,20 @@
 import { nextTick, computed, provide, ref, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
 import UListbox from "../ui.form-listbox/UListbox.vue";
 
-import { vClickOutside } from "../directives";
+import vClickOutside from "../v.click-outside/vClickOutside";
 
-import defaultConfig from "./config.ts";
-import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config";
+import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types.ts";
-import type { Option, SelectedValue } from "../ui.form-listbox/types.ts";
+import type { Props, Config } from "./types";
+import type { Option, SelectedValue } from "../ui.form-listbox/types";
 
 defineOptions({ inheritAttrs: false });
 
@@ -173,6 +173,7 @@ const { getDataTest, config, dropdownButtonAttrs, listboxAttrs, toggleIconAttrs,
       :label="buttonLabel"
       :size="size"
       :color="color"
+      :block="block"
       :round="round"
       :square="square"
       :variant="variant"

package/ui.dropdown-button/config.ts

@@ -1,5 +1,12 @@
 export default /*tw*/ {
-  wrapper: "relative inline-block h-max",
+  wrapper: {
+    base: "relative inline-block h-max",
+    variants: {
+      block: {
+        true: "w-full",
+      },
+    },
+  },
   dropdownButton: "{UButton} justify-between",
   toggleIcon: {
     base: "{UIcon} transition duration-300 -mr-1",
@@ -48,6 +55,7 @@ export default /*tw*/ {
     xPosition: "left",
     searchable: false,
     round: false,
+    block: false,
     square: false,
     disabled: false,
     multiple: false,

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

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-import { getSource } from "../../utils/storybook.ts";
+import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.ts";
-import defaultConfig from "../config.ts?raw"
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

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

@@ -4,7 +4,7 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-} from "../../utils/storybook.ts";
+} from "../../utils/storybook";
 
 import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
 import URow from "../../ui.container-row/URow.vue";
@@ -14,7 +14,7 @@ import ULink from "../../ui.button-link/ULink.vue";
 import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import type { Props } from "../types.ts";
+import type { Props } from "../types";
 
 interface DefaultUDropdownButtonArgs extends Props {
   slotTemplate?: string;
@@ -167,7 +167,7 @@ export const ListboxXPosition = EnumTemplate.bind({});
 ListboxXPosition.args = {
   enum: "xPosition",
   label: "{enumValue}",
-  class: "w-40",
+  block: true,
 };
 
 export const ListboxYPosition = EnumTemplate.bind({});