@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaSidebar.vue

@@ -1,230 +1,302 @@
-<template>
-  <aside
-    :class="sidebarClasses"
-    role="complementary"
-    :aria-label="ariaLabel"
-    :aria-expanded="isOpen"
-  >
-    <div class="dm-sidebar__header" v-if="$slots.header">
-      <slot name="header"></slot>
-      <button
-        v-if="collapsible"
-        class="dm-sidebar__toggle"
-        @click="toggle"
-        :aria-label="isOpen ? 'Fechar sidebar' : 'Abrir sidebar'"
-      >
-        <span class="dm-sidebar__toggle-icon" :class="{ 'dm-sidebar__toggle-icon--open': isOpen }"></span>
-      </button>
-    </div>
-
-    <nav class="dm-sidebar__content">
-      <slot></slot>
-    </nav>
-
-    <div class="dm-sidebar__footer" v-if="$slots.footer">
-      <slot name="footer"></slot>
-    </div>
-  </aside>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-
-interface Props {
-  position?: 'left' | 'right'
-  variant?: 'light' | 'dark' | 'primary'
-  width?: string
-  collapsible?: boolean
-  defaultOpen?: boolean
-  ariaLabel?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  position: 'left',
-  variant: 'light',
-  width: '280px',
-  collapsible: false,
-  defaultOpen: true,
-  ariaLabel: 'Sidebar navigation'
-})
-
-const emit = defineEmits<{
-  toggle: [isOpen: boolean]
-  open: []
-  close: []
-}>()
-
-const isOpen = ref(props.defaultOpen)
-
-const sidebarClasses = computed(() => [
-  'dm-sidebar',
-  `dm-sidebar--${props.position}`,
-  `dm-sidebar--${props.variant}`,
-  { 'dm-sidebar--collapsed': !isOpen.value && props.collapsible }
-])
-
-const toggle = () => {
-  isOpen.value = !isOpen.value
-  emit('toggle', isOpen.value)
-  if (isOpen.value) {
-    emit('open')
-  } else {
-    emit('close')
+<template>
+  <aside
+    :class="sidebarClasses"
+    role="complementary"
+    :aria-label="ariaLabel"
+    :aria-expanded="isOpen"
+  >
+    <div class="dm-sidebar__header" v-if="$slots.header">
+      <slot name="header"></slot>
+      <button
+        v-if="collapsible"
+        class="dm-sidebar__toggle"
+        @click="toggle"
+        :aria-label="isOpen ? 'Fechar sidebar' : 'Abrir sidebar'"
+      >
+        <span class="dm-sidebar__toggle-icon" :class="{ 'dm-sidebar__toggle-icon--open': isOpen }"></span>
+      </button>
+    </div>
+
+    <nav class="dm-sidebar__content">
+      <slot></slot>
+    </nav>
+
+    <div class="dm-sidebar__footer" v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  position?: 'left' | 'right'
+  variant?: 'light' | 'dark' | 'primary'
+  width?: string
+  collapsible?: boolean
+  defaultOpen?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: 'left',
+  variant: 'light',
+  width: '280px',
+  collapsible: false,
+  defaultOpen: true,
+  ariaLabel: 'Sidebar navigation'
+})
+
+const emit = defineEmits<{
+  toggle: [isOpen: boolean]
+  open: []
+  close: []
+}>()
+
+const isOpen = ref(props.defaultOpen)
+
+const sidebarClasses = computed(() => [
+  'dm-sidebar',
+  `dm-sidebar--${props.position}`,
+  `dm-sidebar--${props.variant}`,
+  { 'dm-sidebar--collapsed': !isOpen.value && props.collapsible }
+])
+
+const toggle = () => {
+  isOpen.value = !isOpen.value
+  emit('toggle', isOpen.value)
+  if (isOpen.value) {
+    emit('open')
+  } else {
+    emit('close')
+  }
+}
+
+watch(() => props.defaultOpen, (newVal) => {
+  isOpen.value = newVal
+})
+
+defineExpose({ isOpen, toggle })
+</script>
+
+<style scoped>
+.dm-sidebar {
+  height: 100vh;
+  background: var(--dm-neutral-50, #ffffff);
+  border-right: 1px solid var(--dm-neutral-200, #e5e7eb);
+  display: flex;
+  flex-direction: column;
+  transition: width 0.3s ease;
+  width: v-bind(width);
+  position: fixed;
+  top: 0;
+  z-index: 90;
+}
+
+.dm-sidebar--left {
+  left: 0;
+}
+
+.dm-sidebar--right {
+  right: 0;
+  border-right: none;
+  border-left: 1px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.dm-sidebar--dark {
+  background: var(--dm-neutral-900, #111827);
+  border-color: var(--dm-neutral-800, #1f2937);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-sidebar--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-sidebar--collapsed {
+  width: 64px;
+}
+
+.dm-sidebar__header {
+  padding: var(--dm-spacing-4, 1rem);
+  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 64px;
+}
+
+.dm-sidebar--dark .dm-sidebar__header {
+  border-color: var(--dm-neutral-800, #1f2937);
+}
+
+.dm-sidebar--primary .dm-sidebar__header {
+  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
+}
+
+.dm-sidebar__toggle {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--dm-radius-md, 0.375rem);
+  transition: background 0.2s ease;
+}
+
+.dm-sidebar__toggle:hover {
+  background: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-sidebar--dark .dm-sidebar__toggle:hover {
+  background: var(--dm-neutral-800, #1f2937);
+}
+
+.dm-sidebar__toggle-icon {
+  width: 16px;
+  height: 2px;
+  background: var(--dm-neutral-900, #111827);
+  position: relative;
+  transition: transform 0.3s ease;
+}
+
+.dm-sidebar--dark .dm-sidebar__toggle-icon,
+.dm-sidebar--primary .dm-sidebar__toggle-icon {
+  background: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-sidebar__toggle-icon::before,
+.dm-sidebar__toggle-icon::after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 2px;
+  background: inherit;
+  transition: transform 0.3s ease;
+}
+
+.dm-sidebar__toggle-icon::before {
+  top: -5px;
+}
+
+.dm-sidebar__toggle-icon::after {
+  bottom: -5px;
+}
+
+.dm-sidebar__toggle-icon--open {
+  transform: rotate(180deg);
+}
+
+.dm-sidebar__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--dm-spacing-4, 1rem);
+}
+
+.dm-sidebar__footer {
+  padding: var(--dm-spacing-4, 1rem);
+  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.dm-sidebar--dark .dm-sidebar__footer {
+  border-color: var(--dm-neutral-800, #1f2937);
+}
+
+.dm-sidebar--primary .dm-sidebar__footer {
+  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
+}
+
+@media (max-width: 768px) {
+  .dm-sidebar {
+    transform: translateX(0);
+    transition: transform 0.3s ease;
+  }
+
+  .dm-sidebar--left.dm-sidebar--collapsed {
+    transform: translateX(-100%);
+  }
+
+  .dm-sidebar--right.dm-sidebar--collapsed {
+    transform: translateX(100%);
+  }
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .dm-sidebar--light {
+    background: var(--dm-neutral-900, #111827);
+    border-color: var(--dm-neutral-800, #1f2937);
+    color: var(--dm-neutral-50, #ffffff);
+  }
+
+  .dm-sidebar--light .dm-sidebar__header,
+  .dm-sidebar--light .dm-sidebar__footer {
+    border-color: var(--dm-neutral-800, #1f2937);
+  }
+
+  .dm-sidebar--light .dm-sidebar__toggle:hover {
+    background: var(--dm-neutral-800, #1f2937);
+  }
+
+  .dm-sidebar--light .dm-sidebar__toggle-icon {
+    background: var(--dm-neutral-50, #ffffff);
+  }
+}
+
+/* Controle manual via useTheme() */
+[data-theme="dark"] .dm-sidebar--light {
+  background: var(--dm-neutral-900, #111827);
+  border-color: var(--dm-neutral-800, #1f2937);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .dm-sidebar--light .dm-sidebar__header,
+[data-theme="dark"] .dm-sidebar--light .dm-sidebar__footer {
+    border-color: var(--dm-neutral-800, #1f2937);
   }
 }
 
-watch(() => props.defaultOpen, (newVal) => {
-  isOpen.value = newVal
-})
-
-defineExpose({ isOpen, toggle })
-</script>
-
-<style scoped>
-.dm-sidebar {
-  height: 100vh;
-  background: var(--dm-neutral-50, #ffffff);
-  border-right: 1px solid var(--dm-neutral-200, #e5e7eb);
-  display: flex;
-  flex-direction: column;
-  transition: width 0.3s ease;
-  width: v-bind(width);
-  position: fixed;
-  top: 0;
-  z-index: 90;
-}
-
-.dm-sidebar--left {
-  left: 0;
-}
-
-.dm-sidebar--right {
-  right: 0;
-  border-right: none;
-  border-left: 1px solid var(--dm-neutral-200, #e5e7eb);
-}
-
-.dm-sidebar--dark {
-  background: var(--dm-neutral-900, #111827);
-  border-color: var(--dm-neutral-800, #1f2937);
-  color: var(--dm-neutral-50, #ffffff);
-}
-
-.dm-sidebar--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-sidebar--collapsed {
-  width: 64px;
-}
-
-.dm-sidebar__header {
-  padding: var(--dm-spacing-4, 1rem);
-  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 64px;
-}
-
-.dm-sidebar--dark .dm-sidebar__header {
-  border-color: var(--dm-neutral-800, #1f2937);
-}
-
-.dm-sidebar--primary .dm-sidebar__header {
-  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
-}
-
-.dm-sidebar__toggle {
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--dm-radius-md, 0.375rem);
-  transition: background 0.2s ease;
-}
-
-.dm-sidebar__toggle:hover {
-  background: var(--dm-neutral-100, #f3f4f6);
-}
-
-.dm-sidebar--dark .dm-sidebar__toggle:hover {
-  background: var(--dm-neutral-800, #1f2937);
-}
-
-.dm-sidebar__toggle-icon {
-  width: 16px;
-  height: 2px;
-  background: var(--dm-neutral-900, #111827);
-  position: relative;
-  transition: transform 0.3s ease;
-}
-
-.dm-sidebar--dark .dm-sidebar__toggle-icon,
-.dm-sidebar--primary .dm-sidebar__toggle-icon {
-  background: var(--dm-neutral-50, #ffffff);
-}
-
-.dm-sidebar__toggle-icon::before,
-.dm-sidebar__toggle-icon::after {
-  content: '';
-  position: absolute;
-  width: 16px;
-  height: 2px;
-  background: inherit;
-  transition: transform 0.3s ease;
-}
-
-.dm-sidebar__toggle-icon::before {
-  top: -5px;
-}
-
-.dm-sidebar__toggle-icon::after {
-  bottom: -5px;
-}
-
-.dm-sidebar__toggle-icon--open {
-  transform: rotate(180deg);
-}
-
-.dm-sidebar__content {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--dm-spacing-4, 1rem);
-}
-
-.dm-sidebar__footer {
-  padding: var(--dm-spacing-4, 1rem);
-  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
-}
-
-.dm-sidebar--dark .dm-sidebar__footer {
-  border-color: var(--dm-neutral-800, #1f2937);
-}
-
-.dm-sidebar--primary .dm-sidebar__footer {
-  border-color: color-mix(in srgb, var(--dm-primary, #0072CE) 90%, black);
-}
-
-@media (max-width: 768px) {
-  .dm-sidebar {
-    transform: translateX(0);
-    transition: transform 0.3s ease;
+/* Controle manual via useTheme() */
+[data-theme="dark"] .dm-sidebar--light .dm-sidebar__header,
+[data-theme="dark"] .dm-sidebar--light .dm-sidebar__footer {
+  border-color: var(--dm-neutral-800, #1f2937);
+}
+
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .dm-sidebar--light .dm-sidebar__toggle:hover {
+    background: var(--dm-neutral-800, #1f2937);
   }
+}
 
-  .dm-sidebar--left.dm-sidebar--collapsed {
-    transform: translateX(-100%);
-  }
+/* Controle manual via useTheme() */
+[data-theme="dark"] .dm-sidebar--light .dm-sidebar__toggle:hover {
+  background: var(--dm-neutral-800, #1f2937);
+}
+
 
-  .dm-sidebar--right.dm-sidebar--collapsed {
-    transform: translateX(100%);
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .dm-sidebar--light .dm-sidebar__toggle-icon {
+    background: var(--dm-neutral-50, #ffffff);
   }
 }
-</style>
+
+/* Controle manual via useTheme() */
+[data-theme="dark"] .dm-sidebar--light .dm-sidebar__toggle-icon {
+  background: var(--dm-neutral-50, #ffffff);
+}
+</style>