vueless 0.0.2 → 0.0.4

package/src/ui.image-icon/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <div
+    v-tippy="tippyConfig"
+    :data-cy="dataCy"
+    v-bind="wrapperAttrs"
+    @focus="onFocus"
+    @blur="onBlur"
+    @click="onClick"
+  >
+    <div v-bind="containerAttrs">
+      <component :is="dynamicComponent" v-bind="iconAttrs" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineAsyncComponent } from "vue";
+import { directive as tippyDirective, setDefaultProps as tippySetConfig } from "vue-tippy";
+import "tippy.js/dist/tippy.css";
+import "tippy.js/themes/light.css";
+import "tippy.js/animations/shift-away.css";
+import UIService from "../service.ui";
+
+import { UIcon } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+tippySetConfig({
+  arrow: true,
+  theme: "light",
+  animation: "shift-away",
+});
+
+/* Should be a string for correct web-types gen */
+defineOptions({
+  name: "UIcon",
+  directives: { tippy: tippyDirective },
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  /**
+   * Icon SVG data source (svg as a vue component).
+   */
+  src: {
+    type: [String, Object],
+    default: "",
+  },
+
+  /**
+   * Name of the icon.
+   */
+  name: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Change icon variant from outline to filled.
+   */
+  fill: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UIcon).default.fill,
+  },
+
+  /**
+   * Icon 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: UIService.get(defaultConfig, UIcon).default.color,
+  },
+
+  /**
+   * Icon size.
+   * @values 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UIcon).default.size,
+  },
+
+  /**
+   * Set pill mild semi-transparent background and solid colour icon.
+   */
+  pill: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UIcon).default.pill,
+  },
+
+  /**
+   * Icon variant.
+   * @values light, default, dark
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UIcon).default.variant,
+  },
+
+  /**
+   * Add interactive states to the icon (hover, clicked).
+   */
+  interactive: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UIcon).default.interactive,
+  },
+
+  /**
+   * Add tooltip text on hover.
+   */
+  tooltip: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Tooltip settings.
+   * [See all settings here](https://kabbouchi.github.io/vue-tippy/4.0/features/placement.html).
+   */
+  tooltipSettings: {
+    type: Object,
+    default: () => {},
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["click", "focus", "blur"]);
+
+const { config, wrapperAttrs, containerAttrs, iconAttrs } = useAttrs(props);
+
+let generatedIcons = [];
+
+if (import.meta.env.PROD) {
+  generatedIcons = Object.entries(
+    import.meta.glob(`../../src/assets/images/.generated/**/*.svg`, {
+      eager: true,
+      query: "?component",
+    }),
+  );
+}
+
+const dynamicComponent = computed(() => {
+  const library = config.value.defaultVariants.library;
+  const weight = config.value.defaultVariants.weight;
+  const style = config.value.defaultVariants.style;
+  const fill = props.fill || config.value.defaultVariants.fill ? "-fill" : "";
+  const name = props.name;
+  const src = props.src;
+
+  /* Edge case */
+  if (!src && !name) return "";
+
+  /* Static import */
+  if (src) return src.render();
+
+  /* Dynamic import */
+  if (!name) return "";
+
+  function getIcon(params) {
+    const [, component] = generatedIcons.find(([path]) =>
+      params.every((param) => path.includes(param)),
+    );
+
+    return component;
+  }
+
+  /* eslint-disable vue/max-len, prettier/prettier */
+  const libraries = {
+    "@material-symbols": async () => {
+      return import.meta.env.PROD
+        ? await getIcon([library, weight, style, name, fill])
+        : import(/* @vite-ignore */ `/node_modules/${library}/svg-${weight}/${style}/${name}${fill}.svg?component`);
+    },
+    "bootstrap-icons": async () => {
+      return import.meta.env.PROD
+        ? await getIcon([library, name, fill])
+        : import(/* @vite-ignore */ `/node_modules/${library}/icons/${name}${fill}.svg?component`);
+    },
+    heroicons: async () => {
+      const fillType = fill ? "solid" : "outline";
+
+      return import.meta.env.PROD
+        ? await getIcon([library, style, fillType, name])
+        : import(/* @vite-ignore */ `/node_modules/${library}/${style}/${fillType}/${name}.svg?component`);
+    },
+  };
+  /* eslint-enable vue/max-len, prettier/prettier */
+
+  return defineAsyncComponent(libraries[library]);
+});
+
+const tippyConfig = computed(() => {
+  return { onShow: () => !!props.tooltip, ...props.tooltipSettings, content: props.tooltip };
+});
+
+function onClick(event) {
+  emit("click", event);
+}
+
+function onFocus() {
+  emit("focus");
+}
+
+function onBlur(event) {
+  emit("blur", event);
+}
+</script>

package/src/ui.image-logo/composables/attrs.composable.js

@@ -0,0 +1,41 @@
+import { computed } from "vue";
+
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { logo, title } = config.value;
+
+  const cvaLogo = cva({
+    base: logo.base,
+    variants: logo.variants,
+    compoundVariants: logo.compoundVariants,
+  });
+
+  const cvaTitle = cva({
+    base: title.base,
+    variants: title.variants,
+    compoundVariants: title.compoundVariants,
+  });
+
+  const logoClasses = computed(() => cvaLogo({ size: props.size }));
+
+  const titleClasses = computed(() => cvaTitle({ size: props.size }));
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const logoAttrs = getAttrs("logo", { classes: logoClasses });
+  const labelAttrs = getAttrs("label");
+  const imageAttrs = getAttrs("image");
+  const titleAttrs = getAttrs("title", { classes: titleClasses });
+
+  return {
+    titleAttrs,
+    logoAttrs,
+    wrapperAttrs,
+    labelAttrs,
+    imageAttrs,
+  };
+}

package/src/ui.image-logo/constants/index.js

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

package/src/ui.image-logo/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClick">
+    <div v-bind="logoAttrs">
+      <div v-if="label" v-bind="labelAttrs" v-text="label" />
+
+      <div :style="bgImage" v-bind="imageAttrs" />
+    </div>
+
+    <div v-if="title" v-bind="titleAttrs" v-text="title" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import UIService from "../service.ui";
+
+import { useAttrs } from "./composables/attrs.composable";
+import defaultConfig from "./configs/default.config";
+import { ULogo } from "./constants";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "ULogo", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Logo source path.
+   */
+  src: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Logo label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Logo title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Logo title size.
+   * @values 2xs, xs, sm, md, lg, xl, 2xl
+   */
+  titleSize: {
+    type: String,
+    default: UIService.get(defaultConfig, ULogo).default.titleSize,
+  },
+
+  /**
+   * title size.
+   * @values 2xs, xs, sm, md, lg, xl, 2xl, 3xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, ULogo).default.size,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+const { titleAttrs, logoAttrs, wrapperAttrs, labelAttrs, imageAttrs } = useAttrs(props);
+
+const bgImage = computed(() => {
+  let path = props.src.includes("http") ? props.src : import.meta.env.BASE_URL + props.src;
+
+  return `background-image: url(${path});`;
+});
+
+function onClick(event) {
+  emit("click", event);
+}
+</script>

package/{layout-ui.loader → src/ui.loader-rendering}/index.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="loader">
-    <div v-if="isRenderingPage" class="app-loader">
+    <div v-if="showLoader" class="app-loader">
       <div class="lds-ripple">
         <div></div>
         <div></div>
@@ -13,23 +13,34 @@
 import { mapState } from "vuex";
 
 export default {
-  name: "ULoader",
+  name: "ULoaderRendering",
+
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   computed: {
     ...mapState("loader", ["isRenderingPage"]),
+
+    showLoader() {
+      return this.loading || this.isRenderingPage;
+    },
   },
 };
 </script>
 
 <style lang="postcss" scoped>
 .app-loader {
-  @apply flex justify-center;
-  @apply fixed left-0 top-0 z-50 h-screen w-screen;
+  @apply flex justify-center items-center;
+  @apply fixed left-0 top-0 z-[9999] h-screen w-screen;
   @apply bg-gray-800;
   @apply transition-all duration-300;
 
   .lds-ripple {
-    @apply relative top-1/3 h-40 w-40;
+    @apply relative h-40 w-40;
     @apply ml-auto mr-auto;
 
     div {

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

@@ -2,14 +2,14 @@
   <TopProgress
     ref="topProgress"
     :color="loaderColor"
-    class="mono-top-loader"
+    class="vueless-top-loader"
     :class="topLoaderClasses"
   />
 </template>
 
 <script>
 import { mapGetters, mapMutations, mapState } from "vuex";
-import { globalComponentConfig, isMobileApp, tailwindConfig } from "vueless/service.ui";
+import { globalComponentConfig, isMobileApp } from "../service.ui";
 
 import TopProgress from "./components/TopProgress.vue";
 
@@ -52,29 +52,32 @@ export default {
      */
     color: {
       type: String,
-      default: globalComponentConfig.UTopLoader?.color || "blue",
+      default: globalComponentConfig.ULoaderTop?.color,
     },
   },
 
   computed: {
     ...mapState("loaderTop", ["loaderRequestQueue", "componentLoaderRequestQueue", "isLoading"]),
-    ...mapGetters({ hexColor: globalComponentConfig.UTopLoader?.colorGetter }),
+    ...mapGetters({ hexColor: globalComponentConfig.ULoaderTop?.colorGetter }),
 
     loaderColor() {
-      const isExistHexColorGetter = globalComponentConfig.UTopLoader?.colorGetter;
+      const isExistHexColorGetter = globalComponentConfig.ULoaderTop?.colorGetter;
 
       const color = isExistHexColorGetter ? this.hexColor : this.color;
-      const colorSet = tailwindConfig.theme.colors[this.color];
-      const colorNumber = 500;
+      //const colorSet = tailwindConfig.theme.colors[this.color];
+      //const colorNumber = 500;
 
       const colorHexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
       const isColorHex = colorHexRegex.test(color);
 
-      if (!isColorHex && !colorSet) {
-        return "blue";
-      }
+      // TODO: Remove comments after refactoring
+      // if (!isColorHex && !colorSet) {
+      //   return "blue";
+      // }
+
+      return isColorHex ? color : "RoyalBlue";
 
-      return isColorHex ? color : colorSet[colorNumber];
+      //return isColorHex ? color : colorSet[colorNumber];
     },
 
     resourceNamesArray() {
@@ -83,12 +86,12 @@ export default {
 
     topLoaderClasses() {
       const zIndex = {
-        auto: "mono-top-loader-z-auto",
-        50: "mono-top-loader-z-50",
-        100: "mono-top-loader-z-100",
+        auto: "vueless-top-loader-z-auto",
+        50: "vueless-top-loader-z-50",
+        100: "vueless-top-loader-z-100",
       };
-      const position = `mono-top-loader-position-${this.position}`;
-      const mobileApp = isMobileApp ? "mono-top-loader-mobile-app" : "";
+      const position = `vueless-top-loader-position-${this.position}`;
+      const mobileApp = isMobileApp ? "vueless-top-loader-mobile-app" : "";
 
       return [zIndex[this.zIndex], position, mobileApp];
     },
@@ -184,7 +187,7 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.mono-top-loader {
+.vueless-top-loader {
   &-position {
     &-fixed {
       @apply !fixed;

package/{layout-ui.loader-top → src/ui.loader-top}/store/index.js

@@ -19,13 +19,17 @@ export default {
     },
 
     SET_LOADING_OFF: (state, url) => {
-      state.loaderRequestQueue.forEach((item, index) => {
-        if (item === url) {
-          state.loaderRequestQueue.splice(index, 1);
-        }
-      });
-
-      state.requestTimeout = setTimeout(() => {
+      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;
         }

package/{layout-ui.notify → src/ui.notify}/index.vue

@@ -1,7 +1,7 @@
 <template>
   <notifications
     group="notify"
-    class="mono-notify !top-3 mt-safe-top !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
+    class="vueless-notify !top-3 mt-safe-top !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
     :position="position"
   >
     <template #body="{ item, close: onClickClose }">
@@ -52,10 +52,9 @@
 </template>
 
 <script>
-import { globalComponentConfig } from "vueless/service.ui";
-import I18nServiceDefault from "vueless/service.i18n";
+import { globalComponentConfig } from "../service.ui";
 
-import UIcon from "vueless/ui.image-icon";
+import UIcon from "../ui.image-icon";
 
 const NOTIFY_TYPE = {
   success: "success",
@@ -89,12 +88,6 @@ export default {
     },
   },
 
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
-
-    return { getTranslation };
-  },
-
   data() {
     return {
       type: null,
@@ -116,7 +109,7 @@ export default {
 
     i18n() {
       return {
-        message: this.getTranslation(`${this.type}.default`),
+        message: `${this.type}.default`,
       };
     },
 
@@ -138,28 +131,29 @@ export default {
       this.setPosition();
 
       this.type = type;
-      const localPath = `${type}.${code}`;
 
       if (text) {
         return text;
       }
 
-      return this.getTranslation(localPath) !== localPath
-        ? this.getTranslation(localPath)
-        : this.i18n.message;
+      return this.i18n.message;
     },
 
     setPosition() {
+      const getOffsetWidth = (className) =>
+        className ? document.querySelector(`.${className}`)?.offsetWidth : 0;
+
+      const NOTIFY_CLASS = "vueless-notify";
       const classes = globalComponentConfig.UNotify?.positionClasses;
-      const pageWidth = classes?.page ? document.querySelector(classes.page)?.offsetWidth : 0;
-      const asideWidth = classes?.aside ? document.querySelector(classes.aside)?.offsetWidth : 0;
-      const notifyWidth = document.querySelector(".mono-notify")?.offsetWidth;
+      const pageWidth = getOffsetWidth(classes.page);
+      const asideWidth = getOffsetWidth(classes.aside);
+      const notifyWidth = getOffsetWidth(NOTIFY_CLASS);
 
       if (!pageWidth) return;
 
       const leftShift = asideWidth + pageWidth / 2 - notifyWidth / 2;
 
-      document.querySelector(".mono-notify").style.setProperty("left", `${leftShift}px`);
+      document.querySelector(`.${NOTIFY_CLASS}`).style.setProperty("left", `${leftShift}px`);
     },
   },
 };
@@ -190,7 +184,7 @@ ua:
 </i18n>
 
 <style lang="postcss" scoped>
-.mono-notify {
+.vueless-notify {
   :deep(.vue-notification-wrapper) {
     @apply overflow-visible;
   }

package/{service.notify → src/ui.notify/services}/index.js

@@ -1,5 +1,5 @@
 import Vue3Notify, { notify as VueNotify } from "@kyvg/vue3-notification";
-import { globalComponentConfig } from "vueless/service.ui";
+import { globalComponentConfig } from "../../service.ui";
 
 const defaultDuration = {
   short: 4000,