docs - minor updates

fluidpay · Jul 2, 2024 · 6e95316 · 6e95316
1 parent 94548c9
commit 6e95316
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 165 deletions.
diff --git 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
@@ -9,47 +9,51 @@ 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({
       container: document.querySelector('#exampleSelection') as HTMLDivElement,
       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
@@ -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
@@ -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
@@ -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>