mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-06 06:17:11 -04:00
429 lines
17 KiB
JavaScript
429 lines
17 KiB
JavaScript
import { a as __unplugin_components_0, _ as _export_sfc } from './chunk-6003391e.js';
|
|
import { NForm, NFormItem, NInputNumber, NColorPicker, NSwitch } from 'naive-ui';
|
|
import { _ as __unplugin_components_3 } from './chunk-4e7a6a8d.js';
|
|
import { defineComponent, ref, computed, withCtx, unref, isRef, createVNode, createTextVNode, useSSRContext } from 'vue';
|
|
import { ssrRenderComponent, ssrRenderAttr } from 'vue/server-renderer';
|
|
import { T as TextareaCopyable } from './chunk-727cc0fb.js';
|
|
import { u as useCopy } from './chunk-77c5cc16.js';
|
|
import { u as useDownloadFileFromBase64 } from './chunk-cce4ae69.js';
|
|
import { t as textToBase64 } from './chunk-72fc6fca.js';
|
|
import '@vueuse/core';
|
|
import 'pinia';
|
|
import './chunk-11f44f81.js';
|
|
import './chunk-35c3d701.js';
|
|
import 'lodash';
|
|
import './chunk-8109fd17.js';
|
|
import '@vicons/tabler';
|
|
import 'highlight.js/lib/core';
|
|
import 'highlight.js/lib/languages/json';
|
|
import 'highlight.js/lib/languages/sql';
|
|
import 'highlight.js/lib/languages/xml';
|
|
import 'highlight.js/lib/languages/yaml';
|
|
import 'highlight.js/lib/languages/ini';
|
|
import 'mime-types';
|
|
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "svg-placeholder-generator",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const width = ref(600);
|
|
const height = ref(350);
|
|
const fontSize = ref(26);
|
|
const bgColor = ref("#cccccc");
|
|
const fgColor = ref("#333333");
|
|
const useExactSize = ref(true);
|
|
const customText = ref("");
|
|
const svgString = computed(() => {
|
|
const w = width.value;
|
|
const h = height.value;
|
|
const text = customText.value.length > 0 ? customText.value : `${w}x${h}`;
|
|
const size = useExactSize.value ? ` width="${w}" height="${h}"` : "";
|
|
return `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}"${size}>
|
|
<rect width="${w}" height="${h}" fill="${bgColor.value}"></rect>
|
|
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace" font-size="${fontSize.value}px" fill="${fgColor.value}">${text}</text>
|
|
</svg>
|
|
`.trim();
|
|
});
|
|
const base64 = computed(() => `data:image/svg+xml;base64,${textToBase64(svgString.value)}`);
|
|
const { copy: copySVG } = useCopy({ source: svgString });
|
|
const { copy: copyBase64 } = useCopy({ source: base64 });
|
|
const { download } = useDownloadFileFromBase64({ source: base64 });
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_n_form = NForm;
|
|
const _component_n_form_item = NFormItem;
|
|
const _component_n_input_number = NInputNumber;
|
|
const _component_n_color_picker = NColorPicker;
|
|
const _component_c_input_text = __unplugin_components_3;
|
|
const _component_n_switch = NSwitch;
|
|
const _component_c_button = __unplugin_components_0;
|
|
_push(`<!--[--><div data-v-9f7dfee7>`);
|
|
_push(ssrRenderComponent(_component_n_form, {
|
|
"label-placement": "left",
|
|
"label-width": "100"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div flex gap-3 data-v-9f7dfee7${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_component_n_form_item, {
|
|
label: "Width (in px)",
|
|
"flex-1": ""
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(_component_n_input_number, {
|
|
value: unref(width),
|
|
"onUpdate:value": ($event) => isRef(width) ? width.value = $event : null,
|
|
placeholder: "SVG width...",
|
|
min: "1"
|
|
}, null, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(width),
|
|
"onUpdate:value": ($event) => isRef(width) ? width.value = $event : null,
|
|
placeholder: "SVG width...",
|
|
min: "1"
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_component_n_form_item, {
|
|
label: "Background",
|
|
"flex-1": ""
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(_component_n_color_picker, {
|
|
value: unref(bgColor),
|
|
"onUpdate:value": ($event) => isRef(bgColor) ? bgColor.value = $event : null,
|
|
modes: ["hex"]
|
|
}, null, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(_component_n_color_picker, {
|
|
value: unref(bgColor),
|
|
"onUpdate:value": ($event) => isRef(bgColor) ? bgColor.value = $event : null,
|
|
modes: ["hex"]
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(`</div><div flex gap-3 data-v-9f7dfee7${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_component_n_form_item, {
|
|
label: "Height (in px)",
|
|
"flex-1": ""
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(_component_n_input_number, {
|
|
value: unref(height),
|
|
"onUpdate:value": ($event) => isRef(height) ? height.value = $event : null,
|
|
placeholder: "SVG height...",
|
|
min: "1"
|
|
}, null, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(height),
|
|
"onUpdate:value": ($event) => isRef(height) ? height.value = $event : null,
|
|
placeholder: "SVG height...",
|
|
min: "1"
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_component_n_form_item, {
|
|
label: "Text color",
|
|
"flex-1": ""
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(_component_n_color_picker, {
|
|
value: unref(fgColor),
|
|
"onUpdate:value": ($event) => isRef(fgColor) ? fgColor.value = $event : null,
|
|
modes: ["hex"]
|
|
}, null, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(_component_n_color_picker, {
|
|
value: unref(fgColor),
|
|
"onUpdate:value": ($event) => isRef(fgColor) ? fgColor.value = $event : null,
|
|
modes: ["hex"]
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(`</div><div flex gap-3 data-v-9f7dfee7${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_component_n_form_item, {
|
|
label: "Font size",
|
|
"flex-1": ""
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(_component_n_input_number, {
|
|
value: unref(fontSize),
|
|
"onUpdate:value": ($event) => isRef(fontSize) ? fontSize.value = $event : null,
|
|
placeholder: "Font size...",
|
|
min: "1"
|
|
}, null, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(fontSize),
|
|
"onUpdate:value": ($event) => isRef(fontSize) ? fontSize.value = $event : null,
|
|
placeholder: "Font size...",
|
|
min: "1"
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_component_c_input_text, {
|
|
value: unref(customText),
|
|
"onUpdate:value": ($event) => isRef(customText) ? customText.value = $event : null,
|
|
label: "Custom text",
|
|
placeholder: `Default is ${unref(width)}x${unref(height)}`,
|
|
"label-position": "left",
|
|
"label-width": "100px",
|
|
"label-align": "right",
|
|
"flex-1": ""
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`</div>`);
|
|
_push2(ssrRenderComponent(_component_n_form_item, {
|
|
label: "Use exact size",
|
|
"label-placement": "left"
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(_component_n_switch, {
|
|
value: unref(useExactSize),
|
|
"onUpdate:value": ($event) => isRef(useExactSize) ? useExactSize.value = $event : null
|
|
}, null, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(_component_n_switch, {
|
|
value: unref(useExactSize),
|
|
"onUpdate:value": ($event) => isRef(useExactSize) ? useExactSize.value = $event : null
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode("div", {
|
|
flex: "",
|
|
"gap-3": ""
|
|
}, [
|
|
createVNode(_component_n_form_item, {
|
|
label: "Width (in px)",
|
|
"flex-1": ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(width),
|
|
"onUpdate:value": ($event) => isRef(width) ? width.value = $event : null,
|
|
placeholder: "SVG width...",
|
|
min: "1"
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(_component_n_form_item, {
|
|
label: "Background",
|
|
"flex-1": ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_n_color_picker, {
|
|
value: unref(bgColor),
|
|
"onUpdate:value": ($event) => isRef(bgColor) ? bgColor.value = $event : null,
|
|
modes: ["hex"]
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
createVNode("div", {
|
|
flex: "",
|
|
"gap-3": ""
|
|
}, [
|
|
createVNode(_component_n_form_item, {
|
|
label: "Height (in px)",
|
|
"flex-1": ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(height),
|
|
"onUpdate:value": ($event) => isRef(height) ? height.value = $event : null,
|
|
placeholder: "SVG height...",
|
|
min: "1"
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(_component_n_form_item, {
|
|
label: "Text color",
|
|
"flex-1": ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_n_color_picker, {
|
|
value: unref(fgColor),
|
|
"onUpdate:value": ($event) => isRef(fgColor) ? fgColor.value = $event : null,
|
|
modes: ["hex"]
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
createVNode("div", {
|
|
flex: "",
|
|
"gap-3": ""
|
|
}, [
|
|
createVNode(_component_n_form_item, {
|
|
label: "Font size",
|
|
"flex-1": ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_n_input_number, {
|
|
value: unref(fontSize),
|
|
"onUpdate:value": ($event) => isRef(fontSize) ? fontSize.value = $event : null,
|
|
placeholder: "Font size...",
|
|
min: "1"
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(_component_c_input_text, {
|
|
value: unref(customText),
|
|
"onUpdate:value": ($event) => isRef(customText) ? customText.value = $event : null,
|
|
label: "Custom text",
|
|
placeholder: `Default is ${unref(width)}x${unref(height)}`,
|
|
"label-position": "left",
|
|
"label-width": "100px",
|
|
"label-align": "right",
|
|
"flex-1": ""
|
|
}, null, 8, ["value", "onUpdate:value", "placeholder"])
|
|
]),
|
|
createVNode(_component_n_form_item, {
|
|
label: "Use exact size",
|
|
"label-placement": "left"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_n_switch, {
|
|
value: unref(useExactSize),
|
|
"onUpdate:value": ($event) => isRef(useExactSize) ? useExactSize.value = $event : null
|
|
}, null, 8, ["value", "onUpdate:value"])
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(ssrRenderComponent(_component_n_form_item, { label: "SVG HTML element" }, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(TextareaCopyable, {
|
|
value: unref(svgString),
|
|
"copy-placement": "none"
|
|
}, null, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode(TextareaCopyable, {
|
|
value: unref(svgString),
|
|
"copy-placement": "none"
|
|
}, null, 8, ["value"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(ssrRenderComponent(_component_n_form_item, { label: "SVG in Base64" }, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(TextareaCopyable, {
|
|
value: unref(base64),
|
|
"copy-placement": "none"
|
|
}, null, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode(TextareaCopyable, {
|
|
value: unref(base64),
|
|
"copy-placement": "none"
|
|
}, null, 8, ["value"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`<div flex justify-center gap-3 data-v-9f7dfee7>`);
|
|
_push(ssrRenderComponent(_component_c_button, {
|
|
onClick: ($event) => unref(copySVG)()
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(` Copy svg `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" Copy svg ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(ssrRenderComponent(_component_c_button, {
|
|
onClick: ($event) => unref(copyBase64)()
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(` Copy base64 `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" Copy base64 ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(ssrRenderComponent(_component_c_button, {
|
|
onClick: ($event) => unref(download)()
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(` Download svg `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" Download svg ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div></div><img${ssrRenderAttr("src", unref(base64))} alt="Image" data-v-9f7dfee7><!--]-->`);
|
|
};
|
|
}
|
|
});
|
|
|
|
/* unplugin-vue-components disabled */const svgPlaceholderGenerator_vue_vue_type_style_index_0_scoped_9f7dfee7_lang = '';
|
|
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/tools/svg-placeholder-generator/svg-placeholder-generator.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
const svgPlaceholderGenerator = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9f7dfee7"]]);
|
|
|
|
export { svgPlaceholderGenerator as default };
|