@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/Toaster.vue

@@ -1,92 +1,114 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/toaster";
-import { tv } from "../utils/tv";
-const appConfigToaster = _appConfig;
-const toaster = tv({ extend: tv(theme), ...appConfigToaster.b24ui?.toaster || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { ToastProviderProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/toaster'
+import { tv } from '../utils/tv'
+
+const appConfigToaster = _appConfig as AppConfig & { b24ui: { toaster: Partial<typeof theme> } }
+
+const toaster = tv({ extend: tv(theme), ...(appConfigToaster.b24ui?.toaster || {}) })
+
+type ToasterVariants = VariantProps<typeof toaster>
+
+export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
+  /**
+   * The position on the screen to display the toasts.
+   * @defaultValue 'top-right'
+   */
+  position?: ToasterVariants['position']
+  /**
+   * Expand the toasts to show multiple toasts at once.
+   * @defaultValue true
+   */
+  expand?: boolean
+  /**
+   * Render the toaster in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * @defaultValue 5000
+   */
+  duration?: number
+  class?: any
+  b24ui?: Partial<typeof toaster.slots>
+}
+
+export interface ToasterSlots {
+  default(props?: {}): any
+}
+
 export default {
-  name: "Toaster"
-};
+  name: 'Toaster'
+}
 </script>
 
-<script setup>
-import { ref, computed } from "vue";
-import { useForwardProps } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-import { useToast } from "../composables/useToast";
-const props = defineProps({
-  position: {
-    type: null,
-    required: false,
-    default: "top-right"
-  },
-  expand: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  duration: {
-    type: Number,
-    required: false,
-    default: 5e3
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  label: {
-    type: String,
-    required: false
-  },
-  swipeThreshold: {
-    type: Number,
-    required: false
-  }
-});
-defineSlots();
-const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold"));
-const { toasts, remove } = useToast();
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useToast } from '../composables/useToast'
+import type { Toast } from '../composables/useToast'
+import { omit } from '../utils'
+import B24Toast from './Toast.vue'
+
+const props = withDefaults(defineProps<ToasterProps>(), {
+  position: 'top-right' as const,
+  expand: true,
+  duration: 5000,
+  portal: true
+})
+defineSlots<ToasterSlots>()
+
+const providerProps = useForwardProps(reactivePick(props, 'duration', 'label', 'swipeThreshold'))
+
+const proxyToastProps = (toast: Toast) => {
+  return omit(toast, ['id', 'close'])
+}
+
+const { toasts, remove } = useToast()
+
 const swipeDirection = computed(() => {
   switch (props.position) {
-    case "top-center":
-      return "up";
-    case "top-right":
-    case "bottom-right":
-      return "right";
-    case "bottom-center":
-      return "down";
-    case "top-left":
-    case "bottom-left":
-      return "left";
+    case 'top-center':
+      return 'up'
+    case 'top-right':
+    case 'bottom-right':
+      return 'right'
+    case 'bottom-center':
+      return 'down'
+    case 'top-left':
+    case 'bottom-left':
+      return 'left'
   }
-  return "right";
-});
+  return 'right'
+})
+
 const b24ui = computed(() => toaster({
   position: props.position,
   swipeDirection: swipeDirection.value
-}));
-function onUpdateOpen(value, id) {
+}))
+
+function onUpdateOpen(value: boolean, id: string | number) {
   if (value) {
-    return;
+    return
   }
-  remove(id);
+
+  remove(id)
 }
-const hovered = ref(false);
-const expanded = computed(() => props.expand || hovered.value);
-const refs = ref([]);
-const height = computed(() => refs.value.reduce((acc, { height: height2 }) => acc + height2 + 16, 0));
-const frontHeight = computed(() => refs.value[refs.value.length - 1]?.height || 0);
-function getOffset(index) {
-  return refs.value.slice(index + 1).reduce((acc, { height: height2 }) => acc + height2 + 16, 0);
+
+const hovered = ref(false)
+const expanded = computed(() => props.expand || hovered.value)
+
+const refs = ref<{ height: number }[]>([])
+
+const height = computed(() => refs.value.reduce((acc, { height }) => acc + height + 16, 0))
+const frontHeight = computed(() => refs.value[refs.value.length - 1]?.height || 0)
+
+function getOffset(index: number) {
+  return refs.value.slice(index + 1).reduce((acc, { height }) => acc + height + 16, 0)
 }
 </script>
 
@@ -98,21 +120,21 @@ function getOffset(index) {
       v-for="(toast, index) in toasts"
       :key="toast.id"
       ref="refs"
-      v-bind="omit(toast, ['id', 'close'])"
-      :close="toast.close"
+      v-bind="proxyToastProps(toast)"
+      :close="(toast.close as boolean)"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"
       :style="{
-  '--index': index - toasts.length + toasts.length,
-  '--before': toasts.length - 1 - index,
-  '--offset': getOffset(index),
-  '--scale': expanded ? '1' : 'calc(1 - var(--before) * var(--scale-factor))',
-  '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
-  '--transform': 'translateY(var(--translate)) scale(var(--scale))'
-}"
+        '--index': (index - toasts.length) + toasts.length,
+        '--before': toasts.length - 1 - index,
+        '--offset': getOffset(index),
+        '--scale': expanded ? '1' : 'calc(1 - var(--before) * var(--scale-factor))',
+        '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
+        '--transform': 'translateY(var(--translate)) scale(var(--scale))'
+      }"
       :class="[b24ui.base(), {
-  'cursor-pointer': !!toast.onClick
-}]"
+        'cursor-pointer': !!toast.onClick
+      }]"
       @update:open="onUpdateOpen($event, toast.id)"
       @click="toast.onClick && toast.onClick(toast)"
     />
@@ -122,12 +144,12 @@ function getOffset(index) {
         :data-expanded="expanded"
         :class="b24ui.viewport({ class: [props.class, props.b24ui?.viewport] })"
         :style="{
-  '--scale-factor': '0.05',
-  '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',
-  '--gap': position?.startsWith('top') ? '16px' : '-16px',
-  '--front-height': `${frontHeight}px`,
-  '--height': `${height}px`
-}"
+          '--scale-factor': '0.05',
+          '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',
+          '--gap': position?.startsWith('top') ? '16px' : '-16px',
+          '--front-height': `${frontHeight}px`,
+          '--height': `${height}px`
+        }"
         @mouseenter="hovered = true"
         @mouseleave="hovered = false"
       />

package/dist/runtime/components/Tooltip.vue

@@ -1,83 +1,69 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/tooltip";
-import { tv } from "../utils/tv";
-const appConfigTooltip = _appConfig;
-const tooltip = tv({ extend: tv(theme), ...appConfigTooltip.b24ui?.tooltip || {} });
+<script lang="ts">
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipContentEmits, TooltipArrowProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/tooltip'
+import { tv } from '../utils/tv'
+import type { KbdProps } from '../types'
+import type { EmitsToProps } from '../types/utils'
+
+const appConfigTooltip = _appConfig as AppConfig & { b24ui: { tooltip: Partial<typeof theme> } }
+
+const tooltip = tv({ extend: tv(theme), ...(appConfigTooltip.b24ui?.tooltip || {}) })
+
+export interface TooltipProps extends TooltipRootProps {
+  /** The text content of the tooltip. */
+  text?: string
+  /** The keyboard keys to display in the tooltip. */
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The content of the tooltip.
+   * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
+   */
+  content?: Omit<TooltipContentProps, 'as' | 'asChild'> & Partial<EmitsToProps<TooltipContentEmits>>
+  /**
+   * Display an arrow alongside the tooltip.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the tooltip in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  b24ui?: Partial<typeof tooltip.slots>
+}
+
+export interface TooltipEmits extends TooltipRootEmits {}
+
+export interface TooltipSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
 </script>
 
-<script setup>
-import { computed, toRef } from "vue";
-import { defu } from "defu";
-import { useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-const props = defineProps({
-  text: {
-    type: String,
-    required: false
-  },
-  kbds: {
-    type: Array,
-    required: false
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  arrow: {
-    type: [Boolean, Object],
-    required: false
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  delayDuration: {
-    type: Number,
-    required: false
-  },
-  disableHoverableContent: {
-    type: Boolean,
-    required: false
-  },
-  disableClosingTrigger: {
-    type: Boolean,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  ignoreNonKeyboardFocus: {
-    type: Boolean,
-    required: false
-  }
-});
-const emits = defineEmits(["update:open"]);
-const slots = defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "disabled", "ignoreNonKeyboardFocus"), emits);
-const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
-const arrowProps = toRef(() => props.arrow);
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import B24Kbd from './Kbd.vue'
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+  portal: true
+})
+const emits = defineEmits<TooltipEmits>()
+const slots = defineSlots<TooltipSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration', 'disableHoverableContent', 'disableClosingTrigger', 'disabled', 'ignoreNonKeyboardFocus'), emits)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as TooltipContentProps)
+const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
+
+// eslint-disable-next-line vue/no-dupe-keys
 const b24ui = computed(() => tooltip({
   side: contentProps.value.side
-}));
+}))
 </script>
 
 <template>
@@ -95,8 +81,8 @@ const b24ui = computed(() => tooltip({
             <B24Kbd
               v-for="(kbd, index) in kbds"
               :key="index"
-              :size="props.b24ui?.kbdsSize || b24ui.kbdsSize()"
-              :depth="props.b24ui?.kbdsDepth || b24ui.kbdsDepth()"
+              :size="((props.b24ui?.kbdsSize || b24ui.kbdsSize()) as KbdProps['size'])"
+              :depth="((props.b24ui?.kbdsDepth || b24ui.kbdsDepth()) as KbdProps['depth'])"
               v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
             />
           </span>

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

@@ -1,62 +1,74 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/content/table-wrapper";
-import { tv } from "../../utils/tv";
-const appConfigTableWrapper = _appConfig;
-const tableWrapper = tv({ extend: tv(theme), ...appConfigTableWrapper.b24ui?.content?.tableWrapper || {} });
+<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/content/table-wrapper'
+import { tv } from '../../utils/tv'
+
+const appConfigTableWrapper = _appConfig as AppConfig & { b24ui: { content: { tableWrapper: Partial<typeof theme> } } }
+
+const tableWrapper = tv({ extend: tv(theme), ...(appConfigTableWrapper.b24ui?.content?.tableWrapper || {}) })
+
+type TableWrapperVariants = VariantProps<typeof tableWrapper>
+
+export interface TableWrapperProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * @defaultValue 'md'
+   */
+  size?: TableWrapperVariants['size']
+  /**
+   * @defaultValue false
+   */
+  rounded?: boolean
+  /**
+   * @defaultValue false
+   */
+  zebra?: boolean
+  /**
+   * @defaultValue false
+   */
+  pinRows?: boolean
+  /**
+   * @defaultValue false
+   */
+  pinCols?: boolean
+  /**
+   * @defaultValue false
+   */
+  rowHover?: boolean
+  /**
+   * @defaultValue false
+   */
+  bordered?: boolean
+  /**
+   * @defaultValue true
+   */
+  scrollbarThin?: boolean
+  class?: any
+  b24ui?: Partial<typeof tableWrapper.slots>
+}
+
+export interface TableWrapperSlots {
+  default(props?: {}): any
+}
 </script>
 
-<script setup>
-import { computed } from "vue";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "div"
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  rounded: {
-    type: Boolean,
-    required: false
-  },
-  zebra: {
-    type: Boolean,
-    required: false
-  },
-  pinRows: {
-    type: Boolean,
-    required: false
-  },
-  pinCols: {
-    type: Boolean,
-    required: false
-  },
-  rowHover: {
-    type: Boolean,
-    required: false
-  },
-  bordered: {
-    type: Boolean,
-    required: false
-  },
-  scrollbarThin: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<TableWrapperProps>(), {
+  as: 'div',
+  scrollbarThin: true
+})
+
 const b24ui = computed(() => tableWrapper({
   size: props.size,
   rounded: Boolean(props.rounded),
@@ -66,7 +78,7 @@ const b24ui = computed(() => tableWrapper({
   rowHover: Boolean(props.rowHover),
   bordered: Boolean(props.bordered),
   scrollbarThin: Boolean(props.scrollbarThin)
-}));
+}))
 </script>
 
 <template>

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

@@ -6,5 +6,5 @@ export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
 export declare function useAvatarGroup(props: {
     size: AvatarGroupProps['size'];
 }): {
-    size: ComputedRef<"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined>;
+    size: ComputedRef<any>;
 };

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

@@ -10,8 +10,8 @@ type Props<T> = {
     size?: GetObjectField<T, 'size'>;
 };
 export declare function useButtonGroup<T>(props: Props<T>): {
-    orientation: ComputedRef<"horizontal" | "vertical" | undefined>;
-    size: ComputedRef<"md" | "xs" | "sm" | "lg" | NonNullable<GetObjectField<T, "size">> | undefined>;
+    orientation: ComputedRef<any>;
+    size: ComputedRef<any>;
     noSplit: ComputedRef<boolean>;
 };
 export {};

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

@@ -20,8 +20,8 @@ export interface UseComponentIconsProps {
     trailingIcon?: IconComponent;
 }
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
-    isLeading: import("vue").ComputedRef<true | AvatarProps | undefined>;
+    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/useFormField.d.ts

@@ -26,7 +26,7 @@ export declare function useFormField<T>(props?: Props<T>, opts?: {
 }): {
     id: ComputedRef<string | undefined>;
     name: ComputedRef<string | undefined>;
-    size: ComputedRef<"md" | "xs" | "sm" | "lg" | NonNullable<GetObjectField<T, "size">> | undefined>;
+    size: ComputedRef<any>;
     color: ComputedRef<"danger" | GetObjectField<T, "color"> | undefined>;
     highlight: ComputedRef<boolean | undefined>;
     disabled: ComputedRef<boolean | undefined>;

package/dist/runtime/prose/A.vue

@@ -1,23 +1,28 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/prose/a";
-import { tv } from "../utils/tv";
-const appConfigProseA = _appConfig;
-const proseA = tv({ extend: tv(theme), ...appConfigProseA.b24ui?.prose?.a || {} });
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/a'
+import { tv } from '../utils/tv'
+
+const appConfigProseA = _appConfig as AppConfig & { b24ui: { prose: { a: Partial<typeof theme> } } }
+
+const proseA = tv({ extend: tv(theme), ...(appConfigProseA.b24ui?.prose?.a || {}) })
+
+export interface proseAProps {
+  class?: any
+  b24ui?: Partial<typeof proseA.slots>
+}
+
+export interface proseASlots {
+  default(props?: {}): any
+}
 </script>
 
-<script setup>
-const props = defineProps({
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-const b24ui = proseA({});
+<script setup lang="ts">
+const props = defineProps<proseAProps>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const b24ui = proseA({})
 </script>
 
 <template>