vueless 0.0.3 → 0.0.4

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

@@ -1,41 +0,0 @@
-import useUI from "vueless/composable.ui";
-
-import defaultConfig from "../configs/default.config";
-import { cx } from "vueless/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

@@ -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/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/ui.navigation-pagination/index.stories.js

@@ -1,52 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UPagination from "vueless/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

@@ -1,275 +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.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,
-  },
-
-  /**
-   * 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

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

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

@@ -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 UStepper = "UStepper";

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

@@ -1,30 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UStepper from "vueless/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/ui.navigation-stepper/index.vue

@@ -1,128 +0,0 @@
-<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 { grayColors } from "../service.tailwind";
-
-import UHeader from "vueless/ui.text-header";
-
-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 });
-
-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>