@stonecrop/desktop 0.6.0 → 0.6.2
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/desktop.css +1 -1
- package/dist/desktop.js +807 -824
- package/dist/desktop.js.map +1 -1
- package/dist/desktop.umd.cjs +25 -33
- package/dist/desktop.umd.cjs.map +1 -1
- package/package.json +5 -5
- package/src/components/ActionSet.vue +1 -1
- package/src/components/SheetNav.vue +135 -114
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/desktop",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.2",
|
|
4
4
|
"description": "Desktop-specific components for Stonecrop UI",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"vue": "^3.5.22",
|
|
40
|
-
"@stonecrop/
|
|
41
|
-
"@stonecrop/
|
|
42
|
-
"@stonecrop/themes": "0.6.
|
|
43
|
-
"@stonecrop/
|
|
40
|
+
"@stonecrop/atable": "0.6.2",
|
|
41
|
+
"@stonecrop/aform": "0.6.2",
|
|
42
|
+
"@stonecrop/themes": "0.6.2",
|
|
43
|
+
"@stonecrop/stonecrop": "0.6.2"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@eslint/js": "^9.38.0",
|
|
@@ -10,57 +10,33 @@
|
|
|
10
10
|
@click="navigateHome"
|
|
11
11
|
@keydown.enter="navigateHome">
|
|
12
12
|
<router-link to="/" tabindex="0">
|
|
13
|
-
<
|
|
14
|
-
id="Capa_1"
|
|
15
|
-
version="1.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>
|
|
13
|
+
<span class="icon-placeholder" aria-label="Home">🏠</span>
|
|
37
14
|
</router-link>
|
|
38
15
|
</li>
|
|
39
16
|
<li
|
|
40
|
-
class="searchtab"
|
|
41
|
-
:style="{ display: breadcrumbsVisibile ? 'block' : 'none' }"
|
|
42
|
-
@click="toggleSearch"
|
|
43
|
-
@keydown.enter="toggleSearch">
|
|
17
|
+
:class="['searchtab', { 'search-active': searchVisible }]"
|
|
18
|
+
:style="{ display: breadcrumbsVisibile ? 'block' : 'none' }">
|
|
44
19
|
<a tabindex="0">
|
|
45
|
-
<span
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</span>
|
|
20
|
+
<span
|
|
21
|
+
v-show="!searchVisible"
|
|
22
|
+
class="search-icon"
|
|
23
|
+
role="button"
|
|
24
|
+
aria-label="Search"
|
|
25
|
+
@click="toggleSearch"
|
|
26
|
+
@keydown.enter="toggleSearch"
|
|
27
|
+
>🔍</span
|
|
28
|
+
>
|
|
55
29
|
<input
|
|
30
|
+
v-show="searchVisible"
|
|
56
31
|
ref="searchinput"
|
|
57
32
|
v-model="searchText"
|
|
58
|
-
:style="{ display: searchVisibile ? 'block' : 'none' }"
|
|
59
33
|
type="text"
|
|
60
|
-
|
|
34
|
+
placeholder="Search..."
|
|
35
|
+
@click.stop
|
|
61
36
|
@input="handleSearchInput($event)"
|
|
62
37
|
@blur="handleSearch($event)"
|
|
63
|
-
@keydown.enter="handleSearch($event)"
|
|
38
|
+
@keydown.enter="handleSearch($event)"
|
|
39
|
+
@keydown.escape="toggleSearch" />
|
|
64
40
|
</a>
|
|
65
41
|
</li>
|
|
66
42
|
<li
|
|
@@ -79,7 +55,7 @@ import { computed, nextTick, ref, useTemplateRef } from 'vue'
|
|
|
79
55
|
const { breadcrumbs = [] } = defineProps<{ breadcrumbs?: { title: string; to: string }[] }>()
|
|
80
56
|
|
|
81
57
|
const breadcrumbsVisibile = ref(true)
|
|
82
|
-
const
|
|
58
|
+
const searchVisible = ref(false)
|
|
83
59
|
const searchText = ref('')
|
|
84
60
|
const inputRef = useTemplateRef<HTMLInputElement>('searchinput')
|
|
85
61
|
|
|
@@ -92,7 +68,7 @@ const toggleBreadcrumbs = () => {
|
|
|
92
68
|
}
|
|
93
69
|
|
|
94
70
|
const toggleSearch = async () => {
|
|
95
|
-
|
|
71
|
+
searchVisible.value = !searchVisible.value
|
|
96
72
|
await nextTick(() => {
|
|
97
73
|
inputRef.value?.focus()
|
|
98
74
|
})
|
|
@@ -120,15 +96,15 @@ footer {
|
|
|
120
96
|
bottom: 0px;
|
|
121
97
|
width: 100%;
|
|
122
98
|
background-color: transparent;
|
|
123
|
-
height: auto;
|
|
99
|
+
height: auto;
|
|
124
100
|
min-height: 2rem;
|
|
125
101
|
z-index: 100;
|
|
126
102
|
text-align: left;
|
|
127
103
|
font-size: 100%;
|
|
128
104
|
display: flex;
|
|
129
105
|
justify-content: right;
|
|
130
|
-
padding
|
|
131
|
-
box-sizing: border-box;
|
|
106
|
+
padding: 0 1rem 0 0;
|
|
107
|
+
box-sizing: border-box;
|
|
132
108
|
}
|
|
133
109
|
ul {
|
|
134
110
|
display: flex;
|
|
@@ -139,27 +115,27 @@ ul {
|
|
|
139
115
|
}
|
|
140
116
|
|
|
141
117
|
.tabs li {
|
|
142
|
-
/* Makes a horizontal row */
|
|
143
118
|
float: left;
|
|
144
119
|
list-style-type: none;
|
|
145
|
-
/* So the psueudo elements can be
|
|
146
|
-
abs. positioned inside */
|
|
147
120
|
position: relative;
|
|
148
121
|
margin-left: -1px;
|
|
149
122
|
}
|
|
123
|
+
|
|
124
|
+
/* Base tab styling - 15% larger for easier interaction */
|
|
150
125
|
.tabs a {
|
|
151
126
|
float: left;
|
|
152
|
-
padding: 0.
|
|
153
|
-
height: 2.
|
|
154
|
-
box-sizing: border-box;
|
|
127
|
+
padding: 0.575rem 1.725rem;
|
|
128
|
+
height: 2.6rem;
|
|
129
|
+
box-sizing: border-box;
|
|
155
130
|
display: flex;
|
|
156
131
|
align-items: center;
|
|
157
132
|
justify-content: center;
|
|
158
133
|
text-decoration: none;
|
|
159
|
-
color:
|
|
160
|
-
background: #
|
|
161
|
-
|
|
162
|
-
|
|
134
|
+
color: var(--sc-gray-80, #333);
|
|
135
|
+
background: var(--sc-btn-color, #ffffff);
|
|
136
|
+
border: 1px solid var(--sc-btn-border, #ccc);
|
|
137
|
+
font-size: 1.15rem;
|
|
138
|
+
transition: all 0.2s ease;
|
|
163
139
|
|
|
164
140
|
/* Only round the top corners */
|
|
165
141
|
-webkit-border-top-left-radius: 15px;
|
|
@@ -168,30 +144,27 @@ ul {
|
|
|
168
144
|
-moz-border-radius-topright: 15px;
|
|
169
145
|
border-top-left-radius: 15px;
|
|
170
146
|
border-top-right-radius: 15px;
|
|
147
|
+
}
|
|
171
148
|
|
|
172
|
-
|
|
149
|
+
.tabs a:hover {
|
|
150
|
+
background: var(--sc-btn-hover, #f2f2f2);
|
|
173
151
|
}
|
|
152
|
+
|
|
174
153
|
.tabs .router-link-active {
|
|
175
|
-
/* Highest, active tab is on top */
|
|
176
154
|
z-index: 3;
|
|
155
|
+
background: var(--sc-primary-color, #827553) !important;
|
|
156
|
+
border-color: var(--sc-primary-color, #827553) !important;
|
|
157
|
+
color: var(--sc-primary-text-color, #fff) !important;
|
|
177
158
|
}
|
|
178
|
-
|
|
179
|
-
/* Colors when tab is active */
|
|
180
|
-
background: #827553;
|
|
181
|
-
color: black;
|
|
182
|
-
box-shadow: #999;
|
|
183
|
-
}
|
|
159
|
+
|
|
184
160
|
.tabs li:before,
|
|
185
161
|
.tabs li:after,
|
|
186
162
|
.tabs li a:before,
|
|
187
163
|
.tabs li a:after {
|
|
188
|
-
/* All pseudo elements are
|
|
189
|
-
abs. positioned and on bottom */
|
|
190
164
|
position: absolute;
|
|
191
165
|
bottom: 0;
|
|
192
166
|
}
|
|
193
|
-
|
|
194
|
-
tabs need pseudo elements at all */
|
|
167
|
+
|
|
195
168
|
.tabs li:last-child:after,
|
|
196
169
|
.tabs li:last-child a:after,
|
|
197
170
|
.tabs li:first-child:before,
|
|
@@ -202,13 +175,13 @@ ul {
|
|
|
202
175
|
.tabs .router-link-active a:before {
|
|
203
176
|
content: '';
|
|
204
177
|
}
|
|
178
|
+
|
|
205
179
|
.tabs .router-link-active:before,
|
|
206
180
|
.tabs .router-link-active:after {
|
|
207
181
|
background: transparent;
|
|
208
|
-
|
|
209
|
-
/* Squares below circles */
|
|
210
182
|
z-index: 1;
|
|
211
183
|
}
|
|
184
|
+
|
|
212
185
|
/* Squares */
|
|
213
186
|
.tabs li:before,
|
|
214
187
|
.tabs li:after {
|
|
@@ -222,26 +195,22 @@ ul {
|
|
|
222
195
|
.tabs li:after {
|
|
223
196
|
right: -10px;
|
|
224
197
|
}
|
|
198
|
+
|
|
225
199
|
/* Circles */
|
|
226
200
|
.tabs li a:after,
|
|
227
201
|
.tabs li a:before {
|
|
228
202
|
width: 20px;
|
|
229
203
|
height: 20px;
|
|
230
|
-
/* Circles are circular */
|
|
231
204
|
-webkit-border-radius: 10px;
|
|
232
205
|
-moz-border-radius: 10px;
|
|
233
206
|
border-radius: 10px;
|
|
234
207
|
background: transparent;
|
|
235
|
-
|
|
236
|
-
/* Circles over squares */
|
|
237
208
|
z-index: 2;
|
|
238
209
|
}
|
|
239
210
|
.tabs .router-link-active a:after,
|
|
240
211
|
.tabs .router-link-active a:before {
|
|
241
212
|
background: transparent;
|
|
242
213
|
}
|
|
243
|
-
/* First and last tabs have different
|
|
244
|
-
outside color needs */
|
|
245
214
|
.tabs li:first-child.router-link-active a:before,
|
|
246
215
|
.tabs li:last-child.router-link-active a:after {
|
|
247
216
|
background: transparent;
|
|
@@ -252,36 +221,39 @@ ul {
|
|
|
252
221
|
.tabs li a:after {
|
|
253
222
|
right: -20px;
|
|
254
223
|
}
|
|
224
|
+
|
|
225
|
+
/* Hide breadcrumbs tab - 15% larger */
|
|
255
226
|
.hidebreadcrumbs a {
|
|
256
|
-
min-width: 2.
|
|
257
|
-
width: 2.
|
|
258
|
-
height: 2.
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
display: flex;
|
|
264
|
-
align-items: center;
|
|
265
|
-
justify-content: center;
|
|
227
|
+
min-width: 2.875rem;
|
|
228
|
+
width: 2.875rem;
|
|
229
|
+
height: 2.6rem;
|
|
230
|
+
padding: 0.575rem;
|
|
231
|
+
background: var(--sc-btn-color, #ffffff);
|
|
232
|
+
border: 1px solid var(--sc-btn-border, #ccc);
|
|
233
|
+
color: var(--sc-gray-80, #333);
|
|
266
234
|
}
|
|
235
|
+
|
|
236
|
+
.hidebreadcrumbs a div {
|
|
237
|
+
font-size: 1.45rem;
|
|
238
|
+
}
|
|
239
|
+
|
|
267
240
|
.rotated {
|
|
268
|
-
/* border: 1px solid red; */
|
|
269
241
|
transform: rotate(45deg);
|
|
270
242
|
-webkit-transform: rotate(45deg);
|
|
271
243
|
-moz-transform: rotate(45deg);
|
|
272
244
|
-ms-transform: rotate(45deg);
|
|
273
245
|
-o-transform: rotate(45deg);
|
|
274
|
-
transition: transform 250ms;
|
|
246
|
+
transition: transform 250ms ease;
|
|
275
247
|
}
|
|
276
248
|
.unrotated {
|
|
277
|
-
/* border: 1px solid red; */
|
|
278
249
|
transform: rotate(0deg);
|
|
279
250
|
-webkit-transform: rotate(0deg);
|
|
280
251
|
-moz-transform: rotate(0deg);
|
|
281
252
|
-ms-transform: rotate(0deg);
|
|
282
253
|
-o-transform: rotate(0deg);
|
|
283
|
-
transition: transform 250ms;
|
|
254
|
+
transition: transform 250ms ease;
|
|
284
255
|
}
|
|
256
|
+
|
|
285
257
|
li:active,
|
|
286
258
|
li:hover,
|
|
287
259
|
li:focus,
|
|
@@ -294,43 +266,92 @@ li > a:focus {
|
|
|
294
266
|
a:active,
|
|
295
267
|
a:hover,
|
|
296
268
|
a:focus {
|
|
297
|
-
outline: 2px solid black;
|
|
269
|
+
outline: 2px solid var(--sc-input-active-border-color, black);
|
|
298
270
|
z-index: 3;
|
|
299
271
|
}
|
|
272
|
+
|
|
273
|
+
/* Home tab - 15% larger */
|
|
300
274
|
.hometab a {
|
|
301
|
-
min-width: 2.
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
padding: 0.
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
justify-content: center;
|
|
275
|
+
min-width: 2.875rem;
|
|
276
|
+
width: 2.875rem;
|
|
277
|
+
height: 2.6rem;
|
|
278
|
+
padding: 0.575rem;
|
|
279
|
+
background: var(--sc-btn-color, #ffffff);
|
|
280
|
+
border: 1px solid var(--sc-btn-border, #ccc);
|
|
281
|
+
color: var(--sc-gray-80, #333);
|
|
309
282
|
}
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
283
|
+
|
|
284
|
+
.hometab .icon-placeholder {
|
|
285
|
+
font-size: 1.15rem;
|
|
286
|
+
line-height: 1;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
/* Search tab with animation - similar to ActionSet expand/collapse */
|
|
290
|
+
.searchtab {
|
|
291
|
+
overflow: hidden;
|
|
313
292
|
}
|
|
293
|
+
|
|
314
294
|
.searchtab a {
|
|
315
|
-
min-width: 2.
|
|
316
|
-
height: 2.
|
|
317
|
-
|
|
318
|
-
|
|
295
|
+
min-width: 2.875rem;
|
|
296
|
+
height: 2.6rem;
|
|
297
|
+
padding: 0.575rem;
|
|
298
|
+
background: var(--sc-btn-color, #ffffff);
|
|
299
|
+
border: 1px solid var(--sc-btn-border, #ccc);
|
|
300
|
+
color: var(--sc-gray-80, #333);
|
|
301
|
+
overflow: hidden;
|
|
302
|
+
/* Animation for smooth expand/collapse */
|
|
303
|
+
max-width: 2.875rem;
|
|
304
|
+
transition: max-width 0.35s ease-in-out, padding 0.35s ease-in-out, background 0.2s ease;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.searchtab .search-icon {
|
|
308
|
+
font-size: 1.15rem;
|
|
309
|
+
width: 1.15rem;
|
|
310
|
+
height: 1.15rem;
|
|
311
|
+
line-height: 1;
|
|
312
|
+
cursor: pointer;
|
|
313
|
+
flex-shrink: 0;
|
|
319
314
|
display: flex;
|
|
320
315
|
align-items: center;
|
|
321
316
|
justify-content: center;
|
|
322
317
|
}
|
|
323
|
-
|
|
324
|
-
width: 0.875rem;
|
|
325
|
-
height: 0.875rem;
|
|
326
|
-
}
|
|
318
|
+
|
|
327
319
|
.searchtab input {
|
|
328
320
|
outline: none;
|
|
329
|
-
border:
|
|
330
|
-
border-
|
|
331
|
-
background-color:
|
|
332
|
-
|
|
321
|
+
border: 1px solid var(--sc-input-border-color, #ccc);
|
|
322
|
+
border-radius: 0.25rem;
|
|
323
|
+
background-color: var(--sc-form-background, #ffffff);
|
|
324
|
+
color: var(--sc-gray-80, #333);
|
|
325
|
+
text-align: left;
|
|
333
326
|
font-size: 0.875rem;
|
|
334
|
-
padding: 0.25rem;
|
|
327
|
+
padding: 0.25rem 0.5rem;
|
|
328
|
+
width: 180px;
|
|
329
|
+
height: 1.5rem;
|
|
330
|
+
flex-shrink: 0;
|
|
331
|
+
opacity: 0;
|
|
332
|
+
transition: opacity 0.2s ease-in-out;
|
|
333
|
+
transition-delay: 0s;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.searchtab input:focus {
|
|
337
|
+
border-color: var(--sc-input-active-border-color, #4f46e5);
|
|
338
|
+
outline: none;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.searchtab input::placeholder {
|
|
342
|
+
color: var(--sc-input-label-color, #999);
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
/* Search active state - expanded with animation */
|
|
346
|
+
.searchtab.search-active a {
|
|
347
|
+
max-width: 220px;
|
|
348
|
+
min-width: auto;
|
|
349
|
+
width: auto;
|
|
350
|
+
padding: 0.575rem 0.75rem;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.searchtab.search-active input {
|
|
354
|
+
opacity: 1;
|
|
355
|
+
transition-delay: 0.15s;
|
|
335
356
|
}
|
|
336
357
|
</style>
|