@redseed/redseed-ui-vue3 8.54.0 → 8.55.0
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 +1 -1
- package/src/components/Pill/Pill.vue +34 -0
package/package.json
CHANGED
|
@@ -24,10 +24,43 @@ const props = defineProps({
|
|
|
24
24
|
type: String,
|
|
25
25
|
default: '',
|
|
26
26
|
},
|
|
27
|
+
// Size ramp (dimensions from the RDS Refresh Figma). Booleans, only one
|
|
28
|
+
// applies at a time — matches the RSUI size-prop convention. Defaults to md.
|
|
29
|
+
xs: {
|
|
30
|
+
type: Boolean,
|
|
31
|
+
default: false,
|
|
32
|
+
},
|
|
33
|
+
sm: {
|
|
34
|
+
type: Boolean,
|
|
35
|
+
default: false,
|
|
36
|
+
},
|
|
37
|
+
md: {
|
|
38
|
+
type: Boolean,
|
|
39
|
+
default: false,
|
|
40
|
+
},
|
|
41
|
+
lg: {
|
|
42
|
+
type: Boolean,
|
|
43
|
+
default: false,
|
|
44
|
+
},
|
|
45
|
+
xl: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
default: false,
|
|
48
|
+
},
|
|
27
49
|
})
|
|
28
50
|
|
|
29
51
|
const emit = defineEmits(['click'])
|
|
30
52
|
|
|
53
|
+
// Resolve the single active size. Largest flag wins so a consumer passing more
|
|
54
|
+
// than one still gets a defined result, and an unsized pill defaults to md.
|
|
55
|
+
const activeSize = computed(() => {
|
|
56
|
+
if (props.xl) return 'xl'
|
|
57
|
+
if (props.lg) return 'lg'
|
|
58
|
+
if (props.md) return 'md'
|
|
59
|
+
if (props.sm) return 'sm'
|
|
60
|
+
if (props.xs) return 'xs'
|
|
61
|
+
return 'md'
|
|
62
|
+
})
|
|
63
|
+
|
|
31
64
|
// The single accent token colours both the icon badge and the selected
|
|
32
65
|
// treatment. When no color is supplied we leave the property unset so the CSS
|
|
33
66
|
// neutral fallback applies. When a color IS supplied it carries an inline
|
|
@@ -43,6 +76,7 @@ const accentStyle = computed(() =>
|
|
|
43
76
|
|
|
44
77
|
const pillClass = computed(() => [
|
|
45
78
|
'rsui-pill',
|
|
79
|
+
`rsui-pill--${activeSize.value}`,
|
|
46
80
|
{
|
|
47
81
|
'rsui-pill--selected': props.selected && !props.disabled,
|
|
48
82
|
'rsui-pill--disabled': props.disabled,
|