not-bulma 1.2.38 → 1.2.40
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.
|
|
3
|
+
"version": "1.2.40",
|
|
4
4
|
"description": "not-* family UI components on Bulma CSS Framework",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"svelte": "src/index.js",
|
|
@@ -60,6 +60,7 @@
|
|
|
60
60
|
"bulma-pageloader": "*",
|
|
61
61
|
"bulma-slider": "*",
|
|
62
62
|
"bulma-switch": "^2.0.4",
|
|
63
|
+
"bulma-tooltip": "^3.0.2",
|
|
63
64
|
"core-js": "^3.36.1",
|
|
64
65
|
"mocha": "^10.3.0",
|
|
65
66
|
"not-path": "^1.0.5",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import "bulma-tooltip/dist/css/bulma-tooltip.min.css";
|
|
2
3
|
export let hidden = true;
|
|
3
4
|
export let showable = true;
|
|
4
5
|
export let copiable = true;
|
|
@@ -6,34 +7,61 @@
|
|
|
6
7
|
export let copyIcon = "copy";
|
|
7
8
|
export let showIcon = "eye";
|
|
8
9
|
export let hideIcon = "eye-slash";
|
|
10
|
+
export let maxLength = 20;
|
|
11
|
+
export let shadowClass = "has-background-primary-90";
|
|
12
|
+
export let tooltip = true;
|
|
13
|
+
export let tooltipTTL = 2000;
|
|
14
|
+
export let tooltipText = "Скопировано в буфер";
|
|
15
|
+
export let tooltipClass = "has-tooltip-info";
|
|
9
16
|
|
|
10
17
|
export let value = "";
|
|
11
18
|
|
|
12
19
|
function toggleView() {
|
|
13
|
-
hidden
|
|
20
|
+
hidden = !hidden;
|
|
14
21
|
}
|
|
15
22
|
|
|
23
|
+
let contentCopied = false,
|
|
24
|
+
tooltipActive,
|
|
25
|
+
tooltipTarget;
|
|
26
|
+
|
|
16
27
|
async function copyContent() {
|
|
17
28
|
try {
|
|
18
29
|
await navigator.clipboard.writeText(value);
|
|
30
|
+
if (tooltip) {
|
|
31
|
+
contentCopied = true;
|
|
32
|
+
tooltipTarget.dataset.tooltip = tooltipText;
|
|
33
|
+
setTimeout(() => {
|
|
34
|
+
contentCopied = false;
|
|
35
|
+
tooltipTarget.removeAttribute("data-tooltip");
|
|
36
|
+
}, tooltipTTL);
|
|
37
|
+
}
|
|
19
38
|
} catch (err) {
|
|
20
39
|
console.error("Failed to copy: ", err);
|
|
21
40
|
}
|
|
22
41
|
}
|
|
42
|
+
|
|
43
|
+
$: tooltipActive = tooltip && contentCopied;
|
|
23
44
|
</script>
|
|
24
45
|
|
|
25
46
|
<span
|
|
26
|
-
class={hidden ? "is-censored
|
|
27
|
-
|
|
47
|
+
class={(hidden ? "is-censored " + shadowClass : "") +
|
|
48
|
+
" is-vertical-middle "}
|
|
49
|
+
style={`display:inline-block; width: ${maxLength}rem; height: var(--bulma-size-medium); overflow-x:hidden;`}
|
|
28
50
|
>{hidden ? "" : value}</span
|
|
29
51
|
>
|
|
30
52
|
{#if copiable}
|
|
31
|
-
<span
|
|
32
|
-
|
|
53
|
+
<span
|
|
54
|
+
bind:this={tooltipTarget}
|
|
55
|
+
on:click={copyContent}
|
|
56
|
+
class={"icon is-small is-right is-clickable " +
|
|
57
|
+
(tooltipActive ? ` ${tooltipClass} ` : "") +
|
|
58
|
+
" is-vertical-middle"}><i class="fas fa-{copyIcon}" /></span
|
|
33
59
|
>
|
|
34
60
|
{/if}
|
|
35
61
|
{#if showable}
|
|
36
|
-
<span
|
|
62
|
+
<span
|
|
63
|
+
class="icon is-small is-right is-clickable is-vertical-middle"
|
|
64
|
+
on:click={toggleView}
|
|
37
65
|
><i class="fas fa-{hidden ? showIcon : hideIcon}" /></span
|
|
38
66
|
>
|
|
39
67
|
{/if}
|