@stonecrop/desktop 0.2.5
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/README.md +11 -0
- package/dist/desktop.js +4967 -0
- package/dist/desktop.js.map +1 -0
- package/dist/desktop.umd.cjs +45 -0
- package/dist/desktop.umd.cjs.map +1 -0
- package/dist/style.css +1 -0
- package/package.json +54 -0
- package/src/components/ActionSet.vue +271 -0
- package/src/components/CommandPalette.vue +5 -0
- package/src/components/Desktop.vue +8 -0
- package/src/components/Doctype.vue +37 -0
- package/src/components/Records.vue +20 -0
- package/src/components/SheetNav.vue +330 -0
|
@@ -0,0 +1,330 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<footer>
|
|
3
|
+
<ul class="tabs">
|
|
4
|
+
<li class="hidebreadcrumbs" @click="toggleBreadcrumbs" @keydown.enter="toggleBreadcrumbs">
|
|
5
|
+
<a tabindex="0"><div :class="rotateHideTabIcon">×</div></a>
|
|
6
|
+
</li>
|
|
7
|
+
<li
|
|
8
|
+
class="hometab"
|
|
9
|
+
@click="navigateHome"
|
|
10
|
+
@keydown.enter="navigateHome"
|
|
11
|
+
:style="{ display: breadcrumbsVisibile ? 'block' : 'none' }">
|
|
12
|
+
<router-link to="/home" tabindex="0">
|
|
13
|
+
<svg
|
|
14
|
+
version="1.1"
|
|
15
|
+
id="Capa_1"
|
|
16
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
17
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
18
|
+
x="0px"
|
|
19
|
+
y="0px"
|
|
20
|
+
viewBox="0 0 424.098 424.098"
|
|
21
|
+
style="enable-background: new 0 0 424.098 424.098"
|
|
22
|
+
xml:space="preserve">
|
|
23
|
+
<g>
|
|
24
|
+
<path
|
|
25
|
+
style="fill: #010002"
|
|
26
|
+
d="M351.191,401.923H72.901c-4.487,0-8.129-3.633-8.129-8.129V242.262l-56.664-0.114
|
|
27
|
+
c-3.284-0.008-6.243-1.992-7.495-5.023c-1.252-3.04-0.553-6.527,1.764-8.852L206.104,24.546c1.853-1.845,4.503-2.666,7.047-2.276
|
|
28
|
+
c2.414,0.39,4.511,1.845,5.731,3.942l47.43,47.43V58.499c0-4.487,3.633-8.129,8.129-8.129h47.755c4.495,0,8.129,3.642,8.129,8.129
|
|
29
|
+
v79.156l91.39,91.398c2.325,2.325,3.024,5.828,1.764,8.868c-1.26,3.032-4.227,5.007-7.511,5.007c-0.008,0-0.008,0-0.016,0
|
|
30
|
+
l-56.64-0.114v150.98C359.32,398.29,355.686,401.923,351.191,401.923z M81.03,385.666h262.033V234.67
|
|
31
|
+
c0-2.162,0.854-4.235,2.39-5.755c1.528-1.52,3.585-2.374,5.739-2.374c0.008,0,0.008,0,0.016,0l45.105,0.089l-79.855-79.863
|
|
32
|
+
c-1.528-1.528-2.382-3.593-2.382-5.747V66.628h-31.498v26.645c0,3.284-1.975,6.251-5.015,7.511
|
|
33
|
+
c-3.032,1.268-6.527,0.569-8.86-1.764l-57.038-57.038l-183.95,183.95l45.203,0.089c4.487,0.008,8.112,3.642,8.112,8.129
|
|
34
|
+
C81.03,234.149,81.03,385.666,81.03,385.666z" />
|
|
35
|
+
</g>
|
|
36
|
+
</svg>
|
|
37
|
+
</router-link>
|
|
38
|
+
</li>
|
|
39
|
+
<li
|
|
40
|
+
class="searchtab"
|
|
41
|
+
@click="toggleSearch"
|
|
42
|
+
@keydown.enter="toggleSearch"
|
|
43
|
+
:style="{ display: breadcrumbsVisibile ? 'block' : 'none' }">
|
|
44
|
+
<a tabindex="0">
|
|
45
|
+
<span :style="{ display: searchVisibile ? 'none' : 'block' }">
|
|
46
|
+
<svg style="width: 11pt">
|
|
47
|
+
<g transform="matrix(-0.08088215,0,0,0.08088215,9.8016177,3.1263021e-6)">
|
|
48
|
+
<path
|
|
49
|
+
d="M 93.148438,80.832031 C 109.5,57.742188 104.03125,25.769531 80.941406,9.421875 57.851562,-6.925781 25.878906,-1.460938 9.53125,21.632812 -6.816406,44.722656 -1.351562,76.691406 21.742188,93.039062 38.222656,104.70703 60.011719,105.60547 77.394531,95.339844 l 37.769529,37.542966 c 4.07813,4.29297 10.86328,4.46485 15.15625,0.38672 4.29297,-4.07422 4.46485,-10.85937 0.39063,-15.15234 -0.12891,-0.13672 -0.25391,-0.26172 -0.39063,-0.39063 z m -41.839844,3.5 C 33.0625,84.335938 18.269531,69.554688 18.257812,51.308594 18.253906,33.0625 33.035156,18.269531 51.285156,18.261719 c 18.222656,-0.0078 33.007813,14.75 33.042969,32.972656 0.03125,18.25 -14.742187,33.066406 -32.996094,33.097656 -0.0078,0 -0.01172,0 -0.02344,0 z m 0,0"
|
|
50
|
+
style="fill: #000000; fill-opacity: 1; fill-rule: nonzero; stroke: none"
|
|
51
|
+
id="path2" />
|
|
52
|
+
</g>
|
|
53
|
+
</svg>
|
|
54
|
+
</span>
|
|
55
|
+
<input
|
|
56
|
+
v-model="searchText"
|
|
57
|
+
ref="searchinput"
|
|
58
|
+
:style="{ display: searchVisibile ? 'block' : 'none' }"
|
|
59
|
+
@click="handleSearchInput($event)"
|
|
60
|
+
@input="handleSearchInput($event)"
|
|
61
|
+
@blur="handleSearch($event)"
|
|
62
|
+
@keydown.enter="handleSearch($event)"
|
|
63
|
+
type="text" />
|
|
64
|
+
</a>
|
|
65
|
+
</li>
|
|
66
|
+
<li
|
|
67
|
+
v-for="(breadcrumb, index) in breadcrumbs"
|
|
68
|
+
:key="index"
|
|
69
|
+
:style="{ display: breadcrumbsVisibile ? 'block' : 'none' }">
|
|
70
|
+
<router-link tabindex="0" :to="breadcrumb.to"> {{ breadcrumb.title }} </router-link>
|
|
71
|
+
</li>
|
|
72
|
+
</ul>
|
|
73
|
+
</footer>
|
|
74
|
+
</template>
|
|
75
|
+
|
|
76
|
+
<script setup lang="ts">
|
|
77
|
+
import { computed, nextTick, onMounted, ref } from 'vue'
|
|
78
|
+
|
|
79
|
+
const props = defineProps<{
|
|
80
|
+
breadcrumbs?: { title: string; to: string }[]
|
|
81
|
+
}>()
|
|
82
|
+
|
|
83
|
+
const breadcrumbs = ref([])
|
|
84
|
+
const breadcrumbsVisibile = ref(true)
|
|
85
|
+
const searchVisibile = ref(false)
|
|
86
|
+
const searchText = ref('')
|
|
87
|
+
const searchinput = ref<HTMLElement>(null)
|
|
88
|
+
|
|
89
|
+
const rotateHideTabIcon = computed(() => {
|
|
90
|
+
return breadcrumbsVisibile.value ? 'unrotated' : 'rotated'
|
|
91
|
+
})
|
|
92
|
+
|
|
93
|
+
onMounted(() => {
|
|
94
|
+
breadcrumbs.value = props.breadcrumbs || []
|
|
95
|
+
})
|
|
96
|
+
|
|
97
|
+
const toggleBreadcrumbs = () => {
|
|
98
|
+
breadcrumbsVisibile.value = !breadcrumbsVisibile.value
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
const toggleSearch = async () => {
|
|
102
|
+
searchVisibile.value = !searchVisibile.value
|
|
103
|
+
await nextTick(() => {
|
|
104
|
+
searchinput.value.focus()
|
|
105
|
+
})
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
const handleSearchInput = (event: Event | MouseEvent) => {
|
|
109
|
+
event.preventDefault()
|
|
110
|
+
event.stopPropagation()
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
const handleSearch = async (event: FocusEvent | KeyboardEvent) => {
|
|
114
|
+
event.preventDefault()
|
|
115
|
+
event.stopPropagation()
|
|
116
|
+
await toggleSearch()
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
const navigateHome = (/* event: MouseEvent | KeyboardEvent */) => {
|
|
120
|
+
// navigate home
|
|
121
|
+
}
|
|
122
|
+
</script>
|
|
123
|
+
|
|
124
|
+
<style scoped>
|
|
125
|
+
footer {
|
|
126
|
+
position: fixed;
|
|
127
|
+
bottom: 0px;
|
|
128
|
+
width: 100%;
|
|
129
|
+
background-color: transparent;
|
|
130
|
+
height: 2rem;
|
|
131
|
+
z-index: 100;
|
|
132
|
+
text-align: left;
|
|
133
|
+
font-size: 100%;
|
|
134
|
+
display: flex;
|
|
135
|
+
justify-content: right;
|
|
136
|
+
padding-bottom: 0.2rem;
|
|
137
|
+
}
|
|
138
|
+
ul {
|
|
139
|
+
display: flex;
|
|
140
|
+
flex-direction: row-reverse;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.tabs li {
|
|
144
|
+
/* Makes a horizontal row */
|
|
145
|
+
float: left;
|
|
146
|
+
list-style-type: none;
|
|
147
|
+
/* So the psueudo elements can be
|
|
148
|
+
abs. positioned inside */
|
|
149
|
+
position: relative;
|
|
150
|
+
margin-left: -1px;
|
|
151
|
+
}
|
|
152
|
+
.tabs a {
|
|
153
|
+
float: left;
|
|
154
|
+
padding: 1ch 4ch 4ch 4ch;
|
|
155
|
+
text-decoration: none;
|
|
156
|
+
color: black;
|
|
157
|
+
background: #aaa;
|
|
158
|
+
outline: 2px solid inherit;
|
|
159
|
+
outline-offset: -2px;
|
|
160
|
+
|
|
161
|
+
/* Only round the top corners */
|
|
162
|
+
-webkit-border-top-left-radius: 15px;
|
|
163
|
+
-webkit-border-top-right-radius: 15px;
|
|
164
|
+
-moz-border-radius-topleft: 15px;
|
|
165
|
+
-moz-border-radius-topright: 15px;
|
|
166
|
+
border-top-left-radius: 15px;
|
|
167
|
+
border-top-right-radius: 15px;
|
|
168
|
+
|
|
169
|
+
border: 1px solid #ccc;
|
|
170
|
+
}
|
|
171
|
+
.tabs .router-link-active {
|
|
172
|
+
/* Highest, active tab is on top */
|
|
173
|
+
z-index: 3;
|
|
174
|
+
}
|
|
175
|
+
.router-link-active {
|
|
176
|
+
/* Colors when tab is active */
|
|
177
|
+
background: #827553;
|
|
178
|
+
color: black;
|
|
179
|
+
box-shadow: #999;
|
|
180
|
+
}
|
|
181
|
+
.tabs li:before,
|
|
182
|
+
.tabs li:after,
|
|
183
|
+
.tabs li a:before,
|
|
184
|
+
.tabs li a:after {
|
|
185
|
+
/* All pseudo elements are
|
|
186
|
+
abs. positioned and on bottom */
|
|
187
|
+
position: absolute;
|
|
188
|
+
bottom: 0;
|
|
189
|
+
}
|
|
190
|
+
/* Only the first, last, and active
|
|
191
|
+
tabs need pseudo elements at all */
|
|
192
|
+
.tabs li:last-child:after,
|
|
193
|
+
.tabs li:last-child a:after,
|
|
194
|
+
.tabs li:first-child:before,
|
|
195
|
+
.tabs li:first-child a:before,
|
|
196
|
+
.tabs .router-link-active:after,
|
|
197
|
+
.tabs .router-link-active:before,
|
|
198
|
+
.tabs .router-link-active a:after,
|
|
199
|
+
.tabs .router-link-active a:before {
|
|
200
|
+
content: '';
|
|
201
|
+
}
|
|
202
|
+
.tabs .router-link-active:before,
|
|
203
|
+
.tabs .router-link-active:after {
|
|
204
|
+
background: transparent;
|
|
205
|
+
|
|
206
|
+
/* Squares below circles */
|
|
207
|
+
z-index: 1;
|
|
208
|
+
}
|
|
209
|
+
/* Squares */
|
|
210
|
+
.tabs li:before,
|
|
211
|
+
.tabs li:after {
|
|
212
|
+
background: transparent;
|
|
213
|
+
width: 10px;
|
|
214
|
+
height: 10px;
|
|
215
|
+
}
|
|
216
|
+
.tabs li:before {
|
|
217
|
+
left: -10px;
|
|
218
|
+
}
|
|
219
|
+
.tabs li:after {
|
|
220
|
+
right: -10px;
|
|
221
|
+
}
|
|
222
|
+
/* Circles */
|
|
223
|
+
.tabs li a:after,
|
|
224
|
+
.tabs li a:before {
|
|
225
|
+
width: 20px;
|
|
226
|
+
height: 20px;
|
|
227
|
+
/* Circles are circular */
|
|
228
|
+
-webkit-border-radius: 10px;
|
|
229
|
+
-moz-border-radius: 10px;
|
|
230
|
+
border-radius: 10px;
|
|
231
|
+
background: transparent;
|
|
232
|
+
|
|
233
|
+
/* Circles over squares */
|
|
234
|
+
z-index: 2;
|
|
235
|
+
}
|
|
236
|
+
.tabs .router-link-active a:after,
|
|
237
|
+
.tabs .router-link-active a:before {
|
|
238
|
+
background: transparent;
|
|
239
|
+
}
|
|
240
|
+
/* First and last tabs have different
|
|
241
|
+
outside color needs */
|
|
242
|
+
.tabs li:first-child.router-link-active a:before,
|
|
243
|
+
.tabs li:last-child.router-link-active a:after {
|
|
244
|
+
background: transparent;
|
|
245
|
+
}
|
|
246
|
+
.tabs li a:before {
|
|
247
|
+
left: -20px;
|
|
248
|
+
}
|
|
249
|
+
.tabs li a:after {
|
|
250
|
+
right: -20px;
|
|
251
|
+
}
|
|
252
|
+
.hidebreadcrumbs a {
|
|
253
|
+
width: 1ch;
|
|
254
|
+
min-width: calc(66px - 4ch);
|
|
255
|
+
background-color: #ffffff;
|
|
256
|
+
padding-left: 2ch;
|
|
257
|
+
padding-right: 2ch;
|
|
258
|
+
padding-top: 3px;
|
|
259
|
+
font-size: 150%;
|
|
260
|
+
text-align: center;
|
|
261
|
+
}
|
|
262
|
+
.rotated {
|
|
263
|
+
/* border: 1px solid red; */
|
|
264
|
+
transform: rotate(45deg);
|
|
265
|
+
-webkit-transform: rotate(45deg);
|
|
266
|
+
-moz-transform: rotate(45deg);
|
|
267
|
+
-ms-transform: rotate(45deg);
|
|
268
|
+
-o-transform: rotate(45deg);
|
|
269
|
+
transition: transform 250ms;
|
|
270
|
+
}
|
|
271
|
+
.unrotated {
|
|
272
|
+
/* border: 1px solid red; */
|
|
273
|
+
transform: rotate(0deg);
|
|
274
|
+
-webkit-transform: rotate(0deg);
|
|
275
|
+
-moz-transform: rotate(0deg);
|
|
276
|
+
-ms-transform: rotate(0deg);
|
|
277
|
+
-o-transform: rotate(0deg);
|
|
278
|
+
transition: transform 250ms;
|
|
279
|
+
}
|
|
280
|
+
li:active,
|
|
281
|
+
li:hover,
|
|
282
|
+
li:focus,
|
|
283
|
+
li > a:active,
|
|
284
|
+
li > a:hover,
|
|
285
|
+
li > a:focus {
|
|
286
|
+
z-index: 3;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
a:active,
|
|
290
|
+
a:hover,
|
|
291
|
+
a:focus {
|
|
292
|
+
outline: 2px solid black;
|
|
293
|
+
z-index: 3;
|
|
294
|
+
}
|
|
295
|
+
.hometab a {
|
|
296
|
+
width: 1ch;
|
|
297
|
+
min-width: calc(66px - 4ch);
|
|
298
|
+
background-color: #ffffff;
|
|
299
|
+
padding-left: 2ch;
|
|
300
|
+
padding-right: 2ch;
|
|
301
|
+
padding-top: 6px;
|
|
302
|
+
text-align: center;
|
|
303
|
+
}
|
|
304
|
+
.hometab svg {
|
|
305
|
+
height: 14pt;
|
|
306
|
+
width: 14pt;
|
|
307
|
+
}
|
|
308
|
+
.searchtab a {
|
|
309
|
+
/* width: 100%; */
|
|
310
|
+
min-width: calc(66px - 4ch);
|
|
311
|
+
background-color: #ffffff;
|
|
312
|
+
padding-left: 2ch;
|
|
313
|
+
padding-right: 2ch;
|
|
314
|
+
padding-top: 11px;
|
|
315
|
+
font-size: 150%;
|
|
316
|
+
align-items: center;
|
|
317
|
+
}
|
|
318
|
+
.searchtab svg {
|
|
319
|
+
padding-left: 0.25ch;
|
|
320
|
+
}
|
|
321
|
+
.searchtab input {
|
|
322
|
+
margin-top: -4px;
|
|
323
|
+
outline: none;
|
|
324
|
+
border: none;
|
|
325
|
+
border-bottom: 1.5px solid black;
|
|
326
|
+
background-color: transparent;
|
|
327
|
+
text-align: right;
|
|
328
|
+
font-size: 11pt;
|
|
329
|
+
}
|
|
330
|
+
</style>
|