@dev-tcloud/tcloud-ui 7.3.4 → 7.5.0
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.
- package/README.md +44 -3
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +46 -204
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/js/tcloud-ui-app.js +78 -78
- package/package.json +1 -2
- package/types/dev-tcloud-tcloud-ui.d.ts +6 -28
package/README.md
CHANGED
|
@@ -70,7 +70,25 @@ npm install @dev-tcloud/tcloud-ui --save
|
|
|
70
70
|
|
|
71
71
|
## Example of use
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
### Standalone (recommended)
|
|
74
|
+
|
|
75
|
+
`main.ts`
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
79
|
+
import { provideTCloudUi } from '@dev-tcloud/tcloud-ui';
|
|
80
|
+
import { AppComponent } from './app/app.component';
|
|
81
|
+
|
|
82
|
+
bootstrapApplication(AppComponent, {
|
|
83
|
+
providers: [
|
|
84
|
+
provideTCloudUi()
|
|
85
|
+
]
|
|
86
|
+
});
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### NgModule
|
|
90
|
+
|
|
91
|
+
`app.module.ts`
|
|
74
92
|
|
|
75
93
|
```javascript
|
|
76
94
|
import { TCloudUiModule } from '@dev-tcloud/tcloud-ui';
|
|
@@ -81,19 +99,42 @@ import { TCloudUiModule } from '@dev-tcloud/tcloud-ui';
|
|
|
81
99
|
TCloudUiModule
|
|
82
100
|
]
|
|
83
101
|
})
|
|
84
|
-
```
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Animations
|
|
105
|
+
|
|
106
|
+
All animations in this library are **CSS-based** (`animate.enter`/`animate.leave`
|
|
107
|
+
and CSS transitions). You do **not** need `@angular/animations`, `provideAnimations()`,
|
|
108
|
+
or `BrowserAnimationsModule` — there is nothing to configure.
|
|
85
109
|
|
|
86
110
|
## Add TCloud-ui components style and tcloud style
|
|
87
111
|
|
|
112
|
+
There are **four** stylesheets to register, not two. Missing
|
|
113
|
+
`tcloud-revitalizacao/tc-rev-styles.scss` drops the `--size-*` scale and components
|
|
114
|
+
render unstyled.
|
|
115
|
+
|
|
88
116
|
angular.json
|
|
89
117
|
|
|
90
118
|
```javascript
|
|
91
119
|
"styles": [
|
|
92
120
|
"node_modules/@dev-tcloud/tcloud-ui/scss/components/styles.scss",
|
|
93
|
-
"node_modules/@dev-tcloud/tcloud-ui/scss/tcloud/styles.scss"
|
|
121
|
+
"node_modules/@dev-tcloud/tcloud-ui/scss/tcloud/styles.scss",
|
|
122
|
+
"node_modules/@dev-tcloud/tcloud-ui/scss/tcloud-revitalizacao/tc-rev-styles.scss",
|
|
123
|
+
"node_modules/@dev-tcloud/tcloud-ui/scss/tcloud-ui/styles.scss"
|
|
94
124
|
],
|
|
95
125
|
```
|
|
96
126
|
|
|
127
|
+
- `components/styles.scss` — component styles.
|
|
128
|
+
- `tcloud/styles.scss` — tcloud base styles.
|
|
129
|
+
- `tcloud-revitalizacao/tc-rev-styles.scss` — revitalization layer; defines the
|
|
130
|
+
`--size-*` scale (e.g. `--size-52: 3.25rem`).
|
|
131
|
+
- `tcloud-ui/styles.scss` — modern design system (`--c-*` tokens, dark mode).
|
|
132
|
+
|
|
133
|
+
Verify in the browser console:
|
|
134
|
+
`getComputedStyle(document.documentElement).getPropertyValue('--size-52')` must
|
|
135
|
+
return `3.25rem`. If it comes back empty, the `tcloud-revitalizacao/tc-rev-styles.scss`
|
|
136
|
+
sheet is missing.
|
|
137
|
+
|
|
97
138
|
|
|
98
139
|
## Add calendar library to use datepicker
|
|
99
140
|
```javascript
|