vueless 0.0.504 → 0.0.505

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.504",
+  "version": "0.0.505",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -11,6 +11,9 @@ import UHeaderDefaultConfig from "./ui.text-header/config.ts";
 import UNotifyDefaultConfig from "./ui.text-notify/config.ts";
 import UDotDefaultConfig from "./ui.other-dot/config.ts";
 import UButtonDefaultConfig from "./ui.button/config.ts";
+import ULinkDefaultConfig from "./ui.button-link/config.ts";
+import UToggleDefaultConfig from "./ui.button-toggle/config.ts";
+import UToggleItemDefaultConfig from "./ui.button-toggle-item/config.ts";
 import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
 import UCalendarDefaultConfig from "./ui.form-calendar/config.ts";
 import UDatePickerConfig from "./ui.form-date-picker/config.ts";
@@ -132,6 +135,9 @@ export interface Components {
   UNotify?: Partial<typeof UNotifyDefaultConfig>;
   UDot?: Partial<typeof UDotDefaultConfig>;
   UButton?: Partial<typeof UButtonDefaultConfig>;
+  ULink?: Partial<typeof ULinkDefaultConfig>;
+  UToggle?: Partial<typeof UToggleDefaultConfig>;
+  UToggleItem?: Partial<typeof UToggleItemDefaultConfig>;
   UBadge?: Partial<typeof UBadgeDefaultConfig>;
   UCalendar?: Partial<typeof UCalendarDefaultConfig>;
   UDatePicker?: Partial<typeof UDatePickerConfig>;

package/ui.button/UButton.vue

@@ -1,3 +1,104 @@
+<script lang="ts" setup>
+import { computed, ref, watchEffect, useId, watch } from "vue";
+
+import { getDefault } from "../utils/ui.ts";
+import ULoader from "../ui.loader/ULoader.vue";
+import UIcon from "../ui.image-icon/UIcon.vue";
+
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+import { UButton } from "./constants.ts";
+
+import type { UButtonProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UButtonProps>(), {
+  variant: getDefault<UButtonProps>(defaultConfig, UButton).variant,
+  color: getDefault<UButtonProps>(defaultConfig, UButton).color,
+  size: getDefault<UButtonProps>(defaultConfig, UButton).size,
+  tag: getDefault<UButtonProps>(defaultConfig, UButton).tag,
+  tabindex: getDefault<UButtonProps>(defaultConfig, UButton).tabindex,
+  filled: getDefault<UButtonProps>(defaultConfig, UButton).filled,
+  disabled: getDefault<UButtonProps>(defaultConfig, UButton).disabled,
+  block: getDefault<UButtonProps>(defaultConfig, UButton).block,
+  round: getDefault<UButtonProps>(defaultConfig, UButton).round,
+  square: getDefault<UButtonProps>(defaultConfig, UButton).square,
+  loading: getDefault<UButtonProps>(defaultConfig, UButton).loading,
+  noRing: getDefault<UButtonProps>(defaultConfig, UButton).noRing,
+  dataTest: "",
+});
+
+const elementId = props.id || useId();
+
+const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
+  useAttrs(props);
+
+const buttonRef = ref(null);
+const buttonStyle = ref(null);
+const buttonWidth = ref(0);
+
+const loaderSize = computed(() => {
+  const sizes = {
+    "2xs": "sm",
+    xs: "sm",
+    sm: "md",
+    md: "md",
+    lg: "lg",
+    xl: "lg",
+  };
+
+  return sizes[props.size];
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    "2xs": "2xs",
+    xs: "xs",
+    sm: "sm",
+    md: "sm",
+    lg: "md",
+    xl: "md",
+  };
+
+  return sizes[props.size];
+});
+
+const iconColor = computed(() => {
+  return props.variant === "primary" ? "white" : props.color;
+});
+
+watch(
+  () => props.loading,
+  (newValue, oldValue) => {
+    const isLoaderOn = newValue && oldValue !== undefined;
+
+    if (isLoaderOn && buttonRef.value) {
+      buttonWidth.value = buttonRef.value.offsetWidth;
+    }
+
+    buttonStyle.value = {
+      width: isLoaderOn ? `${buttonWidth.value}px` : null,
+      paddingLeft: isLoaderOn ? "0px" : null,
+      paddingRight: isLoaderOn ? "0px" : null,
+    };
+  },
+  { immediate: true },
+);
+
+watchEffect(() => {
+  props.loading && buttonRef.value.blur();
+});
+
+defineExpose({
+  /**
+   * A reference to the button element for direct DOM manipulation.
+   * @property {HTMLElement}
+   */
+  buttonRef,
+});
+</script>
+
 <template>
   <component
     :is="tag"
@@ -79,243 +180,3 @@
     </template>
   </component>
 </template>
-
-<script setup>
-import { computed, ref, watchEffect, useId, watch } from "vue";
-
-import { getDefault } from "../utils/ui.ts";
-import ULoader from "../ui.loader/ULoader.vue";
-import UIcon from "../ui.image-icon/UIcon.vue";
-
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-import { UButton } from "./constants.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Button variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UButton).variant,
-  },
-
-  /**
-   * Button 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, UButton).color,
-  },
-
-  /**
-   * Button size.
-   * @values 2xs, xs, sm, md, lg, xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UButton).size,
-  },
-
-  /**
-   * Button label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Allows changing button html tag.
-   */
-  tag: {
-    type: String,
-    default: getDefault(defaultConfig, UButton).tag,
-  },
-
-  /**
-   * Icon name (appears instead of label).
-   */
-  icon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Left icon name.
-   */
-  leftIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right icon name.
-   */
-  rightIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Controls the keyboard “Tab” focus order of elements.
-   */
-  tabindex: {
-    type: [String, Number],
-    default: getDefault(defaultConfig, UButton).tabindex,
-  },
-
-  /**
-   * Fill the background for thirdary variant.
-   */
-  filled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).filled,
-  },
-
-  /**
-   * Disable the button.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).disabled,
-  },
-
-  /**
-   * Make the Button fill the width with its container.
-   */
-  block: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).block,
-  },
-
-  /**
-   * Set button corners rounded.
-   */
-  round: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).round,
-  },
-
-  /**
-   * Set the same paddings for the button.
-   */
-  square: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).square,
-  },
-
-  /**
-   * Enable loader.
-   */
-  loading: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).loading,
-  },
-
-  /**
-   * Remove button ring on focus.
-   */
-  noRing: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).noRing,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const elementId = props.id || useId();
-
-const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
-  useAttrs(props);
-
-const buttonRef = ref(null);
-const buttonStyle = ref(null);
-const buttonWidth = ref(0);
-
-const loaderSize = computed(() => {
-  const sizes = {
-    "2xs": "sm",
-    xs: "sm",
-    sm: "md",
-    md: "md",
-    lg: "lg",
-    xl: "lg",
-  };
-
-  return sizes[props.size];
-});
-
-const iconSize = computed(() => {
-  const sizes = {
-    "2xs": "2xs",
-    xs: "xs",
-    sm: "sm",
-    md: "sm",
-    lg: "md",
-    xl: "md",
-  };
-
-  return sizes[props.size];
-});
-
-const iconColor = computed(() => {
-  return props.variant === "primary" ? "white" : props.color;
-});
-
-watch(
-  () => props.loading,
-  (newValue, oldValue) => {
-    const isLoaderOn = newValue && oldValue !== undefined;
-
-    if (isLoaderOn && buttonRef.value) {
-      buttonWidth.value = buttonRef.value.offsetWidth;
-    }
-
-    buttonStyle.value = {
-      width: isLoaderOn ? `${buttonWidth.value}px` : null,
-      paddingLeft: isLoaderOn ? "0px" : null,
-      paddingRight: isLoaderOn ? "0px" : null,
-    };
-  },
-  { immediate: true },
-);
-
-watchEffect(() => {
-  props.loading && buttonRef.value.blur();
-});
-
-defineExpose({
-  /**
-   * A reference to the button element for direct DOM manipulation.
-   * @property {HTMLElement}
-   */
-  buttonRef,
-});
-</script>

package/ui.button/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/storybook/{stories.js → stories.ts}

@@ -12,6 +12,18 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UButtonProps } from "../types.ts";
+
+interface UButtonArgs extends UButtonProps {
+  slotTemplate?: string;
+  enum: "variant" | "size";
+}
+
+interface StoryArgType {
+  options?: string[];
+}
+
 export default {
   id: "1010",
   title: "Buttons & Links / Button",
@@ -25,9 +37,9 @@ export default {
   parameters: {
     ...getDocsDescription(UButton.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs) => ({
   components: { UButton, UIcon },
   setup() {
     const slots = getSlotNames(UButton.__name);
@@ -36,15 +48,15 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UButton>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs, { argTypes }) => ({
   components: { UButton, URow, UCol },
   setup() {
-    return { args, options: argTypes[args.enum].options };
+    return { args, options: argTypes?.[args.enum]?.options };
   },
   template: `
     <UCol>
@@ -61,16 +73,17 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const ColorTemplate = (args, { argTypes }) => ({
+const ColorTemplate: StoryFn<UButtonArgs> = (args, { argTypes }) => ({
   components: { UButton, URow, UCol },
   setup() {
-    const variants = [...argTypes.variant.options, "thirdary"];
+    const variantOptions = (argTypes.variant as StoryArgType)?.options ?? [];
+    const variants = [...Array.from(variantOptions), "thirdary"];
 
     return {
       args,
       variants,
-      colors: argTypes.color.options,
-      shouldBeFilled: (variant, index) => {
+      colors: argTypes?.color?.options,
+      shouldBeFilled: (variant: string, index: number) => {
         return variant === "thirdary" && index === variants.length - 2;
       },
     };
@@ -104,7 +117,7 @@ Sizes.args = { enum: "size" };
 export const Round = EnumVariantTemplate.bind({});
 Round.args = { enum: "variant", round: true };
 
-export const Loading = (args) => ({
+export const Loading: StoryFn<UButtonArgs> = (args) => ({
   components: { UButton, URow },
   setup() {
     const loading = ref(false);
@@ -147,7 +160,7 @@ Colors.args = {};
 export const Square = DefaultTemplate.bind({});
 Square.args = { square: true, icon: "filter_list" };
 
-export const IconProps = (args) => ({
+export const IconProps: StoryFn<UButtonArgs> = (args) => ({
   components: { UButton, URow },
   setup() {
     return { args };
@@ -166,7 +179,7 @@ export const IconProps = (args) => ({
   `,
 });
 
-export const Slots = (args) => ({
+export const Slots: StoryFn<UButtonArgs> = (args) => ({
   components: { UButton, UIcon, URow },
   setup() {
     return { args };

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(() => ({