gnui 1.2.14 → 1.2.15

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.2.14",
+  "version": "1.2.15",
   "type": "module",
   "main": "dist/js/gnui.js",
   "types": "@types/gnui.d.ts",

package/styleguide/assets/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) {