@nil-/doc 0.2.30 → 0.2.31
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 +8 -0
- package/components/Layout.svelte +1 -1
- package/components/etc/Container.svelte +81 -31
- package/components/etc/Container.svelte.d.ts +0 -1
- package/components/etc/ThemeIcon.svelte +40 -42
- package/components/etc/action.d.ts +1 -0
- package/components/etc/action.js +1 -0
- package/components/navigation/Nav.svelte +0 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/components/Layout.svelte
CHANGED
|
@@ -90,7 +90,7 @@ $:
|
|
|
90
90
|
<slot name="title"><span>@nil-/doc</span></slot>
|
|
91
91
|
<ThemeIcon bind:dark={$isDark} />
|
|
92
92
|
</div>
|
|
93
|
-
<Container offset={250}
|
|
93
|
+
<Container offset={250} vertical secondary>
|
|
94
94
|
<svelte:fragment slot="primary">
|
|
95
95
|
<div class="content scrollable">
|
|
96
96
|
<Nav
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
<style>
|
|
2
|
+
div {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
}
|
|
5
|
+
|
|
2
6
|
.container {
|
|
3
7
|
width: 100%;
|
|
4
8
|
height: 100%;
|
|
@@ -20,110 +24,156 @@
|
|
|
20
24
|
overflow: hidden;
|
|
21
25
|
}
|
|
22
26
|
|
|
23
|
-
/* need higher specificity than above */
|
|
24
27
|
.container > .divider {
|
|
25
28
|
z-index: 10;
|
|
26
|
-
width: auto;
|
|
27
|
-
height: 0px;
|
|
28
29
|
overflow: visible;
|
|
29
30
|
user-select: none;
|
|
30
31
|
grid-area: divider;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
|
-
.
|
|
34
|
-
|
|
35
|
-
height: auto;
|
|
34
|
+
.overlay {
|
|
35
|
+
touch-action: none;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.container > .divider > .overlay {
|
|
39
39
|
width: 100%;
|
|
40
40
|
height: 20px;
|
|
41
|
-
cursor:
|
|
41
|
+
cursor: ns-resize;
|
|
42
42
|
transform: translateY(-50%);
|
|
43
|
-
touch-action: none;
|
|
44
43
|
}
|
|
45
44
|
|
|
46
|
-
.container > .divider
|
|
45
|
+
.container.vertical > .divider > .overlay {
|
|
47
46
|
width: 20px;
|
|
48
47
|
height: 100%;
|
|
49
|
-
cursor:
|
|
48
|
+
cursor: ew-resize;
|
|
50
49
|
transform: translateX(-50%);
|
|
51
50
|
}
|
|
52
51
|
|
|
53
52
|
/* colors */
|
|
54
|
-
.container
|
|
55
|
-
|
|
53
|
+
.container {
|
|
54
|
+
--color-p: hsl(0, 2%, 70%);
|
|
55
|
+
--color-s: hsl(0, 0%, 0%);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.container.dark {
|
|
59
|
+
--color-p: hsl(0, 2%, 38%);
|
|
60
|
+
--color-s: hsl(0, 0%, 100%);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.container:not(.vertical) > .divider {
|
|
64
|
+
border-bottom: var(--color-p) solid 2.5px;
|
|
65
|
+
border-top: var(--color-p) solid 2.5px;
|
|
66
|
+
background-color: var(--color-p);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.container.vertical > .divider {
|
|
70
|
+
border-right: var(--color-p) solid 2.5px;
|
|
71
|
+
border-left: var(--color-p) solid 2.5px;
|
|
72
|
+
background-color: var(--color-p);
|
|
56
73
|
}
|
|
57
74
|
|
|
58
|
-
.container > .divider
|
|
59
|
-
|
|
75
|
+
.container.moving:not(.secondary):not(.vertical) > .divider {
|
|
76
|
+
border-bottom: var(--color-s) solid 2.5px;
|
|
60
77
|
}
|
|
61
78
|
|
|
62
|
-
.container.
|
|
63
|
-
|
|
79
|
+
.container.moving.secondary:not(.vertical) > .divider {
|
|
80
|
+
border-top: var(--color-s) solid 2.5px;
|
|
64
81
|
}
|
|
65
82
|
|
|
66
|
-
.container.
|
|
67
|
-
|
|
83
|
+
.container.moving:not(.secondary).vertical > .divider {
|
|
84
|
+
border-right: var(--color-s) solid 2.5px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.container.moving.vertical.secondary > .divider {
|
|
88
|
+
border-left: var(--color-s) solid 2.5px;
|
|
68
89
|
}
|
|
69
90
|
</style>
|
|
70
91
|
|
|
71
92
|
<script>import { writable } from "svelte/store";
|
|
93
|
+
import { tweened } from "svelte/motion";
|
|
72
94
|
import { createDraggable } from "./action";
|
|
73
95
|
import { getTheme } from "../context";
|
|
74
96
|
const isDark = getTheme();
|
|
75
97
|
export let vertical = false;
|
|
76
98
|
export let offset = 0;
|
|
77
99
|
export let secondary = false;
|
|
78
|
-
export let padding = 0;
|
|
79
100
|
let width;
|
|
80
101
|
let height;
|
|
81
|
-
let collapse = false;
|
|
82
102
|
const { position, draggable } = createDraggable(offset);
|
|
83
|
-
|
|
84
|
-
|
|
103
|
+
$:
|
|
104
|
+
span = vertical ? width : height;
|
|
105
|
+
function update(limit, value) {
|
|
106
|
+
if (span == null) {
|
|
85
107
|
return;
|
|
86
108
|
}
|
|
87
|
-
const span = vertical ? w : h;
|
|
88
109
|
offset = Math.max(Math.min(value, span - limit), limit);
|
|
89
110
|
}
|
|
111
|
+
const off = tweened(offset, { duration: 50 });
|
|
112
|
+
let last = [];
|
|
90
113
|
$:
|
|
91
|
-
update(
|
|
114
|
+
update(10, $position);
|
|
92
115
|
$:
|
|
93
|
-
|
|
116
|
+
$off = offset;
|
|
94
117
|
$:
|
|
95
|
-
style = !secondary ? `auto
|
|
118
|
+
style = !secondary ? `auto 5px ${$off}px` : `${$off}px 5px auto`;
|
|
96
119
|
const moving = writable(false);
|
|
120
|
+
function addLast(v) {
|
|
121
|
+
if (v > 10) {
|
|
122
|
+
if (last.length < 2) {
|
|
123
|
+
last = [...last, v];
|
|
124
|
+
} else {
|
|
125
|
+
last = [last[1], v];
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
function dbltap() {
|
|
130
|
+
if ($off > 10) {
|
|
131
|
+
addLast(offset);
|
|
132
|
+
offset = 10;
|
|
133
|
+
} else if (last.length > 0) {
|
|
134
|
+
offset = last.pop();
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
function check(v, flag, s) {
|
|
138
|
+
if (flag) {
|
|
139
|
+
return v < s - 10;
|
|
140
|
+
} else {
|
|
141
|
+
return v > 10;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
97
144
|
</script>
|
|
98
145
|
<div
|
|
99
146
|
class="container"
|
|
100
147
|
class:vertical
|
|
148
|
+
class:secondary
|
|
101
149
|
class:dark={$isDark}
|
|
102
|
-
|
|
150
|
+
class:moving={$moving}
|
|
103
151
|
bind:clientWidth={width}
|
|
152
|
+
bind:clientHeight={height}
|
|
104
153
|
style:grid-template-columns={vertical ? style : null}
|
|
105
154
|
style:grid-template-rows={!vertical ? style : null}
|
|
106
155
|
>
|
|
107
156
|
{#if width != null && height != null}
|
|
108
157
|
<div style:grid-area="primary">
|
|
109
|
-
{#if
|
|
158
|
+
{#if check($off, !secondary, span)}
|
|
110
159
|
<slot name="primary" />
|
|
111
160
|
{/if}
|
|
112
161
|
</div>
|
|
113
|
-
<div class="divider"
|
|
162
|
+
<div class="divider">
|
|
114
163
|
<div
|
|
115
164
|
class="overlay"
|
|
116
165
|
use:draggable={{
|
|
117
166
|
reset: () => offset,
|
|
118
167
|
reversed: !secondary,
|
|
119
168
|
vertical,
|
|
120
|
-
dbltap:
|
|
169
|
+
dbltap: dbltap,
|
|
170
|
+
tap: () => addLast($off),
|
|
121
171
|
moving
|
|
122
172
|
}}
|
|
123
173
|
/>
|
|
124
174
|
</div>
|
|
125
175
|
<div style:grid-area="secondary">
|
|
126
|
-
{#if
|
|
176
|
+
{#if check($off, secondary, span)}
|
|
127
177
|
<slot name="secondary" />
|
|
128
178
|
{/if}
|
|
129
179
|
</div>
|
|
@@ -1,25 +1,16 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
<script>import { tweened } from "svelte/motion";
|
|
2
|
+
import { elasticOut } from "svelte/easing";
|
|
3
|
+
export let dark = true;
|
|
4
|
+
const values = tweened(dark ? vdark : vlight, { duration: 1e3, easing: elasticOut });
|
|
4
5
|
$:
|
|
5
|
-
values
|
|
6
|
+
$values = dark ? vdark : vlight;
|
|
6
7
|
const index = indexer++;
|
|
7
8
|
</script>
|
|
8
9
|
<style>
|
|
9
10
|
svg {
|
|
10
|
-
all: unset;
|
|
11
|
-
width: 50%;
|
|
12
|
-
height: 50%;
|
|
13
|
-
margin: auto;
|
|
14
|
-
|
|
15
11
|
cursor: pointer;
|
|
16
|
-
|
|
17
|
-
fill: none;
|
|
18
|
-
|
|
12
|
+
fill: currentColor;
|
|
19
13
|
stroke: currentColor;
|
|
20
|
-
stroke-width: 2;
|
|
21
|
-
stroke-linecap: round;
|
|
22
|
-
stroke-linejoin: round;
|
|
23
14
|
|
|
24
15
|
-webkit-tap-highlight-color: transparent;
|
|
25
16
|
-moz-tap-highlight-color: transparent;
|
|
@@ -27,52 +18,59 @@ const index = indexer++;
|
|
|
27
18
|
tap-highlight-color: transparent;
|
|
28
19
|
}
|
|
29
20
|
|
|
30
|
-
svg
|
|
31
|
-
|
|
21
|
+
svg,
|
|
22
|
+
rect {
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: 100%;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
line {
|
|
28
|
+
stroke-width: 2;
|
|
29
|
+
stroke-linecap: round;
|
|
30
|
+
stroke-linejoin: round;
|
|
32
31
|
}
|
|
33
32
|
</style>
|
|
34
33
|
|
|
35
34
|
<script context="module">let indexer = 0;
|
|
36
35
|
const vlight = {
|
|
37
36
|
rotate: 40,
|
|
38
|
-
|
|
39
|
-
cx: 12,
|
|
40
|
-
cy: 4
|
|
41
|
-
},
|
|
37
|
+
mcy: -8,
|
|
42
38
|
cr: 10,
|
|
43
|
-
|
|
39
|
+
v: 0
|
|
44
40
|
};
|
|
45
41
|
const vdark = {
|
|
46
42
|
rotate: 180,
|
|
47
|
-
|
|
48
|
-
cx: 30,
|
|
49
|
-
cy: 0
|
|
50
|
-
},
|
|
43
|
+
mcy: -24,
|
|
51
44
|
cr: 5,
|
|
52
|
-
|
|
45
|
+
v: 1
|
|
53
46
|
};
|
|
54
47
|
</script>
|
|
55
48
|
<svg
|
|
56
49
|
class:dark
|
|
57
|
-
viewBox="
|
|
58
|
-
|
|
50
|
+
viewBox="-25 -25 50 50"
|
|
51
|
+
transform={`rotate(${$values.rotate})`}
|
|
52
|
+
style={`color: hsl(0, 0%, ${$values.v * 100}%);`}
|
|
59
53
|
on:click={() => (dark = !dark)}
|
|
60
54
|
on:keypress={null}
|
|
61
55
|
>
|
|
62
|
-
<mask id={`
|
|
63
|
-
<rect x="
|
|
64
|
-
<circle
|
|
56
|
+
<mask id={`nil_doc_theme_icon_${index}`}>
|
|
57
|
+
<rect x="-25" y="-25" fill="white" />
|
|
58
|
+
<circle cy={$values.mcy} r="11" />
|
|
65
59
|
</mask>
|
|
66
|
-
<circle
|
|
67
|
-
<g style={`opacity: ${$values.
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
|
|
60
|
+
<circle r={$values.cr} mask={`url(#nil_doc_theme_icon_${index})`} />
|
|
61
|
+
<g style={`opacity: ${$values.v}`}>
|
|
62
|
+
<g>
|
|
63
|
+
<line x1="0" y1="9" x2="0" y2="11" />
|
|
64
|
+
<line x1="9" y1="0" x2="11" y2="0" />
|
|
65
|
+
<line x1="0" y1="-11" x2="0" y2="-9" />
|
|
66
|
+
<line x1="-11" y1="0" x2="-9" y2="0" />
|
|
67
|
+
</g>
|
|
68
|
+
<g transform="rotate(45)">
|
|
69
|
+
<line x1="0" y1="9" x2="0" y2="11" />
|
|
70
|
+
<line x1="9" y1="0" x2="11" y2="0" />
|
|
71
|
+
<line x1="0" y1="-11" x2="0" y2="-9" />
|
|
72
|
+
<line x1="-11" y1="0" x2="-9" y2="0" />
|
|
73
|
+
</g>
|
|
76
74
|
</g>
|
|
77
75
|
</svg>
|
|
78
76
|
|
package/components/etc/action.js
CHANGED