Improved cup size query.

assets/components/actors/actors.vue

@@ -79,6 +79,7 @@
 										:min="0"
 										:max="boobSizes.length - 1"
 										:value="boobSize"
+										:values="boobSizes"
 										:disabled="!boobSizeRequired"
 										@change="(sizeRange) => updateValue('boobSize', sizeRange)"
 									>
@@ -153,7 +154,7 @@ import Range from '../form/range.vue';
 import Pagination from '../pagination/pagination.vue';
 
 const toggleValues = [true, undefined, false];
-const boobSizes = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
+const boobSizes = 'ABCDEFZ'.split('');
 
 function updateFilters() {
 	this.$router.push({
@@ -179,7 +180,7 @@ async function fetchActors(scroll) {
 		pageNumber: Number(this.$route.params.pageNumber) || 1,
 		letter: this.letter.replace('all', ''),
 		gender: curatedGender === 'other' ? null : curatedGender,
-		boobSize: this.boobSizeRequired && this.boobSizes.slice(this.boobSize[0], this.boobSize[1]),
+		boobSize: this.boobSizeRequired && this.boobSize,
 		naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
 	});
 
@@ -231,7 +232,7 @@ export default {
 			limit: 50,
 			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
 			boobSizes,
-			boobSize: this.$route.query.bs?.split(',') || [0, boobSizes.length - 1],
+			boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
 			boobSizeRequired: this.$route.query.bs || false,
 			naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1,
 		};

assets/components/form/range.vue

@@ -64,6 +64,11 @@ function maxPercentage() {
 }
 
 function emit() {
+	if (this.values) {
+		this.$emit('change', [this.values[this.minValue], this.values[this.maxValue]]);
+		return;
+	}
+
 	this.$emit('change', [this.minValue, this.maxValue]);
 }
 
@@ -88,6 +93,10 @@ export default {
 			type: Array,
 			default: () => [3, 7],
 		},
+		values: {
+			type: Array,
+			default: null,
+		},
 		disabled: {
 			type: Boolean,
 			default: false,
@@ -95,6 +104,13 @@ export default {
 	},
 	emits: ['change'],
 	data() {
+		if (this.values) {
+			return {
+				valueA: this.values.indexOf(this.value[0]),
+				valueB: this.values.indexOf(this.value[1]),
+			};
+		}
+
 		return {
 			valueA: this.value[0],
 			valueB: this.value[1],

assets/js/actors/actions.js

@@ -273,7 +273,7 @@ function initActorActions(store, router) {
 			|| (gender === 'all' && ' ')
 			|| `gender: { equalTo: "${gender}" }`;
 
-		const cupFilter = boobSize ? `cup: { in: [${boobSize.map(size => `"${size}"`)}] }` : '';
+		const cupFilter = boobSize ? `cup: { greaterThanOrEqualTo: "${boobSize[0]}", lessThanOrEqualTo: "${boobSize[1]}" }` : '';
 
 		const { connection: { actors, totalCount } } = await graphql(`
             query Actors(