updates

package.json

@@ -9,36 +9,37 @@
     "preview": "vite preview"
   },
   "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",
     "lodash.get": "^4.4.2",
     "lodash.omit": "^4.5.0",
     "lodash.pick": "^4.4.0",
     "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": {
     "@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",
+    "@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"
   }
 }

src/components/form/fields/FormDateField.vue

@@ -8,14 +8,12 @@
   >
     <template #input="{ invalid, fieldFQN, value, setValue }">
       <Datepicker
-        text-input
+        v-bind="props"
-        arrow-navigation
         :class="[invalid ? 'dp__invalid' : '']"
         :uid="fieldFQN"
         :placeholder="placeholder"
-        :disabled="disabled"
+        :state="undefined"
-        :clearable="clearable"
+        :format="format"
-        v-bind="$attrs"
         :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 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;
   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>

src/components/house-planner/HousePlanner.vue

@@ -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',

src/components/item/NewItemModal.vue

@@ -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"

src/style.scss

@@ -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;

src/views/HousePlanner.vue

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

src/views/building/floors/FloorView.vue

@@ -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">