@designcrowd/fe-shared-lib 1.2.3-ast-disabled-1 → 1.2.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.
- package/{public → dist}/css/tailwind-brandCrowd.css +592 -510
- package/{public → dist}/css/tailwind-brandPage.css +512 -434
- package/{public → dist}/css/tailwind-crazyDomains.css +592 -510
- package/{public → dist}/css/tailwind-designCom.css +592 -510
- package/{public → dist}/css/tailwind-designCrowd.css +592 -510
- package/package.json +1 -1
- package/src/atoms/components/ButtonGroup/ButtonGroup.stories.js +0 -1
- package/src/atoms/components/ButtonGroup/ButtonGroup.vue +12 -24
package/package.json
CHANGED
|
@@ -10,14 +10,11 @@
|
|
|
10
10
|
<button
|
|
11
11
|
class="button-group-item tw-text-xs tw-shadow-inner tw-w-full tw-py-2"
|
|
12
12
|
:class="{
|
|
13
|
-
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected
|
|
14
|
-
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected
|
|
15
|
-
'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
|
|
16
|
-
'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
|
|
13
|
+
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
|
|
14
|
+
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
|
|
17
15
|
}"
|
|
18
|
-
:disabled="option.disabled"
|
|
19
16
|
v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
|
|
20
|
-
@click="
|
|
17
|
+
@click="$emit('on-select', option)"
|
|
21
18
|
>
|
|
22
19
|
<slot name="content" :option="option"></slot>
|
|
23
20
|
</button>
|
|
@@ -38,10 +35,8 @@
|
|
|
38
35
|
<button
|
|
39
36
|
v-if="variant === 'icon'"
|
|
40
37
|
:class="{
|
|
41
|
-
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected
|
|
42
|
-
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected
|
|
43
|
-
'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
|
|
44
|
-
'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
|
|
38
|
+
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
|
|
39
|
+
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
|
|
45
40
|
'tw-px-2': !option.iconViewBox,
|
|
46
41
|
'tw-px-px':
|
|
47
42
|
option.iconViewBox && !option.isSelected && !option.iconName.includes('display-style') && btnStyleVariant, // TODO - move style logic to computed prop
|
|
@@ -50,10 +45,9 @@
|
|
|
50
45
|
'tw-px-0 tw-py-0': option.iconName.includes('display-style') || btnStyleVariant === 'compressed',
|
|
51
46
|
}"
|
|
52
47
|
:style="option.iconName.includes('display-style') ? { lineHeight: 0 } : {}"
|
|
53
|
-
:disabled="option.disabled"
|
|
54
48
|
class="tw-text-xs button-group-icon-button tw-shadow-inner"
|
|
55
49
|
v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
|
|
56
|
-
@click="
|
|
50
|
+
@click="$emit('on-select', option)"
|
|
57
51
|
>
|
|
58
52
|
<div
|
|
59
53
|
:class="{
|
|
@@ -73,15 +67,12 @@
|
|
|
73
67
|
<button
|
|
74
68
|
v-else
|
|
75
69
|
:class="{
|
|
76
|
-
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected
|
|
77
|
-
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected
|
|
78
|
-
'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
|
|
79
|
-
'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
|
|
70
|
+
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
|
|
71
|
+
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
|
|
80
72
|
}"
|
|
81
|
-
:disabled="option.disabled"
|
|
82
73
|
class="tw-text-xs button-group-image-button tw-shadow-inner"
|
|
83
74
|
v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
|
|
84
|
-
@click="
|
|
75
|
+
@click="$emit('on-select', option)"
|
|
85
76
|
>
|
|
86
77
|
<img :src="option.src" :alt="option.alt" class="tw-w-full tw-h-full" />
|
|
87
78
|
</button>
|
|
@@ -99,14 +90,11 @@
|
|
|
99
90
|
:key="`button-${option.value}`"
|
|
100
91
|
:class="{
|
|
101
92
|
'tw-ml-2': idx > 0 && !columns,
|
|
102
|
-
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected
|
|
103
|
-
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected
|
|
104
|
-
'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
|
|
105
|
-
'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
|
|
93
|
+
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
|
|
94
|
+
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
|
|
106
95
|
}"
|
|
107
|
-
:disabled="option.disabled"
|
|
108
96
|
class="tw-text-xs button-group-button tw-shadow-inner"
|
|
109
|
-
@click="
|
|
97
|
+
@click="$emit('on-select', option)"
|
|
110
98
|
>
|
|
111
99
|
{{ option.label }}
|
|
112
100
|
</button>
|