@eturnity/eturnity_reusable_components 1.2.73 → 1.2.74
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
CHANGED
package/src/App.vue
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<div>Interactive Label</div>
|
|
27
27
|
</template>
|
|
28
28
|
</input-number>
|
|
29
|
-
|
|
29
|
+
|
|
30
30
|
<dropdown-component openingMode="hover" gap="30px">
|
|
31
31
|
<template #trigger><i>Click Me</i></template>
|
|
32
32
|
<template #dropdown>
|
|
@@ -37,7 +37,14 @@
|
|
|
37
37
|
</div>
|
|
38
38
|
</template>
|
|
39
39
|
</dropdown-component>
|
|
40
|
-
|
|
40
|
+
|
|
41
|
+
<videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
|
|
42
|
+
playIconColor="red"
|
|
43
|
+
playIconSize="20px"
|
|
44
|
+
width="400px"
|
|
45
|
+
height="600px"
|
|
46
|
+
/>
|
|
47
|
+
|
|
41
48
|
<SwitchField
|
|
42
49
|
@on-switch-change="onInputChange($event)"
|
|
43
50
|
:options="[
|
|
@@ -97,6 +104,7 @@ import SwitchField from '@/components/inputs/switchField'
|
|
|
97
104
|
import Option from '@/components/inputs/select/option'
|
|
98
105
|
import iconCollection from '@/components/icon/iconCollection'
|
|
99
106
|
import dropdownComponent from '@/components/dropdown'
|
|
107
|
+
import videoThumbnail from '@/components/videoThumbnail'
|
|
100
108
|
// import TableDropdown from "@/components/tableDropdown"
|
|
101
109
|
|
|
102
110
|
const PageContainer = styled.div`
|
|
@@ -119,7 +127,8 @@ export default {
|
|
|
119
127
|
Select,
|
|
120
128
|
SwitchField,
|
|
121
129
|
iconCollection,
|
|
122
|
-
dropdownComponent
|
|
130
|
+
dropdownComponent,
|
|
131
|
+
videoThumbnail
|
|
123
132
|
},
|
|
124
133
|
data() {
|
|
125
134
|
return {
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
2
|
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
3
|
+
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
4
|
+
viewBox="0 0 459 459" xml:space="preserve">
|
|
5
|
+
<g>
|
|
6
|
+
<g>
|
|
7
|
+
<path d="M229.5,0C102.751,0,0,102.751,0,229.5S102.751,459,229.5,459S459,356.249,459,229.5S356.249,0,229.5,0z M310.292,239.651
|
|
8
|
+
l-111.764,76.084c-3.761,2.56-8.63,2.831-12.652,0.704c-4.022-2.128-6.538-6.305-6.538-10.855V153.416
|
|
9
|
+
c0-4.55,2.516-8.727,6.538-10.855c4.022-2.127,8.891-1.857,12.652,0.704l111.764,76.084c3.359,2.287,5.37,6.087,5.37,10.151
|
|
10
|
+
C315.662,233.564,313.652,237.364,310.292,239.651z"/>
|
|
11
|
+
</g>
|
|
12
|
+
</g>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<wrapper :width="width" :height="height" :fit="fit">
|
|
3
|
+
<img :src="src">
|
|
4
|
+
<iconWrapper>
|
|
5
|
+
<icon
|
|
6
|
+
name="play"
|
|
7
|
+
:size="playIconSize"
|
|
8
|
+
:color="playIconColor"
|
|
9
|
+
/>
|
|
10
|
+
</iconWrapper>
|
|
11
|
+
</wrapper>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script>
|
|
15
|
+
// import VideoThumbnail from "@eturnity/eturnity_reusable_components/src/components/videoThumbnail"
|
|
16
|
+
// How to use:
|
|
17
|
+
//<videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
|
|
18
|
+
// playIconColor="red"
|
|
19
|
+
// playIconSize="20px"
|
|
20
|
+
// width="400px"
|
|
21
|
+
// height="600px"
|
|
22
|
+
// />
|
|
23
|
+
|
|
24
|
+
import styled from 'vue-styled-components'
|
|
25
|
+
import Icon from '../icon'
|
|
26
|
+
|
|
27
|
+
const wrapperAttrs = { width: String, height:String,fit:String }
|
|
28
|
+
const Wrapper = styled('div', wrapperAttrs)`
|
|
29
|
+
display: inline-block;
|
|
30
|
+
position: relative;
|
|
31
|
+
width:${props=>props.width};
|
|
32
|
+
height:${props=>props.height};
|
|
33
|
+
& img{
|
|
34
|
+
object-fit:${props=>props.fit};
|
|
35
|
+
width:100%;
|
|
36
|
+
height:100%;
|
|
37
|
+
}
|
|
38
|
+
`
|
|
39
|
+
const iconWrapper = styled('div')`
|
|
40
|
+
position: absolute;
|
|
41
|
+
top:0;
|
|
42
|
+
bottom:0;
|
|
43
|
+
left:0;
|
|
44
|
+
right:0;
|
|
45
|
+
display:flex;
|
|
46
|
+
justify-content:center;
|
|
47
|
+
align-items: center;
|
|
48
|
+
`
|
|
49
|
+
|
|
50
|
+
export default {
|
|
51
|
+
name: 'VideoThumbnail',
|
|
52
|
+
components: {
|
|
53
|
+
Wrapper,
|
|
54
|
+
Icon,
|
|
55
|
+
iconWrapper
|
|
56
|
+
},
|
|
57
|
+
props: {
|
|
58
|
+
src:{
|
|
59
|
+
required: true,
|
|
60
|
+
},
|
|
61
|
+
fit:{
|
|
62
|
+
required: false,
|
|
63
|
+
default: 'cover'
|
|
64
|
+
},
|
|
65
|
+
width: {
|
|
66
|
+
required: false,
|
|
67
|
+
default: '300px'
|
|
68
|
+
},
|
|
69
|
+
height: {
|
|
70
|
+
required: false,
|
|
71
|
+
default: '200px'
|
|
72
|
+
},
|
|
73
|
+
playIconSize:{
|
|
74
|
+
required: false,
|
|
75
|
+
default: '50px'
|
|
76
|
+
},
|
|
77
|
+
playIconColor:{
|
|
78
|
+
required: false,
|
|
79
|
+
default: 'blue'
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
data() {
|
|
83
|
+
return {
|
|
84
|
+
isOpenByClick:false
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
methods:{
|
|
88
|
+
clickOutside(event) {
|
|
89
|
+
if (this.openingMode!="click") return
|
|
90
|
+
if (
|
|
91
|
+
this.$refs.dropdown.$el == event.target ||
|
|
92
|
+
this.$refs.dropdown.$el.contains(event.target)
|
|
93
|
+
) {
|
|
94
|
+
return
|
|
95
|
+
} else {
|
|
96
|
+
this.isOpenByClick=false
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
mounted() {
|
|
101
|
+
document.addEventListener('click', this.clickOutside)
|
|
102
|
+
},
|
|
103
|
+
beforeDestroy() {
|
|
104
|
+
document.removeEventListener('click', this.clickOutside)
|
|
105
|
+
},
|
|
106
|
+
}
|
|
107
|
+
</script>
|
|
108
|
+
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import VideoThumbnail from './index.vue'
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'VideoThumbnail',
|
|
5
|
+
component: VideoThumbnail
|
|
6
|
+
// argTypes: {},
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const Template = (args, { argTypes }) => ({
|
|
10
|
+
// Components used in your story `template` are defined in the `components` object
|
|
11
|
+
components: { VideoThumbnail },
|
|
12
|
+
// The story's `args` need to be mapped into the template through the `setup()` method
|
|
13
|
+
props: Object.keys(argTypes),
|
|
14
|
+
template: `<VideoThumbnail v-bind="$props"/>`,
|
|
15
|
+
// import VideoThumbnail from "@eturnity/eturnity_reusable_components/src/components/videoThumbnail"
|
|
16
|
+
// How to use:
|
|
17
|
+
//<videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
|
|
18
|
+
// playIconColor="red"
|
|
19
|
+
// playIconSize="20px"
|
|
20
|
+
// width="400px"
|
|
21
|
+
// height="600px"
|
|
22
|
+
// />
|
|
23
|
+
})
|
|
24
|
+
|
|
25
|
+
export const Default = Template.bind({})
|
|
26
|
+
Default.args = {
|
|
27
|
+
src:"https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080",
|
|
28
|
+
playIconSize:"50px",
|
|
29
|
+
playIconColor:"red",
|
|
30
|
+
width:"400px",
|
|
31
|
+
height:"300px",
|
|
32
|
+
fit:"cover"
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
|