@nuxt/ui 2.18.4 → 3.0.0-alpha.1

package/dist/runtime/components/elements/Button.vue

@@ -1,193 +0,0 @@
-<template>
-  <ULink :type="type" :disabled="disabled || loading" :class="buttonClass" v-bind="{ ...linkProps, ...attrs }">
-    <slot name="leading" :disabled="disabled" :loading="loading">
-      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
-    </slot>
-
-    <slot>
-      <span v-if="label" :class="[truncate ? ui.truncate : '']">
-        {{ label }}
-      </span>
-    </slot>
-
-    <slot name="trailing" :disabled="disabled" :loading="loading">
-      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
-    </slot>
-  </ULink>
-</template>
-
-<script>
-import { computed, defineComponent, toRef } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import ULink from "../elements/Link.vue";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from "../../utils";
-import { useInjectButtonGroup } from "../../composables/useButtonGroup";
-import appConfig from "#build/app.config";
-import { button } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
-export default defineComponent({
-  components: {
-    UIcon,
-    ULink
-  },
-  inheritAttrs: false,
-  props: {
-    ...nuxtLinkProps,
-    type: {
-      type: String,
-      default: "button"
-    },
-    block: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String,
-      default: null
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    padded: {
-      type: Boolean,
-      default: true
-    },
-    size: {
-      type: String,
-      default: () => config.default.size,
-      validator(value) {
-        return Object.keys(config.size).includes(value);
-      }
-    },
-    color: {
-      type: String,
-      default: () => config.default.color,
-      validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
-      }
-    },
-    variant: {
-      type: String,
-      default: () => config.default.variant,
-      validator(value) {
-        return [
-          ...Object.keys(config.variant),
-          ...Object.values(config.color).flatMap((value2) => Object.keys(value2))
-        ].includes(value);
-      }
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    loadingIcon: {
-      type: String,
-      default: () => config.default.loadingIcon
-    },
-    leadingIcon: {
-      type: String,
-      default: null
-    },
-    trailingIcon: {
-      type: String,
-      default: null
-    },
-    trailing: {
-      type: Boolean,
-      default: false
-    },
-    leading: {
-      type: Boolean,
-      default: false
-    },
-    square: {
-      type: Boolean,
-      default: false
-    },
-    truncate: {
-      type: Boolean,
-      default: false
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props, { slots }) {
-    const { ui, attrs } = useUI("button", toRef(props, "ui"), config);
-    const { size, rounded } = useInjectButtonGroup({ ui, props });
-    const isLeading = computed(() => {
-      return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
-    });
-    const isTrailing = computed(() => {
-      return props.icon && props.trailing || props.loading && props.trailing || props.trailingIcon;
-    });
-    const isSquare = computed(() => props.square || !slots.default && !props.label);
-    const buttonClass = computed(() => {
-      const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
-      return twMerge(twJoin(
-        ui.value.base,
-        ui.value.font,
-        rounded.value,
-        ui.value.size[size.value],
-        ui.value.gap[size.value],
-        props.padded && ui.value[isSquare.value ? "square" : "padding"][size.value],
-        variant?.replaceAll("{color}", props.color),
-        props.block ? ui.value.block : ui.value.inline
-      ), props.class);
-    });
-    const leadingIconName = computed(() => {
-      if (props.loading) {
-        return props.loadingIcon;
-      }
-      return props.leadingIcon || props.icon;
-    });
-    const trailingIconName = computed(() => {
-      if (props.loading && !isLeading.value) {
-        return props.loadingIcon;
-      }
-      return props.trailingIcon || props.icon;
-    });
-    const leadingIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.base,
-        ui.value.icon.size[size.value],
-        props.loading && ui.value.icon.loading
-      );
-    });
-    const trailingIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.base,
-        ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && ui.value.icon.loading
-      );
-    });
-    const linkProps = computed(() => getNuxtLinkProps(props));
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      isLeading,
-      isTrailing,
-      isSquare,
-      buttonClass,
-      leadingIconName,
-      trailingIconName,
-      leadingIconClass,
-      trailingIconClass,
-      linkProps
-    };
-  }
-});
-</script>

package/dist/runtime/components/elements/Button.vue.d.ts

@@ -1,504 +0,0 @@
-import type { PropType } from 'vue';
-import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types/index.js';
-declare const config: {
-    base: string;
-    font: string;
-    rounded: string;
-    truncate: string;
-    block: string;
-    inline: string;
-    size: {
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    gap: {
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    padding: {
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    square: {
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    color: {
-        white: {
-            solid: string;
-            ghost: string;
-        };
-        gray: {
-            solid: string;
-            ghost: string;
-            link: string;
-        };
-        black: {
-            solid: string;
-            link: string;
-        };
-    };
-    variant: {
-        solid: string;
-        outline: string;
-        soft: string;
-        ghost: string;
-        link: string;
-    };
-    icon: {
-        base: string;
-        loading: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-    };
-    default: {
-        size: string;
-        variant: string;
-        color: string;
-        loadingIcon: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    block: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    label: {
-        type: StringConstructor;
-        default: any;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    padded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    size: {
-        type: PropType<ButtonSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    color: {
-        type: PropType<ButtonColor>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    variant: {
-        type: PropType<ButtonVariant>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    icon: {
-        type: StringConstructor;
-        default: any;
-    };
-    loadingIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    leadingIcon: {
-        type: StringConstructor;
-        default: any;
-    };
-    trailingIcon: {
-        type: StringConstructor;
-        default: any;
-    };
-    trailing: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    leading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    square: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    truncate: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-    to: {
-        readonly type: PropType<import("vue-router").RouteLocationRaw>;
-        readonly default: any;
-        readonly required: false;
-    };
-    href: {
-        readonly type: PropType<import("vue-router").RouteLocationRaw>;
-        readonly default: any;
-        readonly required: false;
-    };
-    target: {
-        readonly type: PropType<import("#app").NuxtLinkProps["target"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    rel: {
-        readonly type: PropType<any>;
-        readonly default: any;
-        readonly required: false;
-    };
-    noRel: {
-        readonly type: PropType<import("#app").NuxtLinkProps["noRel"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    prefetch: {
-        readonly type: PropType<import("#app").NuxtLinkProps["prefetch"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    noPrefetch: {
-        readonly type: PropType<import("#app").NuxtLinkProps["noPrefetch"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    activeClass: {
-        readonly type: PropType<import("#app").NuxtLinkProps["activeClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    exactActiveClass: {
-        readonly type: PropType<import("#app").NuxtLinkProps["exactActiveClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    prefetchedClass: {
-        readonly type: PropType<import("#app").NuxtLinkProps["prefetchedClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    replace: {
-        readonly type: PropType<import("#app").NuxtLinkProps["replace"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    ariaCurrentValue: {
-        readonly type: PropType<import("#app").NuxtLinkProps["ariaCurrentValue"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    external: {
-        readonly type: PropType<import("#app").NuxtLinkProps["external"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        base: string;
-        font: string;
-        rounded: string;
-        truncate: string;
-        block: string;
-        inline: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        gap: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        padding: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        square: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        color: {
-            white: {
-                solid: string;
-                ghost: string;
-            };
-            gray: {
-                solid: string;
-                ghost: string;
-                link: string;
-            };
-            black: {
-                solid: string;
-                link: string;
-            };
-        };
-        variant: {
-            solid: string;
-            outline: string;
-            soft: string;
-            ghost: string;
-            link: string;
-        };
-        icon: {
-            base: string;
-            loading: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-        };
-        default: {
-            size: string;
-            variant: string;
-            color: string;
-            loadingIcon: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    isLeading: import("vue").ComputedRef<string | true>;
-    isTrailing: import("vue").ComputedRef<string | true>;
-    isSquare: import("vue").ComputedRef<boolean>;
-    buttonClass: import("vue").ComputedRef<string>;
-    leadingIconName: import("vue").ComputedRef<string>;
-    trailingIconName: import("vue").ComputedRef<string>;
-    leadingIconClass: import("vue").ComputedRef<string>;
-    trailingIconClass: import("vue").ComputedRef<string>;
-    linkProps: import("vue").ComputedRef<{}>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    block: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    label: {
-        type: StringConstructor;
-        default: any;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    padded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    size: {
-        type: PropType<ButtonSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    color: {
-        type: PropType<ButtonColor>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    variant: {
-        type: PropType<ButtonVariant>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    icon: {
-        type: StringConstructor;
-        default: any;
-    };
-    loadingIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    leadingIcon: {
-        type: StringConstructor;
-        default: any;
-    };
-    trailingIcon: {
-        type: StringConstructor;
-        default: any;
-    };
-    trailing: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    leading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    square: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    truncate: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-    to: {
-        readonly type: PropType<import("vue-router").RouteLocationRaw>;
-        readonly default: any;
-        readonly required: false;
-    };
-    href: {
-        readonly type: PropType<import("vue-router").RouteLocationRaw>;
-        readonly default: any;
-        readonly required: false;
-    };
-    target: {
-        readonly type: PropType<import("#app").NuxtLinkProps["target"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    rel: {
-        readonly type: PropType<any>;
-        readonly default: any;
-        readonly required: false;
-    };
-    noRel: {
-        readonly type: PropType<import("#app").NuxtLinkProps["noRel"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    prefetch: {
-        readonly type: PropType<import("#app").NuxtLinkProps["prefetch"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    noPrefetch: {
-        readonly type: PropType<import("#app").NuxtLinkProps["noPrefetch"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    activeClass: {
-        readonly type: PropType<import("#app").NuxtLinkProps["activeClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    exactActiveClass: {
-        readonly type: PropType<import("#app").NuxtLinkProps["exactActiveClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    prefetchedClass: {
-        readonly type: PropType<import("#app").NuxtLinkProps["prefetchedClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    replace: {
-        readonly type: PropType<import("#app").NuxtLinkProps["replace"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    ariaCurrentValue: {
-        readonly type: PropType<import("#app").NuxtLinkProps["ariaCurrentValue"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    external: {
-        readonly type: PropType<import("#app").NuxtLinkProps["external"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-}>>, {
-    size: ButtonSize;
-    type: string;
-    replace: boolean;
-    class: any;
-    truncate: boolean;
-    target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
-    to: any;
-    activeClass: string;
-    exactActiveClass: string;
-    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-    noRel: boolean;
-    prefetch: boolean;
-    noPrefetch: boolean;
-    prefetchedClass: string;
-    external: boolean;
-    leading: boolean;
-    color: ButtonColor;
-    variant: ButtonVariant;
-    disabled: boolean;
-    href: any;
-    rel: any;
-    label: string;
-    ui: {};
-    icon: string;
-    block: boolean;
-    square: boolean;
-    loading: boolean;
-    padded: boolean;
-    loadingIcon: string;
-    leadingIcon: string;
-    trailingIcon: string;
-    trailing: boolean;
-}, {}>;
-export default _default;