@363045841yyt/klinechart 0.7.12 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@363045841yyt/klinechart",
-  "version": "0.7.12",
+  "version": "0.8.0",
   "description": "Vue 3 bindings for @363045841yyt/klinechart-core. Idiomatic composables, SFC components.",
   "license": "MIT",
   "repository": {
@@ -73,19 +73,19 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.3",
     "@size-limit/preset-small-lib": "^12.1.0",
-    "@vitejs/plugin-vue": "^6.0.0",
-    "@vue/test-utils": "^2.4.10",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/test-utils": "^2.4.11",
     "cross-env": "^7.0.3",
     "jsdom": "^29.1.1",
-    "publint": "^0.3.0",
+    "publint": "^0.3.21",
     "size-limit": "^12.1.0",
     "typescript": "~6.0.3",
     "unplugin-icons": "^23.0.1",
-    "vite": "^8.0.14",
-    "vite-plugin-babel": "^1.3.2",
+    "vite": "^8.0.16",
+    "vite-plugin-babel": "^1.7.3",
     "vite-plugin-css-injected-by-js": "^5.0.1",
-    "vite-plugin-dts": "^5.0.1",
-    "vitest": "^4.1.5",
-    "vue": "^3.5.0"
+    "vite-plugin-dts": "^5.0.2",
+    "vitest": "^4.1.8",
+    "vue": "^3.5.35"
   }
 }

package/src/components/ChartSettingsDialog.vue

@@ -35,11 +35,13 @@
                         />
                       </template>
                       <template v-else-if="item.type === 'select' && item.options">
-                        <select class="settings-select" v-model="settings[item.key]">
-                          <option v-for="opt in item.options" :key="opt.value" :value="opt.value">
-                            {{ opt.label }}
-                          </option>
-                        </select>
+                        <Dropdown
+                          :model-value="String(settings[item.key])"
+                          :options="item.options"
+                          size="sm"
+                          min-width="100px"
+                          @update:model-value="settings[item.key] = $event"
+                        />
                       </template>
                     </label>
                   </div>
@@ -82,11 +84,13 @@
                         />
                       </template>
                       <template v-else-if="item.type === 'select' && item.options">
-                        <select class="settings-select" v-model="settings[item.key]">
-                          <option v-for="opt in item.options" :key="opt.value" :value="opt.value">
-                            {{ opt.label }}
-                          </option>
-                        </select>
+                        <Dropdown
+                          :model-value="String(settings[item.key])"
+                          :options="item.options"
+                          size="sm"
+                          min-width="100px"
+                          @update:model-value="settings[item.key] = $event"
+                        />
                       </template>
                     </label>
                   </div>
@@ -164,6 +168,7 @@ import {
 import { normalizeColorPresetSettings } from '@363045841yyt/klinechart-core'
 import ColorPresetPanel from './ColorPresetPanel.vue'
 import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
+import Dropdown from './Dropdown.vue'
 
 const props = defineProps<{
   show: boolean
@@ -387,30 +392,6 @@ function confirmSettings() {
   accent-color: var(--klc-color-foreground);
 }
 
-.settings-select {
-  flex: 0 0 auto;
-  height: 30px;
-  padding: 4px 28px 4px 9px;
-  border: 1px solid var(--klc-color-axis-line);
-  border-radius: 6px;
-  background: var(--klc-color-tag-bg-white);
-  color: var(--klc-color-foreground);
-  font-size: 12px;
-  cursor: pointer;
-  outline: none;
-  min-width: 150px;
-  max-width: 190px;
-}
-
-.settings-select:hover {
-  border-color: var(--klc-color-axis-text);
-}
-
-.settings-select:focus {
-  border-color: var(--klc-color-axis-text);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--klc-color-axis-text) 15%, transparent);
-}
-
 .settings-section-divider {
   display: flex;
   align-items: center;
@@ -602,11 +583,6 @@ function confirmSettings() {
     margin-top: -26px;
   }
 
-  .settings-select {
-    width: 100%;
-    max-width: none;
-  }
-
   .settings-footer {
     align-items: stretch;
     flex-direction: column-reverse;

package/src/components/DrawingStyleToolbar.vue

@@ -15,28 +15,21 @@
       />
     </div>
 
-    <select
-      class="toolbar-select"
-      :value="drawing.style.strokeWidth ?? 1"
-      @change="onWidthChange(Number(($event.target as HTMLSelectElement).value))"
+    <Dropdown
+      :model-value="String(drawing.style.strokeWidth ?? 1)"
+      :options="widthOptions"
+      size="sm"
       title="线宽"
-    >
-      <option :value="1">1px</option>
-      <option :value="2">2px</option>
-      <option :value="3">3px</option>
-      <option :value="4">4px</option>
-    </select>
-
-    <select
-      class="toolbar-select"
-      :value="drawing.style.strokeStyle ?? 'solid'"
-      @change="onLineStyleChange(($event.target as HTMLSelectElement).value as 'solid' | 'dashed' | 'dotted')"
+      @update:model-value="onWidthChange(Number($event))"
+    />
+
+    <Dropdown
+      :model-value="drawing.style.strokeStyle ?? 'solid'"
+      :options="styleOptions"
+      size="sm"
       title="线型"
-    >
-      <option value="solid">实线</option>
-      <option value="dashed">虚线</option>
-      <option value="dotted">点线</option>
-    </select>
+      @update:model-value="onLineStyleChange($event as 'solid' | 'dashed' | 'dotted')"
+    />
 
     <button type="button" class="toolbar-btn delete-btn" title="删除" @click="$emit('delete')">
       <svg class="delete-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -51,6 +44,20 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
 import type { DrawingObject, DrawingStyle } from '@363045841yyt/klinechart-core/plugin'
+import Dropdown from './Dropdown.vue'
+
+const widthOptions = [
+  { label: '1px', value: '1' },
+  { label: '2px', value: '2' },
+  { label: '3px', value: '3' },
+  { label: '4px', value: '4' },
+]
+
+const styleOptions = [
+  { label: '实线', value: 'solid' },
+  { label: '虚线', value: 'dashed' },
+  { label: '点线', value: 'dotted' },
+]
 
 const props = defineProps<{
   drawing: DrawingObject
@@ -136,22 +143,6 @@ function onLineStyleChange(style: 'solid' | 'dashed' | 'dotted') {
   height: 100%;
 }
 
-.toolbar-select {
-  height: 24px;
-  padding: 0 4px;
-  border: 1px solid var(--klc-color-axis-line);
-  border-radius: 4px;
-  background: var(--klc-color-tag-bg-white);
-  color: var(--klc-color-foreground);
-  font-size: 12px;
-  cursor: pointer;
-  outline: none;
-}
-
-.toolbar-select:hover {
-  border-color: var(--klc-color-axis-text);
-}
-
 .toolbar-btn {
   display: inline-flex;
   align-items: center;

package/src/components/Dropdown.vue

@@ -0,0 +1,291 @@
+<template>
+  <div ref="rootRef" class="dropdown" :class="[`dropdown--${size}`, { 'is-open': isOpen }]">
+    <button
+      ref="triggerRef"
+      type="button"
+      class="dropdown__trigger"
+      :title="title"
+      :style="triggerStyle"
+      aria-haspopup="listbox"
+      :aria-expanded="isOpen"
+      @click="toggleOpen"
+      @keydown.escape.stop="close"
+      @keydown.down.prevent="open"
+      @keydown.enter.prevent="toggleOpen"
+      @keydown.space.prevent="toggleOpen"
+    >
+      <span v-if="label" class="dropdown__label">{{ label }}</span>
+      <span class="dropdown__value">{{ selectedOption.label }}</span>
+      <span class="dropdown__chevron" aria-hidden="true"></span>
+    </button>
+
+    <div v-if="isOpen" class="dropdown__menu" :style="menuStyle" role="listbox" tabindex="-1">
+      <button
+        v-for="option in options"
+        :key="option.value"
+        type="button"
+        class="dropdown__option"
+        :class="{ 'is-selected': option.value === selectedValue }"
+        role="option"
+        :aria-selected="option.value === selectedValue"
+        @click="selectOption(option.value)"
+      >
+        {{ option.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+let activeDropdownId = 0
+let activeDropdownClose: (() => void) | null = null
+let dropdownIdSeed = 0
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue'
+
+export interface DropdownOption<T extends string = string> {
+  label: string
+  value: T
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    options: DropdownOption[]
+    size?: 'sm' | 'md'
+    minWidth?: string
+    label?: string
+    title?: string
+  }>(),
+  {
+    size: 'md',
+    title: '',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', level: string): void
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const menuWidth = ref(0)
+const dropdownId = ++dropdownIdSeed
+
+const triggerStyle = computed(() => {
+  if (props.minWidth) return { minWidth: props.minWidth }
+  return {}
+})
+
+const menuStyle = computed(() => {
+  if (!isOpen.value) return undefined
+  const w = menuWidth.value || (props.minWidth ? parseInt(props.minWidth) : 0)
+  return { width: w ? `${w}px` : undefined }
+})
+
+const selectedValue = computed(() => {
+  const val = props.modelValue?.trim()
+  const found = val && props.options.some((option) => option.value === val)
+  return found ? val : (props.options[0]?.value ?? '')
+})
+
+const selectedOption = computed(() => {
+  return props.options.find((option) => option.value === selectedValue.value) ?? props.options[0]
+})
+
+function open() {
+  if (activeDropdownId !== dropdownId && activeDropdownClose) {
+    activeDropdownClose()
+  }
+
+  if (isOpen.value) return
+
+  activeDropdownId = dropdownId
+  activeDropdownClose = close
+  menuWidth.value = triggerRef.value?.offsetWidth ?? 0
+  isOpen.value = true
+  document.addEventListener('pointerdown', handleDocumentPointerDown)
+}
+
+function close() {
+  if (!isOpen.value) return
+  isOpen.value = false
+  if (activeDropdownId === dropdownId) {
+    activeDropdownId = 0
+    activeDropdownClose = null
+  }
+  document.removeEventListener('pointerdown', handleDocumentPointerDown)
+}
+
+function toggleOpen() {
+  if (isOpen.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+function selectOption(value: string) {
+  emit('update:modelValue', value)
+  close()
+}
+
+function handleDocumentPointerDown(event: PointerEvent) {
+  const root = rootRef.value
+  if (root && !root.contains(event.target as Node | null)) {
+    close()
+  }
+}
+
+onBeforeUnmount(close)
+</script>
+
+<style scoped>
+.dropdown {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.dropdown__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 4px;
+  background: var(--klc-color-background);
+  color: var(--klc-color-foreground);
+  font: inherit;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.dropdown--md .dropdown__trigger {
+  height: 28px;
+}
+
+.dropdown--sm .dropdown__trigger {
+  height: 24px;
+  padding: 0 6px;
+  gap: 4px;
+}
+
+.dropdown__trigger:hover,
+.dropdown__trigger:focus-visible,
+.dropdown.is-open .dropdown__trigger {
+  border-color: var(--klc-color-axis-text);
+  background: var(--klc-color-grid-minor);
+  outline: 0;
+}
+
+.dropdown__label {
+  color: var(--klc-color-axis-text);
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.dropdown__value {
+  flex: 1 1 auto;
+  color: var(--klc-color-foreground);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.dropdown--sm .dropdown__value {
+  font-size: 12px;
+  min-width: 24px;
+}
+
+.dropdown__chevron {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid var(--klc-color-axis-text);
+  transition: transform 0.15s ease;
+}
+
+.dropdown.is-open .dropdown__chevron {
+  transform: rotate(180deg);
+}
+
+.dropdown__menu {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 4px);
+  left: 0;
+  padding: 4px;
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 4px;
+  background: var(--klc-color-background);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
+  box-sizing: border-box;
+}
+
+.dropdown__option {
+  width: 100%;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--klc-color-foreground);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.dropdown--sm .dropdown__option {
+  height: 24px;
+  padding: 0 6px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.dropdown__option:hover,
+.dropdown__option:focus-visible {
+  background: var(--klc-color-grid-minor);
+  outline: 0;
+}
+
+.dropdown__option.is-selected {
+  color: var(--klc-color-up);
+  font-weight: 700;
+}
+
+@media (max-width: 768px), (max-height: 640px) {
+  .dropdown--md .dropdown__trigger {
+    height: 26px;
+    gap: 4px;
+    padding: 0 6px;
+  }
+
+  .dropdown--md .dropdown__label {
+    display: none;
+  }
+
+  .dropdown--md .dropdown__value {
+    min-width: 42px;
+    font-size: 12px;
+  }
+
+  .dropdown--md .dropdown__option {
+    height: 26px;
+    font-size: 12px;
+  }
+}
+</style>