vueless 0.0.4 → 0.0.6

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

package/src/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/src/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/src/ui.navigation-stepper/index.stories.js

@@ -0,0 +1,30 @@
+import { getArgTypes } from "../service.storybook";
+
+import UStepper from "../ui.navigation-stepper";
+
+export default {
+  id: "8030",
+  title: "Navigation / Stepper",
+  component: UStepper,
+  args: {
+    title: "Title",
+    step: 1,
+    totalSteps: 10,
+  },
+  argTypes: {
+    ...getArgTypes(UStepper.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UStepper },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UStepper v-bind="args" />
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};

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

@@ -0,0 +1,126 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <UHeader :label="title" size="xs" v-bind="titleAttrs" />
+
+    <div v-bind="stepperAttrs">
+      <svg width="100%" height="100%" viewBox="0 0 40 40" v-bind="svgAttrs">
+        <defs>
+          <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
+          cx="20"
+          cy="20"
+          r="15.91549430918954"
+          fill="transparent"
+          stroke-width="4"
+          v-bind="ringAttrs"
+        ></circle>
+
+        <circle
+          cx="20"
+          cy="20"
+          r="15.91549430918954"
+          fill="transparent"
+          stroke="url(#gradient)"
+          stroke-width="4"
+          :stroke-dasharray="fillPercentage"
+          stroke-dashoffset="0"
+        ></circle>
+        <g v-bind="countAttrs">
+          <text y="45%" transform="translate(0, 2)">
+            <tspan x="50%" text-anchor="middle">{{ step }}</tspan>
+          </text>
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import colors from "tailwindcss/colors";
+
+import UHeader from "../ui.text-header";
+import UIService from "../service.ui";
+import { grayColors } from "../service.tailwind";
+
+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 });
+
+const props = defineProps({
+  /**
+   * Set component title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set step number.
+   */
+  step: {
+    type: Number,
+    default: UIService.get(defaultConfig, UStepper).default.step,
+  },
+
+  /**
+   * 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,
+  },
+
+  /**
+   * Set total number of steps.
+   */
+  totalSteps: {
+    type: Number,
+    default: null,
+  },
+
+  /**
+   * 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/src/ui.navigation-tab/composables/attrs.composable.js

@@ -0,0 +1,30 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../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,
+  };
+}

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

@@ -0,0 +1,22 @@
+export default /*tw*/ {
+  wrapper: {
+    base: `w-max pb-2 text-center cursor-pointer`,
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
+      disabled: {
+        true: "text-gray-500",
+      },
+      selected: {
+        true: "border-b-2 border-gray-900",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    disabled: false,
+  },
+};

package/src/ui.navigation-tab/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 UTab = "UTab";

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

@@ -0,0 +1,57 @@
+import { getArgTypes } from "../service.storybook";
+
+import UTab from "../ui.navigation-tab";
+import UIcon from "../ui.image-icon";
+
+export default {
+  id: "8010",
+  title: "Navigation / Tab",
+  component: UTab,
+  args: {
+    label: "Tab",
+  },
+  argTypes: {
+    ...getArgTypes(UTab.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UTab },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UTab v-bind="args" />
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UTab, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UTab v-bind="args">
+      ${args.slotTemplate}
+    </UTab>
+  `,
+});
+
+export const defaultTemplate = DefaultTemplate.bind({});
+defaultTemplate.args = {};
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };
+
+export const slotDefault = SlotTemplate.bind({});
+slotDefault.args = {
+  label: "Tag",
+  slotTemplate: `
+    <template #default>
+      <div class="flex items-center">
+        <UIcon name="star" size="sm" />
+        {{label}}
+      </div>
+    </template>
+  `,
+};