vueless 0.0.2 → 0.0.3

package/ui.navigation-pagination/index.vue

@@ -1,115 +1,275 @@
 <template>
-  <div class="mono-pagination-wrapper">
-    <t-pagination
-      v-model="currentPageModel"
-      class="mono-pagination"
-      :classes="paginationClasses"
-      :per-page="perPage"
-      :total-items="total"
-      :data-cy="dataCy"
-    />
-  </div>
+  <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>
-import TPagination from "vueless/library.vue-tailwind-3/t-pagination";
-
-export default {
-  name: "UPagination",
-
-  components: { TPagination },
-
-  props: {
-    /**
-     * Сurrent page number.
-     */
-    currentPage: {
-      type: Number,
-      default: 1,
-    },
-
-    /**
-     * Set number of items per page..
-     */
-    perPage: {
-      type: Number,
-      default: 20,
-    },
-
-    /**
-     * Set total number of items.
-     */
-    total: {
-      type: Number,
-      default: 0,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+<script setup>
+import { computed } from "vue";
+
+import range from "lodash.range";
+import UIService from "vueless/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,
   },
 
-  emits: ["pageChange"],
-
-  computed: {
-    currentPageModel: {
-      get() {
-        return this.currentPage;
-      },
-      set(page) {
-        this.$emit("pageChange", page);
-      },
-    },
-
-    paginationClasses() {
-      return {
-        wrapper: "table border-collapse text-center mx-auto",
-        element: `pagination-element table-cell`,
-        activeElement: `pagination-active-element table-cell`,
-        disabledElement: `pagination-disabled-element table-cell`,
-        ellipsisElement: `pagination-ellipsis-element hidden md:table-cell`,
-        activeButton: `pagination-active-button w-full h-full transition duration-100 ease-in-out`,
-        disabledButton: "opacity-25 cursor-not-allowed transition duration-100 ease-in-out",
-        button: `pagination-button w-full h-full transition duration-100 ease-in-out`,
-        ellipsis: "",
-      };
-    },
+  /**
+   * 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,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-pagination {
-  &-wrapper {
-    @apply mt-4 flex justify-center;
-  }
-
-  :deep(.pagination) {
-    &-element,
-    &-active-element,
-    &-disabled-element,
-    &-ellipsis-element {
-      @apply inline-flex justify-center items-center;
-      @apply h-9 w-9;
+  /**
+   * 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 };
     }
 
-    &-active-button {
-      @apply bg-gray-900/15 hover:bg-gray-900/5;
-      @apply rounded;
+    if (props.ellipsis && page === to && to < totalPages.value) {
+      return { number: Infinity };
     }
 
-    &-button {
-      @apply hover:bg-gray-900/5;
-      @apply rounded;
+    return { number: page, isActive: page === currentPage.value };
+  });
+});
 
-      &:active {
-        @apply bg-gray-900/10;
-      }
-    }
-  }
+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;
 }
-</style>
+
+function goToLastPage() {
+  currentPage.value = totalPages.value;
+}
+</script>

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

@@ -0,0 +1,25 @@
+import useUI from "vueless/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,
+  };
+}

package/ui.navigation-stepper/configs/default.config.js

@@ -0,0 +1,13 @@
+export default /*tw*/ {
+  wrapper: "flex items-center justify-between",
+  stepper: "h-12 w-12",
+  ring: "stroke-current text-gray-100",
+  count: "text-xl font-bold text-gray-900 translate-y-2 transform",
+  title: "",
+  gradient: "",
+  svg: "",
+  defaultVariants: {
+    step: 1,
+    color: "brand",
+  },
+};

package/ui.navigation-stepper/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 UStepper = "UStepper";

package/ui.navigation-stepper/index.stories.js

@@ -3,6 +3,7 @@ import { getArgTypes } from "vueless/service.storybook";
 import UStepper from "vueless/ui.navigation-stepper";
 
 export default {
+  id: "8030",
   title: "Navigation / Stepper",
   component: UStepper,
   args: {

package/ui.navigation-stepper/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="mono-stepper-wrapper" :data-cy="dataCy">
-    <UHeader :text="title" size="xs" />
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <UHeader :label="title" size="xs" v-bind="titleAttrs" />
 
-    <div class="mono-stepper">
-      <svg width="100%" height="100%" viewBox="0 0 40 40">
+    <div v-bind="stepperAttrs">
+      <svg width="100%" height="100%" viewBox="0 0 40 40" v-bind="svgAttrs">
         <defs>
-          <linearGradient id="gradient" class="svg-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" class="stop-1" />
-            <stop offset="100%" class="stop-2" />
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" v-bind="gradientAttrs">
+            <stop offset="0%" :stop-color="setStepperColor" />
+            <stop offset="100%" :stop-color="setStepperColor" />
           </linearGradient>
         </defs>
 
         <circle
-          class="mono-stepper-ring"
           cx="20"
           cy="20"
           r="15.91549430918954"
           fill="transparent"
           stroke-width="4"
+          v-bind="ringAttrs"
         ></circle>
 
         <circle
@@ -27,12 +27,12 @@
           fill="transparent"
           stroke="url(#gradient)"
           stroke-width="4"
-          :stroke-dasharray="accountOccupancyInPercent"
+          :stroke-dasharray="fillPercentage"
           stroke-dashoffset="0"
         ></circle>
-        <g class="mono-stepper-count">
+        <g v-bind="countAttrs">
           <text y="45%" transform="translate(0, 2)">
-            <tspan x="50%" text-anchor="middle" class="mono-stepper-count">{{ step }}</tspan>
+            <tspan x="50%" text-anchor="middle">{{ step }}</tspan>
           </text>
         </g>
       </svg>
@@ -40,90 +40,89 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from "vue";
+
+import colors from "tailwindcss/colors";
+import { grayColors } from "../service.tailwind";
+
 import UHeader from "vueless/ui.text-header";
 
-export default {
-  name: "UStepper",
+import UIService from "vueless/service.ui";
+
+import { UStepper } from "./constants/index";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UStepper", inheritAttrs: false });
 
-  components: {
-    UHeader,
+const props = defineProps({
+  /**
+   * Set component title.
+   */
+  title: {
+    type: String,
+    default: "",
   },
 
-  props: {
-    /**
-     * Set component title.
-     */
-    title: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set step number.
-     */
-    step: {
-      type: Number,
-      default: null,
-    },
-
-    /**
-     * Set total number of steps.
-     */
-    totalSteps: {
-      type: Number,
-      default: null,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Set step number.
+   */
+  step: {
+    type: Number,
+    default: UIService.get(defaultConfig, UStepper).default.step,
   },
 
-  computed: {
-    accountOccupancyInPercent() {
-      const maxCountPercent = 100;
-      const activePercent = (this.step / this.totalSteps) * maxCountPercent;
+  /**
+   * 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, UStepper).default.color,
+  },
 
-      return `${activePercent} ${maxCountPercent}`;
-    },
+  /**
+   * Set total number of steps.
+   */
+  totalSteps: {
+    type: Number,
+    default: null,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.wrapper {
-  @apply flex items-center justify-between;
-}
-
-.mono-stepper {
-  @apply h-12 w-12;
-
-  &-wrapper {
-    @apply flex items-center justify-between;
-  }
-
-  .svg-gradient {
-    .stop-1 {
-      stop-color: theme("colors.blue.500");
-    }
-
-    .stop-2 {
-      stop-color: theme("colors.blue.500");
-    }
-  }
-
-  &-ring {
-    @apply stroke-current text-gray-100;
-  }
-
-  &-count {
-    @apply text-xl font-bold text-gray-900;
-    @apply translate-y-2 transform;
-  }
-}
-</style>
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs, titleAttrs, stepperAttrs, ringAttrs, countAttrs, gradientAttrs, svgAttrs } =
+  useAttrs(props);
+
+const setStepperColor = computed(() => {
+  return colors[props.color]
+    ? colors[props.color][500]
+    : grayColors.includes(props.color)
+      ? colors[props.color][900]
+      : colors.zinc[900];
+});
+
+const fillPercentage = computed(() => {
+  const maxCountPercent = 100;
+  const activePercent = (props.step / props.totalSteps) * maxCountPercent;
+
+  return `${activePercent} ${maxCountPercent}`;
+});
+</script>

package/ui.navigation-tab/composables/attrs.composable.js

@@ -0,0 +1,30 @@
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props, { selected, size }) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { wrapper } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      disabled: props.disabled,
+      size: size.value,
+      selected: selected.value,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+
+  return {
+    wrapperAttrs,
+  };
+}