Empty.mjs 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. import { defineComponent, createVNode as _createVNode } from "vue";
  2. import { useId } from "../composables/use-id.mjs";
  3. import { getSizeStyle, makeStringProp, createNamespace } from "../utils/index.mjs";
  4. const [name, bem] = createNamespace("empty");
  5. const emptyProps = {
  6. image: makeStringProp("default"),
  7. imageSize: [Number, String, Array],
  8. description: String
  9. };
  10. var stdin_default = defineComponent({
  11. name,
  12. props: emptyProps,
  13. setup(props, {
  14. slots
  15. }) {
  16. const renderDescription = () => {
  17. const description = slots.description ? slots.description() : props.description;
  18. if (description) {
  19. return _createVNode("p", {
  20. "class": bem("description")
  21. }, [description]);
  22. }
  23. };
  24. const renderBottom = () => {
  25. if (slots.default) {
  26. return _createVNode("div", {
  27. "class": bem("bottom")
  28. }, [slots.default()]);
  29. }
  30. };
  31. const baseId = useId();
  32. const getId = (num) => `${baseId}-${num}`;
  33. const getUrlById = (num) => `url(#${getId(num)})`;
  34. const renderStop = (color, offset, opacity) => _createVNode("stop", {
  35. "stop-color": color,
  36. "offset": `${offset}%`,
  37. "stop-opacity": opacity
  38. }, null);
  39. const renderStops = (fromColor, toColor) => [renderStop(fromColor, 0), renderStop(toColor, 100)];
  40. const renderShadow = (id) => [_createVNode("defs", null, [_createVNode("radialGradient", {
  41. "id": getId(id),
  42. "cx": "50%",
  43. "cy": "54%",
  44. "fx": "50%",
  45. "fy": "54%",
  46. "r": "297%",
  47. "gradientTransform": "matrix(-.16 0 0 -.33 .58 .72)",
  48. "data-allow-mismatch": "attribute"
  49. }, [renderStop("#EBEDF0", 0), renderStop("#F2F3F5", 100, 0.3)])]), _createVNode("ellipse", {
  50. "fill": getUrlById(id),
  51. "opacity": ".8",
  52. "cx": "80",
  53. "cy": "140",
  54. "rx": "46",
  55. "ry": "8",
  56. "data-allow-mismatch": "attribute"
  57. }, null)];
  58. const renderBuilding = () => [_createVNode("defs", null, [_createVNode("linearGradient", {
  59. "id": getId("a"),
  60. "x1": "64%",
  61. "y1": "100%",
  62. "x2": "64%",
  63. "data-allow-mismatch": "attribute"
  64. }, [renderStop("#FFF", 0, 0.5), renderStop("#F2F3F5", 100)])]), _createVNode("g", {
  65. "opacity": ".8",
  66. "data-allow-mismatch": "children"
  67. }, [_createVNode("path", {
  68. "d": "M36 131V53H16v20H2v58h34z",
  69. "fill": getUrlById("a")
  70. }, null), _createVNode("path", {
  71. "d": "M123 15h22v14h9v77h-31V15z",
  72. "fill": getUrlById("a")
  73. }, null)])];
  74. const renderCloud = () => [_createVNode("defs", null, [_createVNode("linearGradient", {
  75. "id": getId("b"),
  76. "x1": "64%",
  77. "y1": "97%",
  78. "x2": "64%",
  79. "y2": "0%",
  80. "data-allow-mismatch": "attribute"
  81. }, [renderStop("#F2F3F5", 0, 0.3), renderStop("#F2F3F5", 100)])]), _createVNode("g", {
  82. "opacity": ".8",
  83. "data-allow-mismatch": "children"
  84. }, [_createVNode("path", {
  85. "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",
  86. "fill": getUrlById("b")
  87. }, null), _createVNode("path", {
  88. "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",
  89. "fill": getUrlById("b")
  90. }, null)])];
  91. const renderNetwork = () => _createVNode("svg", {
  92. "viewBox": "0 0 160 160"
  93. }, [_createVNode("defs", {
  94. "data-allow-mismatch": "children"
  95. }, [_createVNode("linearGradient", {
  96. "id": getId(1),
  97. "x1": "64%",
  98. "y1": "100%",
  99. "x2": "64%"
  100. }, [renderStop("#FFF", 0, 0.5), renderStop("#F2F3F5", 100)]), _createVNode("linearGradient", {
  101. "id": getId(2),
  102. "x1": "50%",
  103. "x2": "50%",
  104. "y2": "84%"
  105. }, [renderStop("#EBEDF0", 0), renderStop("#DCDEE0", 100, 0)]), _createVNode("linearGradient", {
  106. "id": getId(3),
  107. "x1": "100%",
  108. "x2": "100%",
  109. "y2": "100%"
  110. }, [renderStops("#EAEDF0", "#DCDEE0")]), _createVNode("radialGradient", {
  111. "id": getId(4),
  112. "cx": "50%",
  113. "cy": "0%",
  114. "fx": "50%",
  115. "fy": "0%",
  116. "r": "100%",
  117. "gradientTransform": "matrix(0 1 -.54 0 .5 -.5)"
  118. }, [renderStop("#EBEDF0", 0), renderStop("#FFF", 100, 0)])]), _createVNode("g", {
  119. "fill": "none"
  120. }, [renderBuilding(), _createVNode("path", {
  121. "fill": getUrlById(4),
  122. "d": "M0 139h160v21H0z",
  123. "data-allow-mismatch": "attribute"
  124. }, null), _createVNode("path", {
  125. "d": "M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z",
  126. "fill": getUrlById(2),
  127. "data-allow-mismatch": "attribute"
  128. }, null), _createVNode("g", {
  129. "opacity": ".6",
  130. "stroke-linecap": "round",
  131. "stroke-width": "7",
  132. "data-allow-mismatch": "children"
  133. }, [_createVNode("path", {
  134. "d": "M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13",
  135. "stroke": getUrlById(3)
  136. }, null), _createVNode("path", {
  137. "d": "M53 36a34 34 0 0 0 0 48",
  138. "stroke": getUrlById(3)
  139. }, null), _createVNode("path", {
  140. "d": "M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13",
  141. "stroke": getUrlById(3)
  142. }, null), _createVNode("path", {
  143. "d": "M106 84a34 34 0 0 0 0-48",
  144. "stroke": getUrlById(3)
  145. }, null)]), _createVNode("g", {
  146. "transform": "translate(31 105)"
  147. }, [_createVNode("rect", {
  148. "fill": "#EBEDF0",
  149. "width": "98",
  150. "height": "34",
  151. "rx": "2"
  152. }, null), _createVNode("rect", {
  153. "fill": "#FFF",
  154. "x": "9",
  155. "y": "8",
  156. "width": "80",
  157. "height": "18",
  158. "rx": "1.1"
  159. }, null), _createVNode("rect", {
  160. "fill": "#EBEDF0",
  161. "x": "15",
  162. "y": "12",
  163. "width": "18",
  164. "height": "6",
  165. "rx": "1.1"
  166. }, null)])])]);
  167. const renderMaterial = () => _createVNode("svg", {
  168. "viewBox": "0 0 160 160"
  169. }, [_createVNode("defs", {
  170. "data-allow-mismatch": "children"
  171. }, [_createVNode("linearGradient", {
  172. "x1": "50%",
  173. "x2": "50%",
  174. "y2": "100%",
  175. "id": getId(5)
  176. }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
  177. "x1": "95%",
  178. "y1": "48%",
  179. "x2": "5.5%",
  180. "y2": "51%",
  181. "id": getId(6)
  182. }, [renderStops("#EAEDF1", "#DCDEE0")]), _createVNode("linearGradient", {
  183. "y1": "45%",
  184. "x2": "100%",
  185. "y2": "54%",
  186. "id": getId(7)
  187. }, [renderStops("#EAEDF1", "#DCDEE0")])]), renderBuilding(), renderCloud(), _createVNode("g", {
  188. "transform": "translate(36 50)",
  189. "fill": "none"
  190. }, [_createVNode("g", {
  191. "transform": "translate(8)"
  192. }, [_createVNode("rect", {
  193. "fill": "#EBEDF0",
  194. "opacity": ".6",
  195. "x": "38",
  196. "y": "13",
  197. "width": "36",
  198. "height": "53",
  199. "rx": "2"
  200. }, null), _createVNode("rect", {
  201. "fill": getUrlById(5),
  202. "width": "64",
  203. "height": "66",
  204. "rx": "2",
  205. "data-allow-mismatch": "attribute"
  206. }, null), _createVNode("rect", {
  207. "fill": "#FFF",
  208. "x": "6",
  209. "y": "6",
  210. "width": "52",
  211. "height": "55",
  212. "rx": "1"
  213. }, null), _createVNode("g", {
  214. "transform": "translate(15 17)",
  215. "fill": getUrlById(6),
  216. "data-allow-mismatch": "attribute"
  217. }, [_createVNode("rect", {
  218. "width": "34",
  219. "height": "6",
  220. "rx": "1"
  221. }, null), _createVNode("path", {
  222. "d": "M0 14h34v6H0z"
  223. }, null), _createVNode("rect", {
  224. "y": "28",
  225. "width": "34",
  226. "height": "6",
  227. "rx": "1"
  228. }, null)])]), _createVNode("rect", {
  229. "fill": getUrlById(7),
  230. "y": "61",
  231. "width": "88",
  232. "height": "28",
  233. "rx": "1",
  234. "data-allow-mismatch": "attribute"
  235. }, null), _createVNode("rect", {
  236. "fill": "#F7F8FA",
  237. "x": "29",
  238. "y": "72",
  239. "width": "30",
  240. "height": "6",
  241. "rx": "1"
  242. }, null)])]);
  243. const renderError = () => _createVNode("svg", {
  244. "viewBox": "0 0 160 160"
  245. }, [_createVNode("defs", null, [_createVNode("linearGradient", {
  246. "x1": "50%",
  247. "x2": "50%",
  248. "y2": "100%",
  249. "id": getId(8),
  250. "data-allow-mismatch": "attribute"
  251. }, [renderStops("#EAEDF1", "#DCDEE0")])]), renderBuilding(), renderCloud(), renderShadow("c"), _createVNode("path", {
  252. "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",
  253. "fill": getUrlById(8),
  254. "data-allow-mismatch": "attribute"
  255. }, null)]);
  256. const renderSearch = () => _createVNode("svg", {
  257. "viewBox": "0 0 160 160"
  258. }, [_createVNode("defs", {
  259. "data-allow-mismatch": "children"
  260. }, [_createVNode("linearGradient", {
  261. "x1": "50%",
  262. "y1": "100%",
  263. "x2": "50%",
  264. "id": getId(9)
  265. }, [renderStops("#EEE", "#D8D8D8")]), _createVNode("linearGradient", {
  266. "x1": "100%",
  267. "y1": "50%",
  268. "y2": "50%",
  269. "id": getId(10)
  270. }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
  271. "x1": "50%",
  272. "x2": "50%",
  273. "y2": "100%",
  274. "id": getId(11)
  275. }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
  276. "x1": "50%",
  277. "x2": "50%",
  278. "y2": "100%",
  279. "id": getId(12)
  280. }, [renderStops("#FFF", "#F7F8FA")])]), renderBuilding(), renderCloud(), renderShadow("d"), _createVNode("g", {
  281. "transform": "rotate(-45 113 -4)",
  282. "fill": "none",
  283. "data-allow-mismatch": "children"
  284. }, [_createVNode("rect", {
  285. "fill": getUrlById(9),
  286. "x": "24",
  287. "y": "52.8",
  288. "width": "5.8",
  289. "height": "19",
  290. "rx": "1"
  291. }, null), _createVNode("rect", {
  292. "fill": getUrlById(10),
  293. "x": "22.1",
  294. "y": "67.3",
  295. "width": "9.9",
  296. "height": "28",
  297. "rx": "1"
  298. }, null), _createVNode("circle", {
  299. "stroke": getUrlById(11),
  300. "stroke-width": "8",
  301. "cx": "27",
  302. "cy": "27",
  303. "r": "27"
  304. }, null), _createVNode("circle", {
  305. "fill": getUrlById(12),
  306. "cx": "27",
  307. "cy": "27",
  308. "r": "16"
  309. }, null), _createVNode("path", {
  310. "d": "M37 7c-8 0-15 5-16 12",
  311. "stroke": getUrlById(11),
  312. "stroke-width": "3",
  313. "opacity": ".5",
  314. "stroke-linecap": "round",
  315. "transform": "rotate(45 29 13)"
  316. }, null)])]);
  317. const renderImage = () => {
  318. var _a;
  319. if (slots.image) {
  320. return slots.image();
  321. }
  322. const PRESET_IMAGES = {
  323. error: renderError,
  324. search: renderSearch,
  325. network: renderNetwork,
  326. default: renderMaterial
  327. };
  328. return ((_a = PRESET_IMAGES[props.image]) == null ? void 0 : _a.call(PRESET_IMAGES)) || _createVNode("img", {
  329. "src": props.image
  330. }, null);
  331. };
  332. return () => _createVNode("div", {
  333. "class": bem()
  334. }, [_createVNode("div", {
  335. "class": bem("image"),
  336. "style": getSizeStyle(props.imageSize)
  337. }, [renderImage()]), renderDescription(), renderBottom()]);
  338. }
  339. });
  340. export {
  341. stdin_default as default,
  342. emptyProps
  343. };