vueless 0.0.9 → 0.0.10

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

@@ -1,221 +0,0 @@
-<template>
-  <TopProgress
-    ref="topProgress"
-    :color="loaderColor"
-    class="vueless-top-loader"
-    :class="topLoaderClasses"
-  />
-</template>
-
-<script>
-import { mapGetters, mapMutations, mapState } from "vuex";
-import { globalComponentConfig, isMobileApp } from "../service.ui";
-
-import TopProgress from "./components/TopProgress.vue";
-
-export default {
-  name: "ULoaderTop",
-  components: {
-    TopProgress,
-  },
-
-  props: {
-    /**
-     * The name of API resource (endpoint URI).
-     */
-    resourceNames: {
-      type: [String, Array],
-      default: "",
-    },
-
-    /**
-     * The z-list of the loader stripe.
-     * @values auto, 50, 100
-     */
-    zIndex: {
-      type: String,
-      default: "auto",
-    },
-
-    /**
-     * Loader position.
-     * @values fixed, absolute, relative
-     */
-    position: {
-      type: String,
-      default: "fixed",
-    },
-
-    /**
-     * The color of the loader stripe.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
-     */
-    color: {
-      type: String,
-      default: globalComponentConfig.ULoaderTop?.color,
-    },
-  },
-
-  computed: {
-    ...mapState("loaderTop", ["loaderRequestQueue", "componentLoaderRequestQueue", "isLoading"]),
-    ...mapGetters({ hexColor: globalComponentConfig.ULoaderTop?.colorGetter }),
-
-    loaderColor() {
-      const isExistHexColorGetter = globalComponentConfig.ULoaderTop?.colorGetter;
-
-      const color = isExistHexColorGetter ? this.hexColor : this.color;
-      //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);
-
-      // TODO: Remove comments after refactoring
-      // if (!isColorHex && !colorSet) {
-      //   return "blue";
-      // }
-
-      return isColorHex ? color : "RoyalBlue";
-
-      //return isColorHex ? color : colorSet[colorNumber];
-    },
-
-    resourceNamesArray() {
-      return Array.isArray(this.resourceNames) ? [...this.resourceNames] : [this.resourceNames];
-    },
-
-    topLoaderClasses() {
-      const zIndex = {
-        auto: "vueless-top-loader-z-auto",
-        50: "vueless-top-loader-z-50",
-        100: "vueless-top-loader-z-100",
-      };
-      const position = `vueless-top-loader-position-${this.position}`;
-      const mobileApp = isMobileApp ? "vueless-top-loader-mobile-app" : "";
-
-      return [zIndex[this.zIndex], position, mobileApp];
-    },
-  },
-
-  watch: {
-    loaderRequestQueue: {
-      deep: true,
-      handler: "onChangeRequestsQuare",
-    },
-
-    isLoading: {
-      deep: true,
-      handler: "onChangeLoadingState",
-    },
-  },
-
-  created() {
-    if (this.resourceNames) {
-      this.SET_COMPONENT_REQUEST_QUEUE(this.resourceNamesArray);
-    }
-  },
-
-  beforeUnmount() {
-    if (this.resourceNames) {
-      this.REMOVE_COMPONENT_REQUEST_QUEUE();
-    }
-  },
-
-  methods: {
-    ...mapMutations("loaderTop", ["SET_COMPONENT_REQUEST_QUEUE", "REMOVE_COMPONENT_REQUEST_QUEUE"]),
-
-    requestWithoutQuery(request) {
-      const [requestWithoutQuery] = request.split("?");
-
-      return requestWithoutQuery;
-    },
-
-    onChangeLoadingState() {
-      if (!this.$refs.topProgress) return;
-
-      if (
-        !this.resourceNames &&
-        this.$refs.topProgress.isStarted &&
-        this.$refs.topProgress.show &&
-        !this.isLoading
-      ) {
-        this.$refs.topProgress.done();
-      }
-    },
-
-    onChangeRequestsQuare() {
-      if (!this.$refs.topProgress) return;
-
-      let isActiveRequests = false;
-
-      if (this.resourceNames) {
-        this.resourceNamesArray.forEach((item) => {
-          if (!isActiveRequests) {
-            const activeRequest = this.loaderRequestQueue.find(
-              (request) => this.requestWithoutQuery(request) === item,
-            );
-
-            isActiveRequests = !!activeRequest;
-          }
-        });
-
-        if (isActiveRequests && !this.$refs.topProgress.isStarted) {
-          this.$refs.topProgress.start();
-        } else if (
-          !isActiveRequests &&
-          this.$refs.topProgress.isStarted &&
-          this.$refs.topProgress.show
-        ) {
-          this.$refs.topProgress.done();
-        }
-      } else {
-        this.loaderRequestQueue.forEach((item) => {
-          const activeRequest = this.componentLoaderRequestQueue.find(
-            (request) => request === this.requestWithoutQuery(item),
-          );
-
-          isActiveRequests = !activeRequest;
-        });
-
-        if (this.isLoading && isActiveRequests && !this.$refs.topProgress.isStarted) {
-          this.$refs.topProgress.start();
-        }
-      }
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.vueless-top-loader {
-  &-position {
-    &-fixed {
-      @apply !fixed;
-    }
-
-    &-absolute {
-      @apply !absolute;
-    }
-  }
-
-  &-z-auto {
-    @apply !z-auto;
-  }
-
-  &-z-50 {
-    @apply !z-50;
-  }
-
-  &-z-100 {
-    @apply !z-[100];
-  }
-
-  &-mobile-app {
-    @apply mt-safe-top mx-3 rounded max-w-[calc(100%-1.5rem)];
-  }
-
-  &:deep(.peg) {
-    @apply !hidden;
-  }
-}
-</style>

package/src/ui.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/src/ui.navigation-pagination/composables/attrs.composable.js

@@ -1,41 +0,0 @@
-import useUI from "../../composable.ui";
-
-import defaultConfig from "../configs/default.config";
-import { cx } from "../../service.ui";
-import { computed } from "vue";
-
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-
-  const listAttrs = getAttrs("list");
-  const itemAttrsRaw = getAttrs("item");
-  const ellipsisAttrs = getAttrs("ellipsis");
-  const navigationButtonAttrs = getAttrs("navigationButton", { isComponent: true });
-  const pageButtonAttrsRaw = getAttrs("pageButton", { isComponent: true });
-
-  const itemAttrs = computed(() => (page = 0) => {
-    const itemClass = page && !isFinite(page.number) && ellipsisAttrs;
-
-    return {
-      ...itemAttrsRaw.value,
-      class: cx([itemAttrsRaw.value.class, itemClass]),
-    };
-  });
-
-  const pageButtonAttrs = computed(() => (page) => {
-    const pageButtonActiveClasses = page.isActive && config.value.pageButtonActive;
-
-    return {
-      ...pageButtonAttrsRaw.value,
-      class: cx([pageButtonAttrsRaw.value.class, pageButtonActiveClasses]),
-    };
-  });
-
-  return {
-    listAttrs,
-    itemAttrs,
-    navigationButtonAttrs,
-    pageButtonAttrs,
-    ellipsisAttrs,
-  };
-}

package/src/ui.navigation-pagination/configs/default.config.js

@@ -1,24 +0,0 @@
-export default /*tw*/ {
-  list: "flex",
-  item: "h-9 min-w-9 flex items-center justify-center",
-  ellipsis: "hidden md:flex",
-  navigationButton: "size-full rounded font-normal disabled:hover:bg-transparent",
-  pageButton: "size-full rounded font-normal disabled:hover:bg-transparent",
-  pageButtonActive: `
-    rounded !bg-gray-900/15
-    hover:!text-gray-900 !hover:bg-gray-900/15 disabled:hover:bg-gray-900/15
-    focus:outline-none
-  `,
-  defaultVariants: {
-    limit: 5,
-    perPage: 20,
-    prevLabel: "‹",
-    nextLabel: "›",
-    firstLabel: "«",
-    lastLabel: "»",
-    disabled: false,
-    ellipsis: true,
-    showFirst: true,
-    showLast: true,
-  },
-};

package/src/ui.navigation-pagination/constants/index.js

@@ -1,8 +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 UPagination = "UPagination";
-export const ELLIPSIS_LABEL = "…";
-export const LESS = "less";
-export const MORE = "more";

package/src/ui.navigation-pagination/index.stories.js

@@ -1,52 +0,0 @@
-import { getArgTypes } from "../service.storybook";
-
-import UPagination from "../ui.navigation-pagination";
-
-export default {
-  id: "8040",
-  title: "Navigation / Pagination",
-  component: UPagination,
-  args: {
-    total: 90,
-    value: 1,
-  },
-  argTypes: {
-    ...getArgTypes(UPagination.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UPagination },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UPagination v-bind="args" v-model="args.value" />
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const perPage1 = DefaultTemplate.bind({});
-perPage1.args = { perPage: 1 };
-
-export const limit = DefaultTemplate.bind({});
-limit.args = { limit: 3 };
-
-export const hideEllipsis = DefaultTemplate.bind({});
-hideEllipsis.args = { ellipses: false };
-
-export const disabled = DefaultTemplate.bind({});
-disabled.args = { disabled: true };
-
-export const hideNavigationButtons = DefaultTemplate.bind({});
-hideNavigationButtons.args = { showLast: false, showFirst: false };
-
-export const setCustomNavigationLabel = DefaultTemplate.bind({});
-setCustomNavigationLabel.args = {
-  prevLabel: "◀️",
-  nextLabel: "▶️",
-  lastLabel: "⏩",
-  firstLabel: "⏪",
-};

package/src/ui.navigation-pagination/index.vue

@@ -1,276 +0,0 @@
-<template>
-  <ul v-bind="listAttrs">
-    <li v-if="showFirst" v-bind="itemAttrs()">
-      <UButton
-        square
-        variant="thirdary"
-        :disabled="prevIsDisabled"
-        :data-cy="`${dataCy}-first`"
-        v-bind="navigationButtonAttrs"
-        @click="goToFirstPage"
-      >
-        <slot name="first-label">
-          <span v-html="firstLabel" />
-        </slot>
-      </UButton>
-    </li>
-    <li v-bind="itemAttrs()">
-      <UButton
-        square
-        variant="thirdary"
-        :disabled="prevIsDisabled"
-        :data-cy="`${dataCy}-prev`"
-        v-bind="navigationButtonAttrs"
-        @click="goToPrevPage"
-      >
-        <slot name="prev-label">
-          <span v-html="prevLabel" />
-        </slot>
-      </UButton>
-    </li>
-
-    <li v-for="page in pageButtons" :key="page" v-bind="itemAttrs(page)">
-      <span v-if="!isFinite(page.number)" v-html="ELLIPSIS_LABEL" />
-
-      <UButton
-        v-else
-        square
-        variant="thirdary"
-        :data-cy="`${dataCy}-page`"
-        :disabled="disabled"
-        v-bind="pageButtonAttrs(page)"
-        @click="selectPage(page.number)"
-      >
-        {{ page.number }}
-      </UButton>
-    </li>
-
-    <li v-bind="itemAttrs()">
-      <UButton
-        square
-        variant="thirdary"
-        :disabled="nextIsDisabled"
-        :data-cy="`${dataCy}-next`"
-        v-bind="navigationButtonAttrs"
-        @click="goToNextPage"
-      >
-        <slot name="next-label">
-          <span v-html="nextLabel" />
-        </slot>
-      </UButton>
-    </li>
-    <li v-if="showLast" v-bind="itemAttrs()">
-      <UButton
-        square
-        variant="thirdary"
-        :disabled="nextIsDisabled"
-        :data-cy="`${dataCy}-last`"
-        v-bind="navigationButtonAttrs"
-        @click="goToLastPage"
-      >
-        <slot name="next-label">
-          <span v-html="lastLabel" />
-        </slot>
-      </UButton>
-    </li>
-  </ul>
-</template>
-
-<script setup>
-import { computed } from "vue";
-import { range } from "lodash-es";
-
-import UButton from "../ui.button";
-import UIService from "../service.ui";
-
-import defaultConfig from "./configs/default.config";
-import { UPagination, ELLIPSIS_LABEL } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UPagination", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Current page number.
-   */
-  modelValue: {
-    type: Number,
-    default: null,
-  },
-
-  /**
-   * Disable navigation buttons.
-   */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UPagination).default.disabled,
-  },
-
-  /**
-   * Number of items per page.
-   */
-  perPage: {
-    type: Number,
-    default: UIService.get(defaultConfig, UPagination).default.perPage,
-    validator: (value) => value > 0,
-  },
-
-  /**
-   * Total number of items.
-   */
-  total: {
-    type: Number,
-    default: 0,
-    validator: (value) => value >= 0,
-  },
-
-  /**
-   * Limit of visible pages.
-   */
-  limit: {
-    type: Number,
-    default: UIService.get(defaultConfig, UPagination).default.limit,
-    validator: (value) => value >= 0,
-  },
-
-  /**
-   * Show ellipsis.
-   */
-  ellipsis: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UPagination).default.ellipsis,
-  },
-
-  /**
-   * Prev button label.
-   */
-  prevLabel: {
-    type: String,
-    default: UIService.get(defaultConfig, UPagination).default.prevLabel,
-  },
-
-  /**
-   * Next button label.
-   */
-  nextLabel: {
-    type: String,
-    default: UIService.get(defaultConfig, UPagination).default.nextLabel,
-  },
-
-  /**
-   * First button label.
-   */
-  firstLabel: {
-    type: String,
-    default: UIService.get(defaultConfig, UPagination).default.firstLabel,
-  },
-
-  /**
-   * Last button label.
-   */
-  lastLabel: {
-    type: String,
-    default: UIService.get(defaultConfig, UPagination).default.lastLabel,
-  },
-
-  /**
-   * Show the first control.
-   */
-  showFirst: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UPagination).default.showLast,
-  },
-
-  /**
-   * Show the last control.
-   */
-  showLast: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UPagination).default.showLast,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["change", "update:modelValue"]);
-
-const { listAttrs, itemAttrs, navigationButtonAttrs, pageButtonAttrs } = useAttrs(props);
-
-const currentPage = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit("update:modelValue", value);
-    emit("change", value);
-  },
-});
-
-const totalPages = computed(() => {
-  return props.perPage > 0 ? Math.ceil(props.total / props.perPage) : 0;
-});
-
-const pageButtons = computed(() => {
-  const from1 = Number(currentPage.value) - Math.round(props.limit / 2) + 1;
-  const from2 = totalPages.value + 1 - props.limit;
-
-  const from = Math.max(Math.min(from1, from2), 1);
-  const to = Math.min(from + props.limit - 1, totalPages.value);
-
-  return range(from, to + 1).map((page) => {
-    if (props.ellipsis && page === from && from > 1) {
-      return { number: -Infinity };
-    }
-
-    if (props.ellipsis && page === to && to < totalPages.value) {
-      return { number: Infinity };
-    }
-
-    return { number: page, isActive: page === currentPage.value };
-  });
-});
-
-const prevIsDisabled = computed(() => {
-  return props.disabled || currentPage.value === null || currentPage.value <= 1;
-});
-
-const nextIsDisabled = computed(() => {
-  return props.disabled || currentPage.value === null || currentPage.value >= totalPages.value;
-});
-
-function selectPage(page) {
-  currentPage.value = page;
-}
-
-function goToPrevPage() {
-  currentPage.value = currentPage.value === null ? 1 : Math.max(currentPage.value - 1, 1);
-}
-
-function goToNextPage() {
-  currentPage.value =
-    currentPage.value === null
-      ? totalPages.value
-      : Math.min(currentPage.value + 1, totalPages.value);
-}
-
-function goToFirstPage() {
-  currentPage.value = 1;
-}
-
-function goToLastPage() {
-  currentPage.value = totalPages.value;
-}
-</script>

package/src/ui.navigation-stepper/composables/attrs.composable.js

@@ -1,25 +0,0 @@
-import useUI from "../../composable.ui";
-
-import defaultConfig from "../configs/default.config";
-
-export function useAttrs(props) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const stepperAttrs = getAttrs("stepper");
-  const titleAttrs = getAttrs("title", { isComponent: true });
-  const ringAttrs = getAttrs("ring");
-  const countAttrs = getAttrs("count");
-  const gradientAttrs = getAttrs("gradient");
-  const svgAttrs = getAttrs("svg");
-
-  return {
-    wrapperAttrs,
-    titleAttrs,
-    stepperAttrs,
-    ringAttrs,
-    countAttrs,
-    gradientAttrs,
-    svgAttrs,
-  };
-}