@bitrix24/b24ui-nuxt 0.5.11 → 0.6.1

package/dist/runtime/components/Textarea.vue

@@ -1,143 +1,56 @@
-<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>
+import theme from "#build/b24ui/textarea";
 </script>
 
-<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)
-
+<script setup>
+import { ref, computed, onMounted, nextTick, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFormField } from "../composables/useFormField";
+import { looseToNumber } from "../utils";
+import { tv } from "../utils/tv";
+import B24Avatar from "./Avatar.vue";
+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 appConfig = useAppConfig();
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props, { deferInputValidation: true });
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const isTag = computed(() => {
-  return props.tag
-})
-
-const b24ui = computed(() => textarea({
+  return props.tag;
+});
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.textarea || {} })({
   color: color.value,
   loading: props.loading,
   highlight: highlight.value,
@@ -149,102 +62,79 @@ 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<HTMLTextAreaElement | null>(null)
-
-// Custom function to handle the v-model properties
-function updateInput(value: string | null) {
+}));
+const textareaRef = ref(null);
+function updateInput(value) {
   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: Event) {
-  autoResize()
-
+function onInput(event) {
+  autoResize();
   if (!modelModifiers.lazy) {
-    updateInput((event.target as HTMLInputElement).value)
+    updateInput(event.target.value);
   }
 }
-
-function onChange(event: Event) {
-  const value = (event.target as HTMLInputElement).value
-
+function onChange(event) {
+  const value = event.target.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 as HTMLInputElement).value = value.trim()
+    event.target.value = value.trim();
   }
-
-  emitFormChange()
-  emits('change', event)
+  emitFormChange();
+  emits("change", event);
 }
-
-function onBlur(event: FocusEvent) {
-  emitFormBlur()
-  emits('blur', event)
+function onBlur(event) {
+  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>
@@ -281,7 +171,7 @@ defineExpose({
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
+          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
           v-bind="avatar"
           :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
         />

package/dist/runtime/components/Textarea.vue.d.ts

@@ -0,0 +1,141 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/textarea';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ComponentConfig } from '../types/utils';
+type Textarea = ComponentConfig<typeof theme, AppConfig, '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?: Textarea['variants']['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?: Textarea['variants']['tagColor'];
+    /**
+     * Highlight the ring color like a focus state
+     * @defaultValue false
+     */
+    highlight?: boolean;
+    class?: any;
+    b24ui?: 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;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    modelValue?: string | number | null;
+} & TextareaProps>, {
+    rows: number;
+    maxrows: number;
+    autofocusDelay: number;
+    autoresizeDelay: number;
+}>>, {
+    textareaRef: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    modelValue?: string | number | null;
+} & TextareaProps>, {
+    rows: number;
+    maxrows: number;
+    autofocusDelay: number;
+    autoresizeDelay: number;
+}>>> & Readonly<{}>, {
+    autofocusDelay: number;
+    autoresizeDelay: number;
+    rows: number;
+    maxrows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<TextareaSlots> & TextareaSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Toast.vue

@@ -1,117 +1,58 @@
-<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>
+import theme from "#build/b24ui/toast";
 </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,
-  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({
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+import icons from "../dictionary/icons";
+import B24Avatar from "./Avatar.vue";
+import B24Button from "./Button.vue";
+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: null, 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 appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "duration", "type"), emits);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.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>
@@ -129,7 +70,7 @@ defineExpose({
         v-if="icon"
         :class="b24ui.icon({ class: props.b24ui?.icon })"
       />
-      <B24Avatar v-else-if="avatar" :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <B24Avatar v-else-if="avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
     </slot>
 
     <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
@@ -161,7 +102,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>
@@ -178,7 +119,7 @@ defineExpose({
             size="xs"
             color="link"
             :aria-label="t('toast.close')"
-            v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+            v-bind="typeof close === 'object' ? close : {}"
             :class="b24ui.close({ class: props.b24ui?.close })"
             @click.stop
           />