whelk-ui 0.0.3 → 0.0.4

package/src/components/datetime/DatetimeComponent.vue

@@ -1,147 +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,
-	},
-	tooltipMessage: {
-		type: String,
-		required: false,
-		default: '',
-	},
-	tooltipTitle: {
-		type: String,
-		required: false,
-		default: '',
-	},
-});
-
-// Define Models
-const model = defineModel('model', {
-	type: Date,
-	required: false,
-});
-
-// 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';
-	}
-
-	// Set the defined ref and tell parent
-	emit('isValid', !hasError.value);
-}
-</script>
-
-<template>
-	<FormGroup class="datetime-component">
-		<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="datetime-local"
-			:name="props.label"
-			v-model="model"
-			v-on:keyup="checkValidation"
-			v-on:focusout="checkValidation"
-		/>
-		<RenderErrorMessage :error-message="errorMessage"/>
-	</FormGroup>
-</template>
-
-<style scoped>
-.datetime-component {
-
-	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;
-
-			@media (--large-screen) {
-				font-size: 1rem;
-				line-height: 1.25rem;
-			}
-		}
-	}
-}
-</style>

package/src/components/drop_down/DropDown.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import {ref} from 'vue';
-import type {PropType} from "vue";
-import type {DropDownItemsInterface} from "../../utils/interfaces/DropDownItemsInterface.ts";
-import DropDownItem from "./drop_down_item/DropDownItem.vue";
-
-// Define props
-defineProps({
-	dropDownItems: {
-		type: Array as PropType<DropDownItemsInterface[]>,
-		required: true,
-	},
-});
-
-// Define emits
-const emits = defineEmits(["dropDownItemClicked"]);
-
-// Define refs
-const menuOpen = ref(false);
-
-// Define methods
-function dropDownMenuClicked() {
-	menuOpen.value = !menuOpen.value;
-}
-
-function dropDownItemClicked(trigger: string) {
-	// Emit upstream
-	emits("dropDownItemClicked", trigger);
-
-	// Close the menu
-	menuOpen.value = false;
-}
-</script>
-
-<template>
-	<div class="drop-down">
-		<button
-			type="button"
-			v-on:click="dropDownMenuClicked"
-		>
-			<slot />
-		</button>
-		<Transition>
-			<DropDownItem
-				v-show="menuOpen"
-				v-on:dropDownItemClicked="dropDownItemClicked"
-				:drop-down-items="dropDownItems"
-			/>
-		</Transition>
-		<Transition>
-			<div
-				v-on:click="dropDownMenuClicked"
-				v-if="menuOpen"
-				class="drop-down-backdrop"
-			></div>
-		</Transition>
-	</div>
-</template>
-
-<style scoped>
-.drop-down {
-	> button {
-		border: solid;
-		border-width: 1px;
-		border-radius: var(--border-radius);
-		border-color: var(--border-muted);
-		background: var(--bg-light);
-		box-shadow: none;
-		font-size: 1rem;
-		line-height: 1.25rem;
-		height: 2rem;
-		padding: 0 1rem;
-		position: relative;
-		z-index: 10;
-
-		> svg {
-			width: 1rem;
-			height: 1rem;
-			transform: translateY(2px);
-		}
-	}
-
-	.drop-down-backdrop {
-		width: 100vw;
-		height: 100dvh;
-		z-index: 5;
-		background-color: hsla(0, 0%, 0%, 0.7);
-		position: fixed;
-		top: 0;
-		left: 0;
-	}
-}
-
-.v-enter-active,
-.v-leave-active {
-	transition: opacity 0.5s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-	opacity: 0;
-}
-
-</style>

package/src/components/drop_down/drop_down_item/DropDownItem.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import type {PropType} from "vue";
-import type {DropDownItemsInterface} from "../../../utils/interfaces/DropDownItemsInterface.ts";
-
-// Define props
-defineProps({
-	dropDownItems: {
-		type: Array as PropType<DropDownItemsInterface[]>,
-		required: true,
-	},
-});
-
-// Define emits
-const emits = defineEmits(["dropDownItemClicked"]);
-
-// Define methods
-function dropDownItemClicked(trigger: string) {
-	emits("dropDownItemClicked", trigger);
-}
-</script>
-
-<template>
-	<div class="drop-down-items">
-		<div class="drop-down-item"
-			 v-for="item in dropDownItems"
-			 v-on:click="dropDownItemClicked(item.trigger)"
-			 :key="item.label"
-		>
-			<component :is="item.icon" />
-			{{item.label}}
-		</div>
-	</div>
-</template>
-
-<style scoped>
-.drop-down-items {
-	position: absolute;
-	background-color: var(--bg-light);
-	border: solid;
-	border-width: var(--border-width);
-	border-radius: var(--border-radius);
-	border-color: var(--border-muted);
-	z-index: 20;
-
-	> .drop-down-item {
-		padding: 0.25rem 0.5rem;
-
-		&:hover {
-			background-color: var(--bg-dark);
-		}
-
-		> svg {
-			width: 0.75rem;
-			height: 0.75rem;
-		}
-	}
-}
-</style>

package/src/components/form_group/FormGroup.spec.ts

@@ -1,16 +0,0 @@
-// FormGroup.spec.ts
-import { describe, test, expect } from "vitest";
-import FormGroup from "./FormGroup.vue";
-import { mount } from "@vue/test-utils";
-
-describe("FormGroup", async () => {
-  test("form group slot renders main content", () => {
-    const wrapper = mount(FormGroup, {
-      slots: {
-        default: "Main Content",
-      },
-    });
-    expect(wrapper.html()).toContain("Main Content");
-    expect(wrapper.find(".form-group").text()).toContain("Main Content");
-  });
-});

package/src/components/form_group/FormGroup.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-    <div class="form-group">
-        <slot></slot>
-    </div>
-</template>
-
-<style scoped>
-.form-group {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1.75rem;
-
-	&.compact {
-		margin-bottom: 0.5rem;
-	}
-}
-</style>