@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaDropdown.vue

@@ -1,352 +1,358 @@
-<template>
-  <div class="datametria-dropdown" ref="dropdownRef">
-    <div
-      class="datametria-dropdown__trigger"
-      @click="handleTriggerClick"
-      @mouseenter="handleMouseEnter"
-      @mouseleave="handleMouseLeave"
-      @contextmenu.prevent="handleContextMenu"
-    >
-      <slot name="trigger">
-        <button class="datametria-dropdown__button">
-          {{ triggerText }}
-          <span class="datametria-dropdown__arrow" :class="{ 'is-open': visible }">▼</span>
-        </button>
-      </slot>
-    </div>
-
-    <Transition name="datametria-dropdown-fade">
-      <div
-        v-if="visible"
-        class="datametria-dropdown__menu"
-        :style="menuStyle"
-        @click="handleMenuClick"
-      >
-          <div
-            v-for="(item, index) in items"
-            :key="index"
-            class="datametria-dropdown__item"
-            :class="{
-              'is-disabled': item.disabled,
-              'is-divided': item.divided,
-              'has-children': item.children
-            }"
-            @click="handleItemClick(item, $event)"
-            @mouseenter="handleItemMouseEnter(item, index)"
-          >
-            <span class="datametria-dropdown__item-content">
-              <span v-if="item.icon" class="datametria-dropdown__item-icon">{{ item.icon }}</span>
-              {{ item.label }}
-            </span>
-            <span v-if="item.children" class="datametria-dropdown__item-arrow">▶</span>
-
-            <div
-              v-if="item.children && activeSubmenu === index"
-              class="datametria-dropdown__submenu"
-              :style="submenuStyle"
-            >
-              <div
-                v-for="(child, childIndex) in item.children"
-                :key="childIndex"
-                class="datametria-dropdown__item"
-                :class="{ 'is-disabled': child.disabled }"
-                @click.stop="handleItemClick(child, $event)"
-              >
-                <span class="datametria-dropdown__item-content">
-                  <span v-if="child.icon" class="datametria-dropdown__item-icon">{{ child.icon }}</span>
-                  {{ child.label }}
-                </span>
-              </div>
-            </div>
-          </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-
-export interface DropdownItem {
-  label: string
-  value?: string | number
-  icon?: string
-  disabled?: boolean
-  divided?: boolean
-  children?: DropdownItem[]
-  command?: () => void
-}
-
-interface Props {
-  items: DropdownItem[]
-  trigger?: 'hover' | 'click' | 'contextmenu'
-  placement?: 'bottom' | 'top' | 'left' | 'right'
-  triggerText?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  trigger: 'click',
-  placement: 'bottom',
-  triggerText: 'Dropdown'
-})
-
-const emit = defineEmits<{
-  command: [item: DropdownItem]
-  visibleChange: [visible: boolean]
-}>()
-
-const dropdownRef = ref<HTMLElement | null>(null)
-const visible = ref(false)
-const activeSubmenu = ref<number | null>(null)
-const menuPosition = ref({ top: 0, left: 0 })
-
-const menuStyle = computed(() => ({
-  top: `${menuPosition.value.top}px`,
-  left: `${menuPosition.value.left}px`
-}))
-
-const submenuStyle = computed(() => {
-  const offset = props.placement === 'right' ? '100%' : '-100%'
-  return {
-    left: offset,
-    top: '0'
-  }
-})
-
-const updateMenuPosition = () => {
-  if (!dropdownRef.value) return
-
-  const rect = dropdownRef.value.getBoundingClientRect()
-  const menuWidth = 200
-  const menuHeight = props.items.length * 40
-
-  let top = rect.bottom + window.scrollY
-  let left = rect.left + window.scrollX
-
-  if (props.placement === 'top') {
-    top = rect.top + window.scrollY - menuHeight
-  } else if (props.placement === 'left') {
-    top = rect.top + window.scrollY
-    left = rect.left + window.scrollX - menuWidth
-  } else if (props.placement === 'right') {
-    top = rect.top + window.scrollY
-    left = rect.right + window.scrollX
+<template>
+  <div class="datametria-dropdown" ref="dropdownRef">
+    <div
+      class="datametria-dropdown__trigger"
+      @click="handleTriggerClick"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      @contextmenu.prevent="handleContextMenu"
+    >
+      <slot name="trigger">
+        <button class="datametria-dropdown__button">
+          {{ triggerText }}
+          <span class="datametria-dropdown__arrow" :class="{ 'is-open': visible }">▼</span>
+        </button>
+      </slot>
+    </div>
+
+    <Transition name="datametria-dropdown-fade">
+      <div
+        v-if="visible"
+        class="datametria-dropdown__menu"
+        :style="menuStyle"
+        @click="handleMenuClick"
+      >
+          <div
+            v-for="(item, index) in items"
+            :key="index"
+            class="datametria-dropdown__item"
+            :class="{
+              'is-disabled': item.disabled,
+              'is-divided': item.divided,
+              'has-children': item.children
+            }"
+            @click="handleItemClick(item, $event)"
+            @mouseenter="handleItemMouseEnter(item, index)"
+          >
+            <span class="datametria-dropdown__item-content">
+              <span v-if="item.icon" class="datametria-dropdown__item-icon">{{ item.icon }}</span>
+              {{ item.label }}
+            </span>
+            <span v-if="item.children" class="datametria-dropdown__item-arrow">▶</span>
+
+            <div
+              v-if="item.children && activeSubmenu === index"
+              class="datametria-dropdown__submenu"
+              :style="submenuStyle"
+            >
+              <div
+                v-for="(child, childIndex) in item.children"
+                :key="childIndex"
+                class="datametria-dropdown__item"
+                :class="{ 'is-disabled': child.disabled }"
+                @click.stop="handleItemClick(child, $event)"
+              >
+                <span class="datametria-dropdown__item-content">
+                  <span v-if="child.icon" class="datametria-dropdown__item-icon">{{ child.icon }}</span>
+                  {{ child.label }}
+                </span>
+              </div>
+            </div>
+          </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+export interface DropdownItem {
+  label: string
+  value?: string | number
+  icon?: string
+  disabled?: boolean
+  divided?: boolean
+  children?: DropdownItem[]
+  command?: () => void
+}
+
+interface Props {
+  items: DropdownItem[]
+  trigger?: 'hover' | 'click' | 'contextmenu'
+  placement?: 'bottom' | 'top' | 'left' | 'right'
+  triggerText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  trigger: 'click',
+  placement: 'bottom',
+  triggerText: 'Dropdown'
+})
+
+const emit = defineEmits<{
+  command: [item: DropdownItem]
+  visibleChange: [visible: boolean]
+}>()
+
+const dropdownRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const activeSubmenu = ref<number | null>(null)
+const menuPosition = ref({ top: 0, left: 0 })
+
+const menuStyle = computed(() => ({
+  top: `${menuPosition.value.top}px`,
+  left: `${menuPosition.value.left}px`
+}))
+
+const submenuStyle = computed(() => {
+  const offset = props.placement === 'right' ? '100%' : '-100%'
+  return {
+    left: offset,
+    top: '0'
+  }
+})
+
+const updateMenuPosition = () => {
+  if (!dropdownRef.value) return
+
+  const rect = dropdownRef.value.getBoundingClientRect()
+  const menuWidth = 200
+  const menuHeight = props.items.length * 40
+
+  let top = rect.bottom + window.scrollY
+  let left = rect.left + window.scrollX
+
+  if (props.placement === 'top') {
+    top = rect.top + window.scrollY - menuHeight
+  } else if (props.placement === 'left') {
+    top = rect.top + window.scrollY
+    left = rect.left + window.scrollX - menuWidth
+  } else if (props.placement === 'right') {
+    top = rect.top + window.scrollY
+    left = rect.right + window.scrollX
+  }
+
+  menuPosition.value = { top, left }
+}
+
+const show = () => {
+  visible.value = true
+  updateMenuPosition()
+  emit('visibleChange', true)
+}
+
+const hide = () => {
+  visible.value = false
+  activeSubmenu.value = null
+  emit('visibleChange', false)
+}
+
+const handleTriggerClick = () => {
+  if (props.trigger === 'click') {
+    visible.value ? hide() : show()
+  }
+}
+
+const handleMouseEnter = () => {
+  if (props.trigger === 'hover') {
+    show()
+  }
+}
+
+const handleMouseLeave = () => {
+  if (props.trigger === 'hover') {
+    setTimeout(() => {
+      if (!dropdownRef.value?.matches(':hover')) {
+        hide()
+      }
+    }, 200)
+  }
+}
+
+const handleContextMenu = () => {
+  if (props.trigger === 'contextmenu') {
+    show()
+  }
+}
+
+const handleItemClick = (item: DropdownItem, event: Event) => {
+  if (item.disabled) {
+    event.stopPropagation()
+    return
+  }
+
+  if (item.children) {
+    event.stopPropagation()
+    return
+  }
+
+  emit('command', item)
+  if (item.command) {
+    item.command()
+  }
+  hide()
+}
+
+const handleItemMouseEnter = (item: DropdownItem, index: number) => {
+  if (item.children) {
+    activeSubmenu.value = index
+  } else {
+    activeSubmenu.value = null
+  }
+}
+
+const handleMenuClick = (event: Event) => {
+  event.stopPropagation()
+}
+
+const handleClickOutside = (event: Event) => {
+  if (!dropdownRef.value?.contains(event.target as Node)) {
+    hide()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<style scoped>
+.datametria-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.datametria-dropdown__trigger {
+  cursor: pointer;
+}
+
+.datametria-dropdown__button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--dm-color-primary, #0072ce);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.datametria-dropdown__button:hover {
+  background: var(--dm-color-primary-dark, #005a9e);
+}
+
+.datametria-dropdown__arrow {
+  font-size: 10px;
+  transition: transform 0.2s;
+}
+
+.datametria-dropdown__arrow.is-open {
+  transform: rotate(180deg);
+}
+
+.datametria-dropdown__menu {
+  position: absolute;
+  z-index: 1000;
+  min-width: 160px;
+  background: white;
+  border: 1px solid var(--dm-color-border, #e0e0e0);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+}
+
+.datametria-dropdown__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--dm-color-text, #333);
+  transition: background-color 0.2s;
+}
+
+.datametria-dropdown__item:hover:not(.is-disabled) {
+  background: var(--dm-color-background-hover, #f5f5f5);
+}
+
+.datametria-dropdown__item.is-disabled {
+  color: var(--dm-color-text-disabled, #999);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.datametria-dropdown__item.is-divided {
+  border-top: 1px solid var(--dm-color-border, #e0e0e0);
+  margin-top: 4px;
+  padding-top: 12px;
+}
+
+.datametria-dropdown__item-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.datametria-dropdown__item-icon {
+  font-size: 16px;
+}
+
+.datametria-dropdown__item-arrow {
+  font-size: 10px;
+  color: var(--dm-color-text-secondary, #666);
+}
+
+.datametria-dropdown__submenu {
+  position: absolute;
+  top: 0;
+  min-width: 160px;
+  background: white;
+  border: 1px solid var(--dm-color-border, #e0e0e0);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+}
+
+.datametria-dropdown-fade-enter-active,
+.datametria-dropdown-fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.datametria-dropdown-fade-enter-from,
+.datametria-dropdown-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-dropdown__menu,
+  .datametria-dropdown__submenu {
+    background: var(--dm-color-background-dark, #1e1e1e);
+    border-color: var(--dm-color-border-dark, #333);
   }
 
-  menuPosition.value = { top, left }
-}
-
-const show = () => {
-  visible.value = true
-  updateMenuPosition()
-  emit('visibleChange', true)
-}
-
-const hide = () => {
-  visible.value = false
-  activeSubmenu.value = null
-  emit('visibleChange', false)
-}
-
-const handleTriggerClick = () => {
-  if (props.trigger === 'click') {
-    visible.value ? hide() : show()
-  }
-}
-
-const handleMouseEnter = () => {
-  if (props.trigger === 'hover') {
-    show()
-  }
-}
-
-const handleMouseLeave = () => {
-  if (props.trigger === 'hover') {
-    setTimeout(() => {
-      if (!dropdownRef.value?.matches(':hover')) {
-        hide()
-      }
-    }, 200)
-  }
-}
-
-const handleContextMenu = () => {
-  if (props.trigger === 'contextmenu') {
-    show()
-  }
-}
-
-const handleItemClick = (item: DropdownItem, event: Event) => {
-  if (item.disabled) {
-    event.stopPropagation()
-    return
-  }
-
-  if (item.children) {
-    event.stopPropagation()
-    return
-  }
-
-  emit('command', item)
-  if (item.command) {
-    item.command()
-  }
-  hide()
-}
-
-const handleItemMouseEnter = (item: DropdownItem, index: number) => {
-  if (item.children) {
-    activeSubmenu.value = index
-  } else {
-    activeSubmenu.value = null
-  }
-}
-
-const handleMenuClick = (event: Event) => {
-  event.stopPropagation()
-}
-
-const handleClickOutside = (event: Event) => {
-  if (!dropdownRef.value?.contains(event.target as Node)) {
-    hide()
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
-</script>
-
-<style scoped>
-.datametria-dropdown {
-  display: inline-block;
-  position: relative;
-}
-
-.datametria-dropdown__trigger {
-  cursor: pointer;
-}
-
-.datametria-dropdown__button {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: var(--dm-color-primary, #0072ce);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.2s;
-}
-
-.datametria-dropdown__button:hover {
-  background: var(--dm-color-primary-dark, #005a9e);
-}
-
-.datametria-dropdown__arrow {
-  font-size: 10px;
-  transition: transform 0.2s;
-}
-
-.datametria-dropdown__arrow.is-open {
-  transform: rotate(180deg);
-}
-
-.datametria-dropdown__menu {
-  position: absolute;
-  z-index: 1000;
-  min-width: 160px;
-  background: white;
-  border: 1px solid var(--dm-color-border, #e0e0e0);
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  padding: 4px 0;
-}
-
-.datametria-dropdown__item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 16px;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--dm-color-text, #333);
-  transition: background-color 0.2s;
-}
-
-.datametria-dropdown__item:hover:not(.is-disabled) {
-  background: var(--dm-color-background-hover, #f5f5f5);
-}
-
-.datametria-dropdown__item.is-disabled {
-  color: var(--dm-color-text-disabled, #999);
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.datametria-dropdown__item.is-divided {
-  border-top: 1px solid var(--dm-color-border, #e0e0e0);
-  margin-top: 4px;
-  padding-top: 12px;
-}
-
-.datametria-dropdown__item-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.datametria-dropdown__item-icon {
-  font-size: 16px;
-}
-
-.datametria-dropdown__item-arrow {
-  font-size: 10px;
-  color: var(--dm-color-text-secondary, #666);
-}
-
-.datametria-dropdown__submenu {
-  position: absolute;
-  top: 0;
-  min-width: 160px;
-  background: white;
-  border: 1px solid var(--dm-color-border, #e0e0e0);
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  padding: 4px 0;
-}
-
-.datametria-dropdown-fade-enter-active,
-.datametria-dropdown-fade-leave-active {
-  transition: opacity 0.2s, transform 0.2s;
-}
-
-.datametria-dropdown-fade-enter-from,
-.datametria-dropdown-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-
-@media (prefers-color-scheme: dark) {
-  .datametria-dropdown__menu,
-  .datametria-dropdown__submenu {
-    background: var(--dm-color-background-dark, #1e1e1e);
-    border-color: var(--dm-color-border-dark, #333);
-  }
-
-  .datametria-dropdown__item {
-    color: var(--dm-color-text-dark, #e0e0e0);
-  }
-
-  .datametria-dropdown__item:hover:not(.is-disabled) {
-    background: var(--dm-color-background-hover-dark, #2a2a2a);
-  }
-}
-</style>
+[data-theme="dark"] .datametria-dropdown__menu,
+.datametria-dropdown__submenu {
+background: var(--dm-color-background-dark, #1e1e1e);
+border-color: var(--dm-color-border-dark, #333);
+}
+
+  .datametria-dropdown__item {
+    color: var(--dm-color-text-dark, #e0e0e0);
+  }
+
+  .datametria-dropdown__item:hover:not(.is-disabled) {
+    background: var(--dm-color-background-hover-dark, #2a2a2a);
+  }
+}
+</style>