const getWeekdaysOfMonth = (year, month) =>
Array.from(
{ length: new Date(year, month, 0).getDate() },
function() {
this[0].setDate(-~this[0].getDate());
this[1] += this[0].getDay() === 1 || !this[1];
return `неделя ${this[1]}, ` + this[0].toLocaleString('ru-RU', {
day: 'numeric',
weekday: 'short',
});
},
[ new Date(year, ~-month, 0), 0 ]
);
const may2024 = getWeekdaysOfMonth(2024, 5);
const sep2023 = getWeekdaysOfMonth(2024, -3);
const jun2021 = getWeekdaysOfMonth(2020, 18);unshift, и ничего больше). Давайте закостылим - добавляем колонку, которая будет дублировать данный функционал, а оригинальную спрячем:const columns = [
...
{ name: 'selection' },
];.xxx tr > :first-child {
display: none;
}<q-table
...
table-class="xxx"
>
<template #header-cell-selection="props">
<q-th :props="props">
<q-checkbox v-model="props.selected" />
</q-th>
</template>
<template #body-cell-selection="props">
<q-td :props="props">
<q-checkbox v-model="props.selected" />
</q-td>
</template>
</q-table>.btn::after {
transition-duration: 1s;
...
}.btn:hover::after {
transform: translateX(30px) translateY(-40px);
}.then( (x) => x + 1, (x) => x + 3 ) //promise rejected, value = 14
.then((x) => x * 20).
every для пустого массива?||?
.waiting { background: yellow; }
.working { background: green; }
.completed { background: blue; }const highlight = {
'Ожидание': 'waiting',
'Работа': 'working',
'Завершено': 'completed',
};<el-table-column label="Процесс">
<template #default="{ row: { process } }">
<span :class="highlight[process]">{{ process }}</span>
</template>
</el-table-column>const cellClassName = ({ column, row }) =>
column.property === 'process'
? (highlight[row.process] ?? '')
: '';<el-table
:cell-class-name="cellClassName"
...
>prefix-icon="calendar-icon"function combine($ids, $keys, ...$values) {
return array_combine(
$ids,
array_map(
fn($i) => array_combine($keys, array_column($values, $i)),
array_keys($ids)
)
);
}
$result = combine($input, $params, $array1, $array2);const months = Object.fromEntries(Array.from(
{ length: 12 },
(_, i) => [ new Date(0, i).toLocaleString('ru-RU', { month: 'long' }), i ]
));
function parseDate(str) {
const [ , month, day, year, hour, minute ] = str.match(/(\S+) (\d+), (\d+) (\d+):(\d+)/);
return +new Date(year, months[month.toLowerCase()], day, hour, minute);
}const Checkbox = forwardRef(({ label, ...props }, ref) =>
<label>
<input type="checkbox" ref={ref} {...props} />
{label}
</label>
);
function CheckboxGroup({
items,
label = item => item,
selected,
setSelected,
}) {
const onChange = ({ target: { checked, dataset: { index } } }) =>
setSelected(selected => checked
? [ ...selected, items[index] ]
: selected.filter(n => n !== items[index])
);
const allSelectedRef = useRef();
const onAllSelectedChange = ({ target: { checked } }) =>
setSelected(checked ? [...items] : []);
useEffect(() => {
const isAllSelected = items.length === selected.length;
allSelectedRef.current.checked = isAllSelected;
allSelectedRef.current.indeterminate = !isAllSelected && !!selected.length;
}, [ selected ]);
return (
<div className="checkbox-group">
<Checkbox
label="SELECT ALL"
defaultChecked={false}
onChange={onAllSelectedChange}
ref={allSelectedRef}
/>
{items.map((n, i) => (
<Checkbox
label={label(n)}
data-index={i}
checked={selected.includes(n)}
onChange={onChange}
/>
))}
</div>
);
}const checkboxContainer = document.querySelector('.options');
const itemsContainer = document.querySelector('.box');
const hiddenClass = 'hidden';:not):function getCheckedSelector(container) {
const [ not, has ] = Array.prototype.reduce.call(
container.querySelectorAll('input'),
(acc, n) => (acc[+n.checked].push(`.${n.value}`), acc),
[ [], [] ]
);
return has.join('') + (not.length ? `:not(${not.join(',')})` : '');
}checkboxContainer.addEventListener('change', function() {
const selector = getCheckedSelector(this);
for (const n of itemsContainer.children) {
n.classList.toggle(hiddenClass, !n.matches(selector));
}
});const toggleHidden = (selector, state) => itemsContainer
.querySelectorAll(selector)
.forEach(n => n.classList.toggle(hiddenClass, state));
checkboxContainer.addEventListener('change', e => {
toggleHidden(':scope > *', true);
toggleHidden(getCheckedSelector(e.currentTarget), false);
});const checkboxes = [...checkboxContainer.querySelectorAll('input')];
const onChange = function() {
this.forEach(({ classList: cl }) => {
cl.toggle(hiddenClass, checkboxes.some(n => n.checked !== cl.contains(n.value)));
});
}.bind([...itemsContainer.children]);
checkboxes.forEach(n => n.addEventListener('change', onChange));const blocks = ref(Array.from({ length: 5 }, (_, i) => (-~i) ** 2));
const active = ref(0);
function next() {
active.value = (active.value + 1 + blocks.value.length) % blocks.value.length;
}
let intervalId = null;
onMounted(() => intervalId = setInterval(next, 500));
onUnmounted(() => clearInterval(intervalId));<div
v-for="(n, i) in blocks"
v-text="n"
:class="[ 'box-item', { active: i === active } ]"
></div>:nth-child - не круто. Лучше сделать компонент, принимающий массив цветов и создающий блоки на его основе. Соответственно, вместо класса будет назначаться цвет фона напрямую, как-то так:<div
v-for="(n, i) in colors"
:style="{ backgroundColor: i === active ? n : '' }"
...кликая на один список открывается и второй