@zeix/le-truc 0.15.0

package/examples/basic-number/basic-number.spec.ts

@@ -0,0 +1,175 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('basic-number component', () => {
+	test.beforeEach(async ({ page }) => {
+		page.on('console', msg => {
+			console.log(`[browser] ${msg.type()}: ${msg.text()}`)
+		})
+
+		await page.goto('http://localhost:3000/test/basic-number.html')
+		await page.waitForSelector('basic-number')
+	})
+
+	test('renders default number formatting', async ({ page }) => {
+		// Test the first example: basic unit formatting
+		const firstNumber = page.locator('basic-number').first()
+		await expect(firstNumber).toHaveText('25,678.9 liters')
+	})
+
+	test('formats currency with locale-specific formatting', async ({ page }) => {
+		// Test German-Swiss currency formatting
+		const germanNumber = page.locator('#german-swiss')
+		await expect(germanNumber).toContainText('CHF') // Should contain Swiss Franc
+		await expect(germanNumber).toContainText('25') // Should contain the base number
+
+		// Test French-Swiss currency formatting
+		const frenchNumber = page.locator('#french-swiss')
+		await expect(frenchNumber).toContainText('CHF') // Should contain Swiss Franc
+		await expect(frenchNumber).toContainText('25') // Should contain the base number
+	})
+
+	test('handles different unit types and locales', async ({ page }) => {
+		// Test Arabic locale with speed unit - expect Arabic-Indic numerals
+		const arabicNumber = page.locator('#arabic-speed')
+		await expect(arabicNumber).toContainText('٢٥') // Should contain Arabic-Indic numerals for 25
+
+		// Test Chinese locale with time unit - should contain time unit and some form of the number
+		const chineseNumber = page.locator('#chinese-time')
+		await expect(chineseNumber).toContainText('秒') // Should contain Chinese word for "second"
+	})
+
+	test('updates when value property changes', async ({ page }) => {
+		const numberElement = page.locator('basic-number').first()
+
+		// Get initial text
+		const initialText = await numberElement.textContent()
+		expect(initialText).toContain('25,678.9')
+
+		// Change the value property
+		await numberElement.evaluate(node => {
+			;(node as any).value = 12345.6
+		})
+
+		// Should update to show new formatted number
+		await expect(numberElement).toHaveText('12,345.6 liters')
+	})
+
+	test('handles invalid JSON options gracefully', async ({ page }) => {
+		// Test HTML markup error logging - should log error on page load
+		const htmlElement = page.locator('#invalid-json-html')
+		await expect(htmlElement).toHaveText('1,234.5') // Should fall back to default
+
+		// Test dynamic creation also logs errors
+		const consoleMessages: string[] = []
+		page.on('console', msg => {
+			if (msg.type() === 'error') {
+				consoleMessages.push(msg.text())
+			}
+		})
+
+		await page.evaluate(() => {
+			const element = document.createElement('basic-number') as any
+			element.value = 9999
+			element.setAttribute('options', '{ invalid json }')
+			element.setAttribute('id', 'invalid-json-dynamic')
+			document.body.appendChild(element)
+		})
+
+		const dynamicElement = page.locator('#invalid-json-dynamic')
+		await expect(dynamicElement).toHaveText('9,999') // Should fall back to default
+
+		// Verify console error was logged for dynamic creation
+		const hasJsonError = consoleMessages.some(
+			msg => msg.includes('Invalid JSON') || msg.includes('JSON'),
+		)
+		expect(hasJsonError).toBe(true)
+	})
+
+	test('handles missing required currency gracefully', async ({ page }) => {
+		// Test HTML markup error logging - should log error on page load
+		const htmlElement = page.locator('#missing-currency-html')
+		await expect(htmlElement).toHaveText('1,000') // Should fall back to default
+
+		// Test dynamic creation also logs errors
+		const consoleMessages: string[] = []
+		page.on('console', msg => {
+			if (msg.type() === 'error') {
+				consoleMessages.push(msg.text())
+			}
+		})
+
+		await page.evaluate(() => {
+			const element = document.createElement('basic-number') as any
+			element.value = 9999
+			element.setAttribute('options', '{"style":"currency"}')
+			element.setAttribute('id', 'missing-currency-dynamic')
+			document.body.appendChild(element)
+		})
+
+		const dynamicElement = page.locator('#missing-currency-dynamic')
+		await expect(dynamicElement).toHaveText('9,999') // Should fall back to default
+
+		// Verify console error was logged for dynamic creation
+		const hasCurrencyError = consoleMessages.some(
+			msg => msg.includes('currency') && msg.includes('CHF'),
+		)
+		expect(hasCurrencyError).toBe(true)
+	})
+
+	test('handles missing required unit gracefully', async ({ page }) => {
+		// Test HTML markup error logging - should log error on page load
+		const htmlElement = page.locator('#missing-unit-html')
+		await expect(htmlElement).toHaveText('500') // Should fall back to default
+
+		// Test dynamic creation also logs errors
+		const consoleMessages: string[] = []
+		page.on('console', msg => {
+			if (msg.type() === 'error') {
+				consoleMessages.push(msg.text())
+			}
+		})
+
+		await page.evaluate(() => {
+			const element = document.createElement('basic-number') as any
+			element.value = 9999
+			element.setAttribute('options', '{"style":"unit"}')
+			element.setAttribute('id', 'missing-unit-dynamic')
+			document.body.appendChild(element)
+		})
+
+		const dynamicElement = page.locator('#missing-unit-dynamic')
+		await expect(dynamicElement).toHaveText('9,999') // Should fall back to default
+
+		// Verify console error was logged for dynamic creation
+		const hasUnitError = consoleMessages.some(
+			msg =>
+				msg.includes('unit')
+				&& (msg.includes('liter') || msg.includes('kilometer')),
+		)
+		expect(hasUnitError).toBe(true)
+	})
+
+	test('works with decimal style formatting', async ({ page }) => {
+		// Use the existing decimal test element from HTML
+		const decimalElement = page.locator('#decimal-test')
+		// Should respect the fraction digit limits
+		await expect(decimalElement).toHaveText('1,234.568')
+	})
+
+	test('inherits locale from closest lang attribute', async ({ page }) => {
+		// Use the existing inheritance test element from HTML
+		const inheritElement = page.locator('#inherit-test')
+		// Should use German formatting for currency
+		await expect(inheritElement).toContainText('€')
+		await expect(inheritElement).toContainText('1') // Should contain the number
+	})
+
+	test('handles zero and negative values correctly', async ({ page }) => {
+		// Use the existing elements from HTML
+		const zeroElement = page.locator('#zero-test')
+		const negativeElement = page.locator('#negative-test')
+
+		await expect(zeroElement).toHaveText('0')
+		await expect(negativeElement).toHaveText('-1,234.5')
+	})
+})

package/examples/basic-number/basic-number.ts

@@ -0,0 +1,124 @@
+import { asNumber, type Component, defineComponent, setText } from '../..'
+
+export type BasicNumberProps = {
+	value: number
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'basic-number': Component<BasicNumberProps>
+	}
+}
+
+type Logger = {
+	onWarn: (message: string) => void
+	onError: (message: string) => void
+}
+
+const FALLBACK_LOCALE = 'en'
+
+function getNumberFormatter(
+	locale: string,
+	rawOptions: string | null,
+	logger: Logger = {
+		onWarn: console.warn,
+		onError: console.error,
+	},
+) {
+	const useFallback = () => new Intl.NumberFormat(locale)
+	if (!rawOptions) return useFallback()
+	const { onWarn, onError } = logger
+
+	let o: Intl.NumberFormatOptions = {}
+	try {
+		o = JSON.parse(rawOptions)
+	} catch (error) {
+		onError?.(`Invalid JSON: ${error}`)
+		return useFallback()
+	}
+
+	const style = o.style ?? 'decimal'
+
+	const drops: string[] = []
+	if (style === 'currency') {
+		if (
+			!o.currency ||
+			typeof o.currency !== 'string' ||
+			o.currency.length !== 3
+		) {
+			onError?.(
+				`style="currency" requires a 3-letter ISO currency (e.g. "CHF").`,
+			)
+			return useFallback()
+		}
+	} else {
+		drops.push('currency', 'currencyDisplay', 'currencySign')
+	}
+
+	if (style === 'unit') {
+		if (!o.unit || typeof o.unit !== 'string') {
+			onError?.(
+				`style="unit" requires a "unit" (e.g. "liter", "kilometer-per-hour").`,
+			)
+			return useFallback()
+		}
+	} else {
+		drops.push('unit', 'unitDisplay')
+	}
+
+	if (o.notation && o.notation !== 'compact') drops.push('compactDisplay')
+
+	const sanitized: Intl.NumberFormatOptions = {}
+	for (const [k, v] of Object.entries(o)) {
+		if (!drops.includes(k)) sanitized[k] = v
+		else onWarn?.(`Option "${k}" is ignored for style="${style}".`)
+	}
+
+	const { minimumFractionDigits: minFD, maximumFractionDigits: maxFD } =
+		sanitized
+	if (minFD != null && maxFD != null && minFD > maxFD) {
+		onWarn?.(
+			`minimumFractionDigits (${minFD}) > maximumFractionDigits (${maxFD}); swapping.`,
+		)
+		sanitized.minimumFractionDigits = maxFD
+		sanitized.maximumFractionDigits = minFD
+	}
+	const { minimumSignificantDigits: minSD, maximumSignificantDigits: maxSD } =
+		sanitized
+	if (minSD != null && maxSD != null && minSD > maxSD) {
+		onWarn?.(
+			`minimumSignificantDigits (${minSD}) > maximumSignificantDigits (${maxSD}); swapping.`,
+		)
+		sanitized.minimumSignificantDigits = maxSD
+		sanitized.maximumSignificantDigits = minSD
+	}
+
+	try {
+		const formatter = new Intl.NumberFormat(locale, sanitized)
+		if (formatter.resolvedOptions().locale !== locale)
+			onWarn(
+				`Fall back to locale ${formatter.resolvedOptions().locale} instead of ${locale}`,
+			)
+		return formatter
+	} catch (e) {
+		onError?.(
+			`Options rejected by Intl.NumberFormat: ${e instanceof Error ? e.message : String(e)}`,
+		)
+		return useFallback()
+	}
+}
+
+export default defineComponent<BasicNumberProps>(
+	'basic-number',
+	{ value: asNumber() },
+	undefined,
+	({ host }) => {
+		const formatter = getNumberFormatter(
+			host.closest('[lang]')?.getAttribute('lang') || FALLBACK_LOCALE,
+			host.getAttribute('options'),
+		)
+		return {
+			host: setText(() => formatter.format(host.value)),
+		}
+	},
+)

package/examples/basic-pluralize/basic-pluralize.html

@@ -0,0 +1,64 @@
+<!-- Default example -->
+<basic-pluralize>
+	<p class="none">Well done, all done!</p>
+	<p class="some">
+		<span class="count"></span>
+		task<span class="other">s</span>
+		remaining
+	</p>
+</basic-pluralize>
+
+<!-- Test example with plural categories -->
+<basic-pluralize id="plural-test" count="1">
+	<p class="none">Nobody</p>
+	<p class="some">
+		<span class="count"></span>
+		<span class="one">person</span>
+		<span class="other">people</span>
+	</p>
+</basic-pluralize>
+
+<!-- Welsh locale example - demonstrates complex pluralization rules
+     Welsh has 6 plural categories: zero, one, two, few, many, other
+     Example: "dog" in Welsh
+     0 = cŵn (zero), 1 = ci (one), 2 = gi (two), 3 = chi (few), 6 = chi (many), 4/5/7+ = ci (other) -->
+<div lang="cy">
+	<basic-pluralize id="welsh-test" count="0">
+		<p class="none">Dim anifeiliaid!</p>
+		<p class="some">
+			<span class="count"></span>
+			<span class="zero">cŵn</span>
+			<span class="one">ci</span>
+			<span class="two">gi</span>
+			<span class="few">chi</span>
+			<span class="many">chi</span>
+			<span class="other">ci</span>
+		</p>
+	</basic-pluralize>
+</div>
+
+<!-- Ordinal example -->
+<basic-pluralize id="ordinal-test" count="1" ordinal>
+	<p class="none">None</p>
+	<p class="some">
+		<span class="count"></span><span class="one">st</span
+		><span class="two">nd</span><span class="few">rd</span
+		><span class="other">th</span>
+	</p>
+</basic-pluralize>
+
+<!-- Multiple instances example -->
+<basic-pluralize id="pluralize-1" count="0">
+	<p class="none">No items</p>
+	<p class="some">
+		<span class="count"></span> item<span class="other">s</span>
+	</p>
+</basic-pluralize>
+
+<basic-pluralize id="pluralize-2" count="5">
+	<p class="none">No filters</p>
+	<p class="some">
+		<span class="count"></span> filter criteri<span class="one">on</span
+		><span class="other">a</span>
+	</p>
+</basic-pluralize>

package/examples/basic-pluralize/basic-pluralize.spec.ts

@@ -0,0 +1,258 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('basic-pluralize component', () => {
+	test.beforeEach(async ({ page }) => {
+		page.on('console', msg => {
+			console.log(`[browser] ${msg.type()}: ${msg.text()}`)
+		})
+
+		await page.goto('http://localhost:3000/test/basic-pluralize.html')
+		await page.waitForSelector('basic-pluralize')
+	})
+
+	test('renders correctly with count=0 (shows none, hides some)', async ({
+		page,
+	}) => {
+		// Set count to 0 on the default element
+		await page.evaluate(() => {
+			const element = document.querySelector('basic-pluralize') as any
+			element.setAttribute('count', '0')
+		})
+
+		// Should show .none and hide .some when count is 0
+		const defaultElement = page.locator('basic-pluralize').first()
+		const noneElement = defaultElement.locator('.none')
+		const someElement = defaultElement.locator('.some')
+
+		await expect(noneElement).toBeVisible()
+		await expect(someElement).toBeHidden()
+	})
+
+	test('renders correctly with count>0 (hides none, shows some)', async ({
+		page,
+	}) => {
+		// Set count to 5 on the default element
+		await page.evaluate(() => {
+			const element = document.querySelector('basic-pluralize') as any
+			element.setAttribute('count', '5')
+		})
+
+		const defaultElement = page.locator('basic-pluralize').first()
+		const noneElement = defaultElement.locator('.none')
+		const someElement = defaultElement.locator('.some')
+		const countSpan = defaultElement.locator('.count')
+
+		await expect(noneElement).toBeHidden()
+		await expect(someElement).toBeVisible()
+		await expect(countSpan).toHaveText('5')
+	})
+
+	test('updates count display when attribute changes', async ({ page }) => {
+		await page.evaluate(() => {
+			const element = document.querySelector('basic-pluralize') as any
+			element.setAttribute('count', '1')
+		})
+
+		const defaultElement = page.locator('basic-pluralize').first()
+		const countSpan = defaultElement.locator('.count')
+		await expect(countSpan).toHaveText('1')
+
+		// Change to different count
+		await page.evaluate(() => {
+			const element = document.querySelector('basic-pluralize') as any
+			element.setAttribute('count', '42')
+		})
+
+		await expect(countSpan).toHaveText('42')
+	})
+
+	test('handles plural categories correctly (English)', async ({ page }) => {
+		// Use the existing #plural-test element from HTML
+		const testElement = page.locator('#plural-test')
+		const oneElement = testElement.locator('.one')
+		const otherElement = testElement.locator('.other')
+
+		// Should start with count=1, showing 'one' category
+		await expect(oneElement).toBeVisible()
+		await expect(otherElement).toBeHidden()
+
+		// Test count = 2 (should show 'other' category)
+		await page.evaluate(() => {
+			const element = document.querySelector('#plural-test') as any
+			element.setAttribute('count', '2')
+		})
+
+		await expect(oneElement).toBeHidden()
+		await expect(otherElement).toBeVisible()
+	})
+
+	test('handles Welsh pluralization with all 6 categories (zero, one, two, few, many, other)', async ({
+		page,
+	}) => {
+		// Use the existing Welsh example from HTML
+		const welshElement = page.locator('#welsh-test')
+		const countSpan = welshElement.locator('.count')
+
+		// Should start with count=0, showing zero form "cŵn"
+		await expect(countSpan).toHaveText('0')
+		await expect(welshElement.locator('.none')).toBeVisible()
+		await expect(welshElement.locator('.some')).toBeHidden()
+
+		// Test count=1 (should show "ci" - one form)
+		await page.evaluate(() => {
+			const element = document.querySelector('#welsh-test') as any
+			element.setAttribute('count', '1')
+		})
+		await expect(welshElement.locator('.none')).toBeHidden()
+		await expect(welshElement.locator('.some')).toBeVisible()
+		await expect(welshElement.locator('.one')).toBeVisible()
+		await expect(welshElement.locator('.other')).toBeHidden()
+
+		// Test count=2 (should show "gi" - two form)
+		await page.evaluate(() => {
+			const element = document.querySelector('#welsh-test') as any
+			element.setAttribute('count', '2')
+		})
+		await expect(welshElement.locator('.one')).toBeHidden()
+		await expect(welshElement.locator('.two')).toBeVisible()
+		await expect(welshElement.locator('.other')).toBeHidden()
+
+		// Test count=3 (should show "chi" - few form)
+		await page.evaluate(() => {
+			const element = document.querySelector('#welsh-test') as any
+			element.setAttribute('count', '3')
+		})
+		await expect(welshElement.locator('.two')).toBeHidden()
+		await expect(welshElement.locator('.few')).toBeVisible()
+		await expect(welshElement.locator('.other')).toBeHidden()
+
+		// Test count=6 (should show "chi" - many form)
+		await page.evaluate(() => {
+			const element = document.querySelector('#welsh-test') as any
+			element.setAttribute('count', '6')
+		})
+		await expect(welshElement.locator('.few')).toBeHidden()
+		await expect(welshElement.locator('.many')).toBeVisible()
+		await expect(welshElement.locator('.other')).toBeHidden()
+
+		// Test count=4 (should show "ci" - other form)
+		await page.evaluate(() => {
+			const element = document.querySelector('#welsh-test') as any
+			element.setAttribute('count', '4')
+		})
+		await expect(welshElement.locator('.many')).toBeHidden()
+		await expect(welshElement.locator('.other')).toBeVisible()
+		await expect(welshElement.locator('.few')).toBeHidden()
+	})
+
+	test('handles ordinal attribute correctly', async ({ page }) => {
+		// Use the existing #ordinal-test element from HTML
+		const ordinalElement = page.locator('#ordinal-test')
+		const countSpan = ordinalElement.locator('.count')
+
+		// Should start with count=1, showing "st" (first)
+		await expect(countSpan).toHaveText('1')
+		await expect(ordinalElement.locator('.some')).toBeVisible()
+		await expect(ordinalElement.locator('.none')).toBeHidden()
+		await expect(ordinalElement.locator('.one')).toBeVisible()
+		await expect(ordinalElement.locator('.other')).toBeHidden()
+
+		// Test count=2 (should show "nd" - second)
+		await page.evaluate(() => {
+			const element = document.querySelector('#ordinal-test') as any
+			element.setAttribute('count', '2')
+		})
+		await expect(countSpan).toHaveText('2')
+		await expect(ordinalElement.locator('.one')).toBeHidden()
+		await expect(ordinalElement.locator('.two')).toBeVisible()
+		await expect(ordinalElement.locator('.other')).toBeHidden()
+
+		// Test count=3 (should show "rd" - third)
+		await page.evaluate(() => {
+			const element = document.querySelector('#ordinal-test') as any
+			element.setAttribute('count', '3')
+		})
+		await expect(countSpan).toHaveText('3')
+		await expect(ordinalElement.locator('.two')).toBeHidden()
+		await expect(ordinalElement.locator('.few')).toBeVisible()
+		await expect(ordinalElement.locator('.other')).toBeHidden()
+
+		// Test count=4 (should show "th" - other)
+		await page.evaluate(() => {
+			const element = document.querySelector('#ordinal-test') as any
+			element.setAttribute('count', '4')
+		})
+		await expect(countSpan).toHaveText('4')
+		await expect(ordinalElement.locator('.few')).toBeHidden()
+		await expect(ordinalElement.locator('.other')).toBeVisible()
+	})
+
+	test('handles multiple instances with different counts', async ({ page }) => {
+		// Use the existing elements from HTML
+		const firstElement = page.locator('#pluralize-1')
+		const secondElement = page.locator('#pluralize-2')
+
+		// First element (count=0) - should show "No items"
+		await expect(firstElement.locator('.none')).toBeVisible()
+		await expect(firstElement.locator('.some')).toBeHidden()
+
+		// Second element (count=5) - should show "5 filter criteria" (other form)
+		await expect(secondElement.locator('.none')).toBeHidden()
+		await expect(secondElement.locator('.some')).toBeVisible()
+		await expect(secondElement.locator('.count')).toHaveText('5')
+		await expect(secondElement.locator('.other')).toBeVisible()
+		await expect(secondElement.locator('.one')).toBeHidden()
+	})
+
+	test('handles large counts correctly', async ({ page }) => {
+		await page.evaluate(() => {
+			const element = document.querySelector('basic-pluralize') as any
+			element.setAttribute('count', '1000')
+		})
+
+		const defaultElement = page.locator('basic-pluralize').first()
+		const noneElement = defaultElement.locator('.none')
+		const someElement = defaultElement.locator('.some')
+		const countSpan = defaultElement.locator('.count')
+
+		// Large count should show .some and hide .none
+		await expect(noneElement).toBeHidden()
+		await expect(someElement).toBeVisible()
+		await expect(countSpan).toHaveText('1000')
+	})
+
+	test('handles negative counts by falling back to 0', async ({ page }) => {
+		await page.evaluate(() => {
+			const element = document.querySelector('basic-pluralize') as any
+			element.setAttribute('count', '-5')
+		})
+
+		const defaultElement = page.locator('basic-pluralize').first()
+		const noneElement = defaultElement.locator('.none')
+		const someElement = defaultElement.locator('.some')
+		const countSpan = defaultElement.locator('.count')
+
+		// Negative count should be treated as 0: .none shows, .some hides
+		await expect(noneElement).toBeVisible()
+		await expect(someElement).toBeHidden()
+		await expect(countSpan).toHaveText('0')
+	})
+
+	test('handles non-numeric count gracefully', async ({ page }) => {
+		// Test with invalid count - asPositiveInteger should default to 0
+		await page.evaluate(() => {
+			const element = document.querySelector('basic-pluralize') as any
+			element.setAttribute('count', 'invalid')
+		})
+
+		const defaultElement = page.locator('basic-pluralize').first()
+		const noneElement = defaultElement.locator('.none')
+		const someElement = defaultElement.locator('.some')
+		const countSpan = defaultElement.locator('.count')
+
+		// Should default to 0, showing .none
+		await expect(noneElement).toBeVisible()
+		await expect(someElement).toBeHidden()
+		await expect(countSpan).toHaveText('0')
+	})
+})