@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/module.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+const defu = require('defu');
+const kit = require('@nuxt/kit');
+const templates = require('./shared/b24ui-nuxt.DrKwIWoc.cjs');
+require('node:url');
+require('scule');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+const name = "@bitrix24/b24ui-nuxt";
+const version = "0.5.11";
+
+const module$1 = kit.defineNuxtModule({
+  meta: {
+    name,
+    version,
+    docs: "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
+    configKey: "b24ui",
+    compatibility: {
+      nuxt: ">=3.16.0"
+    }
+  },
+  defaults: templates.defaultOptions,
+  async setup(options, nuxt) {
+    const { resolve } = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('module.cjs', document.baseURI).href)));
+    nuxt.options.b24ui = options;
+    nuxt.options.alias["#b24ui"] = resolve("./runtime");
+    nuxt.options.appConfig.b24ui = defu.defu(nuxt.options.appConfig.b24ui || {}, templates.getDefaultUiConfig());
+    nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
+    nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
+    if (nuxt.options.builder === "@nuxt/vite-builder") {
+      const plugin = await import('@tailwindcss/vite').then((r) => r.default);
+      kit.addVitePlugin(plugin());
+    } else {
+      nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
+    }
+    async function registerModule(name2, key, options2) {
+      if (!kit.hasNuxtModule(name2)) {
+        await kit.installModule(name2, options2);
+      } else {
+        nuxt.options[key] = defu.defu(nuxt.options[key], options2);
+      }
+    }
+    if (options.colorMode) {
+      await registerModule("@nuxtjs/color-mode", "colorMode", { classSuffix: "", disableTransition: true });
+    }
+    kit.addPlugin({ src: resolve("./runtime/plugins/colors") });
+    kit.addComponentsDir({
+      path: resolve("./runtime/components"),
+      prefix: "B24",
+      pathPrefix: false
+    });
+    kit.addComponentsDir({
+      path: resolve("./runtime/prose"),
+      prefix: "Prose",
+      pathPrefix: false
+    });
+    kit.addImportsDir(resolve("./runtime/composables"));
+    templates.addTemplates(options, nuxt, resolve);
+  }
+});
+
+module.exports = module$1;

package/dist/module.d.cts

@@ -0,0 +1,15 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
+
+interface ModuleOptions {
+    /**
+     * Enable or disable `@nuxtjs/color-mode` module
+     * @defaultValue `true`
+     * @link https://bitrix24.github.io/b24ui/guide/color-mode-nuxt.html
+     */
+    colorMode?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,15 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
+
+interface ModuleOptions {
+    /**
+     * Enable or disable `@nuxtjs/color-mode` module
+     * @defaultValue `true`
+     * @link https://bitrix24.github.io/b24ui/guide/color-mode-nuxt.html
+     */
+    colorMode?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -1,13 +1,13 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
   "configKey": "b24ui",
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
   "builder": {
-    "@nuxt/module-builder": "1.0.0",
-    "unbuild": "3.5.0"
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
   }
 }

package/dist/module.mjs

@@ -5,7 +5,7 @@ import 'node:url';
 import 'scule';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "0.5.10";
+const version = "0.5.11";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/Advice.vue

@@ -1,54 +1,61 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/advice";
-import { tv } from "../utils/tv";
-const appConfigAdvice = _appConfig;
-const advice = tv({ extend: tv(theme), ...appConfigAdvice.b24ui?.advice || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/advice'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
+import type { AvatarProps } from '../types'
+
+const appConfigAdvice = _appConfig as AppConfig & { b24ui: { advice: Partial<typeof theme> } }
+
+const advice = tv({ extend: tv(theme), ...(appConfigAdvice.b24ui?.advice || {}) })
+
+type AdviceVariants = VariantProps<typeof advice>
+
+export interface AdviceProps extends Omit<UseComponentIconsProps, 'loading' | 'trailing' | 'trailingIcon'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  description?: string
+  /**
+   * @defaultValue 'bottom'
+   */
+  angle?: AdviceVariants['angle']
+  class?: any
+  b24ui?: Partial<typeof advice.slots>
+}
+
+export interface AdviceSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+}
 </script>
 
-<script setup>
-import { computed } from "vue";
-import { useComponentIcons } from "../composables/useComponentIcons";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  description: {
-    type: String,
-    required: false
-  },
-  angle: {
-    type: null,
-    required: false,
-    default: "bottom"
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  }
-});
-const slots = defineSlots();
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import B24Avatar from './Avatar.vue'
+import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<AdviceProps>(), {
+  as: 'div',
+  angle: 'bottom'
+})
+const slots = defineSlots<AdviceSlots>()
+
 const { isLeading, leadingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: false }))
-);
+)
+
 const b24ui = computed(() => advice({
   angle: props.angle
-}));
+}))
 </script>
 
 <template>
@@ -62,7 +69,7 @@ const b24ui = computed(() => advice({
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+          :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
           v-bind="avatar"
           :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
         />
@@ -73,7 +80,7 @@ const b24ui = computed(() => advice({
       :class="b24ui.leading({ class: props.b24ui?.leading })"
     >
       <B24Avatar
-        :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+        :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
         :icon="PersonIcon"
         alt="Person"
         :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"

package/dist/runtime/components/Alert.vue

@@ -1,78 +1,103 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/alert";
-import { tv } from "../utils/tv";
-const appConfigAlert = _appConfig;
-const alert = tv({ extend: tv(theme), ...appConfigAlert.b24ui?.alert || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/alert'
+import { tv } from '../utils/tv'
+import type { AvatarProps, ButtonProps, IconComponent } from '../types'
+
+const appConfigAlert = _appConfig as AppConfig & { b24ui: { alert: Partial<typeof theme> } }
+
+const alert = tv({ extend: tv(theme), ...(appConfigAlert.b24ui?.alert || {}) })
+
+type AlertVariants = VariantProps<typeof alert>
+
+export interface AlertProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  title?: string
+  description?: string
+  /**
+   * Display an icon on the left side.
+   * @IconComponent
+   */
+  icon?: IconComponent
+  avatar?: AvatarProps
+  /**
+   * @defaultValue 'default'
+   */
+  color?: AlertVariants['color']
+  /**
+   * The orientation between the content and the actions.
+   * @defaultValue 'vertical'
+   */
+  orientation?: AlertVariants['orientation']
+  /**
+   * @defaultValue 'md'
+   */
+  size?: AlertVariants['size']
+  /**
+   * Display a list of actions:
+   * - under the title and description when orientation is `vertical`
+   * - next to the close button when orientation is `horizontal`
+   * `{ size: 'xs' }`{lang="ts"}
+   */
+  actions?: ButtonProps[]
+  /**
+   * Display a close button to dismiss the alert.
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts"}
+   * @emits 'update:open'
+   * @defaultValue false
+   */
+  close?: boolean | Partial<ButtonProps>
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   * @IconComponent
+   */
+  closeIcon?: IconComponent
+  class?: any
+  b24ui?: Partial<typeof alert.slots>
+}
+
+export interface AlertEmits {
+  (e: 'update:open', value: boolean): void
+}
+
+export interface AlertSlots {
+  leading(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  actions(props?: {}): any
+  close(props: { b24ui: ReturnType<typeof alert> }): any
+}
 </script>
 
-<script setup>
-import { computed } from "vue";
-import { useLocale } from "../composables/useLocale";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  title: {
-    type: String,
-    required: false
-  },
-  description: {
-    type: String,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "vertical"
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  actions: {
-    type: Array,
-    required: false
-  },
-  close: {
-    type: [Boolean, Object],
-    required: false
-  },
-  closeIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-const emits = defineEmits(["update:open"]);
-const slots = defineSlots();
-const { t } = useLocale();
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useLocale } from '../composables/useLocale'
+import icons from '../dictionary/icons'
+import B24Avatar from './Avatar.vue'
+import B24Button from './Button.vue'
+
+const props = withDefaults(defineProps<AlertProps>(), {
+  orientation: 'vertical'
+})
+const emits = defineEmits<AlertEmits>()
+const slots = defineSlots<AlertSlots>()
+
+const { t } = useLocale()
+
 const b24ui = computed(() => alert({
   color: props.color,
   size: props.size,
   orientation: props.orientation,
   title: !!props.title || !!slots.title
-}));
+}))
 </script>
 
 <template>
@@ -83,7 +108,7 @@ const b24ui = computed(() => alert({
         v-if="icon"
         :class="b24ui.icon({ class: props.b24ui?.icon })"
       />
-      <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <B24Avatar v-else-if="avatar" :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
     </slot>
 
     <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
@@ -105,7 +130,7 @@ const b24ui = computed(() => alert({
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && actions?.length || close" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+    <div v-if="(orientation === 'horizontal' && actions?.length) || close" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && actions?.length">
         <slot name="actions">
           <B24Button v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
@@ -119,7 +144,7 @@ const b24ui = computed(() => alert({
           size="xs"
           color="link"
           :aria-label="t('alert.close')"
-          v-bind="typeof close === 'object' ? close : {}"
+          v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
           :class="b24ui.close({ class: props.b24ui?.close })"
           @click="emits('update:open', false)"
         />

package/dist/runtime/components/App.vue

@@ -1,46 +1,43 @@
-<script>
+<script lang="ts">
+import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
+import type { ToasterProps, Locale, Messages } from '../types'
+
+export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+  tooltip?: TooltipProviderProps
+  toaster?: ToasterProps | null
+  locale?: Locale<T>
+}
+
+export interface AppSlots {
+  default(props?: {}): any
+}
+
 export default {
-  name: "App"
-};
+  name: 'App'
+}
 </script>
 
-<script setup>
-import { toRef, provide } from "vue";
-import { useForwardProps } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-import { localeContextInjectionKey } from "../composables/useLocale";
-const props = defineProps({
-  tooltip: {
-    type: Object,
-    required: false
-  },
-  toaster: {
-    type: [Object, null],
-    required: false
-  },
-  locale: {
-    type: null,
-    required: false
-  },
-  scrollBody: {
-    type: [Boolean, Object],
-    required: false
-  },
-  nonce: {
-    type: String,
-    required: false
-  }
-});
-defineSlots();
-const configProviderProps = useForwardProps(reactivePick(props, "scrollBody"));
-const tooltipProps = toRef(() => props.tooltip);
-const toasterProps = toRef(() => props.toaster);
-const locale = toRef(() => props.locale);
-provide(localeContextInjectionKey, locale);
+<script setup lang="ts" generic="T extends 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<T>>()
+defineSlots<AppSlots>()
+
+const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
+const tooltipProps = toRef(() => props.tooltip)
+const toasterProps = toRef(() => props.toaster)
+
+const locale = toRef(() => props.locale)
+provide(localeContextInjectionKey, locale)
 </script>
 
 <template>
-  <ConfigProvider :use-id="() => useId()" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
+  <ConfigProvider :use-id="() => (useId() as string)" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
       <B24Toaster v-if="toaster !== null" v-bind="toasterProps">
         <slot />