winduum 2.0.0-next.13 → 2.0.0-next.15

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 (15) hide show
  1. package/dist/main.css +1 -1
  2. package/dist/tailwind.css +1 -1
  3. package/dist/test.css +1 -1
  4. package/package.json +15 -15
  5. package/src/base/config/transition.css +5 -1
  6. package/src/base/index.css +1 -0
  7. package/src/base/transitions.css +15 -0
  8. package/src/components/button/interactive.css +11 -9
  9. package/src/components/drawer/default.css +5 -4
  10. package/src/components/drawer/index.d.ts +2 -1
  11. package/src/components/drawer/index.js +15 -1
  12. package/src/components/drawer/props/content.css +1 -1
  13. package/tailwind.config.js +4 -1
  14. package/types/index.d.ts +9 -22
  15. package/types/index.d.ts.map +3 -5
package/src/components/button/interactive.css CHANGED
@@ -12,15 +12,17 @@
12
12
 
13
13
  &:is(button, input, label, :any-link, [role="button"]) {
14
14
  &:hover {
15
- --x-button-background-color: var(--x-button-hover-background-color, var(--color-accent));
16
- --x-button-background-color-mix: var(--x-button-hover-background-color-mix);
17
- --x-button-background-color-opacity: var(--x-button-hover-background-color-opacity);
18
- --x-button-border-color: var(--x-button-hover-border-color, var(--color-accent));
19
- --x-button-border-color-mix: var(--x-button-hover-border-color-mix, transparent);
20
- --x-button-border-color-opacity: var(--x-button-hover-border-color-opacity, 100%);
21
- --x-button-color: var(--x-button-hover-color, var(--color-accent-foreground));
22
- --x-button-color-mix: var(--x-button-hover-color-mix, transparent);
23
- --x-button-color-opacity: var(--x-button-hover-color-opacity, 100%);
15
+ @media (hover: hover) and (pointer: fine) {
16
+ --x-button-background-color: var(--x-button-hover-background-color, var(--color-accent));
17
+ --x-button-background-color-mix: var(--x-button-hover-background-color-mix);
18
+ --x-button-background-color-opacity: var(--x-button-hover-background-color-opacity);
19
+ --x-button-border-color: var(--x-button-hover-border-color, var(--color-accent));
20
+ --x-button-border-color-mix: var(--x-button-hover-border-color-mix, transparent);
21
+ --x-button-border-color-opacity: var(--x-button-hover-border-color-opacity, 100%);
22
+ --x-button-color: var(--x-button-hover-color, var(--color-accent-foreground));
23
+ --x-button-color-mix: var(--x-button-hover-color-mix, transparent);
24
+ --x-button-color-opacity: var(--x-button-hover-color-opacity, 100%);
25
+ }
24
26
  }
25
27
 
26
28
  &:focus {
package/src/components/drawer/default.css CHANGED
@@ -13,6 +13,11 @@
13
13
  scrollbar-width: none;
14
14
  scroll-behavior: smooth;
15
15
  -webkit-overflow-scrolling: touch;
16
+ overscroll-behavior: contain;
17
+
18
+ &:not([open]), &::backdrop {
19
+ display: none;
20
+ }
16
21
 
17
22
  &::-webkit-scrollbar {
18
23
  display: none;
@@ -24,10 +29,6 @@
24
29
  scroll-snap-align: end;
25
30
  }
26
31
 
27
- &[inert] {
28
- pointer-events: none;
29
- }
30
-
31
32
  &.flex-col {
32
33
  overflow: hidden auto;
33
34
 
package/src/components/drawer/index.d.ts CHANGED
@@ -10,4 +10,5 @@ export interface ScrollDrawerOptions {
10
10
 
11
11
  export function showDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
12
12
  export function closeDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
13
- export function scrollDrawer(element: HTMLElement | Element, options?: ScrollDrawerOptions): void
13
+ export function scrollInitDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
14
+ export function scrollDrawer(element: HTMLDialogElement | Element, options?: ScrollDrawerOptions): void
package/src/components/drawer/index.js CHANGED
@@ -1,10 +1,12 @@
1
+ import { nextRepaint } from '../../common.js'
2
+
1
3
  /**
2
4
  * @param {HTMLElement | Element} element
3
5
  * @param {number} distance
4
6
  * @param {'top' | 'left'} direction
5
7
  * @returns void
6
8
  */
7
- export const showDrawer = (element, distance = 0, direction = 'left') => {
9
+ export const showDrawer = async (element, distance = 0, direction = 'left') => {
8
10
  element.scroll({ [direction]: distance })
9
11
  }
10
12
 
@@ -20,6 +22,17 @@ export const closeDrawer = (element, distance = element.scrollWidth, direction =
20
22
 
21
23
  /**
22
24
  * @param {HTMLElement | Element} element
25
+ * @param {number} distance
26
+ * @param {'top' | 'left'} direction
27
+ * @returns void
28
+ */
29
+ export const scrollInitDrawer = async (element, distance = element.scrollWidth, direction = 'left') => {
30
+ element.scroll({ [direction]: distance, behavior: 'instant' })
31
+ await nextRepaint()
32
+ }
33
+
34
+ /**
35
+ * @param {HTMLDialogElement | Element} element
23
36
  * @param {import("./").ScrollDrawerOptions} options
24
37
  * @returns void
25
38
  */
@@ -49,6 +62,7 @@ export const scrollDrawer = (element, options = {}) => {
49
62
  if ((options.scrollDirection === options.scrollClose) && !element.inert) {
50
63
  element.classList.remove(...options.snapClass.split(/\s/))
51
64
  element.inert = true
65
+ element.close && element.close()
52
66
  element.dispatchEvent(new CustomEvent('x-drawer:close'))
53
67
  }
54
68
  }
package/src/components/drawer/props/content.css CHANGED
@@ -2,6 +2,6 @@
2
2
  --x-drawer-content-background-color: var(--color-body-primary);
3
3
  --x-drawer-content-padding-block: 2rem;
4
4
  --x-drawer-content-padding-inline: 1.5rem;
5
- --x-drawer-content-inline-size: calc(100vw - 4rem);
5
+ --x-drawer-content-inline-size: 100%;
6
6
  --x-drawer-content-block-size: 100%;
7
7
  }
package/tailwind.config.js CHANGED
@@ -16,5 +16,8 @@ export default {
16
16
  }),
17
17
  containerQueries,
18
18
  animate
19
- ]
19
+ ],
20
+ future: {
21
+ hoverOnlyWhenSupported: true
22
+ }
20
23
  }
package/types/index.d.ts CHANGED
@@ -105,6 +105,7 @@ declare module 'winduum/src/components/dialog' {
105
105
  closable?: boolean | null
106
106
  openAttribute?: string
107
107
  closedAttribute?: string
108
+ contentSelector?: string
108
109
  scrollbarWidthProperty?: string
109
110
  }
110
111
 
@@ -128,7 +129,8 @@ declare module 'winduum/src/components/drawer' {
128
129
 
129
130
  export function showDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
130
131
  export function closeDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
131
- export function scrollDrawer(element: HTMLElement | Element, options?: ScrollDrawerOptions): void
132
+ export function scrollInitDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
133
+ export function scrollDrawer(element: HTMLDialogElement | Element, options?: ScrollDrawerOptions): void
132
134
 
133
135
  export {};
134
136
  }
@@ -137,7 +139,7 @@ declare module 'winduum/src/components/form' {
137
139
  export interface ValidateFormOptions {
138
140
  validateSelectors?: string
139
141
  validateOptions?: ValidateFieldOptions
140
- submitterLoadingClass?: string
142
+ submitterLoadingAttribute?: string
141
143
  }
142
144
 
143
145
  export interface ValidateFieldOptions {
@@ -151,11 +153,11 @@ declare module 'winduum/src/components/form' {
151
153
  endParentSelector?: string
152
154
  endSelector?: string
153
155
  endContent?: string
154
- validClass?: string
156
+ validAttribute?: string
155
157
  validIcon?: string | null
156
- invalidClass?: string
158
+ invalidAttribute?: string
157
159
  invalidIcon?: string
158
- activeClass?: string
160
+ activeAttribute?: string
159
161
  }
160
162
 
161
163
  export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
@@ -177,34 +179,19 @@ declare module 'winduum/src/components/tabs' {
177
179
 
178
180
  declare module 'winduum/src/components/toaster' {
179
181
  export interface ShowToastOptions {
180
- visibleClass?: string
182
+ openAttribute?: string
181
183
  autoHide?: number | null
182
184
  heightProperty?: string
183
185
  close?: CloseToastOptions
184
186
  }
185
187
 
186
188
  export interface CloseToastOptions {
187
- hiddenClass?: string
189
+ closedAttribute?: string
188
190
  heightProperty?: string
189
191
  }
190
192
 
191
- export interface InsertToasterOptions {
192
- classes?: string
193
- }
194
-
195
- export interface InsertToastOptions {
196
- classes?: string
197
- title?: string
198
- text?: string
199
- start?: string
200
- end?: string
201
- show?: ShowToastOptions
202
- }
203
-
204
193
  export function closeToast(element: HTMLElement, options?: CloseToastOptions): Promise<void>
205
194
  export function showToast(element: HTMLElement, options?: ShowToastOptions): Promise<void>
206
- export function insertToaster(element: HTMLElement, options?: InsertToasterOptions): Promise<void>
207
- export function insertToast(element: HTMLElement, options?: InsertToastOptions): Promise<void>
208
195
  export function closeToaster(element: HTMLElement, options?: CloseToastOptions): Promise<void>
209
196
 
210
197
  export {};
package/types/index.d.ts.map CHANGED
@@ -32,6 +32,7 @@
32
32
  "ScrollDrawerOptions",
33
33
  "showDrawer",
34
34
  "closeDrawer",
35
+ "scrollInitDrawer",
35
36
  "scrollDrawer",
36
37
  "ValidateFormOptions",
37
38
  "ValidateFieldOptions",
@@ -40,12 +41,8 @@
40
41
  "toggleTab",
41
42
  "ShowToastOptions",
42
43
  "CloseToastOptions",
43
- "InsertToasterOptions",
44
- "InsertToastOptions",
45
44
  "closeToast",
46
45
  "showToast",
47
- "insertToaster",
48
- "insertToast",
49
46
  "closeToaster",
50
47
  "ShowPopoverOptions",
51
48
  "HidePopoverOptions",
@@ -91,5 +88,6 @@
91
88
  null,
92
89
  null
93
90
  ],
94
- "mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;;;;;;;kBCtBTC,sBAAsBA;;;;;;;;kBAQtBC,yBAAyBA;;;;;;kBAMzBC,qBAAqBA;;;;;;;;kBAQrBC,uBAAuBA;;;;;kBAKvBC,mBAAmBA;;;;iBAIpBC,UAAUA;iBACVC,UAAUA;iBACVC,QAAQA;iBACRC,YAAYA;iBACZC,eAAeA;iBACfC,cAAcA;iBACdC,kBAAkBA;iBAClBC,gBAAgBA;iBAChBC,YAAYA;;;;;;kBCvCXC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;;;kBCPXC,cAAcA;;;;;cAKlBC,cAAcA;iBACXC,WAAWA;iBACXC,YAAYA;iBACZC,aAAaA;;;;;;kBCRZJ,cAAcA;;;;;;;;cAQlBC,cAAcA;iBACXI,UAAUA;iBACVC,WAAWA;;;;;;kBCVVC,mBAAmBA;;;;;;;;;;iBAUpBC,UAAUA;iBACVC,WAAWA;iBACXC,YAAYA;;;;;;kBCZXC,mBAAmBA;;;;;;kBAMnBC,oBAAoBA;;;;;;;;;;;;;;;;;;iBAkBrBC,YAAYA;iBACZC,aAAaA;;;;;;;;;;;iBCpBbC,SAASA;;;;;;kBCLRC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;kBAKjBC,oBAAoBA;;;;kBAIpBC,kBAAkBA;;;;;;;;;iBASnBC,UAAUA;iBACVC,SAASA;iBACTC,aAAaA;iBACbC,WAAWA;iBACXC,YAAYA;;;;;;;kBC3BXC,kBAAkBA;;;;;;;;;;kBAUlBC,kBAAkBA;;;;iBAInBC,WAAWA;iBACXC,WAAWA;iBACXC,aAAaA;;;;;;kBClBZC,uBAAuBA;;;;;;kBAMvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;;;iBClBdC,UAAUA;;;;;;iBCAVC,UAAUA"
91
+ "mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;;;;;;;kBCtBTC,sBAAsBA;;;;;;;;kBAQtBC,yBAAyBA;;;;;;kBAMzBC,qBAAqBA;;;;;;;;kBAQrBC,uBAAuBA;;;;;kBAKvBC,mBAAmBA;;;;iBAIpBC,UAAUA;iBACVC,UAAUA;iBACVC,QAAQA;iBACRC,YAAYA;iBACZC,eAAeA;iBACfC,cAAcA;iBACdC,kBAAkBA;iBAClBC,gBAAgBA;iBAChBC,YAAYA;;;;;;kBCvCXC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;;;kBCPXC,cAAcA;;;;;cAKlBC,cAAcA;iBACXC,WAAWA;iBACXC,YAAYA;iBACZC,aAAaA;;;;;;kBCRZJ,cAAcA;;;;;;;;;cASlBC,cAAcA;iBACXI,UAAUA;iBACVC,WAAWA;;;;;;kBCXVC,mBAAmBA;;;;;;;;;;iBAUpBC,UAAUA;iBACVC,WAAWA;iBACXC,gBAAgBA;iBAChBC,YAAYA;;;;;;kBCbXC,mBAAmBA;;;;;;kBAMnBC,oBAAoBA;;;;;;;;;;;;;;;;;;iBAkBrBC,YAAYA;iBACZC,aAAaA;;;;;;;;;;;iBCpBbC,SAASA;;;;;;kBCLRC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;iBAKlBC,UAAUA;iBACVC,SAASA;iBACTC,YAAYA;;;;;;;kBCZXC,kBAAkBA;;;;;;;;;;kBAUlBC,kBAAkBA;;;;iBAInBC,WAAWA;iBACXC,WAAWA;iBACXC,aAAaA;;;;;;kBClBZC,uBAAuBA;;;;;;kBAMvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;;;iBClBdC,UAAUA;;;;;;iBCAVC,UAAUA",
92
+ "ignoreList": []
95
93
  }