@gradio/imageeditor 0.18.12 → 0.20.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 (61) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/Example.svelte +9 -3
  3. package/ImageEditor.stories.svelte +0 -74
  4. package/Index.svelte +34 -35
  5. package/InteractiveImageEditor.svelte +99 -57
  6. package/dist/Example.svelte +9 -3
  7. package/dist/Example.svelte.d.ts +4 -18
  8. package/dist/Index.svelte +34 -35
  9. package/dist/Index.svelte.d.ts +2 -19
  10. package/dist/InteractiveImageEditor.svelte +99 -57
  11. package/dist/InteractiveImageEditor.svelte.d.ts +20 -37
  12. package/dist/shared/Anchor.svelte +13 -11
  13. package/dist/shared/Anchor.svelte.d.ts +4 -19
  14. package/dist/shared/Controls.svelte +63 -39
  15. package/dist/shared/Controls.svelte.d.ts +13 -28
  16. package/dist/shared/IconButton.svelte +39 -18
  17. package/dist/shared/IconButton.svelte.d.ts +7 -21
  18. package/dist/shared/ImageEditor.svelte +246 -167
  19. package/dist/shared/ImageEditor.svelte.d.ts +55 -2
  20. package/dist/shared/Layers.svelte +43 -29
  21. package/dist/shared/Layers.svelte.d.ts +10 -25
  22. package/dist/shared/Resize.svelte +22 -16
  23. package/dist/shared/Resize.svelte.d.ts +6 -22
  24. package/dist/shared/SecondaryToolbar.svelte +34 -18
  25. package/dist/shared/SecondaryToolbar.svelte.d.ts +10 -25
  26. package/dist/shared/Toolbar.svelte +60 -76
  27. package/dist/shared/Toolbar.svelte.d.ts +10 -25
  28. package/dist/shared/brush/BrushOptions.svelte +49 -29
  29. package/dist/shared/brush/BrushOptions.svelte.d.ts +6 -21
  30. package/dist/shared/brush/BrushSize.svelte +12 -9
  31. package/dist/shared/brush/BrushSize.svelte.d.ts +5 -20
  32. package/dist/shared/brush/ColorField.svelte +21 -16
  33. package/dist/shared/brush/ColorField.svelte.d.ts +6 -22
  34. package/dist/shared/brush/ColorPicker.svelte +22 -16
  35. package/dist/shared/brush/ColorPicker.svelte.d.ts +4 -18
  36. package/dist/shared/brush/ColorSwatch.svelte +41 -21
  37. package/dist/shared/brush/ColorSwatch.svelte.d.ts +10 -24
  38. package/dist/shared/brush/brush.js +7 -8
  39. package/dist/shared/core/editor.d.ts +5 -0
  40. package/dist/shared/core/editor.js +43 -2
  41. package/dist/shared/resize/resize.d.ts +2 -0
  42. package/dist/shared/resize/resize.js +27 -18
  43. package/dist/types.d.ts +1 -1
  44. package/package.json +8 -8
  45. package/shared/Anchor.svelte +13 -11
  46. package/shared/Controls.svelte +63 -39
  47. package/shared/IconButton.svelte +39 -18
  48. package/shared/ImageEditor.svelte +246 -167
  49. package/shared/Layers.svelte +43 -29
  50. package/shared/Resize.svelte +22 -16
  51. package/shared/SecondaryToolbar.svelte +34 -18
  52. package/shared/Toolbar.svelte +60 -76
  53. package/shared/brush/BrushOptions.svelte +49 -29
  54. package/shared/brush/BrushSize.svelte +12 -9
  55. package/shared/brush/ColorField.svelte +21 -16
  56. package/shared/brush/ColorPicker.svelte +22 -16
  57. package/shared/brush/ColorSwatch.svelte +41 -21
  58. package/shared/brush/brush.ts +8 -10
  59. package/shared/core/editor.ts +49 -2
  60. package/shared/resize/resize.ts +28 -20
  61. package/types.ts +1 -1
package/shared/IconButton.svelte CHANGED
@@ -1,23 +1,44 @@
1
1
  <script lang="ts">
2
- import { type ComponentType } from "svelte";
2
+ import { type Component } from "svelte";
3
3
  import type { ColorInput } from "tinycolor2";
4
- export let Icon: ComponentType;
5
- export let label = "";
6
- export let show_label = false;
7
- export let pending = false;
8
- export let size: "small" | "large" | "medium" = "small";
9
- export let padded = true;
10
- export let highlight = false;
11
- export let disabled = false;
12
- export let hasPopup = false;
13
- export let color: string | ColorInput = "var(--block-label-text-color)";
14
- export let transparent = false;
15
- export let background = "var(--background-fill-primary)";
16
- export let offset = 0;
17
- export let label_position: "left" | "right" = "left";
18
- export let roundedness: "quite" | "very" = "quite";
19
- export let onclick: ((event: MouseEvent) => void) | undefined = undefined;
20
- $: _color = highlight ? "var(--color-accent)" : color.toString();
4
+
5
+ let {
6
+ Icon,
7
+ label = "",
8
+ show_label = false,
9
+ pending = false,
10
+ size = "small",
11
+ padded = true,
12
+ highlight = false,
13
+ disabled = false,
14
+ hasPopup = false,
15
+ color = "var(--block-label-text-color)",
16
+ transparent = false,
17
+ background = "var(--background-fill-primary)",
18
+ offset = 0,
19
+ label_position = "left",
20
+ roundedness = "quite",
21
+ onclick = undefined
22
+ }: {
23
+ Icon: Component<any>;
24
+ label?: string;
25
+ show_label?: boolean;
26
+ pending?: boolean;
27
+ size?: "small" | "large" | "medium";
28
+ padded?: boolean;
29
+ highlight?: boolean;
30
+ disabled?: boolean;
31
+ hasPopup?: boolean;
32
+ color?: string | ColorInput;
33
+ transparent?: boolean;
34
+ background?: string;
35
+ offset?: number;
36
+ label_position?: "left" | "right";
37
+ roundedness?: "quite" | "very";
38
+ onclick?: (event: MouseEvent) => void;
39
+ } = $props();
40
+
41
+ let _color = $derived(highlight ? "var(--color-accent)" : color.toString());
21
42
  </script>
22
43
 
23
44
  <button