@icreate/ics-mui
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
414 lines (413 loc) • 15.7 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, toRef, ref, computed, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, unref, withCtx, normalizeClass, createBlock, renderList, toDisplayString } from "vue";
import "../input/Input.js";
import { u as useFormDisabled } from "../common-DXugw-he.js";
import { I as IcsPopup } from "../index-kY3YH8kV.js";
import "../form/Form.js";
import "../formitem/FormItem.js";
import NutNumberKeyboard from "../numberkeyboard/NumberKeyboard.js";
import { _ as _sfc_main$1 } from "../input.vue_vue_type_script_setup_true_lang-CUVjcKoZ.js";
import { _ as _sfc_main$2 } from "../form.vue_vue_type_script_setup_true_lang-_R4v_pqp.js";
import { _ as _sfc_main$3 } from "../form-item.vue_vue_type_script_setup_true_lang-CZ2WA8l9.js";
import { w as withInstall } from "../with-install-DWwOiZS3.js";
const _hoisted_1 = { class: "ics-input-picker" };
const _hoisted_2 = { class: "blood-pressure-container" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("span", { class: "separator" }, "/", -1);
const _hoisted_4 = { class: "not-measured" };
const _hoisted_5 = ["onTouchstart"];
const MAX_LENGTH = 3;
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
name: "IcsBloodPressure"
}), {
__name: "index",
props: {
modelValue: {
type: Object,
default: () => ({
systolicPressure: "",
diastolicPressure: ""
})
},
systolic: {
type: Object,
default: () => {
return {
maxValue: 180,
minValue: 60,
highValue: 140,
lowValue: 90
};
}
},
diastolic: {
type: Object,
default: () => {
return {
maxValue: 140,
minValue: 30,
highValue: 90,
lowValue: 60
};
}
},
placeholder: {
type: Object,
default: () => {
return { diastolic: "舒张压", systolic: "收缩压" };
}
},
rangeColor: {
type: Object,
default: () => {
return {
lowColor: "#f6627d",
highColor: "#f6627d",
normalColor: "#444444"
};
}
},
measuredOptions: {
type: Array,
default: [
{
value: -1,
label: "外出"
},
{
value: -2,
label: "拒测"
},
{
value: -3,
label: "未测"
}
]
},
disabled: {
type: Boolean,
default: false
}
},
emits: ["update:modelValue", "get-blood-pressure"],
setup(__props, { expose: __expose, emit: __emit }) {
var _a, _b;
const props = __props;
const disabled = useFormDisabled(toRef(props, "disabled"));
const emits = __emit;
const show = ref(false);
const customKey = ref(["."]);
const clickKeyIndex = ref(void 0);
const systolicPressure = ref(((_a = props.modelValue) == null ? void 0 : _a.systolicPressure) || "");
const diastolicPressure = ref(((_b = props.modelValue) == null ? void 0 : _b.diastolicPressure) || "");
const diastolicRef = ref();
const notMeasuredList = ref(props.measuredOptions);
const measured = ref("");
const PRESSURE = [-1, -2, -3];
const isShowDataInput = computed(() => {
var _a2, _b2;
if (PRESSURE.includes((_a2 = props.modelValue) == null ? void 0 : _a2.systolicPressure) && PRESSURE.includes((_b2 = props.modelValue) == null ? void 0 : _b2.diastolicPressure)) {
return false;
}
return true;
});
const isShowInput = computed(() => {
if (PRESSURE.includes(systolicPressure.value) && PRESSURE.includes(diastolicPressure.value)) {
return false;
}
return true;
});
const systolicWarning = ref(false);
const diastolicWarning = ref(false);
const idNext = ref(false);
const showPlaceholder = computed(() => {
var _a2, _b2;
return ((_a2 = props.placeholder) == null ? void 0 : _a2.systolic) + " / " + ((_b2 = props.placeholder) == null ? void 0 : _b2.diastolic);
});
const getSuffixText = (show2) => {
return show2 ? "mmHg" : "";
};
const getRangecolor = (index) => {
const style = { color: "" };
let { highValue, lowValue } = index === 1 ? props.systolic : props.diastolic;
const val = index === 1 ? systolicPressure.value : diastolicPressure.value;
const { lowColor, highColor, normalColor } = props.rangeColor;
const value = Number(val);
if (!value && value !== 0) {
style.color = normalColor;
} else {
if (value <= Number(lowValue)) {
style.color = lowColor;
} else if (value >= Number(highValue)) {
style.color = highColor;
} else {
style.color = normalColor;
}
}
return style.color;
};
const showData = computed({
get() {
var _a2, _b2, _c, _d;
if (!isShowDataInput.value) {
return (_a2 = notMeasuredList.value.filter(
(item) => {
var _a3, _b3;
return item.value === ((_a3 = props.modelValue) == null ? void 0 : _a3.systolicPressure) || item.value === ((_b3 = props.modelValue) == null ? void 0 : _b3.diastolicPressure);
}
)[0]) == null ? void 0 : _a2.label;
} else {
return ((_b2 = props.modelValue) == null ? void 0 : _b2.systolicPressure) ? `${(_c = props.modelValue) == null ? void 0 : _c.systolicPressure} / ${(_d = props.modelValue) == null ? void 0 : _d.diastolicPressure}` : "";
}
},
set(value) {
console.log(value);
}
});
function onTouchstart(item, event) {
event.stopPropagation();
clickKeyIndex.value = item.value;
measured.value = item.label;
systolicPressure.value = item.value;
diastolicPressure.value = item.value;
}
function onTouchMove(event) {
event.stopPropagation();
}
function onTouchEnd(event) {
event.preventDefault();
clickKeyIndex.value = void 0;
}
const handlePressureInput = (pressure, isSystolic, val) => {
if (pressure.value) {
pressure.value = pressure.value.replace(/^0+/, "");
} else {
pressure.value = "";
}
if (val === ".") {
return;
}
if (String(pressure.value).length < MAX_LENGTH) {
pressure.value += val;
if (String(pressure.value).length === MAX_LENGTH) {
idNext.value = isSystolic;
}
}
};
const onInput = (val) => {
if (measured.value) {
measured.value = "";
systolicPressure.value = "";
diastolicPressure.value = "";
}
if (!idNext.value) {
handlePressureInput(systolicPressure, true, val);
} else {
handlePressureInput(diastolicPressure, false, val);
}
};
const calcSystolicData = () => {
if (systolicPressure.value < 0) {
return;
}
if (systolicPressure.value) {
if (systolicPressure.value < Number(props.systolic.minValue))
return;
if (systolicPressure.value > Number(props.systolic.maxValue))
return;
}
};
const calcDiastolicData = () => {
if (diastolicPressure.value < 0) {
return;
}
if (diastolicPressure.value) {
if (diastolicPressure.value < Number(props.diastolic.minValue))
return;
if (diastolicPressure.value > Number(props.diastolic.maxValue))
return;
}
};
const validateRange = (value, range) => {
const minValue = Number(range.minValue);
const maxValue = Number(range.maxValue);
return value >= minValue && value <= maxValue;
};
const onConfirm = () => {
if (!systolicPressure.value || !diastolicPressure.value) {
return;
}
if (isShowInput.value) {
if (!validateRange(systolicPressure.value, props.systolic)) {
systolicWarning.value = true;
return;
}
if (!validateRange(diastolicPressure.value, props.diastolic)) {
diastolicWarning.value = true;
return;
}
calcSystolicData();
calcDiastolicData();
}
showData.value = measured.value ? measured.value : `${systolicPressure.value} / ${diastolicPressure.value}`;
const value = {
systolicPressure: Number(systolicPressure.value),
diastolicPressure: Number(diastolicPressure.value)
};
emits("update:modelValue", value);
emits("get-blood-pressure", value);
show.value = false;
};
const onDelete = () => {
if (!diastolicPressure.value) {
idNext.value = false;
systolicPressure.value = systolicPressure.value.slice(0, -1);
} else {
idNext.value = true;
diastolicPressure.value = diastolicPressure.value.slice(0, -1);
}
};
const onPicker = () => {
var _a2, _b2;
if (disabled.value)
return;
show.value = true;
idNext.value = false;
measured.value = showData.value;
systolicPressure.value = (_a2 = props.modelValue) == null ? void 0 : _a2.systolicPressure;
diastolicPressure.value = (_b2 = props.modelValue) == null ? void 0 : _b2.diastolicPressure;
};
const setModelValue = (value) => {
emits("update:modelValue", value);
};
__expose({
setModelValue
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createElementVNode("div", _hoisted_1, [
createVNode(unref(_sfc_main$1), {
modelValue: showData.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showData.value = $event),
border: false,
placeholder: showPlaceholder.value,
readonly: "",
disabled: unref(disabled),
suffix: getSuffixText(isShowDataInput.value),
onClick: onPicker
}, null, 8, ["modelValue", "placeholder", "disabled", "suffix"])
]),
createVNode(IcsPopup, {
visible: show.value,
"onUpdate:visible": _cache[8] || (_cache[8] = ($event) => show.value = $event),
"safe-area-inset-bottom": true,
position: "bottom",
"pop-class": "number-keyboard-popup",
"overlay-class": "number-keyboard-overlay"
}, {
default: withCtx(() => [
createVNode(unref(_sfc_main$2), { class: "temp-input" }, {
default: withCtx(() => [
createVNode(unref(_sfc_main$3), {
label: "血压",
suffix: getSuffixText(isShowInput.value)
}, {
default: withCtx(() => {
var _a2, _b2;
return [
createElementVNode("div", _hoisted_2, [
isShowInput.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createVNode(unref(_sfc_main$1), {
modelValue: systolicPressure.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => systolicPressure.value = $event),
placeholder: (_a2 = __props.placeholder) == null ? void 0 : _a2.systolic,
readonly: "",
focus: true,
"input-align": "right",
"input-color": getRangecolor(1),
class: normalizeClass(["pressure-input", !systolicPressure.value && !idNext.value ? "input-active" : ""])
}, null, 8, ["modelValue", "placeholder", "input-color", "class"]),
_hoisted_3,
createVNode(unref(_sfc_main$1), {
ref_key: "diastolicRef",
ref: diastolicRef,
modelValue: diastolicPressure.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => diastolicPressure.value = $event),
placeholder: (_b2 = __props.placeholder) == null ? void 0 : _b2.diastolic,
readonly: "",
"input-align": "left",
"input-color": getRangecolor(2),
class: normalizeClass(["pressure-input", !diastolicPressure.value && idNext.value ? "input-active" : ""])
}, null, 8, ["modelValue", "placeholder", "input-color", "class"])
], 64)) : (openBlock(), createBlock(unref(_sfc_main$1), {
key: 1,
modelValue: measured.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => measured.value = $event),
readonly: ""
}, null, 8, ["modelValue"]))
])
];
}),
_: 1
}, 8, ["suffix"])
]),
_: 1
}),
createElementVNode("div", _hoisted_4, [
(openBlock(true), createElementBlock(Fragment, null, renderList(notMeasuredList.value, (item, index) => {
return openBlock(), createElementBlock("div", {
key: item.value,
class: normalizeClass([
"nut-key",
{ "nut-key--active": item.value == clickKeyIndex.value },
{
"nut-key__wrapper--wider": index == 2 && notMeasuredList.value.length === 3
}
]),
onTouchstart: ($event) => onTouchstart(item, $event),
onTouchmove: _cache[4] || (_cache[4] = ($event) => onTouchMove($event)),
onTouchend: _cache[5] || (_cache[5] = ($event) => onTouchEnd($event))
}, toDisplayString(item.label), 43, _hoisted_5);
}), 128))
]),
createVNode(NutNumberKeyboard, {
visible: true,
type: "rightColumn",
"custom-key": customKey.value,
"confirm-text": "确定",
"pop-class": "number-keyboard-style",
onInput,
onBlur: _cache[6] || (_cache[6] = ($event) => show.value = false),
onClose: _cache[7] || (_cache[7] = ($event) => show.value = false),
onDelete,
onConfirm
}, null, 8, ["custom-key"])
]),
_: 1
}, 8, ["visible"])
], 64);
};
}
}));
withInstall(_sfc_main);
export {
_sfc_main as BloodPressure,
_sfc_main as default
};