@bitrix24/b24ui-nuxt 0.4.0 → 0.4.2

package/dist/module.cjs

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

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.0",
+  "version": "0.4.2",
   "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.CBO0gAWn.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.Bx_-_mhu.mjs';
 import 'node:url';
 import 'scule';
 
@@ -43,6 +43,11 @@ const module = defineNuxtModule({
       prefix: "B24",
       pathPrefix: false
     });
+    addComponentsDir({
+      path: resolve("./runtime/prose"),
+      prefix: "Prose",
+      pathPrefix: false
+    });
     addImportsDir(resolve("./runtime/composables"));
     addTemplates(options, nuxt, resolve);
   }

package/dist/runtime/components/Advice.vue

@@ -20,6 +20,9 @@ export interface AdviceProps extends Omit<UseComponentIconsProps, 'loading' | 't
    */
   as?: any
   description?: string
+  /**
+   * @defaultValue 'bottom'
+   */
   angle?: AdviceVariants['angle']
   class?: any
   b24ui?: Partial<typeof advice.slots>

package/dist/runtime/components/Alert.vue

@@ -20,21 +20,35 @@ export interface AlertProps {
   as?: any
   title?: string
   description?: string
+  /**
+   * Display an icon on the left side.
+   * @IconComponent
+   */
   icon?: IconComponent
   avatar?: AvatarProps
+  /**
+   * @defaultValue 'default'
+   */
   color?: AlertVariants['color']
+  /**
+   * The orientation between the content and the actions.
+   * @defaultValue 'vertical'
+   */
   orientation?: AlertVariants['orientation']
+  /**
+   * @defaultValue 'md'
+   */
   size?: AlertVariants['size']
   /**
    * Display a list of actions:
    * - under the title and description when orientation is `vertical`
    * - next to the close button when orientation is `horizontal`
-   * `{ size: 'xs' }`{lang="ts-type"}
+   * `{ size: 'xs' }`{lang="ts"}
    */
   actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the alert.
-   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts"}
    * @emits 'update:open'
    * @defaultValue false
    */
@@ -42,6 +56,7 @@ export interface AlertProps {
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
+   * @IconComponent
    */
   closeIcon?: IconComponent
   class?: any

package/dist/runtime/components/Avatar.vue

@@ -20,8 +20,15 @@ export interface AvatarProps {
   as?: any
   src?: string
   alt?: string
+  /**
+   * Display an icon on the left side.
+   * @IconComponent
+   */
   icon?: IconComponent
   text?: string
+  /**
+   * @defaultValue 'md'
+   */
   size?: AvatarVariants['size']
   class?: any
   b24ui?: Partial<typeof avatar.slots>

package/dist/runtime/components/AvatarGroup.vue

@@ -17,6 +17,9 @@ export interface AvatarGroupProps {
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: AvatarGroupVariants['size']
   /**
    * The maximum number of avatars to display.

package/dist/runtime/components/Badge.vue

@@ -20,15 +20,33 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
    */
   as?: any
   label?: string | number
+  /**
+   * @defaultValue 'default'
+   */
   color?: BadgeVariants['color']
+  /**
+   * @defaultValue 'normal'
+   */
   depth?: BadgeVariants['depth']
+  /**
+   * @defaultValue 'md'
+   */
   size?: BadgeVariants['size']
-  /** Shows 'underline' on hover */
+  /**
+   * Shows 'underline' on hover
+   * @defaultValue false
+   */
   useLink?: boolean
-  /** Shows `Cross20Icon` icon on the right side */
+  /**
+   * Shows icons.close on the right side
+   * @defaultValue false
+   */
   useClose?: boolean
   onCloseClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
-  /** Fills the background */
+  /**
+   * Fills the background
+   * @defaultValue false
+   */
   useFill?: boolean
   class?: any
   b24ui?: Partial<typeof badge.slots>

package/dist/runtime/components/Button.vue

@@ -17,25 +17,67 @@ type ButtonVariants = VariantProps<typeof button>
 
 export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | 'trailingIcon'>, Omit<LinkProps, 'raw' | 'custom'> {
   label?: string
+  /**
+   * @defaultValue 'default'
+   */
   color?: ButtonVariants['color']
+  activeColor?: ButtonVariants['color']
+  /**
+   * @defaultValue 'normal'
+   */
   depth?: ButtonVariants['depth']
+  activeDepth?: ButtonVariants['depth']
+  /**
+   * @defaultValue 'md'
+   */
   size?: ButtonVariants['size']
-  /** Rounds the corners of the button. */
+  /**
+   * Rounds the corners of the button
+   * @defaultValue false
+   */
   rounded?: boolean
-  /** Render the button full width. */
+  /**
+   * Render the button full width
+   * @defaultValue false
+   */
   block?: boolean
-  /** Set loading state automatically based on the `@click` promise state */
+  /**
+   * Set loading state automatically based on the `@click` promise state
+   * @defaultValue false
+   */
   loadingAuto?: boolean
-  /** Disable uppercase label */
+  /**
+   * Disable uppercase label
+   * @defaultValue false
+   */
   normalCase?: boolean
-  /** Shows `Wait` icon in loading mode */
+  /**
+   * Shows LoaderWaitIcon in loading mode
+   * @defaultValue false
+   */
   useWait?: boolean
-  /** Shows `Clock` icon in loading mode */
+  /**
+   * Shows LoaderClockIcon icon in loading mode
+   * @defaultValue false
+   */
   useClock?: boolean
-  /** Shows `ChevronDownIcon` icon on the right side */
+  /**
+   * Shows icons.chevronDown on the right side
+   * @defaultValue false
+   */
   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>
 }
 
@@ -62,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>()
@@ -102,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,
@@ -122,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/ButtonGroup.vue

@@ -17,13 +17,19 @@ export interface ButtonGroupProps {
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: ButtonGroupVariants['size']
   /**
    * The orientation the buttons are laid out.
    * @defaultValue 'horizontal'
    */
   orientation?: ButtonGroupVariants['orientation']
-  /** Disable split */
+  /**
+   * Disable show split
+   * @defaultValue false
+   */
   noSplit?: boolean
   class?: any
 }

package/dist/runtime/components/Checkbox.vue

@@ -20,7 +20,13 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
   as?: any
   label?: string
   description?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: CheckboxVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: CheckboxVariants['size']
   class?: any
   b24ui?: Partial<typeof checkbox.slots>

package/dist/runtime/components/Chip.vue

@@ -19,12 +19,28 @@ export interface ChipProps {
   as?: any
   /** Display some text inside the chip. */
   text?: string | number
+  /**
+   * @defaultValue 'danger'
+   */
   color?: ChipVariants['color']
+  /**
+   * @defaultValue 'sm'
+   */
   size?: ChipVariants['size']
+  /**
+   * The position of the chip.
+   * @defaultValue 'top-right'
+   */
   position?: ChipVariants['position']
-  /** When `true`, keep the chip inside the component for rounded elements */
+  /**
+   * When `true`, keep the chip inside the component for rounded elements
+   * @defaultValue false
+   */
   inset?: boolean
-  /** When `true`, render the chip relatively to the parent. */
+  /**
+   * When `true`, render the chip relatively to the parent.
+   * @defaultValue false
+   */
   standalone?: boolean
   class?: any
   b24ui?: Partial<typeof chip.slots>

package/dist/runtime/components/Countdown.vue

@@ -28,24 +28,48 @@ export interface CountdownData {
 
 export interface CountdownProps extends Omit<UseComponentIconsProps, 'loading' | 'trailing' | 'trailingIcon'> {
   /**
-   * The element or component this component should render as.
+   * The element or component this component should render as
    * @defaultValue 'span'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: CountdownVariants['size']
-  /** Emits the countdown events. */
+  /**
+   * Emits the countdown events
+   * @defaultValue true
+   */
   emitEvents?: boolean
-  /** Number of seconds to countdown. */
+  /**
+   * Number of seconds to countdown
+   * @defaultValue 0
+   */
   seconds?: number | string
-  /** Should seconds be divided into minutes? */
+  /**
+   * Should seconds be divided into minutes?
+   * @defaultValue true
+   */
   showMinutes?: boolean
-  /** Shows a `Circle` around the countdown */
+  /**
+   * Shows a `Circle` around the countdown
+   * @defaultValue false
+   */
   useCircle?: boolean
-  /** The interval time (in milliseconds) of the countdown progress. */
+  /**
+   * The interval time (in milliseconds) of the countdown progress
+   * @defaultValue 1000
+   */
   interval?: number
-  /** Starts the countdown automatically when initialized. */
+  /**
+   * Starts the countdown automatically when initialized
+   * @defaultValue true
+   */
   needStartImmediately?: boolean
-  /** Generate the current time of a specific time zone. */
+  /**
+   * Generate the current time of a specific time zone
+   * @defaultValue Date.now()
+   */
   now?: () => number
   class?: any
   b24ui?: Partial<typeof countdown.slots>

package/dist/runtime/components/{content/DescriptionList.vue → DescriptionList.vue}

@@ -2,10 +2,10 @@
 import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/content/description-list'
-import { tv } from '../../utils/tv'
-import type { AvatarProps, ButtonProps, IconComponent } from '../../types'
-import type { DynamicSlots } from '../../types/utils'
+import theme from '#build/b24ui/description-list'
+import { tv } from '../utils/tv'
+import type { AvatarProps, ButtonProps, IconComponent } from '../types'
+import type { DynamicSlots } from '../types/utils'
 
 const appConfigDescriptionList = _appConfig as AppConfig & { b24ui: { descriptionList: Partial<typeof theme> } }
 
@@ -15,16 +15,24 @@ type DescriptionListVariants = VariantProps<typeof descriptionList>
 
 export interface DescriptionListItem {
   label?: string
+  /**
+   * Display an icon on the left side.
+   * @IconComponent
+   */
   icon?: IconComponent
   avatar?: AvatarProps
   slot?: string
   description?: string
+  /**
+   * The orientation between the content and the actions.
+   * @defaultValue 'vertical'
+   */
   orientation?: DescriptionListVariants['orientation']
   /**
    * Display a list of actions:
    * - under the description when orientation is `vertical`
    * - next to the description when orientation is `horizontal`
-   * `{ size: 'xs' }`{lang="ts-type"}
+   * `{ size: 'xs' }`{lang="ts"}
    */
   actions?: ButtonProps[]
   class?: any
@@ -45,6 +53,9 @@ export interface DescriptionListProps<T> {
    */
   descriptionKey?: string
   items?: T[]
+  /**
+   * @defaultValue 'md'
+   */
   size?: DescriptionListVariants['size']
   class?: any
   b24ui?: Partial<typeof descriptionList.slots>
@@ -65,9 +76,9 @@ export type DescriptionListSlots<T extends { slot?: string }> = {
 
 <script setup lang="ts" generic="T extends DescriptionListItem">
 import { computed } from 'vue'
-import { get } from '../../utils'
-import B24Avatar from '../Avatar.vue'
-import B24Button from '../Button.vue'
+import { get } from '../utils'
+import B24Avatar from './Avatar.vue'
+import B24Button from './Button.vue'
 
 const props = withDefaults(defineProps<DescriptionListProps<T>>(), {
   labelKey: 'label',

package/dist/runtime/components/DropdownMenu.vue

@@ -16,6 +16,10 @@ type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
 
 export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
   label?: string
+  /**
+   * Display an icon on the left side.
+   * @IconComponent
+   */
   icon?: IconComponent
   color?: DropdownMenuVariants['color']
   avatar?: AvatarProps
@@ -38,17 +42,22 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
 }
 
 export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'> {
+  /**
+   * @defaultValue 'md'
+   */
   size?: DropdownMenuVariants['size']
   items?: T[] | T[][]
   /**
    * The icon displayed when an item is checked.
-   * @defaultValue icons.check = `CheckIcon`
+   * @defaultValue icons.check
+   * @IconComponent
    */
   checkedIcon?: IconComponent
   /**
    * The icon displayed when the item is an external link.
    * Set to `false` to hide the external icon.
-   * @defaultValue icons.external = `OpenIn50Icon`
+   * @defaultValue icons.external
+   * @IconComponent
    */
   externalIcon?: boolean | IconComponent
   /**
@@ -71,6 +80,9 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
    * @defaultValue 'label'
    */
   labelKey?: string
+  /**
+   * @defaultValue false
+   */
   disabled?: boolean
   class?: any
   b24ui?: PartialString<typeof dropdownMenu.slots>

package/dist/runtime/components/DropdownMenuContent.vue

@@ -12,7 +12,13 @@ interface DropdownMenuContentProps<T> extends Omit<RekaDropdownMenuContentProps,
   portal?: boolean
   sub?: boolean
   labelKey: string
+  /**
+   * @IconComponent
+   */
   checkedIcon?: IconComponent
+  /**
+   * @IconComponent
+   */
   externalIcon?: boolean | IconComponent
   class?: any
   b24ui: typeof _dropdownMenu

package/dist/runtime/components/FormField.vue

@@ -26,7 +26,13 @@ export interface FormFieldProps {
   help?: string
   error?: string | boolean
   hint?: string
+  /**
+   * @defaultValue 'md'
+   */
   size?: FormFieldVariants['size']
+  /**
+   * @defaultValue false
+   */
   required?: boolean
   eagerValidation?: boolean
   validateOnInputDelay?: number