renusify 2.4.4 → 2.5.1
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/components/bar/scss/toolbar.scss +6 -6
- package/components/form/colorInput/mixin.js +33 -14
- package/components/form/colorInput/picker.vue +0 -3
- package/components/form/numberInput/index.vue +2 -2
- package/components/form/switchInput/index.vue +1 -1
- package/components/form/telInput/index.vue +2 -2
- package/components/img/index.vue +60 -42
- package/components/img/preview.vue +238 -0
- package/components/modal/index.vue +164 -116
- package/components/modal/style.scss +72 -48
- package/components/nestable/NestableItem.vue +185 -43
- package/components/nestable/index.vue +129 -14
- package/components/nestable/methods.js +20 -1
- package/components/searchBox/index.vue +6 -1
- package/components/tree/index.vue +122 -117
- package/components/tree/tree-element.vue +10 -3
- package/directive/animate/index.js +11 -7
- package/package.json +1 -1
|
@@ -1,118 +1,123 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
<r-container ref="tree" :class="classes" full-width>
|
|
3
|
+
<r-row v-if="searchLink">
|
|
4
|
+
<r-col>
|
|
5
|
+
<r-select-input
|
|
6
|
+
:label="$t('search','renusify')"
|
|
7
|
+
:model-value="search"
|
|
8
|
+
:searchLink="searchLink"
|
|
9
|
+
@update:model-value="change($event)"
|
|
10
|
+
></r-select-input>
|
|
11
|
+
</r-col>
|
|
12
|
+
</r-row>
|
|
13
|
+
<r-float v-if="show" :minZoom="0.01" :zoom="0.7" bordered>
|
|
14
|
+
<template v-slot="{move,ease,transform}">
|
|
15
|
+
<div :class="{
|
|
16
16
|
'tree-rotate':rotate
|
|
17
17
|
}">
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
</r-tree-element>
|
|
30
|
-
</div>
|
|
18
|
+
<r-tree-element :expand="expand"
|
|
19
|
+
:link="link"
|
|
20
|
+
:model-value="node"
|
|
21
|
+
:openAll="openAll"
|
|
22
|
+
:sortBy="sortBy"
|
|
23
|
+
@expand="handleExpand(ease,move,transform,$event)"
|
|
24
|
+
@select="handleSelect"
|
|
25
|
+
@update:model-value="$emit('update:modelValue',$event)"
|
|
26
|
+
>
|
|
27
|
+
<template v-slot="{ item,nodeKey }">
|
|
28
|
+
<slot :item="item" :nodeKey="nodeKey">{{ item }}</slot>
|
|
31
29
|
</template>
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
</r-tree-element>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
</r-float>
|
|
34
|
+
</r-container>
|
|
34
35
|
|
|
35
36
|
</template>
|
|
36
37
|
<script>
|
|
37
38
|
|
|
38
39
|
export default {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
expand: {
|
|
48
|
-
type: Boolean,
|
|
49
|
-
default: false
|
|
50
|
-
},
|
|
51
|
-
childsName: {
|
|
52
|
-
type: String,
|
|
53
|
-
default: 'childs'
|
|
54
|
-
},
|
|
55
|
-
openAll: Boolean,
|
|
56
|
-
headers: Object
|
|
40
|
+
name: 'r-tree',
|
|
41
|
+
props: {
|
|
42
|
+
modelValue: Object,
|
|
43
|
+
link: String,
|
|
44
|
+
searchLink: String,
|
|
45
|
+
sortBy: {
|
|
46
|
+
type: String,
|
|
47
|
+
default: 'gen'
|
|
57
48
|
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
node: this.modelValue
|
|
65
|
-
}
|
|
49
|
+
gen: String,
|
|
50
|
+
selected: String,
|
|
51
|
+
rotate: Boolean,
|
|
52
|
+
expand: {
|
|
53
|
+
type: Boolean,
|
|
54
|
+
default: false
|
|
66
55
|
},
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
} else if (this.link) {
|
|
71
|
-
this.get()
|
|
72
|
-
}
|
|
56
|
+
childsName: {
|
|
57
|
+
type: String,
|
|
58
|
+
default: 'childs'
|
|
73
59
|
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
60
|
+
openAll: Boolean,
|
|
61
|
+
headers: Object
|
|
62
|
+
},
|
|
63
|
+
emits: ['update:modelValue', 'select-node'],
|
|
64
|
+
data() {
|
|
65
|
+
return {
|
|
66
|
+
show: false,
|
|
67
|
+
search: null,
|
|
68
|
+
nodeParent: this.gen,
|
|
69
|
+
node: this.modelValue
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
created() {
|
|
73
|
+
if (this.modelValue) {
|
|
74
|
+
this.show = true
|
|
75
|
+
} else if (this.link) {
|
|
76
|
+
this.get()
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
watch: {
|
|
80
|
+
modelValue: function (newVal) {
|
|
81
|
+
this.node = newVal
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
computed: {
|
|
85
|
+
classes() {
|
|
86
|
+
let a = {'tree-searchable': this.searchLink}
|
|
87
|
+
a[`${this.$r.prefix}tree`] = true
|
|
88
|
+
return a
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
methods: {
|
|
92
|
+
change(e) {
|
|
93
|
+
if (e && "value" in e) {
|
|
94
|
+
this.nodeParent = e.value
|
|
95
|
+
this.show = false
|
|
96
|
+
this.get()
|
|
97
|
+
}
|
|
78
98
|
},
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
99
|
+
get() {
|
|
100
|
+
this.$axios.get(this.link + this.nodeParent, {headers: this.headers})
|
|
101
|
+
.then(({data}) => {
|
|
102
|
+
this.node = data
|
|
103
|
+
this.show = true
|
|
104
|
+
})
|
|
105
|
+
},
|
|
106
|
+
handleExpand(ease, move, transform, $event) {
|
|
107
|
+
const el = $event[1].getBoundingClientRect()
|
|
108
|
+
ease()
|
|
109
|
+
const node_info = $event[1].querySelector('.node-info').getBoundingClientRect()
|
|
110
|
+
const card_h = node_info.height
|
|
111
|
+
const card_w = node_info.width
|
|
112
|
+
const parent = this.$refs.tree.$el
|
|
113
|
+
const bb = this.$refs.tree.$el.getBoundingClientRect()
|
|
114
|
+
move(parent.offsetWidth / 2 - (el.left - bb.left + ($event[0] ? el.width / 2 : el.width - card_w / 2)),
|
|
115
|
+
parent.offsetHeight / 2 - (el.top - bb.top + (this.rotate ? el.height - card_h : card_h / 2)))
|
|
85
116
|
},
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
if (e && "value" in e) {
|
|
89
|
-
this.nodeParent = e.value
|
|
90
|
-
this.show = false
|
|
91
|
-
this.get()
|
|
92
|
-
}
|
|
93
|
-
},
|
|
94
|
-
get() {
|
|
95
|
-
this.$axios.get(this.link + this.nodeParent, {headers: this.headers})
|
|
96
|
-
.then(({data}) => {
|
|
97
|
-
this.node = data
|
|
98
|
-
this.show = true
|
|
99
|
-
})
|
|
100
|
-
},
|
|
101
|
-
handleExpand(ease, move, transform, $event) {
|
|
102
|
-
const el = $event[1].getBoundingClientRect()
|
|
103
|
-
ease()
|
|
104
|
-
const node_info = $event[1].querySelector('.node-info').getBoundingClientRect()
|
|
105
|
-
const card_h = node_info.height
|
|
106
|
-
const card_w = node_info.width
|
|
107
|
-
const parent = this.$refs.tree.$el
|
|
108
|
-
const bb = this.$refs.tree.$el.getBoundingClientRect()
|
|
109
|
-
move(parent.offsetWidth / 2 - (el.left - bb.left + ($event[0] ? el.width / 2 : el.width - card_w / 2)),
|
|
110
|
-
parent.offsetHeight / 2 - (el.top - bb.top + (this.rotate ? el.height - card_h : card_h / 2)))
|
|
111
|
-
},
|
|
112
|
-
handleSelect(e) {
|
|
113
|
-
this.$emit('select-node', e)
|
|
114
|
-
}
|
|
117
|
+
handleSelect(e) {
|
|
118
|
+
this.$emit('select-node', e)
|
|
115
119
|
}
|
|
120
|
+
}
|
|
116
121
|
}
|
|
117
122
|
</script>
|
|
118
123
|
<style lang="scss">
|
|
@@ -120,31 +125,31 @@ export default {
|
|
|
120
125
|
|
|
121
126
|
$distance: 20px;
|
|
122
127
|
.#{base.$prefix}tree {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
128
|
+
position: relative;
|
|
129
|
+
width: 100%;
|
|
130
|
+
height: 100%;
|
|
126
131
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
}
|
|
132
|
+
&.tree-searchable {
|
|
133
|
+
.#{base.$prefix}float {
|
|
134
|
+
height: calc(100% - 70px)
|
|
131
135
|
}
|
|
136
|
+
}
|
|
132
137
|
|
|
133
138
|
.#{base.$prefix}float {
|
|
134
|
-
|
|
135
|
-
|
|
139
|
+
direction: ltr;
|
|
140
|
+
}
|
|
136
141
|
|
|
137
|
-
|
|
138
|
-
|
|
142
|
+
.tree-rotate {
|
|
143
|
+
transform: rotateX(180deg);
|
|
139
144
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
145
|
+
.node-info {
|
|
146
|
+
transform: rotateX(-180deg);
|
|
147
|
+
}
|
|
143
148
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
}
|
|
149
|
+
.tree-btn-expand {
|
|
150
|
+
transform: rotateX(-180deg);
|
|
147
151
|
}
|
|
152
|
+
}
|
|
148
153
|
|
|
149
154
|
}
|
|
150
155
|
</style>
|
|
@@ -107,10 +107,17 @@ export default {
|
|
|
107
107
|
}
|
|
108
108
|
const sortBy = this.sortBy
|
|
109
109
|
s.sort(function (a, b) {
|
|
110
|
-
if (a['value'][sortBy]) {
|
|
111
|
-
|
|
110
|
+
if (a['value'][sortBy] !== undefined) {
|
|
111
|
+
if (b['value'][sortBy] !== undefined) {
|
|
112
|
+
if (typeof a['value'][sortBy] === 'number' && typeof b['value'][sortBy] === 'number') {
|
|
113
|
+
return a['value'][sortBy] - b['value'][sortBy];
|
|
114
|
+
} else {
|
|
115
|
+
return String(a['value'][sortBy]).localeCompare(String(b['value'][sortBy]));
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
return -1;
|
|
112
119
|
}
|
|
113
|
-
return 1
|
|
120
|
+
return b['value'][sortBy] !== undefined ? 1 : 0;
|
|
114
121
|
});
|
|
115
122
|
const lng = s.length
|
|
116
123
|
for (let i = 0; i < lng; i++) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '
|
|
1
|
+
import 'renusify/directive/animate/style.scss'
|
|
2
2
|
|
|
3
3
|
function mounted(el, binding) {
|
|
4
4
|
const modifiers = binding.modifiers || {}
|
|
@@ -17,15 +17,18 @@ function mounted(el, binding) {
|
|
|
17
17
|
observer
|
|
18
18
|
) => {
|
|
19
19
|
if (!el._observe) return
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
if (el._observe.loading) return
|
|
21
|
+
const isIntersecting = entries[0].isIntersecting
|
|
22
22
|
if (isIntersecting) {
|
|
23
|
+
el._observe.init = true
|
|
24
|
+
el._observe.loading = true
|
|
23
25
|
setTimeout(() => {
|
|
24
26
|
if (timing) {
|
|
25
27
|
el.classList.add(timing)
|
|
26
28
|
}
|
|
27
29
|
el.classList.add('du-' + duration * 1000)
|
|
28
30
|
el.classList.add('animate')
|
|
31
|
+
el._observe.loading = false
|
|
29
32
|
}, delay)
|
|
30
33
|
|
|
31
34
|
} else if(!modifiers.once) {
|
|
@@ -37,12 +40,13 @@ function mounted(el, binding) {
|
|
|
37
40
|
if (el._observe.init && modifiers.once) {
|
|
38
41
|
unmounted(el, binding)
|
|
39
42
|
}
|
|
40
|
-
|
|
41
|
-
}, {threshold: 0})
|
|
43
|
+
}, {threshold: value.threshold || 0})
|
|
42
44
|
|
|
43
|
-
el._observe = {init: false, observer}
|
|
45
|
+
el._observe = {init: false, loading: false, observer}
|
|
44
46
|
|
|
45
|
-
|
|
47
|
+
setTimeout(() => {
|
|
48
|
+
observer.observe(el)
|
|
49
|
+
}, 100)
|
|
46
50
|
}
|
|
47
51
|
|
|
48
52
|
function unmounted(el,binding) {
|