@onetype/framework 2.0.29 → 2.0.31

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.
@@ -7,6 +7,6 @@ html.Item({
7
7
  priority: -60,
8
8
  attributes: {
9
9
  rel: 'icon',
10
- href: '/favicon.png'
10
+ href: 'https://cdn.onetype.ai/brand/logo/icon-orange.svg'
11
11
  }
12
12
  });
@@ -15,3 +15,8 @@
15
15
  position: relative;
16
16
  overflow: auto;
17
17
  }
18
+
19
+ .ot-page-area > div
20
+ {
21
+ height: 100%;
22
+ }
@@ -61,6 +61,6 @@
61
61
  line-height: 1.6;
62
62
  background: var(--ot-bg-2);
63
63
  overflow-x: auto;
64
- white-space: pre;
64
+ white-space: break-spaces;
65
65
  tab-size: 4;
66
66
  }
@@ -11,11 +11,16 @@ onetype.AddonReady('elements', (elements) =>
11
11
  label: {
12
12
  type: 'string',
13
13
  value: ''
14
+ },
15
+ source: {
16
+ type: 'string',
17
+ value: ''
14
18
  }
15
19
  },
16
20
  render: function()
17
21
  {
18
22
  this.copied = false;
23
+ this.escaped = this.source ? this.source.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
19
24
 
20
25
  this.copy = (event, ctx) =>
21
26
  {
@@ -32,7 +37,8 @@ onetype.AddonReady('elements', (elements) =>
32
37
  <span ot-if="label">{{ label }}</span>
33
38
  <button class="copy" ot-click="copy"><i ot-if="!copied">content_copy</i><i ot-if="copied">check</i></button>
34
39
  </div>
35
- <pre class="content"><slot name="content"></slot></pre>
40
+ <pre ot-if="escaped" class="content"><div ot-html="escaped"></div></pre>
41
+ <pre ot-if="!escaped" class="content"><slot name="content"></slot></pre>
36
42
  </div>
37
43
  `;
38
44
  }
@@ -12,6 +12,14 @@
12
12
  width: 100%;
13
13
  }
14
14
 
15
+ .e-4696d703 > .holder[variant="bg-2"]
16
+ {
17
+ background: var(--ot-bg-2);
18
+ border: 1px solid var(--ot-bg-2-border);
19
+ border-radius: var(--ot-radius-m);
20
+ padding: var(--ot-spacing-m);
21
+ }
22
+
15
23
  /* Line wrapper */
16
24
 
17
25
  .e-4696d703 > .holder > .line:empty
@@ -217,11 +217,16 @@ onetype.AddonReady('elements', (elements) =>
217
217
  content: {
218
218
  type: 'string',
219
219
  value: ''
220
+ },
221
+ variant: {
222
+ type: 'string',
223
+ value: '',
224
+ options: ['', 'bg-2']
220
225
  }
221
226
  },
222
227
  render: function()
223
228
  {
224
- return `<div class="holder">${parse(this.content)}</div>`;
229
+ return `<div class="holder" :variant="variant">${parse(this.content)}</div>`;
225
230
  }
226
231
  });
227
232
  });
@@ -11,6 +11,14 @@
11
11
  width: 100%;
12
12
  }
13
13
 
14
+ .e-29179902 > .holder[variant="bg-2"]
15
+ {
16
+ background: var(--ot-bg-2);
17
+ border: 1px solid var(--ot-bg-2-border);
18
+ border-radius: var(--ot-radius-m);
19
+ padding: var(--ot-spacing-m);
20
+ }
21
+
14
22
  .e-29179902 > .holder > .param
15
23
  {
16
24
  display: flex;
@@ -11,12 +11,17 @@ onetype.AddonReady('elements', (elements) =>
11
11
  items: {
12
12
  type: 'array',
13
13
  value: []
14
+ },
15
+ variant: {
16
+ type: 'string',
17
+ value: '',
18
+ options: ['', 'bg-2']
14
19
  }
15
20
  },
16
21
  render: function()
17
22
  {
18
23
  return `
19
- <div class="holder">
24
+ <div class="holder" :variant="variant">
20
25
  <div ot-for="item in items" class="param">
21
26
  <div class="left">
22
27
  <span class="name">{{ item.name }}</span>
@@ -40,3 +40,25 @@
40
40
  background: var(--ot-brand);
41
41
  border-color: var(--ot-brand);
42
42
  }
43
+
44
+ /* Dot */
45
+
46
+ .e-4a1d382d > .holder > .tag > .dot
47
+ {
48
+ width: 6px;
49
+ height: 6px;
50
+ border-radius: 50%;
51
+ margin-right: 6px;
52
+ flex-shrink: 0;
53
+ }
54
+
55
+ .e-4a1d382d > .holder > .tag > .dot-brand { background: var(--ot-brand); }
56
+ .e-4a1d382d > .holder > .tag > .dot-blue { background: var(--ot-blue); }
57
+ .e-4a1d382d > .holder > .tag > .dot-red { background: var(--ot-red); }
58
+ .e-4a1d382d > .holder > .tag > .dot-orange { background: var(--ot-orange); }
59
+ .e-4a1d382d > .holder > .tag > .dot-green { background: var(--ot-green); }
60
+
61
+ .e-4a1d382d > .holder > .tag.active > .dot
62
+ {
63
+ background: white;
64
+ }
@@ -22,6 +22,11 @@ onetype.AddonReady('elements', (elements) =>
22
22
  },
23
23
  render: function()
24
24
  {
25
+ this.normalized = () =>
26
+ {
27
+ return this.items.map(item => typeof item === 'string' ? { label: item } : item);
28
+ };
29
+
25
30
  this.select = (tag) =>
26
31
  {
27
32
  this.active = tag;
@@ -35,10 +40,10 @@ onetype.AddonReady('elements', (elements) =>
35
40
  return `
36
41
  <div class="holder">
37
42
  <button
38
- ot-for="tag in items"
39
- :class="'tag' + (tag === active ? ' active' : '')"
40
- ot-click="select(tag)"
41
- >{{ tag }}</button>
43
+ ot-for="tag in normalized()"
44
+ :class="'tag' + (tag.label === active ? ' active' : '')"
45
+ ot-click="select(tag.label)"
46
+ ><span ot-if="tag.color" :class="'dot dot-' + tag.color"></span>{{ tag.label }}</button>
42
47
  </div>
43
48
  `;
44
49
  }
@@ -20,9 +20,7 @@
20
20
  {
21
21
  display: flex;
22
22
  align-items: center;
23
- gap: var(--ot-spacing-s);
24
23
  text-decoration: none;
25
- color: var(--ot-text-1);
26
24
  flex-shrink: 0;
27
25
  }
28
26
 
@@ -31,6 +29,13 @@
31
29
  height: 16px;
32
30
  }
33
31
 
32
+ .e-64d8716d > .holder > .logo > .logo-arrow
33
+ {
34
+ display: none;
35
+ font-size: 16px;
36
+ color: var(--ot-text-2);
37
+ }
38
+
34
39
 
35
40
  /* Tabs */
36
41
 
@@ -38,8 +43,8 @@
38
43
  {
39
44
  display: flex;
40
45
  align-items: center;
41
- gap: var(--ot-spacing-x);
42
- margin-left: var(--ot-spacing-l);
46
+ margin-left: var(--ot-spacing-m);
47
+ border-left: 1px solid var(--ot-bg-2-border);
43
48
  height: 100%;
44
49
  }
45
50
 
@@ -49,7 +54,8 @@
49
54
  align-items: center;
50
55
  height: 100%;
51
56
  gap: 6px;
52
- padding: 0 var(--ot-spacing-s);
57
+ padding: 0 var(--ot-spacing-m);
58
+ border-right: 1px solid var(--ot-bg-2-border);
53
59
  text-decoration: none;
54
60
  white-space: nowrap;
55
61
  transition: color 0.2s ease, background 0.2s ease;
@@ -75,7 +81,7 @@
75
81
  {
76
82
  display: flex;
77
83
  align-items: center;
78
- gap: var(--ot-spacing-s);
79
84
  margin-left: auto;
85
+ border-left: 1px solid var(--ot-bg-2-border);
80
86
  height: 100%;
81
87
  }
@@ -47,7 +47,8 @@ onetype.AddonReady('elements', (elements) =>
47
47
  return `
48
48
  <nav class="holder">
49
49
  <a class="logo" href="/">
50
- <img class="logo-icon" src="https://global.divhunt.com/bd8ffd2fc9cf3a7e81b3326ac63a7cfe_4406.svg" alt="OneType" />
50
+ <img class="logo-icon" src="https://cdn.onetype.ai/brand/logo/full-orange.svg" alt="OneType" />
51
+ <i class="logo-arrow">keyboard_arrow_down</i>
51
52
  </a>
52
53
  <div class="tabs">
53
54
  <a ot-for="item in left" :class="'tab' + (item.active ? ' active' : '')" :href="item.href"><i>{{ item.icon }}</i> {{ item.label }}</a>
@@ -1,9 +1,9 @@
1
1
  .e-210c16c7
2
2
  {
3
3
  display: flex;
4
- width: 220px;
4
+ width: 240px;
5
5
  flex-shrink: 0;
6
- height: calc(100vh - 48px);
6
+ height: 100%;
7
7
  }
8
8
 
9
9
  .e-210c16c7 > .holder
@@ -11,81 +11,135 @@
11
11
  display: flex;
12
12
  flex-direction: column;
13
13
  width: 100%;
14
- padding: var(--ot-spacing-m) 0;
15
- gap: var(--ot-spacing-m);
14
+ padding: var(--ot-spacing-m) var(--ot-spacing-s);
15
+ gap: 0;
16
+ overflow-y: auto;
16
17
  }
17
18
 
18
19
  /* Group */
19
20
 
20
- .e-210c16c7 > .holder > .group
21
+ .e-210c16c7 > .holder > .group,
22
+ .e-210c16c7 > .holder > .bottom > .group
21
23
  {
22
24
  display: flex;
23
25
  flex-direction: column;
24
26
  gap: 2px;
27
+ padding: var(--ot-spacing-s) 0;
28
+ border-top: 1px solid var(--ot-bg-3-border);
29
+ }
30
+
31
+ .e-210c16c7 > .holder > .group:first-child,
32
+ .e-210c16c7 > .holder > .bottom > .group:first-child
33
+ {
34
+ padding-top: 0;
35
+ border-top: none;
25
36
  }
26
37
 
27
38
  /* Title */
28
39
 
29
- .e-210c16c7 > .holder > .group > .title
40
+ .e-210c16c7 > .holder > .group > .title,
41
+ .e-210c16c7 > .holder > .bottom > .group > .title
30
42
  {
31
- font-size: 11px;
43
+ font-size: 10px;
32
44
  font-weight: 600;
33
45
  color: var(--ot-text-2);
34
46
  text-transform: uppercase;
35
- letter-spacing: 0.5px;
36
- padding: 0 var(--ot-spacing-m);
37
- margin-bottom: var(--ot-spacing-x);
38
- opacity: 0.6;
47
+ letter-spacing: 1px;
48
+ padding: var(--ot-spacing-x) var(--ot-spacing-s) var(--ot-spacing-s);
49
+ opacity: 0.35;
39
50
  }
40
51
 
41
52
  /* Item */
42
53
 
43
- .e-210c16c7 > .holder > .group > .item
54
+ .e-210c16c7 > .holder > .group > .item,
55
+ .e-210c16c7 > .holder > .bottom > .group > .item
44
56
  {
45
57
  display: flex;
46
58
  align-items: center;
47
- gap: 8px;
48
- padding: 0 var(--ot-spacing-m);
49
- height: var(--ot-height-s);
59
+ gap: var(--ot-spacing-s);
60
+ padding: 0 var(--ot-spacing-s);
61
+ height: var(--ot-height-m);
50
62
  text-decoration: none;
51
63
  color: var(--ot-text-2);
52
64
  font-size: var(--ot-size-m);
53
- font-weight: 500;
54
- border-radius: var(--ot-radius-s);
55
- margin: 0 var(--ot-spacing-s);
65
+ font-weight: 400;
66
+ border: 1px solid transparent;
67
+ border-radius: var(--ot-radius-m);
56
68
  cursor: pointer;
57
- transition: color 0.15s ease, background 0.15s ease;
69
+ transition: all 0.15s ease;
58
70
  }
59
71
 
60
- .e-210c16c7 > .holder > .group > .item > i
72
+ .e-210c16c7 > .holder > .group > .item > i,
73
+ .e-210c16c7 > .holder > .bottom > .group > .item > i
61
74
  {
62
- font-size: 18px;
63
- opacity: 0.6;
75
+ font-size: 20px;
76
+ opacity: 0.4;
77
+ transition: opacity 0.15s ease;
78
+ }
79
+
80
+ .e-210c16c7 > .holder > .group > .item > span,
81
+ .e-210c16c7 > .holder > .bottom > .group > .item > span
82
+ {
83
+ white-space: nowrap;
84
+ overflow: hidden;
85
+ text-overflow: ellipsis;
64
86
  }
65
87
 
66
- .e-210c16c7 > .holder > .group > .item > .count
88
+ .e-210c16c7 > .holder > .group > .item > .count,
89
+ .e-210c16c7 > .holder > .bottom > .group > .item > .count
67
90
  {
68
91
  margin-left: auto;
69
- font-size: 11px;
92
+ font-size: var(--ot-size-s);
93
+ min-width: 20px;
94
+ height: 20px;
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: center;
98
+ border-radius: 10px;
99
+ background: var(--ot-bg-4);
70
100
  color: var(--ot-text-2);
71
- opacity: 0.5;
101
+ font-weight: 500;
72
102
  }
73
103
 
74
- .e-210c16c7 > .holder > .group > .item:hover
104
+ /* Hover */
105
+
106
+ .e-210c16c7 > .holder > .group > .item:hover,
107
+ .e-210c16c7 > .holder > .bottom > .group > .item:hover
75
108
  {
76
109
  color: var(--ot-text-1);
77
- background: var(--ot-bg-2);
110
+ background: var(--ot-bg-3);
78
111
  }
79
112
 
80
- .e-210c16c7 > .holder > .group > .item.active
113
+ .e-210c16c7 > .holder > .group > .item:hover > i,
114
+ .e-210c16c7 > .holder > .bottom > .group > .item:hover > i
115
+ {
116
+ opacity: 0.6;
117
+ }
118
+
119
+ /* Active */
120
+
121
+ .e-210c16c7 > .holder > .group > .item.active,
122
+ .e-210c16c7 > .holder > .bottom > .group > .item.active
81
123
  {
82
124
  color: var(--ot-text-1);
83
125
  background: var(--ot-bg-3);
126
+ border: 1px solid var(--ot-bg-3-border);
127
+ font-weight: 500;
84
128
  }
85
129
 
86
- .e-210c16c7 > .holder > .group > .item.active > i
130
+ .e-210c16c7 > .holder > .group > .item.active > i,
131
+ .e-210c16c7 > .holder > .bottom > .group > .item.active > i
87
132
  {
88
- opacity: 1;
133
+ opacity: 0.9;
134
+ }
135
+
136
+ /* Bottom */
137
+
138
+ .e-210c16c7 > .holder > .bottom
139
+ {
140
+ display: flex;
141
+ flex-direction: column;
142
+ margin-top: auto;
89
143
  }
90
144
 
91
145
  /* Variants */
@@ -29,11 +29,15 @@ onetype.AddonReady('elements', (elements) =>
29
29
  {
30
30
  const path = onetype.RouteCurrent();
31
31
 
32
+ this.top = this.groups.filter(g => !g.placement || g.placement === 'top');
33
+ this.bottom = this.groups.filter(g => g.placement === 'bottom');
34
+
32
35
  this.isActive = (item) =>
33
36
  {
34
37
  if(item.href)
35
38
  {
36
- return item.href === '/' ? path === '/' : path.startsWith(item.href);
39
+ if(item.match === 'exact' || item.href === '/') return path === item.href;
40
+ return path.startsWith(item.href);
37
41
  }
38
42
 
39
43
  return item.value === this.active;
@@ -52,7 +56,7 @@ onetype.AddonReady('elements', (elements) =>
52
56
  return `
53
57
  <nav :class="'holder ' + variant.join(' ')">
54
58
  <slot name="top"></slot>
55
- <div ot-for="group in groups" class="group">
59
+ <div ot-for="group in top" class="group">
56
60
  <p ot-if="group.title" class="title">{{ group.title }}</p>
57
61
  <a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
58
62
  <i ot-if="item.icon">{{ item.icon }}</i>
@@ -60,6 +64,16 @@ onetype.AddonReady('elements', (elements) =>
60
64
  <span ot-if="item.count !== undefined" class="count">{{ item.count }}</span>
61
65
  </a>
62
66
  </div>
67
+ <div ot-if="bottom.length" class="bottom">
68
+ <div ot-for="group in bottom" class="group">
69
+ <p ot-if="group.title" class="title">{{ group.title }}</p>
70
+ <a ot-for="item in group.items" :class="'item' + (isActive(item) ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="handleClick(item)">
71
+ <i ot-if="item.icon">{{ item.icon }}</i>
72
+ <span>{{ item.label }}</span>
73
+ <span ot-if="item.count !== undefined" class="count">{{ item.count }}</span>
74
+ </a>
75
+ </div>
76
+ </div>
63
77
  <slot name="bottom"></slot>
64
78
  </nav>
65
79
  `;
@@ -15,13 +15,26 @@ onetype.AddonReady('elements', (elements) =>
15
15
  items: {
16
16
  type: 'array',
17
17
  value: []
18
+ },
19
+ _change: {
20
+ type: 'function'
18
21
  }
19
22
  },
20
23
  render: function()
21
24
  {
25
+ this.select = (id) =>
26
+ {
27
+ this.active = id;
28
+
29
+ if(this._change)
30
+ {
31
+ this._change(id);
32
+ }
33
+ };
34
+
22
35
  return `
23
36
  <div class="holder">
24
- <a ot-for="item in items" :class="'tab' + (active === item.id ? ' active' : '')" :href="item.href">
37
+ <a ot-for="item in items" :class="'tab' + (active === item.id ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="select(item.id)">
25
38
  <i ot-if="item.icon">{{ item.icon }}</i>
26
39
  <span>{{ item.label }}</span>
27
40
  </a>
@@ -66,7 +66,7 @@ onetype.AddonReady('elements', (elements) =>
66
66
  <span class="text">{{ feature.text }}</span>
67
67
  </div>
68
68
  </div>
69
- <div class="action">
69
+ <div ot-if="href" class="action">
70
70
  <e-form-button text="Get Started" icon="arrow_forward" :href="href" :variant="highlighted ? ['brand', 'size-m', 'full'] : ['bg-2', 'border', 'size-m', 'full']"></e-form-button>
71
71
  </div>
72
72
  </div>
@@ -1,7 +1,7 @@
1
1
  .e-631be738
2
2
  {
3
3
  width: 100%;
4
- min-height: calc(100vh - 48px);
4
+ min-height: 320px;
5
5
  display: flex;
6
6
  align-items: center;
7
7
  justify-content: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onetype/framework",
3
- "version": "2.0.29",
3
+ "version": "2.0.31",
4
4
  "description": "OneType Framework — Full-stack isomorphic JavaScript framework built from scratch. One addon abstraction powers databases, servers, commands, pages, directives, queues, and more.",
5
5
  "type": "module",
6
6
  "main": "lib/load.js",