@363045841yyt/klinechart 0.7.5-alpha.2 → 0.7.6

package/src/components/KLineTooltip.vue

@@ -70,7 +70,7 @@ export interface KLineData {
 const props = defineProps<{
   k: KLineData | null
   index: number | null
-  data: KLineData[]
+  data: ReadonlyArray<KLineData>
   pos: { x: number; y: number }
   useAnchor?: boolean
   anchorPlacement?: 'right-bottom' | 'left-bottom'
@@ -109,7 +109,7 @@ const UP_COLOR = '#ef4444'
 const DOWN_COLOR = '#22c55e'
 const NEUTRAL_COLOR = '#6b7280'
 
-function calcDirection(k: KLineData, data: KLineData[], idx: number | null): number {
+function calcDirection(k: KLineData, data: ReadonlyArray<KLineData>, idx: number | null): number {
   if (k.close >= k.open) return 1
   const prev = typeof idx === 'number' && idx > 0 ? data[idx - 1] : undefined
   if (prev && k.close > prev.close) return 1

package/src/components/MarkerTooltip.vue

@@ -19,18 +19,7 @@
 <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>
-}
+import type { MarkerEntity, CustomMarkerEntity } from '@363045841yyt/klinechart-core/engine/marker/registry'
 
 const MARKER_TYPE_LABELS: Record<string, string> = {
   support: '支撑位',

package/src/composables/useFullscreenTeleportTarget.ts

@@ -8,11 +8,9 @@ export function provideFullscreenTeleportTarget(targetRef: Ref<HTMLElement | nul
 }
 
 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'
   })
 }

package/src/index.ts

@@ -29,10 +29,14 @@ import type {
     ChartControllerFactory,
     ChartMountOptions,
     ChartViewport,
+    IndicatorDefinition,
     IndicatorInstance,
     InteractionSnapshot,
     KLineData,
 } from '@363045841yyt/klinechart-core'
+import {
+    createIndicatorSelectorController,
+} from '@363045841yyt/klinechart-core'
 
 export type {
     ChartController,
@@ -252,6 +256,74 @@ export function useViewport(
     return vp
 }
 
+// ---------------------------------------------------------------------------
+// useIndicatorSelector — composable
+// ---------------------------------------------------------------------------
+
+/**
+ * Bridge the indicator selector signals into Vue refs.
+ *
+ * Creates an internal IndicatorSelectorController for menu/search/filter UI
+ * state (catalog from `controller.catalog`), and delegates add/remove to the
+ * ChartController engine methods.
+ */
+export function useIndicatorSelector(controller: ChartController): {
+    catalog: ReadonlyArray<IndicatorDefinition>
+    filteredMain: Ref<ReadonlyArray<IndicatorDefinition>>
+    filteredSub: Ref<ReadonlyArray<IndicatorDefinition>>
+    menuOpen: Ref<boolean>
+    searchQuery: Ref<string>
+    add: (definitionId: string) => string | null
+    remove: (instanceId: string) => boolean
+    openMenu: () => void
+    closeMenu: () => void
+    toggleMenu: () => void
+    setSearchQuery: (q: string) => void
+    isActive: (definitionId: string) => boolean
+} {
+    const selector = createIndicatorSelectorController({
+        catalog: controller.catalog,
+    })
+
+    onScopeDispose(() => selector.dispose())
+
+    const filteredMain = coreSignalToVueRef(selector.filteredMain)
+    const filteredSub = coreSignalToVueRef(selector.filteredSub)
+    const menuOpen = coreSignalToVueRef(selector.menuOpen)
+    const searchQuery = coreSignalToVueRef(selector.searchQuery)
+
+    function add(definitionId: string): string | null {
+        const def = controller.catalog.find((d) => d.id === definitionId)
+        if (def === undefined) return null
+        return controller.addIndicator(definitionId, def.role)
+    }
+
+    function remove(instanceId: string): boolean {
+        return controller.removeIndicator(instanceId)
+    }
+
+    function isActive(definitionId: string): boolean {
+        return controller.indicators
+            .peek()
+            .some((i) => i.definitionId === definitionId)
+    }
+
+    return {
+        catalog: controller.catalog,
+        filteredMain,
+        filteredSub,
+        menuOpen,
+        searchQuery,
+        add,
+        remove,
+        openMenu: () => selector.openMenu(),
+        closeMenu: () => selector.closeMenu(),
+        toggleMenu: () => selector.toggleMenu(),
+        setSearchQuery: (q: string) => selector.setSearchQuery(q),
+        isActive,
+    }
+}
+
 // ---------------------------------------------------------------------------
 // <KLineChart /> SFC-equivalent component
 //

package/src/web-component.ts

@@ -0,0 +1,14 @@
+import { defineCustomElement } from 'vue'
+import KLineChartVue from './components/KLineChart.vue'
+import type { SemanticChartConfig, DataFetcher } from '@363045841yyt/klinechart-core/semantic'
+
+const KLineChartElement = defineCustomElement(KLineChartVue, {
+  shadowRoot: true,
+})
+
+customElements.define('kline-chart', KLineChartElement)
+
+export { KLineChartElement }
+export default KLineChartElement
+
+export type { SemanticChartConfig, DataFetcher }