@datametria/vue-components 1.2.0 → 2.1.0

package/src/components/DatametriaFloatingBar.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    :class="floatingBarClasses"
+    role="toolbar"
+    :aria-label="ariaLabel"
+    :style="positionStyle"
+  >
+    <div class="dm-floating-bar__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  variant?: 'light' | 'dark' | 'primary'
+  offset?: string
+  shadow?: boolean
+  rounded?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: 'bottom',
+  variant: 'light',
+  offset: '16px',
+  shadow: true,
+  rounded: true,
+  ariaLabel: 'Floating toolbar'
+})
+
+const floatingBarClasses = computed(() => [
+  'dm-floating-bar',
+  `dm-floating-bar--${props.position}`,
+  `dm-floating-bar--${props.variant}`,
+  { 'dm-floating-bar--shadow': props.shadow },
+  { 'dm-floating-bar--rounded': props.rounded }
+])
+
+const positionStyle = computed(() => {
+  const styles: Record<string, string> = {}
+  
+  switch (props.position) {
+    case 'top':
+      styles.top = props.offset
+      break
+    case 'bottom':
+      styles.bottom = props.offset
+      break
+    case 'left':
+      styles.left = props.offset
+      break
+    case 'right':
+      styles.right = props.offset
+      break
+  }
+  
+  return styles
+})
+</script>
+
+<style scoped>
+.dm-floating-bar {
+  position: fixed;
+  z-index: 1000;
+  background: var(--dm-neutral-50, #ffffff);
+  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  transition: all 0.3s ease;
+}
+
+.dm-floating-bar--top,
+.dm-floating-bar--bottom {
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: calc(100% - 32px);
+}
+
+.dm-floating-bar--left,
+.dm-floating-bar--right {
+  top: 50%;
+  transform: translateY(-50%);
+  max-height: calc(100vh - 32px);
+}
+
+.dm-floating-bar--dark {
+  background: var(--dm-neutral-900, #111827);
+  border-color: var(--dm-neutral-800, #1f2937);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-floating-bar--primary {
+  background: var(--dm-primary, #0072CE);
+  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-floating-bar--shadow {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.dm-floating-bar--rounded {
+  border-radius: var(--dm-radius-lg, 0.5rem);
+}
+
+.dm-floating-bar__content {
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+@media (max-width: 768px) {
+  .dm-floating-bar--top,
+  .dm-floating-bar--bottom {
+    max-width: calc(100% - 16px);
+  }
+
+  .dm-floating-bar__content {
+    padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
+    gap: var(--dm-spacing-1, 0.25rem);
+  }
+}
+</style>

package/src/components/DatametriaGrid.vue

@@ -18,7 +18,7 @@ interface Props {
 
 withDefaults(defineProps<Props>(), {
   cols: 12,
-  gap: 'var(--dm-space-4)'
+  gap: 'var(--dm-spacing-4, 1rem)'
 })
 </script>
 
@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
 .dm-grid {
   display: grid;
   grid-template-columns: repeat(var(--dm-grid-cols, 12), 1fr);
-  gap: var(--dm-grid-gap, var(--dm-space-4));
+  gap: var(--dm-grid-gap, var(--dm-spacing-4, 1rem));
 }
 
 @media (max-width: 1024px) {
@@ -38,7 +38,7 @@ withDefaults(defineProps<Props>(), {
 @media (max-width: 640px) {
   .dm-grid {
     grid-template-columns: 1fr;
-    gap: var(--dm-space-3);
+    gap: var(--dm-spacing-3, 0.75rem);
   }
 }
 </style>

package/src/components/DatametriaInput.vue

@@ -58,45 +58,45 @@ const inputClasses = computed(() => [
 .datametria-input {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--dm-spacing-2, 0.5rem);
 }
 
 .datametria-input__label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #374151;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-medium, 500);
+  color: var(--dm-neutral-700, #374151);
 }
 
 .datametria-input__required {
-  color: #ef4444;
+  color: var(--dm-error, #ef4444);
 }
 
 .datametria-input__field {
-  padding: 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  font-size: 1rem;
+  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);
   transition: all 0.2s;
 }
 
 .datametria-input__field:focus {
   outline: none;
-  border-color: #0072CE;
-  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
 }
 
 .datametria-input__field--error {
-  border-color: #ef4444;
+  border-color: var(--dm-error, #ef4444);
 }
 
 .datametria-input__field--disabled {
-  background: #f3f4f6;
+  background: var(--dm-neutral-100, #f3f4f6);
   cursor: not-allowed;
 }
 
 .datametria-input__error {
-  font-size: 0.875rem;
-  color: #ef4444;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-error, #ef4444);
   margin: 0;
 }
 </style>