@soleil-se/config-svelte 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -5,170 +5,117 @@ 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.9.0] - 2021-12-06
+## [1.10.0] - 2022-03-07
 
-### Added
+- Added `multiple` prop for [CustomSelector](./components/CustomSelector).
+- First value is always selected in [RadioGroup](./components/RadioGroup) if nothing is selected.
 
-- [CustomSelector](./components/CustomSelector)
+## [1.9.0] - 2021-12-06
 
-## [1.8.4] - 2021-12-03
+- Added [CustomSelector](./components/CustomSelector)
 
-### Fixed
+## [1.8.4] - 2021-12-03
 
-- Removable prop was not working on NodeSelector
+- Removable prop was not working on NodeSelector.
 
 ## [1.8.3] - 2021-12-01
 
-### Fixed
-
 - Remove hidden input for LinkSelector to fix bug with trashed / removed pages and files introduced in Sitevision 9.1.
 
 ## [1.8.2] - 2021-11-26
 
-### Fixed
-
 - Use nullish coalescing when determining option value in SelectField.
 
 ## [1.8.1] - 2021-11-19
 
-### Fixed
-
 - Empty mounting point of app since hydration is disabled.
 
 ## [1.8.0] - 2021-11-18
 
-### Changed
-
 - Improvements for passing server data to the app.
 - Remove `hydrate` option since we're never using SSR in config apps.
-
-### Fixed
-
 - Properly target div with id `app_root` when rendering app.
 
 ## [1.7.0] - 2021-09-24
 
-### Added
-
-- `sortable` prop for `ListSelector`.
+- Added `sortable` prop for `ListSelector`.
 
 ## [1.6.0] - 2021-08-25
 
-### Added
-
-- I18n utility.
-- Translations for components with translatable text.
+- Added I18n utility.
+- Added Translations for components with translatable text.
 - Spread rest props on input element in InputField.
 - Docs with links to readme for each component.
 
 ## [1.5.2] - 2021-08-18
 
-### Fixed
-
 - DropdownSelector values was not saved properly when set multiple times.
 
 ## [1.5.1] - 2021-08-12
 
-### Fixed
-
 - Initialization when rerendering or conditionally render DropdownSelectors.
 
 ## [1.5.0] - 2021-06-29
 
-### Added
-
-- TagSelector component
+- Added TagSelector component
 
 ## [1.4.0] - 2021-05-19
 
-### Changed
-
 - TextList component rewrite.
 - Remove CheckboxGroup value workaround as it's not needed.
-
-### Fixed
-
-- Type shorthand for ListSelector.
+- Added type shorthand for ListSelector.
 - Was possible to circumvent alt-text requirement in ImageSelector
 
 ## [1.3.1] - 2021-04-29
 
-### Fixed
-
 - Default value for LinkSelector type is not set.
 - ImageSelector does not clear alt-text from image archive.
 
 ## [1.3.0] - 2021-04-28
 
-### Added
-
-- Type shorthands for DropdownSelector, NodeSelector and ListSelector.
+- Added type shorthands for DropdownSelector, NodeSelector and ListSelector.
 - ImageSelector component.
-
-### Fixed
-
-- Scroll problems.
+- Fixed scroll problems.
 
 ## [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.
+- 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.
+- Added docs NumberSpinner.
 
 ## [1.1.0] - 2021-01-29
 
-### Added
-
-- `suffix` prop to NumberSpinner.
+- Added `suffix` prop to NumberSpinner.
 
 ## [1.0.4] - 2021-01-15
 
-### Fixed
-
-- ListSelector inifity loop.
+- Fix 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.
 

package/components/CustomSelector/Component.svelte

@@ -13,9 +13,11 @@
   export let placeholder;
   export let required = false;
   export let disabled = false;
-  export let value = '';
+  export let multiple = false;
+  export let value = multiple ? [] : '';
 
   value = name ? values[name] ?? value : value;
+  // value = value === Object(value) ? value.value : value;
 
   let className = '';
   export { className as class };
@@ -27,9 +29,8 @@
         dispatch('input', value);
         dispatch('change', value);
       });
-    if (!value) {
-      jQuery(el).val(null).trigger('change');
-    }
+  
+    jQuery(el).val(value).trigger('change');
   });
 </script>
 
@@ -44,10 +45,10 @@
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <select
     {id}
-    {name}
     {required}
     {disabled}
-    {value}
+    {multiple}
+    name={!multiple ? name : undefined}
     data-component="custom-selector"
     data-removable
     data-searchable={searchable ? '' : undefined}
@@ -60,4 +61,27 @@
     {/each}
   </select>
   <slot />
+  {#if multiple}
+    <select {name} {value} multiple hidden>
+      {#each options as option}
+        <option value={option.value ?? option} />
+      {/each}
+    </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

@@ -25,6 +25,7 @@ export let searchable = false;
 export let placeholder;
 export let required = false;
 export let disabled = false;
+export let multiple = false;
 export let value = '';
 ```
 

package/components/RadioGroup/Component.svelte

@@ -7,10 +7,10 @@
 
   export let id = generateId();
   export let name;
-  export let options;
+  export let options = [];
   export let legend;
   export let disabled = false;
-  export let value = '';
+  export let value = options[0]?.value ?? options[0] ?? '';
   value = name ? values[name] ?? value : value;
 
   $: isDisabled = (option) => {
@@ -54,8 +54,8 @@
 <style lang="scss">
   legend {
     margin-bottom: 7px;
-    font-weight: bold;
     font-size: 14px;
+    font-weight: bold;
     border-bottom: 0;
   }
 
@@ -74,13 +74,13 @@
       width: 16px;
       height: 16px;
       margin-right: 5px;
+      content: '';
       border: 1px solid #cacece;
       border-radius: 50%;
-      content: '';
     }
 
     :global(.focus-visible) + &::before {
-      box-shadow: 0 0 0 0.2rem rgba(66, 139, 202, 0.4);
+      box-shadow: 0 0 0 0.2rem rgb(66 139 202 / 40%);
     }
 
     input:checked + &::before {
@@ -94,9 +94,9 @@
       left: 5px;
       width: 6px;
       height: 6px;
+      content: '';
       background-color: white;
       border-radius: 50%;
-      content: '';
     }
 
     &.disabled {

package/package.json

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