designertool 0.23.0 → 0.26.0

package/README.md

@@ -1,11 +1,26 @@
 <h1 align="center">Postcard Designer Tool</h1>
 
+## Links
+
+- [Repo](https://github.com/webgurus-eu/dmm-designer-web 'dmm-designer-web Repo')
+
+- [Live](<Homepage url> 'Live View')
+
+- [API](https://dev-designer.directmailmanager.com/api 'API')
+
 ## User Guide
 
+To use the package in your project, before installing you need to first create an .npmrc file using the following details:
+
+```sh
+@webgurus-eu:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
+```
+
 Install the package in your application:
 
 ```sh
-$ npm install designertool
+npm install designertool
 ```
 
 Default config:
@@ -16,6 +31,9 @@ Default config:
     "w": 9,
     "h": 6
   },
+  "flags": {
+    "disable_default_templates": false
+  },
   "zoom": 100,
   "backgroundColor": "#ffffff",
   "backgroundImage": null,
@@ -100,17 +118,52 @@ Default config:
 ```
 
 Use the component in your application:
-In your project entry:
+
 ```js
-import { register } from "designertool";
-register()
-```
-After this you can use the postcard-designer custom html element.
-```html
-<postcard-designer />
+<script setup lang="ts">
+import { PostcardDesigner} from "designer-tool";
+import "designer-tool/dist/index.css";
+
+</script>
+
+<template>
+  <PostcardDesigner />
+</template>
+
 ```
 
+Available functions to modify the default config:
+
+- Every option can be modified by calling the init() function except the fonts, which can be extended by calling the addFont() function:
 
+```js
+import { init, addFont } from '@webgurus-eu/postcard-designer-tool';
+
+init({
+  backgroundColor: '#000000',
+  return_address: {
+    company: '',
+    firstname: 'Chuck',
+    lastname: 'Norris',
+    address1: '420 Forrest St',
+    address2: '',
+    city: 'Austin',
+    state: 'TX',
+    zipcode: '34444',
+  },
+});
+
+addFont([
+  {
+    name: 'Kablammo',
+    link: 'https://fonts.googleapis.com/css?family=Kablammo',
+  },
+  {
+    name: 'Bebas Neue',
+    link: 'https://fonts.googleapis.com/css?family=Bebas+Neue',
+  },
+]);
+```
 
 ## Built With
 
@@ -119,3 +172,6 @@ After this you can use the postcard-designer custom html element.
 - Vite
 - Tailwind
 
+## Future Updates
+
+- [ ] Conversion Tracking

package/dist/composable/featureFlags.d.ts

@@ -0,0 +1,4 @@
+type FeatureFlag = 'disable_default_templates';
+type FeatureFlags = Record<FeatureFlag, boolean>;
+export declare const useFeatureFlags: () => FeatureFlags;
+export {};

package/dist/config.d.ts

@@ -3,6 +3,10 @@ declare const _default: {
         w: number;
         h: number;
     };
+    template_scope: undefined | string;
+    flags: {
+        disable_default_templates: boolean;
+    };
     zoom: number;
     backgroundColor: string;
     backgroundImage: null;