@bitrix24/b24ui-nuxt 0.5.8 → 0.5.10

package/dist/runtime/components/Textarea.vue

@@ -1,240 +1,226 @@
-<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'
-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 {
-  /**
-   * 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
-   */
-  disabled?: boolean
-  /**
-   * @defaultValue 3
-   */
-  rows?: number
-  /**
-   * @defaultValue 5
-   */
-  maxrows?: number
-  /**
-   * @defaultValue false
-   */
-  autoresize?: boolean
-  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 {
-  default(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 { 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 | null>()
-
-const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
-
+<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);
 const isTag = computed(() => {
-  return props.tag
-})
-
+  return props.tag;
+});
 const b24ui = computed(() => textarea({
   color: color.value,
+  loading: props.loading,
   highlight: highlight.value,
+  autoresize: Boolean(props.autoresize),
   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 | null) {
+  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) {
   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();
+  }
 }
-
-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 (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;
     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)
-})
-
-defineExpose({
-  textareaRef
-})
-
+  nextTick(autoResize);
+});
 onMounted(() => {
   setTimeout(() => {
-    autoResize()
-  }, 100)
-})
+    autoFocus();
+  }, props.autofocusDelay);
+  setTimeout(() => {
+    autoResize();
+  }, props.autoresizeDelay);
+});
+defineExpose({
+  textareaRef
+});
 </script>
 
 <template>
@@ -261,5 +247,31 @@ onMounted(() => {
     />
 
     <slot />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+      <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()"
+          v-bind="avatar"
+          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+        />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+      <slot name="trailing">
+        <Component
+          :is="trailingIconName"
+          v-if="trailingIconName"
+          :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+        />
+      </slot>
+    </span>
   </Primitive>
 </template>