@eturnity/eturnity_reusable_components 8.16.9-SLD.5 → 8.16.9-SLD.6

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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "8.16.9-SLD.5",
3
+ "version": "8.16.9-SLD.6",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
@@ -1,4 +1,3 @@
1
- <svg width="34" height="65" viewBox="0 0 34 65" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M25.5308 32.5C25.7556 34.3125 27.1875 35.7444 29 35.9692L29 64.1365H30L30 35.9692C31.9763 35.7241 33.5 34.044 33.5 32C33.5 29.956 31.9763 28.2759 30 28.0308L30 0H29L29 28.0308C27.1875 28.2556 25.7556 29.6875 25.5308 31.5L0 31.5V32.5L25.5308 32.5Z" fill="black"/>
3
- <path d="M26.027 32.4384L25.9726 32L26.027 31.5616C26.2236 29.9764 27.4763 28.7236 29.0616 28.527L29.5 28.4726L29.9384 28.527C31.6671 28.7414 33 30.2112 33 32C33 33.7888 31.6671 35.2586 29.9384 35.473L29.5 35.5274L29.0616 35.473C27.4764 35.2764 26.2236 34.0236 26.027 32.4384Z" stroke="black" stroke-miterlimit="8"/>
1
+ <svg width="40" height="64" viewBox="0 0 40 64" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M33.2002 28.0615C35.0754 28.3926 36.5 30.0298 36.5 32C36.5 33.9702 35.0754 35.6063 33.2002 35.9375V64H31.7998V35.9375C30.1521 35.6465 28.8535 34.3479 28.5625 32.7002H0V31.2998H28.5625C28.8535 29.652 30.152 28.3525 31.7998 28.0615V0H33.2002V28.0615Z" fill="black"/>
4
3
  </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="34" height="65" viewBox="0 0 34 65" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M25.5308 32.5C25.7556 34.3125 27.1875 35.7444 29 35.9692L29 64.1365H30L30 35.9692C31.9763 35.7241 33.5 34.044 33.5 32C33.5 29.956 31.9763 28.2759 30 28.0308L30 0H29L29 28.0308C27.1875 28.2556 25.7556 29.6875 25.5308 31.5L0 31.5V32.5L25.5308 32.5Z" fill="black"/>
3
+ <path d="M26.027 32.4384L25.9726 32L26.027 31.5616C26.2236 29.9764 27.4763 28.7236 29.0616 28.527L29.5 28.4726L29.9384 28.527C31.6671 28.7414 33 30.2112 33 32C33 33.7888 31.6671 35.2586 29.9384 35.473L29.5 35.5274L29.0616 35.473C27.4764 35.2764 26.2236 34.0236 26.027 32.4384Z" stroke="black" stroke-miterlimit="8"/>
4
+ </svg>
@@ -30,17 +30,16 @@
30
30
  :color-mode="colorMode"
31
31
  :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
32
32
  :inactive-color="inactiveColor"
33
- :is-active="selectedValue == item.value"
33
+ :is-active="value == item.value"
34
34
  :primary-color="primaryColor"
35
35
  :secondary-color="secondaryColor"
36
36
  :size="size"
37
+ :width="item.width || 'auto'"
37
38
  @click="selectItem(item.value)"
38
39
  >
39
40
  <OptionIconContainer v-if="item.icon">
40
41
  <RCIcon
41
- :color="
42
- selectedValue == item.value ? primaryColor : inactiveColor
43
- "
42
+ :color="value == item.value ? primaryColor : inactiveColor"
44
43
  :name="item.icon"
45
44
  :size="item.iconSize"
46
45
  />
@@ -129,6 +128,7 @@
129
128
  secondaryColor: String,
130
129
  inactiveColor: String,
131
130
  size: String,
131
+ width: String,
132
132
  }
133
133
  const SwitchOption = styled('div', optionAttrs)`
134
134
  color: ${(props) =>
@@ -139,6 +139,8 @@
139
139
  ${(props) =>
140
140
  props.isActive ? props.secondaryColor : props.inactiveColor};
141
141
  display: flex;
142
+ width: ${({ width }) => width};
143
+ word-break: break-word;
142
144
  align-items: center;
143
145
  justify-content: center;
144
146
  flex-grow: 1;
@@ -236,20 +238,12 @@
236
238
  },
237
239
  data() {
238
240
  return {
239
- selectedValue: null,
240
241
  primaryColor: 'white',
241
242
  secondaryColor: 'black',
242
243
  inactiveColor: 'grey6',
243
244
  }
244
245
  },
245
- watch: {
246
- value(val) {
247
- this.selectedValue = val
248
- },
249
- },
250
246
  created() {
251
- this.selectedValue = this.value
252
-
253
247
  if (this.colorMode == 'dark') {
254
248
  this.primaryColor = theme.colors.black
255
249
  this.secondaryColor = theme.colors.white
@@ -265,8 +259,7 @@
265
259
  if (this.disabled) {
266
260
  return
267
261
  }
268
- this.selectedValue = value
269
- this.$emit('on-switch-change', this.selectedValue)
262
+ this.$emit('on-switch-change', value)
270
263
  },
271
264
  },
272
265
  }