Skip to content

Commit

Permalink
Merge pull request #207 from OnroerendErfgoed/develop
Browse files Browse the repository at this point in the history 
release 1.2.0
  • Loading branch information
@cedrikv
cedrikv authored Jan 26, 2024
2 parents e17176d + aede2ca commit a70a284
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 141 deletions.
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"main": "./dist/vue-components.umd.js",
"module": "./dist/vue-components.es.js",
"typings": "./dist/src/main.d.ts",
"version": "1.1.0",
"version": "1.2.0",
"exports": {
".": {
"import": "./dist/vue-components.es.js",
Expand Down Expand Up @@ -88,7 +88,7 @@
"@storybook/builder-vite": "^7.6.4",
"@storybook/testing-library": "^0.2.2",
"@storybook/vue3-vite": "^7.6.4",
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
"@trivago/prettier-plugin-sort-imports": "4.1.0",
"@types/node": "^18.14.2",
"@types/proj4": "^2.5.2",
"@types/tinymce": "^4.6.6",
Expand All @@ -103,17 +103,17 @@
"chromatic": "^6.17.3",
"cypress": "^13.2.0",
"cypress-watch-and-reload": "^1.10.6",
"eslint": "^8.56.0",
"eslint": "^8.34.0",
"eslint-config-prettier": "^8.8.0",
"eslint-import-resolver-typescript": "^3.5.5",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-storybook": "^0.6.15",
"eslint-plugin-vue": "^9.11.0",
"npm-run-all": "^4.1.5",
"path": "^0.12.7",
"prettier": "^3.2.3",
"prettier": "^2.8.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rollup-plugin-copy": "^3.4.0",
Expand Down
28 changes: 28 additions & 0 deletions src/__tests__/InputPhone.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,34 @@ describe('InputPhone', () => {
cy.mount(TestComponent);
});

it('sets default prefix classes', () => {
cy.mount(TestComponent);
cy.dataCy('prefix').should('have.class', 'vl-col--1-6 vl-col--2-6--m vl-col--3-6--xs');
});

it('sets default input field classes', () => {
cy.mount(TestComponent);
cy.dataCy('input-phone').should('have.class', 'vl-col--5-6 vl-col--4-6--m vl-col--3-6--xs');
});

it('sets configured prefix classes', () => {
cy.mount(TestComponent, {
props: {
prefixClass: 'test',
},
});
cy.dataCy('prefix').should('have.class', 'test');
});

it('sets configured input field classes', () => {
cy.mount(TestComponent, {
props: {
inputFieldClass: 'test',
},
});
cy.dataCy('input-phone').should('have.class', 'test');
});

describe('BE', () => {
it('renders a placeholder according to selected country', () => {
cy.mount(TestComponent);
Expand Down
86 changes: 60 additions & 26 deletions src/__tests__/OeAdres.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import { mount } from 'cypress/vue';
import { defineComponent } from 'vue';
import { defineComponent, useAttrs } from 'vue';
import OeAdres from '@components/smart/OeAdres.vue';
import type { IAdresConfig } from '@models/adres';

describe('Adres', () => {
const TestComponent = defineComponent({
components: { OeAdres },
template: '<Suspense><OeAdres/></Suspense>',
setup() {
const attrs = useAttrs();
return { attrs };
},
template: '<Suspense><OeAdres v-bind="attrs"/></Suspense>',
});

it('renders', () => {
Expand All @@ -23,20 +27,20 @@ describe('Adres', () => {
mount(TestComponent);
});

it('has an input label land - required', () => {
getLabel('land').should('have.text', 'Land(verplicht)');
it('has an input label land', () => {
getLabel('land').should('have.text', 'Land');
});

it('has an input label gemeente - required', () => {
getLabel('gemeente').should('have.text', 'Gemeente(verplicht)');
it('has an input label gemeente', () => {
getLabel('gemeente').should('have.text', 'Gemeente');
});

it('has an input label postcode - required', () => {
getLabel('postcode').should('have.text', 'Postcode(verplicht)');
it('has an input label postcode', () => {
getLabel('postcode').should('have.text', 'Postcode');
});

it('has an input label straat - required', () => {
getLabel('straat').should('have.text', 'Straat(verplicht)');
it('has an input label straat', () => {
getLabel('straat').should('have.text', 'Straat');
});

it('has an input label huisnummer', () => {
Expand Down Expand Up @@ -139,8 +143,8 @@ describe('Adres', () => {
getMultiSelect('straat').parent().should('have.class', 'vl-multiselect--error');
getFormError('straat').should('have.text', 'Het veld straat is verplicht.');

getMultiSelect('huisnummer').parent().should('not.have.class', 'vl-multiselect--error');
getFormError('huisnummer').should('not.exist');
getMultiSelect('huisnummer').parent().should('have.class', 'vl-multiselect--error');
getFormError('huisnummer').should('have.text', 'Het veld huisnummer is verplicht.');

getMultiSelect('busnummer').parent().should('not.have.class', 'vl-multiselect--error');
getFormError('busnummer').should('not.exist');
Expand Down Expand Up @@ -307,15 +311,45 @@ describe('Adres', () => {
getTextInput('straat').should('have.class', 'vl-input-field--error');
getFormError('straat').should('have.text', 'Het veld straat is verplicht.');

getTextInput('huisnummer').should('not.have.class', 'vl-input-field--error');
getFormError('huisnummer').should('not.exist');
getTextInput('huisnummer').should('have.class', 'vl-input-field--error');
getFormError('huisnummer').should('have.text', 'Het veld huisnummer is verplicht.');

getTextInput('busnummer').should('not.have.class', 'vl-input-field--error');
getFormError('busnummer').should('not.exist');
});
});
});

describe('form - show required annotation per field', () => {
beforeEach(() => {
mount(TestComponent, { props: { showRequiredPerField: true } });
});

it('has an input label land', () => {
getLabel('land').should('have.text', 'LandVERPLICHT');
});

it('has an input label gemeente', () => {
getLabel('gemeente').should('have.text', 'GemeenteVERPLICHT');
});

it('has an input label postcode', () => {
getLabel('postcode').should('have.text', 'PostcodeVERPLICHT');
});

it('has an input label straat', () => {
getLabel('straat').should('have.text', 'StraatVERPLICHT');
});

it('has an input label huisnummer', () => {
getLabel('huisnummer').should('have.text', 'HuisnummerVERPLICHT');
});

it('has an input label busnummer', () => {
getLabel('busnummer').should('have.text', 'Busnummer');
});
});

describe('form - 2-way binding', () => {
it('fills in the predefined values', () => {
mount(TestComponent, {
Expand Down Expand Up @@ -451,12 +485,12 @@ describe('Adres', () => {
});
});

it('has an input label land - required', () => {
getLabel('land').should('have.text', 'Land(verplicht)');
it('has an input label land', () => {
getLabel('land').should('have.text', 'Land');
});

it('has an input label gemeente - required', () => {
getLabel('gemeente').should('have.text', 'Gemeente(verplicht)');
it('has an input label gemeente', () => {
getLabel('gemeente').should('have.text', 'Gemeente');
});

it('has an input label postcode', () => {
Expand Down Expand Up @@ -526,28 +560,28 @@ describe('Adres', () => {
});
});

it('has an input label land - required', () => {
getLabel('land').should('have.text', 'Land(verplicht)');
it('has an input label land', () => {
getLabel('land').should('have.text', 'Land');
});

it('has an input label gemeente - required', () => {
getLabel('gemeente').should('have.text', 'Gemeente(verplicht)');
it('has an input label gemeente', () => {
getLabel('gemeente').should('have.text', 'Gemeente');
});

it('has an input label postcode', () => {
getLabel('postcode').should('have.text', 'Postcode(verplicht)');
getLabel('postcode').should('have.text', 'Postcode');
});

it('has an input label straat', () => {
getLabel('straat').should('have.text', 'Straat(verplicht)');
getLabel('straat').should('have.text', 'Straat');
});

it('has an input label huisnummer', () => {
getLabel('huisnummer').should('have.text', 'Huisnummer(verplicht)');
getLabel('huisnummer').should('have.text', 'Huisnummer');
});

it('has an input label busnummer', () => {
getLabel('busnummer').should('have.text', 'Busnummer(verplicht)');
getLabel('busnummer').should('have.text', 'Busnummer');
});

it('triggers required validation after fields are touched and emptied', () => {
Expand Down
12 changes: 10 additions & 2 deletions src/components/dumb/InputPhone.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="input-phone vl-grid" data-cy="input-phone-wrapper">
<div class="vl-col--1-6 vl-col--2-6--m vl-col--3-6--xs">
<div :class="prefixClass" data-cy="prefix">
<vl-multiselect
v-bind="$attrs"
v-model="countryCode"
Expand Down Expand Up @@ -29,7 +29,7 @@
data-cy="input-phone"
:mod-error="(phoneNumberValue && inputTouched && !phoneNumberParsed?.isValid()) || $attrs['mod-error']"
:placeholder="phoneNumberExample"
class="vl-col--5-6 vl-col--4-6--m vl-col--3-6--xs"
:class="inputFieldClass"
type="tel"
@blur="inputTouched = true"
></vl-input-field>
Expand Down Expand Up @@ -63,6 +63,14 @@ const props = withDefaults(defineProps<IInputPhoneProps>(), {
});
const emit = defineEmits(['update:modelValue']);
// Classes
const prefixClass = computed(() =>
props.prefixClass ? props.prefixClass : 'vl-col--1-6 vl-col--2-6--m vl-col--3-6--xs'
);
const inputFieldClass = computed(() =>
props.inputFieldClass ? props.inputFieldClass : 'vl-col--5-6 vl-col--4-6--m vl-col--3-6--xs'
);
// Country code
const countryCodeList = ref<ICountryCode[]>([
{ value: '+32', description: '(+32) België', code: 'BE' },
Expand Down
43 changes: 23 additions & 20 deletions src/components/smart/OeAdres.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<template>
<div class="oe-adres">
<VlProperties>
<VlPropertiesTitle data-cy="title-adres">Adres</VlPropertiesTitle>
<VlPropertiesTitle v-if="!hideTitle" data-cy="title-adres">Adres</VlPropertiesTitle>
<VlPropertiesList>
<!-- Land -->
<template v-if="!props.countryId">
<VlPropertiesLabel>
<vl-form-message-label data-cy="label-land">
<span class="vl-u-spacer-right--xxsmall">Land</span>
<span v-if="$props.config?.land?.required" class="vl-form__annotation">
{{ '(verplicht)' }}
</span>
<span v-if="props.showRequiredPerField && $props.config?.land?.required" class="vl-form__annotation"
>VERPLICHT</span
>
</vl-form-message-label>
</VlPropertiesLabel>
<VlPropertiesData>
Expand All @@ -35,9 +35,9 @@
<VlPropertiesLabel>
<vl-form-message-label data-cy="label-gemeente">
<span class="vl-u-spacer-right--xxsmall">Gemeente</span>
<span v-if="$props.config?.gemeente?.required" class="vl-form__annotation">
{{ '(verplicht)' }}
</span>
<span v-if="props.showRequiredPerField && $props.config?.gemeente?.required" class="vl-form__annotation"
>VERPLICHT</span
>
</vl-form-message-label>
</VlPropertiesLabel>
<VlPropertiesData>
Expand Down Expand Up @@ -84,9 +84,9 @@
<VlPropertiesLabel>
<vl-form-message-label data-cy="label-postcode">
<span class="vl-u-spacer-right--xxsmall">Postcode</span>
<span v-if="$props.config?.postcode?.required" class="vl-form__annotation">
{{ '(verplicht)' }}
</span>
<span v-if="props.showRequiredPerField && $props.config?.postcode?.required" class="vl-form__annotation"
>VERPLICHT</span
>
</vl-form-message-label>
</VlPropertiesLabel>
<VlPropertiesData>
Expand Down Expand Up @@ -144,9 +144,9 @@
<VlPropertiesLabel>
<vl-form-message-label data-cy="label-straat">
<span class="vl-u-spacer-right--xxsmall">Straat</span>
<span v-if="$props.config?.straat?.required" class="vl-form__annotation">
{{ '(verplicht)' }}
</span>
<span v-if="props.showRequiredPerField && $props.config?.straat?.required" class="vl-form__annotation"
>VERPLICHT</span
>
</vl-form-message-label>
</VlPropertiesLabel>
<VlPropertiesData>
Expand Down Expand Up @@ -199,9 +199,9 @@
<VlPropertiesLabel>
<vl-form-message-label data-cy="label-huisnummer">
<span class="vl-u-spacer-right--xxsmall">Huisnummer</span>
<span v-if="$props.config?.huisnummer?.required" class="vl-form__annotation">
{{ '(verplicht)' }}
</span>
<span v-if="props.showRequiredPerField && $props.config?.huisnummer?.required" class="vl-form__annotation"
>VERPLICHT</span
>
</vl-form-message-label>
</VlPropertiesLabel>
<VlPropertiesData>
Expand Down Expand Up @@ -259,9 +259,9 @@
<VlPropertiesLabel>
<vl-form-message-label data-cy="label-busnummer">
<span class="vl-u-spacer-right--xxsmall">Busnummer</span>
<span v-if="$props.config?.busnummer?.required" class="vl-form__annotation">
{{ '(verplicht)' }}
</span>
<span v-if="props.showRequiredPerField && $props.config?.busnummer?.required" class="vl-form__annotation"
>VERPLICHT</span
>
</vl-form-message-label>
</VlPropertiesLabel>
<VlPropertiesData>
Expand Down Expand Up @@ -342,12 +342,14 @@ import { CrabApiService } from '@services/crab-api.service';
import { requiredIf } from '@utils/i18n-validators';
const props = withDefaults(defineProps<IAdresProps>(), {
hideTitle: false,
showRequiredPerField: false,
config: () => ({
land: { required: true },
gemeente: { required: true },
postcode: { required: true },
straat: { required: true },
huisnummer: { required: false },
huisnummer: { required: true },
busnummer: { required: false },
}),
api: 'https://test-geo.onroerenderfgoed.be/',
Expand Down Expand Up @@ -506,6 +508,7 @@ const rules = computed(() => ({
// Init validation instance
const v$ = useVuelidate(rules, adres, { $lazy: true });
defineExpose({ validate: () => v$.value.$validate() });
// Reference data
const crabApiService = new CrabApiService(props.api);
Expand Down
2 changes: 2 additions & 0 deletions src/models/adres.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import type { ILocatieAdres } from '@models/locatie';

export interface IAdresProps {
hideTitle?: boolean;
api?: string;
config?: IAdresConfig;
countryId?: string;
adres?: ILocatieAdres;
optionsLimit?: number;
showRequiredPerField?: boolean;
}

export interface IAdresConfig {
Expand Down
2 changes: 2 additions & 0 deletions src/models/input-phone.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import type { CountryCode } from 'libphonenumber-js';
export interface IInputPhoneProps {
id: string;
modelValue: string;
prefixClass: string;
inputFieldClass: string;
}

export interface ICountryCode {
Expand Down
Loading

0 comments on commit a70a284

Please sign in to comment.