@363045841yyt/klinechart 0.7.4 → 0.7.5

package/src/components/MarkerTooltip.vue

@@ -1,155 +1,155 @@
-<template>
-  <div
-    v-if="marker"
-    :ref="onRef"
-    class="marker-tooltip"
-    :class="[{ 'use-anchor': useAnchor }, anchorPlacementClass]"
-    :style="useAnchor ? undefined : { left: `${pos.x + 12}px`, top: `${pos.y + 12}px` }"
-  >
-    <div class="marker-tooltip__title">{{ title }}</div>
-    <div v-if="hasMetadata" class="marker-tooltip__content">
-      <div v-for="(value, key) in metadata" :key="key" class="row">
-        <span>{{ key }}</span>
-        <span>{{ formatValue(value) }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { ComponentPublicInstance } from 'vue'
-
-interface MarkerEntity {
-  markerType: string
-  metadata: Record<string, unknown>
-}
-
-interface CustomMarkerEntity {
-  date: string
-  shape: string
-  label?: { text: string }
-  metadata: Record<string, unknown>
-}
-
-const MARKER_TYPE_LABELS: Record<string, string> = {
-  support: '支撑位',
-  resistance: '阻力位',
-  top: '顶部',
-  bottom: '底部',
-}
-
-const props = defineProps<{
-  marker: MarkerEntity | CustomMarkerEntity | null
-  pos: { x: number; y: number }
-  useAnchor?: boolean
-  anchorPlacement?: 'right-bottom' | 'left-bottom'
-  setEl?: (el: HTMLDivElement | null) => void
-}>()
-
-const useAnchor = computed(() => props.useAnchor === true)
-const anchorPlacementClass = computed(() =>
-  props.anchorPlacement === 'left-bottom' ? 'anchor-left-bottom' : 'anchor-right-bottom',
-)
-
-function onRef(el: Element | ComponentPublicInstance | null) {
-  props.setEl?.(el as HTMLDivElement | null)
-}
-
-const isCustomMarker = computed(() => {
-  return props.marker && 'date' in props.marker
-})
-
-const title = computed(() => {
-  if (!props.marker) return ''
-  if (isCustomMarker.value) {
-    const custom = props.marker as CustomMarkerEntity
-    return custom.label?.text || custom.shape
-  }
-  const standard = props.marker as MarkerEntity
-  return MARKER_TYPE_LABELS[standard.markerType] || standard.markerType
-})
-
-const metadata = computed(() => {
-  if (!props.marker) return {}
-  if (isCustomMarker.value) {
-    const custom = props.marker as CustomMarkerEntity
-    return {
-      日期: custom.date,
-      ...custom.metadata,
-    }
-  }
-  return (props.marker as MarkerEntity).metadata
-})
-
-const hasMetadata = computed(() => {
-  return Object.keys(metadata.value).length > 0
-})
-
-function formatValue(value: unknown): string {
-  if (typeof value === 'number') {
-    return value.toFixed(2)
-  }
-  return String(value)
-}
-</script>
-
-<style scoped>
-.marker-tooltip {
-  position: absolute;
-  z-index: 10;
-  min-width: 180px;
-  max-width: 260px;
-  padding: 10px 12px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.92);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.78);
-  font-size: 12px;
-  line-height: 1.4;
-  pointer-events: none;
-  backdrop-filter: blur(6px);
-}
-
-.marker-tooltip__title {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
-.marker-tooltip__content {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 2px;
-}
-
-.marker-tooltip__content .row {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.marker-tooltip__content .row span:first-child {
-  color: rgba(0, 0, 0, 0.56);
-}
-
-@supports (anchor-name: --kmap-anchor) and (position-anchor: --kmap-anchor) {
-  .marker-tooltip.use-anchor {
-    position: absolute;
-    position-anchor: --marker-tooltip-anchor;
-    left: anchor(left);
-    top: anchor(top);
-  }
-
-  .marker-tooltip.use-anchor.anchor-right-bottom {
-    transform: translate(12px, 12px);
-  }
-
-  .marker-tooltip.use-anchor.anchor-left-bottom {
-    transform: translate(calc(-100% - 12px), 12px);
-  }
-}
-</style>
+<template>
+  <div
+    v-if="marker"
+    :ref="onRef"
+    class="marker-tooltip"
+    :class="[{ 'use-anchor': useAnchor }, anchorPlacementClass]"
+    :style="useAnchor ? undefined : { left: `${pos.x + 12}px`, top: `${pos.y + 12}px` }"
+  >
+    <div class="marker-tooltip__title">{{ title }}</div>
+    <div v-if="hasMetadata" class="marker-tooltip__content">
+      <div v-for="(value, key) in metadata" :key="key" class="row">
+        <span>{{ key }}</span>
+        <span>{{ formatValue(value) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
+interface MarkerEntity {
+  markerType: string
+  metadata: Record<string, unknown>
+}
+
+interface CustomMarkerEntity {
+  date: string
+  shape: string
+  label?: { text: string }
+  metadata: Record<string, unknown>
+}
+
+const MARKER_TYPE_LABELS: Record<string, string> = {
+  support: '支撑位',
+  resistance: '阻力位',
+  top: '顶部',
+  bottom: '底部',
+}
+
+const props = defineProps<{
+  marker: MarkerEntity | CustomMarkerEntity | null
+  pos: { x: number; y: number }
+  useAnchor?: boolean
+  anchorPlacement?: 'right-bottom' | 'left-bottom'
+  setEl?: (el: HTMLDivElement | null) => void
+}>()
+
+const useAnchor = computed(() => props.useAnchor === true)
+const anchorPlacementClass = computed(() =>
+  props.anchorPlacement === 'left-bottom' ? 'anchor-left-bottom' : 'anchor-right-bottom',
+)
+
+function onRef(el: Element | ComponentPublicInstance | null) {
+  props.setEl?.(el as HTMLDivElement | null)
+}
+
+const isCustomMarker = computed(() => {
+  return props.marker && 'date' in props.marker
+})
+
+const title = computed(() => {
+  if (!props.marker) return ''
+  if (isCustomMarker.value) {
+    const custom = props.marker as CustomMarkerEntity
+    return custom.label?.text || custom.shape
+  }
+  const standard = props.marker as MarkerEntity
+  return MARKER_TYPE_LABELS[standard.markerType] || standard.markerType
+})
+
+const metadata = computed(() => {
+  if (!props.marker) return {}
+  if (isCustomMarker.value) {
+    const custom = props.marker as CustomMarkerEntity
+    return {
+      日期: custom.date,
+      ...custom.metadata,
+    }
+  }
+  return (props.marker as MarkerEntity).metadata
+})
+
+const hasMetadata = computed(() => {
+  return Object.keys(metadata.value).length > 0
+})
+
+function formatValue(value: unknown): string {
+  if (typeof value === 'number') {
+    return value.toFixed(2)
+  }
+  return String(value)
+}
+</script>
+
+<style scoped>
+.marker-tooltip {
+  position: absolute;
+  z-index: 10;
+  min-width: 180px;
+  max-width: 260px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.78);
+  font-size: 12px;
+  line-height: 1.4;
+  pointer-events: none;
+  backdrop-filter: blur(6px);
+}
+
+.marker-tooltip__title {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.marker-tooltip__content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2px;
+}
+
+.marker-tooltip__content .row {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.marker-tooltip__content .row span:first-child {
+  color: rgba(0, 0, 0, 0.56);
+}
+
+@supports (anchor-name: --kmap-anchor) and (position-anchor: --kmap-anchor) {
+  .marker-tooltip.use-anchor {
+    position: absolute;
+    position-anchor: --marker-tooltip-anchor;
+    left: anchor(left);
+    top: anchor(top);
+  }
+
+  .marker-tooltip.use-anchor.anchor-right-bottom {
+    transform: translate(12px, 12px);
+  }
+
+  .marker-tooltip.use-anchor.anchor-left-bottom {
+    transform: translate(calc(-100% - 12px), 12px);
+  }
+}
+</style>

package/src/components/index.ts

@@ -1,7 +1,7 @@
-export { default as DrawingStyleToolbar } from './DrawingStyleToolbar.vue'
-export { default as IndicatorParams } from './IndicatorParams.vue'
-export { default as IndicatorSelector } from './IndicatorSelector.vue'
-export { default as KLineChartVue } from './KLineChart.vue'
-export { default as KLineTooltip } from './KLineTooltip.vue'
-export { default as LeftToolbar } from './LeftToolbar.vue'
-export { default as MarkerTooltip } from './MarkerTooltip.vue'
+export { default as DrawingStyleToolbar } from './DrawingStyleToolbar.vue'
+export { default as IndicatorParams } from './IndicatorParams.vue'
+export { default as IndicatorSelector } from './IndicatorSelector.vue'
+export { default as KLineChartVue } from './KLineChart.vue'
+export { default as KLineTooltip } from './KLineTooltip.vue'
+export { default as LeftToolbar } from './LeftToolbar.vue'
+export { default as MarkerTooltip } from './MarkerTooltip.vue'

package/src/composables/useFullscreenTeleportTarget.ts

@@ -1,18 +1,18 @@
-import { inject, provide, computed, type Ref, type InjectionKey } from 'vue'
-
-const FULLSCREEN_TARGET_KEY: InjectionKey<Ref<HTMLElement | null>> =
-  Symbol('fullscreen-teleport-target')
-
-export function provideFullscreenTeleportTarget(targetRef: Ref<HTMLElement | null>): void {
-  provide(FULLSCREEN_TARGET_KEY, targetRef)
-}
-
-export function useFullscreenTeleportTarget() {
-  // null = no provider in ancestor tree (degraded scenario)
-  const targetRef = inject(FULLSCREEN_TARGET_KEY, null)
-
-  return computed<HTMLElement | string>(() => {
-    // targetRef null → no provider; targetRef.value null → container not mounted yet
-    return targetRef?.value ?? 'body'
-  })
-}
+import { inject, provide, computed, type Ref, type InjectionKey } from 'vue'
+
+const FULLSCREEN_TARGET_KEY: InjectionKey<Ref<HTMLElement | null>> =
+  Symbol('fullscreen-teleport-target')
+
+export function provideFullscreenTeleportTarget(targetRef: Ref<HTMLElement | null>): void {
+  provide(FULLSCREEN_TARGET_KEY, targetRef)
+}
+
+export function useFullscreenTeleportTarget() {
+  // null = no provider in ancestor tree (degraded scenario)
+  const targetRef = inject(FULLSCREEN_TARGET_KEY, null)
+
+  return computed<HTMLElement | string>(() => {
+    // targetRef null → no provider; targetRef.value null → container not mounted yet
+    return targetRef?.value ?? 'body'
+  })
+}