@bitrix24/b24ui-nuxt 0.4.0 → 0.4.2

package/dist/runtime/components/Input.vue

@@ -23,27 +23,71 @@ export interface InputProps extends UseComponentIconsProps {
   as?: any
   id?: string
   name?: string
+  /**
+   * @defaultValue 'text'
+   */
   type?: InputHTMLAttributes['type']
-  /** The placeholder text when the input is empty. */
+  /**
+   * The placeholder text when the input is empty.
+   */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: InputVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: InputVariants['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
+  /**
+   * @defaultValue false
+   */
   required?: boolean
+  /**
+   * @defaultValue 'off'
+   */
   autocomplete?: InputHTMLAttributes['autocomplete']
+  /**
+   * @defaultValue false
+   */
   autofocus?: boolean
+  /**
+   * @defaultValue 0
+   */
   autofocusDelay?: number
+  /**
+   * @defaultValue false
+   */
   disabled?: boolean
   tag?: string
+  /**
+   * @defaultValue 'primary'
+   */
   tagColor?: InputVariants['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 input.slots>

package/dist/runtime/components/InputMenu.vue

@@ -18,6 +18,10 @@ type InputMenuVariants = VariantProps<typeof inputMenu>
 
 export interface InputMenuItem {
   label?: string
+  /**
+   * Display an icon on the left side.
+   * @IconComponent
+   */
   icon?: IconComponent
   avatar?: AvatarProps
   color?: InputMenuVariants['color']
@@ -38,36 +42,71 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
    */
   as?: any
   id?: string
+  /**
+   * @defaultValue 'text'
+   */
   type?: InputHTMLAttributes['type']
-  /** The placeholder text when the input is empty. */
+  /**
+   * The placeholder text when the input is empty
+   */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: InputMenuVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: InputMenuVariants['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
+  /**
+   * @defaultValue false
+   */
   required?: boolean
+  /**
+   * @defaultValue false
+   */
   autofocus?: boolean
+  /**
+   * @defaultValue 0
+   */
   autofocusDelay?: number
   /**
    * 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
   /**
    * The icon displayed to delete a tag.
    * Works only when `multiple` is `true`.
-   * @defaultValue icons.close = `Cross30Icon`
+   * @defaultValue icons.close
+   * @IconComponent
    */
   deleteIcon?: IconComponent
   /**
@@ -96,15 +135,28 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
    */
   labelKey?: V
   items?: I
-  /** The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu. */
+  /**
+   * The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu
+   */
   defaultValue?: SelectModelValue<T, V, M>
-  /** The controlled value of the InputMenu. Can be binded-with with `v-model`. */
+  /**
+   * The controlled value of the InputMenu. 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
   tag?: string
+  /**
+   * @defaultValue 'primary'
+   */
   tagColor?: InputMenuVariants['tagColor']
-  /** 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.
@@ -152,7 +204,7 @@ export interface InputMenuSlots<T, M extends boolean> {
 import { computed, ref, toRef, onMounted, toRaw } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
-import { isEqual } from 'ohash'
+import { isEqual } from 'ohash/utils'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
@@ -179,7 +231,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const { t } = useLocale()
 const { contains } = useFilter({ sensitivity: 'base' })
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur', 'highlightOnHover', 'ignoreFilter'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'highlightOnHover', 'ignoreFilter'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
 const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
 
@@ -363,6 +415,7 @@ defineExpose({
         v-slot="{ modelValue: tags }"
         :model-value="(modelValue as string[])"
         :disabled="disabled"
+        :required="required"
         delimiter=""
         as-child
         @blur="onBlur"
@@ -391,7 +444,6 @@ defineExpose({
             ref="inputRef"
             v-bind="{ ...$attrs, ...ariaAttrs }"
             :placeholder="placeholder"
-            :required="required"
             :class="b24ui.tagsInput({ class: props.b24ui?.tagsInput })"
             @keydown.enter.prevent
           />

package/dist/runtime/components/InputNumber.vue

@@ -20,21 +20,47 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * @defaultValue 'div'
    */
   as?: any
-  /** The placeholder text when the input is empty. */
+  /**
+   * The placeholder text when the input is empty
+   */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: InputNumberVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: InputNumberVariants['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?: InputNumberVariants['tagColor']
-  /** Highlight the ring color like a focus state. */
+  /**
+   * Highlight the ring color like a focus state
+   * @defaultValue false
+   */
   highlight?: boolean
   /**
    * The orientation of the input menu.
@@ -48,7 +74,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   increment?: ButtonProps
   /**
    * The icon displayed to increment the value.
-   * @defaultValue icons.plus = Plus30Icon
+   * @defaultValue icons.plus
+   * @IconComponent
    */
   incrementIcon?: IconComponent
   /**
@@ -58,10 +85,17 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   decrement?: ButtonProps
   /**
    * The icon displayed to decrement the value.
-   * @defaultValue icons.minus = Minus30Icon
+   * @defaultValue icons.minus
+   * @IconComponent
    */
   decrementIcon?: IconComponent
+  /**
+   * @defaultValue false
+   */
   autofocus?: boolean
+  /**
+   * @defaultValue 0
+   */
   autofocusDelay?: number
   /**
    * The locale to use for formatting and parsing numbers.

package/dist/runtime/components/Kbd.vue

@@ -19,7 +19,13 @@ export interface KbdProps {
    */
   as?: any
   value?: KbdKey | string
+  /**
+   * @defaultValue 'light'
+   */
   depth?: KbdVariants['depth']
+  /**
+   * @defaultValue 'md'
+   */
   size?: KbdVariants['size']
   class?: any
 }

package/dist/runtime/components/Link.vue

@@ -93,7 +93,7 @@ export interface LinkSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { isEqual, diff } from 'ohash'
+import { isEqual, diff } from 'ohash/utils'
 import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { useRoute } from '#imports'
@@ -127,11 +127,15 @@ const b24ui = computed(() => tv({
 function isPartiallyEqual(item1: any, item2: any) {
   const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
     if (q.type === 'added') {
-      filtered.push(q.key)
+      filtered.add(q.key)
     }
     return filtered
-  }, [] as string[])
-  return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
+  }, new Set<string>())
+
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
+
+  return isEqual(item1Filtered, item2Filtered)
 }
 
 function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {

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,16 +11,26 @@ 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
-  /** The content of the modal. */
+  /**
+   * The content of the modal
+   */
   content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
   /**
    * Render an overlay behind the modal.
    * @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
@@ -37,20 +48,24 @@ export interface ModalProps extends DialogRootProps {
   portal?: boolean
   /**
    * Display a close button to dismiss the modal.
-   * `{ size: 'xs', color: 'link' }`{lang="ts-type"}
+   * `{ size: 'xs', color: 'link' }`{lang="ts"}
    * @defaultValue true
    */
   close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
+   * @IconComponent
    */
   closeIcon?: IconComponent
   /**
    * When `false`, the modal will not close when clicking outside or pressing escape.
-   * @defaultValue true
+   * @defaultValue false
    */
   dismissible?: boolean
+  /**
+   * @defaultValue true
+   */
   scrollbarThin?: boolean
   class?: any
   b24ui?: Partial<typeof modal.slots>
@@ -87,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>()
@@ -113,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/Progress.vue

@@ -19,19 +19,35 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
    * @defaultValue 'div'
    */
   as?: any
-  /** The maximum progress value. */
+  /**
+   * The maximum progress value
+   */
   max?: number | Array<any>
-  /** Display the current progress value. */
+  /**
+   * Display the current progress value
+   */
   status?: boolean
-  /** Whether the progress is visually inverted. */
+  /**
+   * Whether the progress is visually inverted
+   * @defaultValue false
+   */
   inverted?: boolean
+  /**
+   * @defaultValue 'md'
+   */
   size?: ProgressVariants['size']
+  /**
+   * @defaultValue 'primary'
+   */
   color?: ProgressVariants['color']
   /**
    * The orientation of the progress bar.
    * @defaultValue 'horizontal'
    */
   orientation?: ProgressVariants['orientation']
+  /**
+   * @defaultValue 'loading'
+   */
   animation?: ProgressVariants['animation']
   class?: any
   b24ui?: Partial<typeof progress.slots>

package/dist/runtime/components/RadioGroup.vue

@@ -42,7 +42,13 @@ export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultVa
    */
   descriptionKey?: string
   items?: T[]
+  /**
+   * @defaultValue 'md'
+   */
   size?: RadioGroupVariants['size']
+  /**
+   * @defaultValue 'primary'
+   */
   color?: RadioGroupVariants['color']
   /**
    * The orientation the radio buttons are laid out.

package/dist/runtime/components/Range.vue

@@ -18,14 +18,22 @@ export interface RangeProps extends Pick<SliderRootProps, 'name' | 'disabled' |
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: RangeVariants['size']
+  /**
+   * @defaultValue 'primary'
+   */
   color?: RangeVariants['color']
   /**
    * The orientation of the Range.
    * @defaultValue 'horizontal'
    */
   orientation?: SliderRootProps['orientation']
-  /** The value of the Range when initially rendered. Use when you do not need to control the state of the Range. */
+  /**
+   * The value of the Range when initially rendered. Use when you do not need to control the state of the Range
+   */
   defaultValue?: number | number[]
   class?: any
   b24ui?: Partial<typeof range.slots>

package/dist/runtime/components/Select.vue

@@ -17,6 +17,10 @@ type SelectVariants = VariantProps<typeof select>
 
 export interface SelectItem {
   label?: string
+  /**
+   * Display an icon on the left side.
+   * @IconComponent
+   */
   icon?: IconComponent
   avatar?: AvatarProps
   color?: SelectVariants['color']
@@ -34,26 +38,49 @@ export interface SelectProps<T extends MaybeArrayOfArrayItem<I>, I extends Maybe
   id?: string
   /** The placeholder text when the select is empty. */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: SelectVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: SelectVariants['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?: SelectVariants['tagColor']
   /**
    * 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
   /**
@@ -82,13 +109,23 @@ export interface SelectProps<T extends MaybeArrayOfArrayItem<I>, I extends Maybe
    */
   labelKey?: V
   items?: I
-  /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */
+  /**
+   * The value of the Select when initially rendered. Use when you do not need to control the state of the Select
+   */
   defaultValue?: SelectModelValue<T, V, M, T extends { value: infer U } ? U : never>
-  /** The controlled value of the Select. Can be bind as `v-model`. */
+  /**
+   * The controlled value of the Select. Can be bind as `v-model`
+   */
   modelValue?: SelectModelValue<T, V, M, T extends { value: infer U } ? U : never>
-  /** 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
   class?: any
   b24ui?: PartialString<typeof select.slots>