layerchart 0.15.6 → 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 (88) hide show
  1. package/README.md +22 -1
  2. package/dist/components/Arc.svelte +10 -10
  3. package/dist/components/Arc.svelte.d.ts +2 -1
  4. package/dist/components/Area.svelte +10 -10
  5. package/dist/components/AreaStack.svelte +25 -25
  6. package/dist/components/Axis.svelte +131 -0
  7. package/dist/components/Axis.svelte.d.ts +25 -0
  8. package/dist/components/Bars.svelte +30 -71
  9. package/dist/components/Bars.svelte.d.ts +1 -1
  10. package/dist/components/Baseline.svelte +20 -20
  11. package/dist/components/Blur.svelte +7 -7
  12. package/dist/components/Chart.svelte +46 -40
  13. package/dist/components/Chart.svelte.d.ts +2 -0
  14. package/dist/components/ChartClipPath.svelte +7 -7
  15. package/dist/components/Circle.svelte +7 -7
  16. package/dist/components/CircleClipPath.svelte +5 -5
  17. package/dist/components/ClipPath.svelte +4 -4
  18. package/dist/components/ClipPathUse.svelte +5 -5
  19. package/dist/components/ConnectedPoints.svelte +16 -16
  20. package/dist/components/GeoPath.svelte +11 -11
  21. package/dist/components/GeoPoint.svelte +3 -3
  22. package/dist/components/GeoTile.svelte +5 -5
  23. package/dist/components/Graticule.svelte +12 -12
  24. package/dist/components/Group.svelte +1 -1
  25. package/dist/components/HighlightLine.svelte +25 -25
  26. package/dist/components/HighlightRect.svelte +1 -1
  27. package/dist/components/Labels.svelte +83 -74
  28. package/dist/components/Labels.svelte.d.ts +4 -3
  29. package/dist/components/Legend.svelte +59 -59
  30. package/dist/components/Legend.svelte.d.ts +3 -2
  31. package/dist/components/Line.svelte +8 -8
  32. package/dist/components/LinearGradient.svelte +22 -22
  33. package/dist/components/Link.svelte +10 -10
  34. package/dist/components/Link.svelte.d.ts +1 -1
  35. package/dist/components/Pack.svelte.d.ts +2 -2
  36. package/dist/components/Partition.svelte.d.ts +5 -5
  37. package/dist/components/Path.svelte +16 -16
  38. package/dist/components/Pattern.svelte +3 -3
  39. package/dist/components/Pie.svelte +21 -21
  40. package/dist/components/Pie.svelte.d.ts +18 -18
  41. package/dist/components/Points.svelte +14 -14
  42. package/dist/components/Rect.svelte +8 -8
  43. package/dist/components/RectClipPath.svelte +5 -5
  44. package/dist/components/Sankey.svelte.d.ts +2 -2
  45. package/dist/components/Text.svelte +32 -32
  46. package/dist/components/Threshold.svelte +25 -25
  47. package/dist/components/TileImage.svelte +21 -21
  48. package/dist/components/Tooltip.svelte +25 -25
  49. package/dist/components/TooltipContext.svelte +80 -78
  50. package/dist/components/TooltipContext.svelte.d.ts +1 -1
  51. package/dist/components/TooltipItem.svelte +11 -12
  52. package/dist/components/TooltipItem.svelte.d.ts +2 -1
  53. package/dist/components/Tree.svelte.d.ts +9 -9
  54. package/dist/components/Zoom.svelte +18 -18
  55. package/dist/components/Zoom.svelte.d.ts +1 -1
  56. package/dist/components/index.d.ts +1 -2
  57. package/dist/components/index.js +1 -2
  58. package/dist/docs/Blockquote.svelte +2 -2
  59. package/dist/docs/Blockquote.svelte.d.ts +6 -17
  60. package/dist/docs/Code.svelte +25 -27
  61. package/dist/docs/Code.svelte.d.ts +8 -17
  62. package/dist/docs/GeoDebug.svelte +26 -27
  63. package/dist/docs/Header1.svelte +2 -3
  64. package/dist/docs/Header1.svelte.d.ts +5 -14
  65. package/dist/docs/Layout.svelte +11 -11
  66. package/dist/docs/Layout.svelte.d.ts +9 -20
  67. package/dist/docs/Link.svelte +2 -2
  68. package/dist/docs/Link.svelte.d.ts +5 -14
  69. package/dist/docs/Preview.svelte +25 -25
  70. package/dist/docs/Preview.svelte.d.ts +1 -1
  71. package/dist/docs/RangeField.svelte +18 -18
  72. package/dist/docs/TilesetField.svelte +13 -13
  73. package/dist/docs/ViewSourceButton.svelte +42 -0
  74. package/dist/docs/ViewSourceButton.svelte.d.ts +19 -0
  75. package/dist/docs/ZoomControls.svelte +40 -41
  76. package/dist/docs/ZoomControls.svelte.d.ts +2 -2
  77. package/dist/utils/genData.d.ts +2 -2
  78. package/dist/utils/quadtree.d.ts +10 -2
  79. package/dist/utils/quadtree.js +1 -1
  80. package/dist/utils/rect.d.ts +19 -0
  81. package/dist/utils/rect.js +97 -0
  82. package/dist/utils/scales.d.ts +8 -0
  83. package/dist/utils/scales.js +17 -0
  84. package/package.json +90 -88
  85. package/dist/components/AxisX.svelte +0 -43
  86. package/dist/components/AxisX.svelte.d.ts +0 -37
  87. package/dist/components/AxisY.svelte +0 -55
  88. package/dist/components/AxisY.svelte.d.ts +0 -37
package/dist/components/Tooltip.svelte CHANGED
@@ -35,30 +35,30 @@ $: if ($tooltip) {
35
35
  </script>
36
36
 
37
37
  {#if $tooltip.data}
38
- <div
39
- class="absolute pointer-events-none z-50"
40
- style:top="{$top}px"
41
- style:left="{$left}px"
42
- transition:fade={{ duration: 100 }}
43
- bind:clientWidth={tooltipWidth}
44
- bind:clientHeight={tooltipHeight}
45
- >
46
- <div
47
- class="bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1"
48
- >
49
- {#if header || $$slots.header}
50
- <div class="text-center font-semibold whitespace-nowrap">
51
- <slot name="header">
52
- {header($tooltip.data)}
53
- </slot>
54
- </div>
55
- {/if}
38
+ <div
39
+ class="absolute pointer-events-none z-50"
40
+ style:top="{$top}px"
41
+ style:left="{$left}px"
42
+ transition:fade={{ duration: 100 }}
43
+ bind:clientWidth={tooltipWidth}
44
+ bind:clientHeight={tooltipHeight}
45
+ >
46
+ <div
47
+ class="bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1"
48
+ >
49
+ {#if header || $$slots.header}
50
+ <div class="text-center font-semibold whitespace-nowrap">
51
+ <slot name="header">
52
+ {header($tooltip.data)}
53
+ </slot>
54
+ </div>
55
+ {/if}
56
56
 
57
- {#if $$slots.default}
58
- <div class="grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1">
59
- <slot data={$tooltip.data} />
60
- </div>
61
- {/if}
62
- </div>
63
- </div>
57
+ {#if $$slots.default}
58
+ <div class="grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1">
59
+ <slot data={$tooltip.data} />
60
+ </div>
61
+ {/if}
62
+ </div>
63
+ </div>
64
64
  {/if}
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
@@ -1,5 +1,4 @@
1
- <script>import { cls } from 'svelte-ux/utils/styles';
2
- import { format as formatUtil } from 'svelte-ux/utils/format';
1
+ <script>import { cls, format as formatUtil } from 'svelte-ux';
3
2
  export let label;
4
3
  export let value = undefined; // Can be pass as slot
5
4
  export let format = undefined;
@@ -7,18 +6,18 @@ export let valueAlign = 'left';
7
6
  </script>
8
7
 
9
8
  <div class="text-xs text-white/75 text-right whitespace-nowrap">
10
- <slot name="label">{label}:</slot>
9
+ <slot name="label">{label}:</slot>
11
10
  </div>
12
11
 
13
12
  <div
14
- class={cls(
15
- 'text-sm tabular-nums',
16
- {
17
- 'text-right': valueAlign === 'right',
18
- 'text-center': valueAlign === 'center'
19
- },
20
- $$props.class
21
- )}
13
+ class={cls(
14
+ 'text-sm tabular-nums',
15
+ {
16
+ 'text-right': valueAlign === 'right',
17
+ 'text-center': valueAlign === 'center'
18
+ },
19
+ $$props.class
20
+ )}
22
21
  >
23
- <slot>{format ? formatUtil(value, format) : value}</slot>
22
+ <slot>{format ? formatUtil(value, format) : value}</slot>
24
23
  </div>
package/dist/components/TooltipItem.svelte.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
+ import { type FormatType } from 'svelte-ux';
2
3
  declare const __propDef: {
3
4
  props: {
4
5
  [x: string]: any;
5
6
  label: any;
6
7
  value?: any;
7
- format?: any;
8
+ format?: FormatType;
8
9
  valueAlign?: "left" | "right" | "center" | undefined;
9
10
  };
10
11
  events: {
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/Zoom.svelte.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const __propDef: {
7
7
  spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
8
8
  tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
9
9
  disablePointer?: boolean | undefined;
10
- scroll?: "scale" | "translate" | "none" | undefined;
10
+ scroll?: "none" | "scale" | "translate" | undefined;
11
11
  clickDistance?: number | undefined;
12
12
  initialTranslate?: {
13
13
  x: number;
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
@@ -1,5 +1,5 @@
1
- <script>
2
- // console.log($$props, $$slots);
1
+ <script>"use strict";
2
+ // console.log($$props, $$slots);
3
3
  </script>
4
4
 
5
5
  <div class="bg-black/5 border-l-4 border-blue-500 p-4 my-4 rounded">
package/dist/docs/Blockquote.svelte.d.ts CHANGED
@@ -1,22 +1,6 @@
1
- /** @typedef {typeof __propDef.props} BlockquoteProps */
2
- /** @typedef {typeof __propDef.events} BlockquoteEvents */
3
- /** @typedef {typeof __propDef.slots} BlockquoteSlots */
4
- export default class Blockquote extends SvelteComponentTyped<{
5
- [x: string]: never;
6
- }, {
7
- [evt: string]: CustomEvent<any>;
8
- }, {
9
- default: {};
10
- }> {
11
- }
12
- export type BlockquoteProps = typeof __propDef.props;
13
- export type BlockquoteEvents = typeof __propDef.events;
14
- export type BlockquoteSlots = typeof __propDef.slots;
15
1
  import { SvelteComponentTyped } from "svelte";
16
2
  declare const __propDef: {
17
- props: {
18
- [x: string]: never;
19
- };
3
+ props: Record<string, never>;
20
4
  events: {
21
5
  [evt: string]: CustomEvent<any>;
22
6
  };
@@ -24,4 +8,9 @@ declare const __propDef: {
24
8
  default: {};
25
9
  };
26
10
  };
11
+ export type BlockquoteProps = typeof __propDef.props;
12
+ export type BlockquoteEvents = typeof __propDef.events;
13
+ export type BlockquoteSlots = typeof __propDef.slots;
14
+ export default class Blockquote extends SvelteComponentTyped<BlockquoteProps, BlockquoteEvents, BlockquoteSlots> {
15
+ }
27
16
  export {};
package/dist/docs/Code.svelte CHANGED
@@ -1,33 +1,31 @@
1
- <script>
2
- import Prism from 'prismjs';
3
- import 'prism-svelte';
4
- import { mdiContentCopy } from '@mdi/js';
5
- import { Button } from 'svelte-ux';
6
- import { cls } from 'svelte-ux/utils/styles';
7
- export let code = null;
8
- export let language = 'svelte';
9
- export let highlightedCode = code
10
- ? Prism.highlight(code, Prism.languages[language], language)
11
- : '';
1
+ <script>import Prism from 'prismjs';
2
+ import 'prism-svelte';
3
+ import { mdiContentCopy } from '@mdi/js';
4
+ import { Button, cls } from 'svelte-ux';
5
+ export let source = null;
6
+ export let language = 'svelte';
7
+ export let highlightedSource = source
8
+ ? Prism.highlight(source, Prism.languages[language], language)
9
+ : '';
12
10
  </script>
13
11
 
14
12
  <div class={cls('rounded', $$restProps.class)}>
15
- {#if code}
16
- <div class="relative">
17
- <pre class="language-{language} rounded" style="margin: 0; white-space: normal;">
18
- <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>
19
17
  </pre>
20
18
 
21
- <div class="absolute top-0 right-0 p-2">
22
- <Button
23
- icon={mdiContentCopy}
24
- class="text-white/70 hover:bg-white/20 py-1"
25
- size="sm"
26
- on:click={() => navigator.clipboard.writeText(code ?? '')}
27
- >
28
- Copy
29
- </Button>
30
- </div>
31
- </div>
32
- {/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}
33
31
  </div>
package/dist/docs/Code.svelte.d.ts CHANGED
@@ -1,29 +1,20 @@
1
- /** @typedef {typeof __propDef.props} CodeProps */
2
- /** @typedef {typeof __propDef.events} CodeEvents */
3
- /** @typedef {typeof __propDef.slots} CodeSlots */
4
- export default class Code extends SvelteComponentTyped<{
5
- [x: string]: any;
6
- code?: null | undefined;
7
- language?: string | undefined;
8
- highlightedCode?: any;
9
- }, {
10
- [evt: string]: CustomEvent<any>;
11
- }, {}> {
12
- }
13
- export type CodeProps = typeof __propDef.props;
14
- export type CodeEvents = typeof __propDef.events;
15
- export type CodeSlots = typeof __propDef.slots;
16
1
  import { SvelteComponentTyped } from "svelte";
2
+ import 'prism-svelte';
17
3
  declare const __propDef: {
18
4
  props: {
19
5
  [x: string]: any;
20
- code?: null | undefined;
6
+ source?: string | null | undefined;
21
7
  language?: string | undefined;
22
- highlightedCode?: any;
8
+ highlightedSource?: any;
23
9
  };
24
10
  events: {
25
11
  [evt: string]: CustomEvent<any>;
26
12
  };
27
13
  slots: {};
28
14
  };
15
+ export type CodeProps = typeof __propDef.props;
16
+ export type CodeEvents = typeof __propDef.events;
17
+ export type CodeSlots = typeof __propDef.slots;
18
+ export default class Code extends SvelteComponentTyped<CodeProps, CodeEvents, CodeSlots> {
19
+ }
29
20
  export {};
package/dist/docs/GeoDebug.svelte CHANGED
@@ -1,6 +1,5 @@
1
1
  <script>import { getContext } from 'svelte';
2
- import { format, Checkbox } from 'svelte-ux';
3
- import { cls } from 'svelte-ux/utils/styles';
2
+ import { format, Checkbox, cls } from 'svelte-ux';
4
3
  import { geoContext } from '../components/GeoContext.svelte';
5
4
  const { width, height } = getContext('LayerCake');
6
5
  const geo = geoContext();
@@ -8,36 +7,36 @@ let showCenter = false;
8
7
  </script>
9
8
 
10
9
  <div class={cls('bg-black/5 rounded m-1 backdrop-blur p-2', $$props.class)}>
11
- <div class="grid gap-2 ml-2 text-xs">
12
- <div><span class="text-black/50">scale:</span> {format.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>
13
12
 
14
- <div>
15
- <span class="text-black/50">translate:</span>
16
- {#each $geo.translate() as coord}
17
- <div class="ml-2">{format.format(coord, 'decimal')}</div>
18
- {/each}
19
- </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>
20
19
 
21
- <div>
22
- <span class="text-black/50">rotate:</span>
23
- {#each $geo.rotate() as angle}
24
- <div class="ml-2">{format.format(angle, 'decimal')}</div>
25
- {/each}
26
- </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>
27
26
 
28
- <div><span class="text-black/50">center:</span> {$geo.center?.()}</div>
27
+ <div><span class="text-black/50">center:</span> {$geo.center?.()}</div>
29
28
 
30
- <div>
31
- <span class="text-black/50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
32
- {#each $geo.invert?.([$width / 2, $height / 2]) as coord}
33
- <div class="ml-2">{format.format(coord, 'decimal')}</div>
34
- {/each}
35
- </div>
36
- </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>
37
36
  </div>
38
37
 
39
38
  {#if showCenter}
40
- <div
41
- 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"
42
- />
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
+ />
43
42
  {/if}
package/dist/docs/Header1.svelte CHANGED
@@ -1,5 +1,4 @@
1
- <script>
2
- import { SectionDivider } from 'svelte-ux';
1
+ <script>import { SectionDivider } from 'svelte-ux';
3
2
  </script>
4
3
 
5
4
  <!--
@@ -10,5 +9,5 @@
10
9
  - Example: `#API { id: 'api' }
11
10
  -->
12
11
  <SectionDivider {...$$restProps}>
13
- <slot />
12
+ <slot />
14
13
  </SectionDivider>