layerchart 0.16.0 → 0.17.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 (77) hide show
  1. package/dist/components/Arc.svelte +10 -10
  2. package/dist/components/Arc.svelte.d.ts +2 -1
  3. package/dist/components/Area.svelte +10 -10
  4. package/dist/components/AreaStack.svelte +25 -25
  5. package/dist/components/Axis.svelte +131 -0
  6. package/dist/components/Axis.svelte.d.ts +25 -0
  7. package/dist/components/Bars.svelte +30 -71
  8. package/dist/components/Bars.svelte.d.ts +1 -1
  9. package/dist/components/Baseline.svelte +19 -19
  10. package/dist/components/Blur.svelte +6 -6
  11. package/dist/components/Chart.svelte +46 -46
  12. package/dist/components/ChartClipPath.svelte +7 -7
  13. package/dist/components/Circle.svelte +7 -7
  14. package/dist/components/CircleClipPath.svelte +4 -4
  15. package/dist/components/ClipPath.svelte +3 -3
  16. package/dist/components/ClipPathUse.svelte +4 -4
  17. package/dist/components/ConnectedPoints.svelte +16 -16
  18. package/dist/components/GeoPath.svelte +11 -11
  19. package/dist/components/GeoPoint.svelte +3 -3
  20. package/dist/components/GeoTile.svelte +5 -5
  21. package/dist/components/Graticule.svelte +12 -12
  22. package/dist/components/Group.svelte +1 -1
  23. package/dist/components/HighlightLine.svelte +25 -25
  24. package/dist/components/HighlightRect.svelte +1 -1
  25. package/dist/components/Labels.svelte +82 -73
  26. package/dist/components/Labels.svelte.d.ts +2 -2
  27. package/dist/components/Legend.svelte +57 -57
  28. package/dist/components/Legend.svelte.d.ts +1 -1
  29. package/dist/components/Line.svelte +8 -8
  30. package/dist/components/LinearGradient.svelte +22 -22
  31. package/dist/components/Link.svelte +9 -9
  32. package/dist/components/Link.svelte.d.ts +1 -1
  33. package/dist/components/Pack.svelte.d.ts +2 -2
  34. package/dist/components/Partition.svelte.d.ts +5 -5
  35. package/dist/components/Path.svelte +16 -16
  36. package/dist/components/Pattern.svelte +3 -3
  37. package/dist/components/Pie.svelte +21 -21
  38. package/dist/components/Pie.svelte.d.ts +18 -18
  39. package/dist/components/Points.svelte +14 -14
  40. package/dist/components/Rect.svelte +8 -8
  41. package/dist/components/RectClipPath.svelte +4 -4
  42. package/dist/components/Sankey.svelte.d.ts +2 -2
  43. package/dist/components/Text.svelte +21 -21
  44. package/dist/components/Threshold.svelte +25 -25
  45. package/dist/components/TileImage.svelte +21 -21
  46. package/dist/components/Tooltip.svelte +25 -25
  47. package/dist/components/TooltipContext.svelte +80 -78
  48. package/dist/components/TooltipContext.svelte.d.ts +1 -1
  49. package/dist/components/TooltipItem.svelte +10 -10
  50. package/dist/components/Tree.svelte.d.ts +9 -9
  51. package/dist/components/Zoom.svelte +18 -18
  52. package/dist/components/index.d.ts +1 -2
  53. package/dist/components/index.js +1 -2
  54. package/dist/docs/Blockquote.svelte +1 -1
  55. package/dist/docs/Code.svelte +19 -19
  56. package/dist/docs/Code.svelte.d.ts +2 -2
  57. package/dist/docs/GeoDebug.svelte +25 -25
  58. package/dist/docs/Header1.svelte +1 -1
  59. package/dist/docs/Layout.svelte +5 -5
  60. package/dist/docs/Link.svelte +1 -1
  61. package/dist/docs/Preview.svelte +24 -24
  62. package/dist/docs/RangeField.svelte +18 -18
  63. package/dist/docs/TilesetField.svelte +13 -13
  64. package/dist/docs/ViewSourceButton.svelte +42 -0
  65. package/dist/docs/ViewSourceButton.svelte.d.ts +19 -0
  66. package/dist/docs/ZoomControls.svelte +39 -39
  67. package/dist/docs/ZoomControls.svelte.d.ts +2 -2
  68. package/dist/utils/genData.d.ts +2 -2
  69. package/dist/utils/rect.d.ts +19 -0
  70. package/dist/utils/rect.js +97 -0
  71. package/dist/utils/scales.d.ts +8 -0
  72. package/dist/utils/scales.js +17 -0
  73. package/package.json +90 -90
  74. package/dist/components/AxisX.svelte +0 -43
  75. package/dist/components/AxisX.svelte.d.ts +0 -38
  76. package/dist/components/AxisY.svelte +0 -55
  77. package/dist/components/AxisY.svelte.d.ts +0 -38
package/dist/components/TooltipContext.svelte CHANGED
@@ -30,15 +30,15 @@ import { createPropertySortFunc, createSortFunc } from 'svelte-ux/utils/sort';
30
30
  const dispatch = createEventDispatcher();
31
31
  const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, padding } = getContext('LayerCake');
32
32
  /*
33
- TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
34
- - scaleTime / scaleLinear: bisect
35
- - scaleTime / scaleLinear (multi/stack): bisect
36
- - scaleTime / scaleBand: bisect (or band)
37
- - scaleTime (multi) / scaleBand: bounds (or possible band if not overlapping)
38
- - scaleBand, scaleLinear: band (or bounds)
39
- - scaleBand, scaleLinear: band (or bounds) - multiple (overlapping) bars
40
- - scaleLinear, scaleLinear: voronoi (or quadtree)
41
- */
33
+ TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
34
+ - scaleTime / scaleLinear: bisect
35
+ - scaleTime / scaleLinear (multi/stack): bisect
36
+ - scaleTime / scaleBand: bisect (or band)
37
+ - scaleTime (multi) / scaleBand: bounds (or possible band if not overlapping)
38
+ - scaleBand, scaleLinear: band (or bounds)
39
+ - scaleBand, scaleLinear: band (or bounds) - multiple (overlapping) bars
40
+ - scaleLinear, scaleLinear: voronoi (or quadtree)
41
+ */
42
42
  export let mode = 'bisect-x';
43
43
  export let snapToDataX = false;
44
44
  export let snapToDataY = false;
@@ -168,8 +168,8 @@ function showTooltip(event, tooltipData) {
168
168
  }
169
169
  $tooltip = {
170
170
  ...$tooltip,
171
- left: snapToDataX ? $xGet(tooltipData) : localX,
172
- top: snapToDataY ? $yGet(tooltipData) : localY,
171
+ left: snapToDataX ? $xGet(tooltipData) + $padding.left : localX,
172
+ top: snapToDataY ? $yGet(tooltipData) + $padding.top : localY,
173
173
  data: tooltipData
174
174
  };
175
175
  }
@@ -282,76 +282,78 @@ $: if (mode === 'bounds' || mode === 'band') {
282
282
  <slot tooltip={$tooltip} />
283
283
 
284
284
  {#if ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)}
285
- <Html>
286
- <div
287
- class="absolute"
288
- style="width: {$width}px; height: {$height}px; background: _rgba(255 0 0 / .25); z-index: 9999"
289
- on:touchstart={showTooltip}
290
- on:touchmove={showTooltip}
291
- on:mousemove={showTooltip}
292
- on:mouseleave={hideTooltip}
293
- on:click={(e) => {
294
- dispatch('click', { data: $tooltip?.data });
295
- }}
296
- />
297
- </Html>
285
+ <Html>
286
+ <div
287
+ class="absolute"
288
+ style:width="{$width}px"
289
+ style:height="{$height}px"
290
+ style:background={debug ? 'rgba(255 0 0 / .1)' : undefined}
291
+ on:touchstart={showTooltip}
292
+ on:touchmove={showTooltip}
293
+ on:mousemove={showTooltip}
294
+ on:mouseleave={hideTooltip}
295
+ on:click={(e) => {
296
+ dispatch('click', { data: $tooltip?.data });
297
+ }}
298
+ />
299
+ </Html>
298
300
  {:else if mode === 'voronoi'}
299
- <Svg>
300
- {#each points as point, i}
301
- <g class="tooltip-voronoi">
302
- <path
303
- d={voronoi.renderCell(i)}
304
- style:fill={debug ? 'red' : 'transparent'}
305
- style:fill-opacity={debug ? 0.1 : 0}
306
- style:stroke={debug ? 'red' : 'transparent'}
307
- on:mousemove={(e) => showTooltip(e, point.data)}
308
- on:mouseleave={hideTooltip}
309
- on:click={(e) => {
310
- dispatch('click', { data: point.data });
311
- }}
312
- />
313
- </g>
314
- {/each}
315
- </Svg>
301
+ <Svg>
302
+ {#each points as point, i}
303
+ <g class="tooltip-voronoi">
304
+ <path
305
+ d={voronoi.renderCell(i)}
306
+ style:fill={debug ? 'red' : 'transparent'}
307
+ style:fill-opacity={debug ? 0.1 : 0}
308
+ style:stroke={debug ? 'red' : 'transparent'}
309
+ on:mousemove={(e) => showTooltip(e, point.data)}
310
+ on:mouseleave={hideTooltip}
311
+ on:click={(e) => {
312
+ dispatch('click', { data: point.data });
313
+ }}
314
+ />
315
+ </g>
316
+ {/each}
317
+ </Svg>
316
318
  {:else if mode === 'bounds' || mode === 'band'}
317
- <Svg>
318
- <g class="tooltip-rects">
319
- {#each rects as rect}
320
- <rect
321
- x={rect.x}
322
- y={rect.y}
323
- width={rect.width}
324
- height={rect.height}
325
- style:fill={debug ? 'red' : 'transparent'}
326
- style:fill-opacity={debug ? 0.1 : 0}
327
- style:stroke={debug ? 'red' : 'transparent'}
328
- on:mousemove={(e) => showTooltip(e, rect.data)}
329
- on:mouseleave={hideTooltip}
330
- on:click={(e) => {
331
- dispatch('click', { data: rect.data });
332
- }}
333
- />
334
- {/each}
335
- </g>
336
- </Svg>
319
+ <Svg>
320
+ <g class="tooltip-rects">
321
+ {#each rects as rect}
322
+ <rect
323
+ x={rect.x}
324
+ y={rect.y}
325
+ width={rect.width}
326
+ height={rect.height}
327
+ style:fill={debug ? 'red' : 'transparent'}
328
+ style:fill-opacity={debug ? 0.1 : 0}
329
+ style:stroke={debug ? 'red' : 'transparent'}
330
+ on:mousemove={(e) => showTooltip(e, rect.data)}
331
+ on:mouseleave={hideTooltip}
332
+ on:click={(e) => {
333
+ dispatch('click', { data: rect.data });
334
+ }}
335
+ />
336
+ {/each}
337
+ </g>
338
+ </Svg>
337
339
  {/if}
338
340
 
339
341
  {#if mode === 'quadtree' && debug}
340
- <Svg>
341
- <ChartClipPath>
342
- <g class="tooltip-quadtree">
343
- {#each quadtreeRects(quadtree, false) as rect}
344
- <rect
345
- x={rect.x}
346
- y={rect.y}
347
- width={rect.width}
348
- height={rect.height}
349
- style:fill={debug ? 'red' : 'transparent'}
350
- style:fill-opacity={debug ? 0.1 : 0}
351
- stroke="red"
352
- />
353
- {/each}
354
- </g>
355
- </ChartClipPath>
356
- </Svg>
342
+ <Svg>
343
+ <ChartClipPath>
344
+ <g class="tooltip-quadtree">
345
+ {#each quadtreeRects(quadtree, false) as rect}
346
+ <rect
347
+ x={rect.x}
348
+ y={rect.y}
349
+ width={rect.width}
350
+ height={rect.height}
351
+ style:fill={debug ? 'red' : 'transparent'}
352
+ style:fill-opacity={debug ? 0.1 : 0}
353
+ stroke="red"
354
+ />
355
+ {/each}
356
+ </g>
357
+ </ChartClipPath>
358
+ </Svg>
357
359
  {/if}
package/dist/components/TooltipContext.svelte.d.ts CHANGED
@@ -15,7 +15,7 @@ declare const __propDef: {
15
15
  mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual" | undefined;
16
16
  snapToDataX?: boolean | undefined;
17
17
  snapToDataY?: boolean | undefined;
18
- findTooltipData?: "closest" | "left" | "right" | undefined;
18
+ findTooltipData?: "left" | "right" | "closest" | undefined;
19
19
  /** Similar to d3-selection's raise, re-insert the event.target as the last child of its parent, so to be the top-most element */ raiseTarget?: boolean | undefined;
20
20
  radius?: number | undefined;
21
21
  debug?: boolean | undefined;
package/dist/components/TooltipItem.svelte CHANGED
@@ -6,18 +6,18 @@ export let valueAlign = 'left';
6
6
  </script>
7
7
 
8
8
  <div class="text-xs text-white/75 text-right whitespace-nowrap">
9
- <slot name="label">{label}:</slot>
9
+ <slot name="label">{label}:</slot>
10
10
  </div>
11
11
 
12
12
  <div
13
- class={cls(
14
- 'text-sm tabular-nums',
15
- {
16
- 'text-right': valueAlign === 'right',
17
- 'text-center': valueAlign === 'center'
18
- },
19
- $$props.class
20
- )}
13
+ class={cls(
14
+ 'text-sm tabular-nums',
15
+ {
16
+ 'text-right': valueAlign === 'right',
17
+ 'text-center': valueAlign === 'center'
18
+ },
19
+ $$props.class
20
+ )}
21
21
  >
22
- <slot>{format ? formatUtil(value, format) : value}</slot>
22
+ <slot>{format ? formatUtil(value, format) : value}</slot>
23
23
  </div>
package/dist/components/Tree.svelte.d.ts CHANGED
@@ -3,16 +3,16 @@ import { type HierarchyPointNode } from 'd3-hierarchy';
3
3
  declare const __propDef: {
4
4
  props: {
5
5
  /**
6
- * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
7
- * If unset, layout size is used instead. When a node size is specified, the root node is always
8
- * positioned at `⟨0, 0⟩`.
9
- *
10
- * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
11
- */ nodeSize?: [number, number] | undefined;
6
+ * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
7
+ * If unset, layout size is used instead. When a node size is specified, the root node is always
8
+ * positioned at `⟨0, 0⟩`.
9
+ *
10
+ * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
11
+ */ nodeSize?: [number, number] | undefined;
12
12
  /**
13
- * see: https://github.com/d3/d3-hierarchy#tree_separation
14
- */ separation?: ((a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number) | undefined;
15
- orientation?: "vertical" | "horizontal" | undefined;
13
+ * see: https://github.com/d3/d3-hierarchy#tree_separation
14
+ */ separation?: ((a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number) | undefined;
15
+ orientation?: "horizontal" | "vertical" | undefined;
16
16
  };
17
17
  events: {
18
18
  [evt: string]: CustomEvent<any>;
package/dist/components/Zoom.svelte CHANGED
@@ -163,23 +163,23 @@ $: dispatch('zoom', { scale: $scale, translate: $translate });
163
163
  </script>
164
164
 
165
165
  <g
166
- on:mousewheel={onWheel}
167
- on:mousedown={onMouseDown}
168
- on:dblclick={onDoubleClick}
169
- on:click|capture={onClick}
170
- on:click
171
- on:keydown
172
- on:keyup
173
- on:keypress
166
+ on:mousewheel={onWheel}
167
+ on:mousedown={onMouseDown}
168
+ on:dblclick={onDoubleClick}
169
+ on:click|capture={onClick}
170
+ on:click
171
+ on:keydown
172
+ on:keyup
173
+ on:keypress
174
174
  >
175
- <rect
176
- x={-$padding.left}
177
- y={-$padding.top}
178
- width={$width + $padding.left + $padding.right}
179
- height={$height + $padding.top + $padding.bottom}
180
- fill="transparent"
181
- />
182
- <g {transform}>
183
- <slot scale={$scale} {zoomTo} {reset} />
184
- </g>
175
+ <rect
176
+ x={-$padding.left}
177
+ y={-$padding.top}
178
+ width={$width + $padding.left + $padding.right}
179
+ height={$height + $padding.top + $padding.bottom}
180
+ fill="transparent"
181
+ />
182
+ <g {transform}>
183
+ <slot scale={$scale} {zoomTo} {reset} />
184
+ </g>
185
185
  </g>
package/dist/components/index.d.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  export { default as Arc } from './Arc.svelte';
2
2
  export { default as Area } from './Area.svelte';
3
3
  export { default as AreaStack } from './AreaStack.svelte';
4
- export { default as AxisX } from './AxisX.svelte';
5
- export { default as AxisY } from './AxisY.svelte';
4
+ export { default as Axis } from './Axis.svelte';
6
5
  export { default as Bars } from './Bars.svelte';
7
6
  export { default as Baseline } from './Baseline.svelte';
8
7
  export { default as Blur } from './Blur.svelte';
package/dist/components/index.js CHANGED
@@ -1,8 +1,7 @@
1
1
  export { default as Arc } from './Arc.svelte';
2
2
  export { default as Area } from './Area.svelte';
3
3
  export { default as AreaStack } from './AreaStack.svelte';
4
- export { default as AxisX } from './AxisX.svelte';
5
- export { default as AxisY } from './AxisY.svelte';
4
+ export { default as Axis } from './Axis.svelte';
6
5
  export { default as Bars } from './Bars.svelte';
7
6
  export { default as Baseline } from './Baseline.svelte';
8
7
  export { default as Blur } from './Blur.svelte';
package/dist/docs/Blockquote.svelte CHANGED
@@ -3,5 +3,5 @@
3
3
  </script>
4
4
 
5
5
  <div class="bg-black/5 border-l-4 border-blue-500 p-4 my-4 rounded">
6
- <slot />
6
+ <slot />
7
7
  </div>
package/dist/docs/Code.svelte CHANGED
@@ -2,30 +2,30 @@
2
2
  import 'prism-svelte';
3
3
  import { mdiContentCopy } from '@mdi/js';
4
4
  import { Button, cls } from 'svelte-ux';
5
- export let code = null;
5
+ export let source = null;
6
6
  export let language = 'svelte';
7
- export let highlightedCode = code
8
- ? Prism.highlight(code, Prism.languages[language], language)
7
+ export let highlightedSource = source
8
+ ? Prism.highlight(source, Prism.languages[language], language)
9
9
  : '';
10
10
  </script>
11
11
 
12
12
  <div class={cls('rounded', $$restProps.class)}>
13
- {#if code}
14
- <div class="relative">
15
- <pre class="language-{language} rounded" style="margin: 0; white-space: normal;">
16
- <code class="language-{language}">{@html highlightedCode}</code>
13
+ {#if source}
14
+ <div class="relative">
15
+ <pre class="language-{language} rounded" style="margin: 0; white-space: normal;">
16
+ <code class="language-{language}">{@html highlightedSource}</code>
17
17
  </pre>
18
18
 
19
- <div class="absolute top-0 right-0 p-2">
20
- <Button
21
- icon={mdiContentCopy}
22
- class="text-white/70 hover:bg-white/20 py-1"
23
- size="sm"
24
- on:click={() => navigator.clipboard.writeText(code ?? '')}
25
- >
26
- Copy
27
- </Button>
28
- </div>
29
- </div>
30
- {/if}
19
+ <div class="absolute top-0 right-0 p-2">
20
+ <Button
21
+ icon={mdiContentCopy}
22
+ class="text-white/70 hover:bg-white/20 py-1"
23
+ size="sm"
24
+ on:click={() => navigator.clipboard.writeText(source ?? '')}
25
+ >
26
+ Copy
27
+ </Button>
28
+ </div>
29
+ </div>
30
+ {/if}
31
31
  </div>
package/dist/docs/Code.svelte.d.ts CHANGED
@@ -3,9 +3,9 @@ import 'prism-svelte';
3
3
  declare const __propDef: {
4
4
  props: {
5
5
  [x: string]: any;
6
- code?: null | undefined;
6
+ source?: string | null | undefined;
7
7
  language?: string | undefined;
8
- highlightedCode?: any;
8
+ highlightedSource?: any;
9
9
  };
10
10
  events: {
11
11
  [evt: string]: CustomEvent<any>;
package/dist/docs/GeoDebug.svelte CHANGED
@@ -7,36 +7,36 @@ let showCenter = false;
7
7
  </script>
8
8
 
9
9
  <div class={cls('bg-black/5 rounded m-1 backdrop-blur p-2', $$props.class)}>
10
- <div class="grid gap-2 ml-2 text-xs">
11
- <div><span class="text-black/50">scale:</span> {format($geo.scale(), 'decimal')}</div>
10
+ <div class="grid gap-2 ml-2 text-xs">
11
+ <div><span class="text-black/50">scale:</span> {format($geo.scale(), 'decimal')}</div>
12
12
 
13
- <div>
14
- <span class="text-black/50">translate:</span>
15
- {#each $geo.translate() as coord}
16
- <div class="ml-2">{format(coord, 'decimal')}</div>
17
- {/each}
18
- </div>
13
+ <div>
14
+ <span class="text-black/50">translate:</span>
15
+ {#each $geo.translate() as coord}
16
+ <div class="ml-2">{format(coord, 'decimal')}</div>
17
+ {/each}
18
+ </div>
19
19
 
20
- <div>
21
- <span class="text-black/50">rotate:</span>
22
- {#each $geo.rotate() as angle}
23
- <div class="ml-2">{format(angle, 'decimal')}</div>
24
- {/each}
25
- </div>
20
+ <div>
21
+ <span class="text-black/50">rotate:</span>
22
+ {#each $geo.rotate() as angle}
23
+ <div class="ml-2">{format(angle, 'decimal')}</div>
24
+ {/each}
25
+ </div>
26
26
 
27
- <div><span class="text-black/50">center:</span> {$geo.center?.()}</div>
27
+ <div><span class="text-black/50">center:</span> {$geo.center?.()}</div>
28
28
 
29
- <div>
30
- <span class="text-black/50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
31
- {#each $geo.invert?.([$width / 2, $height / 2]) as coord}
32
- <div class="ml-2">{format(coord, 'decimal')}</div>
33
- {/each}
34
- </div>
35
- </div>
29
+ <div>
30
+ <span class="text-black/50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
31
+ {#each $geo.invert?.([$width / 2, $height / 2]) as coord}
32
+ <div class="ml-2">{format(coord, 'decimal')}</div>
33
+ {/each}
34
+ </div>
35
+ </div>
36
36
  </div>
37
37
 
38
38
  {#if showCenter}
39
- <div
40
- class="absolute w-2 h-2 bg-red-500/80 rounded-full z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
41
- />
39
+ <div
40
+ class="absolute w-2 h-2 bg-red-500/80 rounded-full z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
41
+ />
42
42
  {/if}
package/dist/docs/Header1.svelte CHANGED
@@ -9,5 +9,5 @@
9
9
  - Example: `#API { id: 'api' }
10
10
  -->
11
11
  <SectionDivider {...$$restProps}>
12
- <slot />
12
+ <slot />
13
13
  </SectionDivider>
package/dist/docs/Layout.svelte CHANGED
@@ -1,10 +1,10 @@
1
1
  <script context="module">
2
- // Custom components: https://mdsvex.com/docs#custom-components
3
- import blockquote from './Blockquote.svelte';
4
- import a from './Link.svelte';
5
- import h1 from './Header1.svelte';
2
+ // Custom components: https://mdsvex.com/docs#custom-components
3
+ import blockquote from './Blockquote.svelte';
4
+ import a from './Link.svelte';
5
+ import h1 from './Header1.svelte';
6
6
 
7
- export { a, blockquote };
7
+ export { a, blockquote };
8
8
  </script>
9
9
 
10
10
  <script>"use strict";
package/dist/docs/Link.svelte CHANGED
@@ -3,5 +3,5 @@
3
3
  </script>
4
4
 
5
5
  <a class="text-blue-500 font-medium" {...$$restProps}>
6
- <slot />
6
+ <slot />
7
7
  </a>
package/dist/docs/Preview.svelte CHANGED
@@ -11,35 +11,35 @@ export let showCode = false;
11
11
  </script>
12
12
 
13
13
  <div class="border border-black/20 rounded bg-white">
14
- <div class="p-4">
15
- <slot />
16
- </div>
14
+ <div class="p-4">
15
+ <slot />
16
+ </div>
17
17
 
18
- {#if code && showCode}
19
- <div class="relative">
20
- <pre
21
- class="language-{language} rounded"
22
- style="margin: 0; white-space: normal;"
23
- transition:slide|local>
18
+ {#if code && showCode}
19
+ <div class="relative">
20
+ <pre
21
+ class="language-{language} rounded"
22
+ style="margin: 0; white-space: normal;"
23
+ transition:slide|local>
24
24
  <code class="language-{language}">{@html highlightedCode}</code>
25
25
  </pre>
26
26
 
27
- <div class="absolute top-0 right-0 p-2">
28
- <Button
29
- icon={mdiContentCopy}
30
- class=" text-white/70 hover:bg-white/20 py-1"
31
- size="sm"
32
- on:click={() => navigator.clipboard.writeText(code)}
33
- >
34
- Copy
35
- </Button>
36
- </div>
37
- </div>
38
- {/if}
27
+ <div class="absolute top-0 right-0 p-2">
28
+ <Button
29
+ icon={mdiContentCopy}
30
+ class=" text-white/70 hover:bg-white/20 py-1"
31
+ size="sm"
32
+ on:click={() => navigator.clipboard.writeText(code)}
33
+ >
34
+ Copy
35
+ </Button>
36
+ </div>
37
+ </div>
38
+ {/if}
39
39
  </div>
40
40
 
41
41
  {#if code}
42
- <Button icon={mdiCodeTags} class=" text-black/70 py-1" on:click={() => (showCode = !showCode)}>
43
- {showCode ? 'Hide' : 'Show'} Code
44
- </Button>
42
+ <Button icon={mdiCodeTags} class=" text-black/70 py-1" on:click={() => (showCode = !showCode)}>
43
+ {showCode ? 'Hide' : 'Show'} Code
44
+ </Button>
45
45
  {/if}
package/dist/docs/RangeField.svelte CHANGED
@@ -7,22 +7,22 @@ export let step = 1;
7
7
  </script>
8
8
 
9
9
  <Field let:id {...$$restProps}>
10
- <Button
11
- icon={mdiChevronLeft}
12
- on:click={() => (value -= value > min ? step : 0)}
13
- class="mr-2"
14
- size="sm"
15
- />
16
- <input type="range" bind:value {min} {max} {step} {id} class="h-6 w-full" />
17
- <span class="ml-2 text-sm text-black/50 tabular-nums text-right inline-grid">
18
- <span class="col-span-full row-span-full invisible">{min}</span>
19
- <span class="col-span-full row-span-full">{value}</span>
20
- <span class="col-span-full row-span-full invisible">{max}</span>
21
- </span>
22
- <Button
23
- icon={mdiChevronRight}
24
- on:click={() => (value += value < max ? step : 0)}
25
- class="ml-2"
26
- size="sm"
27
- />
10
+ <Button
11
+ icon={mdiChevronLeft}
12
+ on:click={() => (value -= value > min ? step : 0)}
13
+ class="mr-2"
14
+ size="sm"
15
+ />
16
+ <input type="range" bind:value {min} {max} {step} {id} class="h-6 w-full" />
17
+ <span class="ml-2 text-sm text-black/50 tabular-nums text-right inline-grid">
18
+ <span class="col-span-full row-span-full invisible">{min}</span>
19
+ <span class="col-span-full row-span-full">{value}</span>
20
+ <span class="col-span-full row-span-full invisible">{max}</span>
21
+ </span>
22
+ <Button
23
+ icon={mdiChevronRight}
24
+ on:click={() => (value += value < max ? step : 0)}
25
+ class="ml-2"
26
+ size="sm"
27
+ />
28
28
  </Field>
package/dist/docs/TilesetField.svelte CHANGED
@@ -77,17 +77,17 @@ $: serviceUrl = getServiceUrl(selected);
77
77
  </script>
78
78
 
79
79
  <Field label="Tileset" let:id>
80
- <select bind:value={selected} class="w-full outline-none appearance-none text-sm" {id}>
81
- {#each Object.entries(serviceOptions) as [group, options]}
82
- <optgroup label={group}>
83
- {#each Object.keys(options) as option}
84
- <option value="{group}:{option}">{option}</option>
85
- {/each}
86
- </optgroup>
87
- {/each}
88
- </select>
89
- <div slot="append">
90
- <div class="text-[10px] text-black/50 text-center">2x</div>
91
- <Switch bind:checked={doubleScale} size="md" />
92
- </div>
80
+ <select bind:value={selected} class="w-full outline-none appearance-none text-sm" {id}>
81
+ {#each Object.entries(serviceOptions) as [group, options]}
82
+ <optgroup label={group}>
83
+ {#each Object.keys(options) as option}
84
+ <option value="{group}:{option}">{option}</option>
85
+ {/each}
86
+ </optgroup>
87
+ {/each}
88
+ </select>
89
+ <div slot="append">
90
+ <div class="text-[10px] text-black/50 text-center">2x</div>
91
+ <Switch bind:checked={doubleScale} size="md" />
92
+ </div>
93
93
  </Field>