gnui 1.0.9 → 1.1.2

package/dist/js/gnui.js

@@ -13780,8 +13780,10 @@
 	}
 	var JsonPath = jsonpath;
 	function interpolateURL(url, source) {
-	    var _tmp = __assign({}, source);
-	    return url.replace(/\{{\s*[\w\.]+\s*}}/gm, function (match, offset, string) {
+	    var _source = __assign({}, source);
+	    var dmustach = new RegExp(/\{{([^{}]*)}}/gm);
+	    var result = url.replace(dmustach, function (match, offset, string) {
+	        var _tmp = __assign({}, _source);
 	        var _fields = match.replace(/\{{|\}}/gm, '');
 	        if (startsWith(_fields, '$') && isObject(source.root)) {
 	            _tmp = JsonPath.query(_tmp.root, _fields);
@@ -13791,8 +13793,9 @@
 	                _tmp = !isUndefined(_tmp[field]) ? _tmp[field] : _tmp;
 	            });
 	        }
-	        return !isObject(_tmp) ? encodeURIComponent(_tmp) : _tmp;
+	        return !isObject(_tmp) ? encodeURI(_tmp) : _tmp;
 	    });
+	    return dmustach.test(result) ? interpolateURL(result, source) : result;
 	}
 
 	function style(element, name, value) {
@@ -16077,6 +16080,9 @@
 	        }
 	        var _selector = $(selector);
 	        var _findComponent;
+	        if (!_selector) {
+	            return undefined;
+	        }
 	        Object.values(this._componentMap).forEach(function (n) {
 	            // 동일한 selector 인지 비교
 	            if (isEquals(n.uid, _selector) || isEquals(_selector.id, n.uid)) {
@@ -16149,11 +16155,12 @@
 	var GNCoreInstance = /** @class */ (function () {
 	    function GNCoreInstance(name, selector, options) {
 	        if (options === void 0) { options = {}; }
+	        var _a;
 	        this.$name = name;
 	        this.$selector = selector ? $(selector) : null;
 	        this.$options = options;
 	        // random uniqueId 생성
-	        this._uid = "" + GN_CONSTANT.PREFIX + (new Date().getTime() + random(111, 999));
+	        this._uid = ((_a = this.$selector) === null || _a === void 0 ? void 0 : _a.id) || "" + GN_CONSTANT.PREFIX + (new Date().getTime() + random(111, 999));
 	    }
 	    GNCoreInstance.prototype.$reset = function () { };
 	    GNCoreInstance.prototype.$init = function (component, options) {
@@ -16826,7 +16833,7 @@
 	            },
 	            blur: function (e) {
 	                // focus가 옮겨간 객체가 해당 컴포넌트가 아닌경우 close 수행
-	                if (!e.relatedTarget || !parents(e.relatedTarget, "#" + _this._uid).length) {
+	                if (!e.relatedTarget || (!parents(e.relatedTarget, "#" + _this._uid).length && !isEquals(e.relatedTarget, _this.$el))) {
 	                    _this._hidden.close();
 	                }
 	            },
@@ -16917,7 +16924,7 @@
 	                    return;
 	                }
 	                findAll('.dropdown-item', _this.$el).forEach(function (option) {
-	                    if (!includes$1(data$1(option, 'value'), q) && !includes$1(text(find('.dropdown-text', option)), q)) {
+	                    if (!includes$1(data$1(option, 'value').toUpperCase(), q.toUpperCase()) && !includes$1(text(find('.dropdown-text', option)).toUpperCase(), q.toUpperCase())) {
 	                        css(option, 'display', 'none');
 	                    }
 	                });
@@ -17076,6 +17083,21 @@
 	            this.$options.value = this.$options.flatData[0];
 	        }
 	    };
+	    Dropdown.prototype.completed = function () {
+	        if (this.$options.value) {
+	            var options_1 = findAll('select option', this.$el);
+	            if (isArray(this.$options.value)) {
+	                this.$options.value.forEach(function (value) { return setValue(value, options_1); });
+	            }
+	            else {
+	                setValue(this.$options.value, options_1);
+	            }
+	        }
+	        function setValue(value, options) {
+	            var opt = options.find(function (opt) { return opt.value === value.value; });
+	            opt && attr(opt, 'selected', 'selected');
+	        }
+	    };
 	    return Dropdown;
 	}(GNCoreInstance));
 
@@ -17538,7 +17560,7 @@
 	    'xaxis',
 	    'yaxis'
 	];
-	// 기본 설정
+	// 기본 설정 - overwrite 가능
 	var chartDefault = {
 	    chart: {
 	        toolbar: {
@@ -17546,7 +17568,7 @@
 	        }
 	    }
 	};
-	// 타입별 추가 설정
+	// 타입별 추가 설정 - overwrite 불가
 	var typesDefault = {
 	    line: {
 	        chart: {
@@ -17755,7 +17777,7 @@
 	                chartOptions[key] = value;
 	            }
 	        });
-	        var newOptions = merge(merge(chartOptions, typesDefault[this.$options.type] || {}), chartDefault);
+	        var newOptions = merge(chartDefault, merge(chartOptions, typesDefault[this.$options.type] || {}));
 	        if (!newOptions.theme) {
 	            newOptions.theme = {
 	                palette: 'palette4'
@@ -17804,6 +17826,7 @@
 	        };
 	        _this.config = {
 	            name: _this.$selector.name || _this._uid,
+	            direction: undefined,
 	            delegates: {
 	                preview: '.active-color',
 	                value: '.color-value'
@@ -17849,6 +17872,11 @@
 	                    _this.$options.parent = options.parent || _this.$options.parent;
 	                }
 	                addClass(_this.$el, 'is-active');
+	                var parentOptions = _this.$options.parent.$options;
+	                var parentEl = _this.$options.parent.$el;
+	                if (parentOptions.direction) {
+	                    _this._hidden.setPosition(parentOptions, parentEl, _this.$el);
+	                }
 	            },
 	            hide: function () {
 	                removeClass(_this.$el, 'is-active');
@@ -17930,7 +17958,42 @@
 	            /* 컬러팔레트의 전체 너비 중 saturation 값에 따른 위치 설정 */
 	            setSaturation: function () {
 	                css(_this.$options.delegates.pointer, 'left', Math.floor(_this.$options.saturation / (100 / 180)));
-	            }
+	            },
+	            setPosition: function (options, parentEl, currentEl) {
+	                var _position = {
+	                    top: 0,
+	                    left: 0
+	                };
+	                var parentOffset = offset(parentEl);
+	                var currentOffset = offset(currentEl);
+	                switch (options.direction) {
+	                    case 'top':
+	                        _position = {
+	                            left: parentOffset.left + 'px',
+	                            top: (parentOffset.top - currentOffset.height - 2) + 'px',
+	                        };
+	                        break;
+	                    case 'bottom':
+	                        _position = {
+	                            left: parentOffset.left + 'px',
+	                            top: (parentOffset.bottom + 2) + 'px'
+	                        };
+	                        break;
+	                    case 'right':
+	                        _position = {
+	                            left: (parentOffset.right + 2) + 'px',
+	                            top: parentOffset.top + 'px'
+	                        };
+	                        break;
+	                    case 'left':
+	                        _position = {
+	                            left: (parentOffset.left - currentOffset.width - 2) + 'px',
+	                            top: parentOffset.top + 'px'
+	                        };
+	                        break;
+	                }
+	                css(currentEl, _position);
+	            },
 	        };
 	        _this.config = {
 	            hue: 360,
@@ -19404,18 +19467,19 @@
 	        if (options === void 0) { options = {}; }
 	        var _this = _super.call(this, name, selector, options) || this;
 	        _this._hidden = {
-	            search: function (e) {
+	            search: function (obj, e) {
 	                clearTimeout(_this.$options.timer);
 	                _this.$options.timer = setTimeout(function () {
-	                    _this._hidden.filter($(e.target).value);
+	                    _this._hidden.filter(obj, $(e.target).value);
 	                }, 300);
 	            },
-	            filter: function (q) {
+	            filter: function (obj, q) {
+	                css(findAll('.dropdown-item', _this.$el), 'display', 'block');
 	                if (q === '') {
-	                    css(findAll('.dropdown-item', _this.$el), 'display', 'block');
+	                    return;
 	                }
-	                findAll('.dropdown-item', _this.$el).forEach(function (option) {
-	                    if (!includes$1(data$1(option, 'value'), q) && !includes$1(text(find('.dropdown-text', option)), q)) {
+	                findAll(".picklist-" + obj + " .dropdown-item", _this.$el).forEach(function (option) {
+	                    if (!includes$1(data$1(option, 'value').toUpperCase(), q.toUpperCase()) && !includes$1(text(find('.dropdown-text', option)).toUpperCase(), q.toUpperCase())) {
 	                        css(option, 'display', 'none');
 	                    }
 	                });
@@ -19481,6 +19545,7 @@
 	                    delete option.selected;
 	                });
 	                _this.$options.onChange && _this.$options.onChange.call(_this, _this.$options.data.source, _this.$options.data.target); // user onChange event
+	                _this.$options.onSort && _this.$options.onSort.call(_this, _this.$options.data.source, _this.$options.data.target); // user onSort event
 	            },
 	            move: function (dir, selected) {
 	                if (selected === void 0) { selected = null; }
@@ -19512,6 +19577,7 @@
 	                _this.$template.reRender(find('ul', _this.$options.delegates.source), _this._hidden.renderSub('source'));
 	                _this.$template.reRender(find('ul', _this.$options.delegates.target), _this._hidden.renderSub('target'));
 	                _this.$options.onChange && _this.$options.onChange.call(_this, _this.$options.data.source, _this.$options.data.target); // user onChange event
+	                _this.$options.onTransfer && _this.$options.onTransfer.call(_this, _this.$options.data.source, _this.$options.data.target); // user onTransfer event
 	            },
 	            moveTo: function (source, target, addArr) {
 	                isArray(addArr) &&
@@ -19537,6 +19603,10 @@
 	        };
 	        _this.config = {
 	            name: _this.$selector.name || _this._uid,
+	            textSets: {
+	                sourceCaption: '',
+	                targetCaption: ''
+	            },
 	            data: {
 	                source: (function () {
 	                    return findAll('select.gn-source > option', _this.$selector).map(function (option) {
@@ -19554,11 +19624,15 @@
 	                source: '.picklist-source > .gn-dropdown',
 	                target: '.picklist-target > .gn-dropdown'
 	            },
+	            hasSourceSearch: false,
+	            hasTargetSearch: false,
 	            orderable: true,
 	            height: 150
 	        };
 	        _this.events = {
-	            'onChange': true
+	            'onChange': true,
+	            'onSort': true,
+	            'onTransfer': true
 	        };
 	        _this.methods = {
 	            getSource: function () {
@@ -19603,12 +19677,43 @@
 	            createElement$1("div", { className: "picklist-source" },
 	                (config.orderable === true || config.orderable === 'source') && renderControl('source'),
 	                createElement$1("div", { className: "gn-dropdown is-opened" },
-	                    createElement$1("div", { className: "dropdown-items", style: config.height ? { height: getUnit('height', config.height), maxHeight: getUnit('height', config.height) } : {} }, this._hidden.renderSub('source')))),
+	                    config.textSets.sourceCaption.length > 0 &&
+	                        createElement$1("div", { className: "picklist-caption" }, config.textSets.sourceCaption),
+	                    createElement$1("div", { className: "dropdown-items", style: config.height ? { height: getUnit('height', config.height), maxHeight: getUnit('height', config.height) } : {} },
+	                        config.hasSourceSearch &&
+	                            createElement$1("div", { className: "dropdown-search" },
+	                                createElement$1("div", { className: "gn-control has-icon-right is-full" },
+	                                    createElement$1("span", { className: "gn-icon is-right" },
+	                                        createElement$1("i", { className: "fas fa-search" })),
+	                                    createElement$1("input", { type: "text", className: "gn-input is-full", placeholder: "search item", "on-keyup": this._hidden.search.bind(this, 'source') }))),
+	                        this._hidden.renderSub('source')))),
 	            renderControl(config.direction === 'vertical' ? 'cross' : 'vertical'),
 	            createElement$1("div", { className: "picklist-target" },
 	                (config.orderable === true || config.orderable === 'target') && renderControl('target'),
 	                createElement$1("div", { className: "gn-dropdown is-opened" },
-	                    createElement$1("div", { className: "dropdown-items", style: config.height ? { height: getUnit('height', config.height), maxHeight: getUnit('height', config.height) } : {} }, this._hidden.renderSub('target')))));
+	                    config.textSets.targetCaption.length > 0 &&
+	                        createElement$1("div", { className: "picklist-caption" }, config.textSets.targetCaption),
+	                    createElement$1("div", { className: "dropdown-items", style: config.height ? { height: getUnit('height', config.height), maxHeight: getUnit('height', config.height) } : {} },
+	                        config.hasTargetSearch &&
+	                            createElement$1("div", { className: "dropdown-search" },
+	                                createElement$1("div", { className: "gn-control has-icon-right is-full" },
+	                                    createElement$1("span", { className: "gn-icon is-right" },
+	                                        createElement$1("i", { className: "fas fa-search" })),
+	                                    createElement$1("input", { type: "text", className: "gn-input is-full", placeholder: "search item", "on-keyup": this._hidden.search.bind(this, 'target') }))),
+	                        this._hidden.renderSub('target')))));
+	    };
+	    Picklist.prototype.beforeMount = function () {
+	        if (this.$options.height < 100) {
+	            this.$options.height = 100;
+	        }
+	    };
+	    Picklist.prototype.completed = function () {
+	        if (this.$options.textSets.sourceCaption.length > 0) {
+	            style(find('.picklist-source .dropdown-items', this.$el), 'height', getUnit('height', getNumber(this.$options.height) - getNumber(style(find('.picklist-source .picklist-caption', this.$el), 'height'))));
+	        }
+	        if (this.$options.textSets.targetCaption.length > 0) {
+	            style(find('.picklist-target .dropdown-items', this.$el), 'height', getUnit('height', getNumber(this.$options.height) - getNumber(style(find('.picklist-target .picklist-caption', this.$el), 'height'))));
+	        }
 	    };
 	    return Picklist;
 	}(GNCoreInstance));
@@ -21670,10 +21775,12 @@
 	        _this._hidden = {
 	            update: function (e) {
 	                if (_this.$options.readonly) {
-	                    e.preventDefault();
+	                    e && e.preventDefault();
 	                    return;
 	                }
-	                _this.$options.value = $(e.target).value;
+	                if (e) {
+	                    _this.$options.value = $(e.target).value;
+	                }
 	                // Handle final newlines (see article)
 	                if (_this.$options.value[_this.$options.value.length - 1] == "\n") {
 	                    _this.$options.value += " ";
@@ -21682,7 +21789,8 @@
 	                _this.$options.delegates.content.innerHTML = _this.$options.value.replace(new RegExp("&", "g"), "&amp;").replace(new RegExp("<", "g"), "&lt;"); /* Global RegExp */
 	                // Syntax Highlight
 	                prism$1.highlightElement(_this.$options.delegates.content);
-	                _this._hidden.sync(e);
+	                e && _this._hidden.sync(e);
+	                _this.$options.onChange && _this.$options.onChange.call(_this, _this.$options.value); // user onChange event
 	            },
 	            sync: function (e) {
 	                _this.$options.delegates.preview.scrollTop = e.target.scrollTop;
@@ -21709,6 +21817,20 @@
 	            },
 	            focus: function () {
 	                _this.$options.delegates.input.focus();
+	            },
+	            setValue: function (value) {
+	                _this.$options.value = value;
+	                val(_this.$options.delegates.input, _this.$options.value);
+	                _this._hidden.update();
+	            },
+	            getValue: function () {
+	                return _this.$options.value;
+	            },
+	            disable: function () {
+	                _this.$options.readonly = true;
+	            },
+	            enable: function () {
+	                _this.$options.readonly = false;
 	            }
 	        };
 	        _this.config = {
@@ -21729,8 +21851,23 @@
 	            usetab: false,
 	            readonly: false
 	        };
-	        _this.events = {};
-	        _this.methods = {};
+	        _this.events = {
+	            'onChange': true
+	        };
+	        _this.methods = {
+	            setValue: function (value) {
+	                this._hidden.setValue(value);
+	            },
+	            getValue: function () {
+	                return this._hidden.getValue();
+	            },
+	            disable: function () {
+	                this._hidden.disable();
+	            },
+	            enable: function () {
+	                this._hidden.enable();
+	            }
+	        };
 	        _this.$init(_this, options);
 	        return _this;
 	    }