vueless 0.0.401 → 0.0.403

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/index.js +10 -10
  2. package/package.json +2 -2
  3. package/ui.container-modal/UModal.vue +1 -2
  4. package/ui.data-table/UTable.vue +3 -3
  5. package/ui.form-input-search/UInputSearch.vue +4 -0
  6. package/ui.form-select/USelect.vue +1 -5
  7. package/{ui.loader-rendering/ULoaderRendering.vue → ui.loader-overlay/ULoaderOverlay.vue} +9 -9
  8. package/{ui.loader-rendering → ui.loader-overlay}/constants.js +1 -1
  9. package/{ui.loader-rendering → ui.loader-overlay}/storybook/Docs.mdx +8 -8
  10. package/ui.loader-overlay/storybook/stories.js +66 -0
  11. package/ui.loader-overlay/useLoaderOverlay.js +25 -0
  12. package/ui.loader-overlay/utilLoaderOverlay.js +7 -0
  13. package/{ui.loader-top/ULoaderTop.vue → ui.loader-progress/ULoaderProgress.vue} +12 -11
  14. package/{ui.loader-top → ui.loader-progress}/constants.js +1 -1
  15. package/{ui.loader-top → ui.loader-progress}/storybook/Docs.mdx +10 -10
  16. package/ui.loader-progress/storybook/stories.js +85 -0
  17. package/{ui.loader-top/useLoaderTop.js → ui.loader-progress/useLoaderProgress.js} +9 -9
  18. package/{ui.loader-top/utilLoaderTop.js → ui.loader-progress/utilLoaderProgress.js} +6 -6
  19. package/web-types.json +5 -5
  20. package/assets/icons/add.svg +0 -1
  21. package/assets/icons/apps.svg +0 -1
  22. package/assets/icons/arrow_back.svg +0 -1
  23. package/assets/icons/attach_file.svg +0 -1
  24. package/assets/icons/check.svg +0 -1
  25. package/assets/icons/check_circle.svg +0 -1
  26. package/assets/icons/chevron_left.svg +0 -1
  27. package/assets/icons/chevron_right.svg +0 -1
  28. package/assets/icons/close.svg +0 -1
  29. package/assets/icons/close_small.svg +0 -1
  30. package/assets/icons/delete.svg +0 -1
  31. package/assets/icons/description.svg +0 -1
  32. package/assets/icons/drag_indicator.svg +0 -1
  33. package/assets/icons/edit.svg +0 -1
  34. package/assets/icons/edit_note.svg +0 -1
  35. package/assets/icons/emoji_food_beverage.svg +0 -1
  36. package/assets/icons/error.svg +0 -1
  37. package/assets/icons/expand_more.svg +0 -1
  38. package/assets/icons/first_page.svg +0 -1
  39. package/assets/icons/image.svg +0 -1
  40. package/assets/icons/keyboard_arrow_down.svg +0 -1
  41. package/assets/icons/keyboard_arrow_left.svg +0 -1
  42. package/assets/icons/keyboard_arrow_right.svg +0 -1
  43. package/assets/icons/label.svg +0 -1
  44. package/assets/icons/last_page.svg +0 -1
  45. package/assets/icons/remove.svg +0 -1
  46. package/assets/icons/search.svg +0 -1
  47. package/assets/icons/star-fill.svg +0 -1
  48. package/assets/icons/star.svg +0 -1
  49. package/assets/icons/title.svg +0 -1
  50. package/assets/icons/visibility-fill.svg +0 -1
  51. package/assets/icons/visibility_off-fill.svg +0 -1
  52. package/assets/icons/warning.svg +0 -1
  53. package/ui.loader-rendering/storybook/stories.js +0 -66
  54. package/ui.loader-rendering/useLoaderRendering.js +0 -25
  55. package/ui.loader-rendering/utilLoaderRedering.js +0 -7
  56. package/ui.loader-top/storybook/stories.js +0 -85
  57. /package/{ui.loader-rendering → ui.loader-overlay}/config.js +0 -0
  58. /package/{ui.loader-rendering → ui.loader-overlay}/useAttrs.js +0 -0
  59. /package/{ui.loader-top → ui.loader-progress}/config.js +0 -0
  60. /package/{ui.loader-top → ui.loader-progress}/useAttrs.js +0 -0
package/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable vue/max-len, prettier/prettier */
2
2
  import { createLocale, LocaleSymbol } from "./composables/useLocale.js";
3
- import { createLoaderRendering, LoaderRenderingSymbol } from "./ui.loader-rendering/useLoaderRendering.js";
4
- import { createLoaderTop, LoaderTopSymbol } from "./ui.loader-top/useLoaderTop.js";
3
+ import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay.js";
4
+ import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress.js";
5
5
  import { themeInit } from "./utils/utilTheme.js";
6
6
 
7
7
  export { setTitle } from "./utils/utilHelper.js";
@@ -9,10 +9,10 @@ export { setTheme } from "./utils/utilTheme.js";
9
9
  export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
10
10
  export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
11
11
  export { useLocale } from "./composables/useLocale.js";
12
- export { useLoaderTop } from "./ui.loader-top/useLoaderTop.js";
13
- export { loaderTopOn, loaderTopOff } from "./ui.loader-top/utilLoaderTop.js";
14
- export { useLoaderRendering } from "./ui.loader-rendering/useLoaderRendering.js";
15
- export { loaderRenderingOn, loaderRenderingOff } from "./ui.loader-rendering/utilLoaderRedering.js";
12
+ export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress.js";
13
+ export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress.js";
14
+ export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay.js";
15
+ export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay.js";
16
16
  export {
17
17
  notify,
18
18
  notifySuccess,
@@ -26,13 +26,13 @@ export {
26
26
 
27
27
  export function createVueless(options = {}) {
28
28
  const i18n = createLocale(options.i18n);
29
- const loaderRendering = createLoaderRendering();
30
- const loaderTop = createLoaderTop();
29
+ const loaderOverlay = createLoaderOverlay();
30
+ const loaderProgress = createLoaderProgress();
31
31
 
32
32
  const install = (app) => {
33
33
  app.provide(LocaleSymbol, i18n);
34
- app.provide(LoaderRenderingSymbol, loaderRendering);
35
- app.provide(LoaderTopSymbol, loaderTop);
34
+ app.provide(LoaderOverlaySymbol, loaderOverlay);
35
+ app.provide(LoaderProgressSymbol, loaderProgress);
36
36
  };
37
37
 
38
38
  themeInit();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueless",
3
- "version": "0.0.401",
3
+ "version": "0.0.403",
4
4
  "license": "MIT",
5
5
  "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
6
6
  "keywords": [
@@ -53,7 +53,7 @@
53
53
  "@release-it/bumper": "^6.0.1",
54
54
  "@vitejs/plugin-vue": "^5.0.5",
55
55
  "@vue/eslint-config-prettier": "^9.0.0",
56
- "@vueless/plugin-vite": "^0.0.63",
56
+ "@vueless/plugin-vite": "^0.0.65",
57
57
  "@vueless/storybook": "^0.0.34",
58
58
  "@vueless/web-types": "^0.0.15",
59
59
  "autoprefixer": "^10.4.19",
@@ -57,14 +57,13 @@
57
57
  <slot name="header-right" />
58
58
  </div>
59
59
 
60
- <div v-bind="closeIconAttrs">
60
+ <div v-if="closeOnCross" v-bind="closeIconAttrs">
61
61
  <!--
62
62
  @slot Use it to add something instead of the close button.
63
63
  @binding {string} icon-name
64
64
  -->
65
65
  <slot name="close-button" :icon-name="config.defaults.closeIcon">
66
66
  <UIcon
67
- v-if="closeOnCross"
68
67
  internal
69
68
  interactive
70
69
  size="sm"
@@ -77,7 +77,7 @@
77
77
  </div>
78
78
  </template>
79
79
 
80
- <ULoaderTop
80
+ <ULoaderProgress
81
81
  v-if="resource && isHeaderSticky"
82
82
  :resources="resource"
83
83
  v-bind="stickyHeaderLoaderAttrs"
@@ -150,7 +150,7 @@
150
150
  </th>
151
151
  </tr>
152
152
 
153
- <ULoaderTop v-if="resource" :resources="resource" v-bind="headerLoaderAttrs" />
153
+ <ULoaderProgress v-if="resource" :resources="resource" v-bind="headerLoaderAttrs" />
154
154
  </thead>
155
155
 
156
156
  <tbody v-if="tableRows.length" v-bind="bodyAttrs">
@@ -277,7 +277,7 @@ import { merge } from "lodash-es";
277
277
  import UEmpty from "../ui.text-empty/UEmpty.vue";
278
278
  import UDivider from "../ui.container-divider/UDivider.vue";
279
279
  import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
280
- import ULoaderTop from "../ui.loader-top/ULoaderTop.vue";
280
+ import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
281
281
  import UTableRow from "./UTableRow.vue";
282
282
 
283
283
  import { getDefault, cx } from "../utils/utilUI.js";
@@ -1,6 +1,7 @@
1
1
  <template>
2
2
  <UInput
3
3
  :id="elementId"
4
+ ref="inputRef"
4
5
  :model-value="localValue"
5
6
  :size="size"
6
7
  :disabled="disabled"
@@ -253,6 +254,9 @@ let updateValueWithDebounce = createDebounce((value) => {
253
254
  }, Number(props.debounce));
254
255
 
255
256
  const localValue = ref("");
257
+ const inputRef = ref(null);
258
+
259
+ defineExpose({ inputRef });
256
260
 
257
261
  const elementId = props.id || useId();
258
262
 
@@ -677,7 +677,7 @@ const isSelectedValueLabelVisible = computed(() => {
677
677
  });
678
678
 
679
679
  const filteredOptions = computed(() => {
680
- const normalizedSearch = search.value.toLowerCase().trim();
680
+ const normalizedSearch = search.value.toLowerCase().trim() || "";
681
681
 
682
682
  let options = props.multiple
683
683
  ? SelectService.removeSelectedValues(
@@ -688,10 +688,6 @@ const filteredOptions = computed(() => {
688
688
  )
689
689
  : [...props.options];
690
690
 
691
- if (!normalizedSearch) {
692
- return options.slice(0, props.optionsLimit || options.length);
693
- }
694
-
695
691
  options = props.groupValueKey
696
692
  ? filterAndFlat(options, normalizedSearch, props.labelKey)
697
693
  : SelectService.filterOptions(options, normalizedSearch, props.labelKey);
@@ -20,10 +20,10 @@ import { getDefault } from "../utils/utilUI.js";
20
20
 
21
21
  import ULoader from "../ui.loader/ULoader.vue";
22
22
 
23
- import { ULoaderRendering } from "./constants.js";
23
+ import { ULoaderOverlay } from "./constants.js";
24
24
  import defaultConfig from "./config.js";
25
25
  import useAttrs from "./useAttrs.js";
26
- import { useLoaderRendering } from "./useLoaderRendering.js";
26
+ import { useLoaderOverlay } from "./useLoaderOverlay.js";
27
27
 
28
28
  defineOptions({ inheritAttrs: false });
29
29
 
@@ -33,7 +33,7 @@ const props = defineProps({
33
33
  */
34
34
  loading: {
35
35
  type: Boolean,
36
- default: getDefault(defaultConfig, ULoaderRendering).loading,
36
+ default: getDefault(defaultConfig, ULoaderOverlay).loading,
37
37
  },
38
38
 
39
39
  /**
@@ -42,21 +42,21 @@ const props = defineProps({
42
42
  */
43
43
  color: {
44
44
  type: String,
45
- default: getDefault(defaultConfig, ULoaderRendering).color,
45
+ default: getDefault(defaultConfig, ULoaderOverlay).color,
46
46
  },
47
47
  });
48
48
 
49
49
  const { overlayAttrs, nestedLoaderAttrs, config } = useAttrs(props);
50
- const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
50
+ const { isLoading, loaderOverlayOn, loaderOverlayOff } = useLoaderOverlay();
51
51
 
52
52
  onMounted(() => {
53
- window.addEventListener("setRenderingStarted", loaderRenderingOn);
54
- window.addEventListener("setRenderingFinished", loaderRenderingOff);
53
+ window.addEventListener("loaderOverlayOn", loaderOverlayOn);
54
+ window.addEventListener("loaderOverlayOff", loaderOverlayOff);
55
55
  });
56
56
 
57
57
  onUnmounted(() => {
58
- window.removeEventListener("setRenderingStarted", loaderRenderingOn);
59
- window.removeEventListener("setRenderingFinished", loaderRenderingOff);
58
+ window.removeEventListener("loaderOverlayOn", loaderOverlayOn);
59
+ window.removeEventListener("loaderOverlayOff", loaderOverlayOff);
60
60
  });
61
61
 
62
62
  const showLoader = computed(() => {
@@ -2,4 +2,4 @@
2
2
  This const is needed to prevent the issue in script setup:
3
3
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
4
4
  */
5
- export const ULoaderRendering = "ULoaderRendering";
5
+ export const ULoaderOverlay = "ULoaderOverlay";
@@ -13,34 +13,34 @@ import defaultConfig from "../config.js?raw"
13
13
  <Stories of={stories} />
14
14
 
15
15
  ## Using loader
16
- To control the loader state in Vue components use `useLoaderRendering` composable.
16
+ To control the loader state in Vue components use `useLoaderOverlay` composable.
17
17
 
18
18
  <Source code={`
19
- import { useLoaderRendering } from "vueless";
19
+ import { useLoaderOverlay } from "vueless";
20
20
 
21
- const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
21
+ const { isLoading, loaderOverlayOn, loaderOverlayOff } = useLoaderOverlay();
22
22
 
23
23
  // get loader state
24
24
  console.log(isLoading.value);
25
25
 
26
26
  // show loader
27
- loaderRenderingOn();
27
+ loaderOverlayOn();
28
28
 
29
29
  // hide loader
30
- loaderRenderingOff();
30
+ loaderOverlayOff();
31
31
  `} language="jsx" dark />
32
32
 
33
33
  ## Using loader outside Vue components
34
34
  To control the loader state outside Vue components, use the following methods.
35
35
 
36
36
  <Source code={`
37
- import { loaderRenderingOn, loaderRenderingOff } from "vueless";
37
+ import { loaderOverlayOn, loaderOverlayOff } from "vueless";
38
38
 
39
39
  // show loader
40
- loaderRenderingOn();
40
+ loaderOverlayOn();
41
41
 
42
42
  // hide loader
43
- loaderRenderingOff();
43
+ loaderOverlayOff();
44
44
  `} language="jsx" dark />
45
45
 
46
46
  ## Default config
@@ -0,0 +1,66 @@
1
+ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
2
+
3
+ import ULoaderOverlay from "../ULoaderOverlay.vue";
4
+ import UButton from "../../ui.button/UButton.vue";
5
+ import UCol from "../../ui.container-col/UCol.vue";
6
+
7
+ import { useLoaderOverlay } from "../useLoaderOverlay.js";
8
+
9
+ /**
10
+ * The `ULoaderOverlay` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-overlay)
11
+ */
12
+ export default {
13
+ id: "9030",
14
+ title: "Loaders and Skeletons / Loader Overlay",
15
+ component: ULoaderOverlay,
16
+ argTypes: {
17
+ ...getArgTypes(ULoaderOverlay.__name),
18
+ },
19
+ parameters: {
20
+ docs: {
21
+ story: {
22
+ height: "420px",
23
+ },
24
+ },
25
+ },
26
+ };
27
+
28
+ const DefaultTemplate = (args) => ({
29
+ components: { ULoaderOverlay },
30
+ setup() {
31
+ const slots = getSlotNames(ULoaderOverlay.__name);
32
+
33
+ return { args, slots };
34
+ },
35
+ template: `
36
+ <ULoaderOverlay v-bind="args" class="w-full h-full">
37
+ ${args.slotTemplate || getSlotsFragment()}
38
+ </ULoaderOverlay>
39
+ `,
40
+ });
41
+
42
+ const LoadingTemplate = (args) => ({
43
+ components: { ULoaderOverlay, UButton, UCol },
44
+ setup() {
45
+ const { loaderOverlayOn, loaderOverlayOff, isLoading } = useLoaderOverlay();
46
+
47
+ function toggleLoading() {
48
+ isLoading.value ? loaderOverlayOff() : loaderOverlayOn();
49
+ }
50
+
51
+ return { args, loaderOverlayOn, loaderOverlayOff, isLoading, toggleLoading };
52
+ },
53
+ template: `
54
+ <UCol align="center" class="pb-4">
55
+ <UButton label="Toggle loading" size="sm" @click="toggleLoading"/>
56
+ </UCol>
57
+
58
+ <ULoaderOverlay v-bind="args" class="!static w-full h-96" />
59
+ `,
60
+ });
61
+
62
+ export const Default = DefaultTemplate.bind({});
63
+ Default.args = {};
64
+
65
+ export const LoadingToggling = LoadingTemplate.bind({});
66
+ LoadingToggling.args = {};
@@ -0,0 +1,25 @@
1
+ import { inject, readonly, ref } from "vue";
2
+
3
+ export const LoaderOverlaySymbol = Symbol.for("vueless:loader-overlay");
4
+
5
+ const isLoading = ref(true);
6
+
7
+ function loaderOverlayOn() {
8
+ isLoading.value = true;
9
+ }
10
+
11
+ function loaderOverlayOff() {
12
+ isLoading.value = false;
13
+ }
14
+
15
+ export function createLoaderOverlay() {
16
+ return {
17
+ isLoading: readonly(isLoading),
18
+ loaderOverlayOn,
19
+ loaderOverlayOff,
20
+ };
21
+ }
22
+
23
+ export function useLoaderOverlay() {
24
+ return inject(LoaderOverlaySymbol);
25
+ }
@@ -0,0 +1,7 @@
1
+ export function loaderOverlayOn() {
2
+ window.dispatchEvent(new Event("loaderOverlayOn"));
3
+ }
4
+
5
+ export function loaderOverlayOff() {
6
+ window.dispatchEvent(new Event("loaderOverlayOff"));
7
+ }
@@ -9,10 +9,10 @@ import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "v
9
9
 
10
10
  import { getDefault } from "../utils/utilUI.js";
11
11
  import { isMobileApp } from "../utils/utilPlatform.js";
12
- import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderTop.js";
13
- import { useLoaderTop } from "./useLoaderTop.js";
12
+ import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderProgress.js";
13
+ import { useLoaderProgress } from "./useLoaderProgress.js";
14
14
 
15
- import { ULoaderTop, MAXIMUM, SPEED } from "./constants.js";
15
+ import { ULoaderProgress, MAXIMUM, SPEED } from "./constants.js";
16
16
  import defaultConfig from "./config.js";
17
17
  import useAttrs from "./useAttrs.js";
18
18
 
@@ -25,7 +25,7 @@ const props = defineProps({
25
25
  */
26
26
  color: {
27
27
  type: String,
28
- default: getDefault(defaultConfig, ULoaderTop).color,
28
+ default: getDefault(defaultConfig, ULoaderProgress).color,
29
29
  },
30
30
 
31
31
  /**
@@ -43,7 +43,8 @@ const progress = ref(0);
43
43
  const opacity = ref(1);
44
44
  const status = ref(null);
45
45
 
46
- const { requestQueue, removeRequestUrl, isLoading, loaderTopOff, loaderTopOn } = useLoaderTop();
46
+ const { requestQueue, removeRequestUrl, isLoading, loaderProgressOff, loaderProgressOn } =
47
+ useLoaderProgress();
47
48
  const { stripeAttrs } = useAttrs(props, { error, isMobileApp });
48
49
 
49
50
  const isStarted = computed(() => {
@@ -67,8 +68,8 @@ watch(() => requestQueue.value.length, onChangeRequestsQueue);
67
68
  watch(isLoading, onChangeLoadingState);
68
69
 
69
70
  onMounted(() => {
70
- window.addEventListener("loaderTopOn", setLoaderOnHandler);
71
- window.addEventListener("loaderTopOff", setLoaderOffHandler);
71
+ window.addEventListener("loaderProgressOn", setLoaderOnHandler);
72
+ window.addEventListener("loaderProgressOff", setLoaderOffHandler);
72
73
 
73
74
  if (props.resources) {
74
75
  onChangeRequestsQueue();
@@ -80,16 +81,16 @@ onBeforeUnmount(() => {
80
81
  });
81
82
 
82
83
  onUnmounted(() => {
83
- window.removeEventListener("loaderTopOn", setLoaderOnHandler);
84
- window.removeEventListener("loaderTopOff", setLoaderOffHandler);
84
+ window.removeEventListener("loaderProgressOn", setLoaderOnHandler);
85
+ window.removeEventListener("loaderProgressOff", setLoaderOffHandler);
85
86
  });
86
87
 
87
88
  function setLoaderOnHandler(event) {
88
- loaderTopOn(event.detail.resource);
89
+ loaderProgressOn(event.detail.resource);
89
90
  }
90
91
 
91
92
  function setLoaderOffHandler(event) {
92
- loaderTopOff(event.detail.resource);
93
+ loaderProgressOff(event.detail.resource);
93
94
  }
94
95
 
95
96
  function onChangeLoadingState() {
@@ -2,7 +2,7 @@
2
2
  This const is needed to prevent the issue in script setup:
3
3
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
4
4
  */
5
- export const ULoaderTop = "ULoaderTop";
5
+ export const ULoaderProgress = "ULoaderProgress";
6
6
 
7
7
  export const MAXIMUM = 99;
8
8
  export const SPEED = 150;
@@ -13,30 +13,30 @@ import defaultConfig from "../config.js?raw"
13
13
  <Stories of={stories} />
14
14
 
15
15
  ## Using loader
16
- To control the loader state in Vue components use `useLoaderTop` composable.
16
+ To control the loader state in Vue components use `useLoaderProgress` composable.
17
17
 
18
18
  The loader uses queue of resources and will be shown until at least one item is present in a queue.
19
19
 
20
20
  <Source code={`
21
- import { useLoaderTop } from "vueless";
21
+ import { useLoaderProgress } from "vueless";
22
22
 
23
23
  const {
24
24
  isLoading,
25
- loaderTopOn,
26
- loaderTopOff,
25
+ loaderProgressOn,
26
+ loaderProgressOff,
27
27
  requestQueue,
28
28
  addRequestUrl
29
29
  removeRequestUrl
30
- } = useLoaderTop();
30
+ } = useLoaderProgress();
31
31
 
32
32
  // get loader state
33
33
  console.log(isLoading.value);
34
34
 
35
35
  // show loader (add resource into queue)
36
- loaderTopOn("/transactions");
36
+ loaderProgressOn("/transactions");
37
37
 
38
38
  // hide loader (remove resource from queue)
39
- loaderTopOff("/transactions");
39
+ loaderProgressOff("/transactions");
40
40
 
41
41
  // get current resource array
42
42
  console.log(requestQueue.value);
@@ -54,13 +54,13 @@ removeRequestUrl(["/transactions", "/products"]);
54
54
  To control the loader state outside Vue components, use the following methods.
55
55
 
56
56
  <Source code={`
57
- import { loaderTopOn, loaderTopOff } from "vueless";
57
+ import { loaderProgressOn, loaderProgressOff } from "vueless";
58
58
 
59
59
  // show loader
60
- loaderTopOn("/transactions");
60
+ loaderProgressOn("/transactions");
61
61
 
62
62
  // hide loader
63
- loaderTopOff("/transactions");
63
+ loaderProgressOff("/transactions");
64
64
  `} language="jsx" dark />
65
65
 
66
66
  ## Default config
@@ -0,0 +1,85 @@
1
+ import { getArgTypes, getSlotNames } from "../../utils/utilStorybook.js";
2
+
3
+ import ULoaderProgress from "../ULoaderProgress.vue";
4
+ import UButton from "../../ui.button/UButton.vue";
5
+ import URow from "../../ui.container-row/URow.vue";
6
+ import UCol from "../../ui.container-col/UCol.vue";
7
+ import UBadge from "../../ui.text-badge/UBadge.vue";
8
+
9
+ import { useLoaderProgress } from "../useLoaderProgress.js";
10
+ import { loaderProgressOff, loaderProgressOn } from "../utilLoaderProgress.js";
11
+
12
+ /**
13
+ * The `ULoaderProgress` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-progress)
14
+ */
15
+ export default {
16
+ id: "9020",
17
+ title: "Loaders and Skeletons / Loader Progress",
18
+ component: ULoaderProgress,
19
+ argTypes: {
20
+ ...getArgTypes(ULoaderProgress.__name),
21
+ },
22
+ };
23
+
24
+ const DefaultTemplate = (args) => ({
25
+ components: { ULoaderProgress, UButton, URow },
26
+ setup() {
27
+ const { loaderProgressOn, loaderProgressOff } = useLoaderProgress();
28
+
29
+ const slots = getSlotNames(ULoaderProgress.__name);
30
+
31
+ return { args, slots, loaderProgressOn, loaderProgressOff };
32
+ },
33
+ template: `
34
+ <ULoaderProgress v-bind="args" resources="https://api.publicapis.org/entries"/>
35
+
36
+ <URow gap="sm">
37
+ <UButton label="On" size="sm" @click="loaderProgressOn('https://api.publicapis.org/entries')" />
38
+ <UButton label="Off" size="sm" @click="loaderProgressOff('https://api.publicapis.org/entries')" />
39
+ </URow>
40
+ `,
41
+ });
42
+
43
+ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
44
+ components: { ULoaderProgress, UButton, UCol, URow, UBadge },
45
+ setup() {
46
+ return {
47
+ args,
48
+ loaderProgressOff,
49
+ loaderProgressOn,
50
+ options: argTypes[args.enum].options,
51
+ };
52
+ },
53
+ template: `
54
+ <UCol>
55
+ <URow gap="sm" class="pb-4">
56
+ <UButton label="On" size="sm" @click="loaderProgressOn('https://api.publicapis.org/images')" />
57
+ <UButton label="Off" size="sm" @click="loaderProgressOff('https://api.publicapis.org/images')" />
58
+ </URow>
59
+
60
+ <URow
61
+ align="center"
62
+ v-for="(option, index) in options"
63
+ :key="index"
64
+ >
65
+ <UBadge
66
+ :label="option"
67
+ :[args.enum]="option"
68
+ />
69
+ <ULoaderProgress
70
+ resources="https://api.publicapis.org/images"
71
+ class="static"
72
+ :[args.enum]="option"
73
+ v-bind="args"
74
+ />
75
+ </URow>
76
+
77
+ </UCol>
78
+ `,
79
+ });
80
+
81
+ export const Default = DefaultTemplate.bind({});
82
+ Default.args = {};
83
+
84
+ export const Color = EnumVariantTemplate.bind({});
85
+ Color.args = { enum: "color" };
@@ -1,14 +1,14 @@
1
1
  import { inject, readonly, ref } from "vue";
2
2
 
3
- import { getRequestWithoutQuery } from "./utilLoaderTop.js";
3
+ import { getRequestWithoutQuery } from "./utilLoaderProgress.js";
4
4
 
5
- export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
5
+ export const LoaderProgressSymbol = Symbol.for("vueless:loader-progress");
6
6
 
7
7
  const isLoading = ref(false);
8
8
  const requestQueue = ref([]);
9
9
  const requestTimeout = ref(0);
10
10
 
11
- function loaderTopOn(url) {
11
+ function loaderProgressOn(url) {
12
12
  addRequestUrl(url);
13
13
 
14
14
  isLoading.value = true;
@@ -16,7 +16,7 @@ function loaderTopOn(url) {
16
16
  clearTimeout(requestTimeout.value);
17
17
  }
18
18
 
19
- function loaderTopOff(url) {
19
+ function loaderProgressOff(url) {
20
20
  requestQueue.value = url
21
21
  ? requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url))
22
22
  : [];
@@ -44,17 +44,17 @@ function removeRequestUrl(url) {
44
44
  requestQueue.value = requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url));
45
45
  }
46
46
 
47
- export function createLoaderTop() {
47
+ export function createLoaderProgress() {
48
48
  return {
49
49
  isLoading: readonly(isLoading),
50
50
  requestQueue: readonly(requestQueue),
51
- loaderTopOn,
52
- loaderTopOff,
51
+ loaderProgressOn,
52
+ loaderProgressOff,
53
53
  addRequestUrl,
54
54
  removeRequestUrl,
55
55
  };
56
56
  }
57
57
 
58
- export function useLoaderTop() {
59
- return inject(LoaderTopSymbol);
58
+ export function useLoaderProgress() {
59
+ return inject(LoaderProgressSymbol);
60
60
  }
@@ -30,16 +30,16 @@ export const queue = (() => {
30
30
  };
31
31
  })();
32
32
 
33
- export function loaderTopOn(resource) {
34
- const loaderTopOnEvent = new CustomEvent("loaderTopOn", { detail: { resource } });
33
+ export function loaderProgressOn(resource) {
34
+ const loaderProgressOnEvent = new CustomEvent("loaderProgressOn", { detail: { resource } });
35
35
 
36
- window.dispatchEvent(loaderTopOnEvent);
36
+ window.dispatchEvent(loaderProgressOnEvent);
37
37
  }
38
38
 
39
- export function loaderTopOff(resource) {
40
- const loaderTopOfEvent = new CustomEvent("loaderTopOff", { detail: { resource } });
39
+ export function loaderProgressOff(resource) {
40
+ const loaderProgressOfEvent = new CustomEvent("loaderProgressOff", { detail: { resource } });
41
41
 
42
- window.dispatchEvent(loaderTopOfEvent);
42
+ window.dispatchEvent(loaderProgressOfEvent);
43
43
  }
44
44
 
45
45
  export function getRequestWithoutQuery(request) {
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "framework": "vue",
3
3
  "name": "vueless",
4
- "version": "0.0.401",
4
+ "version": "0.0.403",
5
5
  "contributions": {
6
6
  "html": {
7
7
  "description-markup": "markdown",
@@ -5863,7 +5863,7 @@
5863
5863
  }
5864
5864
  },
5865
5865
  {
5866
- "name": "ULoaderRendering",
5866
+ "name": "ULoaderOverlay",
5867
5867
  "description": "",
5868
5868
  "attributes": [
5869
5869
  {
@@ -5891,12 +5891,12 @@
5891
5891
  }
5892
5892
  ],
5893
5893
  "source": {
5894
- "module": "./src/ui.loader-rendering/ULoaderRendering.vue",
5894
+ "module": "./src/ui.loader-overlay/ULoaderOverlay.vue",
5895
5895
  "symbol": "default"
5896
5896
  }
5897
5897
  },
5898
5898
  {
5899
- "name": "ULoaderTop",
5899
+ "name": "ULoaderProgress",
5900
5900
  "description": "",
5901
5901
  "attributes": [
5902
5902
  {
@@ -5919,7 +5919,7 @@
5919
5919
  }
5920
5920
  ],
5921
5921
  "source": {
5922
- "module": "./src/ui.loader-top/ULoaderTop.vue",
5922
+ "module": "./src/ui.loader-progress/ULoaderProgress.vue",
5923
5923
  "symbol": "default"
5924
5924
  }
5925
5925
  },
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1 +0,0 @@
1
- <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>
@@ -1,66 +0,0 @@
1
- import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
2
-
3
- import ULoaderRendering from "../../ui.loader-rendering/ULoaderRendering.vue";
4
- import UButton from "../../ui.button/UButton.vue";
5
- import UCol from "../../ui.container-col/UCol.vue";
6
-
7
- import { useLoaderRendering } from "../useLoaderRendering.js";
8
-
9
- /**
10
- * The `ULoaderRendering` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-rendering)
11
- */
12
- export default {
13
- id: "9030",
14
- title: "Loaders and Skeletons / Loader Rendering",
15
- component: ULoaderRendering,
16
- argTypes: {
17
- ...getArgTypes(ULoaderRendering.__name),
18
- },
19
- parameters: {
20
- docs: {
21
- story: {
22
- height: "420px",
23
- },
24
- },
25
- },
26
- };
27
-
28
- const DefaultTemplate = (args) => ({
29
- components: { ULoaderRendering },
30
- setup() {
31
- const slots = getSlotNames(ULoaderRendering.__name);
32
-
33
- return { args, slots };
34
- },
35
- template: `
36
- <ULoaderRendering v-bind="args" class="w-full h-full">
37
- ${args.slotTemplate || getSlotsFragment()}
38
- </ULoaderRendering>
39
- `,
40
- });
41
-
42
- const LoadingTemplate = (args) => ({
43
- components: { ULoaderRendering, UButton, UCol },
44
- setup() {
45
- const { loaderRenderingOn, loaderRenderingOff, isLoading } = useLoaderRendering();
46
-
47
- function toggleLoading() {
48
- isLoading.value ? loaderRenderingOff() : loaderRenderingOn();
49
- }
50
-
51
- return { args, loaderRenderingOn, loaderRenderingOff, isLoading, toggleLoading };
52
- },
53
- template: `
54
- <UCol align="center" class="pb-4">
55
- <UButton label="Toggle loading" size="sm" @click="toggleLoading"/>
56
- </UCol>
57
-
58
- <ULoaderRendering v-bind="args" class="!static w-full h-96" />
59
- `,
60
- });
61
-
62
- export const Default = DefaultTemplate.bind({});
63
- Default.args = {};
64
-
65
- export const LoadingOff = LoadingTemplate.bind({});
66
- LoadingOff.args = { loading: false };
@@ -1,25 +0,0 @@
1
- import { inject, readonly, ref } from "vue";
2
-
3
- export const LoaderRenderingSymbol = Symbol.for("vueless:loader-rendering");
4
-
5
- const isLoading = ref(true);
6
-
7
- function loaderRenderingOn() {
8
- isLoading.value = true;
9
- }
10
-
11
- function loaderRenderingOff() {
12
- isLoading.value = false;
13
- }
14
-
15
- export function createLoaderRendering() {
16
- return {
17
- isLoading: readonly(isLoading),
18
- loaderRenderingOn,
19
- loaderRenderingOff,
20
- };
21
- }
22
-
23
- export function useLoaderRendering() {
24
- return inject(LoaderRenderingSymbol);
25
- }
@@ -1,7 +0,0 @@
1
- export function loaderRenderingOn() {
2
- window.dispatchEvent(new Event("setRenderingStarted"));
3
- }
4
-
5
- export function loaderRenderingOff() {
6
- window.dispatchEvent(new Event("setRenderingFinished"));
7
- }
@@ -1,85 +0,0 @@
1
- import { getArgTypes, getSlotNames } from "../../utils/utilStorybook.js";
2
-
3
- import ULoaderTop from "../../ui.loader-top/ULoaderTop.vue";
4
- import UButton from "../../ui.button/UButton.vue";
5
- import URow from "../../ui.container-row/URow.vue";
6
- import UCol from "../../ui.container-col/UCol.vue";
7
- import UBadge from "../../ui.text-badge/UBadge.vue";
8
-
9
- import { useLoaderTop } from "../useLoaderTop.js";
10
- import { loaderTopOff, loaderTopOn } from "../utilLoaderTop.js";
11
-
12
- /**
13
- * The `ULoaderTop` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-top)
14
- */
15
- export default {
16
- id: "9020",
17
- title: "Loaders and Skeletons / Loader Top",
18
- component: ULoaderTop,
19
- argTypes: {
20
- ...getArgTypes(ULoaderTop.__name),
21
- },
22
- };
23
-
24
- const DefaultTemplate = (args) => ({
25
- components: { ULoaderTop, UButton, URow },
26
- setup() {
27
- const { loaderTopOn, loaderTopOff } = useLoaderTop();
28
-
29
- const slots = getSlotNames(ULoaderTop.__name);
30
-
31
- return { args, slots, loaderTopOn, loaderTopOff };
32
- },
33
- template: `
34
- <ULoaderTop v-bind="args" resources="https://api.publicapis.org/entries"/>
35
-
36
- <URow gap="sm">
37
- <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/entries')" />
38
- <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/entries')" />
39
- </URow>
40
- `,
41
- });
42
-
43
- const EnumVariantTemplate = (args, { argTypes } = {}) => ({
44
- components: { ULoaderTop, UButton, UCol, URow, UBadge },
45
- setup() {
46
- return {
47
- args,
48
- loaderTopOff,
49
- loaderTopOn,
50
- options: argTypes[args.enum].options,
51
- };
52
- },
53
- template: `
54
- <UCol>
55
- <URow gap="sm" class="pb-4">
56
- <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/images')" />
57
- <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/images')" />
58
- </URow>
59
-
60
- <URow
61
- align="center"
62
- v-for="(option, index) in options"
63
- :key="index"
64
- >
65
- <UBadge
66
- :label="option"
67
- :[args.enum]="option"
68
- />
69
- <ULoaderTop
70
- resources="https://api.publicapis.org/images"
71
- class="static"
72
- :[args.enum]="option"
73
- v-bind="args"
74
- />
75
- </URow>
76
-
77
- </UCol>
78
- `,
79
- });
80
-
81
- export const Default = DefaultTemplate.bind({});
82
- Default.args = {};
83
-
84
- export const Color = EnumVariantTemplate.bind({});
85
- Color.args = { enum: "color" };
File without changes