vueless 0.0.176 → 0.0.178

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),
       );
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.176",
+  "version": "0.0.178",
   "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": {
@@ -1144,7 +1162,7 @@
               "description": "Checkbox size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -4363,7 +4381,7 @@
               "description": "Set label size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -4742,22 +4760,22 @@
           "description": "",
           "attributes": [
             {
-              "name": "resourceNames",
-              "description": "The name of API resource (endpoint URI).",
+              "name": "color",
+              "description": "The color of the loader stripe.",
               "value": {
                 "kind": "expression",
-                "type": "string|array"
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
               },
-              "default": "\"\""
+              "default": "brand"
             },
             {
-              "name": "color",
-              "description": "The color of the loader stripe.",
+              "name": "resources",
+              "description": "API resource names (endpoint URIs).",
               "value": {
                 "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
+                "type": "string|array"
               },
-              "default": "brand"
+              "default": "\"\""
             }
           ],
           "source": {
@@ -5753,7 +5771,7 @@
               "description": "Radio size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -5839,117 +5857,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "URadioCard",
-          "description": "",
-          "attributes": [
-            {
-              "name": "name",
-              "required": true,
-              "description": "Set radio card name.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "options",
-              "description": "Set options for component.",
-              "value": {
-                "kind": "expression",
-                "type": "array"
-              },
-              "default": "[]"
-            },
-            {
-              "name": "modelValue",
-              "description": "Set component value.",
-              "value": {
-                "kind": "expression",
-                "type": "string|number|boolean"
-              },
-              "default": "\"\""
-            },
-            {
-              "name": "gridCols",
-              "description": "Set grid cols number.",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "2"
-            },
-            {
-              "name": "withIcon",
-              "description": "Show / hide component icon.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "name": "color",
-              "description": "The color of the icon.",
-              "value": {
-                "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'black' | 'white' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'"
-              },
-              "default": "brand"
-            },
-            {
-              "name": "id",
-              "description": "@ignore: Generates unique element id.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "() => getRandomId()"
-            },
-            {
-              "name": "labelAlign",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "top"
-            },
-            {
-              "name": "config",
-              "description": "Sets component ui config object.",
-              "value": {
-                "kind": "expression",
-                "type": "object"
-              },
-              "default": "{}"
-            },
-            {
-              "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            }
-          ],
-          "events": [
-            {
-              "name": "update:modelValue"
-            }
-          ],
-          "slots": [
-            {
-              "name": "icon",
-              "description": "Use it to add icon."
-            }
-          ],
-          "source": {
-            "module": "./src/ui.form-radio-card/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "URadioGroup",
           "description": "",

package/ui.form-radio-card/Docs.mdx

@@ -1,16 +0,0 @@
-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} />
-<Subtitle of={stories} />
-<Description of={stories} />
-<Primary of={stories}  />
-<Controls of={stories.Default} />
-<Stories of={stories} />
-
-## Default config
-<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-radio-card/composables/attrs.composable.js

@@ -1,37 +0,0 @@
-import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
-
-import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
-
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { radio } = config.value;
-
-  const cvaRadio = cva({
-    base: radio.base,
-    variants: radio.variants,
-    compoundVariants: radio.compoundVariants,
-  });
-
-  const radioClasses = computed(() => cvaRadio({ color: props.color }));
-
-  const wrapperAttrsRaw = getAttrs("wrapper");
-  const itemsAttrs = getAttrs("items");
-  const labelAttrs = getAttrs("label");
-  const radioAttrs = getAttrs("radio", { isComponent: true, classes: radioClasses });
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-
-  const wrapperAttrs = computed(() => (classes) => ({
-    ...wrapperAttrsRaw.value,
-    class: cx([wrapperAttrsRaw.value.class, classes]),
-  }));
-
-  return {
-    radioAttrs,
-    iconAttrs,
-    wrapperAttrs,
-    labelAttrs,
-    itemsAttrs,
-  };
-}

package/ui.form-radio-card/configs/default.config.js

@@ -1,31 +0,0 @@
-export default /*tw*/ {
-  wrapper: "grid grid-rows-1 gap-4 md:gap-6 text-center",
-  title: "text-base font-normal text-gray-900 mb-1 mt-3",
-  description: "text-xs font-normal text-gray-500/[85]",
-  radio: {
-    base: "w-full right-4 top-2 !gap-0",
-    radio: "absolute right-6 top-4",
-  },
-  label: "size-full cursor-pointer",
-  items: `
-    relative mr-1 w-full cursor-pointer rounded-lg border border-solid border-gray-300 px-6 py-4
-    focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15] hover:border-gray-400
-  `,
-  icon: "mb-3 flex justify-center",
-  defaultVariants: {
-    color: "brand",
-    labelAlign: "top",
-    gridCols: 2,
-    withIcon: true,
-  },
-  safelist: (colors) => [
-    { pattern: `border-(${colors})-100`, variants: ["disabled"] },
-    { pattern: `border-(${colors})-300` },
-    { pattern: `border-(${colors})-400`, variants: ["hover"] },
-    { pattern: `border-(${colors})-500`, variants: ["focus", "active"] },
-    { pattern: `text-(${colors})-500` },
-    { pattern: `bg-(${colors})-100`, variants: ["disabled"] },
-    { pattern: `bg-(${colors})-500`, variants: ["focus"] },
-    { pattern: `ring-(${colors})-200`, variants: ["focus"] },
-  ],
-};

package/ui.form-radio-card/constants/index.js

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