@363045841yyt/klinechart 0.8.3 → 0.8.5

package/dist/tools/calcRangeOverlayPixel.d.ts

@@ -0,0 +1,15 @@
+import { ChartController } from '@363045841yyt/klinechart-core/controllers';
+export interface Bounds {
+    start: number;
+    end: number;
+}
+export declare function calcRangeOverlayPixel(bounds: Bounds, controller: ChartController, container: HTMLElement, viewport: {
+    scrollLeft: number;
+    plotWidth: number;
+    plotHeight: number;
+}): {
+    left: number;
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=calcRangeOverlayPixel.d.ts.map

package/dist/tools/calcRangeOverlayPixel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calcRangeOverlayPixel.d.ts","sourceRoot":"","sources":["../../src/tools/calcRangeOverlayPixel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAA;AAEhF,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,eAAe,EAC3B,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,GACtE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAejD"}

package/dist/tools/getKLineIndexByTimestamp.d.ts

@@ -0,0 +1,4 @@
+import { KLineData } from '@363045841yyt/klinechart-core/controllers';
+export declare function getKLineIndexByTimestamp(data: ReadonlyArray<KLineData>, timestamp: number): number | null;
+export declare function findNearestKLineIndex(data: ReadonlyArray<KLineData>, timestamp: number, direction: 'left' | 'right'): number | null;
+//# sourceMappingURL=getKLineIndexByTimestamp.d.ts.map

package/dist/tools/getKLineIndexByTimestamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getKLineIndexByTimestamp.d.ts","sourceRoot":"","sources":["../../src/tools/getKLineIndexByTimestamp.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAA;AAkB1E,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,EAC9B,SAAS,EAAE,MAAM,GAChB,MAAM,GAAG,IAAI,CAIf;AAED,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,EAC9B,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,GAAG,OAAO,GAC1B,MAAM,GAAG,IAAI,CAQf"}

package/dist/web-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"web-component.d.ts","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAE9F,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;aAU6uzC,CAAC;kBAAyB,CAAC;;;;;iBAAsH,CAAC;gBAAc,CAAC;;;iBAAuD,CAAC;gBAAc,CAAC;;qBAAgC,CAAC;;EAR3g0C,CAAA;AAIF,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAC5B,eAAe,iBAAiB,CAAA;AAEhC,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"web-component.d.ts","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAE9F,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;aAU2qsC,CAAC;kBAAyB,CAAC;;;;;iBAAsH,CAAC;gBAAc,CAAC;;;iBAAuD,CAAC;gBAAc,CAAC;;qBAAgC,CAAC;;EARz8sC,CAAA;AAIF,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAC5B,eAAe,iBAAiB,CAAA;AAEhC,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@363045841yyt/klinechart",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Vue 3 bindings for @363045841yyt/klinechart-core. Idiomatic composables, SFC components.",
   "license": "MIT",
   "repository": {

package/src/components/BatchStockDialog.vue

@@ -0,0 +1,293 @@
+<template>
+  <Teleport :to="teleportTarget">
+    <Transition name="overlay">
+      <div v-if="show" class="batch-overlay" @click="emit('close')">
+        <Transition name="modal">
+          <div class="batch-modal" @click.stop>
+            <div class="batch-header">
+              <span class="batch-title">批量设置股票代码</span>
+              <button class="batch-close-btn" @click="emit('close')">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="batch-body">
+              <textarea
+                v-model="codesText"
+                class="batch-textarea"
+                placeholder="每行一个股票代码&#10;例如:&#10;000001&#10;600036&#10;002415"
+                rows="8"
+                spellcheck="false"
+              />
+            </div>
+
+            <div class="batch-footer">
+              <button class="batch-btn batch-btn--cancel" @click="emit('close')">取消</button>
+              <button class="batch-btn batch-btn--confirm" @click="onApply">应用</button>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  apply: [codes: string[]]
+}>()
+
+const teleportTarget = useFullscreenTeleportTarget()
+
+const codes = ref<string[]>([])
+
+const codesText = computed({
+  get: () => codes.value.join('\n'),
+  set: (val: string) => {
+    codes.value = val
+      .split('\n')
+      .map((s) => s.trim())
+      .filter(Boolean)
+  },
+})
+
+function onApply() {
+  if (codes.value.length === 0) return
+  emit('apply', codes.value)
+  emit('close')
+}
+</script>
+
+<style scoped>
+.batch-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.batch-modal {
+  background: var(--klc-color-tag-bg-white);
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 10px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.15);
+  min-width: 360px;
+  max-width: 400px;
+  width: min(92vw, 400px);
+  max-height: min(600px, calc(100vh - 48px));
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.batch-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px 14px 20px;
+  background: var(--klc-color-background);
+  border-bottom: 1px solid var(--klc-color-grid-major);
+  flex-shrink: 0;
+}
+
+.batch-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--klc-color-foreground);
+  line-height: 1.35;
+}
+
+.batch-close-btn {
+  background: var(--klc-color-tag-bg-white);
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 7px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--klc-color-axis-text);
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+  padding: 0;
+}
+
+.batch-close-btn:hover {
+  background: var(--klc-color-tag-bg-hover);
+  color: var(--klc-color-foreground);
+  border-color: var(--klc-color-axis-line);
+}
+
+.batch-close-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.batch-body {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.batch-textarea {
+  width: 100%;
+  min-height: 160px;
+  padding: 10px 12px;
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 6px;
+  background: var(--klc-color-background);
+  color: var(--klc-color-foreground);
+  font-size: 13px;
+  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s;
+  box-sizing: border-box;
+}
+
+.batch-textarea:focus {
+  border-color: var(--klc-color-axis-text);
+}
+
+.batch-textarea::placeholder {
+  color: var(--klc-color-axis-text);
+  opacity: 0.5;
+}
+
+.batch-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  background: var(--klc-color-background);
+  border-top: 1px solid var(--klc-color-grid-major);
+  flex-shrink: 0;
+}
+
+.batch-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 68px;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s,
+    box-shadow 0.15s,
+    transform 0.15s;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.batch-btn--cancel {
+  background: transparent;
+  border-color: var(--klc-color-axis-line);
+  color: var(--klc-color-axis-text);
+}
+
+.batch-btn--cancel:hover {
+  background: var(--klc-color-tag-bg-hover);
+  color: var(--klc-color-foreground);
+  border-color: var(--klc-color-axis-text);
+}
+
+.batch-btn--confirm {
+  background: var(--klc-color-foreground);
+  border-color: var(--klc-color-foreground);
+  color: var(--klc-color-background);
+}
+
+.batch-btn--confirm:hover {
+  background: var(--klc-color-foreground);
+  border-color: var(--klc-color-foreground);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.batch-btn--confirm:active {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+.overlay-enter-active,
+.overlay-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.overlay-enter-from,
+.overlay-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active {
+  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.modal-leave-active {
+  transition: all 0.16s ease-in;
+}
+
+.modal-enter-from {
+  opacity: 0;
+  transform: scale(0.96) translateY(-10px);
+}
+
+.modal-leave-to {
+  opacity: 0;
+  transform: scale(0.98) translateY(8px);
+}
+
+@media (max-width: 480px) {
+  .batch-overlay {
+    padding: 12px;
+    align-items: flex-end;
+  }
+
+  .batch-modal {
+    min-width: 0;
+    width: 100%;
+    max-height: calc(100vh - 24px);
+    border-radius: 10px;
+  }
+
+  .batch-header,
+  .batch-body,
+  .batch-footer {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .batch-footer {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+}
+</style>

package/src/components/CompareSymbolSelector.vue

@@ -14,8 +14,16 @@
       <span v-if="comparisonLoading" class="compare-chip__spinner" />
       <span v-if="selected.length > 0" class="compare-chip__badge">{{ selected.length }}</span>
     </button>
-    <Transition name="symbol-popover">
-      <div v-if="showPopup" class="compare-popover" role="dialog" aria-label="比较商品">
+    <Teleport :to="teleportTarget">
+      <Transition name="symbol-popover">
+        <div
+          v-if="showPopup"
+          ref="popupRef"
+          class="compare-popover"
+          :style="popupStyle"
+          role="dialog"
+          aria-label="比较商品"
+        >
         <div class="compare-search">
           <span class="compare-search__icon" aria-hidden="true">
             <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
@@ -134,13 +142,16 @@
           </button>
         </div>
       </div>
-    </Transition>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import type { SymbolItem } from './SymbolSelector.vue'
+import { useTeleportedPopup } from '../composables/useTeleportedPopup'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
 
 const props = withDefaults(defineProps<{
   symbols: SymbolItem[]
@@ -160,6 +171,15 @@ const showPopup = ref(false)
 const searchQuery = ref('')
 const searchInputRef = ref<HTMLInputElement | null>(null)
 const rootRef = ref<HTMLElement | null>(null)
+const popupRef = ref<HTMLElement | null>(null)
+
+const teleportTarget = useFullscreenTeleportTarget()
+
+const { popupStyle, startPositionSync, stopPositionSync } = useTeleportedPopup(
+  rootRef,
+  popupRef,
+  8,
+)
 
 const selectedSet = computed(() => new Set(props.selected ?? []))
 
@@ -202,13 +222,23 @@ function togglePopup() {
   }
 }
 
+watch(showPopup, (val) => {
+  if (val) {
+    startPositionSync()
+  } else {
+    stopPositionSync()
+  }
+})
+
 function clearSearch() {
   searchQuery.value = ''
   searchInputRef.value?.focus()
 }
 
 function onDocumentClick(e: MouseEvent) {
-  if (rootRef.value && !rootRef.value.contains(e.target as Node)) {
+  const root = rootRef.value
+  const popup = popupRef.value
+  if (root && !root.contains(e.target as Node) && !popup?.contains(e.target as Node)) {
     showPopup.value = false
     searchQuery.value = ''
   }
@@ -302,9 +332,6 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onDocumentClick)
 }
 
 .compare-popover {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
   z-index: 20;
   width: min(360px, calc(100vw - 24px));
   padding: 14px;

package/src/components/Dropdown.vue

@@ -19,20 +19,29 @@
       <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)"
+    <Teleport :to="teleportTarget">
+      <div
+        v-if="isOpen"
+        ref="menuRef"
+        class="dropdown__menu"
+        :style="menuStyle"
+        role="listbox"
+        tabindex="-1"
       >
-        {{ option.label }}
-      </button>
-    </div>
+        <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>
+    </Teleport>
   </div>
 </template>
 
@@ -44,6 +53,8 @@ let dropdownIdSeed = 0
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref } from 'vue'
+import { useTeleportedPopup } from '../composables/useTeleportedPopup'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
 
 export interface DropdownOption<T extends string = string> {
   label: string
@@ -71,10 +82,19 @@ const emit = defineEmits<{
 
 const rootRef = ref<HTMLElement | null>(null)
 const triggerRef = ref<HTMLElement | null>(null)
+const menuRef = ref<HTMLElement | null>(null)
 const isOpen = ref(false)
 const menuWidth = ref(0)
 const dropdownId = ++dropdownIdSeed
 
+const teleportTarget = useFullscreenTeleportTarget()
+
+const { popupStyle, startPositionSync, stopPositionSync } = useTeleportedPopup(
+  triggerRef,
+  menuRef,
+  4,
+)
+
 const triggerStyle = computed(() => {
   if (props.minWidth) return { minWidth: props.minWidth }
   return {}
@@ -83,7 +103,11 @@ const triggerStyle = computed(() => {
 const menuStyle = computed(() => {
   if (!isOpen.value) return undefined
   const w = menuWidth.value || (props.minWidth ? parseInt(props.minWidth) : 0)
-  return { width: w ? `${w}px` : undefined }
+  return {
+    width: w ? `${w}px` : undefined,
+    zIndex: 1010,
+    ...popupStyle.value,
+  }
 })
 
 const selectedValue = computed(() => {
@@ -107,6 +131,7 @@ function open() {
   activeDropdownClose = close
   menuWidth.value = triggerRef.value?.offsetWidth ?? 0
   isOpen.value = true
+  startPositionSync()
   document.addEventListener('pointerdown', handleDocumentPointerDown)
 }
 
@@ -117,6 +142,7 @@ function close() {
     activeDropdownId = 0
     activeDropdownClose = null
   }
+  stopPositionSync()
   document.removeEventListener('pointerdown', handleDocumentPointerDown)
 }
 
@@ -135,7 +161,8 @@ function selectOption(value: string) {
 
 function handleDocumentPointerDown(event: PointerEvent) {
   const root = rootRef.value
-  if (root && !root.contains(event.target as Node | null)) {
+  const menu = menuRef.value
+  if (root && !root.contains(event.target as Node | null) && !menu?.contains(event.target as Node | null)) {
     close()
   }
 }
@@ -219,10 +246,6 @@ onBeforeUnmount(close)
 }
 
 .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;