@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

package/dist/runtime/components/Alert.vue

@@ -39,50 +39,50 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} }
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <slot name="leading">
-      <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
-      <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-    </slot>
-
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <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>
-
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="ui.actions({ class: props.ui?.actions })">
-        <slot name="actions">
-          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
-        </slot>
-      </div>
-    </div>
-
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
-      <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
-        <slot name="actions">
-          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
-        </slot>
-      </template>
-
-      <slot name="close" :ui="ui">
-        <UButton
-          v-if="close"
-          :icon="closeIcon || appConfig.ui.icons.close"
-          color="neutral"
-          variant="link"
-          :aria-label="t('alert.close')"
-          v-bind="typeof close === 'object' ? close : {}"
-          :class="ui.close({ class: props.ui?.close })"
-          @click="emits('update:open', false)"
-        />
-      </slot>
-    </div>
-  </Primitive>
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot name="leading">
+      <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <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>
+
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="ui.actions({ class: props.ui?.actions })">
+        <slot name="actions">
+          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+      <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
+        <slot name="actions">
+          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </template>
+
+      <slot name="close" :ui="ui">
+        <UButton
+          v-if="close"
+          :icon="closeIcon || appConfig.ui.icons.close"
+          color="neutral"
+          variant="link"
+          :aria-label="t('alert.close')"
+          v-bind="typeof close === 'object' ? close : {}"
+          :class="ui.close({ class: props.ui?.close })"
+          @click="emits('update:open', false)"
+        />
+      </slot>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/App.vue

@@ -31,14 +31,14 @@ provide(portalTargetInjectionKey, portal);
 </script>
 
 <template>
-  <ConfigProvider :use-id="() => useId()" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
-    <TooltipProvider v-bind="tooltipProps">
-      <UToaster v-if="toaster !== null" v-bind="toasterProps">
-        <slot />
-      </UToaster>
-      <slot v-else />
-
-      <UOverlayProvider />
-    </TooltipProvider>
-  </ConfigProvider>
+  <ConfigProvider :use-id="() => useId()" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
+    <TooltipProvider v-bind="tooltipProps">
+      <UToaster v-if="toaster !== null" v-bind="toasterProps">
+        <slot />
+      </UToaster>
+      <slot v-else />
+
+      <UOverlayProvider />
+    </TooltipProvider>
+  </ConfigProvider>
 </template>

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/Avatar.vue

@@ -53,31 +53,31 @@ function onError() {
 </script>
 
 <template>
-  <component
-    :is="props.chip ? UChip : Primitive"
-    :as="as"
-    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :style="props.style"
-  >
-    <component
-      :is="ImageComponent"
-      v-if="src && !error"
-      role="img"
-      :src="src"
-      :alt="alt"
-      :width="sizePx"
-      :height="sizePx"
-      v-bind="$attrs"
-      :class="ui.image({ class: props.ui?.image })"
-      @error="onError"
-    />
-
-    <Slot v-else v-bind="$attrs">
-      <slot>
-        <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-        <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || "\xA0" }}</span>
-      </slot>
-    </Slot>
-  </component>
+  <component
+    :is="props.chip ? UChip : Primitive"
+    :as="as"
+    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="props.style"
+  >
+    <component
+      :is="ImageComponent"
+      v-if="src && !error"
+      role="img"
+      :src="src"
+      :alt="alt"
+      :width="sizePx"
+      :height="sizePx"
+      v-bind="$attrs"
+      :class="ui.image({ class: props.ui?.image })"
+      @error="onError"
+    />
+
+    <Slot v-else v-bind="$attrs">
+      <slot>
+        <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+        <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || "\xA0" }}</span>
+      </slot>
+    </Slot>
+  </component>
 </template>

package/dist/runtime/components/AvatarGroup.vue

@@ -58,8 +58,8 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
-    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
+  </Primitive>
 </template>

package/dist/runtime/components/Badge.vue

@@ -41,20 +41,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} }
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <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>
-
-    <slot>
-      <span v-if="label !== void 0 && label !== null" :class="ui.label({ class: props.ui?.label })">
-        {{ label }}
-      </span>
-    </slot>
-
-    <slot name="trailing">
-      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
-    </slot>
-  </Primitive>
+  <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
+    <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>
+
+    <slot>
+      <span v-if="label !== void 0 && label !== null" :class="ui.label({ class: props.ui?.label })">
+        {{ label }}
+      </span>
+    </slot>
+
+    <slot name="trailing">
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+    </slot>
+  </Primitive>
 </template>

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>