vue-quokit 0.1.8 → 0.1.10

package/dist/index.d.ts

@@ -0,0 +1,284 @@
+import type { Ref, ComputedRef, Reactive } from 'vue';
+
+/* ---------- 数据结构 ---------- */
+
+export interface ColumnDef {
+  field: string;
+  title: string;
+  editor: 'INPUT' | 'NUMBER' | 'SELECT' | 'TEXTAREA' | 'DATE' | 'CHECKBOX' | 'AUTO_SEQ' | 'AUTO_CALC' | string;
+  width: number;
+  dict?: string[];
+  formula?: string;
+  merge_on_group?: boolean;
+  dictStr?: string;
+  [key: string]: any;
+}
+
+export interface GroupRules {
+  merge_field?: string;
+  show_detail_subtotal?: boolean;
+}
+
+export interface SectionCell {
+  type: 'text' | 'image' | 'field' | 'separator';
+  text?: string;
+  field?: string;
+  width?: string | number;
+  align?: 'left' | 'center' | 'right';
+  bold?: boolean;
+  italic?: boolean;
+  fontSize?: number;
+  color?: string;
+  border?: { top: string; bottom: string; left: string; right: string };
+  colspan?: number;
+  rowspan?: number;
+  [key: string]: any;
+}
+
+export interface SectionRow {
+  cells: SectionCell[];
+  [key: string]: any;
+}
+
+export interface SummaryField {
+  field: string;
+  label: string;
+  type: 'MANUAL_INPUT' | 'AUTO_CALC' | 'AUTO_SUM' | string;
+  default?: any;
+  formula?: string;
+  [key: string]: any;
+}
+
+export interface QuokitTemplateData {
+  columns: ColumnDef[];
+  group_rules?: GroupRules | null;
+  header_sections?: SectionRow[];
+  footer_sections?: SectionRow[];
+  summary_fields?: SummaryField[];
+}
+
+export interface QuokitDataModel {
+  headerData?: Record<string, any>;
+  rows?: Record<string, any>[];
+  footerData?: Record<string, any>;
+}
+
+/* ---------- 全局配置 ---------- */
+
+export interface TemplateColConfig {
+  key: string;
+  label: string;
+  width: number;
+}
+
+export interface TemplateColsConfig {
+  layout: 'auto' | 'fixed';
+  minWidth: number;
+  columns: TemplateColConfig[];
+}
+
+export interface QuokitUserConfig {
+  templateCols?: Partial<TemplateColsConfig> & {
+    columns?: TemplateColConfig[];
+  };
+  [key: string]: any;
+}
+
+export function setConfig(userConfig: QuokitUserConfig): void;
+export function getConfig(): QuokitUserConfig;
+export function resetConfig(): void;
+
+/* ---------- Composables ---------- */
+
+export interface UseColumnsReturn {
+  columns: Ref<ColumnDef[]>;
+  groupRules: Ref<Required<GroupRules>>;
+  tpl: ComputedRef<{ columns: ColumnDef[]; group_rules: GroupRules | null }>;
+  setColumns(raw: ColumnDef[]): void;
+  setGroupRules(raw: GroupRules): void;
+}
+
+export function useColumns(
+  initialColumns?: ColumnDef[],
+  initialGroupRules?: GroupRules
+): UseColumnsReturn;
+
+export interface UseSectionsReturn {
+  sections: Ref<SectionRow[]>;
+  setSections(raw: SectionRow[]): void;
+  toTpl(): SectionRow[];
+}
+
+export function useSections(
+  initialSections?: SectionRow[]
+): UseSectionsReturn;
+
+export interface UseSummaryReturn {
+  fields: Ref<SummaryField[]>;
+  tpl: ComputedRef<SummaryField[]>;
+  setFields(raw: SummaryField[]): void;
+  toTpl(): SummaryField[];
+}
+
+export function useSummary(initialFields?: SummaryField[]): UseSummaryReturn;
+
+export interface PreviewDialogConfig {
+  title?: string;
+  excel?: boolean;
+  print?: boolean;
+  json?: boolean;
+  [key: string]: any;
+}
+
+export interface UsePreviewReturn {
+  open: Ref<boolean>;
+  current: Reactive<{
+    tpl: QuokitTemplateData | null;
+    data: QuokitDataModel | null;
+    config: Required<PreviewDialogConfig>;
+  }>;
+  openPreview(tpl: QuokitTemplateData, data: QuokitDataModel, config?: PreviewDialogConfig): void;
+  closePreview(): void;
+}
+
+export function usePreview(): UsePreviewReturn;
+
+export function openPreview(
+  tpl: QuokitTemplateData,
+  data: QuokitDataModel,
+  config?: PreviewDialogConfig
+): void;
+
+export function openTemplatePreview(
+  tpl: QuokitTemplateData,
+  config?: { title?: string }
+): void;
+
+/* ---------- Vue 组件 ---------- */
+
+type Comp<P = {}, X = {}> = {
+  __name?: string;
+  __props?: P;
+  new (): X;
+};
+
+/**
+ * 报价单模板设计器（整体容器，5 个 tab）
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { QuokitTemplate, type QuokitTemplateData } from 'vue-quokit';
+ *
+ * const tpl = ref<QuokitTemplateData>({ columns: [], group_rules: null });
+ * const designerRef = ref<InstanceType<typeof QuokitTemplate> | null>(null);
+ *
+ * function handleSave() {
+ *   const json = designerRef.value?.getTemplateJSON();
+ *   console.log(json);
+ * }
+ * </script>
+ *
+ * <template>
+ *   <QuokitTemplate ref="designerRef" v-model:tpl="tpl" />
+ * </template>
+ * ```
+ */
+export declare const QuokitTemplate: Comp<
+  { tpl?: QuokitTemplateData; breakpoint?: number },
+  {
+    /** 取当前设计器里的完整模板 JSON */
+    getTemplateJSON(): QuokitTemplateData;
+    /** 弹出帮助对话框 */
+    showHelp(): void;
+  }
+>;
+
+/**
+ * 报价单数据填写器
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { QuokitData, type QuokitTemplateData } from 'vue-quokit';
+ *
+ * const tpl = ref<QuokitTemplateData>({ columns: [], group_rules: null });
+ * const data = ref<Record<string, any>[]>([]);
+ * </script>
+ *
+ * <template>
+ *   <QuokitData :tpl="tpl" v-model:data="data" />
+ * </template>
+ * ```
+ */
+export declare const QuokitData: Comp<{
+  tpl: QuokitTemplateData;
+  data?: Record<string, any>[];
+}>;
+
+/**
+ * 报价单预览 / 导出 / 打印
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { QuokitSheet, type QuokitTemplateData } from 'vue-quokit';
+ *
+ * const tpl = ref<QuokitTemplateData>({ columns: [], group_rules: null });
+ * const data = ref<Record<string, any>[]>([]);
+ * const sheetRef = ref<InstanceType<typeof QuokitSheet> | null>(null);
+ *
+ * function doExport() {
+ *   sheetRef.value?.exportExcel();
+ * }
+ * function doPrint() {
+ *   sheetRef.value?.print();
+ * }
+ * </script>
+ *
+ * <template>
+ *   <QuokitSheet ref="sheetRef" :tpl="tpl" :data="data" />
+ * </template>
+ * ```
+ */
+export declare const QuokitSheet: Comp<
+  { tpl: QuokitTemplateData; data?: QuokitDataModel; placeholder?: string },
+  {
+    /** 导出 Excel。撑长模式下会自动加高行高。 */
+    exportExcel(expandRowHeight?: boolean): Promise<void>;
+    /** 打印报价单。竖版时 width 设为 800。 */
+    print(vertical?: boolean): void;
+  }
+>;
+
+/**
+ * 报价单总体预览对话框（含导出/打印/JSON查看按钮）
+ *
+ * 通常不需要直接使用，而是通过 `openPreview()` 或 `usePreview()` 来触发。
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { QuokitPreview, type QuokitTemplateData } from 'vue-quokit';
+ *
+ * const tpl = ref<QuokitTemplateData>({ columns: [], group_rules: null });
+ * const data = ref({ headerData: {}, rows: [], footerData: {} });
+ * const visible = ref(true);
+ * </script>
+ *
+ * <template>
+ *   <QuokitPreview v-if="visible" :tpl="tpl" :data="data" :config="{ title: '我的报价单' }" @close="visible = false" />
+ * </template>
+ * ```
+ */
+export declare const QuokitPreview: Comp<
+  {
+    tpl: QuokitTemplateData;
+    data?: QuokitDataModel;
+    config?: PreviewDialogConfig;
+  }
+>;

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "vue-quokit",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
     }
   },
   "files": [
@@ -30,4 +32,4 @@
     "vite-plugin-css-injected-by-js": "^5.0.2",
     "vue": "^3.4.21"
   }
-}
+}