@kestra-io/ui-libs 0.0.48 → 0.0.49

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 (4) hide show
  1. package/package.json +1 -2
  2. package/src/components/misc/Tooltip.vue +18 -11
  3. package/src/components/plugins/SchemaToCode.vue +13 -11
  4. package/src/components/plugins/SchemaToHtml.vue +163 -133
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kestra-io/ui-libs",
3
- "version": "v0.0.48",
3
+ "version": "v0.0.49",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "src",
@@ -27,7 +27,6 @@
27
27
  "moment": "^2.30.1",
28
28
  "vue": "^3.4.0",
29
29
  "vue-material-design-icons": "^5.3.0",
30
- "vue3-popper": "^1.5.0",
31
30
  "vuex": "^4.1.0",
32
31
  "yaml": "^2.4.1"
33
32
  },
package/src/components/misc/Tooltip.vue CHANGED
@@ -9,7 +9,12 @@
9
9
  </span>
10
10
  </template>
11
11
  <script>
12
- import {Tooltip} from "bootstrap";
12
+ // conditional import is required for website not to crash due to
13
+ // bootstrap launching some init upon import that is incompatible with SSR
14
+ let bootstrap;
15
+ if (document) {
16
+ bootstrap = import("bootstrap");
17
+ }
13
18
 
14
19
  export default {
15
20
  props: {
@@ -22,18 +27,20 @@
22
27
  default: "top"
23
28
  },
24
29
  },
25
- mounted() {
26
- new Tooltip(this.$refs.tooltip, {
27
- trigger: "hover",
28
- html: true,
29
- placement: this.placement,
30
- title: this.$refs.tooltipContent.innerHTML,
31
- customClass: "tooltip-custom"
32
- })
30
+ async mounted() {
31
+ if (document) {
32
+ new (await bootstrap).Tooltip(this.$refs.tooltip, {
33
+ trigger: "hover",
34
+ html: true,
35
+ placement: this.placement,
36
+ title: this.$refs.tooltipContent.innerHTML,
37
+ customClass: "tooltip-custom"
38
+ })
39
+ }
33
40
  },
34
- beforeUnmount() {
41
+ async beforeUnmount() {
35
42
  if (this.$refs.tooltip) {
36
- const tooltip = Tooltip.getInstance(this.$refs.tooltip);
43
+ const tooltip = (await bootstrap).Tooltip.getInstance(this.$refs.tooltip);
37
44
  if (tooltip) {
38
45
  tooltip.dispose();
39
46
  }
package/src/components/plugins/SchemaToCode.vue CHANGED
@@ -1,16 +1,18 @@
1
1
  <template>
2
2
  <div class="code-block mb-3" @mouseover="hoverCode" @mouseleave="isHoveringCode = false">
3
- <div class="language" v-if="language">{{ language }}</div>
3
+ <div class="language" v-if="language">
4
+ {{ language }}
5
+ </div>
4
6
  <template v-if="isHoveringCode">
5
7
  <button ref="copyButton" class="copy">
6
8
  <component
7
- :is="copyIcon"
8
- @click="copyToClipboard"
9
+ :is="copyIcon"
10
+ @click="copyToClipboard"
9
11
  />
10
12
  </button>
11
13
  <div ref="copyTooltip" v-if="!!copyIconResetTimer" id="copied-tooltip" role="tooltip">
12
14
  Copied!
13
- <div id="arrow" data-popper-arrow></div>
15
+ <div id="arrow" data-popper-arrow />
14
16
  </div>
15
17
  </template>
16
18
  <div v-html="codeData" />
@@ -18,11 +20,11 @@
18
20
  </template>
19
21
 
20
22
  <script>
21
- import { createPopper } from "@popperjs/core";
22
- import { codeToHtml } from 'shiki';
23
+ import {createPopper} from "@popperjs/core";
24
+ import {codeToHtml} from "shiki";
23
25
  import ContentCopy from "vue-material-design-icons/ContentCopy.vue";
24
26
  import Check from "vue-material-design-icons/Check.vue";
25
- import {defineComponent} from "vue";
27
+ import {defineComponent, nextTick, shallowRef} from "vue";
26
28
 
27
29
  export default defineComponent({
28
30
  props: {
@@ -59,11 +61,11 @@
59
61
  codeData: null,
60
62
  }
61
63
  },
62
- async created() {
64
+ async created() {
63
65
  this.copyIcon = this.icons.ContentCopy;
64
66
  this.codeData = await codeToHtml(this.code, {
65
- lang: this.language,
66
- theme: 'github-dark',
67
+ lang: this.language,
68
+ theme: "github-dark",
67
69
  });
68
70
  },
69
71
  methods: {
@@ -72,7 +74,7 @@
72
74
  if(this.copyIconResetTimer) {
73
75
  nextTick(() => {
74
76
  createPopper(this.$refs.copyButton, this.$refs.copyTooltip, {
75
- placement: 'left',
77
+ placement: "left",
76
78
  });
77
79
  });
78
80
  }
package/src/components/plugins/SchemaToHtml.vue CHANGED
@@ -4,162 +4,193 @@
4
4
  <p>⚠ Deprecated</p>
5
5
  </div>
6
6
 
7
- <SchemaToCode language="yaml" :code='`type: "${getPageName()}"`'/>
7
+ <SchemaToCode language="yaml" :code="`type: &quot;${getPageName()}&quot;`" />
8
8
  <p v-if="page.title">
9
- <span style="font-size:1.5em;" v-html="replaceText(page.title)"/>
9
+ <span style="font-size:1.5em;" v-html="replaceText(page.title)" />
10
10
  </p>
11
- <slot :content="page.description" name="markdown" />
11
+ <slot v-if="page.description" :content="page.description" name="markdown" />
12
12
  <h2 id="examples" v-if="page.body.children['examples']">
13
13
  <a href="#examples">Examples</a>
14
14
  </h2>
15
- <template v-for="example in page.body.children['examples']"
16
- v-if="page.body.children['examples']">
17
- <slot :content="example.title" name="markdown" />
15
+ <template
16
+ v-for="(example, index) in page?.body?.children?.['examples'] ?? []"
17
+ :key="index"
18
+ >
19
+ <slot v-if="example.title" :content="example.title" name="markdown" />
18
20
  <SchemaToCode :language="example.lang" :code="generateExampleCode(example)" v-if="example.code" />
19
21
  </template>
20
- <template v-for="(pageBlock, key) in page.body.children" v-if="page.body.children">
22
+ <template v-for="(pageBlock, key) in page?.body?.children ?? []" :key="key">
21
23
  <template v-if="key !== 'examples'">
22
24
  <h2 :id="key">
23
- <a :href="`#${key}`">{{capitalizeFirstLetter(key)}}</a>
25
+ <a :href="`#${key}`">{{ capitalizeFirstLetter(key) }}</a>
24
26
  </h2>
25
- <template v-for="(property, propertyKey) in sortSchemaByRequired(pageBlock)" v-if="key !== 'definitions'">
26
- <h3 :id="property.name || propertyKey">
27
- <a :href="`#${property.name || propertyKey}`">
28
- <code>{{property.name || propertyKey}}</code>
29
- </a>
30
- </h3>
31
- <div class="doc-alert alert alert-warning" role="alert"
32
- v-if="property['$deprecated']">
33
- <p>⚠ Deprecated</p>
34
- </div>
35
- <ul>
36
- <li><strong>Type: </strong>
37
- <mark class="type-mark type-mark-default"
38
- v-if="property.type || property['$ref']">
39
- {{property.type || property['$ref']?.split('.').reverse()[0]}}
40
- </mark>
41
- <ul v-else-if="property.anyOf">
42
- <li v-for="anyOf in property.anyOf">
43
- <mark class="type-mark type-mark-default">{{anyOf.type}}</mark>
44
- </li>
45
- </ul>
46
- </li>
47
- <li v-if="property.items">
48
- <strong>SubType: </strong>
49
- <a aria-current="page"
50
- :href="generateTaskHref(property.items['$ref'])"
51
- class="router-link-active router-link-exact-active">
52
- <mark class="type-mark type-mark-default">
53
- {{property.items['$ref']?.split('.').reverse()[0] ||
54
- property.items.type ||'String'}}
55
- </mark>
27
+ <template v-if="key !== 'definitions'">
28
+ <template v-for="(property, propertyKey) in sortSchemaByRequired(pageBlock)" :key="propertyKey">
29
+ <h3 :id="property.name || propertyKey">
30
+ <a :href="`#${property.name || propertyKey}`">
31
+ <code>{{ property.name || propertyKey }}</code>
56
32
  </a>
57
- </li>
58
- <li v-if="property['$dynamic'] !== undefined"><strong>Dynamic: </strong>{{
59
- property['$dynamic'] === true ? "✔️" :
60
- (property['$dynamic'] === false ? "❌" : "❓") }}
61
- </li>
62
- <li v-if="property['$required'] !== undefined"><strong>Required: </strong> {{
63
- property['$required'] === true ? "✔️" :
64
- (property['$required'] === false ? "❌" : "❓") }}
65
- </li>
66
- <li v-if="property.default !== undefined">
67
- <strong>Default: </strong>
68
- <code>{{property.default}}</code>
69
- </li>
70
- <li v-if="property.format">
71
- <strong>Format: </strong>
72
- <code> {{property.format}} </code>
73
- </li>
74
- <li v-if="property.minItems">
75
- <strong>Min items: </strong>
76
- <code> {{property.minItems}} </code>
77
- </li>
78
- <li v-if="property.minLength">
79
- <strong>Min length: </strong>
80
- <code>{{property.minLength}}</code>
81
- </li>
82
- <li v-if="property.enum">
83
- <strong>Possible Values:</strong>
84
- <ul>
85
- <li v-for="possibleValue in property.enum">
86
- <code data-v-c4861ad0="" class="">{{possibleValue}}</code>
87
- </li>
88
- </ul>
89
- </li>
90
- </ul>
33
+ </h3>
34
+ <div
35
+ class="doc-alert alert alert-warning"
36
+ role="alert"
37
+ v-if="property['$deprecated']"
38
+ >
39
+ <p>⚠ Deprecated</p>
40
+ </div>
41
+ <ul>
42
+ <li>
43
+ <strong>Type: </strong>
44
+ <mark
45
+ class="type-mark type-mark-default"
46
+ v-if="property.type || property['$ref']"
47
+ >
48
+ {{ property.type || property['$ref']?.split('.').reverse()[0] }}
49
+ </mark>
50
+ <ul v-else-if="property.anyOf">
51
+ <li v-for="(anyOf, index) in property.anyOf" :key="index">
52
+ <mark class="type-mark type-mark-default">{{ anyOf.type }}</mark>
53
+ </li>
54
+ </ul>
55
+ </li>
56
+ <li v-if="property.items">
57
+ <strong>SubType: </strong>
58
+ <a
59
+ aria-current="page"
60
+ v-if="property.items['$ref']"
61
+ :href="generateTaskHref(property.items['$ref'])"
62
+ class="router-link-active router-link-exact-active"
63
+ >
64
+ <mark class="type-mark type-mark-default">
65
+ {{ property.items['$ref']?.split('.').reverse()[0] ||
66
+ property.items.type ||'String' }}
67
+ </mark>
68
+ </a>
69
+ <mark v-else class="type-mark type-mark-default">
70
+ {{ property.items['$ref']?.split('.').reverse()[0] ||
71
+ property.items.type ||'String' }}
72
+ </mark>
73
+ </li>
74
+ <li v-if="property['$dynamic'] !== undefined">
75
+ <strong>Dynamic: </strong>{{
76
+ property['$dynamic'] === true ? "✔️" :
77
+ (property['$dynamic'] === false ? "❌" : "❓") }}
78
+ </li>
79
+ <li v-if="property['$required'] !== undefined">
80
+ <strong>Required: </strong> {{
81
+ property['$required'] === true ? "✔️" :
82
+ (property['$required'] === false ? "❌" : "❓") }}
83
+ </li>
84
+ <li v-if="property.default !== undefined">
85
+ <strong>Default: </strong>
86
+ <code>{{ property.default }}</code>
87
+ </li>
88
+ <li v-if="property.format">
89
+ <strong>Format: </strong>
90
+ <code> {{ property.format }} </code>
91
+ </li>
92
+ <li v-if="property.minItems">
93
+ <strong>Min items: </strong>
94
+ <code> {{ property.minItems }} </code>
95
+ </li>
96
+ <li v-if="property.minLength">
97
+ <strong>Min length: </strong>
98
+ <code>{{ property.minLength }}</code>
99
+ </li>
100
+ <li v-if="property.enum">
101
+ <strong>Possible Values:</strong>
102
+ <ul>
103
+ <li v-for="(possibleValue, index) in property.enum" :key="index">
104
+ <code data-v-c4861ad0="" class="">{{ possibleValue }}</code>
105
+ </li>
106
+ </ul>
107
+ </li>
108
+ </ul>
91
109
 
92
- <slot :content="property.title" name="markdown" />
93
- <blockquote class="blockquote">
94
- <slot :content="property.description" name="markdown" />
95
- </blockquote>
110
+ <slot v-if="property.title" :content="property.title" name="markdown" />
111
+ <blockquote class="blockquote">
112
+ <slot v-if="property.description" :content="property.description" name="markdown" />
113
+ </blockquote>
114
+ </template>
96
115
  </template>
97
- <template v-else>
98
- <template v-for="(item, key) in pageBlock"
99
- v-if="pageBlock">
100
- <h3 :id="key">
101
- <a :href="`#${key}`">
102
- <code>{{key}}</code>
116
+ <template v-else-if="pageBlock">
117
+ <template
118
+ v-for="(item, childrenBlockKey) in pageBlock"
119
+ :key="childrenBlockKey"
120
+ >
121
+ <h3 :id="childrenBlockKey">
122
+ <a :href="`#${childrenBlockKey}`">
123
+ <code>{{ childrenBlockKey }}</code>
103
124
  </a>
104
125
  </h3>
105
- <h4 id="properties-1"
106
- v-if="item.properties">
126
+ <h4
127
+ id="properties-1"
128
+ v-if="item.properties"
129
+ >
107
130
  <a href="#properties-1">Properties</a>
108
131
  </h4>
109
132
  <template
110
- v-for="(definition, key) in item.properties"
111
- v-if="item.properties">
112
- <h5 :id="definition.name || key">
113
- <a :href="`#${definition.name || key}`">
114
- <code>{{definition.name || key}}</code>
133
+ v-for="(definition, propertyKey) in item.properties ?? []"
134
+ :key="propertyKey"
135
+ >
136
+ <h5 :id="definition.name || propertyKey">
137
+ <a :href="`#${definition.name || propertyKey}`">
138
+ <code>{{ definition.name || propertyKey }}</code>
115
139
  </a>
116
140
  </h5>
117
141
  <ul>
118
- <li><strong>Type: </strong>
142
+ <li>
143
+ <strong>Type: </strong>
119
144
  <mark class="type-mark type-mark-default">
120
- {{definition.type ||
121
- definition['$ref']?.split('.').reverse()[0]}}
145
+ {{ definition.type ||
146
+ definition['$ref']?.split('.').reverse()[0] }}
122
147
  </mark>
123
148
  </li>
124
149
  <li v-if="definition.items">
125
150
  <strong>SubType: </strong>
126
- <a aria-current="page"
127
- :href="generateTaskHref(definition.items['$ref'])"
128
- class="router-link-active router-link-exact-active">
151
+ <a
152
+ aria-current="page"
153
+ v-if="definition.items['$ref']"
154
+ :href="generateTaskHref(definition.items['$ref'])"
155
+ class="router-link-active router-link-exact-active"
156
+ >
129
157
  <mark class="type-mark type-mark-default">
130
- {{definition.items?.type || 'Task'}}
158
+ {{ definition.items?.type || 'Task' }}
131
159
  </mark>
132
160
  </a>
161
+ <mark v-else class="type-mark type-mark-default">
162
+ {{ definition.items?.type || 'Task' }}
163
+ </mark>
133
164
  </li>
134
165
  <li v-if="definition['$dynamic'] !== undefined">
135
166
  <strong>Dynamic: </strong>
136
- {{definition['$dynamic'] === true ? "✔️" :
137
- (definition['$dynamic'] === false ? "❌" : "❓") }}
167
+ {{ definition['$dynamic'] === true ? "✔️" :
168
+ (definition['$dynamic'] === false ? "❌" : "❓") }}
138
169
  </li>
139
170
  <li v-if="definition['$required'] !== undefined">
140
171
  <strong>Required: </strong>
141
172
  {{
142
- definition['$required'] === true ? "✔️" :
143
- (definition['$required'] === false ? "❌" : "❓") }}
173
+ definition['$required'] === true ? "✔️" :
174
+ (definition['$required'] === false ? "❌" : "❓") }}
144
175
  </li>
145
176
  <li v-if="definition.default !== undefined">
146
177
  <strong>Default: </strong>
147
- <code>{{definition.default}}</code>
178
+ <code>{{ definition.default }}</code>
148
179
  </li>
149
180
  <li v-if="definition.format">
150
181
  <strong>Format: </strong>
151
- <code>{{definition.format}}</code>
182
+ <code>{{ definition.format }}</code>
152
183
  </li>
153
184
  <li v-if="definition.minItems">
154
185
  <strong>Min items: </strong>
155
- <code>{{definition.minItems}}</code>
186
+ <code>{{ definition.minItems }}</code>
156
187
  </li>
157
188
  </ul>
158
189
  <p>
159
- <strong v-html="replaceText(definition.title)"/>
190
+ <strong v-html="replaceText(definition.title)" />
160
191
  </p>
161
192
  <blockquote class="blockquote">
162
- <p v-html="replaceText(definition.description)"/>
193
+ <p v-html="replaceText(definition.description)" />
163
194
  </blockquote>
164
195
  </template>
165
196
  </template>
@@ -171,6 +202,7 @@
171
202
 
172
203
  <script setup>
173
204
  import SchemaToCode from "./SchemaToCode.vue";
205
+ import {computed} from "vue";
174
206
 
175
207
  const props = defineProps({
176
208
  page: {
@@ -189,49 +221,48 @@
189
221
  }
190
222
 
191
223
  const replaceText = (str) => {
192
- str = str?.split("```")[0]?.replace(/`([^`]*)`/g, '<code>$1</code>');
224
+ str = str?.split("```")[0]?.replace(/`([^`]*)`/g, "<code>$1</code>");
193
225
  str = str?.replace(
194
- /\[(.*?)\]\((.*?)\)/g,
195
- (match, text, url) => {
196
- if (text && url ) {
197
- return `<a href="${url}" rel="nofollow" target="_blank">${text}</a>`;
198
- } else {
199
- return match;
200
- }
201
- }
226
+ /\[(.*?)\]\((.*?)\)/g,
227
+ (match, text, url) => {
228
+ if (text && url ) {
229
+ return `<a href="${url}" rel="nofollow" target="_blank">${text}</a>`;
230
+ } else {
231
+ return match;
232
+ }
233
+ }
202
234
  );
203
235
  return str?.split("```")[0];
204
236
  };
205
237
 
206
238
  const generateTaskHref = (href) => {
207
239
  if (href) {
208
- const taskHref = href?.split('/');
240
+ const taskHref = href?.split("/");
209
241
  return `#${taskHref[taskHref?.length - 1].toLowerCase()}`;
210
242
  }
211
243
  };
212
-
213
- const generateDescHtml = computed(() => {
214
- const textBlocks = props.page?.description.split('\n\n');
215
- let content = '';
244
+ computed(() => {
245
+ const textBlocks = props.page?.description.split("\n\n");
246
+ let content = "";
216
247
  textBlocks.forEach((text) => {
217
248
  const newText = replaceText(text);
218
249
  const descriptionParts = newText?.split(/:\s?\n/);
219
250
 
220
251
  if (descriptionParts) {
221
- const alertParts = descriptionParts[0].split(/::alert{type=\"warning\"}\n/);
252
+ const alertParts = descriptionParts[0].split(/::alert{type="warning"}\n/);
222
253
  const alertContent = (alertParts.length > 1)
223
- ?
224
- `<div class="doc-alert alert alert-warning" role="alert">
225
- <p>${replaceText(alertParts[1]?.split(':')[0])}</p>
254
+ ?
255
+ `<div class="doc-alert alert alert-warning" role="alert">
256
+ <p>${replaceText(alertParts[1]?.split(":")[0])}</p>
226
257
  </div>`
227
- :
228
- `<p>${descriptionParts[0]}:</p>`;
258
+ :
259
+ `<p>${descriptionParts[0]}:</p>`;
229
260
 
230
261
  const listContent = descriptionParts[1]
231
- ?
232
- `<ul>${generateList(descriptionParts[1])}</ul>`
233
- :
234
- '';
262
+ ?
263
+ `<ul>${generateList(descriptionParts[1])}</ul>`
264
+ :
265
+ "";
235
266
 
236
267
  content += alertContent + listContent;
237
268
  } else {
@@ -241,7 +272,6 @@
241
272
 
242
273
  return content;
243
274
  });
244
-
245
275
  const sortSchemaByRequired = (schema) => {
246
276
  const requiredKeys = [];
247
277
  const nonRequiredKeys = [];
@@ -265,7 +295,7 @@
265
295
  }
266
296
 
267
297
  const generateList = (descriptionPart) => {
268
- let optionList = '';
298
+ let optionList = "";
269
299
  descriptionPart?.split(/[-*]/).forEach((item) => {
270
300
  if (item.trim()) {
271
301
  optionList += `
@@ -279,7 +309,7 @@
279
309
 
280
310
  const generateExampleCode = (example) => {
281
311
  if (!example?.full) {
282
- const firstCode = `id: "${props.getPageName()?.split('.').reverse()[0]?.toLowerCase()}"\ntype: "${props.getPageName()}"\n`;
312
+ const firstCode = `id: "${props.getPageName()?.split(".").reverse()[0]?.toLowerCase()}"\ntype: "${props.getPageName()}"\n`;
283
313
  return firstCode.concat(example.code)
284
314
  }
285
315