vueless 0.0.177 → 0.0.179

package/package.json

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

package/ui.button/index.stories.js

@@ -21,7 +21,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UButton },
+  components: { UButton, UIcon },
   setup() {
     const slots = getSlotNames(UButton.name);
 
@@ -43,7 +43,7 @@ const SlotTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || ""}
     </UButton>
   `,
 });
@@ -133,6 +133,16 @@ disabled.args = { disabled: true };
 export const colors = ColorTemplate.bind({});
 colors.args = {};
 
+export const iconLeft = DefaultTemplate.bind({});
+iconLeft.args = {
+  iconLeft: "star",
+};
+
+export const iconRight = DefaultTemplate.bind({});
+iconRight.args = {
+  iconRight: "star",
+};
+
 export const slotDefault = SlotTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
@@ -142,26 +152,26 @@ slotDefault.args = {
   `,
 };
 
-export const slotLeft = SlotTemplate.bind({});
-slotLeft.args = {
+export const iconLeftSlot = SlotTemplate.bind({});
+iconLeftSlot.args = {
   slotTemplate: `
     <template #left>
       <UIcon
         name="star"
-        color="gray"
-       />
+        color="green"
+      />
     </template>
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
+export const iconRightSlot = SlotTemplate.bind({});
+iconRightSlot.args = {
   slotTemplate: `
     <template #right>
       <UIcon
         name="star"
-        color="gray"
-       />
+        color="green"
+      />
     </template>
   `,
 };

package/ui.button/index.vue

@@ -11,19 +11,23 @@
     <template v-if="loading">
       <!-- Label is needed to prevent changing button height -->
       <div v-bind="textAttrs" tabindex="-1" class="invisible w-0" v-text="label" />
-      <ULoader :size="loaderSize" :color="loaderColor" v-bind="loaderAttrs" />
+      <ULoader :size="loaderSize" :color="componentColor" v-bind="loaderAttrs" />
     </template>
 
     <template v-else>
-      <!-- @slot Use it to add something before text. -->
-      <slot name="left" />
+      <!-- @slot Use it to add icon before text. -->
+      <slot name="left">
+        <UIcon v-if="iconLeft" :name="iconLeft" :color="componentColor" />
+      </slot>
 
       <!-- @slot Use it to add something instead of text. -->
       <slot />
       <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
 
-      <!-- @slot Use it to add something after text. -->
-      <slot name="right" />
+      <!-- @slot Use it to add icon after text. -->
+      <slot name="right">
+        <UIcon v-if="iconRight" :name="iconRight" :color="componentColor" />
+      </slot>
     </template>
   </component>
 </template>
@@ -33,6 +37,7 @@ import { computed, ref } from "vue";
 
 import UIService, { getRandomId } from "../service.ui";
 import ULoader from "../ui.loader";
+import UIcon from "../ui.image-icon";
 
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
@@ -157,6 +162,22 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  /**
+   * Left side icon name.
+   */
+  iconLeft: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  iconRight: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits(["click"]);
@@ -180,7 +201,7 @@ const loaderSize = computed(() => {
   return sizes[props.size];
 });
 
-const loaderColor = computed(() => {
+const componentColor = computed(() => {
   return props.variant === "primary" ? "white" : props.color;
 });
 

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

@@ -3,6 +3,7 @@
     <UInput
       v-if="isVariant.input"
       :id="id"
+      ref="inputRef"
       v-model="userFormatDate"
       :label="label"
       :placeholder="placeholder"
@@ -421,6 +422,7 @@ const rangeInputEndRef = ref(null);
 const buttonRef = ref(null);
 const buttonPrevRef = ref(null);
 const buttonNextRef = ref(null);
+const inputRef = ref(null);
 
 const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
   wrapperRef,
@@ -463,10 +465,6 @@ const i18nGlobal = tm(UDatePickerRange);
 
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
-const clickOutsideOptions = computed(() => ({
-  ignore: [buttonRef.value.buttonRef, buttonPrevRef.value.buttonRef, buttonNextRef.value.buttonRef],
-}));
-
 const locale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
@@ -610,6 +608,20 @@ const isVariant = computed(() => ({
   input: props.variant === DATE_PICKER_INPUT_TYPE,
 }));
 
+const clickOutsideOptions = computed(() => {
+  if (isVariant.value.input) {
+    return { ignore: [inputRef.value.input] };
+  }
+
+  return {
+    ignore: [
+      buttonRef.value.buttonRef,
+      buttonPrevRef.value.buttonRef,
+      buttonNextRef.value.buttonRef,
+    ],
+  };
+});
+
 const userFormatDate = computed(() => {
   if ((!localValue.value.from && !localValue.value.to) || !localValue.value.from) return "";
 

package/ui.loader-top/Docs.mdx

@@ -25,9 +25,8 @@ const {
   loaderTopOn,
   loaderTopOff,
   requestQueue,
-  componentRequestQueue,
-  setComponentRequestQueue,
-  removeComponentRequestQueue
+  addRequestUrl
+  removeRequestUrl
 } = useLoaderTop();
 
 // get loader state
@@ -42,14 +41,13 @@ loaderTopOff("/transactions");
 // get current resource array
 console.log(requestQueue.value);
 
-// get current resource array for component relayed loaders (UTable)
-console.log(componentRequestQueue.value);
+// add resource into loader queue
+addRequestUrl("/transactions");
+addRequestUrl(["/transactions", "/products"]);
 
-// add resource into component related loader queue
-setComponentRequestQueue("/transactions");
-
-// remove resource from component related loader queue
-removeComponentRequestQueue("/transactions");
+// remove resource from loader queue
+removeRequestUrl("/transactions");
+removeRequestUrl(["/transactions", "/products"]);
 `} language="jsx" dark />
 
 ## Using loader outside Vue components

package/ui.loader-top/composables/useLoaderTop.js

@@ -1,21 +1,25 @@
 import { inject, readonly, ref } from "vue";
 
+import { getRequestWithoutQuery } from "../services/loaderTop.service";
+
 export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 
-const isLoading = ref(true);
+const isLoading = ref(false);
 const requestQueue = ref([]);
 const requestTimeout = ref(0);
-const componentRequestQueue = ref([]);
 
 function loaderTopOn(url) {
-  requestQueue.value.push(url);
+  addRequestUrl(url);
+
   isLoading.value = true;
 
   clearTimeout(requestTimeout.value);
 }
 
 function loaderTopOff(url) {
-  requestQueue.value = url ? requestQueue.value.filter((item) => item !== url) : [];
+  requestQueue.value = url
+    ? requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url))
+    : [];
 
   requestTimeout.value = setTimeout(() => {
     if (!requestQueue.value.length) {
@@ -24,23 +28,30 @@ function loaderTopOff(url) {
   }, 50);
 }
 
-function setComponentRequestQueue(requests) {
-  componentRequestQueue.value = [...componentRequestQueue.value, ...requests];
+function addRequestUrl(url) {
+  Array.isArray(url)
+    ? requestQueue.value.push(...url.map(getRequestWithoutQuery))
+    : requestQueue.value.push(getRequestWithoutQuery(url));
 }
 
-function removeComponentRequestQueue() {
-  componentRequestQueue.value = [];
+function removeRequestUrl(url) {
+  if (Array.isArray(url)) {
+    url.map(getRequestWithoutQuery).forEach(removeRequestUrl);
+
+    return;
+  }
+
+  requestQueue.value = requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url));
 }
 
 export function createLoaderTop() {
   return {
     isLoading: readonly(isLoading),
     requestQueue: readonly(requestQueue),
-    componentRequestQueue: readonly(componentRequestQueue),
     loaderTopOn,
     loaderTopOff,
-    setComponentRequestQueue,
-    removeComponentRequestQueue,
+    addRequestUrl,
+    removeRequestUrl,
   };
 }
 

package/ui.loader-top/index.vue

@@ -8,7 +8,7 @@
 import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "vue";
 
 import UIService, { isMobileApp } from "../service.ui";
-import { clamp, queue } from "./services/loaderTop.service";
+import { clamp, queue, getRequestWithoutQuery } from "./services/loaderTop.service";
 import { useLoaderTop } from "./composables/useLoaderTop";
 
 import { ULoaderTop, MAXIMUM, SPEED } from "./constants";
@@ -43,15 +43,7 @@ const progress = ref(0);
 const opacity = ref(1);
 const status = ref(null);
 
-const {
-  isLoading,
-  requestQueue,
-  loaderTopOn,
-  loaderTopOff,
-  loaderRequestQueue,
-  setComponentRequestQueue,
-  removeComponentRequestQueue,
-} = useLoaderTop();
+const { requestQueue, removeRequestUrl, isLoading, loaderTopOff, loaderTopOn } = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
 const isStarted = computed(() => {
@@ -66,27 +58,27 @@ const barStyle = computed(() => {
 });
 
 const resourceNamesArray = computed(() => {
-  return Array.isArray(props.resources) ? [...props.resources] : [props.resources];
+  return Array.isArray(props.resources)
+    ? props.resources.map(getRequestWithoutQuery)
+    : [getRequestWithoutQuery(props.resources)];
 });
 
-watch(requestQueue, onChangeRequestsQueue, { deep: true });
-watch(isLoading, onChangeLoadingState, { deep: true });
-
-if (props.resources) {
-  setComponentRequestQueue(resourceNamesArray.value);
-}
+watch(() => requestQueue.value.length, onChangeRequestsQueue);
+watch(isLoading, onChangeLoadingState);
 
 onMounted(() => {
   window.addEventListener("loaderTopOn", setLoaderOnHandler);
   window.addEventListener("loaderTopOff", setLoaderOffHandler);
-});
 
-onBeforeUnmount(() => {
   if (props.resources) {
-    removeComponentRequestQueue();
+    onChangeRequestsQueue();
   }
 });
 
+onBeforeUnmount(() => {
+  removeRequestUrl(resourceNamesArray.value);
+});
+
 onUnmounted(() => {
   window.removeEventListener("loaderTopOn", setLoaderOnHandler);
   window.removeEventListener("loaderTopOff", setLoaderOffHandler);
@@ -100,12 +92,6 @@ function setLoaderOffHandler(event) {
   loaderTopOff(event.detail.resource);
 }
 
-function requestWithoutQuery(request) {
-  const [requestWithoutQuery] = request.split("?");
-
-  return requestWithoutQuery;
-}
-
 function onChangeLoadingState() {
   if (!props.resources && isStarted.value && show.value && !isLoading.value) {
     done();
@@ -116,13 +102,11 @@ function onChangeRequestsQueue() {
   let isActiveRequests = false;
 
   if (props.resources) {
-    resourceNamesArray.value.forEach((item) => {
+    resourceNamesArray.value.forEach((resource) => {
       if (!isActiveRequests) {
-        const activeRequest = requestQueue.value.find(
-          (request) => requestWithoutQuery(request) === item,
-        );
+        const activeRequest = requestQueue.value.find((request) => request === resource);
 
-        isActiveRequests = !!activeRequest;
+        isActiveRequests = Boolean(activeRequest);
       }
     });
 
@@ -132,10 +116,8 @@ function onChangeRequestsQueue() {
       done();
     }
   } else {
-    requestQueue.value.forEach((item) => {
-      const activeRequest = loaderRequestQueue.value.find(
-        (request) => request === requestWithoutQuery(item),
-      );
+    resourceNamesArray.value.forEach((resource) => {
+      const activeRequest = requestQueue.value.find((request) => request === resource);
 
       isActiveRequests = !activeRequest;
     });

package/ui.loader-top/services/loaderTop.service.js

@@ -41,3 +41,9 @@ export function loaderTopOff(resource) {
 
   window.dispatchEvent(loaderTopOfEvent);
 }
+
+export function getRequestWithoutQuery(request) {
+  const [requestWithoutQuery] = request.split("?");
+
+  return requestWithoutQuery;
+}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.177",
+  "version": "0.0.179",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -806,6 +806,24 @@
                 "type": "string"
               },
               "default": "\"\""
+            },
+            {
+              "name": "iconLeft",
+              "description": "Left side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "iconRight",
+              "description": "Right side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
             }
           ],
           "events": [
@@ -816,7 +834,7 @@
           "slots": [
             {
               "name": "left",
-              "description": "Use it to add something before text."
+              "description": "Use it to add icon before text."
             },
             {
               "name": "default",
@@ -824,7 +842,7 @@
             },
             {
               "name": "right",
-              "description": "Use it to add something after text."
+              "description": "Use it to add icon after text."
             }
           ],
           "source": {