@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/DescriptionList.vue

@@ -1,78 +1,125 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/description-list";
-import { tv } from "../utils/tv";
-const appConfigDescriptionList = _appConfig;
-const descriptionList = tv({ extend: tv(theme), ...appConfigDescriptionList.b24ui?.descriptionList || {} });
+<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/description-list'
+import { tv } from '../utils/tv'
+import type { AvatarProps, ButtonProps, IconComponent } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfigDescriptionList = _appConfig as AppConfig & { b24ui: { descriptionList: Partial<typeof theme> } }
+
+const descriptionList = tv({ extend: tv(theme), ...(appConfigDescriptionList.b24ui?.descriptionList || {}) })
+
+type DescriptionListVariants = VariantProps<typeof descriptionList>
+
+export interface DescriptionListItem {
+  label?: string
+  /**
+   * Display an icon on the left side.
+   * @IconComponent
+   */
+  icon?: IconComponent
+  avatar?: AvatarProps
+  slot?: string
+  description?: string
+  /**
+   * The orientation between the content and the actions.
+   * @defaultValue 'vertical'
+   */
+  orientation?: DescriptionListVariants['orientation']
+  /**
+   * Display a list of actions:
+   * - under the description when orientation is `vertical`
+   * - next to the description when orientation is `horizontal`
+   * `{ size: 'xs' }`{lang="ts"}
+   */
+  actions?: ButtonProps[]
+  class?: any
+  b24ui?: Partial<typeof descriptionList.slots>
+  [key: string]: any
+}
+
+export interface DescriptionListProps<T extends DescriptionListItem = DescriptionListItem> {
+  legend?: string
+  text?: string
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  /**
+   * The key used to get the description from the item.
+   * @defaultValue 'description'
+   */
+  descriptionKey?: string
+  items?: T[]
+  /**
+   * @defaultValue 'md'
+   */
+  size?: DescriptionListVariants['size']
+  class?: any
+  b24ui?: Partial<typeof descriptionList.slots>
+}
+
+type SlotProps<T extends DescriptionListItem> = (props: { item: T, index: number }) => any
+
+export type DescriptionListSlots<T extends DescriptionListItem = DescriptionListItem> = {
+  legend(props?: {}): any
+  text(props?: {}): any
+  leading: SlotProps<T>
+  label: SlotProps<T>
+  description: SlotProps<T>
+  actions: SlotProps<T>
+  content: SlotProps<T>
+  footer(props?: { b24ui: any }): any
+} & DynamicSlots<T, undefined, { index: number }>
 </script>
 
-<script setup>
-import { computed } from "vue";
-import { get } from "../utils";
-const props = defineProps({
-  legend: {
-    type: String,
-    required: false
-  },
-  text: {
-    type: String,
-    required: false
-  },
-  labelKey: {
-    type: String,
-    required: false,
-    default: "label"
-  },
-  descriptionKey: {
-    type: String,
-    required: false,
-    default: "description"
-  },
-  items: {
-    type: Array,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-const slots = defineSlots();
+<script setup lang="ts" generic="T extends DescriptionListItem">
+import { computed } from 'vue'
+import { get } from '../utils'
+import B24Avatar from './Avatar.vue'
+import B24Button from './Button.vue'
+
+const props = withDefaults(defineProps<DescriptionListProps<T>>(), {
+  labelKey: 'label',
+  descriptionKey: 'description'
+})
+const slots = defineSlots<DescriptionListSlots<T>>()
+
 const b24ui = computed(() => descriptionList({
   size: props.size
-}));
-function normalizeItem(item) {
+}))
+
+function normalizeItem(item: any) {
   if (item === null) {
     return {
-      label: void 0,
-      description: void 0,
-      orientation: void 0
-    };
+      label: undefined,
+      description: undefined,
+      orientation: undefined
+    }
   }
-  const label = get(item, props.labelKey);
-  const description = get(item, props.descriptionKey);
-  const orientation = item?.orientation || "vertical";
+
+  const label = get(item, props.labelKey as string)
+  const description = get(item, props.descriptionKey as string)
+  const orientation = item?.orientation || 'vertical'
+
   return {
     ...item,
     label,
     description,
     orientation
-  };
+  }
 }
+
 const normalizedItems = computed(() => {
   if (!props.items) {
-    return [];
+    return []
   }
-  return props.items.map(normalizeItem);
-});
+
+  return props.items.map(normalizeItem)
+})
 </script>
 
 <template>
@@ -94,49 +141,49 @@ const normalizedItems = computed(() => {
         :key="index"
       >
         <slot
-          :name="item.slot || 'content'"
-          :item="item"
+          :name="((item.slot || 'content') as keyof DescriptionListSlots<T>)"
+          :item="(item as Extract<T, { slot: string; }>)"
           :index="index"
         >
           <dt
             :class="b24ui.labelWrapper({
-  class: [
-    props.b24ui?.labelWrapper,
-    item?.b24ui?.labelWrapper
-  ]
-})"
+              class: [
+                props.b24ui?.labelWrapper,
+                item?.b24ui?.labelWrapper
+              ]
+            })"
           >
             <slot name="leading" :item="item" :index="index">
               <Component
                 :is="item.icon"
                 v-if="item.icon"
                 :class="b24ui.icon({
-  class: [
-    props.b24ui?.icon,
-    item?.b24ui?.icon
-  ]
-})"
+                  class: [
+                    props.b24ui?.icon,
+                    item?.b24ui?.icon
+                  ]
+                })"
               />
               <B24Avatar
                 v-else-if="item.avatar"
-                :size="props.b24ui?.avatarSize || b24ui.avatarSize()"
+                :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])"
                 v-bind="item.avatar"
                 :class="b24ui.avatar({
-  class: [
-    props.b24ui?.avatar,
-    item?.b24ui?.avatar
-  ]
-})"
+                  class: [
+                    props.b24ui?.avatar,
+                    item?.b24ui?.avatar
+                  ]
+                })"
               />
             </slot>
             <span
               :class="b24ui.label({
-  class: [
-    item?.class,
-    props.b24ui?.label,
-    item?.b24ui?.label
-  ]
-})"
+                class: [
+                  item?.class,
+                  props.b24ui?.label,
+                  item?.b24ui?.label
+                ]
+              })"
             >
               <slot name="label" :item="item" :index="index">
                 {{ item.label }}
@@ -146,22 +193,22 @@ const normalizedItems = computed(() => {
           <dd
             :data-orientation="item.orientation"
             :class="b24ui.descriptionWrapper({
-  class: [
-    props.b24ui?.descriptionWrapper,
-    item?.b24ui?.descriptionWrapper
-  ],
-  orientation: item.orientation
-})"
+              class: [
+                props.b24ui?.descriptionWrapper,
+                item?.b24ui?.descriptionWrapper
+              ],
+              orientation: item.orientation
+            })"
           >
             <span
               :class="b24ui.description({
-  class: [
-    item?.class,
-    props.b24ui?.description,
-    item?.b24ui?.description
-  ],
-  orientation: item.orientation
-})"
+                class: [
+                  item?.class,
+                  props.b24ui?.description,
+                  item?.b24ui?.description
+                ],
+                orientation: item.orientation
+              })"
             >
               <slot name="description" :item="item" :index="index">
                 {{ item.description }}
@@ -170,12 +217,12 @@ const normalizedItems = computed(() => {
             <span
               v-if="item.actions?.length || !!slots.actions"
               :class="b24ui.actions({
-  class: [
-    props.b24ui?.actions,
-    item?.b24ui?.actions
-  ],
-  orientation: item.orientation
-})"
+                class: [
+                  props.b24ui?.actions,
+                  item?.b24ui?.actions
+                ],
+                orientation: item.orientation
+              })"
             >
               <slot name="actions" :item="item" :index="index">
                 <B24Button

package/dist/runtime/components/DropdownMenu.vue

@@ -1,88 +1,144 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/dropdown-menu";
-import { tv } from "../utils/tv";
-const appConfigDropdownMenu = _appConfig;
-const dropdownMenu = tv({ extend: tv(theme), ...appConfigDropdownMenu.b24ui?.dropdownMenu || {} });
+<!-- eslint-disable vue/block-tag-newline -->
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/dropdown-menu'
+import { tv } from '../utils/tv'
+import type { AvatarProps, KbdProps, LinkProps, IconComponent } from '../types'
+import type {
+  ArrayOrNested,
+  DynamicSlots,
+  MergeTypes,
+  NestedItem,
+  PartialString,
+  EmitsToProps
+} from '../types/utils'
+
+const appConfigDropdownMenu = _appConfig as AppConfig & { b24ui: { dropdownMenu: Partial<typeof theme> } }
+
+const dropdownMenu = tv({ extend: tv(theme), ...(appConfigDropdownMenu.b24ui?.dropdownMenu || {}) })
+
+type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
+
+export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
+  label?: string
+  /**
+   * Display an icon on the left side.
+   * @IconComponent
+   */
+  icon?: IconComponent
+  color?: DropdownMenuVariants['color']
+  avatar?: AvatarProps
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The item type.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'separator' | 'link' | 'checkbox'
+  slot?: string
+  loading?: boolean
+  disabled?: boolean
+  checked?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  children?: ArrayOrNested<DropdownMenuItem>
+  onSelect?(e: Event): void
+  onUpdateChecked?(checked: boolean): void
+  [key: string]: any
+}
+
+export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {
+  /**
+   * @defaultValue 'md'
+   */
+  size?: DropdownMenuVariants['size']
+  items?: T
+  /**
+   * The icon displayed when an item is checked.
+   * @defaultValue icons.check
+   * @IconComponent
+   */
+  checkedIcon?: IconComponent
+  /**
+   * The icon displayed when the item is an external link.
+   * Set to `false` to hide the external icon.
+   * @defaultValue icons.external
+   * @IconComponent
+   */
+  externalIcon?: boolean | IconComponent
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
+   */
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: keyof NestedItem<T>
+  /**
+   * @defaultValue false
+   */
+  disabled?: boolean
+  class?: any
+  b24ui?: PartialString<typeof dropdownMenu.slots>
+}
+
+export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
+
+type SlotProps<T extends DropdownMenuItem> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type DropdownMenuSlots<
+  A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>,
+  T extends NestedItem<A> = NestedItem<A>
+> = {
+  'default'(props: { open: boolean }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', { active?: boolean, index: number }>
+
 </script>
 
-<script setup>
-import { computed, toRef } from "vue";
-import { defu } from "defu";
-import { useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-import { omit } from "../utils";
-const props = defineProps({
-  size: {
-    type: null,
-    required: false
-  },
-  items: {
-    type: null,
-    required: false
-  },
-  checkedIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  externalIcon: {
-    type: [Boolean, Function, Object],
-    required: false,
-    default: true
-  },
-  content: {
-    type: Object,
-    required: false
-  },
-  arrow: {
-    type: [Boolean, Object],
-    required: false
-  },
-  portal: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  labelKey: {
-    type: null,
-    required: false,
-    default: "label"
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  modal: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
-});
-const emits = defineEmits(["update:open"]);
-const slots = defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "modal"), emits);
-const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
-const arrowProps = toRef(() => props.arrow);
-const proxySlots = omit(slots, ["default"]);
+<script setup lang="ts" generic="T extends ArrayOrNested<DropdownMenuItem>">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { omit } from '../utils'
+import B24DropdownMenuContent from './DropdownMenuContent.vue'
+
+const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
+  portal: true,
+  modal: true,
+  externalIcon: true,
+  labelKey: 'label'
+})
+const emits = defineEmits<DropdownMenuEmits>()
+const slots = defineSlots<DropdownMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'modal'), emits)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as DropdownMenuContentProps)
+const arrowProps = toRef(() => props.arrow as DropdownMenuArrowProps)
+const proxySlots = omit(slots, ['default'])
+
 const b24ui = computed(() => dropdownMenu({
   size: props.size
-}));
+}))
 </script>
 
 <template>
@@ -98,12 +154,12 @@ const b24ui = computed(() => dropdownMenu({
       v-bind="contentProps"
       :items="items"
       :portal="portal"
-      :label-key="labelKey"
+      :label-key="(labelKey as keyof NestedItem<T>)"
       :checked-icon="checkedIcon"
       :external-icon="externalIcon"
     >
       <template v-for="(_, name) in proxySlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+        <slot :name="(name as keyof DropdownMenuSlots<T>)" v-bind="slotData" />
       </template>
 
       <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />