@stonecrop/desktop 0.11.4 → 0.11.6
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 +1108 -1124
- package/dist/desktop.js.map +1 -1
- package/package.json +5 -5
- package/src/components/ActionSet.vue +99 -170
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/desktop",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": {
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"**/*.css"
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@stonecrop/
|
|
36
|
-
"@stonecrop/
|
|
37
|
-
"@stonecrop/
|
|
38
|
-
"@stonecrop/
|
|
35
|
+
"@stonecrop/atable": "0.11.6",
|
|
36
|
+
"@stonecrop/aform": "0.11.6",
|
|
37
|
+
"@stonecrop/stonecrop": "0.11.6",
|
|
38
|
+
"@stonecrop/themes": "0.11.6"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"vue": "^3.5.28"
|
|
@@ -1,49 +1,26 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
:class="{ 'open-set': isOpen, 'hovered-and-closed': closeClicked }"
|
|
4
|
-
class="action-set collapse"
|
|
5
|
-
@mouseover="onHover"
|
|
6
|
-
@mouseleave="onHoverLeave">
|
|
2
|
+
<div :class="{ collapsed: !isOpen }" class="action-set">
|
|
7
3
|
<div class="action-menu-icon">
|
|
8
|
-
<div id="
|
|
9
|
-
<svg
|
|
10
|
-
id="Layer_1"
|
|
11
|
-
class="leftBar"
|
|
12
|
-
version="1.1"
|
|
13
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
14
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
15
|
-
x="0px"
|
|
16
|
-
y="0px"
|
|
17
|
-
viewBox="0 0 100 100"
|
|
18
|
-
xml:space="preserve">
|
|
19
|
-
<polygon points="54.2,33.4 29.2,58.8 25,54.6 50,29.2 " />
|
|
20
|
-
</svg>
|
|
21
|
-
|
|
22
|
-
<svg
|
|
23
|
-
id="Layer_1"
|
|
24
|
-
class="rightBar"
|
|
25
|
-
version="1.1"
|
|
26
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
27
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
28
|
-
x="0px"
|
|
29
|
-
y="0px"
|
|
30
|
-
viewBox="0 0 100 100"
|
|
31
|
-
xml:space="preserve">
|
|
32
|
-
<polygon points="70.8,58.8 45.8,33.4 50,29.2 75,54.6 " />
|
|
33
|
-
</svg>
|
|
34
|
-
</div>
|
|
4
|
+
<div id="cross" @click="onClick" :class="{ rotated: isOpen }">×</div>
|
|
35
5
|
</div>
|
|
36
6
|
<div style="margin-right: 30px"></div>
|
|
37
7
|
<div v-for="(el, index) in elements" :key="el.label" class="action-element">
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
8
|
+
<div class="action-element-header">
|
|
9
|
+
<button
|
|
10
|
+
v-if="el.type == 'button'"
|
|
11
|
+
:disabled="el.disabled"
|
|
12
|
+
class="button-default"
|
|
13
|
+
@click="handleClick(el.action, el.label)">
|
|
14
|
+
{{ el.label }}
|
|
15
|
+
</button>
|
|
16
|
+
</div>
|
|
45
17
|
<div v-if="el.type == 'dropdown'">
|
|
46
|
-
<
|
|
18
|
+
<div class="dropdown-header">
|
|
19
|
+
<div @click="toggleDropdown(index)" class="cross" :class="{ rotated: dropdownOpen[index] }">×</div>
|
|
20
|
+
<button class="button-default dropdown-title" @click="toggleDropdown(index)">
|
|
21
|
+
{{ el.label }}
|
|
22
|
+
</button>
|
|
23
|
+
</div>
|
|
47
24
|
<div v-show="dropdownStates[index]" class="dropdown-container">
|
|
48
25
|
<div class="dropdown">
|
|
49
26
|
<div v-for="(item, itemIndex) in el.actions" :key="item.label">
|
|
@@ -74,10 +51,11 @@ const emit = defineEmits<{
|
|
|
74
51
|
// Track dropdown open state separately (index -> boolean)
|
|
75
52
|
const dropdownStates = ref<Record<number, boolean>>({})
|
|
76
53
|
|
|
77
|
-
const isOpen = ref(
|
|
54
|
+
const isOpen = ref(true)
|
|
78
55
|
const timeoutId = ref<number>(-1)
|
|
79
56
|
const hover = ref(false)
|
|
80
57
|
const closeClicked = ref(false)
|
|
58
|
+
const dropdownOpen = ref([])
|
|
81
59
|
|
|
82
60
|
onMounted(() => {
|
|
83
61
|
closeDropdowns()
|
|
@@ -85,22 +63,11 @@ onMounted(() => {
|
|
|
85
63
|
|
|
86
64
|
const closeDropdowns = () => {
|
|
87
65
|
dropdownStates.value = {}
|
|
66
|
+
dropdownOpen.value = []
|
|
88
67
|
}
|
|
89
68
|
|
|
90
|
-
const
|
|
91
|
-
|
|
92
|
-
timeoutId.value = setTimeout(() => {
|
|
93
|
-
if (hover.value) {
|
|
94
|
-
isOpen.value = true
|
|
95
|
-
}
|
|
96
|
-
}, 500)
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
const onHoverLeave = () => {
|
|
100
|
-
hover.value = false
|
|
101
|
-
closeClicked.value = false
|
|
102
|
-
clearTimeout(timeoutId.value)
|
|
103
|
-
isOpen.value = false
|
|
69
|
+
const onClick = () => {
|
|
70
|
+
isOpen.value = !isOpen.value
|
|
104
71
|
}
|
|
105
72
|
|
|
106
73
|
const toggleDropdown = (index: number) => {
|
|
@@ -108,6 +75,7 @@ const toggleDropdown = (index: number) => {
|
|
|
108
75
|
closeDropdowns()
|
|
109
76
|
if (showDropdown) {
|
|
110
77
|
dropdownStates.value[index] = true
|
|
78
|
+
dropdownOpen.value[index] = true
|
|
111
79
|
}
|
|
112
80
|
}
|
|
113
81
|
|
|
@@ -118,165 +86,126 @@ const handleClick = (action: (() => void | Promise<void>) | undefined, label: st
|
|
|
118
86
|
</script>
|
|
119
87
|
|
|
120
88
|
<style scoped>
|
|
121
|
-
#
|
|
89
|
+
#cross {
|
|
122
90
|
position: relative;
|
|
123
|
-
transform: rotate(
|
|
91
|
+
transform: rotate(45deg);
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
transition: all 0.2s ease-in-out;
|
|
94
|
+
user-select: none;
|
|
95
|
+
line-height: 1rem;
|
|
124
96
|
}
|
|
125
|
-
|
|
126
|
-
|
|
97
|
+
#cross.rotated,
|
|
98
|
+
.cross.rotated {
|
|
99
|
+
transform: rotate(0deg);
|
|
100
|
+
}
|
|
101
|
+
#cross svg {
|
|
127
102
|
width: 1.5em;
|
|
128
103
|
height: 1.5em;
|
|
129
104
|
}
|
|
130
105
|
|
|
131
|
-
.leftBar,
|
|
132
|
-
.rightBar {
|
|
133
|
-
transition-duration: 0.225s;
|
|
134
|
-
transition-property: transform;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.leftBar,
|
|
138
|
-
.action-set.collapse.hovered-and-closed:hover .leftBar {
|
|
139
|
-
transform-origin: 33.4% 50%;
|
|
140
|
-
transform: rotate(90deg);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.rightBar,
|
|
144
|
-
.action-set.collapse.hovered-and-closed:hover .rightBar {
|
|
145
|
-
transform-origin: 67% 50%;
|
|
146
|
-
transform: rotate(-90deg);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.rightBar {
|
|
150
|
-
position: absolute;
|
|
151
|
-
top: 0;
|
|
152
|
-
left: 0;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.action-set.collapse:hover .leftBar {
|
|
156
|
-
transform: rotate(0);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.action-set.collapse:hover .rightBar {
|
|
160
|
-
transform: rotate(0);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
106
|
.action-set {
|
|
164
107
|
position: fixed;
|
|
165
|
-
top:
|
|
108
|
+
top: 300px;
|
|
166
109
|
right: 10px;
|
|
167
|
-
padding:
|
|
168
|
-
box-shadow: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1);
|
|
169
|
-
border-radius: 10px;
|
|
110
|
+
padding: 10px;
|
|
170
111
|
display: flex;
|
|
171
|
-
flex-direction:
|
|
172
|
-
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
align-items: flex-end;
|
|
114
|
+
background: var(--sc-form-background);
|
|
115
|
+
border: 1px solid var(--sc-gray-20);
|
|
116
|
+
border-left: 4px solid var(--sc-gray-20);
|
|
117
|
+
border-radius: 0;
|
|
173
118
|
overflow: hidden;
|
|
174
119
|
z-index: 1001; /* Above SheetNav (100) and operation log button (999) */
|
|
120
|
+
-webkit-transition: all 0.5s ease-in-out;
|
|
121
|
+
-moz-transition: all 0.5s ease-in-out;
|
|
122
|
+
-o-transition: all 0.5s ease-in-out;
|
|
123
|
+
transition: all 0.5s ease-in-out;
|
|
175
124
|
}
|
|
176
|
-
|
|
177
125
|
.action-menu-icon {
|
|
178
|
-
position:
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
.action-set.collapse,
|
|
188
|
-
.action-set.collapse.hovered-and-closed:hover {
|
|
189
|
-
max-width: 25px;
|
|
126
|
+
position: relative;
|
|
127
|
+
font-size: 2rem;
|
|
128
|
+
display: inline-block;
|
|
129
|
+
color: var(--sc-gray-60, #666);
|
|
130
|
+
transition: all 0.2s ease-in-out;
|
|
131
|
+
}
|
|
132
|
+
.action-set.collapsed {
|
|
133
|
+
max-width: 46px;
|
|
134
|
+
max-height: 40px;
|
|
190
135
|
overflow: hidden;
|
|
191
|
-
|
|
192
|
-
-webkit-transition: max-width 0.5s ease-in-out;
|
|
193
|
-
-moz-transition: max-width 0.5s ease-in-out;
|
|
194
|
-
-o-transition: max-width 0.5s ease-in-out;
|
|
195
|
-
transition: max-width 0.5s ease-in-out;
|
|
196
136
|
}
|
|
197
|
-
|
|
198
|
-
.action-set.collapse .action-element,
|
|
199
|
-
.action-set.collapse.hovered-and-closed:hover .action-element {
|
|
137
|
+
.action-set.collapsed .action-element {
|
|
200
138
|
opacity: 0;
|
|
201
139
|
-webkit-transition: opacity 0.25s ease-in-out;
|
|
202
140
|
-moz-transition: opacity 0.25s ease-in-out;
|
|
203
141
|
-o-transition: opacity 0.25s ease-in-out;
|
|
204
142
|
transition: opacity 0.25s ease-in-out;
|
|
205
|
-
transition-delay: 0s;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.action-set.collapse:hover {
|
|
209
|
-
max-width: 500px;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
.action-set.collapse.open-set:hover {
|
|
213
|
-
overflow: visible !important;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
.action-set.collapse.hovered-and-closed:hover .action-element {
|
|
217
|
-
opacity: 0 !important;
|
|
218
|
-
/* transition-delay: 0.5s; */
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.action-set.collapse:hover .action-element {
|
|
222
|
-
opacity: 100 !important;
|
|
223
|
-
/* transition-delay: 0.5s; */
|
|
224
143
|
}
|
|
225
144
|
|
|
226
145
|
.action-element {
|
|
227
|
-
|
|
228
|
-
|
|
146
|
+
width: 100%;
|
|
147
|
+
text-align: right;
|
|
148
|
+
border: 1px solid var(--sc-gray-20);
|
|
149
|
+
background: none;
|
|
150
|
+
font-size: 1.5rem;
|
|
151
|
+
font-family: var(--sc-font-family);
|
|
152
|
+
font-weight: 600;
|
|
153
|
+
margin-top: 10px;
|
|
229
154
|
position: relative; /* Make this the positioning context for absolute children */
|
|
230
155
|
}
|
|
156
|
+
.action-element-header {
|
|
157
|
+
display: flex;
|
|
158
|
+
justify-content: end;
|
|
159
|
+
}
|
|
231
160
|
button.button-default {
|
|
232
|
-
background-color:
|
|
161
|
+
background-color: transparent;
|
|
233
162
|
padding: 5px 12px;
|
|
234
|
-
border-radius:
|
|
235
|
-
box-shadow:
|
|
236
|
-
rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
|
|
163
|
+
border-radius: 0px;
|
|
164
|
+
box-shadow: none;
|
|
237
165
|
border: none;
|
|
238
166
|
cursor: pointer;
|
|
239
167
|
white-space: nowrap;
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
168
|
+
font-weight: bold;
|
|
169
|
+
font-size: 1rem;
|
|
170
|
+
text-align: right;
|
|
171
|
+
color: var(--sc-gray-80);
|
|
172
|
+
padding-left: 50px;
|
|
173
|
+
font-family: var(--sc-font-family);
|
|
174
|
+
}
|
|
175
|
+
.dropdown-header:hover button.button-default,
|
|
176
|
+
.dropdown-header:hover,
|
|
177
|
+
.action-element-header:hover {
|
|
243
178
|
background-color: #f2f2f2;
|
|
244
179
|
}
|
|
245
180
|
|
|
246
|
-
|
|
247
|
-
opacity: 0.5;
|
|
248
|
-
cursor: not-allowed;
|
|
249
|
-
background-color: #f5f5f5;
|
|
250
|
-
color: #999;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
button.button-default:disabled:hover {
|
|
254
|
-
background-color: #f5f5f5;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.dropdown-container {
|
|
181
|
+
.dropdown-title {
|
|
258
182
|
position: relative;
|
|
259
183
|
}
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
184
|
+
.dropdown-header {
|
|
185
|
+
display: flex;
|
|
186
|
+
align-items: center;
|
|
187
|
+
}
|
|
188
|
+
.cross {
|
|
189
|
+
pointer-events: all;
|
|
190
|
+
margin-left: 5px;
|
|
191
|
+
font-family: var(--sc-font-family);
|
|
192
|
+
color: var(--sc-gray-60, #666);
|
|
193
|
+
cursor: pointer;
|
|
194
|
+
transform: rotate(45deg);
|
|
195
|
+
user-select: none;
|
|
196
|
+
transition: all 0.2s ease-in-out;
|
|
197
|
+
line-height: 1rem;
|
|
270
198
|
}
|
|
271
199
|
|
|
272
200
|
button.dropdown-item {
|
|
273
201
|
width: 100%;
|
|
274
|
-
padding:
|
|
275
|
-
text-align:
|
|
202
|
+
padding: 5px 12px;
|
|
203
|
+
text-align: right;
|
|
276
204
|
border: none;
|
|
277
205
|
background-color: #ffffff;
|
|
278
206
|
cursor: pointer;
|
|
279
207
|
border-radius: 5px;
|
|
208
|
+
font-size: 1rem;
|
|
280
209
|
}
|
|
281
210
|
|
|
282
211
|
button.dropdown-item:hover {
|