@operato/popup 7.0.5 → 7.0.20

package/stories/ox-popup-list.stories.ts

@@ -28,8 +28,9 @@ interface ArgTypes {
 function popup(e: MouseEvent, preventCloseOnBlur: boolean) {
   const popupList = document.querySelector('#popup-list') as OxPopupList
   popupList?.open({
-    top: e.pageY,
-    left: e.pageX
+    top: e.offsetY,
+    left: e.offsetX,
+    absolutePosition: false
   })
 }
 
@@ -58,6 +59,15 @@ const Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`
   </style>
 
   <style>
+    #container {
+      display: flex;
+    }
+
+    #noise {
+      width: 100px;
+      height: 100px;
+    }
+
     #place {
       width: 100%;
       height: 500px;
@@ -68,31 +78,34 @@ const Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`
     }
   </style>
 
-  <div id="place" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
-    Click this to popup list
-  </div>
-  <ox-popup-list
-    id="popup-list"
-    @select=${(e: Event) => console.log('select', e.target)}
-    multiple
-    ?prevent-close-on-blur=${preventCloseOnBlur}
-  >
-    <div option>Plain Text</div>
-
-    <div option>
-      <ox-checkbox label="checkbox" slot="icon" checked>checkbox</ox-checkbox>
-    </div>
-
-    <div option>
-      <input id="checkbox-01" type="checkbox" />
-      <label for="checkbox-01">custom option</label>
+  <div id="container">
+    <div id="noise"></div>
+    <div id="place" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
+      Click this to popup list
+      <ox-popup-list
+        id="popup-list"
+        @select=${(e: Event) => console.log('select', e.target)}
+        multiple
+        ?prevent-close-on-blur=${preventCloseOnBlur}
+      >
+        <div option>Plain Text</div>
+
+        <div option>
+          <ox-checkbox label="checkbox" slot="icon" checked>checkbox</ox-checkbox>
+        </div>
+
+        <div option>
+          <input id="checkbox-01" type="checkbox" />
+          <label for="checkbox-01">custom option</label>
+        </div>
+
+        <div option>
+          <label for="text-01">value</label>
+          <input id="text-01" type="text" value="Plain text input" />
+        </div>
+      </ox-popup-list>
     </div>
-
-    <div option>
-      <label for="text-01">value</label>
-      <input id="text-01" type="text" value="Plain text input" />
-    </div>
-  </ox-popup-list>
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-popup-menu.stories.ts

@@ -119,9 +119,10 @@ function popup(e: MouseEvent) {
         <input id="text-01" type="text" value="Plain text input" />
       </div>
     `,
-    top: e.pageY,
-    left: e.pageX,
-    parent: e.target as HTMLElement
+    top: e.offsetY,
+    left: e.offsetX,
+    parent: e.target as HTMLElement,
+    absolutePosition: false
   })
 }
 
@@ -150,18 +151,33 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
   </style>
 
   <style>
+    #container {
+      display: flex;
+      flex-direction: row;
+      height: 600px;
+    }
+
+    #padding {
+      width: 100px;
+      height: 100px;
+    }
+
     #place {
       width: 100%;
-      height: 500px;
+      height: 400px;
       text-align: center;
+      padding-left: 100px;
 
       background-color: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
-    Click this to popup menu
+  <div id="container">
+    <div id="padding"></div>
+    <div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
+      Click this to popup menu
+    </div>
   </div>
 `
 

package/stories/ox-popup.stories.ts

@@ -5,7 +5,7 @@ import { OxPopup } from '../src/ox-popup'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
-  title: 'ContextMenu',
+  title: 'Simple Popup',
   component: 'ox-popup',
   argTypes: {}
 }
@@ -23,9 +23,10 @@ function popup(e: MouseEvent) {
 
   OxPopup.open({
     template: html`<img src=${noImage} />`,
-    top: e.pageY,
-    left: e.pageX,
-    parent: e.target as HTMLElement
+    top: e.offsetY,
+    left: e.offsetX,
+    parent: e.target as HTMLElement,
+    absolutePosition: false
   })
 }
 
@@ -58,6 +59,8 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
       width: 100%;
       height: 500px;
       text-align: center;
+      padding: 20px;
+      margin: 20px;
 
       background-color: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);