@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/code-collapse";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useLocale } from "../../composables/useLocale";
 import { tv } from "../../utils/tv";
 import icons from "../../dictionary/icons";
@@ -15,30 +16,31 @@ const props = defineProps({
   openText: { type: String, required: false },
   closeText: { type: String, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codeCollapse", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.codeCollapse || {} })({
   open: open.value
 }));
 </script>
 
 <template>
-  <div data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <div data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
     <slot />
 
-    <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
       <B24Button
         :icon="icon || icons.chevronDown"
         color="air-secondary-accent-1"
         :data-state="open ? 'open' : 'closed'"
         :label="`${open ? props.closeText || t('prose.codeCollapse.closeText') : props.openText || t('prose.codeCollapse.openText')} ${props.name || t('prose.codeCollapse.name')}`"
         data-slot="trigger"
-        :class="b24ui.trigger({ class: props.b24ui?.trigger })"
-        :b24ui="{ leadingIcon: b24ui.triggerIcon({ class: props.b24ui?.triggerIcon }) }"
+        :class="b24ui.trigger({ class: uiProp?.trigger })"
+        :b24ui="{ leadingIcon: b24ui.triggerIcon({ class: uiProp?.triggerIcon }) }"
         @click="open = !open"
       />
     </div>

package/dist/runtime/components/prose/CodeCollapse.vue.d.ts

@@ -30,6 +30,8 @@ export interface ProseCodeCollapseProps {
 export interface ProseCodeCollapseSlots {
     default(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeCollapseProps & {
     open?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -39,8 +41,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseC
 }> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeCollapseSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -18,6 +18,8 @@ export interface ProseCodeGroupProps {
 export interface ProseCodeGroupSlots {
     default(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeGroupProps & {
     modelValue?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -26,9 +28,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseC
     modelValue?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeGroupSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    defaultValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -6,17 +6,19 @@ import theme from "#build/b24ui/prose/code-group";
 import { computed, watch, onMounted, ref, onBeforeUpdate } from "vue";
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from "reka-ui";
 import { useState, useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import B24CodeIcon from "./CodeIcon.vue";
 const props = defineProps({
   defaultValue: { type: String, required: false, default: "0" },
   sync: { type: String, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const model = defineModel({ type: String });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codeGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.codeGroup || {} })());
 const rerenderCount = ref(1);
 const items = computed(() => {
@@ -52,14 +54,14 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <TabsList data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
-      <TabsIndicator data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })" />
+  <TabsRoot v-model="model" :default-value="defaultValue" :unmount-on-hide="false" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <TabsList data-slot="list" :class="b24ui.list({ class: uiProp?.list })">
+      <TabsIndicator data-slot="indicator" :class="b24ui.indicator({ class: uiProp?.indicator })" />
 
-      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" data-slot="trigger" :class="b24ui.trigger({ class: props.b24ui?.trigger })">
-        <B24CodeIcon :icon="item.icon" :filename="item.label" data-slot="triggerIcon" :class="b24ui.triggerIcon({ class: props.b24ui?.triggerIcon })" />
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" data-slot="trigger" :class="b24ui.trigger({ class: uiProp?.trigger })">
+        <B24CodeIcon :icon="item.icon" :filename="item.label" data-slot="triggerIcon" :class="b24ui.triggerIcon({ class: uiProp?.triggerIcon })" />
 
-        <span data-slot="triggerLabel" :class="b24ui.triggerLabel({ class: props.b24ui?.triggerLabel })">{{ item.label }}</span>
+        <span data-slot="triggerLabel" :class="b24ui.triggerLabel({ class: uiProp?.triggerLabel })">{{ item.label }}</span>
       </TabsTrigger>
     </TabsList>
 

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

@@ -18,6 +18,8 @@ export interface ProseCodeGroupProps {
 export interface ProseCodeGroupSlots {
     default(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCodeGroupProps & {
     modelValue?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -26,9 +28,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseC
     modelValue?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeGroupSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    defaultValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodeGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -4,6 +4,6 @@ export interface ProseCodeIconProps {
     iconName?: string;
     filename?: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<ProseCodeIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodeIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ProseCodeIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodeIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -4,6 +4,6 @@ export interface ProseCodeIconProps {
     iconName?: string;
     filename?: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<ProseCodeIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodeIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ProseCodeIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodeIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -10,9 +10,9 @@ export interface ProseCodePreviewSlots {
     default(props?: {}): any;
     code(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCodePreviewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodePreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodePreviewSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCodePreviewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodePreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodePreviewSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,23 +5,25 @@ import theme from "#build/b24ui/prose/code-preview";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.codePreview", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.codePreview || {} })({ code: !!slots.code }));
 </script>
 
 <template>
-  <div data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="preview" :class="b24ui.preview({ class: [props.b24ui?.preview] })">
+  <div data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="preview" :class="b24ui.preview({ class: [uiProp?.preview] })">
       <slot />
     </div>
 
-    <div v-if="!!slots.code" data-slot="code" :class="b24ui.code({ class: [props.b24ui?.code] })">
+    <div v-if="!!slots.code" data-slot="code" :class="b24ui.code({ class: [uiProp?.code] })">
       <slot name="code" />
     </div>
   </div>

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

@@ -10,9 +10,9 @@ export interface ProseCodePreviewSlots {
     default(props?: {}): any;
     code(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCodePreviewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodePreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodePreviewSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCodePreviewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCodePreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCodePreviewSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -30,9 +30,9 @@ export interface ProseCollapsibleProps {
 export interface ProseCollapsibleSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCollapsibleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCollapsibleSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCollapsibleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCollapsibleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/prose/collapsible";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { useLocale } from "../../composables/useLocale";
 import { transformUI } from "../../utils";
 import { tv } from "../../utils/tv";
@@ -16,24 +17,25 @@ const props = defineProps({
   openText: { type: String, required: false },
   closeText: { type: String, required: false },
   class: { type: null, required: false },
-  b24ui: { type: void 0, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.collapsible", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.collapsible || {} })());
 </script>
 
 <template>
-  <B24Collapsible :unmount-on-hide="false" :class="props.class" :b24ui="transformUI(b24ui, props.b24ui)">
+  <B24Collapsible :unmount-on-hide="false" :class="props.class" :b24ui="transformUI(b24ui, uiProp)">
     <template #default="{ open }">
-      <button data-slot="trigger" :class="b24ui.trigger({ class: props.b24ui?.trigger })">
+      <button data-slot="trigger" :class="b24ui.trigger({ class: uiProp?.trigger })">
         <Component
           :is="icon || icons.chevronDown"
           data-slot="triggerIcon"
-          :class="b24ui.triggerIcon({ class: props.b24ui?.triggerIcon })"
+          :class="b24ui.triggerIcon({ class: uiProp?.triggerIcon })"
         />
-        <span data-slot="triggerLabel" :class="b24ui.triggerLabel({ class: props.b24ui?.triggerLabel })">
+        <span data-slot="triggerLabel" :class="b24ui.triggerLabel({ class: uiProp?.triggerLabel })">
           {{ open ? props.closeText || t("prose.collapsible.closeText") : props.openText || t("prose.collapsible.openText") }} {{ props.name || t("prose.collapsible.name") }}
         </span>
       </button>

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

@@ -30,9 +30,9 @@ export interface ProseCollapsibleProps {
 export interface ProseCollapsibleSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCollapsibleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCollapsibleSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseCollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseCollapsibleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseCollapsibleSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -6,15 +6,12 @@ export interface ProseEmProps {
     class?: any;
     b24ui?: ProseEm['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface ProseEmSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseEmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseEmProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseEmSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseEmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseEmProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseEmSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,18 +5,20 @@ import theme from "#build/b24ui/prose/em";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.em", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.em || {} })());
 </script>
 
 <template>
-  <em data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })">
+  <em data-slot="base" :class="b24ui.base({ class: [uiProp?.base, props.class] })">
     <slot />
   </em>
 </template>

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

@@ -6,15 +6,12 @@ export interface ProseEmProps {
     class?: any;
     b24ui?: ProseEm['slots'];
 }
-/**
- * @todo add Pick<Xxxx
- */
 export interface ProseEmSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseEmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseEmProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseEmSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseEmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseEmProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseEmSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -30,9 +30,9 @@ export interface ProseFieldProps {
 export interface ProseFieldSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/prose/field";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -14,32 +15,33 @@ const props = defineProps({
   description: { type: String, required: false },
   required: { type: Boolean, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.field", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.field || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
-      <span v-if="name" data-slot="name" :class="b24ui.name({ class: props.b24ui?.name })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <span v-if="name" data-slot="name" :class="b24ui.name({ class: uiProp?.name })">
         {{ name }}
       </span>
 
-      <div v-if="type || required" data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-        <span v-if="type" data-slot="type" :class="b24ui.type({ class: props.b24ui?.type })">
+      <div v-if="type || required" data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+        <span v-if="type" data-slot="type" :class="b24ui.type({ class: uiProp?.type })">
           {{ type }}
         </span>
 
-        <span v-if="required" data-slot="required" :class="b24ui.required({ class: props.b24ui?.required })">
+        <span v-if="required" data-slot="required" :class="b24ui.required({ class: uiProp?.required })">
           required
         </span>
       </div>
     </div>
 
-    <div v-if="!!slots.default || description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+    <div v-if="!!slots.default || description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
       <slot mdc-unwrap="p">
         {{ description }}
       </slot>

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

@@ -30,9 +30,9 @@ export interface ProseFieldProps {
 export interface ProseFieldSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,13 +5,16 @@ export interface ProseFieldGroupProps {
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface ProseFieldGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -6,18 +6,21 @@ import theme from "#build/b24ui/prose/field-group";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.fieldGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.fieldGroup || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui({ class: props.class })">
+  <Primitive :as="as" :class="b24ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -5,13 +5,16 @@ export interface ProseFieldGroupProps {
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface ProseFieldGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseFieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseFieldGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseFieldGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -14,9 +14,11 @@ export interface ProseH1Props {
 export interface ProseH1Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH1Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH1Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH1Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH1Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH1Props> & Readonly<{}>, {
+    accent: ProseH1["variants"]["accent"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH1Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,15 +5,17 @@ import theme from "#build/b24ui/prose/h1";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig, useRuntimeConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 const props = defineProps({
   id: { type: String, required: false },
   accent: { type: null, required: false, default: "default" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h1", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.h1 || {} })({
   accent: props.accent
@@ -25,9 +27,9 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === "ob
   <h1
     :id="id"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
-    <a v-if="id && generate" :href="`#${id}`" :class="b24ui.link({ class: props.b24ui?.link })">
+    <a v-if="id && generate" :href="`#${id}`" :class="b24ui.link({ class: uiProp?.link })">
       <slot />
     </a>
     <slot v-else />

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

@@ -14,9 +14,11 @@ export interface ProseH1Props {
 export interface ProseH1Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH1Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH1Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH1Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH1Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH1Props> & Readonly<{}>, {
+    accent: ProseH1["variants"]["accent"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH1Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -14,9 +14,11 @@ export interface ProseH2Props {
 export interface ProseH2Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH2Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH2Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH2Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH2Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH2Props> & Readonly<{}>, {
+    accent: ProseH2["variants"]["accent"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH2Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,16 +5,18 @@ import theme from "#build/b24ui/prose/h2";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig, useRuntimeConfig } from "#imports";
+import { useComponentUI } from "../../composables/useComponentUI";
 import { tv } from "../../utils/tv";
 import icons from "../../dictionary/icons";
 const props = defineProps({
   id: { type: String, required: false },
   accent: { type: null, required: false, default: "default" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("prose.h2", props);
 const { headings } = useRuntimeConfig().public?.mdc || {};
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.h2 || {} })({
   accent: props.accent
@@ -26,14 +28,14 @@ const generate = computed(() => props.id && typeof headings?.anchorLinks === "ob
   <h2
     :id="id"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
-    <a v-if="id && generate" :href="`#${id}`" data-slot="link" :class="b24ui.link({ class: props.b24ui?.link })">
-      <span data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+    <a v-if="id && generate" :href="`#${id}`" data-slot="link" :class="b24ui.link({ class: uiProp?.link })">
+      <span data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
         <Component
           :is="icons.hash"
           data-slot="leadingIcon"
-          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
         />
       </span>
 

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

@@ -14,9 +14,11 @@ export interface ProseH2Props {
 export interface ProseH2Slots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH2Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH2Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH2Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProseH2Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseH2Props> & Readonly<{}>, {
+    accent: ProseH2["variants"]["accent"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProseH2Slots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;