quasar-ui-danx 0.5.0 → 0.5.2

package/src/test/helpers/editorTestUtils.ts

@@ -0,0 +1,253 @@
+import { ref } from 'vue';
+import { htmlToMarkdown } from '../../helpers/formats/markdown/htmlToMarkdown';
+
+export interface TestEditorResult {
+	/** The contenteditable container element */
+	container: HTMLElement;
+	/** Get the current HTML content */
+	getHtml: () => string;
+	/** Get the markdown output from current HTML */
+	getMarkdown: () => string;
+	/** Get cursor position as { node, offset } */
+	getCursorPosition: () => { node: Node | null; offset: number };
+	/** Get cursor offset within a specific block */
+	getCursorOffsetInBlock: (blockIndex: number) => number;
+	/** Set cursor at a position in a specific text node */
+	setCursor: (node: Node, offset: number) => void;
+	/** Set cursor at offset within block's text content */
+	setCursorInBlock: (blockIndex: number, offset: number) => void;
+	/** Select text range */
+	selectRange: (startNode: Node, startOffset: number, endNode: Node, endOffset: number) => void;
+	/** Select text within a block by offsets */
+	selectInBlock: (blockIndex: number, startOffset: number, endOffset: number) => void;
+	/** Simulate a keydown event */
+	pressKey: (key: string, modifiers?: { ctrl?: boolean; shift?: boolean; alt?: boolean; meta?: boolean }) => void;
+	/** Type text at current cursor position */
+	type: (text: string) => void;
+	/** Get block element by index */
+	getBlock: (index: number) => Element | null;
+	/** Get all block elements */
+	getBlocks: () => Element[];
+	/** Get the contentRef as a Vue ref (for composables) */
+	contentRef: ReturnType<typeof ref<HTMLElement | null>>;
+	/** Cleanup function */
+	destroy: () => void;
+}
+
+/**
+ * Find a text node at a given offset within an element's text content.
+ * Returns the text node and the offset within that node.
+ */
+function findTextNodeAtOffset(element: Element, targetOffset: number): { node: Text; offset: number } | null {
+	let currentOffset = 0;
+	const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+	let node: Text | null;
+	let lastNode: Text | null = null;
+
+	while ((node = walker.nextNode() as Text)) {
+		lastNode = node;
+		const nodeLength = node.textContent?.length || 0;
+		if (currentOffset + nodeLength >= targetOffset) {
+			return { node, offset: targetOffset - currentOffset };
+		}
+		currentOffset += nodeLength;
+	}
+
+	// If we're past the content, return end of last text node
+	if (lastNode) {
+		return { node: lastNode, offset: lastNode.textContent?.length || 0 };
+	}
+
+	return null;
+}
+
+/**
+ * Get the key code string for common keys
+ */
+function getKeyCode(key: string): string {
+	const keyCodes: Record<string, string> = {
+		'Enter': 'Enter',
+		'Backspace': 'Backspace',
+		'Delete': 'Delete',
+		'Tab': 'Tab',
+		'Escape': 'Escape',
+		'ArrowUp': 'ArrowUp',
+		'ArrowDown': 'ArrowDown',
+		'ArrowLeft': 'ArrowLeft',
+		'ArrowRight': 'ArrowRight',
+		' ': 'Space',
+	};
+
+	if (keyCodes[key]) {
+		return keyCodes[key];
+	}
+
+	// For single letters, use KeyX format
+	if (key.length === 1 && /[a-zA-Z]/.test(key)) {
+		return `Key${key.toUpperCase()}`;
+	}
+
+	// For digits
+	if (key.length === 1 && /[0-9]/.test(key)) {
+		return `Digit${key}`;
+	}
+
+	return key;
+}
+
+/**
+ * Create a test editor with initial HTML content
+ */
+export function createTestEditor(initialHtml: string): TestEditorResult {
+	// Create container
+	const container = document.createElement('div');
+	container.setAttribute('contenteditable', 'true');
+	container.innerHTML = initialHtml.trim();
+	document.body.appendChild(container);
+
+	// Create Vue ref for composables
+	const contentRef = ref<HTMLElement | null>(container);
+
+	function getHtml(): string {
+		return container.innerHTML;
+	}
+
+	function getMarkdown(): string {
+		return htmlToMarkdown(container);
+	}
+
+	function getCursorPosition(): { node: Node | null; offset: number } {
+		const sel = window.getSelection();
+		if (!sel || sel.rangeCount === 0) {
+			return { node: null, offset: 0 };
+		}
+		const range = sel.getRangeAt(0);
+		return { node: range.startContainer, offset: range.startOffset };
+	}
+
+	function getBlock(index: number): Element | null {
+		const blocks = Array.from(container.children);
+		return blocks[index] || null;
+	}
+
+	function getBlocks(): Element[] {
+		return Array.from(container.children);
+	}
+
+	function getCursorOffsetInBlock(blockIndex: number): number {
+		const block = getBlock(blockIndex);
+		if (!block) return -1;
+
+		const sel = window.getSelection();
+		if (!sel || sel.rangeCount === 0) return -1;
+
+		const range = sel.getRangeAt(0);
+		if (!block.contains(range.startContainer)) return -1;
+
+		// Calculate offset within block's text content
+		const preRange = document.createRange();
+		preRange.selectNodeContents(block);
+		preRange.setEnd(range.startContainer, range.startOffset);
+		return preRange.toString().length;
+	}
+
+	function setCursor(node: Node, offset: number): void {
+		const range = document.createRange();
+		range.setStart(node, offset);
+		range.collapse(true);
+
+		const sel = window.getSelection();
+		sel?.removeAllRanges();
+		sel?.addRange(range);
+	}
+
+	function setCursorInBlock(blockIndex: number, offset: number): void {
+		const block = getBlock(blockIndex);
+		if (!block) return;
+
+		const result = findTextNodeAtOffset(block, offset);
+		if (result) {
+			setCursor(result.node, result.offset);
+		}
+	}
+
+	function selectRange(startNode: Node, startOffset: number, endNode: Node, endOffset: number): void {
+		const range = document.createRange();
+		range.setStart(startNode, startOffset);
+		range.setEnd(endNode, endOffset);
+
+		const sel = window.getSelection();
+		sel?.removeAllRanges();
+		sel?.addRange(range);
+	}
+
+	function selectInBlock(blockIndex: number, startOffset: number, endOffset: number): void {
+		const block = getBlock(blockIndex);
+		if (!block) return;
+
+		const start = findTextNodeAtOffset(block, startOffset);
+		const end = findTextNodeAtOffset(block, endOffset);
+
+		if (start && end) {
+			selectRange(start.node, start.offset, end.node, end.offset);
+		}
+	}
+
+	function pressKey(key: string, modifiers: { ctrl?: boolean; shift?: boolean; alt?: boolean; meta?: boolean } = {}): void {
+		const event = new KeyboardEvent('keydown', {
+			key,
+			code: getKeyCode(key),
+			ctrlKey: modifiers.ctrl || false,
+			shiftKey: modifiers.shift || false,
+			altKey: modifiers.alt || false,
+			metaKey: modifiers.meta || false,
+			bubbles: true,
+			cancelable: true,
+		});
+
+		container.dispatchEvent(event);
+	}
+
+	function type(text: string): void {
+		// Insert text at cursor position
+		const sel = window.getSelection();
+		if (!sel || sel.rangeCount === 0) return;
+
+		const range = sel.getRangeAt(0);
+		range.deleteContents();
+
+		const textNode = document.createTextNode(text);
+		range.insertNode(textNode);
+
+		// Move cursor after inserted text
+		range.setStartAfter(textNode);
+		range.collapse(true);
+		sel.removeAllRanges();
+		sel.addRange(range);
+
+		// Dispatch input event
+		container.dispatchEvent(new InputEvent('input', { bubbles: true }));
+	}
+
+	function destroy(): void {
+		container.remove();
+	}
+
+	return {
+		container,
+		getHtml,
+		getMarkdown,
+		getCursorPosition,
+		getCursorOffsetInBlock,
+		setCursor,
+		setCursorInBlock,
+		selectRange,
+		selectInBlock,
+		pressKey,
+		type,
+		getBlock,
+		getBlocks,
+		contentRef,
+		destroy,
+	};
+}

package/src/test/helpers/index.ts

@@ -0,0 +1 @@
+export * from './editorTestUtils';

package/src/test/highlighters.test.ts

@@ -0,0 +1,153 @@
+import { describe, it, expect } from "vitest";
+import { highlightCSS } from "../helpers/formats/highlightCSS";
+import { highlightJavaScript } from "../helpers/formats/highlightJavaScript";
+import { highlightHTML } from "../helpers/formats/highlightHTML";
+import { highlightSyntax } from "../helpers/formats/highlightSyntax";
+
+describe("CSS Highlighter", () => {
+	it("highlights selectors", () => {
+		const result = highlightCSS(".test { }");
+		expect(result).toContain("syntax-selector");
+		expect(result).toContain(".test");
+	});
+
+	it("highlights properties and values", () => {
+		const result = highlightCSS(".test { color: red; }");
+		expect(result).toContain("syntax-property");
+		expect(result).toContain("syntax-value");
+	});
+
+	it("highlights comments", () => {
+		const result = highlightCSS("/* comment */");
+		expect(result).toContain("syntax-comment");
+	});
+
+	it("highlights at-rules", () => {
+		const result = highlightCSS("@media screen { }");
+		expect(result).toContain("syntax-at-rule");
+		expect(result).toContain("@media");
+	});
+
+	it("highlights strings", () => {
+		const result = highlightCSS('@import "file.css";');
+		expect(result).toContain("syntax-string");
+	});
+});
+
+describe("JavaScript Highlighter", () => {
+	it("highlights keywords", () => {
+		const result = highlightJavaScript("const x = 1;");
+		expect(result).toContain("syntax-keyword");
+		expect(result).toContain("const");
+	});
+
+	it("highlights strings", () => {
+		const result = highlightJavaScript('const s = "hello";');
+		expect(result).toContain("syntax-string");
+	});
+
+	it("highlights numbers", () => {
+		const result = highlightJavaScript("const n = 42;");
+		expect(result).toContain("syntax-number");
+		expect(result).toContain("42");
+	});
+
+	it("highlights single-line comments", () => {
+		const result = highlightJavaScript("// comment");
+		expect(result).toContain("syntax-comment");
+	});
+
+	it("highlights multi-line comments", () => {
+		const result = highlightJavaScript("/* comment */");
+		expect(result).toContain("syntax-comment");
+	});
+
+	it("highlights template literals", () => {
+		const result = highlightJavaScript("const t = `hello`;");
+		expect(result).toContain("syntax-template");
+	});
+
+	it("highlights boolean values", () => {
+		const result = highlightJavaScript("const b = true;");
+		expect(result).toContain("syntax-boolean");
+	});
+
+	it("highlights null and undefined", () => {
+		const result = highlightJavaScript("const n = null;");
+		expect(result).toContain("syntax-null");
+	});
+
+	it("highlights operators", () => {
+		const result = highlightJavaScript("x === y");
+		expect(result).toContain("syntax-operator");
+	});
+
+	it("highlights regex", () => {
+		const result = highlightJavaScript("const r = /test/gi;");
+		expect(result).toContain("syntax-regex");
+	});
+});
+
+describe("HTML Highlighter", () => {
+	it("highlights tags", () => {
+		const result = highlightHTML("<div></div>");
+		expect(result).toContain("syntax-tag");
+	});
+
+	it("highlights attributes", () => {
+		const result = highlightHTML('<div class="test"></div>');
+		expect(result).toContain("syntax-attribute");
+		expect(result).toContain("class");
+	});
+
+	it("highlights attribute values as strings", () => {
+		const result = highlightHTML('<div class="test"></div>');
+		expect(result).toContain("syntax-string");
+	});
+
+	it("highlights comments", () => {
+		const result = highlightHTML("<!-- comment -->");
+		expect(result).toContain("syntax-comment");
+	});
+
+	it("highlights doctype", () => {
+		const result = highlightHTML("<!DOCTYPE html>");
+		expect(result).toContain("syntax-doctype");
+	});
+
+	it("highlights embedded CSS in style tags", () => {
+		const result = highlightHTML("<style>.test { color: red; }</style>");
+		expect(result).toContain("syntax-selector");
+		expect(result).toContain("syntax-property");
+		expect(result).toContain("syntax-value");
+	});
+
+	it("highlights embedded JavaScript in script tags", () => {
+		const result = highlightHTML("<script>const x = 42;</script>");
+		expect(result).toContain("syntax-keyword");
+		expect(result).toContain("syntax-number");
+	});
+});
+
+describe("highlightSyntax dispatcher", () => {
+	it("dispatches to CSS highlighter", () => {
+		const result = highlightSyntax(".test { }", { format: "css" });
+		expect(result).toContain("syntax-selector");
+	});
+
+	it("dispatches to JavaScript highlighter", () => {
+		const result = highlightSyntax("const x = 1;", { format: "javascript" });
+		expect(result).toContain("syntax-keyword");
+	});
+
+	it("dispatches to HTML highlighter", () => {
+		const result = highlightSyntax("<div></div>", { format: "html" });
+		expect(result).toContain("syntax-tag");
+	});
+
+	it("escapes HTML for text format", () => {
+		const result = highlightSyntax("<script>alert(1)</script>", { format: "text" });
+		expect(result).toContain("&lt;script&gt;");
+		expect(result).not.toContain("<script>");
+	});
+});

package/src/test/setup.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+
+describe('Vitest Setup', () => {
+  it('should run tests successfully', () => {
+    expect(true).toBe(true);
+  });
+
+  it('should have access to jsdom environment', () => {
+    expect(typeof window).toBe('object');
+    expect(typeof document).toBe('object');
+  });
+});

package/src/test/setup.ts

@@ -0,0 +1,12 @@
+import { vi } from 'vitest';
+
+// Mock window.getSelection for jsdom
+// jsdom's Selection API is limited, so we may need to enhance it
+if (typeof window !== 'undefined') {
+  // Ensure getSelection exists
+  if (!window.getSelection) {
+    window.getSelection = vi.fn(() => null);
+  }
+}
+
+// Global test utilities can be added here

package/src/types/widgets.d.ts

@@ -1,5 +1,5 @@
 export interface LabelPillWidgetProps {
 	label?: string | number;
-	size?: "xs" | "sm" | "md" | "lg";
-	color?: "sky" | "green" | "red" | "amber" | "yellow" | "blue" | "purple" | "slate" | "slate-mid" | "gray" | "emerald" | "orange" | "lime" | "teal" | "cyan" | "rose" | "indigo" | "violet" | "fuchsia" | "none";
+	size?: "xxs" | "xs" | "sm" | "md" | "lg";
+	color?: "sky" | "green" | "red" | "amber" | "yellow" | "blue" | "purple" | "slate" | "slate-mid" | "gray" | "emerald" | "orange" | "lime" | "teal" | "cyan" | "rose" | "indigo" | "violet" | "fuchsia" | "sky-soft" | "green-soft" | "red-soft" | "amber-soft" | "yellow-soft" | "blue-soft" | "purple-soft" | "slate-soft" | "gray-soft" | "emerald-soft" | "orange-soft" | "lime-soft" | "teal-soft" | "cyan-soft" | "rose-soft" | "indigo-soft" | "violet-soft" | "fuchsia-soft" | "none";
 }

package/vite.config.js

@@ -3,6 +3,8 @@ import { resolve } from "path";
 import { defineConfig } from "vite";
 import svgLoader from "vite-svg-loader";
 
+const __dirname = import.meta.dirname;
+
 export default defineConfig({
 	plugins: [vue(), svgLoader()],
 	resolve: {
@@ -32,7 +34,9 @@ export default defineConfig({
 	css: {
 		preprocessorOptions: {
 			scss: {
-				additionalData: `@import "./src/styles/index.scss";`
+				api: "modern",
+				loadPaths: [resolve(__dirname, "src/styles")],
+				additionalData: `@use "index" as *;`
 			}
 		}
 	}

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    include: ['src/**/*.{test,spec}.{js,ts}'],
+    setupFiles: ['./src/test/setup.ts'],
+    root: fileURLToPath(new URL('./', import.meta.url)),
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});