@signosoft/signpad-js 0.2.0 → 0.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@signosoft/signpad-js",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "main": "./dist/signosoft-signpad.umd.cjs",
   "module": "./dist/signosoft-signpad.js",
@@ -25,10 +25,10 @@
     "src/scripts/generate-theme.js",
     "src/styles/styles-variables.css",
     "src/styles/signosoft-signpad.css",
+    "docsVideo.gif",
     "package.json",
     "README.md",
-    "LICENSE",
-    "framework-docs"
+    "LICENSE"
   ],
   "scripts": {
     "dev": "vite",

package/framework-docs/integration-angular.md

@@ -1,100 +0,0 @@
-# <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angular/angular-original.svg" alt="Angular" width="30" height="30"> Angular Integration Guide
-
-This guide describes how to integrate the `@signosoft/signpad-js` web component into an Angular application.
-
-## 1. Installation
-
-Install the core package using npm:
-
-```bash
-npm install @signosoft/signpad-js
-```
-
-## 2. Create the Bridge Directive
-
-Since `signosoft-signpad` is a Web Component, Angular requires a Directive to properly sync configuration changes and provide typed access to the component instance.
-
-Create `signosoft-signpad.directive.ts`:
-
-```typescript
-import {
-  Directive,
-  ElementRef,
-  Input,
-  OnChanges,
-  SimpleChanges,
-} from "@angular/core";
-import type { SignosoftSignpad, SignpadConfig } from "@signosoft/signpad-js";
-
-@Directive({
-  selector: "signosoft-signpad",
-  standalone: true,
-})
-export class SignosoftSignpadDirective implements OnChanges {
-  @Input() config?: SignpadConfig;
-
-  constructor(private host: ElementRef<SignosoftSignpad>) {}
-
-  // Access the native Web Component instance
-  get signpadRef(): SignosoftSignpad {
-    return this.host.nativeElement;
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    const el = this.host.nativeElement as any;
-    for (const key of Object.keys(changes)) {
-      el[key] = (this as any)[key];
-    }
-  }
-}
-```
-
-## 3. Implementation in Component
-
-Import the library, the directive, and add the **`CUSTOM_ELEMENTS_SCHEMA`**.
-
-```typescript
-import { Component, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import "@signosoft/signpad-js"; // Import the Web Component registration
-import {
-  type SignosoftSignpad,
-  type SignpadConfig,
-} from "@signosoft/signpad-js";
-import { SignosoftSignpadDirective } from "./directives/signosoft-signpad.directive";
-
-@Component({
-  selector: "app-root",
-  standalone: true,
-  imports: [SignosoftSignpadDirective],
-  templateUrl: "./app.component.html",
-  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Mandatory for custom HTML tags
-})
-export class AppComponent {
-  @ViewChild(SignosoftSignpadDirective)
-  signpadDirective!: SignosoftSignpadDirective;
-
-  config: SignpadConfig = {
-    licenseKey: "YOUR-LICENSE-KEY",
-    // More info in "properties" section
-  };
-
-  // Helper to access methods easily (ok, clear, cancel, etc.)
-  public get signpad(): SignosoftSignpad | undefined {
-    return this.signpadDirective?.signpadRef;
-  }
-}
-```
-
-## 4. Component Template
-
-Use the custom tag in your HTML and bind the configuration object.
-
-```html
-<div>
-  <div>
-    <signosoft-signpad [config]="config"></signosoft-signpad>
-  </div>
-</div>
-```
-
-### [← Back to Main README](../README.md)

package/framework-docs/integration-js.md

@@ -1,64 +0,0 @@
-# 🍦 Vanilla JS Integration Guide
-
-This guide describes how to integrate the `@signosoft/signpad-js` web component into a plain JavaScript project without any frameworks.
-
-## 1. Installation
-
-Install the package via npm:
-
-```bash
-npm install @signosoft/signpad-js
-```
-
-Or, if you are not using a bundler, you can include the script directly in your HTML (ensure the path points to the compiled bundle in `node_modules` or a CDN).
-
-## 2. JavaScript Implementation
-
-In Vanilla JS, you interact with the component by selecting it from the DOM and assigning the configuration directly to its `config` property.
-
-```javascript
-import "@signosoft/signpad-js";
-
-/**
- * INTELLISENSE SUPPORT (Optional)
- * Helps VS Code provide autocomplete for methods and properties.
- * @type {import('@signosoft/signpad-js').SignosoftSignpad}
- */
-const pad = document.querySelector("signosoft-signpad");
-
-// 1. Initial Configuration
-pad.config = {
-  licenseKey: "YOUR-LICENSE-KEY",
-};
-```
-
-## 3. HTML Structure
-
-Add the custom element tag to your HTML and create the necessary control buttons.
-
-```html
-<!-- index.html -->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Signosoft Signpad - Vanilla JS</title>
-  </head>
-  <body>
-    <h1>Signosoft Signpad</h1>
-    <!-- The Web Component -->
-    <signosoft-signpad id="my-signpad"></signosoft-signpad>
-    <!-- Main logic script -->
-    <script type="module" src="main.js"></script>
-  </body>
-</html>
-```
-
-## 4. Key Concepts
-
-- **Direct Property Assignment:** Unlike some frameworks that use attributes, in Plain JS you should assign the configuration directly: `element.config = { ... }`.
-- **Module System:** Ensure your `<script>` tag has `type="module"` to use the `import` statement.
-- **Methods:** All methods like `.connect()`, `.ok()`, and `.clear()` are available directly on the DOM element object.
-- **DOM Events:** The component dispatches standard DOM events (like `sign-ok`, `sign-clear`) which you can listen to using `addEventListener`.
-
-### [← Back to Main README](../README.md)

package/framework-docs/integration-react.md

@@ -1,42 +0,0 @@
-# <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" width="30" height="30"> React - Quick start
-
-This guide describes how to integrate the `@signosoft/signpad-js` web component into a React application (Functional Components with Hooks).
-
-## 1. Installation
-
-Install the core package using npm:
-
-```bash
-npm install @signosoft/signpad-js
-```
-
-## 2. Implementation
-
-In React, we use the `useRef` hook to interact with the component's methods (like `ok()` or `clear()`) and pass the configuration directly via props.
-
-```tsx
-import { useRef } from "react";
-import "@signosoft/signpad-js"; // Registers the web component
-import type { SignpadConfig } from "@signosoft/signpad-js";
-
-function App() {
-  // Use ref to access component methods (ok, clear, connect, etc. by signpadRef.current)
-  const signpadRef = useRef<any>(null);
-
-  const config: SignpadConfig = {
-    licenseKey: "YOUR-LICENSE-KEY",
-    // More info in "properties" section
-  };
-
-  return (
-    <div>
-      <h1>Signosoft Signpad React Example</h1>
-      <signosoft-signpad ref={signpadRef} config={config} />
-    </div>
-  );
-}
-
-export default App;
-```
-
-### [← Back to Main README](../README.md)

package/framework-docs/integration-vue.md

@@ -1,67 +0,0 @@
-# <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" alt="Vue" width="30" height="30"> Vue.js Integration Guide
-
-This guide describes how to integrate the `@signosoft/signpad-js` web component into a Vue 3 application using the Composition API (`<script setup>`).
-
-## 1. Installation
-
-Install the core package using npm:
-
-```bash
-npm install @signosoft/signpad-js
-```
-
-## 2. Configure Vue to recognize Custom Elements
-
-By default, Vue will try to resolve `signosoft-signpad` as a Vue component and will throw a warning. You need to tell Vue to ignore this tag.
-
-**If you are using Vite (`vite.config.ts`):**
-
-```typescript
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-
-export default defineConfig({
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          // Treat all tags starting with 'signosoft-' as custom elements
-          isCustomElement: (tag) => tag.startsWith("signosoft-"),
-        },
-      },
-    }),
-  ],
-});
-```
-
-## 3. Implementation
-
-In Vue 3, we use `ref` to hold the reference to the DOM element and pass the configuration via the `:config` attribute.
-
-```typescript
-<script setup lang="ts">
-import { ref } from "vue";
-import "@signosoft/signpad-js"; // Registers the Web Component
-import type { SignpadConfig, SignosoftSignpad, IPenData } from "@signosoft/signpad-js";
-
-// Use ref to access component methods (ok, clear, connect, etc. by signpadRef.value)
-const signpadRef = ref<SignosoftSignpad | null>(null);
-
-const signpadConfig: SignpadConfig = {
-  licenseKey: "YOUR-LICENSE-KEY",
-  // More info in "properties" section
-};
-
-</script>
-
-<template>
-  <div>
-    <signosoft-signpad
-      ref="signpadRef"
-      :config="signpadConfig"
-    ></signosoft-signpad>
-  </div>
-</template>
-```
-
-### [← Back to Main README](../README.md)