vueless 0.0.403 → 0.0.405

package/package.json

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

package/ui.data-list/UDataList.vue

@@ -2,12 +2,23 @@
   <div v-bind="wrapperAttrs">
     <UDivider v-if="upperlined" size="xl" padding="after" v-bind="dividerAttrs" />
 
-    <UEmpty
+    <!--
+      @slot Use it to add something instead of the drag icon.
+      @binding {string} empty-title
+      @binding {string} empty-description
+    -->
+    <slot
       v-if="!hideEmptyStateForNesting && !list?.length"
-      :title="emptyTitle || currentLocale.emptyTitle"
-      :description="emptyDescription || currentLocale.emptyDescription"
-      v-bind="emptyAttrs"
-    />
+      name="empty"
+      :empty-title="emptyTitle"
+      :empty-description="emptyDescription"
+    >
+      <UEmpty
+        :title="emptyTitle || currentLocale.emptyTitle"
+        :description="emptyDescription || currentLocale.emptyDescription"
+        v-bind="emptyAttrs"
+      />
+    </slot>
 
     <draggable
       v-else
@@ -27,6 +38,7 @@
           <div :data-test="`${dataTest}-item-${element[valueKey]}`" v-bind="itemAttrs">
             <!--
               @slot Use it to add something instead of the drag icon.
+              @binding {string} icon-name
               @binding {string} icon-size
             -->
             <slot name="drag" :icon-name="config.defaults.dragIcon" :icon-size="iconSize">
@@ -43,6 +55,7 @@
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
+                @binding {boolean} active
               -->
               <slot name="label" :item="element" :active="isActive(element)">
                 {{ element[labelKey] }}
@@ -63,6 +76,7 @@
 
               <!--
                 @slot Use it to add something instead of the delete icon.
+                @binding {string} icon-name
                 @binding {string} icon-size
               -->
               <slot name="delete" :icon-name="config.defaults.deleteIcon" :icon-size="iconSize">
@@ -82,6 +96,7 @@
 
               <!--
                 @slot Use it to add something instead of the edit icon.
+                @binding {string} icon-name
                 @binding {string} icon-size
               -->
               <slot name="edit" :icon-name="config.defaults.editIcon" :icon-size="iconSize">
@@ -114,6 +129,11 @@
             @drag-sort="onDragEnd"
           >
             <template #label="{ item, active }">
+              <!--
+                @slot Use it to modify label.
+                @binding {object} item
+                @binding {boolean} active
+              -->
               <slot name="label" :item="item" :active="active">
                 <div v-bind="active ? labelCrossedAttrs : labelAttrs" v-text="item[labelKey]" />
               </slot>
@@ -152,7 +172,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Data list array.
+   * Data item options.
    */
   list: {
     type: Array,
@@ -217,7 +237,7 @@ const props = defineProps({
   },
 
   /**
-   * Enables nesting.
+   * Enable nesting.
    */
   nesting: {
     type: Boolean,

package/ui.data-table/UTable.vue

@@ -25,7 +25,7 @@
         />
 
         <!--
-          @slot Use it to add action buttons instead of table row when some rows are selected.
+          @slot Use it to add action buttons within the actions header, which appear when rows are selected.
           @binding {array} selected-rows
         -->
         <slot name="header-actions" :selected-rows="selectedRows" />
@@ -57,7 +57,7 @@
         >
           <template v-if="hasSlotContent($slots[`header-${column.key}`])">
             <!--
-              @slot Use it to customise table column.
+              @slot Use it to customise needed header cell.
               @binding {string} name
               @binding {number} column
             -->
@@ -69,7 +69,7 @@
           </template>
 
           <!--
-            @slot Use it to add something after the table column.
+            @slot Use it to add something after the needed header cell.
             @binding {string} name
             @binding {number} column
           -->
@@ -127,7 +127,7 @@
               :class="cx([headerCellBaseAttrs.class, column.thClass])"
             >
               <!--
-                @slot Use it to customise table column.
+                @slot Use it to customise needed header cell.
                 @binding {string} name
                 @binding {number} column
               -->
@@ -142,7 +142,7 @@
               </template>
 
               <!--
-                @slot Use it to add something after the table column.
+                @slot Use it to add something after the needed header cell.
                 @binding {string} name
                 @binding {number} column
               -->
@@ -301,7 +301,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Table columns.
+   * Table columns (headers).
    */
   columns: {
     type: Array,
@@ -317,15 +317,15 @@ const props = defineProps({
   },
 
   /**
-   * Show date divider label.
+   * Show date divider line between dates.
    */
   dateDivider: {
     type: [Array, Boolean],
-    default: false,
+    default: getDefault(defaultConfig, UTable).dateDivider,
   },
 
   /**
-   * Enable selecting table rows.
+   * Allow rows selecting.
    */
   selectable: {
     type: Boolean,
@@ -357,7 +357,7 @@ const props = defineProps({
   },
 
   /**
-   * Set loader resource name to activate table top loader exact for that resource.
+   * Set loader resource name to activate table progress loader exact for that resource (deprecated).
    */
   resource: {
     type: String,
@@ -389,7 +389,7 @@ const emit = defineEmits([
   "clickRow",
 
   /**
-   * Triggers when table rows are updated.
+   * Triggers when table rows are selected (updated).
    * @property {array} tableRows
    */
   "update:rows",

package/ui.data-table/config.js

@@ -1,13 +1,5 @@
 export default /*tw*/ {
   wrapper: "relative",
-  headerCellBase: {
-    base: "p-4 first:p-5 text-sm font-normal text-gray-500 text-left text-nowrap",
-    variants: {
-      compact: {
-        true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
-      },
-    },
-  },
   headerCounterBase: "mr-1.5 pr-1.5 font-medium text-sm text-gray-900",
   stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden rounded-none border",
   stickyHeaderRow: "border-gray-200 bg-white",
@@ -21,7 +13,7 @@ export default /*tw*/ {
       },
     },
   },
-  stickyHeaderLoader: "{ULoader}",
+  stickyHeaderLoader: "{ULoaderProgress}",
   stickyHeaderActions: "absolute rounded-t-lg border-blue-200 bg-blue-50",
   stickyHeaderActionsCheckbox: "{UCheckbox}",
   stickyHeaderActionsCounter: "-ml-2",
@@ -29,6 +21,14 @@ export default /*tw*/ {
   table: "min-w-full border-none text-sm w-full table-fixed",
   header: "border-b border-gray-200",
   headerRow: "",
+  headerCellBase: {
+    base: "p-4 first:p-5 text-sm font-normal text-gray-500 text-left text-nowrap",
+    variants: {
+      compact: {
+        true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
+      },
+    },
+  },
   headerCellCheckbox: "w-10",
   headerCheckbox: "{UCheckbox}",
   headerCounter: {
@@ -39,7 +39,7 @@ export default /*tw*/ {
       },
     },
   },
-  headerLoader: "{ULoader} absolute !top-auto",
+  headerLoader: "{ULoaderProgress} absolute !top-auto",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
   bodyRowChecked: "bg-gray-100 transition",
@@ -97,6 +97,7 @@ export default /*tw*/ {
     nesting: false,
     compact: false,
     selectable: false,
+    dateDivider: false,
     stickyHeader: false,
     stickyFooter: false,
     /* icons */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.403",
+  "version": "0.0.405",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2054,7 +2054,7 @@
           "attributes": [
             {
               "name": "list",
-              "description": "Data list array.",
+              "description": "Data item options.",
               "value": {
                 "kind": "expression",
                 "type": "array"
@@ -2126,7 +2126,7 @@
             },
             {
               "name": "nesting",
-              "description": "Enables nesting.",
+              "description": "Enable nesting.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2221,12 +2221,28 @@
             }
           ],
           "slots": [
+            {
+              "name": "empty",
+              "scoped": true,
+              "description": "Use it to add something instead of the drag icon.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "empty-title"
+                },
+                {
+                  "type": "string",
+                  "name": "empty-description"
+                }
+              ]
+            },
             {
               "name": "drag",
               "scoped": true,
               "description": "Use it to add something instead of the drag icon.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {
@@ -2241,9 +2257,11 @@
               "description": "Use it to modify label.",
               "bindings": [
                 {
+                  "type": "object",
                   "name": "item"
                 },
                 {
+                  "type": "boolean",
                   "name": "active"
                 }
               ]
@@ -2265,6 +2283,7 @@
               "description": "Use it to add something instead of the delete icon.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {
@@ -2279,6 +2298,7 @@
               "description": "Use it to add something instead of the edit icon.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {
@@ -8073,7 +8093,7 @@
             {
               "name": "columns",
               "required": true,
-              "description": "Table columns.",
+              "description": "Table columns (headers).",
               "value": {
                 "kind": "expression",
                 "type": "array"
@@ -8090,7 +8110,7 @@
             },
             {
               "name": "dateDivider",
-              "description": "Show date divider label.",
+              "description": "Show date divider line between dates.",
               "value": {
                 "kind": "expression",
                 "type": "array|boolean"
@@ -8099,7 +8119,7 @@
             },
             {
               "name": "selectable",
-              "description": "Enable selecting table rows.",
+              "description": "Allow rows selecting.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -8135,7 +8155,7 @@
             },
             {
               "name": "resource",
-              "description": "Set loader resource name to activate table top loader exact for that resource.",
+              "description": "Set loader resource name to activate table progress loader exact for that resource (deprecated).",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -8176,7 +8196,7 @@
             },
             {
               "name": "update:rows",
-              "description": "Triggers when table rows are updated.",
+              "description": "Triggers when table rows are selected (updated).",
               "properties": [
                 {
                   "type": [
@@ -8191,7 +8211,7 @@
             {
               "name": "header-actions",
               "scoped": true,
-              "description": "Use it to add action buttons instead of table row when some rows are selected.",
+              "description": "Use it to add action buttons within the actions header, which appear when rows are selected.",
               "bindings": [
                 {
                   "type": "array",
@@ -8202,7 +8222,7 @@
             {
               "name": "`header-${column.key}`",
               "scoped": true,
-              "description": "Use it to customise table column.",
+              "description": "Use it to customise needed header cell.",
               "bindings": [
                 {
                   "type": "string",
@@ -8217,7 +8237,7 @@
             {
               "name": "`header-${column.key}-after`",
               "scoped": true,
-              "description": "Use it to add something after the table column.",
+              "description": "Use it to add something after the needed header cell.",
               "bindings": [
                 {
                   "type": "string",