gnui 1.2.14 → 1.2.16

package/dist/js/gnui.esm.js

@@ -16959,7 +16959,7 @@ class GNUIState {
     // 최초 생성 후 state에 등록 - created
     _addComponent(component) {
         const uid = component._uid;
-        if (uid && !this._componentMap[uid]) {
+        if (uid) {
             this._componentMap[uid] = {
                 component: component,
                 selector: component.$selector,
@@ -33673,7 +33673,7 @@ class Time extends GNCoreInstance {
         this.$init(this, options);
     }
     template(config) {
-        return (createElement$1("div", { className: 'gn-time' + (config.disabled ? ' is-disabled' : '') + (config.readonly ? ' is-readonly' : ''), id: this._uid },
+        return (createElement$1("div", { className: 'gn-time' + (config.disabled ? ' is-disabled' : '') + (config.readonly ? ' is-readonly' : '') + (config.timeFormat === 'hh:mm' ? ' is-hm' : ''), id: this._uid },
             createElement$1("div", { className: "picker-controls picker-times" },
                 createElement$1("span", { className: "gn-icon" },
                     createElement$1("i", { className: "fa fa-clock" })),
@@ -33929,7 +33929,7 @@ class Calendar extends GNCoreInstance {
         this.$init(this, options);
     }
     template(config) {
-        return (createElement$1("div", { className: 'gn-calendar' + (config.type === 'picker' ? ' is-picker' : ''), id: this._uid },
+        return (createElement$1("div", { className: 'gn-calendar' + (config.type === 'picker' ? ' is-picker' : '') + (config.timeFormat === 'hh:mm' ? ' is-hm' : ''), id: this._uid },
             createElement$1("div", { className: "picker-controls" },
                 createElement$1("div", { className: "control-set gn-control is-small has-arrange" },
                     createElement$1("button", { className: "btn-year-decrease" }),
@@ -34011,7 +34011,8 @@ class Calendar extends GNCoreInstance {
             }
         });
         this._time = new Time('time', find('.timePicker', this.$el), {
-            value: this.$options.value ? dateFormat(this.$options.value, 'hh:mm:ss') : '',
+            value: this.$options.value ? dateFormat(this.$options.value, this.$options.timeFormat) : '',
+            timeFormat: this.$options.timeFormat,
             onChange: (time) => {
                 this._hidden.timeChange(time);
             }
@@ -34557,6 +34558,7 @@ class Colorpicker extends GNCoreInstance {
                 }
                 if (!this.$options.palette) {
                     this.$options.palette = this.pickPanel;
+                    attr(this.$el, 'data-gnui', this.$options.palette._uid);
                 }
                 if (!isHexPattern(this.$options.value)) {
                     this.$options.value = DEFAULT_COLOR;
@@ -34579,6 +34581,7 @@ class Colorpicker extends GNCoreInstance {
                 this.$options.color = '';
                 css$1(this.$options.delegates.preview, 'background', NONE_COLOR);
                 val(this.$options.delegates.value, '');
+                trigger(this.$options.delegates.value, 'change');
                 this.$event(this, 'onChange', '');
             },
             typeColor: (e) => {
@@ -34707,6 +34710,7 @@ class Datepicker extends GNCoreInstance {
                             id: this._uid + '_picker',
                             value: defaultDataTime,
                             dateType: this.$options.type,
+                            timeFormat: this.$options.timeFormat,
                             min: this.$options.min || null,
                             max: this.$options.max || null,
                             onSelect: (date) => {
@@ -34717,6 +34721,7 @@ class Datepicker extends GNCoreInstance {
                         });
                     }
                     this.$options.picker = this.pickPanel;
+                    attr(this.$el, 'data-gnui', this.$options.picker._uid);
                     // 해당 컴포넌트 외 클릭 시 picker panel 숨김
                     this.$options._destroy = on(document.body, 'click', (e) => {
                         if (!parents(e.target, '#' + this.$options.picker._uid).length && !parents(e.target, '.gn-dateinput').length && hasClass(this.pickPanel.$el, 'is-active')) {
@@ -34764,6 +34769,7 @@ class Datepicker extends GNCoreInstance {
             removeDate: () => {
                 this.$options.value = '';
                 val(this.$options.delegates.date, '');
+                trigger(this.$options.delegates.date, 'change');
                 this.$event(this, 'onChange', '');
             },
             disable: () => {
@@ -34791,7 +34797,7 @@ class Datepicker extends GNCoreInstance {
             type: 'date',
             value: this.$selector ? this.$selector.value : '',
             dateFormat: 'yyyy-MM-DD',
-            timeFormat: 'hh:mm:ss',
+            timeFormat: 'hh:mm',
             width: '165px',
             writable: true
         };
@@ -38192,10 +38198,10 @@ class Modal extends GNCoreInstance {
         const styles = {};
         const contStyles = {};
         if (config.width) {
-            styles.width = getUnit('width', config.width);
+            styles.width = this.parseModalSize(config.width, window.innerWidth);
         }
         if (config.height) {
-            styles.height = getUnit('height', config.height);
+            styles.height = this.parseModalSize(config.height, window.innerHeight);
         }
         if (config.padding) {
             contStyles.padding = getUnit('padding', config.padding);
@@ -38219,6 +38225,36 @@ class Modal extends GNCoreInstance {
                     config.hasConfirm && (createElement$1("button", { type: "button", className: 'gn-button' + ` is-${config.sizeSets.confirm}`, id: this._uid + '_confirm', "on-click": this._hidden.confirm }, config.textSets.confirm)),
                     config.hasCancel && (createElement$1("button", { type: "button", className: 'gn-button btnCloseModal is-cancel' + ` is-${config.sizeSets.cancel}`, id: this._uid + '_cancel', "on-click": this._hidden.close }, config.textSets.cancel)))))));
     }
+    parseModalSize(value, windowValue) {
+        if (value === 'auto') {
+            return 'auto';
+        }
+        try {
+            if (typeof value === 'number') {
+                return `${value > windowValue ? windowValue - 100 : value}px`;
+            }
+            else {
+                const number = parseFloat(value);
+                const unit = value.replace(number.toString(), '');
+                switch (unit) {
+                    case '%':
+                        return `${number}%`;
+                    case 'px':
+                        return `${number > windowValue ? windowValue - 100 : number}px`;
+                    case 'vw':
+                        return `${number > 100 ? 90 : number}vw`;
+                    case 'vh':
+                        return `${number > 100 ? 90 : number}vh`;
+                    default:
+                        return 'auto';
+                }
+            }
+        }
+        catch (e) {
+            console.error(e.message);
+            return 'auto';
+        }
+    }
     $render(config) {
         if (config.contents) {
             if (config.contents.sel !== undefined) {

package/dist/js/gnui.js

@@ -16965,7 +16965,7 @@
 	    // 최초 생성 후 state에 등록 - created
 	    _addComponent(component) {
 	        const uid = component._uid;
-	        if (uid && !this._componentMap[uid]) {
+	        if (uid) {
 	            this._componentMap[uid] = {
 	                component: component,
 	                selector: component.$selector,
@@ -33679,7 +33679,7 @@
 	        this.$init(this, options);
 	    }
 	    template(config) {
-	        return (createElement$1("div", { className: 'gn-time' + (config.disabled ? ' is-disabled' : '') + (config.readonly ? ' is-readonly' : ''), id: this._uid },
+	        return (createElement$1("div", { className: 'gn-time' + (config.disabled ? ' is-disabled' : '') + (config.readonly ? ' is-readonly' : '') + (config.timeFormat === 'hh:mm' ? ' is-hm' : ''), id: this._uid },
 	            createElement$1("div", { className: "picker-controls picker-times" },
 	                createElement$1("span", { className: "gn-icon" },
 	                    createElement$1("i", { className: "fa fa-clock" })),
@@ -33935,7 +33935,7 @@
 	        this.$init(this, options);
 	    }
 	    template(config) {
-	        return (createElement$1("div", { className: 'gn-calendar' + (config.type === 'picker' ? ' is-picker' : ''), id: this._uid },
+	        return (createElement$1("div", { className: 'gn-calendar' + (config.type === 'picker' ? ' is-picker' : '') + (config.timeFormat === 'hh:mm' ? ' is-hm' : ''), id: this._uid },
 	            createElement$1("div", { className: "picker-controls" },
 	                createElement$1("div", { className: "control-set gn-control is-small has-arrange" },
 	                    createElement$1("button", { className: "btn-year-decrease" }),
@@ -34017,7 +34017,8 @@
 	            }
 	        });
 	        this._time = new Time('time', find('.timePicker', this.$el), {
-	            value: this.$options.value ? dateFormat(this.$options.value, 'hh:mm:ss') : '',
+	            value: this.$options.value ? dateFormat(this.$options.value, this.$options.timeFormat) : '',
+	            timeFormat: this.$options.timeFormat,
 	            onChange: (time) => {
 	                this._hidden.timeChange(time);
 	            }
@@ -34563,6 +34564,7 @@
 	                }
 	                if (!this.$options.palette) {
 	                    this.$options.palette = this.pickPanel;
+	                    attr(this.$el, 'data-gnui', this.$options.palette._uid);
 	                }
 	                if (!isHexPattern(this.$options.value)) {
 	                    this.$options.value = DEFAULT_COLOR;
@@ -34585,6 +34587,7 @@
 	                this.$options.color = '';
 	                css$1(this.$options.delegates.preview, 'background', NONE_COLOR);
 	                val(this.$options.delegates.value, '');
+	                trigger(this.$options.delegates.value, 'change');
 	                this.$event(this, 'onChange', '');
 	            },
 	            typeColor: (e) => {
@@ -34713,6 +34716,7 @@
 	                            id: this._uid + '_picker',
 	                            value: defaultDataTime,
 	                            dateType: this.$options.type,
+	                            timeFormat: this.$options.timeFormat,
 	                            min: this.$options.min || null,
 	                            max: this.$options.max || null,
 	                            onSelect: (date) => {
@@ -34723,6 +34727,7 @@
 	                        });
 	                    }
 	                    this.$options.picker = this.pickPanel;
+	                    attr(this.$el, 'data-gnui', this.$options.picker._uid);
 	                    // 해당 컴포넌트 외 클릭 시 picker panel 숨김
 	                    this.$options._destroy = on(document.body, 'click', (e) => {
 	                        if (!parents(e.target, '#' + this.$options.picker._uid).length && !parents(e.target, '.gn-dateinput').length && hasClass(this.pickPanel.$el, 'is-active')) {
@@ -34770,6 +34775,7 @@
 	            removeDate: () => {
 	                this.$options.value = '';
 	                val(this.$options.delegates.date, '');
+	                trigger(this.$options.delegates.date, 'change');
 	                this.$event(this, 'onChange', '');
 	            },
 	            disable: () => {
@@ -34797,7 +34803,7 @@
 	            type: 'date',
 	            value: this.$selector ? this.$selector.value : '',
 	            dateFormat: 'yyyy-MM-DD',
-	            timeFormat: 'hh:mm:ss',
+	            timeFormat: 'hh:mm',
 	            width: '165px',
 	            writable: true
 	        };
@@ -38198,10 +38204,10 @@
 	        const styles = {};
 	        const contStyles = {};
 	        if (config.width) {
-	            styles.width = getUnit('width', config.width);
+	            styles.width = this.parseModalSize(config.width, window.innerWidth);
 	        }
 	        if (config.height) {
-	            styles.height = getUnit('height', config.height);
+	            styles.height = this.parseModalSize(config.height, window.innerHeight);
 	        }
 	        if (config.padding) {
 	            contStyles.padding = getUnit('padding', config.padding);
@@ -38225,6 +38231,36 @@
 	                    config.hasConfirm && (createElement$1("button", { type: "button", className: 'gn-button' + ` is-${config.sizeSets.confirm}`, id: this._uid + '_confirm', "on-click": this._hidden.confirm }, config.textSets.confirm)),
 	                    config.hasCancel && (createElement$1("button", { type: "button", className: 'gn-button btnCloseModal is-cancel' + ` is-${config.sizeSets.cancel}`, id: this._uid + '_cancel', "on-click": this._hidden.close }, config.textSets.cancel)))))));
 	    }
+	    parseModalSize(value, windowValue) {
+	        if (value === 'auto') {
+	            return 'auto';
+	        }
+	        try {
+	            if (typeof value === 'number') {
+	                return `${value > windowValue ? windowValue - 100 : value}px`;
+	            }
+	            else {
+	                const number = parseFloat(value);
+	                const unit = value.replace(number.toString(), '');
+	                switch (unit) {
+	                    case '%':
+	                        return `${number}%`;
+	                    case 'px':
+	                        return `${number > windowValue ? windowValue - 100 : number}px`;
+	                    case 'vw':
+	                        return `${number > 100 ? 90 : number}vw`;
+	                    case 'vh':
+	                        return `${number > 100 ? 90 : number}vh`;
+	                    default:
+	                        return 'auto';
+	                }
+	            }
+	        }
+	        catch (e) {
+	            console.error(e.message);
+	            return 'auto';
+	        }
+	    }
 	    $render(config) {
 	        if (config.contents) {
 	            if (config.contents.sel !== undefined) {