@nuxt/ui 0.4.0 → 2.8.0

package/dist/runtime/components/forms/SelectMenu.vue.d.ts

@@ -0,0 +1,330 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { PopperOptions } from '../../types/popper';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    by: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<string[] | {
+            [key: string]: any;
+            disabled?: boolean | undefined;
+        }[]>;
+        default: () => never[];
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    leadingIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    trailingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    trailing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    leading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectedIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchable: {
+        type: PropType<boolean | ((query: string) => Promise<any[]> | any[])>;
+        default: boolean;
+    };
+    searchablePlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    creatable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    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;
+    };
+    optionAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueAttribute: {
+        type: StringConstructor;
+        default: null;
+    };
+    searchAttributes: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    selectClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+    uiMenu: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    uiMenu: import("vue").ComputedRef<any>;
+    trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    isLeading: import("vue").ComputedRef<string | true>;
+    isTrailing: import("vue").ComputedRef<string | true | undefined>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    selectClass: import("vue").ComputedRef<string>;
+    leadingIconName: import("vue").ComputedRef<string | undefined>;
+    leadingIconClass: import("vue").ComputedRef<string>;
+    leadingWrapperIconClass: import("vue").ComputedRef<string>;
+    trailingIconName: import("vue").ComputedRef<string | undefined>;
+    trailingIconClass: import("vue").ComputedRef<string>;
+    trailingWrapperIconClass: import("vue").ComputedRef<string>;
+    filteredOptions: import("vue").Ref<any[]>;
+    queryOption: import("vue").ComputedRef<{
+        [x: string]: string;
+    } | null>;
+    query: import("vue").Ref<string>;
+    onUpdate: (event: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "open" | "update:modelValue")[], "change" | "close" | "open" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    by: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<string[] | {
+            [key: string]: any;
+            disabled?: boolean | undefined;
+        }[]>;
+        default: () => never[];
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    leadingIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    trailingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    trailing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    leading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectedIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchable: {
+        type: PropType<boolean | ((query: string) => Promise<any[]> | any[])>;
+        default: boolean;
+    };
+    searchablePlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    creatable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    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;
+    };
+    optionAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueAttribute: {
+        type: StringConstructor;
+        default: null;
+    };
+    searchAttributes: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    selectClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+    uiMenu: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    icon: string;
+    color: string;
+    ui: any;
+    name: string;
+    options: string[] | {
+        [key: string]: any;
+        disabled?: boolean | undefined;
+    }[];
+    popper: PopperOptions;
+    modelValue: string | number | unknown[] | Record<string, any>;
+    by: string;
+    loading: boolean;
+    disabled: boolean;
+    multiple: boolean;
+    variant: string;
+    required: boolean;
+    size: string;
+    placeholder: string;
+    padded: boolean;
+    loadingIcon: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    trailing: boolean;
+    leading: boolean;
+    optionAttribute: string;
+    valueAttribute: string;
+    selectClass: string;
+    selectedIcon: string;
+    searchable: boolean | ((query: string) => Promise<any[]> | any[]);
+    searchablePlaceholder: string;
+    debounce: number;
+    creatable: boolean;
+    searchAttributes: unknown[];
+    uiMenu: any;
+}, {}>;
+export default _default;

package/dist/runtime/components/forms/Textarea.vue

@@ -0,0 +1,184 @@
+<template>
+  <div :class="wrapperClass">
+    <textarea
+      ref="textarea"
+      :value="modelValue"
+      :name="name"
+      :rows="rows"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      class="form-textarea"
+      :class="textareaClass"
+      v-bind="attrs"
+      @input="onInput"
+      @blur="onBlur"
+    />
+  </div>
+</template>
+
+<script>
+import { ref, computed, watch, onMounted, nextTick, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import { defuTwMerge } from "../../utils";
+import { useFormGroup } from "../../composables/useFormGroup";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    rows: {
+      type: Number,
+      default: 3
+    },
+    autoresize: {
+      type: Boolean,
+      default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    resize: {
+      type: Boolean,
+      default: false
+    },
+    padded: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      default: () => appConfig.ui.textarea.default.size,
+      validator(value) {
+        return Object.keys(appConfig.ui.textarea.size).includes(value);
+      }
+    },
+    color: {
+      type: String,
+      default: () => appConfig.ui.textarea.default.color,
+      validator(value) {
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.textarea.color)].includes(value);
+      }
+    },
+    variant: {
+      type: String,
+      default: () => appConfig.ui.textarea.default.variant,
+      validator(value) {
+        return [
+          ...Object.keys(appConfig.ui.textarea.variant),
+          ...Object.values(appConfig.ui.textarea.color).flatMap((value2) => Object.keys(value2))
+        ].includes(value);
+      }
+    },
+    textareaClass: {
+      type: String,
+      default: null
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(props, { emit, attrs }) {
+    const textarea = ref(null);
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.textarea));
+    const { emitFormBlur, emitFormInput, formGroup } = useFormGroup();
+    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
+    const size = computed(() => formGroup?.size?.value ?? props.size);
+    const autoFocus = () => {
+      if (props.autofocus) {
+        textarea.value?.focus();
+      }
+    };
+    const autoResize = () => {
+      if (props.autoresize) {
+        if (!textarea.value) {
+          return;
+        }
+        textarea.value.rows = props.rows;
+        const styles = window.getComputedStyle(textarea.value);
+        const paddingTop = parseInt(styles.paddingTop);
+        const paddingBottom = parseInt(styles.paddingBottom);
+        const padding = paddingTop + paddingBottom;
+        const lineHeight = parseInt(styles.lineHeight);
+        const { scrollHeight } = textarea.value;
+        const newRows = (scrollHeight - padding) / lineHeight;
+        if (newRows > props.rows) {
+          textarea.value.rows = newRows;
+        }
+      }
+    };
+    const onInput = (event) => {
+      autoResize();
+      emit("update:modelValue", event.target.value);
+      emitFormInput();
+    };
+    const onBlur = (event) => {
+      emit("blur", event);
+      emitFormBlur();
+    };
+    onMounted(() => {
+      setTimeout(() => {
+        autoFocus();
+      }, 100);
+    });
+    watch(() => props.modelValue, () => {
+      nextTick(autoResize);
+    });
+    onMounted(() => {
+      setTimeout(() => {
+        autoFocus();
+        autoResize();
+      }, 100);
+    });
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    const textareaClass = computed(() => {
+      const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.rounded,
+        ui.value.placeholder,
+        ui.value.size[size.value],
+        props.padded ? ui.value.padding[size.value] : "p-0",
+        variant?.replaceAll("{color}", color.value),
+        !props.resize && "resize-none"
+      ), props.textareaClass);
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      textarea,
+      wrapperClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      textareaClass,
+      onInput,
+      onBlur
+    };
+  }
+});
+</script>

package/dist/runtime/components/forms/Textarea.vue.d.ts

@@ -0,0 +1,161 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoresize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resize: {
+        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;
+    };
+    textareaClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    textarea: import("vue").Ref<HTMLTextAreaElement | null>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    textareaClass: import("vue").ComputedRef<string>;
+    onInput: (event: InputEvent) => void;
+    onBlur: (event: FocusEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoresize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resize: {
+        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;
+    };
+    textareaClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}, {
+    resize: boolean;
+    color: string;
+    ui: any;
+    name: string;
+    modelValue: string | number;
+    rows: number;
+    disabled: boolean;
+    variant: string;
+    required: boolean;
+    size: string;
+    placeholder: string;
+    padded: boolean;
+    autofocus: boolean;
+    autoresize: boolean;
+    textareaClass: string;
+}, {}>;
+export default _default;