vueless 0.0.77 → 0.0.79

package/index.js

@@ -14,14 +14,7 @@ export {
   loaderRenderingOn,
   loaderRenderingOff,
 } from "./ui.loader-rendering/services/loaderRedering.service";
-export {
-  loaderTopOn,
-  loaderTopOff,
-  addLoadingTopRequestUrl,
-  removeLoadingTopRequestUrl,
-  setLoadingTopComponentRequestQueue,
-  removeLoadingTopComponentRequestQueue,
-} from "./ui.loader-top/services/loaderTop.service";
+export { loaderTopOn, loaderTopOff } from "./ui.loader-top/services/loaderTop.service";
 export {
   notify,
   notifySuccess,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.loader-top/Docs.mdx

@@ -22,12 +22,10 @@ You can control loader state using *useLoaderRendering* composable.
 import { useLoaderTop } from "vueless";
 
 const { 
-    setLoadingOn,
-    setLoadingOff,
+    setLoaderOn,
+    setLoaderOff,
     addRequestUrl,
-    removeRequestUrl,
-    setComponentRequestQueue,
-    removeComponentRequestQueue,
+    removeRequestUrl
 } = useLoaderTop();
 `} language="jsx" dark />
 
@@ -38,9 +36,5 @@ You can control loader state outside of vue components using following methods.
 import {
   loaderTopOn,
   loaderTopOff,
-  addLoadingTopRequestUrl,
-  removeLoadingTopRequestUrl,
-  setLoadingTopComponentRequestQueue,
-  removeLoadingTopComponentRequestQueue,
 } from "vueless";
 `} language="jsx" dark />

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

@@ -8,7 +8,7 @@ const loaderRequestQueue = ref([]);
 const loaderRequestTimeout = ref(0);
 const componentLoaderRequestQueue = ref([]);
 
-function setLoadingOn(url) {
+function setLoaderOn(url) {
   loaderRequestQueue.value.push(url);
 
   isLoading.value = true;
@@ -16,7 +16,7 @@ function setLoadingOn(url) {
   clearTimeout(loaderRequestTimeout.value);
 }
 
-function setLoadingOff(url) {
+function setLoaderOff(url) {
   loaderRequestQueue.value = url ? loaderRequestQueue.value.filter((item) => item !== url) : [];
 
   loaderRequestTimeout.value = setTimeout(() => {
@@ -42,16 +42,12 @@ function removeComponentRequestQueue() {
   componentLoaderRequestQueue.value = [];
 }
 
-function addRequestUrlHandler(event) {
-  addRequestUrl(event.detail.url);
+function setLoaderOnHandler(event) {
+  setLoaderOn(event.detail.resource);
 }
 
-function removeRequestUrlHandler(event) {
-  removeRequestUrl(event.detail.url);
-}
-
-function setComponentRequestQueueHandler(event) {
-  setComponentRequestQueue(event.detail.requests);
+function setLoaderOffHandler(event) {
+  setLoaderOff(event.detail.resource);
 }
 
 export function createLoaderTop() {
@@ -61,8 +57,8 @@ export function createLoaderTop() {
     loaderRequestQueue: readonly(loaderRequestQueue),
     loaderRequestTimeout: readonly(loaderRequestTimeout),
     componentLoaderRequestQueue: readonly(componentLoaderRequestQueue),
-    setLoadingOn,
-    setLoadingOff,
+    setLoaderOn,
+    setLoaderOff,
     addRequestUrl,
     removeRequestUrl,
     setComponentRequestQueue,
@@ -74,21 +70,13 @@ export function useLoaderTop() {
   const loaderTopState = inject(LoaderTopSymbol);
 
   onMounted(() => {
-    window.addEventListener("setLoadingOn", setLoadingOn);
-    window.addEventListener("setLoadingOff", setLoadingOff);
-    window.addEventListener("addRequestUrl", addRequestUrlHandler);
-    window.addEventListener("removeRequestUrl", removeRequestUrlHandler);
-    window.addEventListener("setComponentRequestQueue", setComponentRequestQueueHandler);
-    window.addEventListener("removeComponentRequestQueue", removeComponentRequestQueue);
+    window.addEventListener("setLoaderOn", setLoaderOnHandler);
+    window.addEventListener("setLoaderOff", setLoaderOffHandler);
   });
 
   onBeforeUnmount(() => {
-    window.removeEventListener("setLoadingOn", setLoadingOn);
-    window.removeEventListener("setLoadingOff", setLoadingOff);
-    window.removeEventListener("addRequestUrl", addRequestUrlHandler);
-    window.removeEventListener("removeRequestUrl", removeRequestUrlHandler);
-    window.removeEventListener("setComponentRequestQueue", setComponentRequestQueueHandler);
-    window.removeEventListener("removeComponentRequestQueue", removeComponentRequestQueue);
+    window.removeEventListener("setLoaderOn", setLoaderOnHandler);
+    window.removeEventListener("setLoaderOff", setLoaderOffHandler);
   });
 
   return loaderTopState;

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

@@ -17,17 +17,17 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULoaderTop, UButton },
   setup() {
-    const { setLoadingOn, setLoadingOff } = useLoaderTop();
+    const { setLoaderOn, setLoaderOff } = useLoaderTop();
 
-    return { args, setLoadingOn, setLoadingOff };
+    return { args, setLoaderOn, setLoaderOff };
   },
   template: `
     <div>
         <ULoaderTop color="blue" v-bind="args" resource-names="https://api.publicapis.org/entries"/>
 
         <div class="flex gap-2">
-          <UButton label="On" @click="setLoadingOn('https://api.publicapis.org/entries')" />
-          <UButton label="Off" @click="setLoadingOff('https://api.publicapis.org/entries')" />
+          <UButton label="On" @click="setLoaderOn('https://api.publicapis.org/entries')" />
+          <UButton label="Off" @click="setLoaderOff('https://api.publicapis.org/entries')" />
         </div>
     </div>
   `,
@@ -36,12 +36,12 @@ const DefaultTemplate = (args) => ({
 const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { ULoaderTop, UButton },
   setup() {
-    const { setLoadingOn, setLoadingOff } = useLoaderTop();
+    const { setLoaderOn, setLoaderOff } = useLoaderTop();
 
     return {
       args,
-      setLoadingOn,
-      setLoadingOff,
+      setLoaderOn,
+      setLoaderOff,
       colors: argTypes.color.options,
     };
   },
@@ -56,8 +56,8 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
       />
     </div>
     <div class="flex gap-2 pt-4">
-      <UButton label="On" @click="setLoadingOn('https://api.publicapis.org/entries')" />
-      <UButton label="Off" @click="setLoadingOff('https://api.publicapis.org/entries')" />
+      <UButton label="On" @click="setLoaderOn('https://api.publicapis.org/entries')" />
+      <UButton label="Off" @click="setLoaderOff('https://api.publicapis.org/entries')" />
     </div>
   `,
 });

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

@@ -30,34 +30,14 @@ export const queue = (() => {
   };
 })();
 
-export function loaderTopOn() {
-  window.dispatchEvent(new Event("setLoadingOn"));
-}
+export function loaderTopOn(resource) {
+  const loaderTopOnEvent = new CustomEvent("setLoadingOn", { detail: { resource } });
 
-export function loaderTopOff() {
-  window.dispatchEvent(new Event("setLoadingOff"));
+  window.dispatchEvent(loaderTopOnEvent);
 }
 
-export function addLoadingTopRequestUrl(url) {
-  const addRequestUrlEvent = new CustomEvent("setLoadingOff", { detail: { url } });
-
-  window.dispatchEvent(addRequestUrlEvent);
-}
-
-export function removeLoadingTopRequestUrl(url) {
-  const removeRequestUrlEvent = new CustomEvent("removeRequestUrl", { detail: { url } });
-
-  window.dispatchEvent(removeRequestUrlEvent);
-}
-
-export function setLoadingTopComponentRequestQueue(requests) {
-  const setComponentRequestQueueEvent = new CustomEvent("setComponentRequestQueue", {
-    detail: { requests },
-  });
-
-  window.dispatchEvent(setComponentRequestQueueEvent);
-}
+export function loaderTopOff(resource) {
+  const loaderTopOfEvent = new CustomEvent("setLoadingOff", { detail: { resource } });
 
-export function removeLoadingTopComponentRequestQueue() {
-  window.dispatchEvent("removeComponentRequestQueue");
+  window.dispatchEvent(loaderTopOfEvent);
 }

package/ui.navigation-tabs/composables/attrs.composable.js

@@ -18,7 +18,10 @@ export function useAttrs(props) {
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
 
+  const tabAttrs = getAttrs("tab", { isComponent: true });
+
   return {
     wrapperAttrs,
+    tabAttrs,
   };
 }

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

@@ -7,6 +7,7 @@ export default /*tw*/ {
       },
     },
   },
+  tab: "",
   defaultVariants: {
     size: "md",
     underlined: false,

package/ui.navigation-tabs/index.vue

@@ -9,6 +9,7 @@
         :disabled="item.disabled"
         :size="size"
         :data-cy="`${dataCy}-item-${index}`"
+        v-bind="tabAttrs"
       />
     </slot>
   </div>
@@ -95,5 +96,5 @@ provide("setUTabsSelectedItem", (value) => (selectedItem.value = value));
 provide("getUTabsSelectedItem", () => selectedItem.value);
 provide("getUTabsSize", () => props.size);
 
-const { wrapperAttrs } = useAttrs(props);
+const { wrapperAttrs, tabAttrs } = useAttrs(props);
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "contributions": {
     "html": {
       "description-markup": "markdown",