@wpmoo/ui 1.1.0 → 1.2.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/ASSET_LICENSE.md +1 -1
- package/README.md +4 -4
- package/certification.json +1 -1
- package/dist/assets/css/moo-ui.css +140 -1
- package/dist/assets/css/moo-ui.min.css +2 -2
- package/dist/assets/css/moo.css +140 -1
- package/dist/assets/css/moo.min.css +2 -2
- package/dist/js/chart.js +1 -1
- package/dist/js/chart.min.js +1 -1
- package/dist/js/combobox.js +1 -1
- package/dist/js/context-menu.js +1 -1
- package/dist/js/datatable.js +1 -1
- package/dist/js/datepicker.js +1 -1
- package/dist/js/datepicker.min.js +1 -1
- package/dist/js/moo-ui.js +1 -1
- package/dist/js/moo-ui.min.js +1 -1
- package/dist/js/sheet.js +1 -1
- package/dist/js/sidebar.js +1 -1
- package/dist/js/slider.js +1 -1
- package/dist/js/state.js +1 -1
- package/dist/js/table-of-contents.js +1 -1
- package/dist/js/toc.js +1 -1
- package/dist/release-manifest.json +4 -4
- package/package.json +1 -1
- package/scss/_components.scss +1 -0
- package/scss/components/_empty.scss +60 -0
- package/scss/components/_tabs.scss +8 -0
- package/scss/layouts/_app.scss +33 -0
- package/scss/mixins/_banner.scss +1 -1
- package/scss/settings/_component_variables.scss +1 -0
package/dist/assets/css/moo.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Moo UI v1.
|
|
2
|
+
* Moo UI v1.2.0 (https://wpmoo.org/)
|
|
3
3
|
* Copyright 2026 WPMoo Authors
|
|
4
4
|
* Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
|
|
5
5
|
*
|
|
@@ -4420,6 +4420,61 @@ label.btn {
|
|
|
4420
4420
|
color: var(--moo-muted-foreground);
|
|
4421
4421
|
}
|
|
4422
4422
|
|
|
4423
|
+
/* Empty */
|
|
4424
|
+
.empty-state {
|
|
4425
|
+
display: flex;
|
|
4426
|
+
flex-direction: column;
|
|
4427
|
+
align-items: center;
|
|
4428
|
+
justify-content: center;
|
|
4429
|
+
width: 100%;
|
|
4430
|
+
min-width: 0;
|
|
4431
|
+
gap: 1.5rem;
|
|
4432
|
+
padding: 1.5rem;
|
|
4433
|
+
text-align: center;
|
|
4434
|
+
border-width: var(--bs-border-width);
|
|
4435
|
+
border-style: dashed;
|
|
4436
|
+
border-color: var(--bs-border-color);
|
|
4437
|
+
border-radius: var(--bs-border-radius-lg);
|
|
4438
|
+
}
|
|
4439
|
+
.empty-state-header {
|
|
4440
|
+
display: flex;
|
|
4441
|
+
flex-direction: column;
|
|
4442
|
+
align-items: inherit;
|
|
4443
|
+
gap: 0.5rem;
|
|
4444
|
+
}
|
|
4445
|
+
.empty-state-icon {
|
|
4446
|
+
display: inline-flex;
|
|
4447
|
+
align-items: center;
|
|
4448
|
+
justify-content: center;
|
|
4449
|
+
padding: 0.75rem;
|
|
4450
|
+
font-size: 1.53125rem;
|
|
4451
|
+
line-height: 1;
|
|
4452
|
+
color: var(--bs-secondary-color);
|
|
4453
|
+
background-color: var(--bs-tertiary-bg);
|
|
4454
|
+
border-radius: var(--bs-border-radius-lg);
|
|
4455
|
+
}
|
|
4456
|
+
.empty-state-icon > [data-icon] {
|
|
4457
|
+
width: 1.5rem;
|
|
4458
|
+
height: 1.5rem;
|
|
4459
|
+
}
|
|
4460
|
+
.empty-state-title {
|
|
4461
|
+
margin: 0;
|
|
4462
|
+
font-size: 1.09375rem;
|
|
4463
|
+
font-weight: 600;
|
|
4464
|
+
line-height: 1.2;
|
|
4465
|
+
}
|
|
4466
|
+
.empty-state-description {
|
|
4467
|
+
margin: 0;
|
|
4468
|
+
font-size: 0.875rem;
|
|
4469
|
+
color: var(--bs-secondary-color);
|
|
4470
|
+
}
|
|
4471
|
+
.empty-state-actions {
|
|
4472
|
+
display: flex;
|
|
4473
|
+
flex-wrap: wrap;
|
|
4474
|
+
justify-content: inherit;
|
|
4475
|
+
gap: 0.5rem;
|
|
4476
|
+
}
|
|
4477
|
+
|
|
4423
4478
|
/* Table */
|
|
4424
4479
|
.card .table {
|
|
4425
4480
|
--bs-table-bg: transparent;
|
|
@@ -6079,6 +6134,12 @@ label.btn {
|
|
|
6079
6134
|
pointer-events: auto;
|
|
6080
6135
|
transition-delay: 0s;
|
|
6081
6136
|
}
|
|
6137
|
+
.tabs--content-height > .tab-content {
|
|
6138
|
+
display: block;
|
|
6139
|
+
}
|
|
6140
|
+
.tabs--content-height > .tab-content > .tab-pane:not(.active) {
|
|
6141
|
+
display: none;
|
|
6142
|
+
}
|
|
6082
6143
|
|
|
6083
6144
|
/* Collapsible */
|
|
6084
6145
|
.collapsible {
|
|
@@ -8246,6 +8307,84 @@ label.btn {
|
|
|
8246
8307
|
.wrapper[data-layout="app"] > [data-slot="page"] > footer {
|
|
8247
8308
|
flex: 0 0 auto;
|
|
8248
8309
|
}
|
|
8310
|
+
@supports (container-type: inline-size) {
|
|
8311
|
+
.wrapper[data-layout="app"] > [data-slot="page"] {
|
|
8312
|
+
container: moo-shell / inline-size;
|
|
8313
|
+
}
|
|
8314
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > :is( .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl ) {
|
|
8315
|
+
max-width: none;
|
|
8316
|
+
}
|
|
8317
|
+
@container moo-shell (min-width: 576px) {
|
|
8318
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
|
|
8319
|
+
max-width: 540px;
|
|
8320
|
+
}
|
|
8321
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
|
|
8322
|
+
max-width: 540px;
|
|
8323
|
+
}
|
|
8324
|
+
}
|
|
8325
|
+
@container moo-shell (min-width: 768px) {
|
|
8326
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
|
|
8327
|
+
max-width: 720px;
|
|
8328
|
+
}
|
|
8329
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
|
|
8330
|
+
max-width: 720px;
|
|
8331
|
+
}
|
|
8332
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
|
|
8333
|
+
max-width: 720px;
|
|
8334
|
+
}
|
|
8335
|
+
}
|
|
8336
|
+
@container moo-shell (min-width: 992px) {
|
|
8337
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
|
|
8338
|
+
max-width: 960px;
|
|
8339
|
+
}
|
|
8340
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
|
|
8341
|
+
max-width: 960px;
|
|
8342
|
+
}
|
|
8343
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
|
|
8344
|
+
max-width: 960px;
|
|
8345
|
+
}
|
|
8346
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-lg {
|
|
8347
|
+
max-width: 960px;
|
|
8348
|
+
}
|
|
8349
|
+
}
|
|
8350
|
+
@container moo-shell (min-width: 1200px) {
|
|
8351
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
|
|
8352
|
+
max-width: 1140px;
|
|
8353
|
+
}
|
|
8354
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
|
|
8355
|
+
max-width: 1140px;
|
|
8356
|
+
}
|
|
8357
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
|
|
8358
|
+
max-width: 1140px;
|
|
8359
|
+
}
|
|
8360
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-lg {
|
|
8361
|
+
max-width: 1140px;
|
|
8362
|
+
}
|
|
8363
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-xl {
|
|
8364
|
+
max-width: 1140px;
|
|
8365
|
+
}
|
|
8366
|
+
}
|
|
8367
|
+
@container moo-shell (min-width: 1400px) {
|
|
8368
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
|
|
8369
|
+
max-width: 1320px;
|
|
8370
|
+
}
|
|
8371
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
|
|
8372
|
+
max-width: 1320px;
|
|
8373
|
+
}
|
|
8374
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
|
|
8375
|
+
max-width: 1320px;
|
|
8376
|
+
}
|
|
8377
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-lg {
|
|
8378
|
+
max-width: 1320px;
|
|
8379
|
+
}
|
|
8380
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-xl {
|
|
8381
|
+
max-width: 1320px;
|
|
8382
|
+
}
|
|
8383
|
+
.wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-xxl {
|
|
8384
|
+
max-width: 1320px;
|
|
8385
|
+
}
|
|
8386
|
+
}
|
|
8387
|
+
}
|
|
8249
8388
|
.wrapper[data-layout="app"] > [data-slot="page"] > main {
|
|
8250
8389
|
display: flex;
|
|
8251
8390
|
min-height: 0;
|