From 6e9531655464d0a2e6de1ca38ea11a59ecc2de6d Mon Sep 17 00:00:00 2001
From: brianvoe <bvoelker@fluidpay.com>
Date: Tue, 2 Jul 2024 10:18:50 -0500
Subject: [PATCH] docs - minor updates

---
 src/docs/app.vue       |  9 ++---
 src/docs/examples.vue  | 64 +++++++++++++----------------------
 src/docs/functions.vue | 27 +++++++--------
 src/docs/heading.vue   | 75 ++++++++++++++++--------------------------
 src/docs/home.vue      | 32 +++++++++---------
 src/docs/vue.vue       | 74 +++++++++++++++++++----------------------
 6 files changed, 116 insertions(+), 165 deletions(-)

diff --git a/src/docs/app.vue b/src/docs/app.vue
index 91d6619..d0fafe2 100644
--- a/src/docs/app.vue
+++ b/src/docs/app.vue
@@ -5,8 +5,8 @@ import Heading from './heading.vue'
 export default defineComponent({
   name: 'App',
   components: {
-    Heading,
-  },
+    Heading
+  }
 })
 </script>
 
@@ -58,10 +58,7 @@ export default defineComponent({
       <Heading />
 
       <router-view v-slot="{ Component }">
-        <transition
-          mode="out-in"
-          name="slide-left"
-        >
+        <transition mode="out-in" name="slide-left">
           <component :is="Component" />
         </transition>
       </router-view>
diff --git a/src/docs/examples.vue b/src/docs/examples.vue
index 99dfe18..28e5fa2 100644
--- a/src/docs/examples.vue
+++ b/src/docs/examples.vue
@@ -9,12 +9,12 @@ export default defineComponent({
       disabled: null as FPMoney | null,
       displayOnly: null as FPMoney | null,
 
-      curSelectionValues: {} as Values,
+      curSelectionValues: {} as Values
     }
   },
   mounted() {
     new FPMoney({
-      container: document.querySelector('#exampleBasic') as HTMLDivElement,
+      container: document.querySelector('#exampleBasic') as HTMLDivElement
     })
 
     new FPMoney({
@@ -22,34 +22,38 @@ export default defineComponent({
       showSelection: true,
       onChange: (values) => {
         this.curSelectionValues = values
-      },
+      }
     })
 
     this.disabled = new FPMoney({
       container: document.querySelector('#exampleDisabled') as HTMLDivElement,
       value: 86753.09,
-      disabled: true,
+      disabled: true
     })
 
     this.displayOnly = new FPMoney({
       container: document.querySelector('#exampleDisplayOnly') as HTMLDivElement,
       value: 86753.09,
-      displayOnly: true,
+      displayOnly: true
     })
 
     new FPMoney({
       container: document.querySelector('#exampleMinValue') as HTMLDivElement,
-      minValue: 0,
+      minValue: 0
     })
   },
   methods: {
     toggleDisabled() {
-      this.disabled.setDisabled(!this.disabled.disabled)
+      if (this.disabled) {
+        this.disabled.setDisabled(!this.disabled.disabled)
+      }
     },
     toggleDisplayOnly() {
-      this.displayOnly.setDisplayOnly(!this.displayOnly.displayOnly)
-    },
-  },
+      if (this.displayOnly) {
+        this.displayOnly.setDisplayOnly(!this.displayOnly.displayOnly)
+      }
+    }
+  }
 })
 </script>
 
@@ -89,13 +93,8 @@ export default defineComponent({
 <template>
   <div class="examples">
     <div class="section">
-      <div class="header">
-        Basic
-      </div>
-      <div
-        id="exampleBasic"
-        class="example"
-      />
+      <div class="header">Basic</div>
+      <div id="exampleBasic" class="example" />
       <pre>
         <code class="language-javascript">
           new FPMoney({
@@ -106,13 +105,8 @@ export default defineComponent({
     </div>
 
     <div class="section">
-      <div class="header">
-        Currency Selection
-      </div>
-      <div
-        id="exampleSelection"
-        class="example"
-      />
+      <div class="header">Currency Selection</div>
+      <div id="exampleSelection" class="example" />
       <div>{{ curSelectionValues }}</div>
       <pre>
         <code class="language-javascript">
@@ -125,15 +119,10 @@ export default defineComponent({
     </div>
 
     <div class="section">
-      <div class="header">
-        Disabled
-      </div>
+      <div class="header">Disabled</div>
       <div class="row example">
         <div id="exampleDisabled" />
-        <button
-          v-if="disabled"
-          @click="toggleDisabled()"
-        >
+        <button v-if="disabled" @click="toggleDisabled()">
           {{ disabled.disabled ? 'Enable' : 'Disable' }}
         </button>
       </div>
@@ -153,15 +142,10 @@ export default defineComponent({
     </div>
 
     <div class="section">
-      <div class="header">
-        Display Only
-      </div>
+      <div class="header">Display Only</div>
       <div class="example row">
         <div id="exampleDisplayOnly" />
-        <button
-          v-if="disabled"
-          @click="toggleDisplayOnly()"
-        >
+        <button v-if="disabled && displayOnly" @click="toggleDisplayOnly()">
           {{ displayOnly.displayOnly ? 'Enable' : 'Disable' }}
         </button>
       </div>
@@ -181,9 +165,7 @@ export default defineComponent({
     </div>
 
     <div class="section">
-      <div class="header">
-        Min Value
-      </div>
+      <div class="header">Min Value</div>
       <div class="example row">
         <div id="exampleMinValue" />
       </div>
diff --git a/src/docs/functions.vue b/src/docs/functions.vue
index 5feace4..7a34efb 100644
--- a/src/docs/functions.vue
+++ b/src/docs/functions.vue
@@ -5,8 +5,7 @@ import { fractionToInt, intToFraction, displayValue, getLocale } from '../fp-mon
 export default defineComponent({
   name: 'Functions',
   data() {
-    return {
-    }
+    return {}
   },
   methods: {
     fractionToInt(value: number, fraction: number) {
@@ -26,15 +25,17 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-  .functions {
-    .section {
-      .item {
-        padding: 0 0 var(--spacing-m) 0;
+.functions {
+  .section {
+    .item {
+      padding: 0 0 var(--spacing-m) 0;
 
-        &:last-child { padding: 0 0 0 0; }
+      &:last-child {
+        padding: 0 0 0 0;
       }
     }
   }
+}
 </style>
 
 <template>
@@ -51,18 +52,12 @@ export default defineComponent({
       </code>
     </pre>
     <div class="section">
-      <div class="item">
-        fractionToInt(value, fraction): 86753.09 - {{ fractionToInt(86753.09, 2) }}
-      </div>
-      <div class="item">
-        intToFraction(value, fraction): 8675309 - {{ intToFraction(8675309, 2) }}
-      </div>
+      <div class="item">fractionToInt(value, fraction): 86753.09 - {{ fractionToInt(86753.09, 2) }}</div>
+      <div class="item">intToFraction(value, fraction): 8675309 - {{ intToFraction(8675309, 2) }}</div>
       <div class="item">
         displayValue(value, currency, fraction, locale): 86753.09 - {{ displayValue(86753.09, 'usd', 2, 'en-us') }}
       </div>
-      <div class="item">
-        getLocale(): {{ getLocale() }}
-      </div>
+      <div class="item">getLocale(): {{ getLocale() }}</div>
     </div>
   </div>
 </template>
diff --git a/src/docs/heading.vue b/src/docs/heading.vue
index b1e20db..3261dec 100644
--- a/src/docs/heading.vue
+++ b/src/docs/heading.vue
@@ -6,62 +6,45 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-  .header {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+.header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 
-    .title {
-      font-size: 42px;
-      font-weight: bold;
-      color: var(--color-white);
-      text-align: center;
-      padding: var(--spacing-m) 0 var(--spacing-s) 0;
-    }
+  .title {
+    font-size: 42px;
+    font-weight: bold;
+    color: var(--color-white);
+    text-align: center;
+    padding: var(--spacing-m) 0 var(--spacing-s) 0;
+  }
 
-    .menu {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      padding: var(--spacing-l);
+  .menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: var(--spacing-l);
 
-      a {
-        color: var(--color-white);
-        font-size: 16px;
-        font-weight: bold;
-        margin: 0 var(--spacing-m) 0 var(--spacing-m);
-      }
+    a {
+      color: var(--color-white);
+      font-size: 16px;
+      font-weight: bold;
+      margin: 0 var(--spacing-m) 0 var(--spacing-m);
     }
   }
+}
 </style>
 
 <template>
   <div class="header">
-    <div class="title">
-      FluidPay Money Formatter
-    </div>
+    <div class="title">FluidPay Money Formatter</div>
     <div class="menu">
-      <router-link to="/">
-        Home
-      </router-link>
-      <router-link to="/examples">
-        Examples
-      </router-link>
-      <router-link to="/functions">
-        Functions
-      </router-link>
-      <router-link to="/vue">
-        Vue
-      </router-link>
-      <a
-        target="_blank"
-        href="http://github.com/fluidpay/fp-money"
-      >
-        <img
-          height="20"
-          alt="Github Logomark"
-          src="./assets/images/github.png"
-        >
+      <router-link to="/"> Home </router-link>
+      <router-link to="/examples"> Examples </router-link>
+      <router-link to="/functions"> Functions </router-link>
+      <router-link to="/vue"> Vue </router-link>
+      <a target="_blank" href="http://github.com/fluidpay/fp-money">
+        <img height="20" alt="Github Logomark" src="./assets/images/github.png" />
       </a>
     </div>
   </div>
diff --git a/src/docs/home.vue b/src/docs/home.vue
index a5189ac..26a457e 100644
--- a/src/docs/home.vue
+++ b/src/docs/home.vue
@@ -33,30 +33,30 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-  .basic {
-    #example {
-      width: 200px;
-      margin: 0 auto;
-      margin-bottom: var(--spacing-l);
-    }
+.basic {
+  #example {
+    width: 200px;
+    margin: 0 auto;
+    margin-bottom: var(--spacing-l);
+  }
 
-    .outputs {
-      padding: 0 0 var(--spacing-l) 0;
-      color: #ffffff;
-      font-weight: bold;
-      font-size: 18px;
-      text-align: center;
-    }
+  .outputs {
+    padding: 0 0 var(--spacing-l) 0;
+    color: #ffffff;
+    font-weight: bold;
+    font-size: 18px;
+    text-align: center;
   }
+}
 </style>
 
 <template>
   <div class="basic">
     <div id="example" />
     <div class="outputs">
-      Value: {{ value }}<br>
-      Format: {{ format }}<br>
-      Display: {{ display }}<br>
+      Value: {{ value }}<br />
+      Format: {{ format }}<br />
+      Display: {{ display }}<br />
       Currency: {{ currency }}
     </div>
     <pre>
diff --git a/src/docs/vue.vue b/src/docs/vue.vue
index b0ddf20..4706fb5 100644
--- a/src/docs/vue.vue
+++ b/src/docs/vue.vue
@@ -36,7 +36,6 @@ export default defineComponent({
     //   // this.value = Math.random() * 1000
     //   this.value = chance.integer({ min: 1000, max: 100000 })
     // }, 5000)
-
     // setTimeout(() => {
     //   this.currencies = {
     //     PER: {
@@ -48,46 +47,42 @@ export default defineComponent({
     //       fraction: 2
     //     }
     //   }
-
     //   this.currency = 'CAD'
-
-      // setTimeout(() => {
-      //   this.value = 500
-      // }, 1000)
-
-      // setTimeout(() => {
-      //   this.currency = 'cad'
-      // }, 2000)
-
-      // setTimeout(() => {
-      //   this.currency = 'per'
-      // }, 3000)
+    // setTimeout(() => {
+    //   this.value = 500
+    // }, 1000)
+    // setTimeout(() => {
+    //   this.currency = 'cad'
+    // }, 2000)
+    // setTimeout(() => {
+    //   this.currency = 'per'
+    // }, 3000)
     // }, 3000)
   },
   methods: {
     change(values: Values) {
-      console.log(values)
+      // console.log('onChange', values)
     }
   }
 })
 </script>
 
 <style lang="scss">
-  .vue {
-    #example {
-      width: 250px;
-      margin: 0 auto;
-      margin-bottom: var(--spacing-l);
-    }
+.vue {
+  #example {
+    width: 250px;
+    margin: 0 auto;
+    margin-bottom: var(--spacing-l);
+  }
 
-    .outputs {
-      padding: 0 0 var(--spacing-l) 0;
-      color: #ffffff;
-      font-weight: bold;
-      font-size: 18px;
-      text-align: center;
-    }
+  .outputs {
+    padding: 0 0 var(--spacing-l) 0;
+    color: #ffffff;
+    font-weight: bold;
+    font-size: 18px;
+    text-align: center;
   }
+}
 </style>
 
 <template>
@@ -104,14 +99,14 @@ export default defineComponent({
       :show-selection="true"
     />
     <!-- <FPMoneyComp id="example" v-model="value" valueFormat="int" /> -->
-    
+
     <div class="outputs">
-      Value: {{ value }}<br>
-      Format: {{ format }}<br>
-      Display: {{ display }}<br>
+      Value: {{ value }}<br />
+      Format: {{ format }}<br />
+      Display: {{ display }}<br />
       Currency: {{ currency }}
     </div>
-    
+
     <pre>
       <code class="language-javascript">
         import fpmoney from 'fp-money/dist/fp-money-vue.js'
@@ -139,16 +134,15 @@ export default defineComponent({
     <pre>
       <code class="language-html">
         &lt;fpmoney id="example"
-          v-model="value"             &lt;-- Required
-
           // Dynamic, and will emit an update
-          :value.sync="int"           &lt;-- Optional
-          :format.sync="format"       &lt;-- Optional
-          :display.sync="display"     &lt;-- Optional
-          :currency.sync="currency"   &lt;-- Optional
+          v-model="value"             &lt;-- Required
+          v-model:format="format"     &lt;-- Optional
+          v-model:display="display"   &lt;-- Optional
+          v-model:currency="currency" &lt;-- Optional
+          v-model:locale="locale"     &lt;-- Optional
 
           // Static, only initially set
-          :locale="locale"            &lt;-- Optional
+          :currencies="currencies"    &lt;-- Optional
           :disabled="false"           &lt;-- Optional
           :displayOnly="false"        &lt;-- Optional
           valueFormat="float | int"   &lt;-- Optional - default float