vueless 0.0.200 → 0.0.202

package/ui.navigation-stepper/Docs.mdx

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
-
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
-
-<Meta of={stories} />
-<Title of={stories} />
-<Subtitle of={stories} />
-<Description of={stories} />
-<Primary of={stories}  />
-<Controls of={stories.Default} />
-<Stories of={stories} />
-
-## Default config
-<Source code={getSource(defaultConfig)} language="jsx" dark />

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

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,33 +0,0 @@
-import { getArgTypes } from "../service.storybook";
-
-import UStepper from "../ui.navigation-stepper";
-
-/**
- * The `UStepper` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/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,126 +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 UHeader from "../ui.text-header";
-import UIService from "../service.ui";
-import { GRAY_COLORS } from "../preset.tailwind/constants";
-
-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]
-    : GRAY_COLORS.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>