winduum 2.0.0-next.21 → 2.0.0-next.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.0.0-next.21",
+  "version": "2.0.0-next.23",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",

package/src/components/button/spinner.css

@@ -1,8 +1,8 @@
-.x-button:has(.spinner) {
+.x-button:has(.spinner-absolute) {
   pointer-events: none;
   color: transparent;
 
-  .spinner {
+  .spinner-absolute {
     color: var(--x-button-color);
     position: absolute;
   }

package/src/components/compare/default.css

@@ -41,13 +41,13 @@
     }
   }
 
-  > :where(.x-button) {
+  > .x-button {
     inset-inline-start: var(--x-compare-position);
     margin-inline-start: calc(var(--x-button-inline-size) / 2 * -1);
     margin-block: auto;
   }
 
-  > :where(.x-image) {
+  > .x-image {
     display: grid;
     z-index: 0;
 

package/src/components/compare/index.d.ts

@@ -3,6 +3,6 @@ export interface SetPositionOptions {
     positionProperty?: string
 }
 
-export function setPosition(event: Event, options?: SetPositionOptions): void
-export function setKeyboardStep(event: KeyboardEvent, step?: string): void
-export function setMouseStep(event: MouseEvent, step?: string): void
+export function setPosition(element: HTMLInputElement, options?: SetPositionOptions): void
+export function setKeyboardStep(element: HTMLInputElement, key: string, step?: string): void
+export function setMouseStep(element: HTMLInputElement, step?: string): void

package/src/components/compare/index.js

@@ -1,34 +1,35 @@
 /**
- * @param {Event & { currentTarget: HTMLElement | Element }} event
+ * @param {HTMLInputElement} element
  * @param {import("./").SetPositionOptions} options
  * @returns void
  */
-export const setPosition = ({ currentTarget }, options = {}) => {
+export const setPosition = (element, options = {}) => {
     const { selector, positionProperty } = {
         selector: '.x-compare',
         positionProperty: '--x-compare-position',
         ...options
     }
 
-    currentTarget?.closest(selector)?.style.setProperty(positionProperty, `${currentTarget.value}%`)
+    element?.closest(selector)?.style.setProperty(positionProperty, `${element.value}%`)
 }
 
 /**
- * @param {KeyboardEvent & { currentTarget: HTMLInputElement | EventTarget }} event
+ * @param {HTMLInputElement} element
+ * @param {string} key
  * @param {string} step
  * @returns void
  */
-export const setKeyboardStep = ({ key, currentTarget }, step = '10') => {
+export const setKeyboardStep = (element, key, step = '10') => {
     if (key?.toLowerCase() !== 'arrowright' && key?.toLowerCase() !== 'arrowleft') return
 
-    currentTarget.step = step
+    element.step = step
 }
 
 /**
- * @param {MouseEvent & { currentTarget: HTMLInputElement | EventTarget }} event
+ * @param {HTMLInputElement} element
  * @param {string} step
  * @returns void
  */
-export const setMouseStep = ({ currentTarget }, step = '0.1') => {
-    currentTarget.step = step
+export const setMouseStep = (element, step = '0.1') => {
+    element.step = step
 }

package/src/components/form/index.d.ts

@@ -1,6 +1,7 @@
 export interface ValidateFormOptions {
     validateSelectors?: string
     validateOptions?: ValidateFieldOptions
+    scrollOptions?: ScrollIntoViewOptions
     submitterLoadingAttribute?: string
 }
 

package/src/components/form/index.js

@@ -8,6 +8,7 @@ export const validateForm = (event, options = {}) => {
         validateSelectors: '.x-control, .x-check, .x-switch, .x-rating, .x-color',
         validateOptions: {},
         submitterLoadingAttribute: 'data-loading',
+        scrollOptions: { behavior: 'smooth', block: 'center' },
         ...options
     }
 
@@ -15,7 +16,7 @@ export const validateForm = (event, options = {}) => {
         event.preventDefault()
         event.stopImmediatePropagation()
 
-        event.target.querySelector(':invalid').scrollIntoView({ behavior: 'smooth', block: 'center' })
+        event.target.querySelector(':invalid').scrollIntoView(options.scrollOptions)
         event.target.querySelector(':invalid').focus()
     } else {
         event?.submitter?.setAttribute(options.submitterLoadingAttribute, '')

package/src/components/popover/index.d.ts

@@ -1,6 +1,7 @@
 import { FlipOptions, Middleware, OffsetOptions, Placement, ShiftOptions } from "@floating-ui/dom";
 
 export interface ShowPopoverOptions {
+    anchorSelector: string,
     openAttribute?: string
     compute?: boolean
     placement?: Placement

package/src/components/popover/index.js

@@ -74,7 +74,7 @@ export const showPopover = async (element, options) => {
     popoverElement._cleanup = autoUpdate(
         element,
         popoverElement,
-        async () => await computePopover(element, popoverElement, options)
+        async () => await computePopover(options.anchorSelector ? document.querySelector(options.anchorSelector) : element, popoverElement, options)
     )
 }
 

package/src/utilities/ripple/index.d.ts

@@ -1 +1,7 @@
-export function showRipple(event: MouseEvent, element?: HTMLElement): void
+export interface ShowRippleOptions {
+    element: HTMLElement | Element
+    x: number
+    y: number
+}
+
+export function showRipple(options: ShowRippleOptions, element?: HTMLElement): void

package/src/utilities/ripple/index.js

@@ -1,25 +1,25 @@
 /**
  * Shows a ripple effect.
- * @param {MouseEvent} event - The dialog element to dismiss.
- * @param {HTMLElement} element - The options for closing the dialog.
+ * @param {import("./").ShowRippleOptions} options
+ * @param {HTMLElement} rippleElement
  * @returns void
  */
-export const showRipple = ({ currentTarget, offsetX, offsetY }, element = currentTarget.querySelector('.ripple')) => {
-    if (!element) {
-        currentTarget.insertAdjacentHTML('beforeend', "<div class='ripple'></div>")
-        element = currentTarget.querySelector('.ripple')
+export const showRipple = ({ element, x, y }, rippleElement = element.querySelector('.ripple')) => {
+    if (!rippleElement) {
+        element.insertAdjacentHTML('beforeend', "<div class='ripple'></div>")
+        rippleElement = element.querySelector('.ripple')
     }
 
-    element.classList.remove('animation-ripple')
+    rippleElement.classList.remove('animation-ripple')
 
-    if (element.clientWidth === 0 && element.clientHeight === 0) {
-        const d = Math.max(currentTarget.offsetWidth, currentTarget.offsetHeight)
+    if (rippleElement.clientWidth === 0 && rippleElement.clientHeight === 0) {
+        const d = Math.max(element.offsetWidth, element.offsetHeight)
 
-        element.style.width = d + 'px'
-        element.style.height = d + 'px'
+        rippleElement.style.width = d + 'px'
+        rippleElement.style.height = d + 'px'
     }
 
-    element.style.top = offsetY - (element.clientHeight / 2) + 'px'
-    element.style.left = offsetX - (element.clientWidth / 2) + 'px'
-    element.classList.add('animation-ripple')
+    rippleElement.style.top = y - (rippleElement.clientHeight / 2) + 'px'
+    rippleElement.style.left = x - (rippleElement.clientWidth / 2) + 'px'
+    rippleElement.classList.add('animation-ripple')
 }