rosie-ui 0.1.3 → 0.1.4

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 (40) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +28 -82
  3. package/dist/css/rosie.css +3 -11
  4. package/dist/js/components/date-picker.component.js +2 -2
  5. package/dist/js/components/dialog.component.d.ts +0 -1
  6. package/dist/js/components/dialog.component.js +4 -4
  7. package/dist/js/components/dropdown.component.js +2 -2
  8. package/dist/js/components/form/textfield.component.js +2 -2
  9. package/dist/js/components/grid/grid-cell.component.d.ts +3 -1
  10. package/dist/js/components/grid/grid-cell.component.js +18 -4
  11. package/dist/js/components/grid/grid-row.component.d.ts +9 -0
  12. package/dist/js/components/grid/grid-row.component.js +23 -0
  13. package/dist/js/components/grid/grid.component.js +25 -7
  14. package/dist/js/components/grid/types.d.ts +11 -1
  15. package/dist/js/components/paging-toolbar.component.d.ts +5 -0
  16. package/dist/js/components/paging-toolbar.component.js +13 -0
  17. package/dist/js/core/ajax.js +1 -1
  18. package/dist/js/core/cache.js +1 -1
  19. package/dist/js/core/data/index.d.ts +2 -0
  20. package/dist/js/core/data/index.js +3 -0
  21. package/dist/js/core/data/model.d.ts +16 -0
  22. package/dist/js/core/data/model.js +50 -0
  23. package/dist/js/core/data/proxy.d.ts +8 -0
  24. package/dist/js/core/data/proxy.js +53 -0
  25. package/dist/js/core/data/store.d.ts +11 -0
  26. package/dist/js/core/data/store.js +37 -0
  27. package/dist/js/core/index.d.ts +27 -0
  28. package/dist/js/core/index.js +15 -1
  29. package/dist/js/core/observable.js +1 -1
  30. package/dist/js/core/utils.d.ts +0 -8
  31. package/dist/js/core/utils.js +2 -17
  32. package/dist/js/index.d.ts +0 -34
  33. package/dist/js/index.js +1 -14
  34. package/dist/js/lang/array.d.ts +8 -2
  35. package/dist/js/lang/array.js +28 -13
  36. package/dist/js/lang/date.js +1 -1
  37. package/package.json +18 -16
  38. package/scss/_reset.scss +17 -7
  39. package/scss/_variables.scss +10 -36
  40. package/scss/rosie.scss +1 -4
package/CHANGELOG.md CHANGED
@@ -2,6 +2,17 @@
2
2
 
3
3
  ## Next
4
4
 
5
+ ## 0.1.4
6
+ > 2024-04-26
7
+
8
+ - New Features
9
+ - #6 Add `DataModel`, `DataStore` object
10
+ - Improvements
11
+ - #9 Supports to select row by checkbox
12
+ - Refine `lang`
13
+ - Bug Fixes
14
+ - #13 `GridCell` not update value when `DataModel` change bug
15
+
5
16
  ## 0.1.3
6
17
  > 2024-01-13
7
18
 
package/README.md CHANGED
@@ -4,113 +4,59 @@ Rosie UI is a JavaScript library that build on top of [React 18.2](https://react
4
4
 
5
5
  ## Getting Started
6
6
 
7
- `app.html`
7
+ ### File Structure
8
+
9
+ ```
10
+ project/
11
+ ├── node_modules/
12
+ ├── src/
13
+ │ ├── app
14
+ │ │ ├── components
15
+ │ │ │ ├── app.component.tsx
16
+ │ │ ├── app.html
17
+ │ │ ├── app.scss
18
+ │ │ ├── app.tsx
19
+ ├── package.json
20
+ ├── tsconfig.json
21
+ ```
22
+
23
+ #### `app.html`
8
24
 
9
25
  ```html
10
26
  <!doctype html>
11
27
  <html lang="en">
12
28
  <head>
13
- <meta charset="utf-8">
14
- <title>MDM Framework</title>
29
+ <!-- Required meta tags -->
30
+ <meta charset="utf-8" />
31
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
32
+
33
+ <title>Hello, world!</title>
34
+
15
35
  <link rel="stylesheet" href="app.scss" />
16
36
  </head>
17
37
  <body>
18
38
  <div id="react-root"></div>
19
- <script type="module" src="app.tsx"></script>
39
+ <script src="app.tsx"></script>
20
40
  </body>
21
41
  </html>
22
42
  ```
23
43
 
24
- `app.scss`
44
+ #### `app.scss`
25
45
 
26
46
  ```scss
27
- $fa-font-path: '../../../node_modules/@fortawesome/fontawesome-free/webfonts';
47
+ @import '../../node_modules/rosie-ui/dist/css/rosie.css';
28
48
 
29
- @import '../../rosie/scss/rosie';
30
49
  @import 'components/app.component';
31
50
  ```
32
51
 
33
- `components/_app.component.scss`
34
-
35
- ```scss
36
- html, body, main, .app, .app-wrapper, .app-body, .main, .aside-menu, .fullscreen, #react-root { @include fullscreen(); }
37
-
38
- .app {
39
- aside {
40
- width: 15rem;
41
- background-color: $body-color;
42
- color: $body-bg;
43
-
44
- header {
45
- flex: 0 0 $breadcrumb-height;
46
- .navbar-brand {
47
- color: $primary;
48
- font-size: $font-size-base * 1.5;
49
- }
50
- }
51
-
52
- .sidebar-body {
53
- .nav-link {
54
- &:hover { background-color: $component-hover-bg; color: $white; }
55
- &.active { background-color: $primary !important; }
56
- }
57
- }
58
- }
59
- }
60
- ```
61
-
62
- `app.tsx`
52
+ #### `app.tsx`
63
53
 
64
54
  ```tsx
65
55
  import { createRoot } from 'react-dom/client';
66
56
 
67
57
  import { AppComponent } from './components/app.component';
68
58
 
69
- createRoot(document.getElementById('react-root')).render(<AppComponent />);
70
- ```
71
-
72
- `components/app.component.tsx`
73
-
74
- ```tsx
75
- import { BrowserRouter as Router, Link, Navigate, Route, Routes } from 'react-router-dom';
76
- import { HomeComponent } from './home';
77
-
78
- export function AppComponent() {
79
- return <Router>
80
- <div className="app d-flex flex-row">
81
- <aside className="app-sidebar d-flex flex-column">
82
- <header className="d-flex justify-content-center align-items-center border-bottom">
83
- <Link to="/home" className="navbar-brand mb-0 fw-bold">Rosie UI</Link>
84
- </header>
85
- <div className="sidebar-body flex-1 overflow-y-auto">
86
- </div>
87
- <footer className="d-flex flex-column border-top">
88
- <Account />
89
- <div className="d-flex justify-content-between p-1 border-top">
90
- <small>&copy; 2024 Rosie</small>
91
- <small>v0.1.0</small>
92
- </div>
93
- </footer>
94
- </aside>
95
- <div className="app-wrapper d-flex position-relative">
96
- <div id="app-splash-screen" className="mask">
97
- <div className="mask-msg">
98
- <div className="mask-msg-text">
99
- <span className="fa fa-circle-notch fa-spin me-1" />
100
- Loading...
101
- </div>
102
- </div>
103
- </div>
104
- <div className="app-body d-flex flex-column">
105
- <Routes>
106
- <Route path="/home" element={<HomeComponent />} />
107
- <Route path="*" element={<Navigate to="/home" />} />
108
- </Routes>
109
- </div>
110
- </div>
111
- </div>
112
- </Router>
113
- }
59
+ createRoot(document.getElementById('react-root') as HTMLElement).render(<AppComponent />);
114
60
  ```
115
61
 
116
62
  ## License