not-bulma 1.2.31 → 1.2.33

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "not-bulma",
3
- "version": "1.2.31",
3
+ "version": "1.2.33",
4
4
  "description": "not-* family UI components on Bulma CSS Framework",
5
5
  "main": "src/index.js",
6
6
  "svelte": "src/index.js",
@@ -1,4 +1,5 @@
1
1
  import UIBoolean from "./ui.boolean.svelte";
2
+ import UIBooleanLabeled from "./ui.boolean.labeled.svelte";
2
3
  import UIBooleans from "./ui.booleans.svelte";
3
4
  import UIIndicator from "./ui.indicator.svelte";
4
5
  import UILoader from "./ui.loader.svelte";
@@ -14,6 +15,7 @@ import UISimpleSearchInput from "./ui.simple.search.input.svelte";
14
15
 
15
16
  export {
16
17
  UIBoolean,
18
+ UIBooleanLabeled,
17
19
  UIBooleans,
18
20
  UIErrorsList,
19
21
  UIIndicator,
@@ -0,0 +1,10 @@
1
+ <script>
2
+ import { LOCALE } from "../../locale";
3
+ import UIBoolean from "./ui.boolean.svelte";
4
+
5
+ export let value;
6
+ export let label;
7
+ export let inverted = false;
8
+ </script>
9
+
10
+ <span class="label">{$LOCALE[label]}: <UIBoolean {value} {inverted} /></span>
@@ -1,14 +1,26 @@
1
1
  <script>
2
- import { LOCALE } from "../../locale";
2
+ import UITag from "./ui.tag.svelte";
3
3
 
4
4
  export let LC_TRUE = "not-node:booleans_true";
5
5
  export let LC_FALSE = "not-node:booleans_false";
6
6
 
7
7
  export let value;
8
+ export let inverted = false;
9
+
10
+ const FALSE_VALUE = {
11
+ title: LC_FALSE,
12
+ color: "danger",
13
+ };
14
+ const TRUE_VALUE = {
15
+ title: LC_TRUE,
16
+ color: "success",
17
+ };
18
+
19
+ const variants = [FALSE_VALUE, TRUE_VALUE];
20
+
21
+ $: tagValue = value
22
+ ? variants.at(1 + (inverted ? 1 : 0))
23
+ : variants.at(0 + (inverted ? 1 : 0));
8
24
  </script>
9
25
 
10
- {#if value}
11
- <span class="tag is-success">{$LOCALE[LC_TRUE]}</span>
12
- {:else}
13
- <span class="tag is-danger">{$LOCALE[LC_FALSE]}</span>
14
- {/if}
26
+ <UITag {...tagValue} />
@@ -2,8 +2,14 @@
2
2
  import UIBoolean from "./ui.boolean.svelte";
3
3
 
4
4
  export let values = [];
5
+ export let inverted = false;
6
+ export let componentContructor = UIBoolean;
5
7
  </script>
6
8
 
7
9
  {#each values as item}
8
- <UIBoolean value={item.value} />
10
+ <svelte:component
11
+ this={componentContructor}
12
+ {...item}
13
+ inverted={inverted || item.inverted}
14
+ />
9
15
  {/each}