@bitrix24/b24ui-nuxt 0.2.9 → 0.3.1

package/dist/module.cjs

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

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.2.9",
+  "version": "0.3.1",
   "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.0h2uYsyZ.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CxFyzKH7.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/Button.vue

@@ -133,9 +133,9 @@ const b24ui = computed(() => button({
       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="size-2xl" aria-hidden="true" />
-      <LoaderClockIcon v-else-if="useClock" class="size-2xl" aria-hidden="true" />
-      <SpinnerIcon v-else class="animate-spin stroke-2 size-lg" />
+      <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="[

package/dist/runtime/components/Checkbox.vue

@@ -44,6 +44,8 @@ import { useFormField } from '../composables/useFormField'
 import Minus20Icon from '@bitrix24/b24icons-vue/actions/Minus20Icon'
 import CheckIcon from '@bitrix24/b24icons-vue/main/CheckIcon'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<CheckboxProps>()
 const slots = defineSlots<CheckboxSlots>()
 const emits = defineEmits<CheckboxEmits>()
@@ -78,7 +80,7 @@ function onUpdate(value: any) {
     <div :class="b24ui.container({ class: props.b24ui?.container })">
       <CheckboxRoot
         :id="id"
-        v-bind="{ ...rootProps, ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled"

package/dist/runtime/components/InputMenu.vue

@@ -14,10 +14,13 @@ const appConfigInputMenu = _appConfig as AppConfig & { b24ui: { inputMenu: Parti
 
 const inputMenu = tv({ extend: tv(theme), ...(appConfigInputMenu.b24ui?.inputMenu || {}) })
 
+type InputMenuVariants = VariantProps<typeof inputMenu>
+
 export interface InputMenuItem {
   label?: string
   icon?: IconComponent
   avatar?: AvatarProps
+  color?: InputMenuVariants['color']
   chip?: ChipProps
   /**
    * The item type.
@@ -28,8 +31,6 @@ export interface InputMenuItem {
   onSelect?(e?: Event): void
 }
 
-type InputMenuVariants = VariantProps<typeof inputMenu>
-
 export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'highlightOnHover'>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
@@ -453,7 +454,7 @@ defineExpose({
 
               <ComboboxItem
                 v-else
-                :class="b24ui.item({ class: props.b24ui?.item })"
+                :class="b24ui.item({ class: props.b24ui?.item, colorItem: item?.color })"
                 :disabled="item.disabled"
                 :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
                 @select="item.onSelect"
@@ -463,16 +464,16 @@ defineExpose({
                     <Component
                       :is="item.icon"
                       v-if="item.icon"
-                      :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                      :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon, colorItem: item?.color })"
                     />
-                    <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+                    <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar, colorItem: item?.color })" />
                     <B24Chip
                       v-else-if="item.chip"
                       :size="((props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()) as ChipProps['size'])"
                       inset
                       standalone
                       v-bind="item.chip"
-                      :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip })"
+                      :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip, colorItem: item?.color })"
                     />
                   </slot>
 
@@ -482,13 +483,13 @@ defineExpose({
                     </slot>
                   </span>
 
-                  <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                  <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: item?.color })">
                     <slot name="item-trailing" :item="(item as T)" :index="index" />
 
                     <ComboboxItemIndicator as-child>
                       <Component
                         :is="selectedIcon || icons.check"
-                        :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon })"
+                        :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: item?.color })"
                       />
                     </ComboboxItemIndicator>
                   </span>

package/dist/runtime/components/Modal.vue

@@ -51,6 +51,7 @@ export interface ModalProps extends DialogRootProps {
    * @defaultValue true
    */
   dismissible?: boolean
+  scrollbarThin?: boolean
   class?: any
   b24ui?: Partial<typeof modal.slots>
 }
@@ -83,7 +84,8 @@ const props = withDefaults(defineProps<ModalProps>(), {
   overlay: true,
   transition: true,
   modal: true,
-  dismissible: true
+  dismissible: true,
+  scrollbarThin: true
 })
 const emits = defineEmits<ModalEmits>()
 const slots = defineSlots<ModalSlots>()
@@ -170,7 +172,7 @@ const b24ui = computed(() => modal({
             </slot>
           </div>
 
-          <div v-if="!!slots.body" :class="b24ui.body({ class: props.b24ui?.body })">
+          <div v-if="!!slots.body" :class="b24ui.body({ class: props.b24ui?.body, scrollbarThin: Boolean(props.scrollbarThin) })">
             <slot name="body" />
           </div>
 

package/dist/runtime/components/Select.vue

@@ -13,10 +13,13 @@ const appConfigSelect = _appConfig as AppConfig & { b24ui: { select: Partial<typ
 
 const select = tv({ extend: tv(theme), ...(appConfigSelect.b24ui?.select || {}) })
 
+type SelectVariants = VariantProps<typeof select>
+
 export interface SelectItem {
   label?: string
   icon?: IconComponent
   avatar?: AvatarProps
+  color?: SelectVariants['color']
   chip?: ChipProps
   /**
    * The item type.
@@ -27,8 +30,6 @@ export interface SelectItem {
   disabled?: boolean
 }
 
-type SelectVariants = VariantProps<typeof select>
-
 export interface SelectProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps {
   id?: string
   /** The placeholder text when the select is empty. */
@@ -125,6 +126,8 @@ import icons from '../dictionary/icons'
 import B24Avatar from './Avatar.vue'
 import B24Chip from './Chip.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<SelectProps<T, I, V, M>>(), {
   valueKey: 'value' as never,
   labelKey: 'label' as never,
@@ -214,7 +217,7 @@ function onUpdateOpen(value: boolean) {
       @update:model-value="onUpdate"
       @update:open="onUpdateOpen"
     >
-      <SelectTrigger :id="id" :class="b24ui.base({ class: [props.class, props.b24ui?.base] })" v-bind="ariaAttrs">
+      <SelectTrigger :id="id" :class="b24ui.base({ class: [props.class, props.b24ui?.base] })" v-bind="{ ...$attrs, ...ariaAttrs }">
         <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
           {{ props.tag }}
         </div>
@@ -271,7 +274,7 @@ function onUpdateOpen(value: boolean) {
 
                 <SelectItem
                   v-else
-                  :class="b24ui.item({ class: props.b24ui?.item })"
+                  :class="b24ui.item({ class: props.b24ui?.item, colorItem: item?.color })"
                   :disabled="item.disabled"
                   :value="typeof item === 'object' ? get(item, props.valueKey as string) : item"
                 >
@@ -280,16 +283,16 @@ function onUpdateOpen(value: boolean) {
                       <Component
                         :is="item.icon"
                         v-if="item.icon"
-                        :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                        :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon, colorItem: item?.color })"
                       />
-                      <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+                      <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar, colorItem: item?.color })" />
                       <B24Chip
                         v-else-if="item.chip"
                         :size="((props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()) as ChipProps['size'])"
                         inset
                         standalone
                         v-bind="item.chip"
-                        :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip })"
+                        :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip, colorItem: item?.color })"
                       />
                     </slot>
 
@@ -299,13 +302,13 @@ function onUpdateOpen(value: boolean) {
                       </slot>
                     </SelectItemText>
 
-                    <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                    <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: item?.color })">
                       <slot name="item-trailing" :item="(item as T)" :index="index" />
 
                       <SelectItemIndicator as-child>
                         <Component
                           :is="selectedIcon || icons.check"
-                          :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon })"
+                          :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: item?.color })"
                         />
                       </SelectItemIndicator>
                     </span>

package/dist/runtime/components/SelectMenu.vue

@@ -13,10 +13,13 @@ const appConfigSelectMenu = _appConfig as AppConfig & { b24ui: { selectMenu: Par
 
 const selectMenu = tv({ extend: tv(theme), ...(appConfigSelectMenu.b24ui?.selectMenu || {}) })
 
+type SelectMenuVariants = VariantProps<typeof selectMenu>
+
 export interface SelectMenuItem {
   label?: string
   icon?: IconComponent
   avatar?: AvatarProps
+  color?: SelectMenuVariants['color']
   chip?: ChipProps
   /**
    * The item type.
@@ -27,8 +30,6 @@ export interface SelectMenuItem {
   onSelect?(e?: Event): void
 }
 
-type SelectMenuVariants = VariantProps<typeof selectMenu>
-
 export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'highlightOnHover'>, UseComponentIconsProps {
   id?: string
   /** The placeholder text when the select is empty. */
@@ -172,6 +173,8 @@ import B24Avatar from './Avatar.vue'
 import B24Chip from './Chip.vue'
 import B24Input from './Input.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<SelectMenuProps<T, I, V, M>>(), {
   portal: true,
   searchInput: true,
@@ -341,7 +344,7 @@ function onUpdateOpen(value: boolean) {
     <ComboboxRoot
       :id="id"
       v-slot="{ modelValue, open }"
-      v-bind="{ ...rootProps, ...ariaAttrs }"
+      v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
       ignore-filter
       as-child
       :name="name"
@@ -414,7 +417,7 @@ function onUpdateOpen(value: boolean) {
 
                   <ComboboxItem
                     v-else
-                    :class="b24ui.item({ class: props.b24ui?.item })"
+                    :class="b24ui.item({ class: props.b24ui?.item, colorItem: item?.color })"
                     :disabled="item.disabled"
                     :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
                     @select="item.onSelect"
@@ -424,16 +427,16 @@ function onUpdateOpen(value: boolean) {
                         <Component
                           :is="item.icon"
                           v-if="item.icon"
-                          :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                          :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon, colorItem: item?.color })"
                         />
-                        <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+                        <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar, colorItem: item?.color })" />
                         <B24Chip
                           v-else-if="item.chip"
                           :size="((props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()) as ChipProps['size'])"
                           inset
                           standalone
                           v-bind="item.chip"
-                          :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip })"
+                          :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip, colorItem: item?.color })"
                         />
                       </slot>
 
@@ -443,13 +446,13 @@ function onUpdateOpen(value: boolean) {
                         </slot>
                       </span>
 
-                      <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                      <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: item?.color })">
                         <slot name="item-trailing" :item="(item as T)" :index="index" />
 
                         <ComboboxItemIndicator as-child>
                           <Component
                             :is="selectedIcon || icons.check"
-                            :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon })"
+                            :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: item?.color })"
                           />
                         </ComboboxItemIndicator>
                       </span>

package/dist/runtime/components/Switch.vue

@@ -54,8 +54,11 @@ import { computed, useId } from 'vue'
 import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useFormField } from '../composables/useFormField'
+import { omit } from '../utils'
 import icons from '../dictionary/icons'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<SwitchProps>()
 const slots = defineSlots<SwitchSlots>()
 const emits = defineEmits<SwitchEmits>()
@@ -89,7 +92,7 @@ function onUpdate(value: any) {
     <div :class="b24ui.container({ class: props.b24ui?.container })">
       <SwitchRoot
         :id="id"
-        v-bind="{ ...rootProps, ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...omit({ ...$attrs }, ['data-state']), ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"

package/dist/runtime/components/Toaster.vue

@@ -46,9 +46,10 @@ import { omit } from '../utils'
 import B24Toast from './Toast.vue'
 
 const props = withDefaults(defineProps<ToasterProps>(), {
+  position: 'top-right' as const,
   expand: true,
-  portal: true,
-  duration: 5000
+  duration: 5000,
+  portal: true
 })
 defineSlots<ToasterSlots>()
 

package/dist/runtime/plugins/colors.js

@@ -28,13 +28,15 @@ export default defineNuxtPlugin(() => {
     }]
   };
   if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
-    const style = document.createElement("style");
-    style.innerHTML = root.value;
-    style.setAttribute("data-bitrix24-ui-colors", "");
-    document.head.appendChild(style);
-    headData.script = [{
-      innerHTML: "document.head.removeChild(document.querySelector('[data-bitrix24-ui-colors]'))"
-    }];
+    if (typeof document !== "undefined") {
+      const style = document.createElement("style");
+      style.innerHTML = root.value;
+      style.setAttribute("data-bitrix24-ui-colors", "");
+      document.head.appendChild(style);
+      headData.script = [{
+        innerHTML: "document.head.removeChild(document.querySelector('[data-bitrix24-ui-colors]'))"
+      }];
+    }
   }
   useHead(headData);
 });

package/dist/runtime/vue/components/Link.vue

@@ -131,7 +131,7 @@ const route = computed(() => {
 
 const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'to', 'raw', 'class'))
 
-const ui = computed(() => tv({
+const b24ui = computed(() => tv({
   extend: link,
   variants: {
     active: {
@@ -193,7 +193,7 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
     return [props.class, active ? props.activeClass : props.inactiveClass]
   }
 
-  return ui.value({
+  return b24ui.value({
     class: props.class,
     active,
     disabled: props.disabled,
@@ -201,12 +201,31 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
   })
 }
 
+function resolveLinkClassNoRouter() {
+  if (props.raw) {
+    return [props.class, props.inactiveClass]
+  }
+
+  return b24ui.value({
+    class: props.class,
+    disabled: props.disabled,
+    isAction: Boolean(props.isAction)
+  })
+}
+
 // Handle navigation without vue-router
 const handleNavigation = (href: string) => {
   if (isExternal.value) {
     window.location.href = href
   } else {
-    window.location.pathname = href
+    const [path, hash] = href.split('#')
+
+    window.location.pathname = path || ''
+    if (hash) {
+      window.location.hash = hash
+    } else {
+      window.location.hash = ''
+    }
   }
 }
 </script>
@@ -266,9 +285,9 @@ const handleNavigation = (href: string) => {
         as,
         type,
         disabled,
-        href: to ? (isExternal ? to as string : href as string) : undefined
+        href: to ? (isExternal ? to as string : to as string) : href as string
       }"
-      :class="ui({ class: props.class, disabled })"
+      :class="resolveLinkClassNoRouter()"
       @click="to && handleNavigation(to as string)"
     >
       <slot :active="false" />