@bitrix24/b24ui-nuxt 0.5.11 → 0.6.0

package/dist/runtime/components/Textarea.vue

@@ -1,142 +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 _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>
 
-<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 { useComponentIcons } from "../composables/useComponentIcons";
+import { useFormField } from "../composables/useFormField";
+import { looseToNumber } from "../utils";
+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 { 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
-})
-
+  return props.tag;
+});
 const b24ui = computed(() => textarea({
   color: color.value,
   loading: props.loading,
@@ -149,102 +63,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 +172,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 })"
         />