@soleil-se/config-svelte 1.17.0 → 1.18.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ 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).

package/components/CustomSelector/Component.svelte

@@ -1,6 +1,7 @@
 <script>
   import { createEventDispatcher, onMount, tick } from 'svelte';
-  import { generateId, setupComponent } from '../../utils';
+  import { generateId } from '../../utils';
+  import i18n from './i18n';
 
   const values = window.CONFIG_VALUES || {};
   const dispatch = createEventDispatcher();
@@ -8,6 +9,7 @@
   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 required = false;
@@ -32,14 +34,31 @@
 
   $: if (element && options) triggerChange();
 
+  function template(option) {
+    const content = document.querySelector(`[data-option="${id}_${option.id}"]`)?.innerHTML;
+    return content ? jQuery(content) : option.text;
+  }
+
   onMount(() => {
-    [element] = setupComponent(id).on('change', (e) => {
-      if (e.val !== undefined && value !== e.val) {
-        value = e.val;
-        dispatch('input', value);
-        dispatch('change', value);
-      }
-    });
+    // 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) => {
+        if (e.val !== undefined && value !== e.val) {
+          value = e.val;
+          dispatch('input', value);
+          dispatch('change', value);
+        }
+      });
   });
 </script>
 
@@ -51,17 +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}
   >
+    <option />
     {#each options as option}
       <option value={option.value ?? option}>
         {option.label ?? option}
@@ -77,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,6 +11,7 @@ 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 required = false;
@@ -72,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/package.json

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