vueless 0.0.431 → 0.0.433

package/README.md

@@ -26,16 +26,7 @@ const vueless = createVueless();
 createApp(App).use(vueless).mount('#app');
 ```
 
-3. Create `vueless.config.js` at the root of the project.
-
-```javascript
-export default {
-  color: {},
-  component: {},
-};
-```
-
-4. Add TailwindCSS preset.
+3. Add TailwindCSS preset.
 
 ```javascript
 import { vuelessPreset } from "vueless/preset.tailwind";
@@ -46,7 +37,7 @@ export default {
 };
 ```
 
-5. Add Vite plugins.
+4. Add Vite plugins.
 
 ```javascript
 import { Vueless, VuelessUnpluginComponents } from "@vueless/plugin-vite";

package/package.json

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

package/ui.data-table/UTable.vue

@@ -56,10 +56,10 @@
           <template v-if="hasSlotContent($slots[`header-${column.key}`])">
             <!--
               @slot Use it to customise needed header cell.
-              @binding {string} name
-              @binding {number} column
+              @binding {object} column
+              @binding {number} index
             -->
-            <slot :name="`header-${column.key}`" :column="column" />
+            <slot :name="`header-${column.key}`" :column="column" :index="index" />
           </template>
 
           <template v-else>
@@ -68,10 +68,10 @@
 
           <!--
             @slot Use it to add something after the needed header cell.
-            @binding {string} name
-            @binding {number} column
+            @binding {object} column
+            @binding {number} index
           -->
-          <slot :name="`header-${column.key}-after`" :column="column" />
+          <slot :name="`header-${column.key}-after`" :column="column" :index="index" />
         </div>
       </template>
 
@@ -125,13 +125,14 @@
             >
               <!--
                 @slot Use it to customise needed header cell.
-                @binding {string} name
-                @binding {number} column
+                @binding {object} column
+                @binding {number} index
               -->
               <slot
                 v-if="hasSlotContent($slots[`header-${column.key}`])"
                 :name="`header-${column.key}`"
                 :column="column"
+                :index="index"
               />
 
               <template v-else>
@@ -140,10 +141,10 @@
 
               <!--
                 @slot Use it to add something after the needed header cell.
-                @binding {string} name
-                @binding {number} column
+                @binding {object} column
+                @binding {number} index
               -->
-              <slot :name="`header-${column.key}-after`" :column="column" />
+              <slot :name="`header-${column.key}-after`" :column="column" :index="index" />
             </th>
           </tr>
 
@@ -192,11 +193,16 @@
               >
                 <!--
                   @slot Use it to customise needed table cell.
-                  @binding {string} name
                   @binding {string} value
                   @binding {object} row
+                  @binding {number} index
                 -->
-                <slot :name="`cell-${key}`" :value="slotValues.value" :row="slotValues.row" />
+                <slot
+                  :name="`cell-${key}`"
+                  :value="slotValues.value"
+                  :row="slotValues.row"
+                  :index="index"
+                />
               </template>
               <template #nested-content>
                 <!--

package/ui.data-table/storybook/stories.js

@@ -280,9 +280,6 @@ RowAndCellClasses.args = {
 export const Empty = EmptyTemplate.bind({});
 Empty.args = {};
 
-export const Filters = EmptyTemplate.bind({});
-Filters.args = { filters: true };
-
 export const Selectable = DefaultTemplate.bind({});
 Selectable.args = { selectable: true };
 

package/ui.form-date-picker/UDatePicker.vue

@@ -234,7 +234,7 @@ const props = defineProps({
    */
   rightIcon: {
     type: String,
-    default: getDefault(defaultConfig, UDatePicker).calendarIcon,
+    default: getDefault(defaultConfig, UDatePicker).rightIcon,
   },
 
   /**

package/ui.form-date-picker/config.js

@@ -123,7 +123,6 @@ export default /*tw*/ {
     dateTimeFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
-    /* icons */
-    calendarIcon: "calendar_month-fill",
+    rightIcon: "calendar_month-fill",
   },
 };

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -7,6 +7,7 @@
       v-model="userFormatDate"
       :size="size"
       :label="label"
+      :label-align="labelAlign"
       :disabled="disabled"
       :placeholder="placeholder"
       :description="description"
@@ -300,7 +301,7 @@ const props = defineProps({
    */
   rightIcon: {
     type: String,
-    default: getDefault(defaultConfig, UDatePickerRange).calendarIcon,
+    default: getDefault(defaultConfig, UDatePickerRange).rightIcon,
   },
 
   /**
@@ -311,6 +312,15 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Label placement.
+   * @values top, topInside, topWithDesc, left, right
+   */
+  labelAlign: {
+    type: String,
+    default: getDefault(defaultConfig, UDatePickerRange).labelAlign,
+  },
+
   /**
    * Input placeholder for an input type.
    */

package/ui.form-date-picker-range/config.js

@@ -187,6 +187,7 @@ export default /*tw*/ {
   defaults: {
     size: "md",
     variant: "button",
+    labelAlign: "topInside",
     openDirectionX: "auto",
     openDirectionY: "auto",
     timepicker: false,
@@ -194,10 +195,10 @@ export default /*tw*/ {
     dateFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
+    rightIcon: "calendar_month-fill",
     /* icons */
     nextIcon: "keyboard_arrow_right",
     prevIcon: "keyboard_arrow_left",
     ownRangeIcon: "apps",
-    calendarIcon: "calendar_month-fill",
   },
 };

package/utils/utilStorybook.js

@@ -96,6 +96,8 @@ export function getArgTypes(componentName) {
     const bindings = [];
 
     slot.bindings?.forEach((binding) => {
+      if (binding.name === "name") return;
+
       const description = binding.description ? ` (${binding.description})` : "";
 
       bindings.push(`${binding.name}: ${binding.type}${description}`);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.431",
+  "version": "0.0.433",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2484,7 +2484,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "getDefault(defaultConfig, UDatePicker).calendarIcon"
+              "default": "calendar_month-fill"
             },
             {
               "name": "disabled",
@@ -2708,7 +2708,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "getDefault(defaultConfig, UDatePickerRange).calendarIcon"
+              "default": "calendar_month-fill"
             },
             {
               "name": "label",
@@ -2719,6 +2719,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "labelAlign",
+              "description": "Label placement.",
+              "value": {
+                "kind": "expression",
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
+              },
+              "default": "topInside"
+            },
             {
               "name": "placeholder",
               "description": "Input placeholder for an input type.",
@@ -8423,12 +8432,15 @@
               "description": "Use it to customise needed header cell.",
               "bindings": [
                 {
-                  "type": "string",
                   "name": "name"
                 },
                 {
-                  "type": "number",
+                  "type": "object",
                   "name": "column"
+                },
+                {
+                  "type": "number",
+                  "name": "index"
                 }
               ]
             },
@@ -8438,12 +8450,15 @@
               "description": "Use it to add something after the needed header cell.",
               "bindings": [
                 {
-                  "type": "string",
                   "name": "name"
                 },
                 {
-                  "type": "number",
+                  "type": "object",
                   "name": "column"
+                },
+                {
+                  "type": "number",
+                  "name": "index"
                 }
               ]
             },
@@ -8468,7 +8483,6 @@
               "description": "Use it to customise needed table cell.",
               "bindings": [
                 {
-                  "type": "string",
                   "name": "name"
                 },
                 {
@@ -8478,6 +8492,10 @@
                 {
                   "type": "object",
                   "name": "row"
+                },
+                {
+                  "type": "number",
+                  "name": "index"
                 }
               ]
             },