Reinitialized commit. Update and actors overview with some filters.
This commit is contained in:
102
components/form/checkbox.vue
Executable file
102
components/form/checkbox.vue
Executable file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<label class="check-container noselect">
|
||||
<span
|
||||
v-if="label"
|
||||
class="check-label"
|
||||
>{{ label }}</span>
|
||||
|
||||
<input
|
||||
v-show="false"
|
||||
:id="`checkbox-${uid}`"
|
||||
:checked="checked"
|
||||
type="checkbox"
|
||||
class="check-checkbox"
|
||||
@change="$emit('change', $event.target.checked)"
|
||||
>
|
||||
|
||||
<label
|
||||
:for="`checkbox-${uid}`"
|
||||
class="check"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const uid = String(Math.random()).slice(2);
|
||||
|
||||
defineProps({
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(['change']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.check-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.check {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
background-color: var(--shadow-weak-30);
|
||||
border-radius: .25rem;
|
||||
cursor: pointer;
|
||||
transition: background .15s ease;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: .5rem;
|
||||
height: .3rem;
|
||||
border: solid 2px var(--text-light);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
margin: -.2rem 0 0 0;
|
||||
transform: rotateZ(-45deg) scaleX(0);
|
||||
transition: transform .15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.check-cross .check::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: url('/img/icons/cross3.svg') no-repeat center/80%;
|
||||
opacity: .15;
|
||||
transition: transform .1s ease;
|
||||
}
|
||||
|
||||
.check-checkbox:checked + .check {
|
||||
background: var(--primary);
|
||||
|
||||
&::after {
|
||||
transform: rotateZ(-45deg) scaleX(1);
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.check-label {
|
||||
overflow: hidden;
|
||||
text-transform: capitalize;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
</style>
|
||||
225
components/form/range.vue
Executable file
225
components/form/range.vue
Executable file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div class="range-container">
|
||||
<div
|
||||
class="label label-start"
|
||||
:class="{ disabled }"
|
||||
@click="setRange(range.a === minValue ? 'a' : 'b', min)"
|
||||
>
|
||||
<slot name="start" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="range"
|
||||
:class="{ disabled }"
|
||||
:style="{ background: `linear-gradient(90deg, var(--slider-track) ${minPercentage}%, var(--slider-range) ${minPercentage}%, var(--slider-range) ${maxPercentage}%, var(--slider-track) ${maxPercentage}%)` }"
|
||||
@click="setNearest"
|
||||
>
|
||||
<input
|
||||
v-model.number="range.a"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:data-value="range.a"
|
||||
:disabled="disabled"
|
||||
type="range"
|
||||
class="slider"
|
||||
@input="set('input')"
|
||||
@change="set('change')"
|
||||
@click.stop
|
||||
>
|
||||
|
||||
<input
|
||||
v-model.number="range.b"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:data-value="range.b"
|
||||
:disabled="disabled"
|
||||
type="range"
|
||||
class="slider"
|
||||
@input="set('input')"
|
||||
@change="set('change')"
|
||||
@click.stop
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="label label-end"
|
||||
:class="{ disabled }"
|
||||
@click="setRange(range.b === maxValue ? 'b' : 'a', max)"
|
||||
>
|
||||
<slot name="end" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
nextTick,
|
||||
} from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [3, 7],
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
allowEnable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change', 'input', 'enable']);
|
||||
|
||||
const range = ref({
|
||||
a: props.values ? props.values.indexOf(props.value[0]) : props.value[0],
|
||||
b: props.values ? props.values.indexOf(props.value[1]) : props.value[1],
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
function set(type = 'change') {
|
||||
if (props.values) {
|
||||
emit(type, [props.values[minValue.value], props.values[maxValue.value]]);
|
||||
return;
|
||||
}
|
||||
|
||||
emit(type, [minValue.value, maxValue.value]);
|
||||
}
|
||||
|
||||
async function setNearest(event) {
|
||||
if (props.allowEnable) {
|
||||
emit('enable');
|
||||
}
|
||||
|
||||
await nextTick;
|
||||
|
||||
if (!props.disabled) {
|
||||
const closestValue = Math.round((event.offsetX / event.target.getBoundingClientRect().width) * (props.max - props.min)) + props.min;
|
||||
const closestSlider = Math.abs(range.value.a - closestValue) < Math.abs(range.value.b - closestValue) ? 'a' : 'b';
|
||||
|
||||
range.value[closestSlider] = closestValue;
|
||||
|
||||
emit('change', [minValue.value, maxValue.value]);
|
||||
}
|
||||
}
|
||||
|
||||
async function setRange(prop, value) {
|
||||
if (props.allowEnable) {
|
||||
emit('enable');
|
||||
}
|
||||
|
||||
await nextTick;
|
||||
|
||||
if (!props.disabled) {
|
||||
range.value[prop] = value;
|
||||
|
||||
emit('change', [minValue.value, maxValue.value]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.dark .range-container .range {
|
||||
--slider-range: var(--lighten-weak-10);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.range-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.range {
|
||||
--slider-track: var(--shadow-weak-30);
|
||||
--slider-range: var(--primary-faded);
|
||||
--slider-thumb: var(--primary);
|
||||
|
||||
position: relative;
|
||||
height: 1.25rem;
|
||||
flex-grow: 1;
|
||||
border-radius: .625rem;
|
||||
|
||||
&.disabled {
|
||||
--slider-range: var(--shadow-weak-10);
|
||||
--slider-thumb: var(--grey-dark-10);
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
background: none;
|
||||
outline: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--slider-thumb);
|
||||
pointer-events: visible;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 3px var(--shadow-weak-10);
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
appearance: none;
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--slider-thumb);
|
||||
pointer-events: visible;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 3px var(--shadow-weak-10);
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 0 .5rem;
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
cursor: pointer;
|
||||
|
||||
::v-deep(.icon) {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.icon) {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
fill: var(--shadow);
|
||||
}
|
||||
</style>
|
||||
115
components/form/toggle.vue
Executable file
115
components/form/toggle.vue
Executable file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<label
|
||||
class="toggle-container noselect"
|
||||
:class="{ light: $store.state.ui.theme === 'dark' }"
|
||||
>
|
||||
<input
|
||||
:id="`toggle-${id}`"
|
||||
:checked="checked"
|
||||
:true-value="trueValue"
|
||||
:false-value="falseValue"
|
||||
:disabled="disabled"
|
||||
type="checkbox"
|
||||
class="toggle-input"
|
||||
@change="$emit('change', $event.target.checked)"
|
||||
>
|
||||
|
||||
<label
|
||||
:for="`toggle-${id}`"
|
||||
class="toggle"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
trueValue: {
|
||||
type: null,
|
||||
default: true,
|
||||
},
|
||||
falseValue: {
|
||||
type: null,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['change'],
|
||||
data() {
|
||||
return {
|
||||
id: Math.floor(new Date().getTime() * Math.random()),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'breakpoints';
|
||||
|
||||
.toggle-container {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
&.light {
|
||||
.toggle {
|
||||
background: var(--lighten-weak);
|
||||
}
|
||||
|
||||
.toggle-input:checked + .toggle {
|
||||
background: var(--lighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
width: 2rem;
|
||||
height: .9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background: var(--shadow-hint);
|
||||
border-radius: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: var(--background-light);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 2px var(--darken-strong);
|
||||
transition: background-color .2s ease, left .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-input {
|
||||
display: none;
|
||||
|
||||
&:checked + .toggle {
|
||||
background: var(--primary-faded);
|
||||
|
||||
&::after {
|
||||
background: var(--primary);
|
||||
left: calc(100% - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] + .toggle {
|
||||
background: var(--shadow-weak);
|
||||
|
||||
&::after {
|
||||
background: var(--shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user