vueless 0.0.175 → 0.0.177

package/ui.form-select/configs/default.config.js

@@ -9,9 +9,9 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
-        sm: "pt-2 pb-2",
-        md: "pt-2.5 pb-2.5",
-        lg: "pt-3 pb-3",
+        sm: "pt-2 pb-1.5",
+        md: "pt-2.5 pb-1.5",
+        lg: "pt-3 pb-2",
       },
       error: {
         true: `
@@ -27,9 +27,9 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, size: "sm", class: "pt-6" },
-      { labelAlign: "topInside", label: true, size: "md", class: "pt-7" },
-      { labelAlign: "topInside", label: true, size: "lg", class: "pt-8" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
     ],
   },
   innerWrapper: {
@@ -48,8 +48,8 @@ export default /*tw*/ {
     base: "flex items-center mt-0",
     compoundVariants: [
       { labelAlign: "topInside", size: "sm", label: true, class: "-mt-3" },
-      { labelAlign: "topInside", size: "md", label: true, class: "-mt-4" },
-      { labelAlign: "topInside", size: "lg", label: true, class: "-mt-5" },
+      { labelAlign: "topInside", size: "md", label: true, class: "-mt-3" },
+      { labelAlign: "topInside", size: "lg", label: true, class: "-mt-4" },
     ],
   },
   beforeCaretSlot: "",

package/ui.form-select/index.vue

@@ -41,7 +41,7 @@
           internal
           interactive
           color="gray"
-          :size="size"
+          :size="iconSize"
           :name="config.toggleIconName"
           v-bind="toggleIconAttrs"
         />
@@ -60,7 +60,7 @@
           internal
           interactive
           color="gray"
-          :size="size"
+          :size="iconSize"
           :name="config.clearIconName"
           v-bind="clearIconAttrs"
           @mousedown="removeElement"
@@ -93,7 +93,7 @@
                 internal
                 interactive
                 color="gray"
-                :size="size"
+                :size="iconSize"
                 :name="config.removeItemIconName"
                 v-bind="removeItemIconAttrs"
                 @mousedown="removeElement(item)"
@@ -503,6 +503,16 @@ const {
 const i18nGlobal = tm(USelect);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "sm",
+    md: "md",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
 const inputPlaceholder = computed(() => {
   const message = currentLocale.value.addMore;
 

package/ui.form-textarea/configs/default.config.js

@@ -4,10 +4,10 @@ export default /*tw*/ {
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {
     base: `
-      transition duration-100 ease-in-out focus-within:outline-none rounded-lg border
-      border-solid border-gray-300 focus-within:border-gray-500 focus-within:ring-4
-      focus-within:ring-gray-600/[.15] ring-0 hover:border-gray-400 pl-4 hover:focus-within:border-gray-500
-      cursor-text bg-white
+      transition duration-100 ease-in-out focus-within:outline-none
+      rounded-lg border border-solid border-gray-300 ring-0 cursor-text bg-white pr-4
+      hover:border-gray-400 pl-4 hover:focus-within:border-gray-500
+      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
     `,
     variants: {
       error: {
@@ -24,18 +24,15 @@ export default /*tw*/ {
         true: "ring-0 border-gray-300 focus-within:ring-0 focus-within:border-brand-300",
       },
       size: {
-        sm: "pb-2 pr-4 pt-6",
-        md: "pb-2.5 pr-4 pt-7",
-        lg: "pb-3 pr-4 pt-8",
+        sm: "pt-2 pb-2",
+        md: "pt-2.5 pb-2.5",
+        lg: "pt-3 pb-3",
       },
     },
     compoundVariants: [
-      { labelAlign: "top", size: "sm", class: "pt-2" },
-      { labelAlign: "top", size: "md", class: "pt-2.5" },
-      { labelAlign: "top", size: "lg", class: "pt-3" },
-      { labelAlign: "topInside", label: false, class: "pt-2" },
-      { labelAlign: "topInside", label: false, class: "pt-2.5" },
-      { labelAlign: "topInside", label: false, class: "pt-3" },
+      { labelAlign: "topInside", label: true, class: "pt-5 pb-1.5" },
+      { labelAlign: "topInside", label: true, class: "pt-6 pb-1.5" },
+      { labelAlign: "topInside", label: true, class: "pt-7 pb-2" },
     ],
   },
   textarea: {

package/ui.loader-rendering/Docs.mdx

@@ -1,7 +1,8 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../service.storybook";
 
 import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.loader-rendering/index.stories.js

@@ -1,5 +1,6 @@
 import ULoaderRendering from "../ui.loader-rendering";
 import UButton from "../ui.button";
+import UGroup from "../ui.container-group";
 
 import { useLoaderRendering } from "./composables/useLoaderRendering";
 
@@ -10,11 +11,18 @@ import { getArgTypes } from "../service.storybook";
  */
 export default {
   id: "9030",
-  title: "Loaders and Skeletons / Loader rendering",
+  title: "Loaders and Skeletons / Loader Rendering",
   component: ULoaderRendering,
   argTypes: {
     ...getArgTypes(ULoaderRendering.name),
   },
+  parameters: {
+    docs: {
+      story: {
+        height: "420px",
+      },
+    },
+  },
 };
 
 const DefaultTemplate = (args) => ({
@@ -23,32 +31,29 @@ const DefaultTemplate = (args) => ({
     return { args };
   },
   template: `
-    <div>
-      <ULoaderRendering v-bind="args" class="!static !w-full" />
-    </div>
+    <ULoaderRendering v-bind="args" class="w-full h-full" />
   `,
 });
 
 const LoadingTemplate = (args) => ({
-  components: { ULoaderRendering, UButton },
+  components: { ULoaderRendering, UButton, UGroup },
   setup() {
-    const { setRenderingFinished, isRenderingPage, setRenderingStarted } = useLoaderRendering();
+    const { loaderRenderingOn, loaderRenderingOff, isLoading } = useLoaderRendering();
 
-    return { args, setRenderingFinished, setRenderingStarted, isRenderingPage };
+    return { args, loaderRenderingOn, loaderRenderingOff, isLoading };
   },
   methods: {
     toggleLoading() {
-      this.isRenderingPage ? this.setRenderingFinished() : this.setRenderingStarted();
+      this.isLoading ? this.loaderRenderingOff() : this.loaderRenderingOn();
     },
   },
   template: `
-      <div class="flex justify-center items-center pb-4">
-        <UButton label="Toggle loading" @click="toggleLoading"/>
-      </div>
-      <div>
-        <ULoaderRendering v-bind="args" class="!static !w-full" />
-      </div>
-    `,
+    <UGroup align="center" class="pb-4">
+      <UButton label="Toggle loading" size="sm" @click="toggleLoading"/>
+    </UGroup>
+
+    <ULoaderRendering v-bind="args" class="!static w-full h-96" />
+  `,
 });
 
 export const Default = DefaultTemplate.bind({});

package/ui.loader-top/Docs.mdx

@@ -12,25 +12,57 @@ import defaultConfig from "./configs/default.config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## Control loader
-You can control loader state using *useLoaderRendering* composable.
+## Using loader
+To control the loader state in Vue components use `useLoaderTop` composable.
+
+The loader uses queue of resources and will be shown until at least one item is present in a queue.
 
 <Source code={`
 import { useLoaderTop } from "vueless";
 
 const {
-    loaderTopOn,
-    loaderTopOff,
-    addRequestUrl,
-    removeRequestUrl
+  isLoading,
+  loaderTopOn,
+  loaderTopOff,
+  requestQueue,
+  componentRequestQueue,
+  setComponentRequestQueue,
+  removeComponentRequestQueue
 } = useLoaderTop();
+
+// get loader state
+console.log(isLoading.value);
+
+// show loader (add resource into queue)
+loaderTopOn("/transactions");
+
+// hide loader (remove resource from queue)
+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 component related loader queue
+setComponentRequestQueue("/transactions");
+
+// remove resource from component related loader queue
+removeComponentRequestQueue("/transactions");
 `} language="jsx" dark />
 
-## Control outside a component
-You can control loader state outside vue components using the following methods.
+## Using loader outside Vue components
+To control the loader state outside Vue components, use the following methods.
 
 <Source code={`
 import { loaderTopOn, loaderTopOff } from "vueless";
+
+// show loader
+loaderTopOn("/transactions");
+
+// hide loader
+loaderTopOff("/transactions");
 `} language="jsx" dark />
 
 ## Default config

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

@@ -4,54 +4,41 @@ export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 
 const isLoading = ref(true);
 const requestQueue = ref([]);
-const loaderRequestQueue = ref([]);
-const loaderRequestTimeout = ref(0);
-const componentLoaderRequestQueue = ref([]);
+const requestTimeout = ref(0);
+const componentRequestQueue = ref([]);
 
 function loaderTopOn(url) {
-  loaderRequestQueue.value.push(url);
+  requestQueue.value.push(url);
   isLoading.value = true;
 
-  clearTimeout(loaderRequestTimeout.value);
+  clearTimeout(requestTimeout.value);
 }
 
 function loaderTopOff(url) {
-  loaderRequestQueue.value = url ? loaderRequestQueue.value.filter((item) => item !== url) : [];
+  requestQueue.value = url ? requestQueue.value.filter((item) => item !== url) : [];
 
-  loaderRequestTimeout.value = setTimeout(() => {
-    if (!loaderRequestQueue.value.length) {
+  requestTimeout.value = setTimeout(() => {
+    if (!requestQueue.value.length) {
       isLoading.value = false;
     }
   }, 50);
 }
 
-function addRequestUrl(url) {
-  requestQueue.value.push(url);
-}
-
-function removeRequestUrl(url) {
-  requestQueue.value = requestQueue.value.filter((item) => item !== url);
-}
-
 function setComponentRequestQueue(requests) {
-  componentLoaderRequestQueue.value = [...componentLoaderRequestQueue.value, ...requests];
+  componentRequestQueue.value = [...componentRequestQueue.value, ...requests];
 }
 
 function removeComponentRequestQueue() {
-  componentLoaderRequestQueue.value = [];
+  componentRequestQueue.value = [];
 }
 
 export function createLoaderTop() {
   return {
     isLoading: readonly(isLoading),
     requestQueue: readonly(requestQueue),
-    loaderRequestQueue: readonly(loaderRequestQueue),
-    loaderRequestTimeout: readonly(loaderRequestTimeout),
-    componentLoaderRequestQueue: readonly(componentLoaderRequestQueue),
+    componentRequestQueue: readonly(componentRequestQueue),
     loaderTopOn,
     loaderTopOff,
-    addRequestUrl,
-    removeRequestUrl,
     setComponentRequestQueue,
     removeComponentRequestQueue,
   };

package/ui.loader-top/index.stories.js

@@ -1,5 +1,8 @@
 import ULoaderTop from "../ui.loader-top";
 import UButton from "../ui.button";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
+import UBadge from "../ui.text-badge";
 
 import { useLoaderTop } from "./composables/useLoaderTop";
 import { loaderTopOff, loaderTopOn } from "./services/loaderTop.service";
@@ -11,7 +14,7 @@ import { getArgTypes } from "../service.storybook";
  */
 export default {
   id: "9020",
-  title: "Loaders and Skeletons / Loader top",
+  title: "Loaders and Skeletons / Loader Top",
   component: ULoaderTop,
   argTypes: {
     ...getArgTypes(ULoaderTop.name),
@@ -19,26 +22,24 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { ULoaderTop, UButton },
+  components: { ULoaderTop, UButton, URow },
   setup() {
     const { loaderTopOn, loaderTopOff } = useLoaderTop();
 
     return { args, loaderTopOn, loaderTopOff };
   },
   template: `
-    <div>
-        <ULoaderTop color="blue" v-bind="args" resource-names="https://api.publicapis.org/entries"/>
+    <ULoaderTop color="blue" v-bind="args" resources="https://api.publicapis.org/entries"/>
 
-        <div class="flex gap-2">
-          <UButton label="On" @click="setLoaderOn('https://api.publicapis.org/entries')" />
-          <UButton label="Off" @click="setLoaderOff('https://api.publicapis.org/entries')" />
-        </div>
-    </div>
+    <URow gap="sm">
+      <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/entries')" />
+      <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/entries')" />
+    </URow>
   `,
 });
 
 const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { ULoaderTop, UButton },
+  components: { ULoaderTop, UButton, UGroup, URow, UBadge },
   setup() {
     return {
       args,
@@ -48,19 +49,23 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <div class="flex gap-4 flex-col">
-      <ULoaderTop
-        class="static"
-        v-for="(color, index) in colors"
-        :color="color"
-        v-bind="args"
-        :key="index"
-      />
-    </div>
-    <div class="flex gap-2 pt-4">
-      <UButton label="On" @click="loaderTopOn('https://api.publicapis.org/entries')" />
-      <UButton label="Off" @click="loaderTopOff('https://api.publicapis.org/entries')" />
-    </div>
+    <UGroup>
+      <URow gap="sm" class="pb-4">
+        <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/images')" />
+        <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/images')" />
+      </URow>
+
+      <URow align="center" v-for="(color, index) in colors" :key="index">
+        <UBadge :label="color" :color="color" />
+        <ULoaderTop
+          resources="https://api.publicapis.org/images"
+          class="static"
+          :color="color"
+          v-bind="args"
+        />
+      </URow>
+
+    </UGroup>
   `,
 });
 

package/ui.loader-top/index.vue

@@ -19,14 +19,6 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "ULoaderTop", inheritAttrs: false });
 
 const props = defineProps({
-  /**
-   * The name of API resource (endpoint URI).
-   */
-  resourceNames: {
-    type: [String, Array],
-    default: "",
-  },
-
   /**
    * The color of the loader stripe.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
@@ -35,6 +27,14 @@ const props = defineProps({
     type: String,
     default: UIService.get(defaultConfig, ULoaderTop).default.color,
   },
+
+  /**
+   * API resource names (endpoint URIs).
+   */
+  resources: {
+    type: [String, Array],
+    default: "",
+  },
 });
 
 const error = ref(false);
@@ -44,13 +44,13 @@ const opacity = ref(1);
 const status = ref(null);
 
 const {
-  loaderRequestQueue,
   isLoading,
-  componentLoaderRequestQueue,
+  requestQueue,
+  loaderTopOn,
+  loaderTopOff,
+  loaderRequestQueue,
   setComponentRequestQueue,
   removeComponentRequestQueue,
-  loaderTopOff,
-  loaderTopOn,
 } = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
@@ -66,13 +66,13 @@ const barStyle = computed(() => {
 });
 
 const resourceNamesArray = computed(() => {
-  return Array.isArray(props.resourceNames) ? [...props.resourceNames] : [props.resourceNames];
+  return Array.isArray(props.resources) ? [...props.resources] : [props.resources];
 });
 
-watch(loaderRequestQueue, onChangeRequestsQueue, { deep: true });
+watch(requestQueue, onChangeRequestsQueue, { deep: true });
 watch(isLoading, onChangeLoadingState, { deep: true });
 
-if (props.resourceNames) {
+if (props.resources) {
   setComponentRequestQueue(resourceNamesArray.value);
 }
 
@@ -82,7 +82,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  if (props.resourceNames) {
+  if (props.resources) {
     removeComponentRequestQueue();
   }
 });
@@ -107,7 +107,7 @@ function requestWithoutQuery(request) {
 }
 
 function onChangeLoadingState() {
-  if (!props.resourceNames && isStarted.value && show.value && !isLoading.value) {
+  if (!props.resources && isStarted.value && show.value && !isLoading.value) {
     done();
   }
 }
@@ -115,10 +115,10 @@ function onChangeLoadingState() {
 function onChangeRequestsQueue() {
   let isActiveRequests = false;
 
-  if (props.resourceNames) {
+  if (props.resources) {
     resourceNamesArray.value.forEach((item) => {
       if (!isActiveRequests) {
-        const activeRequest = loaderRequestQueue.value.find(
+        const activeRequest = requestQueue.value.find(
           (request) => requestWithoutQuery(request) === item,
         );
 
@@ -132,8 +132,8 @@ function onChangeRequestsQueue() {
       done();
     }
   } else {
-    loaderRequestQueue.value.forEach((item) => {
-      const activeRequest = componentLoaderRequestQueue.value.find(
+    requestQueue.value.forEach((item) => {
+      const activeRequest = loaderRequestQueue.value.find(
         (request) => request === requestWithoutQuery(item),
       );