@kiva/kv-components 3.98.1 → 3.99.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.
Files changed (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +2 -2
  3. package/vue/KvSideSheet.vue +134 -0
  4. package/vue/stories/KvSideSheet.stories.js +50 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.99.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.98.1...@kiva/kv-components@3.99.0) (2024-09-04)
7
+
8
+
9
+ ### Features
10
+
11
+ * desktop side sheet component added to library ([#454](https://github.com/kiva/kv-ui-elements/issues/454)) ([5f140cb](https://github.com/kiva/kv-ui-elements/commit/5f140cbf2a05833e2c08bdf9dadb7ce9cbdb7194))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [3.98.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.98.0...@kiva/kv-components@3.98.1) (2024-09-04)
7
18
 
8
19
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "3.98.1",
3
+ "version": "3.99.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -84,5 +84,5 @@
84
84
  "optional": true
85
85
  }
86
86
  },
87
- "gitHead": "b2fd2967b6606a846281d8dde50fae68cf9c0f01"
87
+ "gitHead": "f2d768ca09529b6560cd468c5ae19a9046d1cbf1"
88
88
  }
package/vue/KvSideSheet.vue ADDED
@@ -0,0 +1,134 @@
1
+ <template>
2
+ <div
3
+ v-if="visible"
4
+ class="tw-hidden lg:tw-block tw-fixed tw-inset-0
5
+ tw-bg-black tw-transition-all tw-duration-150 tw-z-modal tw-mt-8"
6
+ :class="{
7
+ 'tw-bg-opacity-0 tw-delay-300': !open,
8
+ 'tw-bg-opacity-low': open,
9
+ }"
10
+ @click.self="closeSideSheet"
11
+ >
12
+ <div
13
+ class="tw-absolute tw-right-0 tw-h-full tw-transition-all tw-duration-300 tw-bg-white"
14
+ :class="{
15
+ 'tw-w-0 tw-p-0 tw-delay-200': !open,
16
+ 'tw-w-1/2 tw-p-2': open,
17
+ }"
18
+ >
19
+ <div class="tw-flex tw-justify-between">
20
+ <button
21
+ class="hover:tw-text-action-highlight"
22
+ @click="closeSideSheet"
23
+ >
24
+ <kv-material-icon
25
+ class="tw-w-3 tw-h-3"
26
+ :icon="mdiClose"
27
+ />
28
+ </button>
29
+
30
+ <button
31
+ v-if="showGoToLink"
32
+ class="hover:tw-text-action-highlight"
33
+ @click="goToLink"
34
+ >
35
+ <kv-material-icon
36
+ class="tw-w-3 tw-h-3"
37
+ :icon="mdiLaunch"
38
+ />
39
+ </button>
40
+ </div>
41
+ <div
42
+ class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200"
43
+ :class="{
44
+ 'tw-opacity-0': !open,
45
+ 'tw-opacity-full': open,
46
+ }"
47
+ >
48
+ <slot></slot>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </template>
53
+
54
+ <script>
55
+ import { ref, toRefs, watch } from 'vue-demi';
56
+ import { mdiClose, mdiLaunch } from '@mdi/js';
57
+ import KvMaterialIcon from './KvMaterialIcon.vue';
58
+
59
+ export default {
60
+ components: {
61
+ KvMaterialIcon,
62
+ },
63
+ props: {
64
+ /**
65
+ * Whether the side sheet is open or not
66
+ * */
67
+ visible: {
68
+ type: Boolean,
69
+ default: false,
70
+ },
71
+ /**
72
+ * Show the go to link button
73
+ * */
74
+ showGoToLink: {
75
+ type: Boolean,
76
+ default: false,
77
+ },
78
+ /**
79
+ * Tracking event function
80
+ * */
81
+ kvTrackFunction: {
82
+ type: Function,
83
+ default: () => ({}),
84
+ },
85
+ /**
86
+ * Tracking event category
87
+ * */
88
+ trackEventCategory: {
89
+ type: String,
90
+ default: '',
91
+ },
92
+ },
93
+ emits: [
94
+ 'side-sheet-closed',
95
+ ],
96
+ setup(props, { emit }) {
97
+ const {
98
+ visible,
99
+ kvTrackFunction,
100
+ trackEventCategory,
101
+ } = toRefs(props);
102
+
103
+ const open = ref(false);
104
+
105
+ const closeSideSheet = () => {
106
+ open.value = false;
107
+ kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
108
+ setTimeout(() => {
109
+ emit('side-sheet-closed');
110
+ }, '700');
111
+ };
112
+
113
+ const goToLink = () => {
114
+ emit('go-to-link');
115
+ };
116
+
117
+ watch(visible, () => {
118
+ if (visible.value) {
119
+ setTimeout(() => {
120
+ open.value = true;
121
+ }, '300');
122
+ }
123
+ });
124
+
125
+ return {
126
+ mdiClose,
127
+ mdiLaunch,
128
+ open,
129
+ closeSideSheet,
130
+ goToLink,
131
+ };
132
+ },
133
+ };
134
+ </script>
package/vue/stories/KvSideSheet.stories.js ADDED
@@ -0,0 +1,50 @@
1
+ import KvSideSheet from '../KvSideSheet.vue';
2
+ import KvButton from '../KvButton.vue';
3
+
4
+ export default {
5
+ title: 'KvSideSheet',
6
+ component: KvSideSheet,
7
+ };
8
+
9
+ const Template = (args, {
10
+ argTypes,
11
+ }) => ({
12
+ props: Object.keys(argTypes),
13
+ components: {
14
+ KvSideSheet,
15
+ KvButton,
16
+ },
17
+ template: `
18
+ <div>
19
+ <kv-button @click="isVisible = true">Show Side Sheet</kv-button>
20
+ <kv-side-sheet
21
+ :visible="isVisible"
22
+ :kv-track-function="kvTrackMock"
23
+ track-event-category="new-loan-card"
24
+ :show-go-to-link="true"
25
+ @side-sheet-closed="isVisible = false"
26
+ >
27
+ <div>
28
+ Some content
29
+ </div>
30
+ </kv-side-sheet>
31
+ </div>`,
32
+ data() {
33
+ return {
34
+ isVisible: args.visible,
35
+ };
36
+ },
37
+ methods: {
38
+ kvTrackMock(
39
+ category,
40
+ action,
41
+ label,
42
+ property,
43
+ value,
44
+ ) {
45
+ console.log(category, action, label, property, value);
46
+ },
47
+ },
48
+ });
49
+
50
+ export const Default = Template.bind({});