123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343 |
- import { defineComponent, createVNode as _createVNode } from "vue";
- import { useId } from "../composables/use-id.mjs";
- import { getSizeStyle, makeStringProp, createNamespace } from "../utils/index.mjs";
- const [name, bem] = createNamespace("empty");
- const emptyProps = {
- image: makeStringProp("default"),
- imageSize: [Number, String, Array],
- description: String
- };
- var stdin_default = defineComponent({
- name,
- props: emptyProps,
- setup(props, {
- slots
- }) {
- const renderDescription = () => {
- const description = slots.description ? slots.description() : props.description;
- if (description) {
- return _createVNode("p", {
- "class": bem("description")
- }, [description]);
- }
- };
- const renderBottom = () => {
- if (slots.default) {
- return _createVNode("div", {
- "class": bem("bottom")
- }, [slots.default()]);
- }
- };
- const baseId = useId();
- const getId = (num) => `${baseId}-${num}`;
- const getUrlById = (num) => `url(#${getId(num)})`;
- const renderStop = (color, offset, opacity) => _createVNode("stop", {
- "stop-color": color,
- "offset": `${offset}%`,
- "stop-opacity": opacity
- }, null);
- const renderStops = (fromColor, toColor) => [renderStop(fromColor, 0), renderStop(toColor, 100)];
- const renderShadow = (id) => [_createVNode("defs", null, [_createVNode("radialGradient", {
- "id": getId(id),
- "cx": "50%",
- "cy": "54%",
- "fx": "50%",
- "fy": "54%",
- "r": "297%",
- "gradientTransform": "matrix(-.16 0 0 -.33 .58 .72)",
- "data-allow-mismatch": "attribute"
- }, [renderStop("#EBEDF0", 0), renderStop("#F2F3F5", 100, 0.3)])]), _createVNode("ellipse", {
- "fill": getUrlById(id),
- "opacity": ".8",
- "cx": "80",
- "cy": "140",
- "rx": "46",
- "ry": "8",
- "data-allow-mismatch": "attribute"
- }, null)];
- const renderBuilding = () => [_createVNode("defs", null, [_createVNode("linearGradient", {
- "id": getId("a"),
- "x1": "64%",
- "y1": "100%",
- "x2": "64%",
- "data-allow-mismatch": "attribute"
- }, [renderStop("#FFF", 0, 0.5), renderStop("#F2F3F5", 100)])]), _createVNode("g", {
- "opacity": ".8",
- "data-allow-mismatch": "children"
- }, [_createVNode("path", {
- "d": "M36 131V53H16v20H2v58h34z",
- "fill": getUrlById("a")
- }, null), _createVNode("path", {
- "d": "M123 15h22v14h9v77h-31V15z",
- "fill": getUrlById("a")
- }, null)])];
- const renderCloud = () => [_createVNode("defs", null, [_createVNode("linearGradient", {
- "id": getId("b"),
- "x1": "64%",
- "y1": "97%",
- "x2": "64%",
- "y2": "0%",
- "data-allow-mismatch": "attribute"
- }, [renderStop("#F2F3F5", 0, 0.3), renderStop("#F2F3F5", 100)])]), _createVNode("g", {
- "opacity": ".8",
- "data-allow-mismatch": "children"
- }, [_createVNode("path", {
- "d": "M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z",
- "fill": getUrlById("b")
- }, null), _createVNode("path", {
- "d": "M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z",
- "fill": getUrlById("b")
- }, null)])];
- const renderNetwork = () => _createVNode("svg", {
- "viewBox": "0 0 160 160"
- }, [_createVNode("defs", {
- "data-allow-mismatch": "children"
- }, [_createVNode("linearGradient", {
- "id": getId(1),
- "x1": "64%",
- "y1": "100%",
- "x2": "64%"
- }, [renderStop("#FFF", 0, 0.5), renderStop("#F2F3F5", 100)]), _createVNode("linearGradient", {
- "id": getId(2),
- "x1": "50%",
- "x2": "50%",
- "y2": "84%"
- }, [renderStop("#EBEDF0", 0), renderStop("#DCDEE0", 100, 0)]), _createVNode("linearGradient", {
- "id": getId(3),
- "x1": "100%",
- "x2": "100%",
- "y2": "100%"
- }, [renderStops("#EAEDF0", "#DCDEE0")]), _createVNode("radialGradient", {
- "id": getId(4),
- "cx": "50%",
- "cy": "0%",
- "fx": "50%",
- "fy": "0%",
- "r": "100%",
- "gradientTransform": "matrix(0 1 -.54 0 .5 -.5)"
- }, [renderStop("#EBEDF0", 0), renderStop("#FFF", 100, 0)])]), _createVNode("g", {
- "fill": "none"
- }, [renderBuilding(), _createVNode("path", {
- "fill": getUrlById(4),
- "d": "M0 139h160v21H0z",
- "data-allow-mismatch": "attribute"
- }, null), _createVNode("path", {
- "d": "M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z",
- "fill": getUrlById(2),
- "data-allow-mismatch": "attribute"
- }, null), _createVNode("g", {
- "opacity": ".6",
- "stroke-linecap": "round",
- "stroke-width": "7",
- "data-allow-mismatch": "children"
- }, [_createVNode("path", {
- "d": "M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13",
- "stroke": getUrlById(3)
- }, null), _createVNode("path", {
- "d": "M53 36a34 34 0 0 0 0 48",
- "stroke": getUrlById(3)
- }, null), _createVNode("path", {
- "d": "M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13",
- "stroke": getUrlById(3)
- }, null), _createVNode("path", {
- "d": "M106 84a34 34 0 0 0 0-48",
- "stroke": getUrlById(3)
- }, null)]), _createVNode("g", {
- "transform": "translate(31 105)"
- }, [_createVNode("rect", {
- "fill": "#EBEDF0",
- "width": "98",
- "height": "34",
- "rx": "2"
- }, null), _createVNode("rect", {
- "fill": "#FFF",
- "x": "9",
- "y": "8",
- "width": "80",
- "height": "18",
- "rx": "1.1"
- }, null), _createVNode("rect", {
- "fill": "#EBEDF0",
- "x": "15",
- "y": "12",
- "width": "18",
- "height": "6",
- "rx": "1.1"
- }, null)])])]);
- const renderMaterial = () => _createVNode("svg", {
- "viewBox": "0 0 160 160"
- }, [_createVNode("defs", {
- "data-allow-mismatch": "children"
- }, [_createVNode("linearGradient", {
- "x1": "50%",
- "x2": "50%",
- "y2": "100%",
- "id": getId(5)
- }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
- "x1": "95%",
- "y1": "48%",
- "x2": "5.5%",
- "y2": "51%",
- "id": getId(6)
- }, [renderStops("#EAEDF1", "#DCDEE0")]), _createVNode("linearGradient", {
- "y1": "45%",
- "x2": "100%",
- "y2": "54%",
- "id": getId(7)
- }, [renderStops("#EAEDF1", "#DCDEE0")])]), renderBuilding(), renderCloud(), _createVNode("g", {
- "transform": "translate(36 50)",
- "fill": "none"
- }, [_createVNode("g", {
- "transform": "translate(8)"
- }, [_createVNode("rect", {
- "fill": "#EBEDF0",
- "opacity": ".6",
- "x": "38",
- "y": "13",
- "width": "36",
- "height": "53",
- "rx": "2"
- }, null), _createVNode("rect", {
- "fill": getUrlById(5),
- "width": "64",
- "height": "66",
- "rx": "2",
- "data-allow-mismatch": "attribute"
- }, null), _createVNode("rect", {
- "fill": "#FFF",
- "x": "6",
- "y": "6",
- "width": "52",
- "height": "55",
- "rx": "1"
- }, null), _createVNode("g", {
- "transform": "translate(15 17)",
- "fill": getUrlById(6),
- "data-allow-mismatch": "attribute"
- }, [_createVNode("rect", {
- "width": "34",
- "height": "6",
- "rx": "1"
- }, null), _createVNode("path", {
- "d": "M0 14h34v6H0z"
- }, null), _createVNode("rect", {
- "y": "28",
- "width": "34",
- "height": "6",
- "rx": "1"
- }, null)])]), _createVNode("rect", {
- "fill": getUrlById(7),
- "y": "61",
- "width": "88",
- "height": "28",
- "rx": "1",
- "data-allow-mismatch": "attribute"
- }, null), _createVNode("rect", {
- "fill": "#F7F8FA",
- "x": "29",
- "y": "72",
- "width": "30",
- "height": "6",
- "rx": "1"
- }, null)])]);
- const renderError = () => _createVNode("svg", {
- "viewBox": "0 0 160 160"
- }, [_createVNode("defs", null, [_createVNode("linearGradient", {
- "x1": "50%",
- "x2": "50%",
- "y2": "100%",
- "id": getId(8),
- "data-allow-mismatch": "attribute"
- }, [renderStops("#EAEDF1", "#DCDEE0")])]), renderBuilding(), renderCloud(), renderShadow("c"), _createVNode("path", {
- "d": "m59 60 21 21 21-21h3l9 9v3L92 93l21 21v3l-9 9h-3l-21-21-21 21h-3l-9-9v-3l21-21-21-21v-3l9-9h3Z",
- "fill": getUrlById(8),
- "data-allow-mismatch": "attribute"
- }, null)]);
- const renderSearch = () => _createVNode("svg", {
- "viewBox": "0 0 160 160"
- }, [_createVNode("defs", {
- "data-allow-mismatch": "children"
- }, [_createVNode("linearGradient", {
- "x1": "50%",
- "y1": "100%",
- "x2": "50%",
- "id": getId(9)
- }, [renderStops("#EEE", "#D8D8D8")]), _createVNode("linearGradient", {
- "x1": "100%",
- "y1": "50%",
- "y2": "50%",
- "id": getId(10)
- }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
- "x1": "50%",
- "x2": "50%",
- "y2": "100%",
- "id": getId(11)
- }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
- "x1": "50%",
- "x2": "50%",
- "y2": "100%",
- "id": getId(12)
- }, [renderStops("#FFF", "#F7F8FA")])]), renderBuilding(), renderCloud(), renderShadow("d"), _createVNode("g", {
- "transform": "rotate(-45 113 -4)",
- "fill": "none",
- "data-allow-mismatch": "children"
- }, [_createVNode("rect", {
- "fill": getUrlById(9),
- "x": "24",
- "y": "52.8",
- "width": "5.8",
- "height": "19",
- "rx": "1"
- }, null), _createVNode("rect", {
- "fill": getUrlById(10),
- "x": "22.1",
- "y": "67.3",
- "width": "9.9",
- "height": "28",
- "rx": "1"
- }, null), _createVNode("circle", {
- "stroke": getUrlById(11),
- "stroke-width": "8",
- "cx": "27",
- "cy": "27",
- "r": "27"
- }, null), _createVNode("circle", {
- "fill": getUrlById(12),
- "cx": "27",
- "cy": "27",
- "r": "16"
- }, null), _createVNode("path", {
- "d": "M37 7c-8 0-15 5-16 12",
- "stroke": getUrlById(11),
- "stroke-width": "3",
- "opacity": ".5",
- "stroke-linecap": "round",
- "transform": "rotate(45 29 13)"
- }, null)])]);
- const renderImage = () => {
- var _a;
- if (slots.image) {
- return slots.image();
- }
- const PRESET_IMAGES = {
- error: renderError,
- search: renderSearch,
- network: renderNetwork,
- default: renderMaterial
- };
- return ((_a = PRESET_IMAGES[props.image]) == null ? void 0 : _a.call(PRESET_IMAGES)) || _createVNode("img", {
- "src": props.image
- }, null);
- };
- return () => _createVNode("div", {
- "class": bem()
- }, [_createVNode("div", {
- "class": bem("image"),
- "style": getSizeStyle(props.imageSize)
- }, [renderImage()]), renderDescription(), renderBottom()]);
- }
- });
- export {
- stdin_default as default,
- emptyProps
- };
|