@san-siva/blogkit 1.1.34 → 1.1.36

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 (50) hide show
  1. package/dist/assets/collapse.svg +16 -0
  2. package/dist/assets/expand.svg +4 -0
  3. package/dist/assets/info.svg +1 -1
  4. package/dist/assets/reset.svg +4 -0
  5. package/dist/assets/tick.svg +1 -1
  6. package/dist/assets/zoom-in.svg +17 -0
  7. package/dist/assets/zoom-out.svg +17 -0
  8. package/dist/cjs/components/MermaidControls.js +17 -0
  9. package/dist/cjs/components/MermaidControls.js.map +1 -0
  10. package/dist/cjs/components/MermaidViewport.js +14 -0
  11. package/dist/cjs/components/MermaidViewport.js.map +1 -0
  12. package/dist/cjs/dynamicComponents/MermaidDynamic.js +52 -75
  13. package/dist/cjs/dynamicComponents/MermaidDynamic.js.map +1 -1
  14. package/dist/cjs/hooks/usePanZoom.js +77 -0
  15. package/dist/cjs/hooks/usePanZoom.js.map +1 -0
  16. package/dist/cjs/index.css +1 -1
  17. package/dist/cjs/index.css.map +1 -1
  18. package/dist/cjs/styles/Mermaid.module.scss.js +1 -1
  19. package/dist/esm/components/MermaidControls.js +13 -0
  20. package/dist/esm/components/MermaidControls.js.map +1 -0
  21. package/dist/esm/components/MermaidViewport.js +10 -0
  22. package/dist/esm/components/MermaidViewport.js.map +1 -0
  23. package/dist/esm/dynamicComponents/MermaidDynamic.js +52 -75
  24. package/dist/esm/dynamicComponents/MermaidDynamic.js.map +1 -1
  25. package/dist/esm/hooks/usePanZoom.js +75 -0
  26. package/dist/esm/hooks/usePanZoom.js.map +1 -0
  27. package/dist/esm/index.css +1 -1
  28. package/dist/esm/index.css.map +1 -1
  29. package/dist/esm/styles/Mermaid.module.scss.js +1 -1
  30. package/dist/types/components/MermaidControls.d.ts +11 -0
  31. package/dist/types/components/MermaidControls.d.ts.map +1 -0
  32. package/dist/types/components/MermaidViewport.d.ts +12 -0
  33. package/dist/types/components/MermaidViewport.d.ts.map +1 -0
  34. package/dist/types/dynamicComponents/MermaidDynamic.d.ts.map +1 -1
  35. package/dist/types/hooks/usePanZoom.d.ts +23 -0
  36. package/dist/types/hooks/usePanZoom.d.ts.map +1 -0
  37. package/package.json +1 -1
  38. package/src/assets/collapse.svg +16 -0
  39. package/src/assets/expand.svg +4 -0
  40. package/src/assets/info.svg +1 -1
  41. package/src/assets/reset.svg +4 -0
  42. package/src/assets/tick.svg +1 -1
  43. package/src/assets/zoom-in.svg +17 -0
  44. package/src/assets/zoom-out.svg +17 -0
  45. package/src/components/MermaidControls.tsx +54 -0
  46. package/src/components/MermaidViewport.tsx +40 -0
  47. package/src/dynamicComponents/MermaidDynamic.tsx +101 -131
  48. package/src/hooks/usePanZoom.ts +105 -0
  49. package/src/styles/Mermaid.module.scss +72 -4
  50. package/src/styles/Mermaid.module.scss.d.ts +10 -0
package/src/styles/Mermaid.module.scss CHANGED
@@ -16,19 +16,45 @@
16
16
  opacity: 0;
17
17
 
18
18
  &__btn {
19
+ align-items: center;
19
20
  background: none;
21
+ background-position: center;
22
+ background-repeat: no-repeat;
23
+ background-size: styles.rem(14) styles.rem(14);
20
24
  border: 1px solid styles.$color--grey-medium;
25
+ border-radius: styles.rem(2);
21
26
  color: styles.$color--dark;
22
27
  cursor: pointer;
23
- font-size: styles.$font-size--very-small;
24
- font-weight: styles.$font-weight--500;
28
+ display: inline-flex;
29
+ height: styles.rem(28);
30
+ justify-content: center;
25
31
  line-height: 1;
26
- padding: styles.rem(4) styles.rem(8);
27
- border-radius: styles.rem(2);
32
+ padding: 0;
33
+ width: styles.rem(28);
28
34
 
29
35
  &:hover {
30
36
  background-color: rgba(0, 0, 0, 0.05);
31
37
  }
38
+
39
+ &--zoom-in {
40
+ background-image: url('../assets/zoom-in.svg');
41
+ }
42
+
43
+ &--zoom-out {
44
+ background-image: url('../assets/zoom-out.svg');
45
+ }
46
+
47
+ &--reset {
48
+ background-image: url('../assets/reset.svg');
49
+ }
50
+
51
+ &--expand {
52
+ background-image: url('../assets/expand.svg');
53
+ }
54
+
55
+ &--collapse {
56
+ background-image: url('../assets/collapse.svg');
57
+ }
32
58
  }
33
59
  }
34
60
 
@@ -43,6 +69,48 @@
43
69
  }
44
70
  }
45
71
 
72
+ &__modal {
73
+ position: fixed;
74
+ inset: 0;
75
+ z-index: 9999;
76
+ background-color: rgba(0, 0, 0, 0.7);
77
+ display: flex;
78
+ align-items: stretch;
79
+ justify-content: stretch;
80
+
81
+ &__content {
82
+ background-color: styles.$color--base;
83
+ width: 100%;
84
+ height: 100%;
85
+ display: flex;
86
+ flex-direction: column;
87
+ position: relative;
88
+ }
89
+
90
+ &__controls {
91
+ display: flex;
92
+ flex-direction: row;
93
+ gap: styles.rem(8);
94
+ justify-content: flex-end;
95
+ padding: styles.rem(12) styles.rem(16);
96
+ border-bottom: 1px solid styles.$color--grey-light;
97
+ flex-shrink: 0;
98
+ }
99
+
100
+ &__viewport {
101
+ flex: 1;
102
+ overflow: hidden;
103
+ cursor: grab;
104
+ user-select: none;
105
+ -webkit-user-select: none;
106
+ padding: styles.rem(16);
107
+
108
+ &--dragging {
109
+ cursor: grabbing;
110
+ }
111
+ }
112
+ }
113
+
46
114
  &:hover {
47
115
  .mermaid__controls {
48
116
  opacity: 1;
package/src/styles/Mermaid.module.scss.d.ts CHANGED
@@ -2,8 +2,18 @@ declare const styles: {
2
2
  readonly mermaid: string;
3
3
  readonly 'mermaid__controls': string;
4
4
  readonly 'mermaid__controls__btn': string;
5
+ readonly 'mermaid__controls__btn--zoom-in': string;
6
+ readonly 'mermaid__controls__btn--zoom-out': string;
7
+ readonly 'mermaid__controls__btn--reset': string;
8
+ readonly 'mermaid__controls__btn--expand': string;
9
+ readonly 'mermaid__controls__btn--collapse': string;
5
10
  readonly 'mermaid__viewport': string;
6
11
  readonly 'mermaid__viewport--dragging': string;
12
+ readonly 'mermaid__modal': string;
13
+ readonly 'mermaid__modal__content': string;
14
+ readonly 'mermaid__modal__controls': string;
15
+ readonly 'mermaid__modal__viewport': string;
16
+ readonly 'mermaid__modal__viewport--dragging': string;
7
17
  readonly 'margin-top--1': string;
8
18
  readonly 'margin-bottom--2': string;
9
19
  };