@bitrix24/b24ui-nuxt 0.4.1 → 0.4.3

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.CnMGpwQb.cjs');
+const templates = require('./shared/b24ui-nuxt.C1tIhR9w.cjs');
 require('node:url');
 require('scule');
 
@@ -48,7 +48,7 @@ const module$1 = kit.defineNuxtModule({
     });
     kit.addComponentsDir({
       path: resolve("./runtime/prose"),
-      prefix: "",
+      prefix: "Prose",
       pathPrefix: false
     });
     kit.addImportsDir(resolve("./runtime/composables"));

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.13.1"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.BGGwh89R.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.BRwBcdAH.mjs';
 import 'node:url';
 import 'scule';
 
@@ -45,7 +45,7 @@ const module = defineNuxtModule({
     });
     addComponentsDir({
       path: resolve("./runtime/prose"),
-      prefix: "",
+      prefix: "Prose",
       pathPrefix: false
     });
     addImportsDir(resolve("./runtime/composables"));

package/dist/runtime/components/Avatar.vue

@@ -31,6 +31,7 @@ export interface AvatarProps {
    */
   size?: AvatarVariants['size']
   class?: any
+  style?: any
   b24ui?: Partial<typeof avatar.slots>
 }
 
@@ -90,7 +91,7 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })" :style="props.style">
     <component
       :is="ImageComponent"
       v-if="src && !error"

package/dist/runtime/components/Button.vue

@@ -21,10 +21,12 @@ export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | '
    * @defaultValue 'default'
    */
   color?: ButtonVariants['color']
+  activeColor?: ButtonVariants['color']
   /**
    * @defaultValue 'normal'
    */
   depth?: ButtonVariants['depth']
+  activeDepth?: ButtonVariants['depth']
   /**
    * @defaultValue 'md'
    */
@@ -66,6 +68,16 @@ export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | '
   useDropdown?: boolean
   onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
   class?: any
+  /**
+   * The class to apply when the link is active
+   * @defaultValue ''
+   */
+  activeClass?: string
+  /**
+   * The class to apply when the link is inactive
+   * @defaultValue ''
+   */
+  inactiveClass?: string
   b24ui?: PartialString<typeof button.slots>
 }
 
@@ -92,7 +104,10 @@ import LoaderClockIcon from '@bitrix24/b24icons-vue/animated/LoaderClockIcon'
 import SpinnerIcon from '@bitrix24/b24icons-vue/specialized/SpinnerIcon'
 
 const props = withDefaults(defineProps<ButtonProps>(), {
-  type: 'button'
+  type: 'button',
+  active: undefined,
+  activeClass: '',
+  inactiveClass: ''
 })
 
 const slots = defineSlots<ButtonSlots>()
@@ -132,7 +147,19 @@ const isLabel = computed(() => {
   return (props?.label || '').length > 0 || isUseSlot
 })
 
-const b24ui = computed(() => button({
+const b24ui = computed(() => tv({
+  extend: button,
+  variants: {
+    active: {
+      true: {
+        base: props.activeClass
+      },
+      false: {
+        base: props.inactiveClass
+      }
+    }
+  }
+})({
   color: props.color,
   depth: props.depth,
   size: buttonSize.value,
@@ -152,54 +179,65 @@ const b24ui = computed(() => button({
 
 <template>
   <B24Link
+    v-slot="{ active, ...slotProps }"
     :type="type"
     :disabled="disabled || isLoading"
     :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
     v-bind="omit(linkProps, ['type', 'disabled'])"
-    raw
-    @click="onClickWrapper"
+    custom
   >
-    <div
-      v-if="isLoading"
-      class="h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center"
-    >
-      <LoaderWaitIcon v-if="useWait" class="w-[28px] h-[28px]" aria-hidden="true" />
-      <LoaderClockIcon v-else-if="useClock" class="w-[28px] h-[28px]" aria-hidden="true" />
-      <SpinnerIcon v-else class="size-lg animate-spin stroke-2" aria-hidden="true" />
-    </div>
-    <div
-      :class="[
-        b24ui.baseLine({ class: [props.b24ui?.baseLine] }),
-        isLoading ? 'invisible' : ''
-      ]"
+    <B24LinkBase
+      v-bind="slotProps"
+      :class="b24ui.base({
+        class: [props.class, props.b24ui?.base],
+        active,
+        ...(active && activeDepth ? { depth: activeDepth } : {}),
+        ...(active && activeColor ? { color: activeColor } : {})
+      })"
+      @click="onClickWrapper"
     >
-      <slot name="leading">
-        <Component
-          :is="leadingIconName"
-          v-if="isLeading && (typeof leadingIconName !== 'undefined')"
-          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
-        />
-        <B24Avatar
-          v-else-if="!!avatar"
-          :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
-          v-bind="avatar"
-          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
-        />
-      </slot>
-
-      <slot>
-        <span v-if="label" :class="b24ui.label({ class: props.b24ui?.label })">
-          {{ label }}
-        </span>
-      </slot>
-
-      <slot name="trailing">
-        <ChevronDownIcon
-          v-if="useDropdown"
-          :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
-          aria-hidden="true"
-        />
-      </slot>
-    </div>
+      <div
+        v-if="isLoading"
+        class="h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center"
+      >
+        <LoaderWaitIcon v-if="useWait" class="w-[28px] h-[28px]" aria-hidden="true" />
+        <LoaderClockIcon v-else-if="useClock" class="w-[28px] h-[28px]" aria-hidden="true" />
+        <SpinnerIcon v-else class="size-lg animate-spin stroke-2" aria-hidden="true" />
+      </div>
+      <div
+        :class="[
+          b24ui.baseLine({ class: [props.b24ui?.baseLine] }),
+          isLoading ? 'invisible' : ''
+        ]"
+      >
+        <slot name="leading">
+          <Component
+            :is="leadingIconName"
+            v-if="isLeading && (typeof leadingIconName !== 'undefined')"
+            :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          />
+          <B24Avatar
+            v-else-if="!!avatar"
+            :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
+            v-bind="avatar"
+            :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+          />
+        </slot>
+
+        <slot>
+          <span v-if="label" :class="b24ui.label({ class: props.b24ui?.label, active })">
+            {{ label }}
+          </span>
+        </slot>
+
+        <slot name="trailing">
+          <ChevronDownIcon
+            v-if="useDropdown"
+            :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+            aria-hidden="true"
+          />
+        </slot>
+      </div>
+    </B24LinkBase>
   </B24Link>
 </template>

package/dist/runtime/components/Modal.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/modal'
@@ -10,6 +11,8 @@ const appConfigModal = _appConfig as AppConfig & { b24ui: { modal: Partial<typeo
 
 const modal = tv({ extend: tv(theme), ...(appConfigModal.b24ui?.modal || {}) })
 
+type ModalVariants = VariantProps<typeof modal>
+
 export interface ModalProps extends DialogRootProps {
   title?: string
   description?: string
@@ -22,6 +25,12 @@ export interface ModalProps extends DialogRootProps {
    * @defaultValue true
    */
   overlay?: boolean
+  /**
+   * Render an overlay blur behind the modal.
+   * `auto` use `motion-safe`.
+   * @defaultValue 'auto'
+   */
+  overlayBlur?: ModalVariants['overlayBlur']
   /**
    * Animate the modal when opening or closing.
    * @defaultValue true
@@ -93,7 +102,8 @@ const props = withDefaults(defineProps<ModalProps>(), {
   transition: true,
   modal: true,
   dismissible: true,
-  scrollbarThin: true
+  scrollbarThin: true,
+  overlayBlur: 'auto'
 })
 const emits = defineEmits<ModalEmits>()
 const slots = defineSlots<ModalSlots>()
@@ -119,7 +129,8 @@ const contentEvents = computed(() => {
 
 const b24ui = computed(() => modal({
   transition: props.transition,
-  fullscreen: props.fullscreen
+  fullscreen: props.fullscreen,
+  overlayBlur: props.overlayBlur
 }))
 </script>
 

package/dist/runtime/components/RadioGroup.vue

@@ -170,7 +170,9 @@ function onUpdate(value: any) {
 
         <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
           <Label :class="b24ui.label({ class: props.b24ui?.label })" :for="item.id">
-            <slot name="label" :item="item" :model-value="modelValue">{{ item.label }}</slot>
+            <slot name="label" :item="item" :model-value="modelValue">
+              {{ item.label }}
+            </slot>
           </Label>
           <p v-if="item.description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
             <slot name="description" :item="item" :model-value="modelValue">

package/dist/runtime/components/Slideover.vue

@@ -25,6 +25,12 @@ export interface SlideoverProps extends DialogRootProps {
    * @defaultValue true
    */
   overlay?: boolean
+  /**
+   * Render an overlay blur behind the slideover.
+   * `auto` use `motion-safe`.
+   * @defaultValue 'auto'
+   */
+  overlayBlur?: SlideoverVariants['overlayBlur']
   /**
    * Animate the slideover when opening or closing.
    * @defaultValue true
@@ -98,7 +104,8 @@ const props = withDefaults(defineProps<SlideoverProps>(), {
   modal: true,
   dismissible: true,
   side: 'right',
-  scrollbarThin: true
+  scrollbarThin: true,
+  overlayBlur: 'auto'
 })
 const emits = defineEmits<SlideoverEmits>()
 const slots = defineSlots<SlideoverSlots>()
@@ -124,7 +131,8 @@ const contentEvents = computed(() => {
 
 const b24ui = computed(() => slideover({
   transition: props.transition,
-  side: props.side
+  side: props.side,
+  overlayBlur: props.overlayBlur
 }))
 </script>
 

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -22,6 +22,6 @@ export interface UseComponentIconsProps {
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
     isLeading: import("vue").ComputedRef<any>;
     isTrailing: import("vue").ComputedRef<boolean>;
-    leadingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
-    trailingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
+    leadingIconName: import("vue").ComputedRef<IconComponent | undefined>;
+    trailingIconName: import("vue").ComputedRef<IconComponent | undefined>;
 };

package/dist/runtime/prose/A.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/a'
+import { tv } from '../utils/tv'
+
+const appConfigProseA = _appConfig as AppConfig & { b24ui: { prose: { a: Partial<typeof theme> } } }
+
+const proseA = tv({ extend: tv(theme), ...(appConfigProseA.b24ui?.prose?.a || {}) })
+
+export interface proseAProps {
+  class?: any
+  b24ui?: Partial<typeof proseA.slots>
+}
+
+export interface proseASlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseAProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseA({})
+</script>
+
+<template>
+  <a
+    :class="b24ui.base({ class: props.b24ui?.base })"
+  ><slot /></a>
+</template>

package/dist/runtime/prose/Blockquote.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/blockquote'
+import { tv } from '../utils/tv'
+
+const appConfigProseBlockquote = _appConfig as AppConfig & { b24ui: { prose: { blockquote: Partial<typeof theme> } } }
+
+const proseBlockquote = tv({ extend: tv(theme), ...(appConfigProseBlockquote.b24ui?.prose?.blockquote || {}) })
+
+export interface proseBlockquoteProps {
+  class?: any
+  b24ui?: Partial<typeof proseBlockquote.slots>
+}
+
+export interface proseBlockquoteSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseBlockquoteProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseBlockquote({})
+</script>
+
+<template>
+  <blockquote
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </blockquote>
+</template>

package/dist/runtime/prose/Code.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/code'
+import { tv } from '../utils/tv'
+
+const appConfigProseCode = _appConfig as AppConfig & { b24ui: { prose: { code: Partial<typeof theme> } } }
+
+const proseCode = tv({ extend: tv(theme), ...(appConfigProseCode.b24ui?.prose?.code || {}) })
+
+type ProseCodeVariants = VariantProps<typeof proseCode>
+
+export interface proseCodeProps {
+  /**
+   * @defaultValue 'default'
+   */
+  color?: ProseCodeVariants['color']
+  class?: any
+  b24ui?: Partial<typeof proseCode.slots>
+}
+
+export interface proseCodeSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<proseCodeProps>()
+
+const b24ui = computed(() => proseCode({
+  color: props.color
+}))
+</script>
+
+<template>
+  <code
+    :class="b24ui.base({ class: props.b24ui?.base })"
+  ><slot /></code>
+</template>

package/dist/runtime/prose/Em.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/em'
+import { tv } from '../utils/tv'
+
+const appConfigProseEm = _appConfig as AppConfig & { b24ui: { prose: { em: Partial<typeof theme> } } }
+
+const proseEm = tv({ extend: tv(theme), ...(appConfigProseEm.b24ui?.prose?.em || {}) })
+
+export interface proseEmProps {
+  class?: any
+  b24ui?: Partial<typeof proseEm.slots>
+}
+
+export interface proseEmSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseEmProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseEm({})
+</script>
+
+<template>
+  <em
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  ><slot /></em>
+</template>

package/dist/runtime/prose/{ProseH1.vue → H1.vue}

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/prose/prose-h1'
+import theme from '#build/b24ui/prose/h1'
 import { tv } from '../utils/tv'
 
 const appConfigProseH1 = _appConfig as AppConfig & { b24ui: { prose: { h1: Partial<typeof theme> } } }
@@ -19,8 +19,6 @@ export interface proseH1Slots {
 </script>
 
 <script setup lang="ts">
-defineOptions({ inheritAttrs: false })
-
 const props = defineProps<proseH1Props>()
 
 // eslint-disable-next-line vue/no-dupe-keys

package/dist/runtime/prose/{ProseH2.vue → H2.vue}

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/prose/prose-h2'
+import theme from '#build/b24ui/prose/h2'
 import { tv } from '../utils/tv'
 
 const appConfigProseH2 = _appConfig as AppConfig & { b24ui: { prose: { h2: Partial<typeof theme> } } }
@@ -19,8 +19,6 @@ export interface proseH2Slots {
 </script>
 
 <script setup lang="ts">
-defineOptions({ inheritAttrs: false })
-
 const props = defineProps<proseH2Props>()
 
 // eslint-disable-next-line vue/no-dupe-keys

package/dist/runtime/prose/{ProseH3.vue → H3.vue}

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/prose/prose-h3'
+import theme from '#build/b24ui/prose/h3'
 import { tv } from '../utils/tv'
 
 const appConfigProseH3 = _appConfig as AppConfig & { b24ui: { prose: { h3: Partial<typeof theme> } } }
@@ -19,8 +19,6 @@ export interface proseH3Slots {
 </script>
 
 <script setup lang="ts">
-defineOptions({ inheritAttrs: false })
-
 const props = defineProps<proseH3Props>()
 
 // eslint-disable-next-line vue/no-dupe-keys

package/dist/runtime/prose/H4.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/h4'
+import { tv } from '../utils/tv'
+
+const appConfigProseH4 = _appConfig as AppConfig & { b24ui: { prose: { h4: Partial<typeof theme> } } }
+
+const proseH4 = tv({ extend: tv(theme), ...(appConfigProseH4.b24ui?.prose?.h4 || {}) })
+
+export interface proseH4Props {
+  class?: any
+  b24ui?: Partial<typeof proseH4.slots>
+}
+
+export interface proseH4Slots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseH4Props>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseH4({})
+</script>
+
+<template>
+  <h4
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </h4>
+</template>

package/dist/runtime/prose/H5.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/h5'
+import { tv } from '../utils/tv'
+
+const appConfigProseH5 = _appConfig as AppConfig & { b24ui: { prose: { h5: Partial<typeof theme> } } }
+
+const proseH5 = tv({ extend: tv(theme), ...(appConfigProseH5.b24ui?.prose?.h5 || {}) })
+
+export interface proseH5Props {
+  class?: any
+  b24ui?: Partial<typeof proseH5.slots>
+}
+
+export interface proseH5Slots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseH5Props>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseH5({})
+</script>
+
+<template>
+  <h5
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </h5>
+</template>

package/dist/runtime/prose/H6.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/h6'
+import { tv } from '../utils/tv'
+
+const appConfigProseH6 = _appConfig as AppConfig & { b24ui: { prose: { h6: Partial<typeof theme> } } }
+
+const proseH6 = tv({ extend: tv(theme), ...(appConfigProseH6.b24ui?.prose?.h6 || {}) })
+
+export interface proseH6Props {
+  class?: any
+  b24ui?: Partial<typeof proseH6.slots>
+}
+
+export interface proseH6Slots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseH6Props>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseH6({})
+</script>
+
+<template>
+  <h6
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </h6>
+</template>

package/dist/runtime/prose/Hr.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/hr'
+import { tv } from '../utils/tv'
+
+const appConfigProseHr = _appConfig as AppConfig & { b24ui: { prose: { hr: Partial<typeof theme> } } }
+
+const proseHr = tv({ extend: tv(theme), ...(appConfigProseHr.b24ui?.prose?.hr || {}) })
+
+export interface proseHrProps {
+  class?: any
+  b24ui?: Partial<typeof proseHr.slots>
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseHrProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseHr({})
+</script>
+
+<template>
+  <hr
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+</template>