fix: update docs

tiki-deprecated · Oct 6, 2023 · 6fb0f0c · 6fb0f0c
1 parent c90527a
commit 6fb0f0c
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 109 deletions.
diff --git a/README.md b/README.md
@@ -111,10 +111,19 @@ new Vue({ render: (h) => h(App) }).$mount("#app");
 _This registers the Vue Component as `TikiReceipt` and provides the service `TikiService` as an injectable object name `Tiki`._
 
 2. Add the stylesheet for the component to your primary stylesheet (e.g. `main.css`)
+
+### With Vue >=3.0.0
+
 ```css
 @import "@mytiki/receipt-capacitor/dist/receipt-capacitor.css";
 ```
 
+### With Vue 2.7.14
+
+```css
+@import "@mytiki/receipt-capacitor-vue2/dist/receipt-capacitor.css";
+```
+
 #### Android
 For IMAP email account linking, the authorization UI uses the material bottom sheet. This requires your theme parent to extend Theme.MaterialComponents.*
 

diff --git a/makefile b/makefile
@@ -44,4 +44,4 @@ vue2-example-ios: vue2-example
 
 clean:
 	rm -f ./src/main.ts vite.config.ts package.json package-lock.json
-	rm -rf node_modules/ dist/ example/vue2/dist/ example/vue3/dist/
+	rm -rf node_modules/ dist/ docs/ example/vue2/dist/ example/vue3/dist/
diff --git a/src/options/index.ts b/src/options/index.ts
@@ -6,7 +6,7 @@
 /**
  * Interfaces for configuration of this library.
  *
- * Define during app registration. Start with the top-level interface: {@link Config.Options}
+ * Define during app registration. Start with the top-level interface: {@link Options}
  * @module
  */
 
@@ -18,6 +18,7 @@ import type { Theme } from "./theme";
  * The top-level configuration object for this library. Define during app registration.
  *
  * @example
+ * For Vue >=3.0.0
  * ```
  * import { createApp } from "vue";
  * import App from "@/app.vue";
@@ -28,9 +29,10 @@ import type { Theme } from "./theme";
  * createApp(App)
  *  .use(Tiki, {
  *    key: {
- *       publishingId: "YOUR TIKI PUBLISHING ID",
- *       scanKey: "YOUR MICROBLINK LICENSE KEY",
- *       intelKey: "YOUR MICROBLINK PRODUCT INTELLIGENCE KEY",
+ *      publishingId: "YOUR TIKI PUBLISHING ID",
+ *      android: "YOUR MICROBLINK ANDROID LICENSE KEY",
+ *      ios: "YOUR MICROBLINK IOS LICENSE KEY",
+ *      product: "YOUR MICROBLINK PRODUCT INTELLIGENCE KEY",
  *    },
  *    offer: {
  *      image: ProgramImage,
@@ -56,6 +58,47 @@ import type { Theme } from "./theme";
  *  })
  *  .mount("#app");
  * ```
+ * @example
+ * For Vue 2.7.14
+ * ```
+ * import { createApp } from "vue";
+ * import Vue from "vue";
+ * import Tiki from "@mytiki/receipt-capacitor-vue2";
+ * import ProgramImage from "@/assets/images/program.png";
+ * import LearnMore from "@/assets/md/learn-more.md?raw";
+ *
+ * Vue.use(Tiki, {
+ *    key: {
+ *      publishingId: "YOUR TIKI PUBLISHING ID",
+ *      android: "YOUR MICROBLINK ANDROID LICENSE KEY",
+ *      ios: "YOUR MICROBLINK IOS LICENSE KEY",
+ *      product: "YOUR MICROBLINK PRODUCT INTELLIGENCE KEY",
+ *    },
+ *    offer: {
+ *      image: ProgramImage,
+ *      description: "Connect your accounts to turn your receipts into real cash each month!",
+ *      bullets: [
+ *       "Link a Gmail account",
+ *       "Link a supported retailer account",
+ *       "Open and use the app each week",
+ *       "Share 5 new receipts",
+ *      ],
+ *    },
+ *    theme: {
+ *      fontFamily: "'Space Grotesk', sans-serif",
+ *      primaryTextColor: "rgb(28 0 0)",
+ *      secondaryTextColor: "rgb(28 0 0 / 60%)",
+ *      successColor: "rgb(0 178 114)",
+ *      errorColor: "rgb(199, 48, 0)",
+ *      primaryBackgroundColor: "rgb(255 255 255)",
+ *      secondaryBackgroundColor: "rgb(246 246 246)",
+ *    },
+ *    learn: LearnMore,
+ *    callback: (_total: number): number | undefined => undefined,
+ *  });
+ *
+ * new Vue({ render: (h) => h(App) }).$mount("#app");
+ * ```
  */
 export interface Options {
   /**

diff --git a/src/options/theme.ts b/src/options/theme.ts
@@ -54,30 +54,3 @@ export interface Theme {
    */
   secondaryBackgroundColor?: string;
 }
-
-export const apply = (document: Document, theme?: Theme): void => {
-  setProperty(document, "--tiki-font-family", theme?.fontFamily);
-  setProperty(document, "--tiki-primary-text-color", theme?.primaryTextColor);
-  setProperty(
-    document,
-    "--tiki-secondary-text-color",
-    theme?.secondaryTextColor,
-  );
-  setProperty(
-    document,
-    "--tiki-primary-background-color",
-    theme?.primaryBackgroundColor,
-  );
-  setProperty(
-    document,
-    "--tiki-secondary-background-color",
-    theme?.secondaryBackgroundColor,
-  );
-  setProperty(document, "--tiki-success-color", theme?.successColor);
-  setProperty(document, "--tiki-success-color", theme?.errorColor);
-};
-
-const setProperty = (document: Document, property: string, value?: string) => {
-  if (value != undefined)
-    document.documentElement.style.setProperty(property, value);
-};
diff --git a/vue2/main.ts b/vue2/main.ts
@@ -3,77 +3,12 @@
  * MIT license. See LICENSE file in root directory.
  */
 
-/**
- * This module registers with a [Vue app](https://vuejs.org) the {@link TikiReceipt} component
- * and a singleton instance of the {@link TikiService}.
- *
- * Define a {@link Config.Options} object to specify licensing keys, styling, and content overrides.
- *
- * @example
- * Register with application:
- * ```
- * import { createApp } from "vue";
- * import App from "@/app.vue";
- * import Tiki from "@mytiki/receipt-capacitor";
- *
- * createApp(App)
- *  .use(Tiki, {
- *    key: {
- *       publishingId: "YOUR TIKI PUBLISHING ID",
- *       scanKey: "YOUR MICROBLINK LICENSE KEY",
- *       intelKey: "YOUR MICROBLINK PRODUCT INTELLIGENCE KEY",
- *    },
- *    callback: (_total: number): number | undefined => undefined,
- *  })
- *  .mount("#app");
- * ```
- *
- * Next, add the stylesheet for the component to your primary stylesheet (e.g. `main.css`)
- * Example:
- * ```
- * @import "@mytiki/receipt-capacitor/dist/receipt-capacitor.css";
- * ```
- *
- * Once the {@link TikiService} is initialized, set the html boolean property `present`
- * to display the UI  (e.g. `:present="true"`).
- *
- * `present` implements a [two-way binding](https://vuejs.org/guide/components/v-model.html)
- * and for most use cases we recommend using `v-model` instead of a standard property binding.
- * This ensures the Ref stays in-sync with the UI state —the user can close the popup at anytime.
- *
- * @example
- * Add the Vue component:
- * ```
- * <script setup lang="ts">
- *     import { inject, ref } from "vue";
- *     import { TikiReceipt, type TikiService } from "@mytiki/receipt-capacitor";
- *
- *     const tiki: TikiService | undefined = inject("Tiki");
- *     tiki?.initialize("USER ID")
- *
- *     const present = ref(false);
- * </script>
- *
- * <template>
- *     <div>
- *        <button @click="present = !present">present</button>
- *        <tiki-receipt v-model:present="present" />
- *     </div>
- * </template>
- * ```
- *
- * @module tiki-receipt-capacitor
- */
-
 import type Vue from "vue";
 import "@/assets/styles/main.css";
 import TikiReceipt from "@/tiki-receipt.vue";
 import { TikiService } from "@/service";
 import type * as TikiOptions from "@/options";
 
-/**
- * @ignore
- */
 export default {
   install: (app: typeof Vue, options: TikiOptions.Options): void => {
     app.component("TikiReceipt", TikiReceipt);

diff --git a/vue2/package.json b/vue2/package.json
@@ -4,6 +4,7 @@
   "description": "The TIKI Receipt library adds to your Vue.js + Capacitor **mobile app** a Data Reward program for your users to share their receipts in-exchange for **cash from Tiki inc**. \n",
   "author": "Tiki inc.",
   "license": "MIT",
+  "homepage": "https://receipt-capacitor.mytiki.com",
   "repository": {
     "type": "git",
     "url": "https://github.com/tiki/tiki-receipt-capacitor.git"

diff --git a/vue3/main.ts b/vue3/main.ts
@@ -5,12 +5,14 @@
 
 /**
  * This module registers with a [Vue app](https://vuejs.org) the {@link TikiReceipt} component
- * and a singleton instance of the {@link TikiService}.
+ * and a singleton instance of the {@link TikiService}. Define a {@link TikiOptions.Options} object to specify licensing keys, styling, and content overrides.
  *
- * Define a {@link Config.Options} object to specify licensing keys, styling, and content overrides.
+ * This library is available for both Vue 2 (2.7.14) and Vue 3 (>=3.0.0).
+ * - For Vue 3 use the package: `@mytiki/receipt-capacitor`.
+ * - For Vue 2 use the package `@mytiki/receipt-capacitor-vue2`.
  *
  * @example
- * Register with application:
+ * Vue >=3.0.0 Registration
  * ```
  * import { createApp } from "vue";
  * import App from "@/app.vue";
@@ -19,30 +21,57 @@
  * createApp(App)
  *  .use(Tiki, {
  *    key: {
- *       publishingId: "YOUR TIKI PUBLISHING ID",
- *       scanKey: "YOUR MICROBLINK LICENSE KEY",
- *       intelKey: "YOUR MICROBLINK PRODUCT INTELLIGENCE KEY",
+ *      publishingId: "YOUR TIKI PUBLISHING ID",
+ *      android: "YOUR MICROBLINK ANDROID LICENSE KEY",
+ *      ios: "YOUR MICROBLINK IOS LICENSE KEY",
+ *      product: "YOUR MICROBLINK PRODUCT INTELLIGENCE KEY",
  *    },
  *    callback: (_total: number): number | undefined => undefined,
  *  })
  *  .mount("#app");
  * ```
  *
+ * @example
+ * Vue >=2.7.14 Registration
+ * ```
+ * import { createApp } from "vue";
+ * import App from "@/app.vue";
+ * import Tiki from "@mytiki/receipt-capacitor-vue2";
+ *
+ * Vue.use(Tiki, {
+ *    key: {
+ *      publishingId: "YOUR TIKI PUBLISHING ID",
+ *      android: "YOUR MICROBLINK ANDROID LICENSE KEY",
+ *      ios: "YOUR MICROBLINK IOS LICENSE KEY",
+ *      product: "YOUR MICROBLINK PRODUCT INTELLIGENCE KEY",
+ *    },
+ *    callback: (_total: number): number | undefined => undefined,
+ *  })
+ *
+ * new Vue({ render: (h) => h(App) }).$mount("#app");
+ * ```
+ *
  * Next, add the stylesheet for the component to your primary stylesheet (e.g. `main.css`)
  * Example:
+ * For Vue >=3.0.0
  * ```
  * @import "@mytiki/receipt-capacitor/dist/receipt-capacitor.css";
  * ```
  *
- * Once the {@link TikiService} is initialized, set the html boolean property `present`
- * to display the UI  (e.g. `:present="true"`).
+ * Example:
+ * For Vue 2.7.14
+ * ```
+ * @import "@mytiki/receipt-capacitor-vue2/dist/receipt-capacitor.css";
+ * ```
+ *
+ * Once the {@link TikiService} is initialized, add the {@link TikiReceipt} component to your template and set the html boolean property `present` to display the UI  (e.g. `:present="true"`).
  *
- * `present` implements a [two-way binding](https://vuejs.org/guide/components/v-model.html)
- * and for most use cases we recommend using `v-model` instead of a standard property binding.
- * This ensures the Ref stays in-sync with the UI state —the user can close the popup at anytime.
+ * _NOTE: `present` implements a [two-way binding](https://vuejs.org/guide/components/v-model.html)
+ * and for most use cases we recommend using a named (Vue 3) `v-model` instead of a standard property binding.
+ * This ensures the Ref stays in-sync with the UI state —the user can close the popup at anytime._
  *
  * @example
- * Add the Vue component:
+ * For Vue >=3.0.0:
  * ```
  * <script setup lang="ts">
  *     import { inject, ref } from "vue";
@@ -62,6 +91,27 @@
  * </template>
  * ```
  *
+ * @example
+ * For Vue >=2.7.14:
+ * ```
+ * <script setup lang="ts">
+ *     import { inject, ref } from "vue";
+ *     import { TikiReceipt, type TikiService } from "@mytiki/receipt-capacitor";
+ *
+ *     const tiki: TikiService | undefined = inject("Tiki");
+ *     tiki?.initialize("USER ID")
+ *
+ *     const present = ref(false);
+ * </script>
+ *
+ * <template>
+ *     <div>
+ *        <button @click="present = !present">present</button>
+ *        <tiki-receipt :present="present" @update:present="(val) => (present = val)"/>
+ *     </div>
+ * </template>
+ * ```
+ *
  * @module tiki-receipt-capacitor
  */
 

diff --git a/vue3/package.json b/vue3/package.json
@@ -4,6 +4,7 @@
   "description": "The TIKI Receipt library adds to your Vue.js + Capacitor **mobile app** a Data Reward program for your users to share their receipts in-exchange for **cash from Tiki inc**. \n",
   "author": "Tiki inc.",
   "license": "MIT",
+  "homepage": "https://receipt-capacitor.mytiki.com",
   "repository": {
     "type": "git",
     "url": "https://github.com/tiki/tiki-receipt-capacitor.git"