@mixd-id/web-scaffold 0.1.230406229 → 0.1.230406231
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 +1 -1
- package/src/components/FBLogin.vue +122 -21
- package/src/components/GSignIn.vue +117 -46
- package/src/components/ImportModal.vue +3 -1
- package/src/components/{TextareaX.vue → MultilineText.vue} +2 -2
- package/src/components/ObjectTree.vue +102 -0
- package/src/components/Textarea.vue +1 -1
- package/src/index.js +12 -7
- package/src/widgets/WebPageBuilder.vue +2 -2
package/package.json
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<button type="button" @click="login">
|
|
2
|
+
<button type="button" @click="login" :class="compClass">
|
|
3
3
|
<slot>
|
|
4
4
|
Login with Facebook
|
|
5
5
|
</slot>
|
|
6
|
+
<div v-if="isLoading" :class="$style.loadingPane">
|
|
7
|
+
<svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
8
|
+
<circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>
|
|
9
|
+
<path :class="$style.svgHg" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
10
|
+
</svg>
|
|
11
|
+
</div>
|
|
6
12
|
</button>
|
|
7
13
|
</template>
|
|
8
14
|
|
|
@@ -16,21 +22,52 @@ export default{
|
|
|
16
22
|
|
|
17
23
|
appId: String,
|
|
18
24
|
|
|
25
|
+
class: String,
|
|
26
|
+
|
|
19
27
|
scope: {
|
|
20
28
|
type: String,
|
|
21
29
|
default: 'public_profile,email'
|
|
22
30
|
},
|
|
23
31
|
|
|
32
|
+
state: {
|
|
33
|
+
type: [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal,
|
|
34
|
+
default: 1
|
|
35
|
+
},
|
|
36
|
+
|
|
24
37
|
version: {
|
|
25
38
|
type: String,
|
|
26
39
|
default: 'v18.0'
|
|
27
|
-
}
|
|
40
|
+
},
|
|
41
|
+
|
|
42
|
+
},
|
|
43
|
+
|
|
44
|
+
computed: {
|
|
45
|
+
|
|
46
|
+
compClass(){
|
|
47
|
+
return [
|
|
48
|
+
this.$style.comp,
|
|
49
|
+
parseInt(this.computedState) === 2 ? this.$style.loading : '',
|
|
50
|
+
this.class ?? '',
|
|
51
|
+
]
|
|
52
|
+
.join(' ')
|
|
53
|
+
},
|
|
54
|
+
|
|
55
|
+
computedState(){
|
|
56
|
+
return this._state ?? this.state
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
isLoading(){
|
|
60
|
+
return parseInt(this.computedState) === 2
|
|
61
|
+
},
|
|
28
62
|
|
|
29
63
|
},
|
|
30
64
|
|
|
31
65
|
data(){
|
|
32
66
|
return {
|
|
33
67
|
text: '',
|
|
68
|
+
status: null,
|
|
69
|
+
accessToken: null,
|
|
70
|
+
_state: null,
|
|
34
71
|
}
|
|
35
72
|
},
|
|
36
73
|
|
|
@@ -41,27 +78,39 @@ export default{
|
|
|
41
78
|
methods: {
|
|
42
79
|
|
|
43
80
|
onResponse(){
|
|
44
|
-
FB.api('/me', { fields:'name,email' },
|
|
45
|
-
|
|
46
|
-
|
|
81
|
+
FB.api('/me', { fields:'name,email' }, response => {
|
|
82
|
+
this.$emit('login', {
|
|
83
|
+
...response,
|
|
84
|
+
accessToken: this.accessToken
|
|
85
|
+
})
|
|
47
86
|
});
|
|
48
87
|
},
|
|
49
88
|
|
|
89
|
+
onLogin(response){
|
|
90
|
+
if(response.status === 'connected'){
|
|
91
|
+
this.accessToken = response.authResponse.accessToken
|
|
92
|
+
this.onResponse()
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
|
|
96
|
+
onLoginStatus(response){
|
|
97
|
+
this.status = response.status
|
|
98
|
+
|
|
99
|
+
if(response.status === 'connected'){
|
|
100
|
+
this.accessToken = response.authResponse.accessToken
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
|
|
50
104
|
login(){
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
this.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
},
|
|
61
|
-
{ scope: this.scope }
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
});
|
|
105
|
+
if(!this.accessToken){
|
|
106
|
+
FB.login(
|
|
107
|
+
this.onLogin,
|
|
108
|
+
{ scope: this.scope }
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
else{
|
|
112
|
+
this.onResponse()
|
|
113
|
+
}
|
|
65
114
|
},
|
|
66
115
|
|
|
67
116
|
loadScript(){
|
|
@@ -80,14 +129,66 @@ export default{
|
|
|
80
129
|
FB.init({
|
|
81
130
|
appId: this.appId,
|
|
82
131
|
xfbml: true,
|
|
132
|
+
status: true,
|
|
83
133
|
version: this.version
|
|
84
134
|
});
|
|
135
|
+
|
|
136
|
+
FB.getLoginStatus(this.onLoginStatus, true);
|
|
85
137
|
};
|
|
86
|
-
}
|
|
138
|
+
},
|
|
139
|
+
|
|
140
|
+
setState(state, percentage){
|
|
141
|
+
this._state = state
|
|
142
|
+
},
|
|
87
143
|
|
|
144
|
+
resetState(){
|
|
145
|
+
this._state = null
|
|
146
|
+
},
|
|
88
147
|
|
|
89
|
-
}
|
|
148
|
+
},
|
|
90
149
|
|
|
91
150
|
}
|
|
92
151
|
|
|
93
152
|
</script>
|
|
153
|
+
|
|
154
|
+
<style module>
|
|
155
|
+
|
|
156
|
+
.comp{
|
|
157
|
+
@apply relative;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.loadingPane{
|
|
161
|
+
@apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
|
|
162
|
+
}
|
|
163
|
+
.loading{
|
|
164
|
+
color: transparent;
|
|
165
|
+
}
|
|
166
|
+
.loading>*:first-child{
|
|
167
|
+
@apply opacity-0
|
|
168
|
+
}
|
|
169
|
+
.loading:hover{
|
|
170
|
+
}
|
|
171
|
+
.loading:active{
|
|
172
|
+
@apply top-0 left-0;
|
|
173
|
+
}
|
|
174
|
+
.loading>*{
|
|
175
|
+
opacity: 0;
|
|
176
|
+
}
|
|
177
|
+
.loading .loadingPane{
|
|
178
|
+
opacity: 1;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.svgBg{
|
|
182
|
+
stroke: rgb(var(--primary-600));
|
|
183
|
+
stroke-opacity: 50%;
|
|
184
|
+
}
|
|
185
|
+
.svgHg{
|
|
186
|
+
fill: rgb(var(--primary-500));
|
|
187
|
+
fill-opacity: 100%;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.spinner{
|
|
191
|
+
@apply animate-spin h-5 w-5;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
</style>
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<button type="button" @click="login">
|
|
2
|
+
<button type="button" @click="login" :class="compClass">
|
|
3
3
|
<slot>
|
|
4
4
|
Sign In with Google
|
|
5
5
|
</slot>
|
|
6
|
+
<div v-if="isLoading" :class="$style.loadingPane">
|
|
7
|
+
<svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
8
|
+
<circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>
|
|
9
|
+
<path :class="$style.svgHg" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
10
|
+
</svg>
|
|
11
|
+
</div>
|
|
6
12
|
</button>
|
|
7
13
|
</template>
|
|
8
14
|
|
|
@@ -12,9 +18,40 @@ export default{
|
|
|
12
18
|
|
|
13
19
|
emits: [ 'login' ],
|
|
14
20
|
|
|
21
|
+
inject: [ 'alert' ],
|
|
22
|
+
|
|
15
23
|
props: {
|
|
16
24
|
|
|
17
|
-
|
|
25
|
+
class: String,
|
|
26
|
+
|
|
27
|
+
apiKey: String,
|
|
28
|
+
pluginName: String,
|
|
29
|
+
|
|
30
|
+
state: {
|
|
31
|
+
type: [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal,
|
|
32
|
+
default: 1
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
},
|
|
36
|
+
|
|
37
|
+
computed: {
|
|
38
|
+
|
|
39
|
+
compClass(){
|
|
40
|
+
return [
|
|
41
|
+
this.$style.comp,
|
|
42
|
+
parseInt(this.computedState) === 2 ? this.$style.loading : '',
|
|
43
|
+
this.class ?? '',
|
|
44
|
+
]
|
|
45
|
+
.join(' ')
|
|
46
|
+
},
|
|
47
|
+
|
|
48
|
+
computedState(){
|
|
49
|
+
return this._state ?? this.state
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
isLoading(){
|
|
53
|
+
return parseInt(this.computedState) === 2
|
|
54
|
+
},
|
|
18
55
|
|
|
19
56
|
},
|
|
20
57
|
|
|
@@ -24,7 +61,8 @@ export default{
|
|
|
24
61
|
|
|
25
62
|
data(){
|
|
26
63
|
return {
|
|
27
|
-
auth2: null
|
|
64
|
+
auth2: null,
|
|
65
|
+
_state: null,
|
|
28
66
|
}
|
|
29
67
|
},
|
|
30
68
|
|
|
@@ -33,63 +71,96 @@ export default{
|
|
|
33
71
|
async loadScript(){
|
|
34
72
|
if("gapi" in window) return
|
|
35
73
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
{
|
|
39
|
-
src: 'https://apis.google.com/js/api.js',
|
|
40
|
-
onload: api_ready,
|
|
41
|
-
})));
|
|
42
|
-
|
|
43
|
-
await new Promise(auth2_ready => gapi.load('auth2', auth2_ready));
|
|
44
|
-
|
|
45
|
-
const googleAuth = await new Promise(init_done => gapi.auth2.init({
|
|
46
|
-
client_id: this.apiKey,
|
|
47
|
-
scope: 'profile email',
|
|
48
|
-
}).then(googleAuthWithThen => init_done(Object.assign(googleAuthWithThen, {
|
|
49
|
-
then: undefined,
|
|
50
|
-
}))));
|
|
74
|
+
window.gapiInit = () => {
|
|
75
|
+
gapi.load('auth2', () => {
|
|
51
76
|
|
|
52
|
-
console.log('googleAuth =', googleAuth);*/
|
|
53
|
-
|
|
54
|
-
const script = document.createElement('script')
|
|
55
|
-
script.src = 'https://apis.google.com/js/api:client.js'
|
|
56
|
-
document.head.appendChild(script)
|
|
57
|
-
script.addEventListener('load', () => {
|
|
58
|
-
window.gapi.load('auth2', () => {
|
|
59
77
|
var authObj = {
|
|
60
78
|
client_id: this.apiKey,
|
|
61
79
|
scope: 'profile email',
|
|
62
|
-
cookiepolicy: 'single_host_origin'
|
|
80
|
+
cookiepolicy: 'single_host_origin',
|
|
81
|
+
plugin_name: this.pluginName
|
|
63
82
|
};
|
|
64
|
-
console.log(authObj)
|
|
65
83
|
window.gapi.auth2.init(authObj)
|
|
66
|
-
.then(function(gAuth){
|
|
67
|
-
console.log('gAuth', gAuth)
|
|
68
|
-
})
|
|
69
84
|
})
|
|
70
|
-
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
const script = document.createElement('script')
|
|
88
|
+
script.src = 'https://apis.google.com/js/platform.js?onload=gapiInit'
|
|
89
|
+
document.head.appendChild(script)
|
|
71
90
|
},
|
|
72
91
|
|
|
73
92
|
login(){
|
|
74
|
-
gapi.auth2.getAuthInstance()
|
|
75
|
-
.
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
93
|
+
gapi.auth2.getAuthInstance()
|
|
94
|
+
.signIn()
|
|
95
|
+
.then((googleUser) => {
|
|
96
|
+
var profile = googleUser.getBasicProfile();
|
|
97
|
+
var idToken = googleUser.getAuthResponse().id_token;
|
|
98
|
+
const id = profile.getId()
|
|
99
|
+
const name = profile.getName()
|
|
100
|
+
const imageUrl = profile.getImageUrl()
|
|
101
|
+
const email = profile.getEmail()
|
|
102
|
+
this.$emit('login', {
|
|
103
|
+
id,
|
|
104
|
+
idToken,
|
|
105
|
+
name,
|
|
106
|
+
imageUrl,
|
|
107
|
+
email
|
|
108
|
+
})
|
|
87
109
|
})
|
|
88
|
-
|
|
89
|
-
|
|
110
|
+
},
|
|
111
|
+
|
|
112
|
+
setState(state, percentage){
|
|
113
|
+
this._state = state
|
|
114
|
+
},
|
|
115
|
+
|
|
116
|
+
resetState(){
|
|
117
|
+
this._state = null
|
|
118
|
+
},
|
|
90
119
|
|
|
91
120
|
}
|
|
92
121
|
|
|
93
122
|
}
|
|
94
123
|
|
|
95
124
|
</script>
|
|
125
|
+
|
|
126
|
+
<style module>
|
|
127
|
+
|
|
128
|
+
.comp{
|
|
129
|
+
@apply relative;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.loadingPane{
|
|
133
|
+
@apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
|
|
134
|
+
}
|
|
135
|
+
.loading{
|
|
136
|
+
color: transparent;
|
|
137
|
+
}
|
|
138
|
+
.loading>*:first-child{
|
|
139
|
+
@apply opacity-0
|
|
140
|
+
}
|
|
141
|
+
.loading:hover{
|
|
142
|
+
}
|
|
143
|
+
.loading:active{
|
|
144
|
+
@apply top-0 left-0;
|
|
145
|
+
}
|
|
146
|
+
.loading>*{
|
|
147
|
+
opacity: 0;
|
|
148
|
+
}
|
|
149
|
+
.loading .loadingPane{
|
|
150
|
+
opacity: 1;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.svgBg{
|
|
154
|
+
stroke: rgb(var(--primary-600));
|
|
155
|
+
stroke-opacity: 50%;
|
|
156
|
+
}
|
|
157
|
+
.svgHg{
|
|
158
|
+
fill: rgb(var(--primary-500));
|
|
159
|
+
fill-opacity: 100%;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.spinner{
|
|
163
|
+
@apply animate-spin h-5 w-5;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
</style>
|
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
<div class="relative p-5">
|
|
5
5
|
<div v-if="step !== 3">
|
|
6
6
|
<h3>{{ title }}</h3>
|
|
7
|
-
|
|
7
|
+
<slot v-if="step === 1 && 'description' in $slots" name="description"></slot>
|
|
8
|
+
<p v-else-if="step === 1" class="mt-1 text-text-400" v-html="description"></p>
|
|
9
|
+
<slot v-else-if="step === 2 && 'description2' in $slots" name="description2"></slot>
|
|
8
10
|
<p v-else-if="step === 2" class="mt-1 text-text-400" v-html="description2"></p>
|
|
9
11
|
</div>
|
|
10
12
|
<div class="absolute top-0 right-0 p-2">
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"/>
|
|
11
11
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
|
|
12
12
|
</svg>
|
|
13
|
-
</div>
|
|
13
|
+
</div>
|
|
14
14
|
<slot name="end"></slot>
|
|
15
15
|
</div>
|
|
16
16
|
</template>
|
|
@@ -91,7 +91,7 @@ export default{
|
|
|
91
91
|
return this.customClass ?? [
|
|
92
92
|
this.$style.textarea,
|
|
93
93
|
this.$style['state-' + this.computedState],
|
|
94
|
-
this.isActive ? this.$style.active : '',
|
|
94
|
+
this.isActive && !this.readonly ? this.$style.active : '',
|
|
95
95
|
this.align ? this.$style['align-' + this.align] : '',
|
|
96
96
|
this.readonly ? this.$style.readonly : '',
|
|
97
97
|
this.size ? this.$style['size-' + this.size] : ''
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="$style.comp">
|
|
3
|
+
<div class="flex flex-row" @click="toggle">
|
|
4
|
+
<div class="p-1" v-if="value && typeof value === 'object' && Object.keys(value).length > 0">
|
|
5
|
+
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
|
|
6
|
+
</div>
|
|
7
|
+
<div v-if="valueKey" class="mr-2 font-bold">
|
|
8
|
+
{{ valueKey }}:
|
|
9
|
+
</div>
|
|
10
|
+
<div class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap break-all">
|
|
11
|
+
{{ JSON.stringify(value) }}
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
<div v-if="!collapsed" class="ml-6">
|
|
15
|
+
<div v-for="(obj, key) in value" class="flex flex-row">
|
|
16
|
+
<ObjectTree v-if="typeof obj === 'object'" :valueKey="key" :value="obj" />
|
|
17
|
+
<div v-else class="flex flex-row">
|
|
18
|
+
<div class="p-1">
|
|
19
|
+
<svg width="14" height="14" class="fill-transparent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="mr-2 font-bold">{{ key }}:</div>
|
|
22
|
+
<div>{{ obj }}</div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script>
|
|
30
|
+
|
|
31
|
+
import md5 from "md5";
|
|
32
|
+
|
|
33
|
+
export default{
|
|
34
|
+
|
|
35
|
+
props: {
|
|
36
|
+
|
|
37
|
+
valueKey: String,
|
|
38
|
+
value: Object,
|
|
39
|
+
store: Object,
|
|
40
|
+
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
data(){
|
|
44
|
+
return {
|
|
45
|
+
collapsed: true,
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
|
|
49
|
+
mounted() {
|
|
50
|
+
this.collapsed = (this.componentStore[this.uid] ?? {}).collapsed ?? this.collapsed
|
|
51
|
+
},
|
|
52
|
+
|
|
53
|
+
computed: {
|
|
54
|
+
|
|
55
|
+
uid(){
|
|
56
|
+
if(this.value)
|
|
57
|
+
return md5(JSON.stringify(this.value))
|
|
58
|
+
},
|
|
59
|
+
|
|
60
|
+
componentStore(){
|
|
61
|
+
if(this.store && this.store.components){
|
|
62
|
+
if(!this.store.components.objectTree)
|
|
63
|
+
this.store.components.objectTree = {}
|
|
64
|
+
|
|
65
|
+
return this.store.components.objectTree
|
|
66
|
+
}
|
|
67
|
+
return {}
|
|
68
|
+
},
|
|
69
|
+
|
|
70
|
+
},
|
|
71
|
+
|
|
72
|
+
methods: {
|
|
73
|
+
|
|
74
|
+
toggle(){
|
|
75
|
+
this.collapsed = !this.collapsed
|
|
76
|
+
|
|
77
|
+
this.componentStore[this.uid] = {
|
|
78
|
+
collapsed: this.collapsed
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
|
|
82
|
+
},
|
|
83
|
+
|
|
84
|
+
watch: {
|
|
85
|
+
|
|
86
|
+
value(){
|
|
87
|
+
this.collapsed = (this.componentStore[this.uid] ?? {}).collapsed ?? this.collapsed
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
</script>
|
|
95
|
+
|
|
96
|
+
<style module>
|
|
97
|
+
|
|
98
|
+
.comp{
|
|
99
|
+
@apply flex flex-col;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
</style>
|
|
@@ -91,7 +91,7 @@ export default{
|
|
|
91
91
|
return this.customClass ?? [
|
|
92
92
|
this.$style.textarea,
|
|
93
93
|
this.$style['state-' + this.computedState],
|
|
94
|
-
this.isActive ? this.$style.active : '',
|
|
94
|
+
this.isActive && !this.readonly ? this.$style.active : '',
|
|
95
95
|
this.align ? this.$style['align-' + this.align] : '',
|
|
96
96
|
this.readonly ? this.$style.readonly : '',
|
|
97
97
|
this.size ? this.$style['size-' + this.size] : ''
|
package/src/index.js
CHANGED
|
@@ -152,24 +152,28 @@ const consoleTimeEnd = (text) => { console.timeEnd(text) }
|
|
|
152
152
|
|
|
153
153
|
const util = {
|
|
154
154
|
|
|
155
|
-
dragResize: (e,
|
|
155
|
+
dragResize: (e, callback) => {
|
|
156
156
|
|
|
157
157
|
e.preventDefault()
|
|
158
158
|
|
|
159
159
|
let startX = e.clientX
|
|
160
|
+
let startY = e.clientY
|
|
160
161
|
const onMouseMove = (mE) => {
|
|
161
162
|
const distanceX = mE.clientX - startX
|
|
163
|
+
const distanceY = mE.clientY - startY
|
|
162
164
|
startX = mE.clientX
|
|
165
|
+
startY = mE.clientY
|
|
163
166
|
|
|
164
|
-
if(distanceX !== 0){
|
|
165
|
-
callback(distanceX)
|
|
167
|
+
if(distanceX !== 0 || distanceY !== 0){
|
|
168
|
+
callback(distanceX, distanceY)
|
|
166
169
|
}
|
|
167
170
|
}
|
|
168
171
|
|
|
169
|
-
const onMouseUp =
|
|
172
|
+
const onMouseUp = _ => {
|
|
170
173
|
window.removeEventListener('mousemove', onMouseMove)
|
|
171
174
|
window.removeEventListener('mouseup', onMouseUp)
|
|
172
175
|
}
|
|
176
|
+
|
|
173
177
|
window.addEventListener('mousemove', onMouseMove)
|
|
174
178
|
window.addEventListener('mouseup', onMouseUp)
|
|
175
179
|
},
|
|
@@ -412,7 +416,7 @@ export default{
|
|
|
412
416
|
app.component('Tabs', defineAsyncComponent(() => import("./components/Tabs.vue")))
|
|
413
417
|
app.component('Textbox', defineAsyncComponent(() => import("./components/Textbox.vue")))
|
|
414
418
|
app.component('Textarea', defineAsyncComponent(() => import("./components/Textarea.vue")))
|
|
415
|
-
app.component('
|
|
419
|
+
app.component('MultilineText', defineAsyncComponent(() => import("./components/MultilineText.vue")))
|
|
416
420
|
app.component('Timepicker', defineAsyncComponent(() => import("./components/Timepicker.vue")))
|
|
417
421
|
app.component('Toast', defineAsyncComponent(() => import("./components/Toast.vue")))
|
|
418
422
|
app.component('TreeView', defineAsyncComponent(() => import("./components/TreeView.vue")))
|
|
@@ -433,8 +437,9 @@ export default{
|
|
|
433
437
|
app.component('YoutubeVideo', defineAsyncComponent(() => import("./components/YoutubeVideo.vue")))
|
|
434
438
|
app.component('Svg', defineAsyncComponent(() => import("./components/Svg.vue")))
|
|
435
439
|
app.component('ConversationBuilder', defineAsyncComponent(() => import("./components/ConversationBuilder.vue")))
|
|
436
|
-
|
|
437
|
-
|
|
440
|
+
app.component('ObjectTree', defineAsyncComponent(() => import("./components/ObjectTree.vue")))
|
|
441
|
+
app.component('FBLogin', defineAsyncComponent(() => import("./components/FBLogin.vue")))
|
|
442
|
+
app.component('GSignIn', defineAsyncComponent(() => import("./components/GSignIn.vue")))
|
|
438
443
|
|
|
439
444
|
app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
|
|
440
445
|
app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
|
|
@@ -389,7 +389,7 @@
|
|
|
389
389
|
</div>
|
|
390
390
|
|
|
391
391
|
<div :class="$style.resize1"
|
|
392
|
-
@mousedown="(e) => $util.dragResize(e,
|
|
392
|
+
@mousedown="(e) => $util.dragResize(e, resize1)"></div>
|
|
393
393
|
|
|
394
394
|
<Modal ref="ogModal" width="480" height="520">
|
|
395
395
|
<template v-slot:head>
|
|
@@ -543,7 +543,7 @@
|
|
|
543
543
|
<div class="flex-1 flex flex-row border-t-[1px] border-text-50">
|
|
544
544
|
|
|
545
545
|
<div :class="$style.resize3"
|
|
546
|
-
@mousedown="(e) => $util.dragResize(e,
|
|
546
|
+
@mousedown="(e) => $util.dragResize(e, resize3)"></div>
|
|
547
547
|
|
|
548
548
|
<div class="flex-1 flex flex-col gap-6 overflow-y-auto p-6">
|
|
549
549
|
|