whelk-ui 0.0.2 → 0.0.3

package/README.md

@@ -13,6 +13,8 @@ You can follow the completion status on [NearBeach's 0.32 Component Reconstructi
 
 ## Forms
 
+- [] Add Object
+- [x] Buttons
 - [] Checkbox
 - [] Datetime picker
 - [] Date picker

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "whelk-ui",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
+    "test:e2e": "playwright test",
     "test:unit": "vitest"
   },
   "dependencies": {
@@ -14,10 +15,10 @@
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^3.1.0",
+    "@playwright/test": "^1.58.0",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/browser-playwright": "^4.0.7",
-    "@vitest/coverage-v8": "^4.0.8",
+    "@vitest/browser-playwright": "^4.0.18",
     "@vitest/eslint-plugin": "^1.4.0",
     "@vue/tsconfig": "^0.8.1",
     "petite-vue-i18n": "^11.2.8",

package/playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://localhost:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

package/src/components/add_object/AddObject.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {ObjectTitleCaseEnums} from "../../utils/enums/ObjectTitleCaseEnums.ts";
+
+// DEFINE PROPS
+const props = defineProps({
+	objectType: {
+		type: String,
+		required: true,
+		validator: function (value: string): boolean {
+			const enumValues: string[] = Object.values(ObjectTitleCaseEnums);
+			return enumValues.includes(value);
+		},
+	},
+});
+
+</script>
+
+<template>
+	<button
+		class="add-object"
+		type="button"
+	>
+		+ {{objectType}}
+	</button>
+</template>
+
+<style scoped>
+.add-object {
+	width: 100%;
+	border-style: dashed;
+	border-width: var(--border-width);
+	border-radius: var(--border-radius);
+	padding: 0.5rem 0.75rem;
+	font-weight: lighter;
+	font-size: 1rem;
+}
+
+
+
+</style>

package/src/components/card/CardComponent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="card">
+        <slot></slot>
+    </div>
+</template>
+
+<style scoped>
+.card {
+    border-radius: var(--border-radius);
+    background-color: var(--bg-light);
+}
+</style>

package/src/components/card/card_footer/CardFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="card-footer">
+        <slot></slot>
+    </div>
+</template>
+
+<style scoped>
+.card-footer {
+    padding: 0 0 0.75rem 0;
+
+    @media (--large-screen) {
+        margin: 1rem -2rem -1rem -2rem;
+        padding: 1rem 2rem;
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+    }
+}
+</style>

package/src/components/card/card_header/CardHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts"></script>
+<template>
+    <div class="card-header">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+.card-header {
+    border-radius: 0;
+
+    @media (--large-screen) {
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
+    }
+}
+</style>

package/src/components/check_box/CheckBox.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+// Model
+const model = defineModel();
+
+// Setup Props
+const props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    label: {
+        type: String,
+        required: true,
+    },
+});
+
+// Computed
+const checkboxId = computed(() => {
+    return `checkbox-${props.id}`;
+});
+</script>
+
+<template>
+    <div class="checkbox-component">
+        <input :id="checkboxId" :name="label" v-model="model" type="checkbox" />
+        <label :for="checkboxId">{{ props.label }}</label>
+    </div>
+</template>
+
+<style scoped>
+.checkbox-component {
+    label {
+        padding: 0.5rem;
+    }
+
+    input {
+        padding: 0.5rem;
+    }
+}
+</style>

package/src/components/datetime/DatetimeComponent.vue

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

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

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

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

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