@eturnity/eturnity_reusable_components 7.6.0 → 7.6.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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/App.vue +71 -74
  3. package/src/assets/svgIcons/logout.svg +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "7.6.0",
3
+ "version": "7.6.1",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
package/src/App.vue CHANGED
@@ -1,24 +1,23 @@
1
1
  <template>
2
2
  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
3
3
  <page-container>
4
-
5
- <br/>
4
+ <br />
6
5
  <input-number
7
- :value="value"
8
- :minNumber="0"
9
- unitName="mm"
10
- :numberPrecision="0"
11
- backgroundColor="transparent"
12
- borderColor="eturnityGrey"
13
- inputHeight="34px"
14
- inputWidth="420px"
15
- textAlign="left"
16
- :isInteractive="true"
17
- :interactionStep="1"
18
- @on-input="value = $event"
19
- @input-change="changeHandler"
20
- @input-focus="focusHandler"
21
- @input-blur="blurHandler"
6
+ :value="value"
7
+ :minNumber="0"
8
+ unitName="mm"
9
+ :numberPrecision="0"
10
+ backgroundColor="transparent"
11
+ borderColor="eturnityGrey"
12
+ inputHeight="34px"
13
+ inputWidth="420px"
14
+ textAlign="left"
15
+ :isInteractive="true"
16
+ :interactionStep="1"
17
+ @on-input="value = $event"
18
+ @input-change="changeHandler"
19
+ @input-focus="focusHandler"
20
+ @input-blur="blurHandler"
22
21
  >
23
22
  <template v-slot:label>
24
23
  <div>Interactive Label</div>
@@ -31,79 +30,77 @@
31
30
  <div>
32
31
  <a href="">test1</a>
33
32
  <button href="">test2</button>
34
- <br>
33
+ <br />
35
34
  <p>Text</p>
36
35
  </div>
37
36
  </template>
38
37
  </dropdown-component>
39
38
 
40
39
  <videoThumbnail
41
- 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"
40
+ src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
41
+ playIconColor="red"
42
+ playIconSize="20px"
43
+ width="400px"
44
+ height="600px"
46
45
  />
47
46
 
48
47
  <SwitchField
49
- @on-switch-change="onInputChange($event)"
50
- :options="[
51
- { value: 0, content: 'zero' },
52
- { value: 1, content: 'one' },
53
- { value: 2, content: 'two' }
54
- ]"
55
- :value="value"
56
- label="label"
57
- toggleColor="red"
58
- size="large"
59
- backgroundColor="blue"
60
- labelAlign="left"
61
- fontColor="black"
62
- :disabled="false"
48
+ @on-switch-change="onInputChange($event)"
49
+ :options="[
50
+ { value: 0, content: 'zero' },
51
+ { value: 1, content: 'one' },
52
+ { value: 2, content: 'two' }
53
+ ]"
54
+ :value="value"
55
+ label="label"
56
+ toggleColor="red"
57
+ size="large"
58
+ backgroundColor="blue"
59
+ labelAlign="left"
60
+ fontColor="black"
61
+ :disabled="false"
63
62
  />
64
63
  <icon
65
- name="opacity"
66
- color="red"
67
- hoveredColor="blue"
68
- size="60px"
69
- cursor="default"
70
- isStriked="true"
64
+ name="opacity"
65
+ color="red"
66
+ hoveredColor="blue"
67
+ size="60px"
68
+ cursor="default"
69
+ isStriked="true"
71
70
  />
72
71
  <Select
73
- :value="value"
74
- selectWidth="100%"
75
- optionWidth="50%"
76
- label="that is a label"
77
- alignItems="vertical"
78
- colorMode="dark"
79
- isSearchable="true"
80
- @input-change="value = $event"
81
- @search-change="searchValue = $event"
72
+ :value="value"
73
+ selectWidth="100%"
74
+ optionWidth="50%"
75
+ label="that is a label"
76
+ alignItems="vertical"
77
+ colorMode="dark"
78
+ isSearchable="true"
79
+ @input-change="value = $event"
80
+ @search-change="searchValue = $event"
82
81
  >
83
82
  <template #selector="{ selectedValue }">
84
83
  value selected: {{ selectedValue }}
85
84
  </template>
86
85
  <template #dropdown>
87
86
  <Option
88
- v-for="opt in filteredOptionList"
89
- :key="opt.id"
90
- :value="opt.val"
91
- >{{ opt.lookFor }}
92
- </Option
93
- >
87
+ v-for="opt in filteredOptionList"
88
+ :key="opt.id"
89
+ :value="opt.val"
90
+ >{{ opt.lookFor }}
91
+ </Option>
94
92
  </template>
95
93
  </Select>
96
94
 
97
-
98
95
  {{ filteredOptionList }}
99
96
 
100
- <iconCollection color="red"/>
97
+ <iconCollection color="red" />
101
98
  </page-container>
102
99
  </ThemeProvider>
103
100
  </template>
104
101
 
105
102
  <script>
106
- import {ThemeProvider} from 'vue-styled-components'
103
+ import { ThemeProvider } from 'vue-styled-components'
107
104
  import theme from './assets/theme'
108
105
  import styled from 'vue-styled-components'
109
106
  import InputNumber from '@/components/inputs/inputNumber'
@@ -114,7 +111,7 @@ import iconCollection from '@/components/icon/iconCollection'
114
111
  import dropdownComponent from '@/components/dropdown'
115
112
  import videoThumbnail from '@/components/videoThumbnail'
116
113
  import icon from '@/components/icon'
117
- import infoCard from '@/components/infoCard'
114
+ // import infoCard from '@/components/infoCard'
118
115
  // import TableDropdown from "@/components/tableDropdown"
119
116
 
120
117
  const PageContainer = styled.div`
@@ -139,8 +136,8 @@ export default {
139
136
  iconCollection,
140
137
  dropdownComponent,
141
138
  videoThumbnail,
142
- icon,
143
- infoCard
139
+ icon
140
+ // infoCard
144
141
  },
145
142
  data() {
146
143
  return {
@@ -148,14 +145,14 @@ export default {
148
145
  value2: 42,
149
146
  companyName: 'toto',
150
147
  optionList: [
151
- {id: 'a', val: 'A', lookFor: 'babababa'},
152
- {id: 'b', val: 'B', lookFor: 'abab'},
153
- {id: 'c', val: 'C', lookFor: 'ccc'},
154
- {id: 'd', val: 'D', lookFor: 'ddd'},
155
- {id: 'e', val: 'E', lookFor: 'dddee'},
156
- {id: 'f', val: 'F', lookFor: 'ddfff'},
157
- {id: 'g', val: 'G', lookFor: 'dggg'},
158
- {id: 'h', val: 'H', lookFor: 'dddhhh'},
148
+ { id: 'a', val: 'A', lookFor: 'babababa' },
149
+ { id: 'b', val: 'B', lookFor: 'abab' },
150
+ { id: 'c', val: 'C', lookFor: 'ccc' },
151
+ { id: 'd', val: 'D', lookFor: 'ddd' },
152
+ { id: 'e', val: 'E', lookFor: 'dddee' },
153
+ { id: 'f', val: 'F', lookFor: 'ddfff' },
154
+ { id: 'g', val: 'G', lookFor: 'dggg' },
155
+ { id: 'h', val: 'H', lookFor: 'dddhhh' }
159
156
  ],
160
157
  searchValue: ''
161
158
  }
@@ -163,7 +160,7 @@ export default {
163
160
  computed: {
164
161
  filteredOptionList() {
165
162
  return this.optionList.filter((opt) =>
166
- opt.lookFor.includes(this.searchValue)
163
+ opt.lookFor.includes(this.searchValue)
167
164
  )
168
165
  }
169
166
  },
@@ -226,7 +223,7 @@ export default {
226
223
  ]
227
224
  return items
228
225
  },
229
- getComponentInfo({row, value}) {
226
+ getComponentInfo({ row, value }) {
230
227
  let item
231
228
  if (row.selectedValue && row.selectedValue[value]) {
232
229
  item = row.selectedValue[value]
package/src/assets/svgIcons/logout.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12.173 4.517L15.242 7.586L15.656 8L15.676 8L15.676 8.02L16.656 9L15.676 9.98L15.676 10L15.656 10L15.242 10.414L12.173 13.483L10.759 12.069L12.827 10L4.676 10L4.676 8L12.827 8L10.758 5.931L12.173 4.517ZM-6.99382e-07 2L-8.74228e-08 16L0 18L2 18L7 18L7 16L2 16L2 2L7 2L7 -3.0598e-07L2 -8.74228e-08L-7.86805e-07 0L-6.99382e-07 2Z" fill="#263238"/>
3
+ </svg>