@eturnity/eturnity_reusable_components 7.4.4-EPDM-9606 → 7.4.4-EPDM-7260.3

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 (22) hide show
  1. package/package.json +3 -3
  2. package/src/App.vue +69 -73
  3. package/src/assets/svgIcons/consumption_tariffs.svg +43 -0
  4. package/src/assets/svgIcons/electricity_tariff.svg +3 -0
  5. package/src/assets/svgIcons/handle.svg +5 -0
  6. package/src/assets/svgIcons/logout.svg +3 -0
  7. package/src/assets/svgIcons/summer.svg +3 -0
  8. package/src/components/draggableInputHandle/index.vue +47 -0
  9. package/src/components/infoCard/index.vue +19 -21
  10. package/src/components/infoText/index.vue +2 -1
  11. package/src/components/inputs/radioButton/index.vue +5 -2
  12. package/src/components/inputs/select/index.vue +53 -13
  13. package/src/components/label/index.vue +104 -0
  14. package/src/components/modals/modal/index.vue +33 -12
  15. package/src/components/rangeSlider/Slider.vue +541 -0
  16. package/src/components/rangeSlider/index.vue +488 -0
  17. package/src/components/rangeSlider/utils/dom.js +49 -0
  18. package/src/components/rangeSlider/utils/fns.js +26 -0
  19. package/src/components/selectedOptions/index.vue +145 -0
  20. package/src/components/tables/mainTable/index.vue +1 -1
  21. package/src/components/threeDots/index.vue +52 -29
  22. package/src/main.js +5 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "7.4.4-EPDM-9606",
3
+ "version": "7.4.4-EPDM-7260.3",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
@@ -11,14 +11,14 @@
11
11
  },
12
12
  "dependencies": {
13
13
  "@vueform/slider": "1.0.5",
14
+ "core-js": "3.31.1",
14
15
  "html-loader": "0.5.5",
15
16
  "postcss": "^8.4.25",
16
17
  "v-click-outside": "2.1.4",
17
18
  "vue": "2.6.11",
18
19
  "vue-styled-components": "1.6.0",
19
20
  "vue2-datepicker": "3.11.1",
20
- "vuedraggable": "2.24.3",
21
- "core-js": "3.31.1"
21
+ "vuedraggable": "2.24.3"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@storybook/addon-actions": "6.2.8",
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`
@@ -140,7 +137,6 @@ export default {
140
137
  dropdownComponent,
141
138
  videoThumbnail,
142
139
  icon,
143
- infoCard
144
140
  },
145
141
  data() {
146
142
  return {
@@ -148,14 +144,14 @@ export default {
148
144
  value2: 42,
149
145
  companyName: 'toto',
150
146
  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'},
147
+ { id: 'a', val: 'A', lookFor: 'babababa' },
148
+ { id: 'b', val: 'B', lookFor: 'abab' },
149
+ { id: 'c', val: 'C', lookFor: 'ccc' },
150
+ { id: 'd', val: 'D', lookFor: 'ddd' },
151
+ { id: 'e', val: 'E', lookFor: 'dddee' },
152
+ { id: 'f', val: 'F', lookFor: 'ddfff' },
153
+ { id: 'g', val: 'G', lookFor: 'dggg' },
154
+ { id: 'h', val: 'H', lookFor: 'dddhhh' }
159
155
  ],
160
156
  searchValue: ''
161
157
  }
@@ -163,7 +159,7 @@ export default {
163
159
  computed: {
164
160
  filteredOptionList() {
165
161
  return this.optionList.filter((opt) =>
166
- opt.lookFor.includes(this.searchValue)
162
+ opt.lookFor.includes(this.searchValue)
167
163
  )
168
164
  }
169
165
  },
@@ -226,7 +222,7 @@ export default {
226
222
  ]
227
223
  return items
228
224
  },
229
- getComponentInfo({row, value}) {
225
+ getComponentInfo({ row, value }) {
230
226
  let item
231
227
  if (row.selectedValue && row.selectedValue[value]) {
232
228
  item = row.selectedValue[value]
package/src/assets/svgIcons/consumption_tariffs.svg ADDED
@@ -0,0 +1,43 @@
1
+ <svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M51.6097 40.3491C51.7466 40.2267 51.66 40 51.4764 40H43.375L48.9016 22.6994C48.9636 22.5053 48.7296 22.3537 48.5777 22.4895L29.3903 39.6509C29.2534 39.7733 29.34 40 29.5236 40H37.625L32.0984 57.3006C32.0364 57.4947 32.2704 57.6463 32.4223 57.5105L51.6097 40.3491Z" fill="#B2B9C5"/>
3
+ <path d="M27.5676 15.1647C28.222 15.8191 28.2078 16.8942 27.536 17.5661C26.8641 18.238 25.789 18.2521 25.1346 17.5978L17.3671 9.83034L19.8002 7.39727L27.5676 15.1647Z" fill="#DEE2EB"/>
4
+ <path d="M22.9134 2.03786C24.0932 2.24201 24.8589 3.36854 24.6237 4.55419C24.3885 5.73997 23.2413 6.53586 22.0613 6.33187L11.6146 4.5259L11.3604 0.0388747L22.9134 2.03786Z" fill="#DEE2EB"/>
5
+ <path d="M25.9034 19.9886C26.5577 20.643 26.5436 21.7181 25.8717 22.39C25.1998 23.0619 24.1247 23.0761 23.4703 22.4217L14.1231 13.0744L16.5561 10.6414L25.9034 19.9886Z" fill="#DEE2EB"/>
6
+ <path d="M21.8694 22.4428C22.5238 23.0972 22.5096 24.1723 21.8377 24.8442C21.1658 25.516 20.0907 25.5302 19.4363 24.8758L10.879 16.3185L13.312 13.8854L21.8694 22.4428Z" fill="#DEE2EB"/>
7
+ <path d="M16.2556 23.3171C16.9099 23.9715 16.8958 25.0467 16.2239 25.7185C15.552 26.3904 14.4769 26.4046 13.8225 25.7502L7.63489 19.5626L10.068 17.1295L16.2556 23.3171Z" fill="#DEE2EB"/>
8
+ <path d="M20.3268 7.92388L8.16149 20.0892L2.10553 14.0332C-0.0757419 11.852 -0.0284786 8.26816 2.21109 6.02859L6.2662 1.97348C8.50578 -0.26609 12.0896 -0.313354 14.2708 1.86792L20.3268 7.92388Z" fill="#DEE2EB"/>
9
+ <path d="M18.947 11.4102L18.1359 12.2212L17.0827 11.168L17.8937 10.3569L18.947 11.4102Z" fill="#DEE2EB"/>
10
+ <path d="M15.7029 14.6542L14.8919 15.4653L13.8386 14.4121L14.6497 13.601L15.7029 14.6542Z" fill="#DEE2EB"/>
11
+ <path d="M11.9322 17.3717L11.1212 18.1827L10.5946 17.6561L11.4056 16.8451L11.9322 17.3717Z" fill="#DEE2EB"/>
12
+ <path d="M6.2662 1.97348C8.29376 -0.05407 10.1615 -0.0787013 11.3604 0.0388747L11.6202 0.568994L11.4815 0.970987L9.60324 1.79608C9.16322 1.44619 6.15807 2.08162 6.2662 1.97348Z" fill="#DEE2EB"/>
13
+ <path d="M53.4304 64.8353C52.776 64.1809 52.7902 63.1058 53.4621 62.4339C54.134 61.762 55.2091 61.7478 55.8635 62.4022L63.6309 70.1697L61.1978 72.6027L53.4304 64.8353Z" fill="#DEE2EB"/>
14
+ <path d="M58.0847 77.9621C56.9049 77.758 56.1391 76.6315 56.3743 75.4458C56.6095 74.26 57.7567 73.4641 58.9367 73.6681L69.3834 75.4741L69.6376 79.9611L58.0847 77.9621Z" fill="#DEE2EB"/>
15
+ <path d="M55.0947 60.0114C54.4403 59.357 54.4545 58.2819 55.1264 57.61C55.7982 56.9381 56.8734 56.9239 57.5277 57.5783L66.875 66.9256L64.4419 69.3586L55.0947 60.0114Z" fill="#DEE2EB"/>
16
+ <path d="M59.1287 57.5572C58.4743 56.9028 58.4885 55.8277 59.1603 55.1558C59.8322 54.4839 60.9074 54.4698 61.5617 55.1242L70.1191 63.6815L67.686 66.1146L59.1287 57.5572Z" fill="#DEE2EB"/>
17
+ <path d="M64.7425 56.6829C64.0881 56.0285 64.1023 54.9533 64.7742 54.2815C65.446 53.6096 66.5212 53.5954 67.1755 54.2498L73.3632 60.4374L70.9301 62.8705L64.7425 56.6829Z" fill="#DEE2EB"/>
18
+ <path d="M60.6712 72.0761L72.8366 59.9108L78.8925 65.9668C81.0738 68.148 81.0265 71.7318 78.787 73.9714L74.7318 78.0265C72.4923 80.2661 68.9085 80.3134 66.7272 78.1321L60.6712 72.0761Z" fill="#DEE2EB"/>
19
+ <path d="M62.0511 68.5898L62.8621 67.7788L63.9153 68.832L63.1043 69.6431L62.0511 68.5898Z" fill="#DEE2EB"/>
20
+ <path d="M65.2952 65.3458L66.1062 64.5347L67.1594 65.5879L66.3484 66.399L65.2952 65.3458Z" fill="#DEE2EB"/>
21
+ <path d="M69.0659 62.6283L69.8769 61.8173L70.4035 62.3439L69.5925 63.1549L69.0659 62.6283Z" fill="#DEE2EB"/>
22
+ <path d="M74.7318 78.0265C72.7043 80.0541 70.8365 80.0787 69.6376 79.9611L69.3778 79.431L69.5165 79.029L71.3948 78.2039C71.8348 78.5538 74.84 77.9184 74.7318 78.0265Z" fill="#DEE2EB"/>
23
+ <path d="M53.4304 15.1647C52.776 15.8191 52.7902 16.8942 53.4621 17.5661C54.134 18.238 55.2091 18.2521 55.8635 17.5978L63.6309 9.83034L61.1978 7.39727L53.4304 15.1647Z" fill="#DEE2EB"/>
24
+ <path d="M58.0847 2.03786C56.9049 2.24201 56.1391 3.36854 56.3743 4.55419C56.6095 5.73997 57.7567 6.53586 58.9367 6.33187L69.3834 4.5259L69.6376 0.0388747L58.0847 2.03786Z" fill="#DEE2EB"/>
25
+ <path d="M55.0947 19.9886C54.4403 20.643 54.4545 21.7181 55.1263 22.39C55.7982 23.0619 56.8734 23.0761 57.5277 22.4217L66.875 13.0744L64.4419 10.6414L55.0947 19.9886Z" fill="#DEE2EB"/>
26
+ <path d="M59.1287 22.4428C58.4743 23.0972 58.4885 24.1723 59.1603 24.8442C59.8322 25.516 60.9074 25.5302 61.5617 24.8758L70.1191 16.3185L67.686 13.8854L59.1287 22.4428Z" fill="#DEE2EB"/>
27
+ <path d="M64.7425 23.3171C64.0881 23.9715 64.1023 25.0467 64.7742 25.7185C65.446 26.3904 66.5212 26.4046 67.1755 25.7502L73.3632 19.5626L70.9301 17.1295L64.7425 23.3171Z" fill="#DEE2EB"/>
28
+ <path d="M60.6712 7.92388L72.8366 20.0892L78.8925 14.0332C81.0738 11.852 81.0265 8.26816 78.787 6.02859L74.7318 1.97348C72.4923 -0.26609 68.9085 -0.313354 66.7272 1.86792L60.6712 7.92388Z" fill="#DEE2EB"/>
29
+ <path d="M62.0511 11.4102L62.8621 12.2212L63.9153 11.168L63.1043 10.3569L62.0511 11.4102Z" fill="#DEE2EB"/>
30
+ <path d="M65.2952 14.6542L66.1062 15.4653L67.1594 14.4121L66.3484 13.601L65.2952 14.6542Z" fill="#DEE2EB"/>
31
+ <path d="M69.0659 17.3717L69.8769 18.1827L70.4035 17.6561L69.5925 16.8451L69.0659 17.3717Z" fill="#DEE2EB"/>
32
+ <path d="M74.7318 1.97348C72.7043 -0.05407 70.8365 -0.0787013 69.6376 0.0388747L69.3778 0.568994L69.5165 0.970987L71.3948 1.79608C71.8348 1.44619 74.84 2.08162 74.7318 1.97348Z" fill="#DEE2EB"/>
33
+ <path d="M27.5676 64.8353C28.222 64.1809 28.2078 63.1058 27.536 62.4339C26.8641 61.762 25.789 61.7479 25.1346 62.4022L17.3671 70.1697L19.8002 72.6027L27.5676 64.8353Z" fill="#DEE2EB"/>
34
+ <path d="M22.9134 77.9621C24.0932 77.758 24.8589 76.6315 24.6237 75.4458C24.3885 74.26 23.2413 73.4641 22.0613 73.6681L11.6146 75.4741L11.3604 79.9611L22.9134 77.9621Z" fill="#DEE2EB"/>
35
+ <path d="M25.9034 60.0114C26.5578 59.357 26.5436 58.2819 25.8717 57.61C25.1998 56.9381 24.1247 56.924 23.4703 57.5783L14.1231 66.9256L16.5561 69.3586L25.9034 60.0114Z" fill="#DEE2EB"/>
36
+ <path d="M21.8694 57.5572C22.5238 56.9028 22.5096 55.8277 21.8377 55.1558C21.1658 54.484 20.0907 54.4698 19.4363 55.1242L10.879 63.6815L13.312 66.1146L21.8694 57.5572Z" fill="#DEE2EB"/>
37
+ <path d="M16.2556 56.6829C16.9099 56.0285 16.8958 54.9533 16.2239 54.2815C15.552 53.6096 14.4769 53.5954 13.8225 54.2498L7.63489 60.4374L10.068 62.8705L16.2556 56.6829Z" fill="#DEE2EB"/>
38
+ <path d="M20.3268 72.0761L8.16149 59.9108L2.10553 65.9668C-0.0757409 68.148 -0.0284779 71.7318 2.2111 73.9714L6.2662 78.0265C8.50578 80.2661 12.0896 80.3134 14.2708 78.1321L20.3268 72.0761Z" fill="#DEE2EB"/>
39
+ <path d="M18.947 68.5898L18.1359 67.7788L17.0827 68.832L17.8938 69.6431L18.947 68.5898Z" fill="#DEE2EB"/>
40
+ <path d="M15.7029 65.3458L14.8919 64.5347L13.8386 65.5879L14.6497 66.399L15.7029 65.3458Z" fill="#DEE2EB"/>
41
+ <path d="M11.9322 62.6283L11.1212 61.8173L10.5946 62.3439L11.4056 63.1549L11.9322 62.6283Z" fill="#DEE2EB"/>
42
+ <path d="M6.2662 78.0265C8.29376 80.0541 10.1615 80.0787 11.3604 79.9611L11.6202 79.431L11.4815 79.029L9.60324 78.2039C9.16322 78.5538 6.15807 77.9184 6.2662 78.0265Z" fill="#DEE2EB"/>
43
+ </svg>
package/src/assets/svgIcons/electricity_tariff.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M9.36652 9.33445C9.4832 9.20595 9.39203 9 9.21845 9H6.16767L8.29896 0.785289C8.35143 0.583073 8.09775 0.44595 7.95731 0.60061L0.633784 8.66555C0.517096 8.79405 0.608271 9 0.781847 9H3.83263L1.70134 17.2147C1.64887 17.4169 1.90255 17.5541 2.04299 17.3994L9.36652 9.33445Z" fill="#263238"/>
3
+ </svg>
package/src/assets/svgIcons/handle.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="11" height="41" viewBox="0 0 11 41" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <line x1="5.5" y1="4" x2="5.5" y2="36" stroke="#DEE2EB"/>
3
+ <path d="M9.5 40C9.5 40.5523 9.05228 41 8.5 41L2.5 41C1.94772 41 1.5 40.5523 1.5 40L1.5 33.618C1.5 33.2393 1.714 32.893 2.05279 32.7236L5.5 31L8.94721 32.7236C9.286 32.893 9.5 33.2393 9.5 33.618L9.5 40Z" fill="#B2B9C5"/>
4
+ <path d="M1.5 1C1.5 0.447715 1.94772 0 2.5 0H8.5C9.05228 0 9.5 0.447715 9.5 1V7.38197C9.5 7.76074 9.286 8.107 8.94721 8.27639L5.5 10L2.05279 8.27639C1.714 8.107 1.5 7.76074 1.5 7.38197V1Z" fill="#B2B9C5"/>
5
+ </svg>
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>
package/src/assets/svgIcons/summer.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12 5.3C11.268 5.3 10.6747 4.70667 10.6747 3.97467V1.32533C10.6747 0.593333 11.268 0 12 0C12.732 0 13.3253 0.593333 13.3253 1.32533V3.97467C13.3253 4.70667 12.732 5.3 12 5.3ZM13.3253 22.6747V20.0253C13.3253 19.2933 12.732 18.7 12 18.7C11.268 18.7 10.6747 19.2933 10.6747 20.0253V22.6747C10.6747 23.4067 11.268 24 12 24C12.732 24 13.3253 23.4067 13.3253 22.6747ZM20.0253 13.3253H22.6747C23.4067 13.3253 24 12.732 24 12C24 11.268 23.4067 10.6747 22.6747 10.6747H20.0253C19.2933 10.6747 18.7 11.268 18.7 12C18.7 12.732 19.2933 13.3253 20.0253 13.3253ZM1.32533 13.3253H3.97467C4.70667 13.3253 5.3 12.732 5.3 12C5.3 11.268 4.70667 10.6747 3.97467 10.6747H1.32533C0.593333 10.6747 0 11.268 0 12C0 12.732 0.593333 13.3253 1.32533 13.3253ZM18.612 7.26133L20.4853 5.388C21.0027 4.87067 21.0027 4.032 20.4853 3.51467C19.968 2.99733 19.1293 2.99733 18.612 3.51467L16.7387 5.388C16.2213 5.90533 16.2213 6.744 16.7387 7.26133C17.256 7.77867 18.0947 7.77867 18.612 7.26133ZM5.388 20.4853L7.26133 18.612C7.77867 18.0947 7.77867 17.256 7.26133 16.7387C6.744 16.2213 5.90533 16.2213 5.388 16.7387L3.51467 18.612C2.99733 19.1293 2.99733 19.968 3.51467 20.4853C4.032 21.0027 4.87067 21.0027 5.388 20.4853ZM16.7387 18.612L18.612 20.4853C19.1293 21.0027 19.968 21.0027 20.4853 20.4853C21.0027 19.968 21.0027 19.1293 20.4853 18.612L18.612 16.7387C18.0947 16.2213 17.256 16.2213 16.7387 16.7387C16.2213 17.256 16.2213 18.0947 16.7387 18.612ZM3.51467 5.388L5.388 7.26133C5.90533 7.77867 6.744 7.77867 7.26133 7.26133C7.77867 6.744 7.77867 5.90533 7.26133 5.388L5.388 3.51467C4.87067 2.99733 4.032 2.99733 3.51467 3.51467C2.99733 4.032 2.99733 4.87067 3.51467 5.388ZM12 6.77733C9.07333 6.77733 6.7 9.14933 6.7 12.0773C6.7 15.0053 9.07333 17.376 12 17.376C14.9267 17.376 17.3 15.004 17.3 12.076C17.3 9.148 14.9267 6.77733 12 6.77733Z" fill="#FDB813"/>
3
+ </svg>
package/src/components/draggableInputHandle/index.vue ADDED
@@ -0,0 +1,47 @@
1
+ <template>
2
+ <Handle :height = "height" class="handle">
3
+ <Dot></Dot>
4
+ <Dot></Dot>
5
+ <Dot></Dot>
6
+ </Handle>
7
+ </template>
8
+
9
+ <script>
10
+
11
+ import styled from 'vue-styled-components'
12
+
13
+ const Handle = styled('div',{ height : String })`
14
+ position:absolute;
15
+ left:0;
16
+ margin-right:10px;
17
+ display: flex;
18
+ align-items: stretch;
19
+ flex-direction: column;
20
+ justify-content: center;
21
+ width: 14px;
22
+ height:${props=> props.height};
23
+ padding: 0 5px;
24
+ background-color: #f3f3f7;
25
+ cursor: pointer;
26
+ align-items: center;
27
+ `
28
+ const Dot = styled.div`
29
+ display: inline-block;
30
+ width: 4px;
31
+ height: 4px;
32
+ margin:2px;
33
+ background-color: #0068de;
34
+ `
35
+
36
+ export default {
37
+ name: 'draggableInputHandle',
38
+ props:['height'],
39
+ components: {
40
+ Handle,
41
+ Dot
42
+ },
43
+ data() {
44
+ return {}
45
+ }
46
+ }
47
+ </script>
package/src/components/infoCard/index.vue CHANGED
@@ -1,38 +1,36 @@
1
1
  <template>
2
- <info-container>
3
- <icon name="info" size="24px" />
4
- <InfoTextContainer>
5
- <slot />
6
- </InfoTextContainer>
7
- </info-container>
2
+ <info-container>
3
+ <icon name="info" size="24px" />
4
+ <text-container>
5
+ <slot />
6
+ </text-container>
7
+ </info-container>
8
8
  </template>
9
-
9
+
10
10
  <script>
11
11
  import styled from 'vue-styled-components'
12
- import icon from '../icon'
13
- const InfoContainer = styled('div')`
12
+ import Icon from '../icon'
13
+
14
+ const InfoContainer = styled.div`
14
15
  display: flex;
15
- align-items: flex-start;
16
16
  gap: 15px;
17
17
  padding: 20px;
18
- width: 500px;
19
- min-width: 450px;
20
- border: 1px dashed #dee2eb;
18
+ border: 1px dashed ${(props) => props.theme.colors.grey4};
21
19
  border-radius: 4px;
22
- margin:20px 0;
23
20
  `
24
21
 
25
- const InfoTextContainer = styled('div')`
22
+ const TextContainer = styled.div`
26
23
  font-size: 13px;
24
+ width: 100%;
27
25
  `
28
26
 
29
27
 
30
28
  export default {
31
- components:{
32
- icon,
33
- InfoTextContainer,
34
- InfoContainer
35
- },
36
- props:[]
29
+ name: 'InfoCard',
30
+ components: {
31
+ Icon,
32
+ InfoContainer,
33
+ TextContainer
34
+ }
37
35
  }
38
36
  </script>
package/src/components/infoText/index.vue CHANGED
@@ -28,7 +28,7 @@
28
28
  // <info-text
29
29
  // text="Veritatis et quasi architecto beatae vitae"
30
30
  // borderColor="#ccc"
31
- // size="20"
31
+ // size="20px"
32
32
  // alignArrow="right" // which side the arrow should be on
33
33
  // />
34
34
  import theme from '../../assets/theme.js'
@@ -58,6 +58,7 @@ const TextOverlay = styled('div', textAttrs)`
58
58
  max-width: 400px;
59
59
  font-size: 13px;
60
60
  font-weight: 400;
61
+ line-height: normal;
61
62
  border-radius: 4px;
62
63
  z-index: 99;
63
64
  color: ${(props) => props.theme.colors.white};
package/src/components/inputs/radioButton/index.vue CHANGED
@@ -3,6 +3,7 @@
3
3
  <radio-wrapper v-for="(item, index) in options" :key="item.value">
4
4
  <label-container
5
5
  :size="size"
6
+ :hasLabel="item.label"
6
7
  :isDisabled="item.disabled"
7
8
  :isChecked="selectedOption === item.value"
8
9
  :checkmarkColor="checkmarkColor"
@@ -17,7 +18,7 @@
17
18
  :data-id="`radio_button_${dataId}_option_${item.value}`"
18
19
  />
19
20
  <span class="checkmark"></span>
20
- <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
21
+ <label-text :isDisabled="item.disabled" v-if="item.label">{{ item.label }}</label-text>
21
22
  <info-text v-if="item.infoText" :text="item.infoText" size="16px" />
22
23
  </label-container>
23
24
  <image-container v-if="item.img">
@@ -98,7 +99,9 @@ const containerProps = {
98
99
  const LabelContainer = styled('label', containerProps)`
99
100
  display: grid;
100
101
  grid-template-columns: auto 1fr auto;
101
- grid-gap: 15px;
102
+ grid-gap: ${(props) =>
103
+ props.hasLabel
104
+ ? '15px' : 0 };
102
105
  align-items: center;
103
106
  color: ${(props) =>
104
107
  props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
package/src/components/inputs/select/index.vue CHANGED
@@ -1,12 +1,15 @@
1
1
  <template>
2
2
  <Container
3
3
  :selectWidth="selectWidth"
4
+ :minWidth="minWidth"
5
+ :maxWidth="maxWidth"
4
6
  @mouseenter="mouseEnterHandler"
5
7
  @mouseleave="mouseLeaveHandler"
6
8
  >
7
9
  <input-wrapper
8
10
  :hasLabel="!!label && label.length > 0"
9
11
  :alignItems="alignItems"
12
+ :minWidth="minWidth"
10
13
  >
11
14
  <label-wrapper v-if="label" :data-id="labelDataId">
12
15
  <input-label
@@ -46,7 +49,9 @@
46
49
  @keydown.native="onKeyDown"
47
50
  :showBorder="showBorder"
48
51
  :data-id="dataId"
49
- >
52
+ :isDraggable="isDraggable"
53
+ >
54
+ <draggableInputHandle v-if="isDraggable && !isSearchBarVisible" :height="selectHeight" />
50
55
  <inputText
51
56
  v-if="isSearchBarVisible"
52
57
  ref="searchInput"
@@ -66,7 +71,7 @@
66
71
  <selector v-else>
67
72
  <slot name="selector" :selectedValue="selectedValue"></slot>
68
73
  </selector>
69
- <Caret @click.stop="toggleCaretDropdown">
74
+ <Caret @click.stop="toggleCaretDropdown" v-if="dropDownArrowVisible">
70
75
  <icon
71
76
  v-if="isDropdownOpen"
72
77
  name="arrow_up"
@@ -120,6 +125,7 @@
120
125
  // <Select
121
126
  // hoverDropdown="true"
122
127
  // selectWidth="100%"
128
+ // minWidth="220px"
123
129
  // optionWidth="50%"
124
130
  // label="that is a label"
125
131
  // alignItems="vertical"
@@ -141,6 +147,7 @@ import styled from 'vue-styled-components'
141
147
  import InfoText from '../../infoText'
142
148
  import icon from '../../icon'
143
149
  import inputText from '../inputText'
150
+ import draggableInputHandle from '../../draggableInputHandle'
144
151
 
145
152
  const Caret = styled.div`
146
153
  display: flex;
@@ -170,9 +177,20 @@ const InputLabel = styled('div', labelAttrs)`
170
177
  const optionalLabel = styled.span`
171
178
  font-weight: 300;
172
179
  `
173
- const inputProps = { selectWidth: String, optionWidth: String }
180
+ const inputProps = {
181
+ selectWidth: String,
182
+ optionWidth: String,
183
+ minWidth: String,
184
+ maxWidth: String
185
+ }
174
186
  const Container = styled('div', inputProps)`
175
- width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
187
+ min-width: ${(props) => (props.minWidth ? props.minWidth : '150px')};
188
+ width: ${(props) =>
189
+ props.selectWidth
190
+ ? props.selectWidth
191
+ : props.maxWidth
192
+ ? props.maxWidth
193
+ : '100%'};
176
194
  position: relative;
177
195
  display: inline-block;
178
196
  `
@@ -200,13 +218,14 @@ const selectButtonAttrs = {
200
218
  height: String,
201
219
  selectMinHeight: String,
202
220
  isSearchBarVisible: Boolean,
203
- showBorder: Boolean
221
+ showBorder: Boolean,
222
+ isDraggable: Boolean,
204
223
  }
205
224
  const selectButton = styled('div', selectButtonAttrs)`
206
225
  position: relative;
207
226
  box-sizing: border-box;
208
227
  border-radius: 4px;
209
- padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
228
+ padding-left:${(props) => (props.isSearchBarVisible ? '0' : props.isDraggable?'30px':'15px')};
210
229
  text-align: left;
211
230
  border-radius: 4px;
212
231
  min-height: ${(props) =>
@@ -236,6 +255,10 @@ const selectButton = styled('div', selectButtonAttrs)`
236
255
  ? props.theme.colors[props.fontColor]
237
256
  : props.fontColor};
238
257
  ${(props) => (props.disabled ? 'pointer-events: none' : '')};
258
+ overflow: hidden;
259
+ & >.handle{
260
+ border-right:${(props) =>props.hasError ? props.theme.colors.red : props.theme.colors.grey4} 1px solid;
261
+ }
239
262
  `
240
263
  const selectDropdownAttrs = {
241
264
  hoveredBgColor: String,
@@ -280,10 +303,12 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
280
303
  const DropdownWrapper = styled('div')`
281
304
  position: relative;
282
305
  `
283
- const inputAttrs = { alignItems: String, hasLabel: Boolean }
306
+ const inputAttrs = { alignItems: String, hasLabel: Boolean, minWidth: String }
284
307
  const InputWrapper = styled('div', inputAttrs)`
285
308
  position: relative;
286
309
  display: grid;
310
+ width: max-content;
311
+ min-width: ${(props) => (props.minWidth ? props.minWidth : '150px')};
287
312
  align-items: center;
288
313
  gap: 8px;
289
314
  grid-template-columns: ${(props) =>
@@ -322,6 +347,12 @@ export default {
322
347
  required: false,
323
348
  default: null
324
349
  },
350
+ minWidth: {
351
+ required: false
352
+ },
353
+ maxWidth: {
354
+ required: false
355
+ },
325
356
  selectHeight: {
326
357
  type: String,
327
358
  required: false,
@@ -364,6 +395,10 @@ export default {
364
395
  dropdownFontColor: {
365
396
  required: false
366
397
  },
398
+ dropDownArrowVisible: {
399
+ required: false,
400
+ default: true
401
+ },
367
402
  caretColor: {
368
403
  required: false
369
404
  },
@@ -401,6 +436,10 @@ export default {
401
436
  dataId: {
402
437
  type: String,
403
438
  default: ''
439
+ },
440
+ isDraggable: {
441
+ type: Boolean,
442
+ default: false
404
443
  }
405
444
  },
406
445
 
@@ -418,7 +457,8 @@ export default {
418
457
  icon,
419
458
  Caret,
420
459
  Selector,
421
- inputText
460
+ inputText,
461
+ draggableInputHandle
422
462
  },
423
463
 
424
464
  data() {
@@ -452,10 +492,6 @@ export default {
452
492
  toggleCaretDropdown() {
453
493
  this.isDropdownOpen = !this.isDropdownOpen
454
494
  },
455
- openDropdown() {
456
- this.focus()
457
- this.isDropdownOpen = true
458
- },
459
495
  closeDropdown() {
460
496
  this.blur()
461
497
  this.isDropdownOpen = false
@@ -553,10 +589,13 @@ export default {
553
589
  if (this.isDropdownOpen) {
554
590
  // this filterRef is needed to check for the # of children on Filter dropdowns
555
591
  const filterRef =
592
+ this.$refs &&
593
+ this.$refs.dropdown &&
556
594
  this.$refs.dropdown.$children &&
557
595
  this.$refs.dropdown.$children.length > 1
558
596
  ? this.$refs.dropdown.$children
559
- : this.$refs.dropdown.$children[0].$children
597
+ : this.$refs.dropdown.$children.length &&
598
+ this.$refs.dropdown.$children[0].$children
560
599
  ? this.$refs.dropdown.$children[0].$children
561
600
  : this.$refs.dropdown.$children
562
601
  return filterRef.length
@@ -575,6 +614,7 @@ export default {
575
614
  isDropdownOpen(val) {
576
615
  this.$emit('is-dropdown-open', val)
577
616
  if (val) {
617
+ this.$emit('on-dropdown-open')
578
618
  setTimeout(() => {
579
619
  this.isClickOutsideActive = true
580
620
  }, 10)