@eslamdevui/ui 3.2.0 → 3.2.1

package/.nuxt/ui/user.ts

@@ -0,0 +1,106 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+const size = [
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative group/user",
+    "wrapper": "",
+    "name": "font-medium",
+    "description": "text-muted",
+    "avatar": "shrink-0"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "root": "flex items-center"
+      },
+      "vertical": {
+        "root": "flex flex-col"
+      }
+    },
+    "to": {
+      "true": {
+        "name": [
+          "text-default peer-hover:text-highlighted",
+          "transition-colors"
+        ],
+        "description": [
+          "peer-hover:text-toned",
+          "transition-colors"
+        ],
+        "avatar": "transform transition-transform duration-200 group-hover/user:scale-115"
+      },
+      "false": {
+        "name": "text-highlighted",
+        "description": ""
+      }
+    },
+    "size": {
+      "3xs": {
+        "root": "gap-1",
+        "wrapper": "flex items-center gap-1",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "2xs": {
+        "root": "gap-1.5",
+        "wrapper": "flex items-center gap-1.5",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "xs": {
+        "root": "gap-1.5",
+        "wrapper": "flex items-center gap-1.5",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "sm": {
+        "root": "gap-2",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "md": {
+        "root": "gap-2",
+        "name": "text-sm",
+        "description": "text-xs"
+      },
+      "lg": {
+        "root": "gap-2.5",
+        "name": "text-sm",
+        "description": "text-sm"
+      },
+      "xl": {
+        "root": "gap-2.5",
+        "name": "text-base",
+        "description": "text-sm"
+      },
+      "2xl": {
+        "root": "gap-3",
+        "name": "text-base",
+        "description": "text-base"
+      },
+      "3xl": {
+        "root": "gap-3",
+        "name": "text-lg",
+        "description": "text-base"
+      }
+    }
+  },
+  "defaultVariants": {
+    "size": "md" as typeof size[number]
+  }
+}

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslamdevui/ui",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.DQZ75GCP.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.DErCA3YU.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -8,7 +8,7 @@ import 'tailwindcss/colors';
 import 'knitwork';
 
 const name = "@eslamdevui/ui";
-const version = "3.2.0";
+const version = "3.2.1";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/AuthForm.vue

@@ -0,0 +1,195 @@
+<script>
+import theme from "#build/ui/auth-form";
+</script>
+
+<script setup>
+import { reactive, ref, computed, useTemplateRef } from "vue";
+import { Primitive } from "reka-ui";
+import { omit } from "../utils";
+import { useAppConfig } from "#imports";
+import { useLocalePro } from "../composables/useLocalePro";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  icon: { type: String, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  fields: { type: Array, required: false },
+  providers: { type: Array, required: false },
+  separator: { type: [String, Object], required: false, default: "or" },
+  submit: { type: Object, required: false },
+  schema: { type: null, required: false },
+  validate: { type: Function, required: false },
+  validateOn: { type: Array, required: false },
+  validateOnInputDelay: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false, default: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emits = defineEmits(["submit"]);
+const slots = defineSlots();
+const { t } = useLocalePro();
+const appConfig = useAppConfig();
+const formRef = useTemplateRef("formRef");
+const passwordVisibility = ref(false);
+const state = reactive({});
+props.fields?.forEach((f) => {
+  state[f.name] = f.defaultValue;
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.authForm || {} })());
+defineExpose({ formRef, state });
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="icon || !!slots.icon || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header">
+        <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+          <slot name="leading">
+            <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          </slot>
+        </div>
+
+        <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+
+        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </div>
+      </slot>
+    </div>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <div v-if="providers?.length || !!slots.providers" :class="ui.providers({ class: props.ui?.providers })">
+        <slot name="providers">
+          <UButton
+            v-for="(provider, index) in providers"
+            :key="index"
+            block
+            color="neutral"
+            variant="subtle"
+            v-bind="provider"
+          />
+        </slot>
+      </div>
+
+      <USeparator
+        v-if="providers?.length && fields?.length"
+        v-bind="typeof separator === 'object' ? separator : { label: separator }"
+        :class="ui.separator({ class: props.ui?.separator })"
+      />
+
+      <UForm
+        v-if="fields?.length"
+        ref="formRef"
+        :state="state"
+        :schema="schema"
+        :validate="validate"
+        :validate-on="validateOn"
+        :class="ui.form({ class: props.ui?.form })"
+        :disabled="disabled"
+        @submit="emits('submit', $event)"
+      >
+        <UFormField
+          v-for="field in fields"
+          :key="field.name"
+          :label="field.type === 'checkbox' ? '' : field.label ?? ''"
+          :description="field.description"
+          :help="field.help"
+          :hint="field.hint"
+          :name="field.name"
+          :size="field.size"
+          :required="field.required"
+        >
+          <slot :name="`${field.name}-field`" v-bind="{ state, field }">
+            <UCheckbox
+              v-if="field.type === 'checkbox'"
+              v-model="state[field.name]"
+              :class="ui.checkbox({ class: props.ui?.checkbox })"
+              v-bind="omit(field, ['description', 'help', 'hint', 'size'])"
+            />
+            <USelectMenu
+              v-else-if="field.type === 'select'"
+              v-model="state[field.name]"
+              :class="ui.select({ class: props.ui?.select })"
+              v-bind="omit(field, ['description', 'help', 'hint', 'size'])"
+            />
+            <UInput
+              v-else-if="field.type === 'password'"
+              v-model="state[field.name]"
+              :class="ui.password({ class: props.ui?.password })"
+              :type="passwordVisibility ? 'text' : 'password'"
+              v-bind="omit(field, ['label', 'description', 'help', 'hint', 'size', 'type', 'required', 'defaultValue'])"
+              :ui="{ root: 'w-full' }"
+            >
+              <template #trailing>
+                <UButton
+                  color="neutral"
+                  variant="link"
+                  size="sm"
+                  :icon="passwordVisibility ? appConfig.ui.icons.eyeOff : appConfig.ui.icons.eye"
+                  :aria-label="passwordVisibility ? t('authForm.hidePassword') : t('authForm.showPassword')"
+                  :aria-pressed="passwordVisibility"
+                  aria-controls="password"
+                  @click="passwordVisibility = !passwordVisibility"
+                />
+              </template>
+            </UInput>
+            <UPinInput
+              v-else-if="field.type === 'otp'"
+              :id="field.name"
+              v-model="state[field.name]"
+              :class="ui.otp({ class: props.ui?.otp })"
+              otp
+              v-bind="field.otp"
+            />
+            <UInput
+              v-else
+              v-model="state[field.name]"
+              :class="ui.input({ class: props.ui?.input })"
+              v-bind="omit(field, ['label', 'description', 'help', 'hint', 'size', 'required', 'defaultValue'])"
+            />
+          </slot>
+
+          <template v-if="!!slots[`${field.name}-label`]" #label>
+            <slot :name="`${field.name}-label`" />
+          </template>
+          <template v-if="!!slots[`${field.name}-description`]" #description>
+            <slot :name="`${field.name}-description`" />
+          </template>
+          <template v-if="!!slots[`${field.name}-hint`]" #hint>
+            <slot :name="`${field.name}-hint`" />
+          </template>
+          <template v-if="!!slots[`${field.name}-help`]" #help>
+            <slot :name="`${field.name}-help`" />
+          </template>
+          <template v-if="!!slots[`${field.name}-error`]" #error>
+            <slot :name="`${field.name}-error`" />
+          </template>
+        </UFormField>
+
+        <slot v-if="!!slots.validation" name="validation" />
+
+        <slot name="submit" :loading="loading">
+          <UButton
+            type="submit"
+            :label="t('authForm.submit')"
+            block
+            :loading="loading"
+            v-bind="submit"
+          />
+        </slot>
+      </UForm>
+    </div>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,85 @@
+import theme from '#build/ui/auth-form';
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, FormProps, FormFieldProps, FormSchema, FormSubmitEvent, SeparatorProps, ComponentConfig, PinInputProps } from '../types';
+type AuthForm = ComponentConfig<typeof theme, AppConfig, 'authForm'>;
+type AuthFormField = FormFieldProps & {
+    name: string;
+    type?: 'checkbox' | 'select' | 'password' | 'text' | 'otp';
+    defaultValue?: any;
+    otp?: PinInputProps;
+};
+export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed above the title.
+     * @IconifyIcon
+     */
+    icon?: string;
+    title?: string;
+    description?: string;
+    fields?: F[];
+    /**
+     * Display a list of Button under the description.
+     * `{ color: 'neutral', variant: 'subtle', block: true }`{lang="ts-type"}
+     */
+    providers?: ButtonProps[];
+    /**
+     * The text displayed in the separator.
+     * @defaultValue 'or'
+     */
+    separator?: string | SeparatorProps;
+    /**
+     * Display a submit button at the bottom of the form.
+     * `{ label: 'Continue', block: true }`{lang="ts-type"}
+     */
+    submit?: ButtonProps;
+    schema?: T;
+    validate?: FormProps<T>['validate'];
+    validateOn?: FormProps<T>['validateOn'];
+    validateOnInputDelay?: FormProps<T>['validateOnInputDelay'];
+    disabled?: FormProps<T>['disabled'];
+    loading?: ButtonProps['loading'];
+    class?: any;
+    ui?: AuthForm['slots'];
+}
+export type AuthFormEmits<T extends object> = {
+    submit: [payload: FormSubmitEvent<T>];
+};
+type DynamicFieldSlots<T, F, SlotProps = {
+    field: F;
+    state: T;
+}> = Record<string, (props: SlotProps) => any> & Record<`${keyof T extends string ? keyof T : never}-field`, (props: SlotProps) => any>;
+type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
+export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
+    header(props?: {}): any;
+    leading(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    providers(props?: {}): any;
+    validation(props?: {}): any;
+    submit(props: {
+        loading: boolean;
+    }): any;
+    footer(props?: {}): any;
+} & DynamicFieldSlots<T, F> & DynamicFormFieldSlots<T>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AuthFormProps<FormSchema<object>, AuthFormField>, {
+    formRef: Readonly<import("vue").ShallowRef<any>>;
+    state: Record<string, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (payload: FormSubmitEvent<any>) => any;
+}, string, import("vue").PublicProps, Readonly<AuthFormProps<FormSchema<object>, AuthFormField>> & Readonly<{
+    onSubmit?: ((payload: FormSubmitEvent<any>) => any) | undefined;
+}>, {
+    loading: boolean;
+    separator: string | SeparatorProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AuthFormSlots<object, AuthFormField>>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Banner.vue

@@ -0,0 +1,113 @@
+<script>
+import theme from "#build/ui/banner";
+</script>
+
+<script setup>
+import { computed, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { useHead, useAppConfig } from "#imports";
+import { useLocalePro } from "../composables/useLocalePro";
+import { tv } from "../utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  icon: { type: String, required: false },
+  title: { type: String, required: false },
+  actions: { type: Array, required: false },
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  color: { type: null, required: false },
+  close: { type: [Boolean, Object], required: false },
+  closeIcon: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const emits = defineEmits(["close"]);
+const { t } = useLocalePro();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.banner || {} })({
+  color: props.color,
+  to: !!props.to
+}));
+const id = computed(() => `banner-${props.id || "1"}`);
+watch(id, (newId) => {
+  if (typeof document === "undefined" || typeof localStorage === "undefined") return;
+  const isClosed = localStorage.getItem(newId) === "true";
+  const htmlElement = document.querySelector("html");
+  htmlElement?.classList.toggle("hide-banner", isClosed);
+});
+useHead({
+  script: [{
+    key: "prehydrate-template-banner",
+    innerHTML: `
+            if (localStorage.getItem('${id.value}') === 'true') {
+              document.querySelector('html').classList.add('hide-banner')
+            }`.replace(/\s+/g, " "),
+    type: "text/javascript"
+  }]
+});
+function onClose() {
+  localStorage.setItem(id.value, "true");
+  document.querySelector("html")?.classList.add("hide-banner");
+  emits("close");
+}
+</script>
+
+<template>
+  <Primitive :as="as" class="banner" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ULink
+      v-if="to"
+      :aria-label="title"
+      v-bind="{ to, target, ...$attrs }"
+      class="focus:outline-none"
+      tabindex="-1"
+      raw
+    >
+      <span class="absolute inset-0 " aria-hidden="true" />
+    </ULink>
+
+    <UContainer :class="ui.container({ class: props.ui?.container })">
+      <div :class="ui.left({ class: props.ui?.left })" />
+
+      <div :class="ui.center({ class: props.ui?.center })">
+        <slot name="leading">
+          <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+        </slot>
+
+        <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+
+        <div v-if="actions?.length" :class="ui.actions({ class: props.ui?.actions })">
+          <slot name="actions">
+            <UButton v-for="(action, index) in actions" :key="index" color="neutral" size="xs" v-bind="action" />
+          </slot>
+        </div>
+      </div>
+
+      <div :class="ui.right({ class: props.ui?.right })">
+        <slot name="close" :ui="ui">
+          <UButton
+            v-if="close"
+            :icon="closeIcon || appConfig.ui.icons.close"
+            size="md"
+            color="neutral"
+            variant="ghost"
+            :aria-label="t('banner.close')"
+            v-bind="typeof close === 'object' ? close : {}"
+            :class="ui.close({ class: props.ui?.close })"
+            @click="onClose"
+          />
+        </slot>
+      </div>
+    </UContainer>
+  </Primitive>
+</template>
+
+<style scoped>
+.hide-banner .banner{display:none}
+</style>

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

@@ -0,0 +1,68 @@
+import theme from '#build/ui/banner';
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, LinkProps, ComponentConfig } from '../types';
+type Banner = ComponentConfig<typeof theme, AppConfig, 'banner'>;
+export interface BannerProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * A unique id saved to local storage to remember if the banner has been dismissed.
+     * Change this value to show the banner again.
+     * @defaultValue '1'
+     */
+    id?: string;
+    /**
+     * The icon displayed next to the title.
+     * @IconifyIcon
+     */
+    icon?: string;
+    title?: string;
+    /**
+     * Display a list of actions next to the title.
+     * `{ color: 'neutral', size: 'xs' }`{lang="ts-type"}
+     */
+    actions?: ButtonProps[];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Banner['variants']['color'];
+    /**
+     * Display a close button to dismiss the banner.
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @emits `close`
+     * @defaultValue false
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: string;
+    class?: any;
+    ui?: Banner['slots'];
+}
+export interface BannerSlots {
+    leading(props?: {}): any;
+    title(props?: {}): any;
+    actions(props?: {}): any;
+    close(props: {
+        ui: any;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<BannerProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BannerSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};