262 lines
12 KiB
JavaScript
262 lines
12 KiB
JavaScript
import { _ as _sfc_main$1 } from './chunk-de61ec1c.js';
|
|
import { NInputNumber } from 'naive-ui';
|
|
import { a as __unplugin_components_1 } from './chunk-8109fd17.js';
|
|
import { defineComponent, ref, computed, mergeProps, withCtx, unref, isRef, createVNode, useSSRContext } from 'vue';
|
|
import { ssrRenderAttrs, ssrRenderStyle, ssrRenderComponent } from 'vue/server-renderer';
|
|
import './chunk-95ec8cf7.js';
|
|
import './chunk-6003391e.js';
|
|
import '@vueuse/core';
|
|
import 'pinia';
|
|
import './chunk-4e7a6a8d.js';
|
|
import './chunk-11f44f81.js';
|
|
import './chunk-35c3d701.js';
|
|
import 'lodash';
|
|
import './chunk-77c5cc16.js';
|
|
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "percentage-calculator",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const percentageX = ref();
|
|
const percentageY = ref();
|
|
const percentageResult = computed(() => {
|
|
if (percentageX.value === void 0 || percentageY.value === void 0) {
|
|
return "";
|
|
}
|
|
return (percentageX.value / 100 * percentageY.value).toString();
|
|
});
|
|
const numberX = ref();
|
|
const numberY = ref();
|
|
const numberResult = computed(() => {
|
|
if (numberX.value === void 0 || numberY.value === void 0) {
|
|
return "";
|
|
}
|
|
const result = 100 * numberX.value / numberY.value;
|
|
return !Number.isFinite(result) || Number.isNaN(result) ? "" : result.toString();
|
|
});
|
|
const numberFrom = ref();
|
|
const numberTo = ref();
|
|
const percentageIncreaseDecrease = computed(() => {
|
|
if (numberFrom.value === void 0 || numberTo.value === void 0) {
|
|
return "";
|
|
}
|
|
const result = (numberTo.value - numberFrom.value) / numberFrom.value * 100;
|
|
return !Number.isFinite(result) || Number.isNaN(result) ? "" : result.toString();
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_c_card = __unplugin_components_1;
|
|
const _component_n_input_number = NInputNumber;
|
|
const _component_input_copyable = _sfc_main$1;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ style: { "flex": "0 0 100%" } }, _attrs))}><div style="${ssrRenderStyle({ "margin": "0 auto", "max-width": "600px" })}">`);
|
|
_push(ssrRenderComponent(_component_c_card, { "mb-3": "" }, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div mb-3 sm:hidden${_scopeId}> What is </div><div flex gap-2${_scopeId}><div hidden pt-1 sm:block style="${ssrRenderStyle({ "min-width": "48px" })}"${_scopeId}> What is </div>`);
|
|
_push2(ssrRenderComponent(_component_n_input_number, {
|
|
value: unref(percentageX),
|
|
"onUpdate:value": ($event) => isRef(percentageX) ? percentageX.value = $event : null,
|
|
"data-test-id": "percentageX",
|
|
placeholder: "X"
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`<div min-w-fit pt-1${_scopeId}> % of </div>`);
|
|
_push2(ssrRenderComponent(_component_n_input_number, {
|
|
value: unref(percentageY),
|
|
"onUpdate:value": ($event) => isRef(percentageY) ? percentageY.value = $event : null,
|
|
"data-test-id": "percentageY",
|
|
placeholder: "Y"
|
|
}, null, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_component_input_copyable, {
|
|
value: unref(percentageResult),
|
|
"onUpdate:value": ($event) => isRef(percentageResult) ? percentageResult.value = $event : null,
|
|
"data-test-id": "percentageResult",
|
|
readonly: "",
|
|
placeholder: "Result",
|
|
style: { "max-width": "150px" }
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`</div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", {
|
|
"mb-3": "",
|
|
"sm:hidden": ""
|
|
}, " What is "),
|
|
createVNode("div", {
|
|
flex: "",
|
|
"gap-2": ""
|
|
}, [
|
|
createVNode("div", {
|
|
hidden: "",
|
|
"pt-1": "",
|
|
"sm:block": "",
|
|
style: { "min-width": "48px" }
|
|
}, " What is "),
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(percentageX),
|
|
"onUpdate:value": ($event) => isRef(percentageX) ? percentageX.value = $event : null,
|
|
"data-test-id": "percentageX",
|
|
placeholder: "X"
|
|
}, null, 8, ["value", "onUpdate:value"]),
|
|
createVNode("div", {
|
|
"min-w-fit": "",
|
|
"pt-1": ""
|
|
}, " % of "),
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(percentageY),
|
|
"onUpdate:value": ($event) => isRef(percentageY) ? percentageY.value = $event : null,
|
|
"data-test-id": "percentageY",
|
|
placeholder: "Y"
|
|
}, null, 8, ["value", "onUpdate:value"]),
|
|
createVNode(_component_input_copyable, {
|
|
value: unref(percentageResult),
|
|
"onUpdate:value": ($event) => isRef(percentageResult) ? percentageResult.value = $event : null,
|
|
"data-test-id": "percentageResult",
|
|
readonly: "",
|
|
placeholder: "Result",
|
|
style: { "max-width": "150px" }
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(ssrRenderComponent(_component_c_card, { "mb-3": "" }, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div mb-3 sm:hidden${_scopeId}> X is what percent of Y </div><div flex gap-2${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_component_n_input_number, {
|
|
value: unref(numberX),
|
|
"onUpdate:value": ($event) => isRef(numberX) ? numberX.value = $event : null,
|
|
"data-test-id": "numberX",
|
|
placeholder: "X"
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`<div hidden min-w-fit pt-1 sm:block${_scopeId}> is what percent of </div>`);
|
|
_push2(ssrRenderComponent(_component_n_input_number, {
|
|
value: unref(numberY),
|
|
"onUpdate:value": ($event) => isRef(numberY) ? numberY.value = $event : null,
|
|
"data-test-id": "numberY",
|
|
placeholder: "Y"
|
|
}, null, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_component_input_copyable, {
|
|
value: unref(numberResult),
|
|
"onUpdate:value": ($event) => isRef(numberResult) ? numberResult.value = $event : null,
|
|
"data-test-id": "numberResult",
|
|
readonly: "",
|
|
placeholder: "Result",
|
|
style: { "max-width": "150px" }
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`</div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", {
|
|
"mb-3": "",
|
|
"sm:hidden": ""
|
|
}, " X is what percent of Y "),
|
|
createVNode("div", {
|
|
flex: "",
|
|
"gap-2": ""
|
|
}, [
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(numberX),
|
|
"onUpdate:value": ($event) => isRef(numberX) ? numberX.value = $event : null,
|
|
"data-test-id": "numberX",
|
|
placeholder: "X"
|
|
}, null, 8, ["value", "onUpdate:value"]),
|
|
createVNode("div", {
|
|
hidden: "",
|
|
"min-w-fit": "",
|
|
"pt-1": "",
|
|
"sm:block": ""
|
|
}, " is what percent of "),
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(numberY),
|
|
"onUpdate:value": ($event) => isRef(numberY) ? numberY.value = $event : null,
|
|
"data-test-id": "numberY",
|
|
placeholder: "Y"
|
|
}, null, 8, ["value", "onUpdate:value"]),
|
|
createVNode(_component_input_copyable, {
|
|
value: unref(numberResult),
|
|
"onUpdate:value": ($event) => isRef(numberResult) ? numberResult.value = $event : null,
|
|
"data-test-id": "numberResult",
|
|
readonly: "",
|
|
placeholder: "Result",
|
|
style: { "max-width": "150px" }
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(ssrRenderComponent(_component_c_card, { "mb-3": "" }, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div mb-3${_scopeId}> What is the percentage increase/decrease </div><div flex gap-2${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_component_n_input_number, {
|
|
value: unref(numberFrom),
|
|
"onUpdate:value": ($event) => isRef(numberFrom) ? numberFrom.value = $event : null,
|
|
"data-test-id": "numberFrom",
|
|
placeholder: "From"
|
|
}, null, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_component_n_input_number, {
|
|
value: unref(numberTo),
|
|
"onUpdate:value": ($event) => isRef(numberTo) ? numberTo.value = $event : null,
|
|
"data-test-id": "numberTo",
|
|
placeholder: "To"
|
|
}, null, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_component_input_copyable, {
|
|
value: unref(percentageIncreaseDecrease),
|
|
"onUpdate:value": ($event) => isRef(percentageIncreaseDecrease) ? percentageIncreaseDecrease.value = $event : null,
|
|
"data-test-id": "percentageIncreaseDecrease",
|
|
readonly: "",
|
|
placeholder: "Result",
|
|
style: { "max-width": "150px" }
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`</div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { "mb-3": "" }, " What is the percentage increase/decrease "),
|
|
createVNode("div", {
|
|
flex: "",
|
|
"gap-2": ""
|
|
}, [
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(numberFrom),
|
|
"onUpdate:value": ($event) => isRef(numberFrom) ? numberFrom.value = $event : null,
|
|
"data-test-id": "numberFrom",
|
|
placeholder: "From"
|
|
}, null, 8, ["value", "onUpdate:value"]),
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(numberTo),
|
|
"onUpdate:value": ($event) => isRef(numberTo) ? numberTo.value = $event : null,
|
|
"data-test-id": "numberTo",
|
|
placeholder: "To"
|
|
}, null, 8, ["value", "onUpdate:value"]),
|
|
createVNode(_component_input_copyable, {
|
|
value: unref(percentageIncreaseDecrease),
|
|
"onUpdate:value": ($event) => isRef(percentageIncreaseDecrease) ? percentageIncreaseDecrease.value = $event : null,
|
|
"data-test-id": "percentageIncreaseDecrease",
|
|
readonly: "",
|
|
placeholder: "Result",
|
|
style: { "max-width": "150px" }
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div></div>`);
|
|
};
|
|
}
|
|
});
|
|
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/tools/percentage-calculator/percentage-calculator.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as default };
|