@bitrix24/b24ui-nuxt 0.2.5 → 0.2.6

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.BfbMerCZ.cjs');
+const templates = require('./shared/b24ui-nuxt.D-N3gDSr.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.5",
+  "version": "0.2.6",
   "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.BYTVBEky.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CAS1q3My.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/DropdownMenu.vue

@@ -45,6 +45,12 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
    * @defaultValue icons.check = `CheckIcon`
    */
   checkedIcon?: IconComponent
+  /**
+   * The icon displayed when the item is an external link.
+   * Set to `false` to hide the external icon.
+   * @defaultValue icons.external = `OpenIn50Icon`
+   */
+  externalIcon?: boolean | IconComponent
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
@@ -94,6 +100,7 @@ import B24DropdownMenuContent from './DropdownMenuContent.vue'
 const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
   portal: true,
   modal: true,
+  externalIcon: true,
   labelKey: 'label'
 })
 const emits = defineEmits<DropdownMenuEmits>()
@@ -124,6 +131,7 @@ const b24ui = computed(() => dropdownMenu({
       :portal="portal"
       :label-key="labelKey"
       :checked-icon="checkedIcon"
+      :external-icon="externalIcon"
     >
       <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
         <slot :name="name" v-bind="slotData" />

package/dist/runtime/components/DropdownMenuContent.vue

@@ -13,6 +13,7 @@ interface DropdownMenuContentProps<T> extends Omit<RekaDropdownMenuContentProps,
   sub?: boolean
   labelKey: string
   checkedIcon?: IconComponent
+  externalIcon?: boolean | IconComponent
   class?: any
   b24ui: typeof _dropdownMenu
   b24uiOverride?: any
@@ -44,7 +45,7 @@ const props = defineProps<DropdownMenuContentProps<T>>()
 const emits = defineEmits<DropdownMenuContentEmits>()
 const slots = defineSlots<DropdownMenuContentSlots<T>>()
 
-const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'class', 'b24ui', 'b24uiOverride'), emits)
+const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'externalIcon', 'class', 'b24ui', 'b24uiOverride'), emits)
 const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuContentSlots<T>[string]>
 
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>()
@@ -79,8 +80,8 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
           {{ get(item, props.labelKey as string) }}
         </slot>
         <Component
-          :is="icons.external"
-          v-if="item.target === '_blank'"
+          :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
+          v-if="item.target === '_blank' && externalIcon !== false"
           :class="b24ui.itemLabelExternalIcon({ class: b24uiOverride?.itemLabelExternalIcon, color: item?.color, active })"
         />
       </span>
@@ -139,6 +140,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               :side-offset="3"
               :label-key="labelKey"
               :checked-icon="checkedIcon"
+              :external-icon="externalIcon"
               v-bind="item.content"
             >
               <template v-for="(_, name) in proxySlots" #[name]="slotData: any">

package/dist/runtime/components/InputNumber.vue

@@ -6,6 +6,7 @@ import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/input-number'
 import { tv } from '../utils/tv'
 import type { ButtonProps, IconComponent } from '../types'
+import type { PartialString } from '../types/utils'
 
 const appConfigInputNumber = _appConfig as AppConfig & { b24ui: { inputNumber: Partial<typeof theme> } }
 
@@ -35,8 +36,6 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   tagColor?: InputNumberVariants['tagColor']
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
-  class?: any
-  b24ui?: Partial<typeof inputNumber.slots>
   /**
    * The orientation of the input menu.
    * @defaultValue 'horizontal'
@@ -69,6 +68,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * @defaultValue B24App.locale.code
    */
   locale?: string
+  class?: any
+  b24ui?: PartialString<typeof inputNumber.slots>
 }
 
 export interface InputNumberEmits {

package/dist/runtime/components/Textarea.vue

@@ -4,6 +4,7 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/textarea'
 import { tv } from '../utils/tv'
+import type { PartialString } from '../types/utils'
 
 const appConfigTextarea = _appConfig as AppConfig & { b24ui: { textarea: Partial<typeof theme> } }
 
@@ -42,7 +43,7 @@ export interface TextareaProps {
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
   class?: any
-  b24ui?: Partial<typeof textarea.slots>
+  b24ui?: PartialString<typeof textarea.slots>
 }
 
 export interface TextareaEmits {

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

@@ -73,7 +73,7 @@ export interface LinkProps extends NuxtLinkProps {
   /** Will only be active if the current route is an exact match. */
   exact?: boolean
   /** Will only be active if the current route query is an exact match. */
-  exactQuery?: boolean
+  exactQuery?: boolean | 'partial'
   /** Will only be active if the current route hash is an exact match. */
   exactHash?: boolean
   /** The class to apply when the link is inactive. */
@@ -92,8 +92,8 @@ export interface LinkSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { isEqual } from 'ohash'
+import { computed, getCurrentInstance } from 'vue'
+import { isEqual, diff } from 'ohash'
 import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { hasProtocol } from 'ufo'
@@ -113,7 +113,22 @@ const props = withDefaults(defineProps<LinkProps>(), {
 })
 defineSlots<LinkSlots>()
 
-const route = useRoute()
+// Check if vue-router is available by checking for the injection key
+const hasRouter = computed(() => {
+  const app = getCurrentInstance()?.appContext.app
+  return !!(app?.config?.globalProperties?.$router)
+})
+
+// Only try to get route if router exists
+const route = computed(() => {
+  if (!hasRouter.value) return null
+  try {
+    return useRoute()
+  } catch {
+    return null
+  }
+})
+
 const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'to', 'raw', 'class'))
 
 const ui = computed(() => tv({
@@ -126,21 +141,37 @@ const ui = computed(() => tv({
   }
 }))
 
-const isExternal = computed(() => typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true }))
+function isPartiallyEqual(item1: any, item2: any) {
+  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
+    if (q.type === 'added') {
+      filtered.push(q.key)
+    }
+    return filtered
+  }, [] as string[])
+  return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
+}
+
+const isExternal = computed(() => {
+  if (!props.to) return false
+  return typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true })
+})
 
 function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   if (props.active !== undefined) {
     return props.active
   }
 
-  if (!props.to) {
+  if (!props.to || !route.value) {
     return false
   }
 
-  if (props.exactQuery && !isEqual(linkRoute.query, route.query)) {
-    return false
+  if (props.exactQuery === 'partial') {
+    if (!isPartiallyEqual(linkRoute.query, route.value.query)) return false
+  } else if (props.exactQuery === true) {
+    if (!isEqual(linkRoute.query, route.value.query)) return false
   }
-  if (props.exactHash && linkRoute.hash !== route.hash) {
+
+  if (props.exactHash && linkRoute.hash !== route.value.hash) {
     return false
   }
 
@@ -169,10 +200,52 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
     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
+  }
+}
 </script>
 
 <template>
-  <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || '#'" custom>
+  <template v-if="hasRouter">
+    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || '#'" custom>
+      <template v-if="custom">
+        <slot
+          v-bind="{
+            ...$attrs,
+            as,
+            type,
+            disabled,
+            target: props.target ? props.target : undefined,
+            href: to ? (isExternal ? to as string : href) : undefined,
+            navigate,
+            active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+          }"
+        />
+      </template>
+      <B24LinkBase
+        v-else
+        v-bind="{
+          ...$attrs,
+          as,
+          type,
+          disabled,
+          href: to ? (isExternal ? to as string : href) : undefined,
+          navigate
+        }"
+        :class="resolveLinkClass({ route: linkRoute, isActive: isActive, isExactActive: isExactActive })"
+      >
+        <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+      </B24LinkBase>
+    </RouterLink>
+  </template>
+
+  <template v-else>
     <template v-if="custom">
       <slot
         v-bind="{
@@ -180,10 +253,9 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
           as,
           type,
           disabled,
-          target: props.target ? props.target : undefined,
           href: to ? (isExternal ? to as string : href) : undefined,
-          navigate,
-          active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+          navigate: () => to && handleNavigation(to as string),
+          active: false
         }"
       />
     </template>
@@ -194,12 +266,12 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
         as,
         type,
         disabled,
-        href: to ? (isExternal ? to as string : href) : undefined,
-        navigate
+        href: to ? (isExternal ? to as string : href as string) : undefined
       }"
-      :class="resolveLinkClass({ route: linkRoute, isActive: isActive, isExactActive: isExactActive })"
+      :class="ui({ class: props.class, disabled })"
+      @click="to && handleNavigation(to as string)"
     >
-      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+      <slot :active="false" />
     </B24LinkBase>
-  </RouterLink>
+  </template>
 </template>

package/dist/shared/{b24ui-nuxt.BYTVBEky.mjs → b24ui-nuxt.CAS1q3My.mjs}

@@ -3156,7 +3156,7 @@ const modal = {
     overlay: "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
     content: [
       "py-md2 px-5",
-      "fixed w-full h-dvh bg-white dark:bg-base-950",
+      "fixed bg-white dark:bg-base-950",
       // 'divide-y divide-base-900/10 dark:divide-white/20',
       "flex flex-col focus:outline-none"
     ].join(" "),
@@ -3180,11 +3180,10 @@ const modal = {
       },
       false: {
         content: [
-          "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]",
-          "sm:min-w-[400px]",
-          "sm:max-w-[420px] sm:h-auto sm:max-h-[calc(100vh-4rem)]",
-          "sm:rounded-md sm:shadow-lg",
-          "sm:ring ring-base-300 dark:ring-base-800"
+          "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+          "w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)]",
+          "rounded-md shadow-lg",
+          "ring ring-base-300 dark:ring-base-800"
         ].join(" ")
       }
     }

package/dist/shared/{b24ui-nuxt.BfbMerCZ.cjs → b24ui-nuxt.D-N3gDSr.cjs}

@@ -3158,7 +3158,7 @@ const modal = {
     overlay: "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
     content: [
       "py-md2 px-5",
-      "fixed w-full h-dvh bg-white dark:bg-base-950",
+      "fixed bg-white dark:bg-base-950",
       // 'divide-y divide-base-900/10 dark:divide-white/20',
       "flex flex-col focus:outline-none"
     ].join(" "),
@@ -3182,11 +3182,10 @@ const modal = {
       },
       false: {
         content: [
-          "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]",
-          "sm:min-w-[400px]",
-          "sm:max-w-[420px] sm:h-auto sm:max-h-[calc(100vh-4rem)]",
-          "sm:rounded-md sm:shadow-lg",
-          "sm:ring ring-base-300 dark:ring-base-800"
+          "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+          "w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)]",
+          "rounded-md shadow-lg",
+          "ring ring-base-300 dark:ring-base-800"
         ].join(" ")
       }
     }

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.BfbMerCZ.cjs');
+const templates = require('./shared/b24ui-nuxt.D-N3gDSr.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.BYTVBEky.mjs';
+import { g as getTemplates, d as defaultOptions, a as getDefaultUiConfig } from './shared/b24ui-nuxt.CAS1q3My.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.BfbMerCZ.cjs');
+require('./shared/b24ui-nuxt.D-N3gDSr.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.BYTVBEky.mjs';
+import './shared/b24ui-nuxt.CAS1q3My.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.2.5",
+  "version": "0.2.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bitrix24/b24ui.git"
@@ -73,10 +73,10 @@
     "@nuxtjs/color-mode": "^3.5.2",
     "@tailwindcss/postcss": "^4.0.6",
     "@tailwindcss/vite": "^4.0.6",
-    "@tanstack/vue-table": "^8.20.5",
-    "@unhead/vue": "^1.11.18",
-    "@vueuse/core": "^12.5.0",
-    "@vueuse/integrations": "^12.5.0",
+    "@tanstack/vue-table": "^8.21.2",
+    "@unhead/vue": "^1.11.19",
+    "@vueuse/core": "^12.6.1",
+    "@vueuse/integrations": "^12.6.1",
     "colortranslator": "^4.1.0",
     "consola": "^3.4.0",
     "defu": "^6.1.4",
@@ -92,8 +92,8 @@
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
     "ohash": "^1.1.4",
-    "pathe": "^2.0.2",
-    "reka-ui": "1.0.0-alpha.9",
+    "pathe": "^2.0.3",
+    "reka-ui": "1.0.0-alpha.10",
     "scule": "^1.3.0",
     "tailwind-variants": "^0.3.1",
     "tailwindcss": "^4.0.6",
@@ -111,7 +111,7 @@
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.5.2",
     "eslint": "^9.20.1",
-    "happy-dom": "15.7.4",
+    "happy-dom": "^17.1.0",
     "joi": "^17.13.3",
     "knitwork": "^1.2.0",
     "nuxt": "^3.15.4",
@@ -123,7 +123,7 @@
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.2.0",
     "yup": "^1.6.1",
-    "zod": "^3.24.1"
+    "zod": "^3.24.2"
   },
   "peerDependencies": {
     "typescript": "^5.6.3"
@@ -132,13 +132,12 @@
     "@bitrix24/b24ui-nuxt": "workspace:*",
     "chokidar": "3.6.0",
     "debug": "4.3.7",
-    "happy-dom": "14.12.3",
     "rollup": "^4.24.0",
     "typescript": "5.6.3",
     "unimport": "3.14.5",
-    "vue-tsc": "^2.2.0",
     "unplugin": "^2.2.0",
-    "vite": "^6.0.7"
+    "vite": "^6.0.11",
+    "vue-tsc": "2.2.0"
   },
   "keywords": [
     "bitrix24-ui",
@@ -158,16 +157,17 @@
     "ui-framework"
   ],
   "scripts": {
-    "dev:prepare-short": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && vite build playground-vue",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && vite build playground-vue && nuxt-component-meta playground --outputDir ../src/.component-meta/",
+    "dev:prepare-short": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && vite build playground-vue && nuxi prepare demo",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && vite build playground-vue && nuxi prepare demo && nuxt-component-meta playground --outputDir ../src/.component-meta/",
     "build": "nuxt-module-build build",
     "dev": "DEV=true nuxi dev playground",
-    "dev-window": "set DEV=true && nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:generate": "nuxt generate playground",
     "dev:preview": "nuxt preview playground",
     "dev:vue": "DEV=true vite playground-vue",
-    "dev:vue-window": "set DEV=true && vite playground-vue",
+    "demo:dev": "DEV=true nuxi dev demo",
+    "demo:generate": "nuxt generate demo",
+    "demo:preview": "nuxt preview demo",
     "docs:full:dev": "pnpm build && vitepress dev docs",
     "docs:full:build": "pnpm build && vitepress build docs",
     "docs:dev": "vitepress dev docs",