vueless 0.0.10 → 0.0.12

package/ui.image-logo/configs/default.config.js

@@ -0,0 +1,38 @@
+export default /*tw*/ {
+  wrapper: "flex items-center",
+  logo: {
+    base: "relative",
+    variants: {
+      size: {
+        "2xs": "size-3.5",
+        xs: "size-4",
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-8",
+        xl: "size-10",
+        "2xl": "size-12",
+        "3xl": "size-14",
+      },
+    },
+  },
+  label: "bg-red-500 text-xs font-medium text-white rounded-full absolute -right-7 -top-1.5 px-2 py-0.5",
+  image: "h-full w-full bg-contain bg-center bg-no-repeat",
+  title: {
+    base: "whitespace-nowrap px-3.5 font-bold text-gray-900",
+    variants: {
+      size: {
+        "2xs": "text-xs",
+        xs: "text-sm",
+        sm: "text-base",
+        md: "text-lg",
+        lg: "text-2xl",
+        xl: "text-3xl",
+        "2xl": "text-4xl",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    titleSize: "md",
+  },
+};

package/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/ui.image-logo/index.stories.js

@@ -0,0 +1,84 @@
+import { getArgTypes } from "../service.storybook";
+
+import ULogo from "../ui.image-logo";
+import URow from "../ui.container-row";
+
+export default {
+  id: "6020",
+  title: "Images & Icons / Logo",
+  component: ULogo,
+  args: {
+    src: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
+  },
+  argTypes: {
+    ...getArgTypes(ULogo.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { ULogo },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ULogo v-bind="args"/>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { ULogo, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULogo
+        v-for="(size, index) in sizes"
+        :key="index"
+        v-bind="args"
+        :size="size"
+        :title="size"
+      />
+    </URow>
+  `,
+});
+
+const SizesTitleTemplate = (args, { argTypes } = {}) => ({
+  components: { ULogo, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.sizeTitle.options,
+    };
+  },
+  template: `
+    <URow>
+      <ULogo
+        v-for="(size, index) in sizes"
+        :key="index"
+        v-bind="args"
+        :size-title="size"
+        :title="size"
+        size="md"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const sizesTitle = SizesTitleTemplate.bind({});
+sizesTitle.args = {};
+
+export const title = DefaultTemplate.bind({});
+title.args = { title: "some title" };
+
+export const label = DefaultTemplate.bind({});
+label.args = { label: "label" };

package/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/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/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;
+    },
+  },
+};

package/ui.loader-top/components/TopProgress.vue

@@ -0,0 +1,277 @@
+<template>
+  <transition :css="false" @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
+    <div v-if="show" class="top-progress" :style="barStyle">
+      <div class="peg" :style="pegStyle"></div>
+    </div>
+  </transition>
+</template>
+
+<script>
+function clamp(n, min, max) {
+  if (n < min) {
+    return min;
+  }
+
+  if (n > max) {
+    return max;
+  }
+
+  return n;
+}
+
+let queue = (() => {
+  let pending = [];
+
+  function next() {
+    let fn = pending.shift();
+
+    if (fn) {
+      fn(next);
+    }
+  }
+
+  return (fn) => {
+    pending.push(fn);
+
+    if (pending.length === 1) {
+      next();
+    }
+  };
+})();
+
+export default {
+  name: "VueTopprogress",
+
+  props: {
+    speed: {
+      type: Number,
+      default: 150,
+    },
+
+    color: {
+      type: String,
+      default: "#29d",
+    },
+
+    colorShadow: {
+      type: String,
+      default: "",
+    },
+
+    errorColor: {
+      type: String,
+      default: "#f44336",
+    },
+
+    trickle: {
+      type: Boolean,
+      default: true,
+    },
+
+    trickleSpeed: {
+      type: Number,
+      default: 100,
+    },
+
+    easing: {
+      type: String,
+      default: "linear",
+    },
+
+    height: {
+      type: Number,
+      default: 3,
+    },
+
+    minimum: {
+      type: Number,
+      default: 0.8,
+    },
+
+    maximum: {
+      type: Number,
+      default: 97.5,
+    },
+
+    zIndex: {
+      type: Number,
+      default: 9999,
+    },
+  },
+
+  data() {
+    return {
+      error: false,
+      show: false,
+      progress: 0,
+      opacity: 1,
+      status: null,
+      isPaused: false,
+    };
+  },
+
+  computed: {
+    progressColor() {
+      return this.error ? this.errorColor : this.color;
+    },
+
+    isStarted() {
+      return typeof this.status === "number";
+    },
+
+    boxShadow() {
+      return this.colorShadow || this.progressColor;
+    },
+
+    barStyle() {
+      return {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        right: "0",
+        width: `${this.progress}%`,
+        height: `${this.height}px`,
+        backgroundColor: this.progressColor,
+        transition: `all ${this.speed}ms ${this.easing}`,
+        opacity: `${this.opacity}`,
+        zIndex: `${this.zIndex}`,
+      };
+    },
+
+    pegStyle() {
+      return {
+        display: "block",
+        position: "absolute",
+        right: "0",
+        width: "100px",
+        height: "100%",
+        opacity: this.progress ? "1" : "0",
+        boxShadow: `0 0 10px ${this.boxShadow}, 0 0 5px ${this.boxShadow}`,
+        transform: "rotate(3deg) translate(0px, -4px)",
+      };
+    },
+  },
+
+  methods: {
+    beforeEnter() {
+      this.opacity = 0;
+      this.progress = 0;
+      this.width = 0;
+    },
+
+    enter(el, done) {
+      this.opacity = 1;
+      done();
+    },
+
+    afterEnter() {
+      this._runStart();
+    },
+
+    _work() {
+      setTimeout(() => {
+        if (!this.isStarted || this.isPaused) {
+          return;
+        }
+
+        this.increase();
+        this._work();
+      }, this.trickleSpeed);
+    },
+
+    _runStart() {
+      this.status = this.progress === 100 ? null : this.progress;
+
+      if (this.trickle) {
+        this._work();
+      }
+    },
+
+    start() {
+      this.isPaused = false;
+
+      if (this.show) {
+        this._runStart();
+      } else {
+        this.show = true;
+      }
+    },
+
+    set(amount) {
+      this.isPaused = false;
+
+      let o;
+
+      if (this.isStarted) {
+        o = amount < this.progress ? clamp(amount, 0, 100) : clamp(amount, this.minimum, 100);
+      } else {
+        o = 0;
+      }
+
+      this.status = o === 100 ? null : o;
+
+      queue((next) => {
+        this.progress = o;
+
+        if (o === 100) {
+          setTimeout(() => {
+            this.opacity = 0;
+            setTimeout(() => {
+              this.show = false;
+              this.error = false;
+              next();
+            }, this.speed);
+          }, this.speed);
+        } else {
+          setTimeout(next, this.speed);
+        }
+      });
+    },
+
+    increase(amount) {
+      let o = this.progress;
+
+      if (o < 100 && typeof amount !== "number") {
+        if (o >= 0 && o < 25) {
+          amount = Math.random() * 3 + 3;
+        } else if (o >= 25 && o < 50) {
+          amount = Math.random() * 3;
+        } else if (o >= 50 && o < 85) {
+          amount = Math.random() * 2;
+        } else if (o >= 85 && o < 99) {
+          amount = 0.5;
+        } else {
+          amount = 0;
+        }
+      }
+
+      this.set(clamp(o + amount, 0, this.maximum));
+    },
+
+    decrease(amount) {
+      if (this.progress === 0) {
+        return;
+      }
+
+      this.increase(-amount);
+    },
+
+    done() {
+      this.set(100);
+    },
+
+    getProgress() {
+      return this.status ? this.progress : 0;
+    },
+
+    pause() {
+      this.isPaused = true;
+    },
+
+    fail() {
+      this.error = true;
+      this.done();
+    },
+  },
+};
+</script>