From c50922f2403422f5267c9e7fe4bcddcf577c8e10 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 22 Jul 2021 16:09:05 +0400
Subject: [PATCH] Fix customization page

---
 config/storybook/preview.js                |  2 ++
 src/stories/Intro/Customization.stories.ts | 11 +++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/config/storybook/preview.js b/config/storybook/preview.js
index 9b3377df..14c5f9bc 100644
--- a/config/storybook/preview.js
+++ b/config/storybook/preview.js
@@ -2,12 +2,14 @@ import Vue from 'vue'
 import { addParameters, addDecorator } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { DocsPage } from '@storybook/addon-docs/blocks'
+import ElColorPicker from 'element-ui/lib/color-picker'
 
 import '../../src/styles/index.scss'
 import mainStore from '../../src/store'
 import { ElementUIPlugin } from '../../src/plugins'
 
 Vue.use(ElementUIPlugin)
+Vue.use(ElColorPicker)
 
 addParameters({
   options: {
diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index bc368409..1f1d4ed0 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -37,7 +37,7 @@ export const themeInputsData = [
   'text-file'
 ]
 export const configurable = () => ({
-  components: { SRow, SCol, SButton, SInput, SDivider },
+  components: { SRow, SCol, SButton, SDivider, SInput },
   template: `<div style="flex: 1;">
              <s-row>
                <s-col
@@ -83,9 +83,10 @@ export const configurable = () => ({
                   <s-input
                     type="number"
                     :placeholder="button.label + ' (px)'"
+                    v-model="borderRadiusValues[button.label]"
                     :border-radius="button.label"
                     style="margin-right: 10px; margin-right: 10px;"
-                    @change="(value) => handleBorderRadiusChange(button.label, value)"
+                    @input="(value) => handleBorderRadiusChange(button.label, value)"
                   />
                </div>
                </s-col>
@@ -103,6 +104,12 @@ export const configurable = () => ({
     sections: colorsSectionsData,
     buttons: differentTypeButtonsData,
     borderRadiusButtons: getRadiusData(BorderRadius),
+    borderRadiusValues: {
+      [BorderRadius.BIG]: '16',
+      [BorderRadius.MEDIUM]: '12',
+      [BorderRadius.SMALL]: '8',
+      [BorderRadius.MINI]: '4'
+    },
     inputs: themeInputsData
   }),
   methods: {