@kiva/kv-components 3.75.2 → 3.76.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/CHANGELOG.md +19 -0
- package/package.json +2 -2
- package/vue/KvChip.vue +54 -0
- package/vue/stories/KvChip.stories.js +43 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [3.76.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.75.2...@kiva/kv-components@3.76.0) (2024-05-02)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* removal of unnecessary classes, v-if, and added slot tag ([dd46624](https://github.com/kiva/kv-ui-elements/commit/dd46624bde0f99f3889d11cc0c68bf5b0eeab182))
|
|
12
|
+
* style classes -> Tailwinds classes ([920e364](https://github.com/kiva/kv-ui-elements/commit/920e364749d47a8e73770a3c43eb5c3e1a36df1d))
|
|
13
|
+
* tags within storybook component, also font for title ([23e6c0d](https://github.com/kiva/kv-ui-elements/commit/23e6c0d7c50d6c097960553356740aa10c9ffff2))
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### Features
|
|
17
|
+
|
|
18
|
+
* newly created global chip component [CIT-1429] ([82cb335](https://github.com/kiva/kv-ui-elements/commit/82cb33538cadbc0c817501df70e36a37c21d5dd8))
|
|
19
|
+
* scss section removal, additional stories, new props + setup ([c7000d7](https://github.com/kiva/kv-ui-elements/commit/c7000d7f4d0e4446b40de0840805079aa863473a))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [3.75.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.75.1...@kiva/kv-components@3.75.2) (2024-04-29)
|
|
7
26
|
|
|
8
27
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.76.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"optional": true
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "ce82b62dfa049f7d87108079164dea930b193bb7"
|
|
79
79
|
}
|
package/vue/KvChip.vue
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="tw-inline-flex">
|
|
3
|
+
<button
|
|
4
|
+
class="
|
|
5
|
+
tw-bg-secondary
|
|
6
|
+
hover:tw-bg-tertiary
|
|
7
|
+
tw-items-center
|
|
8
|
+
tw-flex
|
|
9
|
+
tw-flex-row
|
|
10
|
+
tw-cursor-pointer
|
|
11
|
+
tw-whitespace-nowrap
|
|
12
|
+
tw-rounded
|
|
13
|
+
tw-h-2
|
|
14
|
+
tw-py-2
|
|
15
|
+
tw-px-2
|
|
16
|
+
tw-select-none
|
|
17
|
+
"
|
|
18
|
+
@click="handleClick"
|
|
19
|
+
>
|
|
20
|
+
<div
|
|
21
|
+
class="tw-text-base tw-pr-1"
|
|
22
|
+
>
|
|
23
|
+
<slot></slot>
|
|
24
|
+
</div>
|
|
25
|
+
<kv-material-icon
|
|
26
|
+
:icon="mdiClose"
|
|
27
|
+
class="tw-w-2 tw-h-2"
|
|
28
|
+
:from-sprite="true"
|
|
29
|
+
/>
|
|
30
|
+
</button>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
<script>
|
|
34
|
+
import { mdiClose } from '@mdi/js';
|
|
35
|
+
import KvMaterialIcon from './KvMaterialIcon.vue';
|
|
36
|
+
|
|
37
|
+
export default {
|
|
38
|
+
name: 'KvChip',
|
|
39
|
+
components: { KvMaterialIcon },
|
|
40
|
+
emits: [
|
|
41
|
+
'click-chip',
|
|
42
|
+
],
|
|
43
|
+
setup() {
|
|
44
|
+
return {
|
|
45
|
+
mdiClose,
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
methods: {
|
|
49
|
+
handleClick() {
|
|
50
|
+
this.$emit('click-chip');
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
};
|
|
54
|
+
</script>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import KvChip from '../KvChip.vue';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'KvChip',
|
|
5
|
+
component: KvChip,
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
const story = (args) => {
|
|
9
|
+
const template = (_args, { argTypes }) => ({
|
|
10
|
+
props: Object.keys(argTypes),
|
|
11
|
+
components: { KvChip },
|
|
12
|
+
template: `
|
|
13
|
+
<kv-chip
|
|
14
|
+
>
|
|
15
|
+
<p> Chip Title </p>
|
|
16
|
+
</kv-chip>
|
|
17
|
+
`,
|
|
18
|
+
});
|
|
19
|
+
template.args = args;
|
|
20
|
+
return template;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export const Default = story();
|
|
24
|
+
export const LongChipTitle = (args, { argTypes }) => ({
|
|
25
|
+
props: Object.keys(argTypes),
|
|
26
|
+
components: { KvChip },
|
|
27
|
+
template: `
|
|
28
|
+
<kv-chip
|
|
29
|
+
>
|
|
30
|
+
<p> Longer Chip Title </p>
|
|
31
|
+
</kv-chip>
|
|
32
|
+
`,
|
|
33
|
+
});
|
|
34
|
+
export const EmailAddress = (args, { argTypes }) => ({
|
|
35
|
+
props: Object.keys(argTypes),
|
|
36
|
+
components: { KvChip },
|
|
37
|
+
template: `
|
|
38
|
+
<kv-chip
|
|
39
|
+
>
|
|
40
|
+
<h4> @BankofAmerica.com </h4>
|
|
41
|
+
</kv-chip>
|
|
42
|
+
`,
|
|
43
|
+
});
|