compote-ui 0.51.0 → 0.52.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/data-table-v8/column-helper.js +3 -3
  2. package/dist/components/data-table-v8/toolbar/data-table-column-filter.svelte +26 -28
  3. package/dist/components/qr-code/qr-code.svelte +28 -0
  4. package/dist/components/qr-code/qr-code.svelte.d.ts +9 -0
  5. package/dist/index.d.ts +1 -0
  6. package/dist/index.js +1 -0
  7. package/package.json +9 -9
package/dist/components/data-table-v8/column-helper.js CHANGED
@@ -1,7 +1,7 @@
1
1
  const TYPE_DEFAULTS = {
2
- number: { align: 'right' },
3
- currency: { align: 'right' },
4
- percent: { align: 'right' },
2
+ number: { align: 'right', size: 120 },
3
+ currency: { align: 'right', size: 120 },
4
+ percent: { align: 'right', size: 100 },
5
5
  date: { align: 'center', size: 110 },
6
6
  time: { align: 'center', size: 80 },
7
7
  'date-time': { align: 'center', size: 160 },
package/dist/components/data-table-v8/toolbar/data-table-column-filter.svelte CHANGED
@@ -267,12 +267,12 @@
267
267
  </button>
268
268
  </div>
269
269
  {:else if getColumnType(column) === 'select'}
270
- {@const allOptions = getFacetedValues(column)}
271
- {@const search = localSelectSearch[column.id] ?? ''}
272
- {@const options = search
270
+ {const allOptions = getFacetedValues(column)}
271
+ {const search = localSelectSearch[column.id] ?? ''}
272
+ {const options = search
273
273
  ? allOptions.filter((o) => o.toLowerCase().includes(search.toLowerCase()))
274
274
  : allOptions}
275
- {@const selected = getSelectValues(column)}
275
+ {const selected = getSelectValues(column)}
276
276
  <div class="flex flex-col gap-1">
277
277
  <Field.Root>
278
278
  <Field.Input
@@ -285,30 +285,28 @@
285
285
  }}
286
286
  />
287
287
  </Field.Root>
288
- <div class="max-h-44 overflow-hidden">
289
- <ScrollArea.Root class="h-full">
290
- <ScrollArea.Viewport>
291
- <ScrollArea.Content>
292
- <div class="flex flex-col gap-0.5">
293
- {#each options as option (option)}
294
- <Checkbox
295
- size="sm"
296
- label={option}
297
- class="min-h-7 rounded-sm px-2 hover:bg-surface-2"
298
- checked={selected.includes(option)}
299
- onCheckedChange={({ checked }) =>
300
- handleSelectChange(column, option, checked === true)}
301
- />
302
- {/each}
303
- </div>
304
- </ScrollArea.Content>
305
- </ScrollArea.Viewport>
306
- <ScrollArea.Scrollbar orientation="vertical">
307
- <ScrollArea.Thumb />
308
- </ScrollArea.Scrollbar>
309
- <ScrollArea.Corner />
310
- </ScrollArea.Root>
311
- </div>
288
+ <ScrollArea.Root class="max-h-44">
289
+ <ScrollArea.Viewport>
290
+ <ScrollArea.Content>
291
+ <div class="flex flex-col gap-0.5">
292
+ {#each options as option (option)}
293
+ <Checkbox
294
+ size="sm"
295
+ label={option}
296
+ class="min-h-7 rounded-sm px-2 hover:bg-surface-2"
297
+ checked={selected.includes(option)}
298
+ onCheckedChange={({ checked }) =>
299
+ handleSelectChange(column, option, checked === true)}
300
+ />
301
+ {/each}
302
+ </div>
303
+ </ScrollArea.Content>
304
+ </ScrollArea.Viewport>
305
+ <ScrollArea.Scrollbar orientation="vertical">
306
+ <ScrollArea.Thumb />
307
+ </ScrollArea.Scrollbar>
308
+ <ScrollArea.Corner />
309
+ </ScrollArea.Root>
312
310
  </div>
313
311
  {:else}
314
312
  <Field.Root>
package/dist/components/qr-code/qr-code.svelte ADDED
@@ -0,0 +1,28 @@
1
+ <script lang="ts">
2
+ import { QrCode, type QrCodeRootBaseProps } from '@ark-ui/svelte/qr-code';
3
+ import { cn } from 'tailwind-variants';
4
+
5
+ type Size = 'sm' | 'md' | 'lg' | 'xl';
6
+
7
+ interface Props extends QrCodeRootBaseProps {
8
+ size?: Size;
9
+ class?: string;
10
+ }
11
+
12
+ const sizeMap: Record<Size, number> = {
13
+ sm: 80,
14
+ md: 120,
15
+ lg: 160,
16
+ xl: 200
17
+ };
18
+
19
+ let { size = 'md', class: className, ...restProps }: Props = $props();
20
+
21
+ const px = $derived(sizeMap[size]);
22
+ </script>
23
+
24
+ <QrCode.Root {...restProps} class={cn('inline-flex flex-col', className)} style="--qr-size: {px}px">
25
+ <QrCode.Frame class="fill-current" style="width: var(--qr-size); height: var(--qr-size);">
26
+ <QrCode.Pattern />
27
+ </QrCode.Frame>
28
+ </QrCode.Root>
package/dist/components/qr-code/qr-code.svelte.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { QrCode, type QrCodeRootBaseProps } from '@ark-ui/svelte/qr-code';
2
+ type Size = 'sm' | 'md' | 'lg' | 'xl';
3
+ interface Props extends QrCodeRootBaseProps {
4
+ size?: Size;
5
+ class?: string;
6
+ }
7
+ declare const QrCode: import("svelte").Component<Props, {}, "">;
8
+ type QrCode = ReturnType<typeof QrCode>;
9
+ export default QrCode;
package/dist/index.d.ts CHANGED
@@ -36,6 +36,7 @@ export * as Listbox from './components/listbox';
36
36
  export { default as NumberInput } from './components/number-input/number-input.svelte';
37
37
  export type { NumberInputProps } from './components/number-input/types';
38
38
  export * as Popover from './components/popover';
39
+ export { default as QrCode } from './components/qr-code/qr-code.svelte';
39
40
  export { default as Select } from './components/select/select.svelte';
40
41
  export { default as Splitter } from './components/splitter/splitter.svelte';
41
42
  export type { SplitterPanelConfig, SplitterProps } from './components/splitter/types';
package/dist/index.js CHANGED
@@ -26,6 +26,7 @@ export { default as JsonTreeView } from './components/json-tree-view/json-tree-v
26
26
  export * as Listbox from './components/listbox';
27
27
  export { default as NumberInput } from './components/number-input/number-input.svelte';
28
28
  export * as Popover from './components/popover';
29
+ export { default as QrCode } from './components/qr-code/qr-code.svelte';
29
30
  export { default as Select } from './components/select/select.svelte';
30
31
  export { default as Splitter } from './components/splitter/splitter.svelte';
31
32
  export { default as Switch } from './components/switch/switch.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "compote-ui",
3
- "version": "0.51.0",
3
+ "version": "0.52.0",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "dev": "vite dev --open",
@@ -64,25 +64,25 @@
64
64
  "@sveltejs/package": "^2.5.7",
65
65
  "@sveltejs/vite-plugin-svelte": "7.1.2",
66
66
  "@tailwindcss/vite": "^4.2.4",
67
- "@tanstack/svelte-virtual": "^3.13.26",
67
+ "@tanstack/svelte-virtual": "^3.13.28",
68
68
  "@tanstack/table-core": "^8.21.3",
69
69
  "@types/node": "^22.19.18",
70
- "eslint": "^10.4.0",
70
+ "eslint": "^10.4.1",
71
71
  "eslint-config-prettier": "^10.1.8",
72
- "eslint-plugin-svelte": "^3.17.0",
72
+ "eslint-plugin-svelte": "^3.19.0",
73
73
  "globals": "^17.5.0",
74
74
  "prettier": "^3.8.3",
75
- "prettier-plugin-svelte": "^4.0.1",
75
+ "prettier-plugin-svelte": "^4.1.0",
76
76
  "prettier-plugin-tailwindcss": "^0.8.0",
77
77
  "publint": "^0.3.21",
78
- "svelte": "^5.55.9",
79
- "svelte-check": "^4.4.6",
78
+ "svelte": "^5.56.1",
79
+ "svelte-check": "^4.5.0",
80
80
  "tailwindcss": "^4.2.4",
81
81
  "tw-animate-css": "^1.4.0",
82
82
  "typescript": "^6.0.3",
83
- "typescript-eslint": "^8.60.0",
83
+ "typescript-eslint": "^8.60.1",
84
84
  "unplugin-icons": "^23.0.1",
85
- "vite": "^8.0.14"
85
+ "vite": "^8.0.16"
86
86
  },
87
87
  "keywords": [
88
88
  "svelte"