gnui 1.0.9 → 1.1.2

package/dist/js/gnui.esm.js

@@ -13714,8 +13714,10 @@ function commaNum(num) {
 }
 const JsonPath = jsonpath;
 function interpolateURL(url, source) {
-    let _tmp = Object.assign({}, source);
-    return url.replace(/\{{\s*[\w\.]+\s*}}/gm, (match, offset, string) => {
+    let _source = Object.assign({}, source);
+    let dmustach = new RegExp(/\{{([^{}]*)}}/gm);
+    let result = url.replace(dmustach, (match, offset, string) => {
+        let _tmp = Object.assign({}, _source);
         let _fields = match.replace(/\{{|\}}/gm, '');
         if (startsWith(_fields, '$') && isObject(source.root)) {
             _tmp = JsonPath.query(_tmp.root, _fields);
@@ -13725,8 +13727,9 @@ function interpolateURL(url, source) {
                 _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) {
@@ -15933,6 +15936,9 @@ class GNUIState {
         }
         let _selector = $(selector);
         let _findComponent;
+        if (!_selector) {
+            return undefined;
+        }
         Object.values(this._componentMap).forEach((n) => {
             // 동일한 selector 인지 비교
             if (isEquals(n.uid, _selector) || isEquals(_selector.id, n.uid)) {
@@ -16002,11 +16008,12 @@ class GNUIState {
 // component instance
 class GNCoreInstance {
     constructor(name, selector, 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)}`;
     }
     $reset() { }
     $init(component, options) {
@@ -16655,7 +16662,7 @@ class Dropdown extends GNCoreInstance {
             },
             blur: (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();
                 }
             },
@@ -16746,7 +16753,7 @@ class Dropdown extends GNCoreInstance {
                     return;
                 }
                 findAll('.dropdown-item', this.$el).forEach((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');
                     }
                 });
@@ -16904,6 +16911,21 @@ class Dropdown extends GNCoreInstance {
             this.$options.value = this.$options.flatData[0];
         }
     }
+    completed() {
+        if (this.$options.value) {
+            const options = findAll('select option', this.$el);
+            if (isArray(this.$options.value)) {
+                this.$options.value.forEach((value) => setValue(value, options));
+            }
+            else {
+                setValue(this.$options.value, options);
+            }
+        }
+        function setValue(value, options) {
+            const opt = options.find(opt => opt.value === value.value);
+            opt && attr(opt, 'selected', 'selected');
+        }
+    }
 }
 
 class Time extends GNCoreInstance {
@@ -17355,7 +17377,7 @@ const apexOptions = [
     'xaxis',
     'yaxis'
 ];
-// 기본 설정
+// 기본 설정 - overwrite 가능
 const chartDefault = {
     chart: {
         toolbar: {
@@ -17363,7 +17385,7 @@ const chartDefault = {
         }
     }
 };
-// 타입별 추가 설정
+// 타입별 추가 설정 - overwrite 불가
 const typesDefault = {
     line: {
         chart: {
@@ -17569,7 +17591,7 @@ class Chart extends GNCoreInstance {
                 chartOptions[key] = value;
             }
         });
-        const newOptions = merge(merge(chartOptions, typesDefault[this.$options.type] || {}), chartDefault);
+        const newOptions = merge(chartDefault, merge(chartOptions, typesDefault[this.$options.type] || {}));
         if (!newOptions.theme) {
             newOptions.theme = {
                 palette: 'palette4'
@@ -17615,6 +17637,7 @@ class Colorpicker extends GNCoreInstance {
         };
         this.config = {
             name: this.$selector.name || this._uid,
+            direction: undefined,
             delegates: {
                 preview: '.active-color',
                 value: '.color-value'
@@ -17656,6 +17679,11 @@ class Colorpalette extends GNCoreInstance {
                     this.$options.parent = options.parent || this.$options.parent;
                 }
                 addClass(this.$el, 'is-active');
+                const parentOptions = this.$options.parent.$options;
+                const parentEl = this.$options.parent.$el;
+                if (parentOptions.direction) {
+                    this._hidden.setPosition(parentOptions, parentEl, this.$el);
+                }
             },
             hide: () => {
                 removeClass(this.$el, 'is-active');
@@ -17737,7 +17765,42 @@ class Colorpalette extends GNCoreInstance {
             /* 컬러팔레트의 전체 너비 중 saturation 값에 따른 위치 설정 */
             setSaturation: () => {
                 css(this.$options.delegates.pointer, 'left', Math.floor(this.$options.saturation / (100 / 180)));
-            }
+            },
+            setPosition: (options, parentEl, currentEl) => {
+                let _position = {
+                    top: 0,
+                    left: 0
+                };
+                const parentOffset = offset(parentEl);
+                const 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,
@@ -19155,18 +19218,19 @@ class Picklist extends GNCoreInstance {
     constructor(name, selector, options = {}) {
         super(name, selector, options);
         this._hidden = {
-            search: (e) => {
+            search: (obj, e) => {
                 clearTimeout(this.$options.timer);
                 this.$options.timer = setTimeout(() => {
-                    this._hidden.filter($(e.target).value);
+                    this._hidden.filter(obj, $(e.target).value);
                 }, 300);
             },
-            filter: (q) => {
+            filter: (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((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((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');
                     }
                 });
@@ -19232,6 +19296,7 @@ class Picklist extends GNCoreInstance {
                     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: (dir, selected = null) => {
                 dir = dir.replace('right', 'add').replace('left', 'remove').replace('down', 'add').replace('up', 'remove');
@@ -19262,6 +19327,7 @@ class Picklist extends GNCoreInstance {
                 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: (source, target, addArr) => {
                 isArray(addArr) &&
@@ -19287,6 +19353,10 @@ class Picklist extends GNCoreInstance {
         };
         this.config = {
             name: this.$selector.name || this._uid,
+            textSets: {
+                sourceCaption: '',
+                targetCaption: ''
+            },
             data: {
                 source: (() => {
                     return findAll('select.gn-source > option', this.$selector).map((option) => {
@@ -19304,11 +19374,15 @@ class Picklist extends GNCoreInstance {
                 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() {
@@ -19351,12 +19425,43 @@ class Picklist extends GNCoreInstance {
             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')))));
+    }
+    beforeMount() {
+        if (this.$options.height < 100) {
+            this.$options.height = 100;
+        }
+    }
+    completed() {
+        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'))));
+        }
     }
 }
 
@@ -21396,10 +21501,12 @@ class SyntaxInput extends GNCoreInstance {
         this._hidden = {
             update: (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 += " ";
@@ -21408,7 +21515,8 @@ class SyntaxInput extends GNCoreInstance {
                 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: (e) => {
                 this.$options.delegates.preview.scrollTop = e.target.scrollTop;
@@ -21435,6 +21543,20 @@ class SyntaxInput extends GNCoreInstance {
             },
             focus: () => {
                 this.$options.delegates.input.focus();
+            },
+            setValue: (value) => {
+                this.$options.value = value;
+                val(this.$options.delegates.input, this.$options.value);
+                this._hidden.update();
+            },
+            getValue: () => {
+                return this.$options.value;
+            },
+            disable: () => {
+                this.$options.readonly = true;
+            },
+            enable: () => {
+                this.$options.readonly = false;
             }
         };
         this.config = {
@@ -21455,8 +21577,23 @@ class SyntaxInput extends GNCoreInstance {
             usetab: false,
             readonly: false
         };
-        this.events = {};
-        this.methods = {};
+        this.events = {
+            'onChange': true
+        };
+        this.methods = {
+            setValue(value) {
+                this._hidden.setValue(value);
+            },
+            getValue() {
+                return this._hidden.getValue();
+            },
+            disable() {
+                this._hidden.disable();
+            },
+            enable() {
+                this._hidden.enable();
+            }
+        };
         this.$init(this, options);
     }
     template(config) {