paulmataruso/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-10-25 00:53:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(lint): switched to a better lint config

Browse Source
This commit is contained in:
Corentin Thomasset
2023-05-28 23:13:24 +02:00
committed by Corentin THOMASSET
parent 4d2b037dbe
commit 33c9b6643f
178 changed files with 4105 additions and 3371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
View File

@@ -1,44 +1,14 @@
<template>
<div>
<n-form-item label="Default country code:">
<n-select v-model:value="defaultCountryCode" :options="countriesOptions" />
</n-form-item>
<c-input-text
v-model:value="rawPhone"
placeholder="Enter a phone number"
label="Phone number:"
:validation="validation"
mb-5
/>
<n-table v-if="parsedDetails">
<tbody>
<tr v-for="{ label, value } in parsedDetails" :key="label">
<td>
<n-text strong>{{ label }}</n-text>
</td>
<td>
<span-copyable v-if="value" :value="value"></span-copyable>
<n-text v-else depth="3" italic>Unknown</n-text>
</td>
</tr>
</tbody>
</n-table>
</div>
</template>
<script setup lang="ts">
import { withDefaultOnError } from '@/utils/defaults';
import { parsePhoneNumber, getCountries, getCountryCallingCode } from 'libphonenumber-js/max';
import { booleanToHumanReadable } from '@/utils/boolean';
import { useValidation } from '@/composable/validation';
import { getCountries, getCountryCallingCode, parsePhoneNumber } from 'libphonenumber-js/max';
import lookup from 'country-code-lookup';
import {
formatTypeToHumanReadable,
getFullCountryName,
getDefaultCountryCode,
getFullCountryName,
} from './phone-parser-and-formatter.models';
import { withDefaultOnError } from '@/utils/defaults';
import { booleanToHumanReadable } from '@/utils/boolean';
import { useValidation } from '@/composable/validation';
const rawPhone = ref('');
const defaultCountryCode = ref(getDefaultCountryCode());
@@ -46,18 +16,22 @@ const validation = useValidation({
source: rawPhone,
rules: [
{
validator: (value) => value === '' || /^[0-9 +\-()]+$/.test(value),
validator: value => value === '' || /^[0-9 +\-()]+$/.test(value),
message: 'Invalid phone number',
},
],
});
const parsedDetails = computed(() => {
if (!validation.isValid) return undefined;
if (!validation.isValid) {
return undefined;
}
const parsed = withDefaultOnError(() => parsePhoneNumber(rawPhone.value, defaultCountryCode.value), undefined);
if (!parsed) return undefined;
if (!parsed) {
return undefined;
}
return [
{
@@ -103,10 +77,42 @@ const parsedDetails = computed(() => {
];
});
const countriesOptions = getCountries().map((code) => ({
const countriesOptions = getCountries().map(code => ({
label: `${lookup.byIso(code)?.country || code} (+${getCountryCallingCode(code)})`,
value: code,
}));
</script>
<style lang="less" scoped></style>
<template>
<div>
<n-form-item label="Default country code:">
<n-select v-model:value="defaultCountryCode" :options="countriesOptions" />
</n-form-item>
<c-input-text
v-model:value="rawPhone"
placeholder="Enter a phone number"
label="Phone number:"
:validation="validation"
mb-5
/>
<n-table v-if="parsedDetails">
<tbody>
<tr v-for="{ label, value } in parsedDetails" :key="label">
<td>
<n-text strong>
{{ label }}
</n-text>
</td>
<td>
<span-copyable v-if="value" :value="value" />
<n-text v-else depth="3" italic>
Unknown
</n-text>
</td>
</tr>
</tbody>
</n-table>
</div>
</template>