vueless 0.0.504 → 0.0.506

package/ui.button/types.ts

@@ -0,0 +1,121 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UButtonProps {
+  /**
+   * Button variant.
+   */
+  variant?: "primary" | "secondary" | "thirdary";
+
+  /**
+   * Button color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Button size.
+   */
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Button label.
+   */
+  label?: string;
+
+  /**
+   * Allows changing button html tag.
+   */
+  tag?: string;
+
+  /**
+   * Icon name (appears instead of label).
+   */
+  icon?: string;
+
+  /**
+   * Left icon name.
+   */
+  leftIcon?: string;
+
+  /**
+   * Right icon name.
+   */
+  rightIcon?: string;
+
+  /**
+   * Controls the keyboard “Tab” focus order of elements.
+   */
+  tabindex?: string | number;
+
+  /**
+   * Fill the background for thirdary variant.
+   */
+  filled?: boolean;
+
+  /**
+   * Disable the button.
+   */
+  disabled?: boolean;
+
+  /**
+   * Make the Button fill the width with its container.
+   */
+  block?: boolean;
+
+  /**
+   * Set button corners rounded.
+   */
+  round?: boolean;
+
+  /**
+   * Set the same paddings for the button.
+   */
+  square?: boolean;
+
+  /**
+   * Enable loader.
+   */
+  loading?: boolean;
+
+  /**
+   * Remove button ring on focus.
+   */
+  noRing?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.button/{useAttrs.js → useAttrs.ts}

@@ -1,10 +1,13 @@
 import { useSlots, computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 
-export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+import type { UseAttrs } from "../types.ts";
+import type { UButtonProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UButtonProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
   const slots = useSlots();
 
   const mutatedProps = computed(() => ({

package/ui.button-link/ULink.vue

@@ -1,60 +1,36 @@
-<template>
-  <div v-bind="wrapperAttrs" ref="wrapperRef" tabindex="-1">
-    <!-- @slot Use it to add something before the label. -->
-    <slot name="left" />
-
-    <router-link
-      v-if="isPresentRoute"
-      :to="route"
-      :target="targetValue"
-      v-bind="linkAttrs"
-      :data-test="dataTest"
-      tabindex="0"
-      @blur="onBlur"
-      @focus="onFocus"
-      @click="onClick"
-      @keydown="onKeydown"
-      @mouseover="onMouseover"
-    >
-      <!-- @slot Use it replace the label. -->
-      <slot>
-        {{ label }}
-      </slot>
-    </router-link>
-
-    <a
-      v-else
-      :href="prefixedHref"
-      :target="targetValue"
-      v-bind="linkAttrs"
-      :data-test="dataTest"
-      tabindex="0"
-      @blur="onBlur"
-      @focus="onFocus"
-      @click="onClick"
-      @keydown="onKeydown"
-      @mouseover="onMouseover"
-    >
-      <!-- @slot Use it replace the label. -->
-      <slot>{{ label }}</slot>
-    </a>
-
-    <!-- @slot Use it to add something after the label. -->
-    <slot name="right" />
-  </div>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, ref } from "vue";
 import { RouterLink, useLink } from "vue-router";
 import { getDefault } from "../utils/ui.ts";
 
-import useAttrs from "./useAttrs.js";
-import defaultConfig from "./config.js";
-import { ULink } from "./constants.js";
+import useAttrs from "./useAttrs.ts";
+import defaultConfig from "./config.ts";
+import { ULink } from "./constants.ts";
+
+import type { ULinkProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
+const props = withDefaults(defineProps<ULinkProps>(), {
+  size: getDefault<ULinkProps>(defaultConfig, ULink).size,
+  color: getDefault<ULinkProps>(defaultConfig, ULink).color,
+  type: getDefault<ULinkProps>(defaultConfig, ULink).type,
+  targetBlank: getDefault<ULinkProps>(defaultConfig, ULink).targetBlank,
+  ariaCurrentValue: getDefault<ULinkProps>(defaultConfig, ULink).ariaCurrentValue,
+  custom: getDefault<ULinkProps>(defaultConfig, ULink).custom,
+  replace: getDefault<ULinkProps>(defaultConfig, ULink).replace,
+  activeClass: getDefault<ULinkProps>(defaultConfig, ULink).activeClass,
+  exactActiveClass: getDefault<ULinkProps>(defaultConfig, ULink).exactActiveClass,
+  wrapperActiveClass: getDefault<ULinkProps>(defaultConfig, ULink).wrapperActiveClass,
+  wrapperExactActiveClass: getDefault<ULinkProps>(defaultConfig, ULink).wrapperExactActiveClass,
+  underlined: getDefault<ULinkProps>(defaultConfig, ULink).underlined,
+  dashed: getDefault<ULinkProps>(defaultConfig, ULink).dashed,
+  disabled: getDefault<ULinkProps>(defaultConfig, ULink).disabled,
+  block: getDefault<ULinkProps>(defaultConfig, ULink).block,
+  noRing: getDefault<ULinkProps>(defaultConfig, ULink).noRing,
+  dataTest: "",
+});
+
 const emit = defineEmits([
   /**
    * Triggers when link is clicked.
@@ -82,179 +58,6 @@ const emit = defineEmits([
   "keydown",
 ]);
 
-const props = defineProps({
-  /**
-   * Button label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Link href url.
-   */
-  href: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Vue-router route object.
-   */
-  to: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Link size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, ULink).size,
-  },
-
-  /**
-   * Link 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: getDefault(defaultConfig, ULink).color,
-  },
-
-  /**
-   * Link open type behaviour.
-   * @values phone, email, link
-   */
-  type: {
-    type: String,
-    default: getDefault(defaultConfig, ULink).type,
-  },
-
-  /**
-   * Open link in the new tab.
-   */
-  targetBlank: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULink).targetBlank,
-  },
-
-  /**
-   * Pass value to the attribute aria-current when the link is exact active.
-   */
-  ariaCurrentValue: {
-    type: String,
-    default: getDefault(defaultConfig, ULink).ariaCurrentValue,
-  },
-
-  /**
-   * Whether RouterLink should not wrap its content in an a tag.
-   */
-  custom: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULink).custom,
-  },
-
-  /**
-   * Whether RouterLink should not wrap its content in an a tag.
-   */
-  replace: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULink).replace,
-  },
-
-  /**
-   * Apply classes to the link when its route is active or when it matches any parent route.
-   */
-  activeClass: {
-    type: String,
-    default: getDefault(defaultConfig, ULink).activeClass,
-  },
-
-  /**
-   * Apply classes to the link when its route is active.
-   */
-  exactActiveClass: {
-    type: String,
-    default: getDefault(defaultConfig, ULink).exactActiveClass,
-  },
-
-  /**
-   * Apply classes to the wrapper div when link route is active or when it matches any parent route.
-   */
-  wrapperActiveClass: {
-    type: String,
-    default: getDefault(defaultConfig, ULink).wrapperActiveClass,
-  },
-
-  /**
-   * Apply classes to the wrapper div when link route is active.
-   */
-  wrapperExactActiveClass: {
-    type: String,
-    default: getDefault(defaultConfig, ULink).wrapperExactActiveClass,
-  },
-
-  /**
-   * Show underline.
-   */
-  underlined: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULink).underlined,
-  },
-
-  /**
-   * Set link underline style as dashed.
-   */
-  dashed: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULink).dashed,
-  },
-
-  /**
-   * Disable the link.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULink).disabled,
-  },
-
-  /**
-   * Make the Button fill the width with its container.
-   */
-  block: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULink).block,
-  },
-
-  /**
-   * Remove outline ring on focus.
-   */
-  noRing: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULink).noRing,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
 const isPresentRoute = computed(() => {
   for (const key in props.to) return true;
 
@@ -316,3 +119,49 @@ defineExpose({
   wrapperRef,
 });
 </script>
+
+<template>
+  <div v-bind="wrapperAttrs" ref="wrapperRef" tabindex="-1">
+    <!-- @slot Use it to add something before the label. -->
+    <slot name="left" />
+
+    <router-link
+      v-if="isPresentRoute"
+      :to="route"
+      :target="targetValue"
+      v-bind="linkAttrs"
+      :data-test="dataTest"
+      tabindex="0"
+      @blur="onBlur"
+      @focus="onFocus"
+      @click="onClick"
+      @keydown="onKeydown"
+      @mouseover="onMouseover"
+    >
+      <!-- @slot Use it replace the label. -->
+      <slot>
+        {{ label }}
+      </slot>
+    </router-link>
+
+    <a
+      v-else
+      :href="prefixedHref"
+      :target="targetValue"
+      v-bind="linkAttrs"
+      :data-test="dataTest"
+      tabindex="0"
+      @blur="onBlur"
+      @focus="onFocus"
+      @click="onClick"
+      @keydown="onKeydown"
+      @mouseover="onMouseover"
+    >
+      <!-- @slot Use it replace the label. -->
+      <slot>{{ label }}</slot>
+    </a>
+
+    <!-- @slot Use it to add something after the label. -->
+    <slot name="right" />
+  </div>
+</template>

package/ui.button-link/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.button-link/storybook/{stories.js → stories.ts}

@@ -5,6 +5,14 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { ULinkProps } from "../types.ts";
+
+interface ULinkArgs extends ULinkProps {
+  slotTemplate?: string;
+  enum: "size" | "color";
+}
+
 /**
  * The `ULink` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button-link)
  */
@@ -18,9 +26,9 @@ export default {
   argTypes: {
     ...getArgTypes(ULink.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<ULinkArgs> = (args: ULinkArgs) => ({
   components: { ULink, UButton, UIcon },
   setup() {
     const slots = getSlotNames(ULink.__name);
@@ -28,26 +36,29 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <ULink v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+    <ULink v-if="args.block" v-bind="args" :config="{ wrapper: 'border-2 border-dashed border-green-500 p-2' }">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </ULink>
+    <ULink v-else v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
     </ULink>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<ULinkArgs> = (args: ULinkArgs, { argTypes }) => ({
   components: { ULink, URow },
   setup() {
-    function getText(value) {
+    function getText(value: string) {
       return `Link ${value}`;
     }
 
-    let prefixedOptions = argTypes[args.enum].options;
+    let prefixedOptions = argTypes?.[args.enum]?.options;
 
-    if (argTypes[args.enum].name === "size") {
-      prefixedOptions = prefixedOptions.map((option) => getText(option));
+    if (argTypes?.[args.enum]?.name === "size") {
+      prefixedOptions = prefixedOptions?.map((option) => getText(option));
     }
 
-    return { args, options: argTypes[args.enum].options, prefixedOptions };
+    return { args, options: argTypes?.[args.enum]?.options, prefixedOptions };
   },
   template: `
     <URow no-mobile>
@@ -71,10 +82,10 @@ Sizes.args = { enum: "size" };
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color" };
 
-export const Types = (args) => ({
+export const Types: StoryFn<ULinkArgs> = (args: ULinkArgs) => ({
   components: { ULink, URow },
   setup() {
-    function getTypeLabel(type) {
+    function getTypeLabel(type: string): string {
       switch (type) {
         case "phone":
           return "+1 (000) 123-4567";
@@ -82,10 +93,12 @@ export const Types = (args) => ({
           return "hello@vueless.com";
         case "link":
           return "Vueless.com";
+        default:
+          return "Unknown";
       }
     }
 
-    function getTypeHref(type, label) {
+    function getTypeHref(type: string, label: string) {
       switch (type) {
         case "phone": {
           const phoneNumber = label.replace(/\D/g, "");
@@ -126,7 +139,7 @@ export const Types = (args) => ({
   `,
 });
 
-export const UnderlineVariants = (args, { argTypes } = {}) => ({
+export const UnderlineVariants: StoryFn<ULinkArgs> = (args: ULinkArgs, { argTypes }) => ({
   components: { ULink, URow },
   setup() {
     const variants = [
@@ -135,7 +148,7 @@ export const UnderlineVariants = (args, { argTypes } = {}) => ({
       { name: "Dashed", props: { dashed: true } },
     ];
 
-    const colors = argTypes.color.options;
+    const colors = argTypes?.color?.options;
 
     return {
       args,
@@ -166,7 +179,7 @@ export const NoRing = DefaultTemplate.bind({});
 NoRing.args = { noRing: true };
 
 export const Block = DefaultTemplate.bind({});
-Block.args = { block: true, config: { wrapper: "border-2 border-dashed border-green-500 p-2" } };
+Block.args = { block: true };
 
 export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
@@ -177,7 +190,7 @@ DefaultSlot.args = {
   `,
 };
 
-export const LeftAndRightSlots = (args) => ({
+export const LeftAndRightSlots: StoryFn<ULinkArgs> = (args: ULinkArgs) => ({
   components: { ULink, UIcon, URow },
   setup() {
     return { args };