onClickCapture
: A version ofonClick
that fires in the capture phase.
animation-delay
в зависимость от индекса в v-for
:v-for="(n, i) in items"
:style="{ 'animation-delay': i * 0.5 + 's' }"
индекс используется для других целей, там текстовая строка, а не число. В этом и сложность задачи
v-for
для объектов выдаёт три значения, как раз для того, чтобы у свойств тоже мог быть индекс. function merge($arrs, $idKey, ...$sumKeys) {
$result = [];
foreach (array_merge(...$arrs) as $n) {
$id = $n[$idKey];
$result[$id] ??= array_merge($n, array_combine($sumKeys, array_fill(0, count($sumKeys), 0)));
foreach ($sumKeys as $k) {
$result[$id][$k] += $n[$k];
}
}
return array_values($result);
}
$result = merge($dates1, 'date', 'qty');
function groupValues(arr, defaultValue = null) {
const keys = [...new Set(arr.flatMap(Object.keys))];
return arr.reduce((acc, n) => {
keys.forEach(k => acc[k].push(Object.hasOwn(n, k) ? n[k] : defaultValue));
return acc;
}, Object.fromEntries(keys.map(k => [ k, [] ])));
}
const result = groupValues(arr);
const groupValues = (arr, defaultValue = null) =>
arr.reduce((acc, n, i, a) => (
Object
.keys(n)
.forEach(k => (acc[k] ??= Array(a.length).fill(defaultValue))[i] = n[k]),
acc
), {});
<select>
<template v-for="n in options">
<option>
<slot name="option" :option="n">{{ n }}</slot>
</option>
</template>
</select>
<v-select :options="countries">
<template #option="{ option }">{{ option.name }}</template>
</v-select>
// это массив ваших "точек"
const locations = [
{ lat: ..., lng: ... },
{ lat: ..., lng: ... },
...
];
const onLoad = map => {
const bounds = new window.google.maps.LatLngBounds();
locations.forEach(n => bounds.extend(n));
map.fitBounds(bounds);
};
<GoogleMap
onLoad={onLoad}
...
>
{locations.map(n => <Marker position={n} />)}
</GoogleMap>
vue3-mq
this.$mq
$mq has been removed as a global property and must now be injected into components that require it
const createTopic = () => ({
text: '',
subtopics: [ createSubTopic() ],
});
const createSubTopic = () => ({
text: '',
});
const topics = reactive([ createTopic() ]);
<div v-for="(topic, iTopic) in topics">
<div>
<div>
Topic #{{ iTopic + 1 }}:
<input v-model="topic.text">
</div>
<div v-for="(subtopic, iSubtopic) in topic.subtopics">
Subtopic #{{ iTopic + 1 }}.{{ iSubtopic + 1 }}:
<input v-model="subtopic.text">
<button v-if="iSubtopic" @click="topic.subtopics.splice(iSubtopic, 1)">x</button>
</div>
</div>
<button @click="topic.subtopics.push(createSubTopic())">Add subtopic</button>
</div>
<button @click="topics.push(createTopic())">Add topic</button>
const [ items, setItems ] = useState([]);
const [ src, setSrc ] = useState('');
const onChange = e => {
setSrc(e.target.value);
};
const onClick = () => {
setSrc('');
setItems([
...items,
{
id: 1 + Math.max(0, ...items.map(n => n.id)),
src,
},
]);
};
const onSortEnd = (iOld, iNew) => {
setItems(([...items]) => (
items.splice(iNew, 0, items.splice(iOld, 1)[0]),
items
));
};
<div>
<input value={src} onChange={onChange} />
<button onClick={onClick}>add</button>
</div>
<SortableList onSortEnd={onSortEnd}>
{items.map(n => (
<SortableItem key={n.id}>
<img src={n.src} />
</SortableItem>
))}
</SortableList>
from collections import Counter
def how_many_times_can_word_be_made_from_string(word, string):
count_w = Counter(word)
count_s = Counter(string)
return min(count_s[k] // v for k, v in count_w.items())
const classContainer = 'selectboxss';
const classOption = 'selectoption';
const getClasses = el => [...el.classList].filter(n => n !== classOption);
//const getClass = el => el.className.match(RegExp(`${classOption}-\\d+`))[0];
document.addEventListener('click', ({ target: t }) => {
if (t.classList.contains(classOption)) {
const container = t.closest(`.${classContainer}`);
const { classList } = container;
classList.remove(...[...container.querySelectorAll(`.${classOption}`)].flatMap(getClasses));
classList.add(...getClasses(t));
//classList.remove(...Array.from(container.querySelectorAll(`.${classOption}`), getClass));
//classList.add(getClass(t));
}
});
scatter
, в настройках наборов данных указываете showLine: true
. Например:<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js"></script>
<canvas id="chart"></canvas>
const createDataset = (color, label, baseY) => ({
borderColor: color,
label,
showLine: true,
data: Array.from({ length: 10 }, (_, i) => ({
x: 10 * (i + (Math.random() - 0.5)) | 0,
y: baseY + Math.random() * baseY | 0,
})),
});
new Chart(document.querySelector('#chart'), {
type: 'scatter',
data: {
datasets: [
createDataset('red', 'hello, world!!', 50),
createDataset('green', 'fuck the world', 100),
createDataset('blue', 'fuck everything', 200),
],
},
});
const languages = [
{ name: 'Ru', Component: AppRu },
{ name: 'Eng', Component: AppEng },
...
];
const [ language, setLanguage ] = useState(0);
const { name, Component } = languages[language];
const onClick = () => setLanguage((language + 1) % languages.length);
<button onClick={onClick}>{name}</button>
<Component />