ziko 0.0.28 → 0.0.30

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 (52) hide show
  1. package/dist/ziko.cjs +18 -174
  2. package/dist/ziko.js +18 -174
  3. package/dist/ziko.min.js +2 -2
  4. package/dist/ziko.mjs +18 -173
  5. package/package.json +24 -3
  6. package/src/__helpers__/index.js +6 -6
  7. package/src/app/index.js +10 -10
  8. package/src/app/json-style-sheet.js +1 -1
  9. package/src/app/routes.js +0 -1
  10. package/src/app/spa-file-based-routing.js +2 -2
  11. package/src/app/spa.js +3 -3
  12. package/src/app/ziko-app.js +1 -1
  13. package/src/{reactivity/events-exp → events}/__ZikoEvent__.js +4 -3
  14. package/src/{reactivity/events-exp → events}/click.js +2 -3
  15. package/src/events/clipboard.js +16 -0
  16. package/src/events/custom-event.js +0 -0
  17. package/src/events/drag.js +16 -0
  18. package/src/events/focus.js +16 -0
  19. package/src/events/hash.js +16 -0
  20. package/src/events/index.d.ts +3 -0
  21. package/src/events/index.js +15 -0
  22. package/src/{reactivity/events-exp → events}/key.js +2 -2
  23. package/src/events/mouse.js +16 -0
  24. package/src/{reactivity/events-exp → events}/pointer.js +3 -4
  25. package/src/events/touch.js +16 -0
  26. package/src/events/types/__Shared__.d.ts +148 -0
  27. package/src/events/types/clipboard.d.ts +20 -0
  28. package/src/events/types/focus.d.ts +19 -0
  29. package/src/events/types/pointer.d.ts +45 -0
  30. package/src/events/wheel.js +16 -0
  31. package/src/index.js +14 -14
  32. package/src/reactivity/index.js +0 -3
  33. package/src/ui/elements/embaded/html.js +1 -1
  34. package/src/ui/elements/embaded/youtube.js +2 -2
  35. package/src/ui/elements/grid/index.js +1 -1
  36. package/src/ui/index.js +21 -19
  37. package/src/ui/tags/index.d.ts +144 -0
  38. package/src/ui/tags/index.js +21 -0
  39. package/src/_global (To Be Removed )/_themes/dark.js +0 -885
  40. package/src/_global (To Be Removed )/_themes/index.js +0 -11
  41. package/src/_global (To Be Removed )/_themes/light.js +0 -255
  42. package/src/_global (To Be Removed )/app/index.js +0 -46
  43. package/src/_global (To Be Removed )/component/index.js +0 -38
  44. package/src/_global (To Be Removed )/globals/index.js +0 -20
  45. package/src/_global (To Be Removed )/index.js +0 -4
  46. package/src/_global (To Be Removed )/params/index.js +0 -40
  47. package/src/_global (To Be Removed )/router/index.js +0 -67
  48. package/src/_global (To Be Removed )/seo/index.js +0 -43
  49. package/src/_global (To Be Removed )/style/index.js +0 -1
  50. package/src/reactivity/events-exp/index.js +0 -5
  51. /package/src/{reactivity/events-exp → events}/__Events__.js +0 -0
  52. /package/src/{reactivity/events-exp → events}/utils.js +0 -0
@@ -1,11 +0,0 @@
1
- import LightThemes from "./light";
2
- import DarkThemes from "./dark";
3
- const Themes={
4
- ...LightThemes,
5
- ...DarkThemes
6
- }
7
- export {
8
- Themes,
9
- LightThemes,
10
- DarkThemes,
11
- };
@@ -1,255 +0,0 @@
1
- const LightThemes={
2
- cozyCottonCandy: {
3
- background: "#FCE4EC",
4
- currentLine: "#F8BBD0",
5
- selection: "#FFCDD2",
6
- foreground: "#673AB7",
7
- comment: "#9575CD",
8
- cyan: "#00BCD4",
9
- green: "#4CAF50",
10
- orange: "#FF9800",
11
- pink: "#E91E63",
12
- purple: "#9C27B0",
13
- red: "#F44336",
14
- yellow: "#FFEB3B"
15
- },
16
- crystalClear: {
17
- background: "#F6F8FA",
18
- currentLine: "#E8F0F5",
19
- selection: "#D4E9F7",
20
- foreground: "#485766",
21
- comment: "#8492A6",
22
- cyan: "#00ACC1",
23
- green: "#8BC34A",
24
- orange: "#FFA726",
25
- pink: "#FF4081",
26
- purple: "#7E57C2",
27
- red: "#EF5350",
28
- yellow: "#FFD740"
29
- },
30
- lightdreamyDusk: {
31
- background: "#F5F5F5",
32
- currentLine: "#E8E8E8",
33
- selection: "#DADADA",
34
- foreground: "#555555",
35
- comment: "#999999",
36
- cyan: "#5FB3B3",
37
- green: "#68C386",
38
- orange: "#FFB67A",
39
- pink: "#FF94B0",
40
- purple: "#B78BC3",
41
- red: "#FF6666",
42
- yellow: "#FFD666"
43
- },
44
- luminousLavender: {
45
- background: "#F3E5F5",
46
- currentLine: "#E1BEE7",
47
- selection: "#CE93D8",
48
- foreground: "#311B92",
49
- comment: "#673AB7",
50
- cyan: "#00BCD4",
51
- green: "#8BC34A",
52
- orange: "#FF9800",
53
- pink: "#E91E63",
54
- purple: "#9C27B0",
55
- red: "#F44336",
56
- yellow: "#FFEB3B"
57
- },
58
- meadowMornings: {
59
- background: "#F3E5F5",
60
- currentLine: "#E1BEE7",
61
- selection: "#CE93D8",
62
- foreground: "#311B92",
63
- comment: "#673AB7",
64
- cyan: "#00BCD4",
65
- green: "#8BC34A",
66
- orange: "#FF9800",
67
- pink: "#E91E63",
68
- purple: "#9C27B0",
69
- red: "#F44336",
70
- yellow: "#FFEB3B"
71
- },
72
- moonlitMauve: {
73
- background: "#F3E5F5",
74
- currentLine: "#E1BEE7",
75
- selection: "#CE93D8",
76
- foreground: "#311B92",
77
- comment: "#673AB7",
78
- cyan: "#00BCD4",
79
- green: "#8BC34A",
80
- orange: "#FF9800",
81
- pink: "#E91E63",
82
- purple: "#9C27B0",
83
- red: "#F44336",
84
- yellow: "#FFEB3B"
85
- },
86
- morningMist: {
87
- background: "#F6F6F6",
88
- currentLine: "#EAEAEA",
89
- selection: "#D8D8D8",
90
- foreground: "#333333",
91
- comment: "#808080",
92
- cyan: "#00A6A6",
93
- green: "#4CAF50",
94
- orange: "#FFA726",
95
- pink: "#FF4081",
96
- purple: "#9C27B0",
97
- red: "#FF5252",
98
- yellow: "#FFD740"
99
- },
100
- oceanBreeze: {
101
- background: "#ECF1F4",
102
- currentLine: "#DDE8ED",
103
- selection: "#BFD3C1",
104
- foreground: "#37474F",
105
- comment: "#607D8B",
106
- cyan: "#00BCD4",
107
- green: "#8BC34A",
108
- orange: "#FF9800",
109
- pink: "#E91E63",
110
- purple: "#673AB7",
111
- red: "#F44336",
112
- yellow: "#FFEB3B"
113
- },
114
- pastelParadise: {
115
- background: "#F5F5F5",
116
- currentLine: "#E8E8E8",
117
- selection: "#DADADA",
118
- foreground: "#555555",
119
- comment: "#999999",
120
- cyan: "#5FB3B3",
121
- green: "#68C386",
122
- orange: "#FFB67A",
123
- pink: "#FF94B0",
124
- purple: "#B78BC3",
125
- red: "#FF6666",
126
- yellow: "#FFD666"
127
- },
128
- pastelPetals: {
129
- background: "#FCE4EC",
130
- currentLine: "#F8BBD0",
131
- selection: "#FFCDD2",
132
- foreground: "#673AB7",
133
- comment: "#9575CD",
134
- cyan: "#00BCD4",
135
- green: "#4CAF50",
136
- orange: "#FF9800",
137
- pink: "#E91E63",
138
- purple: "#9C27B0",
139
- red: "#F44336",
140
- yellow: "#FFEB3B"
141
- },
142
- sereneSnowfall: {
143
- background: "#F9F9F9",
144
- currentLine: "#EDEDED",
145
- selection: "#D8D8D8",
146
- foreground: "#454545",
147
- comment: "#888888",
148
- cyan: "#5FA5A5",
149
- green: "#5BC47E",
150
- orange: "#FFBC8D",
151
- pink: "#FFA7BF",
152
- purple: "#B88AAE",
153
- red: "#FF7575",
154
- yellow: "#FFD98F"
155
- },
156
- softSherbet: {
157
- background: "#FDF8F3",
158
- currentLine: "#FAF1EB",
159
- selection: "#FFEBEE",
160
- foreground: "#6D4C41",
161
- comment: "#A1887F",
162
- cyan: "#00BCD4",
163
- green: "#689F38",
164
- orange: "#FFA000",
165
- pink: "#EC407A",
166
- purple: "#8E24AA",
167
- red: "#E53935",
168
- yellow: "#FFC107"
169
- },
170
- subtleSerenity: {
171
- background: "#F3F5F7",
172
- currentLine: "#E8EDF2",
173
- selection: "#D1D9E6",
174
- foreground: "#2C3E50",
175
- comment: "#95A5A6",
176
- cyan: "#3498DB",
177
- green: "#2ECC71",
178
- orange: "#F39C12",
179
- pink: "#E74C3C",
180
- purple: "#9B59B6",
181
- red: "#C0392B",
182
- yellow: "#F1C40F"
183
- },
184
- summerSunset: {
185
- background: "#FCE4EC",
186
- currentLine: "#F8BBD0",
187
- selection: "#FFCDD2",
188
- foreground: "#4E342E",
189
- comment: "#795548",
190
- cyan: "#009688",
191
- green: "#43A047",
192
- orange: "#FF5722",
193
- pink: "#E91E63",
194
- purple: "#9C27B0",
195
- red: "#F44336",
196
- yellow: "#FFEB3B"
197
- },
198
- sunnyDay: {
199
- background: "#FFF8E1",
200
- currentLine: "#FFF3E0",
201
- selection: "#FFE0B2",
202
- foreground: "#4E342E",
203
- comment: "#795548",
204
- cyan: "#00BCD4",
205
- green: "#8BC34A",
206
- orange: "#FF9800",
207
- pink: "#E91E63",
208
- purple: "#673AB7",
209
- red: "#F44336",
210
- yellow: "#FFEB3B"
211
- },
212
- tranquilTwilight: {
213
- background: "#F9F9F9",
214
- currentLine: "#EDEDED",
215
- selection: "#D8D8D8",
216
- foreground: "#454545",
217
- comment: "#888888",
218
- cyan: "#5FA5A5",
219
- green: "#5BC47E",
220
- orange: "#FFBC8D",
221
- pink: "#FFA7BF",
222
- purple: "#B88AAE",
223
- red: "#FF7575",
224
- yellow: "#FFD98F"
225
- },
226
- tranquilWaves: {
227
- background: "#F9F9F9",
228
- currentLine: "#E4E4E4",
229
- selection: "#D4D4D4",
230
- foreground: "#2C3E50",
231
- comment: "#7F8C8D",
232
- cyan: "#3498DB",
233
- green: "#2ECC71",
234
- orange: "#F39C12",
235
- pink: "#E74C3C",
236
- purple: "#9B59B6",
237
- red: "#C0392B",
238
- yellow: "#F1C40F"
239
- },
240
- whisperingWillow: {
241
- background: "#F6F8FA",
242
- currentLine: "#E8F0F5",
243
- selection: "#D4E9F7",
244
- foreground: "#485766",
245
- comment: "#8492A6",
246
- cyan: "#00ACC1",
247
- green: "#8BC34A",
248
- orange: "#FFA726",
249
- pink: "#FF4081",
250
- purple: "#7E57C2",
251
- red: "#EF5350",
252
- yellow: "#FFD740"
253
- }
254
- }
255
- export default LightThemes;
@@ -1,46 +0,0 @@
1
- import { ZikoUIFlex } from "../../ui/elements/derived/flex/index.js";
2
- import { Seo } from "../seo/index.js";
3
- import { useHashEvent } from "../../reactivity/index.js";
4
- class ZikoUIApp extends ZikoUIFlex{
5
- constructor(){
6
- super("main");
7
- this.root=document.documentElement;
8
- this.head=null;
9
- this.#init();
10
- this.seo=Seo(this);
11
- Object.assign(this.events,{
12
- hash:null
13
- })
14
- Object.assign(this.cache,{
15
- theme:null,
16
- isRoot:true
17
- });
18
- // globalThis.__Ziko__.__Config__.default.render && this.render();
19
- }
20
- #init(){
21
- this.root.setAttribute("data-engine","zikojs");
22
- const head=this.root.getElementsByTagName("head")[0];
23
- this.head=head?head:this.head=document?.createElement("head");
24
- if(!head)this.root.insertBefore(this.head,document?.body);
25
- const title=this.head.getElementsByTagName("title")[0];
26
- this.Title=title?title:document?.createElement("title");
27
- if(!title)this.head.append(this.Title);
28
- }
29
- title(title=this.title.textContent){
30
- this.Title.textContent=title;
31
- return this;
32
- }
33
- prefetch(){
34
-
35
- }
36
- description(){
37
-
38
- }
39
- onHashChange(...callbacks){
40
- if(!this.events.hash)this.events.hash = useHashEvent(this);
41
- this.events.hash.onChange(...callbacks);
42
- return this;
43
- }
44
- }
45
- const App=(...UIElement)=>new ZikoUIApp().append(...UIElement)
46
- export {App};
@@ -1,38 +0,0 @@
1
- // if(globalThis?.document){
2
- // class ZikoUIComponent extends HTMLElement{
3
- // constructor(){
4
- // super();
5
- // this.shadowDOM = this.attachShadow({ mode: 'open' });
6
- // this.wrapper=document?.createElement("div");
7
- // }
8
- // connectedCallback() {
9
- // this.setAttribute('role', 'region');
10
- // this.setAttribute('data-engine',"zikojs");
11
- // this.shadowDOM.append(this.wrapper);
12
- // this.observeContentChanges();
13
- // }
14
- // observeContentChanges() {
15
- // const observer = new MutationObserver((mutations) => {
16
- // mutations.forEach((mutation) => {
17
- // if (mutation.type === 'childList' || mutation.type === 'characterData') {
18
- // this.wrapper.innerHTML="";
19
- // __Ziko__.__Config__.setDefault({ target: this.wrapper });
20
- // globalThis.eval(this.innerHTML);
21
- // }
22
- // });
23
- // });
24
- // observer.observe(this, { childList: true, subtree: true, characterData: true });
25
- // }
26
-
27
- // disconnectedCallback() {
28
- // console.log('ZikoUIComponent removed from page.');
29
- // }
30
- // }
31
- // globalThis.customElements.define('ziko-ui', ZikoUIComponent);
32
- // }
33
- // else {
34
- // var ZikoUIComponent = null;
35
- // }
36
- // export{
37
- // ZikoUIComponent
38
- // }
@@ -1,20 +0,0 @@
1
- const __UI__={}
2
- const __Config__={
3
- default:{
4
- target:null,
5
- render:true,
6
- math:{
7
- mode:"deg"
8
- }
9
- },
10
- setDefault:function(pairs){
11
- const keys=Object.keys(pairs);
12
- const values=Object.values(pairs);
13
- for(let i=0;i<keys.length;i++)this.default[keys[i]]=values[i];
14
- },
15
- init:()=>document.documentElement.setAttribute("data-engine","zikojs")
16
- }
17
- export {
18
- __UI__,
19
- __Config__
20
- }
@@ -1,4 +0,0 @@
1
- export {
2
- __Config__
3
- } from "./globals/index.js"
4
- export * from "./globals/index.js"
@@ -1,40 +0,0 @@
1
- function parseParams(queryString) {
2
- const params = {};
3
- queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
4
- const [key, value] = match.split('=');
5
- params[key] = value;
6
- });
7
- return params;
8
- }
9
-
10
- function defineParamsGetter(target = globalThis){
11
- Object.defineProperties(target, {
12
- 'QueryParams': {
13
- get: function() {
14
- return parseParams(location.search.substring(1));
15
- },
16
- configurable: false,
17
- enumerable: true
18
- },
19
- 'HashParams': {
20
- get: function() {
21
- const hash = window.location.hash.substring(1);
22
- return parseParams(hash);
23
- },
24
- configurable: false,
25
- enumerable: true
26
- }
27
- });
28
- }
29
-
30
-
31
- /*
32
-
33
- /users?name=ziko&age=26
34
- /users#name=ziko
35
-
36
- */
37
-
38
- export{
39
- defineParamsGetter
40
- }
@@ -1,67 +0,0 @@
1
- import { text } from "../../ui/elements/primitives/text/index.js";
2
- class ZikoSPA{
3
- constructor(root_UI,routes){
4
- this.root_UI=root_UI;
5
- this.routes=new Map([
6
- [404,text("Error 404")],
7
- ...Object.entries(routes)
8
- ]);
9
- this.patterns=new Map();
10
- this.maintain();
11
- window.onpopstate = this.render(location.pathname);
12
-
13
- }
14
- // get(path,wrapper){
15
- // (path instanceof RegExp)
16
- // ? this.patterns.set(path,wrapper)
17
- // : this.routes.set(path,wrapper);
18
- // this.maintain();
19
- // return this;
20
- // }
21
- get(path, wrapper) {
22
- if (typeof path === 'string' && path.includes(':')) {
23
- const params = [];
24
- const regex = new RegExp(`^${path.replace(/:([^/]+)/g, (match, paramName) => {
25
- params.push(paramName);
26
- return '(.+)';
27
- })}$`);
28
- this.patterns.set(regex, (path) => {
29
- const values = regex.exec(path).slice(1);
30
- wrapper(...values);
31
- });
32
- } else {
33
- (path instanceof RegExp)
34
- ? this.patterns.set(path, wrapper)
35
- : this.routes.set(path, wrapper);
36
- }
37
- this.maintain();
38
- return this;
39
- }
40
- maintain(){
41
- this.root_UI.append(...this.routes.values());
42
- [...this.routes.values()].map(n=>n.render(false));
43
- this.render(location.pathname)
44
- return this;
45
- }
46
- render(path){
47
- if(this.routes.get(path))this.routes.get(path).render(true);
48
- else{
49
- const key=[...this.patterns.keys()].find(pattern=>pattern.test(path))
50
- if(key)this.patterns.get(key)(path);
51
- else this.routes.get(404).render(true)
52
- }
53
- window.history.pushState({}, "", path);
54
- return this;
55
- }
56
- }
57
- const SPA=(root_UI,routes,patterns)=>new ZikoSPA(root_UI,routes,patterns);
58
-
59
- export {SPA}
60
-
61
- /*
62
- // Static
63
- S.get("/url",wrapper)
64
- // Dynamique
65
- s.get("/url/name/:name/id/:id",(path,name,id)=>handler())
66
- // regEx
67
- */
@@ -1,43 +0,0 @@
1
- class ZikoSeo{
2
- constructor(app){
3
- this.app=app;
4
- this.meta={};
5
- this.#setMeta("generator","zikojs")
6
- }
7
- #setMeta(key,value){
8
- const meta=document.querySelector(`meta[name=${key}]`);
9
- this.meta=meta?meta:document?.createElement("meta");
10
- this.meta.setAttribute("name",key);
11
- this.meta.setAttribute("content",value);
12
- if(!meta)this.app.head.append(this.meta);
13
- return this;
14
- }
15
- charset(charset="utf-8"){
16
- const meta=document.querySelector("meta[charset]");
17
- this.meta=meta?meta:document?.createElement("meta");
18
- this.meta.setAttribute("charset",charset);
19
- if(!meta)this.app.head.append(this.meta);
20
- return this;
21
- }
22
- description(description){
23
- this.#setMeta("description",description);
24
- return this;
25
- }
26
- viewport(viewport="width=device-width, initial-scale=1.0"){
27
- this.#setMeta("viewport",viewport);
28
- return this;
29
- }
30
- keywords(...keywords){
31
- keywords.push("zikojs");
32
- keywords=[...new Set(keywords)].join(", ");
33
- this.#setMeta("keywords",keywords);
34
- return this;
35
- }
36
- author(name="",email=""){
37
- const author=[name,email].join(", ");
38
- this.#setMeta("author",author);
39
- return this;
40
- }
41
- }
42
- const Seo=(app)=>new ZikoSeo(app);
43
- export{Seo}
@@ -1 +0,0 @@
1
- export * from "./jsonStyleSheet"
@@ -1,5 +0,0 @@
1
- export * from "./__ZikoEvent__.js";
2
- export * from "./utils.js";
3
- // export * from "./click.js";
4
- // export * from "./key.js";
5
- // export * from "./pointer.js"
File without changes