@imaginario27/air-ui-ds 1.1.0 → 1.1.2

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 (6) hide show
  1. package/components/badges/IconBadge.vue +8 -8
  2. package/components/buttons/ActionButton.vue +16 -16
  3. package/components/buttons/ActionIconButton.vue +13 -13
  4. package/components/icons/ContainedIcon.vue +9 -9
  5. package/components/icons/Icon.vue +4 -6
  6. package/package.json +1 -1
package/components/badges/IconBadge.vue CHANGED
@@ -44,14 +44,14 @@ const colorClass = computed(() => {
44
44
 
45
45
  const iconColorClass = computed(() => {
46
46
  const iconVariants = {
47
- [ColorAccent.NEUTRAL]: 'text-icon-neutral-subtle-on-subtler-bg',
48
- [ColorAccent.SUCCESS]: 'text-icon-success',
49
- [ColorAccent.WARNING]: 'text-icon-warning-on-bg',
50
- [ColorAccent.DANGER]: 'text-icon-danger',
51
- [ColorAccent.INFO]: 'text-icon-info',
52
- [ColorAccent.PRIMARY_BRAND]: 'text-icon-primary-brand-default',
53
- [ColorAccent.SECONDARY_BRAND]: 'text-icon-secondary-brand-default',
47
+ [ColorAccent.NEUTRAL]: '!text-icon-neutral-subtle-on-subtler-bg',
48
+ [ColorAccent.SUCCESS]: '!text-icon-success',
49
+ [ColorAccent.WARNING]: '!text-icon-warning-on-bg',
50
+ [ColorAccent.DANGER]: '!text-icon-danger',
51
+ [ColorAccent.INFO]: '!text-icon-info',
52
+ [ColorAccent.PRIMARY_BRAND]: '!text-icon-primary-brand-default',
53
+ [ColorAccent.SECONDARY_BRAND]: '!text-icon-secondary-brand-default',
54
54
  }
55
- return iconVariants[props.color as ColorAccent] || 'text-icon-neutral-subtle-on-subtler-bg'
55
+ return iconVariants[props.color as ColorAccent] || '!text-icon-neutral-subtle-on-subtler-bg'
56
56
  })
57
57
  </script>
package/components/buttons/ActionButton.vue CHANGED
@@ -29,11 +29,11 @@
29
29
  <div class="animate-spin">
30
30
  <Icon
31
31
  name="mdi:loading"
32
- :iconClass="iconSizeClass"
32
+ :iconClass="[iconSizeClass, iconColorClass]"
33
33
  />
34
34
  </div>
35
35
 
36
- <span :class="[ 'font-semibold', textSizeClass, textClass ]">
36
+ <span :class="['font-semibold', textSizeClass, textClass]">
37
37
  {{ loadingText }}
38
38
  </span>
39
39
  </template>
@@ -53,7 +53,7 @@
53
53
  />
54
54
  </template>
55
55
 
56
- <span :class="[ 'font-semibold', textSizeClass, textClass ]">
56
+ <span :class="['font-semibold', textSizeClass, textClass]">
57
57
  {{ text }}
58
58
  </span>
59
59
 
@@ -314,20 +314,20 @@ const textSizeClass = computed(() => {
314
314
 
315
315
  const iconColorClass = computed(() => {
316
316
  const variant = {
317
- [ButtonStyleType.PRIMARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
318
- [ButtonStyleType.PRIMARY_BRAND_SOFT]: 'text-icon-primary-brand-on-soft-bg',
319
- [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: 'text-text-primary-brand-default',
320
- [ButtonStyleType.SECONDARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
321
- [ButtonStyleType.NEUTRAL_FILLED]: 'text-text-neutral-on-neutral-filled-bg',
322
- [ButtonStyleType.NEUTRAL_OUTLINED]: 'text-text-default',
323
- [ButtonStyleType.NEUTRAL_TRANSPARENT]: 'text-text-default',
324
- [ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE]: 'text-text-neutral-subtler',
325
- [ButtonStyleType.DELETE_FILLED]: 'text-text-neutral-on-filled',
326
- [ButtonStyleType.DELETE_SOFT]: 'text-text-delete',
327
- [ButtonStyleType.DELETE_OUTLINED]: 'text-text-delete',
328
- [ButtonStyleType.DELETE_TRANSPARENT]: 'text-text-delete',
317
+ [ButtonStyleType.PRIMARY_BRAND_FILLED]: '!text-text-neutral-on-filled',
318
+ [ButtonStyleType.PRIMARY_BRAND_SOFT]: '!text-icon-primary-brand-on-soft-bg',
319
+ [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: '!text-text-primary-brand-default',
320
+ [ButtonStyleType.SECONDARY_BRAND_FILLED]: '!text-text-neutral-on-filled',
321
+ [ButtonStyleType.NEUTRAL_FILLED]: '!text-text-neutral-on-neutral-filled-bg',
322
+ [ButtonStyleType.NEUTRAL_OUTLINED]: '!text-text-default',
323
+ [ButtonStyleType.NEUTRAL_TRANSPARENT]: '!text-text-default',
324
+ [ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE]: '!text-text-neutral-subtler',
325
+ [ButtonStyleType.DELETE_FILLED]: '!text-text-neutral-on-filled',
326
+ [ButtonStyleType.DELETE_SOFT]: '!text-text-delete',
327
+ [ButtonStyleType.DELETE_OUTLINED]: '!text-text-delete',
328
+ [ButtonStyleType.DELETE_TRANSPARENT]: '!text-text-delete',
329
329
  }
330
- return variant[props.styleType as ButtonStyleType] || 'text-text-default'
330
+ return variant[props.styleType as ButtonStyleType] || '!text-text-default'
331
331
  })
332
332
 
333
333
  const horizontalPaddingClass = computed(() => {
package/components/buttons/ActionIconButton.vue CHANGED
@@ -232,20 +232,20 @@ const iconSizeClass = computed(() => {
232
232
 
233
233
  const iconColorClass = computed(() => {
234
234
  const variant = {
235
- [ButtonStyleType.PRIMARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
236
- [ButtonStyleType.PRIMARY_BRAND_SOFT]: 'text-icon-primary-brand-on-soft-bg',
237
- [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: 'text-text-primary-brand-default',
238
- [ButtonStyleType.SECONDARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
239
- [ButtonStyleType.NEUTRAL_FILLED]: 'text-text-neutral-on-neutral-filled-bg',
240
- [ButtonStyleType.NEUTRAL_OUTLINED]: 'text-text-default',
241
- [ButtonStyleType.NEUTRAL_TRANSPARENT]: 'text-text-default',
242
- [ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE]: 'text-text-neutral-subtler',
243
- [ButtonStyleType.DELETE_FILLED]: 'text-text-neutral-on-filled',
244
- [ButtonStyleType.DELETE_SOFT]: 'text-text-delete',
245
- [ButtonStyleType.DELETE_OUTLINED]: 'text-text-delete',
246
- [ButtonStyleType.DELETE_TRANSPARENT]: 'text-text-delete',
235
+ [ButtonStyleType.PRIMARY_BRAND_FILLED]: '!text-text-neutral-on-filled',
236
+ [ButtonStyleType.PRIMARY_BRAND_SOFT]: '!text-icon-primary-brand-on-soft-bg',
237
+ [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: '!text-text-primary-brand-default',
238
+ [ButtonStyleType.SECONDARY_BRAND_FILLED]: '!text-text-neutral-on-filled',
239
+ [ButtonStyleType.NEUTRAL_FILLED]: '!text-text-neutral-on-neutral-filled-bg',
240
+ [ButtonStyleType.NEUTRAL_OUTLINED]: '!text-text-default',
241
+ [ButtonStyleType.NEUTRAL_TRANSPARENT]: '!text-text-default',
242
+ [ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE]: '!text-text-neutral-subtler',
243
+ [ButtonStyleType.DELETE_FILLED]: '!text-text-neutral-on-filled',
244
+ [ButtonStyleType.DELETE_SOFT]: '!text-text-delete',
245
+ [ButtonStyleType.DELETE_OUTLINED]: '!text-text-delete',
246
+ [ButtonStyleType.DELETE_TRANSPARENT]: '!text-text-delete',
247
247
  }
248
- return variant[props.styleType as ButtonStyleType] || 'text-text-default'
248
+ return variant[props.styleType as ButtonStyleType] || '!text-text-default'
249
249
  })
250
250
 
251
251
  // Props for the dynamic component
package/components/icons/ContainedIcon.vue CHANGED
@@ -94,19 +94,19 @@ const iconContainerClass = computed(() => {
94
94
  })
95
95
 
96
96
  const iconColorClass = computed(() => {
97
- if (props.styleType === IconContainerStyleType.FILLED) return 'text-icon-neutral-on-filled-bg'
97
+ if (props.styleType === IconContainerStyleType.FILLED) return '!text-icon-neutral-on-filled-bg'
98
98
 
99
99
  const iconVariants = {
100
- [ColorAccent.NEUTRAL]: 'text-icon-neutral-subtle-on-subtler-bg',
101
- [ColorAccent.SUCCESS]: 'text-icon-success',
102
- [ColorAccent.WARNING]: 'text-icon-warning-on-bg',
103
- [ColorAccent.DANGER]: 'text-icon-danger',
104
- [ColorAccent.INFO]: 'text-icon-info',
105
- [ColorAccent.PRIMARY_BRAND]: 'text-icon-primary-brand-default',
106
- [ColorAccent.SECONDARY_BRAND]: 'text-icon-secondary-brand-default',
100
+ [ColorAccent.NEUTRAL]: '!text-icon-neutral-subtle-on-subtler-bg',
101
+ [ColorAccent.SUCCESS]: '!text-icon-success',
102
+ [ColorAccent.WARNING]: '!text-icon-warning-on-bg',
103
+ [ColorAccent.DANGER]: '!text-icon-danger',
104
+ [ColorAccent.INFO]: '!text-icon-info',
105
+ [ColorAccent.PRIMARY_BRAND]: '!text-icon-primary-brand-default',
106
+ [ColorAccent.SECONDARY_BRAND]: '!text-icon-secondary-brand-default',
107
107
  }
108
- return iconVariants[props.color as ColorAccent] || 'text-icon-neutral-subtle-on-subtler-bg'
109
108
 
109
+ return iconVariants[props.color as ColorAccent] || '!text-icon-neutral-subtle-on-subtler-bg'
110
110
  })
111
111
 
112
112
  const iconContainerSizeClass = computed(() => {
package/components/icons/Icon.vue CHANGED
@@ -27,11 +27,7 @@ const props = defineProps({
27
27
  default: IconSize.MD,
28
28
  validator: (value: IconSize) => Object.values(IconSize).includes(value),
29
29
  },
30
- color: {
31
- type: String as PropType<ColorAccent>,
32
- default: ColorAccent.NEUTRAL,
33
- validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
34
- },
30
+ color: String as PropType<ColorAccent>,
35
31
  svgCustomize: Function as PropType<CollectionCustomizeCallback>,
36
32
  iconClass: [String, Array] as PropType<string | string[]>,
37
33
  })
@@ -58,6 +54,8 @@ const iconSizeClass = computed(() => {
58
54
  })
59
55
 
60
56
  const iconColorClass = computed(() => {
57
+ if (!props.color) return 'text-inherit'
58
+
61
59
  const variants = {
62
60
  [ColorAccent.NEUTRAL]: 'text-icon-default',
63
61
  [ColorAccent.SUCCESS]: 'text-icon-success',
@@ -68,6 +66,6 @@ const iconColorClass = computed(() => {
68
66
  [ColorAccent.SECONDARY_BRAND]: 'text-icon-secondary-brand-default',
69
67
  }
70
68
 
71
- return variants[props.color as ColorAccent] || 'text-icon-default'
69
+ return variants[props.color] || 'text-inherit'
72
70
  })
73
71
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@imaginario27/air-ui-ds",
3
- "version": "1.1.0",
3
+ "version": "1.1.2",
4
4
  "author": "imaginario27",
5
5
  "type": "module",
6
6
  "homepage": "https://air-ui.netlify.app/",