@soleil-se/config-svelte 1.16.2 → 1.18.0

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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.18.0] - 2023-01-20
+
+- Option templating in [CustomSelector](./components/CustomSelector).
+- Add global Select2 styling.
+- Modal now closes open Select2 dropdowns.
+
+## [1.17.0] - 2022-12-01
+
+- New component: [RepositoryNodeSelector](./components/RepositoryNodeSelector).
+- New utility API: [getAppContext](./#getappcontext).
+- New server API: [createAppContext](./#context)
+
 ## [1.16.2] - 2022-11-24
 
 - [ListSelector](./components/ListSelector) now works properly in [CustomList](./components/CustomList).

package/components/CustomList/Component.svelte

@@ -2,12 +2,13 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import { generateId, addGeneratedIds } from '../../utils';
   import { resizer } from '../../actions';
+  import i18n from './i18n';
 
   import Sortable from './internal/Sortable.svelte';
   import SortableItem from './internal/SortableItem.svelte';
   import DataHolder from './internal/DataHolder.svelte';
   import EditModal from './internal/EditModal.svelte';
-  import CreateItem from './internal/CreateItem.svelte';
+  import AddModal from './internal/AddModal.svelte';
 
   const values = window.CONFIG_VALUES || {};
   const dispatch = createEventDispatcher();
@@ -29,6 +30,15 @@
   let items = [];
   let editId;
   let dragDisabled = disabled;
+  let addModalOpen = false;
+
+  const onAddOpen = () => {
+    addModalOpen = true;
+  };
+
+  const onAddClose = () => {
+    addModalOpen = false;
+  };
 
   const updateItems = () => {
     items = value.map((id) => ({
@@ -43,7 +53,7 @@
     dispatch('change', value);
   };
 
-  const onCreate = ({ detail }) => {
+  const onAddSave = ({ detail }) => {
     items = items.concat(detail);
     modals = modals.concat(detail.id);
     onChange();
@@ -97,6 +107,9 @@
     <slot {id} {index} />
   </EditModal>
 {/each}
+<AddModal {name} open={addModalOpen} on:save={onAddSave} on:close={onAddClose} let:id>
+  <slot {id} index={items.length} />
+</AddModal>
 
 <div class="form-group" class:hidden={!show}>
   <label for={domId} class="control-label {required ? 'control-label--required' : ''}">
@@ -116,10 +129,11 @@
       </Sortable>
       <div use:resizer class="ui-resizable-handle ui-resizable-s" />
     </div>
+    <button class="list-component__add-item btn btn-link" on:click={onAddOpen} {disabled}>
+      <i class="glyphicons plus" aria-hidden="true" />
+      {i18n('add')}
+    </button>
 
-    <CreateItem {name} {disabled} on:create={onCreate} let:id>
-      <slot {id} index={items.length} />
-    </CreateItem>
     {#if disabled}
       <div class="disabled-overlay" />
     {/if}
@@ -148,4 +162,16 @@
     cursor: not-allowed;
     background-color: rgb(255 255 255 / 30%);
   }
+
+  button {
+    &:focus,
+    &:active {
+      color: #585858;
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #66afe9;
+    }
+  }
 </style>

package/components/CustomList/i18n.js

@@ -3,17 +3,17 @@ import createI18n from '../../utils/createI18n';
 export default createI18n({
   sv: {
     add: 'Lägg till...',
-    validation: 'Lägg till minst en post i listan',
+    validation: 'Lägg till minst en post i listan.',
     edit: 'Redigera',
   },
   no: {
     add: 'Legg till...',
-    validation: 'Legg til minst ett element i listen',
+    validation: 'Legg til minst ett element i listen.',
     edit: 'Redigere',
   },
   en: {
     add: 'Add...',
-    validation: 'Add at least one item to the list',
+    validation: 'Add at least one item to the list.',
     edit: 'Edit',
   },
 });

package/components/CustomList/internal/{CreateItem.svelte → AddModal.svelte}

@@ -6,26 +6,22 @@
   import Modal from '../../Modal';
 
   export let name;
-  export let disabled;
+  export let open = false;
 
   let id;
   let element;
-  let open = false;
 
   const dispatch = createEventDispatcher();
 
-  const addItem = async () => {
-    open = true;
-    id = generateId(name || 'item');
-  };
+  $: if (open) id = generateId(name || 'item');
 
   const onClose = () => {
-    open = false;
+    dispatch('close');
     setTimeout(() => (id = undefined), 300);
   };
 
   const onSave = async () => {
-    dispatch('create', {
+    dispatch('save', {
       id,
       name: element.querySelector('input')?.value || id,
     });
@@ -38,22 +34,3 @@
     <slot {id} />
   {/if}
 </Modal>
-
-<button class="list-component__add-item btn btn-link" on:click={addItem} {disabled}>
-  <i class="glyphicons plus" aria-hidden="true" />
-  {i18n('add')}
-</button>
-
-<style lang="scss">
-  button {
-    &:focus,
-    &:active {
-      color: #585858;
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline: 2px solid #66afe9;
-    }
-  }
-</style>

package/components/CustomSelector/Component.svelte

@@ -1,6 +1,7 @@
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
-  import { generateId, setupComponent } from '../../utils';
+  import { createEventDispatcher, onMount, tick } from 'svelte';
+  import { generateId } from '../../utils';
+  import i18n from './i18n';
 
   const values = window.CONFIG_VALUES || {};
   const dispatch = createEventDispatcher();
@@ -8,9 +9,9 @@
   export let id = generateId();
   export let label;
   export let name = undefined;
+  export let placeholder = i18n('placeholder');
   export let options = [];
   export let searchable = false;
-  export let placeholder;
   export let required = false;
   export let disabled = false;
   export let multiple = false;
@@ -18,21 +19,46 @@
 
   export let value = multiple ? [] : '';
 
-  value = name ? values[name] ?? value : value;
-  // value = value === Object(value) ? value.value : value;
+  value = name ? values[name]?.value ?? values[name] ?? value : value;
+  value = Array.isArray(value) ? value.map((v) => v.value ?? v) : value;
 
   let className = '';
   export { className as class };
 
+  let element;
+
+  async function triggerChange() {
+    await tick();
+    jQuery(element).val(value).trigger('change');
+  }
+
+  $: if (element && options) triggerChange();
+
+  function template(option) {
+    const content = document.querySelector(`[data-option="${id}_${option.id}"]`)?.innerHTML;
+    return content ? jQuery(content) : option.text;
+  }
+
   onMount(() => {
-    const [el] = setupComponent(id)
+    // Instansiate select2 ourselves to be able to use more options.
+    jQuery(element)
+      .select2({
+        placeholder,
+        width: '100%',
+        allowClear: true,
+        minimumResultsForSearch: searchable ? 0 : Infinity,
+        templateResult: template,
+        formatResult: template,
+        templateSelection: template,
+        formatSelection: template,
+      })
       .on('change', (e) => {
-        value = e.val || value;
-        dispatch('input', value);
-        dispatch('change', value);
+        if (e.val !== undefined && value !== e.val) {
+          value = e.val;
+          dispatch('input', value);
+          dispatch('change', value);
+        }
       });
-
-    jQuery(el).val(value).trigger('change');
   });
 </script>
 
@@ -44,18 +70,23 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show}>
+  {#if $$slots.option}
+    {#each options as option}
+      <span hidden data-option="{id}_{option.value ?? option}">
+        <slot name="option" {option} />
+      </span>
+    {/each}
+  {/if}
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <select
+    bind:this={element}
     {id}
     {required}
     {disabled}
     {multiple}
     name={!multiple ? name : undefined}
-    data-component="custom-selector"
-    data-removable
-    data-searchable={searchable ? '' : undefined}
-    data-placeholder={placeholder ? '' : undefined}
   >
+    <option />
     {#each options as option}
       <option value={option.value ?? option}>
         {option.label ?? option}
@@ -71,19 +102,3 @@
     </select>
   {/if}
 </div>
-
-<style>
-  div :global(.select2-container-multi .select2-search-choice-close) {
-    top: 3px;
-  }
-
-  div :global(.select2-container-multi ul.select2-choices) {
-    border: 1px solid #ccc;
-    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-  }
-
-  div :global(.select2-container-multi .select2-choices .select2-search-choice) {
-    padding: 4px 5px 4px 18px;
-    margin-top: 4px;
-  }
-</style>

package/components/CustomSelector/README.md

@@ -11,9 +11,9 @@ Wrapper component for Sitevision [Custom selector](https://developer.sitevision.
 export let id = generateId();
 export let label; // Required
 export let name = undefined;
+export let placeholder;
 export let options = [];
 export let searchable = false;
-export let placeholder;
 export let required = false;
 export let disabled = false;
 export let multiple = false;
@@ -73,3 +73,24 @@ Default slot after selector.
   <p class="help-block">Some helpful text.</p>
 </CustomSelector>
 ```
+
+Option slot for custom templating.  
+The option is available as slot prop.
+
+```svelte
+<script>
+  import { Panel, CustomSelector } from '@soleil-se/svelte-config';
+
+  const options = [
+    { label: 'Värde 1', value: 'value1', type: 'Typ 1' },
+    { label: 'Värde 2', value: 'value2', type: 'Typ 2' },
+    { label: 'Värde 3', value: 'value3', type: 'Typ 3' },
+  ];
+</script>
+
+<Panel>
+  <CustomSelector name="custom" label="Custom selector" {options} > 
+    <span slot="option" let:option>{option.label} ({option.type})</span>
+  </CustomSelector>
+</Panel>
+```

package/components/CustomSelector/i18n.js

@@ -0,0 +1,13 @@
+import createI18n from '../../utils/createI18n';
+
+export default createI18n({
+  sv: {
+    placeholder: 'Välj',
+  },
+  no: {
+    placeholder: 'Velj',
+  },
+  en: {
+    placeholder: 'Select',
+  },
+});

package/components/DropdownSelector/Component.svelte

@@ -42,9 +42,9 @@
       });
 
     /*
-    * The sv:loaded event is only triggered on initial load, if the component rerenders check if any
-    * children are present and set value of select element.
-    */
+     * The sv:loaded event is only triggered on initial load, if the component rerenders check if any
+     * children are present and set value of select element.
+     */
     if (el?.childElementCount > 0) {
       setValue(el);
     }
@@ -71,34 +71,3 @@
   />
   <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 rgb(0 0 0 / 7.5%);
-  }
-
-  .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 {
-    cursor: not-allowed;
-    background-color: white;
-    background-image: none;
-    border: 1px solid #ccc;
-    opacity: 0.7;
-  }
-
-  .select2-container.select2-container-disabed .select2-choice .select2-arrow {
-    background-color: white;
-    border-left: 1px solid #aaa;
-  }
-</style>

package/components/ListSelector/README.md

@@ -52,6 +52,7 @@ Possible values for `type`:
 - `image`
 - `user`
 - `userfield`
+- `template`
 
 For `tags-selector` use [TagSelector](../TagSelector).  
 

package/components/Modal/Component.svelte

@@ -56,6 +56,7 @@
         a11yDialog.show();
       } else {
         a11yDialog.hide();
+        jQuery(element).find('.select2-offscreen')?.select2('close');
       }
     }
   };

package/components/Panel/Component.svelte

@@ -23,14 +23,14 @@
   </div>
 </div>
 
-<style lang="scss">
-  :global(html) {
+<style lang="scss" global>
+  html {
     position: fixed;
     overflow: hidden;
     background-color: transparent;
   }
 
-  :global(body) {
+  body {
     overflow: auto;
     background: none;
   }
@@ -47,4 +47,47 @@
       content: '*';
     }
   }
+
+  .select2-container-multi .select2-search-choice-close {
+    top: 3px;
+  }
+
+  .select2-container-multi ul.select2-choices {
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+  }
+
+  .select2-container-multi .select2-choices .select2-search-choice {
+    padding: 4px 5px 4px 18px;
+    margin-top: 4px;
+  }
+
+  .select2-container .select2-choice {
+    height: 34px;
+    padding-left: 12px;
+    line-height: 32px;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%);
+  }
+
+  .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 {
+    cursor: not-allowed;
+    background-color: white;
+    background-image: none;
+    border: 1px solid #ccc;
+    opacity: 0.7;
+  }
+
+  .select2-container.select2-container-disabed .select2-choice .select2-arrow {
+    background-color: white;
+    border-left: 1px solid #aaa;
+  }
 </style>

package/components/RepositoryNodeSelector/Component.svelte

@@ -0,0 +1,79 @@
+<!-- prettier-ignore -->
+<script>
+  import { onMount } from 'svelte';
+  import { getAppContext } from '../../utils';
+  import CustomSelector from '../CustomSelector';
+  import i18n from './i18n';
+
+  export let id;
+  export let label;
+  export let name;
+  export let searchable;
+  export let required;
+  export let disabled;
+  export let multiple;
+  export let show;
+  export let value;
+
+  export let type;
+
+  let options = [];
+  let error = false;
+
+  function toTitleCase(str) {
+    return str
+      .replace(/^[-_]*(.)/, (_, c) => c.toUpperCase())
+      .replace(/[-_]+(.)/g, (_, c) => ` ${c.toUpperCase()}`);
+  }
+
+  function getEndpoint() {
+    const { siteName } = getAppContext();
+    let repository = toTitleCase(type);
+    repository = !repository.endsWith('Repository') ? `${repository} Repository` : repository;
+    const endpoint = repository.includes('Alias') ? 'aliases' : 'nodes';
+
+    return `/rest-api/1/0/${siteName}/${repository}/${endpoint}`;
+  }
+
+  onMount(async () => {
+    const endpoint = getEndpoint();
+    const result = await fetch(endpoint)
+      .then((res) => {
+        if (res.ok) return res;
+        error = true;
+        throw new Error(
+          `Error (${res.status}) - Unable to fetch nodes, is site name and repository correct?`,
+        );
+      })
+      .then((res) => res.json())
+      .catch((e) => console.error(e.message));
+
+    options = (result || []).map((item) => ({ label: item.name, value: item.id }));
+  });
+</script>
+
+<CustomSelector
+  {id}
+  {label}
+  {name}
+  {searchable}
+  {required}
+  {disabled}
+  {multiple}
+  {show}
+  {options}
+  {value}
+  on:input
+  on:change
+>
+  <slot />
+  {#if error}
+    <p class="alert alert-danger">{@html i18n('error')}</p>
+  {/if}
+</CustomSelector>
+
+<style>
+  p.alert {
+    margin-top: 10px;
+  }
+</style>

package/components/RepositoryNodeSelector/README.md

@@ -0,0 +1,135 @@
+# RepositoryNodeSelector
+
+Component for selecting one or multiple nodes from a repository, is using [CustomSelector](../CustomSelector).  
+
+![RepositoryNodeSelector1](../../images/RepositoryNodeSelector1.png)
+![RepositoryNodeSelector2](../../images/RepositoryNodeSelector2.png)
+
+## Props
+
+```javascript
+export let id = generateId();
+export let label; // Required
+export let name = undefined;
+export let options = [];
+export let searchable = false;
+export let required = false;
+export let disabled = false;
+export let multiple = false;
+export let show = true;
+export let value = '';
+export let type;
+```
+
+### Types
+
+All repositories that are children to the site are valid types, some are more useful than others.
+
+::: details Available types
+
+Following types are available, not all are useful though.
+
+#### Useful
+
+* `alias` - Alias Repository.
+* `named-reference` - Named Reference Repository.
+* `rss-feed` - RSS Feed Repository.
+* `rating-type` - Rating Type Repository.
+* `responsive-breakpoint` - Responsive Breakpoint Repository.
+* `role` - Role Repository.
+* `site-cookie` - Site Cookie Repository.
+* `tag-group` - Tag Group Repository.
+* `tag` - Tag Repository.
+* `user-field` - User Field Repository.
+
+#### Do not use
+
+* `color` - Color Repository, use `<DropdownSelector type="color" />` instead.
+* `file` - File Repository, use `<NodeSelector type="file" />` instead.
+* `font` - Font Repository, use `<DropdownSelector type="font" />` instead.
+* `image` - Image Repository, use `<NodeSelector type="image" />` instead.
+* `index` - Index Repository, use `<DropdownSelector type="search-index" />` instead.
+* `metadata` - Metadata Definition Template Repository, use `<DropdownSelector type="metadata" />` instead.
+* `oAuth2` - OAuth2 Configuration Repository, use `<DropdownSelector type="oauth2-configuration" />` instead.
+* `page` - Page Repository, use `<NodeSelector type="page" />` instead.
+* `principal` - Principal Repository, use `<NodeSelector type="user" />` instead.
+* `template` - Template Repository, use `<DropdownSelector type="template" />` instead.
+
+#### Other
+
+* `addon` - Addon Repository.
+* `data-store` - Data Store Repository.
+* `decoration` - Decoration Repository.
+* `default-image` - Default Image Repository.
+* `externaltopicintegration` - ExternalTopicIntegration Repository.
+* `icon` - Icon Repository.
+* `list-style` - List Style Repository.
+* `module-element-draft` - Module Element Draft Repository.
+* `module-element` - Module Element Repository.
+* `restApp` - RestApp Repository.
+* `topic` - Topic Repository.
+* `webApp` - WebApp Repository.
+
+:::
+
+## App context
+
+To be able to use this component app context must be created in `config/index.js`.  
+The options are fetched using the REST-API and the site name is needed for building the URL.
+
+```js
+import router from '@sitevision/api/common/router';
+import { createAppContext } from '@soleil-se/svelte-config/server';
+
+router.get('/', (req, res) => {
+  createAppContext(res);
+});
+```
+
+## Example
+
+### Standard
+
+```svelte
+<script>
+  import { Panel, RepositoryNodeSelector } from '@soleil-se/svelte-config';
+</script>
+
+<Panel heading="Inställningar">     
+  <RepositoryNodeSelector name="tagGroup" label="Tag group" type="tag-group" /> 
+  <RepositoryNodeSelector name="cookies" label="Cookies" type="site-cookie" multiple /> 
+</Panel>
+```
+
+### Advanced
+
+```svelte
+<script>
+  import { Panel, RepositoryNodeSelector } from '@soleil-se/svelte-config';
+  import { onSave } from '@soleil-se/svelte-config/utils';
+
+  export let values;
+
+  values = {
+    tagGroup: '',
+    ...values
+  }
+
+  onSave(() => values);
+
+</script>
+
+<Panel heading="Inställningar">     
+  <RepositoryNodeSelector label="Tag group" type="tag-group" bind:value={values.tagGroup} /> 
+</Panel>
+```
+
+## Slots
+
+Default slot after selector.
+
+```svelte
+<RepositoryNodeSelector name="tagGroup" label="Tag group" type="tag-group"> 
+  <p class="help-block">Some helpful text.</p>
+</RepositoryNodeSelector>
+```