vueless 0.0.400 → 0.0.401

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.400",
+  "version": "0.0.401",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.loader/ULoader.vue

@@ -20,7 +20,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set loader on.
+   * Loader state (shown / hidden).
    */
   loading: {
     type: Boolean,

package/ui.loader/useAttrs.js

@@ -4,7 +4,11 @@ import useUI from "../composables/useUI.js";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs, hasSlotContent } = useUI(
+    defaultConfig,
+    () => props.config,
+    "loader",
+  );
 
   const keysAttrs = getKeysAttrs({}, [], {
     ellipse: {

package/ui.loader-rendering/ULoaderRendering.vue

@@ -1,12 +1,15 @@
 <template>
   <Transition v-bind="config.transition">
-    <div v-if="showLoader" v-bind="wrapperAttrs">
-      <ULoader
-        :loading="showLoader"
-        size="lg"
-        :color="color === 'white' ? 'grayscale' : 'white'"
-        v-bind="loaderAttrs"
-      />
+    <div v-if="showLoader" v-bind="overlayAttrs">
+      <!-- @slot Use it to add something instead of the default loader. -->
+      <slot>
+        <ULoader
+          :loading="showLoader"
+          size="lg"
+          :color="color === 'white' ? 'grayscale' : 'white'"
+          v-bind="nestedLoaderAttrs"
+        />
+      </slot>
     </div>
   </Transition>
 </template>
@@ -26,7 +29,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set loader on.
+   * Loader state (shown / hidden).
    */
   loading: {
     type: Boolean,
@@ -43,7 +46,7 @@ const props = defineProps({
   },
 });
 
-const { wrapperAttrs, loaderAttrs, config } = useAttrs(props);
+const { overlayAttrs, nestedLoaderAttrs, config } = useAttrs(props);
 const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
 
 onMounted(() => {

package/ui.loader-rendering/config.js

@@ -1,5 +1,9 @@
 export default /*tw*/ {
-  wrapper: {
+  transition: {
+    enterFromClass: "scale-110 transform",
+    leaveActiveClass: "scale-110 transform",
+  },
+  overlay: {
     base: `
       bg-{color}-600
       h-screen w-screen
@@ -14,11 +18,7 @@ export default /*tw*/ {
       },
     },
   },
-  loader: "{ULoader}",
-  transition: {
-    enterFromClass: "scale-110 transform",
-    leaveActiveClass: "scale-110 transform",
-  },
+  nestedLoader: "{ULoader}",
   defaults: {
     color: "brand",
     loading: undefined,

package/ui.loader-rendering/useAttrs.js

@@ -3,7 +3,11 @@ import useUI from "../composables/useUI.js";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs, hasSlotContent } = useUI(
+    defaultConfig,
+    () => props.config,
+    "overlay",
+  );
 
   const keysAttrs = getKeysAttrs();
 

package/ui.loader-top/ULoaderTop.vue

@@ -1,6 +1,6 @@
 <template>
   <Transition :css="false" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
-    <div v-if="show" v-bind="progressAttrs" :style="barStyle" />
+    <div v-if="show" v-bind="stripeAttrs" :style="barStyle" />
   </Transition>
 </template>
 
@@ -20,7 +20,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * The color of the loader stripe.
+   * Loader stripe color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
    */
   color: {
@@ -44,7 +44,7 @@ const opacity = ref(1);
 const status = ref(null);
 
 const { requestQueue, removeRequestUrl, isLoading, loaderTopOff, loaderTopOn } = useLoaderTop();
-const { progressAttrs } = useAttrs(props, { error, isMobileApp });
+const { stripeAttrs } = useAttrs(props, { error, isMobileApp });
 
 const isStarted = computed(() => {
   return typeof status.value === "number";

package/ui.loader-top/config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  progress: {
+  stripe: {
     base: "top-0 left-0 right-0 fixed h-[3px] transition-all ease-linear bg-{color}-600",
     variants: {
       color: {
@@ -11,7 +11,6 @@ export default /*tw*/ {
       },
     },
   },
-  progressMobile: "mt-safe-top mx-3 rounded max-w-[calc(100%-1.5rem)]",
   defaults: {
     color: "brand",
   },

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.400",
+  "version": "0.0.401",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5825,7 +5825,7 @@
           "attributes": [
             {
               "name": "loading",
-              "description": "Set loader on.",
+              "description": "Loader state (shown / hidden).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5868,7 +5868,7 @@
           "attributes": [
             {
               "name": "loading",
-              "description": "Set loader on.",
+              "description": "Loader state (shown / hidden).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5884,6 +5884,12 @@
               "default": "brand"
             }
           ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Use it to add something instead of the default loader."
+            }
+          ],
           "source": {
             "module": "./src/ui.loader-rendering/ULoaderRendering.vue",
             "symbol": "default"
@@ -5895,7 +5901,7 @@
           "attributes": [
             {
               "name": "color",
-              "description": "The color of the loader stripe.",
+              "description": "Loader stripe 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'"