ziko 0.0.5 → 0.0.7

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 (236) hide show
  1. package/README.md +171 -182
  2. package/dist/ziko.cjs +10022 -9853
  3. package/dist/ziko.js +10023 -9854
  4. package/dist/ziko.min.js +2 -2
  5. package/dist/ziko.mjs +10021 -9853
  6. package/package.json +12 -4
  7. package/starter/bin/index.js +11 -0
  8. package/wrapper/react/README.md +26 -0
  9. package/wrapper/react/index.jsx +7 -1
  10. package/wrapper/svelte/ZikoUI.svelte +15 -0
  11. package/wrapper/vue/ZikoUI.vue +8 -2
  12. package/core/App/Accessibility/index.js +0 -0
  13. package/core/App/Globals/__Target__.js +0 -3
  14. package/core/App/Globals/__UI__.js +0 -38
  15. package/core/App/Globals/__init__.js +0 -8
  16. package/core/App/Globals/index.js +0 -18
  17. package/core/App/Router/index.js +0 -40
  18. package/core/App/Seo/index.js +0 -43
  19. package/core/App/Themes/dark.js +0 -885
  20. package/core/App/Themes/index.js +0 -11
  21. package/core/App/Themes/light.js +0 -255
  22. package/core/App/app.js +0 -46
  23. package/core/App/index.js +0 -12
  24. package/core/Data/Api/fetchdom.js +0 -14
  25. package/core/Data/Api/index.js +0 -4
  26. package/core/Data/Api/preload.js +0 -11
  27. package/core/Data/Converter/canvas.js +0 -25
  28. package/core/Data/Converter/csv.js +0 -33
  29. package/core/Data/Converter/index.js +0 -25
  30. package/core/Data/Converter/json.js +0 -80
  31. package/core/Data/Converter/markdown.js +0 -83
  32. package/core/Data/Converter/svg.js +0 -11
  33. package/core/Data/Parser/markdown.js +0 -0
  34. package/core/Data/Parser/xml.js +0 -47
  35. package/core/Data/Strings/index.js +0 -26
  36. package/core/Data/decorators.js +0 -0
  37. package/core/Data/index.js +0 -64
  38. package/core/Graphics/Canvas/Elements/Basic/arc.js +0 -43
  39. package/core/Graphics/Canvas/Elements/Basic/image.js +0 -0
  40. package/core/Graphics/Canvas/Elements/Basic/line.js +0 -26
  41. package/core/Graphics/Canvas/Elements/Basic/path.js +0 -0
  42. package/core/Graphics/Canvas/Elements/Basic/points.js +0 -48
  43. package/core/Graphics/Canvas/Elements/Basic/polygon.js +0 -7
  44. package/core/Graphics/Canvas/Elements/Basic/polyline.js +0 -0
  45. package/core/Graphics/Canvas/Elements/Basic/rect.js +0 -46
  46. package/core/Graphics/Canvas/Elements/Basic/text.js +0 -0
  47. package/core/Graphics/Canvas/Elements/Chart/histogram.js +0 -0
  48. package/core/Graphics/Canvas/Elements/Chart/plot.js +0 -0
  49. package/core/Graphics/Canvas/Elements/Chart/scatter.js +0 -2
  50. package/core/Graphics/Canvas/Elements/Chart/stem.js +0 -0
  51. package/core/Graphics/Canvas/Elements/Element.js +0 -115
  52. package/core/Graphics/Canvas/Elements/Groupe.js +0 -0
  53. package/core/Graphics/Canvas/Elements/grid.js +0 -0
  54. package/core/Graphics/Canvas/Elements/index.js +0 -13
  55. package/core/Graphics/Canvas/Filter/index.js +0 -0
  56. package/core/Graphics/Canvas/Paint/index.js +0 -0
  57. package/core/Graphics/Canvas/Utils/color.js +0 -8
  58. package/core/Graphics/Canvas/Utils/floodFill.js +0 -58
  59. package/core/Graphics/Canvas/_canvas_offscreen +0 -0
  60. package/core/Graphics/Canvas/canvas.js +0 -189
  61. package/core/Graphics/Canvas/index.js +0 -15
  62. package/core/Graphics/Svg/Elements/ZikoSvgElement.js +0 -28
  63. package/core/Graphics/Svg/Elements/circle.js +0 -34
  64. package/core/Graphics/Svg/Elements/ellipse.js +0 -29
  65. package/core/Graphics/Svg/Elements/foreignObject.js +0 -46
  66. package/core/Graphics/Svg/Elements/grid.js +0 -9
  67. package/core/Graphics/Svg/Elements/groupe.js +0 -29
  68. package/core/Graphics/Svg/Elements/image.js +0 -33
  69. package/core/Graphics/Svg/Elements/line.js +0 -29
  70. package/core/Graphics/Svg/Elements/path.js +0 -59
  71. package/core/Graphics/Svg/Elements/polygon.js +0 -31
  72. package/core/Graphics/Svg/Elements/polyline.js +0 -4
  73. package/core/Graphics/Svg/Elements/rect.js +0 -43
  74. package/core/Graphics/Svg/Elements/text.js +0 -26
  75. package/core/Graphics/Svg/index.js +0 -1
  76. package/core/Graphics/Svg/svg.js +0 -117
  77. package/core/Graphics/index.js +0 -61
  78. package/core/Math/Calculus/Special Functions/bessel.js +0 -31
  79. package/core/Math/Calculus/Special Functions/beta.js +0 -38
  80. package/core/Math/Calculus/Special Functions/gamma.js +0 -30
  81. package/core/Math/Calculus/Special Functions/index.js +0 -4
  82. package/core/Math/Calculus/index.js +0 -1
  83. package/core/Math/Complex/Fractals/julia.js +0 -0
  84. package/core/Math/Complex/index.js +0 -191
  85. package/core/Math/Discret/Combinaison/index.js +0 -34
  86. package/core/Math/Discret/Conversion/index.js +0 -86
  87. package/core/Math/Discret/Logic/index.js +0 -46
  88. package/core/Math/Discret/Permutation/index.js +0 -31
  89. package/core/Math/Discret/Set/index.js +0 -2
  90. package/core/Math/Discret/Set/powerSet.js +0 -15
  91. package/core/Math/Discret/Set/subSet.js +0 -10
  92. package/core/Math/Discret/index.js +0 -23
  93. package/core/Math/Functions/index.js +0 -182
  94. package/core/Math/Matrix/Decomposition.js +0 -90
  95. package/core/Math/Matrix/LinearSystem.js +0 -10
  96. package/core/Math/Matrix/Matrix.js +0 -712
  97. package/core/Math/Matrix/index.js +0 -3
  98. package/core/Math/Numeric/index.js +0 -0
  99. package/core/Math/Random/index.js +0 -173
  100. package/core/Math/Signal/__np.py.txt +0 -40
  101. package/core/Math/Signal/conv.js +0 -175
  102. package/core/Math/Signal/fft.js +0 -55
  103. package/core/Math/Signal/filter.js +0 -39
  104. package/core/Math/Signal/functions.js +0 -146
  105. package/core/Math/Signal/index.js +0 -110
  106. package/core/Math/Statistics/Functions/index.js +0 -100
  107. package/core/Math/Statistics/index.js +0 -16
  108. package/core/Math/Utils/arithmetic.js +0 -139
  109. package/core/Math/Utils/checkers.js +0 -11
  110. package/core/Math/Utils/comparaison.js +0 -1
  111. package/core/Math/Utils/conversions.js +0 -7
  112. package/core/Math/Utils/discret.js +0 -28
  113. package/core/Math/Utils/index.js +0 -102
  114. package/core/Math/Utils/mapfun.js +0 -43
  115. package/core/Math/absract.js +0 -1
  116. package/core/Math/const.js +0 -3
  117. package/core/Math/index.js +0 -193
  118. package/core/Reactivity/Events/Global/Click.js +0 -56
  119. package/core/Reactivity/Events/Global/Clipboard.js +0 -84
  120. package/core/Reactivity/Events/Global/CustomEvent.js +0 -53
  121. package/core/Reactivity/Events/Global/Drag.js +0 -137
  122. package/core/Reactivity/Events/Global/Focus.js +0 -56
  123. package/core/Reactivity/Events/Global/Key.js +0 -104
  124. package/core/Reactivity/Events/Global/Mouse.js +0 -230
  125. package/core/Reactivity/Events/Global/Pointer.js +0 -214
  126. package/core/Reactivity/Events/Global/Touch.js +0 -0
  127. package/core/Reactivity/Events/Global/Wheel.js +0 -44
  128. package/core/Reactivity/Events/Partiel/Hash.js +0 -44
  129. package/core/Reactivity/Events/Partiel/Input.js +0 -59
  130. package/core/Reactivity/Events/Partiel/MediaEvent.js +0 -1
  131. package/core/Reactivity/Events/ZikoEvent.js +0 -91
  132. package/core/Reactivity/Events/index.js +0 -60
  133. package/core/Reactivity/Observer/index.js +0 -3
  134. package/core/Reactivity/Observer/intersection.js +0 -40
  135. package/core/Reactivity/Observer/mutation.js +0 -90
  136. package/core/Reactivity/Observer/resize.js +0 -47
  137. package/core/Reactivity/Use/Contexte/index.js +0 -1
  138. package/core/Reactivity/Use/Contexte/useSuccesifKeys.js +0 -14
  139. package/core/Reactivity/Use/Decorators/index.js +0 -4
  140. package/core/Reactivity/Use/Interactions/index.js +0 -4
  141. package/core/Reactivity/Use/Interactions/useBluetooth.js +0 -48
  142. package/core/Reactivity/Use/Interactions/useChannel.js +0 -50
  143. package/core/Reactivity/Use/Interactions/useEventEmmiter.js +0 -64
  144. package/core/Reactivity/Use/Interactions/useSerial.js +0 -0
  145. package/core/Reactivity/Use/Interactions/useThread.js +0 -44
  146. package/core/Reactivity/Use/Interactions/useUsb.js +0 -0
  147. package/core/Reactivity/Use/Sensors/index.js +0 -2
  148. package/core/Reactivity/Use/Sensors/useBattery.js +0 -36
  149. package/core/Reactivity/Use/Sensors/useCamera.js +0 -0
  150. package/core/Reactivity/Use/Sensors/useGeolocation.js +0 -17
  151. package/core/Reactivity/Use/Sensors/useMicro.js +0 -0
  152. package/core/Reactivity/Use/Sensors/useOrientation.js +0 -0
  153. package/core/Reactivity/Use/Storage/index.js +0 -1
  154. package/core/Reactivity/Use/Storage/useCookie.js +0 -0
  155. package/core/Reactivity/Use/Storage/useIndexedDb.js +0 -0
  156. package/core/Reactivity/Use/Storage/useStorage.js +0 -74
  157. package/core/Reactivity/Use/UI/index.js +0 -4
  158. package/core/Reactivity/Use/UI/useCssLink.js +0 -0
  159. package/core/Reactivity/Use/UI/useCssText.js +0 -21
  160. package/core/Reactivity/Use/UI/useFavIcon.js +0 -38
  161. package/core/Reactivity/Use/UI/useLinearGradient.js +0 -0
  162. package/core/Reactivity/Use/UI/useMediaQuery.js +0 -1
  163. package/core/Reactivity/Use/UI/useRadialGradient.js +0 -0
  164. package/core/Reactivity/Use/UI/useStyle.js +0 -54
  165. package/core/Reactivity/Use/UI/useTheme.js +0 -62
  166. package/core/Reactivity/Use/UI/useTitle.js +0 -30
  167. package/core/Reactivity/Use/index.js +0 -82
  168. package/core/Reactivity/Use/todo.md +0 -26
  169. package/core/Reactivity/index.js +0 -3
  170. package/core/Time/animation.js +0 -76
  171. package/core/Time/index.js +0 -54
  172. package/core/Time/loop.js +0 -83
  173. package/core/Time/utils/decorators.js +0 -17
  174. package/core/Time/utils/ease.js +0 -144
  175. package/core/Time/utils/index.js +0 -18
  176. package/core/Time/utils/performance.js +0 -16
  177. package/core/Time/utils/ui.js +0 -26
  178. package/core/UI/CustomElement/Elements/Accordion/index.js +0 -62
  179. package/core/UI/CustomElement/Elements/Carousel/index.js +0 -47
  180. package/core/UI/CustomElement/Elements/CodeNote/CodeCell.js +0 -176
  181. package/core/UI/CustomElement/Elements/CodeNote/CodeNote.js +0 -69
  182. package/core/UI/CustomElement/Elements/CodeNote/SubElements.js +0 -64
  183. package/core/UI/CustomElement/Elements/CodeNote/index.js +0 -2
  184. package/core/UI/CustomElement/Elements/Columns.js +0 -1
  185. package/core/UI/CustomElement/Elements/FAB.js +0 -0
  186. package/core/UI/CustomElement/Elements/Menu.js +0 -0
  187. package/core/UI/CustomElement/Elements/Notification.js +0 -0
  188. package/core/UI/CustomElement/Elements/Popover.js +0 -0
  189. package/core/UI/CustomElement/Elements/Popup.js +0 -0
  190. package/core/UI/CustomElement/Elements/Swipper.js +0 -4
  191. package/core/UI/CustomElement/Elements/Tabs/index.js +0 -111
  192. package/core/UI/CustomElement/Elements/Timeline.js +0 -0
  193. package/core/UI/CustomElement/Elements/Toast.js +0 -0
  194. package/core/UI/CustomElement/Elements/Treeview.js +0 -0
  195. package/core/UI/CustomElement/Elements/index.js +0 -4
  196. package/core/UI/CustomElement/Flex.js +0 -97
  197. package/core/UI/CustomElement/Grid.js +0 -30
  198. package/core/UI/CustomElement/index.js +0 -3
  199. package/core/UI/Embaded/index.js +0 -1
  200. package/core/UI/Inputs/Primitives/btn.js +0 -30
  201. package/core/UI/Inputs/Primitives/elements.js +0 -28
  202. package/core/UI/Inputs/Primitives/inputs.js +0 -324
  203. package/core/UI/Inputs/Primitives/select.js +0 -14
  204. package/core/UI/Inputs/Primitives/textarea.js +0 -15
  205. package/core/UI/Inputs/camera.js +0 -23
  206. package/core/UI/Inputs/index.js +0 -20
  207. package/core/UI/List/elements.js +0 -0
  208. package/core/UI/List/index.js +0 -127
  209. package/core/UI/Media/Audio/index.js +0 -38
  210. package/core/UI/Media/Image/figure.js +0 -16
  211. package/core/UI/Media/Image/image.js +0 -33
  212. package/core/UI/Media/Image/index.js +0 -2
  213. package/core/UI/Media/Video/index.js +0 -49
  214. package/core/UI/Media/index.js +0 -3
  215. package/core/UI/Misc/index.js +0 -45
  216. package/core/UI/Semantic/index.js +0 -61
  217. package/core/UI/Style/index.js +0 -499
  218. package/core/UI/Table/elements.js +0 -94
  219. package/core/UI/Table/index.js +0 -3
  220. package/core/UI/Table/table.js +0 -112
  221. package/core/UI/Table/utils.js +0 -12
  222. package/core/UI/Text/heading.js +0 -34
  223. package/core/UI/Text/index.js +0 -3
  224. package/core/UI/Text/p.js +0 -36
  225. package/core/UI/Text/pre.js +0 -0
  226. package/core/UI/Text/text.js +0 -65
  227. package/core/UI/Utils/index.js +0 -70
  228. package/core/UI/ZikoUIElement.js +0 -503
  229. package/core/UI/index.js +0 -154
  230. package/core/__proto__/Array.js +0 -74
  231. package/core/__proto__/Function.js +0 -0
  232. package/core/__proto__/Number.js +0 -76
  233. package/core/__proto__/Object.js +0 -0
  234. package/core/__proto__/String.js +0 -0
  235. package/core/index.js +0 -72
  236. package/wrapper/react/readme.md +0 -19
@@ -1,499 +0,0 @@
1
- import { style , addSuffixeToNumber } from "../Utils/index.js";
2
- import { Matrix,cos,sin} from "../../Math/index.js";
3
- class ZikoUIElementStyle{
4
- constructor(defaultStyle={}){
5
- this.target=null;
6
- this.styles=new Map(
7
- [["default",defaultStyle]]
8
- );
9
- this.cache={
10
- isHidden:false,
11
- isFaddedOut:false,
12
- transformation:{
13
- Flip:[0,0,0],
14
- matrix:new Matrix([
15
- [1,0,0,0],
16
- [0,1,0,0],
17
- [0,0,1,0],
18
- [0,0,0,1]
19
- ])
20
- }
21
- }
22
- }
23
- style(styles,{target = "parent", maskVector = null } = {}){
24
- if (target === "parent" || target === 0)style(this.target.element, styles);
25
- else if(target === "parent" || target === 0){
26
- if (maskVector) {
27
- this.items.map((n, i) => maskVector[i] == 1 && n.style(styles));
28
- }
29
- else this.items.map((n) => n.style(styles));
30
- }
31
- return this;
32
- }
33
- linkTo(target){
34
- this.target=target;
35
- return this;
36
- }
37
- use(name="default"){
38
- this.style(this.styles.get(name));
39
- return this;
40
- }
41
- update(name,styles){
42
- const old=this.styles.get(name);
43
- old?this.styles.set(name,Object.assign(old,styles)):this.styles.set(name,styles);
44
- return this;
45
- }
46
- add(name,styles){
47
- this.styles.set(name,styles);
48
- return this;
49
- }
50
- replace(name,styles){
51
- this.styles.set(name,styles);
52
- return this;
53
- }
54
- delete(...names){
55
- names.forEach(n=>this.styles.delete(n));
56
- return this;
57
- }
58
- updateDefaultStyle(){
59
- const defaultStyle=Object.fromEntries(
60
- Object.entries(this.target.element.style).filter(n=>isNaN(+n[0]))
61
- )
62
- this.update("default",defaultStyle);
63
- return this;
64
- }
65
- hover(styles){
66
- //this.updateDefaultStyle()
67
- if(styles)this.add("hover",styles)
68
- this.target.element.addEventListener("pointerenter",()=>this.use("hover"));
69
- this.target.element.addEventListener("pointerleave",()=>this.use("default"))
70
- return this;
71
- }
72
- // Checkers
73
- isInline(){
74
- return getComputedStyle(this.target.element).display.includes("inline");
75
- }
76
- isBlock(){
77
- return !(this.isInline());
78
- }
79
- // Size
80
- size(width,height,{ target, maskVector } = {}){
81
- this.style({
82
- width,
83
- height
84
- },{ target, maskVector })
85
- return this;
86
- }
87
- width(w,{ target, maskVector } = {}){
88
- if(w instanceof Object){
89
- if(w instanceof Array)w={min:w[0],max:w[1]}
90
- if("min" in w || "max" in w){
91
- let min= w.min ?? w.max;
92
- let max= w.max ?? w.min;
93
- min=addSuffixeToNumber(min,"px");
94
- max=addSuffixeToNumber(max,"px");
95
- this.style({ minWidth: min, maxWidth: max }, { target, maskVector });
96
- }
97
- }
98
- else {
99
- w=addSuffixeToNumber(w,"px");
100
- this.style({width:w},{ target, maskVector });
101
- }
102
- return this
103
- }
104
- height(h,{ target, maskVector } = {}){
105
- if(h instanceof Object){
106
- if(h instanceof Array)h={min:h[0],max:h[1]}
107
- if("min" in h || "max" in h){
108
- let min= h.min ?? h.max;
109
- let max= h.max ?? h.min;
110
- min=addSuffixeToNumber(min,"px");
111
- max=addSuffixeToNumber(max,"px");
112
- this.style({ minHeight: min, maxHeight: max }, { target, maskVector });
113
- }
114
- }
115
- else {
116
- h=addSuffixeToNumber(h,"px");
117
- this.style({height:h},{ target, maskVector });
118
- }
119
- return this
120
- }
121
- enableResize(h=false,v=false,{ target, maskVector } = {}){
122
- let resize="none";
123
- if(h)v?resize="both":resize="horizontal";
124
- else v?resize="vertical":resize="none";
125
- this.style({
126
- resize,
127
- overflow:"hidden"
128
- },{ target, maskVector });
129
- if(this.isInline()){
130
- console.group("Ziko Issue : Temporarily Incompatible Method");
131
- console.warn(".enableResize has no effect on inline elements!");
132
- console.info("%cConsider using other display types such as block, inline-block, flex, or grid for proper resizing behavior.","color:gold;background-color:#3333cc;padding:5px");
133
- console.groupEnd();
134
- }
135
- return this;
136
- }
137
- // Apparence
138
- hide({after, target, maskVector } = {}){
139
- if(typeof after==="number"){
140
- const wrapper=()=>this.hide({target,maskVector})
141
- setTimeout(wrapper, after);
142
- clearTimeout(wrapper);
143
- }
144
- else {
145
- this.cache.isHidden=true;
146
- this.style({display:"none"},{target,maskVector});
147
- }
148
- return this;
149
- }
150
- show({after, target, maskVector } = {}){
151
- if(typeof after==="number"){
152
- const wrapper=()=>this.show({target,maskVector})
153
- setTimeout(wrapper, after);
154
- clearTimeout(wrapper);
155
- }
156
- else {
157
- this.cache.isHidden=false;
158
- this.style({display:""},{target,maskVector});
159
- }
160
- return this;
161
- }
162
- color(color,{ target, maskVector } = {}){
163
- this.style({color},{ target, maskVector });
164
- return this;
165
- }
166
- background(background,{ target, maskVector } = {}){
167
- this.style({background},{ target, maskVector });
168
- return this;
169
- }
170
- backgroundColor(backgroundColor,{ target, maskVector } = {}){
171
- this.style({backgroundColor},{ target, maskVector });
172
- return this;
173
- }
174
- opacity(opacity, { target, maskVector } = {}) {
175
- this.style({ opacity }, { target, maskVector });
176
- return this;
177
- }
178
- // Placement
179
- position(position,{ target, maskVector } = {}){
180
- this.style({position},{ target, maskVector });
181
- return this
182
- }
183
- display(disp, { target, maskVector } = {}) {
184
- this.style({ display: disp }, { target, maskVector });
185
- return this;
186
- }
187
- zIndex(z,{ target, maskVector } = {}){
188
- this.style({zIndex:z},{ target, maskVector });
189
- return this;
190
- }
191
- float(float, { target, maskVector } = {}) {
192
- this.style({ float: float }, { target, maskVector });
193
- return this;
194
- }
195
- // Box Model
196
- border(border = "1px solid red", { target, maskVector } = {}){
197
- this.style({border}, { target, maskVector });
198
- return this;
199
- }
200
- borderTop(borderTop = "1px solid red", { target, maskVector } = {}){
201
- this.style({borderTop}, { target, maskVector });
202
- return this;
203
- }
204
- borderRight(borderRight = "1px solid red", { target, maskVector } = {}){
205
- this.style({borderRight}, { target, maskVector });
206
- return this;
207
- }
208
- borderBottom(borderBottom = "1px solid red", { target, maskVector } = {}){
209
- this.style({borderBottom}, { target, maskVector });
210
- return this;
211
- }
212
- borderLeft(borderLeft = "1px solid red", { target, maskVector } = {}){
213
- this.style({borderLeft}, { target, maskVector });
214
- return this;
215
- }
216
- borderRadius(radius,{ target, maskVector } = {}){
217
- radius=addSuffixeToNumber(radius,"px");
218
- this.style({ borderRadius: radius }, { target, maskVector });
219
- return this;
220
- }
221
- margin(margin,{ target, maskVector } = {}){
222
- margin=addSuffixeToNumber(margin,"px");
223
- this.style({ margin }, { target, maskVector });
224
- return this;
225
- }
226
- marginTop(marginTop,{ target, maskVector } = {}){
227
- marginTop=addSuffixeToNumber(marginTop,"px");
228
- this.style({marginTop},{ target, maskVector });
229
- return this;
230
- }
231
- marginRight(marginRight,{ target, maskVector } = {}){
232
- marginRight=addSuffixeToNumber(marginRight,"px");
233
- this.style({marginRight},{ target, maskVector });
234
- return this;
235
- }
236
- marginBootom(marginBootom,{ target, maskVector } = {}){
237
- marginBootom=addSuffixeToNumber(marginBootom,"px");
238
- this.style({marginBootom},{ target, maskVector });
239
- return this;
240
- }
241
- marginLeft(marginLeft,{ target, maskVector } = {}){
242
- marginLeft=addSuffixeToNumber(marginLeft,"px");
243
- this.style({marginLeft},{ target, maskVector });
244
- return this;
245
- }
246
- padding(padding,{ target, maskVector } = {}){
247
- padding=addSuffixeToNumber(padding,"px");
248
- this.style({padding},{ target, maskVector });
249
- return this;
250
- }
251
- paddingTop(paddingTop,{ target, maskVector } = {}){
252
- paddingTop=addSuffixeToNumber(paddingTop,"px");
253
- this.style({paddingTop},{ target, maskVector });
254
- return this;
255
- }
256
- paddingRight(paddingRight,{ target, maskVector } = {}){
257
- paddingRight=addSuffixeToNumber(paddingRight,"px");
258
- this.style({paddingRight},{ target, maskVector });
259
- return this;
260
- }
261
- paddingBootom(paddingBootom,{ target, maskVector } = {}){
262
- paddingBootom=addSuffixeToNumber(paddingBootom,"px");
263
- this.style({paddingBootom},{ target, maskVector });
264
- return this;
265
- }
266
- paddingLeft(paddingLeft,{ target, maskVector } = {}){
267
- paddingLeft=addSuffixeToNumber(paddingLeft,"px");
268
- this.style({paddingLeft},{ target, maskVector });
269
- return this;
270
- }
271
- // Typographie
272
- font(font,{ target, maskVector } = {}){
273
- this.style({font},{ target, maskVector });
274
- return this;
275
- }
276
- fontFamily(fontFamily="",{ target, maskVector } = {}){
277
- this.style({fontFamily},{ target, maskVector });
278
- return this;
279
- }
280
- fontSize(fontSize,{ target, maskVector } = {}){
281
- this.style({fontSize},{ target, maskVector });
282
- return this;
283
- }
284
- // Misc
285
- cursor(type="pointer"){
286
- this.style({ cursor: type });
287
- return this;
288
- }
289
- overflow(x,y,{ target, maskVector } = {}){
290
- const values=["hidden","auto"];
291
- this.style({
292
- overflowX:typeof x==="number"?values[x]:x,
293
- overflowY:typeof y==="number"?values[y]:y
294
- },{target,maskVector})
295
- return this;
296
- }
297
- clip(polygon, { target, maskVector } = {}) {
298
- if (typeof polygon === "string") polygon = "polygon(" + polygon + ")";
299
- this.style({ clipPath: polygon }, { target, maskVector });
300
- return this;
301
- }
302
- // Transfromations
303
- fadeOut(t = 1) {
304
- this.style({
305
- transition: t/1000 + "s",
306
- opacity: 0
307
- });
308
- this.cache.isFaddedOut=true;
309
- return this;
310
- }
311
- fadeIn(t = 1) {
312
- this.style({
313
- transition: t/1000 + "s",
314
- opacity: 1
315
- });
316
- this.cache.isFaddedOut=false;
317
- return this;
318
- }
319
- toggleFade(t_in = 1000,t_out=t_in){
320
- this.cache.isFaddedOut?this.fadeIn(t_in):this.fadeOut(t_out);
321
- return this;
322
- }
323
- #applyTransformMatrix(t){
324
- const transformMatrix = this.cache.transformation.matrix.arr.join(",");
325
- this.style({
326
- transform: `matrix3d(${transformMatrix})`,
327
- "-webkit-transform": `matrix3d(${transformMatrix})`,
328
- "-moz-transform": `matrix3d(${transformMatrix})`,
329
- "-ms-transform": `matrix3d(${transformMatrix})`,
330
- "-o-transform": `matrix3d(${transformMatrix})`
331
- });
332
- if (t != 0) this.style({ transition: `transform ${t/1000}s ease` });
333
- }
334
- translate(x, y = x ,z = 0, t = 0) {
335
- this.cache.transformation.matrix.set(3,0,x);
336
- this.cache.transformation.matrix.set(3,1,y);
337
- this.cache.transformation.matrix.set(3,2,z);
338
- this.#applyTransformMatrix(t);
339
- return this;
340
- }
341
- translateX(x, t = 0) {
342
- this.cache.transformation.matrix.set(3,0,x)
343
- this.#applyTransformMatrix(t);
344
- return this;
345
- }
346
- translateY(y, t = 0) {
347
- this.cache.transformation.matrix.set(3,1,y)
348
- this.#applyTransformMatrix(t);
349
- return this;
350
- }
351
- translateZ(z, t = 0) {
352
- const d=-1/this.cache.transformation.matrix[2][2];
353
- this.cache.transformation.matrix.set(3,2,z);
354
- this.cache.transformation.matrix.set(3,3,1-(z/d));
355
- this.#applyTransformMatrix(t);
356
- return this;
357
- }
358
- perspective(d,t=0){
359
- const z=this.cache.transformation.matrix[3][2];
360
- this.cache.transformation.matrix.set(2,2,-1/d);
361
- this.cache.transformation.matrix.set(3,3,1-(z/d));
362
- this.#applyTransformMatrix(t);
363
- return this;
364
- }
365
- scale(x, y = x, t = 0) {
366
- this.cache.transformation.matrix.set(0,0,x)
367
- this.cache.transformation.matrix.set(1,1,y)
368
- const transformMatrix = this.cache.transformation.matrix.arr.join(",");
369
- this.#applyTransformMatrix(t);
370
- return this;
371
- }
372
- scaleX(x = 1 , t = 0) {
373
- this.cache.transformation.matrix.set(0,0,x)
374
- const transformMatrix = this.cache.transformation.matrix.arr.join(",");
375
- this.#applyTransformMatrix(t);
376
- return this;
377
- }
378
- scaleY(y = 1, t = 0) {
379
- this.cache.transformation.matrix.set(1,1,y)
380
- const transformMatrix = this.cache.transformation.matrix.arr.join(",");
381
- this.#applyTransformMatrix(t);
382
- return this;
383
- }
384
- skew(x, y = x, t = 0) {
385
- this.cache.transformation.matrix.set(0,1,x)
386
- this.cache.transformation.matrix.set(1,0,y)
387
- const transformMatrix = this.cache.transformation.matrix.arr.join(",");
388
- this.#applyTransformMatrix(t);
389
- return this;
390
- }
391
- skewX(x = 1 , t = 0) {
392
- this.cache.transformation.matrix.set(0,1,x)
393
- const transformMatrix = this.cache.transformation.matrix.arr.join(",");
394
- this.#applyTransformMatrix(t);
395
- return this;
396
- }
397
- skewY(y = 1, t = 0) {
398
- this.cache.transformation.matrix.set(1,0,y);
399
- const transformMatrix = this.cache.transformation.matrix.arr.join(",");
400
- this.#applyTransformMatrix(t);
401
- return this;
402
- }
403
- rotateX(deg, t = 0) {
404
- this.cache.transformation.matrix.set(1,1,cos(deg));
405
- this.cache.transformation.matrix.set(1,2,-sin(deg));
406
- this.cache.transformation.matrix.set(2,1,sin(deg));
407
- this.cache.transformation.matrix.set(1,2,cos(deg));
408
- this.#applyTransformMatrix(t);
409
- return this;
410
- }
411
- rotateY(deg, t = 0) {
412
- this.cache.transformation.matrix.set(0,0,cos(deg));
413
- this.cache.transformation.matrix.set(0,2,sin(deg));
414
- this.cache.transformation.matrix.set(2,0,-sin(deg));
415
- this.cache.transformation.matrix.set(2,2,cos(deg));
416
- this.#applyTransformMatrix(t);
417
- return this;
418
- }
419
- rotateZ(deg, t = 0) {
420
- this.cache.transformation.matrix.set(0,0,cos(deg));
421
- this.cache.transformation.matrix.set(0,1,-sin(deg));
422
- this.cache.transformation.matrix.set(1,0,sin(deg));
423
- this.cache.transformation.matrix.set(1,1,cos(deg));
424
- this.#applyTransformMatrix(t);
425
- return this;
426
- }
427
- flipeX({ t = 1 } = {}) {
428
- this.cache.transformation.Flip[0] += 180;
429
- this.cache.transformation.Flip[0] %= 360;
430
- this.rotateX(this.cache.transformation.Flip[0],t);
431
- return this;
432
- }
433
- flipeY(t = 1) {
434
- this.cache.transformation.Flip[1] += 180 ;
435
- this.cache.transformation.Flip[1] %= 360;
436
- this.rotateY(this.cache.transformation.Flip[1],t);
437
- return this;
438
- }
439
- flipeZ(t = 1) {
440
- this.cache.transformation.Flip[2] += 180;
441
- this.cache.transformation.Flip[2] %= 360;
442
- this.rotateZ(this.cache.transformation.Flip[2],t);
443
- return this;
444
- }
445
- slideHeightIn(t = 1, h = this.h) {
446
- this.style({ transition: t + "s", height: h });
447
- return this;
448
- }
449
- slideHeightOut(t = 1) {
450
- this.style({ transition: t + "s", height: 0 });
451
- this.target.element.addEventListener("transitionend", () =>
452
- this.style({ opacity: "none" }),
453
- );
454
- return this;
455
- }
456
- slideWidthIn(t = 1, w = this.w) {
457
- this.style({ transition: t + "s", width: w });
458
- return this;
459
- }
460
- slideWidthOut(t = 1) {
461
- this.style({ transition: t + "s", width: 0 });
462
- const wrapper=()=>{
463
- this.style({ opacity: "none" })
464
- }
465
- this.target.element.addEventListener("transitionend",wrapper);
466
- this.target.element.removeEventListener("transitionend",wrapper);
467
- return this;
468
- }
469
- slideIn({ t = 1, w = "100%", h = "auto" } = {}) {
470
- this.style({
471
- transition: t + "s",
472
- width: w,
473
- height: h,
474
- visibility: "visible",
475
- });
476
- return this;
477
- }
478
- slideOut({ t = 1, width = 0, height = 0 } = {}) {
479
- this.style({
480
- visibility: "hidden",
481
- transition: t + "s",
482
- opacity: "none",
483
- width: width,
484
- height: height,
485
- });
486
- const wrapper=()=>{
487
- this.style({ opacity: "none" });
488
- }
489
- this.target.element.addEventListener("transitionend",wrapper);
490
- this.target.element.removeEventListener("transitionend",wrapper);
491
- return this;
492
- }
493
-
494
- }
495
-
496
- const ZikoStyle=(defaultStyle)=>new ZikoUIElementStyle(defaultStyle);
497
- export{
498
- ZikoStyle
499
- }
@@ -1,94 +0,0 @@
1
- import ZikoUIElement from "../ZikoUIElement.js"
2
- import { text } from "../Text/text.js";
3
- class ZikoUITh extends ZikoUIElement{
4
- constructor(...ZikoUIElement){
5
- super()
6
- this.element=document.createElement("Th");
7
- this.append(...ZikoUIElement)
8
- }
9
- }
10
- class ZikoUITr extends ZikoUIElement{
11
- constructor(...ZikoUIElement){
12
- super()
13
- this.element=document.createElement("Tr");
14
- this.append(...ZikoUIElement)
15
- }
16
- }
17
- class ZikoUITd extends ZikoUIElement{
18
- constructor(...ZikoUIElement){
19
- super()
20
- this.element=document.createElement("Td");
21
- this.append(...ZikoUIElement)
22
- }
23
- }
24
- class ZikoUIThead extends ZikoUIElement{
25
- constructor(...ZikoUITr){
26
- super()
27
- this.element=document.createElement("Thead");
28
- this.append(...ZikoUITr)
29
- }
30
- }
31
- class ZikoUITbody extends ZikoUIElement{
32
- constructor(...ZikoUITr){
33
- super()
34
- this.element=document.createElement("Tbody");
35
- this.append(...ZikoUITr)
36
- }
37
- }
38
- class ZikoUITfoot extends ZikoUIElement{
39
- constructor(...ZikoUITr){
40
- super()
41
- this.element=document.createElement("Tfoot");
42
- this.append(...ZikoUITr)
43
- }
44
- }
45
- export class ZikoUICaption extends ZikoUIElement{
46
- constructor(ZikoUIElement){
47
- super()
48
- this.element=document.createElement("Caption");
49
- this.append(ZikoUIElement)
50
- }
51
- }
52
- class ZikoUICol extends ZikoUIElement{
53
- constructor(...ZikoUIElement){
54
- super()
55
- this.element=document.createElement("Col");
56
- this.append(...ZikoUIElement)
57
- }
58
- }
59
- class ZikoUIColgroup extends ZikoUIElement{
60
- constructor(...ZikoUIElement){
61
- super()
62
- this.element=document.createElement("Colgroup");
63
- this.append(...ZikoUIElement)
64
- }
65
- }
66
-
67
- const tr=(...ZikoUIElement)=>new ZikoUITr(...ZikoUIElement)
68
- const th=(...UI)=>{
69
- UI=UI.map(n=>{
70
- if(!(n instanceof ZikoUIElement))n=text(n)
71
- return n
72
- })
73
- return new ZikoUITh(...UI)
74
- }
75
- const td=(...UI)=>{
76
- UI=UI.map(n=>{
77
- if(!(n instanceof ZikoUIElement))n=text(n)
78
- return n
79
- })
80
- return new ZikoUITd(...UI)
81
- }
82
- const thead=(...ZikoUITd)=>{
83
- ZikoUITd=ZikoUITd.map(n=>{
84
- if(!(n instanceof ZikoUIElement))n=td(n)
85
- return n
86
- })
87
- return new ZikoUIThead(...UI)
88
- }
89
- const tbody=(...ZikoUITr)=>new ZikoUITbody(...ZikoUITr)
90
- const tfoot=(...ZikoUITr)=>new ZikoUITfoot(...ZikoUITr)
91
- const caption=(ZikoUITr)=>new ZikoUICaption(ZikoUITr)
92
-
93
-
94
- export {th,tr,td,thead,tbody,tfoot,caption}
@@ -1,3 +0,0 @@
1
- export{
2
- Table
3
- } from "./table.js"
@@ -1,112 +0,0 @@
1
- import ZikoUIElement from "../ZikoUIElement.js"
2
- import { tbody,caption,ZikoUICaption,thead} from "./elements.js";
3
- import { matrix } from "../../Math/Matrix/index.js";
4
- import { MatrixToTableUI } from "./utils.js";
5
- class ZikoUITable extends ZikoUIElement {
6
- constructor(body,{caption=null,head=null,foot=null}={}){
7
- super("table","Table");
8
- this.structure={
9
- caption,
10
- head,
11
- body:null,
12
- foot
13
- }
14
- if(body)this.fromMatrix(body);
15
- if(caption)this.setCaption(caption)
16
- }
17
- get caption(){
18
- return this.structure.caption;
19
- }
20
- get header(){
21
-
22
- }
23
- get body(){
24
-
25
- }
26
- get footer(){
27
-
28
- }
29
- setCaption(c){
30
- this.removeCaption();
31
- this.structure.caption=caption(c);
32
- this.append(this.structure.caption);
33
- return this;
34
- }
35
- removeCaption(){
36
- if(this.structure.caption)this.removeItem(...this.items.filter(n=>n instanceof ZikoUICaption));
37
- this.structure.caption=null;
38
- return this;
39
- }
40
- setHeader(...c){
41
- this.tHead=thead(...c);
42
- this.append(this.tHead);
43
- return this;
44
- }
45
- removeHeader(){
46
- this.removeItem(...this.items.filter(n=>n instanceof ZikoUICaption));
47
- return this;
48
- }
49
- setFooter(c){
50
- this.structure.caption=caption(c);
51
- this.append(this.structure.caption);
52
- return this;
53
- }
54
- removeFooter(){
55
- this.removeItem(...this.items.filter(n=>n instanceof ZikoUICaption));
56
- return this;
57
- }
58
- fromMatrix(bodyMatrix) {
59
- (bodyMatrix instanceof Array)?this.bodyMatrix=matrix(bodyMatrix):this.bodyMatrix=bodyMatrix;
60
- if(this.structure.body)this.remove(this.structure.body);
61
- this.structure.body=tbody()
62
- this.append(this.structure.body);
63
- this.structure.body.append(...MatrixToTableUI(this.bodyMatrix))
64
- //this.structure.body.append(...MatrixToTableUI(matrix))
65
- //this.cellStyles({ padding: "0.2rem 0.4rem", textAlign: "center" });
66
- return this;
67
- }
68
- transpose() {
69
- this.fromMatrix(this.bodyMatrix.T);
70
- return this;
71
- }
72
- hstack(m) {
73
- if(m instanceof ZikoUITable)m=m.bodyMatrix
74
- this.fromMatrix(this.bodyMatrix.clone.hstack(m));
75
- return this;
76
- }
77
- vstack(m) {
78
- if(m instanceof ZikoUITable)m=m.bodyMatrix
79
- this.fromMatrix(this.bodyMatrix.clone.vstack(m));
80
- return this;
81
- }
82
- slice(r0=0,c0=0,r1=this.bodyMatrix.rows-1,c1=this.bodyMatrix.cols-1) {
83
- this.fromMatrix(this.bodyMatrix.slice(r0,c0,r1,c1));
84
- return this;
85
- }
86
- sortByCols(n, config = { type: "num", order: "asc" }) {
87
- this.fromMatrix(this.bodyMatrix.clone.sortTable(n, config));
88
- return this;
89
- }
90
- sortByRows(n, config = { type: "num", order: "asc" }) {
91
- this.fromMatrix(this.bodyMatrix.T.clone.sortTable(n, config).T);
92
- return this;
93
- }
94
- filterByRows(item) {
95
- this.fromMatrix(this.bodyMatrix.clone.filterByRows(item));
96
- return this;
97
- }
98
- filterByCols(item) {
99
- this.fromMatrix(this.bodyMatrix.clone.filterByCols(item));
100
- return this;
101
- }
102
- forEachRow(callback){
103
- this.structure.body.forEach(callback);
104
- return this;
105
- }
106
- forEachItem(callback){
107
- this.structure.body.forEach(n=>n.forEach(callback));
108
- return this;
109
- }
110
- }
111
- const Table=(matrix,config)=>new ZikoUITable(matrix,config)
112
- export {Table}