@bitrix24/b24ui-nuxt 0.4.5 → 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.DxEKoBT7.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.5",
+  "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.BH-d1ImO.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/App.vue

@@ -1,12 +1,11 @@
 <script lang="ts">
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
-import { localeContextInjectionKey } from '../composables/useLocale'
-import type { ToasterProps, Locale } from '../types'
+import type { ToasterProps, Locale, Messages } from '../types'
 
-export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps | null
-  locale?: Locale
+  locale?: Locale<T>
 }
 
 export interface AppSlots {
@@ -18,14 +17,15 @@ export default {
 }
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends Messages = Messages">
 import { toRef, useId, provide } from 'vue'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
+import { localeContextInjectionKey } from '../composables/useLocale'
 import B24Toaster from './Toaster.vue'
 import B24OverlayProvider from './OverlayProvider.vue'
 
-const props = defineProps<AppProps>()
+const props = defineProps<AppProps<T>>()
 defineSlots<AppSlots>()
 
 const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))

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/composables/defineLocale.d.ts

@@ -1,9 +1,9 @@
-import type { Locale, Direction, Messages } from '../types/locale';
-interface DefineLocaleOptions {
+import type { Locale, Direction } from '../types/locale';
+interface DefineLocaleOptions<M> {
     name: string;
     code: string;
     dir?: Direction;
-    messages: Messages;
+    messages: M;
 }
-export declare function defineLocale(options: DefineLocaleOptions): Locale;
+export declare function defineLocale<M>(options: DefineLocaleOptions<M>): Locale<M>;
 export {};

package/dist/runtime/composables/useLocale.d.ts

@@ -1,4 +1,4 @@
 import type { InjectionKey, Ref } from 'vue';
-import type { Locale } from '../types/locale';
-export declare const localeContextInjectionKey: InjectionKey<Ref<Locale | undefined>>;
-export declare const useLocale: (localeOverrides?: Ref<Locale | undefined>) => import("../utils/locale").LocaleContext;
+import type { Locale, Messages } from '../types/locale';
+export declare const localeContextInjectionKey: InjectionKey<Ref<Locale<unknown> | undefined>>;
+export declare const useLocale: (localeOverrides?: Ref<Locale<Messages> | undefined>) => import("../utils/locale").LocaleContext<Messages>;

package/dist/runtime/composables/useLocale.js

@@ -1,10 +1,10 @@
-import { computed, inject, ref } from "vue";
+import { computed, inject, toRef } from "vue";
+import { createSharedComposable } from "@vueuse/core";
 import { buildLocaleContext } from "../utils/locale.js";
 import en from "../locale/en.js";
-import { createSharedComposable } from "@vueuse/core";
 export const localeContextInjectionKey = Symbol("bitrix24-ui.locale-context");
 const _useLocale = (localeOverrides) => {
-  const locale = localeOverrides || inject(localeContextInjectionKey, ref());
+  const locale = localeOverrides || toRef(inject(localeContextInjectionKey));
   return buildLocaleContext(computed(() => locale.value || en));
 };
 export const useLocale = createSharedComposable(_useLocale);

package/dist/runtime/locale/ar.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/br.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/de.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/en.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/fr.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/id.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/it.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/ja.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/kz.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/la.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/ms.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/pl.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/ru.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/sc.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/tc.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/th.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/tr.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/ua.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/vn.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/plugins/colors.js

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

package/dist/runtime/prose/Code.vue

@@ -37,6 +37,6 @@ const b24ui = computed(() => proseCode({
 
 <template>
   <code
-    :class="b24ui.base({ class: props.b24ui?.base })"
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
   ><slot /></code>
 </template>

package/dist/runtime/prose/Img.vue

@@ -28,5 +28,5 @@ const b24ui = proseImg({})
 <template>
   <img
     :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
-  />
+  >
 </template>

package/dist/runtime/prose/Table.vue

@@ -0,0 +1,74 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/table'
+import { tv } from '../utils/tv'
+
+const appConfigProseTable = _appConfig as AppConfig & { b24ui: { prose: { table: Partial<typeof theme> } } }
+
+const proseTable = tv({ extend: tv(theme), ...(appConfigProseTable.b24ui?.prose?.table || {}) })
+
+export interface proseTableProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * @defaultValue true
+   */
+  rounded?: boolean
+  /**
+   * @defaultValue true
+   */
+  zebra?: boolean
+  /**
+   * @defaultValue false
+   */
+  rowHover?: boolean
+  /**
+   * @defaultValue false
+   */
+  bordered?: boolean
+  class?: any
+  b24ui?: Partial<typeof proseTable.slots>
+}
+
+export interface proseTableSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import B24TableWrapper from './../components/content/TableWrapper.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<proseTableProps>(), {
+  as: 'div',
+  rounded: true,
+  zebra: true,
+  rowHover: true,
+  bordered: true
+})
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseTable({})
+</script>
+
+<template>
+  <B24TableWrapper
+    :as="as"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+    :zebra="props.zebra"
+    :row-hover="props.rowHover"
+    :rounded="props.rounded"
+    :bordered="props.bordered"
+  >
+    <table
+      :class="b24ui.base({ class: props.b24ui?.base })"
+    >
+      <slot />
+    </table>
+  </B24TableWrapper>
+</template>

package/dist/runtime/prose/Tbody.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/tbody'
+import { tv } from '../utils/tv'
+
+const appConfigProseTbody = _appConfig as AppConfig & { b24ui: { prose: { tbody: Partial<typeof theme> } } }
+
+const proseTbody = tv({ extend: tv(theme), ...(appConfigProseTbody.b24ui?.prose?.tbody || {}) })
+
+export interface proseTbodyProps {
+  class?: any
+  b24ui?: Partial<typeof proseTbody.slots>
+}
+
+export interface proseTbodySlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseTbodyProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseTbody({})
+</script>
+
+<template>
+  <tbody
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </tbody>
+</template>

package/dist/runtime/prose/Td.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/td'
+import { tv } from '../utils/tv'
+
+const appConfigProseTd = _appConfig as AppConfig & { b24ui: { prose: { td: Partial<typeof theme> } } }
+
+const proseTd = tv({ extend: tv(theme), ...(appConfigProseTd.b24ui?.prose?.td || {}) })
+
+export interface proseTdProps {
+  class?: any
+  b24ui?: Partial<typeof proseTd.slots>
+}
+
+export interface proseTdSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseTdProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseTd({})
+</script>
+
+<template>
+  <td
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </td>
+</template>

package/dist/runtime/prose/Th.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/th'
+import { tv } from '../utils/tv'
+
+const appConfigProseTh = _appConfig as AppConfig & { b24ui: { prose: { th: Partial<typeof theme> } } }
+
+const proseTh = tv({ extend: tv(theme), ...(appConfigProseTh.b24ui?.prose?.th || {}) })
+
+export interface proseThProps {
+  class?: any
+  b24ui?: Partial<typeof proseTh.slots>
+}
+
+export interface proseThSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseThProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseTh({})
+</script>
+
+<template>
+  <th
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </th>
+</template>

package/dist/runtime/prose/Thead.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/thead'
+import { tv } from '../utils/tv'
+
+const appConfigProseThead = _appConfig as AppConfig & { b24ui: { prose: { thead: Partial<typeof theme> } } }
+
+const proseThead = tv({ extend: tv(theme), ...(appConfigProseThead.b24ui?.prose?.thead || {}) })
+
+export interface proseTheadProps {
+  class?: any
+  b24ui?: Partial<typeof proseThead.slots>
+}
+
+export interface proseTheadSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<proseTheadProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseThead({})
+</script>
+
+<template>
+  <thead
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </thead>
+</template>