@soleil-se/config-svelte 1.1.2 → 1.2.1

package/CHANGELOG.md

@@ -1,38 +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: undefined,
-    };
-  }
-
-  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 };
@@ -39,20 +26,26 @@
     { label: 'Intern', value: 'internal' },
     { label: 'Extern', value: 'external' },
     { label: 'Fil', value: 'file' },
+    { label: 'E-post', value: 'mail' },
+    { label: 'Telefonnummer', value: 'tel' },
   ].filter((type) => types.includes(type.value));
 
   $: isInternal = value.type === 'internal';
   $: isExternal = value.type === 'external';
   $: isFile = value.type === 'file';
+  $: isMail = value.type === 'mail';
+  $: isTel = value.type === 'tel';
 
   const selected = {
     internal: value.type === 'internal' ? value.value : '',
     external: value.type === 'external' ? value.value : '',
     file: value.type === 'file' ? value.value : '',
+    mail: value.type === 'mail' ? value.value : '',
+    tel: value.type === 'tel' ? value.value : '',
   };
 
   const onChange = () => {
-    value.value = selected[value.type];
+    value.value = selected[value.type] || '';
     dispatch('input', value);
     dispatch('change', value);
   };
@@ -104,7 +97,30 @@
       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"
+      action={prefixMail}
+      on:change={onChange}
+      required={required && isMail}
+    />
+  </div>
+  <div class="sr-label form-group form-group--tel" use:show={isTel}>
+    <InputField
+      bind:value={selected.tel}
+      {disabled}
+      label="Telefonnummer"
+      type="tel"
+      action={prefixTel}
+      on:change={onChange}
+      required={required && isTel}
+    />
+  </div>
   <Checkbox
+    class="form-group--new-window"
     bind:value={value.newWindow}
     name={name ? `${name}NewWindow` : ''}
     {disabled}
@@ -114,7 +130,7 @@
   <slot name="bottom" />
 </Panel>
 
-<style>
+<style lang="scss">
   .sr-label :global(label),
   .sr-legend :global(legend) {
     position: absolute;
@@ -127,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/README.md

@@ -27,7 +27,7 @@ export let disabled = false;
 // If control is required.
 export let required = false;
 // What types of links to be selectable, must provide at least one.
-export let types = ['internal', 'external', 'file'];
+export let types = ['internal', 'external', 'file', 'mail', 'tel'];
 // Used if bound to value.
 export let value;
 ```
@@ -40,7 +40,7 @@ Top and bottom slots before and after link selector.
   heading="Knapp"
   disabled={!showLink}
 >
-  <div slot="top">
+  <svelte:fragment slot="top">
     <Checkbox
       name="showLink"
       bind:value={showLink}
@@ -52,10 +52,10 @@ Top and bottom slots before and after link selector.
       label="Text"
       disabled={!showLink}
     />
-  </div>
-  <div slot="bottom">
+  </svelte:fragment>
+  <svelte:fragment slot="bottom">
     <p class="help-block">Hjälptext...</p>
-  </div>
+  </svelte:fragment>
 </LinkSelector>
 ```
 

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/components/NumberSpinner/Component.svelte

@@ -72,4 +72,8 @@
     background-color: #fff;
     border-left: none;
   }
+
+  .form-group input.form-control {
+    text-align: left;
+  }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.1.2",
+  "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);
-}