@bitrix24/b24ui-nuxt 0.5.9 → 0.5.10

package/dist/runtime/components/Toast.vue

@@ -1,117 +1,106 @@
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-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> } }
-
-const toast = tv({ extend: tv(theme), ...(appConfigToast.b24ui?.toast || {}) })
-
-type ToastVariants = VariantProps<typeof toast>
-
-export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'li'
-   */
-  as?: any
-  title?: StringOrVNode
-  description?: StringOrVNode
-  /**
-   * @IconComponent
-   */
-  icon?: IconComponent
-  avatar?: AvatarProps
-  /**
-   * @defaultValue 'default'
-   */
-  color?: ToastVariants['color']
-  /**
-   * The orientation between the content and the actions
-   * @defaultValue 'vertical'
-   */
-  orientation?: ToastVariants['orientation']
-  /**
-   * 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 toast.
-   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts"}
-   * @defaultValue true
-   */
-  close?: boolean | Partial<ButtonProps>
-  /**
-   * The icon displayed in the close button.
-   * @defaultValue icons.close
-   * @IconComponent
-   */
-  closeIcon?: IconComponent
-  class?: any
-  b24ui?: Partial<typeof toast.slots>
-}
-
-export interface ToastEmits extends ToastRootEmits {}
-
-export interface ToastSlots {
-  leading(props?: {}): any
-  title(props?: {}): any
-  description(props?: {}): any
-  actions(props?: {}): any
-  close(props: { b24ui: ReturnType<typeof toast> }): any
-}
+<script>
+import _appConfig from "#build/app.config";
+import theme from "#build/b24ui/toast";
+import { tv } from "../utils/tv";
+const appConfigToast = _appConfig;
+const toast = tv({ extend: tv(theme), ...appConfigToast.b24ui?.toast || {} });
 </script>
 
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useLocale } from '../composables/useLocale'
-import icons from '../dictionary/icons'
-import B24Avatar from './Avatar.vue'
-import B24Button from './Button.vue'
-
-const props = withDefaults(defineProps<ToastProps>(), {
-  close: true,
-  orientation: 'vertical'
-})
-const emits = defineEmits<ToastEmits>()
-const slots = defineSlots<ToastSlots>()
-
-const { t } = useLocale()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
-
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useLocale } from "../composables/useLocale";
+const props = defineProps({
+  as: {
+    type: null,
+    required: false
+  },
+  title: {
+    type: [String, Object, Function],
+    required: false
+  },
+  description: {
+    type: [String, Object, Function],
+    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"
+  },
+  actions: {
+    type: Array,
+    required: false
+  },
+  close: {
+    type: [Boolean, Object],
+    required: false,
+    default: true
+  },
+  closeIcon: {
+    type: [Function, Object],
+    required: false
+  },
+  class: {
+    type: null,
+    required: false
+  },
+  b24ui: {
+    type: Object,
+    required: false
+  },
+  defaultOpen: {
+    type: Boolean,
+    required: false
+  },
+  open: {
+    type: Boolean,
+    required: false
+  },
+  type: {
+    type: String,
+    required: false
+  },
+  duration: {
+    type: Number,
+    required: false
+  }
+});
+const emits = defineEmits(["escapeKeyDown", "pause", "resume", "swipeStart", "swipeMove", "swipeCancel", "swipeEnd", "update:open"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "duration", "type"), emits);
 const b24ui = computed(() => toast({
   color: props.color,
   orientation: props.orientation,
   title: !!props.title || !!slots.title
-}))
-
-const el = ref()
-const height = ref(0)
-
+}));
+const el = ref();
+const height = ref(0);
 onMounted(() => {
   if (!el.value) {
-    return
+    return;
   }
-
   setTimeout(() => {
-    height.value = el.value.$el.getBoundingClientRect()?.height
-  }, 0)
-})
-
+    height.value = el.value.$el.getBoundingClientRect()?.height;
+  }, 0);
+});
 defineExpose({
   height
-})
+});
 </script>
 
 <template>
@@ -129,7 +118,7 @@ defineExpose({
         v-if="icon"
         :class="b24ui.icon({ class: props.b24ui?.icon })"
       />
-      <B24Avatar v-else-if="avatar" :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
     </slot>
 
     <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
@@ -161,7 +150,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(orientation === 'horizontal' && actions?.length) || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+    <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>
@@ -178,7 +167,7 @@ defineExpose({
             size="xs"
             color="link"
             :aria-label="t('toast.close')"
-            v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+            v-bind="typeof close === 'object' ? close : {}"
             :class="b24ui.close({ class: props.b24ui?.close })"
             @click.stop
           />

package/dist/runtime/components/Toast.vue.d.ts

@@ -0,0 +1,438 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ToastRootProps, ToastRootEmits } from 'reka-ui';
+import type { AvatarProps, ButtonProps, IconComponent } from '../types';
+import type { StringOrVNode } from '../types/utils';
+declare const toast: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        primary: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        secondary: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        collab: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        ai: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    actions: string;
+    progress: string;
+    close: string;
+}, undefined, {
+    color: {
+        default: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        primary: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        secondary: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        collab: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        ai: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    actions: string;
+    progress: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        primary: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        secondary: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        collab: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        ai: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    actions: string;
+    progress: string;
+    close: string;
+}, undefined, {
+    color: {
+        default: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        primary: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        secondary: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        collab: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        ai: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    actions: string;
+    progress: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        primary: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        secondary: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        collab: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+        ai: {
+            root: string;
+            icon: string;
+            progress: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+    title: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    actions: string;
+    progress: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>>;
+type ToastVariants = VariantProps<typeof toast>;
+export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'li'
+     */
+    as?: any;
+    title?: StringOrVNode;
+    description?: StringOrVNode;
+    /**
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    avatar?: AvatarProps;
+    /**
+     * @defaultValue 'default'
+     */
+    color?: ToastVariants['color'];
+    /**
+     * The orientation between the content and the actions
+     * @defaultValue 'vertical'
+     */
+    orientation?: ToastVariants['orientation'];
+    /**
+     * 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 toast.
+     * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts"}
+     * @defaultValue true
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue icons.close
+     * @IconComponent
+     */
+    closeIcon?: IconComponent;
+    class?: any;
+    b24ui?: Partial<typeof toast.slots>;
+}
+export interface ToastEmits extends ToastRootEmits {
+}
+export interface ToastSlots {
+    leading(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    actions(props?: {}): any;
+    close(props: {
+        b24ui: ReturnType<typeof toast>;
+    }): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ToastProps>, {
+    close: boolean;
+    orientation: string;
+}>>, {
+    height: import("vue").Ref<number, number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    close: boolean | Partial<ButtonProps>;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<ToastSlots> & ToastSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};