@bitrix24/b24ui-nuxt 0.4.6 → 0.4.7

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.yyScbwpE.cjs');
+const templates = require('./shared/b24ui-nuxt.lbv7ybxH.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.4.6",
+  "version": "0.4.7",
   "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.BiEJAB1L.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CPOPpSQq.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/Form.vue

@@ -29,7 +29,7 @@ export interface FormEmits<T extends object> {
 }
 
 export interface FormSlots {
-  default(props?: {}): any
+  default(props?: { errors: FormError[] }): any
 }
 </script>
 
@@ -120,7 +120,7 @@ const blurredFields = new Set<keyof T>()
 function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
   return errs.map(err => ({
     ...err,
-    id: inputs.value[err.name]?.id
+    id: err?.name ? inputs.value[err.name]?.id : undefined
   }))
 }
 
@@ -158,12 +158,12 @@ async function _validate(opts: { name?: keyof T | (keyof T)[], silent?: boolean,
   if (names) {
     const otherErrors = errors.value.filter(error => !names.some((name) => {
       const pattern = inputs.value?.[name]?.pattern
-      return name === error.name || (pattern && error.name.match(pattern))
+      return name === error.name || (pattern && error.name?.match(pattern))
     }))
 
     const pathErrors = (await getErrors()).filter(error => names.some((name) => {
       const pattern = inputs.value?.[name]?.pattern
-      return name === error.name || (pattern && error.name.match(pattern))
+      return name === error.name || (pattern && error.name?.match(pattern))
     }))
 
     errors.value = otherErrors.concat(pathErrors)
@@ -268,6 +268,6 @@ defineExpose<Form<T>>({
     :class="form({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
-    <slot />
+    <slot :errors="errors" />
   </component>
 </template>

package/dist/runtime/components/FormField.vue

@@ -68,7 +68,7 @@ const b24ui = computed(() => formField({
 
 const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
-const error = computed(() => props.error || formErrors?.value?.find(error => error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern)))?.message)
+const error = computed(() => props.error || formErrors?.value?.find(error => error.name && (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))))?.message)
 
 const id = ref(useId())
 // Copies id's initial value to bind aria-attributes such as aria-describedby.

package/dist/runtime/components/Popover.vue

@@ -0,0 +1,105 @@
+<script lang="ts">
+import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverArrowProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/popover'
+import { tv } from '../utils/tv'
+
+const appConfigPopover = _appConfig as AppConfig & { b24ui: { popover: Partial<typeof theme> } }
+
+const popover = tv({ extend: tv(theme), ...(appConfigPopover.b24ui?.popover || {}) })
+
+export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+  /**
+   * The display mode of the popover.
+   * @defaultValue 'click'
+   */
+  mode?: 'click' | 'hover'
+  /**
+   * The content of the popover.
+   * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
+   */
+  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the popover.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the popover in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * When `false`, the popover will not close when clicking outside or pressing escape.
+   * @defaultValue true
+   */
+  dismissible?: boolean
+  class?: any
+  b24ui?: Partial<typeof popover.slots>
+}
+
+export interface PopoverEmits extends PopoverRootEmits {}
+
+export interface PopoverSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { useForwardPropsEmits } from 'reka-ui'
+import { Popover, HoverCard } from 'reka-ui/namespaced'
+import { reactivePick } from '@vueuse/core'
+
+const props = withDefaults(defineProps<PopoverProps>(), {
+  portal: true,
+  mode: 'click',
+  openDelay: 0,
+  closeDelay: 0,
+  dismissible: true
+})
+const emits = defineEmits<PopoverEmits>()
+const slots = defineSlots<PopoverSlots>()
+
+const pick = props.mode === 'hover' ? reactivePick(props, 'defaultOpen', 'open', 'openDelay', 'closeDelay') : reactivePick(props, 'defaultOpen', 'open', 'modal')
+const rootProps = useForwardPropsEmits(pick, emits)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as PopoverContentProps)
+const contentEvents = computed(() => {
+  if (!props.dismissible) {
+    return {
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault(),
+      escapeKeyDown: (e: Event) => e.preventDefault()
+    }
+  }
+
+  return {}
+})
+const arrowProps = toRef(() => props.arrow as PopoverArrowProps)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = computed(() => popover({
+  side: contentProps.value.side
+}))
+
+const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
+</script>
+
+<template>
+  <Component.Root v-slot="{ open }" v-bind="rootProps">
+    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </Component.Trigger>
+
+    <Component.Portal :disabled="!portal">
+      <Component.Content v-bind="contentProps" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-on="contentEvents">
+        <slot name="content" />
+
+        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+      </Component.Content>
+    </Component.Portal>
+  </Component.Root>
+</template>

package/dist/runtime/plugins/colors.js

@@ -38,5 +38,7 @@ export default defineNuxtPlugin(() => {
       }];
     }
   }
-  useHead(headData);
+  if (!nuxtApp.isVue) {
+    useHead(headData);
+  }
 });

package/dist/runtime/types/form.d.ts

@@ -27,7 +27,7 @@ export interface Form<T extends object> {
 export type FormSchema<T extends object> = ZodSchema | YupObjectSchema<T> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> | JoiSchema<T> | SuperstructSchema<any, any> | StandardSchemaV1;
 export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus';
 export interface FormError<P extends string = string> {
-    name: P;
+    name?: P;
     message: string;
 }
 export interface FormErrorWithId extends FormError {

package/dist/runtime/types/index.d.ts

@@ -21,6 +21,7 @@ export * from '../components/Kbd.vue';
 export * from '../components/Link.vue';
 export * from '../components/Modal.vue';
 export * from '../components/ModalDialogClose.vue';
+export * from '../components/Popover.vue';
 export * from '../components/Progress.vue';
 export * from '../components/RadioGroup.vue';
 export * from '../components/Range.vue';

package/dist/runtime/types/index.js

@@ -21,6 +21,7 @@ export * from "../components/Kbd.vue";
 export * from "../components/Link.vue";
 export * from "../components/Modal.vue";
 export * from "../components/ModalDialogClose.vue";
+export * from "../components/Popover.vue";
 export * from "../components/Progress.vue";
 export * from "../components/RadioGroup.vue";
 export * from "../components/Range.vue";

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

@@ -1,9 +1,6 @@
 import type { Ref } from 'vue';
 import type { NuxtApp } from '#app';
-/**
- * @todo not use @unhead/vue/legacy
- */
-export { useHead } from '@unhead/vue/legacy';
+export { useHead } from '@unhead/vue';
 export { useRoute, useRouter } from 'vue-router';
 export { defineShortcuts } from '../composables/defineShortcuts';
 export { defineLocale } from '../composables/defineLocale';
@@ -31,6 +28,7 @@ export declare const useCookie: <T = string>(_name: string, _options?: Record<st
 export declare const useState: <T>(key: string, init: () => T) => Ref<T>;
 export declare function useNuxtApp(): {
     isHydrating: boolean;
+    isVue: boolean;
     payload: {
         serverRendered: boolean;
     };

package/dist/runtime/vue/stubs.js

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import appConfig from "#build/app.config";
 import { useColorMode as useColorModeVueUse } from "@vueuse/core";
-export { useHead } from "@unhead/vue/legacy";
+export { useHead } from "@unhead/vue";
 export { useRoute, useRouter } from "vue-router";
 export { defineShortcuts } from "../composables/defineShortcuts.js";
 export { defineLocale } from "../composables/defineLocale.js";
@@ -55,6 +55,7 @@ export const useState = (key, init) => {
 export function useNuxtApp() {
   return {
     isHydrating: true,
+    isVue: true,
     payload: { serverRendered: false }
   };
 }

package/dist/shared/{b24ui-nuxt.BiEJAB1L.mjs → b24ui-nuxt.CPOPpSQq.mjs}

@@ -1694,7 +1694,7 @@ const dropdownMenu = {
       "bg-white dark:bg-base-dark",
       "shadow-lg rounded-2xs ring ring-base-300 dark:ring-base-800",
       "overflow-y-auto",
-      "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      "motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
       "divide-y divide-base-master/10 dark:divide-base-100/20 scroll-py-1",
       "pointer-events-auto"
     ].join(" "),
@@ -3391,6 +3391,18 @@ const modal = {
   }
 };
 
+const popover = {
+  slots: {
+    content: [
+      "bg-white dark:bg-base-dark",
+      "shadow-lg rounded-2xs ring ring-base-300 dark:ring-base-800",
+      "motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      "focus:outline-none pointer-events-auto"
+    ].join(" "),
+    arrow: "fill-white dark:fill-base-dark stroke-base-300 dark:stroke-base-300"
+  }
+};
+
 const progress = {
   slots: {
     root: "gap-2",
@@ -5294,6 +5306,7 @@ const theme = {
   kbd: kbd,
   link: link,
   modal: modal,
+  popover: popover,
   progress: progress,
   radioGroup: radioGroup,
   range: range,

package/dist/shared/{b24ui-nuxt.yyScbwpE.cjs → b24ui-nuxt.lbv7ybxH.cjs}

@@ -1696,7 +1696,7 @@ const dropdownMenu = {
       "bg-white dark:bg-base-dark",
       "shadow-lg rounded-2xs ring ring-base-300 dark:ring-base-800",
       "overflow-y-auto",
-      "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      "motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
       "divide-y divide-base-master/10 dark:divide-base-100/20 scroll-py-1",
       "pointer-events-auto"
     ].join(" "),
@@ -3393,6 +3393,18 @@ const modal = {
   }
 };
 
+const popover = {
+  slots: {
+    content: [
+      "bg-white dark:bg-base-dark",
+      "shadow-lg rounded-2xs ring ring-base-300 dark:ring-base-800",
+      "motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      "focus:outline-none pointer-events-auto"
+    ].join(" "),
+    arrow: "fill-white dark:fill-base-dark stroke-base-300 dark:stroke-base-300"
+  }
+};
+
 const progress = {
   slots: {
     root: "gap-2",
@@ -5296,6 +5308,7 @@ const theme = {
   kbd: kbd,
   link: link,
   modal: modal,
+  popover: popover,
   progress: progress,
   radioGroup: radioGroup,
   range: range,

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.yyScbwpE.cjs');
+const templates = require('./shared/b24ui-nuxt.lbv7ybxH.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.BiEJAB1L.mjs';
+import { g as getTemplates, d as defaultOptions, a as getDefaultUiConfig } from './shared/b24ui-nuxt.CPOPpSQq.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.yyScbwpE.cjs');
+require('./shared/b24ui-nuxt.lbv7ybxH.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.BiEJAB1L.mjs';
+import './shared/b24ui-nuxt.CPOPpSQq.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.4.6",
+  "version": "0.4.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bitrix24/b24ui.git"
@@ -78,7 +78,7 @@
     "@tailwindcss/postcss": "^4.0.12",
     "@tailwindcss/vite": "^4.0.12",
     "@tanstack/vue-table": "^8.21.2",
-    "@unhead/vue": "^2.0.0-rc.9",
+    "@unhead/vue": "^2.0.0-rc.10",
     "@vueuse/core": "^13.0.0",
     "@vueuse/integrations": "^13.0.0",
     "canvas-confetti": "^1.9.3",