vueless 0.0.191 → 0.0.192

package/package.json

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

package/ui.loader/composables/attrs.composable.js

@@ -47,5 +47,6 @@ export function useAttrs(props) {
   return {
     loaderAttrs,
     ellipseAttrs,
+    config,
   };
 }

package/ui.loader/configs/default.config.js

@@ -41,9 +41,17 @@ export default /*tw*/ {
       },
     },
   },
+  loaderTransition: {
+    moveClass: "transition duration-500",
+    enterActiveClass: "transition duration-500",
+    leaveActiveClass: "transition duration-500 absolute",
+    enterFromClass: "opacity-0",
+    leaveToClass: "opacity-0",
+  },
   defaultVariants: {
     color: "brand",
     size: "md",
+    loading: true,
   },
   safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };

package/ui.loader/index.vue

@@ -1,7 +1,13 @@
 <template>
-  <div v-bind="loaderAttrs">
-    <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs(ellipseClasses)" />
-  </div>
+  <Transition v-bind="config.loaderTransition">
+    <div v-if="!loading" v-bind="loaderAttrs">
+      <div
+        v-for="ellipse in ELLIPSES_AMOUNT"
+        :key="ellipse"
+        v-bind="ellipseAttrs(ellipseClasses)"
+      />
+    </div>
+  </Transition>
 </template>
 
 <script setup>
@@ -33,11 +39,19 @@ const props = defineProps({
     type: String,
     default: UIService.get(defaultConfig, ULoader).default.color,
   },
+
+  /**
+   * Turn off/on loader.
+   */
+  loading: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULoader).default.loading,
+  },
 });
 
 const ELLIPSES_AMOUNT = 4;
 
-const { loaderAttrs, ellipseAttrs } = useAttrs(props);
+const { loaderAttrs, ellipseAttrs, config } = useAttrs(props);
 
 const ellipseClasses = computed(() => [
   "vueless-internal-loader-ellipse",

package/ui.loader-rendering/composables/attrs.composable.js

@@ -23,7 +23,7 @@ export function useAttrs(props) {
     ),
   );
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses, isComponent: true });
 
   return {
     wrapperAttrs,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.191",
+  "version": "0.0.192",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4746,6 +4746,15 @@
                 "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
               },
               "default": "brand"
+            },
+            {
+              "name": "loading",
+              "description": "Turn off/on loader.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
             }
           ],
           "source": {