@363045841yyt/klinechart 0.8.3 → 0.8.4

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;;;;;;;;;;;;;;aAUo0zC,CAAC;kBAAyB,CAAC;;;;;iBAAsH,CAAC;gBAAc,CAAC;;;iBAAuD,CAAC;gBAAc,CAAC;;qBAAgC,CAAC;;EARlm0C,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.4",
   "description": "Vue 3 bindings for @363045841yyt/klinechart-core. Idiomatic composables, SFC components.",
   "license": "MIT",
   "repository": {

package/src/components/IndicatorSelector.vue

@@ -219,6 +219,8 @@ import {
   allIndicators,
   findIndicator,
   type Indicator,
+  loadBuiltinIndicators,
+  isBuiltinIndicatorsLoaded,
 } from '@363045841yyt/klinechart-core/controllers'
 
 const props = defineProps<{
@@ -233,7 +235,7 @@ const emit = defineEmits<{
 }>()
 
 // ── 将 Indicator[] 转换为 IndicatorDefinition[] ──
-function toIndicatorDefinitions(source: typeof allIndicators): IndicatorDefinition[] {
+function toIndicatorDefinitions(source: Indicator[]): IndicatorDefinition[] {
   return source.map((i) => ({
     id: i.id,
     label: i.label,
@@ -253,9 +255,7 @@ function toIndicatorDefinitions(source: typeof allIndicators): IndicatorDefiniti
 }
 
 // ── Controller ──
-const controller = createIndicatorSelectorController({
-  catalog: toIndicatorDefinitions(allIndicators),
-})
+const controller = createIndicatorSelectorController()
 
 // ── 从 Controller Signal 桥接的 Vue 响应式状态 ──
 const menuOpen = coreSignalToVueRef(controller.menuOpen)
@@ -267,7 +267,15 @@ const hasSearchResults = computed(
   () => filteredMain.value.length > 0 || filteredSub.value.length > 0,
 )
 
-const catalogLen = controller.catalog.peek().length
+const catalog = coreSignalToVueRef(controller.catalog)
+const catalogLen = computed(() => catalog.value.length)
+
+onMounted(async () => {
+  if (!isBuiltinIndicatorsLoaded()) {
+    await loadBuiltinIndicators()
+  }
+  controller.catalog.set(toIndicatorDefinitions(allIndicators()))
+})
 
 // ── 本地 UI 状态（非 Controller 管理的纯 UI 状态） ──
 const paramsVisible = ref(false)

package/src/components/KLineChart.vue

@@ -894,7 +894,7 @@ function initChart(
   canvasLayer: HTMLDivElement,
   rightAxisLayer: HTMLDivElement,
   xAxisCanvas: HTMLCanvasElement,
-): ChartController {
+): Promise<ChartController> {
   const ctrl = createChartController({
     container,
     data: [],
@@ -1096,7 +1096,7 @@ function setupSemanticController(ctrl: ChartController): void {
   // })
 }
 
-onMounted(() => {
+onMounted(async () => {
   useAnchorPositioning.value = false
 
   const container = containerRef.value
@@ -1111,7 +1111,8 @@ onMounted(() => {
   const canvasLayer = container.querySelector<HTMLDivElement>('.canvas-layer')
   const xAxisCanvas = container.querySelector<HTMLCanvasElement>('.x-axis-canvas')
   const rightAxisLayer = chartMain.querySelector<HTMLDivElement>('.right-axis-host')
-  const ctrl = initChart(container, canvasLayer!, rightAxisLayer!, xAxisCanvas!)
+  const ctrl = await initChart(container, canvasLayer!, rightAxisLayer!, xAxisCanvas!)
+  if (!containerRef.value || !chartMainRef.value) return // 组件已卸载
   controller.value = ctrl
 
   // 3) 信号回调

package/src/index.ts

@@ -88,7 +88,7 @@ export function __setControllerFactory(
  *
  * Throws if container is null/undefined (SSR-safe guard).
  */
-export function createChart(opts: ChartMountOptions): ChartController {
+export function createChart(opts: ChartMountOptions): ChartController | Promise<ChartController> {
     if (opts.container == null) {
         throw new Error(
             '[@363045841yyt/klinechart] createChart: `container` is required and must be a non-null HTMLElement',
@@ -147,10 +147,24 @@ export function useChart(
     opts: Omit<ChartMountOptions, 'container'>,
 ): { chart: Ref<ChartController | null> } {
     const chart = shallowRef<ChartController | null>(null)
+    let disposed = false
 
     const mountIfReady = (el: HTMLElement | null): void => {
         if (el == null || chart.value != null) return
-        chart.value = createChart({ ...opts, container: el })
+        const created = createChart({ ...opts, container: el })
+        const applyController = (ctrl: ChartController): void => {
+            if (disposed) {
+                ctrl.dispose()
+                return
+            }
+            chart.value = ctrl
+        }
+
+        if (typeof (created as Promise<ChartController>).then === 'function') {
+            ;(created as Promise<ChartController>).then(applyController)
+        } else {
+            applyController(created as ChartController)
+        }
     }
 
     // Mount synchronously if the ref is already populated (e.g. SFC where the
@@ -167,6 +181,7 @@ export function useChart(
     )
 
     const dispose = (): void => {
+        disposed = true
         stopWatch()
         const ctrl = chart.value
         if (ctrl != null) {
@@ -359,29 +374,40 @@ export const KLineChart = defineComponent({
         const scope = effectScope()
 
         const chart = shallowRef<ChartController | null>(null)
+        let mounted = true
+
+        const applyController = (ctrl: ChartController): void => {
+            if (!mounted) {
+                ctrl.dispose()
+                return
+            }
+            chart.value = ctrl
+            emit('ready', ctrl)
+            // Bridge viewport changes back out as zoomLevelChange.
+            const emitViewport = (): void => {
+                const vp = ctrl.viewport.peek()
+                emit('zoomLevelChange', vp.zoomLevel, vp.kWidth)
+            }
+            emitViewport()
+            const unsub = ctrl.viewport.subscribe(emitViewport)
+            onScopeDispose(unsub)
+        }
 
         onMounted(() => {
             const el = containerRef.value
             if (el == null) return
             scope.run(() => {
-                chart.value = createChart({
+                const created = createChart({
                     container: el,
                     data: props.data,
                     initialZoomLevel: props.initialZoomLevel,
                     zoomLevels: props.zoomLevels,
                     theme: props.theme,
                 })
-                if (chart.value != null) {
-                    emit('ready', chart.value)
-                    // Bridge viewport changes back out as zoomLevelChange.
-                    const ctrl = chart.value
-                    const emitViewport = (): void => {
-                        const vp = ctrl.viewport.peek()
-                        emit('zoomLevelChange', vp.zoomLevel, vp.kWidth)
-                    }
-                    emitViewport()
-                    const unsub = ctrl.viewport.subscribe(emitViewport)
-                    onScopeDispose(unsub)
+                if (typeof (created as Promise<ChartController>).then === 'function') {
+                    ;(created as Promise<ChartController>).then(applyController)
+                } else {
+                    applyController(created as ChartController)
                 }
             })
 
@@ -401,6 +427,7 @@ export const KLineChart = defineComponent({
         })
 
         onUnmounted(() => {
+            mounted = false
             chart.value?.dispose()
             chart.value = null
             scope.stop()