@soleil-se/config-svelte 1.6.0 → 1.7.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.7.0] - 2021-09-24
+
+### Added
+
+- `sortable` prop for `ListSelector`.
+
 ## [1.6.0] - 2021-08-25
 
 ### Added

package/components/LinkSelector/README.md

@@ -1,16 +1,37 @@
-# LinkSelector
+# LinkSelector (DEPRECATED)
 
 Custom panel component for selecting a link.
 
 ![LinkSelector](../../images/LinkSelector.png)
 
+::: warning DEPRECATED
+Since Sitevision 9.1 a new type of node selector is avaliable for selecting links.  
+[NodeSelector](/03.packages/@soleil&svelte-config/components/NodeSelector/) should be used instead of this component.
+
+`App.svelte`
+
+```svelte
+<NodeSelector label="Link" type="link" name="link" />
+```
+
+A [sv:link](https://developer.sitevision.se/docs/public-api/node-types/node-types/2018-01-12-svlink) will be returned.
+
+```js
+import appData from '@sitevision/api/server/appData';
+
+const uri = appData.get('link', 'rawURI');
+const newWindow = appData.get('link', 'openInNewWindow');
+```
+
+:::
+
 ## AppData
 
 If used with standard name all values will be prefixed with the name property provided to the component.
 For example if `name="link"` the values will be available as `linkValue`, `linkType` and `linkNewWindow`.
 
 ```js
-import appData from 'appData';
+import appData from '@sitevision/api/server/appData';
 
 const getLink = () => ({
   value: appData.get('linkValue', 'URI'),
@@ -72,7 +93,7 @@ Top and bottom slots before and after link selector.
 
 ```svelte
 <script>
-import { LinkSelector } from '@soleil-se/svelte-config';
+  import { LinkSelector } from '@soleil-se/svelte-config';
 </script>
 
 <LinkSelector name="link" heading="Länk" />
@@ -83,16 +104,16 @@ import { LinkSelector } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { LinkSelector } from '@soleil-se/svelte-config';
-import { pluckPrefix, addPrefix, onSave } from '@soleil-se/svelte-config/utils';
+  import { LinkSelector } from '@soleil-se/svelte-config';
+  import { pluckPrefix, addPrefix, onSave } from '@soleil-se/svelte-config/utils';
 
-// Plucks object properties with keys prefixed with 'link' and removes the prefix.
-// { linkType, linkValue, linkNewWindow } -> { type, value, newWindow }
-let link = pluckPrefix('link');
+  // Plucks object properties with keys prefixed with 'link' and removes the prefix.
+  // { linkType, linkValue, linkNewWindow } -> { type, value, newWindow }
+  let link = pluckPrefix('link');
 
-// Prefixes keys in an object 
-// { type, value, newWindow } -> { linkType, linkValue, linkNewWindow }
-onSave(() => addPrefix('link', link)))
+  // Prefixes keys in an object 
+  // { type, value, newWindow } -> { linkType, linkValue, linkNewWindow }
+  onSave(() => addPrefix('link', link)))
 
 </script>
 

package/components/ListSelector/Component.svelte

@@ -11,6 +11,7 @@
   export let type = 'page-list';
   export let required = false;
   export let disabled = false;
+  export let sortable = false;
   export let selectable = [];
   export let value = [];
 
@@ -47,7 +48,7 @@
   [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/ListSelector/)  
 -->
 
-<div class="form-group">
+<div class="form-group" class:disabled>
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <input
     {id}
@@ -55,6 +56,7 @@
     type="hidden"
     data-component={component}
     {required}
+    data-sortable={sortable || undefined}
     data-types={selectable}
     value={value.join(',')}
   />
@@ -65,7 +67,7 @@
 </div>
 
 <style>
-  .form-group {
+  .form-group.disabled {
     position: relative;
   }
 

package/components/ListSelector/README.md

@@ -31,8 +31,10 @@ export let type = 'page';
   export let value = [];
 // If list is required.
 export let required = false;
-// If list is diable.
+// If list is disabled.
 export let disabled = false;
+// If list is sortable, since Sitevision 9.1.
+export let sortable = false;
 // Selectable types
 export let selectable = [];
 
@@ -56,15 +58,15 @@ import { Panel, ListSelector } from '@soleil-se/svelte-config';
 
 ```svelte
 <script>
-import { Panel, ListSelector } from '@soleil-se/svelte-config';
-import { onSave } from '@soleil-se/svelte-config/utils';
+  import { Panel, ListSelector } from '@soleil-se/svelte-config';
+  import { onSave } from '@soleil-se/svelte-config/utils';
 
-const values = {
-  pages: '',  
-  ...window.CONFIG_VALUES
-};
+  const values = {
+    pages: '',  
+    ...window.CONFIG_VALUES
+  };
 
-onSave(() => values);
+  onSave(() => values);
 
 </script>
 
@@ -93,7 +95,7 @@ You can omnit the `-list` suffix for the type prop.
 
 ## Selectable types
 
-> :exclamation: Since SiteVision 7.0 :exclamation:
+> :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-0>

package/package.json

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