Skip to content

Commit

Permalink
Merge branch 'release/v0.23.12'
Browse files Browse the repository at this point in the history
  • Loading branch information
holtwick committed Oct 5, 2024
2 parents d5581e4 + 1ea606c commit 9fa5960
Show file tree
Hide file tree
Showing 8 changed files with 195 additions and 31 deletions.
52 changes: 52 additions & 0 deletions lib/basic/lazy-data.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { describe, expect, it } from 'vitest'
import { createArray } from 'zeed'
import { useLazyData } from './lazy-data'

describe('useLazyData', () => {
async function onFetch(offset: number, length: number) {
return createArray(length).map((_, i) => offset + i)
}

it('should generate fake data', async () => {
const result = await onFetch(5, 5)
expect(result).toMatchInlineSnapshot(`
[
5,
6,
7,
8,
9,
]
`)
})

it('should initialize with size 0', () => {
const { getSize } = useLazyData({ onFetch })
expect(getSize()).toBe(0)
})

it('should set size correctly', () => {
const { setSize, getSize, data } = useLazyData({ onFetch })
setSize(5)
expect(getSize()).toBe(5)
expect(data.length).toBe(5)
expect(data).toMatchInlineSnapshot(`
[
undefined,
undefined,
undefined,
undefined,
undefined,
]
`)
})

it('should reload data correctly', () => {
const { setSize, reload, data } = useLazyData({ onFetch })
setSize(3)
reload()
// Assuming the data is reactive and we can access it directly for testing purposes
expect(data.length).toBe(3)
expect(data.every(item => item == null)).toBe(true)
})
})
65 changes: 65 additions & 0 deletions lib/basic/lazy-data.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import type { LoggerInterface } from 'zeed'
import { reactive } from 'vue'
import { arrayEmptyInPlace, createArray, Logger } from 'zeed'

const log: LoggerInterface = Logger('lazy-data')

interface Config<T> {
onFetch: (from: number, length: number) => Promise<T[]>
chunkSize?: number
margin?: number
size?: number
}

enum ChunkStatus {
Loading = 1,
Loaded,
Error,
}

export function useLazyData<T>(opt: Config<T>) {
const { chunkSize = 10, margin = 5, onFetch, size = 0 } = opt

let iteration = 0
let dataSize = 0
const data = reactive<(T | null)[]>([])
const chunks: Record<number, ChunkStatus | undefined> = {}

function reload() {
iteration++
arrayEmptyInPlace(data)
const newData = createArray(dataSize) as (T | null)[]
data.push(...newData as any)
}

function setSize(size: number) {
dataSize = size
reload()
}

if (size > 0)
setSize(size)

function setVisible(fromPos: number, toPos: number) {
log.assert(fromPos <= toPos, 'fromPos must be less than or equal to toPos')
const fromChunk = Math.floor(Math.max(0, fromPos - margin) / chunkSize)
const toChunk = Math.floor((toPos + margin) / chunkSize) * chunkSize
const iterationNow = iteration
onFetch(fromChunk * chunkSize, ((toChunk - fromChunk) * chunkSize) + chunkSize).then((result) => {
if (iterationNow !== iteration)
return
for (let i = fromChunk; i <= toChunk; i++)
chunks[i] = ChunkStatus.Loaded

// arraySetArrayInPlace(data, result, fromChunk * chunkSize)
})
}

return {
setSize,
getSize: () => dataSize,
setVisible,
reload,
data,
}
}
8 changes: 7 additions & 1 deletion lib/basic/oui-tableview.demo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ const state = reactive({
fillLast: true,
scrollToEnd: false,
showSepHandle: false,
first: 0,
last: 0,
})
const columns: OuiTableColumn[] = [
Expand Down Expand Up @@ -42,7 +44,10 @@ const menu = useMenu((row: any) => [
},
])
const x = ref(0)
function onVisible(offset: number, limit: number) {
state.first = offset
state.last = offset + limit
}
</script>

<template>
Expand All @@ -61,6 +66,7 @@ const x = ref(0)
:row-attrs="(_item, index) => index % 2 === 0 ? { style: 'background: var(--s2-bg)' } : {}"
style="height: 80vh"
@context="menu"
@visible="onVisible"
>
<template #col-one="{ value, col }">
{{ col.name }} {{ value }}
Expand Down
2 changes: 2 additions & 0 deletions lib/basic/oui-tableview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const props = withDefaults(defineProps<{
const emit = defineEmits<{
context: [row: T, pos: number, event: Event]
select: [row: T, pos: number, event: Event]
visible: [offset: number, limit: number]
}>()
const modelSort = defineModel<string>('sort')
Expand Down Expand Up @@ -120,6 +121,7 @@ function scrollX(x: number) {
:row-height="rowHeight"
:scroll-to-end="scrollToEnd"
@scroll-x="scrollX"
@visible="(offset, limit) => $emit('visible', offset, limit)"
>
<template #default="{ item, index }">
<div
Expand Down
10 changes: 9 additions & 1 deletion lib/basic/oui-virtual-list.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
// Which is under MIT License https://github.com/waningflow/vue3-virtual-list/blob/master/package.json#L11
import { onMounted, ref, toRefs, watch } from 'vue'
import { debounce, throttle } from 'zeed'
import { px } from './lib'
// import { bus, useOnBus } from '@/protocol'
import './oui-virtual-list.styl'
Expand All @@ -13,14 +13,17 @@ const props = withDefaults(defineProps<{
rowHeight?: number
rowBuffer?: number
scrollToEnd?: boolean
emitDelay?: number
}>(), {
rowHeight: 20,
rowBuffer: 5,
scrollToEnd: false,
emitDelay: 100,
})
const emit = defineEmits<{
scrollX: [number]
visible: [offset: number, limit: number]
}>()
const { data, rowBuffer, rowHeight } = toRefs(props)
Expand Down Expand Up @@ -84,6 +87,11 @@ function handleScroll() {
// handleScroll()
// })
// const emitVisible = throttle(() => emit('visible', indexFirst.value, indexLast.value - indexFirst.value), { delay: props.emitDelay })
const emitVisible = debounce(() => emit('visible', indexFirst.value, indexLast.value - indexFirst.value), { delay: props.emitDelay })
watch(() => [indexFirst.value, indexLast.value], emitVisible)
function scrollToEnd() {
if (root.value) {
if (props.scrollToEnd)
Expand Down
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "oui-kit",
"type": "module",
"version": "0.23.11",
"version": "0.23.12",
"author": {
"email": "[email protected]",
"name": "Dirk Holtwick",
Expand Down Expand Up @@ -85,7 +85,6 @@
"@vitejs/plugin-vue": "^5.1.4",
"@vitest/browser": "^2.1.1",
"eslint": "^9",
"lightningcss": "^1.27.0",
"stylus": "^0.63.0",
"tsup": "^8.3.0",
"typescript": "^5.6",
Expand Down
84 changes: 58 additions & 26 deletions stylus/preset/utopia.styl
Original file line number Diff line number Diff line change
@@ -1,35 +1,67 @@
// utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 *//* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 *//* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--step--2: unquote("clamp(0.6944rem, 0.6913rem + 0.0157vw, 0.7035rem)");
--step--1: unquote("clamp(0.8333rem, 0.797rem + 0.1816vw, 0.9377rem)");
--step-0: unquote("clamp(1rem, 0.913rem + 0.4348vw, 1.25rem)");
--step-1: unquote("clamp(1.2rem, 1.0378rem + 0.8109vw, 1.6663rem)");
--step-2: unquote("clamp(1.44rem, 1.1683rem + 1.3585vw, 2.2211rem)");
--step-3: unquote("clamp(1.728rem, 1.2992rem + 2.1439vw, 2.9607rem)");
--step-4: unquote("clamp(2.0736rem, 1.4221rem + 3.2575vw, 3.9467rem)");
--step-5: unquote("clamp(2.4883rem, 1.5239rem + 4.8219vw, 5.2609rem)");
--step--2-flex: unquote("clamp(0.6944rem, 0.6913rem + 0.0157vw, 0.7035rem)");
--step--1-flex: unquote("clamp(0.8333rem, 0.797rem + 0.1816vw, 0.9377rem)");
--step-0-flex: unquote("clamp(1rem, 0.913rem + 0.4348vw, 1.25rem)");
--step-1-flex: unquote("clamp(1.2rem, 1.0378rem + 0.8109vw, 1.6663rem)");
--step-2-flex: unquote("clamp(1.44rem, 1.1683rem + 1.3585vw, 2.2211rem)");
--step-3-flex: unquote("clamp(1.728rem, 1.2992rem + 2.1439vw, 2.9607rem)");
--step-4-flex: unquote("clamp(2.0736rem, 1.4221rem + 3.2575vw, 3.9467rem)");
--step-5-flex: unquote("clamp(2.4883rem, 1.5239rem + 4.8219vw, 5.2609rem)");
}

:root {
--step--2: var(--step--2-flex, 0.6944rem);
--step--1: var(--step--1-flex, 0.8333rem);
--step-0: var(--step-0-flex, 1rem);
--step-1: var(--step-1-flex, 1.2rem);
--step-2: var(--step-2-flex, 1.44rem);
--step-3: var(--step-3-flex, 1.728rem);
--step-4: var(--step-4-flex, 2.0736rem);
--step-5: var(--step-5-flex, 2.4883rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--space-3xs: unquote("clamp(0.25rem, 0.2283rem + 0.1087vi, 0.3125rem)");
--space-2xs: unquote("clamp(0.5rem, 0.4565rem + 0.2174vi, 0.625rem)");
--space-xs: unquote("clamp(0.75rem, 0.6848rem + 0.3261vi, 0.9375rem)");
--space-s: unquote("clamp(1rem, 0.913rem + 0.4348vi, 1.25rem)");
--space-m: unquote("clamp(1.5rem, 1.3696rem + 0.6522vi, 1.875rem)");
--space-l: unquote("clamp(2rem, 1.8261rem + 0.8696vi, 2.5rem)");
--space-xl: unquote("clamp(3rem, 2.7391rem + 1.3043vi, 3.75rem)");
--space-2xl: unquote("clamp(4rem, 3.6522rem + 1.7391vi, 5rem)");
--space-3xl: unquote("clamp(6rem, 5.4783rem + 2.6087vi, 7.5rem)");
--space-3xs-2xs: unquote("clamp(0.25rem, 0.1196rem + 0.6522vi, 0.625rem)");
--space-2xs-xs: unquote("clamp(0.5rem, 0.3478rem + 0.7609vi, 0.9375rem)");
--space-xs-s: unquote("clamp(0.75rem, 0.5761rem + 0.8696vi, 1.25rem)");
--space-s-m: unquote("clamp(1rem, 0.6957rem + 1.5217vi, 1.875rem)");
--space-m-l: unquote("clamp(1.5rem, 1.1522rem + 1.7391vi, 2.5rem)");
--space-l-xl: unquote("clamp(2rem, 1.3913rem + 3.0435vi, 3.75rem)");
--space-xl-2xl: unquote("clamp(3rem, 2.3043rem + 3.4783vi, 5rem)");
--space-2xl-3xl: unquote("clamp(4rem, 2.7826rem + 6.087vi, 7.5rem)");
--space-s-l: unquote("clamp(1rem, 0.4783rem + 2.6087vi, 2.5rem)");
--space-3xs-flex: unquote("clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem)");
--space-2xs-flex: unquote("clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem)");
--space-xs-flex: unquote("clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem)");
--space-s-flex: unquote("clamp(1rem, 0.913rem + 0.4348vw, 1.25rem)");
--space-m-flex: unquote("clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem)");
--space-l-flex: unquote("clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem)");
--space-xl-flex: unquote("clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem)");
--space-2xl-flex: unquote("clamp(4rem, 3.6522rem + 1.7391vw, 5rem)");
--space-3xl-flex: unquote("clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem)");
--space-3xs-2xs-flex: unquote("clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem)");
--space-2xs-xs-flex: unquote("clamp(0.5rem, 0.3478rem + 0.7609vw, 0.9375rem)");
--space-xs-s-flex: unquote("clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem)");
--space-s-m-flex: unquote("clamp(1rem, 0.6957rem + 1.5217vw, 1.875rem)");
--space-m-l-flex: unquote("clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem)");
--space-l-xl-flex: unquote("clamp(2rem, 1.3913rem + 3.0435vw, 3.75rem)");
--space-xl-2xl-flex: unquote("clamp(3rem, 2.3043rem + 3.4783vw, 5rem)");
--space-2xl-3xl-flex: unquote("clamp(4rem, 2.7826rem + 6.087vw, 7.5rem)");
--space-s-l-flex: unquote("clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem)");
}

:root {
--space-3xs: var(--space-3xs-flex, 0.25rem);
--space-2xs: var(--space-2xs-flex, 0.5rem);
--space-xs: var(--space-xs-flex, 0.75rem);
--space-s: var(--space-s-flex, 1rem);
--space-m: var(--space-m-flex, 1.5rem);
--space-l: var(--space-l-flex, 2rem);
--space-xl: var(--space-xl-flex, 3rem);
--space-2xl: var(--space-2xl-flex, 4rem);
--space-3xl: var(--space-3xl-flex, 6rem);
--space-3xs-2xs: var(--space-3xs-2xs-flex, 0.25rem);
--space-2xs-xs: var(--space-2xs-xs-flex, 0.5rem);
--space-xs-s: var(--space-xs-s-flex, 0.75rem);
--space-s-m: var(--space-s-m-flex, 1rem);
--space-m-l: var(--space-m-l-flex, 1.5rem);
--space-l-xl: var(--space-l-xl-flex, 2rem);
--space-xl-2xl: var(--space-xl-2xl-flex, 3rem);
--space-2xl-3xl: var(--space-2xl-3xl-flex, 4rem);
--space-s-l: var(--space-s-l-flex, 1rem);
}

oui-utopia() {
Expand Down
2 changes: 1 addition & 1 deletion vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ if (!process.env.BUILD_DEMO) {
// https://vitejs.dev/guide/build.html#library-mode
config.build = {
// sourcemap: false,
cssMinify: 'lightningcss',
// cssMinify: 'lightningcss',
// cssTarget: 'es2015',

lib: {
Expand Down

0 comments on commit 9fa5960

Please sign in to comment.