whelk-ui 0.0.3 → 0.0.4

package/src/components/text_area/TextArea.vue

@@ -1,151 +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),
-    },
-    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

@@ -1,178 +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),
-	},
-	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

@@ -1,96 +0,0 @@
-<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/main.ts

@@ -1,6 +0,0 @@
-import { createApp } from "vue";
-import "./styles/main.css";
-import App from "./App.vue";
-
-const app = createApp(App);
-app.mount("#app");

package/src/styles/main.css

@@ -1 +0,0 @@
-@import "./partials/_general_variables.css";

package/src/styles/partials/_general_variables.css

@@ -1,74 +0,0 @@
-:root {
-    /* Border Variables */
-    --border-radius: 5px;
-    --border-style: solid;
-    --border-width: 1px;
-
-    /* Set all the colour variables here */
-    --bg-dark: hsl(26 53% 89%);
-    --bg: hsl(26 100% 94%);
-    --bg-light: hsl(26 100% 100%);
-    --text: hsl(16 100% 4%);
-    --text-red: hsl(8, 93%, 43%);
-    --text-muted: hsl(26 35% 27%);
-    --highlight: hsl(26 100% 99%);
-    --border: hsl(26 21% 49%);
-    --border-muted: hsl(26 27% 61%);
-    --primary: hsl(27 65% 66%);
-    --primary-hover: hsl(27 65% 76%);
-    --secondary: hsl(204 74% 68%);
-    --secondary-hover: hsl(204 74% 78%);
-    --danger: hsl(9 26% 64%);
-    --danger-hover: hsl(9 26% 74%);
-    --warning: hsl(52 19% 57%);
-    --warning-hover: hsl(52 19% 67%);
-    --success: hsl(146 17% 59%);
-    --success-hover: hsl(146 17% 69%);
-    --info: hsl(217 28% 65%);
-    --info-hover: hsl(217 28% 75%); /* Set all the object colours here */
-    --document-links: hsl(203.53, 40.8%, 24.51%);
-    --document-links-hover: hsl(203.53, 40.8%, 75.51%);
-    --customer-background: hsl(203.53, 40.8%, 75.49%);
-    --customer-text: hsl(203.53, 40.8%, 24.51%);
-    --kanban-board-background: hsl(78.26, 88.46%, 89.8%);
-    --kanban-board-text: hsl(78.26, 88.46%, 10.2%);
-    --kanban-card-background: hsl(74.12, 35.56%, 53.14%);
-    --kanban-card-text: hsl(74.12, 35.56%, 10.86%);
-    --organisation-background: hsl(52.05, 85.57%, 61.96%);
-    --organisation-text: hsl(52.05, 85.57%, 8.04%);
-    --request-for-change-background: hsl(67.61, 100%, 72.16%);
-    --request-for-change-text: hsl(67.61, 100%, 7.84%);
-    --requirement-background: hsl(200.31, 94.2%, 86.47%);
-    --requirement-text: hsl(200.31, 94.2%, 10.53%);
-    --requirement-item-background: hsl(322.8, 29.76%, 67.06%);
-    --requirement-item-text: hsl(322.8, 29.76%, 8.94%);
-    --project-background: hsl(333.62, 49.57%, 45.88%);
-    --project-text: hsl(333.62, 49.57%, 8.12%);
-    --task-background: hsl(224, 10.2%, 71.82%);
-    --task-text: hsl(224, 10.2%, 7.18%);
-}
-
-.dark {
-    --bg-dark: hsl(16 100% 2%);
-    --bg: hsl(22 76% 4%);
-    --bg-light: hsl(26 50% 8%);
-    --text: hsl(26 100% 94%);
-    --text-red: hsl(8,
-    93%, 23%);
-    --text-muted: hsl(26 34% 68%);
-    --highlight: hsl(26 26% 38%);
-    --border: hsl(26 35% 27%);
-    --border-muted: hsl(27 56% 16%);
-    --primary: hsl(32 100% 20%);
-    --primary-hover: hsl(32 100% 10%);
-    --secondary: hsl(198 100% 20%);
-    --secondary-hover: hsl(198 100% 10%);
-    --danger: hsl(9 21% 41%);
-    --danger-hover: hsl(9 21% 31%);
-    --warning: hsl(52 23% 34%);
-    --warning-hover: hsl(52 23% 24%);
-    --success: hsl(147 19% 36%);
-    --success-hover: hsl(147 19% 26%);
-    --info: hsl(217 22% 41%);
-    --info-hover: hsl(217 22% 31%);
-}

package/src/utils/enums/ObjectStateEnum.ts

@@ -1,13 +0,0 @@
-const ObjectStateEnum = {
-  Disable: "DISABLE",
-  Error: "ERROR",
-  Loading: "LOADING",
-  LoggingIn: "LOGGING_IN",
-  LoggingOut: "LOGGING_OUT",
-  NoAction: "NO_ACTION",
-  Saving: "SAVING",
-} as const;
-
-type ObjectStateEnum = (typeof ObjectStateEnum)[keyof typeof ObjectStateEnum];
-
-export { ObjectStateEnum };

package/src/utils/enums/ObjectTitleCaseEnums.ts

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

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

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

package/src/utils/interfaces/DropDownItemsInterface.ts

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

package/src/utils/interfaces/FolderItemInterface.ts

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

package/src/utils/interfaces/MenuItemInterface.ts

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

@@ -1,18 +0,0 @@
-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/tsconfig.app.json

@@ -1,16 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "types": ["vite/client"],
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
-}

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/tsconfig.node.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-//    "verbatimModuleSyntax": true,
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}