vueless 0.0.13 → 0.0.15

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");
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.8",
+  "version": "0.0.15",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -966,7 +966,7 @@
               "description": "Label placement.",
               "value": {
                 "kind": "expression",
-                "type": "'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
               "default": "left"
             },
@@ -3225,13 +3225,13 @@
               "default": "\"\""
             },
             {
-              "name": "labelOutside",
-              "description": "Show label outside the input block.",
+              "name": "labelAlign",
+              "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
               "name": "placeholder",
@@ -3425,13 +3425,13 @@
               "default": "\"\""
             },
             {
-              "name": "labelOutside",
+              "name": "labelAlign",
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'topInside' | 'top' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
               "name": "files",
@@ -3888,13 +3888,13 @@
               "default": "false"
             },
             {
-              "name": "labelOutside",
+              "name": "labelAlign",
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'topInside' | 'top' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
               "name": "error",
@@ -4137,7 +4137,7 @@
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'topInside' | 'top' | 'topWithDesc' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
               "default": "top"
             },
@@ -4443,15 +4443,6 @@
               },
               "default": "\"\""
             },
-            {
-              "name": "zIndex",
-              "description": "The z-list of the loader stripe.",
-              "value": {
-                "kind": "expression",
-                "type": "'auto' | '50' | '100'"
-              },
-              "default": "\"auto\""
-            },
             {
               "name": "position",
               "description": "Loader position.",
@@ -4459,7 +4450,7 @@
                 "kind": "expression",
                 "type": "'fixed' | 'absolute' | 'relative'"
               },
-              "default": "\"fixed\""
+              "default": "fixed"
             },
             {
               "name": "color",
@@ -4468,11 +4459,11 @@
                 "kind": "expression",
                 "type": "'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'violet' | 'fuchsia'"
               },
-              "default": "globalComponentConfig.ULoaderTop?.color"
+              "default": "blue"
             }
           ],
           "source": {
-            "module": "/src/ui.loader-top/index.vue",
+            "module": "/src/ui.other-loader-top/index.vue",
             "symbol": "default"
           }
         },
@@ -5401,7 +5392,7 @@
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
               "default": "UIService.get(defaultConfig, URadio).default.labelAlign"
             },
@@ -5453,10 +5444,13 @@
           ],
           "events": [
             {
-              "name": "update:value"
+              "name": "update:modelValue"
             }
           ],
           "slots": [
+            {
+              "name": "default"
+            },
             {
               "name": "footer"
             }
@@ -5534,6 +5528,14 @@
               },
               "default": "() => getRandomId()"
             },
+            {
+              "name": "labelAlign",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "top"
+            },
             {
               "name": "config",
               "description": "Sets component ui config object.",
@@ -5754,13 +5756,13 @@
               "default": "\"\""
             },
             {
-              "name": "labelOutside",
-              "description": "Show label outside the select block.",
+              "name": "labelAlign",
+              "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
               "name": "placeholder",
@@ -6097,7 +6099,7 @@
               "description": "Label alignment.",
               "value": {
                 "kind": "expression",
-                "type": "'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
               "default": "left"
             },
@@ -6665,10 +6667,10 @@
             },
             {
               "name": "labelAlign",
-              "description": "Input label place (above the input box or inside of it).",
+              "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'topInside' | 'top'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
               "default": "topInside"
             },
@@ -7004,104 +7006,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "VueTopprogress",
-          "description": "",
-          "attributes": [
-            {
-              "name": "speed",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "150"
-            },
-            {
-              "name": "color",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"#29d\""
-            },
-            {
-              "name": "colorShadow",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "errorColor",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"#f44336\""
-            },
-            {
-              "name": "trickle",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "name": "trickleSpeed",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "100"
-            },
-            {
-              "name": "easing",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"linear\""
-            },
-            {
-              "name": "height",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "3"
-            },
-            {
-              "name": "minimum",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "0.8"
-            },
-            {
-              "name": "maximum",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "97.5"
-            },
-            {
-              "name": "zIndex",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "9999"
-            }
-          ],
-          "source": {
-            "module": "/src/ui.loader-top/components/TopProgress.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "YearView",
           "description": "",

package/service.tailwind/index.js

@@ -1,103 +0,0 @@
-import colors from "tailwindcss/colors.js";
-import forms from "@tailwindcss/forms";
-import vuelessConfig from "../../vueless.config.js";
-
-export const grayColors = ["slate", "gray", "zinc", "neutral", "stone"];
-export const brandColors = [
-  "brand",
-  "red",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose",
-];
-
-export default class TailwindServiceDefault {
-  constructor() {
-    this.vuelessPreset = this.get();
-  }
-
-  /**
-   * Transform CSS variable with RGB numbers into CSS color.
-   * @returns {Function}
-   */
-  static twColorWithOpacity(variableName) {
-    return ({ opacityValue }) => {
-      return opacityValue !== undefined
-        ? `rgba(var(${variableName}), ${opacityValue})`
-        : `rgb(var(${variableName}))`;
-    };
-  }
-
-  /**
-   * Convert sting patterns to RegExp.
-   * @returns {Array} - TailwindCSS safelist.
-   */
-  static getSafelist() {
-    return JSON.parse(process.env.SAFELIST_JSON || "[]").map((rule) => ({
-      ...rule,
-      pattern: new RegExp(rule.pattern),
-    }));
-  }
-
-  /**
-   * Generates preset for TailwindCSS base on Vueless config.
-   * @returns {Object}
-   */
-  get() {
-    const isProd = process.env.NODE_ENV === "production";
-    const brandColor = TailwindServiceDefault.twColorWithOpacity("--color-brand");
-    const { brand, gray } = vuelessConfig;
-
-    let brandPalette = brandColors.includes(brand) ? colors[brand] : colors.green;
-    let grayPalette = grayColors.includes(gray) ? colors[gray] : colors.zinc;
-
-    if (brand === "grayscale") {
-      brandPalette = grayPalette;
-    }
-
-    const prodSafelist = TailwindServiceDefault.getSafelist();
-    const devSafelist = [
-      {
-        pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
-        variants: ["hover", "focus", "focus-within", "active"],
-      },
-    ];
-
-    return {
-      content: [
-        "./index.html",
-        "./src/**/*.{js,ts,jsx,tsx,vue}",
-        "./vueless.config.{js,ts}",
-        "./node_modules/vueless/**/*.{js,ts,vue}",
-      ],
-      safelist: isProd ? prodSafelist : devSafelist,
-      theme: {
-        extend: {
-          colors: {
-            brand: { ...brandPalette, DEFAULT: brandColor },
-            gray: grayPalette,
-          },
-          fontSize: {
-            "2xs": ["0.625rem", "0.875rem"], //  10px
-          },
-        },
-      },
-      plugins: [forms],
-    };
-  }
-}
-
-export const { vuelessPreset } = new TailwindServiceDefault();