Update examples for formatters

littlefoxcompany · Mar 1, 2024 · ee2e4bf · ee2e4bf
1 parent 9bdb4e0
commit ee2e4bf
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/nuxt-module/docs/components/content/formatters/FormatCurrency.vue b/nuxt-module/docs/components/content/formatters/FormatCurrency.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-  const currency = ref(0.000009)
-  const decimals = ref(19)
+  const currency = ref(0.000009876)
+  const decimals = ref(7)
   const locale = ref('en-US')
 </script>
diff --git a/nuxt-module/docs/components/content/formatters/FormatDurationNumbers.vue b/nuxt-module/docs/components/content/formatters/FormatDurationNumbers.vue
@@ -10,5 +10,5 @@
 </template>
 
 <script setup lang="ts">
-  const seconds = ref(987654321)
+  const seconds = ref(987)
 </script>
diff --git a/nuxt-module/docs/components/content/formatters/FormatNumber.vue b/nuxt-module/docs/components/content/formatters/FormatNumber.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-  const currency = ref(12345678.1242)
-  const decimals = ref(8)
+  const currency = ref(12345.1242)
+  const decimals = ref(2)
   const locale = ref('en-US')
 </script>
diff --git a/nuxt-module/docs/components/content/formatters/FormatPercentage.vue b/nuxt-module/docs/components/content/formatters/FormatPercentage.vue
@@ -2,13 +2,19 @@
   <Example>
     <ExampleInputs>
       <FormInput label="Value" type="number" v-model.number="percentage" step="0.01" />
+      <FormNumber label="Decimals" v-model="decimals" />
+      <FormSelect label="Locale" v-model="locale">
+        <option v-for="locale in configLocales" :value="locale" :key="locale">{{ locale }}</option>
+      </FormSelect>
     </ExampleInputs>
     <ExampleResult>
-      {{ formatPercentage(percentage) }}
+      {{ formatPercentage(percentage, decimals, locale) }}
     </ExampleResult>
   </Example>
 </template>
 
 <script setup lang="ts">
   const percentage = ref(0.12)
+  const decimals = ref(0)
+  const locale = ref('en-US')
 </script>
diff --git a/nuxt-module/docs/components/form/Number.vue b/nuxt-module/docs/components/form/Number.vue
@@ -22,13 +22,15 @@
       <div v-if="!disabled" class="flex items-center gap-1">
         <button
           type="button"
+          name="decrement"
           class="transtion-all flex text-zinc-500 opacity-50 hover:text-white hover:opacity-100"
           @click.stop="$emit('update:modelValue', Number(modelValue) - 1)"
           :class="Number(modelValue) <= Number(min) ? 'pointer-events-none cursor-not-allowed opacity-30 hover:opacity-30' : ''">
           <Icon name="heroicons:minus-circle-20-solid" class="h-5 w-5 text-indigo-600 dark:text-white" />
         </button>
         <button
           type="button"
+          name="increment"
           class="transtion-all flex text-zinc-500 opacity-50 hover:text-white hover:opacity-100"
           @click.stop="$emit('update:modelValue', Number(modelValue) + 1)">
           <Icon name="heroicons:plus-circle-20-solid" class="h-5 w-5 text-indigo-600 dark:text-white" />