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

Commit

Permalink
Extra pattern toevoegen voor een uuid (#22)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pieter-Beckers
Pieter-Beckers authored Mar 4, 2021
1 parent 4292388 commit 1164583
Show file tree
Hide file tree
Showing 9 changed files with 2,357 additions and 19 deletions.
30 changes: 18 additions & 12 deletions demo/vl-pattern.html
View file
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
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

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
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

0 comments on commit 1164583

Please sign in to comment.