@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/components/FormField.vue

@@ -0,0 +1,90 @@
+<script>
+import theme from "#build/ui/form-field";
+</script>
+
+<script setup>
+import { computed, ref, inject, provide, useId } from "vue";
+import { Primitive, Label } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { formFieldInjectionKey, inputIdInjectionKey } from "../composables/useFormField";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  errorPattern: { type: null, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  help: { type: String, required: false },
+  error: { type: [String, Boolean], required: false },
+  hint: { type: String, required: false },
+  size: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  eagerValidation: { type: Boolean, required: false },
+  validateOnInputDelay: { type: Number, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.formField || {} })({
+  size: props.size,
+  required: props.required
+}));
+const formErrors = inject("form-errors", null);
+const error = computed(() => props.error || formErrors?.value?.find((error2) => error2.name && (error2.name === props.name || props.errorPattern && error2.name.match(props.errorPattern)))?.message);
+const id = ref(useId());
+const ariaId = id.value;
+provide(inputIdInjectionKey, id);
+provide(formFieldInjectionKey, computed(() => ({
+  error: error.value,
+  name: props.name,
+  size: props.size,
+  eagerValidation: props.eagerValidation,
+  validateOnInputDelay: props.validateOnInputDelay,
+  errorPattern: props.errorPattern,
+  hint: props.hint,
+  description: props.description,
+  help: props.help,
+  ariaId
+})));
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
+          <slot name="label" :label="label">
+            {{ label }}
+          </slot>
+        </Label>
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
+          <slot name="hint" :hint="hint">
+            {{ hint }}
+          </slot>
+        </span>
+      </div>
+
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+
+    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
+      <slot :error="error" />
+
+      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </div>
+      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+        <slot name="help" :help="help">
+          {{ help }}
+        </slot>
+      </div>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/FormField.vue.d.ts

@@ -0,0 +1,61 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/form-field';
+import type { ComponentConfig } from '../types/utils';
+type FormField = ComponentConfig<typeof theme, AppConfig, 'formField'>;
+export interface FormFieldProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** The name of the FormField. Also used to match form errors. */
+    name?: string;
+    /** A regular expression to match form error names. */
+    errorPattern?: RegExp;
+    label?: string;
+    description?: string;
+    help?: string;
+    error?: string | boolean;
+    hint?: string;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: FormField['variants']['size'];
+    required?: boolean;
+    /** If true, validation on input will be active immediately instead of waiting for a blur event. */
+    eagerValidation?: boolean;
+    /**
+     * Delay in milliseconds before validating the form on input events.
+     * @defaultValue `300`
+     */
+    validateOnInputDelay?: number;
+    class?: any;
+    ui?: FormField['slots'];
+}
+export interface FormFieldSlots {
+    label(props: {
+        label?: string;
+    }): any;
+    hint(props: {
+        hint?: string;
+    }): any;
+    description(props: {
+        description?: string;
+    }): any;
+    help(props: {
+        help?: string;
+    }): any;
+    error(props: {
+        error?: string | boolean;
+    }): any;
+    default(props: {
+        error?: string | boolean;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Icon.vue

@@ -0,0 +1,19 @@
+<script>
+
+</script>
+
+<script setup>
+import { useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+const props = defineProps({
+  name: { type: String, required: true },
+  mode: { type: String, required: false },
+  size: { type: [String, Number], required: false },
+  customize: { type: Function, required: false }
+});
+const iconProps = useForwardProps(reactivePick(props, "name", "mode", "size", "customize"));
+</script>
+
+<template>
+  <Icon v-bind="iconProps" />
+</template>

package/dist/runtime/components/Icon.vue.d.ts

@@ -0,0 +1,8 @@
+export interface IconProps {
+    name: string;
+    mode?: 'svg' | 'css';
+    size?: string | number;
+    customize?: (content: string, name?: string, prefix?: string, provider?: string) => string;
+}
+declare const _default: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Input.vue

@@ -0,0 +1,147 @@
+<script>
+import theme from "#build/ui/input";
+</script>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useButtonGroup } from "../composables/useButtonGroup";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFormField } from "../composables/useFormField";
+import { looseToNumber } from "../utils";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  type: { type: null, required: false, default: "text" },
+  placeholder: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  autocomplete: { type: null, required: false, default: "off" },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  disabled: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  modelModifiers: { type: Object, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  icon: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: String, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: String, required: false }
+});
+const emits = defineEmits(["update:modelValue", "blur", "change"]);
+const slots = defineSlots();
+const [modelValue, modelModifiers] = defineModel({ type: null });
+const appConfig = useAppConfig();
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
+const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} })({
+  type: props.type,
+  color: color.value,
+  variant: props.variant,
+  size: inputSize?.value,
+  loading: props.loading,
+  highlight: highlight.value,
+  leading: isLeading.value || !!props.avatar || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing,
+  buttonGroup: orientation.value
+}));
+const inputRef = ref(null);
+function updateInput(value) {
+  if (modelModifiers.trim) {
+    value = value?.trim() ?? null;
+  }
+  if (modelModifiers.number || props.type === "number") {
+    value = looseToNumber(value);
+  }
+  if (modelModifiers.nullify) {
+    value ||= null;
+  }
+  modelValue.value = value;
+  emitFormInput();
+}
+function onInput(event) {
+  if (!modelModifiers.lazy) {
+    updateInput(event.target.value);
+  }
+}
+function onChange(event) {
+  const value = event.target.value;
+  if (modelModifiers.lazy) {
+    updateInput(value);
+  }
+  if (modelModifiers.trim) {
+    event.target.value = value.trim();
+  }
+  emitFormChange();
+  emits("change", event);
+}
+function onBlur(event) {
+  emitFormBlur();
+  emits("blur", event);
+}
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.focus();
+  }
+}
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus();
+  }, props.autofocusDelay);
+});
+defineExpose({
+  inputRef
+});
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <input
+      :id="id"
+      ref="inputRef"
+      :type="type"
+      :value="modelValue"
+      :name="name"
+      :placeholder="placeholder"
+      :class="ui.base({ class: props.ui?.base })"
+      :disabled="disabled"
+      :required="required"
+      :autocomplete="autocomplete"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="emitFormFocus"
+    >
+
+    <slot />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </Primitive>
+</template>

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

@@ -0,0 +1,77 @@
+import type { InputHTMLAttributes } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/input';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { AcceptableValue, ComponentConfig } from '../types/utils';
+type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
+export interface InputProps extends UseComponentIconsProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    id?: string;
+    name?: string;
+    type?: InputHTMLAttributes['type'];
+    /** The placeholder text when the input is empty. */
+    placeholder?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Input['variants']['color'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: Input['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Input['variants']['size'];
+    required?: boolean;
+    autocomplete?: InputHTMLAttributes['autocomplete'];
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    disabled?: boolean;
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    modelModifiers?: {
+        string?: boolean;
+        number?: boolean;
+        trim?: boolean;
+        lazy?: boolean;
+        nullify?: boolean;
+    };
+    class?: any;
+    ui?: Input['slots'];
+}
+export interface InputEmits<T extends AcceptableValue = AcceptableValue> {
+    (e: 'update:modelValue', payload: T): void;
+    (e: 'blur', event: FocusEvent): void;
+    (e: 'change', event: Event): void;
+}
+export interface InputSlots {
+    leading(props?: {}): any;
+    default(props?: {}): any;
+    trailing(props?: {}): any;
+}
+declare const _default: <T extends AcceptableValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & (InputProps & {
+        modelValue?: T;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    }>): void;
+    attrs: any;
+    slots: InputSlots;
+    emit: InputEmits<T> & ((evt: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};