vueless 0.0.55 → 0.0.56

package/index.js

@@ -2,6 +2,8 @@ import { createLocale, LocaleSymbol } from "./composable.locale";
 
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en";
+export { default as useLoaderRendering } from "./ui.loader-rendering/composables/useLoaderRendering";
+export { default as useLoaderTop } from "./ui.loader-top/composables/useLoaderTop";
 export { useLocale } from "./composable.locale";
 export {
   notify,

package/package.json

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

package/ui.button/index.vue

@@ -26,7 +26,7 @@
 import { ref } from "vue";
 
 import UIService, { getRandomId } from "../service.ui";
-import ULoader from "../ui.other-loader";
+import ULoader from "../ui.loader";
 
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";

package/ui.data-table/index.vue

@@ -278,7 +278,7 @@ import UIcon from "../ui.image-icon";
 import UEmpty from "../ui.text-empty";
 import UDivider from "../ui.container-divider";
 import UCheckbox from "../ui.form-checkbox";
-import ULoaderTop from "../ui.other-loader-top";
+import ULoaderTop from "../ui.loader-top";
 import UTableCell from "../ui.data-table-cell";
 
 import UIService from "../service.ui";

package/{ui.other-loader → ui.loader}/index.stories.js

@@ -1,11 +1,11 @@
-import ULoader from "../ui.other-loader";
+import ULoader from "../ui.loader";
 import URow from "../ui.container-row";
 
 import { getArgTypes } from "../service.storybook";
 
 export default {
   id: "9020",
-  title: "Other / Loader",
+  title: "Loaders and Skeletons / Loader",
   component: ULoader,
   argTypes: {
     ...getArgTypes(ULoader.name),
@@ -31,14 +31,14 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <URow>
+    <div class="flex gap-4 flex-wrap">
       <ULoader
         v-for="(color, index) in colors"
         :color="color"
         v-bind="args"
         :key="index"
       />
-    </URow>
+    </div>
   `,
 });
 

package/ui.loader-rendering/Docs.mdx

@@ -0,0 +1,21 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Control loader
+You can control loader state using *useLoaderRendering* composable.
+
+<Source code={`
+import { useLoaderRendering } from "vueless";
+
+const { setRenderingFinished, isRenderingPage, setRenderingStarted } = useLoaderRendering();
+`} language="jsx" dark />

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

@@ -0,0 +1,55 @@
+import ULoaderRendering from "../ui.loader-rendering";
+import UButton from "../ui.button";
+
+import useLoaderRendering from "./composables/useLoaderRendering";
+
+import { getArgTypes } from "../service.storybook";
+
+export default {
+  id: "9023",
+  title: "Loaders and Skeletons / Loader rendering",
+  component: ULoaderRendering,
+  argTypes: {
+    ...getArgTypes(ULoaderRendering.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { ULoaderRendering },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div>
+        <ULoaderRendering v-bind="args" class="!static !w-full" />
+    </div>
+  `,
+});
+
+const LoadingTemplate = (args) => ({
+  components: { ULoaderRendering, UButton },
+  setup() {
+    const { setRenderingFinished, isRenderingPage, setRenderingStarted } = useLoaderRendering();
+
+    return { args, setRenderingFinished, setRenderingStarted, isRenderingPage };
+  },
+  methods: {
+    toggleLoading() {
+      this.isRenderingPage ? this.setRenderingFinished() : this.setRenderingStarted();
+    },
+  },
+  template: `
+      <div class="flex justify-center items-center pb-4">
+        <UButton label="Toggle loading" @click="toggleLoading"/>
+      </div>
+      <div>
+          <ULoaderRendering v-bind="args" class="!static !w-full" />
+      </div>
+    `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const LoadingOff = LoadingTemplate.bind({});
+LoadingOff.args = { loading: false };

package/ui.loader-rendering/index.vue

@@ -15,7 +15,7 @@ import { computed } from "vue";
 import useLoaderRendering from "./composables/useLoaderRendering";
 
 /* Should be a string for correct web-types gen */
-defineOptions({ name: "ULoaderRendering", inheritAttrs: false });
+defineOptions({ name: "ULoaderRendering" });
 
 const props = defineProps({
   loading: {

package/ui.loader-top/Docs.mdx

@@ -0,0 +1,32 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />
+
+## Control loader
+You can control loader state using *useLoaderRendering* composable.
+
+<Source code={`
+import { useLoaderRendeuseLoaderTopring } from "vueless";
+
+const { 
+    setLoadingOn,
+    setLoadingOff,
+    addRequestUrl,
+    removeRequestUrl,
+    setComponentRequestQueue,
+    removeComponentRequestQueue,
+} = useLoaderRendering();
+`} language="jsx" dark />

package/{ui.other-loader-top → ui.loader-top}/composables/useLoaderTop.js

@@ -1,6 +1,6 @@
 import { ref, readonly } from "vue";
 
-const isLoading = ref(false);
+const isLoading = ref(true);
 const requestQueue = ref([]);
 const loaderRequestQueue = ref([]);
 const loaderRequestTimeout = ref(0);
@@ -33,7 +33,7 @@ function removeRequestUrl(url) {
 }
 
 function setComponentRequestQueue(requests) {
-  componentLoaderRequestQueue.value = [...componentLoaderRequestQueue, ...requests];
+  componentLoaderRequestQueue.value = [...componentLoaderRequestQueue.value, ...requests];
 }
 
 function removeComponentRequestQueue() {

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

@@ -0,0 +1,69 @@
+import ULoaderTop from "../ui.loader-top";
+import UButton from "../ui.button";
+
+import useLoaderTop from "../ui.loader-top/composables/useLoaderTop";
+
+import { getArgTypes } from "../service.storybook";
+
+export default {
+  id: "9024",
+  title: "Loaders and Skeletons / Loader top",
+  component: ULoaderTop,
+  argTypes: {
+    ...getArgTypes(ULoaderTop.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { ULoaderTop, UButton },
+  setup() {
+    const { setLoadingOn, setLoadingOff } = useLoaderTop();
+
+    return { args, setLoadingOn, setLoadingOff };
+  },
+  template: `
+    <div>
+        <ULoaderTop color="blue" v-bind="args" resource-names="https://api.publicapis.org/entries"/>
+
+        <div class="flex gap-2">
+          <UButton label="On" @click="setLoadingOn('https://api.publicapis.org/entries')" />
+          <UButton label="Off" @click="setLoadingOff('https://api.publicapis.org/entries')" />
+        </div>
+    </div>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { ULoaderTop, UButton },
+  setup() {
+    const { setLoadingOn, setLoadingOff } = useLoaderTop();
+
+    return {
+      args,
+      setLoadingOn,
+      setLoadingOff,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <div class="flex gap-4 flex-col">
+      <ULoaderTop
+        class="static"
+        v-for="(color, index) in colors"
+        :color="color"
+        v-bind="args"
+        :key="index"
+      />
+    </div>
+    <div class="flex gap-2 pt-4">
+      <UButton label="On" @click="setLoadingOn('https://api.publicapis.org/entries')" />
+      <UButton label="Off" @click="setLoadingOff('https://api.publicapis.org/entries')" />
+    </div>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Color = ColorsTemplate.bind({});
+Color.args = {};

package/{ui.other-loader-top → ui.loader-top}/index.vue

@@ -27,15 +27,6 @@ const props = defineProps({
     default: "",
   },
 
-  /**
-   * Loader position.
-   * @values fixed, absolute, relative
-   */
-  position: {
-    type: String,
-    default: UIService.get(defaultConfig, ULoaderTop).default.position,
-  },
-
   /**
    * The color of the loader stripe.
    * @values gray, red, orange, yellow, green, blue, violet, fuchsia

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4408,7 +4408,7 @@
             }
           ],
           "source": {
-            "module": "vueless/ui.other-loader/index.vue",
+            "module": "vueless/ui.loader/index.vue",
             "symbol": "default"
           }
         },
@@ -4443,15 +4443,6 @@
               },
               "default": "\"\""
             },
-            {
-              "name": "position",
-              "description": "Loader position.",
-              "value": {
-                "kind": "expression",
-                "type": "'fixed' | 'absolute' | 'relative'"
-              },
-              "default": "fixed"
-            },
             {
               "name": "color",
               "description": "The color of the loader stripe.",
@@ -4463,7 +4454,7 @@
             }
           ],
           "source": {
-            "module": "vueless/ui.other-loader-top/index.vue",
+            "module": "vueless/ui.loader-top/index.vue",
             "symbol": "default"
           }
         },