vueless 0.0.178 → 0.0.180

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/ui.navigation-progress/composables/attrs.composable.js

@@ -1,12 +1,12 @@
 import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
   const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { progress } = config.value;
+  const { progress, indicator, step } = config.value;
 
   const cvaProgress = cva({
     base: progress.base,
@@ -14,6 +14,18 @@ export function useAttrs(props) {
     compoundVariants: progress.compoundVariants,
   });
 
+  const cvaIndicator = cva({
+    base: indicator.base,
+    variants: indicator.variants,
+    compoundVariants: indicator.compoundVariants,
+  });
+
+  const cvaStep = cva({
+    base: step.base,
+    variants: step.variants,
+    compoundVariants: step.compoundVariants,
+  });
+
   const progressClasses = computed(() =>
     setColor(
       cvaProgress({
@@ -24,9 +36,33 @@ export function useAttrs(props) {
     ),
   );
 
+  const indicatorClasses = computed(() =>
+    setColor(
+      cvaIndicator({
+        size: props.size,
+        color: getColor(props.color),
+      }),
+      props.color,
+    ),
+  );
+
+  const stepClasses = computed(() => setColor(cvaStep({ size: props.size }), props.color));
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const indicatorAttrs = getAttrs("indicator", { classes: indicatorClasses });
   const progressAttrs = getAttrs("progress", { classes: progressClasses });
+  const stepAttrsRaw = getAttrs("step", { classes: stepClasses });
+
+  const stepAttrs = computed(() => (classes) => ({
+    ...stepAttrsRaw.value,
+    class: cx([stepAttrsRaw.value.class, classes]),
+  }));
 
   return {
     progressAttrs,
+    wrapperAttrs,
+    indicatorAttrs,
+    stepAttrs,
+    config,
   };
 }

package/ui.navigation-progress/configs/default.config.js

@@ -1,4 +1,5 @@
 export default /*tw*/ {
+  wrapper: "h-auto flex flex-col gap-1.5 w-full",
   progress: {
     base: `
       block appearance-none border-none overflow-hidden w-full
@@ -26,6 +27,37 @@ export default /*tw*/ {
       },
     },
   },
+  indicator: {
+    base: "w-full flex justify-end font-medium text-brand-500 min-w-fit",
+    variants: {
+      color: {
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-md",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+      },
+    },
+  },
+  firstStep: "text-gray-500",
+  step: {
+    base: "flex w-full justify-end text-brand-500",
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-md",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+      },
+    },
+  },
   defaultVariants: {
     color: "brand",
     size: "md",

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

@@ -1,5 +1,7 @@
 import UProgress from "./index.vue";
 import UButton from "../ui.button/index.vue";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
 
 import { getArgTypes } from "../service.storybook";
 
@@ -16,7 +18,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UProgress, UButton },
+  components: { UProgress, UButton, UIcon },
   setup() {
     return { args };
   },
@@ -35,11 +37,134 @@ const DefaultTemplate = (args) => ({
     },
   },
   template: `
-    <UProgress :value="progress" />
+    <UProgress v-bind="args" :value="progress">
+      ${args.slotTemplate}
+    </UProgress>
 
     <UButton class="mt-4" @click="updateProgress">Update Progress</UButton>
   `,
 });
 
+const StepsTemplate = (args) => ({
+  components: { UProgress, UButton, UIcon },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      progress: 1,
+      max: ["Step 1", "Step 2", "Step 3"],
+    };
+  },
+  methods: {
+    updateProgress() {
+      this.progress += 1;
+
+      if (this.progress > 3) {
+        this.progress = 0;
+      }
+    },
+  },
+  template: `
+    <UProgress v-bind="args" :max="max" :value="progress">
+      ${args.slotTemplate}
+    </UProgress>
+
+    <UButton class="mt-4" @click="updateProgress">Update Progress</UButton>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UProgress, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  data() {
+    return {
+      progress: 10,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UProgress
+        v-for="(color, index) in colors"
+        :key="index"
+        :color="color"
+        v-bind="args" 
+        :value="progress" 
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UProgress, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  data() {
+    return {
+      progress: 10,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UProgress
+        v-for="(size, index) in sizes"
+        :key="index"
+        :size="size"
+        v-bind="args" 
+        :value="progress" 
+      />
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
+
+export const Indicator = DefaultTemplate.bind({});
+Indicator.args = { indicator: true };
+
+export const Steps = StepsTemplate.bind({});
+Steps.args = {};
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = {};
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};
+
+export const IndicatorSlot = DefaultTemplate.bind({});
+IndicatorSlot.args = {
+  indicator: true,
+  slotTemplate: `
+  <template #indicator>
+    <UIcon
+      name="star"
+      color="black"
+    />
+  </template>
+`,
+};
+
+export const stepSlot = StepsTemplate.bind({});
+stepSlot.args = {
+  slotTemplate: `
+  <template #step-0>
+    💻
+  </template>
+  <template #step-1>
+    🧇
+  </template>
+  <template #step-2>
+    😴
+  </template>
+`,
+};

package/ui.navigation-progress/index.vue

@@ -1,13 +1,37 @@
 <template>
-  <progress v-bind="progressAttrs" :max="max" :value="value" />
+  <div v-bind="wrapperAttrs">
+    <div v-if="indicator" v-bind="indicatorAttrs" :style="{ width: progressPercent }">
+      <slot name="indicator" :percent="progressPercent" :value="value" :max="realMax">
+        {{ progressPercent }}
+      </slot>
+    </div>
+
+    <progress v-bind="progressAttrs" :max="realMax" :value="value" />
+
+    <div v-if="isSteps" v-bind="stepAttrs(!value && config.firstStep)">
+      <template v-for="(step, index) in max" :key="index">
+        <slot
+          v-if="isActiveStep(index)"
+          :name="`step-${index}`"
+          :step="step"
+          :value="value"
+          :max="max"
+        >
+          {{ step }}
+        </slot>
+      </template>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { computed } from "vue";
+
 import UIService from "../service.ui";
+import { useAttrs } from "./composables/attrs.composable";
 
-import { UProgress } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import { UProgress } from "./constants";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UProgress", inheritAttrs: false });
@@ -26,7 +50,7 @@ const props = defineProps({
    * Progress max amount of steps.
    */
   max: {
-    type: Number,
+    type: [Number, Array],
     default: 100,
   },
 
@@ -47,7 +71,31 @@ const props = defineProps({
     type: String,
     default: UIService.get(defaultConfig, UProgress).default.color,
   },
+
+  /**
+   * Progress indicator visibility.
+   */
+  indicator: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UProgress).default.indicator,
+  },
 });
 
-const { progressAttrs } = useAttrs(props);
+const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, config } = useAttrs(props);
+
+const isSteps = computed(() => Array.isArray(props.max));
+
+const realMax = computed(() => {
+  if (isSteps.value) {
+    return props.max.length;
+  }
+
+  return Number(props.max);
+});
+
+const progressPercent = computed(() => `${(props.value / realMax.value) * 100}%`);
+
+function isActiveStep(index) {
+  return index + 1 == props.value;
+}
 </script>

package/ui.text-alert/configs/default.config.js

@@ -15,22 +15,22 @@ export default /*tw*/ {
   },
   body: {
     base: `
-      flex gap-2 items-baseline font-normal
+      flex gap-2 items-baseline
+      font-normal leading-normal
       [&_b]:font-bold [&_i]:italic [&_p]:font-normal
       [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
       [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
       [&_ul]:font-normal [&_ol]:font-normal
-      [&_ul]:leading-[1.125rem] [&_ol]:leading-[1.125rem]
-      [&_ul]:list-inside [&_ol]:list-inside
+      [&_ul]:leading-normal [&_ol]:leading-normal
       [&_ul]:list-disc [&_ol]:list-decimal
       [&_ul]:ml-2 [&_ol]:ml-2
     `,
     variants: {
       size: {
-        xs: "text-xs",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        xs: "text-xs space-y-2",
+        sm: "text-sm space-y-3",
+        md: "text-base space-y-4",
+        lg: "text-lg space-y-5",
       },
     },
   },

package/ui.text-block/composables/attrs.composable.js

@@ -23,9 +23,11 @@ export function useAttrs(props) {
   );
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const htmlAttrs = getAttrs("html");
 
   return {
     wrapperAttrs,
+    htmlAttrs,
     hasSlotContent,
   };
 }

package/ui.text-block/configs/default.config.js

@@ -1,22 +1,21 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      space-y-4 font-normal leading-normal
+      font-normal leading-normal
       [&_b]:font-bold [&_i]:italic [&_p]:font-normal
       [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
       [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
       [&_ul]:font-normal [&_ol]:font-normal
-      [&_ul]:leading-[1.125rem] [&_ol]:leading-[1.125rem]
-      [&_ul]:list-inside [&_ol]:list-inside
+      [&_ul]:leading-normal [&_ol]:leading-normal
       [&_ul]:list-disc [&_ol]:list-decimal
       [&_ul]:ml-2 [&_ol]:ml-2
     `,
     variants: {
       size: {
-        xs: "text-xs",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        xs: "text-xs space-y-2",
+        sm: "text-sm space-y-3",
+        md: "text-base space-y-4",
+        lg: "text-lg space-y-5",
       },
       align: {
         left: "text-left",
@@ -28,6 +27,7 @@ export default /*tw*/ {
       },
     },
   },
+  html: "",
   defaultVariants: {
     size: "md",
     align: "left",

package/ui.text-block/index.stories.js

@@ -13,29 +13,29 @@ export default {
   argTypes: {
     ...getArgTypes(UText.name),
   },
-  args: {
-    slotTemplate: `
-    <template #default>
-      <p>
-        <b>Lorem ipsum dolor sit amet</b><u>, consectetur adipiscing elit,
-        </u><em> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em>
-        <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
-      </p>
-    </template>
-  `,
-  },
+  args: {},
 };
 
+const defaultTemplate = `
+  <template #default>
+    <p>
+      <b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit,
+       sed do <u>eiusmod</u> tempor incididunt ut <i>labore</i> et dolore magna aliqua.
+      <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
+    </p>
+  </template>
+`;
+
 const DefaultTemplate = (args) => ({
-  components: { UText },
+  components: { UText, URow },
   setup() {
     const slots = getSlotNames(UText.name);
 
     return { args, slots };
   },
   template: `
-    <UText v-bind="args" >
-      ${args.slotTemplate}
+    <UText v-bind="args">
+      ${args.slotTemplate || defaultTemplate}
     </UText>
   `,
 });
@@ -56,7 +56,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
         v-bind="args"
         :key="index"
       >
-        ${args.slotTemplate}
+        ${args.slotTemplate || defaultTemplate}
       </UText>
     </URow>
   `,
@@ -97,7 +97,7 @@ export const list = DefaultTemplate.bind({});
 list.args = {
   slotTemplate: `
      <template #default>
-       <URow>
+       <URow gap="2xl">
          <ul>
            <li> Lorem ipsum dolor </li>
            <li> Lorem ipsum dolor </li>

package/ui.text-block/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-bind="wrapperAttrs" :data-cy="dataCy">
-    <!-- @slot Use it to add something. -->
-    <div v-if="!hasSlotContent($slots['default'])" v-html="html" />
+    <!-- @slot Use it to add something inside. -->
+    <div v-if="!hasSlotContent($slots['default'])" v-bind="htmlAttrs" v-html="html" />
     <slot />
   </div>
 </template>
@@ -44,7 +44,7 @@ const props = defineProps({
   },
 
   /**
-   * Remove line height.
+   * Remove line height (useful for 1-line text).
    */
   line: {
     type: Boolean,
@@ -68,5 +68,5 @@ const props = defineProps({
   },
 });
 
-const { wrapperAttrs, hasSlotContent } = useAttrs(props);
+const { wrapperAttrs, htmlAttrs, hasSlotContent } = useAttrs(props);
 </script>