Added date of birth filter.

assets/components/actors/actors.vue

@@ -81,6 +81,31 @@
 								<template v-slot:start><Icon icon="flower" /></template>
 								<template v-slot:end><Icon icon="pipe" /></template>
 							</RangeFilter>
+
+							<div class="filter-section">
+								<label class="filter-label">
+									<span class="label">
+										<Checkbox
+											:checked="dobRequired"
+											class="checkbox"
+											@change="(checked) => updateValue('dobRequired', checked, true)"
+										/>Date of birth
+									</span>
+								</label>
+
+								<div
+									class="input-container"
+									@click="() => updateValue('dobRequired', true, true)"
+								>
+									<input
+										v-model="dob"
+										:disabled="!dobRequired"
+										type="date"
+										class="input"
+										@change="updateFilters"
+									>
+								</div>
+							</div>
 						</template>
 					</Tooltip>
 				</li>
@@ -202,8 +227,11 @@
 </template>
 
 <script>
+import dayjs from 'dayjs';
+
 import Actor from './tile.vue';
 import Gender from './gender.vue';
+import Checkbox from '../form/checkbox.vue';
 import RangeFilter from './filter-range.vue';
 import Pagination from '../pagination/pagination.vue';
 
@@ -220,6 +248,7 @@ function updateFilters() {
 			h: this.heightRequired ? this.height.join(',') : undefined,
 			w: this.weightRequired ? this.weight.join(',') : undefined,
 			age: this.ageRequired ? this.age.join(',') : undefined,
+			dob: this.dobRequired ? this.dob : undefined,
 		},
 	});
 }
@@ -241,6 +270,7 @@ async function fetchActors(scroll) {
 		letter: this.letter.replace('all', ''),
 		gender: curatedGender === 'other' ? null : curatedGender,
 		age: this.ageRequired && this.age,
+		dob: this.dobRequired && this.dob,
 		boobSize: this.boobSizeRequired && this.boobSize,
 		naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
 		height: this.heightRequired && this.height,
@@ -280,6 +310,7 @@ async function mounted() {
 export default {
 	components: {
 		Actor,
+		Checkbox,
 		Gender,
 		RangeFilter,
 		Pagination,
@@ -293,6 +324,8 @@ export default {
 			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
 			age: this.$route.query.age?.split(',') || [18, 100],
 			ageRequired: !!this.$route.query.age,
+			dob: this.$route.query.dob || dayjs().subtract(21, 'years').format('YYYY-MM-DD'),
+			dobRequired: !!this.$route.query.dob,
 			boobSizes,
 			boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
 			boobSizeRequired: !!this.$route.query.bs,
@@ -480,6 +513,10 @@ export default {
 	font-weight: bold;
 	font-size: .9rem;
 
+	.checkbox {
+		margin: 0 .75rem 0 0;
+	}
+
 	.label {
 		display: inline-flex;
 		align-items: center;
@@ -487,6 +524,15 @@ export default {
 	}
 }
 
+.input-container {
+	box-sizing: border-box;
+	padding: 0 .5rem .5rem .5rem;
+
+	.input {
+		width: 100%;
+	}
+}
+
 .toggle-container,
 .range-container {
 	display: flex;