[dropdown] fix css & disabled state

Author: budiadiono

demo/src/docs/components/dropdown/index.ts

@@ -12,4 +12,6 @@ export class Dropdown {
 
 	fruits = ['Mango', 'Durian', 'Apple', 'Orange']
 
+	allowEdit = true
+
 }

demo/src/docs/components/dropdown/view.pug

@@ -1,26 +1,27 @@
 div
   ui-form
     ui-fields-inline(label='Default')
-      ui-dropdown(v-model='choosen', name='chooser', default-text='Please make a choice!')
+      ui-dropdown(v-model='choosen', name='chooser', default-text='Please make a choice!', :disabled="!allowEdit")
         ui-dropdown-item(value='first') First Choice
         ui-dropdown-item(value='two') Second Choice
         ui-dropdown-item(value='three') Third Choice
       ui-field(label='Choosen:')
         | {{choosen}}
     ui-fields-inline(label='Search')
-      ui-dropdown(:search='true', v-model='choosen', name='chooser', default-text='Please make a choice!')
+      ui-dropdown(:search='true', v-model='choosen', name='chooser', default-text='Please make a choice!', :disabled="!allowEdit")
         ui-dropdown-item(value='first') First Choice
         ui-dropdown-item(value='two') Second Choice
         ui-dropdown-item(value='three') Third Choice
       ui-field(label='Choosen:')
         | {{choosen}}
     ui-fields-inline(label='Multiple')
-      ui-dropdown(:multiple='true', v-model='selection', name='chooser', default-text='Please select your favorite fruits')
+      ui-dropdown(:multiple='true', v-model='selection', name='chooser', default-text='Please select your favorite fruits', :disabled="!allowEdit")
         ui-dropdown-item(v-for='f in fruits', :value='f') {{f}}
       ui-field(:label="'Choosen (' + selection.length + '):'")
         | {{selection}}
     ui-fields-inline(label='Multiple Search')
-      ui-dropdown(:search='true', :multiple='true', v-model='selection', name='chooser', default-text='Please select your favorite fruits')
+      ui-dropdown(:search='true', :multiple='true', v-model='selection', name='chooser', default-text='Please select your favorite fruits', :disabled="!allowEdit")
         ui-dropdown-item(v-for='f in fruits', :value='f') {{f}}
       ui-field(:label="'Choosen (' + selection.length + '):'")
         | {{selection}}
+    ui-checkbox(v-model='allowEdit') Allow editing

dist/vue-typed-ui.js

@@ -1472,7 +1472,8 @@ var Dropdown = function (_DropdownBase2) {
     createClass(Dropdown, [{
         key: 'createComponent',
         value: function createComponent(ch) {
-            var css = 'ui selection dropdown ' + this.css;
+            var css = 'ui selection dropdown';
+            if (this.css) css += ' ' + this.css;
             return ch('div', { 'class': css }, [ch('input', { attrs: { type: 'hidden', name: this.name } }), ch('i', { 'class': 'dropdown icon' }), ch('div', { 'class': 'default text' }, this.placeholder), ch('div', { 'class': 'menu' }, this.$slots['default'])]);
         }
     }, {
@@ -1515,6 +1516,13 @@ var Dropdown = function (_DropdownBase2) {
             // assign selected values
             this.valueChanged(this.value);
         }
+    }, {
+        key: 'disabledChanged',
+        value: function disabledChanged(val) {
+            var el = $(this.$el.querySelector('.ui.dropdown'));
+            if (val) el.addClass('disabled');else el.removeClass('disabled');
+            this.sui('refresh');
+        }
     }, {
         key: 'valueChanged',
         value: function valueChanged(val) {
@@ -1539,6 +1547,7 @@ var Dropdown = function (_DropdownBase2) {
     }]);
     return Dropdown;
 }(_DropdownBase);
+__decorate([vueTyped.Watch('disabled')], Dropdown.prototype, "disabledChanged", null);
 __decorate([vueTyped.Watch('value')], Dropdown.prototype, "valueChanged", null);
 Dropdown = __decorate([vueTyped.Component()], Dropdown);
 

src/components/form-inputs/dropdown/index.ts

@@ -11,7 +11,11 @@ export class Dropdown extends _DropdownBase {
 	selectedItems = undefined
 
 	createComponent(ch) {
-		let css = 'ui selection dropdown ' + this.css
+		let css = 'ui selection dropdown'
+
+		if (this.css)
+			css += ' ' + this.css
+		
 		return ch('div', { 'class': css }, [
 			ch('input', { attrs: { type: 'hidden', name: this.name } }),
 			ch('i', { 'class': 'dropdown icon' }),
@@ -70,6 +74,17 @@ export class Dropdown extends _DropdownBase {
 
 	}
 
+	@Watch('disabled')
+	disabledChanged(val) {
+		let el = $(this.$el.querySelector('.ui.dropdown'))
+		if (val)
+			el.addClass('disabled')
+		else
+			el.removeClass('disabled')
+		
+		this.sui('refresh')
+	}
+
 	@Watch('value')
 	valueChanged(val) {
 		if (val === null || val === undefined) {