@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaTextarea.vue

@@ -1,199 +1,217 @@
-<template>
-  <div class="datametria-textarea" :class="textareaClasses">
-    <textarea
-      ref="textareaRef"
-      v-model="currentValue"
-      class="datametria-textarea__inner"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      :rows="computedRows"
-      :maxlength="maxlength"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="handleBlur"
-    />
-    <div v-if="showWordLimit && maxlength" class="datametria-textarea__count">
-      {{ currentValue.length }} / {{ maxlength }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted } from 'vue'
-
-interface Props {
-  modelValue?: string
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-  rows?: number
-  maxlength?: number
-  showWordLimit?: boolean
-  autosize?: boolean | { minRows?: number; maxRows?: number }
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  placeholder: '',
-  disabled: false,
-  readonly: false,
-  rows: 3,
-  showWordLimit: false,
-  autosize: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  input: [value: string]
-  focus: [event: FocusEvent]
-  blur: [event: FocusEvent]
-}>()
-
-const textareaRef = ref<HTMLTextAreaElement>()
-const currentValue = ref(props.modelValue)
-const isFocused = ref(false)
-
-const textareaClasses = computed(() => ({
-  'datametria-textarea--disabled': props.disabled,
-  'datametria-textarea--focused': isFocused.value
-}))
-
-const computedRows = computed(() => {
-  if (props.autosize) return undefined
-  return props.rows
-})
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLTextAreaElement
-  currentValue.value = target.value
-  emit('update:modelValue', target.value)
-  emit('input', target.value)
-  
-  if (props.autosize) {
-    nextTick(() => resizeTextarea())
-  }
-}
-
-const handleFocus = (event: FocusEvent) => {
-  isFocused.value = true
-  emit('focus', event)
-}
-
-const handleBlur = (event: FocusEvent) => {
-  isFocused.value = false
-  emit('blur', event)
-}
-
-const resizeTextarea = () => {
-  if (!textareaRef.value || !props.autosize) return
-
-  const textarea = textareaRef.value
-  textarea.style.height = 'auto'
-  
-  let minHeight = 0
-  let maxHeight = Infinity
-
-  if (typeof props.autosize === 'object') {
-    if (props.autosize.minRows) {
-      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
-      minHeight = props.autosize.minRows * lineHeight
-    }
-    if (props.autosize.maxRows) {
-      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
-      maxHeight = props.autosize.maxRows * lineHeight
-    }
-  }
-
-  const scrollHeight = textarea.scrollHeight
-  const height = Math.max(minHeight, Math.min(maxHeight, scrollHeight))
-  textarea.style.height = `${height}px`
-}
-
-watch(() => props.modelValue, (newValue) => {
-  if (newValue !== currentValue.value) {
-    currentValue.value = newValue
-    if (props.autosize) {
-      nextTick(() => resizeTextarea())
-    }
+<template>
+  <div class="datametria-textarea" :class="textareaClasses">
+    <textarea
+      ref="textareaRef"
+      v-model="currentValue"
+      class="datametria-textarea__inner"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :rows="computedRows"
+      :maxlength="maxlength"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+    <div v-if="showWordLimit && maxlength" class="datametria-textarea__count">
+      {{ currentValue.length }} / {{ maxlength }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  rows?: number
+  maxlength?: number
+  showWordLimit?: boolean
+  autosize?: boolean | { minRows?: number; maxRows?: number }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '',
+  disabled: false,
+  readonly: false,
+  rows: 3,
+  showWordLimit: false,
+  autosize: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  input: [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+}>()
+
+const textareaRef = ref<HTMLTextAreaElement>()
+const currentValue = ref(props.modelValue)
+const isFocused = ref(false)
+
+const textareaClasses = computed(() => ({
+  'datametria-textarea--disabled': props.disabled,
+  'datametria-textarea--focused': isFocused.value
+}))
+
+const computedRows = computed(() => {
+  if (props.autosize) return undefined
+  return props.rows
+})
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLTextAreaElement
+  currentValue.value = target.value
+  emit('update:modelValue', target.value)
+  emit('input', target.value)
+  
+  if (props.autosize) {
+    nextTick(() => resizeTextarea())
+  }
+}
+
+const handleFocus = (event: FocusEvent) => {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+const resizeTextarea = () => {
+  if (!textareaRef.value || !props.autosize) return
+
+  const textarea = textareaRef.value
+  textarea.style.height = 'auto'
+  
+  let minHeight = 0
+  let maxHeight = Infinity
+
+  if (typeof props.autosize === 'object') {
+    if (props.autosize.minRows) {
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
+      minHeight = props.autosize.minRows * lineHeight
+    }
+    if (props.autosize.maxRows) {
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
+      maxHeight = props.autosize.maxRows * lineHeight
+    }
+  }
+
+  const scrollHeight = textarea.scrollHeight
+  const height = Math.max(minHeight, Math.min(maxHeight, scrollHeight))
+  textarea.style.height = `${height}px`
+}
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== currentValue.value) {
+    currentValue.value = newValue
+    if (props.autosize) {
+      nextTick(() => resizeTextarea())
+    }
+  }
+})
+
+onMounted(() => {
+  if (props.autosize) {
+    nextTick(() => resizeTextarea())
+  }
+})
+
+defineExpose({
+  focus: () => textareaRef.value?.focus(),
+  blur: () => textareaRef.value?.blur()
+})
+</script>
+
+<style scoped>
+.datametria-textarea {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+  font-size: 14px;
+}
+
+.datametria-textarea__inner {
+  display: block;
+  resize: vertical;
+  padding: 8px 12px;
+  line-height: 1.5;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--datametria-text-color, #303133);
+  background-color: var(--datametria-bg-color, #ffffff);
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.datametria-textarea__inner:hover {
+  border-color: var(--datametria-border-color-hover, #c0c4cc);
+}
+
+.datametria-textarea__inner:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-textarea__inner::placeholder {
+  color: var(--datametria-placeholder-color, #a8abb2);
+}
+
+.datametria-textarea__inner:disabled {
+  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
+  border-color: var(--datametria-disabled-border-color, #e4e7ed);
+  color: var(--datametria-disabled-text-color, #c0c4cc);
+  cursor: not-allowed;
+}
+
+.datametria-textarea--disabled .datametria-textarea__inner {
+  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
+  border-color: var(--datametria-disabled-border-color, #e4e7ed);
+  color: var(--datametria-disabled-text-color, #c0c4cc);
+  cursor: not-allowed;
+}
+
+.datametria-textarea__count {
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  font-size: 12px;
+  color: var(--datametria-info-color, #909399);
+  background-color: var(--datametria-bg-color, #ffffff);
+  padding: 0 4px;
+}
+
+.datametria-textarea--focused .datametria-textarea__inner {
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-textarea {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
-})
-
-onMounted(() => {
-  if (props.autosize) {
-    nextTick(() => resizeTextarea())
-  }
-})
-
-defineExpose({
-  focus: () => textareaRef.value?.focus(),
-  blur: () => textareaRef.value?.blur()
-})
-</script>
-
-<style scoped>
-.datametria-textarea {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  vertical-align: bottom;
-  font-size: 14px;
-}
-
-.datametria-textarea__inner {
-  display: block;
-  resize: vertical;
-  padding: 8px 12px;
-  line-height: 1.5;
-  box-sizing: border-box;
-  width: 100%;
-  font-size: inherit;
-  font-family: inherit;
-  color: var(--datametria-text-color, #303133);
-  background-color: var(--datametria-bg-color, #ffffff);
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.datametria-textarea__inner:hover {
-  border-color: var(--datametria-border-color-hover, #c0c4cc);
-}
-
-.datametria-textarea__inner:focus {
-  outline: none;
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-textarea__inner::placeholder {
-  color: var(--datametria-placeholder-color, #a8abb2);
-}
-
-.datametria-textarea__inner:disabled {
-  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
-  border-color: var(--datametria-disabled-border-color, #e4e7ed);
-  color: var(--datametria-disabled-text-color, #c0c4cc);
-  cursor: not-allowed;
-}
-
-.datametria-textarea--disabled .datametria-textarea__inner {
-  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
-  border-color: var(--datametria-disabled-border-color, #e4e7ed);
-  color: var(--datametria-disabled-text-color, #c0c4cc);
-  cursor: not-allowed;
-}
-
-.datametria-textarea__count {
-  position: absolute;
-  bottom: 8px;
-  right: 12px;
-  font-size: 12px;
-  color: var(--datametria-info-color, #909399);
-  background-color: var(--datametria-bg-color, #ffffff);
-  padding: 0 4px;
 }
 
-.datametria-textarea--focused .datametria-textarea__inner {
-  border-color: var(--datametria-primary-color, #0072ce);
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-textarea {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>