@bitrix24/b24ui-nuxt 0.5.7 → 0.5.9

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.BsnG7poi.cjs');
+const templates = require('./shared/b24ui-nuxt.BVg3rkkG.cjs');
 require('node:url');
 require('scule');
 

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "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.CMCKw62O.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.C1lGF53R.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/DropdownMenuContent.vue

@@ -38,6 +38,7 @@ import { computed } from 'vue'
 import { DropdownMenu } from 'reka-ui/namespaced'
 import { useForwardPropsEmits } from 'reka-ui'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
 import { omit, get, isArrayOfArray } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import icons from '../dictionary/icons'
@@ -52,11 +53,13 @@ const props = defineProps<DropdownMenuContentProps<T>>()
 const emits = defineEmits<DropdownMenuContentEmits>()
 const slots = defineSlots<DropdownMenuContentSlots<T>>()
 
+const { dir } = useLocale()
 const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'externalIcon', 'class', 'b24ui', 'b24uiOverride'), emits)
 const proxySlots = omit(slots, ['default'])
 
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>()
 
+const childrenIcon = computed(() => dir.value === 'rtl' ? icons.chevronLeft : icons.chevronRight)
 const groups = computed<DropdownMenuItem[][]>(() =>
   props.items?.length
     ? isArrayOfArray(props.items)
@@ -102,7 +105,7 @@ const groups = computed<DropdownMenuItem[][]>(() =>
       <span :class="b24ui.itemTrailing({ class: b24uiOverride?.itemTrailing })">
         <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
           <Component
-            :is="icons.chevronRight"
+            :is="childrenIcon"
             v-if="item.children?.length"
             :class="b24ui.itemTrailingIcon({ class: b24uiOverride?.itemTrailingIcon, color: item?.color, active })"
           />
@@ -147,7 +150,6 @@ const groups = computed<DropdownMenuItem[][]>(() =>
               :b24ui-override="b24uiOverride"
               :portal="portal"
               :items="(item.children as T)"
-              side="right"
               align="start"
               :align-offset="-4"
               :side-offset="3"

package/dist/runtime/components/Input.vue

@@ -155,12 +155,6 @@ const b24ui = computed(() => input({
 
 const inputRef = ref<HTMLInputElement | null>(null)
 
-function autoFocus() {
-  if (props.autofocus) {
-    inputRef.value?.focus()
-  }
-}
-
 // Custom function to handle the v-model properties
 function updateInput(value: string | null) {
   if (modelModifiers.trim) {
@@ -206,15 +200,21 @@ function onBlur(event: FocusEvent) {
   emits('blur', event)
 }
 
-defineExpose({
-  inputRef
-})
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.focus()
+  }
+}
 
 onMounted(() => {
   setTimeout(() => {
     autoFocus()
   }, props.autofocusDelay)
 })
+
+defineExpose({
+  inputRef
+})
 </script>
 
 <template>

package/dist/runtime/components/InputMenu.vue

@@ -397,6 +397,7 @@ function onRemoveTag(event: any) {
     const modelValue = props.modelValue as GetModelValue<T, VK, true>
     const filteredValue = modelValue.filter(value => !isEqual(value, event))
     emits('update:modelValue', filteredValue as GetModelValue<T, VK, M>)
+    onUpdate(filteredValue)
   }
 }
 
@@ -547,7 +548,7 @@ defineExpose({
                 :class="b24ui.item({ class: props.b24ui?.item, colorItem: isInputItem(item) ? item?.color : undefined })"
                 :disabled="isInputItem(item) && item.disabled"
                 :value="props.valueKey && isInputItem(item) ? get(item, String(props.valueKey)) : item"
-                @select="isInputItem(item) && item.onSelect"
+                @select="isInputItem(item) && item.onSelect?.($event)"
               >
                 <slot name="item" :item="(item as NestedItem<T>)" :index="index">
                   <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">

package/dist/runtime/components/InputNumber.vue

@@ -14,7 +14,7 @@ const inputNumber = tv({ extend: tv(theme), ...(appConfigInputNumber.b24ui?.inpu
 
 type InputNumberVariants = VariantProps<typeof inputNumber>
 
-export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions'> {
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'stepSnapping' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -137,7 +137,7 @@ const props = withDefaults(defineProps<InputNumberProps>(), {
 const emits = defineEmits<InputNumberEmits>()
 defineSlots<InputNumberSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'formatOptions'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange'), emits)
 
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
 
@@ -165,18 +165,6 @@ const decrementIcon = computed(() => props.decrementIcon || (props.orientation =
 
 const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
 
-function autoFocus() {
-  if (props.autofocus) {
-    inputRef.value?.$el?.focus()
-  }
-}
-
-onMounted(() => {
-  setTimeout(() => {
-    autoFocus()
-  }, props.autofocusDelay)
-})
-
 function onUpdate(value: number) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
@@ -191,6 +179,18 @@ function onBlur(event: FocusEvent) {
   emits('blur', event)
 }
 
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.$el?.focus()
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
 defineExpose({
   inputRef
 })

package/dist/runtime/components/RadioGroup.vue

@@ -49,6 +49,10 @@ export interface RadioGroupProps<T extends RadioGroupItem = RadioGroupItem> exte
    * @defaultValue 'md'
    */
   size?: RadioGroupVariants['size']
+  /**
+   * @defaultValue 'list'
+   */
+  variant?: RadioGroupVariants['variant']
   /**
    * @defaultValue 'primary'
    */
@@ -58,6 +62,11 @@ export interface RadioGroupProps<T extends RadioGroupItem = RadioGroupItem> exte
    * @defaultValue 'vertical'
    */
   orientation?: RadioGroupRootProps['orientation']
+  /**
+   * Position of the indicator.
+   * @defaultValue 'start'
+   */
+  indicator?: RadioGroupVariants['indicator']
   class?: any
   b24ui?: Partial<typeof radioGroup.slots>
 }
@@ -101,7 +110,9 @@ const b24ui = computed(() => radioGroup({
   color: color.value,
   disabled: disabled.value,
   required: props.required,
-  orientation: props.orientation
+  orientation: props.orientation,
+  variant: props.variant,
+  indicator: props.indicator
 }))
 
 function normalizeItem(item: any) {
@@ -167,7 +178,7 @@ function onUpdate(value: any) {
           {{ legend }}
         </slot>
       </legend>
-      <div v-for="item in normalizedItems" :key="item.value" :class="b24ui.item({ class: props.b24ui?.item })">
+      <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="b24ui.item({ class: props.b24ui?.item })">
         <div :class="b24ui.container({ class: props.b24ui?.container })">
           <RadioGroupItem
             :id="item.id"
@@ -180,18 +191,18 @@ function onUpdate(value: any) {
         </div>
 
         <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-          <Label :class="b24ui.label({ class: props.b24ui?.label })" :for="item.id">
+          <component :is="variant === 'list' ? Label : 'p'" :class="b24ui.label({ class: props.b24ui?.label })" :for="item.id">
             <slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
               {{ item.label }}
             </slot>
-          </Label>
+          </component>
           <p v-if="item.description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
             <slot name="description" :item="item" :model-value="(modelValue as RadioGroupValue)">
               {{ item.description }}
             </slot>
           </p>
         </div>
-      </div>
+      </component>
     </fieldset>
   </RadioGroupRoot>
 </template>

package/dist/runtime/components/SelectMenu.vue

@@ -495,7 +495,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
                     :class="b24ui.item({ class: props.b24ui?.item, colorItem: isSelectItem(item) ? item?.color : undefined })"
                     :disabled="isSelectItem(item) && item.disabled"
                     :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey as string) : item"
-                    @select="isSelectItem(item) && item.onSelect"
+                    @select="isSelectItem(item) && item.onSelect?.($event)"
                   >
                     <slot name="item" :item="(item as NestedItem<T>)" :index="index">
                       <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index">

package/dist/runtime/components/Textarea.vue

@@ -3,7 +3,9 @@ import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/textarea'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import { tv } from '../utils/tv'
+import type { AvatarProps } from '../types'
 import type { PartialString } from '../types/utils'
 
 const appConfigTextarea = _appConfig as AppConfig & { b24ui: { textarea: Partial<typeof theme> } }
@@ -12,7 +14,7 @@ const textarea = tv({ extend: tv(theme), ...(appConfigTextarea.b24ui?.textarea |
 
 type TextareaVariants = VariantProps<typeof textarea>
 
-export interface TextareaProps {
+export interface TextareaProps extends UseComponentIconsProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -60,6 +62,14 @@ export interface TextareaProps {
    * @defaultValue 0
    */
   autofocusDelay?: number
+  /**
+   * @defaultValue false
+   */
+  autoresize?: boolean
+  /**
+   * @defaultValue 0
+   */
+  autoresizeDelay?: number
   /**
    * @defaultValue false
    */
@@ -72,10 +82,6 @@ export interface TextareaProps {
    * @defaultValue 5
    */
   maxrows?: number
-  /**
-   * @defaultValue false
-   */
-  autoresize?: boolean
   tag?: string
   /**
    * @defaultValue 'primary'
@@ -97,29 +103,35 @@ export interface TextareaEmits {
 }
 
 export interface TextareaSlots {
+  leading(props?: {}): any
   default(props?: {}): any
+  trailing(props?: {}): any
 }
 </script>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
 import { Primitive } from 'reka-ui'
+import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
+import B24Avatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<TextareaProps>(), {
   rows: 3,
   maxrows: 5,
-  autofocusDelay: 0
+  autofocusDelay: 0,
+  autoresizeDelay: 0
 })
-defineSlots<TextareaSlots>()
+const slots = defineSlots<TextareaSlots>()
 const emits = defineEmits<TextareaEmits>()
 
 const [modelValue, modelModifiers] = defineModel<string | number | null>()
 
 const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
 const isTag = computed(() => {
   return props.tag
@@ -127,22 +139,20 @@ const isTag = computed(() => {
 
 const b24ui = computed(() => textarea({
   color: color.value,
+  loading: props.loading,
   highlight: highlight.value,
+  autoresize: Boolean(props.autoresize),
   tagColor: props.tagColor,
   rounded: Boolean(props.rounded),
   noPadding: Boolean(props.noPadding),
   noBorder: Boolean(props.noBorder),
-  underline: Boolean(props.underline)
+  underline: Boolean(props.underline),
+  leading: Boolean(isLeading.value || !!props.avatar || !!slots.leading),
+  trailing: Boolean(isTrailing.value || !!slots.trailing)
 }))
 
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
 
-function autoFocus() {
-  if (props.autofocus) {
-    textareaRef.value?.focus()
-  }
-}
-
 // Custom function to handle the v-model properties
 function updateInput(value: string | null) {
   if (modelModifiers.trim) {
@@ -190,18 +200,14 @@ function onBlur(event: FocusEvent) {
   emits('blur', event)
 }
 
-onMounted(() => {
-  setTimeout(() => {
-    autoFocus()
-  }, props.autofocusDelay)
-})
+function autoFocus() {
+  if (props.autofocus) {
+    textareaRef.value?.focus()
+  }
+}
 
 function autoResize() {
-  if (props.autoresize) {
-    if (!textareaRef.value) {
-      return
-    }
-
+  if (props.autoresize && textareaRef.value) {
     textareaRef.value.rows = props.rows
     const overflow = textareaRef.value.style.overflow
     textareaRef.value.style.overflow = 'hidden'
@@ -226,14 +232,18 @@ watch(modelValue, () => {
   nextTick(autoResize)
 })
 
-defineExpose({
-  textareaRef
-})
-
 onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+
   setTimeout(() => {
     autoResize()
-  }, 100)
+  }, props.autoresizeDelay)
+})
+
+defineExpose({
+  textareaRef
 })
 </script>
 
@@ -261,5 +271,31 @@ onMounted(() => {
     />
 
     <slot />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+      <slot name="leading">
+        <Component
+          :is="leadingIconName"
+          v-if="isLeading && leadingIconName"
+          :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>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+      <slot name="trailing">
+        <Component
+          :is="trailingIconName"
+          v-if="trailingIconName"
+          :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+        />
+      </slot>
+    </span>
   </Primitive>
 </template>

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<IconComponent | undefined>;
-    trailingIconName: import("vue").ComputedRef<IconComponent | undefined>;
+    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>;
 };

package/dist/runtime/vue/stubs.d.ts

@@ -9,10 +9,10 @@ export { useConfetti } from '../composables/useConfetti';
 export { useOverlay } from '../composables/useOverlay';
 export declare const useColorMode: () => {
     forced: boolean;
-    preference?: "dark" | "light" | "system";
+    preference?: "light" | "dark" | "system";
     readonly value?: import("@vueuse/core").BasicColorMode;
 } | {
-    preference: "dark" | "light" | "system";
+    preference: "light" | "dark" | "system";
     readonly value: import("@vueuse/core").BasicColorMode;
     forced: boolean;
 };