-
Notifications
You must be signed in to change notification settings - Fork 7.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into NODE-408-node-reference-in-expressions
* master: feat(editor): Version Control settings update (WIP) (#6233) ci: Fix linting issue on master (no-changelog) (#6232) fix: Prevent type error messages for manual executions (no-changelog) (#6229) fix(Code Node): Restore help text (#6231) fix(core): Make sure that special polling parameters are available on community nodes as well (#6230) feat(editor): Add color picker design system component (#6179) feat(Google Ads Node): Update to support v13 (#6212) ci: Fix published nodes-base package's dependencies (no-changelog) (#6226) ci: Code coverage should include `.vue` files as well (no-changelog) (#6224) 🚀 Release 0.228.0 (#6219)
- Loading branch information
Showing
29 changed files
with
689 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
packages/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { action } from '@storybook/addon-actions'; | ||
| import type { StoryFn } from '@storybook/vue'; | ||
| import N8nColorPicker from './ColorPicker.vue'; | ||
|
|
||
| export default { | ||
| title: 'Atoms/ColorPicker', | ||
| component: N8nColorPicker, | ||
| argTypes: { | ||
| disabled: { | ||
| control: 'boolean', | ||
| }, | ||
| size: { | ||
| control: 'select', | ||
| options: ['mini', 'small', 'medium', 'large'], | ||
| }, | ||
| showAlpha: { | ||
| control: 'boolean', | ||
| }, | ||
| colorFormat: { | ||
| control: 'select', | ||
| options: ['hsl', 'hsv', 'hex', 'rgb'], | ||
| }, | ||
| popperClass: { | ||
| control: 'text', | ||
| }, | ||
| predefine: { | ||
| control: 'array', | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const methods = { | ||
| onChange: action('change'), | ||
| onActiveChange: action('active-change'), | ||
| onInput: action('input'), | ||
| }; | ||
|
|
||
| const DefaultTemplate: StoryFn = (args, { argTypes }) => ({ | ||
| props: Object.keys(argTypes), | ||
| components: { | ||
| N8nColorPicker, | ||
| }, | ||
| data: () => ({ | ||
| color: null, | ||
| }), | ||
| template: | ||
| '<n8n-color-picker v-model="color" v-bind="$props" @input="onInput" @change="onChange" @active-change="onActiveChange" />', | ||
| methods, | ||
| }); | ||
|
|
||
| export const Default = DefaultTemplate.bind({}); | ||
| Default.args = { | ||
| disabled: false, | ||
| size: 'medium', | ||
| showAlpha: false, | ||
| colorFormat: '', | ||
| popperClass: '', | ||
| showInput: true, | ||
| }; |
99 changes: 99 additions & 0 deletions
99
packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <script lang="ts" setup> | ||
| import { computed, ref } from 'vue'; | ||
| import { ColorPicker } from 'element-ui'; | ||
| import N8nInput from '../N8nInput'; | ||
| export type Props = { | ||
| disabled?: boolean; | ||
| size?: 'small' | 'medium' | 'mini'; | ||
| showAlpha?: boolean; | ||
| colorFormat?: 'hex' | 'rgb' | 'hsl' | 'hsv'; | ||
| popperClass?: string; | ||
| predefine?: string[]; | ||
| value?: string; | ||
| showInput?: boolean; | ||
| }; | ||
| const props = withDefaults(defineProps<Props>(), { | ||
| disabled: false, | ||
| size: 'medium', | ||
| showAlpha: false, | ||
| colorFormat: 'hex', | ||
| popperClass: '', | ||
| showInput: true, | ||
| value: null, | ||
| }); | ||
| const color = ref(props.value); | ||
| const colorPickerProps = computed(() => { | ||
| const { value, showInput, ...rest } = props; | ||
| return rest; | ||
| }); | ||
| const emit = defineEmits<{ | ||
| (event: 'input', value: string): void; | ||
| (event: 'change', value: string): void; | ||
| (event: 'active-change', value: string): void; | ||
| }>(); | ||
| const model = computed({ | ||
| get() { | ||
| return color.value; | ||
| }, | ||
| set(value: string) { | ||
| color.value = value; | ||
| emit('input', value); | ||
| }, | ||
| }); | ||
| const onChange = (value: string) => { | ||
| emit('change', value); | ||
| }; | ||
| const onInput = (value: string) => { | ||
| color.value = value; | ||
| }; | ||
| const onActiveChange = (value: string) => { | ||
| emit('active-change', value); | ||
| }; | ||
| </script> | ||
| <template> | ||
| <span :class="['n8n-color-picker', $style.component]"> | ||
| <color-picker | ||
| v-model="model" | ||
| v-bind="colorPickerProps" | ||
| @change="onChange" | ||
| @active-change="onActiveChange" | ||
| /> | ||
| <n8n-input | ||
| v-if="showInput" | ||
| :class="$style.input" | ||
| :disabled="props.disabled" | ||
| :size="props.size" | ||
| :value="color" | ||
| @input="onInput" | ||
| type="text" | ||
| /> | ||
| </span> | ||
| </template> | ||
| <style lang="scss" module> | ||
| .component { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| } | ||
| .input { | ||
| margin-left: var(--spacing-3xs); | ||
| } | ||
| </style> | ||
|
|
||
| <style lang="scss" scoped> | ||
| :deep(.el-color-picker) { | ||
| .el-color-picker__empty, | ||
| .el-color-picker__icon { | ||
| display: none; | ||
| } | ||
| } | ||
| </style> |
16 changes: 16 additions & 0 deletions
16
packages/design-system/src/components/N8nColorPicker/__tests__/ColorPicker.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { render } from '@testing-library/vue'; | ||
| import N8nColorPicker from '../ColorPicker.vue'; | ||
|
|
||
| describe('components', () => { | ||
| describe('N8nColorPicker', () => { | ||
| it('should render with input', () => { | ||
| const { container } = render(N8nColorPicker); | ||
| expect(container).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should render without input', () => { | ||
| const { container } = render(N8nColorPicker, { props: { showInput: false } }); | ||
| expect(container).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.