vueless 0.0.3 → 0.0.4

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

@@ -0,0 +1,65 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { wrapper, container, icon } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaContainer = cva({
+    base: container.base,
+    variants: container.variants,
+    compoundVariants: container.compoundVariants,
+  });
+
+  const cvaIcon = cva({
+    base: icon.base,
+    variants: icon.variants,
+    compoundVariants: icon.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    setColor(
+      cvaWrapper({
+        pill: props.pill,
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const containerClasses = computed(() =>
+    setColor(
+      cvaContainer({
+        pill: props.pill,
+        size: props.size,
+        color: props.color,
+        variant: props.variant,
+        interactive: props.interactive,
+      }),
+      props.color,
+    ),
+  );
+
+  const iconClasses = computed(() => cvaIcon({ size: props.size }));
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const containerAttrs = getAttrs("container", { classes: containerClasses });
+  const iconAttrs = getAttrs("icon", { classes: iconClasses });
+
+  return {
+    config,
+    wrapperAttrs,
+    containerAttrs,
+    iconAttrs,
+  };
+}

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/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/src/ui.loader-rendering/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <transition name="loader">
+    <div v-if="showLoader" class="app-loader">
+      <div class="lds-ripple">
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  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 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 h-40 w-40;
+    @apply ml-auto mr-auto;
+
+    div {
+      @apply absolute opacity-100;
+      @apply rounded-full border-4 border-solid border-white;
+      animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+
+      &:nth-child(2) {
+        animation-delay: -0.5s;
+      }
+    }
+  }
+
+  @keyframes lds-ripple {
+    0% {
+      @apply left-20 top-20 h-0 w-0 opacity-100;
+    }
+
+    100% {
+      @apply left-0 top-0 h-40 w-40 opacity-0;
+    }
+  }
+}
+
+.loader-enter-from .loader-container-loader,
+.loader-leave-active .loader-container-loader {
+  @apply scale-110 transform;
+}
+</style>

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

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