@bitrix24/b24ui-nuxt 0.4.0 → 0.4.2

package/dist/runtime/components/SelectMenu.vue

@@ -17,6 +17,10 @@ type SelectMenuVariants = VariantProps<typeof selectMenu>
 
 export interface SelectMenuItem {
   label?: string
+  /**
+   * Display an icon on the left side.
+   * @IconComponent
+   */
   icon?: IconComponent
   avatar?: AvatarProps
   color?: SelectMenuVariants['color']
@@ -37,31 +41,57 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
   /**
    * Whether to display the search input or not.
    * Can be an object to pass additional props to the input.
-   * `{ placeholder: 'Search...', type: 'search' }`{lang="ts-type"}
+   * `{ placeholder: 'Search...', type: 'search' }`{lang="ts"}
    * @defaultValue true
    */
   searchInput?: boolean | InputProps
+  /**
+   * @defaultValue 'primary'
+   */
   color?: SelectMenuVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: SelectMenuVariants['size']
-  /** Removes padding from input. */
+  /**
+   * Removes padding from input
+   * @defaultValue false
+   */
   noPadding?: boolean
-  /** removes all borders (rings). */
+  /**
+   * Removes all borders (rings)
+   * @defaultValue false
+   */
   noBorder?: boolean
-  /** removes all borders (rings) except the bottom one. */
+  /**
+   * Removes all borders (rings) except the bottom one
+   * @defaultValue false
+   */
   underline?: boolean
-  /** Rounds the corners of the button. */
+  /**
+   * Rounds the corners of the button
+   * @defaultValue false
+   */
   rounded?: boolean
   tag?: string
+  /**
+   * @defaultValue 'primary'
+   */
   tagColor?: SelectMenuVariants['tagColor']
+  /**
+   * @defaultValue false
+   */
   required?: boolean
   /**
    * The icon displayed to open the menu.
-   * @defaultValue icons.chevronDown = `ChevronDownIcon`
+   * @defaultValue icons.chevronDown
+   * @IconComponent
    */
   trailingIcon?: IconComponent
   /**
    * The icon displayed when an item is selected.
-   * @defaultValue icons.check = `CheckIcon`
+   * @defaultValue icons.check
+   * @IconComponent
    */
   selectedIcon?: IconComponent
   /**
@@ -90,13 +120,23 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
    */
   labelKey?: V
   items?: I
-  /** The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu. */
+  /**
+   * The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu
+   */
   defaultValue?: SelectModelValue<T, V, M>
-  /** The controlled value of the SelectMenu. Can be binded-with with `v-model`. */
+  /**
+   * The controlled value of the SelectMenu. Can be binded-with with `v-model`
+   */
   modelValue?: SelectModelValue<T, V, M>
-  /** Whether multiple options can be selected or not. */
+  /**
+   * Whether multiple options can be selected or not
+   * @defaultValue false
+   */
   multiple?: M & boolean
-  /** Highlight the ring color like a focus state. */
+  /**
+   * Highlight the ring color like a focus state
+   * @defaultValue false
+   */
   highlight?: boolean
   /**
    * Determines if custom user input that does not exist in options can be added.
@@ -189,7 +229,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const { t } = useLocale()
 const { contains } = useFilter({ sensitivity: 'base' })
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur', 'highlightOnHover'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'highlightOnHover'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
 const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t('selectMenu.search'), type: 'search' }) as InputProps)

package/dist/runtime/components/Separator.vue

@@ -21,12 +21,26 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
   as?: any
   /** Display a label in the middle. */
   label?: string
-  /** Display an icon in the middle. */
+  /**
+   * Display an icon in the middle
+   * @IconComponent
+   */
   icon?: IconComponent
-  /** Display an avatar in the middle. */
+  /**
+   * Display an avatar in the middle
+   */
   avatar?: AvatarProps
+  /**
+   * @defaultValue 'default'
+   */
   color?: SeparatorVariants['color']
+  /**
+   * @defaultValue 'xs'
+   */
   size?: SeparatorVariants['size']
+  /**
+   * @defaultValue 'solid'
+   */
   type?: SeparatorVariants['type']
   /**
    * The orientation of the separator.

package/dist/runtime/components/Slideover.vue

@@ -16,18 +16,30 @@ type SlideoverVariants = VariantProps<typeof slideover>
 export interface SlideoverProps extends DialogRootProps {
   title?: string
   description?: string
-  /** The content of the slideover. */
+  /**
+   * The content of the slideover
+   */
   content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
   /**
    * Render an overlay behind the slideover.
    * @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
    */
   transition?: boolean
+  /**
+   * The side of the slideover.
+   * @defaultValue 'right'
+   */
   side?: SlideoverVariants['side']
   /**
    * Render the slideover in a portal.
@@ -44,13 +56,17 @@ export interface SlideoverProps extends DialogRootProps {
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
+   * @IconifyIcon
    */
   closeIcon?: IconComponent
   /**
    * When `false`, the slideover will not close when clicking outside or pressing escape.
-   * @defaultValue true
+   * @defaultValue false
    */
   dismissible?: boolean
+  /**
+   * @defaultValue true
+   */
   scrollbarThin?: boolean
   class?: any
   b24ui?: Partial<typeof slideover.slots>
@@ -88,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>()
@@ -114,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/components/Switch.vue

@@ -20,18 +20,34 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'primary'
+   */
   color?: SwitchVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: SwitchVariants['size']
-  /** When `true`, the loading icon will be displayed. */
+  /**
+   * When `true`, the loading icon will be displayed
+   * @defaultValue false
+   */
   loading?: boolean
   /**
    * The icon when the `loading` prop is `true`.
    * @defaultValue icons.refresh
+   * @IconComponent
    */
   loadingIcon?: IconComponent
-  /** Display an icon when the switch is checked. */
+  /**
+   * Display an icon when the switch is checked.
+   * @IconComponent
+   */
   checkedIcon?: IconComponent
-  /** Display an icon when the switch is unchecked. */
+  /**
+   * Display an icon when the switch is unchecked.
+   * @IconComponent
+   */
   uncheckedIcon?: IconComponent
   label?: string
   description?: string

package/dist/runtime/components/Tabs.vue

@@ -14,6 +14,9 @@ const tabs = tv({ extend: tv(theme), ...(appConfigTabs.b24ui?.tabs || {}) })
 
 export interface TabsItem {
   label?: string
+  /**
+   * @IconComponent
+   */
   icon?: IconComponent
   avatar?: AvatarProps
   slot?: string
@@ -32,8 +35,17 @@ export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defa
    */
   as?: any
   items?: T[]
+  /**
+   * @defaultValue 'default'
+   */
   color?: TabsVariants['color']
+  /**
+   * @defaultValue 'link'
+   */
   variant?: TabsVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: TabsVariants['size']
   /**
    * The orientation of the tabs.

package/dist/runtime/components/Textarea.vue

@@ -20,27 +20,71 @@ export interface TextareaProps {
   as?: any
   id?: string
   name?: string
-  /** The placeholder text when the textarea is empty. */
+  /**
+   * The placeholder text when the textarea is empty
+   */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: TextareaVariants['color']
-  /** Removes padding from input. */
+  /**
+   * Removes padding from input
+   * @defaultValue false
+   */
   noPadding?: boolean
-  /** removes all borders (rings). */
+  /**
+   * Removes all borders (rings)
+   * @defaultValue false
+   */
   noBorder?: boolean
-  /** removes all borders (rings) except the bottom one. */
+  /**
+   * Removes all borders (rings) except the bottom one
+   * @defaultValue false
+   */
   underline?: boolean
-  /** Rounds the corners of the button. */
+  /**
+   * Rounds the corners of the button
+   * @defaultValue false
+   */
   rounded?: boolean
+  /**
+   * @defaultValue false
+   */
   required?: boolean
+  /**
+   * @defaultValue false
+   */
   autofocus?: boolean
+  /**
+   * @defaultValue 0
+   */
   autofocusDelay?: number
+  /**
+   * @defaultValue false
+   */
   disabled?: boolean
+  /**
+   * @defaultValue 3
+   */
   rows?: number
+  /**
+   * @defaultValue 5
+   */
   maxrows?: number
+  /**
+   * @defaultValue false
+   */
   autoresize?: boolean
   tag?: string
+  /**
+   * @defaultValue 'primary'
+   */
   tagColor?: TextareaVariants['tagColor']
-  /** Highlight the ring color like a focus state. */
+  /**
+   * Highlight the ring color like a focus state
+   * @defaultValue false
+   */
   highlight?: boolean
   class?: any
   b24ui?: PartialString<typeof textarea.slots>

package/dist/runtime/components/Toast.vue

@@ -22,26 +22,37 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   as?: any
   title?: StringOrVNode
   description?: StringOrVNode
+  /**
+   * @IconComponent
+   */
   icon?: IconComponent
   avatar?: AvatarProps
+  /**
+   * @defaultValue 'default'
+   */
   color?: ToastVariants['color']
+  /**
+   * The orientation between the content and the actions
+   * @defaultValue 'vertical'
+   */
   orientation?: ToastVariants['orientation']
   /**
    * 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 toast.
-   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts"}
    * @defaultValue true
    */
   close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
+   * @IconComponent
    */
   closeIcon?: IconComponent
   class?: any

package/dist/runtime/components/Toaster.vue

@@ -13,6 +13,10 @@ const toaster = tv({ extend: tv(theme), ...(appConfigToaster.b24ui?.toaster || {
 type ToasterVariants = VariantProps<typeof toaster>
 
 export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
+  /**
+   * The position on the screen to display the toasts.
+   * @defaultValue 'top-right'
+   */
   position?: ToasterVariants['position']
   /**
    * Expand the toasts to show multiple toasts at once.
@@ -24,6 +28,10 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
    * @defaultValue true
    */
   portal?: boolean
+  /**
+   * @defaultValue 5000
+   */
+  duration?: number
   class?: any
   b24ui?: Partial<typeof toaster.slots>
 }

package/dist/runtime/components/{prose → content}/TableWrapper.vue

@@ -2,12 +2,12 @@
 import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/prose/table-wrapper'
+import theme from '#build/b24ui/content/table-wrapper'
 import { tv } from '../../utils/tv'
 
-const appConfigTableWrapper = _appConfig as AppConfig & { b24ui: { prose: { tableWrapper: Partial<typeof theme> } } }
+const appConfigTableWrapper = _appConfig as AppConfig & { b24ui: { content: { tableWrapper: Partial<typeof theme> } } }
 
-const tableWrapper = tv({ extend: tv(theme), ...(appConfigTableWrapper.b24ui?.prose?.tableWrapper || {}) })
+const tableWrapper = tv({ extend: tv(theme), ...(appConfigTableWrapper.b24ui?.content?.tableWrapper || {}) })
 
 type TableWrapperVariants = VariantProps<typeof tableWrapper>
 
@@ -17,13 +17,37 @@ export interface TableWrapperProps {
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: TableWrapperVariants['size']
+  /**
+   * @defaultValue false
+   */
   rounded?: boolean
+  /**
+   * @defaultValue false
+   */
   zebra?: boolean
+  /**
+   * @defaultValue false
+   */
   pinRows?: boolean
+  /**
+   * @defaultValue false
+   */
   pinCols?: boolean
+  /**
+   * @defaultValue false
+   */
   rowHover?: boolean
+  /**
+   * @defaultValue false
+   */
   bordered?: boolean
+  /**
+   * @defaultValue true
+   */
   scrollbarThin?: boolean
   class?: any
   b24ui?: Partial<typeof tableWrapper.slots>

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

@@ -1,7 +1,11 @@
 import { type MaybeRefOrGetter } from 'vue';
 import type { AvatarProps, IconComponent } from '../types';
 export interface UseComponentIconsProps {
-    /** Display an icon on the left side. */
+    /**
+     * Display an icon on the left side.
+     * @defaultValue icons.loading
+     * @IconComponent
+     */
     icon?: IconComponent;
     /** Display an avatar on the left side. */
     avatar?: AvatarProps;
@@ -9,7 +13,10 @@ export interface UseComponentIconsProps {
     loading?: boolean;
     /** When `true`, the icon will be displayed on the right side. */
     trailing?: boolean;
-    /** Display an icon on the right side. */
+    /**
+     * Display an icon on the right side.
+     * @IconComponent
+     */
     trailingIcon?: IconComponent;
 }
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {

package/dist/runtime/index.css

@@ -1 +1 @@
-@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased scheme-light dark:scheme-dark}.scrollbar-thin{scrollbar-width:thin}}
+@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{--b24ui-header-height:calc(var(--spacing)*16);body{@apply antialiased scheme-light dark:scheme-dark}.scrollbar-thin{scrollbar-width:thin}}@layer theme{:host,:root{--spacing:.25rem}}

package/dist/runtime/prose/Blockquote.vue

@@ -0,0 +1,36 @@
+<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">
+defineOptions({ inheritAttrs: false })
+
+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/Em.vue

@@ -0,0 +1,36 @@
+<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 appConfigPproseEm = _appConfig as AppConfig & { b24ui: { prose: { em: Partial<typeof theme> } } }
+
+const pproseEm = tv({ extend: tv(theme), ...(appConfigPproseEm.b24ui?.prose?.em || {}) })
+
+export interface pproseEmProps {
+  class?: any
+  b24ui?: Partial<typeof pproseEm.slots>
+}
+
+export interface pproseEmSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<pproseEmProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = pproseEm({})
+</script>
+
+<template>
+  <em
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </em>
+</template>

package/dist/runtime/prose/H1.vue

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

package/dist/runtime/prose/H2.vue

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

package/dist/runtime/prose/H3.vue

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