whelk-ui 0.0.2 → 0.0.3

package/src/components/text_area/TextArea.vue

@@ -0,0 +1,151 @@
+<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),
+    },
+    maxLength: {
+        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('model', {
+    type: String,
+    required: false,
+    default: '',
+});
+
+// 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}`;
+    }
+
+    // Check the maximum "required" condition
+    if (props.maxLength > 0 && modelLength > props.maxLength) {
+        hasError.value = true;
+        errorMessage.value = `This field has a maximum length ${modelLength} / ${props.maxLength}`;
+    }
+
+    // Set the defined ref and tell parent
+    emit('isValid', !hasError.value);
+}
+</script>
+
+<template>
+    <FormGroup>
+        <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>
+        <textarea
+            rows="10"
+            :id="getId"
+            type="text"
+            :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>
+label {
+    margin-bottom: 6px;
+}
+
+span {
+    color: var(--text-red);
+}
+
+textarea {
+    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);
+    }
+}
+</style>

package/src/components/text_input/TextInput.vue

@@ -0,0 +1,178 @@
+<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),
+	},
+	maxLength: {
+		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({ required: true });
+
+// 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}`;
+	}
+
+	// Check the maximum "required" condition
+	if (props.maxLength > 0 && modelLength > props.maxLength) {
+		hasError.value = true;
+		errorMessage.value = `This field has a maximum length ${modelLength} / ${props.maxLength}`;
+	}
+
+	// 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="text"
+			: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/tool_tip/ToolTip.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+// Props
+const props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    message: {
+        type: String,
+        required: true,
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+});
+
+// Computed
+const tooltipId = computed(() => {
+    return `tooltip-${props.id}`;
+});
+
+// Ref
+const tooltipClass = ref('tooltip');
+</script>
+
+<template>
+    <div :id="tooltipId" :class="tooltipClass" role="tooltip">
+        <p
+            v-if="
+                props.title !== '' &&
+                props.title !== null &&
+                props.title !== undefined
+            "
+            class="tooltip-title"
+        >
+            {{ props.title }}
+        </p>
+        <p class="tooltip-message">{{ props.message }}</p>
+    </div>
+
+    <span
+        :data-tooltip-target="tooltipId"
+        type="tooltip"
+        @mouseenter="tooltipClass = 'tooltip show'"
+        @mouseleave="tooltipClass = 'tooltip'"
+        @focus="tooltipClass = 'tooltip show'"
+        @blur="tooltipClass = 'tooltip'"
+        @keydown.esc="tooltipClass = 'tooltip'"
+    >
+        <Info />
+    </span>
+</template>
+
+<style scoped>
+.tooltip {
+    display: none;
+    position: absolute;
+    z-index: 10;
+    padding: 0.75rem 0.25rem;
+    background-color: var(--bg-dark);
+    border-color: var(--border-muted);
+    border-width: var(--border-width);
+    border-style: var(--border-style);
+    border-radius: var(--border-radius);
+    transform: translateY(-100%) translateY(-0.5rem);
+    max-width: 75vw;
+
+    &.show {
+        display: inline-block;
+    }
+
+    > .tooltip-title {
+        margin: 0 0 0.125rem 0;
+        color: var(--text-red);
+    }
+
+    > .tooltip-message {
+        font-weight: lighter;
+        margin: 0;
+        color: var(--text-muted);
+    }
+
+    @media (--large-screen) {
+        max-width: 50vw;
+    }
+}
+
+svg {
+    width: 1rem;
+    height: 1rem;
+    color: var(--text-muted);
+}
+</style>

package/src/utils/enums/ObjectTitleCaseEnums.ts

@@ -0,0 +1,17 @@
+const ObjectTitleCaseEnums = {
+    customer: "Customer",
+    group: "Group",
+    kanban_board: 'Kanban Board',
+    kanban_card: "Kanban Card",
+    organisation: "Organisation",
+    request_for_change: "Request For Change",
+    requirement: "Requirement",
+    requirement_item: "Requirement Item",
+    project: "Project",
+    task: "Task",
+    user: "User",
+}
+
+type ObjectTitleCaseEnums = (typeof ObjectTitleCaseEnums[keyof typeof ObjectTitleCaseEnums])
+
+export { ObjectTitleCaseEnums };

package/src/utils/enums/ObjectTypeEnums.ts

@@ -0,0 +1,15 @@
+const ObjectTypeEnums = {
+    customer: "customer",
+    kanban_board: 'kanban_board',
+    kanban_card: "kanban_card",
+    organisation: "organisation",
+    request_for_change: "request_for_change",
+    requirement: "requirement",
+    requirement_item: "requirement_item",
+    project: "project",
+    task: "task",
+}
+
+type ObjectTypeEnums = (typeof ObjectTypeEnums)[keyof typeof ObjectTypeEnums]
+
+export { ObjectTypeEnums }

package/src/utils/interfaces/DocumentItemInterface.ts

@@ -0,0 +1,5 @@
+export interface DocumentItemInterface {
+    documentKey: string;
+    filename: string;
+    type: string;
+}

package/src/utils/interfaces/DropDownItemsInterface.ts

@@ -0,0 +1,8 @@
+import type {Component} from "vue";
+
+export interface DropDownItemsInterface {
+    ariaLabel: string;
+    icon: Component;
+    label: string;
+    trigger: string;
+}

package/src/utils/interfaces/FolderItemInterface.ts

@@ -0,0 +1,4 @@
+export interface FolderItemInterface {
+    folderId: number;
+    folderName: string;
+}

package/src/utils/interfaces/MenuItemInterface.ts

@@ -0,0 +1,10 @@
+import type {Component} from "vue";
+
+export interface MenuItemInterface {
+    ariaLabel: string;
+    destination: string;
+    icon: Component;
+    route: string;
+    routeNew: string;
+    title: string;
+}

package/tests/example.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});

package/vite.config.ts

@@ -2,6 +2,9 @@ import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import postcssNesting from 'postcss-nesting'
 import {resolve} from 'path'
+import {playwright} from "@vitest/browser-playwright";
+import {configDefaults} from "vitest/config";
+import {fileURLToPath} from "node:url";
 
 
 // https://vite.dev/config/
@@ -10,8 +13,20 @@ export default defineConfig({
 		cssCodeSplit: true,
 		lib: {
 			entry: {
+                addObject: resolve(__dirname, 'src/components/add_object/AddObject.vue'),
 				button: resolve(__dirname, 'src/components/button/ButtonComponent.vue'),
-				style: resolve(__dirname, 'src/styles/main.css'),
+                card: resolve(__dirname, 'src/components/card/CardComponent.vue'),
+                checkBox: resolve(__dirname, 'src/components/check_box/CheckBox.vue'),
+                datetime: resolve(__dirname, 'src/components/datetime/DatetimeComponent.vue'),
+                dropDown: resolve(__dirname, 'src/components/drop_down/DropDown.vue'),
+                formGroup: resolve(__dirname, 'src/components/form_group/FormGroup.vue'),
+                numberInput: resolve(__dirname, 'src/components/number_input/NumberInput.vue'),
+                passwordInput: resolve(__dirname, 'src/components/password_input/PasswordInput.vue'),
+                renderErrorMessage: resolve(__dirname, 'src/components/render_error_message/RenderErrorMessage.vue'),
+                switch: resolve(__dirname, 'src/components/switch/SwitchComponent.vue'),
+                textArea: resolve(__dirname, 'src/components/text_area/TextArea.vue'),
+                textInput: resolve(__dirname, 'src/components/text_input/TextInput.vue'),
+                toolTip: resolve(__dirname, 'src/components/tool_tip/ToolTip.vue'),
 			},
 			name: 'whelk-ui',
 			formats: ['es', 'cjs']
@@ -37,4 +52,28 @@ export default defineConfig({
 	plugins: [
 		vue(),
 	],
+    test: {
+        browser: {
+            enabled: true,
+            provider: playwright(),
+            instances: [
+                {browser: 'chromium'},
+            ],
+        },
+        coverage: {
+            provider: 'v8',
+            exclude: [
+                'e2e/**',
+                'src/main.ts'
+            ],
+        },
+        environment: 'jsdom',
+        exclude: [
+            ...configDefaults.exclude,
+            'e2e/**'
+        ],
+        root: fileURLToPath(
+            new URL('./', import.meta.url)
+        ),
+    }
 })