@esportsplus/ui 0.13.11 → 0.14.2

package/build/components/field/title.js

@@ -8,14 +8,9 @@ export default (data) => {
         <div class='field-title --flex-horizontal-space-between --flex-vertical'>
             ${data.title}
 
-            ${data?.required && html `
-                <div
-                    class='bubble --background-primary --margin-left'
-                    ${tooltip.onhover().attributes}
-                >
-                    <span class='tooltip-message tooltip-message--w'>Required</span>
-                </div>
-            `}
+            ${data?.required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html `
+                <span class='tooltip-message tooltip-message--w'>Required</span>
+            `)}
         </div>
     `;
 };

package/build/components/index.d.ts

@@ -22,8 +22,9 @@ export { default as link } from './link/index.js';
 export * as loader from './loader/index.js';
 export { default as loading } from './loading/index.js';
 export { default as magnet } from './magnet/index.js';
-export { default as modal } from './modal/index.js';
+export * as modal from './modal/index.js';
 export { default as number } from './number/index.js';
+export { default as overlay } from './overlay/index.js';
 export { default as page } from './page/index.js';
 export { default as root } from './root/index.js';
 export * as row from './row/index.js';

package/build/components/index.js

@@ -22,8 +22,9 @@ export { default as link } from './link/index.js';
 export * as loader from './loader/index.js';
 export { default as loading } from './loading/index.js';
 export { default as magnet } from './magnet/index.js';
-export { default as modal } from './modal/index.js';
+export * as modal from './modal/index.js';
 export { default as number } from './number/index.js';
+export { default as overlay } from './overlay/index.js';
 export { default as page } from './page/index.js';
 export { default as root } from './root/index.js';
 export * as row from './row/index.js';

package/build/components/modal/index.d.ts

@@ -1,4 +1 @@
-import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
-declare const _default: (data: Parameters<typeof scrollbar>[0], content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/modal/index.js

@@ -1,10 +1 @@
-import { isArray } from '@esportsplus/utilities';
-import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
-export default (data, content) => {
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
-    data.class.push('modal');
-    return scrollbar(data, content);
-};

package/build/components/modal/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.modal{--margin-horizontal:0px;--margin-vertical:0px;--max-height:calc(100svh - (var(--margin-vertical)*2));--max-width:320px;height:auto;max-height:var(--max-height);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform-origin:50%;width:min(var(--max-width),100svw - var(--margin-horizontal)*2);z-index:2;position:fixed;bottom:50%;right:50%;overflow:hidden;transform:translate(50%,50%)}.modal:not(.--active){opacity:0;pointer-events:none;transform:translate(50%,50%)scale(.8)}.modal:not(.--active) input[type=password]{display:none}.modal-frame{transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform-origin:50%}.modal-frame:not(.--active){display:none}}
+@layer components {.modal{--margin-horizontal:0px;--margin-vertical:0px;--max-width:480px;transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform-origin:50%;width:min(var(--max-width),100svw - var(--margin-horizontal)*2);z-index:9}.modal:not(.--active){opacity:0;pointer-events:none;transform:translate(50%,50%)scale(.8)}.modal:not(.--active) input[type=password]{display:none}.modal-frame{transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform-origin:50%}.modal-frame:not(.--active){display:none}}
 /*$vite$:1*/

package/build/components/overlay/index.d.ts

@@ -0,0 +1,4 @@
+import scrollbar from '../../components/scrollbar/index.js';
+import './scss/index.scss';
+declare const _default: (data: Parameters<typeof scrollbar>[0], content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
+export default _default;

package/build/components/overlay/index.js

@@ -0,0 +1,10 @@
+import { isArray } from '@esportsplus/utilities';
+import scrollbar from '../../components/scrollbar/index.js';
+import './scss/index.scss';
+export default (data, content) => {
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+    data.class.push('overlay');
+    return scrollbar(data, content);
+};

package/build/components/overlay/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.overlay{cursor:default;z-index:1;position:fixed;inset:0;overflow:hidden}.overlay:not(.--active) input[type=password]{display:none}.overlay-content{flex:0 0 var(--width-default);width:var(--width-default)}}
+/*$vite$:1*/

package/package.json

@@ -47,7 +47,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.13.11",
+  "version": "0.14.2",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/field/title.ts

@@ -11,14 +11,9 @@ export default (data: { required?: boolean, title?: unknown }) => {
         <div class='field-title --flex-horizontal-space-between --flex-vertical'>
             ${data.title}
 
-            ${data?.required && html`
-                <div
-                    class='bubble --background-primary --margin-left'
-                    ${tooltip.onhover().attributes}
-                >
-                    <span class='tooltip-message tooltip-message--w'>Required</span>
-                </div>
-            `}
+            ${data?.required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html`
+                <span class='tooltip-message tooltip-message--w'>Required</span>
+            `)}
         </div>
     `;
 }

package/src/components/index.ts

@@ -22,8 +22,9 @@ export { default as link } from './link';
 export * as loader from './loader';
 export { default as loading } from './loading';
 export { default as magnet } from './magnet';
-export { default as modal } from './modal';
+export * as modal from './modal';
 export { default as number } from './number';
+export { default as overlay } from './overlay';
 export { default as page } from './page';
 export { default as root } from './root';
 export * as row from './row';

package/src/components/modal/index.ts

@@ -1,14 +1 @@
-import { isArray } from '@esportsplus/utilities';
-import scrollbar from '~/components/scrollbar';
-import './scss/index.scss';
-
-
-export default (data: Parameters<typeof scrollbar>[0], content: unknown) => {
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
-
-    (data.class as unknown[]).push('modal');
-
-    return scrollbar(data, content);
-};
+import './scss/index.scss';

package/src/components/modal/scss/index.scss

@@ -3,16 +3,12 @@
 @use './variables.scss';
 
 .modal {
-    @include lib.position(fixed, center);
-    height: auto;
-    max-height: var(--max-height);
-    overflow: hidden;
     transition:
         opacity var(--transition-duration) ease-in-out,
         transform var(--transition-duration) ease-in-out;
     transform-origin: center;
     width: min(var(--max-width), calc(100svw - (var(--margin-horizontal) * 2)));
-    z-index: 2;
+    z-index: 9;
 
     @include tokens.state(inactive) {
         opacity: 0;

package/src/components/modal/scss/variables.scss

@@ -1,6 +1,5 @@
 .modal {
     --margin-horizontal: 0px;
     --margin-vertical: 0px;
-    --max-height: calc(100svh - (var(--margin-vertical) * 2));
-    --max-width: 320px;
+    --max-width: 480px;
 }

package/src/components/overlay/index.ts

@@ -0,0 +1,14 @@
+import { isArray } from '@esportsplus/utilities';
+import scrollbar from '~/components/scrollbar';
+import './scss/index.scss';
+
+
+export default (data: Parameters<typeof scrollbar>[0], content: unknown) => {
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+
+    (data.class as unknown[]).push('overlay');
+
+    return scrollbar(data, content);
+};

package/src/components/overlay/scss/index.scss

@@ -0,0 +1,22 @@
+@use '/lib';
+@use '/tokens';
+
+.overlay {
+    @include lib.position(fixed, full);
+    cursor: default;
+    overflow: hidden;
+    z-index: 1;
+
+
+    @include tokens.state(inactive) {
+        input[type='password'] {
+            display: none;
+        }
+    }
+
+
+    &-content {
+        flex: 0 0 var(--width-default);
+        width: var(--width-default);
+    }
+}