This commit is contained in:
Evert Prants 2023-05-22 21:01:41 +03:00
parent 5a63f00f51
commit 8984ddd9dc
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
8 changed files with 1630 additions and 1120 deletions

2363
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -9,36 +9,37 @@
"preview": "vite preview"
},
"dependencies": {
"@headlessui/vue": "^1.7.7",
"@heroicons/vue": "^2.0.13",
"@vuepic/vue-datepicker": "^3.6.5",
"@vueuse/core": "^9.10.0",
"@headlessui/vue": "^1.7.13",
"@heroicons/vue": "^2.0.18",
"@vuepic/vue-datepicker": "^5.1.2",
"@vueuse/core": "^10.1.2",
"date-fns": "^2.30.0",
"jwt-decode": "^3.1.2",
"lodash.get": "^4.4.2",
"lodash.omit": "^4.5.0",
"lodash.pick": "^4.4.0",
"lodash.set": "^4.3.2",
"pinia": "^2.0.28",
"sass": "^1.57.1",
"vue": "^3.2.45",
"vue-material-design-icons": "^5.1.2",
"vue-router": "^4.1.6"
"pinia": "^2.1.3",
"sass": "^1.62.1",
"vue": "^3.3.4",
"vue-material-design-icons": "^5.2.0",
"vue-router": "^4.2.1"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/line-clamp": "^0.4.2",
"@tailwindcss/line-clamp": "^0.4.4",
"@types/lodash.get": "^4.4.7",
"@types/lodash.omit": "^4.5.7",
"@types/lodash.pick": "^4.4.7",
"@types/lodash.set": "^4.3.7",
"@vitejs/plugin-vue": "^4.0.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"prettier": "^2.8.3",
"prettier-plugin-tailwindcss": "^0.2.1",
"tailwindcss": "^3.2.4",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vue-tsc": "^1.0.11"
"@vitejs/plugin-vue": "^4.2.3",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.3.0",
"tailwindcss": "^3.3.2",
"typescript": "^5.0.4",
"vite": "^4.3.8",
"vue-tsc": "^1.6.5"
}
}

View File

@ -8,14 +8,12 @@
>
<template #input="{ invalid, fieldFQN, value, setValue }">
<Datepicker
text-input
arrow-navigation
v-bind="props"
:class="[invalid ? 'dp__invalid' : '']"
:uid="fieldFQN"
:placeholder="placeholder"
:disabled="disabled"
:clearable="clearable"
v-bind="$attrs"
:state="undefined"
:format="format"
:model-value="(value as string)"
@update:model-value="setValue"
/>
@ -26,10 +24,12 @@
<script setup lang="ts">
import FormField from '../FormField.vue';
import Datepicker from '@vuepic/vue-datepicker';
import { ExtractComponentProps } from '../../../utils/extract-component-props';
import Datepicker, { VueDatePickerProps } from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
import { Omit } from 'lodash';
import { computed } from 'vue';
interface DatePickerProps extends ExtractComponentProps<typeof Datepicker> {
interface DatePickerProps extends VueDatePickerProps {
label: string;
name: string;
disabled?: boolean;
@ -41,5 +41,14 @@ interface DatePickerProps extends ExtractComponentProps<typeof Datepicker> {
// https://vue3datepicker.com/
const props = withDefaults(defineProps<DatePickerProps>(), {
disabled: false,
textInput: true,
arrowNavigation: true,
enableTimePicker: true,
autoPosition: true,
is24: true,
});
const format = computed(() =>
props.format ?? props.enableTimePicker ? `dd/MM/yyyy, HH:mm` : 'dd/MM/yyyy'
);
</script>

View File

@ -1,5 +1,5 @@
<template>
<div class="relative h-full w-full" :class="{ 'bg-white': !transparent }">
<div class="relative w-full" :class="{ 'bg-white': !transparent }">
<div
class="relative h-full w-full overflow-hidden"
:class="{ 'bg-gray-100': !transparent }"
@ -21,7 +21,7 @@
}"
/>
<div
class="pointer-events-none absolute top-0 left-0 h-full w-full"
class="pointer-events-none absolute left-0 top-0 h-full w-full"
v-if="!editable"
:style="{
transformOrigin: 'top left',

View File

@ -24,9 +24,15 @@
name="type"
label="Type"
/>
<div class="grid space-y-2 sm:grid-cols-2 sm:space-x-2 sm:space-y-0">
<FormField name="barcode" label="Barcode" />
<FormField name="sku" label="SKU / Product code" />
</div>
<FormField name="url" label="URL" />
<div class="grid space-y-2 sm:grid-cols-3 sm:space-y-0 sm:space-x-2">
<div class="grid space-y-2 sm:grid-cols-3 sm:space-x-2 sm:space-y-0">
<FormField
name="weight"
type="number"
@ -76,7 +82,7 @@
</FormGroup>
<FormGroup name="additionalInfo">
<div class="grid space-y-2 sm:grid-cols-3 sm:space-y-0 sm:space-x-2">
<div class="grid space-y-2 sm:grid-cols-3 sm:space-x-2 sm:space-y-0">
<FormDateField
name="expiresAt"
label="Expires at"

View File

@ -1,7 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';
.dp__input {
@apply block w-full rounded-md border-gray-300 shadow-sm transition-colors duration-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 sm:text-sm;

View File

@ -12,6 +12,7 @@
<HousePlanner
v-if="selectedFloorId"
editable
class="h-full"
ref="plannerRef"
:key="`planner-${selectedFloorId}`"
:floor-document="floorPlan"

View File

@ -1,4 +1,5 @@
<template>
<div class="min-h-[160vh]">
<PageHead bordered>
<div class="flex flex-col">
<h1 class="text-2xl font-bold">{{ floor?.displayName }}</h1>
@ -115,7 +116,10 @@
class="rounded-full px-1 py-1 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
title="Open Storage"
>
<ArrowUpOnSquareIcon aria-hidden="true" class="h-4 w-4" />
<ArrowUpOnSquareIcon
aria-hidden="true"
class="h-4 w-4"
/>
</button>
</div>
</div>
@ -156,6 +160,7 @@
/>
<NewStorageModal ref="newStorage" @added="storageAdded" />
</div>
</template>
<script setup lang="ts">