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

View File

@ -8,14 +8,12 @@
> >
<template #input="{ invalid, fieldFQN, value, setValue }"> <template #input="{ invalid, fieldFQN, value, setValue }">
<Datepicker <Datepicker
text-input v-bind="props"
arrow-navigation
:class="[invalid ? 'dp__invalid' : '']" :class="[invalid ? 'dp__invalid' : '']"
:uid="fieldFQN" :uid="fieldFQN"
:placeholder="placeholder" :placeholder="placeholder"
:disabled="disabled" :state="undefined"
:clearable="clearable" :format="format"
v-bind="$attrs"
:model-value="(value as string)" :model-value="(value as string)"
@update:model-value="setValue" @update:model-value="setValue"
/> />
@ -26,10 +24,12 @@
<script setup lang="ts"> <script setup lang="ts">
import FormField from '../FormField.vue'; import FormField from '../FormField.vue';
import Datepicker from '@vuepic/vue-datepicker'; import Datepicker, { VueDatePickerProps } from '@vuepic/vue-datepicker';
import { ExtractComponentProps } from '../../../utils/extract-component-props'; 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; label: string;
name: string; name: string;
disabled?: boolean; disabled?: boolean;
@ -41,5 +41,14 @@ interface DatePickerProps extends ExtractComponentProps<typeof Datepicker> {
// https://vue3datepicker.com/ // https://vue3datepicker.com/
const props = withDefaults(defineProps<DatePickerProps>(), { const props = withDefaults(defineProps<DatePickerProps>(), {
disabled: false, 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> </script>

View File

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

View File

@ -24,9 +24,15 @@
name="type" name="type"
label="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="barcode" label="Barcode" />
<FormField name="sku" label="SKU / Product code" />
</div>
<FormField name="url" label="URL" /> <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 <FormField
name="weight" name="weight"
type="number" type="number"
@ -76,7 +82,7 @@
</FormGroup> </FormGroup>
<FormGroup name="additionalInfo"> <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 <FormDateField
name="expiresAt" name="expiresAt"
label="Expires at" label="Expires at"

View File

@ -1,7 +1,6 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';
.dp__input { .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; @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 <HousePlanner
v-if="selectedFloorId" v-if="selectedFloorId"
editable editable
class="h-full"
ref="plannerRef" ref="plannerRef"
:key="`planner-${selectedFloorId}`" :key="`planner-${selectedFloorId}`"
:floor-document="floorPlan" :floor-document="floorPlan"

View File

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