@bitrix24/b24ui-nuxt 0.1.1

package/dist/runtime/components/Badge.vue

@@ -0,0 +1,114 @@
+<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/badge'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
+import type { AvatarProps } from '../types'
+
+const appConfigBadge = _appConfig as AppConfig & { b24ui: { badge: Partial<typeof theme> } }
+
+const badge = tv({ extend: tv(theme), ...(appConfigBadge.b24ui?.badge || {}) })
+
+type BadgeVariants = VariantProps<typeof badge>
+
+export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'span'
+   */
+  as?: any
+  label?: string | number
+  color?: BadgeVariants['color']
+  depth?: BadgeVariants['depth']
+  size?: BadgeVariants['size']
+  /** Shows 'underline' on hover */
+  useLink?: boolean
+  /** Shows `Cross20Icon` icon on the right side */
+  useClose?: boolean
+  onCloseClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
+  /** Fills the background */
+  useFill?: boolean
+  class?: any
+  b24ui?: Partial<typeof badge.slots>
+}
+
+export interface BadgeSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import Cross20Icon from '@bitrix24/b24icons-vue/actions/Cross20Icon'
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  as: 'span'
+})
+
+defineSlots<BadgeSlots>()
+
+async function onCloseClickWrapper(event: MouseEvent) {
+  const callbacks = Array.isArray(props.onCloseClick) ? props.onCloseClick : [props.onCloseClick]
+  try {
+    await Promise.all(callbacks.map(fn => fn?.(event)))
+  } finally { /* empty */ }
+}
+
+const { isLeading, leadingIconName } = useComponentIcons(props)
+
+const b24ui = computed(() => badge({
+  color: props.color,
+  depth: props.depth,
+  size: props.size,
+  useLink: Boolean(props.useLink),
+  useClose: Boolean(props.useClose),
+  useFill: Boolean(props.useFill),
+  leading: Boolean(isLeading.value)
+}))
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <Primitive
+      :as="as"
+      :class="b24ui.wrapper({ class: props.b24ui?.wrapper })"
+    >
+      <slot name="leading">
+        <Component
+          :is="leadingIconName"
+          v-if="isLeading && leadingIconName"
+          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+        />
+        <B24Avatar
+          v-else-if="!!avatar"
+          :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
+          v-bind="avatar"
+          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+        />
+      </slot>
+
+      <slot>
+        <span v-if="label" :class="b24ui.label({ class: props.b24ui?.label })">
+          {{ label }}
+        </span>
+      </slot>
+    </Primitive>
+    <slot name="trailing">
+      <Cross20Icon
+        v-if="useClose"
+        :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+        aria-hidden="true"
+        @click.stop.prevent="onCloseClickWrapper"
+      />
+    </slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Button.vue

@@ -0,0 +1,177 @@
+<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/button'
+import type { LinkProps } from './Link.vue'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
+import type { AvatarProps } from '../types'
+import type { PartialString } from '../types/utils'
+
+const appConfigButton = _appConfig as AppConfig & { b24ui: { button: Partial<typeof theme> } }
+
+const button = tv({ extend: tv(theme), ...(appConfigButton.b24ui?.button || {}) })
+
+type ButtonVariants = VariantProps<typeof button>
+
+export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | 'trailingIcon'>, Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  color?: ButtonVariants['color']
+  depth?: ButtonVariants['depth']
+  size?: ButtonVariants['size']
+  /** Rounds the corners of the button. */
+  rounded?: boolean
+  /** Render the button full width. */
+  block?: boolean
+  /** Set loading state automatically based on the `@click` promise state */
+  loadingAuto?: boolean
+  /** Disable uppercase label */
+  normalCase?: boolean
+  /** Shows `Wait` icon in loading mode */
+  useWait?: boolean
+  /** Shows `Clock` icon in loading mode */
+  useClock?: boolean
+  /** Shows `ChevronDownIcon` icon on the right side */
+  useDropdown?: boolean
+  onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
+  class?: any
+  b24ui?: PartialString<typeof button.slots>
+}
+
+export interface ButtonSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { type Ref, computed, ref, inject } from 'vue'
+import { useForwardProps } from 'reka-ui'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { formLoadingInjectionKey } from '../composables/useFormField'
+import { omit } from '../utils'
+import { pickLinkProps } from '../utils/link'
+import B24Avatar from './Avatar.vue'
+import B24Link from './Link.vue'
+import ChevronDownIcon from '@bitrix24/b24icons-vue/actions/ChevronDownIcon'
+import LoaderWaitIcon from '@bitrix24/b24icons-vue/animated/LoaderWaitIcon'
+import LoaderClockIcon from '@bitrix24/b24icons-vue/animated/LoaderClockIcon'
+import SpinnerIcon from '@bitrix24/b24icons-vue/specialized/SpinnerIcon'
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  type: 'button'
+})
+
+const slots = defineSlots<ButtonSlots>()
+
+const linkProps = useForwardProps(pickLinkProps(props))
+
+const { orientation, size: buttonSize, noSplit } = useButtonGroup<ButtonProps>(props)
+
+const loadingAutoState = ref(false)
+const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
+
+async function onClickWrapper(event: MouseEvent) {
+  loadingAutoState.value = true
+  const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
+  try {
+    await Promise.all(callbacks.map(fn => fn?.(event)))
+  } finally {
+    loadingAutoState.value = false
+  }
+}
+
+const isLoading = computed(() => {
+  return props.loading || (props.loadingAuto && (loadingAutoState.value || (formLoading?.value && props.type === 'submit')))
+})
+
+const { isLeading, leadingIconName } = useComponentIcons(
+  computed(() => ({ ...props, loading: false }))
+)
+
+const isLabel = computed(() => {
+  let isUseSlot = false
+
+  if (slots && !!slots.default) {
+    isUseSlot = true
+  }
+
+  return (props?.label || '').length > 0 || isUseSlot
+})
+
+const b24ui = computed(() => button({
+  color: props.color,
+  depth: props.depth,
+  size: buttonSize.value,
+  noSplit: Boolean(noSplit.value),
+  loading: Boolean(isLoading.value),
+  useLabel: Boolean(isLabel.value),
+  block: Boolean(props.block),
+  normalCase: Boolean(props.normalCase),
+  rounded: Boolean(props.rounded),
+  useDropdown: Boolean(props.useDropdown),
+  useWait: Boolean(props.useWait),
+  useClock: Boolean(props.useClock),
+  leading: Boolean(isLeading.value),
+  buttonGroup: orientation.value
+}))
+</script>
+
+<template>
+  <B24Link
+    :type="type"
+    :disabled="disabled || isLoading"
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+    v-bind="omit(linkProps, ['type', 'disabled'])"
+    raw
+    @click="onClickWrapper"
+  >
+    <div
+      class="h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center"
+      :class="[
+        isLoading ? 'visible' : 'invisible'
+      ]"
+    >
+      <LoaderWaitIcon v-if="useWait" class="size-2xl" aria-hidden="true" />
+      <LoaderClockIcon v-else-if="useClock" class="size-2xl" aria-hidden="true" />
+      <SpinnerIcon v-else class="animate-spin stroke-2 size-lg" />
+    </div>
+    <div
+      :class="[
+        b24ui.baseLine({ class: [props.b24ui?.baseLine] }),
+        isLoading ? 'invisible' : ''
+      ]"
+    >
+      <slot name="leading">
+        <Component
+          :is="leadingIconName"
+          v-if="isLeading && (typeof leadingIconName !== 'undefined')"
+          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+        />
+        <B24Avatar
+          v-else-if="!!avatar"
+          :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
+          v-bind="avatar"
+          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+        />
+      </slot>
+
+      <slot>
+        <span v-if="label" :class="b24ui.label({ class: props.b24ui?.label })">
+          {{ label }}
+        </span>
+      </slot>
+
+      <slot name="trailing">
+        <ChevronDownIcon
+          v-if="useDropdown"
+          :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+          aria-hidden="true"
+        />
+      </slot>
+    </div>
+  </B24Link>
+</template>

package/dist/runtime/components/ButtonGroup.vue

@@ -0,0 +1,58 @@
+<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/button-group'
+import { tv } from '../utils/tv'
+
+const appConfigButtonGroup = _appConfig as AppConfig & { b24ui: { buttonGroup: Partial<typeof theme> } }
+
+const buttonGroup = tv({ extend: tv(theme), ...(appConfigButtonGroup.b24ui?.buttonGroup) })
+
+type ButtonGroupVariants = VariantProps<typeof buttonGroup>
+
+export interface ButtonGroupProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  size?: ButtonGroupVariants['size']
+  /**
+   * The orientation the buttons are laid out.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: ButtonGroupVariants['orientation']
+  /** Disable split */
+  noSplit?: boolean
+  class?: any
+}
+
+export interface ButtonGroupSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { provide, computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import { buttonGroupInjectionKey } from '../composables/useButtonGroup'
+
+const props = withDefaults(defineProps<ButtonGroupProps>(), {
+  orientation: 'horizontal',
+  noSplit: false
+})
+defineSlots<ButtonGroupSlots>()
+
+provide(buttonGroupInjectionKey, computed(() => ({
+  orientation: props.orientation,
+  noSplit: Boolean(props.noSplit),
+  size: props.size
+})))
+</script>
+
+<template>
+  <Primitive :as="as" :class="buttonGroup({ orientation, class: props.class })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/Checkbox.vue

@@ -0,0 +1,110 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { CheckboxRootProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/checkbox'
+import { tv } from '../utils/tv'
+
+const appConfigCheckbox = _appConfig as AppConfig & { b24ui: { checkbox: Partial<typeof theme> } }
+
+const checkbox = tv({ extend: tv(theme), ...(appConfigCheckbox.b24ui?.checkbox || {}) })
+
+type CheckboxVariants = VariantProps<typeof checkbox>
+
+export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  label?: string
+  description?: string
+  color?: CheckboxVariants['color']
+  size?: CheckboxVariants['size']
+  class?: any
+  b24ui?: Partial<typeof checkbox.slots>
+}
+
+export type CheckboxEmits = {
+  change: [payload: Event]
+}
+
+export interface CheckboxSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+import Minus20Icon from '@bitrix24/b24icons-vue/actions/Minus20Icon'
+import CheckIcon from '@bitrix24/b24icons-vue/main/CheckIcon'
+
+const props = defineProps<CheckboxProps>()
+const slots = defineSlots<CheckboxSlots>()
+const emits = defineEmits<CheckboxEmits>()
+
+const modelValue = defineModel<boolean | 'indeterminate'>({ default: undefined })
+
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
+
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<CheckboxProps>(props)
+const id = _id.value ?? useId()
+
+const b24ui = computed(() => checkbox({
+  size: size.value,
+  color: color.value,
+  required: props.required,
+  disabled: disabled.value,
+  checked: Boolean(modelValue.value ?? props.defaultValue)
+}))
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+</script>
+
+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <div :class="b24ui.container({ class: props.b24ui?.container })">
+      <CheckboxRoot
+        :id="id"
+        v-bind="{ ...rootProps, ...ariaAttrs }"
+        v-model="modelValue"
+        :name="name"
+        :disabled="disabled"
+        :class="b24ui.base({ class: props.b24ui?.base })"
+        @update:model-value="onUpdate"
+      >
+        <template #default="{ modelValue }">
+          <CheckboxIndicator as-child>
+            <Minus20Icon v-if="modelValue === 'indeterminate'" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+            <CheckIcon v-else :class="b24ui.icon({ class: props.b24ui?.icon })" />
+          </CheckboxIndicator>
+        </template>
+      </CheckboxRoot>
+    </div>
+
+    <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+      <Label v-if="label || !!slots.label" :for="id" :class="b24ui.label({ class: props.b24ui?.label })">
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </Label>
+      <p v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/Chip.vue

@@ -0,0 +1,81 @@
+<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/chip'
+import { tv } from '../utils/tv'
+
+const appConfigChip = _appConfig as AppConfig & { b24ui: { chip: Partial<typeof theme> } }
+
+const chip = tv({ extend: tv(theme), ...(appConfigChip.b24ui?.chip || {}) })
+
+type ChipVariants = VariantProps<typeof chip>
+
+export interface ChipProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /** Display some text inside the chip. */
+  text?: string | number
+  color?: ChipVariants['color']
+  size?: ChipVariants['size']
+  position?: ChipVariants['position']
+  /** When `true`, keep the chip inside the component for rounded elements */
+  inset?: boolean
+  /** When `true`, render the chip relatively to the parent. */
+  standalone?: boolean
+  class?: any
+  b24ui?: Partial<typeof chip.slots>
+}
+
+export interface ChipEmits {
+  (e: 'update:show', payload: boolean): void
+}
+
+export interface ChipSlots {
+  default(props?: {}): any
+  content(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive, Slot } from 'reka-ui'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<ChipProps>(), {
+  inset: false,
+  standalone: false
+})
+defineSlots<ChipSlots>()
+
+const show = defineModel<boolean>('show', { default: true })
+
+const { size } = useAvatarGroup(props)
+
+const b24ui = computed(() => chip({
+  color: props.color,
+  size: size.value,
+  position: props.position,
+  inset: Boolean(props.inset),
+  standalone: Boolean(props.standalone)
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <Slot v-bind="$attrs">
+      <slot />
+    </Slot>
+
+    <span v-if="show" :class="b24ui.base({ class: props.b24ui?.base })">
+      <slot name="content">
+        {{ text }}
+      </slot>
+    </span>
+  </Primitive>
+</template>

package/dist/runtime/components/Container.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/container'
+import { tv } from '../utils/tv'
+
+const appConfigContainer = _appConfig as AppConfig & { b24ui: { container: Partial<typeof theme> } }
+
+const container = tv({ extend: tv(theme), ...(appConfigContainer.b24ui?.container || {}) })
+
+export interface ContainerProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+}
+
+export interface ContainerSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<ContainerProps>()
+defineSlots<ContainerSlots>()
+</script>
+
+<template>
+  <Primitive :as="as" :class="container({ class: props.class })">
+    <slot />
+  </Primitive>
+</template>