@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

package/dist/runtime/components/Slideover.vue

@@ -58,80 +58,80 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
 </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
-        :data-side="side"
-        :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('slideover.close')"
-                    v-bind="typeof props.close === 'object' ? props.close : {}"
-                    :class="ui.close({ class: props.ui?.close })"
-                  />
-                </slot>
-              </DialogClose>
-            </slot>
-          </div>
-
-          <div :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
+        :data-side="side"
+        :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('slideover.close')"
+                    v-bind="typeof props.close === 'object' ? props.close : {}"
+                    :class="ui.close({ class: props.ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div :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>

package/dist/runtime/components/Slider.vue

@@ -64,31 +64,31 @@ function onChange(value) {
 </script>
 
 <template>
-  <SliderRoot
-    v-bind="{ ...rootProps, ...ariaAttrs }"
-    :id="id"
-    v-model="sliderValue"
-    :name="name"
-    :disabled="disabled"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :default-value="defaultSliderValue"
-    @update:model-value="emitFormInput()"
-    @value-commit="onChange"
-  >
-    <SliderTrack :class="ui.track({ class: props.ui?.track })">
-      <SliderRange :class="ui.range({ class: props.ui?.range })" />
-    </SliderTrack>
-
-    <template v-for="thumb in thumbs" :key="thumb">
-      <UTooltip
-        v-if="!!tooltip"
-        :text="thumbs > 1 ? String(sliderValue?.[thumb - 1]) : String(sliderValue)"
-        disable-closing-trigger
-        v-bind="typeof tooltip === 'object' ? tooltip : {}"
-      >
-        <SliderThumb :class="ui.thumb({ class: props.ui?.thumb })" />
-      </UTooltip>
-      <SliderThumb v-else :class="ui.thumb({ class: props.ui?.thumb })" />
-    </template>
-  </SliderRoot>
+  <SliderRoot
+    v-bind="{ ...rootProps, ...ariaAttrs }"
+    :id="id"
+    v-model="sliderValue"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :default-value="defaultSliderValue"
+    @update:model-value="emitFormInput()"
+    @value-commit="onChange"
+  >
+    <SliderTrack :class="ui.track({ class: props.ui?.track })">
+      <SliderRange :class="ui.range({ class: props.ui?.range })" />
+    </SliderTrack>
+
+    <template v-for="thumb in thumbs" :key="thumb">
+      <UTooltip
+        v-if="!!tooltip"
+        :text="thumbs > 1 ? String(sliderValue?.[thumb - 1]) : String(sliderValue)"
+        disable-closing-trigger
+        v-bind="typeof tooltip === 'object' ? tooltip : {}"
+      >
+        <SliderThumb :class="ui.thumb({ class: props.ui?.thumb })" />
+      </UTooltip>
+      <SliderThumb v-else :class="ui.thumb({ class: props.ui?.thumb })" />
+    </template>
+  </SliderRoot>
 </template>

package/dist/runtime/components/Stepper.vue

@@ -62,55 +62,55 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.header({ class: props.ui?.header })">
-      <StepperItem
-        v-for="(item, count) in items"
-        :key="item.value ?? count"
-        :step="count"
-        :disabled="item.disabled || props.disabled"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-      >
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
-          <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
-            <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
-              <slot name="indicator" :item="item">
-                <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
-                <template v-else>
-                  {{ count + 1 }}
-                </template>
-              </slot>
-            </StepperIndicator>
-          </StepperTrigger>
-
-          <StepperSeparator
-            v-if="count < items.length - 1"
-            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
-          />
-        </div>
-
-        <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-          <StepperTitle as="div" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
-            <slot name="title" :item="item">
-              {{ item.title }}
-            </slot>
-          </StepperTitle>
-          <StepperDescription as="div" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
-            <slot name="description" :item="item">
-              {{ item.description }}
-            </slot>
-          </StepperDescription>
-        </div>
-      </StepperItem>
-    </div>
-
-    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" :class="ui.content({ class: props.ui?.content })">
-      <slot
-        :name="currentStep?.slot || 'content'"
-        :item="currentStep"
-      >
-        {{ currentStep?.content }}
-      </slot>
-    </div>
-  </StepperRoot>
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.header({ class: props.ui?.header })">
+      <StepperItem
+        v-for="(item, count) in items"
+        :key="item.value ?? count"
+        :step="count"
+        :disabled="item.disabled || props.disabled"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      >
+        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+          <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
+            <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
+              <slot name="indicator" :item="item">
+                <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
+                <template v-else>
+                  {{ count + 1 }}
+                </template>
+              </slot>
+            </StepperIndicator>
+          </StepperTrigger>
+
+          <StepperSeparator
+            v-if="count < items.length - 1"
+            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
+          />
+        </div>
+
+        <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <StepperTitle as="div" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
+            <slot name="title" :item="item">
+              {{ item.title }}
+            </slot>
+          </StepperTitle>
+          <StepperDescription as="div" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+            <slot name="description" :item="item">
+              {{ item.description }}
+            </slot>
+          </StepperDescription>
+        </div>
+      </StepperItem>
+    </div>
+
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" :class="ui.content({ class: props.ui?.content })">
+      <slot
+        :name="currentStep?.slot || 'content'"
+        :item="currentStep"
+      >
+        {{ currentStep?.content }}
+      </slot>
+    </div>
+  </StepperRoot>
 </template>

package/dist/runtime/components/Switch.vue

@@ -53,37 +53,37 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <SwitchRoot
-        :id="id"
-        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
-        v-model="modelValue"
-        :name="name"
-        :disabled="disabled || loading"
-        :class="ui.base({ class: props.ui?.base })"
-        @update:model-value="onUpdate"
-      >
-        <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })">
-          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
-          <template v-else>
-            <UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
-            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
-          </template>
-        </SwitchThumb>
-      </SwitchRoot>
-    </div>
-    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
-        <slot name="label" :label="label">
-          {{ label }}
-        </slot>
-      </Label>
-      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
-        </slot>
-      </p>
-    </div>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <SwitchRoot
+        :id="id"
+        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+        v-model="modelValue"
+        :name="name"
+        :disabled="disabled || loading"
+        :class="ui.base({ class: props.ui?.base })"
+        @update:model-value="onUpdate"
+      >
+        <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })">
+          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
+          <template v-else>
+            <UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
+            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
+          </template>
+        </SwitchThumb>
+      </SwitchRoot>
+    </div>
+    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </Label>
+      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Table.vue

@@ -189,98 +189,98 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
-      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
-        <slot name="caption">
-          {{ caption }}
-        </slot>
-      </caption>
-
-      <thead :class="ui.thead({ class: [props.ui?.thead] })">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
-          <th
-            v-for="header in headerGroup.headers"
-            :key="header.id"
-            :data-pinned="header.column.getIsPinned()"
-            :colspan="header.colSpan > 1 ? header.colSpan : void 0"
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
+      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
+        <slot name="caption">
+          {{ caption }}
+        </slot>
+      </caption>
+
+      <thead :class="ui.thead({ class: [props.ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
+          <th
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :data-pinned="header.column.getIsPinned()"
+            :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :class="ui.th({
   class: [
     props.ui?.th,
     typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
   ],
   pinned: !!header.column.getIsPinned()
-})"
-          >
-            <slot :name="`${header.id}-header`" v-bind="header.getContext()">
-              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
-            </slot>
-          </th>
-        </tr>
-
-        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
-      </thead>
-
-      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
-        <slot name="body-top" />
-
-        <template v-if="tableApi.getRowModel().rows?.length">
-          <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
-            <tr
-              :data-selected="row.getIsSelected()"
-              :data-selectable="!!props.onSelect"
-              :data-expanded="row.getIsExpanded()"
-              :role="props.onSelect ? 'button' : void 0"
-              :tabindex="props.onSelect ? 0 : void 0"
+})"
+          >
+            <slot :name="`${header.id}-header`" v-bind="header.getContext()">
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+            </slot>
+          </th>
+        </tr>
+
+        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
+      </thead>
+
+      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
+        <slot name="body-top" />
+
+        <template v-if="tableApi.getRowModel().rows?.length">
+          <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
+            <tr
+              :data-selected="row.getIsSelected()"
+              :data-selectable="!!props.onSelect"
+              :data-expanded="row.getIsExpanded()"
+              :role="props.onSelect ? 'button' : void 0"
+              :tabindex="props.onSelect ? 0 : void 0"
               :class="ui.tr({
   class: [
     props.ui?.tr,
     typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr
   ]
-})"
-              @click="handleRowSelect(row, $event)"
-            >
-              <td
-                v-for="cell in row.getVisibleCells()"
-                :key="cell.id"
-                :data-pinned="cell.column.getIsPinned()"
+})"
+              @click="handleRowSelect(row, $event)"
+            >
+              <td
+                v-for="cell in row.getVisibleCells()"
+                :key="cell.id"
+                :data-pinned="cell.column.getIsPinned()"
                 :class="ui.td({
   class: [
     props.ui?.td,
     typeof cell.column.columnDef.meta?.class?.td === 'function' ? cell.column.columnDef.meta.class.td(cell) : cell.column.columnDef.meta?.class?.td
   ],
   pinned: !!cell.column.getIsPinned()
-})"
-              >
-                <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
-                  <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
-                </slot>
-              </td>
-            </tr>
-            <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
-              <td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
-                <slot name="expanded" :row="row" />
-              </td>
-            </tr>
-          </template>
-        </template>
-
-        <tr v-else-if="loading && !!slots['loading']">
-          <td :colspan="columns?.length" :class="ui.loading({ class: props.ui?.loading })">
-            <slot name="loading" />
-          </td>
-        </tr>
-
-        <tr v-else>
-          <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
-            <slot name="empty">
-              {{ empty || t("table.noData") }}
-            </slot>
-          </td>
-        </tr>
-
-        <slot name="body-bottom" />
-      </tbody>
-    </table>
-  </Primitive>
+})"
+              >
+                <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
+                  <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                </slot>
+              </td>
+            </tr>
+            <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
+              <td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
+                <slot name="expanded" :row="row" />
+              </td>
+            </tr>
+          </template>
+        </template>
+
+        <tr v-else-if="loading && !!slots['loading']">
+          <td :colspan="columns?.length" :class="ui.loading({ class: props.ui?.loading })">
+            <slot name="loading" />
+          </td>
+        </tr>
+
+        <tr v-else>
+          <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
+            <slot name="empty">
+              {{ empty || t("table.noData") }}
+            </slot>
+          </td>
+        </tr>
+
+        <slot name="body-bottom" />
+      </tbody>
+    </table>
+  </Primitive>
 </template>