@likable-hair/svelte 3.1.7 → 3.1.9

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.
Files changed (5) hide show
  1. package/dist/components/simple/forms/Autocomplete.svelte +10 -0
  2. package/dist/components/simple/forms/Checkbox.css +11 -0
  3. package/dist/components/simple/forms/Checkbox.svelte +58 -23
  4. package/dist/components/simple/forms/Checkbox.svelte.d.ts +2 -8
  5. package/package.json +1 -1
package/dist/components/simple/forms/Autocomplete.svelte CHANGED
@@ -8,6 +8,8 @@ export { clazz as class };
8
8
  export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = void 0;
9
9
  let dispatch = createEventDispatcher();
10
10
  function select(item) {
11
+ if (disabled)
12
+ return;
11
13
  const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
12
14
  if (!alreadyPresent) {
13
15
  if (multiple)
@@ -25,6 +27,8 @@ function select(item) {
25
27
  menuOpened = false;
26
28
  }
27
29
  function unselect(item) {
30
+ if (disabled)
31
+ return;
28
32
  if (values.length == 1 && mandatory)
29
33
  return;
30
34
  values = values.filter((i) => i.value != item.value);
@@ -72,6 +76,8 @@ function refreshMenuWidth() {
72
76
  }
73
77
  let activator, focusedIndex = void 0;
74
78
  function handleTextFieldFocus() {
79
+ if (disabled)
80
+ return;
75
81
  focusedIndex = void 0;
76
82
  openMenu();
77
83
  }
@@ -79,6 +85,8 @@ function handleTextFieldBlur() {
79
85
  }
80
86
  let menuElement;
81
87
  function handleKeyDown(event) {
88
+ if (disabled)
89
+ return;
82
90
  if (event.key == "ArrowDown" && (focusedIndex === void 0 || focusedIndex < filteredItems.length - 1)) {
83
91
  if (focusedIndex === void 0)
84
92
  focusedIndex = 0;
@@ -107,6 +115,8 @@ function handleKeyDown(event) {
107
115
  }
108
116
  let input;
109
117
  function handleContainerClick() {
118
+ if (disabled)
119
+ return;
110
120
  if (!menuOpened) {
111
121
  if (!!input)
112
122
  input.focus();
package/dist/components/simple/forms/Checkbox.css ADDED
@@ -0,0 +1,11 @@
1
+ :root {
2
+ --checkbox-default-active-color: rgb(var(--global-color-primary-500));
3
+ --checkbox-default-active-inner-color: rgb(var(--global-color-grey-50));
4
+ --checkbox-default-focus-shadow: 2px rgb(var(--global-color-primary-500), .3);
5
+ --checkbox-default-border-color: rgb(var(--global-color-contrast-300), .2);
6
+ --checkbox-default-border-hover-color: rgb(var(--global-color-primary-500));
7
+ --checkbox-default-background-color: rgb(var(--global-color-background-200));
8
+ --checkbox-default-disabled-color: rgb(var(--global-color-background-200), .5);
9
+ --checkbox-default-disabled-active-color: rgb(var(--global-color-primary-500));
10
+ --checkbox-default-disabled-inner-color: rgb(var(--global-color-grey-50));
11
+ }
package/dist/components/simple/forms/Checkbox.svelte CHANGED
@@ -1,15 +1,9 @@
1
- <script>export let value = false, id = void 0, disabled = false, activeColor = "#275efe", activeInnerColor = "#fff", focusShadow = "2px rgba(39, 94, 254, 0.3)", borderColor = "#bbc1e1", borderHoverColor = "#275efe", backgroundColor = "#fff", disabledColor = "#f6f8ff", disabledInnerColor = "#e1e6f9";
1
+ <script>import "./Checkbox.css";
2
+ import "../../../css/main.css";
3
+ export let value = false, id = void 0, disabled = false;
2
4
  </script>
3
5
 
4
6
  <input
5
- style:--checkbox-active-color={activeColor}
6
- style:--checkbox-active-inner-color={activeInnerColor}
7
- style:--checkbox-focus-shadow={focusShadow}
8
- style:--checkbox-border-color={borderColor}
9
- style:--checkbox-border-hover-color={borderHoverColor}
10
- style:--checkbox-background-color={backgroundColor}
11
- style:--checkbox-disabled-color={disabledColor}
12
- style:--checkbox-disabled-inner-color={disabledInnerColor}
13
7
  {id}
14
8
  type="checkbox"
15
9
  bind:checked={value}
@@ -29,8 +23,14 @@
29
23
  position: relative;
30
24
  margin: 0;
31
25
  cursor: pointer;
32
- border: 1px solid var(--bc, var(--checkbox-border-color));
33
- background: var(--b, var(--checkbox-background-color));
26
+ border: 1px solid var(--bc, var(
27
+ --checkbox-border-color,
28
+ var(--checkbox-default-border-color)
29
+ ));
30
+ background: var(--b, var(
31
+ --checkbox-background-color,
32
+ var(--checkbox-default-background-color)
33
+ ));
34
34
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
35
35
  width: 21px;
36
36
  border-radius: 7px;
@@ -45,7 +45,10 @@
45
45
  opacity var(--d-o, 0.2s);
46
46
  width: 5px;
47
47
  height: 9px;
48
- border: 2px solid var(--checkbox-active-inner-color);
48
+ border: 2px solid var(
49
+ --checkbox-active-inner-color,
50
+ var(--checkbox-default-active-inner-color)
51
+ );
49
52
  border-top: 0;
50
53
  border-left: 0;
51
54
  left: 7px;
@@ -54,9 +57,15 @@
54
57
  box-sizing: border-box;
55
58
  }
56
59
 
57
- input[type="checkbox"]:checked {
58
- --b: var(--checkbox-active-color);
59
- --bc: var(--checkbox-active-color);
60
+ input[type="checkbox"]:checked:not(:disabled) {
61
+ --b: var(
62
+ --checkbox-active-color,
63
+ var(--checkbox-default-active-color)
64
+ );
65
+ --bc: var(
66
+ --checkbox-active-color,
67
+ var(--checkbox-default-active-color)
68
+ );
60
69
  --d-o: 0.3s;
61
70
  --d-t: 0.6s;
62
71
  --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
@@ -65,14 +74,31 @@
65
74
  }
66
75
 
67
76
  input[type="checkbox"]:disabled {
68
- --b: var(--checkbox-disabled-color);
77
+ --b: var(
78
+ --checkbox-disabled-color,
79
+ var(--checkbox-default-disabled-color)
80
+ );
81
+ --bc: var(
82
+ --checkbox-disabled-active-color,
83
+ var(--checkbox-default-disabled-active-color)
84
+ );
69
85
  cursor: not-allowed;
70
- opacity: 0.9;
86
+ opacity: 0.5;
71
87
  }
72
88
 
73
89
  input[type="checkbox"]:disabled:checked {
74
- --b: var(--checkbox-disabled-inner-color);
75
- --bc: var(--checkbox-border-color);
90
+ --b: var(
91
+ --checkbox-disabled-active-color,
92
+ var(--checkbox-default-disabled-active-color)
93
+ );
94
+ --bc: var(
95
+ --checkbox-border-color,
96
+ var(--checkbox-default-border-color)
97
+ );
98
+ --d-o: 0.3s;
99
+ --d-t: 0.6s;
100
+ --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
101
+ --o: .7;
76
102
  --r: 43deg;
77
103
  }
78
104
 
@@ -81,16 +107,25 @@
81
107
  }
82
108
 
83
109
  input[type="checkbox"]:hover:not(:checked):not(:disabled) {
84
- --bc: var(--checkbox-border-hover-color);
110
+ --bc: var(
111
+ --checkbox-border-hover-color,
112
+ var(--checkbox-default-border-hover-color)
113
+ );
85
114
  }
86
115
  input[type="checkbox"]:focus {
87
- box-shadow: 0 0 0 var(--checkbox-focus-shadow);
116
+ box-shadow: 0 0 0 var(
117
+ --checkbox-focus-shadow,
118
+ var(--checkbox-default-focus-shadow)
119
+ );
88
120
  }
89
121
 
90
- input[type="checkbox"]:not(.switch):after {
122
+ input[type="checkbox"]:after {
91
123
  width: 5px;
92
124
  height: 9px;
93
- border: 2px solid var(--checkbox-active-inner-color);
125
+ border: 2px solid var(
126
+ --checkbox-active-inner-color,
127
+ var(--checkbox-default-active-inner-color)
128
+ );
94
129
  border-top: 0;
95
130
  border-left: 0;
96
131
  left: 7px;
package/dist/components/simple/forms/Checkbox.svelte.d.ts CHANGED
@@ -1,17 +1,11 @@
1
1
  import { SvelteComponent } from "svelte";
2
+ import './Checkbox.css';
3
+ import '../../../css/main.css';
2
4
  declare const __propDef: {
3
5
  props: {
4
6
  value?: boolean | undefined;
5
7
  id?: string | undefined;
6
8
  disabled?: boolean | undefined;
7
- activeColor?: string | undefined;
8
- activeInnerColor?: string | undefined;
9
- focusShadow?: string | undefined;
10
- borderColor?: string | undefined;
11
- borderHoverColor?: string | undefined;
12
- backgroundColor?: string | undefined;
13
- disabledColor?: string | undefined;
14
- disabledInnerColor?: string | undefined;
15
9
  };
16
10
  events: {
17
11
  change: Event;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@likable-hair/svelte",
3
3
  "description": "A Svelte component for likablehair and others",
4
- "version": "3.1.7",
4
+ "version": "3.1.9",
5
5
  "scripts": {
6
6
  "host": "vite --host",
7
7
  "dev": "vite dev",