1,655th Commit

Author: Shyam-Chen

app/src/routes/(backstage)/(library)/data-entry/input-mask/+page.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { XBreadcrumb, XCard, XCode, XInputMask } from '@x/ui';
-import { reactive } from 'vue';
+import { XBreadcrumb, XCard, XCode, XDivider, XInputMask, XSelect } from '@x/ui';
+import { onMounted, reactive } from 'vue';
 
 const flux = reactive({
   numberMasked: '',
@@ -10,14 +10,49 @@ const flux = reactive({
   percentUnmasked: undefined,
 
   phoneMasked: '',
-  phoneUnmasked: '',
+  phoneUnmasked: undefined as string | null | undefined,
+
+  phone2: '',
+  phone2Options: [
+    {
+      label: 'United States (+1)',
+      value: '{+1} (000) 000-0000',
+      placeholder: '+1 (___) ___-____',
+    },
+    {
+      label: 'Japan (+81)',
+      value: '{+81} 00-0000-0000',
+      placeholder: '+81 __-____-____',
+    },
+    {
+      label: 'South Korea (+82)',
+      value: '{+82} 00-0000-0000',
+      placeholder: '+82 __-____-____',
+    },
+    {
+      label: 'Taiwan (+886)',
+      value: '{+886} 000-000-000',
+      placeholder: '+886 ___-___-___',
+    },
+  ],
+  phone2Key: 1,
+  phone2Masked: '',
+  phone2Unmasked: undefined,
+  phone2Placeholder: '',
 
   usdMasked: '',
-  usdUnmasked: '',
+  usdUnmasked: undefined,
 
   verificationCodeMasked: '',
   verificationCodeUnmasked: undefined,
 });
+
+onMounted(() => {
+  // mock data from the response
+  const phoneUnmasked = '+12123456789';
+  flux.phoneMasked = phoneUnmasked;
+  flux.phoneUnmasked = phoneUnmasked;
+});
 </script>
 
 <template>
@@ -92,14 +127,51 @@ const flux = reactive({
       <XInputMask
         v-model:masked="flux.phoneMasked"
         v-model:unmasked="flux.phoneUnmasked"
-        :mask="{ mask: '+{1} (000) 000-0000' }"
+        :mask="{ mask: '{+1} (000) 000-0000' }"
         label="Phone Label"
         placeholder="+1 (___) ___-____"
       />
 
       <div class="mt-1">
         <div>Masked: {{ flux.phoneMasked }}</div>
-        <div>Unmasked: {{ flux.phoneUnmasked }}</div>
+        <div>
+          Unmasked: {{ flux.phoneUnmasked }}
+          <XCode>{{ typeof flux.phoneUnmasked }}</XCode>
+        </div>
+      </div>
+
+      <XDivider />
+
+      <div class="flex flex-col md:flex-row gap-2">
+        <XSelect
+          v-model:value="flux.phone2"
+          label="Phone 2 Label"
+          :options="flux.phone2Options"
+          @change="
+            (_val, opt) => {
+              flux.phone2Placeholder = opt.placeholder;
+              flux.phone2Key += 1;
+              flux.phone2Masked = '';
+              flux.phone2Unmasked = undefined;
+            }
+          "
+        />
+        <XInputMask
+          :key="flux.phone2Key"
+          v-model:masked="flux.phone2Masked"
+          v-model:unmasked="flux.phone2Unmasked"
+          :mask="{ mask: flux.phone2 }"
+          sub
+          :placeholder="flux.phone2Placeholder"
+        />
+      </div>
+
+      <div class="mt-1">
+        <div>Masked: {{ flux.phone2Masked }}</div>
+        <div>
+          Unmasked: {{ flux.phone2Unmasked }}
+          <XCode>{{ typeof flux.phone2Unmasked }}</XCode>
+        </div>
       </div>
     </XCard>
   </section>
@@ -127,7 +199,10 @@ const flux = reactive({
 
       <div class="mt-1">
         <div>Masked: {{ flux.usdMasked }}</div>
-        <div>Unmasked: {{ flux.usdUnmasked }}</div>
+        <div>
+          Unmasked: {{ flux.usdUnmasked }}
+          <XCode>{{ typeof flux.usdUnmasked }}</XCode>
+        </div>
       </div>
     </XCard>
   </section>