vueless 0.0.14 → 0.0.16

package/ui.form-select/index.vue

@@ -4,8 +4,8 @@
     :for="id"
     :size="size"
     :label="label"
-    :error="errorMessage"
-    :description="descriptionMessage"
+    :error="error"
+    :description="description"
     :align="labelAlign"
     :disabled="disabled"
     :data-cy="dataCy"
@@ -244,11 +244,12 @@ const props = defineProps({
   },
 
   /**
-   * Show label outside the select block.
+   * Set label placement related from the default slot.
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
-  labelOutside: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, USelect).default.labelOutside,
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, USelect).default.labelAlign,
   },
 
   /**
@@ -506,10 +507,6 @@ const isSelectedValueLabelVisible = computed(() => {
   return !props.multiple && isLocalValue.value && (!isOpen.value || !props.searchable);
 });
 
-const labelAlign = computed(() => {
-  return props.labelOutside ? "top" : "topInside";
-});
-
 const filteredOptions = computed(() => {
   const normalizedSearch = search.value.toLowerCase().trim();
 
@@ -561,14 +558,6 @@ const isLocalValue = computed(() => {
     : Boolean(String(localValue.value));
 });
 
-const errorMessage = computed(() => {
-  return !isOpen.value && props.error ? props.error : "";
-});
-
-const descriptionMessage = computed(() => {
-  return !isOpen.value && props.description ? props.description : "";
-});
-
 watch(search, () => onSearchChange);
 watch(
   localValue,

package/ui.form-switch/index.vue

@@ -61,7 +61,7 @@ const props = defineProps({
 
   /**
    * Label alignment.
-   * @values left, right
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
   labelAlign: {
     type: String,

package/ui.form-textarea/index.vue

@@ -99,8 +99,8 @@ const props = defineProps({
   },
 
   /**
-   * Input label place (above the input box or inside of it).
-   * @values topInside, top
+   * Set label placement related from the default slot.
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
   labelAlign: {
     type: String,

package/ui.notify/index.vue

@@ -1,7 +1,7 @@
 <template>
   <notifications
     group="notify"
-    class="vueless-notify !top-3 mt-safe-top !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
+    class="vueless-notify mt-safe-top !top-3 !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
     :position="position"
   >
     <template #body="{ item, close: onClickClose }">
@@ -145,8 +145,8 @@ export default {
 
       const NOTIFY_CLASS = "vueless-notify";
       const classes = globalComponentConfig.UNotify?.positionClasses;
-      const pageWidth = getOffsetWidth(classes.page);
-      const asideWidth = getOffsetWidth(classes.aside);
+      const pageWidth = getOffsetWidth(classes.page || "UNotifyPage");
+      const asideWidth = getOffsetWidth(classes.aside || "UNotifyAside");
       const notifyWidth = getOffsetWidth(NOTIFY_CLASS);
 
       if (!pageWidth) return;

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

@@ -0,0 +1,32 @@
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { progress } = config.value;
+
+  const cvaProgress = cva({
+    base: progress.base,
+    variants: progress.variants,
+    compoundVariants: progress.compoundVariants,
+  });
+
+  const progressClasses = computed(() =>
+    setColor(
+      cvaProgress({
+        position: props.position,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const progressAttrs = getAttrs("progress", { classes: progressClasses.value });
+
+  return {
+    progressAttrs,
+  };
+}

package/ui.other-loader-top/configs/default.config.js

@@ -0,0 +1,20 @@
+export default /*tw*/ {
+  progress: {
+    base: "top-0 left-0 right-0 fixed h-[3px] transition-all ease-linear bg-{color}-500",
+    variants: {
+      position: {
+        fixed: "fixed",
+        absolute: "absolute",
+      },
+      error: {
+        true: "bg-red-500",
+      },
+    },
+  },
+  progressMobile: "mt-safe-top mx-3 rounded max-w-[calc(100%-1.5rem)]",
+  defaultVariants: {
+    color: "blue",
+    position: "fixed",
+  },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
+};

package/ui.other-loader-top/constants/index.js

@@ -0,0 +1,8 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const ULoaderTop = "ULoaderTop";
+
+export const MAXIMUM = 97.5;
+export const SPEED = 150;

package/ui.other-loader-top/index.vue

@@ -0,0 +1,230 @@
+<template>
+  <Transition :css="false" @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
+    <div v-if="show" v-bind="progressAttrs" :style="barStyle" />
+  </Transition>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, watch, ref } from "vue";
+
+import { useStore } from "vuex";
+
+import UIService, { isMobileApp } from "../service.ui";
+import { clamp, queue } from "./services/loaderTop.service";
+
+import { ULoaderTop, MAXIMUM, SPEED } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+defineOptions({ name: "ULoaderTop" });
+
+const props = defineProps({
+  /**
+   * The name of API resource (endpoint URI).
+   */
+  resourceNames: {
+    type: [String, Array],
+    default: "",
+  },
+
+  /**
+   * Loader position.
+   * @values fixed, absolute, relative
+   */
+  position: {
+    type: String,
+    default: UIService.get(defaultConfig, ULoaderTop).default.position,
+  },
+
+  /**
+   * The color of the loader stripe.
+   * @values gray, red, orange, yellow, green, blue, violet, fuchsia
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, ULoaderTop).default.color,
+  },
+});
+
+const store = useStore();
+
+const error = ref(false);
+const show = ref(false);
+const progress = ref(0);
+const opacity = ref(1);
+const status = ref(null);
+
+const { progressAttrs } = useAttrs(props, { error, isMobileApp });
+
+const loaderRequestQueue = computed(() => store.state.loaderTop.loaderRequestQueue);
+const isLoading = computed(() => store.state.loaderTop.isLoading);
+const componentLoaderRequestQueue = computed(
+  () => store.state.loaderTop.componentLoaderRequestQueue,
+);
+
+const isStarted = computed(() => {
+  return typeof status.value === "number";
+});
+
+const barStyle = computed(() => {
+  return {
+    width: `${progress.value}%`,
+    opacity: `${opacity.value}`,
+  };
+});
+
+const resourceNamesArray = computed(() => {
+  return Array.isArray(props.resourceNames) ? [...props.resourceNames] : [props.resourceNames];
+});
+
+watch(loaderRequestQueue, onChangeRequestsQueue, { deep: true });
+watch(isLoading, onChangeLoadingState, { deep: true });
+
+if (props.resourceNames) {
+  store.commit("loaderTop/SET_COMPONENT_REQUEST_QUEUE", resourceNamesArray.value);
+}
+
+onBeforeUnmount(() => {
+  if (props.resourceNames) {
+    store.commit("loaderTop/REMOVE_COMPONENT_REQUEST_QUEUE");
+  }
+});
+
+function requestWithoutQuery(request) {
+  const [requestWithoutQuery] = request.split("?");
+
+  return requestWithoutQuery;
+}
+
+function onChangeLoadingState() {
+  if (!props.resourceNames && isStarted.value && show.value && !isLoading.value) {
+    done();
+  }
+}
+
+function onChangeRequestsQueue() {
+  let isActiveRequests = false;
+
+  if (props.resourceNames) {
+    resourceNamesArray.value.forEach((item) => {
+      if (!isActiveRequests) {
+        const activeRequest = loaderRequestQueue.value.find(
+          (request) => requestWithoutQuery(request) === item,
+        );
+
+        isActiveRequests = !!activeRequest;
+      }
+    });
+
+    if (isActiveRequests && !isStarted.value) {
+      start();
+    } else if (!isActiveRequests && isStarted.value && show.value) {
+      done();
+    }
+  } else {
+    loaderRequestQueue.value.forEach((item) => {
+      const activeRequest = componentLoaderRequestQueue.value.find(
+        (request) => request === requestWithoutQuery(item),
+      );
+
+      isActiveRequests = !activeRequest;
+    });
+
+    if (isLoading.value && isActiveRequests && !isStarted.value) {
+      start();
+    }
+  }
+}
+
+function beforeEnter() {
+  opacity.value = 0;
+  progress.value = 0;
+}
+
+function enter(el, done) {
+  opacity.value = 1;
+  done();
+}
+
+function afterEnter() {
+  runStart();
+}
+
+function work() {
+  setTimeout(() => {
+    if (!isStarted.value) {
+      return;
+    }
+
+    increase();
+    work();
+  }, 100);
+}
+
+function runStart() {
+  status.value = progress.value === 100 ? null : progress.value;
+
+  work();
+}
+
+function start() {
+  if (show.value) {
+    runStart();
+  } else {
+    show.value = true;
+  }
+}
+
+function set(amount) {
+  let currentProgress;
+
+  if (isStarted.value) {
+    currentProgress = amount < progress.value ? clamp(amount, 0, 100) : clamp(amount, 0.8, 100);
+  } else {
+    currentProgress = 0;
+  }
+
+  status.value = currentProgress === 100 ? null : currentProgress;
+
+  queue((next) => {
+    progress.value = currentProgress;
+
+    if (currentProgress === 100) {
+      setTimeout(() => {
+        opacity.value = 0;
+        setTimeout(() => {
+          show.value = false;
+          error.value = false;
+          next();
+        }, SPEED);
+      }, SPEED);
+    } else {
+      setTimeout(next, SPEED);
+    }
+  });
+}
+
+function increase(amount) {
+  const currentProgress = progress.value;
+
+  if (currentProgress < 100 && typeof amount !== "number") {
+    if (currentProgress >= 0 && currentProgress < 25) {
+      amount = Math.random() * 3 + 3;
+    } else if (currentProgress >= 25 && currentProgress < 50) {
+      amount = Math.random() * 3;
+    } else if (currentProgress >= 50 && currentProgress < 85) {
+      amount = Math.random() * 2;
+    } else if (currentProgress >= 85 && currentProgress < 99) {
+      amount = 0.5;
+    } else {
+      amount = 0;
+    }
+  }
+
+  set(clamp(currentProgress + amount, 0, MAXIMUM));
+}
+
+function done() {
+  set(100);
+}
+</script>

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

@@ -0,0 +1,31 @@
+export function clamp(n, min, max) {
+  if (n < min) {
+    return min;
+  }
+
+  if (n > max) {
+    return max;
+  }
+
+  return n;
+}
+
+export const queue = (() => {
+  let pending = [];
+
+  function next() {
+    let fn = pending.shift();
+
+    if (fn) {
+      fn(next);
+    }
+  }
+
+  return (fn) => {
+    pending.push(fn);
+
+    if (pending.length === 1) {
+      next();
+    }
+  };
+})();

package/ui.text-badge/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="wrapperRef"
     tabindex="1"
     :data-cy="dataCy"
     v-bind="wrapperAttrs"
@@ -26,6 +27,8 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
+
 import UIService from "../service.ui";
 
 import { UBadge } from "./constants";
@@ -102,6 +105,10 @@ const emit = defineEmits(["focus", "keydown", "blur", "click"]);
 
 const { bodyAttrs, wrapperAttrs, hasSlotContent } = useAttrs(props);
 
+const wrapperRef = ref(null);
+
+defineExpose({ wrapperRef });
+
 function onFocus() {
   emit("focus");
 }