ziko 0.0.5 → 0.0.6

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 (235) hide show
  1. package/dist/ziko.cjs +9999 -9853
  2. package/dist/ziko.js +10000 -9854
  3. package/dist/ziko.min.js +2 -2
  4. package/dist/ziko.mjs +9999 -9853
  5. package/package.json +12 -4
  6. package/starter/bin/index.js +10 -0
  7. package/wrapper/react/README.md +26 -0
  8. package/wrapper/react/index.jsx +7 -1
  9. package/wrapper/svelte/ZikoUI.svelte +15 -0
  10. package/wrapper/vue/ZikoUI.vue +8 -2
  11. package/core/App/Accessibility/index.js +0 -0
  12. package/core/App/Globals/__Target__.js +0 -3
  13. package/core/App/Globals/__UI__.js +0 -38
  14. package/core/App/Globals/__init__.js +0 -8
  15. package/core/App/Globals/index.js +0 -18
  16. package/core/App/Router/index.js +0 -40
  17. package/core/App/Seo/index.js +0 -43
  18. package/core/App/Themes/dark.js +0 -885
  19. package/core/App/Themes/index.js +0 -11
  20. package/core/App/Themes/light.js +0 -255
  21. package/core/App/app.js +0 -46
  22. package/core/App/index.js +0 -12
  23. package/core/Data/Api/fetchdom.js +0 -14
  24. package/core/Data/Api/index.js +0 -4
  25. package/core/Data/Api/preload.js +0 -11
  26. package/core/Data/Converter/canvas.js +0 -25
  27. package/core/Data/Converter/csv.js +0 -33
  28. package/core/Data/Converter/index.js +0 -25
  29. package/core/Data/Converter/json.js +0 -80
  30. package/core/Data/Converter/markdown.js +0 -83
  31. package/core/Data/Converter/svg.js +0 -11
  32. package/core/Data/Parser/markdown.js +0 -0
  33. package/core/Data/Parser/xml.js +0 -47
  34. package/core/Data/Strings/index.js +0 -26
  35. package/core/Data/decorators.js +0 -0
  36. package/core/Data/index.js +0 -64
  37. package/core/Graphics/Canvas/Elements/Basic/arc.js +0 -43
  38. package/core/Graphics/Canvas/Elements/Basic/image.js +0 -0
  39. package/core/Graphics/Canvas/Elements/Basic/line.js +0 -26
  40. package/core/Graphics/Canvas/Elements/Basic/path.js +0 -0
  41. package/core/Graphics/Canvas/Elements/Basic/points.js +0 -48
  42. package/core/Graphics/Canvas/Elements/Basic/polygon.js +0 -7
  43. package/core/Graphics/Canvas/Elements/Basic/polyline.js +0 -0
  44. package/core/Graphics/Canvas/Elements/Basic/rect.js +0 -46
  45. package/core/Graphics/Canvas/Elements/Basic/text.js +0 -0
  46. package/core/Graphics/Canvas/Elements/Chart/histogram.js +0 -0
  47. package/core/Graphics/Canvas/Elements/Chart/plot.js +0 -0
  48. package/core/Graphics/Canvas/Elements/Chart/scatter.js +0 -2
  49. package/core/Graphics/Canvas/Elements/Chart/stem.js +0 -0
  50. package/core/Graphics/Canvas/Elements/Element.js +0 -115
  51. package/core/Graphics/Canvas/Elements/Groupe.js +0 -0
  52. package/core/Graphics/Canvas/Elements/grid.js +0 -0
  53. package/core/Graphics/Canvas/Elements/index.js +0 -13
  54. package/core/Graphics/Canvas/Filter/index.js +0 -0
  55. package/core/Graphics/Canvas/Paint/index.js +0 -0
  56. package/core/Graphics/Canvas/Utils/color.js +0 -8
  57. package/core/Graphics/Canvas/Utils/floodFill.js +0 -58
  58. package/core/Graphics/Canvas/_canvas_offscreen +0 -0
  59. package/core/Graphics/Canvas/canvas.js +0 -189
  60. package/core/Graphics/Canvas/index.js +0 -15
  61. package/core/Graphics/Svg/Elements/ZikoSvgElement.js +0 -28
  62. package/core/Graphics/Svg/Elements/circle.js +0 -34
  63. package/core/Graphics/Svg/Elements/ellipse.js +0 -29
  64. package/core/Graphics/Svg/Elements/foreignObject.js +0 -46
  65. package/core/Graphics/Svg/Elements/grid.js +0 -9
  66. package/core/Graphics/Svg/Elements/groupe.js +0 -29
  67. package/core/Graphics/Svg/Elements/image.js +0 -33
  68. package/core/Graphics/Svg/Elements/line.js +0 -29
  69. package/core/Graphics/Svg/Elements/path.js +0 -59
  70. package/core/Graphics/Svg/Elements/polygon.js +0 -31
  71. package/core/Graphics/Svg/Elements/polyline.js +0 -4
  72. package/core/Graphics/Svg/Elements/rect.js +0 -43
  73. package/core/Graphics/Svg/Elements/text.js +0 -26
  74. package/core/Graphics/Svg/index.js +0 -1
  75. package/core/Graphics/Svg/svg.js +0 -117
  76. package/core/Graphics/index.js +0 -61
  77. package/core/Math/Calculus/Special Functions/bessel.js +0 -31
  78. package/core/Math/Calculus/Special Functions/beta.js +0 -38
  79. package/core/Math/Calculus/Special Functions/gamma.js +0 -30
  80. package/core/Math/Calculus/Special Functions/index.js +0 -4
  81. package/core/Math/Calculus/index.js +0 -1
  82. package/core/Math/Complex/Fractals/julia.js +0 -0
  83. package/core/Math/Complex/index.js +0 -191
  84. package/core/Math/Discret/Combinaison/index.js +0 -34
  85. package/core/Math/Discret/Conversion/index.js +0 -86
  86. package/core/Math/Discret/Logic/index.js +0 -46
  87. package/core/Math/Discret/Permutation/index.js +0 -31
  88. package/core/Math/Discret/Set/index.js +0 -2
  89. package/core/Math/Discret/Set/powerSet.js +0 -15
  90. package/core/Math/Discret/Set/subSet.js +0 -10
  91. package/core/Math/Discret/index.js +0 -23
  92. package/core/Math/Functions/index.js +0 -182
  93. package/core/Math/Matrix/Decomposition.js +0 -90
  94. package/core/Math/Matrix/LinearSystem.js +0 -10
  95. package/core/Math/Matrix/Matrix.js +0 -712
  96. package/core/Math/Matrix/index.js +0 -3
  97. package/core/Math/Numeric/index.js +0 -0
  98. package/core/Math/Random/index.js +0 -173
  99. package/core/Math/Signal/__np.py.txt +0 -40
  100. package/core/Math/Signal/conv.js +0 -175
  101. package/core/Math/Signal/fft.js +0 -55
  102. package/core/Math/Signal/filter.js +0 -39
  103. package/core/Math/Signal/functions.js +0 -146
  104. package/core/Math/Signal/index.js +0 -110
  105. package/core/Math/Statistics/Functions/index.js +0 -100
  106. package/core/Math/Statistics/index.js +0 -16
  107. package/core/Math/Utils/arithmetic.js +0 -139
  108. package/core/Math/Utils/checkers.js +0 -11
  109. package/core/Math/Utils/comparaison.js +0 -1
  110. package/core/Math/Utils/conversions.js +0 -7
  111. package/core/Math/Utils/discret.js +0 -28
  112. package/core/Math/Utils/index.js +0 -102
  113. package/core/Math/Utils/mapfun.js +0 -43
  114. package/core/Math/absract.js +0 -1
  115. package/core/Math/const.js +0 -3
  116. package/core/Math/index.js +0 -193
  117. package/core/Reactivity/Events/Global/Click.js +0 -56
  118. package/core/Reactivity/Events/Global/Clipboard.js +0 -84
  119. package/core/Reactivity/Events/Global/CustomEvent.js +0 -53
  120. package/core/Reactivity/Events/Global/Drag.js +0 -137
  121. package/core/Reactivity/Events/Global/Focus.js +0 -56
  122. package/core/Reactivity/Events/Global/Key.js +0 -104
  123. package/core/Reactivity/Events/Global/Mouse.js +0 -230
  124. package/core/Reactivity/Events/Global/Pointer.js +0 -214
  125. package/core/Reactivity/Events/Global/Touch.js +0 -0
  126. package/core/Reactivity/Events/Global/Wheel.js +0 -44
  127. package/core/Reactivity/Events/Partiel/Hash.js +0 -44
  128. package/core/Reactivity/Events/Partiel/Input.js +0 -59
  129. package/core/Reactivity/Events/Partiel/MediaEvent.js +0 -1
  130. package/core/Reactivity/Events/ZikoEvent.js +0 -91
  131. package/core/Reactivity/Events/index.js +0 -60
  132. package/core/Reactivity/Observer/index.js +0 -3
  133. package/core/Reactivity/Observer/intersection.js +0 -40
  134. package/core/Reactivity/Observer/mutation.js +0 -90
  135. package/core/Reactivity/Observer/resize.js +0 -47
  136. package/core/Reactivity/Use/Contexte/index.js +0 -1
  137. package/core/Reactivity/Use/Contexte/useSuccesifKeys.js +0 -14
  138. package/core/Reactivity/Use/Decorators/index.js +0 -4
  139. package/core/Reactivity/Use/Interactions/index.js +0 -4
  140. package/core/Reactivity/Use/Interactions/useBluetooth.js +0 -48
  141. package/core/Reactivity/Use/Interactions/useChannel.js +0 -50
  142. package/core/Reactivity/Use/Interactions/useEventEmmiter.js +0 -64
  143. package/core/Reactivity/Use/Interactions/useSerial.js +0 -0
  144. package/core/Reactivity/Use/Interactions/useThread.js +0 -44
  145. package/core/Reactivity/Use/Interactions/useUsb.js +0 -0
  146. package/core/Reactivity/Use/Sensors/index.js +0 -2
  147. package/core/Reactivity/Use/Sensors/useBattery.js +0 -36
  148. package/core/Reactivity/Use/Sensors/useCamera.js +0 -0
  149. package/core/Reactivity/Use/Sensors/useGeolocation.js +0 -17
  150. package/core/Reactivity/Use/Sensors/useMicro.js +0 -0
  151. package/core/Reactivity/Use/Sensors/useOrientation.js +0 -0
  152. package/core/Reactivity/Use/Storage/index.js +0 -1
  153. package/core/Reactivity/Use/Storage/useCookie.js +0 -0
  154. package/core/Reactivity/Use/Storage/useIndexedDb.js +0 -0
  155. package/core/Reactivity/Use/Storage/useStorage.js +0 -74
  156. package/core/Reactivity/Use/UI/index.js +0 -4
  157. package/core/Reactivity/Use/UI/useCssLink.js +0 -0
  158. package/core/Reactivity/Use/UI/useCssText.js +0 -21
  159. package/core/Reactivity/Use/UI/useFavIcon.js +0 -38
  160. package/core/Reactivity/Use/UI/useLinearGradient.js +0 -0
  161. package/core/Reactivity/Use/UI/useMediaQuery.js +0 -1
  162. package/core/Reactivity/Use/UI/useRadialGradient.js +0 -0
  163. package/core/Reactivity/Use/UI/useStyle.js +0 -54
  164. package/core/Reactivity/Use/UI/useTheme.js +0 -62
  165. package/core/Reactivity/Use/UI/useTitle.js +0 -30
  166. package/core/Reactivity/Use/index.js +0 -82
  167. package/core/Reactivity/Use/todo.md +0 -26
  168. package/core/Reactivity/index.js +0 -3
  169. package/core/Time/animation.js +0 -76
  170. package/core/Time/index.js +0 -54
  171. package/core/Time/loop.js +0 -83
  172. package/core/Time/utils/decorators.js +0 -17
  173. package/core/Time/utils/ease.js +0 -144
  174. package/core/Time/utils/index.js +0 -18
  175. package/core/Time/utils/performance.js +0 -16
  176. package/core/Time/utils/ui.js +0 -26
  177. package/core/UI/CustomElement/Elements/Accordion/index.js +0 -62
  178. package/core/UI/CustomElement/Elements/Carousel/index.js +0 -47
  179. package/core/UI/CustomElement/Elements/CodeNote/CodeCell.js +0 -176
  180. package/core/UI/CustomElement/Elements/CodeNote/CodeNote.js +0 -69
  181. package/core/UI/CustomElement/Elements/CodeNote/SubElements.js +0 -64
  182. package/core/UI/CustomElement/Elements/CodeNote/index.js +0 -2
  183. package/core/UI/CustomElement/Elements/Columns.js +0 -1
  184. package/core/UI/CustomElement/Elements/FAB.js +0 -0
  185. package/core/UI/CustomElement/Elements/Menu.js +0 -0
  186. package/core/UI/CustomElement/Elements/Notification.js +0 -0
  187. package/core/UI/CustomElement/Elements/Popover.js +0 -0
  188. package/core/UI/CustomElement/Elements/Popup.js +0 -0
  189. package/core/UI/CustomElement/Elements/Swipper.js +0 -4
  190. package/core/UI/CustomElement/Elements/Tabs/index.js +0 -111
  191. package/core/UI/CustomElement/Elements/Timeline.js +0 -0
  192. package/core/UI/CustomElement/Elements/Toast.js +0 -0
  193. package/core/UI/CustomElement/Elements/Treeview.js +0 -0
  194. package/core/UI/CustomElement/Elements/index.js +0 -4
  195. package/core/UI/CustomElement/Flex.js +0 -97
  196. package/core/UI/CustomElement/Grid.js +0 -30
  197. package/core/UI/CustomElement/index.js +0 -3
  198. package/core/UI/Embaded/index.js +0 -1
  199. package/core/UI/Inputs/Primitives/btn.js +0 -30
  200. package/core/UI/Inputs/Primitives/elements.js +0 -28
  201. package/core/UI/Inputs/Primitives/inputs.js +0 -324
  202. package/core/UI/Inputs/Primitives/select.js +0 -14
  203. package/core/UI/Inputs/Primitives/textarea.js +0 -15
  204. package/core/UI/Inputs/camera.js +0 -23
  205. package/core/UI/Inputs/index.js +0 -20
  206. package/core/UI/List/elements.js +0 -0
  207. package/core/UI/List/index.js +0 -127
  208. package/core/UI/Media/Audio/index.js +0 -38
  209. package/core/UI/Media/Image/figure.js +0 -16
  210. package/core/UI/Media/Image/image.js +0 -33
  211. package/core/UI/Media/Image/index.js +0 -2
  212. package/core/UI/Media/Video/index.js +0 -49
  213. package/core/UI/Media/index.js +0 -3
  214. package/core/UI/Misc/index.js +0 -45
  215. package/core/UI/Semantic/index.js +0 -61
  216. package/core/UI/Style/index.js +0 -499
  217. package/core/UI/Table/elements.js +0 -94
  218. package/core/UI/Table/index.js +0 -3
  219. package/core/UI/Table/table.js +0 -112
  220. package/core/UI/Table/utils.js +0 -12
  221. package/core/UI/Text/heading.js +0 -34
  222. package/core/UI/Text/index.js +0 -3
  223. package/core/UI/Text/p.js +0 -36
  224. package/core/UI/Text/pre.js +0 -0
  225. package/core/UI/Text/text.js +0 -65
  226. package/core/UI/Utils/index.js +0 -70
  227. package/core/UI/ZikoUIElement.js +0 -503
  228. package/core/UI/index.js +0 -154
  229. package/core/__proto__/Array.js +0 -74
  230. package/core/__proto__/Function.js +0 -0
  231. package/core/__proto__/Number.js +0 -76
  232. package/core/__proto__/Object.js +0 -0
  233. package/core/__proto__/String.js +0 -0
  234. package/core/index.js +0 -72
  235. 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}