vueless 0.0.50 → 0.0.52

package/ui.other-loader-top/index.vue

@@ -7,16 +7,16 @@
 <script setup>
 import { computed, onBeforeUnmount, watch, ref } from "vue";
 
-import { useStore } from "vuex";
-
 import UIService, { isMobileApp } from "../service.ui";
 import { clamp, queue } from "./services/loaderTop.service";
+import useLoaderTop from "./composables/useLoaderTop";
 
 import { ULoaderTop, MAXIMUM, SPEED } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 
-defineOptions({ name: "ULoaderTop" });
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "ULoaderTop", inheritAttrs: false });
 
 const props = defineProps({
   /**
@@ -46,22 +46,21 @@ const props = defineProps({
   },
 });
 
-const store = useStore();
-
 const error = ref(false);
 const show = ref(false);
 const progress = ref(0);
 const opacity = ref(1);
 const status = ref(null);
 
+const {
+  loaderRequestQueue,
+  isLoading,
+  componentLoaderRequestQueue,
+  setComponentRequestQueue,
+  removeComponentRequestQueue,
+} = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
-const loaderRequestQueue = computed(() => store.state.loaderTop.loaderRequestQueue);
-const isLoading = computed(() => store.state.loaderTop.isLoading);
-const componentLoaderRequestQueue = computed(
-  () => store.state.loaderTop.componentLoaderRequestQueue,
-);
-
 const isStarted = computed(() => {
   return typeof status.value === "number";
 });
@@ -81,12 +80,12 @@ watch(loaderRequestQueue, onChangeRequestsQueue, { deep: true });
 watch(isLoading, onChangeLoadingState, { deep: true });
 
 if (props.resourceNames) {
-  store.commit("loaderTop/SET_COMPONENT_REQUEST_QUEUE", resourceNamesArray.value);
+  setComponentRequestQueue(resourceNamesArray.value);
 }
 
 onBeforeUnmount(() => {
   if (props.resourceNames) {
-    store.commit("loaderTop/REMOVE_COMPONENT_REQUEST_QUEUE");
+    removeComponentRequestQueue();
   }
 });
 

package/ui.text-alert/composables/attrs.composable.js

@@ -30,7 +30,7 @@ export function useAttrs(props) {
     ),
   );
 
-  const bodyClasses = computed(() => cvaBody({ size: props.size }));
+  const bodyClasses = computed(() => setColor(cvaBody({ size: props.size }), props.color));
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
   const bodyAttrs = getAttrs("body", { classes: bodyClasses });

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5027,7 +5027,7 @@
                 "kind": "expression",
                 "type": "'left' | 'center' | 'right'"
               },
-              "default": "\"center\""
+              "default": "center"
             },
             {
               "name": "yPosition",
@@ -5036,7 +5036,25 @@
                 "kind": "expression",
                 "type": "'top' | 'bottom'"
               },
-              "default": "\"top\""
+              "default": "top"
+            },
+            {
+              "name": "vHtml",
+              "description": "Use v-html to render notification label and description content.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "config",
+              "description": "Sets component ui config object.",
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              },
+              "default": "{}"
             }
           ],
           "source": {
@@ -6993,19 +7011,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "UViewport",
-          "description": "",
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "vueless/ui.viewport/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "YearView",
           "description": "",

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

@@ -1,17 +0,0 @@
-export default {
-  namespaced: true,
-
-  state: {
-    isRenderingPage: true,
-  },
-
-  mutations: {
-    SET_RENDERING_STARTED(state) {
-      state.isRenderingPage = true;
-    },
-
-    SET_RENDERING_FINISHED(state) {
-      state.isRenderingPage = false;
-    },
-  },
-};

package/ui.notify/index.sto_ries.js

@@ -1,102 +0,0 @@
-import NotifyServiceDefault from "../ui.notify/services";
-
-import UNotify from "../ui.notify";
-import UButton from "../ui.button";
-
-import { getArgTypes } from "../service.storybook";
-
-const NotifyService = new NotifyServiceDefault();
-
-export default {
-  title: "Other / Notify",
-  component: UNotify,
-  args: {
-    type: "success",
-    code: "code",
-    title: "",
-    text: "",
-    duration: "short",
-    ignoreDuplicates: false,
-  },
-  argTypes: {
-    ...getArgTypes(UNotify.name),
-    type: {
-      description: "The type of notify.",
-      defaultValue: { summary: "success" },
-      options: ["success", "warning", "error"],
-      control: {
-        type: "radio",
-      },
-    },
-    code: {
-      description:
-        "Unique translation code, for ex. `categoryCreated`, " +
-        "which will be used in i18n translation path, for ex. `UNotify.success.categoryCreated`.",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    title: {
-      description: "Notify title.",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    text: {
-      description: "Notify text (description).",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    duration: {
-      description: "The notify visibility duration.",
-      defaultValue: { summary: "short" },
-      options: ["short", "medium", "long", "permanent"], //4000, 8000, 12000, 300000
-      control: {
-        type: "radio",
-      },
-    },
-    ignoreDuplicates: {
-      description: "Show only 1 notify at once.",
-      defaultValue: { summary: false },
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UNotify, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div>
-      <UNotify v-bind="args"/>
-
-      <UButton label="show notify" @click="onClick"/>
-    </div>
- `,
-
-  methods: {
-    onClick() {
-      const settings = {
-        type: args.type,
-        code: args.code,
-        title: args.title,
-        text: args.text,
-        duration: args.duration,
-        ignoreDuplicates: args.ignoreDuplicates,
-      };
-
-      NotifyService.notify(settings);
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.other-loader-top/store/index.js

@@ -1,59 +0,0 @@
-export default {
-  namespaced: true,
-
-  state: {
-    isLoading: false,
-    requestQueue: [],
-    loaderRequestQueue: [],
-    loaderRequestTimeout: 0,
-    componentLoaderRequestQueue: [],
-  },
-
-  mutations: {
-    SET_LOADING_ON: (state, url) => {
-      state.loaderRequestQueue.push(url);
-
-      state.isLoading = true;
-
-      clearTimeout(state.loaderRequestTimeout);
-    },
-
-    SET_LOADING_OFF: (state, url) => {
-      if (url) {
-        state.loaderRequestQueue.forEach((item, index) => {
-          if (item === url) {
-            state.loaderRequestQueue.splice(index, 1);
-          }
-        });
-      } else {
-        state.loaderRequestQueue = [];
-      }
-
-      state.loaderRequestTimeout = setTimeout(() => {
-        if (!state.loaderRequestQueue.length) {
-          state.isLoading = false;
-        }
-      }, 50);
-    },
-
-    ADD_REQUEST_URL: (state, url) => {
-      state.requestQueue.push(url);
-    },
-
-    REMOVE_REQUEST_URL: (state, url) => {
-      state.requestQueue.forEach((item, index) => {
-        if (item === url) {
-          state.requestQueue.splice(index, 1);
-        }
-      });
-    },
-
-    SET_COMPONENT_REQUEST_QUEUE(state, requests) {
-      state.componentLoaderRequestQueue = [...state.componentLoaderRequestQueue, ...requests];
-    },
-
-    REMOVE_COMPONENT_REQUEST_QUEUE(state) {
-      state.componentLoaderRequestQueue = [];
-    },
-  },
-};

package/ui.viewport/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <slot :breakpoint="breakpoint" />
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "UViewport",
-
-  data() {
-    return {
-      windowWidth: 0,
-      breakpoint: "",
-    };
-  },
-
-  watch: {
-    windowWidth: {
-      immediate: true,
-      handler: "setBreakpoint",
-    },
-  },
-
-  mounted() {
-    this.setWindowWidth();
-    this.setListener();
-  },
-
-  methods: {
-    ...mapMutations("breakpoint", ["SET_BREAKPOINT"]),
-
-    setWindowWidth() {
-      this.windowWidth = window.innerWidth;
-    },
-
-    setListener() {
-      let timeout;
-
-      window.addEventListener(
-        "resize",
-        () => {
-          if (timeout) {
-            window.cancelAnimationFrame(timeout);
-          }
-
-          timeout = window.requestAnimationFrame(() => {
-            this.setWindowWidth();
-          });
-        },
-        { passive: true },
-      );
-    },
-
-    setBreakpoint(windowWidth) {
-      if (!windowWidth) return;
-
-      this.breakpoint = "xs";
-
-      if (windowWidth >= 640 && windowWidth < 768) {
-        this.breakpoint = "sm";
-      } else if (windowWidth >= 768 && windowWidth < 1024) {
-        this.breakpoint = "md";
-      } else if (windowWidth >= 1024 && windowWidth < 1280) {
-        this.breakpoint = "lg";
-      } else if (windowWidth >= 1280 && windowWidth < 1536) {
-        this.breakpoint = "xl";
-      } else if (windowWidth >= 1536) {
-        this.breakpoint = "2xl";
-      }
-
-      this.SET_BREAKPOINT(this.breakpoint);
-    },
-  },
-};
-</script>

package/ui.viewport/store/index.js

@@ -1,47 +0,0 @@
-export default {
-  namespaced: true,
-
-  state: {
-    breakpoint: "",
-    mobileDevices: ["xs", "sm"],
-    portableDevices: ["xs", "sm", "md"],
-  },
-
-  getters: {
-    isLaptopDevice(state) {
-      const { breakpoint } = state;
-
-      return breakpoint === "lg";
-    },
-
-    isTabletDevice(state) {
-      const { breakpoint } = state;
-
-      return breakpoint === "md";
-    },
-
-    isMobileDevice(state) {
-      const { breakpoint, mobileDevices } = state;
-
-      return mobileDevices.includes(breakpoint);
-    },
-
-    isPortableDevice(state) {
-      const { breakpoint, portableDevices } = state;
-
-      return portableDevices.includes(breakpoint);
-    },
-
-    elementSize(state, getters) {
-      const { isMobileDevice } = getters;
-
-      return isMobileDevice ? "md" : "lg";
-    },
-  },
-
-  mutations: {
-    SET_BREAKPOINT(state, breakpoint) {
-      state.breakpoint = breakpoint;
-    },
-  },
-};