native-document 1.0.165 → 1.0.168

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 (488) hide show
  1. package/.vitepress/config.js +166 -0
  2. package/CHANGELOG.md +153 -0
  3. package/components.d.ts +2 -0
  4. package/components.js +2 -1
  5. package/devtools/widget.js +1 -1
  6. package/dist/native-document.components.min.js +11589 -2983
  7. package/dist/native-document.dev.js +2280 -396
  8. package/dist/native-document.dev.js.map +1 -1
  9. package/dist/native-document.min.js +1 -1
  10. package/docs/advanced-components.md +213 -608
  11. package/docs/anchor.md +173 -312
  12. package/docs/cache.md +95 -803
  13. package/docs/cli.md +179 -0
  14. package/docs/components/accordion.md +172 -0
  15. package/docs/components/alert.md +99 -0
  16. package/docs/components/avatar.md +160 -0
  17. package/docs/components/badge.md +102 -0
  18. package/docs/components/breadcrumb.md +89 -0
  19. package/docs/components/button.md +183 -0
  20. package/docs/components/card.md +69 -0
  21. package/docs/components/context-menu.md +118 -0
  22. package/docs/components/data-table.md +345 -0
  23. package/docs/components/dropdown.md +214 -0
  24. package/docs/components/form/autocomplete-field.md +81 -0
  25. package/docs/components/form/checkbox-field.md +41 -0
  26. package/docs/components/form/checkbox-group-field.md +54 -0
  27. package/docs/components/form/color-field.md +64 -0
  28. package/docs/components/form/date-field.md +92 -0
  29. package/docs/components/form/field-collection.md +63 -0
  30. package/docs/components/form/file-field.md +203 -0
  31. package/docs/components/form/form-control.md +87 -0
  32. package/docs/components/form/image-field.md +90 -0
  33. package/docs/components/form/index.md +115 -0
  34. package/docs/components/form/number-field.md +65 -0
  35. package/docs/components/form/radio-field.md +51 -0
  36. package/docs/components/form/select-field.md +123 -0
  37. package/docs/components/form/slider.md +136 -0
  38. package/docs/components/form/string-field.md +134 -0
  39. package/docs/components/form/textarea-field.md +65 -0
  40. package/docs/components/form-fields.md +372 -0
  41. package/docs/components/getting-started.md +264 -0
  42. package/docs/components/index.md +337 -0
  43. package/docs/components/layout.md +279 -0
  44. package/docs/components/list.md +73 -0
  45. package/docs/components/menu.md +215 -0
  46. package/docs/components/modal.md +156 -0
  47. package/docs/components/pagination.md +95 -0
  48. package/docs/components/popover.md +131 -0
  49. package/docs/components/progress.md +111 -0
  50. package/docs/components/shortcut-manager.md +221 -0
  51. package/docs/components/simple-table.md +107 -0
  52. package/docs/components/skeleton.md +155 -0
  53. package/docs/components/spinner.md +100 -0
  54. package/docs/components/splitter.md +133 -0
  55. package/docs/components/stepper.md +163 -0
  56. package/docs/components/switch.md +113 -0
  57. package/docs/components/tabs.md +153 -0
  58. package/docs/components/toast.md +119 -0
  59. package/docs/components/tooltip.md +151 -0
  60. package/docs/components/traits.md +261 -0
  61. package/docs/conditional-rendering.md +170 -588
  62. package/docs/contributing.md +300 -25
  63. package/docs/core-concepts.md +205 -374
  64. package/docs/elements.md +251 -367
  65. package/docs/extending-native-document-element.md +192 -207
  66. package/docs/filters.md +153 -1122
  67. package/docs/getting-started.md +193 -267
  68. package/docs/i18n.md +241 -0
  69. package/docs/index.md +76 -0
  70. package/docs/lifecycle-events.md +143 -75
  71. package/docs/list-rendering.md +227 -852
  72. package/docs/memory-management.md +134 -47
  73. package/docs/native-document-element.md +337 -186
  74. package/docs/native-fetch.md +99 -630
  75. package/docs/observable-resource.md +364 -0
  76. package/docs/observables.md +592 -526
  77. package/docs/routing.md +244 -653
  78. package/docs/state-management.md +134 -241
  79. package/docs/svg-elements.md +231 -0
  80. package/docs/theming.md +409 -0
  81. package/docs/validation.md +95 -97
  82. package/docs/vitepress-conventions.md +219 -0
  83. package/eslint.config.js +28 -33
  84. package/i18n.js +1 -1
  85. package/i18n.ts +2 -0
  86. package/index.js +3 -0
  87. package/package.json +36 -14
  88. package/readme.md +269 -89
  89. package/src/components/$traits/has-draggable/HasDraggable.d.ts +4 -0
  90. package/src/components/$traits/has-draggable/HasDraggable.js +13 -0
  91. package/src/components/$traits/has-items/HasItems.d.ts +9 -0
  92. package/src/components/$traits/has-items/HasItems.js +6 -6
  93. package/src/components/$traits/has-position/HasFullPosition.d.ts +14 -0
  94. package/src/components/$traits/has-position/HasFullPosition.js +44 -0
  95. package/src/components/$traits/has-position/HasPosition.d.ts +7 -0
  96. package/src/components/$traits/has-position/HasPosition.js +23 -1
  97. package/src/components/$traits/has-resizable/HasResizable.d.ts +13 -0
  98. package/src/components/$traits/has-resizable/HasResizable.js +9 -0
  99. package/src/components/$traits/has-validation/HasValidation.d.ts +17 -0
  100. package/src/components/$traits/has-validation/HasValidation.js +54 -7
  101. package/src/components/BaseComponent.d.ts +32 -0
  102. package/src/components/BaseComponent.js +65 -9
  103. package/src/components/accordion/Accordion.js +39 -14
  104. package/src/components/accordion/AccordionItem.js +45 -14
  105. package/src/components/accordion/index.js +2 -2
  106. package/src/components/accordion/types/Accordion.d.ts +47 -0
  107. package/src/components/accordion/types/AccordionItem.d.ts +48 -0
  108. package/src/components/alert/Alert.js +70 -38
  109. package/src/components/alert/index.js +2 -2
  110. package/src/components/alert/types/Alert.d.ts +62 -0
  111. package/src/components/avatar/Avatar.js +49 -12
  112. package/src/components/avatar/AvatarGroup.js +50 -2
  113. package/src/components/avatar/index.js +2 -2
  114. package/src/components/avatar/types/Avatar.d.ts +74 -0
  115. package/src/components/avatar/types/AvatarGroup.d.ts +32 -0
  116. package/src/components/badge/Badge.js +125 -5
  117. package/src/components/badge/index.js +2 -2
  118. package/src/components/badge/types/Badge.d.ts +51 -0
  119. package/src/components/breadcrumb/BreadCrumb.js +61 -5
  120. package/src/components/breadcrumb/index.js +2 -2
  121. package/src/components/breadcrumb/types/BreadCrumb.d.ts +42 -0
  122. package/src/components/button/Button.js +164 -9
  123. package/src/components/button/index.js +1 -1
  124. package/src/components/button/types/Button.d.ts +62 -0
  125. package/src/components/card/Card.js +204 -32
  126. package/src/components/card/index.js +4 -4
  127. package/src/components/card/types/Card.d.ts +42 -0
  128. package/src/components/context-menu/ContextMenu.js +49 -5
  129. package/src/components/context-menu/ContextMenuGroup.js +15 -2
  130. package/src/components/context-menu/ContextMenuItem.js +14 -2
  131. package/src/components/context-menu/index.js +5 -5
  132. package/src/components/context-menu/types/ContextMenu.d.ts +30 -0
  133. package/src/components/context-menu/types/ContextMenuGroup.d.ts +18 -0
  134. package/src/components/context-menu/types/ContextMenuItem.d.ts +18 -0
  135. package/src/components/divider/Divider.js +120 -4
  136. package/src/components/divider/index.js +3 -3
  137. package/src/components/divider/types/Divider.d.ts +55 -0
  138. package/src/components/dropdown/Dropdown.js +239 -16
  139. package/src/components/dropdown/DropdownDivider.js +22 -2
  140. package/src/components/dropdown/DropdownGroup.js +44 -5
  141. package/src/components/dropdown/DropdownItem.js +76 -3
  142. package/src/components/dropdown/DropdownTrigger.js +49 -20
  143. package/src/components/dropdown/helpers.js +1 -1
  144. package/src/components/dropdown/index.js +6 -6
  145. package/src/components/dropdown/types/Dropdown.d.ts +88 -0
  146. package/src/components/dropdown/types/DropdownDivider.d.ts +20 -0
  147. package/src/components/dropdown/types/DropdownGroup.d.ts +25 -0
  148. package/src/components/dropdown/types/DropdownItem.d.ts +41 -0
  149. package/src/components/dropdown/types/DropdownTrigger.d.ts +32 -0
  150. package/src/components/form/FormControl.js +156 -13
  151. package/src/components/form/field/Field.js +172 -9
  152. package/src/components/form/field/FieldCollection.js +116 -12
  153. package/src/components/form/field/types/AutocompleteField.js +92 -2
  154. package/src/components/form/field/types/CheckboxField.js +43 -2
  155. package/src/components/form/field/types/CheckboxGroupField.js +83 -6
  156. package/src/components/form/field/types/ColorField.js +56 -3
  157. package/src/components/form/field/types/DateField.js +155 -4
  158. package/src/components/form/field/types/EmailField.js +54 -4
  159. package/src/components/form/field/types/FileField.js +140 -6
  160. package/src/components/form/field/types/HiddenField.js +27 -1
  161. package/src/components/form/field/types/ImageField.js +82 -3
  162. package/src/components/form/field/types/NumberField.js +97 -4
  163. package/src/components/form/field/types/PasswordField.js +103 -7
  164. package/src/components/form/field/types/RadioField.js +75 -4
  165. package/src/components/form/field/types/RangeField.js +67 -1
  166. package/src/components/form/field/types/SearchField.js +41 -2
  167. package/src/components/form/field/types/SelectField.js +133 -4
  168. package/src/components/form/field/types/StringField.js +91 -2
  169. package/src/components/form/field/types/TelField.js +55 -4
  170. package/src/components/form/field/types/TextAreaField.js +76 -2
  171. package/src/components/form/field/types/TimeField.js +120 -5
  172. package/src/components/form/field/types/UrlField.js +59 -4
  173. package/src/components/form/field/types/file-field-mode/FileAvatarMode.js +83 -4
  174. package/src/components/form/field/types/file-field-mode/FileDropzoneMode.js +61 -3
  175. package/src/components/form/field/types/file-field-mode/FileItemPreview.js +79 -3
  176. package/src/components/form/field/types/file-field-mode/FileNativeMode.js +24 -2
  177. package/src/components/form/field/types/file-field-mode/FileUploadButtonMode.js +64 -3
  178. package/src/components/form/field/types/file-field-mode/FileWallMode.js +56 -3
  179. package/src/components/form/index.js +28 -28
  180. package/src/components/form/types/Field.d.ts +73 -0
  181. package/src/components/form/types/FieldCollection.d.ts +53 -0
  182. package/src/components/form/types/FormControl.d.ts +64 -0
  183. package/src/components/form/types/fields/AutocompleteField.d.ts +48 -0
  184. package/src/components/form/types/fields/CheckboxField.d.ts +33 -0
  185. package/src/components/form/types/fields/CheckboxGroupField.d.ts +49 -0
  186. package/src/components/form/types/fields/ColorField.d.ts +37 -0
  187. package/src/components/form/types/fields/DateField.d.ts +70 -0
  188. package/src/components/form/types/fields/EmailField.d.ts +35 -0
  189. package/src/components/form/types/fields/FileAvatarMode.d.ts +46 -0
  190. package/src/components/form/types/fields/FileDropzoneMode.d.ts +28 -0
  191. package/src/components/form/types/fields/FileField.d.ts +56 -0
  192. package/src/components/form/types/fields/FileItemPreview.d.ts +35 -0
  193. package/src/components/form/types/fields/FileNativeMode.d.ts +21 -0
  194. package/src/components/form/types/fields/FileUploadButtonMode.d.ts +34 -0
  195. package/src/components/form/types/fields/FileWallMode.d.ts +32 -0
  196. package/src/components/form/types/fields/HiddenField.d.ts +26 -0
  197. package/src/components/form/types/fields/ImageField.d.ts +45 -0
  198. package/src/components/form/types/fields/NumberField.d.ts +48 -0
  199. package/src/components/form/types/fields/PasswordField.d.ts +46 -0
  200. package/src/components/form/types/fields/RadioField.d.ts +48 -0
  201. package/src/components/form/types/fields/RangeField.d.ts +44 -0
  202. package/src/components/form/types/fields/SearchField.d.ts +34 -0
  203. package/src/components/form/types/fields/SelectField.d.ts +71 -0
  204. package/src/components/form/types/fields/StringField.d.ts +48 -0
  205. package/src/components/form/types/fields/TelField.d.ts +37 -0
  206. package/src/components/form/types/fields/TextAreaField.d.ts +44 -0
  207. package/src/components/form/types/fields/TimeField.d.ts +51 -0
  208. package/src/components/form/types/fields/UrlField.d.ts +35 -0
  209. package/src/components/form/validation/Validation.js +54 -54
  210. package/src/components/index.d.ts +160 -0
  211. package/src/components/list/HasListItem.js +171 -0
  212. package/src/components/list/List.js +85 -67
  213. package/src/components/list/ListDivider.js +39 -0
  214. package/src/components/list/ListGroup.js +105 -38
  215. package/src/components/list/ListItem.js +158 -49
  216. package/src/components/list/index.js +8 -6
  217. package/src/components/list/types/List.d.ts +43 -0
  218. package/src/components/list/types/ListGroup.d.ts +37 -0
  219. package/src/components/list/types/ListItem.d.ts +53 -0
  220. package/src/components/menu/HasMenuItem.js +55 -6
  221. package/src/components/menu/Menu.js +113 -22
  222. package/src/components/menu/MenuDivider.js +18 -2
  223. package/src/components/menu/MenuGroup.js +61 -6
  224. package/src/components/menu/MenuItem.js +95 -11
  225. package/src/components/menu/MenuLink.js +27 -2
  226. package/src/components/menu/index.js +6 -6
  227. package/src/components/menu/types/Menu.d.ts +60 -0
  228. package/src/components/menu/types/MenuDivider.d.ts +19 -0
  229. package/src/components/menu/types/MenuGroup.d.ts +44 -0
  230. package/src/components/menu/types/MenuItem.d.ts +46 -0
  231. package/src/components/menu/types/MenuLink.d.ts +16 -0
  232. package/src/components/modal/Modal.js +258 -17
  233. package/src/components/modal/index.js +3 -3
  234. package/src/components/modal/types/Modal.d.ts +94 -0
  235. package/src/components/pagination/Pagination.js +155 -7
  236. package/src/components/pagination/index.js +3 -3
  237. package/src/components/pagination/types/Pagination.d.ts +68 -0
  238. package/src/components/popover/Popover.js +198 -11
  239. package/src/components/popover/PopoverFooter.js +33 -9
  240. package/src/components/popover/PopoverHeader.js +33 -8
  241. package/src/components/popover/index.js +4 -4
  242. package/src/components/popover/types/Popover.d.ts +83 -0
  243. package/src/components/popover/types/PopoverFooter.d.ts +24 -0
  244. package/src/components/popover/types/PopoverHeader.d.ts +26 -0
  245. package/src/components/progress/Progress.js +182 -13
  246. package/src/components/progress/index.js +3 -3
  247. package/src/components/progress/types/Progress.d.ts +77 -0
  248. package/src/components/skeleton/Skeleton.js +117 -49
  249. package/src/components/skeleton/index.js +3 -3
  250. package/src/components/skeleton/types/Skeleton.d.ts +55 -0
  251. package/src/components/slider/Slider.js +207 -10
  252. package/src/components/slider/index.js +2 -2
  253. package/src/components/slider/types/Slider.d.ts +82 -0
  254. package/src/components/spacer/Spacer.js +12 -3
  255. package/src/components/spacer/index.js +2 -2
  256. package/src/components/spacer/types/Spacer.d.ts +19 -0
  257. package/src/components/spinner/Spinner.js +180 -9
  258. package/src/components/spinner/index.js +3 -3
  259. package/src/components/spinner/types/Spinner.d.ts +71 -0
  260. package/src/components/splitter/Splitter.js +76 -13
  261. package/src/components/splitter/SplitterGutter.js +67 -5
  262. package/src/components/splitter/SplitterPanel.js +69 -2
  263. package/src/components/splitter/index.js +5 -5
  264. package/src/components/splitter/types/Splitter.d.ts +38 -0
  265. package/src/components/splitter/types/SplitterGutter.d.ts +38 -0
  266. package/src/components/splitter/types/SplitterPanel.d.ts +41 -0
  267. package/src/components/stacks/AbsoluteStack.js +23 -3
  268. package/src/components/stacks/FixedStack.js +23 -3
  269. package/src/components/stacks/HStack.js +24 -3
  270. package/src/components/stacks/PositionStack.js +111 -3
  271. package/src/components/stacks/RelativeStack.js +23 -3
  272. package/src/components/stacks/Stack.js +73 -2
  273. package/src/components/stacks/VStack.js +24 -4
  274. package/src/components/stacks/index.js +7 -7
  275. package/src/components/stacks/types/AbsoluteStack.d.ts +16 -0
  276. package/src/components/stacks/types/FixedStack.d.ts +16 -0
  277. package/src/components/stacks/types/HStack.d.ts +16 -0
  278. package/src/components/stacks/types/PositionStack.d.ts +54 -0
  279. package/src/components/stacks/types/RelativeStack.d.ts +17 -0
  280. package/src/components/stacks/types/Stack.d.ts +39 -0
  281. package/src/components/stacks/types/VStack.d.ts +16 -0
  282. package/src/components/stepper/Stepper.js +152 -12
  283. package/src/components/stepper/StepperStep.js +104 -3
  284. package/src/components/stepper/index.js +4 -4
  285. package/src/components/stepper/types/Stepper.d.ts +68 -0
  286. package/src/components/stepper/types/StepperStep.d.ts +54 -0
  287. package/src/components/switch/Switch.js +143 -6
  288. package/src/components/switch/index.js +1 -1
  289. package/src/components/switch/types/Switch.d.ts +55 -0
  290. package/src/components/table/Column.js +105 -6
  291. package/src/components/table/ColumnGroup.js +48 -3
  292. package/src/components/table/DataTable.js +256 -19
  293. package/src/components/table/SimpleTable.js +58 -4
  294. package/src/components/table/index.js +2 -2
  295. package/src/components/table/types/Column.d.ts +49 -0
  296. package/src/components/table/types/ColumnGroup.d.ts +28 -0
  297. package/src/components/table/types/DataTable.d.ts +97 -0
  298. package/src/components/table/types/SimpleTable.d.ts +40 -0
  299. package/src/components/tabs/Tabs.js +192 -5
  300. package/src/components/tabs/index.js +3 -3
  301. package/src/components/tabs/types/Tabs.d.ts +78 -0
  302. package/src/components/toast/Toast.js +133 -5
  303. package/src/components/toast/index.js +3 -3
  304. package/src/components/toast/types/Toast.d.ts +57 -0
  305. package/src/components/toast/types/ToastError.d.ts +7 -0
  306. package/src/components/toast/types/ToastInfo.d.ts +7 -0
  307. package/src/components/toast/types/ToastSuccess.d.ts +7 -0
  308. package/src/components/toast/types/ToastWarning.d.ts +7 -0
  309. package/src/components/tooltip/Tooltip.js +157 -13
  310. package/src/components/tooltip/index.js +2 -2
  311. package/src/components/tooltip/prototypes.js +1 -1
  312. package/src/components/tooltip/types/Tooltip.d.ts +65 -0
  313. package/src/core/data/MemoryManager.js +2 -2
  314. package/src/core/data/Observable.js +15 -18
  315. package/src/core/data/ObservableArray.js +118 -46
  316. package/src/core/data/ObservableChecker.js +2 -2
  317. package/src/core/data/ObservableItem.js +135 -21
  318. package/src/core/data/ObservableObject.js +126 -35
  319. package/src/core/data/ObservableResource.js +118 -3
  320. package/src/core/data/Store.js +142 -26
  321. package/src/core/data/observable-helpers/observable.is-to.js +196 -1
  322. package/src/core/data/observable-helpers/observable.prototypes.js +35 -8
  323. package/src/core/elements/anchor/anchor-with-sentinel.js +23 -2
  324. package/src/core/elements/anchor/anchor.js +16 -7
  325. package/src/core/elements/anchor/one-child-anchor-overwriting.js +2 -2
  326. package/src/core/elements/content-formatter.js +1 -1
  327. package/src/core/elements/control/for-each-array.js +9 -9
  328. package/src/core/elements/control/for-each.js +14 -14
  329. package/src/core/elements/control/show-if.js +11 -11
  330. package/src/core/elements/control/show-when.js +5 -5
  331. package/src/core/elements/control/switch.js +14 -14
  332. package/src/core/elements/description-list.js +1 -1
  333. package/src/core/elements/form.js +2 -2
  334. package/src/core/elements/fragment.js +1 -1
  335. package/src/core/elements/html5-semantics.js +1 -1
  336. package/src/core/elements/img.js +3 -3
  337. package/src/core/elements/interactive.js +1 -1
  338. package/src/core/elements/list.js +1 -1
  339. package/src/core/elements/medias.js +1 -1
  340. package/src/core/elements/meta-data.js +1 -1
  341. package/src/core/elements/svg.js +1 -1
  342. package/src/core/elements/table.js +1 -1
  343. package/src/core/errors/ArgTypesError.js +1 -1
  344. package/src/core/utils/HasEventEmitter.js +36 -2
  345. package/src/core/utils/args-types.js +9 -9
  346. package/src/core/utils/cache.js +1 -1
  347. package/src/core/utils/callback-handler.js +29 -0
  348. package/src/core/utils/debug-manager.js +6 -6
  349. package/src/core/utils/events.js +139 -139
  350. package/src/core/utils/filters/date.js +84 -3
  351. package/src/core/utils/filters/standard.js +136 -11
  352. package/src/core/utils/filters/strings.js +34 -2
  353. package/src/core/utils/filters/utils.js +40 -4
  354. package/src/core/utils/formatters.js +4 -4
  355. package/src/core/utils/helpers.js +39 -7
  356. package/src/core/utils/localstorage.js +11 -11
  357. package/src/core/utils/memoize.js +56 -3
  358. package/src/core/utils/plugins-manager.js +3 -3
  359. package/src/core/utils/property-accumulator.js +6 -6
  360. package/src/core/utils/prototypes.js +26 -1
  361. package/src/core/utils/shortcut-manager.js +2 -2
  362. package/src/core/utils/validator.js +8 -8
  363. package/src/core/wrappers/AttributesWrapper.js +32 -22
  364. package/src/core/wrappers/DocumentObserver.js +3 -3
  365. package/src/core/wrappers/ElementCreator.js +5 -5
  366. package/src/core/wrappers/HtmlElementWrapper.js +38 -12
  367. package/src/core/wrappers/NDElement.js +328 -22
  368. package/src/core/wrappers/NdPrototype.js +60 -16
  369. package/src/core/wrappers/SingletonView.js +50 -2
  370. package/src/core/wrappers/SvgElementWrapper.js +1 -1
  371. package/src/core/wrappers/constants.js +35 -2
  372. package/src/core/wrappers/prototypes/attributes-extensions.js +7 -7
  373. package/src/core/wrappers/prototypes/nd-element-extensions.js +72 -6
  374. package/src/core/wrappers/prototypes/nd-element.transition.extensions.js +42 -2
  375. package/src/core/wrappers/template-cloner/NodeCloner.js +53 -8
  376. package/src/core/wrappers/template-cloner/TemplateCloner.js +75 -6
  377. package/src/core/wrappers/template-cloner/attributes-hydrator.js +58 -2
  378. package/src/core/wrappers/template-cloner/utils.js +42 -6
  379. package/src/fetch/NativeFetch.js +3 -3
  380. package/src/i18n/bin/scan.js +6 -6
  381. package/src/i18n/index.d.ts +2 -0
  382. package/src/i18n/service/I18nService.d.ts +27 -0
  383. package/src/i18n/service/I18nService.js +5 -5
  384. package/src/i18n/service/functions.d.ts +22 -0
  385. package/src/i18n/service/functions.js +2 -2
  386. package/src/router/Route.js +3 -3
  387. package/src/router/RouteGroupHelper.js +2 -2
  388. package/src/router/Router.js +15 -15
  389. package/src/router/RouterComponent.js +33 -7
  390. package/src/router/link.js +4 -4
  391. package/src/router/modes/HashRouter.js +2 -2
  392. package/src/router/modes/HistoryRouter.js +2 -2
  393. package/src/router/modes/MemoryRouter.js +1 -1
  394. package/src/ui/components/accordion/AccordionItemRender.js +3 -3
  395. package/src/ui/components/accordion/AccordionRender.js +1 -1
  396. package/src/ui/components/alert/AlertRender.js +10 -10
  397. package/src/ui/components/avatar/avata-group/AvatarGroupRender.js +1 -1
  398. package/src/ui/components/avatar/avatar/AvatarRender.js +1 -1
  399. package/src/ui/components/breadcrumb/BreadcrumbRender.js +2 -2
  400. package/src/ui/components/button/ButtonRender.js +1 -1
  401. package/src/ui/components/card/CardRender.js +133 -0
  402. package/src/ui/components/card/card.css +169 -0
  403. package/src/ui/components/contextmenu/ContextmenuRender.js +6 -6
  404. package/src/ui/components/dropdown/DropdownRender.js +8 -8
  405. package/src/ui/components/dropdown/group/DropdownGroupRender.js +2 -2
  406. package/src/ui/components/dropdown/item/DropdownItemRender.js +1 -1
  407. package/src/ui/components/form/FieldCollectionRender.js +2 -2
  408. package/src/ui/components/form/FormControlRender.js +5 -5
  409. package/src/ui/components/form/fields/AutocompleteFieldRender.js +3 -3
  410. package/src/ui/components/form/fields/CheckboxFieldRender.js +1 -1
  411. package/src/ui/components/form/fields/CheckboxGroupFieldRender.js +1 -1
  412. package/src/ui/components/form/fields/DateFieldRender.js +7 -7
  413. package/src/ui/components/form/fields/EmailFieldRender.js +1 -1
  414. package/src/ui/components/form/fields/FieldRender.js +4 -4
  415. package/src/ui/components/form/fields/FileFieldRender.js +1 -1
  416. package/src/ui/components/form/fields/PasswordFieldRender.js +2 -2
  417. package/src/ui/components/form/fields/RadioFieldRender.js +1 -1
  418. package/src/ui/components/form/fields/RangeFieldRender.js +1 -1
  419. package/src/ui/components/form/fields/SelectFieldRender.js +2 -2
  420. package/src/ui/components/form/fields/SliderFieldRender.js +6 -6
  421. package/src/ui/components/form/fields/StringFieldRender.js +1 -1
  422. package/src/ui/components/form/fields/TelFieldRender.js +1 -1
  423. package/src/ui/components/form/fields/TextAreaFieldRender.js +1 -1
  424. package/src/ui/components/form/fields/TimeFieldRender.js +3 -3
  425. package/src/ui/components/form/fields/UrlFieldRender.js +1 -1
  426. package/src/ui/components/form/file-upload-mode/FileAvatarModeRender.js +1 -1
  427. package/src/ui/components/form/file-upload-mode/FileDropzoneModeRender.js +2 -2
  428. package/src/ui/components/form/file-upload-mode/FileUploadButtonModeRender.js +2 -2
  429. package/src/ui/components/form/file-upload-mode/FileWallModeRender.js +1 -1
  430. package/src/ui/components/form/helpers.js +8 -8
  431. package/src/ui/components/form/index.js +27 -27
  432. package/src/ui/components/list/ListRender.js +18 -0
  433. package/src/ui/components/list/divider/ListDividerRender.js +10 -0
  434. package/src/ui/components/list/divider/list-divider.css +12 -0
  435. package/src/ui/components/list/group/ListGroupRender.js +61 -0
  436. package/src/ui/components/list/group/list-group.css +62 -0
  437. package/src/ui/components/list/item/ListItemRender.js +238 -0
  438. package/src/ui/components/list/item/list-item.css +191 -0
  439. package/src/ui/components/list/list.css +24 -0
  440. package/src/ui/components/menu/MenuDividerRender.js +1 -1
  441. package/src/ui/components/menu/MenuGroupRender.js +3 -3
  442. package/src/ui/components/menu/MenuItemRender.js +2 -2
  443. package/src/ui/components/menu/MenuLinkRender.js +3 -3
  444. package/src/ui/components/menu/helpers.js +4 -4
  445. package/src/ui/components/modal/ModalRender.js +4 -4
  446. package/src/ui/components/pagination/PaginationRender.js +9 -9
  447. package/src/ui/components/popover/PopoverRender.js +7 -7
  448. package/src/ui/components/progress/ProgressRender.js +12 -12
  449. package/src/ui/components/skeleton/SkeletonRender.js +56 -0
  450. package/src/ui/components/spacer/SpacerRender.js +10 -0
  451. package/src/ui/components/splitter/SplitterGutterRender.js +1 -1
  452. package/src/ui/components/splitter/SplitterPanelRender.js +2 -2
  453. package/src/ui/components/stacks/PositionStackRender.js +1 -1
  454. package/src/ui/components/stacks/StackRender.js +1 -1
  455. package/src/ui/components/stacks/absolute-stack/AbsoluteStackRender.js +1 -1
  456. package/src/ui/components/stacks/fixed-stack/FixedStackRender.js +1 -1
  457. package/src/ui/components/stacks/h-stack/HStackRender.js +1 -1
  458. package/src/ui/components/stacks/index.js +5 -5
  459. package/src/ui/components/stacks/relative-stack/RelativeStackRender.js +1 -1
  460. package/src/ui/components/stacks/v-stack/VStackRender.js +1 -1
  461. package/src/ui/components/stepper/StepperRender.js +2 -2
  462. package/src/ui/components/stepper/StepperStepRender.js +4 -4
  463. package/src/ui/components/switch/SwitchRender.js +4 -4
  464. package/src/ui/components/table/data-table/DataTableRender.js +5 -5
  465. package/src/ui/components/table/data-table/bulk-actions.js +7 -7
  466. package/src/ui/components/table/data-table/pagination.js +6 -6
  467. package/src/ui/components/table/data-table/tables.js +25 -25
  468. package/src/ui/components/table/data-table/toolbar.js +3 -3
  469. package/src/ui/components/table/simple-table/SimpleTableRender.js +8 -8
  470. package/src/ui/components/tabs/TabsRender.js +11 -11
  471. package/src/ui/components/toast/ToastRender.js +3 -3
  472. package/src/ui/components/tooltip/TooltipRender.js +1 -1
  473. package/src/ui/index.js +44 -36
  474. package/types/elements.d.ts +163 -1037
  475. package/types/forms.d.ts +16 -20
  476. package/types/globals.d.ts +543 -0
  477. package/types/images.d.ts +2 -2
  478. package/types/observable-resource.d.ts +3 -0
  479. package/types/property-accumulator.d.ts +4 -4
  480. package/types/store.d.ts +26 -2
  481. package/types/validator.ts +3 -3
  482. package/ui.js +1 -0
  483. package/src/components/form/field/DefaultRender.js +0 -77
  484. package/src/components/form/field/FieldFactory.js +0 -107
  485. package/src/components/skeleton/SkeletonList.js +0 -0
  486. package/src/components/skeleton/SkeletonParagraph.js +0 -0
  487. package/src/components/skeleton/SkeletonTable.js +0 -0
  488. /package/{src/components/skeleton/SkeletonCard.js → docs/tutorials/.gitkeep} +0 -0
@@ -0,0 +1,65 @@
1
+ import type { ValidChild } from '../../../../types/elements';
2
+ import type { ObservableItem } from '../../../../types/observable';
3
+ import type { BaseComponent } from '../../BaseComponent';
4
+ import type { GlobalAttributes } from '../../../../types/globals';
5
+
6
+ export type TooltipDescription = {
7
+ trigger: HTMLElement | null;
8
+ interaction: 'hover' | 'click' | 'focus';
9
+ content: ValidChild;
10
+ position: 'top' | 'bottom' | 'left' | 'right';
11
+ title: ValidChild | null;
12
+ isOpen: ObservableItem<boolean>;
13
+ offset: number;
14
+ shift: Record<string, number>;
15
+ hideDelay: number;
16
+ arrow: boolean;
17
+ interactive: boolean;
18
+ variant: string | null;
19
+ updatePositionOn: ObservableItem<unknown> | null;
20
+ props: GlobalAttributes;
21
+ };
22
+
23
+ export interface TooltipInterface extends BaseComponent {
24
+ trigger(trigger: HTMLElement): this;
25
+ title(title: ValidChild): this;
26
+ content(content: ValidChild): this;
27
+ variant(variant: string): this;
28
+ primary(): this;
29
+ success(): this;
30
+ warning(): this;
31
+ danger(): this;
32
+ info(): this;
33
+ position(position: 'top' | 'bottom' | 'left' | 'right'): this;
34
+ atTop(): this;
35
+ atBottom(): this;
36
+ atLeft(): this;
37
+ atRight(): this;
38
+ onClicked(): this;
39
+ onHovered(): this;
40
+ onFocused(): this;
41
+ hideDelay(ms: number): this;
42
+ arrow(enabled?: boolean): this;
43
+ interactive(isInteractive?: boolean): this;
44
+ open(): this;
45
+ close(): this;
46
+ toggle(): this;
47
+ onOpen(handler: () => void): this;
48
+ onClose(handler: () => void): this;
49
+ render(renderFn: (desc: TooltipDescription, instance: TooltipInterface) => ValidChild): this;
50
+ offset(offset: number): this;
51
+ shift(shift: Record<string, number>): this;
52
+ updatePositionOn(obs: ObservableItem<unknown> | unknown): this;
53
+ }
54
+
55
+
56
+ export declare function Tooltip(content: ValidChild, props?: Record<string, unknown>): TooltipInterface;
57
+ export declare namespace Tooltip {
58
+
59
+
60
+ function use(template: (description: TooltipDescription, instance: TooltipInterface) => ValidChild): void;
61
+ function preset(name: string, callback: (instance: TooltipInterface) => TooltipInterface): void;
62
+ function presets(presets: Record<string, (instance: TooltipInterface) => TooltipInterface>): void;
63
+
64
+
65
+ }
@@ -1,4 +1,4 @@
1
- import DebugManager from "../../core/utils/debug-manager";
1
+ import DebugManager from '../../core/utils/debug-manager';
2
2
 
3
3
 
4
4
  const MemoryManager = (function() {
@@ -50,7 +50,7 @@ const MemoryManager = (function() {
50
50
  if (cleanedCount > 0) {
51
51
  DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
52
52
  }
53
- }
53
+ },
54
54
  };
55
55
  }());
56
56
 
@@ -1,16 +1,16 @@
1
1
  import ObservableItem from './ObservableItem';
2
- import MemoryManager from "./MemoryManager";
3
- import NativeDocumentError from "../../core/errors/NativeDocumentError";
4
- import ObservableArray from "./ObservableArray";
5
- import Validator from "../utils/validator";
6
- import {nextTick} from "../utils/helpers";
7
- import PluginsManager from "../utils/plugins-manager";
8
- import {ObservableObject} from "./ObservableObject";
9
-
10
- import "./observable-helpers/observable.is-to";
2
+ import MemoryManager from './MemoryManager';
3
+ import NativeDocumentError from '../../core/errors/NativeDocumentError';
4
+ import ObservableArray from './ObservableArray';
5
+ import Validator from '../utils/validator';
6
+ import {nextTick} from '../utils/helpers';
7
+ import PluginsManager from '../utils/plugins-manager';
8
+ import {ObservableObject} from './ObservableObject';
9
+
10
+ import './observable-helpers/observable.is-to';
11
11
  import './observable-helpers/observable.prototypes';
12
- import ObservableResource from "./ObservableResource";
13
- import {Formatters} from "../utils/formatters";
12
+ import ObservableResource from './ObservableResource';
13
+ import {Formatters} from '../utils/formatters';
14
14
  /**
15
15
  *
16
16
  * @param {*} value
@@ -163,8 +163,8 @@ Observable.computed = function(callback, dependencies = []) {
163
163
  }
164
164
 
165
165
  dependencies.forEach(dependency => {
166
- if(Validator.isProxy(dependency)) {
167
- dependency.$observables.forEach((observable) => {
166
+ if(dependency.__$isObservableObject) {
167
+ dependency.observables().forEach((observable) => {
168
168
  observable.subscribe(updatedValue);
169
169
  });
170
170
  return;
@@ -178,7 +178,7 @@ ObservableItem.computed = Observable.computed;
178
178
 
179
179
 
180
180
  Observable.init = function(initialValue, configs = null) {
181
- return new ObservableObject(initialValue, configs)
181
+ return new ObservableObject(initialValue, configs);
182
182
  };
183
183
 
184
184
  /**
@@ -188,7 +188,7 @@ Observable.init = function(initialValue, configs = null) {
188
188
  */
189
189
  Observable.arrayOfObject = function(data) {
190
190
  return data.map(item => Observable.object(item));
191
- }
191
+ };
192
192
 
193
193
  /**
194
194
  * Get the value of an observable or an object of observables.
@@ -207,9 +207,6 @@ Observable.value = function(data) {
207
207
  if(data?.__$Observable) {
208
208
  return data.val();
209
209
  }
210
- if(Validator.isProxy(data)) {
211
- return data.$value;
212
- }
213
210
  return data;
214
211
  };
215
212
 
@@ -1,18 +1,26 @@
1
- import {match} from "../utils/filters/index";
2
- import Validator from "../utils/validator";
3
- import ObservableItem from "./ObservableItem.js";
4
- import PluginsManager from "../utils/plugins-manager.js";
5
- import NativeDocumentError from "../errors/NativeDocumentError.js";
6
- import {nextTick} from "../utils/helpers";
1
+ import {match} from '../utils/filters/index';
2
+ import Validator from '../utils/validator';
3
+ import ObservableItem from './ObservableItem.js';
4
+ import PluginsManager from '../utils/plugins-manager.js';
5
+ import NativeDocumentError from '../errors/NativeDocumentError.js';
6
+ import {nextTick} from '../utils/helpers';
7
7
 
8
8
  const mutationMethods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
9
9
  const noMutationMethods = ['map', 'forEach', 'filter', 'reduce', 'some', 'every', 'find', 'findIndex', 'concat', 'includes', 'indexOf'];
10
10
 
11
11
  /**
12
+ * Reactive array container extending ObservableItem.
13
+ * Wraps a native array and triggers reactivity on mutations (push, pop, splice, etc.).
14
+ * Use Observable.array() rather than instantiating directly.
12
15
  *
13
- * @param target
14
- * @param {{propagation: boolean, deep: boolean, reset: boolean}|null} configs
15
16
  * @constructor
17
+ * @param {Array} target - Initial array value
18
+ * @param {{ propagation?: boolean, deep?: boolean, reset?: boolean }|null} [configs=null] - Configuration
19
+ * @param {boolean} [configs.deep] - If false, nested arrays are not wrapped in ObservableArray
20
+ * @param {boolean} [configs.reset] - If true, stores initial value for .reset()
21
+ * @example
22
+ * const items = Observable.array([1, 2, 3]);
23
+ * items.push(4); // triggers reactivity
16
24
  */
17
25
  const ObservableArray = function (target, configs = null) {
18
26
  if(!Array.isArray(target)) {
@@ -33,7 +41,7 @@ ObservableArray.prototype.__$isObservableArray = true;
33
41
  Object.defineProperty(ObservableArray.prototype, 'length', {
34
42
  get() {
35
43
  return this.$currentValue.length;
36
- }
44
+ },
37
45
  });
38
46
 
39
47
 
@@ -53,7 +61,7 @@ mutationMethods.forEach((method) => {
53
61
  const result = this.$currentValue[method].apply(this.$currentValue, argsToUse);
54
62
  this.trigger({ action: method, args: argsToUse, result });
55
63
  return result;
56
- })
64
+ });
57
65
  };
58
66
  });
59
67
 
@@ -157,7 +165,7 @@ ObservableArray.prototype.swap = function(indexA, indexB) {
157
165
  return false;
158
166
  }
159
167
  const elementA = value[indexA];
160
- const elementB = value[indexB]
168
+ const elementB = value[indexB];
161
169
 
162
170
  value[indexA] = elementB;
163
171
  value[indexB] = elementA;
@@ -166,6 +174,17 @@ ObservableArray.prototype.swap = function(indexA, indexB) {
166
174
  return true;
167
175
  };
168
176
 
177
+ /**
178
+ * Swaps two items by reference (not by index).
179
+ * Finds indices of both items and delegates to .swap().
180
+ *
181
+ * @param {*} itemA - First item (by reference)
182
+ * @param {*} itemB - Second item (by reference)
183
+ * @returns {boolean} True if swap was successful
184
+ * @example
185
+ * const items = Observable.array(['a', 'b', 'c']);
186
+ * items.swapItems('a', 'c'); // ['c', 'b', 'a']
187
+ */
169
188
  ObservableArray.prototype.swapItems = function(itemA, itemB) {
170
189
  const indexA = this.$currentValue.indexOf(itemA);
171
190
  const indexB = this.$currentValue.indexOf(itemB);
@@ -173,6 +192,16 @@ ObservableArray.prototype.swapItems = function(itemA, itemB) {
173
192
  return this.swap(indexA, indexB);
174
193
  };
175
194
 
195
+ /**
196
+ * Inserts an item immediately after the target item in the array.
197
+ *
198
+ * @param {*} data - Item to insert
199
+ * @param {*} target - Existing item after which data is inserted
200
+ * @returns {Array} Result of the underlying splice call
201
+ * @example
202
+ * const items = Observable.array(['a', 'c']);
203
+ * items.insertAfter('b', 'a'); // ['a', 'b', 'c']
204
+ */
176
205
  ObservableArray.prototype.insertAfter = function(data, target) {
177
206
  const targetIndex = this.$currentValue.indexOf(target);
178
207
  return this.splice(targetIndex + 1, 0, data);
@@ -216,24 +245,28 @@ ObservableArray.prototype.removeItem = function(item) {
216
245
  return this.remove(indexOfItem);
217
246
  };
218
247
 
248
+
219
249
  /**
220
- * Checks if the array is empty.
250
+ * Checks if the array has no elements.
251
+ * Semantic alias for length === 0. Different from .clear() which empties the array.
221
252
  *
222
- * @returns {boolean} True if array has no elements
253
+ * @returns {boolean} True if the array contains no elements
223
254
  * @example
224
255
  * const items = Observable.array([]);
225
- * items.isEmpty(); // true
256
+ * items.empty(); // true
226
257
  */
227
258
  ObservableArray.prototype.empty = function() {
228
259
  return this.$currentValue.length === 0;
229
260
  };
230
261
 
262
+
231
263
  /**
232
- * Triggers a populate operation with the current array, iteration count, and callback.
233
- * Used internally for rendering optimizations.
264
+ * Triggers a 'populate' operation used internally by ForEachArray for batch rendering.
265
+ * Not intended for direct use in application code.
234
266
  *
235
- * @param {number} iteration - Iteration count for rendering
236
- * @param {Function} callback - Callback function for rendering items
267
+ * @internal
268
+ * @param {number} iteration - Number of items to render
269
+ * @param {Function} callback - Render callback for each item
237
270
  */
238
271
  ObservableArray.prototype.populateAndRender = function(iteration, callback) {
239
272
  this.trigger({ action: 'populate', args: [this.$currentValue, iteration, callback] });
@@ -323,8 +356,8 @@ ObservableArray.prototype.whereSome = function(fields, filter) {
323
356
  return this.where({
324
357
  _: {
325
358
  dependencies: filter.dependencies,
326
- callback: (item) => fields.some(field => filter.callback(item[field]))
327
- }
359
+ callback: (item) => fields.some(field => filter.callback(item[field])),
360
+ },
328
361
  });
329
362
  };
330
363
 
@@ -346,11 +379,23 @@ ObservableArray.prototype.whereEvery = function(fields, filter) {
346
379
  return this.where({
347
380
  _: {
348
381
  dependencies: filter.dependencies,
349
- callback: (item) => fields.every(field => filter.callback(item[field]))
350
- }
382
+ callback: (item) => fields.every(field => filter.callback(item[field])),
383
+ },
351
384
  });
352
385
  };
353
386
 
387
+ /**
388
+ * Subscribes deeply to all observable items within the array.
389
+ * Automatically binds and unbinds listeners as items are added or removed.
390
+ * Returns an unsubscribe function.
391
+ *
392
+ * @param {(value: Array) => void} callback - Called whenever any nested observable changes
393
+ * @returns {() => void} Unsubscribe function
394
+ * @example
395
+ * const users = Observable.array([Observable({ name: 'John' })]);
396
+ * const unsub = users.deepSubscribe((items) => console.log('changed', items));
397
+ * unsub(); // stop listening
398
+ */
354
399
  ObservableArray.prototype.deepSubscribe = function(callback) {
355
400
  const updatedValue = nextTick(() => callback(this.val()));
356
401
  const $listeners = new WeakMap();
@@ -382,33 +427,33 @@ ObservableArray.prototype.deepSubscribe = function(callback) {
382
427
 
383
428
  this.subscribe((items, _, operations) => {
384
429
  switch (operations?.action) {
385
- case 'push':
386
- case 'unshift':
387
- operations.args.forEach(bindItem);
388
- break;
389
-
390
- case 'splice': {
391
- const [start, deleteCount, ...newItems] = operations.args;
392
- operations.result?.forEach(unbindItem);
393
- newItems.forEach(bindItem);
394
- break;
395
- }
430
+ case 'push':
431
+ case 'unshift':
432
+ operations.args.forEach(bindItem);
433
+ break;
434
+
435
+ case 'splice': {
436
+ const [start, deleteCount, ...newItems] = operations.args;
437
+ operations.result?.forEach(unbindItem);
438
+ newItems.forEach(bindItem);
439
+ break;
440
+ }
396
441
 
397
- case 'remove':
398
- unbindItem(operations.result);
399
- break;
442
+ case 'remove':
443
+ unbindItem(operations.result);
444
+ break;
400
445
 
401
- case 'merge':
402
- operations.args.forEach(bindItem);
403
- break;
446
+ case 'merge':
447
+ operations.args.forEach(bindItem);
448
+ break;
404
449
 
405
- case 'clear':
406
- this.$currentValue.forEach(unbindItem);
407
- break;
450
+ case 'clear':
451
+ this.$currentValue.forEach(unbindItem);
452
+ break;
408
453
 
409
- case 'sort':
410
- case 'reverse':
411
- break;
454
+ case 'sort':
455
+ case 'reverse':
456
+ break;
412
457
  }
413
458
  });
414
459
 
@@ -417,7 +462,19 @@ ObservableArray.prototype.deepSubscribe = function(callback) {
417
462
  };
418
463
  };
419
464
 
420
-
465
+ /**
466
+ * Keeps this array in sync with another ObservableArray.
467
+ * All mutations are mirrored to the target array in real time.
468
+ *
469
+ * @param {ObservableArray} targetObservable - The array to sync into
470
+ * @returns {() => void} Unsubscribe function to stop syncing
471
+ * @example
472
+ * const source = Observable.array([1, 2, 3]);
473
+ * const target = Observable.array([]);
474
+ * const unsync = source.sync(target);
475
+ * source.push(4); // target is now [1, 2, 3, 4]
476
+ * unsync();
477
+ */
421
478
  ObservableArray.prototype.sync = function(targetObservable) {
422
479
  if (!targetObservable || !targetObservable.__$isObservableArray) {
423
480
  throw new NativeDocumentError('ObservableArray.sync : target must be an ObservableArray');
@@ -439,10 +496,25 @@ ObservableArray.prototype.sync = function(targetObservable) {
439
496
  return () => this.unsubscribe(sync);
440
497
  };
441
498
 
499
+ /**
500
+ * Creates a new ObservableArray with a shallow clone of the current array.
501
+ *
502
+ * @returns {ObservableArray} New independent ObservableArray with same items
503
+ */
442
504
  ObservableArray.prototype.clone = function() {
443
505
  return new ObservableArray(this.resolve());
444
506
  };
445
507
 
508
+ /**
509
+ * Returns a derived ObservableChecker that emits true when the array has at least one item.
510
+ *
511
+ * @returns {ObservableChecker<boolean>}
512
+ * @example
513
+ * const items = Observable.array([]);
514
+ * items.isNotEmpty().val(); // false
515
+ * items.push(1);
516
+ * items.isNotEmpty().val(); // true
517
+ */
446
518
  ObservableArray.prototype.isNotEmpty = function () {
447
519
  return this.is((x) => x.length > 0);
448
520
  };
@@ -1,5 +1,5 @@
1
- import ObservableItem from "./ObservableItem";
2
- import PluginsManager from "../utils/plugins-manager";
1
+ import ObservableItem from './ObservableItem';
2
+ import PluginsManager from '../utils/plugins-manager';
3
3
 
4
4
  /**
5
5
  *