@bitrix24/b24ui-nuxt 0.5.8 → 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.B9fPD5yO.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.8",
+  "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.DBFS6LH7.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/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/InputNumber.vue

@@ -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/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;
 };

package/dist/shared/{b24ui-nuxt.B9fPD5yO.cjs → b24ui-nuxt.BVg3rkkG.cjs}

@@ -6222,6 +6222,12 @@ const textarea = {
       "font-b24-primary font-regular text-md leading-normal",
       "align-middle"
     ].join(" "),
+    leading: "absolute start-0 flex items-start inset-y-1.5 px-1.5",
+    leadingIcon: "shrink-0 text-base-400 inset-y-1.5 size-lg2",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "xs",
+    trailing: "absolute end-0 flex items-start inset-y-1.5 px-1.5",
+    trailingIcon: "shrink-0 text-base-400 size-lg2",
     tag: [
       "pointer-events-none select-none",
       "absolute z-10 -top-1.5 right-3 h-sm px-1.5 flex flex-col justify-center items-center",
@@ -6230,6 +6236,11 @@ const textarea = {
   },
   variants: {
     ...buttonGroupVariantWithRoot,
+    autoresize: {
+      true: {
+        base: "resize-none"
+      }
+    },
     color: {
       default: "",
       danger: "",
@@ -6281,6 +6292,15 @@ const textarea = {
     underline: {
       true: "ring-0 focus-visible:ring-0 border-b border-b-base-300 rounded-none"
     },
+    leading: {
+      true: ""
+    },
+    trailing: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    },
     highlight: {
       true: ""
     }
@@ -6509,8 +6529,37 @@ const textarea = {
       noBorder: false,
       underline: true,
       class: "border-b-ai-500 dark:border-b-ai-600"
-    }
+    },
+    // endregion ////
+    // endregion ////
+    // region leading ////
+    {
+      leading: true,
+      class: "ps-8"
+    },
     // endregion ////
+    // region trailing ////
+    {
+      trailing: true,
+      class: "pe-8"
+    },
+    // endregion ////
+    // region loading ////
+    {
+      loading: true,
+      leading: true,
+      class: {
+        leadingIcon: "size-[21px]"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      class: {
+        trailingIcon: "size-[21px]"
+      }
+    }
     // endregion ////
   ],
   defaultVariants: {

package/dist/shared/{b24ui-nuxt.DBFS6LH7.mjs → b24ui-nuxt.C1lGF53R.mjs}

@@ -6220,6 +6220,12 @@ const textarea = {
       "font-b24-primary font-regular text-md leading-normal",
       "align-middle"
     ].join(" "),
+    leading: "absolute start-0 flex items-start inset-y-1.5 px-1.5",
+    leadingIcon: "shrink-0 text-base-400 inset-y-1.5 size-lg2",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "xs",
+    trailing: "absolute end-0 flex items-start inset-y-1.5 px-1.5",
+    trailingIcon: "shrink-0 text-base-400 size-lg2",
     tag: [
       "pointer-events-none select-none",
       "absolute z-10 -top-1.5 right-3 h-sm px-1.5 flex flex-col justify-center items-center",
@@ -6228,6 +6234,11 @@ const textarea = {
   },
   variants: {
     ...buttonGroupVariantWithRoot,
+    autoresize: {
+      true: {
+        base: "resize-none"
+      }
+    },
     color: {
       default: "",
       danger: "",
@@ -6279,6 +6290,15 @@ const textarea = {
     underline: {
       true: "ring-0 focus-visible:ring-0 border-b border-b-base-300 rounded-none"
     },
+    leading: {
+      true: ""
+    },
+    trailing: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    },
     highlight: {
       true: ""
     }
@@ -6507,8 +6527,37 @@ const textarea = {
       noBorder: false,
       underline: true,
       class: "border-b-ai-500 dark:border-b-ai-600"
-    }
+    },
+    // endregion ////
+    // endregion ////
+    // region leading ////
+    {
+      leading: true,
+      class: "ps-8"
+    },
     // endregion ////
+    // region trailing ////
+    {
+      trailing: true,
+      class: "pe-8"
+    },
+    // endregion ////
+    // region loading ////
+    {
+      loading: true,
+      leading: true,
+      class: {
+        leadingIcon: "size-[21px]"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      class: {
+        trailingIcon: "size-[21px]"
+      }
+    }
     // endregion ////
   ],
   defaultVariants: {

package/dist/unplugin.cjs

@@ -5,7 +5,7 @@ const pathe = require('pathe');
 const unplugin = require('unplugin');
 const defu = require('defu');
 const tailwind = require('@tailwindcss/vite');
-const templates = require('./shared/b24ui-nuxt.B9fPD5yO.cjs');
+const templates = require('./shared/b24ui-nuxt.BVg3rkkG.cjs');
 const tinyglobby = require('tinyglobby');
 const knitwork = require('knitwork');
 const MagicString = require('magic-string');

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { g as getTemplates, d as defaultOptions, a as getDefaultUiConfig } from './shared/b24ui-nuxt.DBFS6LH7.mjs';
+import { g as getTemplates, d as defaultOptions, a as getDefaultUiConfig } from './shared/b24ui-nuxt.C1lGF53R.mjs';
 import { globSync } from 'tinyglobby';
 import { genSafeVariableName } from 'knitwork';
 import MagicString from 'magic-string';

package/dist/vite.cjs

@@ -6,7 +6,7 @@ require('pathe');
 require('unplugin');
 require('defu');
 require('@tailwindcss/vite');
-require('./shared/b24ui-nuxt.B9fPD5yO.cjs');
+require('./shared/b24ui-nuxt.BVg3rkkG.cjs');
 require('scule');
 require('@nuxt/kit');
 require('tinyglobby');

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/b24ui-nuxt.DBFS6LH7.mjs';
+import './shared/b24ui-nuxt.C1lGF53R.mjs';
 import 'scule';
 import '@nuxt/kit';
 import 'tinyglobby';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
   "description": "Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bitrix24/b24ui.git"
@@ -72,8 +72,8 @@
     "@bitrix24/b24style": "^1.0.1",
     "@internationalized/date": "^3.7.0",
     "@internationalized/number": "^3.6.0",
-    "@nuxt/kit": "^3.16.1",
-    "@nuxt/schema": "^3.16.1",
+    "@nuxt/kit": "^3.16.2",
+    "@nuxt/schema": "^3.16.2",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
     "@tailwindcss/postcss": "^4.0.17",
@@ -121,7 +121,7 @@
     "embla-carousel": "^8.5.2",
     "eslint": "^9.23.0",
     "happy-dom": "^17.4.4",
-    "nuxt": "^3.16.1",
+    "nuxt": "^3.16.2",
     "nuxt-component-meta": "^0.10.0",
     "vitepress": "^1.5.0",
     "vitest": "^3.1.1",