@designcrowd/fe-shared-lib 1.1.9 → 1.1.10-ast-btn-group

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 (9) hide show
  1. package/package.json +1 -1
  2. package/{dist → public}/css/tailwind-brandCrowd.css +508 -589
  3. package/{dist → public}/css/tailwind-brandPage.css +432 -513
  4. package/{dist → public}/css/tailwind-crazyDomains.css +508 -589
  5. package/{dist → public}/css/tailwind-designCom.css +508 -589
  6. package/{dist → public}/css/tailwind-designCrowd.css +508 -589
  7. package/src/atoms/components/Button/variants/ButtonAi.vue +2 -2
  8. package/src/atoms/components/ButtonGroup/ButtonGroup.vue +44 -12
  9. package/src/atoms/components/Dropdown/Dropdown.stories.js +5 -5
package/src/atoms/components/Button/variants/ButtonAi.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <button
3
3
  v-if="!url"
4
4
  style="box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;"
5
- class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-rounded-xl tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
5
+ class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
6
6
  :class="[
7
7
  classes,
8
8
  {
@@ -25,7 +25,7 @@
25
25
  <a
26
26
  v-else
27
27
  :href="computedUrl"
28
- class="tw-font-sans tw-inline-flex tw-justify-center tw-rounded-xl tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
28
+ class="tw-font-sans tw-inline-flex tw-justify-center tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
29
29
  :class="[
30
30
  commonUrlButtonClasses,
31
31
  classes,
package/src/atoms/components/ButtonGroup/ButtonGroup.vue CHANGED
@@ -10,11 +10,14 @@
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 hover:!tw-shadow-info-500': !option.isSelected,
13
+ '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
14
+ '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
15
+ 'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
16
+ 'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-secondary-200': option.disabled,
15
17
  }"
18
+ :disabled="option.disabled"
16
19
  v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
17
- @click="$emit('on-select', option)"
20
+ @click="!option.disabled && $emit('on-select', option)"
18
21
  >
19
22
  <slot name="content" :option="option"></slot>
20
23
  </button>
@@ -35,8 +38,10 @@
35
38
  <button
36
39
  v-if="variant === 'icon'"
37
40
  :class="{
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,
41
+ '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
42
+ '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
43
+ 'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
44
+ 'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-secondary-200': option.disabled,
40
45
  'tw-px-2': !option.iconViewBox,
41
46
  'tw-px-px':
42
47
  option.iconViewBox && !option.isSelected && !option.iconName.includes('display-style') && btnStyleVariant, // TODO - move style logic to computed prop
@@ -45,9 +50,10 @@
45
50
  'tw-px-0 tw-py-0': option.iconName.includes('display-style') || btnStyleVariant === 'compressed',
46
51
  }"
47
52
  :style="option.iconName.includes('display-style') ? { lineHeight: 0 } : {}"
53
+ :disabled="option.disabled"
48
54
  class="tw-text-xs button-group-icon-button tw-shadow-inner"
49
55
  v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
50
- @click="$emit('on-select', option)"
56
+ @click="!option.disabled && $emit('on-select', option)"
51
57
  >
52
58
  <div
53
59
  :class="{
@@ -67,12 +73,15 @@
67
73
  <button
68
74
  v-else
69
75
  :class="{
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,
76
+ '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
77
+ '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
78
+ 'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
79
+ 'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-secondary-200': option.disabled,
72
80
  }"
81
+ :disabled="option.disabled"
73
82
  class="tw-text-xs button-group-image-button tw-shadow-inner"
74
83
  v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
75
- @click="$emit('on-select', option)"
84
+ @click="!option.disabled && $emit('on-select', option)"
76
85
  >
77
86
  <img :src="option.src" :alt="option.alt" class="tw-w-full tw-h-full" />
78
87
  </button>
@@ -90,11 +99,14 @@
90
99
  :key="`button-${option.value}`"
91
100
  :class="{
92
101
  'tw-ml-2': idx > 0 && !columns,
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,
102
+ '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
103
+ '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
104
+ 'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
105
+ 'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-secondary-200': option.disabled,
95
106
  }"
107
+ :disabled="option.disabled"
96
108
  class="tw-text-xs button-group-button tw-shadow-inner"
97
- @click="$emit('on-select', option)"
109
+ @click="!option.disabled && $emit('on-select', option)"
98
110
  >
99
111
  {{ option.label }}
100
112
  </button>
@@ -185,4 +197,24 @@ export default {
185
197
  .button-group-button {
186
198
  @apply button-group-item tw-w-full tw-p-3;
187
199
  }
200
+
201
+ .button-group-item:disabled {
202
+ @apply tw-cursor-not-allowed tw-opacity-50;
203
+ }
204
+
205
+ .button-group-item:disabled:hover {
206
+ @apply !tw-shadow-secondary-200;
207
+ }
208
+
209
+ /* Ensure disabled state overrides hover effects */
210
+ .button-group-item:disabled {
211
+ cursor: not-allowed !important;
212
+ opacity: 0.5 !important;
213
+ pointer-events: auto !important; /* Keep pointer events for cursor display */
214
+ }
215
+
216
+ .button-group-item:disabled:hover {
217
+ box-shadow: 0 0 0 1px rgb(var(--color-secondary-200)) !important;
218
+ cursor: not-allowed !important;
219
+ }
188
220
  </style>
package/src/atoms/components/Dropdown/Dropdown.stories.js CHANGED
@@ -18,11 +18,11 @@ export const Sample = () => {
18
18
  data() {
19
19
  return {
20
20
  show: true,
21
- }
21
+ };
22
22
  },
23
23
  template: `
24
24
  <div class="tw-font-sans tw-w-1/4">
25
- <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible">
25
+ <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible" menu-element-classes="tw-w-full">
26
26
  <DropdownItem @click="() => show = false">
27
27
  <span class="tw-grow">Menu item 1</span>
28
28
  <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
@@ -45,7 +45,7 @@ export const Disabled = () => {
45
45
  },
46
46
  template: `
47
47
  <div class="tw-font-sans tw-w-1/4">
48
- <Dropdown menu-align="right" disabled>
48
+ <Dropdown menu-align="right" disabled menu-element-classes="tw-w-full">
49
49
  <DropdownItem>
50
50
  <span>Menu item 1</span>
51
51
  </DropdownItem>
@@ -67,7 +67,7 @@ export const LongListFixedHeight = () => {
67
67
  },
68
68
  template: `
69
69
  <div class="tw-font-sans tw-w-1/4">
70
- <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto">
70
+ <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto tw-w-full">
71
71
  <DropdownItem v-for="(item, i) in items" :key="i">
72
72
  <span class="tw-grow">{{ item.display }}</span>
73
73
  </DropdownItem>
@@ -123,7 +123,7 @@ export const SampleElementClasses = () => {
123
123
  },
124
124
  template: `
125
125
  <div class="tw-flex tw-gap-2 tw-m-4">
126
- <Dropdown menu-align="right" element-classes="tw-h-12">
126
+ <Dropdown menu-align="right" element-classes="tw-h-12" menu-element-classes="tw-w-full">
127
127
  <DropdownItem>
128
128
  <span class="tw-grow">Menu item 1</span>
129
129
  <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>