@bitrix24/b24ui-nuxt 0.1.7 → 0.2.1

package/dist/runtime/components/Toast.vue

@@ -6,6 +6,7 @@ import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/toast'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps, IconComponent } from '../types'
+import type { StringOrVNode } from '../types/utils'
 
 const appConfigToast = _appConfig as AppConfig & { b24ui: { toast: Partial<typeof theme> } }
 
@@ -19,15 +20,16 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * @defaultValue 'li'
    */
   as?: any
-  title?: string
-  description?: string
+  title?: StringOrVNode
+  description?: StringOrVNode
   icon?: IconComponent
   avatar?: AvatarProps
   color?: ToastVariants['color']
+  orientation?: ToastVariants['orientation']
   /**
    * Display a list of actions:
-   * - under the title and description if multiline
-   * - next to the close button if not multiline
+   * - under the title and description when orientation is `vertical`
+   * - next to the close button when orientation is `horizontal`
    * `{ size: 'xs' }`{lang="ts-type"}
    */
   actions?: ButtonProps[]
@@ -67,7 +69,8 @@ import B24Avatar from './Avatar.vue'
 import B24Button from './Button.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
-  close: true
+  close: true,
+  orientation: 'vertical'
 })
 const emits = defineEmits<ToastEmits>()
 const slots = defineSlots<ToastSlots>()
@@ -76,10 +79,10 @@ const { t } = useLocale()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
 
-const multiline = computed(() => !!props.title && !!props.description)
-
 const b24ui = computed(() => toast({
-  color: props.color
+  color: props.color,
+  orientation: props.orientation,
+  title: !!props.title || !!slots.title
 }))
 
 const el = ref()
@@ -105,7 +108,8 @@ defineExpose({
     ref="el"
     v-slot="{ remaining, duration }"
     v-bind="rootProps"
-    :class="b24ui.root({ class: [props.class, props.b24ui?.root], multiline })"
+    :data-orientation="orientation"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
     :style="{ '--height': height }"
   >
     <slot name="leading">
@@ -120,16 +124,24 @@ defineExpose({
     <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
       <ToastTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
         <slot name="title">
-          {{ title }}
+          <component :is="title()" v-if="typeof title === 'function'" />
+          <component :is="title" v-else-if="typeof title === 'object'" />
+          <template v-else>
+            {{ title }}
+          </template>
         </slot>
       </ToastTitle>
       <ToastDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
         <slot name="description">
-          {{ description }}
+          <component :is="description()" v-if="typeof description === 'function'" />
+          <component :is="description" v-else-if="typeof description === 'object'" />
+          <template v-else>
+            {{ description }}
+          </template>
         </slot>
       </ToastDescription>
 
-      <div v-if="multiline && actions?.length" :class="b24ui.actions({ class: props.b24ui?.actions, multiline: true })">
+      <div v-if="orientation === 'vertical' && actions?.length" :class="b24ui.actions({ class: props.b24ui?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <B24Button size="xs" :color="color" v-bind="action" />
@@ -138,8 +150,8 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(!multiline && actions?.length) || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, multiline: false })">
-      <template v-if="!multiline">
+    <div v-if="(orientation === 'horizontal' && actions?.length) || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+      <template v-if="orientation === 'horizontal' && actions?.length">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <B24Button size="xs" :color="color" v-bind="action" />

package/dist/runtime/components/Toaster.vue

@@ -118,10 +118,10 @@ function getOffset(index: number) {
         '--transform': 'translateY(var(--translate)) scale(var(--scale))'
       }"
       :class="[b24ui.base(), {
-        'cursor-pointer': !!toast.click
+        'cursor-pointer': !!toast.onClick
       }]"
       @update:open="onUpdateOpen($event, toast.id)"
-      @click="toast.click && toast.click(toast)"
+      @click="toast.onClick && toast.onClick(toast)"
     />
 
     <ToastPortal :disabled="!portal">

package/dist/runtime/components/content/DescriptionList.vue

@@ -19,10 +19,11 @@ export interface DescriptionListItem {
   avatar?: AvatarProps
   slot?: string
   description?: string
+  orientation?: DescriptionListVariants['orientation']
   /**
    * Display a list of actions:
-   * - under the description if multiline
-   * - next to the description if not multiline
+   * - under the description when orientation is `vertical`
+   * - next to the description when orientation is `horizontal`
    * `{ size: 'xs' }`{lang="ts-type"}
    */
   actions?: ButtonProps[]
@@ -81,13 +82,13 @@ const b24ui = computed(() => descriptionList({
 function normalizeItem(item: any) {
   const label = get(item, props.labelKey as string)
   const description = get(item, props.descriptionKey as string)
-  const multiline = (item.actions || []).length > 1
+  const orientation = item?.orientation || 'vertical'
 
   return {
     ...item,
     label,
     description,
-    multiline
+    orientation
   }
 }
 
@@ -166,12 +167,13 @@ const normalizedItems = computed(() => {
           </span>
         </dt>
         <dd
+          :data-orientation="item.orientation"
           :class="b24ui.descriptionWrapper({
             class: [
               props.b24ui?.descriptionWrapper,
               item?.b24ui?.descriptionWrapper
             ],
-            multiline: item.multiline
+            orientation: item.orientation
           })"
         >
           <span
@@ -181,7 +183,7 @@ const normalizedItems = computed(() => {
                 props.b24ui?.description,
                 item?.b24ui?.description
               ],
-              multiline: item.multiline
+              orientation: item.orientation
             })"
           >
             <slot name="description" :item="item" :index="index">
@@ -195,7 +197,7 @@ const normalizedItems = computed(() => {
                 props.b24ui?.actions,
                 item?.b24ui?.actions
               ],
-              multiline: item.multiline
+              orientation: item.orientation
             })"
           >
             <slot name="actions" :item="item" :index="index">

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

@@ -15,6 +15,6 @@ export interface UseComponentIconsProps {
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
     isLeading: import("vue").ComputedRef<any>;
     isTrailing: import("vue").ComputedRef<boolean>;
-    leadingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
-    trailingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
+    leadingIconName: import("vue").ComputedRef<IconComponent | undefined>;
+    trailingIconName: import("vue").ComputedRef<IconComponent | undefined>;
 };

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

@@ -1,11 +1,12 @@
-import type { ToastProps } from '../types';
-export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
+import type { ToastProps, ToastEmits } from '../types';
+import type { EmitsToProps } from '../types/utils';
+export interface Toast extends Omit<ToastProps, 'defaultOpen'>, EmitsToProps<ToastEmits> {
     id: string | number;
-    click?: (toast: Toast) => void;
+    onClick?: (toast: Toast) => void;
 }
 export declare function useToast(): {
     toasts: import("vue").Ref<Toast[], Toast[]>;
-    add: (toast: Partial<Toast>) => Promise<Toast>;
+    add: (toast: Partial<Toast>) => Toast;
     update: (id: string | number, toast: Omit<Partial<Toast>, "id">) => void;
     remove: (id: string | number) => void;
     clear: () => void;

package/dist/runtime/composables/useToast.js

@@ -18,14 +18,14 @@ export function useToast() {
     }
     running.value = false;
   }
-  async function add(toast) {
+  function add(toast) {
     const body = {
       id: generateId(),
       open: true,
       ...toast
     };
     queue.push(body);
-    await processQueue();
+    processQueue();
     return body;
   }
   function update(id, toast) {

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

@@ -13,6 +13,7 @@ export * from '../components/Countdown.vue';
 export * from '../components/Form.vue';
 export * from '../components/FormField.vue';
 export * from '../components/Input.vue';
+export * from '../components/InputMenu.vue';
 export * from '../components/Kbd.vue';
 export * from '../components/Link.vue';
 export * from '../components/Progress.vue';

package/dist/runtime/types/index.js

@@ -13,6 +13,7 @@ export * from "../components/Countdown.vue";
 export * from "../components/Form.vue";
 export * from "../components/FormField.vue";
 export * from "../components/Input.vue";
+export * from "../components/InputMenu.vue";
 export * from "../components/Kbd.vue";
 export * from "../components/Link.vue";
 export * from "../components/Progress.vue";

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface TightMap<O = any> {
     [key: string]: TightMap | O;
 }
@@ -20,3 +21,7 @@ export type SelectItemKey<T> = T extends Record<string, any> ? keyof T : string;
 export type SelectModelValueEmits<T, V, M extends boolean = false, DV = T> = {
     'update:modelValue': [payload: SelectModelValue<T, V, M, DV>];
 };
+export type StringOrVNode = string | VNode | (() => VNode);
+export type EmitsToProps<T> = {
+    [K in keyof T as `on${Capitalize<string & K>}`]: T[K] extends [...args: infer Args] ? (...args: Args) => void : never;
+};