vueless 0.0.74 → 0.0.76

package/index.js

@@ -7,9 +7,21 @@ import { createLoaderTop, LoaderTopSymbol } from "./ui.loader-top/composables/us
 
 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 { useLocale } from "./composable.locale";
+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 {
   notify,
   notifySuccess,
@@ -22,13 +34,13 @@ export {
 
 export function createVueless(options = {}) {
   const i18n = createLocale(options.i18n);
-  const loaderRenderingState = createLoaderRendering();
-  const loaderTopState = createLoaderTop();
+  const loaderRendering = createLoaderRendering();
+  const loaderTop = createLoaderTop();
 
   const install = (app) => {
     app.provide(LocaleSymbol, i18n);
-    app.provide(LoaderRenderingSymbol, loaderRenderingState);
-    app.provide(LoaderTopSymbol, loaderTopState);
+    app.provide(LoaderRenderingSymbol, loaderRendering);
+    app.provide(LoaderTopSymbol, loaderTop);
   };
 
   return {

package/package.json

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

package/preset.tailwind/index.js

@@ -3,9 +3,10 @@ import forms from "@tailwindcss/forms";
 import vuelessConfig from "../../../vueless.config.js";
 
 export const GRAY_COLORS = ["slate", "gray", "zinc", "neutral", "stone"];
-export const GRAYSCALE_BRAND_COLOR = "grayscale";
+export const GRAYSCALE_COLOR = "grayscale";
+export const BRAND_COLOR = "brand";
 export const BRAND_COLORS = [
-  "brand",
+  BRAND_COLOR,
   "red",
   "orange",
   "amber",
@@ -37,7 +38,7 @@ export function vuelessPreset() {
   let brandPalette = BRAND_COLORS.includes(brand) ? colors[brand] : colors.green;
   let grayPalette = GRAY_COLORS.includes(gray) ? colors[gray] : colors.zinc;
 
-  if (brand === GRAYSCALE_BRAND_COLOR) {
+  if (brand === GRAYSCALE_COLOR) {
     brandPalette = grayPalette;
   }
 

package/service.ui/index.js

@@ -2,7 +2,7 @@ import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { twMerge } from "tailwind-merge";
 import colors from "tailwindcss/colors";
-import { BRAND_COLORS, GRAY_COLORS, GRAYSCALE_BRAND_COLOR } from "../preset.tailwind";
+import { BRAND_COLORS, GRAY_COLORS, GRAYSCALE_COLOR, BRAND_COLOR } from "../preset.tailwind";
 import vuelessConfig from "../../../vueless.config.js";
 
 /*
@@ -105,7 +105,7 @@ export default class UIServiceDefault {
   // TODO: This should be rewrote to support all set of brand colors (not only one).
   setBrandColor(brandColor) {
     function getBrandColor(color, grayColor, brandColors) {
-      if (color === GRAYSCALE_BRAND_COLOR) {
+      if (color === GRAYSCALE_COLOR) {
         return grayColor;
       }
 
@@ -166,12 +166,17 @@ export default class UIServiceDefault {
     @returns { Object }
   */
   static get(defaultConfig, name) {
+    const defaultVariants = merge(
+      defaultConfig.defaultVariants,
+      globalComponentConfig[name]?.defaultVariants,
+    );
+
+    if (brand === GRAYSCALE_COLOR && defaultVariants.color === BRAND_COLOR) {
+      defaultVariants.color = GRAYSCALE_COLOR;
+    }
+
     return {
-      default: merge(
-        defaultConfig.defaultVariants,
-        brand === GRAYSCALE_BRAND_COLOR && { color: GRAYSCALE_BRAND_COLOR },
-        globalComponentConfig[name]?.defaultVariants,
-      ),
+      default: defaultVariants,
     };
   }
 }

package/ui.loader-rendering/Docs.mdx

@@ -19,3 +19,10 @@ import { useLoaderRendering } from "vueless";
 
 const { setRenderingFinished, isRenderingPage, setRenderingStarted } = useLoaderRendering();
 `} language="jsx" dark />
+
+## Control outside of component
+You can control loader state outside of vue components using following methods.
+
+<Source code={`
+import { loaderRenderingOn, loaderRenderingOff } from "vueless";
+`} language="jsx" dark />

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

@@ -1,4 +1,4 @@
-import { readonly, ref, inject } from "vue";
+import { readonly, ref, inject, onMounted, onBeforeUnmount } from "vue";
 
 export const LoaderRenderingSymbol = Symbol.for("vueless:loader-rendering");
 
@@ -23,5 +23,15 @@ export function createLoaderRendering() {
 export function useLoaderRendering() {
   const loaderRenderingState = inject(LoaderRenderingSymbol);
 
+  onMounted(() => {
+    window.addEventListener("setRenderingStarted", setRenderingStarted);
+    window.addEventListener("setRenderingFinished", setRenderingFinished);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("setRenderingStarted", setRenderingStarted);
+    window.removeEventListener("setRenderingFinished", setRenderingFinished);
+  });
+
   return loaderRenderingState;
 }

package/ui.loader-rendering/services/loaderRedering.service.js

@@ -0,0 +1,7 @@
+export function loaderRenderingOn() {
+  window.dispatchEvent(new Event("setRenderingStarted"));
+}
+
+export function loaderRenderingOff() {
+  window.dispatchEvent(new Event("setRenderingFinished"));
+}

package/ui.loader-top/Docs.mdx

@@ -30,3 +30,17 @@ const {
     removeComponentRequestQueue,
 } = useLoaderTop();
 `} language="jsx" dark />
+
+## Control outside of component
+You can control loader state outside of vue components using following methods.
+
+<Source code={`
+import {
+  loaderTopOn,
+  loaderTopOff,
+  addLoadingTopRequestUrl,
+  removeLoadingTopRequestUrl,
+  setLoadingTopComponentRequestQueue,
+  removeLoadingTopComponentRequestQueue,
+} from "vueless";
+`} language="jsx" dark />

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

@@ -1,4 +1,4 @@
-import { ref, readonly, inject } from "vue";
+import { ref, readonly, inject, onMounted, onBeforeUnmount } from "vue";
 
 export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 
@@ -42,6 +42,18 @@ function removeComponentRequestQueue() {
   componentLoaderRequestQueue.value = [];
 }
 
+function addRequestUrlHandler(event) {
+  addRequestUrl(event.detail.url);
+}
+
+function removeRequestUrlHandler(event) {
+  removeRequestUrl(event.detail.url);
+}
+
+function setComponentRequestQueueHandler(event) {
+  setComponentRequestQueue(event.detail.requests);
+}
+
 export function createLoaderTop() {
   return {
     isLoading: readonly(isLoading),
@@ -61,5 +73,23 @@ export function createLoaderTop() {
 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);
+  });
+
+  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);
+  });
+
   return loaderTopState;
 }

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

@@ -29,3 +29,35 @@ export const queue = (() => {
     }
   };
 })();
+
+export function loaderTopOn() {
+  window.dispatchEvent(new Event("setLoadingOn"));
+}
+
+export function loaderTopOff() {
+  window.dispatchEvent(new Event("setLoadingOff"));
+}
+
+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 removeLoadingTopComponentRequestQueue() {
+  window.dispatchEvent("removeComponentRequestQueue");
+}

package/web-types.json

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