@eslamdevui/ui 3.2.0-beta.2 → 3.2.0

package/dist/runtime/components/prose/CodeGroup.vue

@@ -52,19 +52,19 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <TabsList :class="ui.list({ class: props.ui?.list })">
-      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
-
-      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" :class="ui.trigger({ class: props.ui?.trigger })">
-        <CodeIcon :icon="item.icon" :filename="item.label" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
-
-        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">{{ item.label }}</span>
-      </TabsTrigger>
-    </TabsList>
-
-    <TabsContent v-for="(item, index) of items" :key="index" :value="String(index)" as-child>
-      <component :is="item.component" hide-header tabindex="-1" />
-    </TabsContent>
-  </TabsRoot>
+  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <TabsList :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" :class="ui.trigger({ class: props.ui?.trigger })">
+        <CodeIcon :icon="item.icon" :filename="item.label" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
+
+        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">{{ item.label }}</span>
+      </TabsTrigger>
+    </TabsList>
+
+    <TabsContent v-for="(item, index) of items" :key="index" :value="String(index)" as-child>
+      <component :is="item.component" hide-header tabindex="-1" />
+    </TabsContent>
+  </TabsRoot>
 </template>

package/dist/runtime/components/prose/CodeIcon.vue

@@ -24,5 +24,5 @@ const icon = computed(() => {
 </script>
 
 <template>
-  <UIcon v-if="icon" :name="icon" />
+  <UIcon v-if="icon" :name="icon" />
 </template>

package/dist/runtime/components/prose/CodePreview.vue

@@ -16,13 +16,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codePr
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.preview({ class: [props.ui?.preview] })">
-      <slot />
-    </div>
-
-    <div v-if="!!slots.code" :class="ui.code({ class: [props.ui?.code] })">
-      <slot name="code" />
-    </div>
-  </div>
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.preview({ class: [props.ui?.preview] })">
+      <slot />
+    </div>
+
+    <div v-if="!!slots.code" :class="ui.code({ class: [props.ui?.code] })">
+      <slot name="code" />
+    </div>
+  </div>
 </template>

package/dist/runtime/components/prose/CodeTree.vue

@@ -96,65 +96,65 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <DefineTreeTemplate v-slot="{ items: children, level }">
-    <li
-      v-for="(item, index) in children"
-      :key="`${level}-${index}`"
-      :class="level > 0 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })"
-    >
-      <TreeItem
-        v-slot="{ isExpanded, isSelected }"
-        as-child
-        :level="level"
-        :value="item"
-      >
-        <button :class="ui.link({ class: props.ui?.link, active: isSelected })">
-          <UIcon
-            v-if="item.children?.length"
-            :name="isExpanded ? appConfig.ui.icons.folderOpen : appConfig.ui.icons.folder"
-            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
-          />
-          <CodeIcon
-            v-else
-            :filename="item.label"
-            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
-          />
-          <span :class="ui.linkLabel({ class: props.ui?.linkLabel })">
-            {{ item.label }}
-          </span>
-          <span
-            v-if="item.children?.length"
-            :class="ui.linkTrailing({ class: props.ui?.linkTrailing })"
-          >
-            <UIcon
-              :name="appConfig.ui.icons.chevronDown"
-              :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })"
-            />
-          </span>
-        </button>
-        <ul
-          v-if="item.children?.length && isExpanded"
-          :class="ui.listWithChildren({ class: props.ui?.listWithChildren })"
-        >
-          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
-        </ul>
-      </TreeItem>
-    </li>
-  </DefineTreeTemplate>
-
-  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <TreeRoot
-      v-model="model"
-      :items="treeItems"
-      :get-key="(item2) => item2.path"
-      :default-expanded="expanded"
-      :class="ui.list({ class: props.ui?.list })"
-    >
-      <ReuseTreeTemplate :items="treeItems" :level="0" />
-    </TreeRoot>
-
-    <div :class="ui.content({ class: props.ui?.content })">
-      <component :is="lastSelectedItem?.component" />
-    </div>
-  </div>
+  <DefineTreeTemplate v-slot="{ items: children, level }">
+    <li
+      v-for="(item, index) in children"
+      :key="`${level}-${index}`"
+      :class="level > 0 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })"
+    >
+      <TreeItem
+        v-slot="{ isExpanded, isSelected }"
+        as-child
+        :level="level"
+        :value="item"
+      >
+        <button :class="ui.link({ class: props.ui?.link, active: isSelected })">
+          <UIcon
+            v-if="item.children?.length"
+            :name="isExpanded ? appConfig.ui.icons.folderOpen : appConfig.ui.icons.folder"
+            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+          />
+          <CodeIcon
+            v-else
+            :filename="item.label"
+            :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
+          />
+          <span :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+            {{ item.label }}
+          </span>
+          <span
+            v-if="item.children?.length"
+            :class="ui.linkTrailing({ class: props.ui?.linkTrailing })"
+          >
+            <UIcon
+              :name="appConfig.ui.icons.chevronDown"
+              :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })"
+            />
+          </span>
+        </button>
+        <ul
+          v-if="item.children?.length && isExpanded"
+          :class="ui.listWithChildren({ class: props.ui?.listWithChildren })"
+        >
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineTreeTemplate>
+
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <TreeRoot
+      v-model="model"
+      :items="treeItems"
+      :get-key="(item2) => item2.path"
+      :default-expanded="expanded"
+      :class="ui.list({ class: props.ui?.list })"
+    >
+      <ReuseTreeTemplate :items="treeItems" :level="0" />
+    </TreeRoot>
+
+    <div :class="ui.content({ class: props.ui?.content })">
+      <component :is="lastSelectedItem?.component" />
+    </div>
+  </div>
 </template>

package/dist/runtime/components/prose/Collapsible.vue

@@ -23,19 +23,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.collap
 </script>
 
 <template>
-  <UCollapsible :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui)">
-    <template #default="{ open }">
-      <button :class="ui.trigger({ class: props.ui?.trigger })">
-        <UIcon :name="icon || appConfig.ui.icons.chevronDown" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
-
-        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">
-          {{ open ? props.closeText || t("prose.collapsible.closeText") : props.openText || t("prose.collapsible.openText") }} {{ props.name || t("prose.collapsible.name") }}
-        </span>
-      </button>
-    </template>
-
-    <template #content>
-      <slot />
-    </template>
-  </UCollapsible>
+  <UCollapsible :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui)">
+    <template #default="{ open }">
+      <button :class="ui.trigger({ class: props.ui?.trigger })">
+        <UIcon :name="icon || appConfig.ui.icons.chevronDown" :class="ui.triggerIcon({ class: props.ui?.triggerIcon })" />
+
+        <span :class="ui.triggerLabel({ class: props.ui?.triggerLabel })">
+          {{ open ? props.closeText || t("prose.collapsible.closeText") : props.openText || t("prose.collapsible.openText") }} {{ props.name || t("prose.collapsible.name") }}
+        </span>
+      </button>
+    </template>
+
+    <template #content>
+      <slot />
+    </template>
+  </UCollapsible>
 </template>

package/dist/runtime/components/prose/Em.vue

@@ -15,5 +15,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.em ||
 </script>
 
 <template>
-  <em :class="ui({ class: props.class })"><slot /></em>
+  <em :class="ui({ class: props.class })"><slot /></em>
 </template>

package/dist/runtime/components/prose/Field.vue

@@ -22,27 +22,27 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.field
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <span v-if="name" :class="ui.name({ class: props.ui?.name })">
-        {{ name }}
-      </span>
-
-      <div v-if="type || required" :class="ui.wrapper({ class: props.ui?.wrapper })">
-        <span v-if="type" :class="ui.type({ class: props.ui?.type })">
-          {{ type }}
-        </span>
-
-        <span v-if="required" :class="ui.required({ class: props.ui?.required })">
-          required
-        </span>
-      </div>
-    </div>
-
-    <div v-if="!!slots.default || description" :class="ui.description({ class: props.ui?.description })">
-      <slot mdc-unwrap="p">
-        {{ description }}
-      </slot>
-    </div>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <span v-if="name" :class="ui.name({ class: props.ui?.name })">
+        {{ name }}
+      </span>
+
+      <div v-if="type || required" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <span v-if="type" :class="ui.type({ class: props.ui?.type })">
+          {{ type }}
+        </span>
+
+        <span v-if="required" :class="ui.required({ class: props.ui?.required })">
+          required
+        </span>
+      </div>
+    </div>
+
+    <div v-if="!!slots.default || description" :class="ui.description({ class: props.ui?.description })">
+      <slot mdc-unwrap="p">
+        {{ description }}
+      </slot>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/prose/FieldGroup.vue

@@ -17,7 +17,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.fieldG
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: props.class })">
-    <slot />
-  </Primitive>
+  <Primitive :as="as" :class="ui({ class: props.class })">
+    <slot />
+  </Primitive>
 </template>

package/dist/runtime/components/prose/H1.vue

@@ -19,10 +19,10 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === "ob
 </script>
 
 <template>
-  <h1 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
-      <slot />
-    </a>
-    <slot v-else />
-  </h1>
+  <h1 :id="id" :class="ui.base({ class: props.class })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+      <slot />
+    </a>
+    <slot v-else />
+  </h1>
 </template>

package/dist/runtime/components/prose/H2.vue

@@ -19,14 +19,14 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === "ob
 </script>
 
 <template>
-  <h2 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
-      <span :class="ui.leading({ class: props.ui?.leading })">
-        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-      </span>
-
-      <slot />
-    </a>
-    <slot v-else />
-  </h2>
+  <h2 :id="id" :class="ui.base({ class: props.class })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+      <span :class="ui.leading({ class: props.ui?.leading })">
+        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      </span>
+
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
 </template>

package/dist/runtime/components/prose/H3.vue

@@ -19,14 +19,14 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === "ob
 </script>
 
 <template>
-  <h3 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
-      <span :class="ui.leading({ class: props.ui?.leading })">
-        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-      </span>
-
-      <slot />
-    </a>
-    <slot v-else />
-  </h3>
+  <h3 :id="id" :class="ui.base({ class: props.class })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+      <span :class="ui.leading({ class: props.ui?.leading })">
+        <UIcon :name="appConfig.ui.icons.hash" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      </span>
+
+      <slot />
+    </a>
+    <slot v-else />
+  </h3>
 </template>

package/dist/runtime/components/prose/H4.vue

@@ -19,10 +19,10 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === "ob
 </script>
 
 <template>
-  <h4 :id="id" :class="ui.base({ class: props.class })">
-    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
-      <slot />
-    </a>
-    <slot v-else />
-  </h4>
+  <h4 :id="id" :class="ui.base({ class: props.class })">
+    <a v-if="id && generate" :href="`#${id}`" :class="ui.link({ class: props.ui?.link })">
+      <slot />
+    </a>
+    <slot v-else />
+  </h4>
 </template>

package/dist/runtime/components/prose/Hr.vue

@@ -14,5 +14,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.hr ||
 </script>
 
 <template>
-  <hr :class="ui({ class: props.class })">
+  <hr :class="ui({ class: props.class })">
 </template>

package/dist/runtime/components/prose/Icon.vue

@@ -15,5 +15,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.icon |
 </script>
 
 <template>
-  <UIcon :name="name" :class="ui({ class: props.class })" />
+  <UIcon :name="name" :class="ui({ class: props.class })" />
 </template>

package/dist/runtime/components/prose/Img.vue

@@ -29,12 +29,12 @@ const refinedSrc = computed(() => {
 </script>
 
 <template>
-  <component
-    :is="ImageComponent"
-    :src="refinedSrc"
-    :alt="alt"
-    :width="width"
-    :height="height"
-    :class="ui({ class: props.class })"
-  />
+  <component
+    :is="ImageComponent"
+    :src="refinedSrc"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    :class="ui({ class: props.class })"
+  />
 </template>

package/dist/runtime/components/prose/Kbd.vue

@@ -15,5 +15,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.kbd ||
 </script>
 
 <template>
-  <UKbd :value="value" :class="ui({ class: props.class })" />
+  <UKbd :value="value" :class="ui({ class: props.class })" />
 </template>

package/dist/runtime/components/prose/Li.vue

@@ -15,7 +15,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.li ||
 </script>
 
 <template>
-  <li :class="ui({ class: props.class })">
-    <slot />
-  </li>
+  <li :class="ui({ class: props.class })">
+    <slot />
+  </li>
 </template>

package/dist/runtime/components/prose/Ol.vue

@@ -15,7 +15,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.ol ||
 </script>
 
 <template>
-  <ol :class="ui({ class: props.class })">
-    <slot />
-  </ol>
+  <ol :class="ui({ class: props.class })">
+    <slot />
+  </ol>
 </template>

package/dist/runtime/components/prose/P.vue

@@ -15,7 +15,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.p || {
 </script>
 
 <template>
-  <p :class="ui({ class: props.class })">
-    <slot />
-  </p>
+  <p :class="ui({ class: props.class })">
+    <slot />
+  </p>
 </template>

package/dist/runtime/components/prose/Pre.vue

@@ -36,26 +36,26 @@ function copy() {
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.ui?.root], filename: !!filename })">
-    <div v-if="filename && !hideHeader" :class="ui.header({ class: props.ui?.header })">
-      <CodeIcon :icon="icon" :filename="filename" :class="ui.icon({ class: props.ui?.icon })" />
-
-      <span :class="ui.filename({ class: props.ui?.filename })">{{ filename }}</span>
-    </div>
-
-    <UButton
-      :icon="copied ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
-      color="neutral"
-      variant="outline"
-      size="sm"
-      :aria-label="t('prose.pre.copy')"
-      :class="ui.copy({ class: props.ui?.copy })"
-      tabindex="-1"
-      @click="copy"
-    />
-
-    <pre :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="$attrs"><slot /></pre>
-  </div>
+  <div :class="ui.root({ class: [props.ui?.root], filename: !!filename })">
+    <div v-if="filename && !hideHeader" :class="ui.header({ class: props.ui?.header })">
+      <CodeIcon :icon="icon" :filename="filename" :class="ui.icon({ class: props.ui?.icon })" />
+
+      <span :class="ui.filename({ class: props.ui?.filename })">{{ filename }}</span>
+    </div>
+
+    <UButton
+      :icon="copied ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
+      color="neutral"
+      variant="outline"
+      size="sm"
+      :aria-label="t('prose.pre.copy')"
+      :class="ui.copy({ class: props.ui?.copy })"
+      tabindex="-1"
+      @click="copy"
+    />
+
+    <pre :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="$attrs"><slot /></pre>
+  </div>
 </template>
 
 <style>

package/dist/runtime/components/prose/Script.vue

@@ -6,7 +6,7 @@ const isDev = import.meta.dev;
 </script>
 
 <template>
-  <div v-if="isDev">
-    Rendering the <code>script</code> element is dangerous and is disabled by default. Consider implementing your own <code>ProseScript</code> element to have control over script rendering.
-  </div>
+  <div v-if="isDev">
+    Rendering the <code>script</code> element is dangerous and is disabled by default. Consider implementing your own <code>ProseScript</code> element to have control over script rendering.
+  </div>
 </template>

package/dist/runtime/components/prose/Steps.vue

@@ -16,7 +16,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.steps
 </script>
 
 <template>
-  <div :class="ui({ class: props.class, level: props.level })">
-    <slot />
-  </div>
+  <div :class="ui({ class: props.class, level: props.level })">
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/prose/Strong.vue

@@ -15,7 +15,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.strong
 </script>
 
 <template>
-  <strong :class="ui({ class: props.class })">
-    <slot />
-  </strong>
+  <strong :class="ui({ class: props.class })">
+    <slot />
+  </strong>
 </template>

package/dist/runtime/components/prose/Table.vue

@@ -16,9 +16,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.table
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <table :class="ui.base({ class: props.ui?.base })">
-      <slot />
-    </table>
-  </div>
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <table :class="ui.base({ class: props.ui?.base })">
+      <slot />
+    </table>
+  </div>
 </template>

package/dist/runtime/components/prose/Tabs.vue

@@ -61,18 +61,18 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <UTabs
-    v-model="model"
-    color="primary"
-    variant="link"
-    :items="items"
-    :class="props.class"
-    :unmount-on-hide="false"
-    :ui="transformUI(ui())"
-    @update:model-value="onUpdateModelValue"
-  >
-    <template #content="{ item }">
-      <component :is="item.component" />
-    </template>
-  </UTabs>
+  <UTabs
+    v-model="model"
+    color="primary"
+    variant="link"
+    :items="items"
+    :class="props.class"
+    :unmount-on-hide="false"
+    :ui="transformUI(ui())"
+    @update:model-value="onUpdateModelValue"
+  >
+    <template #content="{ item }">
+      <component :is="item.component" />
+    </template>
+  </UTabs>
 </template>

package/dist/runtime/components/prose/TabsItem.vue

@@ -17,9 +17,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.tabsIt
 </script>
 
 <template>
-  <div :class="ui({ class: props.class })">
-    <slot>
-      {{ description }}
-    </slot>
-  </div>
+  <div :class="ui({ class: props.class })">
+    <slot>
+      {{ description }}
+    </slot>
+  </div>
 </template>

package/dist/runtime/components/prose/Tbody.vue

@@ -15,7 +15,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.tbody
 </script>
 
 <template>
-  <tbody :class="ui({ class: props.class })">
-    <slot />
-  </tbody>
+  <tbody :class="ui({ class: props.class })">
+    <slot />
+  </tbody>
 </template>