@kiva/kv-components 2.0.0 → 3.0.0

package/vue/KvTextInput.vue

@@ -1,5 +1,9 @@
 <template>
-	<div class="tw-inline-flex">
+	<div
+		class="tw-inline-flex"
+		:class="classes"
+		:style="styles"
+	>
 		<div
 			class="tw-relative tw-w-full "
 			:class="{ 'tw-opacity-low': disabled }"
@@ -29,10 +33,10 @@
 				}"
 				:placeholder="placeholder"
 				:disabled="disabled"
-				v-bind="$attrs"
-				:value="valueInput"
-				@input="onInput"
+				v-bind="inputAttrs"
+				:value="modelValue"
 				v-on="inputListeners"
+				@input="onInput"
 			>
 			<!-- eslint-enable max-len -->
 			<kv-material-icon
@@ -47,7 +51,7 @@
 				tw-pointer-events-none tw-text-danger"
 			/>
 			<button
-				v-if="canClear && valid && !!valueInput"
+				v-show="canClear && valid && !!inputText"
 				type="button"
 				class="tw-absolute tw-top-1.5 tw-right-1.5"
 				@click="clearInput"
@@ -70,9 +74,18 @@
 </template>
 
 <script>
+import {
+	ref,
+	toRefs,
+} from 'vue-demi';
 import { mdiAlertCircleOutline, mdiClose } from '@mdi/js';
 import KvMaterialIcon from './KvMaterialIcon.vue';
+import { useAttrs } from '../utils/attrs';
 
+const emits = [
+	'input',
+	'update:modelValue',
+];
 /* eslint-disable max-len */
 
 /**
@@ -98,8 +111,8 @@ export default {
 	inheritAttrs: false,
 	// v-model will update when a different value is input
 	model: {
-		prop: 'value',
-		event: 'input',
+		prop: 'modelValue',
+		event: 'update:modelValue',
 	},
 	props: {
 		/**
@@ -115,9 +128,9 @@ export default {
 		 * <kv-text-input :value="streetAddress" @input="(val) => streetAddress = val" />
 		 * ```
 		 * */
-		value: {
+		modelValue: {
 			type: [String, Number, Boolean],
-			default: null,
+			default: '',
 		},
 		/**
 		 * Text that appears in the form control when it has no value set
@@ -173,51 +186,61 @@ export default {
 			default: false,
 		},
 	},
-	data() {
-		return {
-			mdiAlertCircleOutline,
-			mdiClose,
-			valueInput: this.value,
-		};
-	},
-	computed: {
-		inputListeners() {
-			return {
-				// Pass through any listeners from the parent to the input element, like blur, focus, etc.
-				// https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
-				...this.$listeners,
-				// ...except for the listener to the 'input' event which is emitted by this component
-				input: () => {},
-			};
-		},
+	emits,
+	setup(props, context) {
+		const { emit } = context;
+		const {
+			modelValue,
+		} = toRefs(props);
 
-	},
-	watch: {
-		value() {
-			this.valueInput = this.value;
-		},
-	},
-	methods: {
-		onInput(event) {
+		const textInputRef = ref(null);
+		const inputText = ref(modelValue.value);
+
+		const {
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		} = useAttrs(context, emits);
+
+		const onInput = (event) => {
 			/**
 			* The value that is currently in the input
 			* @event input
 			* @type {Event}
 			*/
-			this.valueInput = event.target.value;
-			this.$emit('input', event.target.value);
-		},
-		focus() {
-			this.$refs.textInputRef.focus();
-		},
-		blur() {
-			this.$refs.textInputRef.blur();
-		},
-		clearInput() {
-			this.valueInput = '';
-			this.$emit('input', '');
-			this.focus();
-		},
+			inputText.value = event.target.value;
+			emit('input', event.target.value);
+			emit('update:modelValue', event.target.value);
+		};
+
+		const focus = () => {
+			textInputRef.value.focus();
+		};
+
+		const blur = () => {
+			textInputRef.value.blur();
+		};
+
+		const clearInput = () => {
+			inputText.value = '';
+			emit('input', '');
+			emit('update:modelValue', '');
+		};
+
+		return {
+			mdiAlertCircleOutline,
+			mdiClose,
+			onInput,
+			focus,
+			blur,
+			clearInput,
+			inputText,
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		};
 	},
 };
 </script>

package/vue/KvTextLink.vue

@@ -25,6 +25,13 @@
 </template>
 
 <script>
+import {
+	computed,
+	onMounted,
+	ref,
+	toRefs,
+	watch,
+} from 'vue-demi';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 
 /**
@@ -73,26 +80,31 @@ export default {
 			},
 		},
 	},
-	computed: {
-		tag() {
-			if (this.to) {
+	emits: [
+		'click',
+	],
+	setup(props, { emit }) {
+		const {
+			to,
+			href,
+		} = toRefs(props);
+
+		const buttonRef = ref(null);
+
+		const tag = computed(() => {
+			if (to.value) {
 				return 'router-link';
 			}
-			if (this.href) {
+			if (href.value) {
 				return 'a';
 			}
 			return 'button';
-		},
-	},
-	watch: { href() { this.setHref(); } },
-	mounted() {
-		this.setHref();
-	},
-	methods: {
-		onClick(event) {
+		});
+
+		const onClick = (event) => {
 			// emit a vue event and prevent native event
 			// so we don't have to write @click.native in our templates
-			if (this.tag === 'button') {
+			if (tag.value === 'button') {
 				event.preventDefault();
 				/**
 				 * Fired when the button is clicked
@@ -100,17 +112,27 @@ export default {
 				 * @event click
 				 * @param {Event}
 				 */
-				this.$emit('click', event);
+				emit('click', event);
 			}
-		},
-		setHref() {
+		};
+
+		const setHref = () => {
 			// if the component is a router-link, router-link will set the href
 			// if the href is passed as a prop, use that instead
-			if (this.href) {
-				const { buttonRef } = this.$refs;
-				buttonRef.href = this.href;
+			if (href.value) {
+				buttonRef.value.href = href.value;
 			}
-		},
+		};
+
+		watch(href, () => setHref());
+		onMounted(() => setHref());
+
+		return {
+			tag,
+			onClick,
+			buttonRef,
+			setHref,
+		};
 	},
 };
 </script>

package/vue/KvThemeProvider.vue

@@ -21,7 +21,7 @@
  *   darkGreenTheme,
  *   mintTheme,
  *   defaultTheme
- * } from '@kiva/kv-tokens/configs/kivaColors';
+ * } from '@kiva/kv-tokens/configs/kivaColors.cjs';
  * ...
  * data() { return { darkTheme }; }
  * ...

package/vue/KvToast.vue

@@ -86,7 +86,10 @@
 </template>
 
 <script>
-
+import {
+	ref,
+	computed,
+} from 'vue-demi';
 import {
 	mdiClose, mdiAlertCircle, mdiAlert, mdiCheckCircle,
 } from '@mdi/js';
@@ -116,62 +119,75 @@ export default {
 		KvMaterialIcon,
 		KvPageContainer,
 	},
-	data() {
-		return {
-			isVisible: false,
-			message: '',
-			messageType: 'confirmation', // 'error', 'info', 'confirmation'
-			persist: false,
-			timeout: null,
-			mdiClose,
-		};
-	},
-	computed: {
-		icon() {
-			if (this.messageType === 'warning') {
+	emits: [
+		'close',
+	],
+	setup(props, { emit }) {
+		const isVisible = ref(false);
+		const message = ref('');
+		const messageType = ref('confirmation'); // 'error', 'info', 'confirmation'
+		const persist = ref(false);
+		const timeout = ref(null);
+
+		const icon = computed(() => {
+			if (messageType.value === 'warning') {
 				return mdiAlert;
 			}
-			if (this.messageType === 'error') {
+			if (messageType.value === 'error') {
 				return mdiAlertCircle;
 			}
 			return mdiCheckCircle;
-		},
-		msToDisplayToast() {
+		});
+
+		const msToDisplayToast = computed(() => {
 			const MINIMUM_MS = 5000;
 			const MS_PER_CHARACTER = 100;
 
 			// create an empty span to get the character count without HTML
 			const span = document.createElement('span');
-			span.innerHTML = this.message;
+			span.innerHTML = message.value;
 			const characterCount = span.innerText.length;
 
 			const characterMs = MS_PER_CHARACTER * characterCount;
 			return Math.max(characterMs, MINIMUM_MS);
-		},
-	},
-	methods: {
-		show(message, type, persist) {
-			this.isVisible = true;
-			this.message = typeof message === 'string' ? message : '';
-			this.messageType = typeof type === 'string' ? type : '';
-			this.persist = Boolean(persist);
+		});
 
-			if (!this.persist) {
-				this.timeout = setTimeout(() => {
-					this.close();
-				}, this.msToDisplayToast);
-			}
-		},
-		close() {
-			this.isVisible = false;
-			clearTimeout(this.timeout);
+		const close = () => {
+			isVisible.value = false;
+			clearTimeout(timeout.value);
 
 			/**
 			* Indicates the toast has closed by a user or after timeout
 			* @event close
 			*/
-			this.$emit('close');
-		},
+			emit('close');
+		};
+
+		const show = (messageInput, type, persistInput) => {
+			isVisible.value = true;
+			message.value = typeof messageInput === 'string' ? messageInput : '';
+			messageType.value = typeof type === 'string' ? type : '';
+			persist.value = Boolean(persistInput);
+
+			if (!persist.value) {
+				timeout.value = setTimeout(() => {
+					close();
+				}, msToDisplayToast.value);
+			}
+		};
+
+		return {
+			mdiClose,
+			isVisible,
+			message,
+			messageType,
+			persist,
+			timeout,
+			icon,
+			msToDisplayToast,
+			close,
+			show,
+		};
 	},
 };
 </script>

package/vue/stories/KvCheckbox.stories.js

@@ -67,7 +67,7 @@ export const WithoutVModel = (args, {
 	template: `
 		<div>
 			<kv-checkbox
-				:checked="checkboxExampleModel"
+				:modelValue="checkboxExampleModel"
 				@change="(val) => checkboxExampleModel = val"
 				:disabled="disabled"
 			>
@@ -92,26 +92,26 @@ export const Multiple = (args, {
 	template: `
 		<div class="tw-flex tw-flex-col tw-gap-2">
 			<kv-checkbox
-				:checked="checkboxExampleModel1"
+				:modelValue="checkboxExampleModel1"
 				@change="(val) => checkboxExampleModel1 = val"
 			>
 				One is checked: {{checkboxExampleModel1}}
 			</kv-checkbox>
 			<kv-checkbox
-				:checked="checkboxExampleModel2"
+				:modelValue="checkboxExampleModel2"
 				@change="(val) => checkboxExampleModel2 = val"
 				:disabled="true"
 			>
 				Two is checked: {{checkboxExampleModel2}}
 			</kv-checkbox>
 			<kv-checkbox
-				:checked="checkboxExampleModel3"
+				:modelValue="checkboxExampleModel3"
 				@change="(val) => checkboxExampleModel3 = val"
 			>
 				Three is checked: {{checkboxExampleModel3}}
 			</kv-checkbox>
 			<kv-checkbox
-				:checked="checkboxExampleModel4"
+				:modelValue="checkboxExampleModel4"
 				@change="(val) => checkboxExampleModel4 = val"
 			>
 				Four is long lorem ipsum nulla duis velit occaecat consectetur pariatur enim eu nostrud. <a href="https://placeholder.com">Irure et cupidatat</a> veniam sit enim proident exercitation ut Lorem do. Commodo ad veniam commodo est amet pariatur: {{checkboxExampleModel4}}

package/vue/stories/KvSwitch.stories.js

@@ -56,8 +56,8 @@ export const WithoutVModel = (args, {
 	template: `
 		<div>
 			<kv-switch
-				:checked="switchExampleModel"
-				@change="(val) => switchExampleModel = val"
+				:modelValue="switchExampleModel"
+				@update:modelValue="(val) => switchExampleModel = val"
 				:disabled="disabled"
 			>
 				Switch is switched: {{switchExampleModel}}

package/vue/stories/KvTabs.stories.js

@@ -12,10 +12,10 @@ export const DefaultTemplate = () => ({
 	template: `
 		<kv-tabs @tab-changed="handleTabChanged">
 			<template #tabNav>
-				<kv-tab for="demo-1-first">First</kv-tab>
-				<kv-tab for="demo-1-second">Second</kv-tab>
-				<kv-tab for="demo-1-third">Third</kv-tab>
-				<kv-tab for="demo-1-forth">Forth is longer</kv-tab>
+				<kv-tab forPanel="demo-1-first">First</kv-tab>
+				<kv-tab forPanel="demo-1-second">Second</kv-tab>
+				<kv-tab forPanel="demo-1-third">Third</kv-tab>
+				<kv-tab forPanel="demo-1-forth">Forth is longer</kv-tab>
 			</template>
 			<template #tabPanels>
 				<kv-tab-panel id="demo-1-first"><p>First Panel</p></kv-tab-panel>
@@ -37,10 +37,10 @@ export const InitialTabSelection = () => ({
 	template: `
 		<kv-tabs @tab-changed="handleTabChanged">
 			<template #tabNav>
-				<kv-tab for="demo-2-first">First tab name</kv-tab>
-				<kv-tab for="demo-2-second" :selected="true">Second is initially selected</kv-tab>
-				<kv-tab for="demo-2-third">Third tab name</kv-tab>
-				<kv-tab for="demo-2-forth">Forth tab name is quite long</kv-tab>
+				<kv-tab forPanel="demo-2-first">First tab name</kv-tab>
+				<kv-tab forPanel="demo-2-second" :selected="true">Second is initially selected</kv-tab>
+				<kv-tab forPanel="demo-2-third">Third tab name</kv-tab>
+				<kv-tab forPanel="demo-2-forth">Forth tab name is quite long</kv-tab>
 			</template>
 			<template #tabPanels>
 				<kv-tab-panel id="demo-2-first"><p>First Panel</p></kv-tab-panel>

package/vue/stories/KvTextInput.stories.js

@@ -68,7 +68,7 @@ export const WithoutVModelTemplate = (args, {
 			<kv-text-input
 				id="without-v-model-id"
 				@input="(val) => textInputModel = val"
-				:value="textInputModel"
+				:modelValue="textInputModel"
 				style="width: 25rem;"
 			/>
 		</div>`,

package/vue/stories/KvThemeProvider.stories.js

@@ -1,7 +1,7 @@
 import primitives from '@kiva/kv-tokens/primitives.json';
 import {
 	defaultTheme, darkTheme, darkGreenTheme, mintTheme,
-} from '@kiva/kv-tokens/configs/kivaColors';
+} from '@kiva/kv-tokens/configs/kivaColors.cjs';
 import KvButton from '../KvButton.vue';
 import KvGrid from '../KvGrid.vue';
 import KvPageContainer from '../KvPageContainer.vue';

package/vue/stories/KvToast.stories.js

@@ -49,8 +49,9 @@ const Template = (args, {
 			</div>
 		</div>`,
 	methods: {
-		showToast(message, type, persist) {
-			this.$refs.toastRef.show(message, type, persist);
+		showToast(messageInput, type, persistInput) {
+			console.log(this.$refs.toastRef);
+			this.$refs.toastRef.show(messageInput, type, persistInput);
 		},
 		onClose() {
 			console.log('toast closed');

package/vue/stories/StyleguidePrimitives.stories.js

@@ -1,6 +1,6 @@
 import resolveConfig from 'tailwindcss/resolveConfig'; // eslint-disable-line import/no-extraneous-dependencies
-import tailwindConfig from '@kiva/kv-tokens/configs/tailwind.config';
-import { textStyles } from '@kiva/kv-tokens/configs/kivaTypography';
+import tailwindConfig from '@kiva/kv-tokens/configs/tailwind.config.cjs';
+import { textStyles } from '@kiva/kv-tokens/configs/kivaTypography.cjs';
 import KvGrid from '../KvGrid.vue';
 import KvPageContainer from '../KvPageContainer.vue';
 import KvTab from '../KvTab.vue';
@@ -8,7 +8,7 @@ import KvTabs from '../KvTabs.vue';
 import KvTabPanel from '../KvTabPanel.vue';
 import KvToast from '../KvToast.vue';
 
-const { headerNumberCase, kebabCase, removeObjectProperty } = require('../../utils/themeUtils');
+const { headerNumberCase, kebabCase, removeObjectProperty } = require('../../utils/themeUtils.cjs');
 
 const config = resolveConfig(tailwindConfig);
 const { theme } = config;
@@ -50,8 +50,8 @@ export const Primitives = (args, { argTypes }) => ({
 			<h2 class="tw-mb-4">Background Colors</h2>
 			<kv-tabs>
 				<template #tabNav>
-					<kv-tab for="bg_themable">Themable</kv-tab>
-					<kv-tab for="bg_static">Static</kv-tab>
+					<kv-tab for-panel="bg_themable">Themable</kv-tab>
+					<kv-tab for-panel="bg_static">Static</kv-tab>
 				</template>
 				<template #tabPanels>
 					<kv-tab-panel id="bg_themable">
@@ -118,8 +118,8 @@ export const Primitives = (args, { argTypes }) => ({
 			<h2 class="tw-mb-4">Text Colors</h2>
 			<kv-tabs>
 				<template #tabNav>
-					<kv-tab for="text_themable">Themable</kv-tab>
-					<kv-tab for="text_static">Static</kv-tab>
+					<kv-tab for-panel="text_themable">Themable</kv-tab>
+					<kv-tab for-panel="text_static">Static</kv-tab>
 				</template>
 				<template #tabPanels>
 					<kv-tab-panel id="text_themable">
@@ -174,8 +174,8 @@ export const Primitives = (args, { argTypes }) => ({
 			<h2 class="tw-mb-4">Border/Ring Colors</h2>
 			<kv-tabs>
 				<template #tabNav>
-					<kv-tab for="border_themable">Themable</kv-tab>
-					<kv-tab for="border_static">Static</kv-tab>
+					<kv-tab for-panel="border_themable">Themable</kv-tab>
+					<kv-tab for-panel="border_static">Static</kv-tab>
 				</template>
 				<template #tabPanels>
 					<kv-tab-panel id="border_themable">

package/.babelrc

@@ -1,16 +0,0 @@
-{
-	"env": {
-		"test": {
-			"presets": [
-				[
-					"@babel/preset-env",
-					{
-						"targets": {
-							"node": "current"
-						}
-					}
-				]
-			]
-		}
-	}
-}

package/jest.config.js

@@ -1,36 +0,0 @@
-/*
- * For a detailed explanation regarding each configuration property, visit:
- * https://jestjs.io/docs/configuration
- */
-
-module.exports = {
-	testMatch: ['**/unit/specs/**/*.spec.js'],
-
-	// Automatically clear mock calls and instances between every test
-	clearMocks: true,
-
-	// Indicates whether the coverage information should be collected while executing the test
-	collectCoverage: false,
-
-	// The directory where Jest should output its coverage files
-	// coverageDirectory: 'coverage',
-
-	// Indicates which provider should be used to instrument code for coverage
-	// coverageProvider: 'v8',
-
-	// An array of file extensions your modules use
-	moduleFileExtensions: [
-		'js',
-		'json',
-		'vue',
-	],
-
-	// The test environment that will be used for testing
-	testEnvironment: 'jsdom',
-
-	// A map from regular expressions to paths to transformers
-	transform: {
-		'^.+\\.vue$': 'vue-jest',
-		'^.+\\.js$': 'babel-jest',
-	},
-};