@gridsheet/vue-core 0.1.0

package/README.md

@@ -0,0 +1,97 @@
+# @gridsheet/vue-core
+
+Spreadsheet component for Vue 3
+
+## Installation
+
+```bash
+npm install @gridsheet/vue-core
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependency:
+
+- `vue` ^3.3.0
+
+## Usage
+
+```vue
+<template>
+  <main>
+    <h1>GridSheet Vue Example</h1>
+    <div class="grid-container">
+      <GridSheet
+        :hubReactive="hubReactive"
+        :initialCells="{
+          A1: { value: 'Hello' },
+          B1: { value: 'Vue', style: { backgroundColor: '#448888'} },
+          A2: { value: 123 },
+          B2: { value: 456 },
+          A3: { value: 789},
+          C10: { value: '=SUM(A2:B2)' },
+        }"
+        :options="{
+          mode: 'dark',
+        }"
+        sheetName="Sheet1"
+      />
+
+      <GridSheet
+        :hubReactive="hubReactive"
+        :initialCells="{
+          C3: { value: '=SUM(Sheet1!A2:B3)' },
+        }"
+        :options="{}"
+        sheetName="Sheet2"
+      />
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { GridSheet, useHubReactive } from '@gridsheet/vue-core';
+const hubReactive = useHubReactive();
+</script>
+```
+
+## Components
+
+### GridSheet
+
+The main spreadsheet component for Vue 3 applications.
+
+**Props:**
+- `hubReactive` - Reactive hub for data binding and state management
+- `initialCells` - Initial cell data with values, styles, and formulas
+- `options` - GridSheet options (e.g., mode: 'dark')
+- `sheetName` - Name of the sheet
+
+### useHubReactive
+
+A Vue 3-specific composable for creating reactive hubs that can be used for data binding and state management.
+
+## Exports
+
+This package exports:
+
+- All core GridSheet functionality from `@gridsheet/preact-core`
+- `GridSheet` - Vue 3 component
+- `useHubReactive` - Vue 3-specific reactive hub composable
+
+## Development
+
+```bash
+# Start development server
+pnpm dev
+
+# Build the package
+pnpm build
+
+# Preview the build
+pnpm preview
+```
+
+## License
+
+Apache-2.0 

package/dist/GridSheet.vue.d.ts

@@ -0,0 +1,75 @@
+import { HubReactiveType, CellsByAddressType, OptionsType, TableRef } from '@gridsheet/preact-core';
+import { Ref } from 'vue';
+
+interface RefObject<T> {
+    readonly current: T | null;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    initialCells: {
+        type: () => CellsByAddressType;
+        required: true;
+    };
+    sheetName: {
+        type: StringConstructor;
+        default: string;
+    };
+    hubReactive: {
+        type: () => HubReactiveType | Ref<HubReactiveType>;
+        default: null;
+    };
+    tableRef: {
+        type: () => RefObject<TableRef | null>;
+        default: null;
+    };
+    options: {
+        type: () => OptionsType;
+        default: () => {};
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    style: {
+        type: any;
+        default: () => {};
+    };
+}>, {
+    container: Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    initialCells: {
+        type: () => CellsByAddressType;
+        required: true;
+    };
+    sheetName: {
+        type: StringConstructor;
+        default: string;
+    };
+    hubReactive: {
+        type: () => HubReactiveType | Ref<HubReactiveType>;
+        default: null;
+    };
+    tableRef: {
+        type: () => RefObject<TableRef | null>;
+        default: null;
+    };
+    options: {
+        type: () => OptionsType;
+        default: () => {};
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    style: {
+        type: any;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    sheetName: string;
+    hubReactive: HubReactiveType | Ref<HubReactiveType, HubReactiveType>;
+    tableRef: RefObject<TableRef | null>;
+    options: OptionsType;
+    className: string;
+    style: any;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/hub.d.ts

@@ -0,0 +1 @@
+export declare function useHubReactive(historyLimit?: number): import('vue').ShallowRef<import('@gridsheet/preact-core').HubReactiveType, import('@gridsheet/preact-core').HubReactiveType>;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@gridsheet/preact-core';
+export { default as GridSheet } from './GridSheet.vue';
+export { useHubReactive } from './hub';

package/dist/index.js

@@ -0,0 +1,87 @@
+import { render as o, h as l, GridSheet as f, DEFAULT_HISTORY_LIMIT as s, createHubReactive as d } from "@gridsheet/preact-core";
+export * from "@gridsheet/preact-core";
+import { defineComponent as h, ref as v, onMounted as b, isRef as u, watch as i, onBeforeUnmount as p, createElementBlock as R, openBlock as m, shallowRef as _ } from "vue";
+const y = h({
+  name: "GridSheet",
+  props: {
+    initialCells: {
+      type: Object,
+      required: !0
+    },
+    sheetName: {
+      type: String,
+      default: ""
+    },
+    hubReactive: {
+      type: Object,
+      default: null
+    },
+    tableRef: {
+      type: Object,
+      default: null
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    className: {
+      type: String,
+      default: ""
+    },
+    style: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(e) {
+    const n = v(null);
+    let t = null;
+    function a() {
+      return {
+        ...e,
+        hubReactive: u(e.hubReactive) ? e.hubReactive.value : e.hubReactive
+      };
+    }
+    function r() {
+      n.value && (t = n.value, o(
+        l(f, a()),
+        t
+      ));
+    }
+    return b(() => {
+      r(), u(e.hubReactive) ? i(
+        () => e.hubReactive.value,
+        r,
+        { deep: !1 }
+      ) : i(
+        () => e.hubReactive,
+        r,
+        { deep: !1 }
+      );
+    }), p(() => {
+      t && (t.innerHTML = "");
+    }), {
+      container: n
+    };
+  }
+}), O = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [a, r] of n)
+    t[a] = r;
+  return t;
+}, S = { ref: "container" };
+function j(e, n, t, a, r, c) {
+  return m(), R("div", S, null, 512);
+}
+const x = /* @__PURE__ */ O(y, [["render", j]]);
+function G(e = s) {
+  const n = d(e), t = _(n), { hub: a } = t.value;
+  function r(c) {
+    Object.assign(a, { ...c }), a.ready && requestAnimationFrame(() => t.value = { ...t.value });
+  }
+  return a.reflect = r, t;
+}
+export {
+  x as GridSheet,
+  G as useHubReactive
+};

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@gridsheet/vue-core",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "dev": "vite example",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+    "@gridsheet/preact-core": "^2.0.0-rc.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "vue": "^3.4.21",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^3.9.0"
+  }
+}