@363045841yyt/klinechart 0.8.4 → 0.8.6

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

package/src/components/BaseModal.vue

@@ -0,0 +1,292 @@
+<template>
+  <Teleport :to="teleportTarget">
+    <Transition name="overlay">
+      <div
+        v-if="show"
+        class="base-overlay"
+        :style="{ zIndex, padding: overlayPadding }"
+        @click="closeOnOverlay ? emit('close') : undefined"
+      >
+        <Transition :name="modalTransitionName">
+          <div
+            class="base-modal"
+            :style="modalStyle"
+            @click.stop
+          >
+            <div v-if="$slots.header || title" class="base-header">
+              <slot name="header">
+                <div class="base-header-left">
+                  <span class="base-title">{{ title }}</span>
+                  <span v-if="subtitle" class="base-subtitle">{{ subtitle }}</span>
+                </div>
+              </slot>
+              <div v-if="showClose" class="base-header-right">
+                <slot name="header-extra" />
+                <button class="base-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>
+
+            <div v-if="$slots.subheader" class="base-subheader">
+              <slot name="subheader" />
+            </div>
+
+            <div class="base-body" :style="{ padding: bodyPadding }">
+              <slot />
+            </div>
+
+            <div v-if="$slots.footer" class="base-footer" :style="{ justifyContent: footerAlign }">
+              <slot name="footer" />
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    title?: string
+    subtitle?: string
+    zIndex?: number
+    width?: string
+    maxWidth?: string
+    maxHeight?: string
+    overlayPadding?: string
+    bodyPadding?: string
+    footerAlign?: 'flex-end' | 'center' | 'flex-start' | 'space-between'
+    closeOnOverlay?: boolean
+    showClose?: boolean
+    transitionVariant?: 'default' | 'compact'
+  }>(),
+  {
+    title: '',
+    subtitle: '',
+    zIndex: 1000,
+    width: 'min(92vw, 400px)',
+    maxWidth: '',
+    maxHeight: 'min(600px, calc(100vh - 48px))',
+    overlayPadding: '24px',
+    bodyPadding: '16px 20px',
+    footerAlign: 'flex-end',
+    closeOnOverlay: true,
+    showClose: true,
+    transitionVariant: 'default',
+  },
+)
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const teleportTarget = useFullscreenTeleportTarget()
+
+const modalTransitionName = computed(() =>
+  props.transitionVariant === 'compact' ? 'modal-compact' : 'modal',
+)
+
+const modalStyle = computed(() => ({
+  width: props.width,
+  maxWidth: props.maxWidth || undefined,
+  maxHeight: props.maxHeight,
+}))
+</script>
+
+<style scoped>
+.base-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.base-modal {
+  background: var(--klc-color-background);
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 10px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.base-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;
+  gap: 12px;
+}
+
+.base-header-left {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.base-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--klc-color-foreground);
+  line-height: 1.35;
+}
+
+.base-subtitle {
+  font-size: 11px;
+  color: var(--klc-color-axis-text);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+.base-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.base-close-btn {
+  background: var(--klc-color-background);
+  border: 1px solid var(--klc-color-border-button);
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  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;
+}
+
+.base-close-btn:hover {
+  background: var(--klc-color-tag-bg-hover);
+  color: var(--klc-color-foreground);
+  border-color: var(--klc-color-axis-line);
+}
+
+.base-close-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.base-subheader {
+  flex-shrink: 0;
+  padding: 16px 20px;
+  background: var(--klc-color-background);
+  border-bottom: 1px solid var(--klc-color-grid-major);
+}
+
+.base-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  background: var(--klc-color-background);
+}
+
+.base-body::-webkit-scrollbar {
+  width: 8px;
+}
+
+.base-body::-webkit-scrollbar-track {
+  background: var(--klc-color-background);
+}
+
+.base-body::-webkit-scrollbar-thumb {
+  background: var(--klc-color-axis-line);
+  border: 2px solid var(--klc-color-background);
+  border-radius: 999px;
+}
+
+.base-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;
+}
+
+/* ── Overlay transition ── */
+.overlay-enter-active,
+.overlay-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.overlay-enter-from,
+.overlay-leave-to {
+  opacity: 0;
+}
+
+/* ── Modal transition (default variant) ── */
+.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);
+}
+
+/* ── Modal transition (compact variant) ── */
+.modal-compact-enter-active {
+  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.modal-compact-leave-active {
+  transition: all 0.16s ease-in;
+}
+
+.modal-compact-enter-from {
+  opacity: 0;
+  transform: scale(0.88) translateY(-16px);
+}
+
+.modal-compact-leave-to {
+  opacity: 0;
+  transform: scale(0.94) translateY(8px);
+}
+
+/* ── Responsive ── */
+@media (max-width: 480px) {
+  .base-overlay {
+    padding: 12px;
+    align-items: flex-end;
+  }
+
+  .base-modal {
+    min-width: 0;
+    width: 100% !important;
+    max-height: calc(100vh - 24px);
+    border-radius: 10px;
+  }
+}
+</style>

package/src/components/BatchStockDialog.vue

@@ -0,0 +1,128 @@
+<template>
+  <BaseModal title="批量设置股票代码" :show="show" @close="emit('close')">
+    <textarea
+      v-model="codesText"
+      class="batch-textarea"
+      placeholder="每行一个股票代码，导出时会将所选区间内这些品种的数据一并导出&#10;例如:&#10;000001&#10;600036&#10;002415"
+      rows="8"
+      spellcheck="false"
+    />
+    <template #footer>
+      <button class="batch-btn batch-btn--cancel" @click="emit('close')">取消</button>
+      <button class="batch-btn batch-btn--confirm" @click="onApply">应用</button>
+    </template>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BaseModal from './BaseModal.vue'
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  apply: [codes: string[]]
+}>()
+
+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-textarea {
+  width: 100%;
+  min-height: 160px;
+  max-height: 100%;
+  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-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;
+}
+</style>