@hyvor/design 0.0.44 → 0.0.46
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/dist/components/ActionList/ActionListItem.svelte +11 -0
- package/dist/components/Button/Button.svelte +0 -1
- package/dist/components/Checkbox/Checkbox.svelte +19 -0
- package/dist/components/Checkbox/Checkbox.svelte.d.ts +1 -0
- package/dist/components/Tooltip/Tooltip.svelte +4 -1
- package/dist/index.css +7 -0
- package/package.json +1 -1
|
@@ -120,4 +120,15 @@ function handleClick() {
|
|
|
120
120
|
color: var(--text-light);
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
+
div.action-list-item.disabled {
|
|
124
|
+
opacity: 0.5;
|
|
125
|
+
cursor: not-allowed;
|
|
126
|
+
pointer-events: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
div.action-list-item.disabled:hover {
|
|
130
|
+
background-color: transparent;
|
|
131
|
+
pointer-events: none;
|
|
132
|
+
}
|
|
133
|
+
|
|
123
134
|
</style>
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
<script>export let checked = void 0;
|
|
2
2
|
export let group = [];
|
|
3
3
|
export let value = "on";
|
|
4
|
+
export let disabled = false;
|
|
4
5
|
export let input = {};
|
|
5
6
|
function handleChange() {
|
|
7
|
+
if (disabled)
|
|
8
|
+
return;
|
|
6
9
|
const index = group.indexOf(value);
|
|
7
10
|
if (checked === void 0)
|
|
8
11
|
checked = index >= 0;
|
|
@@ -28,6 +31,7 @@ function handleChange() {
|
|
|
28
31
|
type="checkbox"
|
|
29
32
|
bind:checked
|
|
30
33
|
bind:this={input}
|
|
34
|
+
disabled={disabled}
|
|
31
35
|
|
|
32
36
|
on:keyup
|
|
33
37
|
on:keydown
|
|
@@ -127,4 +131,19 @@ function handleChange() {
|
|
|
127
131
|
input:checked ~ span.placeholder:after {
|
|
128
132
|
display:block;
|
|
129
133
|
}
|
|
134
|
+
|
|
135
|
+
/* disabled styles */
|
|
136
|
+
input:disabled ~ span.placeholder {
|
|
137
|
+
background-color: var(--accent-light);
|
|
138
|
+
border: none !important;
|
|
139
|
+
opacity: 0.2;
|
|
140
|
+
cursor: not-allowed;
|
|
141
|
+
box-shadow: none !important;
|
|
142
|
+
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
input:disabled:checked ~ span.placeholder:after {
|
|
146
|
+
display: none;
|
|
147
|
+
pointer-events: none;
|
|
148
|
+
}
|
|
130
149
|
</style>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script>import { tick, onMount, onDestroy } from "svelte";
|
|
2
|
+
import { fade } from "svelte/transition";
|
|
2
3
|
export let text = "";
|
|
3
4
|
export let position = "top";
|
|
4
5
|
export let color = "black";
|
|
@@ -69,6 +70,7 @@ onMount(() => {
|
|
|
69
70
|
class="tooltip {position}"
|
|
70
71
|
style:max-width={maxWidth + 'px'}
|
|
71
72
|
bind:this={tooltip}
|
|
73
|
+
transition:fade={{duration: 100}}
|
|
72
74
|
>
|
|
73
75
|
{#if $$slots.tooltip}
|
|
74
76
|
<slot name="tooltip" />
|
|
@@ -81,7 +83,8 @@ onMount(() => {
|
|
|
81
83
|
|
|
82
84
|
<style>
|
|
83
85
|
.tooltip-wrap {
|
|
84
|
-
display: inline;
|
|
86
|
+
display: inline-flex;
|
|
87
|
+
align-items: center;
|
|
85
88
|
position: relative;
|
|
86
89
|
|
|
87
90
|
--local-bg: #24292f;
|
package/dist/index.css
CHANGED