vueless 0.0.144 → 0.0.145

package/index.js

@@ -1,20 +1,15 @@
+/* eslint-disable vue/max-len, prettier/prettier */
 import { createLocale, LocaleSymbol } from "./composable.locale";
-import {
-  createLoaderRendering,
-  LoaderRenderingSymbol,
-} from "./ui.loader-rendering/composables/useLoaderRendering";
+import { createLoaderRendering, LoaderRenderingSymbol } from "./ui.loader-rendering/composables/useLoaderRendering";
 import { createLoaderTop, LoaderTopSymbol } from "./ui.loader-top/composables/useLoaderTop";
 
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en";
 export { useLocale } from "./composable.locale";
-export { useLoaderRendering } from "./ui.loader-rendering/composables/useLoaderRendering";
 export { useLoaderTop } from "./ui.loader-top/composables/useLoaderTop";
-export {
-  loaderRenderingOn,
-  loaderRenderingOff,
-} from "./ui.loader-rendering/services/loaderRedering.service";
 export { loaderTopOn, loaderTopOff } from "./ui.loader-top/services/loaderTop.service";
+export { useLoaderRendering } from "./ui.loader-rendering/composables/useLoaderRendering";
+export { loaderRenderingOn, loaderRenderingOff } from "./ui.loader-rendering/services/loaderRedering.service";
 export {
   notify,
   notifySuccess,
@@ -24,6 +19,7 @@ export {
   setDelayedNotify,
   getDelayedNotify,
 } from "./ui.text-notify/services";
+/* eslint-enable vue/max-len, prettier/prettier */
 
 export function createVueless(options = {}) {
   const i18n = createLocale(options.i18n);

package/package.json

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

package/ui.loader-rendering/Docs.mdx

@@ -11,18 +11,33 @@ import * as stories from "./index.stories";
 <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 `useLoaderRendering` composable.
 
 <Source code={`
 import { useLoaderRendering } from "vueless";
 
-const { setRenderingFinished, isRenderingPage, setRenderingStarted } = useLoaderRendering();
+const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
+
+// get loader state
+console.log(isLoading.value);
+
+// show loader
+loaderRenderingOn();
+
+// hide loader
+loaderRenderingOff();
 `} language="jsx" dark />
 
-## Control outside of component
-You can control loader state outside of vue components using following methods.
+## Using loader outside Vue components
+To control the loader state outside Vue components, use the following methods.
 
 <Source code={`
 import { loaderRenderingOn, loaderRenderingOff } from "vueless";
+
+// show loader
+loaderRenderingOn();
+
+// hide loader
+loaderRenderingOff();
 `} language="jsx" dark />

package/ui.loader-rendering/composables/useLoaderRendering.js

@@ -1,27 +1,25 @@
-import { readonly, ref, inject } from "vue";
+import { inject, readonly, ref } from "vue";
 
 export const LoaderRenderingSymbol = Symbol.for("vueless:loader-rendering");
 
-const isRenderingPage = ref(true);
+const isLoading = ref(true);
 
-function setRenderingStarted() {
-  isRenderingPage.value = true;
+function loaderRenderingOn() {
+  isLoading.value = true;
 }
 
-function setRenderingFinished() {
-  isRenderingPage.value = false;
+function loaderRenderingOff() {
+  isLoading.value = false;
 }
 
 export function createLoaderRendering() {
   return {
-    isRenderingPage: readonly(isRenderingPage),
-    setRenderingStarted,
-    setRenderingFinished,
+    isLoading: readonly(isLoading),
+    loaderRenderingOn,
+    loaderRenderingOff,
   };
 }
 
 export function useLoaderRendering() {
-  const loaderRenderingState = inject(LoaderRenderingSymbol);
-
-  return loaderRenderingState;
+  return inject(LoaderRenderingSymbol);
 }

package/ui.loader-rendering/index.vue

@@ -40,19 +40,19 @@ const props = defineProps({
 });
 
 const { wrapperAttrs, config } = useAttrs(props);
-const { isRenderingPage, setRenderingStarted, setRenderingFinished } = useLoaderRendering();
+const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
 
 onMounted(() => {
-  window.addEventListener("setRenderingStarted", setRenderingStarted);
-  window.addEventListener("setRenderingFinished", setRenderingFinished);
+  window.addEventListener("setRenderingStarted", loaderRenderingOn);
+  window.addEventListener("setRenderingFinished", loaderRenderingOff);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("setRenderingStarted", setRenderingStarted);
-  window.removeEventListener("setRenderingFinished", setRenderingFinished);
+  window.removeEventListener("setRenderingStarted", loaderRenderingOn);
+  window.removeEventListener("setRenderingFinished", loaderRenderingOff);
 });
 
 const showLoader = computed(() => {
-  return props.loading || isRenderingPage.value;
+  return props.loading || isLoading.value;
 });
 </script>

package/ui.loader-top/Docs.mdx

@@ -21,9 +21,9 @@ You can control loader state using *useLoaderRendering* composable.
 <Source code={`
 import { useLoaderTop } from "vueless";
 
-const { 
-    setLoaderTopOn,
-    setLoaderTopOff,
+const {
+    loaderTopOn,
+    loaderTopOff,
     addRequestUrl,
     removeRequestUrl
 } = useLoaderTop();
@@ -33,8 +33,5 @@ const {
 You can control loader state outside of vue components using following methods.
 
 <Source code={`
-import {
-  loaderTopOn,
-  loaderTopOff,
-} from "vueless";
+import { loaderTopOn, loaderTopOff } from "vueless";
 `} language="jsx" dark />

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

@@ -1,4 +1,4 @@
-import { ref, readonly, inject } from "vue";
+import { inject, readonly, ref } from "vue";
 
 export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 
@@ -8,15 +8,14 @@ const loaderRequestQueue = ref([]);
 const loaderRequestTimeout = ref(0);
 const componentLoaderRequestQueue = ref([]);
 
-function setLoaderTopOn(url) {
+function loaderTopOn(url) {
   loaderRequestQueue.value.push(url);
-
   isLoading.value = true;
 
   clearTimeout(loaderRequestTimeout.value);
 }
 
-function setLoaderTopOff(url) {
+function loaderTopOff(url) {
   loaderRequestQueue.value = url ? loaderRequestQueue.value.filter((item) => item !== url) : [];
 
   loaderRequestTimeout.value = setTimeout(() => {
@@ -49,8 +48,8 @@ export function createLoaderTop() {
     loaderRequestQueue: readonly(loaderRequestQueue),
     loaderRequestTimeout: readonly(loaderRequestTimeout),
     componentLoaderRequestQueue: readonly(componentLoaderRequestQueue),
-    setLoaderTopOn,
-    setLoaderTopOff,
+    loaderTopOn,
+    loaderTopOff,
     addRequestUrl,
     removeRequestUrl,
     setComponentRequestQueue,
@@ -59,7 +58,5 @@ export function createLoaderTop() {
 }
 
 export function useLoaderTop() {
-  const loaderTopState = inject(LoaderTopSymbol);
-
-  return loaderTopState;
+  return inject(LoaderTopSymbol);
 }

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

@@ -21,9 +21,9 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULoaderTop, UButton },
   setup() {
-    const { setLoaderTopOn, setLoaderTopOff } = useLoaderTop();
+    const { loaderTopOn, loaderTopOff } = useLoaderTop();
 
-    return { args, setLoaderTopOn, setLoaderTopOff };
+    return { args, loaderTopOn, loaderTopOff };
   },
   template: `
     <div>

package/ui.loader-top/index.vue

@@ -49,8 +49,8 @@ const {
   componentLoaderRequestQueue,
   setComponentRequestQueue,
   removeComponentRequestQueue,
-  setLoaderTopOff,
-  setLoaderTopOn,
+  loaderTopOff,
+  loaderTopOn,
 } = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
@@ -93,11 +93,11 @@ onUnmounted(() => {
 });
 
 function setLoaderOnHandler(event) {
-  setLoaderTopOn(event.detail.resource);
+  loaderTopOn(event.detail.resource);
 }
 
 function setLoaderOffHandler(event) {
-  setLoaderTopOff(event.detail.resource);
+  loaderTopOff(event.detail.resource);
 }
 
 function requestWithoutQuery(request) {

package/web-types.json

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