vue-devui 1.0.0-beta.2 → 1.0.0-beta.220808

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (455) hide show
  1. package/README.md +163 -172
  2. package/alert/index.d.ts +7 -0
  3. package/alert/index.es.js +79 -51
  4. package/alert/index.umd.js +1 -1
  5. package/alert/style.css +1 -1
  6. package/auto-complete/index.d.ts +7 -0
  7. package/auto-complete/index.es.js +9053 -0
  8. package/auto-complete/index.umd.js +40 -0
  9. package/auto-complete/package.json +7 -0
  10. package/auto-complete/style.css +1 -0
  11. package/avatar/index.d.ts +7 -0
  12. package/avatar/index.es.js +154 -147
  13. package/avatar/index.umd.js +1 -1
  14. package/avatar/style.css +1 -1
  15. package/badge/index.d.ts +7 -0
  16. package/badge/index.es.js +46 -21
  17. package/badge/index.umd.js +1 -1
  18. package/badge/style.css +1 -1
  19. package/button/index.d.ts +7 -0
  20. package/button/index.es.js +5921 -146
  21. package/button/index.umd.js +27 -1
  22. package/button/style.css +1 -1
  23. package/card/index.d.ts +7 -0
  24. package/card/index.es.js +64 -36
  25. package/card/index.umd.js +1 -1
  26. package/card/style.css +1 -1
  27. package/checkbox/index.d.ts +7 -0
  28. package/checkbox/index.es.js +8122 -255
  29. package/checkbox/index.umd.js +38 -1
  30. package/checkbox/style.css +1 -1
  31. package/collapse/index.d.ts +7 -0
  32. package/collapse/index.es.js +195 -0
  33. package/collapse/index.umd.js +1 -0
  34. package/{cascader → collapse}/package.json +1 -1
  35. package/collapse/style.css +1 -0
  36. package/countdown/index.d.ts +7 -0
  37. package/countdown/index.es.js +217 -0
  38. package/countdown/index.umd.js +1 -0
  39. package/{accordion → countdown}/package.json +1 -1
  40. package/countdown/style.css +1 -0
  41. package/date-picker-pro/index.d.ts +7 -0
  42. package/date-picker-pro/index.es.js +12035 -0
  43. package/date-picker-pro/index.umd.js +38 -0
  44. package/date-picker-pro/package.json +7 -0
  45. package/date-picker-pro/style.css +1 -0
  46. package/drawer/index.d.ts +7 -0
  47. package/drawer/index.es.js +205 -154
  48. package/drawer/index.umd.js +1 -1
  49. package/drawer/style.css +1 -1
  50. package/dropdown/index.d.ts +7 -0
  51. package/dropdown/index.es.js +736 -0
  52. package/dropdown/index.umd.js +1 -0
  53. package/{carousel → dropdown}/package.json +1 -1
  54. package/dropdown/style.css +1 -0
  55. package/editable-select/index.d.ts +7 -0
  56. package/editable-select/index.es.js +908 -461
  57. package/editable-select/index.umd.js +1 -1
  58. package/editable-select/style.css +1 -1
  59. package/form/index.d.ts +7 -0
  60. package/form/index.es.js +2439 -1995
  61. package/form/index.umd.js +29 -18
  62. package/form/style.css +1 -1
  63. package/fullscreen/index.d.ts +7 -0
  64. package/fullscreen/index.es.js +138 -125
  65. package/fullscreen/index.umd.js +1 -1
  66. package/fullscreen/style.css +1 -1
  67. package/grid/index.d.ts +7 -0
  68. package/grid/index.es.js +271 -0
  69. package/grid/index.umd.js +1 -0
  70. package/{toast → grid}/package.json +1 -1
  71. package/grid/style.css +1 -0
  72. package/icon/index.d.ts +7 -0
  73. package/icon/index.es.js +200 -56
  74. package/icon/index.umd.js +1 -1
  75. package/icon/style.css +1 -0
  76. package/image-preview/index.d.ts +7 -0
  77. package/image-preview/index.es.js +154 -62
  78. package/image-preview/index.umd.js +1 -1
  79. package/image-preview/style.css +1 -1
  80. package/index.d.ts +7 -0
  81. package/input/index.d.ts +7 -0
  82. package/input/index.es.js +8269 -145
  83. package/input/index.umd.js +38 -1
  84. package/input/style.css +1 -1
  85. package/input-number/index.d.ts +7 -0
  86. package/input-number/index.es.js +260 -191
  87. package/input-number/index.umd.js +1 -1
  88. package/input-number/style.css +1 -1
  89. package/layout/index.d.ts +7 -0
  90. package/layout/index.es.js +41 -26
  91. package/layout/index.umd.js +1 -1
  92. package/layout/style.css +1 -1
  93. package/loading/index.d.ts +7 -0
  94. package/loading/index.es.js +89 -73
  95. package/loading/index.umd.js +1 -1
  96. package/loading/style.css +1 -1
  97. package/mention/index.d.ts +7 -0
  98. package/mention/index.es.js +8326 -0
  99. package/mention/index.umd.js +47 -0
  100. package/mention/package.json +7 -0
  101. package/mention/style.css +1 -0
  102. package/menu/index.d.ts +7 -0
  103. package/menu/index.es.js +891 -0
  104. package/menu/index.umd.js +1 -0
  105. package/{anchor → menu}/package.json +1 -1
  106. package/menu/style.css +1 -0
  107. package/message/index.d.ts +7 -0
  108. package/message/index.es.js +533 -0
  109. package/message/index.umd.js +1 -0
  110. package/message/package.json +7 -0
  111. package/message/style.css +1 -0
  112. package/modal/index.d.ts +7 -0
  113. package/modal/index.es.js +611 -877
  114. package/modal/index.umd.js +1 -1
  115. package/modal/style.css +1 -1
  116. package/notification/index.d.ts +7 -0
  117. package/notification/index.es.js +528 -0
  118. package/notification/index.umd.js +1 -0
  119. package/notification/package.json +7 -0
  120. package/notification/style.css +1 -0
  121. package/nuxt/components/Alert.js +3 -0
  122. package/nuxt/components/Aside.js +3 -0
  123. package/nuxt/components/AutoComplete.js +3 -0
  124. package/nuxt/components/Avatar.js +3 -0
  125. package/nuxt/components/Badge.js +3 -0
  126. package/nuxt/components/Button.js +3 -0
  127. package/nuxt/components/ButtonGroup.js +3 -0
  128. package/nuxt/components/Card.js +3 -0
  129. package/nuxt/components/Checkbox.js +3 -0
  130. package/nuxt/components/CheckboxButton.js +3 -0
  131. package/nuxt/components/CheckboxGroup.js +3 -0
  132. package/nuxt/components/Col.js +3 -0
  133. package/nuxt/components/Collapse.js +3 -0
  134. package/nuxt/components/CollapseItem.js +3 -0
  135. package/nuxt/components/Column.js +3 -0
  136. package/nuxt/components/Content.js +3 -0
  137. package/nuxt/components/Countdown.js +3 -0
  138. package/nuxt/components/DRangeDatePickerPro.js +3 -0
  139. package/nuxt/components/DatePickerPro.js +3 -0
  140. package/nuxt/components/Drawer.js +3 -0
  141. package/nuxt/components/DrawerService.js +3 -0
  142. package/nuxt/components/Dropdown.js +3 -0
  143. package/nuxt/components/DropdownMenu.js +3 -0
  144. package/nuxt/components/DropdownPropsKey.js +3 -0
  145. package/nuxt/components/EditableSelect.js +3 -0
  146. package/nuxt/components/FORM_ITEM_TOKEN.js +3 -0
  147. package/nuxt/components/FORM_TOKEN.js +3 -0
  148. package/nuxt/components/FixedOverlay.js +3 -0
  149. package/nuxt/components/FlexibleOverlay.js +3 -0
  150. package/nuxt/components/Footer.js +3 -0
  151. package/nuxt/components/Form.js +3 -0
  152. package/nuxt/components/FormItem.js +3 -0
  153. package/nuxt/components/FormOperation.js +3 -0
  154. package/nuxt/components/Fullscreen.js +3 -0
  155. package/nuxt/components/Header.js +3 -0
  156. package/nuxt/components/IFileOptions.js +3 -0
  157. package/nuxt/components/IUploadOptions.js +3 -0
  158. package/nuxt/components/Icon.js +3 -0
  159. package/nuxt/components/IconGroup.js +3 -0
  160. package/nuxt/components/ImagePreviewService.js +3 -0
  161. package/nuxt/components/Input.js +3 -0
  162. package/nuxt/components/InputNumber.js +3 -0
  163. package/nuxt/components/LABEL_DATA.js +3 -0
  164. package/nuxt/components/Layout.js +3 -0
  165. package/nuxt/components/Loading.js +3 -0
  166. package/nuxt/components/LoadingOptions.js +3 -0
  167. package/nuxt/components/LoadingService.js +3 -0
  168. package/nuxt/components/Mention.js +3 -0
  169. package/nuxt/components/Menu.js +3 -0
  170. package/nuxt/components/MenuItem.js +3 -0
  171. package/nuxt/components/Message.js +3 -0
  172. package/nuxt/components/Modal.js +3 -0
  173. package/nuxt/components/Notification.js +3 -0
  174. package/nuxt/components/NotificationService.js +3 -0
  175. package/nuxt/components/Option.js +3 -0
  176. package/nuxt/components/OptionGroup.js +3 -0
  177. package/nuxt/components/Pagination.js +3 -0
  178. package/nuxt/components/Panel.js +3 -0
  179. package/nuxt/components/PanelBody.js +3 -0
  180. package/nuxt/components/PanelFooter.js +3 -0
  181. package/nuxt/components/PanelHeader.js +3 -0
  182. package/nuxt/components/Popover.js +3 -0
  183. package/nuxt/components/Progress.js +3 -0
  184. package/nuxt/components/Radio.js +3 -0
  185. package/nuxt/components/RadioButton.js +3 -0
  186. package/nuxt/components/RadioGroup.js +3 -0
  187. package/nuxt/components/Rate.js +3 -0
  188. package/nuxt/components/Result.js +3 -0
  189. package/nuxt/components/Row.js +3 -0
  190. package/nuxt/components/Search.js +3 -0
  191. package/nuxt/components/Select.js +3 -0
  192. package/nuxt/components/Skeleton.js +3 -0
  193. package/nuxt/components/SkeletonItem.js +3 -0
  194. package/nuxt/components/Slider.js +3 -0
  195. package/nuxt/components/Splitter.js +3 -0
  196. package/nuxt/components/Statistic.js +3 -0
  197. package/nuxt/components/Status.js +3 -0
  198. package/nuxt/components/Step.js +3 -0
  199. package/nuxt/components/Steps.js +3 -0
  200. package/nuxt/components/SubMenu.js +3 -0
  201. package/nuxt/components/Switch.js +3 -0
  202. package/nuxt/components/TABLE_TOKEN.js +3 -0
  203. package/nuxt/components/Tab.js +3 -0
  204. package/nuxt/components/Table.js +3 -0
  205. package/nuxt/components/Tabs.js +3 -0
  206. package/nuxt/components/Tag.js +3 -0
  207. package/nuxt/components/Textarea.js +3 -0
  208. package/nuxt/components/TimePicker.js +3 -0
  209. package/nuxt/components/TimeSelect.js +3 -0
  210. package/nuxt/components/Timeline.js +3 -0
  211. package/nuxt/components/TimelineItem.js +3 -0
  212. package/nuxt/components/Tooltip.js +3 -0
  213. package/nuxt/components/Tree.js +3 -0
  214. package/nuxt/components/Upload.js +3 -0
  215. package/nuxt/components/UploadStatus.js +3 -0
  216. package/nuxt/components/alertProps.js +3 -0
  217. package/nuxt/components/animationInjectionKey.js +3 -0
  218. package/nuxt/components/autoCompleteProps.js +3 -0
  219. package/nuxt/components/avatarProps.js +3 -0
  220. package/nuxt/components/badgeProps.js +3 -0
  221. package/nuxt/components/buttonGroupInjectionKey.js +3 -0
  222. package/nuxt/components/buttonGroupProps.js +3 -0
  223. package/nuxt/components/buttonProps.js +3 -0
  224. package/nuxt/components/cardProps.js +3 -0
  225. package/nuxt/components/checkboxGroupInjectionKey.js +3 -0
  226. package/nuxt/components/checkboxGroupProps.js +3 -0
  227. package/nuxt/components/checkboxProps.js +3 -0
  228. package/nuxt/components/colProps.js +3 -0
  229. package/nuxt/components/colPropsBaseClass.js +3 -0
  230. package/nuxt/components/colPropsBaseStyle.js +3 -0
  231. package/nuxt/components/collapseItemProps.js +3 -0
  232. package/nuxt/components/collapseProps.js +3 -0
  233. package/nuxt/components/countdownProps.js +3 -0
  234. package/nuxt/components/datePickerProCommonProps.js +3 -0
  235. package/nuxt/components/datePickerProPanelProps.js +3 -0
  236. package/nuxt/components/datePickerProProps.js +3 -0
  237. package/nuxt/components/dropdownMenuProps.js +3 -0
  238. package/nuxt/components/editableSelectProps.js +3 -0
  239. package/nuxt/components/fixedOverlayProps.js +3 -0
  240. package/nuxt/components/flexibleOverlayProps.js +3 -0
  241. package/nuxt/components/formItemProps.js +3 -0
  242. package/nuxt/components/formProps.js +3 -0
  243. package/nuxt/components/fullscreenProps.js +3 -0
  244. package/nuxt/components/iconProps.js +3 -0
  245. package/nuxt/components/imagePreviewProps.js +3 -0
  246. package/nuxt/components/inputProps.js +3 -0
  247. package/nuxt/components/loadingProps.js +3 -0
  248. package/nuxt/components/mentionProps.js +3 -0
  249. package/nuxt/components/messageProps.js +3 -0
  250. package/nuxt/components/modalProps.js +3 -0
  251. package/nuxt/components/notificationProps.js +3 -0
  252. package/nuxt/components/paginationProps.js +3 -0
  253. package/nuxt/components/panelProps.js +3 -0
  254. package/nuxt/components/popoverProps.js +3 -0
  255. package/nuxt/components/progressProps.js +3 -0
  256. package/nuxt/components/rateProps.js +3 -0
  257. package/nuxt/components/resultProps.js +3 -0
  258. package/nuxt/components/roundInjectionKey.js +3 -0
  259. package/nuxt/components/rowProps.js +3 -0
  260. package/nuxt/components/screenSizes.js +3 -0
  261. package/nuxt/components/searchProps.js +3 -0
  262. package/nuxt/components/skeletonItemProps.js +3 -0
  263. package/nuxt/components/skeletonProps.js +3 -0
  264. package/nuxt/components/sliderProps.js +3 -0
  265. package/nuxt/components/splitterProps.js +3 -0
  266. package/nuxt/components/statisticProps.js +3 -0
  267. package/nuxt/components/stepProps.js +3 -0
  268. package/nuxt/components/stepsProps.js +3 -0
  269. package/nuxt/components/svgIconProps.js +3 -0
  270. package/nuxt/components/switchProps.js +3 -0
  271. package/nuxt/components/tableProps.js +3 -0
  272. package/nuxt/components/tabsProps.js +3 -0
  273. package/nuxt/components/tagProps.js +3 -0
  274. package/nuxt/components/textareaProps.js +3 -0
  275. package/nuxt/components/timeAxisProps.js +3 -0
  276. package/nuxt/components/timerPickerPanelProps.js +3 -0
  277. package/nuxt/components/tooltipProps.js +3 -0
  278. package/nuxt/components/treeNodeProps.js +3 -0
  279. package/nuxt/components/treeProps.js +3 -0
  280. package/nuxt/components/uploadProps.js +3 -0
  281. package/nuxt/index.js +13 -0
  282. package/overlay/index.d.ts +7 -0
  283. package/overlay/index.es.js +245 -303
  284. package/overlay/index.umd.js +1 -1
  285. package/overlay/style.css +1 -1
  286. package/package.json +16 -84
  287. package/pagination/index.d.ts +7 -0
  288. package/pagination/index.es.js +333 -155
  289. package/pagination/index.umd.js +1 -1
  290. package/pagination/style.css +1 -1
  291. package/panel/index.d.ts +7 -0
  292. package/panel/index.es.js +48 -35
  293. package/panel/index.umd.js +1 -1
  294. package/panel/style.css +1 -1
  295. package/popover/index.d.ts +7 -0
  296. package/popover/index.es.js +6035 -204
  297. package/popover/index.umd.js +27 -1
  298. package/popover/style.css +1 -1
  299. package/progress/index.d.ts +7 -0
  300. package/progress/index.es.js +111 -57
  301. package/progress/index.umd.js +3 -3
  302. package/progress/style.css +1 -1
  303. package/radio/index.d.ts +7 -0
  304. package/radio/index.es.js +8015 -182
  305. package/radio/index.umd.js +38 -1
  306. package/radio/style.css +1 -1
  307. package/rate/index.d.ts +7 -0
  308. package/rate/index.es.js +78 -56
  309. package/rate/index.umd.js +1 -1
  310. package/rate/style.css +1 -1
  311. package/result/index.d.ts +7 -0
  312. package/result/index.es.js +248 -0
  313. package/result/index.umd.js +1 -0
  314. package/{sticky → result}/package.json +1 -1
  315. package/result/style.css +1 -0
  316. package/ripple/index.d.ts +7 -0
  317. package/ripple/index.es.js +56 -61
  318. package/ripple/index.umd.js +1 -1
  319. package/search/index.d.ts +7 -0
  320. package/search/index.es.js +8381 -406
  321. package/search/index.umd.js +38 -1
  322. package/search/style.css +1 -1
  323. package/select/index.d.ts +7 -0
  324. package/select/index.es.js +9331 -576
  325. package/select/index.umd.js +38 -1
  326. package/select/style.css +1 -1
  327. package/skeleton/index.d.ts +7 -0
  328. package/skeleton/index.es.js +115 -145
  329. package/skeleton/index.umd.js +1 -1
  330. package/skeleton/style.css +1 -1
  331. package/slider/index.d.ts +7 -0
  332. package/slider/index.es.js +148 -142
  333. package/slider/index.umd.js +1 -1
  334. package/slider/style.css +1 -1
  335. package/splitter/index.d.ts +7 -0
  336. package/splitter/index.es.js +6308 -181
  337. package/splitter/index.umd.js +27 -1
  338. package/splitter/style.css +1 -1
  339. package/statistic/index.d.ts +7 -0
  340. package/statistic/index.es.js +253 -0
  341. package/statistic/index.umd.js +1 -0
  342. package/statistic/package.json +7 -0
  343. package/statistic/style.css +1 -0
  344. package/status/index.d.ts +7 -0
  345. package/status/index.es.js +29 -8
  346. package/status/index.umd.js +1 -1
  347. package/status/style.css +1 -1
  348. package/steps/index.d.ts +7 -0
  349. package/steps/index.es.js +386 -0
  350. package/steps/index.umd.js +1 -0
  351. package/steps/package.json +7 -0
  352. package/steps/style.css +1 -0
  353. package/style.css +1 -1
  354. package/switch/index.d.ts +7 -0
  355. package/switch/index.es.js +7819 -65
  356. package/switch/index.umd.js +38 -1
  357. package/switch/style.css +1 -1
  358. package/table/index.d.ts +7 -0
  359. package/table/index.es.js +11435 -204
  360. package/table/index.umd.js +38 -1
  361. package/table/style.css +1 -1
  362. package/tabs/index.d.ts +7 -0
  363. package/tabs/index.es.js +356 -143
  364. package/tabs/index.umd.js +1 -1
  365. package/tabs/style.css +1 -1
  366. package/tag/index.d.ts +7 -0
  367. package/tag/index.es.js +156 -0
  368. package/tag/index.umd.js +1 -0
  369. package/tag/package.json +7 -0
  370. package/tag/style.css +1 -0
  371. package/textarea/index.d.ts +7 -0
  372. package/textarea/index.es.js +7989 -0
  373. package/textarea/index.umd.js +46 -0
  374. package/textarea/package.json +7 -0
  375. package/textarea/style.css +1 -0
  376. package/{theme → theme/theme.scss} +0 -0
  377. package/time-picker/index.d.ts +7 -0
  378. package/time-picker/index.es.js +9126 -597
  379. package/time-picker/index.umd.js +38 -1
  380. package/time-picker/style.css +1 -1
  381. package/time-select/index.d.ts +7 -0
  382. package/time-select/index.es.js +9606 -0
  383. package/time-select/index.umd.js +38 -0
  384. package/{breadcrumb → time-select}/package.json +1 -1
  385. package/time-select/style.css +1 -0
  386. package/timeline/index.d.ts +7 -0
  387. package/timeline/index.es.js +427 -0
  388. package/timeline/index.umd.js +1 -0
  389. package/timeline/package.json +7 -0
  390. package/timeline/style.css +1 -0
  391. package/tooltip/index.d.ts +7 -0
  392. package/tooltip/index.es.js +5870 -141
  393. package/tooltip/index.umd.js +27 -1
  394. package/tooltip/style.css +1 -1
  395. package/tree/index.d.ts +7 -0
  396. package/tree/index.es.js +11504 -692
  397. package/tree/index.umd.js +38 -1
  398. package/tree/style.css +1 -1
  399. package/upload/index.d.ts +7 -0
  400. package/upload/index.es.js +968 -2748
  401. package/upload/index.umd.js +1 -1
  402. package/upload/style.css +1 -1
  403. package/vue-devui.es.js +22816 -16568
  404. package/vue-devui.umd.js +42 -20
  405. package/accordion/index.es.js +0 -190
  406. package/accordion/index.umd.js +0 -1
  407. package/accordion/style.css +0 -1
  408. package/anchor/index.es.js +0 -263
  409. package/anchor/index.umd.js +0 -1
  410. package/anchor/style.css +0 -1
  411. package/breadcrumb/index.es.js +0 -127
  412. package/breadcrumb/index.umd.js +0 -1
  413. package/breadcrumb/style.css +0 -1
  414. package/carousel/index.es.js +0 -328
  415. package/carousel/index.umd.js +0 -1
  416. package/carousel/style.css +0 -1
  417. package/cascader/index.es.js +0 -187
  418. package/cascader/index.umd.js +0 -1
  419. package/cascader/style.css +0 -1
  420. package/date-picker/index.es.js +0 -1171
  421. package/date-picker/index.umd.js +0 -1
  422. package/date-picker/package.json +0 -7
  423. package/date-picker/style.css +0 -1
  424. package/nav-sprite/index.es.js +0 -742
  425. package/nav-sprite/index.umd.js +0 -1
  426. package/nav-sprite/package.json +0 -7
  427. package/quadrant-diagram/index.es.js +0 -489
  428. package/quadrant-diagram/index.umd.js +0 -1
  429. package/quadrant-diagram/package.json +0 -7
  430. package/quadrant-diagram/style.css +0 -1
  431. package/steps-guide/index.es.js +0 -211
  432. package/steps-guide/index.umd.js +0 -1
  433. package/steps-guide/package.json +0 -7
  434. package/steps-guide/style.css +0 -1
  435. package/sticky/index.es.js +0 -197
  436. package/sticky/index.umd.js +0 -1
  437. package/tag-input/index.es.js +0 -341
  438. package/tag-input/index.umd.js +0 -1
  439. package/tag-input/package.json +0 -7
  440. package/tag-input/style.css +0 -1
  441. package/time-axis/index.es.js +0 -79
  442. package/time-axis/index.umd.js +0 -1
  443. package/time-axis/package.json +0 -7
  444. package/time-axis/style.css +0 -1
  445. package/toast/index.es.js +0 -2059
  446. package/toast/index.umd.js +0 -1
  447. package/toast/style.css +0 -1
  448. package/transfer/index.es.js +0 -1446
  449. package/transfer/index.umd.js +0 -1
  450. package/transfer/package.json +0 -7
  451. package/transfer/style.css +0 -1
  452. package/tree-select/index.es.js +0 -203
  453. package/tree-select/index.umd.js +0 -1
  454. package/tree-select/package.json +0 -7
  455. package/tree-select/style.css +0 -1
@@ -1,211 +0,0 @@
1
- import { computed, ref, reactive, nextTick, defineComponent, onMounted, createVNode, Teleport } from "vue";
2
- var stepsGuide = "";
3
- const stepsGuideProps = {
4
- steps: Array,
5
- showClose: {
6
- type: Boolean,
7
- default: true
8
- },
9
- showDots: {
10
- type: Boolean,
11
- default: true
12
- }
13
- };
14
- function useStepsGuideNav(steps, stepIndex) {
15
- const currentStep = computed(() => {
16
- const _step = steps[stepIndex.value];
17
- _step.position = _step.position || "top";
18
- return _step;
19
- });
20
- const guideClassList = ["d-steps-guide"];
21
- const stepsRef = ref(null);
22
- const guidePosition = reactive({
23
- left: "",
24
- top: "",
25
- zIndex: 1100
26
- });
27
- const updateGuidePosition = () => {
28
- const baseTop = window.pageYOffset - document.documentElement.clientTop;
29
- const baseLeft = window.pageXOffset - document.documentElement.clientLeft;
30
- const currentStepPosition = currentStep.value.position;
31
- let _left, _top;
32
- if (typeof currentStepPosition !== "string") {
33
- const { top = 0, left = 0, type = "top" } = currentStepPosition;
34
- guideClassList.splice(1, 1, type);
35
- _left = left;
36
- _top = top;
37
- } else {
38
- guideClassList.splice(1, 1, currentStepPosition);
39
- const stepGuideElement = stepsRef.value;
40
- const triggerSelector = currentStep.value.target || currentStep.value.trigger;
41
- const triggerElement = document.querySelector(triggerSelector);
42
- const targetRect = triggerElement.getBoundingClientRect();
43
- _left = targetRect.left + triggerElement.clientWidth / 2 - stepGuideElement.clientWidth / 2 + baseLeft;
44
- _top = targetRect.top + triggerElement.clientHeight / 2 - stepGuideElement.clientHeight / 2 + baseTop;
45
- const positionTypes = currentStepPosition.split("-");
46
- switch (positionTypes[0]) {
47
- case "top":
48
- _top += -stepGuideElement.clientHeight / 2 - triggerElement.clientHeight;
49
- break;
50
- case "bottom":
51
- _top += stepGuideElement.clientHeight / 2 + triggerElement.clientHeight;
52
- break;
53
- case "left":
54
- _top += stepGuideElement.clientHeight / 2 - triggerElement.clientHeight;
55
- _left += -stepGuideElement.clientWidth / 2 - triggerElement.clientWidth / 2;
56
- break;
57
- case "right":
58
- _top += stepGuideElement.clientHeight / 2 - triggerElement.clientHeight;
59
- _left += stepGuideElement.clientWidth / 2 + triggerElement.clientWidth / 2;
60
- break;
61
- }
62
- switch (positionTypes[1]) {
63
- case "left":
64
- _left += stepGuideElement.clientWidth / 2 - triggerElement.clientWidth / 2;
65
- break;
66
- case "right":
67
- _left += -stepGuideElement.clientWidth / 2 + triggerElement.clientWidth / 2;
68
- break;
69
- }
70
- }
71
- guidePosition.left = _left + "px";
72
- guidePosition.top = _top + "px";
73
- };
74
- return {
75
- currentStep,
76
- stepsRef,
77
- guidePosition,
78
- guideClassList,
79
- updateGuidePosition
80
- };
81
- }
82
- function useStepsGuideCtrl(stepsCount, stepIndex, updateGuidePosition) {
83
- const showSteps = ref(true);
84
- const closeSteps = () => {
85
- showSteps.value = false;
86
- };
87
- const setCurrentIndex = (index2) => {
88
- if (index2 > stepsCount.value || index2 < 0)
89
- index2 = 0;
90
- stepIndex.value = index2;
91
- if (!showSteps.value) {
92
- showSteps.value = true;
93
- nextTick(() => {
94
- updateGuidePosition();
95
- });
96
- } else {
97
- updateGuidePosition();
98
- }
99
- };
100
- return {
101
- showSteps,
102
- closeSteps,
103
- setCurrentIndex
104
- };
105
- }
106
- var StepsGuide = defineComponent({
107
- name: "DStepsGuide",
108
- props: stepsGuideProps,
109
- emits: [],
110
- setup(props, ctx) {
111
- const stepsCount = computed(() => props.steps.length - 1);
112
- const stepIndex = ref(0);
113
- const {
114
- currentStep,
115
- stepsRef,
116
- guidePosition,
117
- guideClassList,
118
- updateGuidePosition
119
- } = useStepsGuideNav(props.steps, stepIndex);
120
- const {
121
- showSteps,
122
- closeSteps,
123
- setCurrentIndex
124
- } = useStepsGuideCtrl(stepsCount, stepIndex, updateGuidePosition);
125
- onMounted(() => {
126
- updateGuidePosition();
127
- });
128
- return {
129
- stepsCount,
130
- stepIndex,
131
- showSteps,
132
- guidePosition,
133
- guideClassList,
134
- stepsRef,
135
- currentStep,
136
- setCurrentIndex,
137
- closeSteps
138
- };
139
- },
140
- render(props) {
141
- const {
142
- showSteps,
143
- guidePosition,
144
- guideClassList,
145
- currentStep,
146
- stepIndex,
147
- stepsCount,
148
- setCurrentIndex,
149
- closeSteps,
150
- showClose,
151
- showDots
152
- } = props;
153
- return showSteps ? createVNode(Teleport, {
154
- "to": "body"
155
- }, {
156
- default: () => [createVNode("div", {
157
- "style": guidePosition,
158
- "class": guideClassList,
159
- "ref": "stepsRef"
160
- }, [createVNode("div", {
161
- "class": "devui-shining-dot"
162
- }, null), createVNode("div", {
163
- "class": "devui-shining-plus"
164
- }, null), createVNode("div", {
165
- "class": "devui-arrow"
166
- }, null), createVNode("div", {
167
- "class": "devui-guide-container"
168
- }, [createVNode("p", {
169
- "class": "devui-title"
170
- }, [currentStep.title]), showClose ? createVNode("div", {
171
- "class": "icon icon-close",
172
- "onClick": closeSteps
173
- }, null) : null, createVNode("div", {
174
- "class": "devui-content"
175
- }, [currentStep.content]), createVNode("div", {
176
- "class": "devui-ctrl"
177
- }, [showDots ? createVNode("div", {
178
- "class": "devui-dots"
179
- }, [props.steps.map((step, index2) => {
180
- return createVNode("em", {
181
- "class": ["icon icon-dot-status", currentStep === step ? "devui-active" : ""],
182
- "key": index2
183
- }, null);
184
- })]) : null, createVNode("div", {
185
- "class": "devui-guide-btn"
186
- }, [stepIndex > 0 ? createVNode("div", {
187
- "class": "devui-prev-step",
188
- "onClick": () => setCurrentIndex(--props.stepIndex)
189
- }, ["\u4E0A\u4E00\u6B65"]) : null, stepIndex === stepsCount ? createVNode("div", {
190
- "onClick": closeSteps
191
- }, ["\u6211\u77E5\u9053\u5566"]) : createVNode("div", {
192
- "class": "devui-next-step",
193
- "onClick": () => {
194
- setCurrentIndex(++props.stepIndex);
195
- }
196
- }, ["\u6211\u77E5\u9053\u5566,\u7EE7\u7EED"])])])])])]
197
- }) : null;
198
- }
199
- });
200
- StepsGuide.install = function(app) {
201
- app.component(StepsGuide.name, StepsGuide);
202
- };
203
- var index = {
204
- title: "StepsGuide \u64CD\u4F5C\u6307\u5F15",
205
- category: "\u5BFC\u822A",
206
- status: "50%",
207
- install(app) {
208
- app.use(StepsGuide);
209
- }
210
- };
211
- export { StepsGuide, index as default };
@@ -1 +0,0 @@
1
- (function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u.index={},u.Vue))})(this,function(u,e){"use strict";var b="";const N={steps:Array,showClose:{type:Boolean,default:!0},showDots:{type:Boolean,default:!0}};function V(t,h){const o=e.computed(()=>{const d=t[h.value];return d.position=d.position||"top",d}),s=["d-steps-guide"],r=e.ref(null),a=e.reactive({left:"",top:"",zIndex:1100});return{currentStep:o,stepsRef:r,guidePosition:a,guideClassList:s,updateGuidePosition:()=>{const d=window.pageYOffset-document.documentElement.clientTop,g=window.pageXOffset-document.documentElement.clientLeft,f=o.value.position;let c,l;if(typeof f!="string"){const{top:i=0,left:C=0,type:n="top"}=f;s.splice(1,1,n),c=C,l=i}else{s.splice(1,1,f);const i=r.value,C=o.value.target||o.value.trigger,n=document.querySelector(C),S=n.getBoundingClientRect();c=S.left+n.clientWidth/2-i.clientWidth/2+g,l=S.top+n.clientHeight/2-i.clientHeight/2+d;const v=f.split("-");switch(v[0]){case"top":l+=-i.clientHeight/2-n.clientHeight;break;case"bottom":l+=i.clientHeight/2+n.clientHeight;break;case"left":l+=i.clientHeight/2-n.clientHeight,c+=-i.clientWidth/2-n.clientWidth/2;break;case"right":l+=i.clientHeight/2-n.clientHeight,c+=i.clientWidth/2+n.clientWidth/2;break}switch(v[1]){case"left":c+=i.clientWidth/2-n.clientWidth/2;break;case"right":c+=-i.clientWidth/2+n.clientWidth/2;break}}a.left=c+"px",a.top=l+"px"}}}function y(t,h,o){const s=e.ref(!0);return{showSteps:s,closeSteps:()=>{s.value=!1},setCurrentIndex:p=>{(p>t.value||p<0)&&(p=0),h.value=p,s.value?o():(s.value=!0,e.nextTick(()=>{o()}))}}}var m=e.defineComponent({name:"DStepsGuide",props:N,emits:[],setup(t,h){const o=e.computed(()=>t.steps.length-1),s=e.ref(0),{currentStep:r,stepsRef:a,guidePosition:p,guideClassList:d,updateGuidePosition:g}=V(t.steps,s),{showSteps:f,closeSteps:c,setCurrentIndex:l}=y(o,s,g);return e.onMounted(()=>{g()}),{stepsCount:o,stepIndex:s,showSteps:f,guidePosition:p,guideClassList:d,stepsRef:a,currentStep:r,setCurrentIndex:l,closeSteps:c}},render(t){const{showSteps:h,guidePosition:o,guideClassList:s,currentStep:r,stepIndex:a,stepsCount:p,setCurrentIndex:d,closeSteps:g,showClose:f,showDots:c}=t;return h?e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode("div",{style:o,class:s,ref:"stepsRef"},[e.createVNode("div",{class:"devui-shining-dot"},null),e.createVNode("div",{class:"devui-shining-plus"},null),e.createVNode("div",{class:"devui-arrow"},null),e.createVNode("div",{class:"devui-guide-container"},[e.createVNode("p",{class:"devui-title"},[r.title]),f?e.createVNode("div",{class:"icon icon-close",onClick:g},null):null,e.createVNode("div",{class:"devui-content"},[r.content]),e.createVNode("div",{class:"devui-ctrl"},[c?e.createVNode("div",{class:"devui-dots"},[t.steps.map((l,i)=>e.createVNode("em",{class:["icon icon-dot-status",r===l?"devui-active":""],key:i},null))]):null,e.createVNode("div",{class:"devui-guide-btn"},[a>0?e.createVNode("div",{class:"devui-prev-step",onClick:()=>d(--t.stepIndex)},["\u4E0A\u4E00\u6B65"]):null,a===p?e.createVNode("div",{onClick:g},["\u6211\u77E5\u9053\u5566"]):e.createVNode("div",{class:"devui-next-step",onClick:()=>{d(++t.stepIndex)}},["\u6211\u77E5\u9053\u5566,\u7EE7\u7EED"])])])])])]}):null}});m.install=function(t){t.component(m.name,m)};var w={title:"StepsGuide \u64CD\u4F5C\u6307\u5F15",category:"\u5BFC\u822A",status:"50%",install(t){t.use(m)}};u.StepsGuide=m,u.default=w,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
@@ -1,7 +0,0 @@
1
- {
2
- "name": "steps-guide",
3
- "version": "0.0.0",
4
- "main": "index.umd.js",
5
- "module": "index.es.js",
6
- "style": "style.css"
7
- }
@@ -1 +0,0 @@
1
- @charset "UTF-8";.d-steps-guide{width:400px;min-height:160px;background:#5e7ce0;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) #5170ff4d;border-radius:var(--devui-border-radius-feedback, 4px);font-size:12px;color:#fff;padding:20px;position:absolute}.d-steps-guide .devui-title{font-size:12px;opacity:1;margin:0 0 20px;padding:0}.d-steps-guide>.devui-arrow,.d-steps-guide>.devui-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.d-steps-guide>.devui-arrow{border-width:8px}.d-steps-guide.left>.devui-arrow{top:23px;right:-6px;margin-top:-3px;border-right-width:0;transform:rotate(-135deg);border-left-color:#5e7ce0}.d-steps-guide.top>.devui-arrow,.d-steps-guide.top-left>.devui-arrow,.d-steps-guide.top-right>.devui-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#5e7ce0;transform:rotate(135deg)}.d-steps-guide.top>.devui-arrow{left:calc(50% - 4px)}.d-steps-guide.top-left>.devui-arrow{left:23px}.d-steps-guide.top-right>.devui-arrow{right:23px;transform:rotate(-135deg)}.d-steps-guide.right>.devui-arrow{top:23px;left:-6px;margin-top:-3px;border-left-width:0;transform:rotate(135deg);border-right-color:#5e7ce0}.d-steps-guide.bottom>.devui-arrow,.d-steps-guide.bottom-left>.devui-arrow,.d-steps-guide.bottom-right>.devui-arrow{top:-6px;margin-left:3px;border-top-width:0;border-bottom-color:#5e7ce0}.d-steps-guide.bottom>.devui-arrow{left:calc(50% - 4px);transform:rotate(-135deg)}.d-steps-guide.bottom-right>.devui-arrow{right:23px;transform:rotate(135deg)}.d-steps-guide.bottom-left>.devui-arrow{left:23px;transform:rotate(-135deg)}.d-steps-guide>.devui-shining-dot,.d-steps-guide .devui-shining-plus{position:absolute;background:#5e7ce0;width:6px;height:6px;border-radius:var(--devui-border-radius-feedback, 4px)}.d-steps-guide.left>.devui-shining-dot,.d-steps-guide.left>.devui-shining-plus{top:21px;right:-30px}.d-steps-guide.right>.devui-shining-dot,.d-steps-guide.right>.devui-shining-plus{top:21px;left:-30px}.d-steps-guide.top>.devui-shining-dot,.d-steps-guide.top>.devui-shining-plus{left:calc(50% - 3px);bottom:-30px}.d-steps-guide.top-left>.devui-shining-dot,.d-steps-guide.top-left>.devui-shining-plus{left:21px;bottom:-30px}.d-steps-guide.top-right>.devui-shining-dot,.d-steps-guide.top-right>.devui-shining-plus{right:21px;bottom:-30px}.d-steps-guide.bottom>.devui-shining-dot,.d-steps-guide.bottom>.devui-shining-plus{left:calc(50% - 3px);top:-30px}.d-steps-guide.bottom-right>.devui-shining-dot,.d-steps-guide.bottom-right>.devui-shining-plus{top:-30px;right:21px}.d-steps-guide.bottom-left>.devui-shining-dot,.d-steps-guide.bottom-left>.devui-shining-plus{top:-30px;left:21px}.d-steps-guide .devui-shining-plus{animation:devui-glow 2s 0s infinite}.d-steps-guide .devui-guide-container{position:relative}.d-steps-guide .devui-guide-container>.icon-close{position:absolute;top:0;right:0;cursor:pointer}.d-steps-guide .devui-guide-container .devui-ctrl{display:flex;flex-wrap:wrap}.d-steps-guide .devui-guide-container .devui-ctrl .devui-dots{color:#fff;position:relative;top:25px;font-size:12px;height:30px}.d-steps-guide .devui-guide-container .devui-ctrl .devui-dots>em{opacity:.2;margin:0 5px 0 2px}.d-steps-guide .devui-guide-container .devui-ctrl .devui-dots>em.devui-active{opacity:1}.d-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn{display:flex;flex-flow:row nowrap;flex-grow:1;justify-content:flex-end;padding:20px 0 0;white-space:nowrap}.d-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn>div{color:#fff;background:rgba(255,255,255,.1);border-radius:4px;padding:5px 15px;cursor:pointer;margin-left:10px}.d-steps-guide .devui-guide-container .devui-ctrl .devui-guide-btn>div.devui-prev-step{background:none;border:solid 1px rgba(255,255,255,.1)}@keyframes devui-glow{0%{transform:scale(1);opacity:.5}25%{transform:scale(2);opacity:.3}50%{transform:scale(3);opacity:.1}75%{transform:scale(2);opacity:.3}to{transform:scale(1);opacity:.5}}
@@ -1,197 +0,0 @@
1
- import { defineComponent, reactive, watch, onMounted, ref, createVNode } from "vue";
2
- var Sticky = defineComponent({
3
- name: "DSticky",
4
- props: {
5
- zIndex: {
6
- type: Number
7
- },
8
- container: {
9
- type: Object
10
- },
11
- view: {
12
- type: Object,
13
- default: () => {
14
- return {
15
- top: 0,
16
- bottom: 0
17
- };
18
- }
19
- },
20
- scrollTarget: {
21
- type: Object
22
- }
23
- },
24
- emits: ["statusChange"],
25
- setup(props, ctx) {
26
- const {
27
- slots
28
- } = ctx;
29
- let container;
30
- let scrollTarget;
31
- let scrollTimer;
32
- let scrollPreStart;
33
- const THROTTLE_DELAY = 16;
34
- const THROTTLE_TRIGGER = 100;
35
- let parentNode;
36
- let containerLeft = 0;
37
- const state = reactive({
38
- status: "normal"
39
- });
40
- watch(() => props.zIndex, () => {
41
- init();
42
- });
43
- watch(() => props.container, () => {
44
- init();
45
- });
46
- watch(() => props.scrollTarget, () => {
47
- init();
48
- });
49
- watch(() => state.status, () => {
50
- ctx.emit("statusChange", state.status);
51
- }, {
52
- immediate: true
53
- });
54
- const init = () => {
55
- parentNode = stickyRef.value.parentElement;
56
- if (!props.container) {
57
- container = parentNode;
58
- } else {
59
- container = props.container;
60
- }
61
- stickyRef.value.style.zIndex = props.zIndex;
62
- scrollTarget = props.scrollTarget || window;
63
- scrollTarget.addEventListener("scroll", throttle);
64
- initScrollStatus(scrollTarget);
65
- };
66
- const initScrollStatus = (target) => {
67
- const scrollTargets = target === window ? [document.documentElement, document.body] : [target];
68
- let flag = false;
69
- scrollTargets.forEach((scrollTarget2) => {
70
- if (scrollTarget2.scrollTop && scrollTarget2.scrollTop > 0) {
71
- flag = true;
72
- }
73
- });
74
- if (flag) {
75
- setTimeout(scrollHandler);
76
- }
77
- };
78
- const statusProcess = (status) => {
79
- const wrapper = stickyRef.value || document.createElement("div");
80
- switch (status) {
81
- case "normal":
82
- wrapper.style.top = "auto";
83
- wrapper.style.left = "auto";
84
- wrapper.style.position = "static";
85
- break;
86
- case "follow":
87
- const scrollTargetElement = scrollTarget;
88
- const viewOffset = scrollTarget && scrollTarget !== window ? scrollTargetElement.getBoundingClientRect().top : 0;
89
- wrapper.style.top = +viewOffset + (props.view && props.view.top || 0) + "px";
90
- wrapper.style.left = wrapper.getBoundingClientRect().left + "px";
91
- wrapper.style.position = "fixed";
92
- break;
93
- case "stay":
94
- wrapper.style.top = calculateRelativePosition(wrapper, parentNode, "top") + "px";
95
- wrapper.style.left = "auto";
96
- wrapper.style.position = "relative";
97
- break;
98
- case "remain":
99
- if (wrapper.style.position !== "fixed" && wrapper.style.position !== "absolute") {
100
- wrapper.style.top = calculateRelativePosition(wrapper, parentNode, "top") + "px";
101
- wrapper.style.left = "auto";
102
- wrapper.style.position = "absolute";
103
- }
104
- wrapper.style.top = calculateRemainPosition(wrapper, parentNode, container) + "px";
105
- wrapper.style.left = calculateRelativePosition(wrapper, parentNode, "left") + "px";
106
- wrapper.style.position = "relative";
107
- break;
108
- }
109
- };
110
- const throttle = () => {
111
- const fn = scrollAndResizeHock;
112
- const time = Date.now();
113
- if (scrollTimer) {
114
- clearTimeout(scrollTimer);
115
- }
116
- if (!scrollPreStart) {
117
- scrollPreStart = time;
118
- }
119
- if (time - scrollPreStart > THROTTLE_TRIGGER) {
120
- fn();
121
- scrollPreStart = null;
122
- scrollTimer = null;
123
- } else {
124
- scrollTimer = setTimeout(() => {
125
- fn();
126
- scrollPreStart = null;
127
- scrollTimer = null;
128
- }, THROTTLE_DELAY);
129
- }
130
- };
131
- const scrollAndResizeHock = () => {
132
- if (container.getBoundingClientRect().left - (containerLeft || 0) !== 0) {
133
- state.status = "stay";
134
- containerLeft = container.getBoundingClientRect().left;
135
- } else {
136
- scrollHandler();
137
- }
138
- };
139
- const scrollHandler = () => {
140
- const scrollTargetElement = scrollTarget;
141
- const wrapper = stickyRef.value || document.createElement("div");
142
- const viewOffsetTop = scrollTarget && scrollTarget !== window ? scrollTargetElement.getBoundingClientRect().top : 0;
143
- const computedStyle = window.getComputedStyle(container);
144
- if (parentNode.getBoundingClientRect().top - viewOffsetTop > (props.view && props.view.top || 0)) {
145
- state.status = "normal";
146
- statusProcess(state.status);
147
- } else if (container.getBoundingClientRect().top + parseInt(computedStyle.paddingTop, 10) + parseInt(computedStyle.borderTopWidth, 10) - viewOffsetTop >= (props.view && props.view.top || 0)) {
148
- state.status = "normal";
149
- statusProcess(state.status);
150
- } else if (container.getBoundingClientRect().bottom - parseInt(computedStyle.paddingBottom, 10) - parseInt(computedStyle.borderBottomWidth, 10) < viewOffsetTop + (props.view && props.view.top || 0) + wrapper.getBoundingClientRect().height + (props.view && props.view.bottom || 0)) {
151
- state.status = "remain";
152
- statusProcess(state.status);
153
- } else if (container.getBoundingClientRect().top + parseInt(computedStyle.paddingTop, 10) - viewOffsetTop < (props.view && props.view.top || 0)) {
154
- state.status = "follow";
155
- statusProcess(state.status);
156
- }
157
- };
158
- const calculateRelativePosition = (element, relativeElement, direction) => {
159
- const key = {
160
- left: ["left", "Left"],
161
- top: ["top", "Top"]
162
- };
163
- if (window && window.getComputedStyle) {
164
- const computedStyle = window.getComputedStyle(relativeElement);
165
- return element.getBoundingClientRect()[key[direction][0]] - relativeElement.getBoundingClientRect()[key[direction][0]] - parseInt(computedStyle[direction === "left" ? "paddingLeft" : "paddingTop"], 10) - parseInt(computedStyle[direction === "left" ? "borderLeftWidth" : "borderTopWidth"], 10);
166
- }
167
- };
168
- const calculateRemainPosition = (element, relativeElement, container2) => {
169
- if (window && window.getComputedStyle) {
170
- const computedStyle = window.getComputedStyle(container2);
171
- const result = container2.getBoundingClientRect().height - element.getBoundingClientRect().height + container2.getBoundingClientRect().top - relativeElement.getBoundingClientRect().top - parseInt(computedStyle["paddingTop"], 10) - parseInt(computedStyle["borderTopWidth"], 10) - parseInt(computedStyle["paddingBottom"], 10) - parseInt(computedStyle["borderBottomWidth"], 10);
172
- return result < 0 ? 0 : result;
173
- }
174
- };
175
- onMounted(() => {
176
- init();
177
- });
178
- const stickyRef = ref();
179
- return () => {
180
- return createVNode("div", {
181
- "ref": stickyRef
182
- }, [slots.default ? slots.default() : ""]);
183
- };
184
- }
185
- });
186
- Sticky.install = function(app) {
187
- app.component(Sticky.name, Sticky);
188
- };
189
- var index = {
190
- title: "Sticky \u4FBF\u8D34",
191
- category: "\u901A\u7528",
192
- status: "50%",
193
- install(app) {
194
- app.use(Sticky);
195
- }
196
- };
197
- export { Sticky, index as default };
@@ -1 +0,0 @@
1
- (function(a,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(a=typeof globalThis!="undefined"?globalThis:a||self,i(a.index={},a.Vue))})(this,function(a,i){"use strict";var r=i.defineComponent({name:"DSticky",props:{zIndex:{type:Number},container:{type:Object},view:{type:Object,default:()=>({top:0,bottom:0})},scrollTarget:{type:Object}},emits:["statusChange"],setup(e,h){const{slots:C}=h;let c,d,f,g;const B=16,S=100;let u,R=0;const s=i.reactive({status:"normal"});i.watch(()=>e.zIndex,()=>{w()}),i.watch(()=>e.container,()=>{w()}),i.watch(()=>e.scrollTarget,()=>{w()}),i.watch(()=>s.status,()=>{h.emit("statusChange",s.status)},{immediate:!0});const w=()=>{u=p.value.parentElement,e.container?c=e.container:c=u,p.value.style.zIndex=e.zIndex,d=e.scrollTarget||window,d.addEventListener("scroll",x),I(d)},I=l=>{const t=l===window?[document.documentElement,document.body]:[l];let o=!1;t.forEach(n=>{n.scrollTop&&n.scrollTop>0&&(o=!0)}),o&&setTimeout(v)},y=l=>{const t=p.value||document.createElement("div");switch(l){case"normal":t.style.top="auto",t.style.left="auto",t.style.position="static";break;case"follow":const n=d&&d!==window?d.getBoundingClientRect().top:0;t.style.top=+n+(e.view&&e.view.top||0)+"px",t.style.left=t.getBoundingClientRect().left+"px",t.style.position="fixed";break;case"stay":t.style.top=T(t,u,"top")+"px",t.style.left="auto",t.style.position="relative";break;case"remain":t.style.position!=="fixed"&&t.style.position!=="absolute"&&(t.style.top=T(t,u,"top")+"px",t.style.left="auto",t.style.position="absolute"),t.style.top=k(t,u,c)+"px",t.style.left=T(t,u,"left")+"px",t.style.position="relative";break}},x=()=>{const l=E,t=Date.now();f&&clearTimeout(f),g||(g=t),t-g>S?(l(),g=null,f=null):f=setTimeout(()=>{l(),g=null,f=null},B)},E=()=>{c.getBoundingClientRect().left-(R||0)!=0?(s.status="stay",R=c.getBoundingClientRect().left):v()},v=()=>{const l=d,t=p.value||document.createElement("div"),o=d&&d!==window?l.getBoundingClientRect().top:0,n=window.getComputedStyle(c);u.getBoundingClientRect().top-o>(e.view&&e.view.top||0)||c.getBoundingClientRect().top+parseInt(n.paddingTop,10)+parseInt(n.borderTopWidth,10)-o>=(e.view&&e.view.top||0)?(s.status="normal",y(s.status)):c.getBoundingClientRect().bottom-parseInt(n.paddingBottom,10)-parseInt(n.borderBottomWidth,10)<o+(e.view&&e.view.top||0)+t.getBoundingClientRect().height+(e.view&&e.view.bottom||0)?(s.status="remain",y(s.status)):c.getBoundingClientRect().top+parseInt(n.paddingTop,10)-o<(e.view&&e.view.top||0)&&(s.status="follow",y(s.status))},T=(l,t,o)=>{const n={left:["left","Left"],top:["top","Top"]};if(window&&window.getComputedStyle){const m=window.getComputedStyle(t);return l.getBoundingClientRect()[n[o][0]]-t.getBoundingClientRect()[n[o][0]]-parseInt(m[o==="left"?"paddingLeft":"paddingTop"],10)-parseInt(m[o==="left"?"borderLeftWidth":"borderTopWidth"],10)}},k=(l,t,o)=>{if(window&&window.getComputedStyle){const n=window.getComputedStyle(o),m=o.getBoundingClientRect().height-l.getBoundingClientRect().height+o.getBoundingClientRect().top-t.getBoundingClientRect().top-parseInt(n.paddingTop,10)-parseInt(n.borderTopWidth,10)-parseInt(n.paddingBottom,10)-parseInt(n.borderBottomWidth,10);return m<0?0:m}};i.onMounted(()=>{w()});const p=i.ref();return()=>i.createVNode("div",{ref:p},[C.default?C.default():""])}});r.install=function(e){e.component(r.name,r)};var b={title:"Sticky \u4FBF\u8D34",category:"\u901A\u7528",status:"50%",install(e){e.use(r)}};a.Sticky=r,a.default=b,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});