whelk-ui 0.0.2 → 0.0.3

package/src/components/number_input/NumberInput.vue

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import FormGroup from '../form_group/FormGroup.vue';
+import {computed, ref} from 'vue';
+import ToolTip from '../tool_tip/ToolTip.vue';
+import RenderErrorMessage from "../render_error_message/RenderErrorMessage.vue";
+
+// Define Props
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	maxValue: {
+		type: Number,
+		default: Number.MAX_SAFE_INTEGER,
+	},
+	minValue: {
+		type: Number,
+		default: Number.MIN_SAFE_INTEGER,
+	},
+	stepIncrement: {
+		type: Number,
+		default: 1,
+	},
+	tooltipMessage: {
+		type: String,
+		required: false,
+		default: '',
+	},
+	tooltipTitle: {
+		type: String,
+		required: false,
+		default: '',
+	},
+});
+
+// Define Models
+const model = defineModel({
+	type: Number,
+	default: 0,
+});
+
+// Define Ref
+const errorMessage = ref('');
+
+// Computed
+const getId = computed(() => {
+	// Return an id made up of input- + title
+	return 'input-' + props.label?.toLowerCase()?.replace(' ', '-');
+});
+
+const isMax = computed(() => {
+	return model.value >= props.maxValue;
+});
+
+const isMin = computed(() => {
+	return model.value <= props.minValue;
+});
+
+// FUNCTIONS
+function applyDecrement() {
+	// Reset error messages
+	errorMessage.value = '';
+
+	// Do nothing if we reach the lowest value
+	if (isMin.value) {
+		errorMessage.value = "Reached Lowest Value";
+		return;
+	}
+
+	// We don't want to increment past the min value - so we define a local increment
+	let increment = Math.abs(props.minValue - model.value);
+	increment =
+		increment < Math.abs(props.stepIncrement)
+			? increment
+			: Math.abs(props.stepIncrement);
+
+	// Apply the incrementation, and make sure it is not bigger than the max value
+	let update_value = model.value - increment;
+	update_value =
+		update_value > props.maxValue ? props.maxValue : update_value;
+
+	//Mutate the value
+	model.value = update_value;
+}
+
+function applyIncrement() {
+	// Reset error messages
+	errorMessage.value = '';
+
+	// Do nothing if we reach the highest value
+	if (isMax.value) {
+		errorMessage.value = "Reached Maxium Value";
+		return;
+	}
+
+	// We don't want to increment past the max value - so we define a local increment
+	let increment = Math.abs(props.maxValue - model.value);
+	increment =
+		increment < Math.abs(props.stepIncrement)
+			? increment
+			: Math.abs(props.stepIncrement);
+
+	// Apply the incrementation, and make sure it is not lower than the min value
+	let update_value = model.value + increment;
+	update_value =
+		update_value < props.minValue ? props.minValue : update_value;
+
+	// Mutate the value
+	model.value = update_value;
+}
+
+function manualUpdate(event: Event) {
+	// Reset error messages
+	errorMessage.value = '';
+
+	// Handle manual event
+	const target = event.target as HTMLInputElement;
+	let update_value: number | undefined = target?.valueAsNumber;
+	if (update_value === undefined) {
+		errorMessage.value = "Model is undefined - default 0";
+		update_value = 0;
+	}
+	if (isNaN(update_value)) {
+		errorMessage.value = "Not a number - default 0";
+		update_value = 0;
+	}
+
+
+	// Make sure the values fall within the min and max
+	update_value =
+		update_value > props.maxValue ? props.maxValue : update_value;
+	update_value =
+		update_value < props.minValue ? props.minValue : update_value;
+
+	// Mutate the value
+	model.value = update_value;
+}
+</script>
+
+<template>
+	<FormGroup class="number-input">
+		<label :for="getId">
+			<ToolTip
+				v-if="props.tooltipMessage !== ''"
+				:title="tooltipTitle"
+				:message="tooltipMessage"
+				:id="getId"
+			/>
+			{{ label }}
+		</label>
+		<div class="number-input-row">
+			<button
+				type="button"
+				class="negative"
+				v-bind:aria-label="`Decrement current value of ${model} by ${props.stepIncrement}`"
+				v-bind:disabled="isMin"
+				v-on:click="applyDecrement"
+			>
+				-
+			</button>
+			<input
+				type="number"
+				aria-label="Current value picked"
+				aria-describedby="helper-text-explanation"
+				v-model="model"
+				v-on:change="manualUpdate($event)"
+				v-on:keyup="manualUpdate($event)"
+			/>
+			<button
+				type="button"
+				class="positive"
+				v-bind:aria-label="`Increment current value of ${model} by ${props.stepIncrement}`"
+				v-bind:disabled="isMax"
+				v-on:click="applyIncrement"
+			>
+				+
+			</button>
+		</div>
+		<RenderErrorMessage :error-message="errorMessage"/>
+	</FormGroup>
+</template>
+
+<style scoped>
+.number-input {
+	> label {
+		margin-bottom: 6px;
+	}
+
+	> .number-input-row {
+		display: grid;
+		grid-template-columns: 3rem minmax(0, 1fr) 3rem;
+
+		> .negative {
+			border-radius: var(--border-radius) 0 0 var(--border-radius);
+			border-width: var(--border-width) 0 var(--border-width) var(--border-width);
+		}
+
+		> input {
+			border-style: var(--border-style);
+			border-width: var(--border-width);
+			border-radius: 0;
+			border-color: var(--border);
+			box-sizing: border-box;
+			-moz-box-sizing: border-box;
+			-webkit-box-sizing: border-box;
+
+			&:focus {
+				border-color: var(--secondary);
+				border-width: 2px;
+				outline: none;
+				padding: calc(0.5rem - 1px);
+			}
+		}
+
+		> .positive {
+			border-radius: 0 var(--border-radius) var(--border-radius) 0;
+			border-width: var(--border-width) var(--border-width) var(--border-width) 0;
+		}
+	}
+
+	&.compact {
+		> label {
+			font-size: 1rem;
+			line-height: 1.25rem;
+			margin-bottom: 2px;
+
+			@media (--large-screen) {
+				font-size: 0.75rem;
+				line-height: 1rem;
+			}
+		}
+
+		> .number-input-row {
+			grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
+
+			> input {
+
+
+				font-size: 1.25rem;
+				line-height: 1.5rem;
+				padding: 0.25rem;
+
+				@media (--large-screen) {
+					font-size: 1rem;
+					line-height: 1.25rem;
+				}
+			}
+		}
+	}
+}
+
+/* Hide the spin buttons in WebKit browsers */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+/* Hide spin buttons in Firefox */
+input[type='number'] {
+	-moz-appearance: textfield;
+}
+</style>

package/src/components/password_input/PasswordInput.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import FormGroup from '../form_group/FormGroup.vue';
+import {computed, ref} from 'vue';
+import RenderErrorMessage from '../render_error_message/RenderErrorMessage.vue';
+import ToolTip from '../tool_tip/ToolTip.vue';
+
+// Define Emits
+const emit = defineEmits(['isValid']);
+
+// Define Props
+const props = defineProps({
+	isRequired: {
+		type: Boolean,
+		default: false,
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	minLength: {
+		type: Number,
+		default: 0,
+		required: false,
+		validator: (val) => !Number.isNaN(val),
+	},
+	placeholderText: {
+		type: String,
+		required: false,
+		default: '',
+	},
+	tooltipMessage: {
+		type: String,
+		required: false,
+		default: '',
+	},
+	tooltipTitle: {
+		type: String,
+		required: false,
+		default: '',
+	},
+});
+
+// Define Models
+const model = defineModel();
+
+// Define ref
+const hasError = ref(false);
+const errorMessage = ref('');
+
+// Computed
+const getId = computed(() => {
+	// Return an id made up of input- + title
+	return 'input-' + props.label?.toLowerCase()?.replace(' ', '-');
+});
+
+function checkValidation() {
+	// Fall back to defaults
+	hasError.value = false;
+	errorMessage.value = '';
+
+	// Get the length of the model and if NaN fallback to 0
+	let modelLength: number = Number(model?.value?.toString().length);
+	modelLength = isNaN(modelLength) ? 0 : modelLength;
+
+	// Check the first "required" condition
+	if (props.isRequired && modelLength === 0) {
+		hasError.value = true;
+		errorMessage.value = 'This field is required';
+	}
+
+	// Check the minimum "required" condition
+	if (props.minLength > 0 && modelLength < props.minLength) {
+		hasError.value = true;
+		errorMessage.value = `This field has a minimum length ${modelLength} / ${props.minLength}`;
+	}
+
+	// Set the defined ref and tell parent
+	emit('isValid', !hasError.value);
+}
+</script>
+
+<template>
+	<FormGroup class="text-input">
+		<label :for="getId">
+			<ToolTip
+				v-if="props.tooltipMessage !== ''"
+				:title="tooltipTitle"
+				:message="tooltipMessage"
+				:id="getId"
+			/>
+			{{
+				label
+			}}<span v-if="isRequired" aria-description="Field is required"
+		>*</span
+		>
+		</label>
+		<input
+			:id="getId"
+			type="password"
+			:name="props.label"
+			:placeholder="props.placeholderText"
+			v-model="model"
+			v-on:keyup="checkValidation"
+			v-on:focusout="checkValidation"
+		/>
+		<RenderErrorMessage :error-message="errorMessage"/>
+	</FormGroup>
+</template>
+
+<style scoped>
+.text-input {
+
+	> label {
+		margin-bottom: 6px;
+	}
+
+	> span {
+		color: var(--text-red);
+	}
+
+	> input {
+		border-style: var(--border-style);
+		border-width: var(--border-width);
+		border-radius: var(--border-radius);
+		border-color: var(--border);
+		box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+
+		&:focus {
+			border-color: var(--secondary);
+			border-width: 2px;
+			outline: none;
+			padding: calc(0.5rem - 1px);
+		}
+	}
+
+	&.compact {
+		> label {
+			font-size: 1rem;
+			line-height: 1.25rem;
+			margin-bottom: 2px;
+
+			@media (--large-screen) {
+				font-size: 0.75rem;
+				line-height: 1rem;
+			}
+		}
+
+		> input {
+			font-size: 1.25rem;
+			line-height: 1.5rem;
+			padding: 0.25rem;
+
+			&:focus {
+				padding: calc(0.25rem - 1px);
+			}
+
+			@media (--large-screen) {
+				font-size: 1rem;
+				line-height: 1.25rem;
+			}
+		}
+	}
+}
+</style>

package/src/components/render_error_message/RenderErrorMessage.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <span class="render-error-message">
+		<slot />
+    </span>
+</template>
+
+<style scoped>
+.render-error-message {
+    color: var(--text-red);
+    font-weight: lighter;
+    font-size: 1rem;
+    line-height: 1.125rem;
+    padding: 0;
+    margin: 0;
+
+    > svg {
+        transform: translateY(0.125rem);
+    }
+
+    @media (--large-screen) {
+        font-size: 0.75rem;
+    }
+}
+
+p:before {
+    content: ' ';
+    white-space: pre;
+}
+</style>

package/src/components/switch/SwitchComponent.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import FormGroup from "../form_group/FormGroup.vue";
+import ToolTip from "../tool_tip/ToolTip.vue";
+
+// Define props
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	offText: {
+		type: String,
+		required: false,
+		default: "",
+	},
+	onText: {
+		type: String,
+		required: false,
+		default: "",
+	},
+	tooltipMessage: {
+		type: String,
+		required: false,
+		default: '',
+	},
+	tooltipTitle: {
+		type: String,
+		required: false,
+		default: '',
+	},
+})
+
+// Define computed
+const getClass = computed(() => {
+	return model.value ? "switch on" : "switch off";
+});
+
+const getId = computed(() => {
+	// Return an id made up of input- + title
+	return 'input-' + props.label?.toLowerCase()?.replace(' ', '-');
+});
+
+const getText = computed(() => {
+	return model.value ? props.onText : props.offText;
+});
+
+// Define model
+const model = defineModel({
+	type: Boolean
+});
+
+// Define functions
+function switchClicked() {
+	model.value = !model.value;
+}
+</script>
+
+<template>
+
+	<FormGroup class="switch-component">
+		<label :for="getId">
+			<ToolTip
+				v-if="props.tooltipMessage !== ''"
+				:title="tooltipTitle"
+				:message="tooltipMessage"
+				:id="getId"
+			/>
+			{{
+				label
+			}}
+		</label>
+		<div
+			v-on:click="switchClicked"
+			:class="getClass"
+		>
+			<div class="switch-text">{{ getText }}</div>
+			<div class="switch-block"></div>
+		</div>
+	</FormGroup>
+</template>
+
+<style scoped>
+.switch-component {
+	width: 100%;
+
+	> .switch {
+		display: grid;
+		grid-template-columns: [on] 2rem [text] minmax(0, 1fr) [off] 2rem;
+		border-style: var(--border-style);
+		border-width: var(--border-width);
+		border-radius: var(--border-radius);
+		border-color: var(--border);
+		box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+
+		> .switch-block {
+			width: 2rem;
+			height: 2rem;
+			background-color: hotpink;
+		}
+
+		> .switch-text {
+			display: grid;
+			grid-area: text;
+			text-align: center;
+			align-items: center;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		&.on {
+			> .switch-block {
+				grid-area: on;
+				background-color: var(--success);
+			}
+		}
+
+		&.off {
+			> .switch-block {
+				grid-area: off;
+				background-color: var(--info);
+			}
+		}
+	}
+
+	&.compact {
+		> label {
+			font-size: 1rem;
+			line-height: 1.25rem;
+		}
+
+		> .switch {
+
+			grid-template-columns: [on] 1rem [text] minmax(0, 1fr) [off] 1rem;
+
+			> .switch-block {
+				width: 1rem;
+				height: 1rem;
+			}
+
+			> .switch-text {
+				font-size: 0.75rem;
+				line-height: 1rem;
+			}
+		}
+	}
+}
+
+</style>