v5.0.0 update

resources/scripts/components/base/BaseTextarea.vue

@@ -0,0 +1,105 @@
+<template>
+  <BaseContentPlaceholders v-if="contentLoading">
+    <BaseContentPlaceholdersBox
+      :rounded="true"
+      class="w-full"
+      :style="`height: ${loadingPlaceholderSize}px`"
+    />
+  </BaseContentPlaceholders>
+
+  <textarea
+    v-else
+    v-bind="$attrs"
+    ref="textarea"
+    :value="modelValue"
+    :class="[defaultInputClass, inputBorderClass]"
+    :disabled="disabled"
+    @input="onInput"
+  />
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  contentLoading: {
+    type: Boolean,
+    default: false,
+  },
+  row: {
+    type: Number,
+    default: null,
+  },
+  invalid: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  defaultInputClass: {
+    type: String,
+    default:
+      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 border-solid rounded outline-none',
+  },
+  autosize: {
+    type: Boolean,
+    default: false,
+  },
+  borderless: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const textarea = ref(null)
+
+const inputBorderClass = computed(() => {
+  if (props.invalid && !props.borderless) {
+    return 'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400'
+  } else if (!props.borderless) {
+    return 'focus:ring-primary-400 focus:border-primary-400'
+  }
+
+  return 'border-none outline-none focus:ring-primary-400 focus:border focus:border-primary-400'
+})
+
+const loadingPlaceholderSize = computed(() => {
+  switch (props.row) {
+    case 2:
+      return '56'
+    case 4:
+      return '94'
+    default:
+      return '56'
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+function onInput(e) {
+  emit('update:modelValue', e.target.value)
+
+  if (props.autosize) {
+    e.target.style.height = 'auto'
+    e.target.style.height = `${e.target.scrollHeight}px`
+  }
+}
+
+onMounted(() => {
+  if (textarea.value && props.autosize) {
+    textarea.value.style.height = textarea.value.scrollHeight + 'px'
+
+    if (textarea.value.style.overflow && textarea.value.style.overflow.y) {
+      textarea.value.style.overflow.y = 'hidden'
+    }
+
+    textarea.value.style.resize = 'none'
+  }
+})
+</script>