@datametria/vue-components 2.1.1 → 2.3.0

package/src/components/DatametriaSwitch.vue

@@ -1,137 +1,143 @@
 <template>
-  <div class="dm-switch">
-    <label class="dm-switch__label">
-      <input
-        type="checkbox"
-        class="dm-switch__input"
-        :checked="modelValue"
-        :disabled="disabled"
-        :aria-label="ariaLabel"
-        :aria-checked="modelValue"
-        role="switch"
-        @change="handleChange"
-      />
-      <span class="dm-switch__track">
-        <span class="dm-switch__thumb"></span>
+  <button
+    type="button"
+    role="switch"
+    class="datametria-switch"
+    :class="{
+      'is-checked': modelValue,
+      'is-disabled': disabled,
+      'is-loading': loading
+    }"
+    :aria-checked="modelValue"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <span class="datametria-switch__core" :style="coreStyle">
+      <span v-if="loading" class="datametria-switch__loading">
+        <span class="spinner"></span>
       </span>
-      <span v-if="label" class="dm-switch__text">{{ label }}</span>
-    </label>
-    <p v-if="error" class="dm-switch__error">{{ error }}</p>
-  </div>
+    </span>
+  </button>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 interface Props {
   modelValue?: boolean
-  label?: string
   disabled?: boolean
-  error?: string
-  ariaLabel?: string
+  loading?: boolean
+  activeColor?: string
+  inactiveColor?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
-  disabled: false
+  disabled: false,
+  loading: false,
+  activeColor: '#0072ce',
+  inactiveColor: '#dcdfe6'
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
+  change: [value: boolean]
 }>()
 
-const handleChange = (event: Event) => {
-  if (!props.disabled) {
-    emit('update:modelValue', (event.target as HTMLInputElement).checked)
-  }
+const coreStyle = computed(() => ({
+  backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
+}))
+
+const handleClick = () => {
+  if (props.disabled || props.loading) return
+  const newValue = !props.modelValue
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
 }
 </script>
 
 <style scoped>
-.dm-switch {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-spacing-1, 0.25rem);
-}
-
-.dm-switch__label {
+.datametria-switch {
   display: inline-flex;
   align-items: center;
-  gap: var(--dm-spacing-3, 0.75rem);
+  position: relative;
+  font-size: 14px;
+  line-height: 20px;
+  height: 20px;
+  vertical-align: middle;
+  border: none;
+  background: transparent;
   cursor: pointer;
-  min-height: 44px;
-  padding: var(--dm-spacing-2, 0.5rem);
-  user-select: none;
+  padding: 0;
 }
 
-.dm-switch__label:has(.dm-switch__input:disabled) {
+.datametria-switch.is-disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-.dm-switch__input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
+.datametria-switch.is-loading {
+  cursor: not-allowed;
 }
 
-.dm-switch__track {
+.datametria-switch__core {
+  display: inline-block;
   position: relative;
-  width: 44px;
-  height: 24px;
-  background: var(--dm-neutral-300, #d1d5db);
-  border-radius: 12px;
-  transition: all 0.2s;
-  flex-shrink: 0;
+  width: 40px;
+  height: 20px;
+  border-radius: 10px;
+  transition: background-color 0.3s;
 }
 
-.dm-switch__thumb {
+.datametria-switch__core::after {
+  content: '';
   position: absolute;
   top: 2px;
   left: 2px;
-  width: 20px;
-  height: 20px;
-  background: white;
+  width: 16px;
+  height: 16px;
   border-radius: 50%;
-  transition: all 0.2s;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.dm-switch__input:checked + .dm-switch__track {
-  background: var(--dm-primary, #0072CE);
+  background-color: #fff;
+  transition: transform 0.3s;
 }
 
-.dm-switch__input:checked + .dm-switch__track .dm-switch__thumb {
+.datametria-switch.is-checked .datametria-switch__core::after {
   transform: translateX(20px);
 }
 
-.dm-switch__input:focus-visible + .dm-switch__track {
-  outline: 2px solid var(--dm-primary, #0072CE);
-  outline-offset: 2px;
+.datametria-switch__loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.dm-switch__input:disabled + .dm-switch__track {
-  background: var(--dm-neutral-200, #e5e7eb);
+.spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
 }
 
-.dm-switch__text {
-  color: var(--dm-neutral-900, #111827);
-  font-size: var(--dm-font-size-base, 1rem);
-  line-height: 1.5;
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
-.dm-switch__error {
-  color: var(--dm-error, #ef4444);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  margin: 0;
+.datametria-switch:focus-visible {
+  outline: 2px solid var(--dm-color-primary, #0072ce);
+  outline-offset: 2px;
+  border-radius: 10px;
 }
 
+/* Dark mode */
 @media (prefers-color-scheme: dark) {
-  .dm-switch__track {
-    background: var(--dm-neutral-700, #374151);
-  }
-
-  .dm-switch__input:disabled + .dm-switch__track {
-    background: var(--dm-neutral-800, #1f2937);
+  .datametria-switch__core {
+    background-color: var(--dm-bg-color-dark, #1e1e1e);
   }
 }
 </style>

package/src/components/DatametriaTabPane.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    :id="id"
+    class="datametria-tab-pane"
+    :class="{ 'is-active': active }"
+    role="tabpanel"
+    :aria-labelledby="ariaLabelledby"
+    :hidden="!active"
+  >
+    <slot v-if="lazy ? (active || wasActive) : true"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject, onMounted, onBeforeUnmount, computed } from 'vue'
+
+interface Props {
+  label: string
+  name?: string
+  disabled?: boolean
+  lazy?: boolean
+  icon?: string
+  badge?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  lazy: false
+})
+
+const tabsContext = inject<any>('datametriaTabs', null)
+const wasActive = ref(false)
+
+const active = computed(() => {
+  if (!tabsContext) return false
+  return tabsContext.activePane.value === (props.name || props.label)
+})
+
+const id = computed(() => {
+  const name = props.name || props.label
+  return `pane-${name.replace(/\s+/g, '-').toLowerCase()}`
+})
+
+const ariaLabelledby = computed(() => {
+  const name = props.name || props.label
+  return `tab-${name.replace(/\s+/g, '-').toLowerCase()}`
+})
+
+watch(active, (isActive) => {
+  if (isActive) {
+    wasActive.value = true
+  }
+})
+
+onMounted(() => {
+  if (tabsContext) {
+    tabsContext.registerPane({
+      label: props.label,
+      name: props.name || props.label,
+      disabled: props.disabled,
+      icon: props.icon,
+      badge: props.badge
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (tabsContext) {
+    tabsContext.unregisterPane(props.name || props.label)
+  }
+})
+</script>
+
+<style scoped>
+.datametria-tab-pane {
+  display: none;
+}
+
+.datametria-tab-pane.is-active {
+  display: block;
+}
+</style>

package/src/components/DatametriaTextarea.vue

@@ -1,159 +1,199 @@
 <template>
-  <div class="dm-textarea">
-    <label v-if="label" :for="inputId" class="dm-textarea__label">
-      {{ label }}
-      <span v-if="required" class="dm-textarea__required">*</span>
-    </label>
+  <div class="datametria-textarea" :class="textareaClasses">
     <textarea
-      :id="inputId"
-      v-model="internalValue"
-      class="dm-textarea__input"
-      :class="{ 'dm-textarea__input--error': error }"
+      ref="textareaRef"
+      v-model="currentValue"
+      class="datametria-textarea__inner"
       :placeholder="placeholder"
       :disabled="disabled"
-      :required="required"
-      :rows="rows"
-      :maxlength="maxLength"
-      :aria-label="ariaLabel"
-      :aria-describedby="error ? `${inputId}-error` : undefined"
-      :aria-invalid="!!error"
+      :readonly="readonly"
+      :rows="computedRows"
+      :maxlength="maxlength"
       @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
     />
-    <div v-if="maxLength || error" class="dm-textarea__footer">
-      <p v-if="error" :id="`${inputId}-error`" class="dm-textarea__error">{{ error }}</p>
-      <span v-if="maxLength" class="dm-textarea__counter">
-        {{ internalValue?.length || 0 }}/{{ maxLength }}
-      </span>
+    <div v-if="showWordLimit && maxlength" class="datametria-textarea__count">
+      {{ currentValue.length }} / {{ maxlength }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
 
 interface Props {
   modelValue?: string
-  label?: string
   placeholder?: string
   disabled?: boolean
-  required?: boolean
-  error?: string
+  readonly?: boolean
   rows?: number
-  maxLength?: number
-  ariaLabel?: string
+  maxlength?: number
+  showWordLimit?: boolean
+  autosize?: boolean | { minRows?: number; maxRows?: number }
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
+  placeholder: '',
   disabled: false,
-  required: false,
-  rows: 4
+  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 inputId = `dm-textarea-${Math.random().toString(36).substr(2, 9)}`
-const internalValue = ref(props.modelValue)
+const textareaRef = ref<HTMLTextAreaElement>()
+const currentValue = ref(props.modelValue)
+const isFocused = ref(false)
 
-watch(() => props.modelValue, (newValue) => {
-  internalValue.value = newValue
+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 = () => {
-  emit('update:modelValue', internalValue.value || '')
+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())
+  }
 }
-</script>
 
-<style scoped>
-.dm-textarea {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-spacing-2, 0.5rem);
+const handleFocus = (event: FocusEvent) => {
+  isFocused.value = true
+  emit('focus', event)
 }
 
-.dm-textarea__label {
-  color: var(--dm-neutral-900, #111827);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-medium, 500);
+const handleBlur = (event: FocusEvent) => {
+  isFocused.value = false
+  emit('blur', event)
 }
 
-.dm-textarea__required {
-  color: var(--dm-error, #ef4444);
-}
+const resizeTextarea = () => {
+  if (!textareaRef.value || !props.autosize) return
 
-.dm-textarea__input {
-  width: 100%;
-  padding: var(--dm-spacing-3, 0.75rem);
-  border: 1px solid var(--dm-neutral-300, #d1d5db);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  font-size: var(--dm-font-size-base, 1rem);
-  color: var(--dm-neutral-900, #111827);
-  background: white;
-  transition: all 0.2s;
-  resize: vertical;
-  font-family: inherit;
-  line-height: 1.5;
-}
+  const textarea = textareaRef.value
+  textarea.style.height = 'auto'
+  
+  let minHeight = 0
+  let maxHeight = Infinity
 
-.dm-textarea__input::placeholder {
-  color: var(--dm-neutral-400, #9ca3af);
-}
+  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
+    }
+  }
 
-.dm-textarea__input:hover:not(:disabled) {
-  border-color: var(--dm-neutral-400, #9ca3af);
+  const scrollHeight = textarea.scrollHeight
+  const height = Math.max(minHeight, Math.min(maxHeight, scrollHeight))
+  textarea.style.height = `${height}px`
 }
 
-.dm-textarea__input:focus {
-  outline: 2px solid var(--dm-primary, #0072CE);
-  outline-offset: 0;
-  border-color: var(--dm-primary, #0072CE);
+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;
 }
 
-.dm-textarea__input:disabled {
-  background: var(--dm-neutral-100, #f3f4f6);
-  cursor: not-allowed;
-  opacity: 0.6;
+.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);
 }
 
-.dm-textarea__input--error {
-  border-color: var(--dm-error, #ef4444);
+.datametria-textarea__inner:hover {
+  border-color: var(--datametria-border-color-hover, #c0c4cc);
 }
 
-.dm-textarea__input--error:focus {
-  outline-color: var(--dm-error, #ef4444);
+.datametria-textarea__inner:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
 }
 
-.dm-textarea__footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
+.datametria-textarea__inner::placeholder {
+  color: var(--datametria-placeholder-color, #a8abb2);
 }
 
-.dm-textarea__error {
-  color: var(--dm-error, #ef4444);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  margin: 0;
-  flex: 1;
+.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;
 }
 
-.dm-textarea__counter {
-  color: var(--dm-neutral-500, #6b7280);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  white-space: nowrap;
+.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;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dm-textarea__input {
-    background: var(--dm-neutral-800, #1f2937);
-    border-color: var(--dm-neutral-600, #4b5563);
-    color: white;
-  }
+.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;
+}
 
-  .dm-textarea__input:disabled {
-    background: var(--dm-neutral-900, #111827);
-  }
+.datametria-textarea--focused .datametria-textarea__inner {
+  border-color: var(--datametria-primary-color, #0072ce);
 }
 </style>