vueless 0.0.66 → 0.0.68

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.66",
+  "version": "0.0.68",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -58,7 +58,8 @@
     "vite": "^5.2.10",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vue": "^3.4.25"
+    "vue": "^3.4.25",
+    "vue-router": "^4.3.2"
   },
   "resolutions": {
     "jackspeak": "2.3.6"

package/ui.button-link/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
+export function useAttrs(props, { isActive, isExactActive }) {
   const slots = useSlots();
 
   const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
@@ -88,6 +88,8 @@ export function useAttrs(props) {
       class: cx([
         wrapperAttrsRaw.value.class,
         (hasDefaultSlot || hasLeftSlot || hasRightSlot) && config.value.withSlots,
+        isActive.value && props.wrapperActiveClass,
+        isExactActive.value && props.wrapperExactActiveClass,
       ]),
     };
   });
@@ -99,7 +101,12 @@ export function useAttrs(props) {
 
     return {
       ...linkAttrsRaw.value,
-      class: cx([linkAttrsRaw.value.class, hasDefaultSlot && config.value.withSlots]),
+      class: cx([
+        linkAttrsRaw.value.class,
+        hasDefaultSlot && config.value.withSlots,
+        isActive.value && props.activeClass,
+        isExactActive.value && props.exactActiveClass,
+      ]),
     };
   });
 

package/ui.button-link/index.vue

@@ -10,8 +10,6 @@
       :to="route"
       :target="targetValue"
       :data-cy="dataCy"
-      :active-class="activeClass"
-      :exact-active-class="exactActiveClass"
       v-bind="linkAttrs"
       @blur="onBlur"
       @click="onClick"
@@ -52,6 +50,7 @@
 
 <script setup>
 import { computed, useSlots, ref } from "vue";
+import { RouterLink, useLink } from "vue-router";
 import UIService from "../service.ui";
 
 import { useAttrs } from "./composables/attrs.composable";
@@ -139,6 +138,22 @@ const props = defineProps({
     default: UIService.get(defaultConfig, ULink).default.exactActiveClass,
   },
 
+  /**
+   * Apply classes to the wrapper div when link route is active or when it matches any parent route.
+   */
+  wrapperActiveClass: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.wrapperActiveClass,
+  },
+
+  /**
+   * Apply classes to the wrapper div when link route is active.
+   */
+  wrapperExactActiveClass: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.wrapperExactActiveClass,
+  },
+
   /**
    * Show underline.
    */
@@ -197,13 +212,14 @@ const props = defineProps({
 });
 
 const slots = useSlots();
+const { route, isActive, isExactActive } = useLink({ to: props.route });
 
 const wrapperRef = ref(null);
 
 defineExpose({ wrapperRef });
 
 const { wrapperAttrs, linkAttrs, rightSlotAttrs, leftSlotAttrs, textAttrs, hasSlotContent } =
-  useAttrs(props);
+  useAttrs(props, { isActive, isExactActive });
 
 const targetValue = computed(() => {
   return props.targetBlank ? "_blank" : "_self";

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.66",
+  "version": "0.0.68",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4302,6 +4302,24 @@
               },
               "default": "group/router-link-exact-active"
             },
+            {
+              "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"
+              },
+              "default": "UIService.get(defaultConfig, ULink).default.wrapperActiveClass"
+            },
+            {
+              "name": "wrapperExactActiveClass",
+              "description": "Apply classes to the wrapper div when link route is active.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "UIService.get(defaultConfig, ULink).default.wrapperExactActiveClass"
+            },
             {
               "name": "underlined",
               "description": "Show underline.",