diff --git a/components/actors/actors.vue b/components/actors/actors.vue index 0f3c298..8c37bb2 100644 --- a/components/actors/actors.vue +++ b/components/actors/actors.vue @@ -146,7 +146,8 @@ function updateFilter(prop, value, reload = true) { rows.map((row) => { const filter = props.filters[row.key]; const buckets = props.counts?.[row.key] || []; - const countMax = buckets.at(-1)?.value ?? sliderCap; // buckets are sorted by value - // at least 1 to keep the slider usable, and never below the active filter so its handles stay in view - const max = Math.max(1, Math.min(countMax, sliderCap), filter?.min ?? 0, filter?.max ?? 0); - const value = [filter?.min ?? 0, filter?.max ?? max]; + // buckets are sorted by value; without aggregations at all, fall back to the full slider + const countMax = props.counts ? (buckets.at(-1)?.value ?? 0) : sliderCap; + // nothing above 0 to filter for, e.g. no trans performers in any matching scene; an active filter keeps it usable so it can be reset + const isEmpty = countMax < 1 && !filter; + // collapsed to 0 when empty, otherwise at least 1 so the slider has somewhere to go, and never below the active filter so its handles stay in view + const max = isEmpty ? 0 : Math.max(1, Math.min(countMax, sliderCap), filter?.min ?? 0, filter?.max ?? 0); + const value = isEmpty ? [0, 0] : [filter?.min ?? 0, filter?.max ?? max]; return { ...row, max, + isEmpty, isCapped: countMax > max, value, display: dragging.value[row.key] || value, - mountKey: `${row.key}-${max}-${value.join('-')}`, // remount when the range or filter changes, the slider only reads its value on mount + mountKey: `${row.key}-${max}-${value.join('-')}-${isEmpty}`, // remount when the range or filter changes, the slider only reads its value on mount }; })); @@ -90,6 +94,7 @@ function updateRange(slider, [min, max], reload) { :min="0" :max="slider.max" :value="slider.value" + :disabled="slider.isEmpty" :allow-enable="false" @input="(range) => updateRange(slider, range, false)" @change="(range) => updateRange(slider, range, true)" diff --git a/components/form/range.vue b/components/form/range.vue index f3a4ddf..fb29c3e 100755 --- a/components/form/range.vue +++ b/components/form/range.vue @@ -41,8 +41,9 @@ const range = ref({ const minValue = computed(() => Math.min(range.value.a, range.value.b)); const maxValue = computed(() => Math.max(range.value.a, range.value.b)); -const minPercentage = computed(() => ((minValue.value - props.min) / (props.max - props.min)) * 100); -const maxPercentage = computed(() => ((maxValue.value - props.min) / (props.max - props.min)) * 100); +const span = computed(() => props.max - props.min || 1); // a collapsed range (min equals max) would divide by zero +const minPercentage = computed(() => ((minValue.value - props.min) / span.value) * 100); +const maxPercentage = computed(() => ((maxValue.value - props.min) / span.value) * 100); function set(type = 'change') { if (props.values) { diff --git a/components/movies/movies.vue b/components/movies/movies.vue index c080c20..2742e1e 100644 --- a/components/movies/movies.vue +++ b/components/movies/movies.vue @@ -188,7 +188,8 @@ function updateFilter(prop, value, reload = true) { { > diff --git a/pages/entities/+Page.vue b/pages/entities/+Page.vue index 3cae71d..a302614 100644 --- a/pages/entities/+Page.vue +++ b/pages/entities/+Page.vue @@ -75,7 +75,8 @@ async function search() { > {