vueless 0.0.10 → 0.0.12

package/ui.loader-top/index.vue

@@ -0,0 +1,221 @@
+<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/ui.loader-top/store/index.js

@@ -0,0 +1,59 @@
+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/ui.navigation-pagination/composables/attrs.composable.js

@@ -0,0 +1,41 @@
+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/ui.navigation-pagination/configs/default.config.js

@@ -0,0 +1,24 @@
+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/ui.navigation-pagination/constants/index.js

@@ -0,0 +1,8 @@
+/*
+  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/ui.navigation-pagination/index.stories.js

@@ -0,0 +1,52 @@
+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/ui.navigation-pagination/index.vue

@@ -0,0 +1,276 @@
+<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/ui.navigation-stepper/composables/attrs.composable.js

@@ -0,0 +1,25 @@
+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,
+  };
+}