vueless 0.0.402 → 0.0.404

package/package.json

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

package/ui.container-modal/UModal.vue

@@ -57,14 +57,13 @@
               <slot name="header-right" />
             </div>
 
-            <div v-bind="closeIconAttrs">
+            <div v-if="closeOnCross" v-bind="closeIconAttrs">
               <!--
                 @slot Use it to add something instead of the close button.
                 @binding {string} icon-name
               -->
               <slot name="close-button" :icon-name="config.defaults.closeIcon">
                 <UIcon
-                  v-if="closeOnCross"
                   internal
                   interactive
                   size="sm"

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/ui.form-input-search/UInputSearch.vue

@@ -1,6 +1,7 @@
 <template>
   <UInput
     :id="elementId"
+    ref="inputRef"
     :model-value="localValue"
     :size="size"
     :disabled="disabled"
@@ -253,6 +254,9 @@ let updateValueWithDebounce = createDebounce((value) => {
 }, Number(props.debounce));
 
 const localValue = ref("");
+const inputRef = ref(null);
+
+defineExpose({ inputRef });
 
 const elementId = props.id || useId();
 

package/ui.form-select/USelect.vue

@@ -677,7 +677,7 @@ const isSelectedValueLabelVisible = computed(() => {
 });
 
 const filteredOptions = computed(() => {
-  const normalizedSearch = search.value.toLowerCase().trim();
+  const normalizedSearch = search.value.toLowerCase().trim() || "";
 
   let options = props.multiple
     ? SelectService.removeSelectedValues(
@@ -688,10 +688,6 @@ const filteredOptions = computed(() => {
       )
     : [...props.options];
 
-  if (!normalizedSearch) {
-    return options.slice(0, props.optionsLimit || options.length);
-  }
-
   options = props.groupValueKey
     ? filterAndFlat(options, normalizedSearch, props.labelKey)
     : SelectService.filterOptions(options, normalizedSearch, props.labelKey);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.402",
+  "version": "0.0.404",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -8073,7 +8073,7 @@
             {
               "name": "columns",
               "required": true,
-              "description": "Table columns.",
+              "description": "Table columns (headers).",
               "value": {
                 "kind": "expression",
                 "type": "array"
@@ -8090,7 +8090,7 @@
             },
             {
               "name": "dateDivider",
-              "description": "Show date divider label.",
+              "description": "Show date divider line between dates.",
               "value": {
                 "kind": "expression",
                 "type": "array|boolean"
@@ -8099,7 +8099,7 @@
             },
             {
               "name": "selectable",
-              "description": "Enable selecting table rows.",
+              "description": "Allow rows selecting.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -8135,7 +8135,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 +8176,7 @@
             },
             {
               "name": "update:rows",
-              "description": "Triggers when table rows are updated.",
+              "description": "Triggers when table rows are selected (updated).",
               "properties": [
                 {
                   "type": [
@@ -8191,7 +8191,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 +8202,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 +8217,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",