vueless 0.0.143 → 0.0.144

package/package.json

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

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/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,13 +21,25 @@ 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 { wrapperAttrs, config } = useAttrs(props);
 const { isRenderingPage, setRenderingStarted, setRenderingFinished } = useLoaderRendering();
 
 onMounted(() => {
@@ -42,31 +56,3 @@ const showLoader = computed(() => {
   return props.loading || isRenderingPage.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.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.144",
   "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": {