vueless 0.0.9 → 0.0.10

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

@@ -1,38 +0,0 @@
-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/src/ui.image-logo/constants/index.js

@@ -1,5 +0,0 @@
-/*
-  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.stories.js

@@ -1,84 +0,0 @@
-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/src/ui.image-logo/index.vue

@@ -1,98 +0,0 @@
-<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

@@ -1,72 +0,0 @@
-<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

@@ -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/src/ui.loader-top/components/TopProgress.vue

@@ -1,277 +0,0 @@
-<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>