pptx-vue-viewer 0.1.0

package/dist/index.js

@@ -0,0 +1,21 @@
+import { e, f, g, h, p, q, r, s, t, v, w } from "./PowerPointViewer.vue_vue_type_script_setup_true_lang-DY0sfWPY.js";
+import "vue";
+import { clsx as a } from "clsx";
+import { twMerge as i } from "tailwind-merge";
+function o(...e2) {
+  return i(a(e2));
+}
+export {
+  e as ElementRenderer,
+  f as PowerPointViewer,
+  g as SlideCanvas,
+  h as SlideStage,
+  o as cn,
+  p as defaultCssVars,
+  q as defaultRadius,
+  r as defaultThemeColors,
+  s as provideViewerTheme,
+  t as themeToCssVars,
+  v as useThemeStyle,
+  w as useViewerTheme
+};

package/dist/pptx-vue-viewer.css

@@ -0,0 +1,200 @@
+/**
+ * Base styles for the Vue PowerPoint viewer chrome.
+ *
+ * Minimal, self-contained CSS for the viewer-first milestone. The React
+ * package uses Tailwind CSS 4 utility classes compiled into a stylesheet; the
+ * Vue port currently ships hand-written CSS scoped under `.pptx-vue-viewer`.
+ * A Tailwind pipeline can be added later (see PORTING.md) if the editor chrome
+ * is ported wholesale.
+ *
+ * Theme tokens (`--pptx-*`) are emitted by `themeToCssVars` and bound to the
+ * root element via the `theme` prop.
+ */
+
+.pptx-vue-viewer {
+	--pptx-background: #030712;
+	--pptx-foreground: #f3f4f6;
+	--pptx-card: #111827;
+	--pptx-border: #374151;
+	--pptx-primary: #6366f1;
+	--pptx-muted-foreground: #9ca3af;
+
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+	background: var(--pptx-background);
+	color: var(--pptx-foreground);
+	font-family:
+		system-ui,
+		-apple-system,
+		'Segoe UI',
+		Roboto,
+		sans-serif;
+}
+
+/* ── States ─────────────────────────────────────────────────────────── */
+.pptx-vue-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+	flex: 1;
+	padding: 2rem;
+	text-align: center;
+}
+
+.pptx-vue-error-detail {
+	max-width: 40rem;
+	overflow: auto;
+	padding: 0.75rem;
+	border-radius: 0.5rem;
+	background: var(--pptx-card);
+	color: var(--pptx-muted-foreground);
+	font-size: 0.8rem;
+	white-space: pre-wrap;
+}
+
+.pptx-vue-spinner {
+	width: 2rem;
+	height: 2rem;
+	border: 3px solid var(--pptx-border);
+	border-top-color: var(--pptx-primary);
+	border-radius: 50%;
+	animation: pptx-vue-spin 0.8s linear infinite;
+}
+
+@keyframes pptx-vue-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* ── Toolbar ────────────────────────────────────────────────────────── */
+.pptx-vue-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: 0.5rem 0.75rem;
+	border-bottom: 1px solid var(--pptx-border);
+	background: var(--pptx-card);
+}
+
+.pptx-vue-nav,
+.pptx-vue-zoom {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.pptx-vue-toolbar button {
+	min-width: 2rem;
+	height: 2rem;
+	padding: 0 0.5rem;
+	border: 1px solid var(--pptx-border);
+	border-radius: 0.375rem;
+	background: transparent;
+	color: var(--pptx-foreground);
+	font-size: 1rem;
+	line-height: 1;
+	cursor: pointer;
+}
+
+.pptx-vue-toolbar button:hover:not(:disabled) {
+	border-color: var(--pptx-primary);
+}
+
+.pptx-vue-toolbar button:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.pptx-vue-slide-counter,
+.pptx-vue-zoom-value {
+	font-variant-numeric: tabular-nums;
+	font-size: 0.85rem;
+}
+
+/* ── Body / thumbnails / main ──────────────────────────────────────── */
+.pptx-vue-body {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+}
+
+.pptx-vue-thumbnails {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	width: 8rem;
+	padding: 0.75rem;
+	overflow-y: auto;
+	border-right: 1px solid var(--pptx-border);
+	background: var(--pptx-card);
+}
+
+.pptx-vue-thumb {
+	position: relative;
+	width: 100%;
+	padding: 0;
+	overflow: hidden;
+	border: 2px solid var(--pptx-border);
+	border-radius: 0.375rem;
+	background: #ffffff;
+	cursor: pointer;
+}
+
+.pptx-vue-thumb.is-active {
+	border-color: var(--pptx-primary);
+}
+
+/* Mini slide preview fills the button; non-interactive. */
+.pptx-vue-thumb-stage {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	overflow: hidden;
+}
+
+.pptx-vue-thumb-index {
+	position: absolute;
+	bottom: 0.15rem;
+	right: 0.3rem;
+	padding: 0 0.2rem;
+	border-radius: 0.2rem;
+	font-size: 0.7rem;
+	color: #f3f4f6;
+	background: rgba(0, 0, 0, 0.55);
+}
+
+.pptx-vue-main {
+	flex: 1;
+	min-width: 0;
+	overflow: auto;
+	background: #1e293b;
+}
+
+/* ── Canvas ─────────────────────────────────────────────────────────── */
+.pptx-vue-canvas-viewport {
+	width: 100%;
+	height: 100%;
+}
+
+.pptx-vue-element {
+	box-sizing: border-box;
+}
+
+.pptx-vue-placeholder {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	border: 1px dashed rgba(99, 102, 241, 0.5);
+	color: rgba(99, 102, 241, 0.8);
+	font-size: 0.75rem;
+	background: rgba(99, 102, 241, 0.06);
+}

package/dist/viewer/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const e = require("../PowerPointViewer.vue_vue_type_script_setup_true_lang-CjQ0x4Fx.cjs");
+exports.ConnectorRenderer = e._sfc_main, exports.DEFAULT_CANVAS_HEIGHT = e.DEFAULT_CANVAS_HEIGHT, exports.DEFAULT_CANVAS_WIDTH = e.DEFAULT_CANVAS_WIDTH, exports.DEFAULT_FILL_COLOR = e.DEFAULT_FILL_COLOR, exports.DEFAULT_STROKE_COLOR = e.DEFAULT_STROKE_COLOR, exports.DEFAULT_TEXT_COLOR = e.DEFAULT_TEXT_COLOR, exports.ElementRenderer = e._sfc_main$1, exports.PowerPointViewer = e._sfc_main$2, exports.SlideCanvas = e._sfc_main$3, exports.SlideStage = e._sfc_main$4, exports.buildInitialGuides = e.buildInitialGuides, exports.collectImagePaths = e.collectImagePaths, exports.collectMediaElements = e.collectMediaElements, exports.getContainerStyle = e.getContainerStyle, exports.getImageSrc = e.getImageSrc, exports.getShapeFillStrokeStyle = e.getShapeFillStrokeStyle, exports.getTextBlockStyle = e.getTextBlockStyle, exports.useLoadContent = e.useLoadContent;

package/dist/viewer/index.d.ts

@@ -0,0 +1,9 @@
+export { default as PowerPointViewer } from './PowerPointViewer.vue';
+export { default as SlideCanvas } from './components/SlideCanvas.vue';
+export { default as SlideStage } from './components/SlideStage.vue';
+export { default as ElementRenderer } from './components/ElementRenderer.vue';
+export { default as ConnectorRenderer } from './components/ConnectorRenderer.vue';
+export type { PowerPointViewerProps, PowerPointViewerEmits, PowerPointViewerExpose, CollaborationConfig, CollaborationRole, CanvasSize, } from './types';
+export * from './composables';
+export { DEFAULT_CANVAS_WIDTH, DEFAULT_CANVAS_HEIGHT, DEFAULT_TEXT_COLOR, DEFAULT_FILL_COLOR, DEFAULT_STROKE_COLOR, } from './constants';
+//# sourceMappingURL=index.d.ts.map

package/dist/viewer/index.js

@@ -0,0 +1,21 @@
+import { _, D, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, u } from "../PowerPointViewer.vue_vue_type_script_setup_true_lang-DY0sfWPY.js";
+export {
+  _ as ConnectorRenderer,
+  D as DEFAULT_CANVAS_HEIGHT,
+  a as DEFAULT_CANVAS_WIDTH,
+  b as DEFAULT_FILL_COLOR,
+  c as DEFAULT_STROKE_COLOR,
+  d as DEFAULT_TEXT_COLOR,
+  e as ElementRenderer,
+  f as PowerPointViewer,
+  g as SlideCanvas,
+  h as SlideStage,
+  i as buildInitialGuides,
+  j as collectImagePaths,
+  k as collectMediaElements,
+  l as getContainerStyle,
+  m as getImageSrc,
+  n as getShapeFillStrokeStyle,
+  o as getTextBlockStyle,
+  u as useLoadContent
+};

package/dist/viewer/index.js.br

@@ -0,0 +1 @@
+g����#�pϲ����Fa��cǀk�}����Gگ�Fmk���mK�۷kC��Gs�ܤ���Ja��\x� D�	RdÆ�7�'��l�]4���Ŷq �k�o_T���������/W���ÊcNo�1#���Y����)y�\%|M�|�'}�h��Ċ�
�%WH��5`=y���lfP|SL'Y�4�G.`z"��hF�U��F5�G�)��]m��C��"-L�?�+1L͌g�S���'�͆�ҪM�'.ڋM�Ϻ�"�'#�LI��Ͱ�>[�K�0

package/package.json

@@ -0,0 +1,88 @@
+{
+	"name": "pptx-vue-viewer",
+	"version": "0.1.0",
+	"description": "Vue 3 PowerPoint viewer/editor component — depends on pptx-viewer-core. Vue counterpart of the React `pptx-viewer` package.",
+	"keywords": [
+		"editor",
+		"openxml",
+		"powerpoint",
+		"pptx",
+		"presentation",
+		"viewer",
+		"vue",
+		"vue3"
+	],
+	"homepage": "https://github.com/ChristopherVR/pptx-viewer",
+	"bugs": {
+		"url": "https://github.com/ChristopherVR/pptx-viewer/issues"
+	},
+	"license": "Apache-2.0",
+	"author": "ChristopherVR",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ChristopherVR/pptx-viewer.git",
+		"directory": "packages/vue"
+	},
+	"files": [
+		"dist/",
+		"LICENSE",
+		"NOTICE",
+		"README.md"
+	],
+	"type": "module",
+	"main": "dist/index.cjs",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
+		},
+		"./viewer": {
+			"types": "./dist/viewer/index.d.ts",
+			"import": "./dist/viewer/index.js",
+			"require": "./dist/viewer/index.cjs"
+		},
+		"./styles": "./dist/pptx-vue-viewer.css",
+		"./styles.css": "./dist/pptx-vue-viewer.css"
+	},
+	"scripts": {
+		"build": "vite build && cp src/styles/pptx-vue-viewer.css dist/pptx-vue-viewer.css && node ../../scripts/compress-dist.mjs dist",
+		"dev": "vite build --watch",
+		"typecheck": "vue-tsc --noEmit -p tsconfig.json",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"pack": "bun run build && bun pm pack"
+	},
+	"dependencies": {
+		"clsx": "^2.1.1",
+		"dompurify": "^3.4.10",
+		"tailwind-merge": "^3.6.0"
+	},
+	"devDependencies": {
+		"@rollup/plugin-terser": "^1.0.0",
+		"@tailwindcss/cli": "^4.3.1",
+		"@types/dompurify": "^3.2.0",
+		"@vitejs/plugin-vue": "^6.0.7",
+		"@vue/test-utils": "^2.4.6",
+		"happy-dom": "^20.10.3",
+		"tailwindcss": "^4.3.1",
+		"terser": "^5.37.0",
+		"typescript": "^6.0.3",
+		"vite": "^8.0.16",
+		"vite-plugin-dts": "^5.0.2",
+		"vitest": "^4.1.8",
+		"vue-tsc": "^3.3.5"
+	},
+	"peerDependencies": {
+		"fast-xml-parser": "^5.8.0",
+		"jspdf": "^4.2.1",
+		"jszip": "^3.10.1",
+		"vue": "^3.5.0"
+	},
+	"optionalDependencies": {
+		"y-websocket": "^3.0.0",
+		"yjs": "^13.6.31"
+	}
+}