@soleil-se/config-svelte 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,45 +1,73 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.2.1] - 2021-04-09
+
+### Fixed
+
+- Mail and tel values in LinkSelector are prefixed with `mailto:` and `tel:`.
+
 ## [1.2.0] - 2021-03-30
+
 ### Added
+
 - Mail and tel types to LinkSelector.
 - Value in NumberSpinner is now left aligned.
+
 ### Fixed
+
 - Unable to clear value in LinkSelector.
 
 ## [1.1.2] - 2021-03-11
+
 ### Fixed
+
 - Unable to remove last item in TextList.
 - TextList is not validated when `required` prop is used
+
 ## [1.1.1] - 2021-02-02
+
 ### Fixed
+
 - Missing docs NumberSpinner.
 
 ## [1.1.0] - 2021-01-29
+
 ### Added
+
 - `suffix` prop to NumberSpinner.
 
 ## [1.0.4] - 2021-01-15
+
 ### Fixed
+
 - ListSelector inifity loop.
 
 ## [1.0.3] - 2021-01-11
+
 ### Fixed
+
 - Remove debug output.
 
 ## [1.0.2] - 2021-01-11
+
 ### Fixed
+
 - Array destructuring not working in TextList for IE11.
 - RadioGroup value not working in IE11.
 - Added missing polyfills for IE11 in docs and demo.
 
 ## [1.0.1] - 2020-12-08
+
 ### Fixed
+
 - Selectable props in NodeSelector, ListSelector and DropdownSelector now also accepts a string.
 - Margin on CheckboxGroup and RadioGroup controls.
 
 ## [1.0.0] - 2020-11-20
+
 - Initial release!

package/actions/index.js

@@ -1,3 +1,3 @@
-export { default as httpPrefix } from './httpPrefix';
+export { prefixHttps, prefixMail, prefixTel } from './inputPrefix';
 export { default as resizer } from './resizer';
 export { default as show } from './show';

package/actions/inputPrefix.js

@@ -0,0 +1,31 @@
+export function prefixHttps(node) {
+  const addPrefix = () => {
+    const { type, value } = node;
+    if (type === 'url' && value && !/^(https?):\/\//i.test(value) && ('http://'.indexOf(value) === -1 && 'https://'.indexOf(value) === -1)) {
+      /* eslint-disable-next-line no-param-reassign */
+      node.value = `https://${value}`;
+    }
+  };
+  node.addEventListener('input', addPrefix);
+}
+
+export function prefixMail(node) {
+  const addPrefix = () => {
+    const { value } = node;
+
+    if (value && !/^(mailto?):/i.test(value) && 'mailto:'.indexOf(value) === -1) {
+      /* eslint-disable-next-line no-param-reassign */
+      node.value = `mailto:${value}`;
+    }
+  };
+  node.addEventListener('input', addPrefix);
+}
+
+export function prefixTel(node) {
+  const addPrefix = () => {
+    const { value } = node;
+    /* eslint-disable-next-line no-param-reassign */
+    node.value = `tel:${value.replace(/\s/g, '').replace(/[^0-9$\\+]/g, '')}`;
+  };
+  node.addEventListener('input', addPrefix);
+}

package/components/InputField/Component.svelte

@@ -1,7 +1,7 @@
 <script>
   /* eslint-disable no-undef-init */
   import { createEventDispatcher } from 'svelte';
-  import { httpPrefix } from '../../actions';
+  import { prefixHttps } from '../../actions';
   import { generateId } from '../../utils';
 
   const values = window.CONFIG_VALUES || {};
@@ -18,6 +18,7 @@
   export let pattern = undefined;
   export let rows = 3;
   export let value = '';
+  export let action = prefixHttps;
   value = name ? values[name] ?? value : value;
 
   let className = '';
@@ -60,7 +61,7 @@
       {readonly}
       {pattern}
       {value}
-      use:httpPrefix
+      use:action
       on:input={onInput}
     />
   {/if}

package/components/LinkSelector/Component.svelte

@@ -1,14 +1,14 @@
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { show } from '../../actions';
+  import { show, prefixMail, prefixTel } from '../../actions';
 
   import Panel from '../Panel';
   import RadioGroup from '../RadioGroup';
   import NodeSelector from '../NodeSelector';
   import InputField from '../InputField';
   import Checkbox from '../Checkbox';
+  import getSavedValue from './api/getSavedValue';
 
-  const values = window.CONFIG_VALUES || {};
   const dispatch = createEventDispatcher();
 
   export let heading;
@@ -17,20 +17,7 @@
   export let required = false;
   export let types = ['internal', 'external', 'file'];
   export let value;
-
-  if (!value || Object.keys(value).length === 0) {
-    value = {
-      type: types[0],
-      newWindow: false,
-      value: '',
-    };
-  }
-
-  if (name) {
-    value.type = values[`${name}Type`] || value.type;
-    value.newWindow = values[`${name}NewWindow`] || value.newWindow;
-    value.value = values[`${name}Value`] || value.value || '';
-  }
+  value = getSavedValue({ value, name, types });
 
   let className = '';
   export { className as class };
@@ -110,12 +97,13 @@
       required={required && isFile}
     />
   </div>
+
   <div class="sr-label form-group form-group--mail" use:show={isMail}>
     <InputField
       bind:value={selected.mail}
       {disabled}
       label="E-post"
-      type="email"
+      action={prefixMail}
       on:change={onChange}
       required={required && isMail}
     />
@@ -124,8 +112,9 @@
     <InputField
       bind:value={selected.tel}
       {disabled}
-      label="E-post"
-      type="email"
+      label="Telefonnummer"
+      type="tel"
+      action={prefixTel}
       on:change={onChange}
       required={required && isTel}
     />
@@ -141,7 +130,7 @@
   <slot name="bottom" />
 </Panel>
 
-<style>
+<style lang="scss">
   .sr-label :global(label),
   .sr-legend :global(legend) {
     position: absolute;
@@ -154,7 +143,11 @@
     clip: rect(0, 0, 0, 0);
   }
 
-  .form-group--external :global(.form-control-feedback) {
-    top: 0;
+  .form-group--external,
+  .form-group--mail,
+  .form-group--tel {
+    :global(.form-control-feedback) {
+      top: 0;
+    }
   }
 </style>

package/components/LinkSelector/api/getSavedValue.js

@@ -0,0 +1,19 @@
+const getDefaultValue = (types) => ({
+  type: types[0],
+  newWindow: false,
+  value: '',
+});
+
+export default function getSavedValue({ value, name, types }) {
+  const values = window.CONFIG_VALUES || {};
+
+  return {
+    ...getDefaultValue(types),
+    ...value,
+    ...(name ? {
+      type: values[`${name}Type`],
+      newWindow: values[`${name}NewWindow`],
+      value: values[`${name}Value`],
+    } : {}),
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",

package/actions/httpPrefix.js

@@ -1,10 +0,0 @@
-export default function httpPrefix(node) {
-  const addPrefix = () => {
-    const { type, value } = node;
-    if (type === 'url' && value && !/^(https?):\/\//i.test(value) && ('http://'.indexOf(value) === -1 && 'https://'.indexOf(value) === -1)) {
-      /* eslint-disable-next-line no-param-reassign */
-      node.value = `https://${value}`;
-    }
-  };
-  node.addEventListener('input', addPrefix);
-}