vueless 0.0.200 → 0.0.202

package/ui.navigation-progress/components/StepperProgress.vue

@@ -0,0 +1,87 @@
+<template>
+  <svg width="100%" height="100%" viewBox="0 0 40 40" v-bind="stepperSvgAttrs">
+    <defs>
+      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" v-bind="stepperGradientAttrs">
+        <stop offset="0%" :stop-color="stepperColor" />
+        <stop offset="100%" :stop-color="stepperColor" />
+      </linearGradient>
+    </defs>
+
+    <circle
+      cx="20"
+      cy="20"
+      r="15.91549430918954"
+      fill="transparent"
+      stroke-width="4"
+      v-bind="stepperCircleAttrs"
+    />
+
+    <circle
+      cx="20"
+      cy="20"
+      r="15.91549430918954"
+      fill="transparent"
+      stroke="url(#gradient)"
+      stroke-width="4"
+      :stroke-dasharray="progressPercent"
+      stroke-dashoffset="0"
+    />
+    <g v-bind="stepperCountAttrs">
+      <text y="45%" transform="translate(0, 2)">
+        <tspan x="50%" text-anchor="middle">{{ value }}</tspan>
+      </text>
+    </g>
+  </svg>
+</template>
+
+<script setup>
+import colors from "tailwindcss/colors";
+import { computed } from "vue";
+
+import { GRAY_COLORS } from "../../preset.tailwind/constants";
+
+import { useAttrs } from "../composables/attrs.composable";
+
+const props = defineProps({
+  progressPercent: {
+    type: String,
+    required: true,
+  },
+
+  value: {
+    type: Number,
+    required: true,
+  },
+
+  color: {
+    type: String,
+    required: true,
+  },
+
+  max: {
+    type: Number,
+    default: null,
+  },
+
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { stepperCircleAttrs, stepperCountAttrs, stepperGradientAttrs, stepperSvgAttrs } =
+  useAttrs(props);
+
+const stepperColor = computed(() => {
+  return colors[props.color]
+    ? colors[props.color][500]
+    : GRAY_COLORS.includes(props.color)
+      ? colors[props.color][900]
+      : colors.zinc[900];
+});
+</script>

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

@@ -5,72 +5,49 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { progress, indicator, step } = config.value;
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
-  const cvaProgress = cva({
-    base: progress.base,
-    variants: progress.variants,
-    compoundVariants: progress.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaIndicator = cva({
-    base: indicator.base,
-    variants: indicator.variants,
-    compoundVariants: indicator.compoundVariants,
-  });
+    let classes = "";
+    let value = config.value[key];
 
-  const cvaStep = cva({
-    base: step.base,
-    variants: step.variants,
-    compoundVariants: step.compoundVariants,
-  });
+    const isVariants = value.variants || value.compoundVariants;
+    const excludeKeys = ["progress", "indicator", "step"];
 
-  const progressClasses = computed(() =>
-    setColor(
-      cvaProgress({
-        size: props.size,
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
+    if (isVariants && !excludeKeys.includes(key)) {
+      const getCVA = cva(value);
 
-  const indicatorClasses = computed(() =>
-    setColor(
-      cvaIndicator({
-        size: props.size,
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
+      classes = computed(() => getCVA({ ...props }));
+    }
 
-  const stepClasses = computed(() =>
-    setColor(
-      cvaStep({
-        size: props.size,
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
+    if (isVariants && excludeKeys.includes(key)) {
+      const getCVA = cva(value);
+
+      classes = computed(() =>
+        setColor(getCVA({ ...props, color: getColor(props.color) }), props.color),
+      );
+    }
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const indicatorAttrs = getAttrs("indicator", { classes: indicatorClasses });
-  const progressAttrs = getAttrs("progress", { classes: progressClasses });
-  const stepAttrsRaw = getAttrs("step", { classes: stepClasses });
+    if (key === "step") {
+      const stepAttrsRaw = getAttrs("step", { classes });
 
-  const stepAttrs = computed(() => (classes) => ({
-    ...stepAttrsRaw.value,
-    class: cx([stepAttrsRaw.value.class, classes]),
-  }));
+      attrs[`${key}Attrs`] = computed(() => (classes) => ({
+        ...stepAttrsRaw.value,
+        class: cx([stepAttrsRaw.value.class, classes]),
+      }));
+    } else {
+      attrs[`${key}Attrs`] = getAttrs(key, { classes });
+    }
+  }
 
   return {
-    progressAttrs,
-    wrapperAttrs,
-    indicatorAttrs,
-    stepAttrs,
+    ...attrs,
     config,
   };
 }

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

@@ -1,5 +1,31 @@
 export default /*tw*/ {
-  wrapper: "w-full h-auto flex flex-col gap-1.5",
+  wrapper: {
+    base: "",
+    variants: {
+      variant: {
+        progress: "w-full h-auto flex flex-col gap-1.5",
+        stepper: "flex items-center justify-between",
+      },
+    },
+  },
+  stepper: {
+    base: "",
+    variants: {
+      size: {
+        "2xs": "h-8 w-8",
+        xs: "h-8 w-8",
+        sm: "h-10 w-10",
+        md: "h-12 w-12",
+        lg: "h-14 w-14",
+        xl: "h-16 w-16",
+        "2xl": "h-20 w-20",
+      },
+    },
+  },
+  stepperCircle: "stroke-current text-gray-100",
+  stepperCount: "text-xl font-bold text-gray-900 translate-y-2 transform",
+  stepperGradient: "",
+  stepperSvg: "",
   progress: {
     base: `
       text-{color}-500 w-full block appearance-none border-none overflow-hidden
@@ -35,6 +61,7 @@ export default /*tw*/ {
         grayscale: "text-gray-900",
       },
       size: {
+        "2xs": "text-xs",
         xs: "text-xs",
         sm: "text-sm",
         md: "text-md",
@@ -48,11 +75,16 @@ export default /*tw*/ {
   step: {
     base: "text-{color}-500 flex justify-end w-full transition",
     variants: {
+      variant: {
+        progress: "justify-end",
+        stepper: "justify-start",
+      },
       color: {
         white: "text-gray-200",
         grayscale: "text-gray-900",
       },
       size: {
+        "2xs": "text-xs",
         xs: "text-xs",
         sm: "text-sm",
         md: "text-md",
@@ -65,6 +97,7 @@ export default /*tw*/ {
   defaultVariants: {
     color: "brand",
     size: "md",
+    variant: "progress",
     indicator: false,
   },
   safelist: (colors) => [{ pattern: `text-(${colors})-500` }],

package/ui.navigation-progress/constants/index.js

@@ -3,3 +3,8 @@
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
 export const UProgress = "UProgress";
+
+export const VARIANT = {
+  stepper: "stepper",
+  progress: "progress",
+};

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

@@ -129,6 +129,9 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Variant = StepsTemplate.bind({});
+Variant.args = { variant: "stepper" };
+
 export const Indicator = DefaultTemplate.bind({});
 Indicator.args = { indicator: true };
 

package/ui.navigation-progress/index.vue

@@ -1,12 +1,14 @@
 <template>
   <div v-bind="wrapperAttrs">
-    <div v-if="indicator" v-bind="indicatorAttrs" :style="{ width: progressPercent }">
-      <slot name="indicator" :percent="progressPercent" :value="value" :max="realMax">
-        {{ progressPercent }}
-      </slot>
-    </div>
+    <template v-if="isVariant.progress">
+      <div v-if="indicator" v-bind="indicatorAttrs" :style="{ width: progressPercent }">
+        <slot name="indicator" :percent="progressPercent" :value="value" :max="realMax">
+          {{ progressPercent }}
+        </slot>
+      </div>
 
-    <progress v-bind="progressAttrs" :max="realMax" :value="value" />
+      <progress v-bind="progressAttrs" :max="realMax" :value="value" />
+    </template>
 
     <div v-if="isSteps" v-bind="stepAttrs(!value && config.firstStep)">
       <template v-for="(step, index) in max" :key="index">
@@ -21,6 +23,16 @@
         </slot>
       </template>
     </div>
+
+    <StepperProgress
+      v-if="isVariant.stepper"
+      v-bind="stepperAttrs"
+      :color="color"
+      :max="realMax"
+      :value="value"
+      :data-cy="dataCy"
+      :progress-percent="progressPercent"
+    />
   </div>
 </template>
 
@@ -31,7 +43,9 @@ import UIService from "../service.ui";
 import { useAttrs } from "./composables/attrs.composable";
 
 import defaultConfig from "./configs/default.config";
-import { UProgress } from "./constants";
+import { UProgress, VARIANT } from "./constants";
+
+import StepperProgress from "./components/StepperProgress.vue";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UProgress", inheritAttrs: false });
@@ -72,6 +86,15 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UProgress).default.color,
   },
 
+  /**
+   * Progress variant.
+   * @values stepper, progress
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UProgress).default.variant,
+  },
+
   /**
    * Progress indicator visibility.
    */
@@ -79,9 +102,18 @@ const props = defineProps({
     type: Boolean,
     default: UIService.get(defaultConfig, UProgress).default.indicator,
   },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
 });
 
-const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, config } = useAttrs(props);
+const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs, config } =
+  useAttrs(props);
 
 const isSteps = computed(() => Array.isArray(props.max));
 
@@ -93,7 +125,21 @@ const realMax = computed(() => {
   return Number(props.max);
 });
 
-const progressPercent = computed(() => `${(props.value / realMax.value) * 100}%`);
+const isVariant = computed(() => ({
+  stepper: props.variant === VARIANT.stepper,
+  progress: props.variant === VARIANT.progress,
+}));
+
+const progressPercent = computed(() => {
+  const maxPercent = 100;
+  const currentPercent = (props.value / realMax.value) * maxPercent;
+
+  if (isVariant.value.progress) {
+    return `${currentPercent}%`;
+  }
+
+  return `${currentPercent} ${maxPercent}`;
+});
 
 function isActiveStep(index) {
   return index + 1 == props.value;

package/ui.text-alert/composables/attrs.composable.js

@@ -4,54 +4,38 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, getColor, setColor, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const { wrapper, body } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaBody = cva({
-    base: body.base,
-    variants: body.variants,
-    compoundVariants: body.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        color: getColor(props.color),
-        bordered: props.bordered,
-        variant: props.variant,
-      }),
-      props.color,
-    ),
-  );
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const bodyClasses = computed(() => setColor(cvaBody({ size: props.size }), props.color));
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const bodyAttrs = getAttrs("body", { classes: bodyClasses });
-  const titleAttrs = getAttrs("title");
-  const descriptionAttrs = getAttrs("description");
+      return "";
+    });
 
-  const buttonAttrs = getAttrs("button", { isComponent: true });
-  const iconAttrs = getAttrs("icon", { isComponent: true });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    wrapperAttrs,
-    bodyAttrs,
-    buttonAttrs,
-    iconAttrs,
     hasSlotContent,
-    titleAttrs,
-    descriptionAttrs,
   };
 }

package/ui.text-alert/configs/default.config.js

@@ -17,7 +17,7 @@ export default /*tw*/ {
     base: `
       flex gap-2 items-baseline
       font-normal leading-normal
-      [&_b]:font-bold [&_b]:font-bold [&_i]:italic [&_em]:italic [&_p]:font-normal
+      [&_b]:font-bold [&_i]:italic [&_em]:italic [&_p]:font-normal
       [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
       [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
       [&_ul]:font-normal [&_ol]:font-normal
@@ -36,8 +36,8 @@ export default /*tw*/ {
   },
   title: "font-bold text-lg leading-tight",
   description: "text-sm",
-  button: "",
-  icon: "",
+  button: "{UButton}",
+  icon: "{UIcon}",
   iconName: "close",
   defaultVariants: {
     variant: "thirdary",

package/ui.text-alert/index.vue

@@ -1,20 +1,26 @@
 <template>
   <div v-if="isShownAlert" :data-cy="dataCy" v-bind="wrapperAttrs">
-    <!-- @slot Use it to add something above text. -->
+    <!-- @slot Use it to add something above the text. -->
     <slot name="top" />
 
-    <!-- Use it to add something instead of the title. -->
+    <!--
+      @slot Use it to add something instead of the title.
+      @binding {string} title
+    -->
     <slot name="title" :title="title">
       <div v-bind="titleAttrs" v-text="title" />
     </slot>
 
-    <!-- @slot Use it to add something instead of the description. -->
+    <!--
+      @slot Use it to add something instead of the description.
+      @binding {string} description
+    -->
     <slot name="description" :description="description">
       <div v-bind="descriptionAttrs" v-text="description" />
     </slot>
 
     <div v-bind="bodyAttrs">
-      <!-- @slot Use it to add something before text. -->
+      <!-- @slot Use it to add something before the text. -->
       <slot name="left" />
 
       <!-- @slot Default slot. -->
@@ -40,11 +46,11 @@
         />
       </UButton>
 
-      <!-- @slot Use it to add something after text. -->
+      <!-- @slot Use it to add something after the text. -->
       <slot name="right" />
     </div>
 
-    <!-- @slot Use it to add something under text. -->
+    <!-- @slot Use it to add something under the text. -->
     <slot name="bottom" />
   </div>
 </template>
@@ -58,7 +64,7 @@ import UIService from "../service.ui";
 
 import { UAlert } from "./constatns";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UAlert" });
@@ -155,7 +161,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["hidden"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the alert is hidden.
+   */
+  "hidden",
+]);
 
 const isShownAlert = ref(true);
 

package/ui.text-badge/composables/attrs.composable.js

@@ -4,49 +4,38 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, getColor, setColor, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const { wrapper, body } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaBody = cva({
-    base: body.base,
-    variants: body.variants,
-    compoundVariants: body.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        variant: props.variant,
-        size: props.size,
-        color: getColor(props.color),
-        weight: props.weight,
-      }),
-      props.color,
-    ),
-  );
+  const attrs = {};
 
-  const bodyClasses = computed(() =>
-    cvaBody({
-      size: props.size,
-    }),
-  );
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
+
+      return "";
+    });
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const bodyAttrs = getAttrs("body", { classes: bodyClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    bodyAttrs,
-    wrapperAttrs,
+    ...attrs,
+    config,
     hasSlotContent,
   };
 }

package/ui.text-badge/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UBadge from "../ui.text-badge";
 import UIcon from "../ui.image-icon";
@@ -29,9 +29,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UBadge v-bind="args">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UBadge>
   `,
 });

package/ui.text-badge/index.vue

@@ -32,7 +32,7 @@ import { ref } from "vue";
 import UIService from "../service.ui";
 
 import { UBadge } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
 
 /* Should be a string for correct web-types gen */
@@ -101,7 +101,27 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["focus", "keydown", "blur", "click"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the badge is focused.
+   */
+  "focus",
+
+  /**
+   * Triggers when the badge is pressed.
+   */
+  "keydown",
+
+  /**
+   * Triggers when the badge loses focus.
+   */
+  "blur",
+
+  /**
+   * Triggers when the badge is clicked.
+   */
+  "click",
+]);
 
 const { bodyAttrs, wrapperAttrs, hasSlotContent } = useAttrs(props);