@operato/popup 2.0.0-alpha.9 → 2.0.0-alpha.92

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

@@ -1,6 +1,6 @@
 import '../src/ox-popup-menu.js'
 import '../src/ox-popup-menuitem.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-checkbox.js'
 
 import { html, TemplateResult } from 'lit'
@@ -30,11 +30,11 @@ function popup(e: MouseEvent) {
           console.log('first level article selected')
         }}
       >
-        <mwc-icon slot="icon">article</mwc-icon>
+        <md-icon slot="icon">article</md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem label="home">
-        <mwc-icon slot="icon">home</mwc-icon>
+        <md-icon slot="icon">home</md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
@@ -42,16 +42,16 @@ function popup(e: MouseEvent) {
       <ox-popup-menuitem
         label="click me to toggle"
         @selected=${function (e: Event) {
-          const icon = (e.target as HTMLElement).querySelector('mwc-icon')
+          const icon = (e.target as HTMLElement).querySelector('md-icon')
           icon && (icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check')
         }}
         alive-on-select
       >
-        <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
+        <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem label="verified" @selected=${(e: Event) => console.log('selected verified')}>
-        <mwc-icon slot="icon">verified</mwc-icon>
+        <md-icon slot="icon">verified</md-icon>
         <ox-popup-menu>
           <ox-popup-menuitem
             label="article"
@@ -60,26 +60,26 @@ function popup(e: MouseEvent) {
             }}
             alive-on-select
           >
-            <mwc-icon slot="icon">article</mwc-icon>
+            <md-icon slot="icon">article</md-icon>
           </ox-popup-menuitem>
 
           <ox-popup-menuitem label="home">
-            <mwc-icon slot="icon">home</mwc-icon>
+            <md-icon slot="icon">home</md-icon>
           </ox-popup-menuitem>
 
           <ox-popup-menuitem label="verified">
-            <mwc-icon slot="icon">verified</mwc-icon>
+            <md-icon slot="icon">verified</md-icon>
             <ox-popup-menu>
               <ox-popup-menuitem label="article">
-                <mwc-icon slot="icon">article</mwc-icon>
+                <md-icon slot="icon">article</md-icon>
               </ox-popup-menuitem>
 
               <ox-popup-menuitem label="home">
-                <mwc-icon slot="icon">home</mwc-icon>
+                <md-icon slot="icon">home</md-icon>
               </ox-popup-menuitem>
 
               <ox-popup-menuitem label="verified">
-                <mwc-icon slot="icon">verified</mwc-icon>
+                <md-icon slot="icon">verified</md-icon>
               </ox-popup-menuitem>
 
               <ox-popup-menuitem label="checkbox">
@@ -125,21 +125,32 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
-
-    <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to popup menu</div>
-  `
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    #place {
+      width: 100%;
+      height: 500px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 500px;
+    }
+  </style>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to popup menu</div>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-prompt-icon.stories.ts

@@ -0,0 +1,74 @@
+import { html, TemplateResult } from 'lit'
+
+import { OxPrompt } from '../src/ox-prompt'
+
+export default {
+  title: 'OxPrompt - Icon',
+  component: 'ox-prompt',
+  argTypes: {
+    type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
+    debug: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  type: 'success' | 'error' | 'warning' | 'info' | 'question'
+  debug: boolean
+}
+
+function popup(e: MouseEvent, type: 'success' | 'error' | 'warning' | 'info' | 'question' = 'warning', debug: boolean) {
+  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
+
+  //@ts-ignore
+  window.POPUP_DEBUG = debug
+
+  OxPrompt.open({
+    title: 'Are you sure ?',
+    text: 'Are you sure to exit this page ?',
+    type,
+    confirmButton: { text: 'Confirm' },
+    cancelButton: { text: 'Cancel' }
+  })
+}
+
+const Template: Story<ArgTypes> = ({ type, debug }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <script></script>
+
+  <style>
+    #place {
+      width: 100%;
+      height: 500px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 500px;
+    }
+  </style>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e, type, debug)}>Click this to prompt image</div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  type: 'warning',
+  debug: true
+}

package/stories/ox-prompt-normal.stories.ts

@@ -27,23 +27,33 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-
-    <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
-
-    <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>
-  `
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    #place {
+      width: 100%;
+      height: 500px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 500px;
+    }
+  </style>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-prompt.stories.ts

@@ -30,23 +30,33 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-
-    <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
-
-    <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>
-  `
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    #place {
+      width: 100%;
+      height: 500px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 500px;
+    }
+  </style>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/themes/input-theme.css

@@ -1,9 +1,9 @@
 body {
-  --ox-input-border: 1px solid rgba(0, 0, 0, 0.1);
-  --ox-input-border-radius: var(--border-radius);
-  --ox-input-padding: var(--input-padding);
-  --ox-input-font: normal 15px var(--theme-font);
-  --ox-input-color: var(--secondary-color);
+  --input-border: 1px solid rgba(0, 0, 0, 0.1);
+  --input-border-radius: var(--border-radius);
+  --input-padding: var(--input-padding);
+  --input-font: normal 15px var(--theme-font);
+  --input-color: var(--secondary-color);
 }
 
 @media screen and (max-width: 480px) {
@@ -13,7 +13,7 @@ body {
 
 @media (min-width: 481px) and (max-width: 1024px) {
   body {
-    --ox-input-font: normal 16px var(--theme-font);
-    --ox-input-padding: 4px 5px;
+    --input-font: normal 16px var(--theme-font);
+    --input-padding: 4px 5px;
   }
 }