@soleil-se/config-svelte 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# 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.0.0] - 2020-11-20
+- Initial release!

package/README.md

@@ -0,0 +1,5 @@
+# @soleil-se/config-svelte
+
+A collection of Svelte components and utilities for WebApp, RESTApp and Widget configurations.
+
+[Documentation](https://docs.soleil.se/packages/config-svelte) | [Changelog](https://docs.soleil.se/packages/config-svelte/changelog)

package/actions/httpPrefix.js

@@ -0,0 +1,10 @@
+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);
+}

package/actions/index.js

@@ -0,0 +1,3 @@
+export { default as httpPrefix } from './httpPrefix';
+export { default as resizer } from './resizer';
+export { default as show } from './show';

package/actions/resizer.js

@@ -0,0 +1,50 @@
+const resizer = (element) => {
+  const targetElement = element.parentNode;
+
+  let mousePos;
+  const targetMinHeight = parseInt(window
+    .getComputedStyle(targetElement)
+    .getPropertyValue('min-height')
+    .replace('px', ''), 10);
+
+  const disableScrolling = () => {
+    const x = window.scrollX;
+    const y = window.scrollY;
+    window.onscroll = () => { window.scrollTo(x, y); };
+  };
+
+  const enableScrolling = () => {
+    window.onscroll = () => {};
+  };
+
+  const resizeElement = (e) => {
+    const offset = e.y - mousePos;
+    mousePos = e.y;
+    const targetHeight = parseInt(getComputedStyle(targetElement).height, 10);
+    const targetOffset = targetElement.getBoundingClientRect().top;
+
+    if (e.y > (targetOffset + targetMinHeight)) {
+    // eslint-disable-next-line no-param-reassign
+      targetElement.style.height = `${targetHeight + offset}px`;
+    }
+  };
+
+  const stopResize = (e) => {
+    e.preventDefault();
+    enableScrolling();
+    window.removeEventListener('mousemove', resizeElement, false);
+    window.removeEventListener('mouseup', stopResize, false);
+  };
+
+  const startResize = (e) => {
+    e.preventDefault();
+    disableScrolling();
+    mousePos = e.y;
+    window.addEventListener('mousemove', resizeElement, false);
+    window.addEventListener('mouseup', stopResize, false);
+  };
+
+  element.addEventListener('mousedown', startResize, false);
+};
+
+export default resizer;

package/actions/show.js

@@ -0,0 +1,12 @@
+export default function show(element, initialShow) {
+  const toggle = (isVisible) => {
+    /* eslint-disable-next-line no-param-reassign */
+    element.style.display = isVisible ? 'block' : 'none';
+  };
+  toggle(initialShow);
+  return {
+    update(updatedShow) {
+      toggle(updatedShow);
+    },
+  };
+}

package/components/Checkbox/Component.svelte

@@ -0,0 +1,78 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { generateId } from '../../utils';
+
+  const values = window.CONFIG_VALUES || {};
+  const dispatch = createEventDispatcher();
+
+  export let id = generateId();
+  export let label;
+  export let name;
+  export let disabled = false;
+  export let checked = false;
+  export let value;
+  value = name ? values[name] ?? value ?? checked : value;
+
+  let className = '';
+  export { className as class };
+
+  const onChange = () => {
+    dispatch('input', value);
+    dispatch('change', value);
+  };
+</script>
+
+<div class="form-group {className}">
+  <input
+    bind:checked={value}
+    {name}
+    {id}
+    {disabled}
+    class="sr-only"
+    type="checkbox"
+    data-value-type="boolean"
+    on:change={onChange}
+  />
+  <label for={id} class="checkbox-inline" class:disabled> {label} </label>
+</div>
+
+<style lang="scss">
+  label {
+    position: relative;
+    padding-left: 0;
+
+    &::before {
+      position: relative;
+      top: 2px;
+      float: left;
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+      border: 1px solid #cacece;
+      border-radius: 3px;
+      content: '';
+    }
+
+    :global(.focus-visible) + &::before {
+      box-shadow: 0 0 0 0.2rem rgba(66, 139, 202, 0.4);
+    }
+
+    input:checked + &::before {
+      background-color: #428bca;
+      background-image: url('data:image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22white%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.285%202l-11.285%2011.567-5.286-5.011-3.714%203.716%209%208.728%2015-15.285z%22%20%2F%3E%3C%2Fsvg%3E');
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: 10px;
+      border-color: transparent;
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+  }
+
+  input {
+    margin: -1px;
+  }
+</style>

package/components/Checkbox/README.md

@@ -0,0 +1,52 @@
+# Checkbox
+
+## Props
+
+```javascript
+export let id = generateId();
+export let label;
+export let name;
+export let disabled = false;
+export let checked = false;
+export let value;
+```
+
+## Default value
+Use checked attribute if the checkbox should be checked as default
+```svelte
+<Checkbox name="checkbox" label="Checkbox" checked />
+```
+## Examples
+
+### Standard
+
+```svelte
+<script>
+import { Panel, Checkbox } from '@soleil-se/svelte-config';
+</script>
+
+<Panel heading="Inställningar">
+  <Checkbox name="checkbox" label="Checkbox" />
+</Panel>
+```
+
+### Advanced
+
+```svelte
+<script>
+import { Panel, Checkbox } from '@soleil-se/svelte-config';
+import { onSave } from '@soleil-se/svelte-config/utils';
+
+const values = {
+  checkbox: '',
+  ...window.CONFIG_VALUES
+};
+
+onSave(() => values);
+
+</script>
+
+<Panel heading="Inställningar">   
+  <Checkbox bind:value={values.checkbox} label="Checkbox" />     
+</Panel>
+```

package/components/Checkbox/index.js

@@ -0,0 +1 @@
+export { default } from './Component.svelte';

package/components/CheckboxGroup/Component.svelte

@@ -0,0 +1,114 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { generateId } from '../../utils';
+
+  const values = window.CONFIG_VALUES || {};
+  const dispatch = createEventDispatcher();
+
+  export let id = generateId();
+  export let name;
+  export let options;
+  export let legend;
+  export let disabled = false;
+  export let value = [];
+  value = name ? values[name] || value : value;
+
+  let className = '';
+  export { className as class };
+
+  $: isChecked = (option) => value.includes(option.value || option);
+
+  $: isDisabled = (option) => {
+    if (Array.isArray(disabled)) return disabled.includes(option.value || option);
+    return disabled;
+  };
+
+  const onChange = () => {
+    dispatch('input', value);
+    dispatch('change', value);
+  };
+</script>
+
+<fieldset class="form-group {className}">
+  <legend>{legend}</legend>
+  {#each options as option, index}
+    <input
+      id={`${id}_${index}`}
+      bind:group={value}
+      class="sr-only"
+      value={option.value || option}
+      type="checkbox"
+      disabled={isDisabled(option)}
+      on:change={onChange}
+    />
+    <label
+      for={`${id}_${index}`}
+      class="checkbox-inline"
+      class:disabled={isDisabled(option)}
+      class:checked={isChecked(option)}
+    >
+      {option.label || option}
+    </label>
+  {/each}
+</fieldset>
+<!-- Workaround to properly save values as array when using name -->
+{#if name}
+  <select {value} multiple {name} class="sr-only" aria-hidden="true">
+    {#each value as option}
+      <option>{option}</option>
+    {/each}
+  </select>
+{/if}
+
+<style lang="scss">
+  fieldset {
+    margin-top: 0;
+  }
+
+  legend {
+    margin-bottom: 7px;
+    font-weight: bold;
+    font-size: 14px;
+    border-bottom: 0;
+  }
+
+  label {
+    position: relative;
+    padding-right: 5px;
+    padding-left: 0;
+
+    &::before {
+      position: relative;
+      top: 2px;
+      float: left;
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+      border: 1px solid #cacece;
+      border-radius: 3px;
+      content: '';
+    }
+
+    :global(.focus-visible) + &::before {
+      box-shadow: 0 0 0 0.2rem rgba(66, 139, 202, 0.4);
+    }
+
+    input:checked + &::before {
+      background-color: #428bca;
+      background-image: url('data:image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22white%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.285%202l-11.285%2011.567-5.286-5.011-3.714%203.716%209%208.728%2015-15.285z%22%20%2F%3E%3C%2Fsvg%3E');
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: 10px;
+      border-color: transparent;
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+  }
+
+  input {
+    margin: -1px;
+  }
+</style>

package/components/CheckboxGroup/README.md

@@ -0,0 +1,89 @@
+# CheckboxGroup
+
+## Props
+```javascript
+// ID, generates automatically if nothing is passed
+export let id = generateId();
+// If SiteVision default functions for getting and setting config is used name must be set
+export let name;
+// Array of options, ['value1', 'value2'] or [{ label: 'Value 1', value: 'value1' }, { label: 'Value 2', value: 'value2' }].
+export let options;
+// Fieldset legend
+export let legend;
+// Disable input, or provide an array of disabled options: ['value1'].
+export let disabled = false;
+// Used if bound to value.
+export let value;
+```
+
+## Default value
+Use the value prop to set a default value when not binding the value:
+```svelte
+<CheckboxGroup
+  name="checkboxGroup1"
+  legend="Checkboxgrupp 1"
+  options={['Värde 1', 'Värde 2', 'Värde 3']}
+  value="{['Värde 2', 'Värde 3']}"
+/>  
+```
+
+## Example
+
+### Standard
+```svelte
+<script>
+import { Panel, CheckboxGroup } from '@soleil-se/svelte-config';
+</script>
+
+<Panel heading="Inställningar">     
+  <CheckboxGroup
+    name="checkboxGroup1"
+    legend="Checkboxgrupp 1"
+    options={['Värde 1', 'Värde 2', 'Värde 3']}
+  />  
+  <CheckboxGroup
+    name="checkboxGroup2"
+    legend="Checkboxgrupp 2"
+    options={[
+      { label: 'Värde 1', value: 'value1'},
+      { label: 'Värde 2', value: 'value2'},
+      { label: 'Värde 3', value: 'value3'},
+    ]}
+  />      
+</Panel>
+
+```
+
+### Advanced
+```svelte
+<script>
+import { Panel, CheckboxGroup } from '@soleil-se/svelte-config';
+import { onSave } from '@soleil-se/svelte-config/utils';
+
+const values = {
+  checkboxGroup1: [],
+  checkboxGroup2: [],
+  ...window.CONFIG_VALUES
+};
+
+onSave(() => values);
+
+</script>
+
+<Panel heading="Inställningar">   
+  <CheckboxGroup
+    bind:value={values.checkboxGroup1}
+    legend="Checkboxgrupp 1"
+    options={['Värde 1', 'Värde 2', 'Värde 3']}
+  />  
+  <CheckboxGroup
+    bind:value={values.checkboxGroup2}
+    legend="Checkboxgrupp 2"
+    options={[
+      { label: 'Värde 1', value: 'value1'},
+      { label: 'Värde 2', value: 'value2'},
+      { label: 'Värde 3', value: 'value3'},
+    ]}
+  />      
+</Panel>
+```

package/components/CheckboxGroup/index.js

@@ -0,0 +1 @@
+export { default } from './Component.svelte';

package/components/DropdownSelector/Component.svelte

@@ -0,0 +1,82 @@
+<script>
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { generateId, setupComponent } from '../../utils';
+
+  const values = window.CONFIG_VALUES || {};
+  const dispatch = createEventDispatcher();
+
+  export let id = generateId();
+  export let label;
+  export let name = undefined;
+  export let type;
+  export let selectable = [];
+  export let required = false;
+  export let disabled = false;
+  export let value = '';
+  value = name ? values[name] ?? value : value;
+
+  let className = '';
+  export { className as class };
+
+  let hidden = true;
+
+  onMount(() => {
+    setupComponent(id)
+      .on('change', (e) => {
+        value = e.val || value;
+        dispatch('input', value);
+        dispatch('change', value);
+      })
+      .on('sv:loaded', ({ target }) => {
+        hidden = false;
+        jQuery(target)
+          .val(value)
+          .trigger('change');
+      });
+  });
+</script>
+
+<div class="form-group {className}" {hidden}>
+  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+  <select
+    {id}
+    {name}
+    {required}
+    {disabled}
+    data-component={type}
+    data-removable
+    data-types={[...selectable].join(',')}
+  />
+  <slot />
+</div>
+
+<style global>
+  .select2-container .select2-choice {
+    height: 34px;
+    padding-left: 12px;
+    line-height: 32px;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  }
+
+  .select2-container .select2-choice .select2-arrow b {
+    background-position-y: 3px;
+  }
+
+  .select2-container .select2-choice abbr {
+    top: 9px;
+  }
+
+  .select2-container.select2-container-disabled .select2-choice {
+    background-color: white;
+    background-image: none;
+    border: 1px solid #ccc;
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  .select2-container.select2-container-disabed .select2-choice .select2-arrow {
+    background-color: white;
+    border-left: 1px solid #aaa;
+  }
+</style>

package/components/DropdownSelector/README.md

@@ -0,0 +1,75 @@
+# DropdownSelector
+
+<!-- TOC -->
+
+- [Props](#props)
+- [Example](#example)
+  - [Standard](#standard)
+  - [Advanced](#advanced)
+- [Selectable types](#selectable-types)
+
+<!-- /TOC -->
+
+## Props
+
+```javascript
+export let id = generateId();
+export let label; // Required
+export let name = undefined;
+export let type; // Required
+export let selectable = [];
+export let required = false;
+export let disabled = false;
+export let value = '';
+```
+
+## Example
+
+### Standard
+```svelte
+<script>
+import { Panel, DropdownSelector } from '@soleil-se/svelte-config';
+</script>
+
+<Panel heading="Inställningar">     
+  <DropdownSelector name="metadata" type="metadata-selector" label="Metadata" />     
+</Panel>
+```
+
+### Advanced
+
+```svelte
+<script>
+import { Panel, DropdownSelector } from '@soleil-se/svelte-config';
+import { onSave } from '@soleil-se/svelte-config/utils';
+
+const values = {
+  metadata: '',  
+  ...window.CONFIG_VALUES
+};
+
+onSave(() => values);
+
+</script>
+
+<Panel heading="Inställningar">     
+  <DropdownSelector bind:value={values.metadata} type="metadata-selector" label="Metadata" />     
+</Panel>
+```
+
+## Selectable types
+> :exclamation: Since SiteVision 7.0 :exclamation:
+
+Filter what types should be selectable. See available types here:   
+https://developer.sitevision.se/docs/webapps/configuration#h-Types   
+
+Accepts an Array or String.
+```svelte
+<DropdownSelector
+  name="metadata"
+  type="metadata-selector"
+  label="Metadata"
+  selectable="sv:metadataLinkDefinition"
+  selectable={['sv:metadataLinkDefinition', 'sv:metadataDateDefinition']}
+/>
+```

package/components/DropdownSelector/index.js

@@ -0,0 +1 @@
+export { default } from './Component.svelte';

package/components/InputField/Component.svelte

@@ -0,0 +1,76 @@
+<script>
+  /* eslint-disable no-undef-init */
+  import { createEventDispatcher } from 'svelte';
+  import { httpPrefix } from '../../actions';
+  import { generateId } from '../../utils';
+
+  const values = window.CONFIG_VALUES || {};
+  const dispatch = createEventDispatcher();
+
+  export let id = generateId();
+  export let label;
+  export let type = 'text';
+  export let name = undefined;
+  export let required = false;
+  export let disabled = false;
+  export let readonly = false;
+  export let maxlength = undefined;
+  export let pattern = undefined;
+  export let rows = 3;
+  export let value = '';
+  value = name ? values[name] ?? value : value;
+
+  let className = '';
+  export { className as class };
+
+  $: isTextarea = type === 'textarea';
+  $: required = required && !disabled && !readonly;
+
+  const onInput = ({ target }) => {
+    value = type.match(/^(number|range)$/) ? +target.value : target.value;
+    dispatch('input', value);
+    dispatch('change', value);
+  };
+</script>
+
+<div class="form-group {className}">
+  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+  {#if isTextarea}
+    <textarea
+      class="form-control"
+      {id}
+      {name}
+      {required}
+      {maxlength}
+      {disabled}
+      {readonly}
+      {value}
+      {rows}
+      on:input={onInput}
+    />
+  {:else}
+    <input
+      class="form-control"
+      {id}
+      {name}
+      {type}
+      {required}
+      {maxlength}
+      {disabled}
+      {readonly}
+      {pattern}
+      {value}
+      use:httpPrefix
+      on:input={onInput}
+    />
+  {/if}
+  <slot />
+</div>
+
+<style>
+  .form-control[disabled],
+  .form-control[readonly] {
+    background-color: white;
+    opacity: 0.7;
+  }
+</style>