[dropdown] settings

Author: budiadiono

dist/vue-typed-ui.js

@@ -1459,8 +1459,8 @@ __decorate([vueTyped.Prop({
     type: Boolean
 })], _DropdownBase.prototype, "multiple", void 0);
 __decorate([vueTyped.Prop({
-    type: String
-})], _DropdownBase.prototype, "css", void 0);
+    type: Object
+})], _DropdownBase.prototype, "settings", void 0);
 
 var Dropdown = function (_DropdownBase2) {
     inherits(Dropdown, _DropdownBase2);
@@ -1483,9 +1483,7 @@ var Dropdown = function (_DropdownBase2) {
     }, {
         key: 'createComponent',
         value: function createComponent(ch) {
-            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', 'ref': 'menu' }, this.$slots['default'])]);
+            return ch('div', { 'class': 'ui selection dropdown' }, [ch('input', { attrs: { type: 'hidden', name: this.name } }), ch('i', { 'class': 'dropdown icon' }), ch('div', { 'class': 'default text' }, this.placeholder), ch('div', { 'class': 'menu', 'ref': 'menu' }, this.$slots['default'])]);
         }
     }, {
         key: 'beforeUpdate',
@@ -1524,8 +1522,7 @@ var Dropdown = function (_DropdownBase2) {
             } else {
                 this.selectedItems = this.value;
             }
-            // init semantic-ui dropdown
-            this.sui({
+            var settings = _.merge({
                 forceSelection: false,
                 'onChange': function onChange(arg) {
                     if (!self.multiple) self.selectedItems = arg;
@@ -1537,7 +1534,9 @@ var Dropdown = function (_DropdownBase2) {
                 'onRemove': function onRemove(val) {
                     self.selectedItems.splice(self.selectedItems.indexOf(val), 1);
                 }
-            });
+            }, this.$UI.$settings.dropdown, this.settings || {});
+            // init semantic-ui dropdown
+            this.sui(settings);
             // manual force selection
             $(this.$el).find('input.search').on('blur', function (e) {
                 var text = $(e.target).val();

doc/api.json

@@ -472,6 +472,10 @@
         "type": "boolean",
         "description": "A selection dropdown can allow a user to search through a large list of choices."
       },
+      "settings": {
+        "type": "object",
+        "description": "Semantic UI dropdown settings. See: https://semantic-ui.com/modules/dropdown.html#/settings"
+      },
       "value": {
         "type": "any",
         "description": "v-model binding"

lib/interface.d.ts

@@ -457,6 +457,11 @@ export interface IDropdown {
      */
     search: boolean
 
+    /**
+     * Semantic UI dropdown settings. See: https://semantic-ui.com/modules/dropdown.html#/settings
+     */
+    settings: object
+
     /**
      * v-model binding
      */

lib/settings.d.ts

@@ -5,6 +5,7 @@ export interface Settings {
   timeFormat?: TimeFormat
   numeric?: NumericSettings
   toastr?: ToastrOptions
+  dropdown?: SemanticUI.Dropdown.Settings
 }
 
 export interface NumericSettings {

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

@@ -60,4 +60,14 @@ export class _DropdownBase extends Mixin(FieldBase) {
     })
     multiple: boolean
 
+    /**
+     * Semantic UI dropdown settings. See: https://semantic-ui.com/modules/dropdown.html#/settings
+     * 
+     * @type {object}
+     */
+    @Prop({
+        type: Object
+    })
+    settings: object
+
 }

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

@@ -4,6 +4,8 @@ import { FieldBase } from '../../fields/field-base';
 import { Util } from '../../../utils';
 import { _DropdownBase } from './_base';
 import { IDropdown } from '../../../../lib/interface';
+import * as _ from 'lodash';
+
 
 @Component()
 export class Dropdown extends _DropdownBase implements IDropdown {
@@ -63,8 +65,8 @@ export class Dropdown extends _DropdownBase implements IDropdown {
 			this.selectedItems = this.value;
 		}
 
-		// init semantic-ui dropdown
-		this.sui({
+
+		let settings = _.merge({
 			forceSelection: false,
 			'onChange': function (arg) {
 				if (!self.multiple) self.selectedItems = arg;
@@ -76,8 +78,10 @@ export class Dropdown extends _DropdownBase implements IDropdown {
 			'onRemove': function (val) {
 				self.selectedItems.splice(self.selectedItems.indexOf(val), 1);
 			}
-		});
+		}, this.$UI.$settings.dropdown, this.settings || {})
 
+		// init semantic-ui dropdown
+		this.sui(settings);
 
 		// manual force selection
 		$(this.$el).find('input.search').on('blur', (e) => {

src/components/form-inputs/dropdown/schema/props.json

@@ -22,6 +22,10 @@
     "multiple": {
       "type": "boolean",
       "description": "A selection dropdown can allow multiple selections"
+    },
+    "settings": {
+      "type": "object",
+      "description": "Semantic UI dropdown settings. See: https://semantic-ui.com/modules/dropdown.html#/settings"
     }
   },
   "methods": {