@nuxt/ui 2.18.3 → 3.0.0-alpha.0

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

@@ -1,231 +0,0 @@
-<template>
-  <div :class="ui.wrapper">
-    <textarea
-      :id="inputId"
-      ref="textarea"
-      :value="modelValue"
-      :name="name"
-      :rows="rows"
-      :required="required"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :class="textareaClass"
-      v-bind="attrs"
-      @input="onInput"
-      @blur="onBlur"
-      @change="onChange"
-    />
-
-    <slot />
-  </div>
-</template>
-
-<script>
-import { ref, computed, toRef, watch, onMounted, nextTick, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import { defu } from "defu";
-import { useUI } from "../../composables/useUI";
-import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig, looseToNumber } from "../../utils";
-import appConfig from "#build/app.config";
-import { textarea } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.textarea, textarea);
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
-    id: {
-      type: String,
-      default: null
-    },
-    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
-    },
-    maxrows: {
-      type: Number,
-      default: 0
-    },
-    autoresize: {
-      type: Boolean,
-      default: false
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    autofocusDelay: {
-      type: Number,
-      default: 100
-    },
-    resize: {
-      type: Boolean,
-      default: false
-    },
-    padded: {
-      type: Boolean,
-      default: true
-    },
-    size: {
-      type: String,
-      default: null,
-      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);
-      }
-    },
-    textareaClass: {
-      type: String,
-      default: null
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    },
-    modelModifiers: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["update:modelValue", "blur", "change"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("textarea", toRef(props, "ui"), config, toRef(props, "class"));
-    const { emitFormBlur, emitFormInput, inputId, color, size, name } = useFormGroup(props, config);
-    const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }));
-    const textarea2 = ref(null);
-    const autoFocus = () => {
-      if (props.autofocus) {
-        textarea2.value?.focus();
-      }
-    };
-    const autoResize = () => {
-      if (props.autoresize) {
-        if (!textarea2.value) {
-          return;
-        }
-        textarea2.value.rows = props.rows;
-        const styles = window.getComputedStyle(textarea2.value);
-        const paddingTop = parseInt(styles.paddingTop);
-        const paddingBottom = parseInt(styles.paddingBottom);
-        const padding = paddingTop + paddingBottom;
-        const lineHeight = parseInt(styles.lineHeight);
-        const { scrollHeight } = textarea2.value;
-        const newRows = (scrollHeight - padding) / lineHeight;
-        if (newRows > props.rows) {
-          textarea2.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows;
-        }
-      }
-    };
-    const updateInput = (value) => {
-      if (modelModifiers.value.trim) {
-        value = value.trim();
-      }
-      if (modelModifiers.value.number) {
-        value = looseToNumber(value);
-      }
-      emit("update:modelValue", value);
-      emitFormInput();
-    };
-    const onInput = (event) => {
-      autoResize();
-      if (!modelModifiers.value.lazy) {
-        updateInput(event.target.value);
-      }
-    };
-    const onChange = (event) => {
-      const value = event.target.value;
-      emit("change", value);
-      if (modelModifiers.value.lazy) {
-        updateInput(value);
-      }
-      if (modelModifiers.value.trim) {
-        event.target.value = value.trim();
-      }
-    };
-    const onBlur = (event) => {
-      emit("blur", event);
-      emitFormBlur();
-    };
-    onMounted(() => {
-      setTimeout(() => {
-        autoFocus();
-      }, props.autofocusDelay);
-    });
-    watch(() => props.modelValue, () => {
-      nextTick(autoResize);
-    });
-    onMounted(() => {
-      setTimeout(() => {
-        autoFocus();
-        autoResize();
-      }, 100);
-    });
-    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.form,
-        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 {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      // eslint-disable-next-line vue/no-dupe-keys
-      name,
-      inputId,
-      textarea: textarea2,
-      // eslint-disable-next-line vue/no-dupe-keys
-      textareaClass,
-      onInput,
-      onChange,
-      onBlur
-    };
-  }
-});
-</script>

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

@@ -1,436 +0,0 @@
-import type { PropType } from 'vue';
-import type { TextareaSize, TextareaColor, TextareaVariant, Strategy } from '../../types.js';
-declare const config: {
-    form: string;
-    default: {
-        size: string;
-        color: string;
-        variant: string;
-    };
-    wrapper: string;
-    base: string;
-    rounded: string;
-    placeholder: string;
-    file: {
-        base: 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;
-    };
-    leading: {
-        padding: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-    };
-    trailing: {
-        padding: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-    };
-    color: {
-        white: {
-            outline: string;
-        };
-        gray: {
-            outline: string;
-        };
-    };
-    variant: {
-        outline: string;
-        none: string;
-    };
-    icon: {
-        base: string;
-        color: string;
-        loading: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        leading: {
-            wrapper: string;
-            pointer: string;
-            padding: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-        };
-        trailing: {
-            wrapper: string;
-            pointer: string;
-            padding: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-        };
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    id: {
-        type: StringConstructor;
-        default: any;
-    };
-    name: {
-        type: StringConstructor;
-        default: any;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: any;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rows: {
-        type: NumberConstructor;
-        default: number;
-    };
-    maxrows: {
-        type: NumberConstructor;
-        default: number;
-    };
-    autoresize: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autofocus: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autofocusDelay: {
-        type: NumberConstructor;
-        default: number;
-    };
-    resize: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    padded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    size: {
-        type: PropType<TextareaSize>;
-        default: any;
-        validator(value: string): boolean;
-    };
-    color: {
-        type: PropType<TextareaColor>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    variant: {
-        type: PropType<TextareaVariant>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    textareaClass: {
-        type: StringConstructor;
-        default: any;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-    modelModifiers: {
-        type: PropType<{
-            trim?: boolean;
-            lazy?: boolean;
-            number?: boolean;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        form: string;
-        default: {
-            size: string;
-            color: string;
-            variant: string;
-        };
-        wrapper: string;
-        base: string;
-        rounded: string;
-        placeholder: string;
-        file: {
-            base: 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;
-        };
-        leading: {
-            padding: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-        };
-        trailing: {
-            padding: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-        };
-        color: {
-            white: {
-                outline: string;
-            };
-            gray: {
-                outline: string;
-            };
-        };
-        variant: {
-            outline: string;
-            none: string;
-        };
-        icon: {
-            base: string;
-            color: string;
-            loading: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-            leading: {
-                wrapper: string;
-                pointer: string;
-                padding: {
-                    '2xs': string;
-                    xs: string;
-                    sm: string;
-                    md: string;
-                    lg: string;
-                    xl: string;
-                };
-            };
-            trailing: {
-                wrapper: string;
-                pointer: string;
-                padding: {
-                    '2xs': string;
-                    xs: string;
-                    sm: string;
-                    md: string;
-                    lg: string;
-                    xl: string;
-                };
-            };
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    name: import("vue").ComputedRef<string>;
-    inputId: import("vue").ComputedRef<string>;
-    textarea: import("vue").Ref<HTMLTextAreaElement>;
-    textareaClass: import("vue").ComputedRef<string>;
-    onInput: (event: Event) => void;
-    onChange: (event: Event) => void;
-    onBlur: (event: FocusEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "update:modelValue")[], "blur" | "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    id: {
-        type: StringConstructor;
-        default: any;
-    };
-    name: {
-        type: StringConstructor;
-        default: any;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: any;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rows: {
-        type: NumberConstructor;
-        default: number;
-    };
-    maxrows: {
-        type: NumberConstructor;
-        default: number;
-    };
-    autoresize: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autofocus: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autofocusDelay: {
-        type: NumberConstructor;
-        default: number;
-    };
-    resize: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    padded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    size: {
-        type: PropType<TextareaSize>;
-        default: any;
-        validator(value: string): boolean;
-    };
-    color: {
-        type: PropType<TextareaColor>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    variant: {
-        type: PropType<TextareaVariant>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    textareaClass: {
-        type: StringConstructor;
-        default: any;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-    modelModifiers: {
-        type: PropType<{
-            trim?: boolean;
-            lazy?: boolean;
-            number?: boolean;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onBlur?: (...args: any[]) => any;
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-}, {
-    name: string;
-    size: TextareaSize;
-    required: boolean;
-    class: any;
-    resize: boolean;
-    color: TextareaColor;
-    variant: TextareaVariant;
-    disabled: boolean;
-    ui: {};
-    id: string;
-    modelValue: string | number;
-    padded: boolean;
-    rows: number;
-    placeholder: string;
-    autofocus: boolean;
-    autofocusDelay: number;
-    modelModifiers: {};
-    maxrows: number;
-    autoresize: boolean;
-    textareaClass: string;
-}, {}>;
-export default _default;