Skip to content
This repository has been archived by the owner on Nov 30, 2022. It is now read-only.

Extra pattern toevoegen voor een uuid #22

Merged
merged 5 commits into from
Mar 4, 2021
Merged

Extra pattern toevoegen voor een uuid #22

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cea575a
UIG-1142: orginele pattern.js van AIV
Pieter-Beckers Mar 2, 2021
66d9cfd
UIG-1142: orginele pattern.js van AIV
Pieter-Beckers Mar 2, 2021
421ada3
UIG-1142: pattern uuid implementatie
Pieter-Beckers Mar 2, 2021
4f3d4b4
UIG-1142: opmerkingen Pascal
Pieter-Beckers Mar 2, 2021
04b2c29
absoluut path
Pieter-Beckers Mar 4, 2021
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
30 changes: 18 additions & 12 deletions demo/vl-pattern.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@
<html>
<head>
<title>vl-pattern voorbeeld</title>

<script type="module" src="/src/vl-pattern.js"></script>

<script type="module" src="/node_modules/vl-ui-demo/dist/vl-demo-all.js"></script>
<script type="module" src="/node_modules/vl-ui-body/dist/vl-body.js"></script>
<script type="module" src="/node_modules/vl-ui-form-message/dist/vl-form-message.js"></script>
<script type="module" src="/node_modules/vl-ui-input-field/dist/vl-input-field.js"></script>

<script type="module" src="/src/vl-pattern.js"></script>

<link rel="stylesheet" type="text/css" href="/node_modules/vl-ui-body/dist/style.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/vl-ui-demo/dist/style.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/vl-ui-form-message/dist/style.css" />
Expand All @@ -18,28 +19,33 @@
<body is="vl-body">
<vl-demo-page data-vl-webcomponent="vl-pattern" data-vl-link="https://overheid.vlaanderen.be/webuniversum/v3/documentation/forms/vl-ui-pattern">
<vl-demo data-vl-title="IBAN pattern">
<label is="vl-form-label" for="pattern-1">IBAN-nummer</label>
<input is="vl-input-field" data-vl-block type="text" id="pattern-iban" name="pattern-1" value="" data-vl-pattern="iban" data-vl-pattern-prefix="BE" />
<label is="vl-form-label" for="pattern-iban">IBAN-nummer</label>
<input is="vl-input-field" data-vl-block type="text" id="pattern-iban" name="pattern-iban" value="" data-vl-pattern="iban" data-vl-pattern-prefix="BE" />
</vl-demo>

<vl-demo data-vl-title="Phone number validation">
<label is="vl-form-label" for="pattern-2">Telefoonnummer</label>
<input is="vl-input-field" data-vl-block type="tel" id="pattern-phone" name="pattern-2" value="" data-vl-pattern="phone" data-vl-pattern-prefix="+32" />
<label is="vl-form-label" for="pattern-phone">Telefoonnummer</label>
<input is="vl-input-field" data-vl-block type="tel" id="pattern-phone" name="pattern-phone" value="" data-vl-pattern="phone" data-vl-pattern-prefix="+32" />
</vl-demo>

<vl-demo data-vl-title="Date validation">
<label is="vl-form-label" for="pattern-3">Datum</label>
<input is="vl-input-field" data-vl-block type="text" id="pattern-date" name="pattern-3" value="" placeholder="30.08.2018" data-vl-pattern="date" data-vl-datepicker-min="01.01.2016" data-vl-datepicker-max="01.01.2020" />
<label is="vl-form-label" for="pattern-date">Datum</label>
<input is="vl-input-field" data-vl-block type="text" id="pattern-date" name="pattern-date" value="" placeholder="30.08.2018" data-vl-pattern="date" data-vl-datepicker-min="01.01.2016" data-vl-datepicker-max="01.01.2020" />
</vl-demo>

<vl-demo data-vl-title="Price validation">
<label is="vl-form-label" for="pattern-4">Prijs</label>
<input is="vl-input-field" data-vl-block type="text" id="pattern-price" name="pattern-4" value="" data-vl-pattern="price" data-vl-pattern-prefix="€" />
<label is="vl-form-label" for="pattern-price">Prijs</label>
<input is="vl-input-field" data-vl-block type="text" id="pattern-price" name="pattern-price" value="" data-vl-pattern="price" data-vl-pattern-prefix="€" />
</vl-demo>

<vl-demo data-vl-title="RRN validation">
<label is="vl-form-label" for="pattern-5">Rijksregisternummer</label>
<input is="vl-input-field" data-vl-block type="text" id="pattern-rrn" name="pattern-5" value="" placeholder="11.22.33-444.55" data-vl-pattern="rrn" data-vl-js-dress="true" />
<label is="vl-form-label" for="pattern-rrn">Rijksregisternummer</label>
<input is="vl-input-field" data-vl-block type="text" id="pattern-rrn" name="pattern-rrn" value="" placeholder="11.22.33-444.55" data-vl-pattern="rrn" data-vl-js-dress="true" />
</vl-demo>

<vl-demo data-vl-title="UUID validation">
<label is="vl-form-label" for="pattern-uuid">UUID</label>
<input is="vl-input-field" data-vl-block type="text" id="pattern-uuid" name="pattern-uuid" value="" placeholder="1c6fa548-5eef-11eb-ae93-0242ac130002" data-vl-pattern="uuid" />
</vl-demo>
</vl-demo-page>
</body>
Expand Down
4 changes: 2 additions & 2 deletions dist/vl-pattern.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import {awaitUntil} from '/node_modules/vl-ui-core/dist/vl-core.js';
import '/node_modules/@govflanders/vl-ui-util/dist/js/util.js';
import '/node_modules/@govflanders/vl-ui-core/dist/js/core.js';
import '/node_modules/@govflanders/vl-ui-pattern/dist/js/pattern.js';
import '../lib/pattern.js';

/**
* Gebruik de pattern mixin in combinatie met een input field om de gebruiker te verplichten om informatie in een bepaald formaat op te geven.
* @mixin vlPattern
*
* @property {(iban | phone | date | price | rrn)} data-vl-pattern - Attribuut wordt gebruikt om aan te duiden welk patroon van toepassing is.
* @property {(iban | phone | date | price | rrn | uuid)} data-vl-pattern - Attribuut wordt gebruikt om aan te duiden welk patroon van toepassing is.
* @property {string} data-vl-pattern-prefix - Attribuut bepaalt de prefix die de gebruiker zal zien. In het geval van iban en phone pattern type wordt de prefix toegevoegd aan de value. Bij price pattern type is de prefix puur visueel.
*
* @see {@link https://www.github.com/milieuinfo/webcomponent-vl-ui-pattern/releases/latest|Release notes}
Expand Down
2 changes: 1 addition & 1 deletion dist/vl-pattern.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions dist/vl-pattern.src.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import {awaitUntil} from 'vl-ui-core';
import '@govflanders/vl-ui-util/dist/js/util.js';
import '@govflanders/vl-ui-core/dist/js/core.js';
import '@govflanders/vl-ui-pattern/dist/js/pattern.js';
import '../lib/pattern.js';

/**
* Gebruik de pattern mixin in combinatie met een input field om de gebruiker te verplichten om informatie in een bepaald formaat op te geven.
* @mixin vlPattern
*
* @property {(iban | phone | date | price | rrn)} data-vl-pattern - Attribuut wordt gebruikt om aan te duiden welk patroon van toepassing is.
* @property {(iban | phone | date | price | rrn | uuid)} data-vl-pattern - Attribuut wordt gebruikt om aan te duiden welk patroon van toepassing is.
* @property {string} data-vl-pattern-prefix - Attribuut bepaalt de prefix die de gebruiker zal zien. In het geval van iban en phone pattern type wordt de prefix toegevoegd aan de value. Bij price pattern type is de prefix puur visueel.
*
* @see {@link https://www.github.com/milieuinfo/webcomponent-vl-ui-pattern/releases/latest|Release notes}
Expand Down
Loading