webcoreui 1.1.0-beta.3 → 1.2.0-0

package/components/ContextMenu/ContextMenu.tsx

@@ -24,8 +24,13 @@ const ContextMenu = ({
         event.preventDefault()
 
         if (content.current) {
-            content.current.style.top = `${event.offsetY}px`
-            content.current.style.left = `${event.offsetX}px`
+            const target = event.currentTarget as HTMLElement
+            const rect = target.getBoundingClientRect()
+            const x = event.clientX - rect.left
+            const y = event.clientY - rect.top
+
+            content.current.style.top = `${y}px`
+            content.current.style.left = `${x}px`
             content.current.dataset.show = 'true'
         }
     }

package/components/Copy/Copy.astro

@@ -8,8 +8,6 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './copy.module.scss'
 
-import type { IconProps } from '../Icon/icon'
-
 interface Props extends CopyProps {}
 
 const {
@@ -42,13 +40,13 @@ const classes = classNames([
         >
             {copyIcon?.startsWith('<svg')
                 ? <Fragment set:html={copyIcon} />
-                : <Icon type={copyIcon as IconProps['type']} />
+                : <Icon type={copyIcon} />
             }
         </button>
         <span class={styles.copied}>
             {copiedIcon?.startsWith('<svg')
                 ? <Fragment set:html={copiedIcon} />
-                : <Icon type={copiedIcon as IconProps['type']} />
+                : <Icon type={copiedIcon} />
             }
         </span>
     </div>
@@ -71,7 +69,7 @@ const classes = classNames([
             copied.style.opacity = '1'
             badge.removeAttribute('data-tooltip')
 
-            navigator.clipboard.writeText(text as string)
+            navigator.clipboard.writeText(text || '')
         }, true)
     }
 

package/components/Copy/Copy.svelte

@@ -41,7 +41,7 @@
         copiedButton!.style.opacity = '1'
         tooltip = ''
 
-        navigator.clipboard.writeText(text as string)
+        navigator.clipboard.writeText(text || '')
     }
 </script>
 

package/components/Copy/Copy.tsx

@@ -42,7 +42,7 @@ const Copy = ({
 
         setTooltipText('')
 
-        navigator.clipboard.writeText(text as string)
+        navigator.clipboard.writeText(text || '')
     }
 
     return (

package/components/Input/input.ts

@@ -1,62 +1,62 @@
-import type { Snippet } from 'svelte'
-
-export type InputTarget = {
-    currentTarget: HTMLInputElement
-}
-
-export type InputProps = {
-    type?: 'text'
-        | 'email'
-        | 'password'
-        | 'number'
-        | 'tel'
-        | 'url'
-        | 'search'
-        | 'file'
-        | 'date'
-        | 'datetime-local'
-        | 'month'
-        | 'week'
-        | 'time'
-        | 'color'
-    theme?: 'info'
-        | 'success'
-        | 'warning'
-        | 'alert'
-        | 'fill'
-        | null
-    value?: string | number
-    name?: string
-    placeholder?: string
-    label?: string
-    disabled?: boolean
-    subText?: string
-    maxLength?: number
-    min?: number
-    max?: number
-    step?: number
-    multiple?: boolean
-    pattern?: string
-    required?: boolean
-    autofocus?: boolean
-    autocomplete?: 'on' | 'off'
-    className?: string
-    labelClassName?: string
-    [key: string]: any
-}
-
-export type SvelteInputProps = {
-    onChange?: (event: Event & InputTarget) => void
-    onKeyUp?: (event: KeyboardEvent & InputTarget) => void
-    onInput?: (event: any) => void
-    onClick?: (event: MouseEvent & InputTarget) => void
-    children?: Snippet
-} & InputProps
-
-export type ReactInputProps = {
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
-    onInput?: (event: React.FormEvent<HTMLInputElement>) => void
-    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
-    children?: React.ReactNode
-} & InputProps
+import type { Snippet } from 'svelte'
+
+export type InputTarget = {
+    currentTarget: HTMLInputElement
+}
+
+export type InputProps = {
+    type?: 'text'
+        | 'email'
+        | 'password'
+        | 'number'
+        | 'tel'
+        | 'url'
+        | 'search'
+        | 'file'
+        | 'date'
+        | 'datetime-local'
+        | 'month'
+        | 'week'
+        | 'time'
+        | 'color'
+    theme?: 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | 'fill'
+        | null
+    value?: string | number
+    name?: string
+    placeholder?: string
+    label?: string
+    disabled?: boolean
+    subText?: string
+    maxLength?: number
+    min?: number
+    max?: number
+    step?: number
+    multiple?: boolean
+    pattern?: string
+    required?: boolean
+    autofocus?: boolean
+    autocomplete?: 'on' | 'off' | 'one-time-code'
+    className?: string
+    labelClassName?: string
+    [key: string]: any
+}
+
+export type SvelteInputProps = {
+    onChange?: (event: Event & InputTarget) => void
+    onKeyUp?: (event: KeyboardEvent & InputTarget) => void
+    onInput?: (event: any) => void
+    onClick?: (event: MouseEvent & InputTarget) => void
+    children?: Snippet
+} & InputProps
+
+export type ReactInputProps = {
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
+    children?: React.ReactNode
+} & InputProps

package/components/Modal/Modal.astro

@@ -1,75 +1,75 @@
----
-import type { ModalProps } from './modal'
-
-import Button from '../Button/Button.astro'
-
-import alert from '../../icons/alert.svg?raw'
-import success from '../../icons/circle-check.svg?raw'
-import closeIcon from '../../icons/close.svg?raw'
-import info from '../../icons/info.svg?raw'
-import warning from '../../icons/warning.svg?raw'
-
-import styles from './modal.module.scss'
-
-interface Props extends ModalProps {}
-
-const iconMap = {
-    info,
-    success,
-    warning,
-    alert
-}
-
-const {
-    title,
-    subTitle,
-    showCloseIcon = true,
-    closeOnEsc = true,
-    closeOnOverlay = true,
-    transparent,
-    theme,
-    id,
-    className,
-    ...rest
-} = Astro.props
-
-const close = [
-    showCloseIcon && 'icon',
-    closeOnEsc && 'esc',
-    closeOnOverlay && 'overlay'
-].filter(Boolean).join(',')
-
-const classes = [
-    styles.modal,
-    transparent && styles.transparent,
-    theme && styles[theme],
-    className
-]
----
-
-<dialog
-    class:list={classes}
-    id={id}
-    data-close={close.length ? close : undefined}
-    {...rest}
->
-    {showCloseIcon && (
-        <Button
-            theme="flat"
-            className={styles.close}
-            data-id="close"
-            aria-label="close"
-        >
-            <Fragment set:html={closeIcon} />
-        </Button>
-    )}
-    {title && (
-        <strong class={styles.title}>
-            {theme && <Fragment set:html={iconMap[theme]} />}
-            {title}
-        </strong>
-    )}
-    {subTitle && <div class={styles.subTitle}>{subTitle}</div>}
-    <slot />
-</dialog>
-<div class={styles.overlay} />
+---
+import type { ModalProps } from './modal'
+
+import Button from '../Button/Button.astro'
+
+import alert from '../../icons/alert.svg?raw'
+import success from '../../icons/circle-check.svg?raw'
+import closeIcon from '../../icons/close.svg?raw'
+import info from '../../icons/info.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+
+import styles from './modal.module.scss'
+
+interface Props extends ModalProps {}
+
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
+const {
+    title,
+    subTitle,
+    showCloseIcon = true,
+    closeOnEsc = true,
+    closeOnOverlay = true,
+    transparent,
+    theme,
+    id,
+    className,
+    ...rest
+} = Astro.props
+
+const close = [
+    showCloseIcon && 'icon',
+    closeOnEsc && 'esc',
+    closeOnOverlay && 'overlay'
+].filter(Boolean).join(',')
+
+const classes = [
+    styles.modal,
+    transparent && styles.transparent,
+    theme && styles[theme],
+    className
+]
+---
+
+<dialog
+    class:list={classes}
+    id={id}
+    data-close={close.length ? close : undefined}
+    {...rest}
+>
+    {showCloseIcon && (
+        <Button
+            theme="flat"
+            className={styles.close}
+            data-id="close"
+            aria-label="close"
+        >
+            <Fragment set:html={closeIcon} />
+        </Button>
+    )}
+    {title && (
+        <strong class={styles.title}>
+            {theme && <Fragment set:html={iconMap[theme]} />}
+            {title}
+        </strong>
+    )}
+    {subTitle && <div class={styles.subTitle}>{subTitle}</div>}
+    <slot />
+</dialog>
+<div class={styles.overlay} />

package/components/Modal/modal.ts

@@ -1,25 +1,25 @@
-import type { Snippet } from 'svelte'
-
-export type ModalProps = {
-    title?: string
-    subTitle?: string
-    showCloseIcon?: boolean
-    closeOnEsc?: boolean
-    closeOnOverlay?: boolean
-    transparent?: boolean
-    id?: string
-    className?: string
-    theme?: 'info'
-        | 'success'
-        | 'warning'
-        | 'alert'
-    [key: string]: any
-}
-
-export type SvelteModalProps = {
-    children: Snippet
-} & ModalProps
-
-export type ReactModalProps = {
-    children?: React.ReactNode
-} & ModalProps
+import type { Snippet } from 'svelte'
+
+export type ModalProps = {
+    title?: string
+    subTitle?: string
+    showCloseIcon?: boolean
+    closeOnEsc?: boolean
+    closeOnOverlay?: boolean
+    transparent?: boolean
+    id?: string
+    className?: string
+    theme?: 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+    [key: string]: any
+}
+
+export type SvelteModalProps = {
+    children: Snippet
+} & ModalProps
+
+export type ReactModalProps = {
+    children?: React.ReactNode
+} & ModalProps