vueless 0.0.105 → 0.0.107

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.105",
+  "version": "0.0.107",
   "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/ui.button-toggle/configs/default.config.js

@@ -6,6 +6,7 @@ export default /*tw*/ {
   `,
   toggleItem: "",
   defaultVariants: {
+    variant: "primary",
     size: "md",
     block: false,
     multiple: false,

package/ui.button-toggle/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div ref="wrapperRef" :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <!-- @slot Use it to add UToggleItem directly. -->
     <slot>
       <UToggleItem
         v-for="(item, index) in options"
@@ -16,7 +17,7 @@
 </template>
 
 <script setup>
-import { computed, provide, readonly, ref } from "vue";
+import { computed, provide, readonly } from "vue";
 
 import UToggleItem from "../ui.button-toggle-item";
 import UIService from "../service.ui";
@@ -30,39 +31,40 @@ defineOptions({ name: "UToggle", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set buttons name.
+   * Selected value.
    */
-  name: {
-    type: String,
-    required: true,
+  modelValue: {
+    type: [String, Number, Array],
+    default: () => (!this.multiple ? "" : []),
   },
 
   /**
-   * Set data for buttons.
+   * Toggle variants.
+   * @values primary, secondary, thirdary
    */
-  options: {
-    type: Array,
-    default: () => [],
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UToggle).default.variant,
   },
 
   /**
-   * Set current value.
+   * Toggle item options.
    */
-  modelValue: {
-    type: [String, Number, Array],
-    default: () => (!this.multiple ? "" : []),
+  options: {
+    type: Array,
+    default: () => [],
   },
 
   /**
-   * Allow to select a few options and return them as array.
+   * Toggle name.
    */
-  multiple: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UToggle).default.multiple,
+  name: {
+    type: String,
+    required: true,
   },
 
   /**
-   * The size of the buttons.
+   * Toggle size.
    * @values xs, sm, md, lg
    */
   size: {
@@ -78,6 +80,14 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UToggle).default.block,
   },
 
+  /**
+   * Allow selecting a few options and return them as an array.
+   */
+  multiple: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.multiple,
+  },
+
   /**
    * Sets data-cy attribute for automated testing.
    */
@@ -91,14 +101,14 @@ const emit = defineEmits(["update:modelValue"]);
 
 const { wrapperAttrs, toggleItemAttrs } = useAttrs(props);
 
-const wrapperRef = ref();
-
 const selectedValue = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
 });
 
-const type = computed(() => (props.multiple ? TYPE_CHECKBOX : TYPE_RADIO));
+const type = computed(() => {
+  return props.multiple ? TYPE_CHECKBOX : TYPE_RADIO;
+});
 
 function updateSelectedValue(value, checked) {
   if (type.value === TYPE_RADIO) {
@@ -114,14 +124,11 @@ function updateSelectedValue(value, checked) {
   }
 }
 
+provide("toggleType", readonly(type));
 provide("toggleName", () => props.name);
-
 provide("toggleSize", () => props.size);
-
 provide("toggleBlock", () => props.block);
-
-provide("toggleType", readonly(type));
-
+provide("toggleVariant", () => props.variant);
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),
   updateSelectedValue,

package/ui.button-toggle-item/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { size, block }) {
+export function useAttrs(props, { size, block, variant }) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
   const { label, labelText, wrapper } = config.value;
 
@@ -33,7 +33,7 @@ export function useAttrs(props, { size, block }) {
   const labelClasses = computed(() =>
     cvaLabel({
       size: toValue(size),
-      variant: props.variant,
+      variant: toValue(variant),
       disabled: props.disabled,
     }),
   );

package/ui.button-toggle-item/index.vue

@@ -3,10 +3,10 @@
     <input
       :id="id"
       v-model="selectedItem"
-      :disabled="disabled"
-      :value="value"
       :name="name"
       :type="type"
+      :value="value"
+      :disabled="disabled"
       v-bind="inputAttrs"
     />
     <label tabindex="0" :for="id" v-bind="labelAttrs" @click="onClickSetValue">
@@ -42,7 +42,7 @@ defineOptions({ name: "UToggleItem", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set data for button.
+   * Selected value.
    */
   modelValue: {
     type: [String, Number, Array],
@@ -50,7 +50,7 @@ const props = defineProps({
   },
 
   /**
-   * Set value for checkbox state.
+   * Value for checkbox state.
    */
   value: {
     type: [String, Number],
@@ -58,7 +58,7 @@ const props = defineProps({
   },
 
   /**
-   * Set label.
+   * Toggle item label.
    */
   label: {
     type: String,
@@ -66,22 +66,13 @@ const props = defineProps({
   },
 
   /**
-   * Make item disabled.
+   * Make toggle item disabled.
    */
   disabled: {
     type: Boolean,
     default: UIService.get(defaultConfig, UToggleItem).default.disabled,
   },
 
-  /**
-   * The variant of the button.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: UIService.get(defaultConfig, UToggleItem).default.variant,
-  },
-
   /**
    * Generates unique element id.
    * @ignore
@@ -92,7 +83,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component ui config object.
    */
   config: {
     type: Object,
@@ -100,7 +91,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,
@@ -110,15 +101,17 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
+const name = inject("toggleName", () => "toggle");
 const type = inject("toggleType", UIService.get(defaultConfig, UToggleItem).default.type);
-const name = inject("toggleName", "toggle");
 const size = inject("toggleSize", UIService.get(defaultConfig, UToggleItem).default.size);
 const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).default.block);
+const variant = inject("toggleVariant", UIService.get(defaultConfig, UToggleItem).default.variant);
 const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
 const { wrapperAttrs, labelTextAttrs, labelAttrs, inputAttrs, hasSlotContent } = useAttrs(props, {
   size,
   block,
+  variant,
 });
 
 const selectedItem = ref("");

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.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-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.105",
+  "version": "0.0.107",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3550,7 +3550,8 @@
           ],
           "slots": [
             {
-              "name": "left"
+              "name": "left",
+              "description": "Use it to add something before placeholder."
             }
           ],
           "source": {
@@ -5128,7 +5129,7 @@
             }
           ],
           "source": {
-            "module": "vueless/ui.notify/index.vue",
+            "module": "vueless/ui.text-notify/index.vue",
             "symbol": "default"
           }
         },
@@ -5472,7 +5473,7 @@
             }
           ],
           "source": {
-            "module": "vueless/ui.progress/index.vue",
+            "module": "vueless/ui.navigation-progress/index.vue",
             "symbol": "default"
           }
         },
@@ -6952,44 +6953,44 @@
           "description": "",
           "attributes": [
             {
-              "name": "name",
-              "required": true,
-              "description": "Set buttons name.",
+              "name": "modelValue",
+              "description": "Selected value.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "string|number|array"
+              },
+              "default": "() => (!this.multiple ? \"\" : [])"
             },
             {
-              "name": "options",
-              "description": "Set data for buttons.",
+              "name": "variant",
+              "description": "Toggle variants.",
               "value": {
                 "kind": "expression",
-                "type": "array"
+                "type": "'primary' | 'secondary' | 'thirdary'"
               },
-              "default": "[]"
+              "default": "primary"
             },
             {
-              "name": "modelValue",
-              "description": "Set current value.",
+              "name": "options",
+              "description": "Toggle item options.",
               "value": {
                 "kind": "expression",
-                "type": "string|number|array"
+                "type": "array"
               },
-              "default": "() => (!this.multiple ? \"\" : [])"
+              "default": "[]"
             },
             {
-              "name": "multiple",
-              "description": "Allow to select a few options and return them as array.",
+              "name": "name",
+              "required": true,
+              "description": "Toggle name.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "string"
+              }
             },
             {
               "name": "size",
-              "description": "The size of the buttons.",
+              "description": "Toggle size.",
               "value": {
                 "kind": "expression",
                 "type": "'xs' | 'sm' | 'md' | 'lg'"
@@ -7005,6 +7006,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "multiple",
+              "description": "Allow selecting a few options and return them as an array.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "dataCy",
               "description": "Sets data-cy attribute for automated testing.",
@@ -7022,7 +7032,8 @@
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "default",
+              "description": "Use it to add UToggleItem directly."
             }
           ],
           "source": {
@@ -7036,7 +7047,7 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Set data for button.",
+              "description": "Selected value.",
               "value": {
                 "kind": "expression",
                 "type": "string|number|array"
@@ -7045,7 +7056,7 @@
             },
             {
               "name": "value",
-              "description": "Set value for checkbox state.",
+              "description": "Value for checkbox state.",
               "value": {
                 "kind": "expression",
                 "type": "string|number"
@@ -7054,7 +7065,7 @@
             },
             {
               "name": "label",
-              "description": "Set label.",
+              "description": "Toggle item label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -7063,22 +7074,13 @@
             },
             {
               "name": "disabled",
-              "description": "Make item disabled.",
+              "description": "Make toggle item disabled.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
             },
-            {
-              "name": "variant",
-              "description": "The variant of the button.",
-              "value": {
-                "kind": "expression",
-                "type": "'primary' | 'secondary' | 'thirdary'"
-              },
-              "default": "primary"
-            },
             {
               "name": "id",
               "description": "@ignore: Generates unique element id.",
@@ -7090,7 +7092,7 @@
             },
             {
               "name": "config",
-              "description": "Sets component ui config object.",
+              "description": "Component ui config object.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -7099,7 +7101,7 @@
             },
             {
               "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"