vueless 0.0.67 → 0.0.69

package/index.js

@@ -1,9 +1,14 @@
 import { createLocale, LocaleSymbol } from "./composable.locale";
+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 { default as useLoaderRendering } from "./ui.loader-rendering/composables/useLoaderRendering";
-export { default as useLoaderTop } from "./ui.loader-top/composables/useLoaderTop";
+export { useLoaderRendering } from "./ui.loader-rendering/composables/useLoaderRendering";
+export { useLoaderTop } from "./ui.loader-top/composables/useLoaderTop";
 export { useLocale } from "./composable.locale";
 export {
   notify,
@@ -17,9 +22,13 @@ export {
 
 export function createVueless(options = {}) {
   const i18n = createLocale(options.i18n);
+  const loaderRenderingState = createLoaderRendering();
+  const loaderTopState = createLoaderTop();
 
   const install = (app) => {
     app.provide(LocaleSymbol, i18n);
+    app.provide(LoaderRenderingSymbol, loaderRenderingState);
+    app.provide(LoaderTopSymbol, loaderTopState);
   };
 
   return {

package/package.json

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

package/ui.button-link/configs/default.config.js

@@ -65,8 +65,10 @@ export default /*tw*/ {
     color: "brand",
     type: "link",
     size: "md",
-    activeClass: "group/router-link-active",
-    exactActiveClass: "group/router-link-exact-active",
+    activeClass: "",
+    exactActiveClass: "",
+    wrapperActiveClass: "",
+    wrapperExactActiveClass: "",
     underlined: undefined,
     block: false,
     noRing: false,

package/ui.button-link/index.vue

@@ -126,7 +126,7 @@ const props = defineProps({
    * Apply classes to the link when its route is active or when it matches any parent route.
    */
   activeClass: {
-    type: Boolean,
+    type: String,
     default: UIService.get(defaultConfig, ULink).default.activeClass,
   },
 
@@ -134,7 +134,7 @@ const props = defineProps({
    * Apply classes to the link when its route is active.
    */
   exactActiveClass: {
-    type: Boolean,
+    type: String,
     default: UIService.get(defaultConfig, ULink).default.exactActiveClass,
   },
 
@@ -142,7 +142,7 @@ const props = defineProps({
    * Apply classes to the wrapper div when link route is active or when it matches any parent route.
    */
   wrapperActiveClass: {
-    type: Boolean,
+    type: String,
     default: UIService.get(defaultConfig, ULink).default.wrapperActiveClass,
   },
 
@@ -150,7 +150,7 @@ const props = defineProps({
    * Apply classes to the wrapper div when link route is active.
    */
   wrapperExactActiveClass: {
-    type: Boolean,
+    type: String,
     default: UIService.get(defaultConfig, ULink).default.wrapperExactActiveClass,
   },
 

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

@@ -1,4 +1,6 @@
-import { readonly, ref } from "vue";
+import { readonly, ref, inject } from "vue";
+
+export const LoaderRenderingSymbol = Symbol.for("vueless:loader-rendering");
 
 const isRenderingPage = ref(true);
 
@@ -10,10 +12,16 @@ function setRenderingFinished() {
   isRenderingPage.value = false;
 }
 
-export default function useLoaderRendering() {
+export function createLoaderRendering() {
   return {
     isRenderingPage: readonly(isRenderingPage),
     setRenderingStarted,
     setRenderingFinished,
   };
 }
+
+export function useLoaderRendering() {
+  const loaderRenderingState = inject(LoaderRenderingSymbol);
+
+  return loaderRenderingState;
+}

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

@@ -1,7 +1,7 @@
 import ULoaderRendering from "../ui.loader-rendering";
 import UButton from "../ui.button";
 
-import useLoaderRendering from "./composables/useLoaderRendering";
+import { useLoaderRendering } from "./composables/useLoaderRendering";
 
 import { getArgTypes } from "../service.storybook";
 

package/ui.loader-rendering/index.vue

@@ -13,8 +13,7 @@
 import { computed } from "vue";
 
 import { useAttrs } from "./composables/attrs.composable";
-// Should be uncommented after fixing composable bug.
-// import useLoaderRendering from "./composables/useLoaderRendering";
+import { useLoaderRendering } from "./composables/useLoaderRendering";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "ULoaderRendering", inheritAttrs: false });
@@ -27,10 +26,10 @@ const props = defineProps({
 });
 
 const { wrapperAttrs, loaderAttrs, rippleAttrs, rippleElementAttrs, config } = useAttrs(props);
-// const { isRenderingPage } = useLoaderRendering();
+const { isRenderingPage } = useLoaderRendering();
 
 const showLoader = computed(() => {
-  return props.loading; // || isRenderingPage.value;
+  return props.loading || isRenderingPage.value;
 });
 </script>
 

package/ui.loader-top/Docs.mdx

@@ -19,7 +19,7 @@ import defaultConfig from "./configs/default.config?raw"
 You can control loader state using *useLoaderRendering* composable.
 
 <Source code={`
-import { useLoaderRendeuseLoaderTopring } from "vueless";
+import { useLoaderTop } from "vueless";
 
 const { 
     setLoadingOn,
@@ -28,5 +28,5 @@ const {
     removeRequestUrl,
     setComponentRequestQueue,
     removeComponentRequestQueue,
-} = useLoaderRendering();
+} = useLoaderTop();
 `} language="jsx" dark />

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

@@ -1,4 +1,6 @@
-import { ref, readonly } from "vue";
+import { ref, readonly, inject } from "vue";
+
+export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 
 const isLoading = ref(true);
 const requestQueue = ref([]);
@@ -40,7 +42,7 @@ function removeComponentRequestQueue() {
   componentLoaderRequestQueue.value = [];
 }
 
-export default function useLoaderTop() {
+export function createLoaderTop() {
   return {
     isLoading: readonly(isLoading),
     requestQueue: readonly(requestQueue),
@@ -55,3 +57,9 @@ export default function useLoaderTop() {
     removeComponentRequestQueue,
   };
 }
+
+export function useLoaderTop() {
+  const loaderTopState = inject(LoaderTopSymbol);
+
+  return loaderTopState;
+}

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

@@ -1,7 +1,7 @@
 import ULoaderTop from "../ui.loader-top";
 import UButton from "../ui.button";
 
-import useLoaderTop from "../ui.loader-top/composables/useLoaderTop";
+import { useLoaderTop } from "../ui.loader-top/composables/useLoaderTop";
 
 import { getArgTypes } from "../service.storybook";
 

package/ui.loader-top/index.vue

@@ -9,7 +9,7 @@ import { computed, onBeforeUnmount, watch, ref } from "vue";
 
 import UIService, { isMobileApp } from "../service.ui";
 import { clamp, queue } from "./services/loaderTop.service";
-import useLoaderTop from "./composables/useLoaderTop";
+import { useLoaderTop } from "./composables/useLoaderTop";
 
 import { ULoaderTop, MAXIMUM, SPEED } from "./constants";
 import defaultConfig from "./configs/default.config";

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.67",
+  "version": "0.0.69",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4289,36 +4289,36 @@
               "description": "Apply classes to the link when its route is active or when it matches any parent route.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "group/router-link-active"
+              "default": ""
             },
             {
               "name": "exactActiveClass",
               "description": "Apply classes to the link when its route is active.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "group/router-link-exact-active"
+              "default": ""
             },
             {
               "name": "wrapperActiveClass",
               "description": "Apply classes to the wrapper div when link route is active or when it matches any parent route.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "UIService.get(defaultConfig, ULink).default.wrapperActiveClass"
+              "default": ""
             },
             {
               "name": "wrapperExactActiveClass",
               "description": "Apply classes to the wrapper div when link route is active.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "UIService.get(defaultConfig, ULink).default.wrapperExactActiveClass"
+              "default": ""
             },
             {
               "name": "underlined",