From 131428989452e7f06b183d307923589c5423593c Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Thu, 29 Jun 2023 11:19:41 +0800
Subject: [PATCH] release(setting): v0.8.0

---
 index.json               |  2 +-
 src/setting/index.ts     | 47 ++++++++++++++++++++++++++++++++++++++++
 src/setting/package.json |  2 +-
 src/setting/story.js     |  2 +-
 src/setting/style.scss   | 24 ++++++++++++++++++++
 src/toolbar/style.scss   |  2 +-
 6 files changed, 75 insertions(+), 4 deletions(-)

diff --git a/index.json b/index.json
index 67e436f..7906b27 100644
--- a/index.json
+++ b/index.json
@@ -249,7 +249,7 @@
   },
   "setting": {
     "install": true,
-    "version": "0.7.0",
+    "version": "0.8.0",
     "style": true,
     "icon": false,
     "test": true,
diff --git a/src/setting/index.ts b/src/setting/index.ts
index fec6c18..053fd69 100644
--- a/src/setting/index.ts
+++ b/src/setting/index.ts
@@ -323,6 +323,12 @@ class SettingItem {
   detach() {
     this.$container.remove()
   }
+  disable() {
+    this.$container.addClass(this.setting.c('disabled'))
+  }
+  enable() {
+    this.$container.rmClass(this.setting.c('disabled'))
+  }
   text() {
     return this.$container.text()
   }
@@ -354,6 +360,7 @@ class SettingSeparator extends SettingItem {
 }
 
 class SettingText extends SettingItem {
+  private $input: $.$
   constructor(
     setting: Setting,
     key: string,
@@ -374,6 +381,15 @@ class SettingText extends SettingItem {
     $input.val(value)
 
     $input.on('change', () => this.onChange($input.val()))
+    this.$input = $input
+  }
+  disable() {
+    super.disable()
+    this.$input.attr('disabled', '')
+  }
+  enable() {
+    super.enable()
+    this.$input.rmAttr('disabled')
   }
 }
 
@@ -390,6 +406,7 @@ export interface INumberOptions {
 }
 
 class SettingNumber extends SettingItem {
+  private $input: $.$
   constructor(
     setting: Setting,
     key: string,
@@ -452,6 +469,16 @@ class SettingNumber extends SettingItem {
       $trackProgress.css('width', progress(val, min, max) + '%')
       $value.text(toStr(val))
     })
+
+    this.$input = $input
+  }
+  disable() {
+    super.disable()
+    this.$input.attr('disabled', '')
+  }
+  enable() {
+    super.enable()
+    this.$input.rmAttr('disabled')
   }
 }
 
@@ -460,6 +487,7 @@ const progress = (val: number, min: number, max: number) => {
 }
 
 class SettingCheckbox extends SettingItem {
+  private $input: $.$
   constructor(
     setting: Setting,
     key: string,
@@ -485,10 +513,20 @@ class SettingCheckbox extends SettingItem {
     input.checked = value
 
     $input.on('change', () => this.onChange(input.checked))
+    this.$input = $input
+  }
+  disable() {
+    super.disable()
+    this.$input.attr('disabled', '')
+  }
+  enable() {
+    super.enable()
+    this.$input.rmAttr('disabled')
   }
 }
 
 class SettingSelect extends SettingItem {
+  private $select: $.$
   constructor(
     setting: Setting,
     key: string,
@@ -520,6 +558,15 @@ class SettingSelect extends SettingItem {
 
     const $select = this.$container.find('select')
     $select.on('change', () => this.onChange($select.val()))
+    this.$select = $select
+  }
+  disable() {
+    super.disable()
+    this.$select.attr('disabled', '')
+  }
+  enable() {
+    super.enable()
+    this.$select.rmAttr('disabled')
   }
 }
 
diff --git a/src/setting/package.json b/src/setting/package.json
index 298dfe1..c4f0b7b 100644
--- a/src/setting/package.json
+++ b/src/setting/package.json
@@ -1,6 +1,6 @@
 {
   "name": "setting",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Settings panel",
   "dependencies": {
     "micromark": "^3.1.0"
diff --git a/src/setting/story.js b/src/setting/story.js
index 5785ca7..189df9e 100644
--- a/src/setting/story.js
+++ b/src/setting/story.js
@@ -68,7 +68,7 @@ const def = story(
 
     setting.appendTitle('Element')
 
-    setting.appendInput(
+    setting.appendText(
       'searchKeyword',
       'div',
       'Search Keyword',
diff --git a/src/setting/style.scss b/src/setting/style.scss
index f5e9e29..6e2fbaf 100644
--- a/src/setting/style.scss
+++ b/src/setting/style.scss
@@ -70,6 +70,11 @@
 }
 
 .item-input {
+  &.disabled {
+    input {
+      opacity: 0.6;
+    }
+  }
   input {
     @include input();
     width: 100%;
@@ -77,6 +82,15 @@
 }
 
 .item-number {
+  &.disabled {
+    input,
+    .range-container {
+      opacity: 0.6;
+    }
+    .range-container input {
+      opacity: 1;
+    }
+  }
   input[type='number'] {
     @include input();
     width: 200px;
@@ -139,6 +153,11 @@
 }
 
 .item-checkbox {
+  &.disabled {
+    .control {
+      opacity: 0.6;
+    }
+  }
   input {
     @include checkbox();
     align-self: flex-start;
@@ -153,6 +172,11 @@
 }
 
 .item-select {
+  &.disabled {
+    .select {
+      opacity: 0.6;
+    }
+  }
   .select {
     @include select();
     select {
diff --git a/src/toolbar/style.scss b/src/toolbar/style.scss
index ab7098d..f348f85 100644
--- a/src/toolbar/style.scss
+++ b/src/toolbar/style.scss
@@ -49,7 +49,7 @@
 
 .disabled {
   pointer-events: none;
-  opacity: 0.8;
+  opacity: 0.6;
 }
 
 .theme-dark {