vueless 0.0.153 → 0.0.155

package/composable.adjustElementPosition/index.js

@@ -0,0 +1,98 @@
+import { ref, computed, toValue } from "vue";
+
+export const POSITION = {
+  left: "left",
+  right: "right",
+  top: "top",
+  bottom: "bottom",
+  auto: "auto",
+};
+
+export function useAdjustElementPosition(
+  anchorElement,
+  targetElement,
+  position,
+  preferredPosition,
+) {
+  const preferredOpenDirectionY = ref(preferredPosition?.y || POSITION.bottom);
+  const preferredOpenDirectionX = ref(preferredPosition?.x || POSITION.left);
+
+  const localAnchorElement = computed(() => toValue(anchorElement));
+  const localTargetElement = computed(() => toValue(targetElement));
+  const localPosition = computed(() => toValue(position));
+  const localPreferredPosition = computed(() => toValue(preferredPosition));
+
+  const isTop = computed(() => {
+    if (localPosition.value.y !== POSITION.auto) {
+      return localPosition.value.y === POSITION.top;
+    }
+
+    return preferredOpenDirectionY.value === POSITION.top;
+  });
+
+  const isLeft = computed(() => {
+    if (localPosition.value.x !== POSITION.auto) {
+      return localPosition.value.x === POSITION.left;
+    }
+
+    return preferredOpenDirectionX.value === POSITION.right;
+  });
+
+  const isBottom = computed(() => {
+    if (localPosition.value.y !== POSITION.auto) {
+      return localPosition.value.y === POSITION.bottom;
+    }
+
+    return preferredOpenDirectionY.value === POSITION.bottom;
+  });
+
+  const isRight = computed(() => {
+    if (localPosition.value.x !== POSITION.auto) {
+      return localPosition.value.y === POSITION.right;
+    }
+
+    return preferredOpenDirectionX.value === POSITION.right;
+  });
+
+  function adjustPositionY() {
+    if (typeof window === "undefined") return;
+
+    const spaceAbove = localAnchorElement.value.getBoundingClientRect().top;
+    const spaceBelow = window.innerHeight - localAnchorElement.value.getBoundingClientRect().bottom;
+    const hasEnoughSpaceBelow =
+      spaceBelow > localTargetElement.value.getBoundingClientRect().height;
+    const hasEnoughSpaceAbove =
+      spaceAbove > localTargetElement.value.getBoundingClientRect().height;
+
+    if (localPreferredPosition.value.y === POSITION.top) {
+      preferredOpenDirectionY.value =
+        hasEnoughSpaceBelow || spaceBelow > spaceAbove ? POSITION.bottom : POSITION.top;
+    }
+
+    if (localPreferredPosition.value.y === POSITION.bottom) {
+      preferredOpenDirectionY.value =
+        hasEnoughSpaceAbove || spaceAbove > spaceBelow ? POSITION.top : POSITION.bottom;
+    }
+  }
+
+  function adjustPositionX() {
+    if (typeof window === "undefined") return;
+
+    const spaceRight = localAnchorElement.value.getBoundingClientRect().right;
+    const spaceLeft = window.innerWidth - localAnchorElement.value.getBoundingClientRect().left;
+    const hasEnoughSpaceLeft = spaceLeft > localTargetElement.value.getBoundingClientRect().width;
+    const hasEnoughSpaceRight = spaceRight > localTargetElement.value.getBoundingClientRect().width;
+
+    if (localPreferredPosition.value.x === POSITION.left) {
+      preferredOpenDirectionX.value =
+        hasEnoughSpaceRight || spaceRight > spaceLeft ? POSITION.right : POSITION.left;
+    }
+
+    if (localPreferredPosition.value.x === POSITION.right) {
+      preferredOpenDirectionX.value =
+        hasEnoughSpaceLeft || spaceLeft > spaceRight ? POSITION.left : POSITION.right;
+    }
+  }
+
+  return { isTop, isRight, isBottom, isLeft, adjustPositionY, adjustPositionX };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.153",
+  "version": "0.0.155",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.button-link/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.button-toggle/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.button-toggle-item/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-accordion/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-card/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-divider/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-group/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-groups/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-modal/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-modal-confirm/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-page/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-row/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.data-list/Docs.mdx

@@ -12,5 +12,29 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Configuring items in a list
+You can configure any item in a list by passing the following params.
+
+<Source code={`
+<UDataList :list="list" />
+
+const list = [
+  {
+    id: 1, // unique item identifier
+    label: "Rent", // item label
+    children: [ // nested items
+      { label: "Office", id: 11 },
+      { label: "Shops", id: 12, children: [...] }, // children of subitems
+    ],
+    isHiddenEdit: true, // hide edit button
+    isHiddenDelete: true, // hide delete button
+    isHiddenActions: true, // hide default and custom action buttons
+    isHiddenCustomActions: true, // hide only custom action buttons
+    isDisabledNesting: true, // disable nesting for the item
+  }
+  {...}
+];
+`} language="jsx" dark />
+
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.data-list/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cx } from "../../service.ui";
 
 export function useAttrs(props) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { titleCrossed } = config.value;
+  const { labelCrossed } = config.value;
 
   const wrapperAttrs = getAttrs("wrapper");
   const dividerAttrs = getAttrs("divider", { isComponent: true });
@@ -19,15 +19,16 @@ export function useAttrs(props) {
   const dragIconAttrs = getAttrs("dragIcon", { isComponent: true });
   const nestedAttrs = getAttrs("nested", { isComponent: true });
 
-  const titleRaw = getAttrs("title");
+  const labelAttrsRaw = getAttrs("label");
 
-  const titleAttrs = computed(() => (isActive) => ({
-    ...titleRaw,
-    class: cx([titleRaw.value.class, isActive !== undefined && !isActive ? titleCrossed : ""]),
+  const labelAttrs = computed(() => (isActive) => ({
+    ...labelAttrsRaw,
+    class: cx([labelAttrsRaw.value.class, isActive !== undefined && !isActive ? labelCrossed : ""]),
   }));
 
   return {
     config,
+    hasSlotContent,
     wrapperAttrs,
     dividerAttrs,
     emptyAttrs,
@@ -35,9 +36,8 @@ export function useAttrs(props) {
     nestedAttrs,
     itemWrapperAttrs,
     itemAttrs,
-    titleAttrs,
+    labelAttrs,
     customActionsAttrs,
-    hasSlotContent,
     deleteIconAttrs,
     editIconAttrs,
     dragIconAttrs,

package/ui.data-list/configs/default.config.js

@@ -12,8 +12,8 @@ export default /*tw*/ {
   `,
   dragIcon: "icon-drag cursor-move opacity-100 fill-gray-400 md:fill-gray-500",
   dragIconName: "drag_indicator",
-  title: "text-base font-normal text-gray-900 flex-auto pt-px",
-  titleCrossed: "line-through",
+  label: "text-base font-normal text-gray-900 flex-auto pt-px",
+  labelCrossed: "line-through",
   customActions: `
     space-x-5 opacity-50 md:flex md:items-center md:opacity-0
     group-hover/item:md:block group-hover/item:opacity-100
@@ -24,13 +24,14 @@ export default /*tw*/ {
   editIconName: "edit_note",
   nested: "group/nested ml-6",
   i18n: {
-    delete: "Delete",
     edit: "Edit",
+    delete: "Delete",
+    emptyTitle: "",
+    emptyDescription: "There is no data in the list.",
   },
   defaultVariants: {
     animationDuration: 200,
     nesting: false,
     upperlined: false,
-    hideEmptyStateForNesting: false,
   },
 };

package/ui.data-list/index.stories.js

@@ -2,6 +2,7 @@ import { getArgTypes, getSlotNames } from "../service.storybook";
 
 import UDataList from "../ui.data-list";
 import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
 
 /**
  * The `UDataList` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.data-list)
@@ -13,24 +14,24 @@ export default {
   args: {
     list: [
       {
-        name: "name 1",
+        label: "Salary",
         id: 1,
         children: [
-          { name: "name 1.1", id: 1.1 },
-          { name: "name 1.2", id: 1.2 },
-          { name: "name 1.3", id: 1.3 },
+          { label: "IT", id: 1.1 },
+          { label: "HR", id: 1.2 },
+          { label: "C Level", id: 1.3 },
         ],
       },
       {
-        name: "name 2",
+        label: "Rent",
         id: 2,
         children: [
-          { name: "name 2.1", id: 2.1 },
-          { name: "name 2.2", id: 2.2 },
+          { label: "Office", id: 2.1 },
+          { label: "Shops", id: 2.2 },
         ],
       },
       {
-        name: "name 3",
+        label: "Marketing",
         id: 3,
       },
     ],
@@ -48,7 +49,11 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UDataList v-bind="args" @dragSort="onDragSort"/>
+    <UDataList v-bind="args" @dragSort="onDragSort">
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UDataList>
   `,
   methods: {
     onDragSort(value) {
@@ -58,7 +63,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const SlotTemplate = (args) => ({
-  components: { UDataList, UIcon },
+  components: { UDataList, UIcon, URow },
   setup() {
     return { args };
   },
@@ -77,17 +82,33 @@ const SlotTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const emptyState = DefaultTemplate.bind({});
+emptyState.args = {
+  list: [],
+  emptyTitle: "The list is empty.",
+  emptyDescription: "There is no data in the list.",
+};
+
 export const nesting = DefaultTemplate.bind({});
 nesting.args = { nesting: true };
 
-export const slotIcons = SlotTemplate.bind({});
-slotIcons.args = {
+export const slotLabel = SlotTemplate.bind({});
+slotLabel.args = {
+  slotTemplate: `
+    <template #label="{ item }">
+      <URow gap="xs" align="center">
+        {{ item.label }}
+        <UIcon name="check" color="green" size="sm" />
+      </URow>
+    </template>
+  `,
+};
+
+export const slotActions = SlotTemplate.bind({});
+slotActions.args = {
   slotTemplate: `
-    <template #icons>
-      <UIcon
-        name="star"
-        color="red"
-       />
+    <template #actions>
+      <UIcon interactive name="star" color="red" />
     </template>
   `,
 };

package/ui.data-list/index.vue

@@ -4,8 +4,8 @@
 
     <UEmpty
       v-if="!hideEmptyStateForNesting && !list?.length"
-      :description="emptyDescription"
-      :title="emptyTitle"
+      :title="emptyTitle || currentLocale.emptyTitle"
+      :description="emptyDescription || currentLocale.emptyDescription"
       v-bind="emptyAttrs"
     />
 
@@ -27,19 +27,20 @@
           <div :data-cy="`${dataCy}-item-${element.id}`" v-bind="itemAttrs">
             <UIcon internal :name="config.dragIconName" color="gray" v-bind="dragIconAttrs" />
 
-            <div v-bind="titleAttrs(element.isActive)">
-              <slot :item="element">
-                {{ element.name }}
+            <div v-bind="labelAttrs(element.isActive)">
+              <!-- @slot Use it to modify label. -->
+              <slot name="label" :item="element">
+                {{ element.label }}
               </slot>
             </div>
 
-            <template v-if="!element.isHiddenAction">
+            <template v-if="!element.isHiddenActions">
               <div
-                v-if="hasSlotContent($slots['icons']) && !element.isHiddenCustomActions"
+                v-if="hasSlotContent($slots['actions']) && !element.isHiddenCustomActions"
                 v-bind="customActionsAttrs"
               >
-                <!-- @slot Use it to add icons. -->
-                <slot name="icons" :item="element" />
+                <!-- @slot Use it to add custom actions. -->
+                <slot name="actions" :item="element" />
               </div>
 
               <UIcon
@@ -51,7 +52,7 @@
                 :data-cy="`${dataCy}-delete`"
                 :tooltip="currentLocale.delete"
                 v-bind="deleteIconAttrs"
-                @click="onClickDelete(element.id, element.name)"
+                @click="onClickDelete(element.id, element.label)"
               />
 
               <UIcon
@@ -63,7 +64,7 @@
                 :data-cy="`${dataCy}-edit`"
                 :tooltip="currentLocale.edit"
                 v-bind="editIconAttrs"
-                @click="onClickEdit(element.id)"
+                @click="onClickEdit(element.id, element.label)"
               />
             </template>
           </div>
@@ -82,13 +83,13 @@
           >
             <template #default="{ item }">
               <slot :item="item">
-                <div v-bind="titleAttrs" v-text="item.name" />
+                <div v-bind="labelAttrs" v-text="item.label" />
               </slot>
             </template>
 
-            <template #icons="{ item }">
-              <!-- @slot Use it to add icons. -->
-              <slot name="icons" :item="item" />
+            <template #actions="{ item }">
+              <!-- @slot Use it to add custom actions. -->
+              <slot name="actions" :item="item" />
             </template>
           </UDataList>
         </div>
@@ -132,14 +133,6 @@ const props = defineProps({
     default: "",
   },
 
-  /**
-   * Enables nesting.
-   */
-  nesting: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UDataListName).default.nesting,
-  },
-
   /**
    * Empty state title.
    */
@@ -164,6 +157,14 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UDataListName).default.animationDuration,
   },
 
+  /**
+   * Enables nesting.
+   */
+  nesting: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDataListName).default.nesting,
+  },
+
   /**
    * Add line divider above the list.
    */
@@ -173,12 +174,12 @@ const props = defineProps({
   },
 
   /**
+   * Disable empty state for nested elements if empty (internal props).
    * @ignore
-   * Disable empty state for nested elements if empty (internal prorps).
    */
   hideEmptyStateForNesting: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UDataListName).default.hideEmptyStateForNesting,
+    default: false,
   },
 
   /**
@@ -209,7 +210,7 @@ const {
   nestedAttrs,
   itemWrapperAttrs,
   itemAttrs,
-  titleAttrs,
+  labelAttrs,
   customActionsAttrs,
   deleteIconAttrs,
   editIconAttrs,

package/ui.data-table/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.dropdown-badge/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.dropdown-button/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.dropdown-item/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.dropdown-link/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.dropdown-list/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-calendar/Docs.mdx

@@ -12,7 +12,7 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />
 
 ## Formatting tokens

package/ui.form-checkbox/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-checkbox-group/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-checkbox-multi-state/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-color-picker/Docs.mdx

@@ -12,5 +12,5 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-date-picker/Docs.mdx

@@ -12,7 +12,7 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
+## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />
 
 ## Formatting tokens