mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-22 04:10:01 +00:00
✨ Add Templates (#2720)
* Templates Bugs / Fixed Various Bugs / Multiply Api Request, Carousel Gradient, Core Nodes Filters ... * Updated MainSidebar Paddings * N8N-Templates Bugfixing - Remove Unnecesairy Icon (Shape), Refatctor infiniteScrollEnabled Prop + updated infiniterScroll functinality * N8N-2853 Fixed Carousel Arrows Bug after Cleaning the SearchBar * fix telemetry init * fix search tracking issues * N8N-2853 Created FilterTemplateNode Constant Array, Filter PlayButton and WebhookRespond from Nodes, Added Box for showing more nodes inside TemplateList, Updated NewWorkflowButton to primary, Fixed Markdown issue with Code * N8N-2853 Removed Placeholder if Workflows Or Collections are not found, Updated the Logic * fix telemetry events * clean up session id * update user inserted event * N8N-2853 Fixed Categories to Moving if the names are long * Add todos * Update Routes on loading * fix spacing * Update Border Color * Update Border Readius * fix filter fn * fix constant, console error * N8N-2853 PR Fixes, Refactoring, Removing unnecesairy code .. * N8N-2853 PR Fixes - Editor-ui Fixes, Refactoring, Removing Dead Code ... * N8N-2853 Refactor Card to LongCard * clean up spacing, replace css var * clean up spacing * set categories as optional in node * replace vars * refactor store * remove unnesssary import * fix error * fix templates view to start * add to cache * fix coll view data * fix categories * fix category event * fix collections carousel * fix initial load and search * fix infinite load * fix query param * fix scrolling issues * fix scroll to top * fix search * fix collections search * fix navigation bug * rename view * update package lock * rename workflow view * rename coll view * update routes * add wrapper component * set session id * fix search tracking * fix session tracking * remove deleted mutation * remove check for unsupported nodes * refactor filters * lazy load template * clean up types * refactor infinte scroll * fix end of search * Fix spacing * fix coll loading * fix types * fix coll view list * fix navigation * rename types * rename state * fix search responsiveness * fix coll view spacing * fix search view spacing * clean up views * set background color * center page not vert * fix workflow view * remove import * fix background color * fix background * clean props * clean up imports * refactor button * update background color * fix spacing issue * rename event * update telemetry event * update endpoints, add loading view, check for endpoint health * remove conolse log * N8N-2853 Fixed Menu Items Padding * replace endpoints * fix type issues * fix categories * N8N-2853 Fixed ParameterInput Placeholder after ElementUI Upgrade * update createdAt * ⚡ Fix placeholder in creds config modal * ✏️ Adjust docstring to `credText` placeholder version * N8N-2853 Optimized * N8N-2853 Optimized code * ⚡ Add deployment type to FE settings * ⚡ Add deployment type to interfaces * N8N-2853 Removed Animated prop from components * ⚡ Add deployment type to store module * ✨ Create hiring banner * ⚡ Display hiring banner * ⏪ Undo unrelated change * N8N-2853 Refactor TemplateFilters * ⚡ Fix indentation * N8N-2853 Reorder items / TemplateList * 👕 Fix lint * N8N-2853 Refactor TemplateFilters Component * N8N-2853 Reorder TemplateList * refactor template card * update timeout * fix removelistener * fix spacing * split enabled from offline * add spacing to go back * N8N-2853 Fixed Screens for Tablet & Mobile * N8N-2853 Update Stores Order * remove image componet * remove placeholder changes * N8N-2853 Fixed Chinnese Placeholders for El Select Component that comes from the Library Upgrade * N8N-2853 Fixed Vue Agile Console Warnings * N8N-2853 Update Collection Route * ✏️ Update jobs URL * 🚚 Move logging to root component * ⚡ Refactor `deploymentType` to `isInternalUser` * ⚡ Improve syntax * fix cut bug in readonly view * N8N-3012 Fixed Details section in templates with lots of description, Fixed Mardown Block with overflox-x * N8N-3012 Increased Font-size, Spacing and Line-height of the Categories Items * N8N-3012 Fixed Vue-agile client width error on resize * only delay redirect for root path * N8N-3012 Fixed Carousel Arrows that Disappear * N8N-3012 Make Loading Screen same color as Templates * N8N-3012 Markdown renders inline block as block code * add offline warning * hide log from workflow iframe * update text * make search button larger * N8N-3012 Categories / Tags extended all the way in details section * load data in cred modals * remove deleted message * add external hook * remove import * update env variable description * fix markdown width issue * disable telemetry for demo, add session id to template pages * fix telemetery bugs * N8N-3012 Not found Collections/Wokrkflow * N8N-3012 Checkboxes change order when categories are changed * N8N-3012 Refactor SortedCategories inside TemplateFilters component * fix firefox bug * add telemetry requirements * add error check * N8N-3012 Update GoBackButton to check if Route History is present * N8N-3012 Fixed WF Nodes Icons * hide workflow screenshots * remove unnessary mixins * rename prop * fix design a bit * rename data * clear workspace on destroy * fix copy paste bug * fix disabled state * N8N-3012 Fixed Saving/Leave without saving Modal * fix telemetry issue * fix telemetry issues, error bug * fix error notification * disable workflow menu items on templates * fix i18n elementui issue * Remove Emit - NodeType from HoverableNodeIcon component * TechnicalFixes: NavigateTo passed down as function should be helper * TechnicalFixes: Update NavigateTo function * TechnicalFixes: Add FilterCoreNodes directly as function * check for empty connecitions * fix titles * respect new lines * increase categories to be sliced * rename prop * onUseWorkflow * refactor click event * fix bug, refactor * fix loading story * add default * fix styles at right level of abstraction * add wrapper with width * remove loading blocks component * add story * rename prop * fix spacing * refactor tag, add story * move margin to container * fix tag redirect, remove unnessary check * make version optional * rename view * move from workflows to templates store * remove unnessary change * remove unnessary css * rename component * refactor collection card * add boolean to prevent shrink * clean up carousel * fix redirection bug on save * remove listeners to fix multiple listeners bug * remove unnessary types * clean up boolean set * fix node select bug * rename component * remove unnessary class * fix redirection bug * remove unnessary error * fix typo * fix blockquotes, pre * refactor markdown rendering * remove console log * escape markdown * fix safari bug * load active workflows to fix modal bug * ⬆️ Update package-lock.json file * ⚡ Add n8n version as header Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> Co-authored-by: Mutasem <mutdmour@gmail.com> Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Oliver Trajceski
@@ -17,6 +17,8 @@ import {
|
||||
faCheck,
|
||||
faChevronDown,
|
||||
faChevronUp,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faCode,
|
||||
faCodeBranch,
|
||||
faCog,
|
||||
@@ -100,6 +102,8 @@ library.add(faCalendar);
|
||||
library.add(faCheck);
|
||||
library.add(faChevronDown);
|
||||
library.add(faChevronUp);
|
||||
library.add(faChevronLeft);
|
||||
library.add(faChevronRight);
|
||||
library.add(faCode);
|
||||
library.add(faCodeBranch);
|
||||
library.add(faCog);
|
||||
|
||||
@@ -30,14 +30,14 @@
|
||||
"@fortawesome/free-solid-svg-icons": "5.x",
|
||||
"@fortawesome/vue-fontawesome": "2.x",
|
||||
"core-js": "3.x",
|
||||
"element-ui": "2.13.x"
|
||||
"element-ui": "2.15.x"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||
"@fortawesome/vue-fontawesome": "^2.0.2",
|
||||
"core-js": "^3.6.5",
|
||||
"element-ui": "~2.13.0",
|
||||
"element-ui": "2.15.x",
|
||||
"storybook-addon-themes": "^6.1.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-class-component": "^7.2.3",
|
||||
@@ -48,6 +48,7 @@
|
||||
"@storybook/addon-links": "^6.3.6",
|
||||
"@storybook/vue": "^6.3.6",
|
||||
"@types/jest": "^26.0.13",
|
||||
"@types/markdown-it": "^12.2.3",
|
||||
"@typescript-eslint/eslint-plugin": "^4.29.0",
|
||||
"@typescript-eslint/parser": "^4.29.0",
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
@@ -63,6 +64,10 @@
|
||||
"eslint-plugin-prettier": "^3.4.0",
|
||||
"eslint-plugin-vue": "^7.16.0",
|
||||
"gulp": "^4.0.0",
|
||||
"markdown-it": "^12.3.2",
|
||||
"markdown-it-emoji": "^2.0.0",
|
||||
"markdown-it-link-attributes": "^4.0.0",
|
||||
"markdown-it-task-lists": "^2.1.1",
|
||||
"prettier": "^2.3.2",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
@@ -74,6 +79,7 @@
|
||||
"gulp-clean-css": "^4.3.0",
|
||||
"gulp-dart-sass": "^1.0.2",
|
||||
"node-notifier": ">=8.0.1",
|
||||
"trim": ">=0.0.3"
|
||||
"trim": ">=0.0.3",
|
||||
"xss": "^1.0.10"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import N8nLoading from './Loading.vue';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Loading',
|
||||
component: N8nLoading,
|
||||
argTypes: {
|
||||
animated: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
loading: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
rows: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: [1, 2, 3, 4, 5],
|
||||
},
|
||||
},
|
||||
variant: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['button', 'h1', 'image', 'p'],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: {
|
||||
N8nLoading,
|
||||
},
|
||||
template: '<n8n-loading v-bind="$props"></n8n-loading>',
|
||||
});
|
||||
|
||||
export const Loading = Template.bind({});
|
||||
Loading.args = {
|
||||
variant: 'p',
|
||||
};
|
||||
86
packages/design-system/src/components/N8nLoading/Loading.vue
Normal file
86
packages/design-system/src/components/N8nLoading/Loading.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<el-skeleton :loading="loading" :animated="animated">
|
||||
<template slot="template">
|
||||
<el-skeleton-item
|
||||
v-if="variant === 'button'"
|
||||
:variant="variant"
|
||||
/>
|
||||
|
||||
<div v-if="variant === 'h1'">
|
||||
<div
|
||||
v-for="(item, index) in rows"
|
||||
:key="index"
|
||||
:class="{
|
||||
[$style.h1Last]: item === rows && rows > 1 && shrinkLast,
|
||||
}"
|
||||
>
|
||||
<el-skeleton-item
|
||||
:variant="variant"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-skeleton-item
|
||||
v-if="variant === 'image'"
|
||||
:variant="variant"
|
||||
/>
|
||||
<div v-if="variant === 'p'">
|
||||
<div
|
||||
v-for="(item, index) in rows"
|
||||
:key="index"
|
||||
:class="{
|
||||
[$style.pLast]: item === rows && rows > 1 && shrinkLast,
|
||||
}">
|
||||
<el-skeleton-item
|
||||
:variant="variant"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import ElSkeleton from 'element-ui/lib/skeleton';
|
||||
import ElSkeletonItem from 'element-ui/lib/skeleton-item';
|
||||
|
||||
export default {
|
||||
name: 'n8n-loading',
|
||||
components: {
|
||||
ElSkeleton,
|
||||
ElSkeletonItem,
|
||||
},
|
||||
props: {
|
||||
animated: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
shrinkLast: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'p',
|
||||
validator: (value: string): boolean => ['p', 'h1', 'button', 'image'].includes(value),
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.h1Last {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.pLast {
|
||||
width: 61%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
import N8nLoading from './Loading.vue';
|
||||
|
||||
export default N8nLoading;
|
||||
@@ -0,0 +1,48 @@
|
||||
import N8nMarkdown from './Markdown.vue';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Markdown',
|
||||
component: N8nMarkdown,
|
||||
argTypes: {
|
||||
content: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
loading: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
loadingBlocks: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: [1, 2, 3, 4, 5],
|
||||
},
|
||||
},
|
||||
loadingRows: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: [1, 2, 3, 4, 5],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: {
|
||||
N8nMarkdown,
|
||||
},
|
||||
template: '<n8n-markdown v-bind="$props"></n8n-markdown>',
|
||||
});
|
||||
|
||||
export const Markdown = Template.bind({});
|
||||
Markdown.args = {
|
||||
content: `I wanted a system to monitor website content changes and notify me. So I made it using n8n.\n\nEspecially my competitor blogs. I wanted to know how often they are posting new articles. (I used their sitemap.xml file) (The below workflow may vary)\n\nIn the Below example, I used HackerNews for example.\n\nExplanation:\n\n- First HTTP Request node crawls the webpage and grabs the website source code\n- Then wait for x minutes\n- Again, HTTP Node crawls the webpage\n- If Node compares both results are equal if anything is changed. It’ll go to the false branch and notify me in telegram.\n\n**Workflow:**\n\n\n\n**Sample Response:**\n\n\n`,
|
||||
loading: false,
|
||||
images: [{
|
||||
id: 1,
|
||||
url: 'https://community.n8n.io/uploads/default/optimized/2X/b/b737a95de4dfe0825d50ca098171e9f33a459e74_2_690x288.png',
|
||||
}],
|
||||
};
|
||||
220
packages/design-system/src/components/N8nMarkdown/Markdown.vue
Normal file
220
packages/design-system/src/components/N8nMarkdown/Markdown.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="!loading" ref="editor" :class="$style.markdown" v-html="htmlContent" />
|
||||
<div v-else :class="$style.markdown">
|
||||
<div v-for="(block, index) in loadingBlocks"
|
||||
:key="index">
|
||||
<n8n-loading
|
||||
:loading="loading"
|
||||
:rows="loadingRows"
|
||||
animated
|
||||
variant="p"
|
||||
/>
|
||||
<div :class="$style.spacer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import N8nLoading from '../N8nLoading';
|
||||
import Markdown from 'markdown-it';
|
||||
const markdownLink = require('markdown-it-link-attributes');
|
||||
const markdownEmoji = require('markdown-it-emoji');
|
||||
const markdownTasklists = require('markdown-it-task-lists');
|
||||
|
||||
import xss from 'xss';
|
||||
import { escapeMarkdown } from '../../utils/markdown';
|
||||
|
||||
const DEFAULT_OPTIONS_MARKDOWN = {
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
breaks: true,
|
||||
};
|
||||
|
||||
const DEFAULT_OPTIONS_LINK_ATTRIBUTES = {
|
||||
attrs: {
|
||||
target: '_blank',
|
||||
rel: 'noopener',
|
||||
},
|
||||
};
|
||||
|
||||
const DEFAULT_OPTIONS_TASKLISTS = {
|
||||
label: true,
|
||||
labelAfter: true,
|
||||
};
|
||||
|
||||
interface IImage {
|
||||
id: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
N8nLoading,
|
||||
},
|
||||
name: 'n8n-markdown',
|
||||
props: {
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
images: {
|
||||
type: Array,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
},
|
||||
loadingBlocks: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
loadingRows: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 3;
|
||||
},
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
markdown: DEFAULT_OPTIONS_MARKDOWN,
|
||||
linkAttributes: DEFAULT_OPTIONS_LINK_ATTRIBUTES,
|
||||
tasklists: DEFAULT_OPTIONS_TASKLISTS,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
htmlContent(): string {
|
||||
if (!this.content) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const imageUrls: { [key: string]: string } = {};
|
||||
if (this.images) {
|
||||
// @ts-ignore
|
||||
this.images.forEach((image: IImage) => {
|
||||
if (!image) {
|
||||
// Happens if an image got deleted but the workflow
|
||||
// still has a reference to it
|
||||
return;
|
||||
}
|
||||
imageUrls[image.id] = image.url;
|
||||
});
|
||||
}
|
||||
|
||||
const fileIdRegex = new RegExp('fileId:([0-9]+)');
|
||||
const html = this.md.render(escapeMarkdown(this.content));
|
||||
const safeHtml = xss(html, {
|
||||
onTagAttr: (tag, name, value, isWhiteAttr) => {
|
||||
if (tag === 'img' && name === 'src') {
|
||||
if (value.match(fileIdRegex)) {
|
||||
const id = value.split('fileId:')[1];
|
||||
return `src=${xss.friendlyAttrValue(imageUrls[id])}` || '';
|
||||
}
|
||||
if (!value.startsWith('https://')) {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
// Return nothing, means keep the default handling measure
|
||||
},
|
||||
onTag: function (tag, html, options) {
|
||||
if (tag === 'img' && html.includes(`alt="workflow-screenshot"`)) {
|
||||
return '';
|
||||
}
|
||||
// return nothing, keep tag
|
||||
},
|
||||
});
|
||||
|
||||
return safeHtml;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
md: new Markdown(this.options.markdown)
|
||||
.use(markdownLink, this.options.linkAttributes)
|
||||
.use(markdownEmoji)
|
||||
.use(markdownTasklists, this.options.tasklists),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.markdown {
|
||||
color: var(--color-text-base);
|
||||
|
||||
* {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: var(--font-line-height-xloose);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
margin-bottom: var(--spacing-s);
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
h3, h4 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
p,
|
||||
span {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: var(--spacing-s);
|
||||
padding-left: var(--spacing-m);
|
||||
|
||||
li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-bottom: var(--spacing-s);
|
||||
display: grid;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
display: block;
|
||||
padding: var(--spacing-s);
|
||||
color: var(--color-text-dark);
|
||||
background-color: var(--color-background-base);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
li > code,
|
||||
p > code {
|
||||
padding: 0 var(--spacing-4xs);
|
||||
color: var(--color-text-dark);
|
||||
background-color: var(--color-background-base);
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--color-text-base);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
object-fit: cover;
|
||||
border: var(--border-width-base) var(--color-foreground-base) var(--border-style-base);
|
||||
border-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 10px;
|
||||
font-style: italic;
|
||||
border-left: var(--border-color-base) 2px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
margin: var(--spacing-2xl);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
import N8nMarkdown from './Markdown.vue';
|
||||
|
||||
export default N8nMarkdown;
|
||||
27
packages/design-system/src/components/N8nTag/Tag.stories.js
Normal file
27
packages/design-system/src/components/N8nTag/Tag.stories.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import N8nTag from './Tag.vue';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Tag',
|
||||
component: N8nTag,
|
||||
argTypes: {
|
||||
text: {
|
||||
control: {
|
||||
control: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: {
|
||||
N8nTag,
|
||||
},
|
||||
template:
|
||||
'<n8n-tag v-bind="$props"></n8n-tag>',
|
||||
});
|
||||
|
||||
export const Tag = Template.bind({});
|
||||
Tag.args = {
|
||||
text: 'tag name',
|
||||
};
|
||||
25
packages/design-system/src/components/N8nTag/Tag.vue
Normal file
25
packages/design-system/src/components/N8nTag/Tag.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template functional>
|
||||
<span :class="$style.tag" v-text="props.text" @click="(e) => listeners.click && listeners.click(e)" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'n8n-tag',
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.tag {
|
||||
min-width: max-content;
|
||||
padding: var(--spacing-4xs);
|
||||
background-color: var(--color-foreground-base);
|
||||
border-radius: var(--border-radius-base);
|
||||
font-size: var(--font-size-2xs);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
3
packages/design-system/src/components/N8nTag/index.js
Normal file
3
packages/design-system/src/components/N8nTag/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import Tag from './Tag.vue';
|
||||
|
||||
export default Tag;
|
||||
@@ -0,0 +1,35 @@
|
||||
import N8nTags from './Tags.vue';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Tags',
|
||||
component: N8nTags,
|
||||
argTypes: {
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: {
|
||||
N8nTags,
|
||||
},
|
||||
template:
|
||||
'<n8n-tags v-bind="$props"></n8n-tags>',
|
||||
});
|
||||
|
||||
export const Tags = Template.bind({});
|
||||
Tags.args = {
|
||||
tags: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'very long tag name',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'tag1',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'tag2 yo',
|
||||
},
|
||||
],
|
||||
};
|
||||
32
packages/design-system/src/components/N8nTags/Tags.vue
Normal file
32
packages/design-system/src/components/N8nTags/Tags.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template functional>
|
||||
<div :class="$style.tags">
|
||||
<component :is="$options.components.N8nTag" v-for="tag in props.tags" :key="tag.id" :text="tag.name" @click="(e) => listeners.click && listeners.click(tag.id, e)"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import N8nTag from '../N8nTag';
|
||||
|
||||
export default {
|
||||
name: 'n8n-tags',
|
||||
components: {
|
||||
N8nTag,
|
||||
},
|
||||
props: {
|
||||
tags: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
* {
|
||||
margin: 0 var(--spacing-4xs) var(--spacing-4xs) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
3
packages/design-system/src/components/N8nTags/index.js
Normal file
3
packages/design-system/src/components/N8nTags/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import Tags from './Tags.vue';
|
||||
|
||||
export default Tags;
|
||||
@@ -5,12 +5,16 @@ import N8nInput from './N8nInput';
|
||||
import N8nInfoTip from './N8nInfoTip';
|
||||
import N8nInputNumber from './N8nInputNumber';
|
||||
import N8nInputLabel from './N8nInputLabel';
|
||||
import N8nLoading from './N8nLoading';
|
||||
import N8nHeading from './N8nHeading';
|
||||
import N8nMarkdown from './N8nMarkdown';
|
||||
import N8nMenu from './N8nMenu';
|
||||
import N8nMenuItem from './N8nMenuItem';
|
||||
import N8nSelect from './N8nSelect';
|
||||
import N8nSpinner from './N8nSpinner';
|
||||
import N8nSquareButton from './N8nSquareButton';
|
||||
import N8nTags from './N8nTags';
|
||||
import N8nTag from './N8nTag';
|
||||
import N8nText from './N8nText';
|
||||
import N8nTooltip from './N8nTooltip';
|
||||
import N8nOption from './N8nOption';
|
||||
@@ -23,12 +27,16 @@ export {
|
||||
N8nInput,
|
||||
N8nInputLabel,
|
||||
N8nInputNumber,
|
||||
N8nLoading,
|
||||
N8nMarkdown,
|
||||
N8nHeading,
|
||||
N8nMenu,
|
||||
N8nMenuItem,
|
||||
N8nSelect,
|
||||
N8nSpinner,
|
||||
N8nSquareButton,
|
||||
N8nTags,
|
||||
N8nTag,
|
||||
N8nText,
|
||||
N8nTooltip,
|
||||
N8nOption,
|
||||
|
||||
@@ -6,4 +6,6 @@ declare module 'element-ui/lib/select';
|
||||
declare module 'element-ui/lib/option';
|
||||
declare module 'element-ui/lib/menu';
|
||||
declare module 'element-ui/lib/menu-item';
|
||||
declare module 'element-ui/lib/skeleton';
|
||||
declare module 'element-ui/lib/skeleton-item';
|
||||
|
||||
|
||||
12
packages/design-system/src/utils/markdown.ts
Normal file
12
packages/design-system/src/utils/markdown.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
export const escapeMarkdown = (html: string | undefined): string => {
|
||||
if (!html) {
|
||||
return '';
|
||||
}
|
||||
const escaped = html.replace(/</g, "<").replace(/>/g, ">");
|
||||
// unescape greater than quotes at start of line
|
||||
const withQuotes = escaped.replace(/^((\s)*(>)+)+\s*/gm, (matches) => {
|
||||
return matches.replace(/>/g, '>');
|
||||
});
|
||||
|
||||
return withQuotes;
|
||||
};
|
||||
@@ -22,6 +22,7 @@
|
||||
// @use "./checkbox-group.scss";
|
||||
@use "./switch.scss";
|
||||
@use "./select.scss";
|
||||
@use "./skeleton.scss";
|
||||
@use "./button.scss";
|
||||
// @use "./button-group.scss";
|
||||
@use "./table.scss";
|
||||
|
||||
82
packages/design-system/theme/src/skeleton.scss
vendored
Normal file
82
packages/design-system/theme/src/skeleton.scss
vendored
Normal file
@@ -0,0 +1,82 @@
|
||||
.el-skeleton {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-skeleton__item {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
border-radius: var(--border-radius-large);
|
||||
background: var(--color-background-base);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-skeleton__button {
|
||||
width: 162px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.el-skeleton__p {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.el-skeleton__h1 {
|
||||
height: 20px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.el-skeleton__image {
|
||||
width: unset;
|
||||
height: 500px !important;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.el-skeleton__image svg {
|
||||
width: 22%;
|
||||
height: 22%;
|
||||
fill: var(--color-info-tint-1);
|
||||
}
|
||||
|
||||
.el-skeleton__first-line,
|
||||
.el-skeleton__paragraph {
|
||||
background: var(--color-background-base);
|
||||
}
|
||||
|
||||
.el-skeleton.is-animated .el-skeleton__item {
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(25%, #f2f2f2), color-stop(37%, #e6e6e6), color-stop(63%, #f2f2f2));
|
||||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
||||
background-size: 400% 100%;
|
||||
-webkit-animation: el-skeleton-loading 1.4s ease infinite;
|
||||
animation: el-skeleton-loading 1.4s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes el-skeleton-loading {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes el-skeleton-loading {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user