@bitrix24/b24ui-nuxt 0.1.1

package/dist/runtime/components/Switch.vue

@@ -0,0 +1,133 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { SwitchRootProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/switch'
+import { tv } from '../utils/tv'
+import type { IconComponent } from '../types'
+import type { PartialString } from '../types/utils'
+
+const appConfigSwitch = _appConfig as AppConfig & { b24ui: { switch: Partial<typeof theme> } }
+
+const switchTv = tv({ extend: tv(theme), ...(appConfigSwitch.b24ui?.switch || {}) })
+
+type SwitchVariants = VariantProps<typeof switchTv>
+
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  color?: SwitchVariants['color']
+  size?: SwitchVariants['size']
+  /** When `true`, the loading icon will be displayed. */
+  loading?: boolean
+  /**
+   * The icon when the `loading` prop is `true`.
+   * @defaultValue icons.refresh
+   */
+  loadingIcon?: IconComponent
+  /** Display an icon when the switch is checked. */
+  checkedIcon?: IconComponent
+  /** Display an icon when the switch is unchecked. */
+  uncheckedIcon?: IconComponent
+  label?: string
+  description?: string
+  class?: any
+  b24ui?: PartialString<typeof switchTv.slots>
+}
+
+export type SwitchEmits = {
+  change: [payload: Event]
+}
+
+export interface SwitchSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+import icons from '../dictionary/icons'
+
+const props = defineProps<SwitchProps>()
+const slots = defineSlots<SwitchSlots>()
+const emits = defineEmits<SwitchEmits>()
+
+const modelValue = defineModel<boolean>({ default: undefined })
+
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
+
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<SwitchProps>(props)
+const id = _id.value ?? useId()
+
+const b24ui = computed(() => switchTv({
+  size: size.value,
+  color: color.value,
+  required: props.required,
+  loading: props.loading,
+  disabled: disabled.value || props.loading
+}))
+
+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>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <div :class="b24ui.container({ class: props.b24ui?.container })">
+      <SwitchRoot
+        :id="id"
+        v-bind="{ ...rootProps, ...ariaAttrs }"
+        v-model="modelValue"
+        :name="name"
+        :disabled="disabled || loading"
+        :class="b24ui.base({ class: props.b24ui?.base })"
+        @update:model-value="onUpdate"
+      >
+        <SwitchThumb :class="b24ui.thumb({ class: props.b24ui?.thumb })">
+          <Component
+            :is="loadingIcon || icons.refresh"
+            v-if="loading"
+            :class="b24ui.icon({ class: props.b24ui?.icon, checked: true, unchecked: true })"
+          />
+          <template v-else>
+            <Component
+              :is="checkedIcon"
+              v-if="checkedIcon"
+              :class="b24ui.icon({ class: props.b24ui?.icon, checked: true })"
+            />
+            <Component
+              :is="uncheckedIcon"
+              v-if="uncheckedIcon"
+              :class="b24ui.icon({ class: props.b24ui?.icon, unchecked: true })"
+            />
+          </template>
+        </SwitchThumb>
+      </SwitchRoot>
+    </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/Tabs.vue

@@ -0,0 +1,127 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/tabs'
+import { tv } from '../utils/tv'
+import type { AvatarProps, IconComponent } from '../types'
+import type { DynamicSlots, PartialString } from '../types/utils'
+
+const appConfigTabs = _appConfig as AppConfig & { b24ui: { tabs: Partial<typeof theme> } }
+
+const tabs = tv({ extend: tv(theme), ...(appConfigTabs.b24ui?.tabs || {}) })
+
+export interface TabsItem {
+  label?: string
+  icon?: IconComponent
+  avatar?: AvatarProps
+  slot?: string
+  content?: string
+  /** A unique value for the tab item. Defaults to the index. */
+  value?: string | number
+  disabled?: boolean
+}
+
+type TabsVariants = VariantProps<typeof tabs>
+
+export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items?: T[]
+  color?: TabsVariants['color']
+  variant?: TabsVariants['variant']
+  size?: TabsVariants['size']
+  /**
+   * The orientation of the tabs.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: TabsRootProps['orientation']
+  /**
+   * The content of the tabs, can be disabled to prevent rendering the content.
+   * @defaultValue true
+   */
+  content?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  class?: any
+  b24ui?: PartialString<typeof tabs.slots>
+}
+
+export interface TabsEmits extends TabsRootEmits<string | number> {}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type TabsSlots<T extends { slot?: string }> = {
+  leading: SlotProps<T>
+  default: SlotProps<T>
+  trailing: SlotProps<T>
+  content: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends TabsItem">
+import { computed } from 'vue'
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { get } from '../utils'
+import B24Avatar from './Avatar.vue'
+
+const props = withDefaults(defineProps<TabsProps<T>>(), {
+  content: true,
+  defaultValue: '0',
+  orientation: 'horizontal',
+  unmountOnHide: true,
+  labelKey: 'label'
+})
+const emits = defineEmits<TabsEmits>()
+const slots = defineSlots<TabsSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emits)
+
+const b24ui = computed(() => tabs({
+  color: props.color,
+  variant: props.variant,
+  size: props.size,
+  orientation: props.orientation
+}))
+</script>
+
+<template>
+  <TabsRoot v-bind="rootProps" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <TabsList :class="b24ui.list({ class: props.b24ui?.list })">
+      <TabsIndicator :class="b24ui.indicator({ class: props.b24ui?.indicator })" />
+
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="b24ui.trigger({ class: props.b24ui?.trigger })">
+        <slot name="leading" :item="item" :index="index">
+          <Component
+            :is="item.icon"
+            v-if="item.icon"
+            :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          />
+          <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })" />
+        </slot>
+
+        <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="b24ui.label({ class: props.b24ui?.label })">
+          <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
+        </span>
+
+        <slot name="trailing" :item="item" :index="index" />
+      </TabsTrigger>
+    </TabsList>
+
+    <template v-if="!!content">
+      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :class="b24ui.content({ class: props.b24ui?.content })">
+        <slot :name="item.slot || 'content'" :item="item" :index="index">
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </TabsRoot>
+</template>

package/dist/runtime/components/Textarea.vue

@@ -0,0 +1,216 @@
+<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/textarea'
+import { tv } from '../utils/tv'
+
+const appConfigTextarea = _appConfig as AppConfig & { b24ui: { textarea: Partial<typeof theme> } }
+
+const textarea = tv({ extend: tv(theme), ...(appConfigTextarea.b24ui?.textarea || {}) })
+
+type TextareaVariants = VariantProps<typeof textarea>
+
+export interface TextareaProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  id?: string
+  name?: string
+  /** The placeholder text when the textarea is empty. */
+  placeholder?: string
+  color?: TextareaVariants['color']
+  /** Removes padding from input. */
+  noPadding?: boolean
+  /** removes all borders (rings). */
+  noBorder?: boolean
+  /** removes all borders (rings) except the bottom one. */
+  underline?: boolean
+  /** Rounds the corners of the button. */
+  rounded?: boolean
+  required?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
+  disabled?: boolean
+  rows?: number
+  maxrows?: number
+  autoresize?: boolean
+  tag?: string
+  tagColor?: TextareaVariants['tagColor']
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  b24ui?: Partial<typeof textarea.slots>
+}
+
+export interface TextareaEmits {
+  (e: 'update:modelValue', payload: string | number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface TextareaSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick, watch } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useFormField } from '../composables/useFormField'
+import { looseToNumber } from '../utils'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  rows: 3,
+  maxrows: 5,
+  autofocusDelay: 0
+})
+defineSlots<TextareaSlots>()
+const emits = defineEmits<TextareaEmits>()
+
+const [modelValue, modelModifiers] = defineModel<string | number>()
+
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
+
+const isTag = computed(() => {
+  return props.tag
+})
+
+const b24ui = computed(() => textarea({
+  color: color.value,
+  highlight: highlight.value,
+  tagColor: props.tagColor,
+  rounded: Boolean(props.rounded),
+  noPadding: Boolean(props.noPadding),
+  noBorder: Boolean(props.noBorder),
+  underline: Boolean(props.underline)
+}))
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+function autoFocus() {
+  if (props.autofocus) {
+    textareaRef.value?.focus()
+  }
+}
+
+// Custom function to handle the v-model properties
+function updateInput(value: string) {
+  if (modelModifiers.trim) {
+    value = value.trim()
+  }
+
+  if (modelModifiers.number) {
+    value = looseToNumber(value)
+  }
+
+  modelValue.value = value
+  emitFormInput()
+}
+
+function onInput(event: Event) {
+  autoResize()
+
+  if (!modelModifiers.lazy) {
+    updateInput((event.target as HTMLInputElement).value)
+  }
+}
+
+function onChange(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+
+  if (modelModifiers.lazy) {
+    updateInput(value)
+  }
+
+  // Update trimmed textarea so that it has same behavior as native textarea https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
+  if (modelModifiers.trim) {
+    (event.target as HTMLInputElement).value = value.trim()
+  }
+
+  emitFormChange()
+  emits('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+function autoResize() {
+  if (props.autoresize) {
+    if (!textareaRef.value) {
+      return
+    }
+
+    textareaRef.value.rows = props.rows
+    const overflow = textareaRef.value.style.overflow
+    textareaRef.value.style.overflow = 'hidden'
+
+    const styles = window.getComputedStyle(textareaRef.value)
+    const paddingTop = Number.parseInt(styles.paddingTop)
+    const paddingBottom = Number.parseInt(styles.paddingBottom)
+    const padding = paddingTop + paddingBottom
+    const lineHeight = Number.parseInt(styles.lineHeight)
+    const { scrollHeight } = textareaRef.value
+    const newRows = (scrollHeight - padding) / lineHeight
+
+    if (newRows > props.rows) {
+      textareaRef.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows
+    }
+
+    textareaRef.value.style.overflow = overflow
+  }
+}
+
+watch(modelValue, () => {
+  nextTick(autoResize)
+})
+
+defineExpose({
+  textareaRef
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoResize()
+  }, 100)
+})
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+    <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
+      {{ props.tag }}
+    </div>
+
+    <textarea
+      :id="id"
+      ref="textareaRef"
+      :value="modelValue"
+      :name="name"
+      :rows="rows"
+      :placeholder="placeholder"
+      :class="b24ui.base({ class: props.b24ui?.base })"
+      :disabled="disabled"
+      :required="required"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="emitFormFocus"
+    />
+
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/Toast.vue

@@ -0,0 +1,168 @@
+<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'
+
+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?: string
+  description?: string
+  icon?: IconComponent
+  avatar?: AvatarProps
+  color?: ToastVariants['color']
+  /**
+   * Display a list of actions:
+   * - under the title and description if multiline
+   * - next to the close button if not multiline
+   * `{ size: 'xs' }`{lang="ts-type"}
+   */
+  actions?: ButtonProps[]
+  /**
+   * Display a close button to dismiss the toast.
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   */
+  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: any }): any
+}
+</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
+})
+const emits = defineEmits<ToastEmits>()
+const slots = defineSlots<ToastSlots>()
+
+const { t } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
+
+const multiline = computed(() => !!props.title && !!props.description)
+
+const b24ui = computed(() => toast({
+  color: props.color
+}))
+
+const el = ref()
+const height = ref(0)
+
+onMounted(() => {
+  if (!el.value) {
+    return
+  }
+
+  setTimeout(() => {
+    height.value = el.value.$el.getBoundingClientRect()?.height
+  }, 0)
+})
+
+defineExpose({
+  height
+})
+</script>
+
+<template>
+  <ToastRoot
+    ref="el"
+    v-slot="{ remaining, duration }"
+    v-bind="rootProps"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root], multiline })"
+    :style="{ '--height': height }"
+  >
+    <slot name="leading">
+      <B24Avatar v-if="avatar" :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <Component
+        :is="icon"
+        v-if="icon"
+        :class="b24ui.icon({ class: props.b24ui?.icon })"
+      />
+    </slot>
+
+    <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+      <ToastTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </ToastTitle>
+      <ToastDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </ToastDescription>
+
+      <div v-if="multiline && actions?.length" :class="b24ui.actions({ class: props.b24ui?.actions, multiline: true })">
+        <slot name="actions">
+          <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
+            <B24Button size="xs" :color="color" v-bind="action" />
+          </ToastAction>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="(!multiline && actions?.length) || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, multiline: false })">
+      <template v-if="!multiline">
+        <slot name="actions">
+          <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
+            <B24Button size="xs" :color="color" v-bind="action" />
+          </ToastAction>
+        </slot>
+      </template>
+
+      <ToastClose as-child>
+        <slot name="close" :b24ui="b24ui">
+          <B24Button
+            v-if="close"
+            :icon="closeIcon || icons.close"
+            size="xs"
+            color="link"
+            :aria-label="t('toast.close')"
+            v-bind="typeof close === 'object' ? close : undefined"
+            :class="b24ui.close({ class: props.b24ui?.close })"
+            @click.stop
+          />
+        </slot>
+      </ToastClose>
+    </div>
+
+    <div v-if="remaining > 0 && duration" :class="b24ui.progress({ class: props.b24ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
+  </ToastRoot>
+</template>