@kiva/kv-components 3.1.0 → 3.3.1

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 (6) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/package.json +2 -2
  3. package/vue/KvLightbox.vue +4 -4
  4. package/vue/KvLoadingPlaceholder.vue +38 -0
  5. package/vue/KvTextInput.vue +1 -0
  6. package/vue/stories/KvLoadingPlaceholder.stories.js +17 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,52 @@
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.3.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.3.0...@kiva/kv-components@3.3.1) (2022-08-26)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * ensure ref is defined in exported methods ([3ab00ea](https://github.com/kiva/kv-ui-elements/commit/3ab00ea181ee2455925c2f8f01950b79c2ea7b09))
12
+
13
+
14
+
15
+
16
+
17
+ # [3.3.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.2.0...@kiva/kv-components@3.3.0) (2022-08-10)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * added class to placeholder story to show support ([ed4e6c9](https://github.com/kiva/kv-ui-elements/commit/ed4e6c984b6a52b238862004266ada10c9cb0c95))
23
+ * added non-static class and style to placeholder as example ([4fd5e98](https://github.com/kiva/kv-ui-elements/commit/4fd5e98d41c900f69b56614980c688ebd43f6176))
24
+
25
+
26
+ ### Features
27
+
28
+ * placeholder component ([b29facc](https://github.com/kiva/kv-ui-elements/commit/b29facc8c8fcdb9761cc9e58e2530ea1e3b4a2f8))
29
+
30
+
31
+
32
+
33
+
34
+ # [3.2.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.1.0...@kiva/kv-components@3.2.0) (2022-08-04)
35
+
36
+
37
+ ### Bug Fixes
38
+
39
+ * event name in emits ([06813fd](https://github.com/kiva/kv-ui-elements/commit/06813fda75cf9a169b9e5afd33549b9eb77b33a1))
40
+ * remove unused event ([345cd90](https://github.com/kiva/kv-ui-elements/commit/345cd903ab5d6725de34d2085a2c8e65cba6933f))
41
+
42
+
43
+ ### Features
44
+
45
+ * add payload to track closing events ([275c81d](https://github.com/kiva/kv-ui-elements/commit/275c81da659fa586500b9d21607ba5c69c4e5839))
46
+ * add tailored emit event for MARS-199 experiment in kvLightbox ([8499206](https://github.com/kiva/kv-ui-elements/commit/8499206381c9e5bf1ac0ae4ab913b91b07ba906e))
47
+
48
+
49
+
50
+
51
+
6
52
  # [3.1.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.6...@kiva/kv-components@3.1.0) (2022-07-19)
7
53
 
8
54
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "3.1.0",
3
+ "version": "3.3.1",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -68,5 +68,5 @@
68
68
  "optional": true
69
69
  }
70
70
  },
71
- "gitHead": "408647638638310803b48e4a93cb2744e5ec4bce"
71
+ "gitHead": "5722bd63c4f872bf5425855e322531d4674deb0b"
72
72
  }
package/vue/KvLightbox.vue CHANGED
@@ -79,7 +79,7 @@
79
79
  tw-w-6 tw-h-6 tw--m-2
80
80
  hover:tw-text-action-highlight
81
81
  "
82
- @click.stop="hide"
82
+ @click.stop="hide('close-x')"
83
83
  >
84
84
  <kv-material-icon
85
85
  class="tw-w-3 tw-h-3"
@@ -233,7 +233,7 @@ export default {
233
233
  return 'dialog';
234
234
  });
235
235
 
236
- const hide = () => {
236
+ const hide = (closedBy = '') => {
237
237
  // scroll any content inside the lightbox back to top
238
238
  if (kvLightbox.value && kvLightboxBody.value) {
239
239
  deactivateFocusTrap();
@@ -252,7 +252,7 @@ export default {
252
252
  * @event lightbox-closed
253
253
  * @type {Event}
254
254
  */
255
- emit('lightbox-closed');
255
+ emit('lightbox-closed', { type: closedBy });
256
256
  };
257
257
 
258
258
  onKeyUp = (e) => {
@@ -263,7 +263,7 @@ export default {
263
263
 
264
264
  const onScreenClick = () => {
265
265
  if (!preventClose.value) {
266
- hide();
266
+ hide('background-click');
267
267
  }
268
268
  };
269
269
 
package/vue/KvLoadingPlaceholder.vue ADDED
@@ -0,0 +1,38 @@
1
+ <template>
2
+ <div
3
+ class="
4
+ loading-placeholder
5
+ tw-w-full tw-h-full
6
+ tw-relative
7
+ tw-overflow-hidden
8
+ tw-bg-tertiary
9
+ tw-rounded-sm
10
+ "
11
+ >
12
+ </div>
13
+ </template>
14
+
15
+ <style scoped>
16
+ .loading-placeholder::before {
17
+ content: '';
18
+ display: block;
19
+ position: absolute;
20
+ height: 100%;
21
+ width: 100%;
22
+ top: 0;
23
+ transform: translateX(100%);
24
+ background:
25
+ linear-gradient(to right, transparent 0%, rgb(var(--bg-secondary)) 50%, transparent 100%);
26
+ animation: loading-placeholder 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
27
+ }
28
+
29
+ @keyframes loading-placeholder {
30
+ from {
31
+ transform: translateX(-100%);
32
+ }
33
+
34
+ to {
35
+ transform: translateX(100%);
36
+ }
37
+ }
38
+ </style>
package/vue/KvTextInput.vue CHANGED
@@ -240,6 +240,7 @@ export default {
240
240
  styles,
241
241
  inputAttrs,
242
242
  inputListeners,
243
+ textInputRef,
243
244
  };
244
245
  },
245
246
  };
package/vue/stories/KvLoadingPlaceholder.stories.js ADDED
@@ -0,0 +1,17 @@
1
+ import KvLoadingPlaceholder from '../KvLoadingPlaceholder.vue';
2
+
3
+ export default {
4
+ title: 'KvLoadingPlaceholder',
5
+ component: KvLoadingPlaceholder,
6
+ };
7
+
8
+ const DefaultTemplate = () => ({
9
+ components: { KvLoadingPlaceholder },
10
+ template: `
11
+ <div style="padding: 20px;">
12
+ <kv-loading-placeholder class="tw-py-1" :class="{ 'tw-px-1': true }" style="height: 50px;" :style="{ width: '400px' }" />
13
+ </div>
14
+ `,
15
+ });
16
+
17
+ export const Default = DefaultTemplate.bind({});