@kiva/kv-components 3.2.0 → 3.4.0

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.4.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.3.1...@kiva/kv-components@3.4.0) (2022-08-29)
+
+
+### Features
+
+* creating a global resuable component (KvAccordionItem) ([5bf7685](https://github.com/kiva/kv-ui-elements/commit/5bf76858508870f9055e680406a1167cdd68099c))
+
+
+
+
+
+## [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)
+
+
+### Bug Fixes
+
+* ensure ref is defined in exported methods ([3ab00ea](https://github.com/kiva/kv-ui-elements/commit/3ab00ea181ee2455925c2f8f01950b79c2ea7b09))
+
+
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* added class to placeholder story to show support ([ed4e6c9](https://github.com/kiva/kv-ui-elements/commit/ed4e6c984b6a52b238862004266ada10c9cb0c95))
+* added non-static class and style to placeholder as example ([4fd5e98](https://github.com/kiva/kv-ui-elements/commit/4fd5e98d41c900f69b56614980c688ebd43f6176))
+
+
+### Features
+
+* placeholder component ([b29facc](https://github.com/kiva/kv-ui-elements/commit/b29facc8c8fcdb9761cc9e58e2530ea1e3b4a2f8))
+
+
+
+
+
 # [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,5 @@
       "optional": true
     }
   },
-  "gitHead": "d5530b779a1ae57e21fb31a23d0098deec908502"
+  "gitHead": "fa419acdf33c3d416a926999f23e43d3cfa882b9"
 }

package/utils/expander.js

@@ -0,0 +1,72 @@
+/* eslint-disable no-param-reassign */
+
+function setInitialStyle(el, { property, delay, easing }) {
+	el.style.overflow = 'hidden';
+	el.style.transition = `${property} ${delay}ms ${easing}`;
+}
+
+function unsetStyles(el, { property }) {
+	el.style[property] = null;
+	el.style.overflow = null;
+	el.style.transition = null;
+}
+
+export function expand(el, {
+	easing = 'ease',
+	delay = 500,
+	done = () => {},
+	from = 0,
+	property = 'height',
+}) {
+	// set initial styles
+	setInitialStyle(el, { property, delay, easing });
+
+	// need to measure the property, so first set the value to 'auto'
+	// then unset display:none from v-show
+	el.style[property] = 'auto';
+	el.style.display = null;
+
+	// measure the property
+	const propValue = window.getComputedStyle(el).getPropertyValue(property);
+
+	// set the property to the 'from' value
+	el.style[property] = from;
+
+	el.addEventListener('transitionend', function listener() {
+		unsetStyles(el, { property });
+		// finally, call the done callback after the transition
+		done();
+		el.removeEventListener('transitionend', listener, true);
+	}, true);
+
+	// hack to cause the browser to reflow
+	void el.offsetWidth; // eslint-disable-line no-void
+	// ...and set the property to the measured value on the next tick so it animates w/ css
+	el.style[property] = propValue;
+}
+
+export function collapse(el, {
+	easing = 'ease',
+	delay = 500,
+	done = () => {},
+	to = 0,
+	property = 'height',
+}) {
+	// set initial styles
+	setInitialStyle(el, { property, delay, easing });
+
+	// explicitly set the property value...
+	el.style[property] = window.getComputedStyle(el).getPropertyValue(property);
+
+	el.addEventListener('transitionend', function listener() {
+		unsetStyles(el, { property });
+		// finally, call the done callback after the transition
+		done();
+		el.removeEventListener('transitionend', listener, true);
+	}, true);
+
+	// hack to cause the browser to reflow
+	void el.offsetWidth; // eslint-disable-line no-void
+	// ...and set the property to the 'to' value on the next tick so it animates w/ css
+	el.style[property] = to;
+}

package/vue/KvAccordionItem.vue

@@ -0,0 +1,130 @@
+<template>
+	<div
+		class="tw-border-b tw-border-tertiary tw-relative last:tw-border-b-0"
+	>
+		<button
+			class="tw-w-full tw-flex tw-justify-between tw-items-center tw-py-1.5 tw-px-0
+				tw-text-left disabled:tw-cursor-not-allowed disabled:tw-opacity-low
+				hover:tw-text-action-highlight focus:tw-text-action-highlight"
+			:disabled="disabled"
+			:aria-controls="`kv-accordion-${id}`"
+			:aria-expanded="isOpen ? 'true' : 'false'"
+			@click.prevent="toggle"
+		>
+			<span class="tw-flex-1">
+				<slot name="header"></slot>
+			</span>
+			<kv-material-icon
+				class="tw-h-3 tw-w-3 tw-transition tw-transform tw-duration-500 tw-ease"
+				:class="{ 'tw-rotate-180' : isOpen }"
+				:icon="mdiChevronDown"
+			/>
+		</button>
+		<kv-expandable>
+			<div
+				v-show="isOpen"
+				:id="`kv-accordion-${id}`"
+				:aria-hidden="isOpen ? 'false' : 'true'"
+			>
+				<slot></slot>
+			</div>
+		</kv-expandable>
+	</div>
+</template>
+
+<script>
+// Accordion a11y resources
+// https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html
+// https://www.aditus.io/patterns/accordion/
+// Future improvement
+// Currently the slot content is inside the button, which means h2, h3 etc. won't be
+// navigatable via headings. See https://daverupert.com/2019/12/why-details-is-not-an-accordion/
+// h2 + button // ✅ H1 will show up when navigating by headings
+// button + h2 // ❌ H1 will not show up when navigating by headings
+// Perhaps we could do some magic DOM reordering via this.$slots.header or
+// pass a prop like 'tag' that sets the parent node of the button. <accordion tag="h3">...
+
+import {
+	ref,
+	toRefs,
+} from 'vue-demi';
+import { mdiChevronDown } from '@mdi/js';
+import KvExpandable from './KvExpandable.vue';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	components: {
+		KvMaterialIcon,
+		KvExpandable,
+	},
+	props: {
+		/**
+	 * Unique id. used for a11y
+	* */
+		id: {
+			type: String,
+			required: true,
+			validator: (v) => v.length > 0 && !/\s/g.test(v), // must be a valid html5 id
+		},
+		/**
+	 	* Whether the body is shown initially
+		* */
+		open: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Whether the accordion can be toggled
+		* */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: [
+		'toggle',
+	],
+	setup(props, { emit }) {
+		const {
+			open,
+			disabled,
+		} = toRefs(props);
+
+		const isOpen = ref(open.value);
+
+		const toggle = () => {
+			if (!disabled.value) {
+				isOpen.value = !isOpen.value;
+				/**
+				 * Fires when the accordion has been toggled.
+				 * Contains an object with a boolean 'open' property of the current open
+				 * state of the accordion
+				 * @event toggle
+				 * @type {Event}
+				 */
+				emit('toggle', { open: isOpen.value });
+			}
+		};
+
+		const expand = () => {
+			if (!disabled.value) {
+				isOpen.value = true;
+			}
+		};
+
+		const collapse = () => {
+			if (!disabled.value) {
+				isOpen.value = false;
+			}
+		};
+
+		return {
+			collapse,
+			expand,
+			isOpen,
+			mdiChevronDown,
+			toggle,
+		};
+	},
+};
+</script>

package/vue/KvExpandable.vue

@@ -0,0 +1,84 @@
+<template>
+	<transition
+		@enter="enter"
+		@leave="leave"
+	>
+		<slot></slot>
+	</transition>
+</template>
+
+<script>
+import {
+	toRefs,
+} from 'vue-demi';
+import { expand, collapse } from '../utils/expander';
+
+export default {
+	props: {
+		property: {
+			type: String,
+			default: 'height',
+		},
+		delay: {
+			type: Number,
+			default: 500,
+		},
+		easing: {
+			type: String,
+			default: 'ease',
+		},
+		skipEnter: {
+			type: Boolean,
+			default: false,
+		},
+		skipLeave: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const {
+			property,
+			delay,
+			easing,
+			skipEnter,
+			skipLeave,
+		} = toRefs(props);
+
+		const enter = (el, done) => {
+			if (skipEnter.value) {
+				return done();
+			}
+
+			expand(el, {
+				property: property.value,
+				delay: delay.value,
+				easing: easing.value,
+				done,
+			});
+
+			return true;
+		};
+
+		const leave = (el, done) => {
+			if (skipLeave.value) {
+				return done();
+			}
+
+			collapse(el, {
+				property: property.value,
+				delay: delay.value,
+				easing: easing.value,
+				done,
+			});
+
+			return true;
+		};
+
+		return {
+			enter,
+			leave,
+		};
+	},
+};
+</script>

package/vue/KvLoadingPlaceholder.vue

@@ -0,0 +1,38 @@
+<template>
+	<div
+		class="
+			loading-placeholder
+			tw-w-full tw-h-full
+			tw-relative
+			tw-overflow-hidden
+			tw-bg-tertiary
+			tw-rounded-sm
+		"
+	>
+	</div>
+</template>
+
+<style scoped>
+.loading-placeholder::before {
+	content: '';
+	display: block;
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	transform: translateX(100%);
+	background:
+		linear-gradient(to right, transparent 0%, rgb(var(--bg-secondary)) 50%, transparent 100%);
+	animation: loading-placeholder 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes loading-placeholder {
+	from {
+		transform: translateX(-100%);
+	}
+
+	to {
+		transform: translateX(100%);
+	}
+}
+</style>

package/vue/KvTextInput.vue

@@ -240,6 +240,7 @@ export default {
 			styles,
 			inputAttrs,
 			inputListeners,
+			textInputRef,
 		};
 	},
 };

package/vue/stories/KvAccordionItem.stories.js

@@ -0,0 +1,24 @@
+import KvAccordionItem from '../KvAccordionItem.vue';
+
+export default {
+	title: 'KvAccordionItem',
+	component: KvAccordionItem,
+};
+
+const DefaultTemplate = () => ({
+	components: { KvAccordionItem },
+	template: `
+		<div style="padding: 20px;">
+			<kv-accordion-item id="accordian-test">
+				<template #header>
+					<h2>Accordion</h2>
+				</template>
+				<p>
+					"Hello, KvAccordion Contents!"
+				</p>
+			</kv-accordion-item>
+		</div>
+	`,
+});
+
+export const Default = DefaultTemplate.bind({});

package/vue/stories/KvLoadingPlaceholder.stories.js

@@ -0,0 +1,17 @@
+import KvLoadingPlaceholder from '../KvLoadingPlaceholder.vue';
+
+export default {
+	title: 'KvLoadingPlaceholder',
+	component: KvLoadingPlaceholder,
+};
+
+const DefaultTemplate = () => ({
+	components: { KvLoadingPlaceholder },
+	template: `
+		<div style="padding: 20px;">
+			<kv-loading-placeholder class="tw-py-1" :class="{ 'tw-px-1': true }" style="height: 50px;" :style="{ width: '400px' }" />
+		</div>
+	`,
+});
+
+export const Default = DefaultTemplate.bind({});