@wfrog/vc
Version:
`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。
448 lines (430 loc) • 20.1 kB
JavaScript
import './index.css'
// vue-script:D:\project\_my\vc\src\components\currency\index.vue?type=script
import { defineComponent as _defineComponent4 } from "vue";
import { unref as _unref4, openBlock as _openBlock4, createBlock as _createBlock3, createCommentVNode as _createCommentVNode2, renderList as _renderList, Fragment as _Fragment, createElementBlock as _createElementBlock2, normalizeClass as _normalizeClass3, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx3, normalizeStyle as _normalizeStyle, createSlots as _createSlots3, isRef as _isRef2, mergeProps as _mergeProps2, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
import { computed as computed4, onBeforeMount as onBeforeMount2, ref as ref2 } from "vue";
import { ElOption, ElSelect } from "element-plus";
// vue-script:D:\project\_my\vc\src\components\thousand-input\index.vue?type=script
import { defineComponent as _defineComponent2 } from "vue";
import { unref as _unref2, renderSlot as _renderSlot2, isRef as _isRef, mergeProps as _mergeProps, withCtx as _withCtx2, createSlots as _createSlots2, openBlock as _openBlock2, createBlock as _createBlock2, withDirectives as _withDirectives, createCommentVNode as _createCommentVNode } from "vue";
import { computed as computed2, nextTick, ref, watch } from "vue";
import { isEqual } from "lodash-es";
// vue-script:D:\project\_my\vc\src\components\input\index.vue?type=script
import { useCssVars as _useCssVars, defineComponent as _defineComponent } from "vue";
import { unref as _unref, renderSlot as _renderSlot, normalizeClass as _normalizeClass, withCtx as _withCtx, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from "vue";
import { computed, useCssModule } from "vue";
import { ElInput } from "element-plus";
var input_default = /* @__PURE__ */ _defineComponent({
__name: "index",
props: {
block: { type: Boolean, required: false, default: false },
width: { type: String, required: false }
},
setup(__props) {
const props = __props;
_useCssVars((_ctx) => ({
"1b3ff755-myWidth": _unref(myWidth)
}));
const $style = useCssModule();
const className = computed(() => ({
[$style.input]: true,
[$style.block]: props.block
}));
const myWidth = computed(() => {
return props.width || (props.block ? "100%" : "214px");
});
return (_ctx, _cache) => {
return _openBlock(), _createBlock(_unref(ElInput), {
class: _normalizeClass(_unref(className))
}, _createSlots({ _: 2 }, [
_ctx.$slots.prefix ? {
name: "prefix",
fn: _withCtx(() => [
_renderSlot(_ctx.$slots, "prefix")
]),
key: "0"
} : void 0,
_ctx.$slots.suffix ? {
name: "suffix",
fn: _withCtx(() => [
_renderSlot(_ctx.$slots, "suffix")
]),
key: "1"
} : void 0,
_ctx.$slots.prepend ? {
name: "prepend",
fn: _withCtx(() => [
_renderSlot(_ctx.$slots, "prepend")
]),
key: "2"
} : void 0,
_ctx.$slots.append ? {
name: "append",
fn: _withCtx(() => [
_renderSlot(_ctx.$slots, "append")
]),
key: "3"
} : void 0
]), 1032, ["class"]);
};
}
});
// vue-style:D:\project\_my\vc\src\components\input\index.vue?type=style&index=0&isModule=true&isNameImport=true
var input_default2 = { input: "_input_1hm4f_1", block: "_block_1hm4f_5" };
// src/components/input/index.vue
var cssModules = {};
input_default.__cssModules = cssModules = {};
cssModules["$style"] = input_default2;
var input_default3 = input_default;
// src/directives/thousand/index.ts
import { loader } from "@wfrog/utils";
var thousand = {
mounted: async (el, binding) => {
const elInput = el.getElementsByTagName("input")[binding.value?.elInputIndex || 0] || el.getElementsByTagName("input")[0];
const disabled = elInput.disabled;
elInput.disabled = true;
el.classList.add("is-disabled");
const Cleave = await loader.loadCdnSingle("cleave");
const option = { decimalScale: 2, integerScale: 0, prefix: "", ...binding.value };
elInput.cleave = new Cleave(elInput, {
numeral: true,
numeralThousandsGroupStyle: "thousand",
numeralDecimalScale: option.decimalScale,
numeralIntegerScale: option.integerScale,
prefix: option.prefix
});
elInput.style.textAlign = "right";
elInput.style.fontFamily = "Pathway Gothic One";
elInput.value = elInput.cleave?.properties?.result || "";
el.classList.remove("is-disabled");
elInput.disabled = disabled;
},
updated: (el, binding) => {
setTimeout(() => {
const event = new Event("input", { bubbles: true });
const elInput = el.getElementsByTagName("input")[binding.value?.elInputIndex || 0] || el.getElementsByTagName("input")[0];
elInput.dispatchEvent(event);
if (elInput.cleave) {
elInput.value = elInput.cleave?.properties?.result || "";
}
}, 0);
}
};
var thousand_default = thousand;
// vue-script:D:\project\_my\vc\src\components\thousand-input\index.vue?type=script
var thousand_input_default = /* @__PURE__ */ _defineComponent2({
__name: "index",
props: {
modelValue: { type: String, default: "" },
formatValue: { type: String, default: "" },
option: { type: Object, default: () => ({ decimalScale: 2, integerScale: 12 }) },
padDecimal: { type: Boolean, default: true }
},
emits: ["update:modelValue", "update:formatValue", "change"],
setup(__props, { emit }) {
const props = __props;
const fixValue = (val) => {
if (val === "" || val === void 0) {
return "";
}
let myVal = val.replace(/[^\d\.]/g, "").replace(/^0(\d{1,}\.?)+?/, "$1").replace(/^\./, "").replace(/\.{1,}/g, ".");
const arrayVal = myVal.split(".");
if (arrayVal.length > 1) {
const [integer, decimal] = arrayVal;
myVal = `${integer}.${decimal}`;
}
return myVal;
};
const padValue = (val) => {
if (props.padDecimal && props.option.decimalScale > 0 && val !== props.option.prefix) {
const [integer, decimal = ""] = val.split(".");
return `${integer}.${decimal.padEnd(props.option.decimalScale, "0")}`;
}
return val;
};
const formatValue = () => {
const { modelValue } = props;
const prefix = props.option.prefix || "";
if (modelValue === "") {
emit("update:formatValue", prefix);
return prefix;
}
const dot = modelValue.toString().charAt(modelValue.length - 1) === "." ? "." : "";
const myVal = prefix + (+fixValue(props.modelValue)).toLocaleString("en-US") + dot;
const formatVal = padValue(myVal);
emit("update:formatValue", formatVal);
return myVal;
};
const elInput = ref();
const myValue = computed2({
get: () => formatValue(),
set: (val) => {
emit("update:modelValue", fixValue(val));
}
});
const handleChange = (val) => {
const myVal = fixValue(val).replace(/\.$/, "");
myValue.value = myVal;
emit("change", [myVal, padValue(val).replace(/\.$/, "")]);
};
const visible = ref(true);
const observed = computed2(() => ({ ...props.option, padDecimal: props.padDecimal }));
watch(observed, (val1, val2) => {
if (isEqual(val1, val2)) {
return;
}
visible.value = false;
nextTick(() => {
visible.value = true;
setTimeout(() => {
myValue.value = elInput.value.input?.value;
nextTick(() => {
handleChange(formatValue());
});
}, 100);
});
});
return (_ctx, _cache) => {
return visible.value ? _withDirectives((_openBlock2(), _createBlock2(input_default3, _mergeProps({
key: 0,
ref_key: "elInput",
ref: elInput,
modelValue: _unref2(myValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _isRef(myValue) ? myValue.value = $event : null)
}, _ctx.$attrs, {
class: _ctx.$style.main,
onChange: handleChange
}), _createSlots2({ _: 2 }, [
_ctx.$slots.prepend ? {
name: "prepend",
fn: _withCtx2(() => [
_renderSlot2(_ctx.$slots, "prepend")
]),
key: "0"
} : void 0,
_ctx.$slots.append ? {
name: "append",
fn: _withCtx2(() => [
_renderSlot2(_ctx.$slots, "append")
]),
key: "1"
} : void 0
]), 1040, ["modelValue", "class"])), [
[_unref2(thousand_default), __props.option]
]) : _createCommentVNode("v-if", true);
};
}
});
// vue-style:D:\project\_my\vc\src\components\thousand-input\index.vue?type=style&index=0&isModule=true&isNameImport=true
var thousand_input_default2 = { main: "_main_m3b07_1" };
// src/components/thousand-input/index.vue
var cssModules2 = {};
thousand_input_default.__cssModules = cssModules2 = {};
cssModules2["$style"] = thousand_input_default2;
var thousand_input_default3 = thousand_input_default;
// vue-script:D:\project\_my\vc\src\components\flag\index.vue?type=script
import { defineComponent as _defineComponent3 } from "vue";
import { unref as _unref3, normalizeClass as _normalizeClass2, openBlock as _openBlock3, createElementBlock as _createElementBlock } from "vue";
import { computed as computed3, onBeforeMount } from "vue";
import { loader as loader2 } from "@wfrog/utils";
// src/components/flag/flags.ts
var codeMapping = { AFG: "AF", ALB: "AL", DZA: "DZ", ASM: "AS", AND: "AD", AGO: "AO", AIA: "AI", ATA: "AQ", ATG: "AG", ARG: "AR", ARM: "AM", ABW: "AW", AUS: "AU", AUT: "AT", AZE: "AZ", BHS: "BS", BHR: "BH", BGD: "BD", BRB: "BB", BLR: "BY", BEL: "BE", BLZ: "BZ", BEN: "BJ", BMU: "BM", BTN: "BT", BOL: "BO", BES: "BQ", BIH: "BA", BWA: "BW", BVT: "BV", BRA: "BR", IOT: "IO", BRN: "BN", BGR: "BG", BFA: "BF", BDI: "BI", CPV: "CV", KHM: "KH", CMR: "CM", CAN: "CA", CYM: "KY", CAF: "CF", TCD: "TD", CHL: "CL", CHN: "CN", CXR: "CX", CCK: "CC", COL: "CO", COM: "KM", COD: "CD", COG: "CG", COK: "CK", CRI: "CR", HRV: "HR", CUB: "CU", CUW: "CW", CYP: "CY", CZE: "CZ", CIV: "CI", DNK: "DK", DJI: "DJ", DMA: "DM", DOM: "DO", ECU: "EC", EGY: "EG", SLV: "SV", GNQ: "GQ", ERI: "ER", EST: "EE", SWZ: "SZ", ETH: "ET", FLK: "FK", FRO: "FO", FJI: "FJ", FIN: "FI", FRA: "FR", GUF: "GF", PYF: "PF", ATF: "TF", GAB: "GA", GMB: "GM", GEO: "GE", DEU: "DE", GHA: "GH", GIB: "GI", GRC: "GR", GRL: "GL", GRD: "GD", GLP: "GP", GUM: "GU", GTM: "GT", GGY: "GG", GIN: "GN", GNB: "GW", GUY: "GY", HTI: "HT", HMD: "HM", VAT: "VA", HND: "HN", HKG: "HK", HUN: "HU", ISL: "IS", IND: "IN", IDN: "ID", IRN: "IR", IRQ: "IQ", IRL: "IE", IMN: "IM", ISR: "IL", ITA: "IT", JAM: "JM", JPN: "JP", JEY: "JE", JOR: "JO", KAZ: "KZ", KEN: "KE", KIR: "KI", PRK: "KP", KOR: "KR", KWT: "KW", KGZ: "KG", LAO: "LA", LVA: "LV", LBN: "LB", LSO: "LS", LBR: "LR", LBY: "LY", LIE: "LI", LTU: "LT", LUX: "LU", MAC: "MO", MDG: "MG", MWI: "MW", MYS: "MY", MDV: "MV", MLI: "ML", MLT: "MT", MHL: "MH", MTQ: "MQ", MRT: "MR", MUS: "MU", MYT: "YT", MEX: "MX", FSM: "FM", MDA: "MD", MCO: "MC", MNG: "MN", MNE: "ME", MSR: "MS", MAR: "MA", MOZ: "MZ", MMR: "MM", NAM: "NA", NRU: "NR", NPL: "NP", NLD: "NL", NCL: "NC", NZL: "NZ", NIC: "NI", NER: "NE", NGA: "NG", NIU: "NU", NFK: "NF", MKD: "MK", MNP: "MP", NOR: "NO", OMN: "OM", PAK: "PK", PLW: "PW", PSE: "PS", PAN: "PA", PNG: "PG", PRY: "PY", PER: "PE", PHL: "PH", PCN: "PN", POL: "PL", PRT: "PT", PRI: "PR", QAT: "QA", ROU: "RO", RUS: "RU", RWA: "RW", REU: "RE", BLM: "BL", SHN: "SH", KNA: "KN", LCA: "LC", MAF: "MF", SPM: "PM", VCT: "VC", WSM: "WS", SMR: "SM", STP: "ST", SAU: "SA", SEN: "SN", SRB: "RS", SYC: "SC", SLE: "SL", SGP: "SG", SXM: "SX", SVK: "SK", SVN: "SI", SLB: "SB", SOM: "SO", ZAF: "ZA", SGS: "GS", SSD: "SS", ESP: "ES", LKA: "LK", SDN: "SD", SUR: "SR", SJM: "SJ", SWE: "SE", CHE: "CH", SYR: "SY", TJK: "TJ", TZA: "TZ", THA: "TH", TLS: "TL", TGO: "TG", TKL: "TK", TON: "TO", TTO: "TT", TUN: "TN", TKM: "TM", TCA: "TC", TUV: "TV", TUR: "TR", UGA: "UG", UKR: "UA", ARE: "AE", GBR: "GB", UMI: "UM", USA: "US", URY: "UY", UZB: "UZ", VUT: "VU", VEN: "VE", VNM: "VN", VGB: "VG", VIR: "VI", WLF: "WF", ESH: "EH", YEM: "YE", ZMB: "ZM", ZWE: "ZW", ALA: "AX" };
// vue-script:D:\project\_my\vc\src\components\flag\index.vue?type=script
var flag_default = /* @__PURE__ */ _defineComponent3({
__name: "index",
props: {
code: { type: String, required: true },
squared: { type: Boolean, default: false }
},
setup(__props) {
const props = __props;
const className = computed3(() => {
let myCode = props.code.toLocaleUpperCase();
if (myCode.length === 3) {
myCode = codeMapping[myCode];
}
return {
fi: true,
fis: props.squared,
[`fi-${myCode.toLocaleLowerCase()}`]: true
};
});
onBeforeMount(async () => {
await loader2.loadCdnSingle("flagIcons");
});
return (_ctx, _cache) => {
return _openBlock3(), _createElementBlock("span", {
class: _normalizeClass2(_unref3(className))
}, null, 2);
};
}
});
// vue-style:D:\project\_my\vc\src\components\flag\index.vue?type=style&index=0&isModule=true&isNameImport=true
var flag_default2 = { main: "_main_cnnq4_1" };
// src/components/flag/index.vue
var cssModules3 = {};
flag_default.__cssModules = cssModules3 = {};
cssModules3["$style"] = flag_default2;
var flag_default3 = flag_default;
// src/components/currency/currency.ts
var data = [
{
code: "CNY",
flag: "CHN",
option: { prefix: "\xA5", decimalScale: 2, integerScale: 20 }
},
{
code: "USD",
flag: "USA",
option: { prefix: "$", decimalScale: 2, integerScale: 20 }
},
{
code: "JPY",
flag: "JPN",
option: { prefix: "\xA5", decimalScale: 0, integerScale: 20 }
},
{
code: "EUR",
flag: "EU",
option: { prefix: "\u20AC", decimalScale: 2, integerScale: 20 }
},
{
code: "TWD",
flag: "CHN",
option: { prefix: "NT$", decimalScale: 0, integerScale: 20 }
},
{
code: "KRW",
flag: "KOR",
option: { prefix: "\u20A9", decimalScale: 0, integerScale: 20 }
}
];
var currency_default = data;
// vue-script:D:\project\_my\vc\src\components\currency\index.vue?type=script
var _hoisted_1 = { key: 0 };
var _hoisted_2 = { key: 1 };
var currency_default2 = /* @__PURE__ */ _defineComponent4({
__name: "index",
props: {
modelValue: { type: String, required: true },
code: { type: [Array, String], required: true },
flag: { type: Boolean, default: false },
prefix: { type: Boolean, default: true },
prepend: { type: Boolean, default: true },
append: { type: Boolean, default: false }
},
emits: ["update:modelValue", "change"],
setup(__props, { emit: emits }) {
const props = __props;
const myValue = computed4({
get: () => props.modelValue,
set: (val) => emits("update:modelValue", val)
});
const selectStyle = computed4(() => ({ width: props.flag ? "7.5em" : "6em" }));
const formatValue = ref2("");
const myCode = ref2();
const myCurrencyInfo = computed4(() => currency_default.find((item) => item.code === myCode.value));
const thousandOption = computed4(() => ({
...myCurrencyInfo.value?.option,
prefix: props.prefix ? myCurrencyInfo.value?.option.prefix : "",
elInputIndex: Array.isArray(props.code) ? 1 : 0
}));
const currencyInfo = computed4(() => {
if (Array.isArray(props.code)) {
return currency_default.filter((item) => props.code.includes(item.code));
}
return currency_default.find((item) => item.code === props.code);
});
const handleChange = (val) => {
emits("change", [...val, myCode.value]);
};
const handleCodeChange = (val) => {
handleChange([myValue.value, formatValue.value]);
};
onBeforeMount2(() => {
if (Array.isArray(currencyInfo.value) && currencyInfo.value.length > 0) {
myCode.value = currencyInfo.value[0].code;
} else if (!Array.isArray(currencyInfo.value)) {
myCode.value = currencyInfo.value?.code;
}
});
return (_ctx, _cache) => {
return _openBlock4(), _createBlock3(thousand_input_default3, _mergeProps2({
modelValue: _unref4(myValue),
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _isRef2(myValue) ? myValue.value = $event : null),
"format-value": formatValue.value,
"onUpdate:format-value": _cache[2] || (_cache[2] = ($event) => formatValue.value = $event),
option: _unref4(thousandOption)
}, _ctx.$attrs, { onChange: handleChange }), _createSlots3({ _: 2 }, [
__props.prepend ? {
name: "prepend",
fn: _withCtx3(() => [
Array.isArray(_unref4(currencyInfo)) ? (_openBlock4(), _createBlock3(_unref4(ElSelect), {
key: 0,
modelValue: myCode.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => myCode.value = $event),
style: _normalizeStyle(_unref4(selectStyle)),
onChange: handleCodeChange
}, _createSlots3({
default: _withCtx3(() => [
(_openBlock4(true), _createElementBlock2(_Fragment, null, _renderList(_unref4(currencyInfo), (item) => {
return _openBlock4(), _createBlock3(_unref4(ElOption), {
key: item.code,
value: item.code
}, {
default: _withCtx3(() => [
__props.flag ? (_openBlock4(), _createBlock3(flag_default3, {
key: 0,
code: item.flag,
class: _normalizeClass3(_ctx.$style.flag)
}, null, 8, ["code", "class"])) : _createCommentVNode2("v-if", true),
_createTextVNode(_toDisplayString(item.code), 1)
]),
_: 2
}, 1032, ["value"]);
}), 128))
]),
_: 2
}, [
__props.flag ? {
name: "prefix",
fn: _withCtx3(() => [
_unref4(myCurrencyInfo) ? (_openBlock4(), _createBlock3(flag_default3, {
key: 0,
code: _unref4(myCurrencyInfo)?.flag
}, null, 8, ["code"])) : _createCommentVNode2("v-if", true)
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "style"])) : (_openBlock4(), _createElementBlock2(_Fragment, { key: 1 }, [
__props.flag ? (_openBlock4(), _createBlock3(flag_default3, {
key: 0,
code: _unref4(currencyInfo).flag,
class: _normalizeClass3(_ctx.$style.flag)
}, null, 8, ["code", "class"])) : _createCommentVNode2("v-if", true),
_createTextVNode(_toDisplayString(_unref4(currencyInfo).code), 1)
], 64))
]),
key: "0"
} : void 0,
__props.append ? {
name: "append",
fn: _withCtx3(() => [
Array.isArray(_unref4(currencyInfo)) ? (_openBlock4(), _createElementBlock2("span", _hoisted_1, _toDisplayString(_unref4(myCurrencyInfo).code), 1)) : (_openBlock4(), _createElementBlock2("span", _hoisted_2, _toDisplayString(_unref4(currencyInfo).code), 1))
]),
key: "1"
} : void 0
]), 1040, ["modelValue", "format-value", "option"]);
};
}
});
// vue-style:D:\project\_my\vc\src\components\currency\index.vue?type=style&index=0&isModule=true&isNameImport=true
var currency_default3 = { flag: "_flag_8zrzb_1" };
// src/components/currency/index.vue
var cssModules4 = {};
currency_default2.__cssModules = cssModules4 = {};
cssModules4["$style"] = currency_default3;
var currency_default4 = currency_default2;
export {
currency_default4 as default
};