vueless 0.0.327 → 0.0.329

package/ui.container-page/{index.stories.js → storybook/stories.js}

@@ -1,13 +1,13 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UPage from "../ui.container-page";
-import UCard from "../ui.container-card";
-import URow from "../ui.container-row";
-import UInput from "../ui.form-input";
-import UTextarea from "../ui.form-textarea";
-import UButton from "../ui.button";
-import UIcon from "../ui.image-icon";
-import UHeader from "../ui.text-header";
+import UPage from "../../ui.container-page/UPage.vue";
+import UCard from "../../ui.container-card/UCard.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UInput from "../../ui.form-input/UInput.vue";
+import UTextarea from "../../ui.form-textarea/UTextarea.vue";
+import UButton from "../../ui.button/UButton.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UHeader from "../../ui.text-header/UHeader.vue";
 
 /**
  * The `UPage` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-page)
@@ -21,7 +21,7 @@ export default {
     gray: true,
   },
   argTypes: {
-    ...getArgTypes(UPage.name),
+    ...getArgTypes(UPage.__name),
   },
 };
 
@@ -47,7 +47,7 @@ const DefaultTemplate = (args) => ({
     UHeader,
   },
   setup() {
-    const slots = getSlotNames(UPage.name);
+    const slots = getSlotNames(UPage.__name);
 
     return { args, slots };
   },

package/ui.container-page/{composables/attrs.composable.js → useAttrs.js}

@@ -1,8 +1,8 @@
-import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
-import { isMobileApp } from "../../service.platform";
+import useUI from "../composables/useUI.js";
+import { cva, cx } from "../utils/utilUI.js";
+import { isMobileApp } from "../utils/utilPlatform.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props, { isMobileBreakpoint }) {

package/ui.container-row/{index.vue → URow.vue}

@@ -6,14 +6,13 @@
 </template>
 
 <script setup>
-import { getDefault } from "../service.ui";
+import { getDefault } from "../utils/utilUI.js";
 
-import { URow } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { URow } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "URow", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

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

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-row/{index.stories.js → storybook/stories.js}

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import URow from "../ui.container-row";
-import UInput from "../ui.form-input";
-import UCol from "../ui.container-col";
-import UButton from "../ui.button";
+import URow from "../../ui.container-row/URow.vue";
+import UInput from "../../ui.form-input/UInput.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UButton from "../../ui.button/UButton.vue";
 
 /**
  * The `URow` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-row)
@@ -13,7 +13,7 @@ export default {
   title: "Containers / Row",
   component: URow,
   argTypes: {
-    ...getArgTypes(URow.name),
+    ...getArgTypes(URow.__name),
   },
 };
 
@@ -25,7 +25,7 @@ const defaultTemplate = `
 const DefaultTemplate = (args) => ({
   components: { URow, UInput, UButton },
   setup() {
-    const slots = getSlotNames(URow.name);
+    const slots = getSlotNames(URow.__name);
 
     return { args, slots };
   },

package/{ui.form-checkbox-group/composables/attrs.composable.js → ui.container-row/useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
+import useUI from "../composables/useUI.js";
+import defaultConfig from "./config.js";
+import { cva } from "../utils/utilUI.js";
 import { computed } from "vue";
-import { cva } from "../../service.ui";
-import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
   const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(

package/ui.data-list/{index.vue → UDataList.vue}

@@ -138,18 +138,17 @@ import { computed } from "vue";
 import draggable from "vuedraggable";
 import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
-import UEmpty from "../ui.text-empty";
-import UDivider from "../ui.container-divider";
-import { getDefault } from "../service.ui";
-
-import { UDataList as UDataListName } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
-import { useLocale } from "../composable.locale";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDataList", inheritAttrs: true });
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UEmpty from "../ui.text-empty/UEmpty.vue";
+import UDivider from "../ui.container-divider/UDivider.vue";
+import { getDefault } from "../utils/utilUI.js";
+
+import { UDataList as UDataListName } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
+import { useLocale } from "../composables/useLocale.js";
+
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.data-list/{Docs.mdx → storybook/Docs.mdx}

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

package/ui.data-list/{index.stories.js → storybook/stories.js}

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UDataList from "../ui.data-list";
-import UIcon from "../ui.image-icon";
-import UButton from "../ui.button";
-import URow from "../ui.container-row";
+import UDataList from "../../ui.data-list/UDataList.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UButton from "../../ui.button/UButton.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 /**
  * The `UDataList` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.data-list)
@@ -38,7 +38,7 @@ export default {
     ],
   },
   argTypes: {
-    ...getArgTypes(UDataList.name),
+    ...getArgTypes(UDataList.__name),
   },
 };
 
@@ -49,7 +49,7 @@ const DefaultTemplate = (args) => ({
       this.list = value;
     }
 
-    const slots = getSlotNames(UDataList.name);
+    const slots = getSlotNames(UDataList.__name);
 
     return { args, slots, onDragSort };
   },

package/ui.data-list/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import defaultConfig from "../configs/default.config";
+import useUI from "../composables/useUI.js";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
-import { cva, cx } from "../../service.ui";
+import { cva, cx } from "../utils/utilUI.js";
 
 export default function useAttrs(props) {
   const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(

package/ui.data-table/{components/TableRow.vue → TableRow.vue}

@@ -46,7 +46,6 @@
           <div
             v-bind="attrs.bodyCellPrimaryAttrs"
             ref="cellRef"
-            :title="isElementOverflown(cellRef?.[index]) ? value.primary : ''"
             :data-test="`${dataTest}-${key}-cell`"
           >
             {{ value.primary || HYPHEN_SYMBOL }}
@@ -54,23 +53,14 @@
 
           <div v-bind="attrs.bodyCellSecondaryAttrs">
             <template v-if="Array.isArray(value.secondary)">
-              <div
-                v-for="(secondary, idx) in value.secondary"
-                ref="cellRef"
-                :key="idx"
-                :title="isElementOverflown(cellRef?.[index]) ? value.secondary : ''"
-              >
+              <div v-for="(secondary, idx) in value.secondary" ref="cellRef" :key="idx">
                 <span v-bind="attrs.bodyCellSecondaryEmptyAttrs">
                   {{ secondary }}
                 </span>
               </div>
             </template>
 
-            <div
-              v-else
-              ref="cellRef"
-              :title="isElementOverflown(cellRef?.[index]) ? value.secondary : ''"
-            >
+            <div v-else ref="cellRef">
               {{ value.secondary }}
             </div>
           </div>
@@ -82,7 +72,6 @@
           <div
             v-bind="attrs.bodyCellPrimaryAttrs"
             ref="cellRef"
-            :title="isElementOverflown(cellRef?.[index]) ? value : ''"
             :data-test="`${dataTest}-${key}-cell`"
           >
             {{ value || value === 0 ? value : HYPHEN_SYMBOL }}
@@ -109,45 +98,52 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 
-import { HYPHEN_SYMBOL } from "../../constants";
-import { getFilteredRow } from "../services/table.service.js";
+import { HYPHEN_SYMBOL } from "../constants.js";
+import { getFilteredRow } from "./utilTable.js";
 
-import { useMutationObserver } from "../../composable.mutationObserver/index.js";
+import { useMutationObserver } from "../composables/useMutationObserver.js";
 
-import UIcon from "../../ui.image-icon";
-import UCheckbox from "../../ui.form-checkbox";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 
 const props = defineProps({
   row: {
     type: Object,
     required: true,
   },
+
   columns: {
     type: Array,
     required: true,
   },
+
   tag: {
     type: String,
     default: "tr",
   },
+
   selectable: {
     type: Boolean,
     default: false,
   },
+
   nestedLevel: {
     type: Number,
     default: 0,
   },
+
   dataTest: {
     type: String,
     required: true,
   },
+
   attrs: {
     type: Object,
     required: true,
   },
+
   config: {
     type: Object,
     required: true,
@@ -158,7 +154,7 @@ const emit = defineEmits(["toggleRowVisibility", "click"]);
 
 const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
 
-const cellRef = ref(null);
+const cellRef = ref([]);
 
 useMutationObserver(cellRef, setCellTitle, { childList: true });
 
@@ -170,6 +166,10 @@ const toggleIconConfig = computed(() =>
 
 const shift = computed(() => (props.row.row ? 1.5 : 2));
 
+onMounted(() => {
+  cellRef.value.forEach(setElementTitle);
+});
+
 function getCellClasses(key, row, cellIndex) {
   const isNestedRow = (row.row || props.nestedLevel) && cellIndex === 0;
 
@@ -196,21 +196,23 @@ function setCellTitle(mutations) {
   mutations.forEach((mutation) => {
     const { target } = mutation;
 
-    const isOverflown = isElementOverflown(target);
-
-    if (isOverflown) {
-      target.setAttribute("title", target.textContent);
-    }
-
-    if (!isOverflown && target.hasAttribute("title")) {
-      target.removeAttribute("title");
-    }
+    setElementTitle(target);
   });
 }
 
 function isElementOverflown(element) {
-  if (!cellRef.value) return false;
-
   return element.clientWidth < element.scrollWidth || element.clientHeight < element.scrollHeight;
 }
+
+function setElementTitle(element) {
+  const isOverflown = isElementOverflown(element);
+
+  if (isOverflown) {
+    element.setAttribute("title", element.textContent);
+  }
+
+  if (!isOverflown && element.hasAttribute("title")) {
+    element.removeAttribute("title");
+  }
+}
 </script>

package/ui.data-table/{index.vue → UTable.vue}

@@ -178,7 +178,7 @@
 
             <TableRow
               v-bind="bodyRowAttrs(getRowClasses(row))"
-              v-model:selectedRows="selectedRows"
+              v-model:selected-rows="selectedRows"
               :selectable="selectable"
               :data-test="`${dataTest}-row`"
               :row="row"
@@ -274,15 +274,15 @@ import {
 } from "vue";
 import { merge } from "lodash-es";
 
-import UEmpty from "../ui.text-empty";
-import UDivider from "../ui.container-divider";
-import UCheckbox from "../ui.form-checkbox";
-import ULoaderTop from "../ui.loader-top";
-import TableRow from "./components/TableRow";
+import UEmpty from "../ui.text-empty/UEmpty.vue";
+import UDivider from "../ui.container-divider/UDivider.vue";
+import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
+import ULoaderTop from "../ui.loader-top/ULoaderTop.vue";
+import TableRow from "./TableRow.vue";
 
-import { getDefault } from "../service.ui";
+import { getDefault } from "../utils/utilUI.js";
 
-import defaultConfig from "./configs/default.config";
+import defaultConfig from "./config.js";
 import {
   normalizeColumns,
   getFilteredRow,
@@ -290,15 +290,14 @@ import {
   toggleRowVisibility,
   switchRowCheck,
   getFlatRows,
-} from "./services/table.service";
+} from "./utilTable.js";
 
-import { PX_IN_REM } from "../constants";
-import { UTable } from "./constants";
-import useAttrs from "./composables/attrs.composable";
-import { useLocale } from "../composable.locale";
+import { PX_IN_REM } from "../constants.js";
+import { UTable } from "./constants.js";
+import useAttrs from "./useAttrs.js";
+import { useLocale } from "../composables/useLocale.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UTable", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

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

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.data-table/{index.stories.js → storybook/stories.js}

@@ -1,12 +1,12 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
-import { getRandomId } from "../service.ui";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import { getRandomId } from "../../utils/utilUI.js";
 
-import UTable from "../ui.data-table";
-import UButton from "../ui.button";
-import ULink from "../ui.button-link";
-import UMoney from "../ui.text-money";
-import UBadge from "../ui.text-badge";
-import URow from "../ui.container-row";
+import UTable from "../../ui.data-table/UTable.vue";
+import UButton from "../../ui.button/UButton.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+import UMoney from "../../ui.text-money/UMoney.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 const STICKY_PARAMETERS = {
   docs: {
@@ -25,7 +25,7 @@ export default {
   title: "Data / Table",
   component: UTable,
   argTypes: {
-    ...getArgTypes(UTable.name),
+    ...getArgTypes(UTable.__name),
     row: {
       description:
         "The row of the table. It's not a prop (it created for ease of work with storybook).",
@@ -159,7 +159,7 @@ function getRow() {
 const DefaultTemplate = (args) => ({
   components: { UTable, UButton, ULink, UMoney, UBadge, URow },
   setup() {
-    const slots = getSlotNames(UTable.name);
+    const slots = getSlotNames(UTable.__name);
 
     return { args, slots };
   },
@@ -187,7 +187,7 @@ const DefaultTemplate = (args) => ({
 const EmptyTemplate = (args) => ({
   components: { UTable },
   setup() {
-    const slots = getSlotNames(UTable.name);
+    const slots = getSlotNames(UTable.__name);
 
     return { args, slots };
   },

package/ui.data-table/{composables/attrs.composable.js → useAttrs.js}

@@ -1,6 +1,6 @@
-import useUI from "../../composable.ui";
-import defaultConfig from "../configs/default.config";
-import { cva, cx } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import defaultConfig from "./config.js";
+import { cva, cx } from "../utils/utilUI.js";
 import { computed } from "vue";
 
 export default function useAttrs(

package/ui.dropdown-badge/{index.vue → UDropdownBadge.vue}

@@ -66,20 +66,19 @@
 <script setup>
 import { provide, ref, watch } from "vue";
 
-import UIcon from "../ui.image-icon";
-import UBadge from "../ui.text-badge";
-import UDropdownList from "../ui.dropdown-list";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UBadge from "../ui.text-badge/UBadge.vue";
+import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
-import { getRandomId, getDefault } from "../service.ui";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import vClickOutside from "../directive.clickOutside";
+import vClickOutside from "../directives/vClickOutside.js";
 
-import defaultConfig from "./configs/default.config";
-import { UDropdownBadge } from "./constants";
-import useAttrs from "./composables/attrs.composable";
+import defaultConfig from "./config.js";
+import { UDropdownBadge } from "./constants.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDropdownBadge", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

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

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.dropdown-badge/{index.stories.js → storybook/stories.js}

@@ -1,8 +1,8 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UDropdownBadge from "../ui.dropdown-badge";
-import URow from "../ui.container-row";
-import UIcon from "../ui.image-icon";
+import UDropdownBadge from "../../ui.dropdown-badge/UDropdownBadge.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 /**
  * The `UDropdownBadge` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.dropdown-badge)
@@ -20,7 +20,7 @@ export default {
     ],
   },
   argTypes: {
-    ...getArgTypes(UDropdownBadge.name),
+    ...getArgTypes(UDropdownBadge.__name),
   },
   parameters: {
     docs: {
@@ -34,7 +34,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UDropdownBadge, UIcon },
   setup() {
-    const slots = getSlotNames(UDropdownBadge.name);
+    const slots = getSlotNames(UDropdownBadge.__name);
 
     return { args, slots };
   },

package/ui.dropdown-badge/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva, cx } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props, { isShownOptions }) {

package/ui.dropdown-button/{index.vue → UDropdownButton.vue}

@@ -68,20 +68,19 @@
 <script setup>
 import { computed, provide, ref, watch } from "vue";
 
-import UIcon from "../ui.image-icon";
-import UButton from "../ui.button";
-import UDropdownList from "../ui.dropdown-list";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UButton from "../ui.button/UButton.vue";
+import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
-import { getRandomId, getDefault } from "../service.ui";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import vClickOutside from "../directive.clickOutside";
+import vClickOutside from "../directives/vClickOutside.js";
 
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
-import { UDropdownButton, BUTTON_VARIANT } from "./constants";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
+import { UDropdownButton, BUTTON_VARIANT } from "./constants.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UDropdownButton", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

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

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />