@eslamdevui/ui 3.2.0-beta.2 → 3.2.0

package/dist/runtime/components/DashboardNavbar.vue

@@ -31,44 +31,44 @@ const uiPro = computed(
 </script>
 
 <template>
-  <DefineToggleTemplate>
-    <slot name="toggle" v-bind="dashboardContext">
-      <UDashboardSidebarToggle
-        v-if="props.toggle"
-        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
-        :side="props.toggleSide"
-        :class="uiPro.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
-      />
-    </slot>
-  </DefineToggleTemplate>
-
-  <Primitive :as="props.as" :class="uiPro.root({ class: [props.ui?.root, props.class] })">
-    <div :class="uiPro.left({ class: props.ui?.left })">
-      <ReuseToggleTemplate v-if="props.toggleSide === 'left'" />
-
-      <slot name="left" v-bind="dashboardContext">
-        <slot name="leading" v-bind="dashboardContext">
-          <UIcon v-if="props.icon" :name="props.icon" :class="uiPro.icon({ class: props.ui?.icon })" />
-        </slot>
-
-        <h1 :class="uiPro.title({ class: props.ui?.title })">
-          <slot name="title">
-            {{ props.title }}
-          </slot>
-        </h1>
-
-        <slot name="trailing" v-bind="dashboardContext" />
-      </slot>
-    </div>
-
-    <div v-if="$slots.default" :class="uiPro.center({ class: props.ui?.center })">
-      <slot v-bind="dashboardContext" />
-    </div>
-
-    <div :class="uiPro.right({ class: props.ui?.right })">
-      <slot name="right" v-bind="dashboardContext" />
-
-      <ReuseToggleTemplate v-if="props.toggleSide === 'right'" />
-    </div>
-  </Primitive>
+  <DefineToggleTemplate>
+    <slot name="toggle" v-bind="dashboardContext">
+      <UDashboardSidebarToggle
+        v-if="props.toggle"
+        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
+        :side="props.toggleSide"
+        :class="uiPro.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
+      />
+    </slot>
+  </DefineToggleTemplate>
+
+  <Primitive :as="props.as" :class="uiPro.root({ class: [props.ui?.root, props.class] })">
+    <div :class="uiPro.left({ class: props.ui?.left })">
+      <ReuseToggleTemplate v-if="props.toggleSide === 'left'" />
+
+      <slot name="left" v-bind="dashboardContext">
+        <slot name="leading" v-bind="dashboardContext">
+          <UIcon v-if="props.icon" :name="props.icon" :class="uiPro.icon({ class: props.ui?.icon })" />
+        </slot>
+
+        <h1 :class="uiPro.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ props.title }}
+          </slot>
+        </h1>
+
+        <slot name="trailing" v-bind="dashboardContext" />
+      </slot>
+    </div>
+
+    <div v-if="$slots.default" :class="uiPro.center({ class: props.ui?.center })">
+      <slot v-bind="dashboardContext" />
+    </div>
+
+    <div :class="uiPro.right({ class: props.ui?.right })">
+      <slot name="right" v-bind="dashboardContext" />
+
+      <ReuseToggleTemplate v-if="props.toggleSide === 'right'" />
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/DashboardPanel.vue

@@ -26,31 +26,31 @@ const uiPro = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardP
 </script>
 
 <template>
-  <div
-    :id="panelId"
-    ref="el"
-    :data-dragging="isDragging"
-    :class="uiPro.root({ class: [props.ui?.root, props.class] })"
-    :style="size ? { '--width': `${size}${dashboardContext.unit}` } : void 0"
-  >
-    <slot>
-      <slot name="header" />
-
-      <div :class="uiPro.body({ class: props.ui?.body })">
-        <slot name="body" />
-      </div>
-
-      <slot name="footer" />
-    </slot>
-  </div>
-
-  <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart">
-    <UDashboardResizeHandle
-      v-if="props.resizable"
-      :aria-controls="panelId"
-      :class="uiPro.handle({ class: props.ui?.handle })"
-      @mousedown="onMouseDown"
-      @touchstart="onTouchStart"
-    />
-  </slot>
+  <div
+    :id="panelId"
+    ref="el"
+    :data-dragging="isDragging"
+    :class="uiPro.root({ class: [props.ui?.root, props.class] })"
+    :style="size ? { '--width': `${size}${dashboardContext.unit}` } : void 0"
+  >
+    <slot>
+      <slot name="header" />
+
+      <div :class="uiPro.body({ class: props.ui?.body })">
+        <slot name="body" />
+      </div>
+
+      <slot name="footer" />
+    </slot>
+  </div>
+
+  <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart">
+    <UDashboardResizeHandle
+      v-if="props.resizable"
+      :aria-controls="panelId"
+      :class="uiPro.handle({ class: props.ui?.handle })"
+      @mousedown="onMouseDown"
+      @touchstart="onTouchStart"
+    />
+  </slot>
 </template>

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -22,11 +22,11 @@ const ui = computed(
 </script>
 
 <template>
-  <Primitive
-    :as="as"
-    role="separator"
-    :class="ui({ class: props.class })"
-  >
-    <slot />
-  </Primitive>
+  <Primitive
+    :as="as"
+    role="separator"
+    :class="ui({ class: props.class })"
+  >
+    <slot />
+  </Primitive>
 </template>

package/dist/runtime/components/DashboardSearch.vue

@@ -100,24 +100,24 @@ defineExpose({ commandPaletteRef });
 </script>
 
 <template>
-  <UModal v-model:open="open" :class="uiPro.modal({ class: props.class })">
-    <template #content>
-      <slot name="content">
-        <UCommandPalette
-          ref="commandPaletteRef"
-          v-model:search-term="searchTerm"
-          v-bind="commandPaletteProps"
-          :groups="groups"
-          :fuse="fuse"
-          :ui="transformUI(uiPro, props.ui)"
-          @update:model-value="onSelect"
-          @update:open="open = $event"
-        >
-          <template v-for="(_, name) in proxySlots" :key="name" #[name]="slotProps">
-            <slot :name="name" v-bind="slotProps" />
-          </template>
-        </UCommandPalette>
-      </slot>
-    </template>
-  </UModal>
+  <UModal v-model:open="open" :class="uiPro.modal({ class: props.class })">
+    <template #content>
+      <slot name="content">
+        <UCommandPalette
+          ref="commandPaletteRef"
+          v-model:search-term="searchTerm"
+          v-bind="commandPaletteProps"
+          :groups="groups"
+          :fuse="fuse"
+          :ui="transformUI(uiPro, props.ui)"
+          @update:model-value="onSelect"
+          @update:open="open = $event"
+        >
+          <template v-for="(_, name) in proxySlots" :key="name" #[name]="slotProps">
+            <slot :name="name" v-bind="slotProps" />
+          </template>
+        </UCommandPalette>
+      </slot>
+    </template>
+  </UModal>
 </template>

package/dist/runtime/components/DashboardSearchButton.vue

@@ -48,47 +48,47 @@ const rootProps = useForwardProps(reactivePick(props, "color", "size"));
 </script>
 
 <template>
-  <DefineButtonTemplate>
-    <UButton
-      :icon="props.icon || appConfig.ui.icons.search"
-      :label="props.collapsed ? void 0 : labelText"
-      :variant="props.variant || (props.collapsed ? 'ghost' : 'outline')"
-      :aria-label="props.collapsed ? labelText : void 0"
-      :square="props.collapsed"
-      :class="uiPro.base({ class: [props.ui?.base, props.class] })"
-      :ui="transformUI(uiPro, props.ui)"
-      v-bind="rootProps"
-      @click="toggleSearch"
-    >
-      <template #default="slotProps">
-        <template v-for="(_, name) in proxySlots" :key="name">
-          <slot :name="name" v-bind="slotProps" />
-        </template>
-      </template>
-
-      <template v-if="!props.collapsed" #trailing>
-        <div :class="uiPro.trailing({ class: props.ui?.trailing })">
-          <slot name="trailing">
-            <template v-if="props.kbds?.length">
-              <UKbd
-                v-for="(kbd, index) in props.kbds"
-                :key="index"
-                variant="subtle"
-                v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
-              />
-            </template>
-          </slot>
-        </div>
-      </template>
-    </UButton>
-  </DefineButtonTemplate>
-
-  <UTooltip
-    v-if="props.collapsed && props.tooltip"
-    :text="labelText"
-    v-bind="tooltipProps"
-  >
-    <ReuseButtonTemplate />
-  </UTooltip>
-  <ReuseButtonTemplate v-else />
+  <DefineButtonTemplate>
+    <UButton
+      :icon="props.icon || appConfig.ui.icons.search"
+      :label="props.collapsed ? void 0 : labelText"
+      :variant="props.variant || (props.collapsed ? 'ghost' : 'outline')"
+      :aria-label="props.collapsed ? labelText : void 0"
+      :square="props.collapsed"
+      :class="uiPro.base({ class: [props.ui?.base, props.class] })"
+      :ui="transformUI(uiPro, props.ui)"
+      v-bind="rootProps"
+      @click="toggleSearch"
+    >
+      <template #default="slotProps">
+        <template v-for="(_, name) in proxySlots" :key="name">
+          <slot :name="name" v-bind="slotProps" />
+        </template>
+      </template>
+
+      <template v-if="!props.collapsed" #trailing>
+        <div :class="uiPro.trailing({ class: props.ui?.trailing })">
+          <slot name="trailing">
+            <template v-if="props.kbds?.length">
+              <UKbd
+                v-for="(kbd, index) in props.kbds"
+                :key="index"
+                variant="subtle"
+                v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
+              />
+            </template>
+          </slot>
+        </div>
+      </template>
+    </UButton>
+  </DefineButtonTemplate>
+
+  <UTooltip
+    v-if="props.collapsed && props.tooltip"
+    :text="labelText"
+    v-bind="tooltipProps"
+  >
+    <ReuseButtonTemplate />
+  </UTooltip>
+  <ReuseButtonTemplate v-else />
 </template>

package/dist/runtime/components/DashboardSidebar.vue

@@ -90,81 +90,81 @@ function toggleOpen() {
 </script>
 
 <template>
-  <DefineToggle>
-    <slot name="toggle" :open="open" :toggle="toggleOpen">
-      <UDashboardSidebarToggle
-        v-if="props.toggle"
-        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
-        :side="props.toggleSide"
-        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
-      />
-    </slot>
-  </DefineToggle>
-
-  <DefineHandle>
-    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart">
-      <UDashboardResizeHandle
-        v-if="props.resizable"
-        :aria-controls="id"
-        :class="ui.handle({ class: props.ui?.handle })"
-        @mousedown="onMouseDown"
-        @touchstart="onTouchStart"
-      />
-    </slot>
-  </DefineHandle>
-
-  <ReuseHandle v-if="props.side === 'right'" />
-
-  <div
-    :id="id"
-    ref="el"
-    :data-collapsed="isCollapsed"
-    :data-dragging="isDragging"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :style="{ '--width': `${size}${dashboardCtx.unit}` }"
-  >
-    <div v-if="$slots.header" :class="ui.header({ class: props.ui?.header })">
-      <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
-    </div>
-
-    <div :class="ui.body({ class: props.ui?.body })">
-      <slot :collapsed="isCollapsed" :collapse="collapse" />
-    </div>
-
-    <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-      <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
-    </div>
-  </div>
-
-  <ReuseHandle v-if="props.side === 'left'" />
-
-  <Menu
-    v-model:open="open"
-    v-bind="menuProps"
+  <DefineToggle>
+    <slot name="toggle" :open="open" :toggle="toggleOpen">
+      <UDashboardSidebarToggle
+        v-if="props.toggle"
+        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
+        :side="props.toggleSide"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
+      />
+    </slot>
+  </DefineToggle>
+
+  <DefineHandle>
+    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart">
+      <UDashboardResizeHandle
+        v-if="props.resizable"
+        :aria-controls="id"
+        :class="ui.handle({ class: props.ui?.handle })"
+        @mousedown="onMouseDown"
+        @touchstart="onTouchStart"
+      />
+    </slot>
+  </DefineHandle>
+
+  <ReuseHandle v-if="props.side === 'right'" />
+
+  <div
+    :id="id"
+    ref="el"
+    :data-collapsed="isCollapsed"
+    :data-dragging="isDragging"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="{ '--width': `${size}${dashboardCtx.unit}` }"
+  >
+    <div v-if="$slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <slot :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+
+    <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
+    </div>
+  </div>
+
+  <ReuseHandle v-if="props.side === 'left'" />
+
+  <Menu
+    v-model:open="open"
+    v-bind="menuProps"
     :ui="{
   overlay: ui.overlay({ class: props.ui?.overlay }),
   content: ui.content({ class: props.ui?.content })
-}"
-  >
-    <template #content>
-      <slot name="content">
-        <div
-          v-if="$slots.header || props.mode !== 'drawer'"
-          :class="ui.header({ class: props.ui?.header, menu: true })"
-        >
-          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'left'" />
-          <slot name="header" />
-          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'right'" />
-        </div>
-
-        <div :class="ui.body({ class: props.ui?.body, menu: true })">
-          <slot />
-        </div>
-
-        <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
-          <slot name="footer" />
-        </div>
-      </slot>
-    </template>
-  </Menu>
+}"
+  >
+    <template #content>
+      <slot name="content">
+        <div
+          v-if="$slots.header || props.mode !== 'drawer'"
+          :class="ui.header({ class: props.ui?.header, menu: true })"
+        >
+          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'left'" />
+          <slot name="header" />
+          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'right'" />
+        </div>
+
+        <div :class="ui.body({ class: props.ui?.body, menu: true })">
+          <slot />
+        </div>
+
+        <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
+          <slot name="footer" />
+        </div>
+      </slot>
+    </template>
+  </Menu>
 </template>

package/dist/runtime/components/DashboardSidebarCollapse.vue

@@ -32,15 +32,15 @@ function toggleCollapse() {
 </script>
 
 <template>
-  <UButton
-    v-bind="rootProps"
+  <UButton
+    v-bind="rootProps"
     :aria-label="
   sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse')
-"
+"
     :icon="
   sidebarCollapsed ? appConfig.ui.icons.panelOpen : appConfig.ui.icons.panelClose
-"
-    :class="ui({ class: props.class })"
-    @click="toggleCollapse"
-  />
+"
+    :class="ui({ class: props.class })"
+    @click="toggleCollapse"
+  />
 </template>

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -30,11 +30,11 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <UButton
-    v-bind="rootProps"
-    :aria-label="sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open')"
-    :icon="sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
-    :class="typeof ui === 'function' ? ui({ class: props.class, side: props.side }) : ui"
-    @click="toggleSidebar"
-  />
+  <UButton
+    v-bind="rootProps"
+    :aria-label="sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open')"
+    :icon="sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
+    :class="typeof ui === 'function' ? ui({ class: props.class, side: props.side }) : ui"
+    @click="toggleSidebar"
+  />
 </template>

package/dist/runtime/components/Drawer.vue

@@ -54,59 +54,59 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
-    <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot />
-    </DrawerTrigger>
-
-    <DrawerPortal v-bind="portalProps">
-      <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
-
-      <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
-        <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
-
-        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
-          <DrawerTitle v-if="title || !!slots.title">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </DrawerTitle>
-
-          <DrawerDescription v-if="description || !!slots.description">
-            <slot name="description">
-              {{ description }}
-            </slot>
-          </DrawerDescription>
-        </VisuallyHidden>
-
-        <slot name="content">
-          <div :class="ui.container({ class: props.ui?.container })">
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
-              <slot name="header">
-                <DrawerTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-                  <slot name="title">
-                    {{ title }}
-                  </slot>
-                </DrawerTitle>
-
-                <DrawerDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-                  <slot name="description">
-                    {{ description }}
-                  </slot>
-                </DrawerDescription>
-              </slot>
-            </div>
-
-            <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
-              <slot name="body" />
-            </div>
-
-            <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-              <slot name="footer" />
-            </div>
-          </div>
-        </slot>
-      </DrawerContent>
-    </DrawerPortal>
-  </DrawerRoot>
+  <DrawerRoot v-bind="rootProps">
+    <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot />
+    </DrawerTrigger>
+
+    <DrawerPortal v-bind="portalProps">
+      <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
+      <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+        <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
+
+        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
+          <DrawerTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DrawerTitle>
+
+          <DrawerDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DrawerDescription>
+        </VisuallyHidden>
+
+        <slot name="content">
+          <div :class="ui.container({ class: props.ui?.container })">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+              <slot name="header">
+                <DrawerTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DrawerTitle>
+
+                <DrawerDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DrawerDescription>
+              </slot>
+            </div>
+
+            <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+              <slot name="body" />
+            </div>
+
+            <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+              <slot name="footer" />
+            </div>
+          </div>
+        </slot>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
 </template>