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

package/dist/version.d.ts

@@ -1,3 +1,3 @@
 export declare const VERSION: string;
-export { VERSION as CORE_VERSION } from '../../core/src';
+export { VERSION as CORE_VERSION } from '@363045841yyt/klinechart-core';
 //# sourceMappingURL=version.d.ts.map

package/dist/web-component.d.ts

@@ -0,0 +1,18 @@
+import { SemanticChartConfig, DataFetcher } from '@363045841yyt/klinechart-core/semantic';
+declare const KLineChartElement: import('vue').VueElementConstructor<{
+    semanticConfig: SemanticChartConfig;
+    dataFetcher: DataFetcher;
+    yPaddingPx?: number;
+    minKWidth?: number;
+    maxKWidth?: number;
+    rightAxisWidth?: number;
+    bottomAxisHeight?: number;
+    priceLabelWidth?: number;
+    zoomLevels?: number;
+    initialZoomLevel?: number;
+    isFullscreen?: boolean;
+}>;
+export { KLineChartElement };
+export default KLineChartElement;
+export type { SemanticChartConfig, DataFetcher };
+//# sourceMappingURL=web-component.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;;EAErB,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.7.5-alpha.2",
+  "version": "0.7.6",
   "description": "Vue 3 bindings for @363045841yyt/klinechart-core. Idiomatic composables, SFC components.",
   "license": "MIT",
   "repository": {
@@ -28,6 +28,11 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./web-component": {
+      "import": {
+        "default": "./dist/kline-chart.js"
+      }
+    },
     "./style.css": "./dist/klinechart.css"
   },
   "files": [
@@ -39,7 +44,8 @@
   },
   "scripts": {
     "dev": "vite --config preview/vite.config.ts",
-    "build": "vite build && node -e \"require('fs').copyFileSync('dist/index.d.ts','dist/index.d.cts')\"",
+    "build": "vite build",
+    "build:wc": "cross-env BUILD_TARGET=web-component vite build",
     "postbuild": "node -e \"require('fs').copyFileSync('dist/index.d.ts','dist/index.d.cts')\"",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -69,6 +75,7 @@
     "@size-limit/preset-small-lib": "^12.1.0",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/test-utils": "^2.4.10",
+    "cross-env": "^7.0.3",
     "jsdom": "^29.1.1",
     "publint": "^0.3.0",
     "size-limit": "^12.1.0",
@@ -76,6 +83,7 @@
     "unplugin-icons": "^23.0.1",
     "vite": "^8.0.14",
     "vite-plugin-babel": "^1.3.2",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
     "vite-plugin-dts": "^5.0.1",
     "vitest": "^4.1.5",
     "vue": "^3.5.0"

package/src/__tests__/_mockController.ts

@@ -20,13 +20,14 @@ import type {
     IndicatorDefinition,
     IndicatorSelectorController,
     KLineData,
+    PaneSpec,
     ToolbarController,
     ToolDefinition,
     ToolId,
 } from '@363045841yyt/klinechart-core'
 
 // ---------------------------------------------------------------------------
-// Inline mini-signal �?Object.is-equality, sync notify. Drop-in compatible
+// Inline mini-signal �?Object.is-equality, sync notify. Drop-in compatible
 // with `@363045841yyt/klinechart-core/reactivity` for shape-only test purposes.
 // ---------------------------------------------------------------------------
 
@@ -132,6 +133,7 @@ export function createMockChartController(
     })
     const data = createSignal<ReadonlyArray<KLineData>>(opts.data ?? [])
     const theme = createSignal<'light' | 'dark'>(opts.theme ?? 'light')
+    const paneLayout = createSignal<ReadonlyArray<PaneSpec>>([])
     const indicatorSelector = createMockIndicatorSelector()
     const toolbar = createMockToolbar()
     const drawing = createMockDrawing()
@@ -140,12 +142,15 @@ export function createMockChartController(
         viewport,
         data,
         theme,
+        paneLayout,
         indicatorSelector,
         toolbar,
         drawing,
         setData: (next) => data.set(next),
         appendData: (next) => data.set([...data.peek(), ...next]),
         updateData: (next) => data.set(next),
+        getData: () => data.peek(),
+        getZoomLevelCount: () => 10,
         setTheme: (next) => theme.set(next),
         zoomToLevel: (level) =>
             viewport.set({ ...viewport.peek(), zoomLevel: level }),
@@ -167,12 +172,17 @@ export function createMockChartController(
         removeIndicator: () => false,
         updateIndicatorParams: () => false,
         updateRendererConfig: () => {},
+        setTooltipSize: () => {},
+        setTooltipAnchorPositioning: () => {},
+        getIndicatorTitle: () => undefined,
         setDrawingTool: (tool) => drawing.setActiveTool(tool),
         clearDrawings: () => drawing.clearAll(),
         removeDrawing: () => {},
         resizeSubPane: () => false,
         createSubPane: () => false,
         clearSubPanes: () => {},
+        replaceSubPaneIndicator: () => false,
+        updatePaneLayout: (_panes: PaneSpec[]) => {},
         updateCustomMarkers: () => {},
         clearCustomMarkers: () => {},
         updateSettingsFacade: () => {},

package/src/components/DrawingStyleToolbar.vue

@@ -50,20 +50,7 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
-
-export interface DrawingStyle {
-  stroke?: string
-  strokeWidth?: number
-  strokeStyle?: 'solid' | 'dashed' | 'dotted'
-  fill?: string
-}
-
-export interface DrawingObject {
-  id: string
-  type: string
-  points: { x: number; y: number }[]
-  style: DrawingStyle
-}
+import type { DrawingObject, DrawingStyle } from '@363045841yyt/klinechart-core/plugin'
 
 const props = defineProps<{
   drawing: DrawingObject

package/src/components/IndicatorParams.vue

@@ -117,6 +117,7 @@
 
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
 
 export interface ParamConfig {
   key: string
@@ -146,7 +147,7 @@ const emit = defineEmits<{
 const localValues = ref<Record<string, number>>({ ...props.values })
 const showDescription = ref(true)
 
-const teleportTarget = computed(() => 'body')
+const teleportTarget = useFullscreenTeleportTarget()
 
 watch(
   () => props.values,

package/src/components/IndicatorSelector.vue

@@ -74,7 +74,7 @@
 
         <!-- 添加按钮 -->
         <div class="indicator-item">
-          <button ref="addBtnRef" class="add-btn" @click="toggleAddMenu" title="添加指标">
+          <button ref="addBtnRef" class="add-btn" @click.stop="controller.toggleMenu()" title="添加指标">
             <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
               <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
             </svg>
@@ -86,14 +86,14 @@
     <!-- 添加指标弹窗 -->
     <Teleport :to="teleportTarget">
       <Transition name="overlay">
-        <div v-if="showAddMenu" class="selector-overlay" @click="closeAddMenu">
+        <div v-if="menuOpen" class="selector-overlay" @click="controller.closeMenu()">
           <Transition name="modal">
-            <div v-if="showAddMenu" class="selector-modal" @click.stop>
+            <div v-if="menuOpen" class="selector-modal" @click.stop>
               <!-- 弹窗头部 -->
               <div class="modal-header">
                 <div class="header-title">
                   <span class="title-text">添加指标</span>
-                  <span class="title-sub">{{ totalIndicatorsCount }} 个可用指标</span>
+                  <span class="title-sub">{{ catalogLen }} 个可用指标</span>
                 </div>
                 <div class="header-actions">
                   <button
@@ -117,7 +117,7 @@
                       />
                     </svg>
                   </button>
-                  <button class="modal-close" @click="closeAddMenu" title="关闭">
+                  <button class="modal-close" @click="controller.closeMenu()" title="关闭">
                     <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
                       <path
                         d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
@@ -143,21 +143,21 @@
                     />
                   </svg>
                   <input
-                    v-model="searchQuery"
+                    :value="searchQuery" @input="controller.setSearchQuery(($event.target as HTMLInputElement).value)"
                     type="text"
                     class="search-input"
                     placeholder="搜索指标名称..."
                   />
                 </div>
                 <!-- 主图指标区域 -->
-                <div v-if="filteredMainIndicators.length > 0" class="indicator-section">
+                <div v-if="filteredMain.length > 0" class="indicator-section">
                   <div class="section-header">
                     <span class="section-title">主图指标</span>
-                    <span class="section-count">{{ filteredMainIndicators.length }}</span>
+                    <span class="section-count">{{ filteredMain.length }}</span>
                   </div>
                   <div class="indicator-grid" :class="{ compact: isCompactView }">
                     <button
-                      v-for="indicator in filteredMainIndicators"
+                      v-for="indicator in filteredMain"
                       :key="indicator.id"
                       class="indicator-card"
                       :class="{ active: isActive(indicator.id), compact: isCompactView }"
@@ -197,7 +197,7 @@
 
                 <!-- 分隔线 -->
                 <div
-                  v-if="filteredMainIndicators.length > 0 && filteredSubIndicators.length > 0"
+                  v-if="filteredMain.length > 0 && filteredSub.length > 0"
                   class="section-divider"
                 ></div>
 
@@ -213,14 +213,14 @@
                 </div>
 
                 <!-- 副图指标区域 -->
-                <div v-if="filteredSubIndicators.length > 0" class="indicator-section">
+                <div v-if="filteredSub.length > 0" class="indicator-section">
                   <div class="section-header">
                     <span class="section-title">副图指标</span>
-                    <span class="section-count">{{ filteredSubIndicators.length }}</span>
+                    <span class="section-count">{{ filteredSub.length }}</span>
                   </div>
                   <div class="indicator-grid" :class="{ compact: isCompactView }">
                     <button
-                      v-for="indicator in filteredSubIndicators"
+                      v-for="indicator in filteredSub"
                       :key="indicator.id"
                       class="indicator-card"
                       :class="{ active: isActive(indicator.id), compact: isCompactView }"
@@ -264,7 +264,7 @@
                 <div class="footer-info">
                   <span class="info-text">已激活 {{ activeCount }} 个指标</span>
                 </div>
-                <button class="btn btn-confirm" @click="closeAddMenu">确认</button>
+                <button class="btn btn-confirm" @click="controller.closeMenu()">确认</button>
               </div>
             </div>
           </Transition>
@@ -291,13 +291,15 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import IndicatorParams from './IndicatorParams.vue'
 import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
+import { coreSignalToVueRef } from '../index'
 import {
-  mainIndicators,
-  subIndicators,
+  createIndicatorSelectorController,
+  type IndicatorDefinition,
+  allIndicators,
   findIndicator,
   isSubIndicatorId,
-} from '@363045841yyt/klinechart-core/engine/renderers/Indicator/indicatorData'
-import type { Indicator } from '@363045841yyt/klinechart-core/engine/renderers/Indicator/indicatorData'
+  type Indicator,
+} from '@363045841yyt/klinechart-core/controllers'
 
 const props = defineProps<{
   activeIndicators?: string[]
@@ -310,15 +312,51 @@ const emit = defineEmits<{
   reorderSubIndicators: [orderedIndicatorIds: string[]]
 }>()
 
+// ── 将 Indicator[] 转换为 IndicatorDefinition[] ──
+function toIndicatorDefinitions(source: typeof allIndicators): IndicatorDefinition[] {
+  return source.map((i) => ({
+    id: i.id,
+    label: i.label,
+    name: i.name,
+    description: i.description,
+    role: i.pane,
+    params: (i.params ?? []).map((p) => ({
+      key: p.key,
+      label: p.label,
+      type: p.type,
+      default: p.default ?? (p.type === 'number' ? 0 : ''),
+      min: p.min,
+      max: p.max,
+      step: p.step,
+    })),
+  }))
+}
+
+// ── Controller ──
+const controller = createIndicatorSelectorController({
+  catalog: toIndicatorDefinitions(allIndicators),
+})
+
+// ── 从 Controller Signal 桥接的 Vue 响应式状态 ──
+const menuOpen = coreSignalToVueRef(controller.menuOpen)
+const searchQuery = coreSignalToVueRef(controller.searchQuery)
+const filteredMain = coreSignalToVueRef(controller.filteredMain)
+const filteredSub = coreSignalToVueRef(controller.filteredSub)
+
+const hasSearchResults = computed(
+  () => filteredMain.value.length > 0 || filteredSub.value.length > 0,
+)
+
+const catalogLen = controller.catalog.peek().length
+
+// ── 本地 UI 状态（非 Controller 管理的纯 UI 状态） ──
 const addBtnRef = ref<HTMLButtonElement | null>(null)
 const paramsVisible = ref(false)
 const currentIndicatorId = ref<string | null>(null)
 const hoveredIndicator = ref<string | null>(null)
-const showAddMenu = ref(false)
 const dragOverIndicatorId = ref<string | null>(null)
 const draggingIndicatorId = ref<string | null>(null)
 const isCompactView = ref(false)
-const searchQuery = ref('')
 
 // Teleport target for fullscreen modal visibility
 const teleportTarget = useFullscreenTeleportTarget()
@@ -346,39 +384,8 @@ const currentIndicator = computed(() => {
   return findIndicator(currentIndicatorId.value)
 })
 
-const totalIndicatorsCount = computed(() => mainIndicators.length + subIndicators.length)
-
 const activeCount = computed(() => props.activeIndicators?.length ?? 0)
 
-// 过滤后的主图指标
-const filteredMainIndicators = computed(() => {
-  if (!searchQuery.value.trim()) return mainIndicators
-  const query = searchQuery.value.toLowerCase().trim()
-  return mainIndicators.filter(
-    (i) =>
-      i.label.toLowerCase().includes(query) ||
-      i.name.toLowerCase().includes(query) ||
-      i.id.toLowerCase().includes(query),
-  )
-})
-
-// 过滤后的副图指标
-const filteredSubIndicators = computed(() => {
-  if (!searchQuery.value.trim()) return subIndicators
-  const query = searchQuery.value.toLowerCase().trim()
-  return subIndicators.filter(
-    (i) =>
-      i.label.toLowerCase().includes(query) ||
-      i.name.toLowerCase().includes(query) ||
-      i.id.toLowerCase().includes(query),
-  )
-})
-
-// 是否有搜索结果
-const hasSearchResults = computed(
-  () => filteredMainIndicators.value.length > 0 || filteredSubIndicators.value.length > 0,
-)
-
 function isActive(indicatorId: string): boolean {
   return props.activeIndicators?.includes(indicatorId) ?? false
 }
@@ -390,8 +397,9 @@ function addIndicator(indicatorId: string) {
   if (!indicator) return
 
   if (indicator.pane === 'main') {
-    mainIndicators
-      .filter((i) => i.id !== indicatorId && isActive(i.id))
+    const allItems = allIndicators
+    allItems
+      .filter((i) => i.id !== indicatorId && isActive(i.id) && i.pane === 'main')
       .forEach((i) => emit('toggle', i.id, false))
   }
 
@@ -407,10 +415,6 @@ function showParams(indicatorId: string) {
   paramsVisible.value = true
 }
 
-function closeAddMenu() {
-  showAddMenu.value = false
-}
-
 function getParamValues(indicatorId: string): Record<string, number> {
   const indicator = findIndicator(indicatorId)
   if (!indicator?.params) return {}
@@ -510,13 +514,9 @@ function onDragEnd() {
   draggingIndicatorId.value = null
 }
 
-function toggleAddMenu() {
-  showAddMenu.value = !showAddMenu.value
-}
-
 function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && showAddMenu.value) {
-    showAddMenu.value = false
+  if (event.key === 'Escape' && controller.menuOpen.peek()) {
+    controller.closeMenu()
   }
 }