release(setting): v0.8.0

index.json

@@ -249,7 +249,7 @@
   },
   "setting": {
     "install": true,
-    "version": "0.7.0",
+    "version": "0.8.0",
     "style": true,
     "icon": false,
     "test": true,

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')
   }
 }
 

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"

src/setting/story.js

@@ -68,7 +68,7 @@ const def = story(
 
     setting.appendTitle('Element')
 
-    setting.appendInput(
+    setting.appendText(
       'searchKeyword',
       'div',
       'Search Keyword',

src/setting/style.scss

@@ -70,13 +70,27 @@
 }
 
 .item-input {
+  &.disabled {
+    input {
+      opacity: 0.6;
+    }
+  }
   input {
     @include input();
     width: 100%;
   }
 }
 
 .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 {

src/toolbar/style.scss

@@ -49,7 +49,7 @@
 
 .disabled {
   pointer-events: none;
-  opacity: 0.8;
+  opacity: 0.6;
 }
 
 .theme-dark {