diff options
| -rw-r--r-- | components.d.ts | 1 | ||||
| -rw-r--r-- | src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts | 19 | ||||
| -rw-r--r-- | src/tools/iban-validator-and-parser/iban-validator-and-parser.vue | 2 | ||||
| -rw-r--r-- | src/ui/c-key-value-list/c-key-value-list-item.vue | 27 | ||||
| -rw-r--r-- | src/ui/c-key-value-list/c-key-value-list.vue | 30 | ||||
| -rw-r--r-- | src/ui/c-tooltip/c-tooltip.vue | 5 |
6 files changed, 50 insertions, 34 deletions
diff --git a/components.d.ts b/components.d.ts index b88ae98..af06dfb 100644 --- a/components.d.ts +++ b/components.d.ts @@ -33,6 +33,7 @@ declare module '@vue/runtime-core' { CInputText: typeof import('./src/ui/c-input-text/c-input-text.vue')['default'] 'CInputText.demo': typeof import('./src/ui/c-input-text/c-input-text.demo.vue')['default'] CKeyValueList: typeof import('./src/ui/c-key-value-list/c-key-value-list.vue')['default'] + CKeyValueListItem: typeof import('./src/ui/c-key-value-list/c-key-value-list-item.vue')['default'] CLabel: typeof import('./src/ui/c-label/c-label.vue')['default'] CLink: typeof import('./src/ui/c-link/c-link.vue')['default'] 'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default'] diff --git a/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts b/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts index 3501543..c4a9986 100644 --- a/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts +++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts @@ -1,14 +1,15 @@ import { type Page, expect, test } from '@playwright/test'; -import _ from 'lodash'; async function extractIbanInfo({ page }: { page: Page }) { - const tdHandles = await page.locator('table tr td').elementHandles(); - const tdTextContents = await Promise.all(tdHandles.map(el => el.textContent())); - - return _.chain(tdTextContents) - .map(tdTextContent => tdTextContent?.trim().replace(' Copy to clipboard', '')) - .chunk(2) - .value(); + const itemsLines = await page + .locator('.c-key-value-list__item').all(); + + return await Promise.all( + itemsLines.map(async item => [ + (await item.locator('.c-key-value-list__key').textContent() ?? '').trim(), + (await item.locator('.c-key-value-list__value').textContent() ?? '').trim(), + ]), + ); } test.describe('Tool - Iban validator and parser', () => { @@ -41,7 +42,7 @@ test.describe('Tool - Iban validator and parser', () => { expect(ibanInfo).toEqual([ ['Is IBAN valid ?', 'No'], - ['IBAN errors', 'Wrong account bank branch checksumWrong IBAN checksum Copy to clipboard'], + ['IBAN errors', 'Wrong account bank branch checksum Wrong IBAN checksum'], ['Is IBAN a QR-IBAN ?', 'No'], ['Country code', 'N/A'], ['BBAN', 'N/A'], diff --git a/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue b/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue index d5cdc02..647be98 100644 --- a/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue +++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue @@ -60,7 +60,7 @@ const ibanExamples = [ <div> <c-input-text v-model:value="rawIban" placeholder="Enter an IBAN to check for validity..." test-id="iban-input" /> - <c-key-value-list :items="ibanInfo" my-5 /> + <c-key-value-list :items="ibanInfo" my-5 data-test-id="iban-info" /> <c-card title="Valid IBAN examples"> <div v-for="iban in ibanExamples" :key="iban"> diff --git a/src/ui/c-key-value-list/c-key-value-list-item.vue b/src/ui/c-key-value-list/c-key-value-list-item.vue new file mode 100644 index 0000000..d21ef5d --- /dev/null +++ b/src/ui/c-key-value-list/c-key-value-list-item.vue @@ -0,0 +1,27 @@ +<script lang="ts" setup> +import _ from 'lodash'; +import type { CKeyValueListItem } from './c-key-value-list.types'; + +const props = defineProps<{ item: CKeyValueListItem }>(); +const { item } = toRefs(props); +</script> + +<template> + <div v-if="_.isArray(item.value)"> + <div v-for="value in item.value" :key="value"> + <c-text-copyable :value="value" :show-icon="item.showCopyButton ?? true" /> + </div> + </div> + <div v-else-if="_.isBoolean(item.value)"> + <c-text-copyable :value="item.value ? 'true' : 'false'" :displayed-value="item.value ? 'Yes' : 'No'" :show-icon="item.showCopyButton ?? true" /> + </div> + <div v-else-if="_.isNumber(item.value)" font-mono> + <c-text-copyable :value="String(item.value)" :show-icon="item.showCopyButton ?? true" /> + </div> + <div v-else-if="_.isNil(item.value) || item.value === ''" op-70> + {{ item.placeholder ?? 'N/A' }} + </div> + <div v-else> + <c-text-copyable :value="item.value" :show-icon="item.showCopyButton ?? true" /> + </div> +</template> diff --git a/src/ui/c-key-value-list/c-key-value-list.vue b/src/ui/c-key-value-list/c-key-value-list.vue index e3b19af..d8a2b00 100644 --- a/src/ui/c-key-value-list/c-key-value-list.vue +++ b/src/ui/c-key-value-list/c-key-value-list.vue @@ -9,29 +9,13 @@ const formattedItems = computed(() => items.value.filter(item => !_.isNil(item.v </script> <template> - <table border-collapse table-fixed> - <tr v-for="item in formattedItems" :key="item.label"> - <td py-1 pr-2 text-right font-bold> + <div my-5> + <div v-for="item in formattedItems" :key="item.label" flex gap-2 py-1 class="c-key-value-list__item"> + <div flex-basis-180px text-right font-bold class="c-key-value-list__key"> {{ item.label }} - </td> + </div> - <td v-if="_.isArray(item.value)"> - <div v-for="value in item.value" :key="value"> - <c-text-copyable :value="value" :show-icon="item.showCopyButton ?? true" /> - </div> - </td> - <td v-else-if="_.isBoolean(item.value)"> - <c-text-copyable :value="item.value ? 'true' : 'false'" :displayed-value="item.value ? 'Yes' : 'No'" :show-icon="item.showCopyButton ?? true" /> - </td> - <td v-else-if="_.isNumber(item.value)" font-mono> - <c-text-copyable :value="String(item.value)" :show-icon="item.showCopyButton ?? true" /> - </td> - <td v-else-if="_.isNil(item.value) || item.value === ''" op-70> - {{ item.placeholder ?? 'N/A' }} - </td> - <td v-else> - <c-text-copyable :value="item.value" :show-icon="item.showCopyButton ?? true" /> - </td> - </tr> - </table> + <c-key-value-list-item :item="item" class="c-key-value-list__value" /> + </div> + </div> </template> diff --git a/src/ui/c-tooltip/c-tooltip.vue b/src/ui/c-tooltip/c-tooltip.vue index cc48fe1..24c586b 100644 --- a/src/ui/c-tooltip/c-tooltip.vue +++ b/src/ui/c-tooltip/c-tooltip.vue @@ -19,7 +19,10 @@ const isTargetHovered = useElementHover(targetRef); 'op-100 scale-100': isTargetHovered, }" > - <slot name="tooltip"> + <slot + v-if="isTargetHovered" + name="tooltip" + > {{ tooltip }} </slot> </div> |