From fad0839cdbb705bbffa0db4f4004eefcebe48b6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?= =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= Date: Thu, 23 Jan 2025 21:44:02 +0500 Subject: [PATCH] feat: update 'Table' in process --- package.json | 3 - src/Playground.vue | 110 +- src/common/interfaces/componentsProp.ts | 2 +- src/common/interfaces/componentsProps.ts | 4 +- src/components/Checkbox/Checkbox.vue | 10 +- src/components/Select/Select.vue | 12 +- src/components/Table/Table.vue | 42 +- src/components/Table/helpers.ts | 30 +- yarn.lock | 10990 +++++++++------------ 9 files changed, 4601 insertions(+), 6602 deletions(-) diff --git a/package.json b/package.json index bdf6ee3..06ba815 100644 --- a/package.json +++ b/package.json @@ -52,8 +52,5 @@ "extends": [ "plugin:storybook/recommended" ] - }, - "volta": { - "node": "23.1.0" } } diff --git a/src/Playground.vue b/src/Playground.vue index c27834c..c15d980 100644 --- a/src/Playground.vue +++ b/src/Playground.vue @@ -112,6 +112,34 @@ const tableColumns: ITableColumn[] = [ name: 'Country', type: 'text', }, + { + name: 'Is gay?', + type: 'checkbox', + }, + { + name: 'Status', + type: 'select', + options: { + options: [{ value: 'Married' }, { value: 'Oh no...(s)he is dead' }], + theme: 'sky', + }, + }, + { + name: 'Children', + type: 'rating', + options: { + theme: 'yellow', + }, + }, + { + name: 'Job progress', + type: 'progressBar', + options: { + theme: 'red', + width: '150px', + size: 'small', + }, + }, ]; const tableData = ref([ [ @@ -127,6 +155,18 @@ const tableData = ref([ { value: 'USA', }, + { + value: false, + }, + { + value: 'Married', + }, + { + value: 0, + }, + { + value: 30, + }, ], [ { @@ -141,6 +181,18 @@ const tableData = ref([ { value: 'Canada', }, + { + value: true, + }, + { + value: 'Married', + }, + { + value: 0, + }, + { + value: 30, + }, ], [ { @@ -155,6 +207,18 @@ const tableData = ref([ { value: 'Russia', }, + { + value: false, + }, + { + value: 'Married', + }, + { + value: 0, + }, + { + value: 30, + }, ], [ { @@ -169,6 +233,18 @@ const tableData = ref([ { value: 'Russia', }, + { + value: false, + }, + { + value: 'Married', + }, + { + value: 0, + }, + { + value: 30, + }, ], [ { @@ -183,6 +259,18 @@ const tableData = ref([ { value: 'Russia', }, + { + value: false, + }, + { + value: 'Married', + }, + { + value: 0, + }, + { + value: 30, + }, ], ]); const activeCheckbox = ref(); @@ -217,25 +305,19 @@ const knob = ref(0); {{ activeCheckbox }} - - - - -
+ + + + + {{ tableData[1] }}
diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts index 69d53ab..4bb98d8 100644 --- a/src/common/interfaces/componentsProp.ts +++ b/src/common/interfaces/componentsProp.ts @@ -19,7 +19,7 @@ export interface ITableColumn { } export interface ITableItem { - value: string | boolean; + value: string | number | boolean; editable?: boolean; } diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts index 9346010..ab0f0a3 100644 --- a/src/common/interfaces/componentsProps.ts +++ b/src/common/interfaces/componentsProps.ts @@ -158,7 +158,7 @@ export interface IPopupProps { } export interface ISelectProps { - options: ISelectOption[]; + options?: ISelectOption[]; groups?: ISelectGroup[]; selected?: string; width?: string; @@ -205,7 +205,7 @@ export interface IButtonProps { } export interface IProgressBarProps { - value: number; + value?: number; max?: number; width?: string; height?: string; diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue index 38bb037..a351908 100644 --- a/src/components/Checkbox/Checkbox.vue +++ b/src/components/Checkbox/Checkbox.vue @@ -1,6 +1,6 @@