@soleil-se/config-svelte 1.0.0

package/components/TextList/Component.svelte

@@ -0,0 +1,267 @@
+<script>
+  import { createEventDispatcher, tick } from 'svelte';
+  import { generateId } from '../../utils';
+  import { resizer } from '../../actions';
+  import Sortable from './internal/Sortable.svelte';
+
+  const values = window.CONFIG_VALUES || {};
+  const dispatch = createEventDispatcher();
+
+  export let id = generateId();
+  export let label;
+  export let required = false;
+  export let name = undefined;
+  export let disabled = false;
+  export let value = [];
+  value = name ? values[name] ?? value : value;
+
+  const createItem = (props) => ({
+    id: generateId(),
+    value: '',
+    edit: false,
+    focus: false,
+    hover: false,
+    ...props,
+  });
+
+  let addButtonElement;
+  const itemElements = [];
+  let dragging = false;
+  let items = value.map((val) => createItem({ value: val }));
+
+  $: editIndex = items.findIndex(({ edit }) => edit);
+  $: isEditing = editIndex > -1;
+
+  const onChange = () => {
+    value = items.filter(({ edit }) => !edit).map((item) => item.value);
+    dispatch('input', value);
+    dispatch('change', value);
+  };
+
+  const addItem = async () => {
+    if (!isEditing) {
+      items = items.concat(createItem({ edit: true }));
+      await tick();
+    }
+    itemElements[editIndex].querySelector('input').focus();
+  };
+
+  const editItem = async (index) => {
+    items = items.map((item) => ({ ...item, edit: false }));
+    items[index].edit = true;
+    items[index].oldValue = items[index].value;
+
+    await tick();
+    itemElements[index].querySelector('input').focus();
+  };
+
+  const removeItem = (index) => {
+    items.splice(index, 1);
+    items = items;
+    onChange();
+  };
+
+  const saveEdit = (index) => {
+    items[index].edit = false;
+    delete items[index].oldValue;
+
+    if (!items[index].value) {
+      removeItem(index);
+    }
+
+    onChange();
+  };
+
+  const updateItem = (index, props) => {
+    items[index] = {
+      ...items[index],
+      ...props,
+    };
+  };
+
+  const abortEdit = (index) => {
+    items[index].edit = false;
+    items[index].value = items[index].oldValue;
+    delete items[index].oldValue;
+
+    if (!items[index].value) {
+      removeItem(index);
+    }
+  };
+
+  const handleKeypress = (index, { keyCode }) => {
+    // Enter
+    if (keyCode === 13) {
+      saveEdit(index);
+      addButtonElement.focus();
+    }
+    // Esc
+    if (keyCode === 27) {
+      abortEdit(index);
+      addButtonElement.focus();
+    }
+  };
+
+  const onSortEnd = ({ detail }) => {
+    items = detail;
+    dragging = false;
+    onChange();
+  };
+</script>
+
+<div class="form-group">
+  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+  <div class="list-component">
+    <div class="list-component__list-wrapper ui-resizable">
+      <Sortable
+        class="list-component__list {dragging ? 'dragging' : ''}"
+        {items}
+        on:start={() => {
+          dragging = true;
+        }}
+        on:end={onSortEnd}
+      >
+        {#each items as item, index (item.id)}
+          <li
+            bind:this={itemElements[index]}
+            class="list-component__item"
+            class:focus={item.focus}
+            class:hover={item.hover}
+            on:mouseenter={() => updateItem(index, { hover: !dragging })}
+            on:mouseleave={() => updateItem(index, { hover: dragging })}
+          >
+            {#if item.edit}
+              <div class="form-group">
+                <div class="input-group">
+                  <input
+                    {id}
+                    bind:value={item.value}
+                    type="text"
+                    class="form-control"
+                    on:keypress={(e) => handleKeypress(index, e)}
+                  />
+
+                  <span class="input-group-btn">
+                    <button class="btn btn-default" type="button" on:click={() => saveEdit(index)}>
+                      <i class="glyphicons ok-2" />
+                    </button>
+                    <button class="btn btn-default" type="button" on:click={() => abortEdit(index)}>
+                      <i class="glyphicons remove-2" />
+                    </button>
+                  </span>
+                </div>
+              </div>
+            {:else}
+              <div on:dblclick={() => editItem(index)}>
+                <span class="item-name">{item.value}</span>
+                <div class="list-component__item-actions">
+                  <button
+                    on:click={() => editItem(index)}
+                    on:focusin={() => updateItem(index, { focus: true })}
+                    on:focusout={() => updateItem(index, { focus: false })}
+                  >
+                    <i class="glyphicons edit" />
+                  </button>
+                  <button
+                    on:click={() => removeItem(index)}
+                    on:focusin={() => updateItem(index, { focus: true })}
+                    on:focusout={() => updateItem(index, { focus: false })}
+                  >
+                    <i class="glyphicons remove-2" />
+                  </button>
+                  <i class="glyphicons move" />
+                </div>
+              </div>
+            {/if}
+          </li>
+        {/each}
+      </Sortable>
+      <div use:resizer class="ui-resizable-handle ui-resizable-s" />
+    </div>
+    <button
+      bind:this={addButtonElement}
+      class="list-component__add-item btn btn-link"
+      on:click={addItem}
+    >
+      <i class="glyphicons plus" />
+      Lägg till...
+    </button>
+  </div>
+  {#if disabled}
+    <div class="disabled-overlay" />
+  {/if}
+  <select {id} {value} multiple {name} class="sr-only" aria-hidden="true">
+    {#each value as option}
+      <option>{option}</option>
+    {/each}
+  </select>
+</div>
+
+<style lang="scss" global>
+  :global(html) {
+    overflow: hidden;
+  }
+
+  .list-component {
+    & &__list-wrapper {
+      height: 120px;
+      min-height: 90px;
+    }
+
+    & &__item {
+      &:focus {
+        .glyphicons {
+          display: inline-block;
+        }
+      }
+
+      &:hover {
+        background-color: white;
+
+        .glyphicons {
+          display: none;
+        }
+      }
+
+      &.chosen,
+      &.focus,
+      &.hover {
+        background-color: #f5f5f5;
+
+        .glyphicons {
+          display: inline-block;
+        }
+      }
+
+      .dragging &:not(.chosen) {
+        &:hover {
+          background-color: white;
+        }
+
+        .glyphicons {
+          display: none;
+        }
+      }
+
+      &-actions {
+        button {
+          padding: 0;
+          background: none;
+          border: none;
+          -webkit-appearance: none;
+          appearance: none;
+        }
+      }
+    }
+  }
+
+  .disabled-overlay {
+    position: absolute;
+    top: 25px;
+    bottom: 0;
+    z-index: 90;
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.3);
+    cursor: not-allowed;
+  }
+</style>

package/components/TextList/README.md

@@ -0,0 +1,57 @@
+# TextList
+
+## Props
+```javascript
+export let id = generateId();
+export let label;
+export let required = false;
+export let name = undefined;
+export let disabled = false;
+export let value = [];
+```
+
+## Default value
+Use the value attribute to set a default value:
+```svelte
+<TextList
+  name="textList"
+  label="Text List"  
+  value={['Text 1']}  
+/>  
+```
+
+## Example
+
+### Standard
+```svelte
+<script>
+import { Panel, TextList } from '@soleil-se/svelte-config';
+</script>
+
+<Panel heading="Inställningar">     
+  <TextList
+    name="textList"
+    label="Text List"      
+  />     
+</Panel>
+```
+### Advanced
+
+```svelte
+<script>
+import { Panel, TextList } from '@soleil-se/svelte-config';
+import { onSave } from '@soleil-se/svelte-config/utils';
+
+const values = {
+  textList: '',  
+  ...window.CONFIG_VALUES
+};
+
+onSave(() => values);
+
+</script>
+
+<Panel heading="Inställningar">     
+  <TextList bind:value={values.textList} label="Text List" />     
+</Panel>
+```

package/components/TextList/index.js

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

package/components/TextList/internal/Sortable.svelte

@@ -0,0 +1,43 @@
+<script>
+  import { onMount, createEventDispatcher, tick } from 'svelte';
+  import { Sortable } from 'sortablejs';
+
+  const dispatch = createEventDispatcher();
+
+  export let items = [];
+
+  let element;
+
+  function onChoose({ oldIndex }) {
+    dispatch('choose', oldIndex);
+  }
+
+  function onStart() {
+    dispatch('start', items);
+  }
+
+  async function onEnd({ oldIndex, newIndex }) {
+    const copy = [...items];
+    const [item] = copy.splice(oldIndex, 1);
+    copy.splice(newIndex, 0, item);
+    await tick();
+    dispatch('end', copy);
+  }
+
+  onMount(() => {
+    Sortable.create(element, {
+      ghostClass: 'ghost',
+      chosenClass: 'chosen',
+      dragClass: 'drag',
+      filter: '.form-group',
+      preventOnFilter: false,
+      onChoose,
+      onStart,
+      onEnd,
+    });
+  });
+</script>
+
+<ul bind:this={element} class={$$props.class}>
+  <slot />
+</ul>

package/createConfigApp/index.js

@@ -0,0 +1,17 @@
+import 'focus-visible';
+
+export default function createConfigApp(App, { hydrate = true } = {}) {
+  window.setValues = (values) => {
+    window.CONFIG_VALUES = values;
+    const app = new App({
+      target: document.querySelector('#app_root, body'),
+      props: {
+        ...window.CONFIG_APP_DATA,
+        values,
+      },
+      hydrate,
+    });
+
+    return app;
+  };
+}

package/index.js

@@ -0,0 +1,16 @@
+export { default as Panel } from './components/Panel';
+export { default as Checkbox } from './components/Checkbox';
+export { default as CheckboxGroup } from './components/CheckboxGroup';
+export { default as DropdownSelector } from './components/DropdownSelector';
+export { default as InputField } from './components/InputField';
+export { default as LinkSelector } from './components/LinkSelector';
+export { default as ListSelector } from './components/ListSelector';
+export { default as NodeSelector } from './components/NodeSelector';
+export { default as NumberSpinner } from './components/NumberSpinner';
+export { default as RadioGroup } from './components/RadioGroup';
+export { default as SelectField } from './components/SelectField';
+export { default as TextList } from './components/TextList';
+
+export { default as createConfigApp } from './createConfigApp';
+
+export { generateId, onSave, setupComponent } from './utils';

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@soleil-se/config-svelte",
+  "version": "1.0.0",
+  "main": "./index.js",
+  "module": "./index.js",
+  "svelte": "./index.js",
+  "author": "Soleil AB",
+  "license": "UNLICENSED",
+  "sideEffects": false,
+  "peerDependencies": {
+    "svelte": "^3.26.0"
+  },
+  "devDependencies": {
+    "svelte": "^3.26.0"
+  },
+  "dependencies": {
+    "focus-visible": "^5.1.0",
+    "sortablejs": "^1.12.0"
+  },
+  "homepage": "https://docs.soleil.se/packages/config-svelte",
+  "description": "A collection of Svelte components and utilities for WebApp, RESTApp and Widget configurations.",
+  "keywords": [
+    "Sitevision",
+    "WebApp",
+    "RESTApp",
+    "Widget",
+    "Svelte"
+  ]
+}

package/server/createAppData/index.js

@@ -0,0 +1,8 @@
+export default function createAppData(data) {
+  return `
+<script> 
+  window.CONFIG_APP_DATA = ${JSON.stringify(data)};
+</script>
+<div id="app_root"></div>
+  `;
+}

package/server/index.js

@@ -0,0 +1,3 @@
+/* Might add more exports in the future */
+/* eslint-disable import/prefer-default-export */
+export { default as createAppData } from './createAppData';

package/utils/addPrefix.js

@@ -0,0 +1,8 @@
+const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1);
+
+export default function addPrefix(prefix, value) {
+  return Object.entries(value).reduce((obj, [key, val]) => ({
+    ...obj,
+    [prefix + capitalizeFirstLetter(key)]: val,
+  }), {});
+}

package/utils/generateId.js

@@ -0,0 +1,12 @@
+const generated = [];
+
+const generate = () => Math.random().toString(36).substr(2, 9);
+
+export default function generateId(prefix = 'input') {
+  const id = `${prefix}_${generate()}`;
+  if (generated.includes(id)) {
+    return generateId(prefix);
+  }
+  generated.push(id);
+  return id;
+}

package/utils/index.js

@@ -0,0 +1,5 @@
+export { default as generateId } from './generateId';
+export { default as onSave } from './onSave';
+export { default as setupComponent } from './setupComponent';
+export { default as addPrefix } from './addPrefix';
+export { default as pluckPrefix } from './pluckPrefix';

package/utils/onSave.js

@@ -0,0 +1,8 @@
+export default function onSave(callback) {
+  window.getValues = () => {
+    const values = JSON.parse(JSON.stringify(callback()));
+    // Timestamp to get changes to be saved in SiteVision
+    values.lastEdit = new Date().getTime();
+    return values;
+  };
+}

package/utils/pluckPrefix.js

@@ -0,0 +1,21 @@
+const lowerFirstLetter = (string) => string.charAt(0).toLowerCase() + string.slice(1);
+/**
+ * Plucks object properties with prefixed keys, removes the prefix and returns an object with
+ * the properties that was prefixed.
+ * @export
+ * @param {String} prefix A prefix.
+ * @param {Object} [values=window.CONFIG_VALUES] Object with values.
+ * @returns {Object} An object with plucked properties where prefix is removed from keys.
+ */
+export default function pluckPrefix(prefix, values = window.CONFIG_VALUES) {
+  return Object.entries(values).reduce((obj, [key, value]) => {
+    if (key.startsWith(prefix)) {
+      const newKey = lowerFirstLetter(key.replace(prefix, ''));
+      return {
+        ...obj,
+        [newKey]: value,
+      };
+    }
+    return obj;
+  }, {});
+}

package/utils/setupComponent.js

@@ -0,0 +1,4 @@
+export default function setupComponent(elemId) {
+  $('body').trigger('setup-component', `#${elemId}`);
+  return $(`#${elemId}`);
+}