@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

package/dist/runtime/components/InputNumber.vue

@@ -92,53 +92,53 @@ defineExpose({
 </script>
 
 <template>
-  <NumberFieldRoot
-    v-bind="rootProps"
-    :id="id"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :name="name"
-    :disabled="disabled"
-    :locale="locale"
-    @update:model-value="onUpdate"
-  >
-    <NumberFieldInput
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      ref="inputRef"
-      :placeholder="placeholder"
-      :required="required"
-      :class="ui.base({ class: props.ui?.base })"
-      @blur="onBlur"
-      @focus="emitFormFocus"
-    />
-
-    <div :class="ui.increment({ class: props.ui?.increment })">
-      <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
-        <slot name="increment">
-          <UButton
-            :icon="incrementIcon"
-            :color="color"
-            :size="size"
-            variant="link"
-            :aria-label="t('inputNumber.increment')"
-            v-bind="typeof increment === 'object' ? increment : void 0"
-          />
-        </slot>
-      </NumberFieldIncrement>
-    </div>
-
-    <div :class="ui.decrement({ class: props.ui?.decrement })">
-      <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
-        <slot name="decrement">
-          <UButton
-            :icon="decrementIcon"
-            :color="color"
-            :size="size"
-            variant="link"
-            :aria-label="t('inputNumber.decrement')"
-            v-bind="typeof decrement === 'object' ? decrement : void 0"
-          />
-        </slot>
-      </NumberFieldDecrement>
-    </div>
-  </NumberFieldRoot>
+  <NumberFieldRoot
+    v-bind="rootProps"
+    :id="id"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :name="name"
+    :disabled="disabled"
+    :locale="locale"
+    @update:model-value="onUpdate"
+  >
+    <NumberFieldInput
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      ref="inputRef"
+      :placeholder="placeholder"
+      :required="required"
+      :class="ui.base({ class: props.ui?.base })"
+      @blur="onBlur"
+      @focus="emitFormFocus"
+    />
+
+    <div :class="ui.increment({ class: props.ui?.increment })">
+      <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
+        <slot name="increment">
+          <UButton
+            :icon="incrementIcon"
+            :color="color"
+            :size="size"
+            variant="link"
+            :aria-label="t('inputNumber.increment')"
+            v-bind="typeof increment === 'object' ? increment : void 0"
+          />
+        </slot>
+      </NumberFieldIncrement>
+    </div>
+
+    <div :class="ui.decrement({ class: props.ui?.decrement })">
+      <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
+        <slot name="decrement">
+          <UButton
+            :icon="decrementIcon"
+            :color="color"
+            :size="size"
+            variant="link"
+            :aria-label="t('inputNumber.decrement')"
+            v-bind="typeof decrement === 'object' ? decrement : void 0"
+          />
+        </slot>
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
 </template>

package/dist/runtime/components/InputTags.vue

@@ -101,59 +101,59 @@ defineExpose({
 </script>
 
 <template>
-  <TagsInputRoot
-    :id="id"
-    v-slot="{ modelValue: tags }"
-    :model-value="modelValue"
-    :default-value="defaultValue"
-    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
-    v-bind="rootProps"
-    :name="name"
-    :disabled="disabled"
-    @update:model-value="onUpdate"
-    @blur="onBlur"
-    @focus="onFocus"
-  >
-    <TagsInputItem
-      v-for="(item, index) in tags"
-      :key="index"
-      :value="item"
-      :class="ui.item({ class: [props.ui?.item] })"
-    >
-      <TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
-        <slot v-if="!!slots['item-text']" name="item-text" :item="item" :index="index" />
-      </TagsInputItemText>
-
-      <TagsInputItemDelete
-        :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
-        :disabled="disabled"
-      >
-        <slot name="item-delete" :item="item" :index="index">
-          <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
-        </slot>
-      </TagsInputItemDelete>
-    </TagsInputItem>
-
-    <TagsInputInput
-      ref="inputRef"
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      :placeholder="placeholder"
-      :class="ui.input({ class: props.ui?.input })"
-    />
-
-    <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>
-  </TagsInputRoot>
+  <TagsInputRoot
+    :id="id"
+    v-slot="{ modelValue: tags }"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    @update:model-value="onUpdate"
+    @blur="onBlur"
+    @focus="onFocus"
+  >
+    <TagsInputItem
+      v-for="(item, index) in tags"
+      :key="index"
+      :value="item"
+      :class="ui.item({ class: [props.ui?.item] })"
+    >
+      <TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
+        <slot v-if="!!slots['item-text']" name="item-text" :item="item" :index="index" />
+      </TagsInputItemText>
+
+      <TagsInputItemDelete
+        :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
+        :disabled="disabled"
+      >
+        <slot name="item-delete" :item="item" :index="index">
+          <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
+        </slot>
+      </TagsInputItemDelete>
+    </TagsInputItem>
+
+    <TagsInputInput
+      ref="inputRef"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      :placeholder="placeholder"
+      :class="ui.input({ class: props.ui?.input })"
+    />
+
+    <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>
+  </TagsInputRoot>
 </template>

package/dist/runtime/components/Kbd.vue

@@ -22,9 +22,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.kbd || {} }))
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ variant, size, class: props.class })">
-    <slot>
-      {{ getKbdKey(value) }}
-    </slot>
-  </Primitive>
+  <Primitive :as="as" :class="ui({ variant, size, class: props.class })">
+    <slot>
+      {{ getKbdKey(value) }}
+    </slot>
+  </Primitive>
 </template>

package/dist/runtime/components/Link.vue

@@ -87,9 +87,9 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
 </script>
 
 <template>
-  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" :to="to" custom>
-    <template v-if="custom">
-      <slot
+  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" :to="to" custom>
+    <template v-if="custom">
+      <slot
         v-bind="{
   ...$attrs,
   ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -102,11 +102,11 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   target,
   isExternal,
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
-}"
-      />
-    </template>
-    <ULinkBase
-      v-else
+}"
+      />
+    </template>
+    <ULinkBase
+      v-else
       v-bind="{
   ...$attrs,
   ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -118,10 +118,10 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   rel,
   target,
   isExternal
-}"
-      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
-    >
-      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
-    </ULinkBase>
-  </NuxtLink>
+}"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+    >
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+    </ULinkBase>
+  </NuxtLink>
 </template>

package/dist/runtime/components/LinkBase.vue

@@ -34,7 +34,7 @@ function onClickWrapper(e) {
 </script>
 
 <template>
-  <Primitive
+  <Primitive
     v-bind="href ? {
   'as': 'a',
   'href': disabled ? void 0 : href,
@@ -47,11 +47,11 @@ function onClickWrapper(e) {
   disabled
 } : {
   as
-}"
-    :rel="rel"
-    :target="target"
-    @click="onClickWrapper"
-  >
-    <slot />
-  </Primitive>
+}"
+    :rel="rel"
+    :target="target"
+    @click="onClickWrapper"
+  >
+    <slot />
+  </Primitive>
 </template>

package/dist/runtime/components/Main.vue

@@ -0,0 +1,23 @@
+<script>
+import theme from "#build/ui/main";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "main" },
+  class: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.main || {} }));
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui({ class: props.class })">
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,20 @@
+export interface MainProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'main'
+     */
+    as?: any;
+    class?: any;
+}
+export interface MainSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<MainProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MainProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MainSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Modal.vue

@@ -58,73 +58,73 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
 </script>
 
 <template>
-  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
-    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot :open="open" />
-    </DialogTrigger>
-
-    <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
-
-      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
-        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
-          <DialogTitle v-if="title || !!slots.title">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </DialogTitle>
-
-          <DialogDescription v-if="description || !!slots.description">
-            <slot name="description">
-              {{ description }}
-            </slot>
-          </DialogDescription>
-        </VisuallyHidden>
-
-        <slot name="content" :close="close">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
-            <slot name="header" :close="close">
-              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-                  <slot name="title">
-                    {{ title }}
-                  </slot>
-                </DialogTitle>
-
-                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-                  <slot name="description">
-                    {{ description }}
-                  </slot>
-                </DialogDescription>
-              </div>
-
-              <slot name="actions" />
-
-              <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :close="close" :ui="ui">
-                  <UButton
-                    v-if="props.close"
-                    :icon="closeIcon || appConfig.ui.icons.close"
-                    color="neutral"
-                    variant="ghost"
-                    :aria-label="t('modal.close')"
-                    v-bind="typeof props.close === 'object' ? props.close : {}"
-                    :class="ui.close({ class: props.ui?.close })"
-                  />
-                </slot>
-              </DialogClose>
-            </slot>
-          </div>
-
-          <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
-            <slot name="body" :close="close" />
-          </div>
-
-          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-            <slot name="footer" :close="close" />
-          </div>
-        </slot>
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
+  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <DialogPortal v-bind="portalProps">
+      <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
+      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
+        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
+          <DialogTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DialogTitle>
+
+          <DialogDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DialogDescription>
+        </VisuallyHidden>
+
+        <slot name="content" :close="close">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+            <slot name="header" :close="close">
+              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DialogTitle>
+
+                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DialogDescription>
+              </div>
+
+              <slot name="actions" />
+
+              <DialogClose v-if="props.close || !!slots.close" as-child>
+                <slot name="close" :close="close" :ui="ui">
+                  <UButton
+                    v-if="props.close"
+                    :icon="closeIcon || appConfig.ui.icons.close"
+                    color="neutral"
+                    variant="ghost"
+                    :aria-label="t('modal.close')"
+                    v-bind="typeof props.close === 'object' ? props.close : {}"
+                    :class="ui.close({ class: props.ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+            <slot name="body" :close="close" />
+          </div>
+
+          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+            <slot name="footer" :close="close" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
 </template>