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>const useChunked = (data, chunkSize) =>
useMemo(
() => Array.prototype.reduce.call(
data,
(acc, n, i) => ((acc[i / chunkSize | 0] ??= []).push(n), acc),
[]
),
[ data, chunkSize ]
);const ChunkedListItem = ({ item }) =>
<pre>{JSON.stringify(item, null, 2)}</pre>;
const ChunkedList = ({ items, inRow, Item = ChunkedListItem }) => {
const rows = useChunked(items, inRow);
return (
<div className="chunked-list">
{rows.map(row => (
<ul>
{row.map(n => <li><Item item={n} /></li>)}
</ul>
))}
</div>
);
}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 containerSelector = '.selectboxss';
const itemClass = 'selectoption';
const itemSelector = `${containerSelector} .${itemClass}`;
const getClasses = el => Array.prototype.filter.call(el.classList, n => n !== itemClass);
//const getClass = el => el.className.match(RegExp(`${itemClass}-\\d+`))[0];
function updateClasses(item) {
const container = item.closest(containerSelector);
const { classList: cl } = container;
cl.remove(...Array.prototype.flatMap.call(container.querySelectorAll(itemSelector), getClasses));
cl.add(...getClasses(item));
//cl.remove(...Array.from(container.querySelectorAll(itemSelector), getClass));
//cl.add(getClass(li));
}document.querySelectorAll(itemSelector).forEach(function(n) {
n.addEventListener('click', this);
}, e => updateClasses(e.currentTarget));document.addEventListener('click', e => {
const item = e.target.closest(itemSelector);
if (item) {
updateClasses(item);
}
});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 />