feat(FE): custom time picker

resources/js/components/content/partials/fields/misc/CustomTimePicker.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {type PropType, ref, watch} from 'vue'
+
+const props = defineProps({
+  time: {
+    default: '',
+    type: Date
+  },
+  label: {
+    default: '',
+    type: String
+  },
+  timeMin: {
+    default: null,
+    type: [Date, null] as PropType<Date | null>
+  }
+})
+
+const time = ref(props.time)
+const menu = ref(true)
+const timeMin = ref(props.timeMin)
+
+watch([time, timeMin], ([newTime, newTimeMin]) => {
+  if (newTimeMin && newTime.getTime() < newTimeMin.getTime()) {
+    const adjustedTime = new Date(newTimeMin);
+    adjustedTime.setMinutes(adjustedTime.getMinutes() + 1);
+    time.value = adjustedTime;
+  }
+})
+</script>
+
+<template>
+    <v-text-field
+        :value="time"
+        :active="menu"
+        :focus="menu"
+        :label="props.label"
+        @click="menu = !menu"
+        prepend-icon="mdi-clock-time-four-outline"
+        readonly
+    >
+      <v-menu
+          v-model="menu"
+          :close-on-content-click="false"
+          transition="scale-transition"
+      >
+        <v-time-picker
+            v-if="menu"
+            v-model="time"
+            format="ampm"
+            ampm-in-title=true
+            full-width
+        ></v-time-picker>
+      </v-menu>
+    </v-text-field>
+</template>
+
+<style scoped>
+
+</style>