@bitrix24/b24ui-nuxt 0.1.1

package/dist/runtime/components/Toaster.vue

@@ -0,0 +1,143 @@
+<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'> {
+  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
+  class?: any
+  b24ui?: Partial<typeof toaster.slots>
+}
+
+export interface ToasterSlots {
+  default(props?: {}): any
+}
+
+export default {
+  name: 'Toaster'
+}
+</script>
+
+<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 { omit } from '../utils'
+import B24Toast from './Toast.vue'
+
+const props = withDefaults(defineProps<ToasterProps>(), {
+  expand: true,
+  portal: true,
+  duration: 5000
+})
+defineSlots<ToasterSlots>()
+
+const providerProps = useForwardProps(reactivePick(props, 'duration', 'label', 'swipeThreshold'))
+
+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'
+  }
+  return 'right'
+})
+
+const b24ui = computed(() => toaster({
+  position: props.position,
+  swipeDirection: swipeDirection.value
+}))
+
+function onUpdateOpen(value: boolean, id: string | number) {
+  if (value) {
+    return
+  }
+
+  remove(id)
+}
+
+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>
+
+<template>
+  <ToastProvider :swipe-direction="swipeDirection" v-bind="providerProps">
+    <slot />
+
+    <B24Toast
+      v-for="(toast, index) of toasts"
+      :key="toast.id"
+      ref="refs"
+      v-bind="omit(toast, ['id'])"
+      :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))'
+      }"
+      :class="[b24ui.base(), {
+        'cursor-pointer': !!toast.click
+      }]"
+      @update:open="onUpdateOpen($event, toast.id)"
+      @click="toast.click && toast.click(toast)"
+    />
+
+    <ToastPortal :disabled="!portal">
+      <ToastViewport
+        :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`
+        }"
+        @mouseenter="hovered = true"
+        @mouseleave="hovered = false"
+      />
+    </ToastPortal>
+  </ToastProvider>
+</template>

package/dist/runtime/components/Tooltip.vue

@@ -0,0 +1,94 @@
+<script lang="ts">
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, 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'
+
+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'>
+  /**
+   * 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 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>
+  <TooltipRoot v-slot="{ open }" v-bind="rootProps">
+    <TooltipTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </TooltipTrigger>
+
+    <TooltipPortal :disabled="!portal">
+      <TooltipContent v-bind="contentProps" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })">
+        <slot name="content">
+          <span v-if="text" :class="b24ui.text({ class: props.b24ui?.text })">{{ text }}</span>
+
+          <span v-if="kbds?.length" :class="b24ui.kbds({ class: props.b24ui?.kbds })">
+            <B24Kbd
+              v-for="(kbd, index) in kbds"
+              :key="index"
+              :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>
+        </slot>
+
+        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+      </TooltipContent>
+    </TooltipPortal>
+  </TooltipRoot>
+</template>

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

@@ -0,0 +1,220 @@
+<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/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
+  icon?: IconComponent
+  avatar?: AvatarProps
+  slot?: string
+  description?: string
+  /**
+   * Display a list of actions:
+   * - under the description if multiline
+   * - next to the description if not multiline
+   * `{ size: 'xs' }`{lang="ts-type"}
+   */
+  actions?: ButtonProps[]
+  class?: any
+  b24ui?: Partial<typeof descriptionList.slots>
+}
+
+export interface DescriptionListProps<T> {
+  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[]
+  size?: DescriptionListVariants['size']
+  class?: any
+  b24ui?: Partial<typeof descriptionList.slots>
+}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type DescriptionListSlots<T extends { slot?: string }> = {
+  legend(props?: {}): any
+  text(props?: {}): any
+  leading: SlotProps<T>
+  label: SlotProps<T>
+  description: SlotProps<T>
+  actions: SlotProps<T>
+  footer(props?: { b24ui: any }): any
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<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: any) {
+  const label = get(item, props.labelKey as string)
+  const description = get(item, props.descriptionKey as string)
+  const multiline = (item.actions || []).length > 1
+
+  return {
+    ...item,
+    label,
+    description,
+    multiline
+  }
+}
+
+const normalizedItems = computed(() => {
+  if (!props.items) {
+    return []
+  }
+
+  return props.items.map(normalizeItem)
+})
+</script>
+
+<template>
+  <div
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+  >
+    <h2 v-if="legend || !!slots.legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
+      <slot name="legend">
+        {{ legend }}
+      </slot>
+    </h2>
+    <p v-if="text || !!slots.text" :class="b24ui.text({ class: props.b24ui?.text })">
+      <slot name="text">
+        {{ text }}
+      </slot>
+    </p>
+
+    <dl :class="b24ui.container({ class: props.b24ui?.container })">
+      <template
+        v-for="(item, index) in normalizedItems"
+        :key="index"
+      >
+        <dt
+          :class="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
+                ]
+              })"
+            />
+            <B24Avatar
+              v-else-if="item.avatar"
+              :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])"
+              v-bind="item.avatar"
+              :class="b24ui.avatar({
+                class: [
+                  props.b24ui?.avatar,
+                  item?.b24ui?.avatar
+                ]
+              })"
+            />
+          </slot>
+          <span
+            :class="b24ui.label({
+              class: [
+                item?.class,
+                props.b24ui?.label,
+                item?.b24ui?.label
+              ]
+            })"
+          >
+            <slot name="label" :item="item" :index="index">
+              {{ item.label }}
+            </slot>
+          </span>
+        </dt>
+        <dd
+          :class="b24ui.descriptionWrapper({
+            class: [
+              props.b24ui?.descriptionWrapper,
+              item?.b24ui?.descriptionWrapper
+            ],
+            multiline: item.multiline
+          })"
+        >
+          <span
+            :class="b24ui.description({
+              class: [
+                item?.class,
+                props.b24ui?.description,
+                item?.b24ui?.description
+              ],
+              multiline: item.multiline
+            })"
+          >
+            <slot name="description" :item="item" :index="index">
+              {{ item.description }}
+            </slot>
+          </span>
+          <span
+            v-if="item.actions?.length || !!slots.actions"
+            :class="b24ui.actions({
+              class: [
+                props.b24ui?.actions,
+                item?.b24ui?.actions
+              ],
+              multiline: item.multiline
+            })"
+          >
+            <slot name="actions" :item="item" :index="index">
+              <B24Button
+                v-for="(action, indexActions) in item.actions"
+                :key="indexActions"
+                size="xs"
+                v-bind="action"
+              />
+            </slot>
+          </span>
+        </dd>
+      </template>
+    </dl>
+    <div
+      v-if="!!slots.footer"
+      :class="b24ui.footer({ class: props.b24ui?.footer })"
+    >
+      <slot name="footer" :b24ui="b24ui" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+import type { Locale, Direction, Messages } from '../types/locale';
+interface DefineLocaleOptions {
+    name: string;
+    code: string;
+    dir?: Direction;
+    messages: Messages;
+}
+export declare function defineLocale(options: DefineLocaleOptions): Locale;
+export {};

package/dist/runtime/composables/defineLocale.js

@@ -0,0 +1,4 @@
+import { defu } from "defu";
+export function defineLocale(options) {
+  return defu(options, { dir: "ltr" });
+}

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

@@ -0,0 +1,15 @@
+import type { MaybeRef } from 'vue';
+type Handler = (e?: any) => void;
+export interface ShortcutConfig {
+    handler: Handler;
+    usingInput?: string | boolean;
+}
+export interface ShortcutsConfig {
+    [key: string]: ShortcutConfig | Handler | false | null | undefined;
+}
+export interface ShortcutsOptions {
+    chainDelay?: number;
+}
+export declare function extractShortcuts(items: any[] | any[][]): Record<string, Handler>;
+export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): import("@vueuse/core").Fn;
+export {};

package/dist/runtime/composables/defineShortcuts.js

@@ -0,0 +1,135 @@
+import { ref, computed, toValue } from "vue";
+import { useEventListener, useActiveElement, useDebounceFn } from "@vueuse/core";
+const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
+const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
+export function extractShortcuts(items) {
+  const shortcuts = {};
+  function traverse(items2) {
+    items2.forEach((item) => {
+      if (item.kbds?.length && (item.onSelect || item.onClick)) {
+        const shortcutKey = item.kbds.join("_");
+        shortcuts[shortcutKey] = item.onSelect || item.onClick;
+      }
+      if (item.children) {
+        traverse(item.children.flat());
+      }
+      if (item.items) {
+        traverse(item.items.flat());
+      }
+    });
+  }
+  traverse(items.flat());
+  return shortcuts;
+}
+export function defineShortcuts(config, options = {}) {
+  const chainedInputs = ref([]);
+  const clearChainedInput = () => {
+    chainedInputs.value.splice(0, chainedInputs.value.length);
+  };
+  const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
+  const activeElement = useActiveElement();
+  const onKeyDown = (e) => {
+    if (!e.key) {
+      return;
+    }
+    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key);
+    let chainedKey;
+    chainedInputs.value.push(e.key);
+    if (chainedInputs.value.length >= 2) {
+      chainedKey = chainedInputs.value.slice(-2).join("-");
+      for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
+        if (shortcut.key !== chainedKey) {
+          continue;
+        }
+        if (shortcut.enabled) {
+          e.preventDefault();
+          shortcut.handler(e);
+        }
+        clearChainedInput();
+        return;
+      }
+    }
+    for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
+      if (e.key.toLowerCase() !== shortcut.key) {
+        continue;
+      }
+      if (e.metaKey !== shortcut.metaKey) {
+        continue;
+      }
+      if (e.ctrlKey !== shortcut.ctrlKey) {
+        continue;
+      }
+      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
+        continue;
+      }
+      if (shortcut.enabled) {
+        e.preventDefault();
+        shortcut.handler();
+      }
+      clearChainedInput();
+      return;
+    }
+    debouncedClearChainedInput();
+  };
+  const usingInput = computed(() => {
+    const tagName = activeElement.value?.tagName;
+    const contentEditable = activeElement.value?.contentEditable;
+    const usingInput2 = !!(tagName === "INPUT" || tagName === "TEXTAREA" || contentEditable === "true" || contentEditable === "plaintext-only");
+    if (usingInput2) {
+      return activeElement.value?.name || true;
+    }
+    return false;
+  });
+  const shortcuts = computed(() => {
+    return Object.entries(toValue(config)).map(([key, shortcutConfig]) => {
+      if (!shortcutConfig) {
+        return null;
+      }
+      let shortcut;
+      if (key.includes("-") && key !== "-" && !key.match(chainedShortcutRegex)?.length) {
+        console.trace(`[Shortcut] Invalid key: "${key}"`);
+      }
+      if (key.includes("_") && key !== "_" && !key.match(combinedShortcutRegex)?.length) {
+        console.trace(`[Shortcut] Invalid key: "${key}"`);
+      }
+      const chained = key.includes("-") && key !== "-";
+      if (chained) {
+        shortcut = {
+          key: key.toLowerCase(),
+          metaKey: false,
+          ctrlKey: false,
+          shiftKey: false,
+          altKey: false
+        };
+      } else {
+        const keySplit = key.toLowerCase().split("_").map((k) => k);
+        shortcut = {
+          key: keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_"),
+          metaKey: keySplit.includes("meta") || keySplit.includes("command"),
+          ctrlKey: keySplit.includes("ctrl"),
+          shiftKey: keySplit.includes("shift"),
+          altKey: keySplit.includes("alt") || keySplit.includes("option")
+        };
+      }
+      shortcut.chained = chained;
+      if (typeof shortcutConfig === "function") {
+        shortcut.handler = shortcutConfig;
+      } else if (typeof shortcutConfig === "object") {
+        shortcut = { ...shortcut, handler: shortcutConfig.handler };
+      }
+      if (!shortcut.handler) {
+        console.trace("[Shortcut] Invalid value");
+        return null;
+      }
+      let enabled = true;
+      if (!shortcutConfig.usingInput) {
+        enabled = !usingInput.value;
+      } else if (typeof shortcutConfig.usingInput === "string") {
+        enabled = usingInput.value === shortcutConfig.usingInput;
+      }
+      shortcut.enabled = enabled;
+      return shortcut;
+    }).filter(Boolean);
+  });
+  return useEventListener("keydown", onKeyDown);
+}

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

@@ -0,0 +1,10 @@
+import { type ComputedRef, type InjectionKey } from 'vue';
+import type { AvatarGroupProps } from '../types';
+export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
+    size: AvatarGroupProps['size'];
+}>>;
+export declare function useAvatarGroup(props: {
+    size: AvatarGroupProps['size'];
+}): {
+    size: ComputedRef<any>;
+};

package/dist/runtime/composables/useAvatarGroup.js

@@ -0,0 +1,10 @@
+import { inject, provide, computed } from "vue";
+export const avatarGroupInjectionKey = Symbol("bitrix24-ui.avatar-group");
+export function useAvatarGroup(props) {
+  const avatarGroup = inject(avatarGroupInjectionKey, void 0);
+  const size = computed(() => props.size ?? avatarGroup?.value.size);
+  provide(avatarGroupInjectionKey, computed(() => ({ size: size.value })));
+  return {
+    size
+  };
+}

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

@@ -0,0 +1,17 @@
+import type { InjectionKey, ComputedRef } from 'vue';
+import type { ButtonGroupProps } from '../components/ButtonGroup.vue';
+import type { GetObjectField } from '../types/utils';
+export declare const buttonGroupInjectionKey: InjectionKey<ComputedRef<{
+    size: ButtonGroupProps['size'];
+    orientation: ButtonGroupProps['orientation'];
+    noSplit: ButtonGroupProps['noSplit'];
+}>>;
+type Props<T> = {
+    size?: GetObjectField<T, 'size'>;
+};
+export declare function useButtonGroup<T>(props: Props<T>): {
+    orientation: ComputedRef<any>;
+    size: ComputedRef<any>;
+    noSplit: ComputedRef<boolean>;
+};
+export {};

package/dist/runtime/composables/useButtonGroup.js

@@ -0,0 +1,10 @@
+import { inject, computed } from "vue";
+export const buttonGroupInjectionKey = Symbol("bitrix24-ui.button-group");
+export function useButtonGroup(props) {
+  const buttonGroup = inject(buttonGroupInjectionKey, void 0);
+  return {
+    orientation: computed(() => buttonGroup?.value.orientation),
+    size: computed(() => props?.size ?? buttonGroup?.value.size),
+    noSplit: computed(() => buttonGroup?.value.orientation !== "horizontal" || buttonGroup?.value.noSplit === true)
+  };
+}