@bitrix24/b24ui-nuxt 0.2.4 → 0.2.6

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.V9TzyCqH.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(" ")
       }
     }
@@ -3469,7 +3468,7 @@ const radioGroup = {
   slots: {
     root: "relative",
     fieldset: "flex",
-    legend: "mb-1.5 block font-medium text-base-master dark:text-base-400",
+    legend: "mb-1.5 block text-base-900 dark:text-base-400",
     item: "flex items-start",
     base: [
       "cursor-pointer rounded-full",
@@ -3841,7 +3840,8 @@ const select = () => {
 const selectMenu = () => {
   return defu({
     slots: {
-      input: "border-b border-base-300 dark:dark:border-base-800"
+      input: "border-b border-base-300 dark:dark:border-base-800",
+      focusScope: "flex flex-col min-h-0"
     },
     variants: {
       addNew: {
@@ -4992,8 +4992,12 @@ const descriptionList = {
     avatar: "shrink-0",
     avatarSize: "",
     label: "",
-    descriptionWrapper: "text-base-950 sm:border-t sm:border-base-950/5 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none",
-    description: "text-base-900 dark:text-base-150",
+    descriptionWrapper: [
+      "sm:border-t sm:[&:nth-child(2)]:border-none",
+      "text-base-900 sm:border-base-950/5",
+      "dark:text-base-150 dark:sm:border-white/5"
+    ].join(" "),
+    description: "",
     actions: "flex flex-wrap gap-1.5 shrink-0",
     footer: "border-t border-base-950/5 dark:border-white/5"
   },

package/dist/shared/{b24ui-nuxt.DGjopCKm.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(" ")
       }
     }
@@ -3471,7 +3470,7 @@ const radioGroup = {
   slots: {
     root: "relative",
     fieldset: "flex",
-    legend: "mb-1.5 block font-medium text-base-master dark:text-base-400",
+    legend: "mb-1.5 block text-base-900 dark:text-base-400",
     item: "flex items-start",
     base: [
       "cursor-pointer rounded-full",
@@ -3843,7 +3842,8 @@ const select = () => {
 const selectMenu = () => {
   return defu.defu({
     slots: {
-      input: "border-b border-base-300 dark:dark:border-base-800"
+      input: "border-b border-base-300 dark:dark:border-base-800",
+      focusScope: "flex flex-col min-h-0"
     },
     variants: {
       addNew: {
@@ -4994,8 +4994,12 @@ const descriptionList = {
     avatar: "shrink-0",
     avatarSize: "",
     label: "",
-    descriptionWrapper: "text-base-950 sm:border-t sm:border-base-950/5 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none",
-    description: "text-base-900 dark:text-base-150",
+    descriptionWrapper: [
+      "sm:border-t sm:[&:nth-child(2)]:border-none",
+      "text-base-900 sm:border-base-950/5",
+      "dark:text-base-150 dark:sm:border-white/5"
+    ].join(" "),
+    description: "",
     actions: "flex flex-wrap gap-1.5 shrink-0",
     footer: "border-t border-base-950/5 dark:border-white/5"
   },

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.DGjopCKm.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.V9TzyCqH.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.DGjopCKm.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.V9TzyCqH.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.4",
+  "version": "0.2.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bitrix24/b24ui.git"
@@ -71,12 +71,12 @@
     "@nuxt/kit": "^3.15.4",
     "@nuxt/schema": "^3.15.4",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@tailwindcss/postcss": "^4.0.4",
-    "@tailwindcss/vite": "^4.0.4",
-    "@tanstack/vue-table": "^8.20.5",
-    "@unhead/vue": "^1.11.18",
-    "@vueuse/core": "^12.5.0",
-    "@vueuse/integrations": "^12.5.0",
+    "@tailwindcss/postcss": "^4.0.6",
+    "@tailwindcss/vite": "^4.0.6",
+    "@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,26 +92,26 @@
     "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.4",
+    "tailwindcss": "^4.0.6",
     "tinyglobby": "^0.2.10",
-    "unplugin": "^2.1.2",
+    "unplugin": "^2.2.0",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
     "vaul-vue": "^0.2.1"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.0.0",
+    "@nuxt/eslint-config": "^1.0.1",
     "@nuxt/module-builder": "^0.8.4",
     "@nuxt/test-utils": "^3.15.4",
     "@standard-schema/spec": "^1.0.0",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.5.2",
-    "eslint": "^9.19.0",
-    "happy-dom": "15.7.4",
+    "eslint": "^9.20.1",
+    "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.1.2",
-    "vite": "^6.0.7"
+    "unplugin": "^2.2.0",
+    "vite": "^6.0.11",
+    "vue-tsc": "2.2.0"
   },
   "keywords": [
     "bitrix24-ui",
@@ -158,15 +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",