Empty.mjs 9.9 KB

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