renusify 1.0.8 → 1.0.9

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.
Files changed (7) hide show
  1. package/components/form/fileUploader/index.vue +4 -1
  2. package/components/form/fileUploader/single.vue +3 -2
  3. package/components/img/index.vue +192 -175
  4. package/components/index.js +1 -1
  5. package/components/progress/circular.vue +1 -1
  6. package/directive/intersect/index.js +23 -20
  7. package/package.json +1 -1
package/components/form/fileUploader/index.vue CHANGED
@@ -9,6 +9,7 @@
9
9
  <single class="ma-1"
10
10
  :accept="accept"
11
11
  :meta="meta"
12
+ :metaRequired="metaRequired"
12
13
  :uploadLink="uploadLink"
13
14
  :modelValue="file"
14
15
  :w-p-h="wPH"
@@ -20,6 +21,7 @@
20
21
  <single :key="'add-'+keyAdd" v-if="filesLinks.length<size" class="ma-1"
21
22
  :accept="accept"
22
23
  :meta="meta"
24
+ :metaRequired="metaRequired"
23
25
  :w-p-h="wPH"
24
26
  :maxFileSize="maxFileSize"
25
27
  :uploadLink="uploadLink"
@@ -58,7 +60,8 @@ export default {
58
60
  },
59
61
  type: Array
60
62
  },
61
- meta: Array
63
+ meta: Array,
64
+ metaRequired: {type: Boolean, default: true}
62
65
  },
63
66
  components: {
64
67
  single
package/components/form/fileUploader/single.vue CHANGED
@@ -26,7 +26,7 @@
26
26
  <div class="file-meta pa-1" v-if="meta && uploadPercentage===100">
27
27
  <r-text-input :label="$t(m,'renusify')" v-model="metaList[m]" @update:model-value="emit"
28
28
  v-for="(m,k) in meta" :key="k"
29
- :rules="['required']"></r-text-input>
29
+ :rules="[metaRequired&&'required']"></r-text-input>
30
30
  </div>
31
31
  </div>
32
32
  <r-icon @click.prevent.stop="pickFile"
@@ -67,7 +67,8 @@ export default {
67
67
  meta: {
68
68
  type: Array,
69
69
  default: null
70
- }
70
+ },
71
+ metaRequired: Boolean
71
72
  },
72
73
  data() {
73
74
  return {
package/components/img/index.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <div :class="{
2
+ <div v-intersect[modifier]="check" :class="{
3
3
  [$r.prefix+'img']:true,
4
4
  'img-hoverZoom':hoverZoom,'img-hoverDark':hoverDark,'img-hoverTitle':hoverTitle}"
5
- ref="rImg">
6
- <div v-if="hoverTitle" class="title color-white-text img-title w-full"
7
- :class="{
5
+ ref="rImg">
6
+ <div v-if="hoverTitle" class="title color-white-text img-title w-full"
7
+ :class="{
8
8
  'title-hs':titleHs,
9
9
  'title-hc':titleHc,
10
10
  'title-he':titleHe,
@@ -12,193 +12,210 @@
12
12
  'title-vc':titleVc,
13
13
  'title-ve':titleVe
14
14
  }"
15
- >{{alt}}
16
- </div>
17
- <img v-if="load" ref="img" :src="link" :alt="alt" draggable="false" :width="size.width" :height="size.height"/>
15
+ >{{ alt }}
18
16
  </div>
17
+ <img v-if="load" ref="img" :src="link" :alt="alt" draggable="false" :width="size.width" :height="size.height"/>
18
+ </div>
19
19
  </template>
20
20
  <script>
21
- export default {
22
- name: 'r-img',
23
- props: {
24
- src: {
25
- type: String,
26
- required: true
27
- },
28
- alt: {
29
- type: String,
30
- required: true
31
- },
32
- width: {
33
- type: [String, Number]
34
- },
35
- height: {
36
- type: [String, Number]
37
- },
38
- query: String,
39
- autoSize: Boolean,
40
- hoverZoom: Boolean,
41
- hoverDark: Boolean,
42
- hoverTitle: Boolean,
43
- titleHs: Boolean,
44
- titleHc: Boolean,
45
- titleHe: Boolean,
46
- titleVs: Boolean,
47
- titleVc: Boolean,
48
- titleVe: Boolean,
49
- wPH: {
50
- type: Number,
51
- default: 1
52
- },
53
- },
54
- data() {
55
- return {
56
- load: false,
57
- time_id: null,
58
- size:{width:0,height:0}
59
- }
60
- },
61
- created() {
62
- this.activate()
63
- },
64
- computed: {
65
- link() {
66
- let res = this.src
67
- if (!(res.startsWith('/') || res.startsWith('http://') || res.startsWith('https://'))) {
68
- res = '/' + res
69
- }
70
- if (this.src.search('[?]') === -1) {
71
- res += '?'
72
- }
73
- if (this.query) {
74
- res += this.query
75
- }
76
- if ((this.autoSize && this.size.width > 0) || this.width) {
77
- res += `&w=${this.size.width}&h=${this.size.height}`
78
- }
79
- return res
80
- }
81
- },
82
- methods: {
83
- getSize() {
84
- let res = {width: 0, height: 0}
85
- if (this.width) {
86
- res["width"] = this.width
87
- }
88
- if (this.height) {
89
- res["height"] = this.height
90
- }
91
- if (res['width'] !== 0 && res['height'] === 0) {
92
- res['height'] = res['width'] / this.wPH
93
- }
94
- if (res['width'] === 0 && res['height'] !== 0) {
95
- res['width'] = res['height'] * this.wPH
96
- }
97
- if (res['width'] !== 0) {
98
- return this.size=res
99
- }
100
-
101
- if (this.$refs.rImg && this.$refs.rImg.parentElement && this.$refs.rImg.parentElement.clientWidth > 0) {
102
- let cs=window.getComputedStyle(this.$refs.rImg.parentElement)
103
- let paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
104
- let borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
105
- let w = parseFloat((parseFloat(cs.getPropertyValue('width'))-paddingX-borderX).toFixed(2));
106
- return this.size= {
107
- width: w,
108
- height: w / this.wPH
109
- }
110
- }
111
- return false
112
-
113
- },
114
- activate() {
115
- this.getSize()
116
- if (this.size.width!==0) {
117
- this.load = true
118
- } else {
119
- clearTimeout(this.time_id)
120
- this.time_id=setTimeout(() => {
121
- this.activate()
122
- }, 100)
123
- }
124
-
125
- }
126
- },
127
- beforeUnmount(){
128
- clearTimeout(this.time_id)
21
+ export default {
22
+ name: 'r-img',
23
+ props: {
24
+ src: {
25
+ type: String,
26
+ required: true
27
+ },
28
+ alt: {
29
+ type: String,
30
+ required: true
31
+ },
32
+ lazy: {
33
+ type: String,
34
+ default: 'create',
35
+ validator: function (value) {
36
+ return ['no', 'create'].indexOf(value) !== -1
37
+ }
38
+ },
39
+ width: {
40
+ type: [String, Number]
41
+ },
42
+ height: {
43
+ type: [String, Number]
44
+ },
45
+ query: String,
46
+ autoSize: Boolean,
47
+ hoverZoom: Boolean,
48
+ hoverDark: Boolean,
49
+ hoverTitle: Boolean,
50
+ titleHs: Boolean,
51
+ titleHc: Boolean,
52
+ titleHe: Boolean,
53
+ titleVs: Boolean,
54
+ titleVc: Boolean,
55
+ titleVe: Boolean,
56
+ wPH: {
57
+ type: Number,
58
+ default: 1
59
+ },
60
+ },
61
+ data() {
62
+ return {
63
+ load: false,
64
+ view: false,
65
+ modifier: this.lazy !== 'no' ? 'once' : 'pre',
66
+ time_id: null,
67
+ size: {width: 0, height: 0}
68
+ }
69
+ },
70
+ created() {
71
+ this.activate()
72
+ },
73
+ computed: {
74
+ link() {
75
+ if (this.lazy !== 'no' && !this.view) {
76
+ return null
77
+ }
78
+ let res = this.src
79
+ if (!(res.startsWith('/') || res.startsWith('http://') || res.startsWith('https://'))) {
80
+ res = '/' + res
81
+ }
82
+ if (this.src.search('[?]') === -1) {
83
+ res += '?'
84
+ }
85
+ if (this.query) {
86
+ res += this.query
87
+ }
88
+ if ((this.autoSize && this.size.width > 0) || this.width) {
89
+ res += `&w=${this.size.width}&h=${this.size.height}`
90
+ }
91
+ return res
92
+ }
93
+ },
94
+ methods: {
95
+ check(isIntersecting) {
96
+ if (isIntersecting) {
97
+ this.view = true
98
+ }
99
+ },
100
+ getSize() {
101
+ let res = {width: 0, height: 0}
102
+ if (this.width) {
103
+ res["width"] = this.width
104
+ }
105
+ if (this.height) {
106
+ res["height"] = this.height
107
+ }
108
+ if (res['width'] !== 0 && res['height'] === 0) {
109
+ res['height'] = res['width'] / this.wPH
110
+ }
111
+ if (res['width'] === 0 && res['height'] !== 0) {
112
+ res['width'] = res['height'] * this.wPH
113
+ }
114
+ if (res['width'] !== 0) {
115
+ return this.size = res
116
+ }
117
+
118
+ if (this.$refs.rImg && this.$refs.rImg.parentElement && this.$refs.rImg.parentElement.clientWidth > 0) {
119
+ let cs = window.getComputedStyle(this.$refs.rImg.parentElement)
120
+ let paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
121
+ let borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
122
+ let w = parseFloat((parseFloat(cs.getPropertyValue('width')) - paddingX - borderX).toFixed(2));
123
+ return this.size = {
124
+ width: w,
125
+ height: w / this.wPH
129
126
  }
127
+ }
128
+ return false
129
+
130
+ },
131
+ activate() {
132
+ this.getSize()
133
+ if (this.size.width !== 0) {
134
+ this.load = true
135
+ } else {
136
+ clearTimeout(this.time_id)
137
+ this.time_id = setTimeout(() => {
138
+ this.activate()
139
+ }, 100)
140
+ }
141
+
130
142
  }
143
+ },
144
+ beforeUnmount() {
145
+ clearTimeout(this.time_id)
146
+ }
147
+ }
131
148
  </script>
132
149
  <style lang="scss">
133
- @import "../../style/include";
134
-
135
- .#{$prefix}img {
136
- position: relative;
137
- display: inline-flex;
138
- max-width: 100%;
139
- overflow: hidden;
140
- z-index: 0;
141
-
142
- img {
143
- transition: 0.3s all ease-in-out;
144
- }
145
-
146
- &.img-hoverZoom {
147
- &:hover {
148
- img {
149
- transform: scale(1.1);
150
- }
151
- }
152
- }
153
-
154
- &.img-hoverDark {
155
- &:hover {
156
- background-color: black;
150
+ @import "../../style/include";
151
+
152
+ .#{$prefix}img {
153
+ position: relative;
154
+ display: inline-flex;
155
+ max-width: 100%;
156
+ overflow: hidden;
157
+ z-index: 0;
158
+
159
+ img {
160
+ transition: 0.3s all ease-in-out;
161
+ }
162
+
163
+ &.img-hoverZoom {
164
+ &:hover {
165
+ img {
166
+ transform: scale(1.1);
167
+ }
168
+ }
169
+ }
157
170
 
158
- img {
159
- opacity: 0.5;
160
- }
161
- }
162
- }
171
+ &.img-hoverDark {
172
+ &:hover {
173
+ background-color: black;
163
174
 
164
- &.img-hoverTitle {
165
- &:hover {
166
- .img-title {
167
- max-width: 100%;
168
- }
169
- }
170
- }
175
+ img {
176
+ opacity: 0.5;
177
+ }
178
+ }
179
+ }
171
180
 
172
- .img-title {
173
- position: absolute;
174
- z-index: 1;
175
- max-width: 0;
176
- overflow: hidden;
181
+ &.img-hoverTitle {
182
+ &:hover {
183
+ .img-title {
184
+ max-width: 100%;
185
+ }
186
+ }
187
+ }
177
188
 
178
- &.title-hs {
179
- text-align: start;
180
- }
189
+ .img-title {
190
+ position: absolute;
191
+ z-index: 1;
192
+ max-width: 0;
193
+ overflow: hidden;
181
194
 
182
- &.title-hc {
183
- text-align: center;
184
- }
195
+ &.title-hs {
196
+ text-align: start;
197
+ }
185
198
 
186
- &.title-he {
187
- text-align: end;
188
- }
199
+ &.title-hc {
200
+ text-align: center;
201
+ }
189
202
 
190
- &.title-vs {
191
- top: 10px
192
- }
203
+ &.title-he {
204
+ text-align: end;
205
+ }
193
206
 
194
- &.title-vc {
195
- top: 50%
196
- }
207
+ &.title-vs {
208
+ top: 10px
209
+ }
197
210
 
198
- &.title-ve {
199
- bottom: 10px
200
- }
211
+ &.title-vc {
212
+ top: 50%
213
+ }
201
214
 
202
- }
215
+ &.title-ve {
216
+ bottom: 10px
203
217
  }
218
+
219
+ }
220
+ }
204
221
  </style>
package/components/index.js CHANGED
@@ -112,7 +112,7 @@ const list = {
112
112
  'r-html2pdf': {'p': 'html2pdf/index.vue', 'c': ['r-btn', 'r-icon', 'r-html2pdf-page-break'], 'd': []},
113
113
  'r-html2pdf-page-break': {'p': 'html2pdf/pageBreak.vue', 'c': [], 'd': []},
114
114
  'r-icon': {'p': 'icon/index.vue', 'c': [], 'd': []},
115
- 'r-img': {'p': 'img/index.vue', 'c': [], 'd': []},
115
+ 'r-img': {'p': 'img/index.vue', 'c': [], 'd': ['intersect']},
116
116
  'r-infinite-div': {
117
117
  'p': 'infinite/div.vue',
118
118
  'c': ['r-container', 'r-row', 'r-col', 'r-progress-liner'],
package/components/progress/circular.vue CHANGED
@@ -48,7 +48,7 @@ export default {
48
48
  default: 0
49
49
  },
50
50
  size: {
51
- type: String,
51
+ type: [Number, String],
52
52
  default: '32'
53
53
  },
54
54
  width: {
package/directive/intersect/index.js CHANGED
@@ -1,24 +1,27 @@
1
1
  function mounted (el, binding) {
2
- const modifiers = binding.modifiers || {}
3
- const value = binding.value
4
- const callback = typeof value === 'object' ? value.handler : value
5
- let options = binding.value.options||{}
6
-
7
- const observer = new IntersectionObserver((
8
- entries = [],
9
- observer
10
- ) => {
11
- if (!el._observe) return
12
-
13
- if (
14
- callback && (
15
- !modifiers.silent ||
16
- el._observe.init
17
- )
18
- ) {
19
- const isIntersecting = Boolean(entries.find(entry => entry.isIntersecting))
20
-
21
- callback(isIntersecting,entries, observer,options)
2
+ const modifiers = binding.modifiers || {}
3
+ if (modifiers.pre) {
4
+ return
5
+ }
6
+ const value = binding.value
7
+ const callback = typeof value === 'object' ? value.handler : value
8
+ let options = binding.value.options || {}
9
+
10
+ const observer = new IntersectionObserver((
11
+ entries = [],
12
+ observer
13
+ ) => {
14
+ if (!el._observe) return
15
+
16
+ if (
17
+ callback && (
18
+ !modifiers.silent ||
19
+ el._observe.init
20
+ )
21
+ ) {
22
+ const isIntersecting = Boolean(entries.find(entry => entry.isIntersecting))
23
+
24
+ callback(isIntersecting, entries, observer, options)
22
25
  }
23
26
 
24
27
  if (el._observe.init && modifiers.once) unmounted(el)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "renusify",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "description": "Vue3 Framework",
5
5
  "keywords": [
6
6
  "vuejs",