vanilla-jui 1.4.8 → 1.5.1

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 (53) hide show
  1. package/README.md +10 -4
  2. package/dist/index.d.ts +402 -977
  3. package/dist/index.js +1 -1
  4. package/dist/index.umd.js +1 -1
  5. package/dist/style.css +1 -1
  6. package/package.json +3 -3
  7. package/src/components/accordion.ts +467 -349
  8. package/src/components/flow.ts +779 -1133
  9. package/src/components/form.ts +666 -509
  10. package/src/components/menu.ts +199 -326
  11. package/src/components/modal.ts +510 -747
  12. package/src/components/offcanvas.ts +281 -361
  13. package/src/components/pagination.ts +207 -374
  14. package/src/components/swiper.ts +688 -1168
  15. package/src/components/tabs.ts +468 -788
  16. package/src/components/toc.ts +191 -244
  17. package/src/core/component.ts +332 -0
  18. package/src/core/motion.ts +298 -0
  19. package/src/core/presence.ts +233 -0
  20. package/src/core/scheduler.ts +91 -0
  21. package/src/core/view.ts +31 -0
  22. package/src/css/accordion.css +94 -3
  23. package/src/css/content.css +18 -24
  24. package/src/css/drop.css +4 -1
  25. package/src/css/form.css +8 -0
  26. package/src/css/menu.css +10 -5
  27. package/src/css/modal.css +2 -1
  28. package/src/css/offcanvas.css +5 -17
  29. package/src/css/swiper.css +2 -1
  30. package/src/css/tabs.css +8 -17
  31. package/src/css/themes/default/accordion.css +0 -48
  32. package/src/css/themes/default/swiper.css +1 -1
  33. package/src/css/themes/default/tabs.css +4 -6
  34. package/src/css/toast.css +1 -17
  35. package/src/css/tooltip.css +2 -1
  36. package/src/index.ts +8 -3
  37. package/src/locales/index.ts +3 -0
  38. package/src/primitives/drop.ts +253 -262
  39. package/src/primitives/loading.ts +22 -4
  40. package/src/primitives/parabola.ts +123 -164
  41. package/src/primitives/sticky.ts +297 -0
  42. package/src/primitives/theme.ts +164 -222
  43. package/src/primitives/toast.ts +309 -284
  44. package/src/primitives/tooltip.ts +65 -66
  45. package/src/utilities/browser.ts +38 -0
  46. package/src/utilities/dom.ts +0 -54
  47. package/src/utilities/refs.ts +61 -0
  48. package/src/utilities/state.ts +73 -0
  49. package/src/utilities/timer.ts +11 -31
  50. package/src/validation/validator.ts +289 -389
  51. package/src/components/sticky.ts +0 -297
  52. package/src/core/Component.ts +0 -377
  53. package/src/utilities/scheduler.ts +0 -156
@@ -5,11 +5,15 @@
5
5
  left: 0;
6
6
  width: 100%;
7
7
  height: 100%;
8
- transition: opacity 0.3s ease;
8
+ pointer-events: none;
9
9
  background: var(--offcanvas-overlay-bg);
10
10
  z-index: var(--z-overlay);
11
11
  }
12
12
 
13
+ .j-offcanvas-overlay[aria-hidden='false'] {
14
+ pointer-events: auto;
15
+ }
16
+
13
17
  .j-offcanvas {
14
18
  position: fixed;
15
19
  z-index: var(--z-offcanvas);
@@ -17,20 +21,11 @@
17
21
  box-shadow: var(--offcanvas-box-shadow);
18
22
  }
19
23
 
20
- .j-offcanvas[data-animate='slide'] {
21
- transition: transform 0.3s ease;
22
- }
23
-
24
- .j-offcanvas:not([data-animate='slide']) {
25
- transition: none;
26
- }
27
-
28
24
  .j-offcanvas[data-direction='left'] {
29
25
  top: 0;
30
26
  left: 0;
31
27
  width: var(--offcanvas-block-width);
32
28
  height: 100vh;
33
- transform: translateX(-100%);
34
29
  border-right: var(--offcanvas-border);
35
30
  }
36
31
 
@@ -39,7 +34,6 @@
39
34
  right: 0;
40
35
  width: var(--offcanvas-block-width);
41
36
  height: 100vh;
42
- transform: translateX(100%);
43
37
  border-left: var(--offcanvas-border);
44
38
  }
45
39
 
@@ -48,7 +42,6 @@
48
42
  left: 0;
49
43
  width: 100%;
50
44
  height: var(--offcanvas-inline-height);
51
- transform: translateY(-100%);
52
45
  border-bottom: var(--offcanvas-border);
53
46
  }
54
47
 
@@ -57,14 +50,9 @@
57
50
  left: 0;
58
51
  width: 100%;
59
52
  height: var(--offcanvas-inline-height);
60
- transform: translateY(100%);
61
53
  border-top: var(--offcanvas-border);
62
54
  }
63
55
 
64
- .j-offcanvas[aria-expanded='true'] {
65
- transform: translate(0, 0);
66
- }
67
-
68
56
  .j-offcanvas .offcanvas-content {
69
57
  position: relative;
70
58
  height: 100%;
@@ -13,6 +13,7 @@
13
13
  width: 100%;
14
14
  height: 100%;
15
15
  will-change: transform;
16
+ position: relative;
16
17
  }
17
18
 
18
19
  .j-swiper .swiper-slide {
@@ -142,4 +143,4 @@
142
143
  cursor: default;
143
144
  opacity: 0.36;
144
145
  }
145
- }
146
+ }
package/src/css/tabs.css CHANGED
@@ -28,7 +28,6 @@
28
28
 
29
29
  .j-tabs .tab-list {
30
30
  display: flex;
31
- user-select: none;
32
31
  -webkit-overflow-scrolling: touch;
33
32
  scroll-behavior: smooth;
34
33
  }
@@ -47,28 +46,20 @@
47
46
  cursor: pointer;
48
47
  }
49
48
 
50
- .j-tabs .tab-list .tab-item[aria-disabled='true'] {
51
- cursor: not-allowed;
52
- }
53
-
54
- .j-tabs .tab-panel {
55
- padding: var(--tab-panel-padding);
56
- margin: var(--tab-panel-margin);
49
+ .j-tabs .panel-list {
50
+ padding: var(--panel-list-padding);
51
+ margin: var(--panel-list-margin);
57
52
  flex: 1;
58
53
  }
59
54
 
60
- .j-tabs .tab-panel .panel-item {
55
+ .j-tabs .panel-list .panel-item {
61
56
  display: none;
62
- margin: var(--tab-panel-item-margin);
57
+ margin: var(--panel-list-item-margin);
63
58
  position: relative;
64
- min-height: var(--tab-panel-item-min-height);
59
+ min-height: inherit;
65
60
  }
66
61
 
67
- .j-tabs .tab-panel .panel-item[aria-hidden='false'] {
62
+ .j-tabs .panel-list .panel-item[aria-hidden='false'] {
68
63
  display: block;
69
64
  }
70
-
71
- .j-tabs .tab-panel .panel-item > * {
72
- margin: var(--tab-panel-item-content-margin);
73
- }
74
- }
65
+ }
@@ -6,57 +6,9 @@
6
6
  --accordion-header-padding: var(--s2) var(--s3);
7
7
  --accordion-header-margin: 0;
8
8
  --accordion-border: 1px solid var(--ui-border-subtle);
9
- --accordion-icon-size: var(--font-size-lg);
10
9
  --accordion-icon-transform: rotate(0deg);
11
10
  --accordion-panel-margin: 0;
12
11
  --accordion-panel-content-margin: 0;
13
12
  --accordion-panel-content-padding: 0 var(--s3) var(--s2);
14
13
  }
15
-
16
- .j-accordion .accordion-header {
17
- padding: var(--accordion-header-padding);
18
- margin: var(--accordion-header-margin);
19
- font-weight: var(--accordion-font-weight);
20
- font-size: var(--accordion-header-font-size);
21
- background: var(--accordion-bg);
22
- border-bottom: var(--accordion-border);
23
- }
24
-
25
- .j-accordion .accordion-header[aria-expanded='true'] {
26
- border-color: transparent;
27
- }
28
-
29
- .j-accordion .accordion-header[aria-expanded='true'] .header-title {
30
- --accordion-font-weight: var(--font-bold);
31
- }
32
-
33
- .j-accordion .accordion-header[aria-expanded='false']:hover {
34
- --accordion-bg: var(--ui-surface-hover);
35
- }
36
-
37
- .j-accordion .accordion-header .header-arrow {
38
- width: var(--accordion-icon-size);
39
- height: var(--accordion-icon-size);
40
- transition: transform 0.3s ease-out;
41
- transform: var(--accordion-icon-transform);
42
- }
43
-
44
- .j-accordion .accordion-header[aria-expanded='true'] .header-arrow {
45
- --accordion-icon-transform: rotate(180deg);
46
- }
47
-
48
- .j-accordion .accordion-panel {
49
- margin: var(--accordion-panel-margin);
50
- font-size: var(--accordion-font-size);
51
- }
52
-
53
- .j-accordion .accordion-panel .panel-content {
54
- margin: var(--accordion-panel-content-margin);
55
- padding: var(--accordion-panel-content-padding);
56
- border-bottom: var(--accordion-border);
57
- }
58
-
59
- .j-accordion .accordion-panel:last-child .panel-content {
60
- border-bottom: none;
61
- }
62
14
  }
@@ -32,4 +32,4 @@
32
32
  --swiper-navigation-size: 32px;
33
33
  }
34
34
  }
35
- }
35
+ }
@@ -4,11 +4,9 @@
4
4
  --tab-list-item-margin: 0;
5
5
  --tab-list-font-weight: var(--font-medium);
6
6
  --tab-wrap-border: 1px solid var(--ui-border-subtle);
7
- --tab-panel-padding: var(--s2) var(--s3);
8
- --tab-panel-margin: 0;
9
- --tab-panel-item-margin: 0;
10
- --tab-panel-item-min-height: 1.25em;
11
- --tab-panel-item-content-margin: 0;
7
+ --panel-list-padding: var(--s2) var(--s3);
8
+ --panel-list-margin: 0;
9
+ --panel-list-item-margin: 0;
12
10
  }
13
11
 
14
12
  .j-tabs[data-tabs-direction='top'] .tab-wrap {
@@ -34,4 +32,4 @@
34
32
  .j-tabs .tab-list .tab-item[aria-disabled='true'] {
35
33
  --tab-fg: var(--ui-border-strong);
36
34
  }
37
- }
35
+ }
package/src/css/toast.css CHANGED
@@ -32,15 +32,6 @@
32
32
  word-break: break-all;
33
33
  cursor: pointer;
34
34
  pointer-events: auto;
35
-
36
- opacity: 0;
37
- transform: translateY(-100%);
38
- transition: all 0.3s ease-in-out;
39
- }
40
-
41
- .j-toast[aria-live] {
42
- opacity: 1;
43
- transform: translateY(0);
44
35
  }
45
36
 
46
37
  .j-toast .el-icon {
@@ -58,20 +49,13 @@
58
49
  position: fixed;
59
50
  top: 45%;
60
51
  left: 50%;
61
- transition: opacity 0.15s ease-in-out;
62
52
  z-index: var(--z-toast);
63
53
  width: fit-content;
64
54
  max-width: 240px;
65
55
  text-align: center;
66
56
  user-select: none;
67
57
  pointer-events: none;
68
- opacity: 0;
69
- transform: translate(-50%, -50%) scale(0.9);
70
- }
71
-
72
- .j-toast-lite[aria-live] {
73
- opacity: 1;
74
- transform: translate(-50%, -50%) scale(1);
58
+ transform: translate(-50%, -50%);
75
59
  }
76
60
 
77
61
  .j-toast.is-action {
@@ -16,5 +16,6 @@
16
16
  padding: var(--tooltip-padding);
17
17
  font-size: var(--tooltip-font-size);
18
18
  line-height: var(--tooltip-line-height);
19
+ position: relative;
19
20
  }
20
- }
21
+ }
package/src/index.ts CHANGED
@@ -7,11 +7,16 @@ export * from './utilities/id.ts';
7
7
  export * from './utilities/dom.ts';
8
8
  export * from './utilities/events.ts';
9
9
  export * from './utilities/http.ts';
10
+ export * from './core/motion.ts';
10
11
  export * from './utilities/object.ts';
11
12
  export * from './utilities/timer.ts';
12
13
  export * from './utilities/types.ts';
13
14
  export * from './utilities/function.ts';
14
- export * from './utilities/scheduler.ts';
15
+ export * from './core/scheduler.ts';
16
+ export * from './utilities/state.ts';
17
+ export * from './utilities/refs.ts';
18
+ export * from './core/view.ts';
19
+ export * from './core/presence.ts';
15
20
 
16
21
  // UI primitives
17
22
  export * from './primitives/icons.ts';
@@ -22,14 +27,14 @@ export * from './primitives/tooltip.ts';
22
27
  export * from './primitives/toast.ts';
23
28
  export * from './primitives/theme.ts';
24
29
  export * from './primitives/parabola.ts';
30
+ export * from './primitives/sticky.ts';
25
31
 
26
32
  // Validation
27
33
  export * from './validation/validator.ts';
28
34
 
29
35
  // Components
30
- export { default as Component } from './core/Component.ts';
36
+ export * from './core/component.ts';
31
37
  export * from './components/toc.ts';
32
- export * from './components/sticky.ts';
33
38
  export * from './components/accordion.ts';
34
39
  export * from './components/form.ts';
35
40
  export * from './components/flow.ts';
@@ -5,6 +5,7 @@ export default {
5
5
  sm: 'Small',
6
6
  md: 'Medium',
7
7
  lg: 'Large',
8
+ wn: 'Your browser is outdated and may pose security risks. Please upgrade your browser to access this site.',
8
9
  },
9
10
  zh: {
10
11
  b: '返回',
@@ -40,5 +41,7 @@ export default {
40
41
  Auto: '自动',
41
42
  Close: '关闭',
42
43
  Confirm: '确认',
44
+ Upgrade: '升级',
45
+ wn: '您的浏览器版本过低,存在安全风险。请升级浏览器后再访问本站。',
43
46
  },
44
47
  };