mirrors/homebox
1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2025-08-01 15:20:29 +00:00
Code Issues Projects Releases Packages Wiki Activity

use vue component for date picker

Browse source
This commit is contained in:
Hayden 2024-02-25 16:27:32 -06:00
parent c708b1759e
commit 1a2902975e
No known key found for this signature in database
GPG key ID: 17CF79474E257545
4 changed files with 64 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/components/Form/DatePicker.vue
View file

@ -9,11 +9,14 @@
<label class="label">
<span class="label-text"> {{ label }} </span>
</label>
<input v-model="selected" type="date" class="input input-bordered col-span-3 w-full mt-2" />
<VueDatePicker v-model="selected" :enable-time-picker="false" clearable :dark="isDark" />
</div>
</template>
<script setup lang="ts">
// @ts-ignore
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
const emit = defineEmits(["update:modelValue", "update:text"]);
const props = defineProps({
@ -32,6 +35,8 @@
},
});
const isDark = useIsDark();
const selected = computed({
get() {
// return modelValue as string as YYYY-MM-DD or null
@ -54,12 +59,16 @@
// Date
if (props.modelValue instanceof Date) {
if (props.modelValue.getFullYear() < 1000) {
return null;
}
if (isNaN(props.modelValue.getTime())) {
return null;
}
// Valid Date
return props.modelValue.toISOString().split("T")[0];
return props.modelValue;
}
return null;

24
frontend/composables/use-theme.ts
View file

@ -38,3 +38,27 @@ export function useTheme(): UseTheme {
return { theme, setTheme };
}
export function useIsDark() {
const theme = useTheme();
const darkthemes = [
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"forest",
"aqua",
"black",
"luxury",
"dracula",
"business",
"night",
"coffee",
];
return computed(() => {
return darkthemes.includes(theme.theme.value);
});
}

1
frontend/package.json
View file

@ -41,6 +41,7 @@
"@tailwindcss/aspect-ratio": "^0.4.0",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.4",
"@vuepic/vue-datepicker": "^8.1.1",
"@vueuse/nuxt": "^10.0.0",
"@vueuse/router": "^10.0.0",
"autoprefixer": "^10.4.8",

47
frontend/pnpm-lock.yaml generated
View file

@ -26,6 +26,9 @@ dependencies:
'@tailwindcss/typography':
specifier: ^0.5.4
version: 0.5.8(tailwindcss@3.2.4)
'@vuepic/vue-datepicker':
specifier: ^8.1.1
version: 8.1.1(vue@3.3.4)
'@vueuse/nuxt':
specifier: ^10.0.0
version: 10.0.0(nuxt@3.6.5)(rollup@2.79.1)(vue@3.3.4)
@ -114,7 +117,7 @@ devDependencies:
version: 5.0.2
vite-plugin-eslint:
specifier: ^1.8.1
version: 1.8.1(eslint@8.29.0)(vite@4.3.9)
version: 1.8.1(eslint@8.29.0)(vite@5.0.5)
vitest:
specifier: ^1.0.0
version: 1.0.0(@types/node@18.11.12)
@ -3160,7 +3163,7 @@ packages:
'@nuxt/kit': 3.6.5(rollup@2.79.1)
pathe: 1.1.1
ufo: 1.3.2
vite-plugin-pwa: 0.16.7(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
vite-plugin-pwa: 0.16.7(vite@5.0.5)(workbox-build@7.0.0)(workbox-window@7.0.0)
dev: true
/@vitejs/plugin-vue-jsx@3.0.1(vite@4.3.9)(vue@3.3.4):
@ -3343,6 +3346,16 @@ packages:
/@vue/shared@3.3.4:
resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
/@vuepic/vue-datepicker@8.1.1(vue@3.3.4):
resolution: {integrity: sha512-/t9+dROb/hYN/DInff8ctIiVm5tVyuJdiWA+nWcjHOLjUhvAQ9vyJwhxAkoWX5o0EB5x5XeCME2cajfTPz86RA==}
engines: {node: '>=18.12.0'}
peerDependencies:
vue: '>=3.2.0'
dependencies:
date-fns: 3.3.1
vue: 3.3.4
dev: false
/@vueuse/core@10.0.0(vue@3.3.4):
resolution: {integrity: sha512-Q/p2xaGVFVrJ0E4ID1SM35WIa0Eo4AeKPSLKuLpYG09zgUWuwEaY4lBoNzLzkdLjzq5goIJ3DfYFI0wt8W4MkA==}
dependencies:
@ -4066,7 +4079,7 @@ packages:
normalize-path: 3.0.0
readdirp: 3.6.0
optionalDependencies:
fsevents: 2.3.2
fsevents: 2.3.3
/chownr@2.0.0:
resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
@ -4456,6 +4469,10 @@ packages:
resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==}
engines: {node: '>= 12'}
/date-fns@3.3.1:
resolution: {integrity: sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==}
dev: false
/debug@2.6.9:
resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
peerDependencies:
@ -5532,19 +5549,11 @@ packages:
/fs.realpath@1.0.0:
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
/fsevents@2.3.2:
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
requiresBuild: true
optional: true
/fsevents@2.3.3:
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
requiresBuild: true
dev: true
optional: true
/function-bind@1.1.1:
@ -7021,7 +7030,7 @@ packages:
engines: {node: ^14.18.0 || >=16.10.0}
hasBin: true
optionalDependencies:
fsevents: 2.3.2
fsevents: 2.3.3
/nuxt@3.6.5(@types/node@18.11.12)(eslint@8.29.0)(rollup@2.79.1)(typescript@5.0.2):
resolution: {integrity: sha512-0A7V8B1HrIXX9IlqPc2w+5ZPXi+7MYa9QVhtuGYuLvjRKoSFANhCoMPRP6pKdoxigM1MBxhLue2VmHA/VbtJCw==}
@ -8223,14 +8232,14 @@ packages:
engines: {node: '>=10.0.0'}
hasBin: true
optionalDependencies:
fsevents: 2.3.2
fsevents: 2.3.3
/rollup@3.26.2:
resolution: {integrity: sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
hasBin: true
optionalDependencies:
fsevents: 2.3.2
fsevents: 2.3.3
/rollup@4.6.1:
resolution: {integrity: sha512-jZHaZotEHQaHLgKr8JnQiDT1rmatjgKlMekyksz+yk9jt/8z9quNjnKNRoaM0wd9DC2QKXjmWWuDYtM3jfF8pQ==}
@ -9361,7 +9370,7 @@ packages:
vscode-languageserver-textdocument: 1.0.8
vscode-uri: 3.0.6
/vite-plugin-eslint@1.8.1(eslint@8.29.0)(vite@4.3.9):
/vite-plugin-eslint@1.8.1(eslint@8.29.0)(vite@5.0.5):
resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==}
peerDependencies:
eslint: '>=7'
@ -9371,10 +9380,10 @@ packages:
'@types/eslint': 8.4.10
eslint: 8.29.0
rollup: 2.79.1
vite: 4.3.9(@types/node@18.11.12)
vite: 5.0.5(@types/node@18.11.12)
dev: true
/vite-plugin-pwa@0.16.7(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
/vite-plugin-pwa@0.16.7(vite@5.0.5)(workbox-build@7.0.0)(workbox-window@7.0.0):
resolution: {integrity: sha512-4WMA5unuKlHs+koNoykeuCfTcqEGbiTRr8sVYUQMhc6tWxZpSRnv9Ojk4LKmqVhoPGHfBVCdGaMo8t9Qidkc1Q==}
engines: {node: '>=16.0.0'}
peerDependencies:
@ -9385,7 +9394,7 @@ packages:
debug: 4.3.4
fast-glob: 3.3.2
pretty-bytes: 6.1.1
vite: 4.3.9(@types/node@18.11.12)
vite: 5.0.5(@types/node@18.11.12)
workbox-build: 7.0.0
workbox-window: 7.0.0
transitivePeerDependencies:
@ -9422,7 +9431,7 @@ packages:
postcss: 8.4.24
rollup: 3.26.2
optionalDependencies:
fsevents: 2.3.2
fsevents: 2.3.3
/vite@5.0.5(@types/node@18.11.12):
resolution: {integrity: sha512-OekeWqR9Ls56f3zd4CaxzbbS11gqYkEiBtnWFFgYR2WV8oPJRRKq0mpskYy/XaoCL3L7VINDhqqOMNDiYdGvGg==}