@kiva/kv-components 4.8.5 → 5.0.0

package/vue/KvTextInput.vue

@@ -1,250 +0,0 @@
-<template>
-	<div
-		class="tw-inline-flex"
-		:class="classes"
-		:style="styles"
-	>
-		<div
-			class="tw-relative tw-w-full "
-			:class="{ 'tw-opacity-low': disabled }"
-		>
-			<!-- eslint-disable max-len -->
-			<input
-				:id="id"
-				ref="textInputRef"
-				:type="type"
-				class="
-					tw-h-6 tw-w-full
-					tw-px-2
-					tw-border
-					tw-rounded-sm
-					tw-appearance-none
-					tw-text-base
-					tw-ring-inset
-					focus:tw-outline-none focus:tw-ring-2 focus:tw-border-transparent
-				"
-				:class="{
-					'tw-bg-primary'
-						: valid && !disabled,
-					'tw-border-tertiary focus:tw-ring-action'
-						: valid,
-					'tw-pr-6 tw-bg-danger-highlight tw-border-danger focus:tw-ring-danger-highlight'
-						: !valid,
-					'tw-bg-tertiary'
-						: disabled,
-					'tw-pl-6' : icon,
-				}"
-				:placeholder="placeholder"
-				:disabled="disabled"
-				v-bind="inputAttrs"
-				:value="modelValue"
-				v-on="inputListeners"
-				@input="onInput"
-			>
-			<!-- eslint-enable max-len -->
-			<kv-material-icon
-				v-if="icon"
-				:icon="icon"
-				class="tw-w-3 tw-h-3 tw-absolute tw-top-1.5 tw-left-1.5 tw-pointer-events-none"
-			/>
-			<kv-material-icon
-				v-if="!valid"
-				:icon="mdiAlertCircleOutline"
-				class="tw-w-3 tw-h-3 tw-absolute tw-top-1.5 tw-right-1.5
-				tw-pointer-events-none tw-text-danger"
-			/>
-			<button
-				v-show="canClear && valid && !!inputText"
-				type="button"
-				class="tw-absolute tw-top-1.5 tw-right-1.5"
-				@click="clearInput"
-			>
-				<span class="tw-sr-only">clear input</span>
-				<kv-material-icon
-					class="tw-w-3 tw-h-3"
-					:icon="mdiClose"
-				/>
-			</button>
-			<div
-				v-if="$slots.error"
-				class="tw-text-danger-highlight tw-text-small tw-font-medium tw-mt-1"
-			>
-				<!-- @slot Used in conjuction with the `valid` prop to tell the user what must be fixed -->
-				<slot name="error"></slot>
-			</div>
-		</div>
-	</div>
-</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 */
-
-/**
- * Use as you would an `<input type="text" />`. Ensure you're using a label element for a11y.
- *
- * @usage
- * ```
- * <label for="input_id">Street Address</label>
- * <kv-text-input id="input_id" v-model="streetAddress" />
- *
- * or
- *
- * <label for="input_id">Street Address</label>
- * <kv-text-input id="input_id" :value="streetAddress" @input="(val) => streetAddress = val" />
- * ```
-*/
-/* eslint-enable max-len */
-
-export default {
-	components: {
-		KvMaterialIcon,
-	},
-	inheritAttrs: false,
-	// v-model will update when a different value is input
-	model: {
-		prop: 'modelValue',
-		event: 'update:modelValue',
-	},
-	props: {
-		/**
-		 * Id of the input, used to associate the input with a <label> element.
-		 * */
-		id: {
-			type: String,
-			required: true,
-		},
-		/**
-		 * Value of the text in the input. Used if you're not using the standard v-model bindings
-		 * ```
-		 * <kv-text-input :value="streetAddress" @input="(val) => streetAddress = val" />
-		 * ```
-		 * */
-		modelValue: {
-			type: [String, Number, Boolean],
-			default: '',
-		},
-		/**
-		 * Text that appears in the form control when it has no value set
-		 * Should not be used as a label, but rather an example.
-		 * Bad: Enter an address   Good: 1234 E Cherry Lane
-		 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder
-		 * */
-		placeholder: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * Prevents the input from being edited or focused
-		 * */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * When set to false, visually indicates to the user that the contents of the input need
-		 * to be changed
-		 * */
-		valid: {
-			type: Boolean,
-			default: true,
-		},
-		/*
-		 * SVG path data passed in from an imported @mdi/js module.
-		 * Displayed on the left hand side of the input
-		 * ```
-		 * import { mdiMagnify } from '@mdi/js';
-		 * data() { return { mdiMagnify } };
-		 * <kv-text-input :icon="mdiMagnify" />`
-		 * ```
-		 * */
-		icon: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * Can be used to set show special keyboards for mobile users
-		 * E.g., type="number" or type="tel"
-		 * */
-		type: {
-			type: String,
-			default: 'text',
-		},
-		/**
-		 * When set to true, adds a button positioned to the right edge of the input containing an “X”
-		 * */
-		canClear: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits,
-	setup(props, context) {
-		const { emit } = context;
-		const {
-			modelValue,
-		} = toRefs(props);
-
-		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}
-			*/
-			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,
-			textInputRef,
-		};
-	},
-};
-</script>

package/vue/KvTextLink.vue

@@ -1,138 +0,0 @@
-<template>
-	<component
-		:is="tag"
-		ref="buttonRef"
-		:to="to"
-		:disabled="state === 'disabled'"
-		class="tw-text-h4 tw-text-link"
-		:class="{
-			'tw-opacity-low tw-pointer-events-none': state === 'disabled',
-			'tw-group tw-inline-flex tw-items-center tw-gap-x-0.5': icon
-		}"
-		@click="onClick"
-	>
-		<slot></slot>
-		<kv-material-icon
-			v-if="icon"
-			:icon="icon"
-			class="
-				tw-w-1.5 tw-h-1.5 md:tw-w-2 md:tw-h-2
-				tw-transition-transform tw-ease-in-out tw-duration-200
-				group-hover:tw-translate-x-[0.125rem] group-focus:tw-translate-x-[0.125rem]
-			"
-		/>
-	</component>
-</template>
-
-<script>
-import {
-	computed,
-	onMounted,
-	ref,
-	toRefs,
-	watch,
-} from 'vue-demi';
-import KvMaterialIcon from './KvMaterialIcon.vue';
-
-/**
- * A component for displaying a stylized button or link with or without an icon
- */
-export default {
-	components: {
-		KvMaterialIcon,
-	},
-	props: {
-		/**
-		 * Use if linking to a Vue route
-		 * */
-		to: {
-			type: [String, Object],
-			default: null,
-		},
-		/**
-		 * Use if linking to an external link or old-stack page
-		 * */
-		href: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * SVG path data passed in from an imported @mdi/js module.
-		 * ```
-		 * import { mdiArrowRight } from '@mdi/js';
-		 * data() { return { mdiArrowRight } };
-		 * <kv-text-link :icon="mdiArrowRight" />`
-		 * ```
-		 * */
-		icon: {
-			type: String,
-			default: '',
-		},
-		/**
-		 * State of the button
-		 * @values '', disabled
-		 * */
-		state: {
-			type: String,
-			default: '',
-			validator(value) {
-				return ['', 'disabled'].includes(value);
-			},
-		},
-	},
-	emits: [
-		'click',
-	],
-	setup(props, { emit }) {
-		const {
-			to,
-			href,
-		} = toRefs(props);
-
-		const buttonRef = ref(null);
-
-		const tag = computed(() => {
-			if (to.value) {
-				return 'router-link';
-			}
-			if (href.value) {
-				return 'a';
-			}
-			return 'button';
-		});
-
-		const onClick = (event) => {
-			// emit a vue event and prevent native event
-			// so we don't have to write @click.native in our templates
-			if (tag.value === 'button') {
-				event.preventDefault();
-				/**
-				 * Fired when the button is clicked
-				 *
-				 * @event click
-				 * @param {Event}
-				 */
-				emit('click', event);
-			}
-		};
-
-		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 (href.value) {
-				buttonRef.value.href = href.value;
-			}
-		};
-
-		watch(href, () => setHref());
-		onMounted(() => setHref());
-
-		return {
-			tag,
-			onClick,
-			buttonRef,
-			setHref,
-		};
-	},
-};
-</script>

package/vue/KvThemeProvider.vue

@@ -1,122 +0,0 @@
-<template>
-	<div
-		:style="{
-			...theme,
-			color: 'rgb(var(--text-primary))',
-		}"
-	>
-		<slot></slot>
-	</div>
-</template>
-
-<script>
-/**
- * A wrapper component that sets CSS custom properties to theme its children.
- * Most of the time you'll be importing a predefined theme from kv-tokens.
- *
- * @usage
- * ```
- * import {
- *   darkTheme,
- *   darkGreenTheme,
- *   mintTheme,
- *   defaultTheme
- * } from '@kiva/kv-tokens/configs/kivaColors.cjs';
- * ...
- * data() { return { darkTheme }; }
- * ...
- * <kv-theme-provider :theme="darkTheme">...</kv-theme-provider>
- * ```
- *
- * */
-export default {
-	props: {
-		/**
-		 * An object containing CSS custom properties set to RGB values.
-		 *
-		 * For custom theming, see all available custom properties set to white in RGB, below
-		 * @usage
-		 * ```
-		 * {
-		 *    --text-primary: '255, 255, 255',
-		 *    --text-primary-inverse: '255, 255, 255',
-		 *    --text-secondary: '255, 255, 255',
-		 *    --text-tertiary: '255, 255, 255',
-		 *    --text-action: '255, 255, 255',
-		 *    --text-action-highlight: '255, 255, 255',
-		 *    --text-danger: '255, 255, 255',
-		 *    --text-danger-highlight: '255, 255, 255',
-		 *
-		 *    --bg-primary: '255, 255, 255',
-		 *    --bg-primary-inverse: '255, 255, 255',
-		 *    --bg-secondary: '255, 255, 255',
-		 *    --bg-tertiary: '255, 255, 255',
-		 *    --bg-action: '255, 255, 255',
-		 *    --bg-action-highlight: '255, 255, 255',
-		 *    --bg-danger: '255, 255, 255',
-		 *    --bg-danger-highlight: '255, 255, 255',
-		 *    --bg-caution: '255, 255, 255',
-		 *
-		 *    --border-primary: '255, 255, 255',
-		 *    --border-primary-inverse: '255, 255, 255',
-		 *    --border-secondary: '255, 255, 255',
-		 *    --border-tertiary: '255, 255, 255',
-		 *    --border-action: '255, 255, 255',
-		 *    --border-action-highlight: '255, 255, 255',
-		 *    --border-danger: '255, 255, 255',
-		 *    --border-danger-highlight: '255, 255, 255',
-		 *
-		 *    --heading-underline-primary: url('/kvui/heading-underline.svg#FFFFFF'),
-		 * }
-		 * ```
-		 *
-		 * */
-		theme: {
-			type: Object,
-			default: null,
-		},
-	},
-};
-</script>
-
-<style lang="postcss">
-/* heading underline styling, intentionally not scoped */
-.tw-text-jumbo u,
-.tw-text-h1 u,
-.tw-text-h2 u,
-.tw-text-h3 u,
-h1 u,
-h2 u,
-h3 u {
-  text-decoration: none;
-  box-decoration-break: clone;
-  background-image: var(--heading-underline-primary);
-  background-repeat: no-repeat;
-  background-position: left bottom;
-}
-.tw-text-jumbo u {
-	background-size: 100% 0.75rem;
-	padding-bottom: 0.375rem;
-}
-.tw-text-h1 u,
-h1 u {
-  background-size: 100% 0.75rem;
-  padding-bottom: 0.375rem;
-}
-.tw-text-h2 u,
-h2 u {
-  background-size: 100% 0.375rem;
-  padding-bottom: 0.125rem;
-}
-.tw-text-h3 u,
-h3 u {
-  background-size: 100% 0.375rem;
-  padding-bottom: 0.2rem;
-}
-@screen lg {
-	.tw-text-jumbo u {
-		background-size: 100% 1rem;
-		padding-bottom: 0.375rem;
-	}
-}
-</style>