@citizenplane/pimp 18.0.2 → 18.0.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/dist/components/CpMenuItem.vue.d.ts +1 -0
- package/dist/components/CpMenuItem.vue.d.ts.map +1 -1
- package/dist/pimp.es.js +16 -15
- package/dist/pimp.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/CpMenuItem.vue +7 -1
- package/src/stories/CpMenuItem.stories.ts +4 -0
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<cp-icon :aria-label="ariaLabel" class="cpMenuItem__icon" size="16" :type="leadingIcon" />
|
|
16
16
|
</slot>
|
|
17
17
|
</transition>
|
|
18
|
-
<span v-if="
|
|
18
|
+
<span v-if="hasLabel" v-tooltip="tooltip" class="cpMenuItem__label">{{ label }}</span>
|
|
19
19
|
<slot v-if="hasTrailingIcon" name="trailing-icon">
|
|
20
20
|
<cp-icon :aria-label="ariaLabel" class="cpMenuItem__icon" size="16" :type="trailingIcon" />
|
|
21
21
|
</slot>
|
|
@@ -29,6 +29,7 @@ import { computed, useSlots } from 'vue'
|
|
|
29
29
|
import type { MenuItem } from 'primevue/menuitem'
|
|
30
30
|
|
|
31
31
|
interface Props {
|
|
32
|
+
hideLabel?: boolean
|
|
32
33
|
isAsync?: boolean
|
|
33
34
|
isCritical?: boolean
|
|
34
35
|
isLoading?: boolean
|
|
@@ -60,6 +61,7 @@ const dynamicClass = computed(() => ({
|
|
|
60
61
|
const disabled = computed(() => props.isLoading || props.disabled)
|
|
61
62
|
const hasLeadingIcon = computed(() => !!props.leadingIcon || !!slots['leading-icon'])
|
|
62
63
|
const hasTrailingIcon = computed(() => !!props.trailingIcon || !!slots['trailing-icon'])
|
|
64
|
+
const hasLabel = computed(() => (!!props.label || !!slots['label']) && !props.hideLabel)
|
|
63
65
|
const ariaLabel = computed(() => (props.hideLabel ? props.label : undefined))
|
|
64
66
|
|
|
65
67
|
const handleItemClick = async (event: Event) => {
|
|
@@ -140,5 +142,9 @@ const handleItemClick = async (event: Event) => {
|
|
|
140
142
|
align-items: center;
|
|
141
143
|
justify-content: center;
|
|
142
144
|
}
|
|
145
|
+
|
|
146
|
+
&__icon {
|
|
147
|
+
padding: var(--cp-spacing-xs);
|
|
148
|
+
}
|
|
143
149
|
}
|
|
144
150
|
</style>
|
|
@@ -61,6 +61,10 @@ const meta = {
|
|
|
61
61
|
control: 'boolean',
|
|
62
62
|
description: 'Disable interactions and apply a muted style.',
|
|
63
63
|
},
|
|
64
|
+
hideLabel: {
|
|
65
|
+
control: 'boolean',
|
|
66
|
+
description: 'Hide the label and only show the leading and trailing icons.',
|
|
67
|
+
},
|
|
64
68
|
},
|
|
65
69
|
decorators: [
|
|
66
70
|
() => ({
|