vueless 0.0.86 → 0.0.88

package/package.json

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

package/ui.container-page/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div :data-cy="dataCy" v-bind="wrapperAttrs">
     <div v-bind="pageAttrs">
+      <!-- @slot Use it to add something before the header. -->
+      <slot name="header-before" />
+
       <div v-if="isShownHeader" v-bind="headerAttrs">
         <div v-bind="headerLeftAttrs">
           <!-- @slot Use it to add something before left side of the header. -->
@@ -41,11 +44,17 @@
         </div>
       </div>
 
+      <!-- @slot Use it to add something after the header. -->
+      <slot name="header-after" />
+
       <div>
         <!-- @slot Use it to add main content. -->
         <slot />
       </div>
 
+      <!-- @slot Use it to add something before the footer. -->
+      <slot name="footer-before" />
+
       <div v-if="isShownFooterSlot" class="vueless-page-footer" v-bind="footerAttrs">
         <div class="vueless-page-footer-left" v-bind="footerLeftAttrs">
           <!-- @slot Use it to add something to the left side of the footer. -->
@@ -57,6 +66,9 @@
           <slot name="footer-right" />
         </div>
       </div>
+
+      <!-- @slot Use it to add something after the footer. -->
+      <slot name="footer-after" />
     </div>
 
     <div v-if="fixedRounding && !isMobileBreakpoint" v-bind="rightRoundingWrapperAttrs">
@@ -193,9 +205,17 @@ const {
 
 const isShownHeader = computed(() => {
   const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);
-  const isHeaderRightSlot = hasSlotContent(slots["header-left"]);
-
-  return props.title || isHeaderLeftSlot || isHeaderRightSlot;
+  const isHeaderRightSlot = hasSlotContent(slots["header-right"]);
+  const isHeaderLeftBeforeSlot = hasSlotContent(slots["header-left-before"]);
+  const isHeaderLeftAfterSlot = hasSlotContent(slots["header-left-after"]);
+
+  return (
+    props.title ||
+    isHeaderLeftSlot ||
+    isHeaderLeftBeforeSlot ||
+    isHeaderLeftAfterSlot ||
+    isHeaderRightSlot
+  );
 });
 
 const isShownFooterSlot = computed(() => {

package/ui.loader-top/Docs.mdx

@@ -22,8 +22,8 @@ You can control loader state using *useLoaderRendering* composable.
 import { useLoaderTop } from "vueless";
 
 const { 
-    setLoaderOn,
-    setLoaderOff,
+    setLoaderTopOn,
+    setLoaderTopOff,
     addRequestUrl,
     removeRequestUrl
 } = useLoaderTop();

package/ui.loader-top/composables/useLoaderTop.js

@@ -8,7 +8,7 @@ const loaderRequestQueue = ref([]);
 const loaderRequestTimeout = ref(0);
 const componentLoaderRequestQueue = ref([]);
 
-function setLoaderOn(url) {
+function setLoaderTopOn(url) {
   loaderRequestQueue.value.push(url);
 
   isLoading.value = true;
@@ -16,7 +16,7 @@ function setLoaderOn(url) {
   clearTimeout(loaderRequestTimeout.value);
 }
 
-function setLoaderOff(url) {
+function setLoaderTopOff(url) {
   loaderRequestQueue.value = url ? loaderRequestQueue.value.filter((item) => item !== url) : [];
 
   loaderRequestTimeout.value = setTimeout(() => {
@@ -49,8 +49,8 @@ export function createLoaderTop() {
     loaderRequestQueue: readonly(loaderRequestQueue),
     loaderRequestTimeout: readonly(loaderRequestTimeout),
     componentLoaderRequestQueue: readonly(componentLoaderRequestQueue),
-    setLoaderOn,
-    setLoaderOff,
+    setLoaderTopOn,
+    setLoaderTopOff,
     addRequestUrl,
     removeRequestUrl,
     setComponentRequestQueue,

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

@@ -2,6 +2,7 @@ import ULoaderTop from "../ui.loader-top";
 import UButton from "../ui.button";
 
 import { useLoaderTop } from "../ui.loader-top/composables/useLoaderTop";
+import { loaderTopOff, loaderTopOn } from "../ui.loader-top/services/loaderTop.service";
 
 import { getArgTypes } from "../service.storybook";
 
@@ -17,9 +18,9 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULoaderTop, UButton },
   setup() {
-    const { setLoaderOn, setLoaderOff } = useLoaderTop();
+    const { setLoaderTopOn, setLoaderTopOff } = useLoaderTop();
 
-    return { args, setLoaderOn, setLoaderOff };
+    return { args, setLoaderTopOn, setLoaderTopOff };
   },
   template: `
     <div>
@@ -36,12 +37,10 @@ const DefaultTemplate = (args) => ({
 const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { ULoaderTop, UButton },
   setup() {
-    const { setLoaderOn, setLoaderOff } = useLoaderTop();
-
     return {
       args,
-      setLoaderOn,
-      setLoaderOff,
+      loaderTopOff,
+      loaderTopOn,
       colors: argTypes.color.options,
     };
   },
@@ -56,8 +55,8 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
       />
     </div>
     <div class="flex gap-2 pt-4">
-      <UButton label="On" @click="setLoaderOn('https://api.publicapis.org/entries')" />
-      <UButton label="Off" @click="setLoaderOff('https://api.publicapis.org/entries')" />
+      <UButton label="On" @click="loaderTopOn('https://api.publicapis.org/entries')" />
+      <UButton label="Off" @click="loaderTopOff('https://api.publicapis.org/entries')" />
     </div>
   `,
 });

package/ui.loader-top/index.vue

@@ -49,8 +49,8 @@ const {
   componentLoaderRequestQueue,
   setComponentRequestQueue,
   removeComponentRequestQueue,
-  setLoaderOff,
-  setLoaderOn,
+  setLoaderTopOff,
+  setLoaderTopOn,
 } = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
@@ -77,8 +77,8 @@ if (props.resourceNames) {
 }
 
 onMounted(() => {
-  window.addEventListener("setLoaderOn", setLoaderOnHandler);
-  window.addEventListener("setLoaderOff", setLoaderOffHandler);
+  window.addEventListener("loaderTopOn", setLoaderOnHandler);
+  window.addEventListener("loaderTopOff", setLoaderOffHandler);
 });
 
 onBeforeUnmount(() => {
@@ -88,16 +88,16 @@ onBeforeUnmount(() => {
 });
 
 onUnmounted(() => {
-  window.removeEventListener("setLoaderOn", setLoaderOnHandler);
-  window.removeEventListener("setLoaderOff", setLoaderOffHandler);
+  window.removeEventListener("loaderTopOn", setLoaderOnHandler);
+  window.removeEventListener("loaderTopOff", setLoaderOffHandler);
 });
 
 function setLoaderOnHandler(event) {
-  setLoaderOn(event.detail.resource);
+  setLoaderTopOn(event.detail.resource);
 }
 
 function setLoaderOffHandler(event) {
-  setLoaderOff(event.detail.resource);
+  setLoaderTopOff(event.detail.resource);
 }
 
 function requestWithoutQuery(request) {

package/ui.loader-top/services/loaderTop.service.js

@@ -31,13 +31,13 @@ export const queue = (() => {
 })();
 
 export function loaderTopOn(resource) {
-  const loaderTopOnEvent = new CustomEvent("setLoadingOn", { detail: { resource } });
+  const loaderTopOnEvent = new CustomEvent("loaderTopOn", { detail: { resource } });
 
   window.dispatchEvent(loaderTopOnEvent);
 }
 
 export function loaderTopOff(resource) {
-  const loaderTopOfEvent = new CustomEvent("setLoadingOff", { detail: { resource } });
+  const loaderTopOfEvent = new CustomEvent("loaderTopOff", { detail: { resource } });
 
   window.dispatchEvent(loaderTopOfEvent);
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.86",
+  "version": "0.0.88",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5230,6 +5230,10 @@
             }
           ],
           "slots": [
+            {
+              "name": "header-before",
+              "description": "Use it to add something before the header."
+            },
             {
               "name": "header-left-before",
               "description": "Use it to add something before left side of the header."
@@ -5246,10 +5250,18 @@
               "name": "header-right",
               "description": "Use it to customise right side of the header."
             },
+            {
+              "name": "header-after",
+              "description": "Use it to add something after the header."
+            },
             {
               "name": "default",
               "description": "Use it to add main content."
             },
+            {
+              "name": "footer-before",
+              "description": "Use it to add something before the footer."
+            },
             {
               "name": "footer-left",
               "description": "Use it to add something to the left side of the footer."
@@ -5257,6 +5269,10 @@
             {
               "name": "footer-right",
               "description": "Use it to add something to the right side of the footer."
+            },
+            {
+              "name": "footer-after",
+              "description": "Use it to add something after the footer."
             }
           ],
           "source": {