zmp-vue
Version:
Build full featured iOS & Android apps using ZMP & Vue
216 lines (200 loc) • 7.8 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { resolveComponent as _resolveComponent, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
var _hoisted_1 = {
ref: "el"
};
function render(_ctx, _cache) {
var _component_ListInput = _resolveComponent("ListInput");
var _component_Input = _resolveComponent("Input");
return _openBlock(), _createBlock("div", _hoisted_1, [_ctx.listInput ? (_openBlock(), _createBlock(_component_ListInput, _mergeProps({
key: 0
}, _extends({}, _ctx.$props, _ctx.$attrs), {
type: "text",
readonly: "",
placeholder: _ctx.inputPlaceHolder
}), null, 16, ["placeholder"])) : (_openBlock(), _createBlock(_component_Input, _mergeProps({
key: 1
}, _extends({}, _ctx.$props, _ctx.$attrs), {
type: "text",
readonly: "",
placeholder: _ctx.inputPlaceHolder
}), null, 16, ["placeholder"]))], 512);
}
import { ref, onUnmounted, onMounted, computed } from 'vue';
import Input from './input';
import ListInput from './list-input';
import { zmp, zmpready } from '../shared/zmp';
import ZMPDateTime from '../../common/date-time';
export default {
name: 'zmp-date-picker',
render: render,
components: {
Input: Input,
ListInput: ListInput
},
props: {
actionText: String,
title: String,
inputId: String,
name: String,
locale: String,
dateFormat: String,
dateTimePicker: Boolean,
datePicker: Boolean,
startYear: Number,
endYear: Number,
minStep: Number,
listInput: Boolean,
is24Hours: Boolean,
label: String,
value: Date,
defaultValue: Date,
inputmode: String,
placeholder: String,
autofocus: Boolean,
autosave: String,
disabled: Boolean,
readonly: Boolean,
required: Boolean,
pattern: String,
validate: [Boolean, String],
validateOnBlur: Boolean,
onValidate: Function,
clearButton: Boolean,
noFormStoreData: Boolean,
noStoreData: Boolean,
ignoreStoreData: Boolean,
errorMessage: String,
errorMessageForce: Boolean,
info: String,
wrap: Boolean,
inputStyle: [String, Object]
},
emits: ['action', 'change', 'close', 'open'],
setup: function setup(props, _ref) {
var emit = _ref.emit,
attrs = _ref.attrs;
var el = ref();
var pickerRef = ref();
var dateTimeInstance = ref();
onMounted(function () {
zmpready(function () {
var actionText = props.actionText,
title = props.title,
value = props.value,
defaultValue = props.defaultValue,
locale = props.locale,
dateFormat = props.dateFormat,
dateTimePicker = props.dateTimePicker,
datePicker = props.datePicker,
startYear = props.startYear,
endYear = props.endYear,
minStep = props.minStep,
placeholder = props.placeholder,
is24Hours = props.is24Hours;
var pickerTitle = '';
var actionButtonText = actionText || 'Done';
if (title) {
pickerTitle = title;
} else if (dateTimePicker) {
pickerTitle = 'Date Time Picker';
} else {
pickerTitle = 'Date Picker';
}
dateTimeInstance.value = new ZMPDateTime({
locale: locale,
dateTimePicker: dateTimePicker,
datePicker: datePicker,
dateFormat: dateFormat,
startYear: Number(startYear),
endYear: Number(endYear),
minStep: minStep,
defaultValue: defaultValue,
value: value,
is24Hours: is24Hours
});
var instance = dateTimeInstance.value;
var initDate = defaultValue || value || new Date();
var cols = instance.columns || [];
pickerRef.value = zmp.picker.create(_extends({}, props, {
value: undefined,
inputEl: el.value.querySelector('input'),
rotateEffect: false,
backdrop: true,
formatValue: function formatValue() {
var date = instance.getValue();
return instance.formatDate(date);
},
render: function render() {
var _this = this;
var columns = this.cols.map(function (col) {
return _this.renderColumn(col);
});
var toolbar = this.params.toolbar && this.renderToolbar();
var classes = this.params.cssClass || '';
var renderEl = "<div class=\"sheet-modal picker picker-sheet " + classes + "\">\n <div class=\"zmp-picker-sheet-header\">\n <a class=\"zmp-picker-close-btn link sheet-close popover-close no-ripple\" ></a>\n " + (pickerTitle ? "<div class=\"zmp-picker-sheet-title\">" + pickerTitle + "</div>" : '') + "\n </div>\n <div class=\"sheet-modal-inner picker-columns\">\n " + columns + "\n <div class=\"picker-center-highlight\"></div>\n </div>\n " + toolbar + "\n </div>";
return renderEl;
},
renderToolbar: function renderToolbar() {
return '<div class="toolbar">' + '<div class="toolbar-inner">' + '<div class="zmp-toolbar-center">' + ("<a href= \"#\" class=\"zmp-picker-action-button\">" + actionButtonText + "</a>") + '</div>' + '</div>' + '</div>';
},
cols: cols,
on: {
init: function init(picker) {
instance.setInitializing(true);
instance.setDate(initDate);
if (defaultValue || value) {
var values = instance.getPickerValues();
picker.setValue(values);
}
},
open: function open(picker) {
emit('open', picker);
if (!value && !defaultValue) {
var values = instance.getPickerValues();
picker.setValue(values);
}
instance.setInitializing(false);
picker.emit('change', picker, instance.getPickerValues());
picker.$el.find('.zmp-picker-action-button').on('click', function () {
if (attrs.onAction) {
emit('action', picker);
} else {
picker.close();
}
});
},
change: function change(_ref2) {
var value = _ref2.value;
if (instance.isUpdating || instance.initializing) {
return;
}
instance.setValue(value);
emit('change', value, pickerRef.value, instance.getPickerValues());
},
close: function close(picker) {
emit('close', picker);
}
}
}));
});
});
onUnmounted(function () {
pickerRef.value.destroy();
});
var inputPlaceHolder = computed(function () {
var inputPlaceHolder = props.dateTimePicker ? 'dd/mm/yyyy hh:mm' : 'dd/mm/yyyy';
if (props.dateFormat) {
inputPlaceHolder = props.dateFormat;
}
if (props.placeholder) {
inputPlaceHolder = props.placeholder;
}
return inputPlaceHolder;
});
return {
el: el,
inputPlaceHolder: inputPlaceHolder
};
}
};