framework7-vue
Version:
Build full featured iOS & Android apps using Framework7 & Vue
221 lines • 6.43 kB
JavaScript
import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass } from "vue";
const _hoisted_1 = {
key: 0,
class: "stepper-input-wrap"
};
const _hoisted_2 = ["id", "name", "type", "min", "max", "step", "value", "readonly"];
const _hoisted_3 = {
key: 1,
class: "stepper-value"
};
function render(_ctx, _cache) {
return _openBlock(), _createElementBlock("div", {
ref: "elRef",
class: _normalizeClass(_ctx.classes)
}, [_createElementVNode("div", {
class: "stepper-button-minus",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onMinusClick && _ctx.onMinusClick(...args))
}), _ctx.input && !_ctx.buttonsOnly ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("input", {
id: _ctx.inputId,
name: _ctx.name,
type: _ctx.inputType,
min: _ctx.inputType === 'number' ? _ctx.min : undefined,
max: _ctx.inputType === 'number' ? _ctx.max : undefined,
step: _ctx.inputType === 'number' ? _ctx.step : undefined,
value: _ctx.value,
readonly: _ctx.inputReadonly,
onInput: _cache[1] || (_cache[1] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChange && _ctx.onChange(...args))
}, null, 40, _hoisted_2)])) : _createCommentVNode("", true), !_ctx.input && !_ctx.buttonsOnly ? (_openBlock(), _createElementBlock("div", _hoisted_3, _toDisplayString(_ctx.value), 1)) : _createCommentVNode("", true), _createElementVNode("div", {
class: "stepper-button-plus",
onClick: _cache[3] || (_cache[3] = (...args) => _ctx.onPlusClick && _ctx.onPlusClick(...args))
})], 2);
}
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
import { classNames, noUndefinedProps } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
import { f7ready, f7 } from '../shared/f7.js';
export default {
name: 'f7-stepper',
render,
props: {
init: {
type: Boolean,
default: true
},
value: {
type: Number,
default: 0
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
formatValue: Function,
name: String,
inputId: String,
input: {
type: Boolean,
default: true
},
inputType: {
type: String,
default: 'text'
},
inputReadonly: {
type: Boolean,
default: false
},
autorepeat: {
type: Boolean,
default: false
},
autorepeatDynamic: {
type: Boolean,
default: false
},
wraps: {
type: Boolean,
default: false
},
manualInputMode: {
type: Boolean,
default: false
},
decimalPoint: {
type: Number,
default: 4
},
buttonsEndInputMode: {
type: Boolean,
default: true
},
disabled: Boolean,
buttonsOnly: Boolean,
round: Boolean,
roundMd: Boolean,
roundIos: Boolean,
fill: Boolean,
fillMd: Boolean,
fillIos: Boolean,
large: Boolean,
largeMd: Boolean,
largeIos: Boolean,
small: Boolean,
smallMd: Boolean,
smallIos: Boolean,
raised: Boolean,
raisedMd: Boolean,
raisedIos: Boolean,
...colorProps
},
emits: ['input', 'change', 'stepper:minusclick', 'stepper:plusclick', 'stepper:change', 'update:value'],
setup(props, {
emit
}) {
let f7Stepper = null;
const elRef = ref(null);
const increment = () => {
if (!f7Stepper) return;
f7Stepper.increment();
};
const decrement = () => {
if (!f7Stepper) return;
f7Stepper.decrement();
};
const setValue = newValue => {
if (f7Stepper && f7Stepper.setValue) f7Stepper.setValue(newValue);
};
const getValue = () => {
if (f7Stepper && f7Stepper.getValue) {
return f7Stepper.getValue();
}
return undefined;
};
const onInput = event => {
emit('input', event, f7Stepper);
};
const onChange = event => {
emit('change', event, f7Stepper);
};
const onMinusClick = event => {
emit('stepper:minusclick', event, f7Stepper);
};
const onPlusClick = event => {
emit('stepper:plusclick', event, f7Stepper);
};
watch(() => props.value, newValue => {
if (!f7Stepper) return;
f7Stepper.setValue(newValue);
});
onMounted(() => {
f7ready(() => {
if (!props.init || !elRef.value) return;
f7Stepper = f7.stepper.create(noUndefinedProps({
el: elRef.value,
min: props.min,
max: props.max,
value: props.value,
step: props.step,
formatValue: props.formatValue,
autorepeat: props.autorepeat,
autorepeatDynamic: props.autorepeatDynamic,
wraps: props.wraps,
manualInputMode: props.manualInputMode,
decimalPoint: props.decimalPoint,
buttonsEndInputMode: props.buttonsEndInputMode,
on: {
change(stepper, newValue) {
emit('stepper:change', newValue);
emit('update:value', newValue);
}
}
}));
});
});
onBeforeUnmount(() => {
if (f7Stepper && f7Stepper.destroy) {
f7Stepper.destroy();
}
f7Stepper = null;
});
const classes = computed(() => classNames('stepper', {
disabled: props.disabled,
'stepper-round': props.round,
'stepper-round-ios': props.roundIos,
'stepper-round-md': props.roundMd,
'stepper-fill': props.fill,
'stepper-fill-ios': props.fillIos,
'stepper-fill-md': props.fillMd,
'stepper-large': props.large,
'stepper-large-ios': props.largeIos,
'stepper-large-md': props.largeMd,
'stepper-small': props.small,
'stepper-small-ios': props.smallIos,
'stepper-small-md': props.smallMd,
'stepper-raised': props.raised,
'stepper-raised-ios': props.raisedIos,
'stepper-raised-md': props.raisedMd
}, colorClasses(props)));
return {
elRef,
classes,
increment,
decrement,
setValue,
getValue,
onInput,
onChange,
onMinusClick,
onPlusClick
};
}
};