vueless 0.0.400 → 0.0.402

package/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable vue/max-len, prettier/prettier */
 import { createLocale, LocaleSymbol } from "./composables/useLocale.js";
-import { createLoaderRendering, LoaderRenderingSymbol } from "./ui.loader-rendering/useLoaderRendering.js";
-import { createLoaderTop, LoaderTopSymbol } from "./ui.loader-top/useLoaderTop.js";
+import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay.js";
+import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress.js";
 import { themeInit } from "./utils/utilTheme.js";
 
 export { setTitle } from "./utils/utilHelper.js";
@@ -9,10 +9,10 @@ export { setTheme } from "./utils/utilTheme.js";
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
 export { useLocale } from "./composables/useLocale.js";
-export { useLoaderTop } from "./ui.loader-top/useLoaderTop.js";
-export { loaderTopOn, loaderTopOff } from "./ui.loader-top/utilLoaderTop.js";
-export { useLoaderRendering } from "./ui.loader-rendering/useLoaderRendering.js";
-export { loaderRenderingOn, loaderRenderingOff } from "./ui.loader-rendering/utilLoaderRedering.js";
+export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress.js";
+export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress.js";
+export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay.js";
+export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay.js";
 export {
   notify,
   notifySuccess,
@@ -26,13 +26,13 @@ export {
 
 export function createVueless(options = {}) {
   const i18n = createLocale(options.i18n);
-  const loaderRendering = createLoaderRendering();
-  const loaderTop = createLoaderTop();
+  const loaderOverlay = createLoaderOverlay();
+  const loaderProgress = createLoaderProgress();
 
   const install = (app) => {
     app.provide(LocaleSymbol, i18n);
-    app.provide(LoaderRenderingSymbol, loaderRendering);
-    app.provide(LoaderTopSymbol, loaderTop);
+    app.provide(LoaderOverlaySymbol, loaderOverlay);
+    app.provide(LoaderProgressSymbol, loaderProgress);
   };
 
   themeInit();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.400",
+  "version": "0.0.402",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -53,7 +53,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.63",
+    "@vueless/plugin-vite": "^0.0.65",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.15",
     "autoprefixer": "^10.4.19",

package/ui.data-table/UTable.vue

@@ -77,7 +77,7 @@
         </div>
       </template>
 
-      <ULoaderTop
+      <ULoaderProgress
         v-if="resource && isHeaderSticky"
         :resources="resource"
         v-bind="stickyHeaderLoaderAttrs"
@@ -150,7 +150,7 @@
             </th>
           </tr>
 
-          <ULoaderTop v-if="resource" :resources="resource" v-bind="headerLoaderAttrs" />
+          <ULoaderProgress v-if="resource" :resources="resource" v-bind="headerLoaderAttrs" />
         </thead>
 
         <tbody v-if="tableRows.length" v-bind="bodyAttrs">
@@ -277,7 +277,7 @@ import { merge } from "lodash-es";
 import UEmpty from "../ui.text-empty/UEmpty.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
-import ULoaderTop from "../ui.loader-top/ULoaderTop.vue";
+import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UTableRow from "./UTableRow.vue";
 
 import { getDefault, cx } from "../utils/utilUI.js";

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-overlay/ULoaderOverlay.vue

@@ -0,0 +1,65 @@
+<template>
+  <Transition v-bind="config.transition">
+    <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>
+
+<script setup>
+import { computed, onMounted, onUnmounted } from "vue";
+import { getDefault } from "../utils/utilUI.js";
+
+import ULoader from "../ui.loader/ULoader.vue";
+
+import { ULoaderOverlay } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
+import { useLoaderOverlay } from "./useLoaderOverlay.js";
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Loader state (shown / hidden).
+   */
+  loading: {
+    type: Boolean,
+    default: getDefault(defaultConfig, ULoaderOverlay).loading,
+  },
+
+  /**
+   * 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: getDefault(defaultConfig, ULoaderOverlay).color,
+  },
+});
+
+const { overlayAttrs, nestedLoaderAttrs, config } = useAttrs(props);
+const { isLoading, loaderOverlayOn, loaderOverlayOff } = useLoaderOverlay();
+
+onMounted(() => {
+  window.addEventListener("loaderOverlayOn", loaderOverlayOn);
+  window.addEventListener("loaderOverlayOff", loaderOverlayOff);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("loaderOverlayOn", loaderOverlayOn);
+  window.removeEventListener("loaderOverlayOff", loaderOverlayOff);
+});
+
+const showLoader = computed(() => {
+  return props.loading === undefined ? isLoading.value : props.loading;
+});
+</script>

package/{ui.loader-rendering → ui.loader-overlay}/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 → ui.loader-overlay}/constants.js

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const ULoaderRendering = "ULoaderRendering";
+export const ULoaderOverlay = "ULoaderOverlay";

package/{ui.loader-rendering → ui.loader-overlay}/storybook/Docs.mdx

@@ -13,34 +13,34 @@ import defaultConfig from "../config.js?raw"
 <Stories of={stories} />
 
 ## Using loader
-To control the loader state in Vue components use `useLoaderRendering` composable.
+To control the loader state in Vue components use `useLoaderOverlay` composable.
 
 <Source code={`
-import { useLoaderRendering } from "vueless";
+import { useLoaderOverlay } from "vueless";
 
-const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
+const { isLoading, loaderOverlayOn, loaderOverlayOff } = useLoaderOverlay();
 
 // get loader state
 console.log(isLoading.value);
 
 // show loader
-loaderRenderingOn();
+loaderOverlayOn();
 
 // hide loader
-loaderRenderingOff();
+loaderOverlayOff();
 `} language="jsx" dark />
 
 ## Using loader outside Vue components
 To control the loader state outside Vue components, use the following methods.
 
 <Source code={`
-import { loaderRenderingOn, loaderRenderingOff } from "vueless";
+import { loaderOverlayOn, loaderOverlayOff } from "vueless";
 
 // show loader
-loaderRenderingOn();
+loaderOverlayOn();
 
 // hide loader
-loaderRenderingOff();
+loaderOverlayOff();
 `} language="jsx" dark />
 
 ## Default config

package/ui.loader-overlay/storybook/stories.js

@@ -0,0 +1,66 @@
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+
+import ULoaderOverlay from "../ULoaderOverlay.vue";
+import UButton from "../../ui.button/UButton.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+
+import { useLoaderOverlay } from "../useLoaderOverlay.js";
+
+/**
+ * The `ULoaderOverlay` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-overlay)
+ */
+export default {
+  id: "9030",
+  title: "Loaders and Skeletons / Loader Overlay",
+  component: ULoaderOverlay,
+  argTypes: {
+    ...getArgTypes(ULoaderOverlay.__name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "420px",
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { ULoaderOverlay },
+  setup() {
+    const slots = getSlotNames(ULoaderOverlay.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <ULoaderOverlay v-bind="args" class="w-full h-full">
+      ${args.slotTemplate || getSlotsFragment()}
+    </ULoaderOverlay>
+  `,
+});
+
+const LoadingTemplate = (args) => ({
+  components: { ULoaderOverlay, UButton, UCol },
+  setup() {
+    const { loaderOverlayOn, loaderOverlayOff, isLoading } = useLoaderOverlay();
+
+    function toggleLoading() {
+      isLoading.value ? loaderOverlayOff() : loaderOverlayOn();
+    }
+
+    return { args, loaderOverlayOn, loaderOverlayOff, isLoading, toggleLoading };
+  },
+  template: `
+    <UCol align="center" class="pb-4">
+      <UButton label="Toggle loading" size="sm" @click="toggleLoading"/>
+    </UCol>
+
+    <ULoaderOverlay  v-bind="args" class="!static w-full h-96" />
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const LoadingToggling = LoadingTemplate.bind({});
+LoadingToggling.args = {};

package/{ui.loader-top → ui.loader-overlay}/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-overlay/useLoaderOverlay.js

@@ -0,0 +1,25 @@
+import { inject, readonly, ref } from "vue";
+
+export const LoaderOverlaySymbol = Symbol.for("vueless:loader-overlay");
+
+const isLoading = ref(true);
+
+function loaderOverlayOn() {
+  isLoading.value = true;
+}
+
+function loaderOverlayOff() {
+  isLoading.value = false;
+}
+
+export function createLoaderOverlay() {
+  return {
+    isLoading: readonly(isLoading),
+    loaderOverlayOn,
+    loaderOverlayOff,
+  };
+}
+
+export function useLoaderOverlay() {
+  return inject(LoaderOverlaySymbol);
+}

package/ui.loader-overlay/utilLoaderOverlay.js

@@ -0,0 +1,7 @@
+export function loaderOverlayOn() {
+  window.dispatchEvent(new Event("loaderOverlayOn"));
+}
+
+export function loaderOverlayOff() {
+  window.dispatchEvent(new Event("loaderOverlayOff"));
+}

package/{ui.loader-top/ULoaderTop.vue → ui.loader-progress/ULoaderProgress.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>
 
@@ -9,10 +9,10 @@ import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "v
 
 import { getDefault } from "../utils/utilUI.js";
 import { isMobileApp } from "../utils/utilPlatform.js";
-import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderTop.js";
-import { useLoaderTop } from "./useLoaderTop.js";
+import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderProgress.js";
+import { useLoaderProgress } from "./useLoaderProgress.js";
 
-import { ULoaderTop, MAXIMUM, SPEED } from "./constants.js";
+import { ULoaderProgress, MAXIMUM, SPEED } from "./constants.js";
 import defaultConfig from "./config.js";
 import useAttrs from "./useAttrs.js";
 
@@ -20,12 +20,12 @@ 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: {
     type: String,
-    default: getDefault(defaultConfig, ULoaderTop).color,
+    default: getDefault(defaultConfig, ULoaderProgress).color,
   },
 
   /**
@@ -43,8 +43,9 @@ const progress = ref(0);
 const opacity = ref(1);
 const status = ref(null);
 
-const { requestQueue, removeRequestUrl, isLoading, loaderTopOff, loaderTopOn } = useLoaderTop();
-const { progressAttrs } = useAttrs(props, { error, isMobileApp });
+const { requestQueue, removeRequestUrl, isLoading, loaderProgressOff, loaderProgressOn } =
+  useLoaderProgress();
+const { stripeAttrs } = useAttrs(props, { error, isMobileApp });
 
 const isStarted = computed(() => {
   return typeof status.value === "number";
@@ -67,8 +68,8 @@ watch(() => requestQueue.value.length, onChangeRequestsQueue);
 watch(isLoading, onChangeLoadingState);
 
 onMounted(() => {
-  window.addEventListener("loaderTopOn", setLoaderOnHandler);
-  window.addEventListener("loaderTopOff", setLoaderOffHandler);
+  window.addEventListener("loaderProgressOn", setLoaderOnHandler);
+  window.addEventListener("loaderProgressOff", setLoaderOffHandler);
 
   if (props.resources) {
     onChangeRequestsQueue();
@@ -80,16 +81,16 @@ onBeforeUnmount(() => {
 });
 
 onUnmounted(() => {
-  window.removeEventListener("loaderTopOn", setLoaderOnHandler);
-  window.removeEventListener("loaderTopOff", setLoaderOffHandler);
+  window.removeEventListener("loaderProgressOn", setLoaderOnHandler);
+  window.removeEventListener("loaderProgressOff", setLoaderOffHandler);
 });
 
 function setLoaderOnHandler(event) {
-  loaderTopOn(event.detail.resource);
+  loaderProgressOn(event.detail.resource);
 }
 
 function setLoaderOffHandler(event) {
-  loaderTopOff(event.detail.resource);
+  loaderProgressOff(event.detail.resource);
 }
 
 function onChangeLoadingState() {

package/{ui.loader-top → ui.loader-progress}/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/{ui.loader-top → ui.loader-progress}/constants.js

@@ -2,7 +2,7 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const ULoaderTop = "ULoaderTop";
+export const ULoaderProgress = "ULoaderProgress";
 
 export const MAXIMUM = 99;
 export const SPEED = 150;

package/{ui.loader-top → ui.loader-progress}/storybook/Docs.mdx

@@ -13,30 +13,30 @@ import defaultConfig from "../config.js?raw"
 <Stories of={stories} />
 
 ## Using loader
-To control the loader state in Vue components use `useLoaderTop` composable.
+To control the loader state in Vue components use `useLoaderProgress` composable.
 
 The loader uses queue of resources and will be shown until at least one item is present in a queue.
 
 <Source code={`
-import { useLoaderTop } from "vueless";
+import { useLoaderProgress } from "vueless";
 
 const {
   isLoading,
-  loaderTopOn,
-  loaderTopOff,
+  loaderProgressOn,
+  loaderProgressOff,
   requestQueue,
   addRequestUrl
   removeRequestUrl
-} = useLoaderTop();
+} = useLoaderProgress();
 
 // get loader state
 console.log(isLoading.value);
 
 // show loader (add resource into queue)
-loaderTopOn("/transactions");
+loaderProgressOn("/transactions");
 
 // hide loader (remove resource from queue)
-loaderTopOff("/transactions");
+loaderProgressOff("/transactions");
 
 // get current resource array
 console.log(requestQueue.value);
@@ -54,13 +54,13 @@ removeRequestUrl(["/transactions", "/products"]);
 To control the loader state outside Vue components, use the following methods.
 
 <Source code={`
-import { loaderTopOn, loaderTopOff } from "vueless";
+import { loaderProgressOn, loaderProgressOff } from "vueless";
 
 // show loader
-loaderTopOn("/transactions");
+loaderProgressOn("/transactions");
 
 // hide loader
-loaderTopOff("/transactions");
+loaderProgressOff("/transactions");
 `} language="jsx" dark />
 
 ## Default config

package/ui.loader-progress/storybook/stories.js

@@ -0,0 +1,85 @@
+import { getArgTypes, getSlotNames } from "../../utils/utilStorybook.js";
+
+import ULoaderProgress from "../ULoaderProgress.vue";
+import UButton from "../../ui.button/UButton.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+
+import { useLoaderProgress } from "../useLoaderProgress.js";
+import { loaderProgressOff, loaderProgressOn } from "../utilLoaderProgress.js";
+
+/**
+ * The `ULoaderProgress` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-progress)
+ */
+export default {
+  id: "9020",
+  title: "Loaders and Skeletons / Loader Progress",
+  component: ULoaderProgress,
+  argTypes: {
+    ...getArgTypes(ULoaderProgress.__name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { ULoaderProgress, UButton, URow },
+  setup() {
+    const { loaderProgressOn, loaderProgressOff } = useLoaderProgress();
+
+    const slots = getSlotNames(ULoaderProgress.__name);
+
+    return { args, slots, loaderProgressOn, loaderProgressOff };
+  },
+  template: `
+    <ULoaderProgress v-bind="args" resources="https://api.publicapis.org/entries"/>
+
+    <URow gap="sm">
+      <UButton label="On" size="sm" @click="loaderProgressOn('https://api.publicapis.org/entries')" />
+      <UButton label="Off" size="sm" @click="loaderProgressOff('https://api.publicapis.org/entries')" />
+    </URow>
+  `,
+});
+
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { ULoaderProgress, UButton, UCol, URow, UBadge },
+  setup() {
+    return {
+      args,
+      loaderProgressOff,
+      loaderProgressOn,
+      options: argTypes[args.enum].options,
+    };
+  },
+  template: `
+    <UCol>
+      <URow gap="sm" class="pb-4">
+        <UButton label="On" size="sm" @click="loaderProgressOn('https://api.publicapis.org/images')" />
+        <UButton label="Off" size="sm" @click="loaderProgressOff('https://api.publicapis.org/images')" />
+      </URow>
+
+      <URow
+        align="center"
+        v-for="(option, index) in options"
+        :key="index"
+      >
+        <UBadge
+          :label="option"
+          :[args.enum]="option"
+        />
+        <ULoaderProgress
+          resources="https://api.publicapis.org/images"
+          class="static"
+          :[args.enum]="option"
+          v-bind="args"
+        />
+      </URow>
+
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Color = EnumVariantTemplate.bind({});
+Color.args = { enum: "color" };

package/{ui.loader-top/useLoaderTop.js → ui.loader-progress/useLoaderProgress.js}

@@ -1,14 +1,14 @@
 import { inject, readonly, ref } from "vue";
 
-import { getRequestWithoutQuery } from "./utilLoaderTop.js";
+import { getRequestWithoutQuery } from "./utilLoaderProgress.js";
 
-export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
+export const LoaderProgressSymbol = Symbol.for("vueless:loader-progress");
 
 const isLoading = ref(false);
 const requestQueue = ref([]);
 const requestTimeout = ref(0);
 
-function loaderTopOn(url) {
+function loaderProgressOn(url) {
   addRequestUrl(url);
 
   isLoading.value = true;
@@ -16,7 +16,7 @@ function loaderTopOn(url) {
   clearTimeout(requestTimeout.value);
 }
 
-function loaderTopOff(url) {
+function loaderProgressOff(url) {
   requestQueue.value = url
     ? requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url))
     : [];
@@ -44,17 +44,17 @@ function removeRequestUrl(url) {
   requestQueue.value = requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url));
 }
 
-export function createLoaderTop() {
+export function createLoaderProgress() {
   return {
     isLoading: readonly(isLoading),
     requestQueue: readonly(requestQueue),
-    loaderTopOn,
-    loaderTopOff,
+    loaderProgressOn,
+    loaderProgressOff,
     addRequestUrl,
     removeRequestUrl,
   };
 }
 
-export function useLoaderTop() {
-  return inject(LoaderTopSymbol);
+export function useLoaderProgress() {
+  return inject(LoaderProgressSymbol);
 }

package/{ui.loader-top/utilLoaderTop.js → ui.loader-progress/utilLoaderProgress.js}

@@ -30,16 +30,16 @@ export const queue = (() => {
   };
 })();
 
-export function loaderTopOn(resource) {
-  const loaderTopOnEvent = new CustomEvent("loaderTopOn", { detail: { resource } });
+export function loaderProgressOn(resource) {
+  const loaderProgressOnEvent = new CustomEvent("loaderProgressOn", { detail: { resource } });
 
-  window.dispatchEvent(loaderTopOnEvent);
+  window.dispatchEvent(loaderProgressOnEvent);
 }
 
-export function loaderTopOff(resource) {
-  const loaderTopOfEvent = new CustomEvent("loaderTopOff", { detail: { resource } });
+export function loaderProgressOff(resource) {
+  const loaderProgressOfEvent = new CustomEvent("loaderProgressOff", { detail: { resource } });
 
-  window.dispatchEvent(loaderTopOfEvent);
+  window.dispatchEvent(loaderProgressOfEvent);
 }
 
 export function getRequestWithoutQuery(request) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.400",
+  "version": "0.0.402",
   "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"
@@ -5863,12 +5863,12 @@
           }
         },
         {
-          "name": "ULoaderRendering",
+          "name": "ULoaderOverlay",
           "description": "",
           "attributes": [
             {
               "name": "loading",
-              "description": "Set loader on.",
+              "description": "Loader state (shown / hidden).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5884,18 +5884,24 @@
               "default": "brand"
             }
           ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Use it to add something instead of the default loader."
+            }
+          ],
           "source": {
-            "module": "./src/ui.loader-rendering/ULoaderRendering.vue",
+            "module": "./src/ui.loader-overlay/ULoaderOverlay.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "ULoaderTop",
+          "name": "ULoaderProgress",
           "description": "",
           "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'"
@@ -5913,7 +5919,7 @@
             }
           ],
           "source": {
-            "module": "./src/ui.loader-top/ULoaderTop.vue",
+            "module": "./src/ui.loader-progress/ULoaderProgress.vue",
             "symbol": "default"
           }
         },

package/assets/icons/add.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M445.93-445.93H194.02v-68.14h251.91v-252.15h68.14v252.15h252.15v68.14H514.07v251.91h-68.14v-251.91Z"/></svg>

package/assets/icons/apps.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M223.29-154.5q-29.12 0-48.95-19.84-19.84-19.83-19.84-48.95 0-29.12 19.84-48.91 19.83-19.8 48.95-19.8 29.12 0 48.91 19.8 19.8 19.79 19.8 48.91 0 29.12-19.8 48.95-19.79 19.84-48.91 19.84Zm256.8 0q-29.05 0-48.88-19.84-19.84-19.83-19.84-48.95 0-29.12 19.75-48.91 19.74-19.8 48.79-19.8t48.88 19.8q19.84 19.79 19.84 48.91 0 29.12-19.75 48.95-19.74 19.84-48.79 19.84Zm256.62 0q-29.12 0-48.91-19.84-19.8-19.83-19.8-48.95 0-29.12 19.8-48.91 19.79-19.8 48.91-19.8 29.12 0 48.95 19.8 19.84 19.79 19.84 48.91 0 29.12-19.84 48.95-19.83 19.84-48.95 19.84ZM223.29-411.37q-29.12 0-48.95-19.75-19.84-19.74-19.84-48.79t19.84-48.88q19.83-19.84 48.95-19.84 29.12 0 48.91 19.75 19.8 19.74 19.8 48.79t-19.8 48.88q-19.79 19.84-48.91 19.84Zm256.8 0q-29.05 0-48.88-19.75-19.84-19.74-19.84-48.79t19.75-48.88q19.74-19.84 48.79-19.84t48.88 19.75q19.84 19.74 19.84 48.79t-19.75 48.88q-19.74 19.84-48.79 19.84Zm256.62 0q-29.12 0-48.91-19.75-19.8-19.74-19.8-48.79t19.8-48.88q19.79-19.84 48.91-19.84 29.12 0 48.95 19.75 19.84 19.74 19.84 48.79t-19.84 48.88q-19.83 19.84-48.95 19.84ZM223.29-668q-29.12 0-48.95-19.8-19.84-19.79-19.84-48.91 0-29.12 19.84-48.95 19.83-19.84 48.95-19.84 29.12 0 48.91 19.84 19.8 19.83 19.8 48.95 0 29.12-19.8 48.91-19.79 19.8-48.91 19.8Zm256.8 0q-29.05 0-48.88-19.8-19.84-19.79-19.84-48.91 0-29.12 19.75-48.95 19.74-19.84 48.79-19.84t48.88 19.84q19.84 19.83 19.84 48.95 0 29.12-19.75 48.91-19.74 19.8-48.79 19.8Zm256.62 0q-29.12 0-48.91-19.8-19.8-19.79-19.8-48.91 0-29.12 19.8-48.95 19.79-19.84 48.91-19.84 29.12 0 48.95 19.84 19.84 19.83 19.84 48.95 0 29.12-19.84 48.91-19.83 19.8-48.95 19.8Z"/></svg>

package/assets/icons/arrow_back.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m283.8-445.93 244.18 244.17L480-154.02 154.02-480 480-806.22l47.98 47.98L283.8-514.07h522.42v68.14H283.8Z"/></svg>

package/assets/icons/attach_file.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M737.33-324.39q0 105.46-74.69 177.91-74.69 72.46-180.26 72.46-105.58 0-180.35-72.46-74.77-72.45-74.77-177.85v-383.82q0-74.63 53.41-126.35 53.42-51.72 127.75-51.72 74.34 0 127.69 51.72 53.35 51.72 53.35 126.35v363.82q0 43.66-31.56 74.62-31.55 30.97-75.81 30.97-44.26 0-75.61-30.64t-31.35-74.95v-370h66.46v370q0 16.05 11.97 27.59t29.2 11.54q17.24 0 28.74-11.5 11.5-11.51 11.5-27.63v-363.58q.24-47.35-33.38-79.6-33.62-32.25-81.35-32.25-47.74 0-81.14 32.19-33.41 32.19-33.41 79.42v383.82q.24 77.83 55.57 130.96 55.33 53.13 133.62 53.13 77.86 0 133.03-53.16 55.17-53.17 54.93-130.93v-396.93h66.46v396.87Z"/></svg>

package/assets/icons/check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M378-240.26 148.26-470l48.98-48.98L378-338.22l383.76-383.76L810.74-673 378-240.26Z"/></svg>

package/assets/icons/check_circle.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m420.52-294.41 285.63-285.63-50.78-50.03-234.85 234.85-117.85-117.85-49.78 50.03 167.63 168.63Zm59.51 220.39q-83.46 0-157.54-31.88-74.07-31.88-129.39-87.2-55.32-55.32-87.2-129.36-31.88-74.04-31.88-157.51 0-84.46 31.88-158.54 31.88-74.07 87.16-128.9 55.28-54.84 129.34-86.82 74.06-31.99 157.55-31.99 84.48 0 158.59 31.97 74.1 31.97 128.91 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.6 0 83.5-31.99 157.57-31.98 74.07-86.82 129.36-54.83 55.29-128.87 87.17-74.04 31.88-158.51 31.88Zm-.03-68.13q141.04 0 239.45-98.75 98.4-98.76 98.4-239.1 0-141.04-98.4-239.45-98.41-98.4-239.57-98.4-140.16 0-238.95 98.4-98.78 98.41-98.78 239.57 0 140.16 98.75 238.95 98.76 98.78 239.1 98.78ZM480-480Z"/></svg>

package/assets/icons/chevron_left.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M561-234.26 314.26-481 561-727.74 609.74-679l-198 198 198 198L561-234.26Z"/></svg>

package/assets/icons/chevron_right.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m524.26-481-198-198L375-727.74 621.74-481 375-234.26 326.26-283l198-198Z"/></svg>

package/assets/icons/close.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M249-201.26 201.26-249l231-231-231-231L249-758.74l231 231 231-231L758.74-711l-231 231 231 231L711-201.26l-231-231-231 231Z"/></svg>

package/assets/icons/close_small.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m305.02-257.28-47.74-47.74L432.02-480 257.28-653.98l47.74-47.74L480-526.98l173.98-174.74 47.74 47.74L526.98-480l174.74 174.98-47.74 47.74L480-432.02 305.02-257.28Z"/></svg>

package/assets/icons/delete.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M259.09-114.02q-28.45 0-48.41-19.89-19.96-19.89-19.96-48.24v-565.94h-45.07v-68.13h198.28v-34.3h271.9v34.3h198.52v68.13h-45.07v565.94q0 27.6-20.33 47.86-20.34 20.27-48.04 20.27H259.09Zm441.82-634.07H259.09v565.94h441.82v-565.94ZM363.89-266.24h64.07v-399h-64.07v399Zm168.15 0h64.31v-399h-64.31v399ZM259.09-748.09v565.94-565.94Z"/></svg>

package/assets/icons/description.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M319-249.52h322v-62.63H319v62.63Zm0-170h322v-62.63H319v62.63Zm-96.85 345.5q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>

package/assets/icons/drag_indicator.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M347.41-154.5q-30.1 0-51.51-21.43-21.4-21.44-21.4-51.54 0-30.1 21.43-51.31Q317.37-300 347.47-300q30.1 0 51.31 21.25Q420-257.51 420-227.41q0 30.1-21.25 51.51-21.24 21.4-51.34 21.4Zm265.34 0q-30.1 0-51.42-21.43Q540-197.37 540-227.47q0-30.1 21.39-51.31Q582.79-300 612.83-300q30.14 0 51.4 21.25 21.27 21.24 21.27 51.34 0 30.1-21.32 51.51-21.33 21.4-51.43 21.4ZM347.41-407.37q-30.1 0-51.51-21.39-21.4-21.4-21.4-51.44 0-30.23 21.43-51.33 21.44-21.1 51.54-21.1 30.1 0 51.31 21.19Q420-510.26 420-480.14q0 30.12-21.25 51.44-21.24 21.33-51.34 21.33Zm265.34 0q-30.1 0-51.42-21.39Q540-450.16 540-480.2q0-30.23 21.39-51.33 21.4-21.1 51.44-21.1 30.14 0 51.4 21.19 21.27 21.18 21.27 51.3 0 30.12-21.32 51.44-21.33 21.33-51.43 21.33ZM347.41-660q-30.1 0-51.51-21.39-21.4-21.4-21.4-51.44 0-30.14 21.43-51.4 21.44-21.27 51.54-21.27 30.1 0 51.31 21.32Q420-762.85 420-732.75t-21.25 51.42Q377.51-660 347.41-660Zm265.34 0q-30.1 0-51.42-21.39Q540-702.79 540-732.83q0-30.14 21.39-51.4 21.4-21.27 51.44-21.27 30.14 0 51.4 21.32 21.27 21.33 21.27 51.43t-21.32 51.42Q642.85-660 612.75-660Z"/></svg>

package/assets/icons/edit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M181.91-182.15h44.24l459.81-458.81-43.76-44-460.29 459.05v43.76Zm-67.89 68.13V-253.5l574.52-573.76q8.24-8.48 19.81-13.22 11.56-4.74 24.11-4.74 11.47 0 22.95 4.74 11.48 4.74 21.2 12.98l51.89 51.17q9.24 9.72 13.48 21.32t4.24 23.31q0 11.72-4.74 23.7-4.74 11.98-12.98 20.46L253.74-114.02H114.02ZM775.17-732.7l-41.24-41.47 41.24 41.47ZM664.2-663.2l-22-21.76 43.76 44-21.76-22.24Z"/></svg>

package/assets/icons/edit_note.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-396.85v-68.13h310.76v68.13H154.02Zm0-170.5v-68.13h478.13v68.13H154.02Zm0-170.5v-68.37h478.13v68.37H154.02Zm365.02 583.83v-128.02L741-503q9.51-9.63 21.13-13.91 11.62-4.29 23.5-4.29 12.48 0 24.21 4.86T831.02-502l37 37q9.44 9.48 13.82 21.12 4.38 11.63 4.38 23.27 0 11.96-4.86 24.06-4.86 12.09-14.25 21.57L647.07-154.02H519.04Zm303.59-266.59-37-37 37 37Zm-240 203h38l120.28-121.23-18-19.02-19-18.03-121.28 120.22v38.06Zm140.28-140.28-19-18 37 37-18-19Z"/></svg>

package/assets/icons/emoji_food_beverage.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-114.02v-68.13h652.2v68.13h-652.2ZM309.8-258.57q-65.17 0-110.48-44.93-45.3-44.93-45.3-109.85v-432.87h664.07q28.1 0 48.11 20.08 20.02 20.08 20.02 48.05v160q0 28.1-20.02 48.12-20.01 20.01-48.11 20.01h-92.66v136.61q0 64.92-45.47 109.85-45.48 44.93-110.55 44.93H309.8Zm.24-519.28H657.3 222.15h87.89Zm415.39 159.76h92.42v-160h-92.42v160ZM569.15-326.93q34.84 0 61.5-26.52 26.65-26.52 26.65-60.14v-364.26H399.15v37.31l71 58q1 1 9 18v150q0 9.6-7 16.8-7 7.2-18 7.2h-151q-11 0-18-7.2t-7-16.8v-150q0-4 9-18l72-58v-37.31h-137v364.26q0 33.62 26.98 60.14 26.97 26.52 60.91 26.52h259.11ZM355.57-777.85h40-40Z"/></svg>

package/assets/icons/error.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M479.93-274.02q16.46 0 27.4-10.74 10.93-10.75 10.93-27.21t-10.86-27.52q-10.86-11.05-27.33-11.05-16.46 0-27.4 11.03-10.93 11.04-10.93 27.5 0 16.47 10.86 27.23 10.86 10.76 27.33 10.76Zm-31-158.74h68.14v-257.07h-68.14v257.07ZM480.3-74.02q-84.2 0-158.04-31.88-73.84-31.88-129.16-87.2-55.32-55.32-87.2-129.2-31.88-73.88-31.88-158.17 0-84.28 31.88-158.2 31.88-73.91 87.16-128.74 55.28-54.84 129.18-86.82 73.9-31.99 158.21-31.99 84.3 0 158.25 31.97 73.94 31.97 128.75 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.33 0 84.24-31.99 158.07-31.98 73.84-86.82 128.95-54.83 55.1-128.87 87.17Q564.5-74.02 480.3-74.02Zm.2-68.13q140.54 0 238.95-98.75 98.4-98.76 98.4-239.6 0-140.54-98.22-238.95-98.21-98.4-239.75-98.4-140.16 0-238.95 98.22-98.78 98.21-98.78 239.75 0 140.16 98.75 238.95 98.76 98.78 239.6 98.78ZM480-480Z"/></svg>

package/assets/icons/expand_more.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-339.5 234.26-585.24 283-633.98l197 198 197-197 48.74 48.74L480-339.5Z"/></svg>

package/assets/icons/first_page.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M235.93-234.26v-491.48h68.14v491.48h-68.14Zm451.07-3L447.26-477 687-716.74 735.74-668l-191 191 191 191L687-237.26Z"/></svg>

package/assets/icons/image.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M182.15-114.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-595.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h595.7q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03v595.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-595.7Zm0-68.13h595.7v-595.7h-595.7v595.7Zm50.74-92.7h495.22L578-476.59l-132 171-93-127-120.11 157.74Zm-50.74 92.7v-595.7 595.7Z"/></svg>

package/assets/icons/keyboard_arrow_down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-338.26 234.26-584 283-632.74l197 197 197-197L725.74-584 480-338.26Z"/></svg>

package/assets/icons/keyboard_arrow_left.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M561-234.26 314.26-481 561-727.74 609.74-679l-198 198 198 198L561-234.26Z"/></svg>

package/assets/icons/keyboard_arrow_right.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m524.26-481-198-198L375-727.74 621.74-481 375-234.26 326.26-283l198-198Z"/></svg>

package/assets/icons/label.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M846.22-480 674.83-237.89q-14.2 19.67-33.86 31.77-19.67 12.1-43.36 12.1H182.15q-28.1 0-48.12-20.01-20.01-20.02-20.01-48.12v-435.7q0-28.2 20.01-48.28 20.02-20.09 48.12-20.09h415.46q23.69 0 43.36 12.34 19.67 12.34 33.86 31.77L846.22-480Zm-85.29 0L608.56-697.85H182.15v435.7h426.46L760.93-480Zm-578.78 0v217.85-435.7V-480Z"/></svg>

package/assets/icons/last_page.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M272-239.26 223.26-288l192-192-192-192L272-720.74 512.74-480 272-239.26Zm383.93 5v-491.48h68.14v491.48h-68.14Z"/></svg>

package/assets/icons/remove.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M194.02-445.93v-68.14h572.2v68.14h-572.2Z"/></svg>

package/assets/icons/search.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M795.76-114.3 531.33-378.5q-29.76 25.26-69.6 39.41-39.84 14.16-85.16 14.16-109.84 0-185.96-76.2Q114.5-477.33 114.5-585t76.2-183.87q76.19-76.2 184.37-76.2 108.17 0 183.86 76.2 75.7 76.2 75.7 184.02 0 43.33-13.64 82.97t-40.92 74.4L845.5-164.04l-49.74 49.74ZM375.65-393.07q79.73 0 135.29-56.24Q566.5-505.55 566.5-585q0-79.45-55.6-135.69-55.59-56.24-135.25-56.24-80.49 0-136.76 56.24-56.26 56.24-56.26 135.69 0 79.45 56.23 135.69 56.23 56.24 136.79 56.24Z"/></svg>

package/assets/icons/star-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m224.15-107.56 67.39-291.29L65.41-594.78l298.52-25.72L480-895.3l116.07 274.8 298.52 25.72-226.13 195.93 67.63 291.29L480-262.3 224.15-107.56Z"/></svg>

package/assets/icons/star.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m326.37-249.79 153.64-91.89 153.64 92.9-41.28-173.94L727.5-540.33l-178.17-15.52L480-720.02l-69.33 163.41-178.17 15.28 135.22 117.38-41.35 174.16ZM224.15-107.56l67.39-291.29L65.41-594.78l298.43-25.67L480-895.3l116.16 274.85 298.43 25.67-226.13 195.93 67.63 291.29L480-262.3 224.15-107.56ZM480-474.52Z"/></svg>

package/assets/icons/title.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M425.93-154.02v-544.07H194.02v-108.13h572.2v108.13H534.3v544.07H425.93Z"/></svg>

package/assets/icons/visibility-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480.12-330q70.88 0 120.38-49.62t49.5-120.5q0-70.88-49.62-120.38T479.88-670Q409-670 359.5-620.38T310-499.88q0 70.88 49.62 120.38t120.5 49.5Zm-.3-61.83q-45.15 0-76.57-31.6-31.42-31.6-31.42-76.75t31.6-76.57q31.6-31.42 76.75-31.42t76.57 31.6q31.42 31.6 31.42 76.75t-31.6 76.57q-31.6 31.42-76.75 31.42ZM480-194.5q-147.91 0-267.35-84.67Q93.22-363.85 34.5-500q58.72-136.15 178.15-220.83Q332.09-805.5 480-805.5q147.91 0 267.35 84.67Q866.78-636.15 925.5-500q-58.72 136.15-178.15 220.83Q627.91-194.5 480-194.5Z"/></svg>

package/assets/icons/visibility_off-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M813.85-61.85 649.2-223.74q-35 14-79.24 21.62-44.24 7.62-89.96 7.62-147.2 0-267.75-82.46Q91.7-359.41 34.5-500q19.52-51.76 55.38-101.86t86.38-95.81L50.98-822.48l43.91-45.15 759.87 759.87-40.91 45.91ZM480-330q13.28 0 28.45-2.5 15.16-2.5 25.44-7.26L319.28-553.89q-4.52 11.28-6.9 25.56Q310-514.04 310-500q0 72 50 121t120 49Zm283.74 41.91L629.96-422.11q9.52-15.04 14.78-36.18T650-500q0-71-49.5-120.5T480-670q-20.8 0-41.09 4.76-20.28 4.76-36.8 15.04L287.57-765.5q35-16 90.21-28 55.22-12 107.22-12 143.96 0 264.01 82.34Q869.07-640.83 925.5-500q-25.76 64.48-67.12 118.08-41.36 53.59-94.64 93.83ZM578.07-474l-125.5-125.5q25.17-10.28 52.82-5.1 27.65 5.19 48.5 24.56 20.61 20.61 28.53 46 7.93 25.39-4.35 60.04Z"/></svg>

package/assets/icons/warning.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M34.74-116.89 480-886.22l445.26 769.33H34.74Zm113.8-65.74h662.92L480-754.98 148.54-182.63Zm335.64-54.85q12.96 0 21.87-9.08 8.91-9.09 8.91-22.05t-9.09-21.75q-9.08-8.79-22.05-8.79-12.96 0-21.87 8.96-8.91 8.97-8.91 21.93 0 12.96 9.09 21.87 9.08 8.91 22.05 8.91ZM454-348h60v-222.09h-60V-348Zm26-120.8Z"/></svg>

package/ui.loader-rendering/ULoaderRendering.vue

@@ -1,62 +0,0 @@
-<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>
-  </Transition>
-</template>
-
-<script setup>
-import { computed, onMounted, onUnmounted } from "vue";
-import { getDefault } from "../utils/utilUI.js";
-
-import ULoader from "../ui.loader/ULoader.vue";
-
-import { ULoaderRendering } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-import { useLoaderRendering } from "./useLoaderRendering.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Set loader on.
-   */
-  loading: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULoaderRendering).loading,
-  },
-
-  /**
-   * 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: getDefault(defaultConfig, ULoaderRendering).color,
-  },
-});
-
-const { wrapperAttrs, loaderAttrs, config } = useAttrs(props);
-const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
-
-onMounted(() => {
-  window.addEventListener("setRenderingStarted", loaderRenderingOn);
-  window.addEventListener("setRenderingFinished", loaderRenderingOff);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("setRenderingStarted", loaderRenderingOn);
-  window.removeEventListener("setRenderingFinished", loaderRenderingOff);
-});
-
-const showLoader = computed(() => {
-  return props.loading === undefined ? isLoading.value : props.loading;
-});
-</script>

package/ui.loader-rendering/storybook/stories.js

@@ -1,66 +0,0 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
-
-import ULoaderRendering from "../../ui.loader-rendering/ULoaderRendering.vue";
-import UButton from "../../ui.button/UButton.vue";
-import UCol from "../../ui.container-col/UCol.vue";
-
-import { useLoaderRendering } from "../useLoaderRendering.js";
-
-/**
- * The `ULoaderRendering` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-rendering)
- */
-export default {
-  id: "9030",
-  title: "Loaders and Skeletons / Loader Rendering",
-  component: ULoaderRendering,
-  argTypes: {
-    ...getArgTypes(ULoaderRendering.__name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        height: "420px",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { ULoaderRendering },
-  setup() {
-    const slots = getSlotNames(ULoaderRendering.__name);
-
-    return { args, slots };
-  },
-  template: `
-    <ULoaderRendering v-bind="args" class="w-full h-full">
-      ${args.slotTemplate || getSlotsFragment()}
-    </ULoaderRendering>
-  `,
-});
-
-const LoadingTemplate = (args) => ({
-  components: { ULoaderRendering, UButton, UCol },
-  setup() {
-    const { loaderRenderingOn, loaderRenderingOff, isLoading } = useLoaderRendering();
-
-    function toggleLoading() {
-      isLoading.value ? loaderRenderingOff() : loaderRenderingOn();
-    }
-
-    return { args, loaderRenderingOn, loaderRenderingOff, isLoading, toggleLoading };
-  },
-  template: `
-    <UCol align="center" class="pb-4">
-      <UButton label="Toggle loading" size="sm" @click="toggleLoading"/>
-    </UCol>
-
-    <ULoaderRendering v-bind="args" class="!static w-full h-96" />
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const LoadingOff = LoadingTemplate.bind({});
-LoadingOff.args = { loading: false };

package/ui.loader-rendering/useLoaderRendering.js

@@ -1,25 +0,0 @@
-import { inject, readonly, ref } from "vue";
-
-export const LoaderRenderingSymbol = Symbol.for("vueless:loader-rendering");
-
-const isLoading = ref(true);
-
-function loaderRenderingOn() {
-  isLoading.value = true;
-}
-
-function loaderRenderingOff() {
-  isLoading.value = false;
-}
-
-export function createLoaderRendering() {
-  return {
-    isLoading: readonly(isLoading),
-    loaderRenderingOn,
-    loaderRenderingOff,
-  };
-}
-
-export function useLoaderRendering() {
-  return inject(LoaderRenderingSymbol);
-}

package/ui.loader-rendering/utilLoaderRedering.js

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

package/ui.loader-top/storybook/stories.js

@@ -1,85 +0,0 @@
-import { getArgTypes, getSlotNames } from "../../utils/utilStorybook.js";
-
-import ULoaderTop from "../../ui.loader-top/ULoaderTop.vue";
-import UButton from "../../ui.button/UButton.vue";
-import URow from "../../ui.container-row/URow.vue";
-import UCol from "../../ui.container-col/UCol.vue";
-import UBadge from "../../ui.text-badge/UBadge.vue";
-
-import { useLoaderTop } from "../useLoaderTop.js";
-import { loaderTopOff, loaderTopOn } from "../utilLoaderTop.js";
-
-/**
- * The `ULoaderTop` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-top)
- */
-export default {
-  id: "9020",
-  title: "Loaders and Skeletons / Loader Top",
-  component: ULoaderTop,
-  argTypes: {
-    ...getArgTypes(ULoaderTop.__name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { ULoaderTop, UButton, URow },
-  setup() {
-    const { loaderTopOn, loaderTopOff } = useLoaderTop();
-
-    const slots = getSlotNames(ULoaderTop.__name);
-
-    return { args, slots, loaderTopOn, loaderTopOff };
-  },
-  template: `
-    <ULoaderTop v-bind="args" resources="https://api.publicapis.org/entries"/>
-
-    <URow gap="sm">
-      <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/entries')" />
-      <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/entries')" />
-    </URow>
-  `,
-});
-
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
-  components: { ULoaderTop, UButton, UCol, URow, UBadge },
-  setup() {
-    return {
-      args,
-      loaderTopOff,
-      loaderTopOn,
-      options: argTypes[args.enum].options,
-    };
-  },
-  template: `
-    <UCol>
-      <URow gap="sm" class="pb-4">
-        <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/images')" />
-        <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/images')" />
-      </URow>
-
-      <URow
-        align="center"
-        v-for="(option, index) in options"
-        :key="index"
-      >
-        <UBadge
-          :label="option"
-          :[args.enum]="option"
-        />
-        <ULoaderTop
-          resources="https://api.publicapis.org/images"
-          class="static"
-          :[args.enum]="option"
-          v-bind="args"
-        />
-      </URow>
-
-    </UCol>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Color = EnumVariantTemplate.bind({});
-Color.args = { enum: "color" };