@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/Textarea.vue

@@ -1,141 +1,142 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/textarea";
-import { tv } from "../utils/tv";
-const appConfigTextarea = _appConfig;
-const textarea = tv({ extend: tv(theme), ...appConfigTextarea.b24ui?.textarea || {} });
+<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 type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
+import type { AvatarProps } from '../types'
+import type { PartialString } from '../types/utils'
+
+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 extends UseComponentIconsProps {
+  /**
+   * 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
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: TextareaVariants['color']
+  /**
+   * Removes padding from input
+   * @defaultValue false
+   */
+  noPadding?: boolean
+  /**
+   * Removes all borders (rings)
+   * @defaultValue false
+   */
+  noBorder?: boolean
+  /**
+   * Removes all borders (rings) except the bottom one
+   * @defaultValue false
+   */
+  underline?: boolean
+  /**
+   * Rounds the corners of the button
+   * @defaultValue false
+   */
+  rounded?: boolean
+  /**
+   * @defaultValue false
+   */
+  required?: boolean
+  /**
+   * @defaultValue false
+   */
+  autofocus?: boolean
+  /**
+   * @defaultValue 0
+   */
+  autofocusDelay?: number
+  /**
+   * @defaultValue false
+   */
+  autoresize?: boolean
+  /**
+   * @defaultValue 0
+   */
+  autoresizeDelay?: number
+  /**
+   * @defaultValue false
+   */
+  disabled?: boolean
+  /**
+   * @defaultValue 3
+   */
+  rows?: number
+  /**
+   * @defaultValue 5
+   */
+  maxrows?: number
+  tag?: string
+  /**
+   * @defaultValue 'primary'
+   */
+  tagColor?: TextareaVariants['tagColor']
+  /**
+   * Highlight the ring color like a focus state
+   * @defaultValue false
+   */
+  highlight?: boolean
+  class?: any
+  b24ui?: PartialString<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 {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
 </script>
 
-<script setup>
-import { ref, computed, onMounted, nextTick, watch } from "vue";
-import { useComponentIcons } from "../composables/useComponentIcons";
-import { useFormField } from "../composables/useFormField";
-import { looseToNumber } from "../utils";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  id: {
-    type: String,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  placeholder: {
-    type: String,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  noPadding: {
-    type: Boolean,
-    required: false
-  },
-  noBorder: {
-    type: Boolean,
-    required: false
-  },
-  underline: {
-    type: Boolean,
-    required: false
-  },
-  rounded: {
-    type: Boolean,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  autofocus: {
-    type: Boolean,
-    required: false
-  },
-  autofocusDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  autoresize: {
-    type: Boolean,
-    required: false
-  },
-  autoresizeDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  rows: {
-    type: Number,
-    required: false,
-    default: 3
-  },
-  maxrows: {
-    type: Number,
-    required: false,
-    default: 5
-  },
-  tag: {
-    type: String,
-    required: false
-  },
-  tagColor: {
-    type: null,
-    required: false
-  },
-  highlight: {
-    type: Boolean,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  loading: {
-    type: Boolean,
-    required: false
-  },
-  trailing: {
-    type: Boolean,
-    required: false
-  },
-  trailingIcon: {
-    type: [Function, Object],
-    required: false
-  }
-});
-const slots = defineSlots();
-const emits = defineEmits(["update:modelValue", "blur", "change"]);
-const [modelValue, modelModifiers] = defineModel({
-  "type": [String, Number, null]
-});
-const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props, { deferInputValidation: true });
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick, watch } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import { looseToNumber } from '../utils'
+import B24Avatar from './Avatar.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  rows: 3,
+  maxrows: 5,
+  autofocusDelay: 0,
+  autoresizeDelay: 0
+})
+const slots = defineSlots<TextareaSlots>()
+const emits = defineEmits<TextareaEmits>()
+
+const [modelValue, modelModifiers] = defineModel<string | number | null>()
+
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
 const isTag = computed(() => {
-  return props.tag;
-});
+  return props.tag
+})
+
 const b24ui = computed(() => textarea({
   color: color.value,
   loading: props.loading,
@@ -148,79 +149,102 @@ const b24ui = computed(() => textarea({
   underline: Boolean(props.underline),
   leading: Boolean(isLeading.value || !!props.avatar || !!slots.leading),
   trailing: Boolean(isTrailing.value || !!slots.trailing)
-}));
-const textareaRef = ref(null);
-function updateInput(value) {
+}))
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+// Custom function to handle the v-model properties
+function updateInput(value: string | null) {
   if (modelModifiers.trim) {
-    value = value?.trim() ?? null;
+    value = value?.trim() ?? null
   }
+
   if (modelModifiers.number) {
-    value = looseToNumber(value);
+    value = looseToNumber(value)
   }
+
   if (modelModifiers.nullify) {
-    value ||= null;
+    value ||= null
   }
-  modelValue.value = value;
-  emitFormInput();
+
+  modelValue.value = value
+  emitFormInput()
 }
-function onInput(event) {
-  autoResize();
+
+function onInput(event: Event) {
+  autoResize()
+
   if (!modelModifiers.lazy) {
-    updateInput(event.target.value);
+    updateInput((event.target as HTMLInputElement).value)
   }
 }
-function onChange(event) {
-  const value = event.target.value;
+
+function onChange(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+
   if (modelModifiers.lazy) {
-    updateInput(value);
+    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.value = value.trim();
+    (event.target as HTMLInputElement).value = value.trim()
   }
-  emitFormChange();
-  emits("change", event);
+
+  emitFormChange()
+  emits('change', event)
 }
-function onBlur(event) {
-  emitFormBlur();
-  emits("blur", event);
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
 }
+
 function autoFocus() {
   if (props.autofocus) {
-    textareaRef.value?.focus();
+    textareaRef.value?.focus()
   }
 }
+
 function autoResize() {
   if (props.autoresize && textareaRef.value) {
-    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;
+    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.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows
     }
-    textareaRef.value.style.overflow = overflow;
+
+    textareaRef.value.style.overflow = overflow
   }
 }
+
 watch(modelValue, () => {
-  nextTick(autoResize);
-});
+  nextTick(autoResize)
+})
+
 onMounted(() => {
   setTimeout(() => {
-    autoFocus();
-  }, props.autofocusDelay);
+    autoFocus()
+  }, props.autofocusDelay)
+
   setTimeout(() => {
-    autoResize();
-  }, props.autoresizeDelay);
-});
+    autoResize()
+  }, props.autoresizeDelay)
+})
+
 defineExpose({
   textareaRef
-});
+})
 </script>
 
 <template>
@@ -257,7 +281,7 @@ defineExpose({
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+          :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
           v-bind="avatar"
           :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
         />

package/dist/runtime/components/Toast.vue

@@ -1,106 +1,117 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/toast";
-import { tv } from "../utils/tv";
-const appConfigToast = _appConfig;
-const toast = tv({ extend: tv(theme), ...appConfigToast.b24ui?.toast || {} });
+<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'
+import type { StringOrVNode } from '../types/utils'
+
+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?: StringOrVNode
+  description?: StringOrVNode
+  /**
+   * @IconComponent
+   */
+  icon?: IconComponent
+  avatar?: AvatarProps
+  /**
+   * @defaultValue 'default'
+   */
+  color?: ToastVariants['color']
+  /**
+   * The orientation between the content and the actions
+   * @defaultValue 'vertical'
+   */
+  orientation?: ToastVariants['orientation']
+  /**
+   * Display a list of actions:
+   * - under the title and description when orientation is `vertical`
+   * - next to the close button when orientation is `horizontal`
+   * `{ size: 'xs' }`{lang="ts"}
+   */
+  actions?: ButtonProps[]
+  /**
+   * Display a close button to dismiss the toast.
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts"}
+   * @defaultValue true
+   */
+  close?: boolean | Partial<ButtonProps>
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   * @IconComponent
+   */
+  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: ReturnType<typeof toast> }): any
+}
 </script>
 
-<script setup>
-import { ref, computed, onMounted } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-import { useLocale } from "../composables/useLocale";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  title: {
-    type: [String, Object, Function],
-    required: false
-  },
-  description: {
-    type: [String, Object, Function],
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "vertical"
-  },
-  actions: {
-    type: Array,
-    required: false
-  },
-  close: {
-    type: [Boolean, Object],
-    required: false,
-    default: true
-  },
-  closeIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  open: {
-    type: Boolean,
-    required: false
-  },
-  type: {
-    type: String,
-    required: false
-  },
-  duration: {
-    type: Number,
-    required: false
-  }
-});
-const emits = defineEmits(["escapeKeyDown", "pause", "resume", "swipeStart", "swipeMove", "swipeCancel", "swipeEnd", "update:open"]);
-const slots = defineSlots();
-const { t } = useLocale();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "duration", "type"), emits);
+<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,
+  orientation: 'vertical'
+})
+const emits = defineEmits<ToastEmits>()
+const slots = defineSlots<ToastSlots>()
+
+const { t } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
+
 const b24ui = computed(() => toast({
   color: props.color,
   orientation: props.orientation,
   title: !!props.title || !!slots.title
-}));
-const el = ref();
-const height = ref(0);
+}))
+
+const el = ref()
+const height = ref(0)
+
 onMounted(() => {
   if (!el.value) {
-    return;
+    return
   }
+
   setTimeout(() => {
-    height.value = el.value.$el.getBoundingClientRect()?.height;
-  }, 0);
-});
+    height.value = el.value.$el.getBoundingClientRect()?.height
+  }, 0)
+})
+
 defineExpose({
   height
-});
+})
 </script>
 
 <template>
@@ -118,7 +129,7 @@ defineExpose({
         v-if="icon"
         :class="b24ui.icon({ class: props.b24ui?.icon })"
       />
-      <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <B24Avatar v-else-if="avatar" :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
     </slot>
 
     <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
@@ -150,7 +161,7 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && actions?.length || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
+    <div v-if="(orientation === 'horizontal' && actions?.length) || close !== null" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && actions?.length">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
@@ -167,7 +178,7 @@ defineExpose({
             size="xs"
             color="link"
             :aria-label="t('toast.close')"
-            v-bind="typeof close === 'object' ? close : {}"
+            v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
             :class="b24ui.close({ class: props.b24ui?.close })"
             @click.stop
           />