@redseed/redseed-ui-vue3 1.5.5 → 1.5.6
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/index.js
CHANGED
|
@@ -15,6 +15,8 @@ import ButtonTertiary from './src/components/Button/ButtonTertiary.vue'
|
|
|
15
15
|
import ButtonTertiaryFull from './src/components/Button/ButtonTertiaryFull.vue'
|
|
16
16
|
import ButtonTertiaryFullRounded from './src/components/Button/ButtonTertiaryFullRounded.vue'
|
|
17
17
|
import ButtonTertiaryRounded from './src/components/Button/ButtonTertiaryRounded.vue'
|
|
18
|
+
import ButtonGroup from './src/components/ButtonGroup/ButtonGroup.vue'
|
|
19
|
+
import ButtonGroupItem from './src/components/ButtonGroup/ButtonGroupItem.vue'
|
|
18
20
|
import Card from './src/components/Card/Card.vue'
|
|
19
21
|
import DropdownMenu from './src/components/DropdownMenu/DropdownMenu.vue'
|
|
20
22
|
import DropdownOption from './src/components/DropdownMenu/DropdownOption.vue'
|
|
@@ -49,7 +51,9 @@ export {
|
|
|
49
51
|
ButtonDanger,
|
|
50
52
|
ButtonDangerFull,
|
|
51
53
|
ButtonDangerFullRounded,
|
|
52
|
-
ButtonDangerRounded,
|
|
54
|
+
ButtonDangerRounded,
|
|
55
|
+
ButtonGroup,
|
|
56
|
+
ButtonSlot,
|
|
53
57
|
ButtonPrimary,
|
|
54
58
|
ButtonPrimaryFull,
|
|
55
59
|
ButtonPrimaryFullRounded,
|
|
@@ -58,7 +62,7 @@ export {
|
|
|
58
62
|
ButtonSecondaryFull,
|
|
59
63
|
ButtonSecondaryFullRounded,
|
|
60
64
|
ButtonSecondaryRounded,
|
|
61
|
-
|
|
65
|
+
ButtonGroupItem,
|
|
62
66
|
ButtonTertiary,
|
|
63
67
|
ButtonTertiaryFull,
|
|
64
68
|
ButtonTertiaryFullRounded,
|
package/package.json
CHANGED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed } from 'vue'
|
|
3
|
+
|
|
4
|
+
defineOptions({
|
|
5
|
+
inheritAttrs: false,
|
|
6
|
+
})
|
|
7
|
+
|
|
8
|
+
const props = defineProps({
|
|
9
|
+
sm: {
|
|
10
|
+
type: Boolean,
|
|
11
|
+
default: false,
|
|
12
|
+
},
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
const buttonClass = computed(() => [
|
|
16
|
+
'button-group',
|
|
17
|
+
{
|
|
18
|
+
'button-group--sm' : props.sm,
|
|
19
|
+
}
|
|
20
|
+
])
|
|
21
|
+
|
|
22
|
+
</script>
|
|
23
|
+
<template>
|
|
24
|
+
<div :class="buttonClass">
|
|
25
|
+
<slot></slot>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
<style lang="scss">
|
|
29
|
+
.button-group {
|
|
30
|
+
@apply whitespace-nowrap;
|
|
31
|
+
&--sm {
|
|
32
|
+
.button-group-item {
|
|
33
|
+
@apply text-xs px-2.5 py-1.5;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
</style>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed, useSlots } from 'vue'
|
|
3
|
+
|
|
4
|
+
defineEmits(['click'])
|
|
5
|
+
|
|
6
|
+
const slots = useSlots()
|
|
7
|
+
|
|
8
|
+
const props = defineProps({
|
|
9
|
+
selected: {
|
|
10
|
+
type: Boolean,
|
|
11
|
+
default: false,
|
|
12
|
+
},
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
const buttonClass = computed(() => [
|
|
16
|
+
'button-group-item',
|
|
17
|
+
{
|
|
18
|
+
'button-group-item--selected' : props.selected,
|
|
19
|
+
'button-group-item--icon': slots.icon,
|
|
20
|
+
}
|
|
21
|
+
])
|
|
22
|
+
</script>
|
|
23
|
+
<template>
|
|
24
|
+
<button
|
|
25
|
+
:class="buttonClass"
|
|
26
|
+
v-bind="$attrs"
|
|
27
|
+
@click="$emit('click', $event)"
|
|
28
|
+
>
|
|
29
|
+
<span v-if="$slots.icon" class="button-group-item__icon">
|
|
30
|
+
<slot name="icon"></slot>
|
|
31
|
+
</span>
|
|
32
|
+
<span v-else class="button-group-item__label">
|
|
33
|
+
<slot></slot>
|
|
34
|
+
</span>
|
|
35
|
+
</button>
|
|
36
|
+
</template>
|
|
37
|
+
<style lang="scss" scoped>
|
|
38
|
+
.button-group-item {
|
|
39
|
+
// default shape and control
|
|
40
|
+
@apply inline-flex justify-center items-center select-none outline-none p-2 font-semibold text-sm transition first:rounded-l first:border-l last:rounded-r last:border-r;
|
|
41
|
+
// default colors
|
|
42
|
+
@apply bg-white border-r text-default-black ring-tertiary border-y border-tertiary ;
|
|
43
|
+
// default hover state
|
|
44
|
+
@apply hover:border-tertiary hover:bg-tertiary/10 hover:text-default-black;
|
|
45
|
+
// default focus state unapplied
|
|
46
|
+
// @apply focus-visible:border-tertiary focus-visible:text-tertiary focus-visible:ring-4 focus-visible:outline-none focus-visible:ring-gray-100 focus-visible:z-10 relative;
|
|
47
|
+
// default active/pressed state
|
|
48
|
+
@apply active:ring-0 active:bg-tertiary-dark/10 active:text-default-black;
|
|
49
|
+
// default disabled state
|
|
50
|
+
@apply disabled:text-tertiary-dark/10;
|
|
51
|
+
:deep(svg) {
|
|
52
|
+
@apply size-5;
|
|
53
|
+
}
|
|
54
|
+
&__icon {
|
|
55
|
+
@apply size-6 inline-flex justify-center items-center;
|
|
56
|
+
:deep(svg) {
|
|
57
|
+
@apply size-6;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
&__label {
|
|
61
|
+
@apply gap-x-2 px-1 inline-flex;
|
|
62
|
+
}
|
|
63
|
+
&--selected {
|
|
64
|
+
@apply bg-tertiary-dark/20 hover:bg-tertiary-dark/20 cursor-default;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
.button-group--sm {
|
|
68
|
+
.button-group-item--icon {
|
|
69
|
+
@apply p-1 ;
|
|
70
|
+
:deep(svg) {
|
|
71
|
+
@apply size-4;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
</style>
|