@soleil-se/config-svelte 1.1.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file.
3
3
 
4
4
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
5
5
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6
+ ## [1.2.0] - 2021-03-30
7
+ ### Added
8
+ - Mail and tel types to LinkSelector.
9
+ - Value in NumberSpinner is now left aligned.
10
+ ### Fixed
11
+ - Unable to clear value in LinkSelector.
12
+
6
13
  ## [1.1.2] - 2021-03-11
7
14
  ### Fixed
8
15
  - Unable to remove last item in TextList.
@@ -22,14 +22,14 @@
22
22
  value = {
23
23
  type: types[0],
24
24
  newWindow: false,
25
- value: undefined,
25
+ value: '',
26
26
  };
27
27
  }
28
28
 
29
29
  if (name) {
30
30
  value.type = values[`${name}Type`] || value.type;
31
31
  value.newWindow = values[`${name}NewWindow`] || value.newWindow;
32
- value.value = values[`${name}Value`] || value.value;
32
+ value.value = values[`${name}Value`] || value.value || '';
33
33
  }
34
34
 
35
35
  let className = '';
@@ -39,20 +39,26 @@
39
39
  { label: 'Intern', value: 'internal' },
40
40
  { label: 'Extern', value: 'external' },
41
41
  { label: 'Fil', value: 'file' },
42
+ { label: 'E-post', value: 'mail' },
43
+ { label: 'Telefonnummer', value: 'tel' },
42
44
  ].filter((type) => types.includes(type.value));
43
45
 
44
46
  $: isInternal = value.type === 'internal';
45
47
  $: isExternal = value.type === 'external';
46
48
  $: isFile = value.type === 'file';
49
+ $: isMail = value.type === 'mail';
50
+ $: isTel = value.type === 'tel';
47
51
 
48
52
  const selected = {
49
53
  internal: value.type === 'internal' ? value.value : '',
50
54
  external: value.type === 'external' ? value.value : '',
51
55
  file: value.type === 'file' ? value.value : '',
56
+ mail: value.type === 'mail' ? value.value : '',
57
+ tel: value.type === 'tel' ? value.value : '',
52
58
  };
53
59
 
54
60
  const onChange = () => {
55
- value.value = selected[value.type];
61
+ value.value = selected[value.type] || '';
56
62
  dispatch('input', value);
57
63
  dispatch('change', value);
58
64
  };
@@ -104,7 +110,28 @@
104
110
  required={required && isFile}
105
111
  />
106
112
  </div>
113
+ <div class="sr-label form-group form-group--mail" use:show={isMail}>
114
+ <InputField
115
+ bind:value={selected.mail}
116
+ {disabled}
117
+ label="E-post"
118
+ type="email"
119
+ on:change={onChange}
120
+ required={required && isMail}
121
+ />
122
+ </div>
123
+ <div class="sr-label form-group form-group--tel" use:show={isTel}>
124
+ <InputField
125
+ bind:value={selected.tel}
126
+ {disabled}
127
+ label="E-post"
128
+ type="email"
129
+ on:change={onChange}
130
+ required={required && isTel}
131
+ />
132
+ </div>
107
133
  <Checkbox
134
+ class="form-group--new-window"
108
135
  bind:value={value.newWindow}
109
136
  name={name ? `${name}NewWindow` : ''}
110
137
  {disabled}
@@ -27,7 +27,7 @@ export let disabled = false;
27
27
  // If control is required.
28
28
  export let required = false;
29
29
  // What types of links to be selectable, must provide at least one.
30
- export let types = ['internal', 'external', 'file'];
30
+ export let types = ['internal', 'external', 'file', 'mail', 'tel'];
31
31
  // Used if bound to value.
32
32
  export let value;
33
33
  ```
@@ -40,7 +40,7 @@ Top and bottom slots before and after link selector.
40
40
  heading="Knapp"
41
41
  disabled={!showLink}
42
42
  >
43
- <div slot="top">
43
+ <svelte:fragment slot="top">
44
44
  <Checkbox
45
45
  name="showLink"
46
46
  bind:value={showLink}
@@ -52,10 +52,10 @@ Top and bottom slots before and after link selector.
52
52
  label="Text"
53
53
  disabled={!showLink}
54
54
  />
55
- </div>
56
- <div slot="bottom">
55
+ </svelte:fragment>
56
+ <svelte:fragment slot="bottom">
57
57
  <p class="help-block">Hjälptext...</p>
58
- </div>
58
+ </svelte:fragment>
59
59
  </LinkSelector>
60
60
  ```
61
61
 
@@ -72,4 +72,8 @@
72
72
  background-color: #fff;
73
73
  border-left: none;
74
74
  }
75
+
76
+ .form-group input.form-control {
77
+ text-align: left;
78
+ }
75
79
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soleil-se/config-svelte",
3
- "version": "1.1.2",
3
+ "version": "1.2.0",
4
4
  "main": "./index.js",
5
5
  "module": "./index.js",
6
6
  "svelte": "./index.js",