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

Commit 1164583

Browse files
Pieter-BeckersPieter-Beckers
authored
Extra pattern toevoegen voor een uuid (#22)
1 parent 4292388 commit 1164583

File tree

9 files changed

+2357
-19
lines changed

9 files changed

+2357
-19
lines changed

‎demo/vl-pattern.html‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
<html>
33
<head>
44
<title>vl-pattern voorbeeld</title>
5+
6+
<script type="module" src="/src/vl-pattern.js"></script>
7+
58
<script type="module" src="/node_modules/vl-ui-demo/dist/vl-demo-all.js"></script>
69
<script type="module" src="/node_modules/vl-ui-body/dist/vl-body.js"></script>
710
<script type="module" src="/node_modules/vl-ui-form-message/dist/vl-form-message.js"></script>
811
<script type="module" src="/node_modules/vl-ui-input-field/dist/vl-input-field.js"></script>
912

10-
<script type="module" src="/src/vl-pattern.js"></script>
11-
1213
<link rel="stylesheet" type="text/css" href="/node_modules/vl-ui-body/dist/style.css" />
1314
<link rel="stylesheet" type="text/css" href="/node_modules/vl-ui-demo/dist/style.css" />
1415
<link rel="stylesheet" type="text/css" href="/node_modules/vl-ui-form-message/dist/style.css" />
@@ -18,28 +19,33 @@
1819
<body is="vl-body">
1920
<vl-demo-page data-vl-webcomponent="vl-pattern" data-vl-link="https://overheid.vlaanderen.be/webuniversum/v3/documentation/forms/vl-ui-pattern">
2021
<vl-demo data-vl-title="IBAN pattern">
21-
<label is="vl-form-label" for="pattern-1">IBAN-nummer</label>
22-
<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" />
22+
<label is="vl-form-label" for="pattern-iban">IBAN-nummer</label>
23+
<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" />
2324
</vl-demo>
2425

2526
<vl-demo data-vl-title="Phone number validation">
26-
<label is="vl-form-label" for="pattern-2">Telefoonnummer</label>
27-
<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" />
27+
<label is="vl-form-label" for="pattern-phone">Telefoonnummer</label>
28+
<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" />
2829
</vl-demo>
2930

3031
<vl-demo data-vl-title="Date validation">
31-
<label is="vl-form-label" for="pattern-3">Datum</label>
32-
<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" />
32+
<label is="vl-form-label" for="pattern-date">Datum</label>
33+
<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" />
3334
</vl-demo>
3435

3536
<vl-demo data-vl-title="Price validation">
36-
<label is="vl-form-label" for="pattern-4">Prijs</label>
37-
<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="€" />
37+
<label is="vl-form-label" for="pattern-price">Prijs</label>
38+
<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="€" />
3839
</vl-demo>
3940

4041
<vl-demo data-vl-title="RRN validation">
41-
<label is="vl-form-label" for="pattern-5">Rijksregisternummer</label>
42-
<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" />
42+
<label is="vl-form-label" for="pattern-rrn">Rijksregisternummer</label>
43+
<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" />
44+
</vl-demo>
45+
46+
<vl-demo data-vl-title="UUID validation">
47+
<label is="vl-form-label" for="pattern-uuid">UUID</label>
48+
<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" />
4349
</vl-demo>
4450
</vl-demo-page>
4551
</body>

‎dist/vl-pattern.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import {awaitUntil} from '/node_modules/vl-ui-core/dist/vl-core.js';
22
import '/node_modules/@govflanders/vl-ui-util/dist/js/util.js';
33
import '/node_modules/@govflanders/vl-ui-core/dist/js/core.js';
4-
import '/node_modules/@govflanders/vl-ui-pattern/dist/js/pattern.js';
4+
import '../lib/pattern.js';
55

66
/**
77
* Gebruik de pattern mixin in combinatie met een input field om de gebruiker te verplichten om informatie in een bepaald formaat op te geven.
88
* @mixin vlPattern
99
*
10-
* @property {(iban | phone | date | price | rrn)} data-vl-pattern - Attribuut wordt gebruikt om aan te duiden welk patroon van toepassing is.
10+
* @property {(iban | phone | date | price | rrn | uuid)} data-vl-pattern - Attribuut wordt gebruikt om aan te duiden welk patroon van toepassing is.
1111
* @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.
1212
*
1313
* @see {@link https://www.github.com/milieuinfo/webcomponent-vl-ui-pattern/releases/latest|Release notes}

‎dist/vl-pattern.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vl-pattern.src.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import {awaitUntil} from 'vl-ui-core';
22
import '@govflanders/vl-ui-util/dist/js/util.js';
33
import '@govflanders/vl-ui-core/dist/js/core.js';
4-
import '@govflanders/vl-ui-pattern/dist/js/pattern.js';
4+
import '../lib/pattern.js';
55

66
/**
77
* Gebruik de pattern mixin in combinatie met een input field om de gebruiker te verplichten om informatie in een bepaald formaat op te geven.
88
* @mixin vlPattern
99
*
10-
* @property {(iban | phone | date | price | rrn)} data-vl-pattern - Attribuut wordt gebruikt om aan te duiden welk patroon van toepassing is.
10+
* @property {(iban | phone | date | price | rrn | uuid)} data-vl-pattern - Attribuut wordt gebruikt om aan te duiden welk patroon van toepassing is.
1111
* @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.
1212
*
1313
* @see {@link https://www.github.com/milieuinfo/webcomponent-vl-ui-pattern/releases/latest|Release notes}

0 commit comments

Comments
 (0)