@nuxt/ui 0.4.0 → 2.8.0

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

@@ -0,0 +1,63 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    variant: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    label: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    badgeClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    variant: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    label: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    color: string;
+    ui: any;
+    label: string | number;
+    variant: string;
+    size: string;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,182 @@
+<template>
+  <ULink :type="type" :disabled="disabled || loading" :class="buttonClass" v-bind="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 ? 'text-left break-all line-clamp-1' : '']">
+        {{ 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 } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import ULink from "../elements/Link.vue";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  components: {
+    UIcon,
+    ULink
+  },
+  inheritAttrs: false,
+  props: {
+    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: () => appConfig.ui.button.default.size,
+      validator(value) {
+        return Object.keys(appConfig.ui.button.size).includes(value);
+      }
+    },
+    color: {
+      type: String,
+      default: () => appConfig.ui.button.default.color,
+      validator(value) {
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.button.color)].includes(value);
+      }
+    },
+    variant: {
+      type: String,
+      default: () => appConfig.ui.button.default.variant,
+      validator(value) {
+        return [
+          ...Object.keys(appConfig.ui.button.variant),
+          ...Object.values(appConfig.ui.button.color).flatMap((value2) => Object.keys(value2))
+        ].includes(value);
+      }
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loadingIcon: {
+      type: String,
+      default: () => appConfig.ui.button.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
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs, slots }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.button));
+    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,
+        ui.value.rounded,
+        ui.value.size[props.size],
+        ui.value.gap[props.size],
+        props.padded && ui.value[isSquare.value ? "square" : "padding"][props.size],
+        variant?.replaceAll("{color}", props.color),
+        props.block ? "w-full flex justify-center items-center" : "inline-flex items-center"
+      ), attrs.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[props.size],
+        props.loading && "animate-spin"
+      );
+    });
+    const trailingIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.base,
+        ui.value.icon.size[props.size],
+        props.loading && !isLeading.value && "animate-spin"
+      );
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      isLeading,
+      isTrailing,
+      isSquare,
+      buttonClass,
+      leadingIconName,
+      trailingIconName,
+      leadingIconClass,
+      trailingIconClass
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,187 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    padded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    variant: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    leadingIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    trailingIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    trailing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    leading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    truncate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    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 | undefined>;
+    trailingIconName: import("vue").ComputedRef<string | undefined>;
+    leadingIconClass: import("vue").ComputedRef<string>;
+    trailingIconClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    padded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    variant: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    leadingIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    trailingIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    trailing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    leading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    truncate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    icon: string;
+    color: string;
+    ui: any;
+    label: string;
+    type: string;
+    loading: boolean;
+    disabled: boolean;
+    variant: string;
+    size: string;
+    block: boolean;
+    padded: boolean;
+    loadingIcon: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    trailing: boolean;
+    leading: boolean;
+    square: boolean;
+    truncate: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/components/elements/ButtonGroup.d.ts

@@ -0,0 +1,39 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: StringConstructor;
+        default: null;
+        validator(value: string): boolean;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator(value: string): boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: StringConstructor;
+        default: null;
+        validator(value: string): boolean;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator(value: string): boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    size: string;
+    orientation: "horizontal" | "vertical";
+}, {}>;
+export default _default;

package/dist/runtime/components/elements/ButtonGroup.mjs

@@ -0,0 +1,70 @@
+import { h, cloneVNode, computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import { defuTwMerge, getSlotsChildren } from "../../utils/index.mjs";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: null,
+      validator(value) {
+        return Object.keys(appConfig.ui.button.size).includes(value);
+      }
+    },
+    orientation: {
+      type: String,
+      default: "horizontal",
+      validator(value) {
+        return ["horizontal", "vertical"].includes(value);
+      }
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs, slots }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.buttonGroup));
+    const children = computed(() => getSlotsChildren(slots));
+    const rounded = computed(() => {
+      const roundedMap = {
+        "rounded-none": { horizontal: { left: "rounded-s-none", right: "rounded-e-none" }, vertical: { top: "rounded-t-none", bottom: "rounded-b-none" } },
+        "rounded-sm": { horizontal: { left: "rounded-s-sm", right: "rounded-e-sm" }, vertical: { top: "rounded-t-sm", bottom: "rounded-b-sm" } },
+        rounded: { horizontal: { left: "rounded-s", right: "rounded-e" }, vertical: { top: "rounded-t", bottom: "rounded-b" } },
+        "rounded-md": { horizontal: { left: "rounded-s-md", right: "rounded-e-md" }, vertical: { top: "rounded-t-md", bottom: "rounded-b-md" } },
+        "rounded-lg": { horizontal: { left: "rounded-s-lg", right: "rounded-e-lg" }, vertical: { top: "rounded-t-lg", bottom: "rounded-b-lg" } },
+        "rounded-xl": { horizontal: { left: "rounded-s-xl", right: "rounded-e-xl" }, vertical: { top: "rounded-t-xl", bottom: "rounded-b-xl" } },
+        "rounded-2xl": { horizontal: { left: "rounded-s-2xl", right: "rounded-e-2xl" }, vertical: { top: "rounded-t-2xl", bottom: "rounded-b-2xl" } },
+        "rounded-3xl": { horizontal: { left: "rounded-s-3xl", right: "rounded-e-3xl" }, vertical: { top: "rounded-t-3xl", bottom: "rounded-b-3xl" } },
+        "rounded-full": { horizontal: { left: "rounded-s-full", right: "rounded-e-full" }, vertical: { top: "rounded-t-full", bottom: "rounded-b-full" } }
+      };
+      return roundedMap[ui.value.rounded][props.orientation];
+    });
+    const clones = computed(() => children.value.map((node, index) => {
+      const vProps = {};
+      if (props.orientation === "vertical") {
+        ui.value.wrapper = "flex flex-col -space-y-px";
+      } else {
+        ui.value.wrapper = "inline-flex -space-x-px";
+      }
+      if (props.size) {
+        vProps.size = props.size;
+      }
+      vProps.ui = node.props?.ui || {};
+      vProps.ui.rounded = "rounded-none";
+      vProps.ui.base = "!shadow-none";
+      if (index === 0) {
+        vProps.ui.rounded += ` ${rounded.value.left || rounded.value.top}`;
+      }
+      if (index === children.value.length - 1) {
+        vProps.ui.rounded += ` ${rounded.value.right || rounded.value.bottom}`;
+      }
+      return cloneVNode(node, vProps);
+    }));
+    return () => h("div", { class: twMerge(twJoin(ui.value.wrapper, ui.value.rounded, ui.value.shadow), attrs.class), ...omit(attrs, ["class"]) }, clones.value);
+  }
+});