vueless 0.0.154 → 0.0.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.154",
+  "version": "0.0.156",
   "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,15 @@ 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,
+    labelKey: "label",
     nesting: false,
     upperlined: false,
-    hideEmptyStateForNesting: false,
   },
 };

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

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UDataListName = "UDataList";
+export const UDataList = "UDataList";

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[labelKey] }}
               </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[labelKey])"
               />
 
               <UIcon
@@ -63,7 +64,7 @@
                 :data-cy="`${dataCy}-edit`"
                 :tooltip="currentLocale.edit"
                 v-bind="editIconAttrs"
-                @click="onClickEdit(element.id)"
+                @click="onClickEdit(element.id, element[labelKey])"
               />
             </template>
           </div>
@@ -80,15 +81,15 @@
             @click-edit="onClickEdit"
             @drag-sort="onDragEnd"
           >
-            <template #default="{ item }">
-              <slot :item="item">
-                <div v-bind="titleAttrs" v-text="item.name" />
+            <template #label="{ item }">
+              <slot name="label" :item="item">
+                <div v-bind="labelAttrs" v-text="item[labelKey]" />
               </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>
@@ -107,7 +108,7 @@ import UEmpty from "../ui.text-empty";
 import UDivider from "../ui.container-divider";
 import UIService from "../service.ui";
 
-import { UDataListName } from "./constants";
+import { UDataList as UDataListName } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
@@ -133,11 +134,11 @@ const props = defineProps({
   },
 
   /**
-   * Enables nesting.
+   * Label key in the item object of options.
    */
-  nesting: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UDataListName).default.nesting,
+  labelKey: {
+    type: String,
+    default: UIService.get(defaultConfig, UDataListName).default.labelKey,
   },
 
   /**
@@ -164,6 +165,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 +182,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 +218,7 @@ const {
   nestedAttrs,
   itemWrapperAttrs,
   itemAttrs,
-  titleAttrs,
+  labelAttrs,
   customActionsAttrs,
   deleteIconAttrs,
   editIconAttrs,
@@ -236,12 +245,12 @@ function onDragEnd() {
   emit("dragSort", sortData);
 }
 
-function onClickEdit(id) {
-  emit("clickEdit", id);
+function onClickEdit(id, label) {
+  emit("clickEdit", id, label);
 }
 
-function onClickDelete(id, title) {
-  emit("clickDelete", id, title);
+function onClickDelete(id, label) {
+  emit("clickDelete", id, label);
 }
 
 function prepareSortData(list, parentId) {

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

package/ui.form-date-picker-range/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-input/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-input-file/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-input-money/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-input-number/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-input-rating/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-input-search/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-label/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-radio/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-radio-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.form-radio-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-select/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-switch/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-textarea/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.image-avatar/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.image-icon/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.image-logo/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.loader/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.loader-rendering/Docs.mdx

@@ -41,3 +41,6 @@ loaderRenderingOn();
 // hide loader
 loaderRenderingOff();
 `} language="jsx" dark />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.loader-top/Docs.mdx

@@ -12,9 +12,6 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## **Default config**
-<Source code={getSource(defaultConfig)} language="jsx" dark />
-
 ## Control loader
 You can control loader state using *useLoaderRendering* composable.
 
@@ -29,9 +26,12 @@ const {
 } = useLoaderTop();
 `} language="jsx" dark />
 
-## Control outside of component
-You can control loader state outside of vue components using following methods.
+## Control outside a component
+You can control loader state outside vue components using the following methods.
 
 <Source code={`
 import { loaderTopOn, loaderTopOff } from "vueless";
 `} language="jsx" dark />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-pagination/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.navigation-progress/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.navigation-stepper/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.navigation-tab/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.navigation-tabs/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.other-dot/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.text-alert/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.text-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.text-block/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.text-empty/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.text-file/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.text-files/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.text-header/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.text-money/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.text-notify/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 />
 
 ## Triggering notification

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.154",
+  "version": "0.0.156",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1402,13 +1402,13 @@
               "default": "\"\""
             },
             {
-              "name": "nesting",
-              "description": "Enables nesting.",
+              "name": "labelKey",
+              "description": "Label key in the item object of options.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
+              "default": "label"
             },
             {
               "name": "emptyTitle",
@@ -1437,6 +1437,15 @@
               },
               "default": "200"
             },
+            {
+              "name": "nesting",
+              "description": "Enables nesting.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "upperlined",
               "description": "Add line divider above the list.",
@@ -1448,7 +1457,7 @@
             },
             {
               "name": "hideEmptyStateForNesting",
-              "description": "@ignore: Disable empty state for nested elements if empty (internal prorps).",
+              "description": "@ignore: Disable empty state for nested elements if empty (internal props).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1487,11 +1496,12 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "label",
+              "description": "Use it to modify label."
             },
             {
-              "name": "icons",
-              "description": "Use it to add icons."
+              "name": "actions",
+              "description": "Use it to add custom actions."
             }
           ],
           "source": {