@nuxt/ui 0.4.1 → 2.8.1

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

@@ -0,0 +1,250 @@
+<template>
+  <div :class="wrapperClass">
+    <input
+      ref="input"
+      :name="name"
+      :value="modelValue"
+      :type="type"
+      :required="required"
+      :placeholder="placeholder"
+      :disabled="disabled || loading"
+      class="form-input"
+      :class="inputClass"
+      v-bind="attrs"
+      @input="onInput"
+      @blur="onBlur"
+    >
+    <slot />
+
+    <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
+      <slot name="leading" :disabled="disabled" :loading="loading">
+        <UIcon :name="leadingIconName" :class="leadingIconClass" />
+      </slot>
+    </span>
+
+    <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
+      <slot name="trailing" :disabled="disabled" :loading="loading">
+        <UIcon :name="trailingIconName" :class="trailingIconClass" />
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import { defuTwMerge } from "../../utils";
+import { useFormGroup } from "../../composables/useFormGroup";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  components: {
+    UIcon
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "text"
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loadingIcon: {
+      type: String,
+      default: () => appConfig.ui.input.default.loadingIcon
+    },
+    leadingIcon: {
+      type: String,
+      default: null
+    },
+    trailingIcon: {
+      type: String,
+      default: null
+    },
+    trailing: {
+      type: Boolean,
+      default: false
+    },
+    leading: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    padded: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      default: () => appConfig.ui.input.default.size,
+      validator(value) {
+        return Object.keys(appConfig.ui.input.size).includes(value);
+      }
+    },
+    color: {
+      type: String,
+      default: () => appConfig.ui.input.default.color,
+      validator(value) {
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.input.color)].includes(value);
+      }
+    },
+    variant: {
+      type: String,
+      default: () => appConfig.ui.input.default.variant,
+      validator(value) {
+        return [
+          ...Object.keys(appConfig.ui.input.variant),
+          ...Object.values(appConfig.ui.input.color).flatMap((value2) => Object.keys(value2))
+        ].includes(value);
+      }
+    },
+    inputClass: {
+      type: String,
+      default: null
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(props, { emit, attrs, slots }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.input));
+    const { emitFormBlur, emitFormInput, formGroup } = useFormGroup();
+    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
+    const size = computed(() => formGroup?.size?.value ?? props.size);
+    const input = ref(null);
+    const autoFocus = () => {
+      if (props.autofocus) {
+        input.value?.focus();
+      }
+    };
+    const onInput = (event) => {
+      emit("update:modelValue", event.target.value);
+      emitFormInput();
+    };
+    const onBlur = (event) => {
+      emitFormBlur();
+      emit("blur", event);
+    };
+    onMounted(() => {
+      setTimeout(() => {
+        autoFocus();
+      }, 100);
+    });
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    const inputClass = 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),
+        (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
+      ), props.inputClass);
+    });
+    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 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 leadingWrapperIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.leading.wrapper,
+        ui.value.icon.leading.pointer,
+        ui.value.icon.leading.padding[size.value]
+      );
+    });
+    const leadingIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.base,
+        appConfig2.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        ui.value.icon.size[size.value],
+        props.loading && "animate-spin"
+      );
+    });
+    const trailingWrapperIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.trailing.wrapper,
+        ui.value.icon.trailing.pointer,
+        ui.value.icon.trailing.padding[size.value]
+      );
+    });
+    const trailingIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.base,
+        appConfig2.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        ui.value.icon.size[size.value],
+        props.loading && !isLeading.value && "animate-spin"
+      );
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      input,
+      isLeading,
+      isTrailing,
+      wrapperClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      inputClass,
+      leadingIconName,
+      leadingIconClass,
+      leadingWrapperIconClass,
+      trailingIconName,
+      trailingIconClass,
+      trailingWrapperIconClass,
+      onInput,
+      onBlur
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,214 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: 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;
+    };
+    loading: {
+        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;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    input: import("vue").Ref<HTMLInputElement | null>;
+    isLeading: import("vue").ComputedRef<string | true>;
+    isTrailing: import("vue").ComputedRef<string | true>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    inputClass: 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>;
+    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;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: 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;
+    };
+    loading: {
+        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;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}, {
+    icon: string;
+    color: string;
+    ui: any;
+    name: string;
+    type: string;
+    modelValue: string | number;
+    loading: boolean;
+    disabled: boolean;
+    variant: string;
+    required: boolean;
+    size: string;
+    placeholder: string;
+    padded: boolean;
+    loadingIcon: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    trailing: boolean;
+    leading: boolean;
+    autofocus: boolean;
+    inputClass: string;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,122 @@
+<template>
+  <div :class="wrapperClass">
+    <div class="flex items-center h-5">
+      <input
+        :id="`${name}-${value}`"
+        v-model="pick"
+        :name="name"
+        :required="required"
+        :value="value"
+        :disabled="disabled"
+        type="radio"
+        class="form-radio"
+        :class="inputClass"
+        v-bind="attrs"
+      >
+    </div>
+    <div v-if="label || $slots.label" class="ms-3 text-sm">
+      <label :for="`${name}-${value}`" :class="ui.label">
+        <slot name="label">{{ label }}</slot>
+        <span v-if="required" :class="ui.required">*</span>
+      </label>
+      <p v-if="help" :class="ui.help">
+        {{ help }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, 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: {
+    value: {
+      type: [String, Number, Boolean],
+      default: null
+    },
+    modelValue: {
+      type: [String, Number, Boolean, Object],
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: () => appConfig.ui.radio.default.color,
+      validator(value) {
+        return appConfig.ui.colors.includes(value);
+      }
+    },
+    inputClass: {
+      type: String,
+      default: null
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.radio));
+    const { emitFormChange, formGroup } = useFormGroup();
+    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
+    const pick = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+        if (value) {
+          emitFormChange();
+        }
+      }
+    });
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    const inputClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.background,
+        ui.value.border,
+        ui.value.ring.replaceAll("{color}", color.value),
+        ui.value.color.replaceAll("{color}", color.value)
+      ), props.inputClass);
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      pick,
+      wrapperClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      inputClass
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,109 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    modelValue: {
+        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    help: {
+        type: StringConstructor;
+        default: null;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): any;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    pick: import("vue").WritableComputedRef<string | number | boolean | Record<string, any>>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    inputClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    modelValue: {
+        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    help: {
+        type: StringConstructor;
+        default: null;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): any;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: string;
+    ui: any;
+    name: string;
+    value: string | number | boolean;
+    label: string;
+    modelValue: string | number | boolean | Record<string, any>;
+    disabled: boolean;
+    required: boolean;
+    help: string;
+    inputClass: string;
+}, {}>;
+export default _default;