Skip to content

refactor(c-key-value-list): got rid of table for layout #611

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 3, 2023
Merged

refactor(c-key-value-list): got rid of table for layout #611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand Down
19 changes: 10 additions & 9 deletions src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand Down Expand Up @@ -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'],
Expand Down
2 changes: 1 addition & 1 deletion src/tools/iban-validator-and-parser/iban-validator-and-parser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
27 changes: 27 additions & 0 deletions src/ui/c-key-value-list/c-key-value-list-item.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
30 changes: 7 additions & 23 deletions src/ui/c-key-value-list/c-key-value-list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
5 changes: 4 additions & 1 deletion src/ui/c-tooltip/c-tooltip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down