mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 20:54:07 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix TS errors in color picker (no-changelog) (#9575)

Browse source
This commit is contained in:
Mutasem Aldmour 2024-05-31 17:07:28 +02:00 committed by GitHub
parent dbb3ed6b71
commit 6582e1d59a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 10 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts
View file

@ -11,7 +11,7 @@ export default {
}, },
size: { size: {
control: 'select', control: 'select',
options: ['mini', 'small', 'medium', 'large'], options: ['small', 'large'],
}, },
showAlpha: { showAlpha: {
control: 'boolean', control: 'boolean',
@ -52,7 +52,7 @@ const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
export const Default = DefaultTemplate.bind({}); export const Default = DefaultTemplate.bind({});
Default.args = { Default.args = {
disabled: false, disabled: false,
size: 'medium', size: 'small',
showAlpha: false, showAlpha: false,
colorFormat: '', colorFormat: '',
popperClass: '', popperClass: '',

13
packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
View file

@ -3,11 +3,10 @@ import { computed, ref } from 'vue';
import { uid } from '../../utils'; import { uid } from '../../utils';
import { ElColorPicker } from 'element-plus'; import { ElColorPicker } from 'element-plus';
import N8nInput from '../N8nInput'; import N8nInput from '../N8nInput';
import type { ElementPlusSizePropType } from '@/types';
export type ColorPickerProps = { export type ColorPickerProps = {
disabled?: boolean; disabled?: boolean;
size?: 'small' | 'medium' | 'mini'; size?: 'small' | 'large';
showAlpha?: boolean; showAlpha?: boolean;
colorFormat?: 'hex' | 'rgb' | 'hsl' | 'hsv'; colorFormat?: 'hex' | 'rgb' | 'hsl' | 'hsv';
popperClass?: string; popperClass?: string;
@ -20,7 +19,7 @@ export type ColorPickerProps = {
defineOptions({ name: 'N8nColorPicker' }); defineOptions({ name: 'N8nColorPicker' });
const props = withDefaults(defineProps<ColorPickerProps>(), { const props = withDefaults(defineProps<ColorPickerProps>(), {
disabled: false, disabled: false,
size: 'default', size: 'large',
showAlpha: false, showAlpha: false,
colorFormat: 'hex', colorFormat: 'hex',
popperClass: '', popperClass: '',
@ -31,7 +30,6 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
}); });
const color = ref(props.modelValue); const color = ref(props.modelValue);
const colorPickerProps = computed(() => { const colorPickerProps = computed(() => {
const { showInput, modelValue, size, ...rest } = props; const { showInput, modelValue, size, ...rest } = props;
return rest; return rest;
@ -43,8 +41,6 @@ const emit = defineEmits<{
(event: 'active-change', value: string): void; (event: 'active-change', value: string): void;
}>(); }>();
const resolvedSize = computed(() => props.size as ElementPlusSizePropType);
const onChange = (value: string) => { const onChange = (value: string) => {
emit('change', value); emit('change', value);
}; };
@ -66,7 +62,8 @@ const onColorSelect = (value: string) => {
<span :class="['n8n-color-picker', $style.component]"> <span :class="['n8n-color-picker', $style.component]">
<ElColorPicker <ElColorPicker
v-bind="colorPickerProps" v-bind="colorPickerProps"
:size="resolvedSize" :model-value="modelValue"
:size="props.size"
@change="onChange" @change="onChange"
@active-change="onActiveChange" @active-change="onActiveChange"
@update:model-value="onColorSelect" @update:model-value="onColorSelect"
@ -75,7 +72,7 @@ const onColorSelect = (value: string) => {
v-if="showInput" v-if="showInput"
:class="$style.input" :class="$style.input"
:disabled="props.disabled" :disabled="props.disabled"
:size="size" :size="props.size"
:model-value="color" :model-value="color"
:name="name" :name="name"
type="text" type="text"

6
packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap
View file

@ -10,7 +10,7 @@ exports[`components > N8nColorPicker > should render with input 1`] = `
<div <div
aria-description="current color is . press enter to select a new color." aria-description="current color is . press enter to select a new color."
aria-label="color picker" aria-label="color picker"
class="el-color-picker el-color-picker--default el-tooltip__trigger el-tooltip__trigger" class="el-color-picker el-color-picker--large el-tooltip__trigger el-tooltip__trigger"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -64,7 +64,7 @@ exports[`components > N8nColorPicker > should render with input 1`] = `
<!--teleport end--> <!--teleport end-->
<div <div
class="el-input el-input--default n8n-input input input" class="el-input el-input--large n8n-input input input"
data-v-dab78bb8="" data-v-dab78bb8=""
> >
<!-- input --> <!-- input -->
@ -107,7 +107,7 @@ exports[`components > N8nColorPicker > should render without input 1`] = `
<div <div
aria-description="current color is . press enter to select a new color." aria-description="current color is . press enter to select a new color."
aria-label="color picker" aria-label="color picker"
class="el-color-picker el-color-picker--default el-tooltip__trigger el-tooltip__trigger" class="el-color-picker el-color-picker--large el-tooltip__trigger el-tooltip__trigger"
role="button" role="button"
tabindex="0" tabindex="0"
> >