vueless 0.0.106 → 0.0.108

package/adatper.locale/locales/en.js

@@ -8,7 +8,7 @@ import calendarConfig from "../../ui.form-calendar/configs/default.config";
 import datepickerConfig from "../../ui.form-date-picker/configs/default.config";
 import datepickerRangeConfig from "../../ui.form-date-picker-range/configs/default.config";
 import dataListConfig from "../../ui.data-list/configs/default.config";
-import notifyDefaultConfig from "../../ui.notify/configs/default.config";
+import notifyDefaultConfig from "../../ui.text-notify/configs/default.config";
 
 export default {
   USelect: selectConfig.i18n,

package/index.js

@@ -23,7 +23,7 @@ export {
   clearAllNotifications,
   setDelayedNotify,
   getDelayedNotify,
-} from "./ui.notify/services";
+} from "./ui.text-notify/services";
 
 export function createVueless(options = {}) {
   const i18n = createLocale(options.i18n);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.106",
+  "version": "0.0.108",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -17,9 +17,9 @@
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
-    "sb:dev-full": "STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
-    "sb:dev": "storybook dev -p 6006 --docs --no-open",
-    "sb:build": "storybook build --docs",
+    "sb:dev-full": "npx @vueless/web-types && node prepare.icons && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
+    "sb:dev": "npx @vueless/web-types && node prepare.icons && storybook dev -p 6006 --docs --no-open",
+    "sb:build": "npx @vueless/web-types && node prepare.icons && storybook build --docs",
     "sb:preview": "vite preview --host --outDir=storybook-static",
     "package:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.dist"
   },

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.button-toggle/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <!-- @slot Use it to add UToggleItem directly. -->
     <slot>
       <UToggleItem
         v-for="(item, index) in options"

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-input-file/index.vue

@@ -1,34 +1,37 @@
 <template>
-  <ULabel :error="error" :align="labelAlign" :label="label" :size="size" v-bind="labelAttrs">
+  <ULabel :label="label" :align="labelAlign" :error="error" :size="size" v-bind="labelAttrs">
     <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneWrapperAttrs">
-      <UText :size="nestedComponentSize" v-bind="descriptionAttrs" :html="description" />
+      <UText :size="nestedComponentSize" :html="description" v-bind="descriptionAttrs" />
 
       <div v-bind="contentWrapperAttrs">
+        <!-- @slot Use it to add something before placeholder. -->
         <slot name="left" />
+
         <span v-if="!isValue" v-bind="placeholderAttrs" v-text="currentLocale.noFile" />
+
         <div v-else v-bind="fileListAttrs">
           <template v-if="props.multiple">
             <span
               v-for="(file, idx) in currentFiles"
-              v-bind="selectedItemAttrs"
               :key="idx"
+              v-bind="selectedItemAttrs"
               v-text="file.name"
             />
           </template>
+
           <span v-else v-bind="selectedItemAttrs" v-text="currentFiles.name" />
         </div>
 
         <div v-bind="buttonWrapperAttrs">
           <template v-if="Array.isArray(currentFiles) || !currentFiles">
             <UButton
-              class="hover:cursor-pointer"
-              :label="currentLocale.uploadFile"
-              variant="thirdary"
               filled
-              :size="nestedComponentSize"
-              v-bind="buttonAttrs"
               tag="label"
               :for="id"
+              variant="thirdary"
+              :size="nestedComponentSize"
+              :label="currentLocale.uploadFile"
+              v-bind="buttonAttrs"
             >
               <template #right>
                 <UIcon
@@ -43,20 +46,21 @@
             <input
               :id="id"
               ref="fileInputRef"
-              :multiple="multiple"
               type="file"
               :accept="accept"
+              :multiple="multiple"
               v-bind="inputAttrs"
               @change="onChangeFile"
             />
           </template>
+
           <UIcon
             v-if="isValue"
-            interactive
+            pill
             internal
+            interactive
             :size="nestedComponentSize"
             :name="config.clearIconName"
-            pill
             v-bind="clearIconAttrs"
             @click="onClickResetFiles"
           />

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.loader/index.stories.js

@@ -4,7 +4,7 @@ import URow from "../ui.container-row";
 import { getArgTypes } from "../service.storybook";
 
 export default {
-  id: "9020",
+  id: "9010",
   title: "Loaders and Skeletons / Loader",
   component: ULoader,
   argTypes: {

package/ui.loader-rendering/index.stories.js

@@ -6,7 +6,7 @@ import { useLoaderRendering } from "./composables/useLoaderRendering";
 import { getArgTypes } from "../service.storybook";
 
 export default {
-  id: "9023",
+  id: "9030",
   title: "Loaders and Skeletons / Loader rendering",
   component: ULoaderRendering,
   argTypes: {
@@ -21,7 +21,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <div>
-        <ULoaderRendering v-bind="args" class="!static !w-full" />
+      <ULoaderRendering v-bind="args" class="!static !w-full" />
     </div>
   `,
 });
@@ -43,7 +43,7 @@ const LoadingTemplate = (args) => ({
         <UButton label="Toggle loading" @click="toggleLoading"/>
       </div>
       <div>
-          <ULoaderRendering v-bind="args" class="!static !w-full" />
+        <ULoaderRendering v-bind="args" class="!static !w-full" />
       </div>
     `,
 });

package/ui.loader-top/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/ui.loader-top/index.stories.js

@@ -1,13 +1,13 @@
 import ULoaderTop from "../ui.loader-top";
 import UButton from "../ui.button";
 
-import { useLoaderTop } from "../ui.loader-top/composables/useLoaderTop";
-import { loaderTopOff, loaderTopOn } from "../ui.loader-top/services/loaderTop.service";
+import { useLoaderTop } from "./composables/useLoaderTop";
+import { loaderTopOff, loaderTopOn } from "./services/loaderTop.service";
 
 import { getArgTypes } from "../service.storybook";
 
 export default {
-  id: "9024",
+  id: "9020",
   title: "Loaders and Skeletons / Loader top",
   component: ULoaderTop,
   argTypes: {

package/ui.navigation-pagination/index.stories.js

@@ -3,7 +3,7 @@ import { getArgTypes } from "../service.storybook";
 import UPagination from "../ui.navigation-pagination";
 
 export default {
-  id: "8040",
+  id: "8050",
   title: "Navigation / Pagination",
   component: UPagination,
   args: {

package/{ui.progress → ui.navigation-progress}/index.stories.js

@@ -4,8 +4,8 @@ import UButton from "../ui.button/index.vue";
 import { getArgTypes } from "../service.storybook";
 
 export default {
-  id: "9015",
-  title: "Other / Progress",
+  id: "8040",
+  title: "Navigation / Progress",
   component: UProgress,
   argTypes: {
     ...getArgTypes(UProgress.name),

package/ui.other-dot/index.stories.js

@@ -4,7 +4,7 @@ import URow from "../ui.container-row";
 import { getArgTypes } from "../service.storybook";
 
 export default {
-  id: "9010",
+  id: "100010",
   title: "Other / Dot",
   component: UDot,
   argTypes: {

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/ui.text-money/index.stories.js

@@ -245,7 +245,6 @@ slotLeft.args = {
       <UIcon
         :src="icons.Debit"
         size="xs"
-        color="grayscale"
       />
     </template>
   `,

package/{ui.notify → ui.text-notify}/index.stories.js

@@ -1,12 +1,13 @@
-import { notify } from "../ui.notify/services";
+import { notify } from "./services";
 
-import UNotify from "../ui.notify";
+import UNotify from "../ui.text-notify";
 import UButton from "../ui.button";
 
 import { getArgTypes } from "../service.storybook";
 
 export default {
-  title: "Other / Notify",
+  id: "4035",
+  title: "Text & Content / Notify",
   component: UNotify,
   args: {
     type: "success",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.106",
+  "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",
@@ -3550,7 +3542,8 @@
           ],
           "slots": [
             {
-              "name": "left"
+              "name": "left",
+              "description": "Use it to add something before placeholder."
             }
           ],
           "source": {
@@ -4644,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",
@@ -5024,7 +5017,7 @@
                 "kind": "expression",
                 "type": "number"
               },
-              "default": "UIService.get(defaultConfig, UMoney).default.decimalScale"
+              "default": "2"
             },
             {
               "name": "delimiter",
@@ -5128,7 +5121,7 @@
             }
           ],
           "source": {
-            "module": "vueless/ui.notify/index.vue",
+            "module": "vueless/ui.text-notify/index.vue",
             "symbol": "default"
           }
         },
@@ -5472,7 +5465,7 @@
             }
           ],
           "source": {
-            "module": "vueless/ui.progress/index.vue",
+            "module": "vueless/ui.navigation-progress/index.vue",
             "symbol": "default"
           }
         },
@@ -5541,7 +5534,7 @@
                 "kind": "expression",
                 "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "UIService.get(defaultConfig, URadio).default.labelAlign"
+              "default": "left"
             },
             {
               "name": "disabled",
@@ -6731,7 +6724,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "UIService.get(defaultConfig, UText).default.line"
+              "default": "false"
             },
             {
               "name": "config",
@@ -7031,7 +7024,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Use it to add UToggleItem directly."
             }
           ],
           "source": {