vueless 0.0.107 → 0.0.108

package/package.json

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

package/service.storybook/index.js

@@ -22,7 +22,7 @@ export function getArgTypes(componentName) {
   component.attributes?.forEach((attribute) => {
     const type = attribute.value.type;
 
-    if (type === "string") {
+    if (type === "string" || type.includes("string")) {
       types[attribute.name] = {
         control: "text",
         table: {
@@ -49,6 +49,15 @@ export function getArgTypes(componentName) {
       };
     }
 
+    if (type === "array") {
+      types[attribute.name] = {
+        control: "array",
+        table: {
+          defaultValue: { summary: attribute.default || [] },
+        },
+      };
+    }
+
     if (type.includes("|")) {
       const options = attribute.value.type.replace(/['|]/g, "").split(/\s+/);
 

package/ui.button/index.stories.js

@@ -5,6 +5,9 @@ import UIcon from "../ui.image-icon";
 import URow from "../ui.container-row";
 import UGroup from "../ui.container-group";
 
+/**
+ * The `UButton` component. | [ view on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button)
+ */
 export default {
   id: "1010",
   title: "Buttons & Links / Button",

package/ui.container-modal/configs/default.config.js

@@ -56,7 +56,7 @@ export default /*tw*/ {
     },
   },
   defaultVariants: {
-    color: "brand",
+    titleColor: "brand",
     width: "sm",
     inner: false,
     closeIcon: true,

package/ui.container-modal/index.vue

@@ -143,7 +143,7 @@ const props = defineProps({
    */
   titleColor: {
     type: String,
-    default: UIService.get(defaultConfig, UModal).default.color,
+    default: UIService.get(defaultConfig, UModal).default.titleColor,
   },
 
   /**

package/ui.dropdown-list/index.vue

@@ -183,7 +183,7 @@ const props = defineProps({
    * List max height in pixels.
    */
   maxHeight: {
-    type: [Number, String],
+    type: Number,
     default: UIService.get(defaultConfig, UDropdownList).default.maxHeight,
   },
 

package/ui.form-checkbox-group/configs/default.config.js

@@ -2,4 +2,7 @@ export default /*tw*/ {
   label: "",
   list: "ml-4 flex flex-col gap-4 relative",
   checkbox: "",
+  defaultVariants: {
+    disabled: false,
+  },
 };

package/ui.form-checkbox-group/index.vue

@@ -116,7 +116,7 @@ const props = defineProps({
    */
   dataCy: {
     type: String,
-    default: "checkbox",
+    default: "",
   },
 });
 

package/ui.form-color-picker/index.vue

@@ -56,7 +56,7 @@ import { computed } from "vue";
 import UIcon from "../ui.image-icon";
 import URadio from "../ui.form-radio";
 import ULabel from "../ui.form-label";
-import UIService, { getRandomId } from "../service.ui";
+import UIService from "../service.ui";
 
 import { UColorPicker } from "./constants";
 import defaultConfig from "./configs/default.config";
@@ -120,7 +120,8 @@ const props = defineProps({
    */
   name: {
     type: String,
-    default: () => getRandomId(),
+    required: true,
+    default: "",
   },
 
   /**

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

@@ -185,14 +185,6 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     variant: "button",
-    customRangeButton: {
-      range: {
-        from: 0,
-        to: 0,
-      },
-      label: "",
-      description: "",
-    },
     timepicker: false,
     disabled: false,
     dateFormat: "d.m.Y",

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

@@ -265,7 +265,11 @@ const props = defineProps({
    */
   customRangeButton: {
     type: Object,
-    default: () => UIService.get(defaultConfig, UDatePickerRange).default.customRangeButton,
+    default: () => ({
+      range: { from: 0, to: 0 },
+      label: "",
+      description: "",
+    }),
   },
 
   /**

package/ui.form-radio/configs/default.config.js

@@ -31,6 +31,7 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     color: "brand",
+    labelAlign: "left",
     disabled: false,
     checked: false,
   },

package/ui.image-icon/configs/default.config.js

@@ -78,7 +78,7 @@ export default /*tw*/ {
     size: "md",
     variant: "default",
     interactive: false,
-    fill: false,
+    pill: false,
   },
   safelist: (colors) => [
     { pattern: `text-(${colors})-400` },

package/ui.image-icon/index.vue

@@ -46,14 +46,6 @@ const props = defineProps({
     default: "",
   },
 
-  /**
-   * Change icon variant from outline to filled.
-   */
-  fill: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UIcon).default.fill,
-  },
-
   /**
    * Icon color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white

package/ui.text-alert/configs/default.config.js

@@ -41,7 +41,7 @@ export default /*tw*/ {
     timeout: 0,
     html: undefined,
     bordered: false,
-    closeButton: false,
+    closeIcon: false,
   },
   safelist: (colors) => [
     { pattern: `bg-(${colors})-50` },

package/ui.text-block/configs/default.config.js

@@ -31,5 +31,6 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     align: "left",
+    line: false,
   },
 };

package/ui.text-money/configs/default.config.js

@@ -59,7 +59,7 @@ export default /*tw*/ {
     align: "right",
     symbolAlign: "right",
     weight: "regular",
-    decimalPlaces: 2,
+    decimalScale: 2,
     delimiter: ",",
     planned: false,
     integer: false,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.107",
+  "version": "0.0.108",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -306,7 +306,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "UIService.get(defaultConfig, UAlert).default.closeIcon"
+              "default": "false"
             },
             {
               "name": "config",
@@ -1116,7 +1116,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "UIService.get(defaultConfig, UCheckboxGroup).default.disabled"
+              "default": "false"
             },
             {
               "name": "id",
@@ -1143,7 +1143,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"checkbox\""
+              "default": "\"\""
             }
           ],
           "events": [
@@ -1317,12 +1317,13 @@
             },
             {
               "name": "name",
+              "required": true,
               "description": "Color picker name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "() => getRandomId()"
+              "default": "\"\""
             },
             {
               "name": "disabled",
@@ -1666,7 +1667,7 @@
                 "kind": "expression",
                 "type": "object"
               },
-              "default": "[object Object]"
+              "default": "{\n  range: { from: 0, to: 0 },\n  label: \"\",\n  description: \"\"\n}"
             },
             {
               "name": "variant",
@@ -2630,7 +2631,7 @@
               "description": "List max height in pixels.",
               "value": {
                 "kind": "expression",
-                "type": "number|string"
+                "type": "number"
               },
               "default": "undefined"
             },
@@ -3121,15 +3122,6 @@
               },
               "default": ""
             },
-            {
-              "name": "fill",
-              "description": "Change icon variant from outline to filled.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "color",
               "description": "Icon color.",
@@ -3155,7 +3147,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "UIService.get(defaultConfig, UIcon).default.pill"
+              "default": "false"
             },
             {
               "name": "variant",
@@ -4645,7 +4637,7 @@
                 "kind": "expression",
                 "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'"
               },
-              "default": "UIService.get(defaultConfig, UModal).default.color"
+              "default": "brand"
             },
             {
               "name": "description",
@@ -5025,7 +5017,7 @@
                 "kind": "expression",
                 "type": "number"
               },
-              "default": "UIService.get(defaultConfig, UMoney).default.decimalScale"
+              "default": "2"
             },
             {
               "name": "delimiter",
@@ -5542,7 +5534,7 @@
                 "kind": "expression",
                 "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "UIService.get(defaultConfig, URadio).default.labelAlign"
+              "default": "left"
             },
             {
               "name": "disabled",
@@ -6732,7 +6724,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "UIService.get(defaultConfig, UText).default.line"
+              "default": "false"
             },
             {
               "name": "config",