whelk-ui 0.0.3 → 0.0.4

package/src/components/number_input/NumberInput.vue

@@ -1,264 +0,0 @@
-<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

@@ -1,166 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-<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

@@ -1,152 +0,0 @@
-<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>