vueless 0.0.143 → 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.143",
+  "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/attrs.composable.js

@@ -1,20 +1,32 @@
+import { computed } from "vue";
 import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { getAttrs, config } = useUI(defaultConfig, () => props.config);
+  const { getAttrs, setColor, config } = useUI(defaultConfig, () => props.config);
+  const { wrapper } = config.value;
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const loaderAttrs = getAttrs("loader");
-  const rippleAttrs = getAttrs("ripple");
-  const rippleElementAttrs = getAttrs("rippleElement");
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    setColor(
+      cvaWrapper({
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
 
   return {
     wrapperAttrs,
-    loaderAttrs,
-    rippleAttrs,
-    rippleElementAttrs,
     config,
   };
 }

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/configs/default.config.js

@@ -1,13 +1,24 @@
 export default /*tw*/ {
-  wrapper: "",
-  loader: `
-    flex justify-center items-center fixed left-0 top-0 z-[9999] h-screen w-screen bg-gray-800 
-    transition-all duration-300"
-  `,
-  ripple: "relative h-40 w-40 ml-auto mr-auto",
-  rippleElement: "absolute opacity-100 rounded-full border-4 border-solid border-white",
+  wrapper: {
+    base: `
+      bg-{color}-600
+      h-screen w-screen
+      flex justify-center items-center
+      fixed left-0 top-0 z-[9999]
+      transition-all duration-300
+    `,
+    variants: {
+      color: {
+        white: "bg-white",
+        grayscale: "bg-gray-800",
+      },
+    },
+  },
   transition: {
     enterFromClass: "scale-110 transform",
     leaveActiveClass: "scale-110 transform",
   },
+  defaultVariants: {
+    color: "brand",
+  },
 };

package/ui.loader-rendering/index.vue

@@ -1,17 +1,19 @@
 <template>
-  <Transition name="loader" v-bind="{ ...config.transition, ...wrapperAttrs }">
-    <div v-if="showLoader" v-bind="loaderAttrs">
-      <div v-bind="rippleAttrs">
-        <div v-bind="rippleElementAttrs" class="ripple-element" />
-        <div v-bind="rippleElementAttrs" class="ripple-element" />
-      </div>
+  <Transition v-bind="config.transition">
+    <div v-if="showLoader" v-bind="wrapperAttrs">
+      <ULoader size="lg" :color="color === 'white' ? 'grayscale' : 'white'" />
     </div>
   </Transition>
 </template>
 
 <script setup>
 import { computed, onMounted, onUnmounted } from "vue";
+import UIService from "../service.ui";
 
+import ULoader from "../ui.loader";
+
+import { ULoaderRendering } from "./constants";
+import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 import { useLoaderRendering } from "./composables/useLoaderRendering";
 
@@ -19,54 +21,38 @@ import { useLoaderRendering } from "./composables/useLoaderRendering";
 defineOptions({ name: "ULoaderRendering", inheritAttrs: false });
 
 const props = defineProps({
+  /**
+   * Set loader on.
+   */
   loading: {
     type: Boolean,
     default: false,
   },
+
+  /**
+   * Loader color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, ULoaderRendering).default.color,
+  },
 });
 
-const { wrapperAttrs, loaderAttrs, rippleAttrs, rippleElementAttrs, config } = useAttrs(props);
-const { isRenderingPage, setRenderingStarted, setRenderingFinished } = useLoaderRendering();
+const { wrapperAttrs, config } = useAttrs(props);
+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>
-
-<style lang="postcss" scoped>
-.ripple-element {
-  animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-
-  &:nth-child(2) {
-    animation-delay: -0.5s;
-  }
-}
-
-@keyframes ripple {
-  0% {
-    left: 5rem;
-    top: 5rem;
-    height: 0px;
-    width: 0px;
-    opacity: 1;
-  }
-
-  100% {
-    left: 0px;
-    top: 0px;
-    height: 10rem;
-    width: 10rem;
-    opacity: 0;
-  }
-}
-</style>

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/ui.text-notify/configs/default.config.js

@@ -1,4 +1,5 @@
 export default /*tw*/ {
+  wrapper: "absolute overflow-visible md:w-[22rem]",
   transitionGroup: {
     moveClass: "transition-all duration-500",
     enterActiveClass: "transition-all duration-500",
@@ -6,7 +7,6 @@ export default /*tw*/ {
     enterFromClass: "opacity-0",
     leaveToClass: "opacity-0",
   },
-  wrapper: "absolute overflow-visible md:w-[22rem]",
   body: `
     mb-3 flex w-full items-center justify-center gap-3 rounded-2xl bg-gray-900/90
     p-4 shadow-[0_4px_16px_rgba(17,24,39,0.5)] backdrop-blur-md md:shadow-[0_0px_12px_rgba(0,0,0,0.25)]
@@ -25,6 +25,10 @@ export default /*tw*/ {
   errorIconName: "error",
   closeIcon: "",
   closeIconName: "close",
+  positionClasses: {
+    page: "UNotifyPage",
+    aside: "UNotifyAside",
+  },
   duration: {
     short: 4000,
     medium: 8000,
@@ -41,10 +45,6 @@ export default /*tw*/ {
       default: "Operation error.",
     },
   },
-  positionClasses: {
-    page: "UNotifyPage",
-    aside: "UNotifyAside",
-  },
   defaultVariants: {
     xPosition: "center",
     yPosition: "top",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.143",
+  "version": "0.0.145",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4508,11 +4508,21 @@
           "attributes": [
             {
               "name": "loading",
+              "description": "Set loader on.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "color",
+              "description": "Loader color.",
+              "value": {
+                "kind": "expression",
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
+              },
+              "default": "brand"
             }
           ],
           "source": {