fix(editor): Fix i18n issues (#3072)
* 🐛 Fix `defaultLocale` watcher * ⚡ Improve error handling for headers * ✏️ Improve naming * 🐛 Fix hiring banner check * ⚡ Flatten base text keys * ⚡ Fix miscorrected key * ⚡ Implement pluralization * ✏️ Update docs * 🚚 Move headers fetching to `App.vue` * fix hiring banner * ⚡ Fix missing import * ✏️ Alphabetize translations * ⚡ Switch to async check * feat(editor): Refactor Output Panel + fix i18n issues (#3097) * update main panel * finish up tabs * fix docs link * add icon * update node settings * clean up settings * add rename modal * fix component styles * fix spacing * truncate name * remove mixin * fix spacing * fix spacing * hide docs url * fix bug * fix renaming * refactor tabs out * refactor execute button * refactor header * add more views * fix error view * fix workflow rename bug * rename component * fix small screen bug * move items, fix positions * add hover state * show selector on empty state * add empty run state * fix binary view * 1 item * add vjs styles * show empty row for every item * refactor tabs * add branch names * fix spacing * fix up spacing * add run selector * fix positioning * clean up * increase width of selector * fix up spacing * fix copy button * fix branch naming; type issues * fix docs in custom nodes * add type * hide items when run selector is shown * increase selector size * add select prepend * clean up a bit * Add pagination * add stale icon * enable stale data in execution run * Revert "enable stale data in execution run" 8edb68dbffa0aa0d8189117e1a53381cb2c27608 * move metadata to its own state * fix smaller size * add scroll buttons * update tabs on resize * update stale data on rename * remove metadata on delete * hide x * change title colors * binary data classes * remove duplicate css * add colors * delete unused keys * use event bus * update styles of pagination * fix ts issues * fix ts issues * use chevron icons * fix design with download button * add back to canvas button * add trigger warning disabled * show trigger warning tooltip * update button labels for triggers * update node output message * fix add-option bug * add page selector * fix pagination selector bug * fix executions bug * remove hint * add json colors * add colors for json * add color json keys * fix select options bug * update keys * address comments * update name limit * align pencil * update icon size * update radio buttons height * address comments * fix pencil bug * change buttons alignment * fully center * change order of buttons * add no output message in branch * scroll to top * change active state * fix page size * all items * update expression background * update naming * align pencil * update modal background * add schedule group * update schedule nodes messages * use ellpises for last chars * fix spacing * fix tabs issue * fix too far data bug * fix executions bug * fix table wrapping * fix rename bug * add padding * handle unkown errors * add sticky header * ignore empty input, trim node name * nudge lightness of color * center buttons * update pagination * set colors of title * increase table font, fix alignment * fix pencil bug * fix spacing * use date now * address pagination issues * delete unused keys * update keys sort * fix prepend * fix radio button position * Revert "fix radio button position" ae42781786f2e6dcfb00d1be770b19a67f533bdf Co-authored-by: Mutasem <mutdmour@gmail.com> Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
This commit is contained in:
Iván Ovejero
GitHub
@@ -2,6 +2,7 @@
|
||||
<component
|
||||
:is="$options.components.N8nText"
|
||||
:size="props.size"
|
||||
:color="props.color"
|
||||
:compact="true"
|
||||
>
|
||||
<component
|
||||
@@ -36,6 +37,8 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
color: {
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -11,7 +11,13 @@ const Template = (args, { argTypes }) => ({
|
||||
N8nInfoTip,
|
||||
},
|
||||
template:
|
||||
'<n8n-info-tip>Need help doing something? <a href="/docs" target="_blank">Open docs</a></n8n-info-tip>',
|
||||
'<n8n-info-tip v-bind="$props">Need help doing something? <a href="/docs" target="_blank">Open docs</a></n8n-info-tip>',
|
||||
});
|
||||
|
||||
export const InputLabel = Template.bind({});
|
||||
export const Note = Template.bind({});
|
||||
|
||||
export const Tooltip = Template.bind({});
|
||||
Tooltip.args = {
|
||||
type: 'tooltip',
|
||||
tooltipPlacement: 'right',
|
||||
};
|
||||
|
||||
@@ -1,23 +1,48 @@
|
||||
<template functional>
|
||||
<div :class="$style.infotip">
|
||||
<component :is="$options.components.N8nIcon" icon="info-circle" /> <span><slot></slot></span>
|
||||
<template>
|
||||
<div :class="[$style[theme], $style[type]]">
|
||||
<n8n-tooltip :placement="tooltipPlacement" :popper-class="$style.tooltipPopper" :disabled="type !== 'tooltip'">
|
||||
<span>
|
||||
<n8n-icon :icon="theme.startsWith('info') ? 'info-circle': 'exclamation-triangle'" />
|
||||
<span v-if="type === 'note'"><slot></slot></span>
|
||||
</span>
|
||||
<span v-if="type === 'tooltip'" slot="content"><slot></slot></span>
|
||||
</n8n-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import N8nIcon from '../N8nIcon';
|
||||
import N8nTooltip from '../N8nTooltip';
|
||||
|
||||
export default {
|
||||
name: 'n8n-info-tip',
|
||||
components: {
|
||||
N8nIcon,
|
||||
N8nTooltip,
|
||||
},
|
||||
props: {
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'info',
|
||||
validator: (value: string): boolean =>
|
||||
['info', 'info-light', 'warning', 'danger'].includes(value),
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'note',
|
||||
validator: (value: string): boolean =>
|
||||
['note', 'tooltip'].includes(value),
|
||||
},
|
||||
tooltipPlacement: {
|
||||
type: String,
|
||||
default: 'top',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.infotip {
|
||||
color: var(--color-text-light);
|
||||
.base {
|
||||
font-size: var(--font-size-2xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--font-size-s);
|
||||
@@ -27,7 +52,35 @@ export default {
|
||||
|
||||
svg {
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
composes: base;
|
||||
|
||||
svg {
|
||||
margin-right: var(--spacing-4xs);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
composes: base;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.info-light {
|
||||
color: var(--color-foreground-dark);
|
||||
}
|
||||
|
||||
.info {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<label role="radio" tabindex="-1" :class="$style.container" aria-checked="true">
|
||||
<input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value">
|
||||
<div :class="{[$style.button]: true, [$style.active]: active}" @click="$emit('click')">{{ label }}</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'n8n-radio-button',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.button:not(.active) {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-radius: 0;
|
||||
padding: 0 var(--spacing-s);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 26px;
|
||||
font-size: var(--font-size-2xs);
|
||||
border-radius: var(--border-radius-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-base);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--color-foreground-xlight);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
import N8nRadioButtons from './RadioButtons.vue';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/RadioButtons',
|
||||
component: N8nRadioButtons,
|
||||
argTypes: {
|
||||
},
|
||||
parameters: {
|
||||
backgrounds: { default: '--color-background-xlight' },
|
||||
},
|
||||
};
|
||||
|
||||
const methods = {
|
||||
onInput: action('input'),
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: {
|
||||
N8nRadioButtons,
|
||||
},
|
||||
template:
|
||||
`<n8n-radio-buttons v-model="val" v-bind="$props" @input="onInput">
|
||||
</n8n-radio-buttons>`,
|
||||
methods,
|
||||
data() {
|
||||
return {
|
||||
val: '',
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export const Example = Template.bind({});
|
||||
Example.args = {
|
||||
options: [
|
||||
{
|
||||
label: 'Test',
|
||||
value: 'test',
|
||||
},
|
||||
{
|
||||
label: 'World',
|
||||
value: 'world',
|
||||
},
|
||||
{
|
||||
label: 'Hello',
|
||||
value: 'hello',
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div role="radiogroup" :class="$style.radioGroup">
|
||||
<RadioButton
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
v-bind="option"
|
||||
:active="value === option.value"
|
||||
@click="(e) => onClick(option.value, e)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import RadioButton from './RadioButton';
|
||||
|
||||
export default {
|
||||
name: 'n8n-radio-buttons',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
},
|
||||
options: {
|
||||
},
|
||||
},
|
||||
components: {
|
||||
RadioButton,
|
||||
},
|
||||
methods: {
|
||||
onClick(value) {
|
||||
this.$emit('input', value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
||||
.radioGroup {
|
||||
display: inline-flex;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
font-size: 0;
|
||||
background-color: var(--color-foreground-base);
|
||||
padding: var(--spacing-5xs);
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import N8nRadioButtons from './RadioButtons.vue';
|
||||
|
||||
export default N8nRadioButtons;
|
||||
@@ -1,24 +1,29 @@
|
||||
<template functional>
|
||||
<component
|
||||
:is="$options.components.ElSelect"
|
||||
v-bind="props"
|
||||
:value="props.value"
|
||||
:size="$options.methods.getSize(props.size)"
|
||||
:class="$style[$options.methods.getClass(props)]"
|
||||
:popper-class="$options.methods.getPopperClass(props, $style)"
|
||||
v-on="listeners"
|
||||
:ref="data.ref"
|
||||
>
|
||||
<template v-slot:prefix>
|
||||
<slot name="prefix" />
|
||||
</template>
|
||||
<template v-slot:suffix>
|
||||
<slot name="suffix" />
|
||||
</template>
|
||||
<template v-slot:default>
|
||||
<slot></slot>
|
||||
</template>
|
||||
</component>
|
||||
<div :class="{[$style.container]: true, [$style.withPrepend]: !!$slots.prepend}">
|
||||
<div v-if="$slots.prepend" :class="$style.prepend">
|
||||
<slot name="prepend" />
|
||||
</div>
|
||||
<component
|
||||
:is="$options.components.ElSelect"
|
||||
v-bind="props"
|
||||
:value="props.value"
|
||||
:size="$options.methods.getSize(props.size)"
|
||||
:class="$style[$options.methods.getClass(props)]"
|
||||
:popper-class="$options.methods.getPopperClass(props, $style)"
|
||||
v-on="listeners"
|
||||
:ref="data.ref"
|
||||
>
|
||||
<template v-slot:prefix>
|
||||
<slot name="prefix" />
|
||||
</template>
|
||||
<template v-slot:suffix>
|
||||
<slot name="suffix" />
|
||||
</template>
|
||||
<template v-slot:default>
|
||||
<slot></slot>
|
||||
</template>
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -121,4 +126,30 @@ export default {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.withPrepend {
|
||||
input {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.prepend {
|
||||
font-size: var(--font-size-2xs);
|
||||
border: var(--border-base);
|
||||
border-right: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 var(--spacing-3xs);
|
||||
background-color: var(--color-background-light);
|
||||
border-bottom-left-radius: var(--input-border-radius, var(--border-radius-base));
|
||||
border-top-left-radius: var(--input-border-radius, var(--border-radius-base));
|
||||
color: var(--color-text-base);
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import N8nTabs from './Tabs.vue';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Tabs',
|
||||
component: N8nTabs,
|
||||
argTypes: {
|
||||
},
|
||||
parameters: {
|
||||
backgrounds: { default: '--color-background-xlight' },
|
||||
},
|
||||
};
|
||||
|
||||
const methods = {
|
||||
onInput: action('input'),
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: {
|
||||
N8nTabs,
|
||||
},
|
||||
template:
|
||||
`<n8n-tabs v-model="val" v-bind="$props" @input="onInput">
|
||||
</n8n-tabs>`,
|
||||
methods,
|
||||
data() {
|
||||
return {
|
||||
val: '',
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export const Example = Template.bind({});
|
||||
Example.args = {
|
||||
options: [
|
||||
{
|
||||
label: 'Test',
|
||||
value: 'test',
|
||||
},
|
||||
{
|
||||
label: 'Github',
|
||||
value: 'github',
|
||||
href: 'https://github.com/',
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
value: 'settings',
|
||||
icon: 'cog',
|
||||
align: 'right',
|
||||
},
|
||||
],
|
||||
};
|
||||
192
packages/design-system/src/components/N8nTabs/Tabs.vue
Normal file
192
packages/design-system/src/components/N8nTabs/Tabs.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<div :class="$style.back" v-if="scrollPosition > 0" @click="scrollLeft">
|
||||
<n8n-icon icon="chevron-left" size="small" />
|
||||
</div>
|
||||
<div :class="$style.next" v-if="canScrollRight" @click="scrollRight">
|
||||
<n8n-icon icon="chevron-right" size="small" />
|
||||
</div>
|
||||
<div ref="tabs" :class="$style.tabs">
|
||||
<div v-for="option in options" :key="option.value" :class="{ [$style.alignRight]: option.align === 'right' }">
|
||||
<a
|
||||
v-if="option.href"
|
||||
target="_blank"
|
||||
:href="option.href"
|
||||
:class="[$style.link, $style.tab]"
|
||||
@click="handleTabClick"
|
||||
>
|
||||
<div>
|
||||
{{ option.label }}
|
||||
<span :class="$style.external"><n8n-icon icon="external-link-alt" size="small" /></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
v-else
|
||||
:class="{ [$style.tab]: true, [$style.activeTab]: value === option.value }"
|
||||
@click="() => handleTabClick(option.value)"
|
||||
>
|
||||
<n8n-icon v-if="option.icon" :icon="option.icon" size="medium" />
|
||||
<span v-if="option.label">{{ option.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import N8nIcon from '../N8nIcon';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'N8nTabs',
|
||||
components: {
|
||||
N8nIcon,
|
||||
},
|
||||
mounted() {
|
||||
const container = this.$refs.tabs;
|
||||
if (container) {
|
||||
container.addEventListener('scroll', (e) => {
|
||||
const width = container.clientWidth;
|
||||
const scrollWidth = container.scrollWidth;
|
||||
this.scrollPosition = e.srcElement.scrollLeft;
|
||||
this.canScrollRight = scrollWidth - width > this.scrollPosition;
|
||||
});
|
||||
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
const width = container.clientWidth;
|
||||
const scrollWidth = container.scrollWidth;
|
||||
this.canScrollRight = scrollWidth - width > this.scrollPosition;
|
||||
});
|
||||
this.resizeObserver.observe(container);
|
||||
|
||||
const width = container.clientWidth;
|
||||
const scrollWidth = container.scrollWidth;
|
||||
this.canScrollRight = scrollWidth - width > this.scrollPosition;
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.resizeObserver.disconnect();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollPosition: 0,
|
||||
canScrollRight: false,
|
||||
resizeObserver: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
},
|
||||
options: {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleTabClick(tab: string) {
|
||||
this.$emit('input', tab);
|
||||
},
|
||||
scrollLeft() {
|
||||
this.scroll(-50);
|
||||
},
|
||||
scrollRight() {
|
||||
this.scroll(50);
|
||||
},
|
||||
scroll(left: number) {
|
||||
const container = this.$refs.tabs;
|
||||
if (container) {
|
||||
container.scrollBy({ left, top: 0, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
position: relative;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
color: var(--color-text-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
overflow-x: scroll;
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: block;
|
||||
padding: 0 var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
|
||||
padding-bottom: var(--spacing-2xs);
|
||||
font-size: var(--font-size-s);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.activeTab {
|
||||
color: var(--color-primary);
|
||||
border-bottom: var(--color-primary) 2px solid;
|
||||
}
|
||||
|
||||
.alignRight {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
color: var(--color-text-base);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
|
||||
.external {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.external {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
background-color: var(--color-background-light);
|
||||
z-index: 1;
|
||||
height: 24px;
|
||||
width: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.back {
|
||||
composes: tab;
|
||||
composes: button;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.next {
|
||||
composes: tab;
|
||||
composes: button;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
3
packages/design-system/src/components/N8nTabs/index.js
Normal file
3
packages/design-system/src/components/N8nTabs/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import N8nTabs from './Tabs.vue';
|
||||
|
||||
export default N8nTabs;
|
||||
@@ -12,6 +12,7 @@ import Switch from 'element-ui/lib/switch';
|
||||
import Select from 'element-ui/lib/select';
|
||||
import Option from 'element-ui/lib/option';
|
||||
import OptionGroup from 'element-ui/lib/option-group';
|
||||
import Pagination from 'element-ui/lib/pagination';
|
||||
import ButtonGroup from 'element-ui/lib/button-group';
|
||||
import Table from 'element-ui/lib/table';
|
||||
import TableColumn from 'element-ui/lib/table-column';
|
||||
@@ -29,6 +30,7 @@ import Loading from 'element-ui/lib/loading';
|
||||
import MessageBox from 'element-ui/lib/message-box';
|
||||
import Message from 'element-ui/lib/message';
|
||||
import Notification from 'element-ui/lib/notification';
|
||||
import Popover from 'element-ui/lib/popover';
|
||||
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
|
||||
|
||||
import N8nActionBox from './N8nActionBox';
|
||||
@@ -52,10 +54,12 @@ import N8nMenu from './N8nMenu';
|
||||
import N8nMenuItem from './N8nMenuItem';
|
||||
import N8nLink from './N8nLink';
|
||||
import N8nOption from './N8nOption';
|
||||
import N8nRadioButtons from './N8nRadioButtons';
|
||||
import N8nSelect from './N8nSelect';
|
||||
import N8nSpinner from './N8nSpinner';
|
||||
import N8nSquareButton from './N8nSquareButton';
|
||||
import N8nTags from './N8nTags';
|
||||
import N8nTabs from './N8nTabs';
|
||||
import N8nTag from './N8nTag';
|
||||
import N8nText from './N8nText';
|
||||
import N8nTooltip from './N8nTooltip';
|
||||
@@ -86,9 +90,11 @@ export {
|
||||
N8nMenu,
|
||||
N8nMenuItem,
|
||||
N8nOption,
|
||||
N8nRadioButtons,
|
||||
N8nSelect,
|
||||
N8nSpinner,
|
||||
N8nSquareButton,
|
||||
N8nTabs,
|
||||
N8nTags,
|
||||
N8nTag,
|
||||
N8nText,
|
||||
@@ -110,6 +116,7 @@ export {
|
||||
Select,
|
||||
Option,
|
||||
OptionGroup,
|
||||
Pagination,
|
||||
ButtonGroup,
|
||||
Table,
|
||||
TableColumn,
|
||||
@@ -128,6 +135,7 @@ export {
|
||||
Message,
|
||||
Notification,
|
||||
CollapseTransition,
|
||||
Popover,
|
||||
|
||||
locale,
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export function addTargetBlank(html: string) {
|
||||
return html.includes('href=')
|
||||
return html && html.includes('href=')
|
||||
? html.replace(/href=/g, 'target="_blank" href=')
|
||||
: html;
|
||||
}
|
||||
|
||||
@@ -154,3 +154,15 @@ import ColorCircles from './ColorCircles.vue';
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
|
||||
<Canvas>
|
||||
<Story name="json">
|
||||
{{
|
||||
template: `<color-circles :colors="['--color-json-default', '--color-json-null', '--color-json-boolean', '--color-json-number', '--color-json-string', '--color-json-key', '--color-json-brackets', '--color-json-brackets-hover', '--color-json-line', '--color-json-highlight']" />`,
|
||||
components: {
|
||||
ColorCircles,
|
||||
},
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
Reference in New Issue
Block a user