vueless 0.0.503 → 0.0.505

package/package.json

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

package/plugin-vite.d.ts

@@ -1,11 +1,43 @@
-export function VuelessUnpluginComponents(options?: unknown): import("vite").Plugin<unknown> & {
-  api: import("unplugin-vue-components/types.js").PublicPluginAPI;
-};
-
-export function Vueless(options?: {
-  env?: string;
-  mode?: string;
-  debug?: boolean;
-  include?: string[];
-  mirrorCacheDir?: string;
-}): never;
+declare module "unplugin-vue-components" {
+  export function VuelessUnpluginComponents(options?: unknown): import("vite").Plugin<unknown> & {
+    api: import("unplugin-vue-components/types.js").PublicPluginAPI;
+  };
+}
+
+declare module "Vueless" {
+  import { Plugin } from "vite";
+  import { Config } from "svgo";
+  function Vueless(options?: {
+    env?: string;
+    mode?: string;
+    debug?: boolean;
+    include?: string[];
+    mirrorCacheDir?: string;
+    svgoConfig?: Config;
+    svgo?: boolean;
+    defaultImport?: "url" | "raw" | "component";
+  }): Plugin;
+  export default Vueless;
+}
+
+declare module "*.svg?component" {
+  import type { FunctionalComponent, SVGAttributes } from "vue";
+  const component: FunctionalComponent<SVGAttributes>;
+  export default component;
+}
+
+declare module "*.svg?url" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.svg?raw" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg?skipsvgo" {
+  import type { FunctionalComponent, SVGAttributes } from "vue";
+  const component: FunctionalComponent<SVGAttributes>;
+  export default component;
+}

package/types.ts

@@ -2,7 +2,18 @@ import { hasSlotContent } from "./composables/useUI.ts";
 
 // TODO: Import all components here
 import UTextDefaultConfig from "./ui.text-block/config.ts";
+import UAlertDefaultConfig from "./ui.text-alert/config.ts";
+import UEmptyDefaultConfig from "./ui.text-empty/config.ts";
+import UFileDefaultConfig from "./ui.text-file/config.ts";
+import UFilesDefaultConfig from "./ui.text-files/config.ts";
+import UMoneyDefaultConfig from "./ui.text-money/config.ts";
+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";
@@ -115,7 +126,18 @@ export type BrandColors =
 
 export interface Components {
   UText?: Partial<typeof UTextDefaultConfig>;
+  UAlert?: Partial<typeof UAlertDefaultConfig>;
+  UEmpty?: Partial<typeof UEmptyDefaultConfig>;
+  UFile?: Partial<typeof UFileDefaultConfig>;
+  UFiles?: Partial<typeof UFilesDefaultConfig>;
+  UMoney?: Partial<typeof UMoneyDefaultConfig>;
+  UHeader?: Partial<typeof UHeaderDefaultConfig>;
+  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>;
@@ -346,19 +368,25 @@ export type ComponentType<T> = T extends new (...args: any) => {}
     ? 2
     : 0;
 
-export type ComponentProps<T> = T extends new (...args: any) => { $props: infer P }
+export type ComponentProps<T> = T extends new (...args: any) => {
+  $props: infer P;
+}
   ? NonNullable<P>
   : T extends (props: infer P, ...args: any) => any
     ? P
     : {};
 
-export type ComponentSlots<T> = T extends new (...args: any) => { $slots: infer S }
+export type ComponentSlots<T> = T extends new (...args: any) => {
+  $slots: infer S;
+}
   ? NonNullable<S>
   : T extends (props: any, ctx: { slots: infer S; attrs: any; emit: any }, ...args: any) => any
     ? NonNullable<S>
     : {};
 
-export type ComponentEmit<T> = T extends new (...args: any) => { $emit: infer E }
+export type ComponentEmit<T> = T extends new (...args: any) => {
+  $emit: infer E;
+}
   ? NonNullable<E>
   : {};
 

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;
+}