fixed #273, 添加 definedController，避免使用当前组件时，页面未加载完成、或关联的组件未定义完成

zdhxiong · Nov 15, 2023 · aad2eeb · aad2eeb
1 parent 8cc8f25
commit aad2eeb
Show file tree

Hide file tree

Showing 58 changed files with 1,471 additions and 855 deletions.
diff --git a/demos/components/collapse.html b/demos/components/collapse.html
@@ -71,6 +71,13 @@
     import '../../packages/mdui/components/list-item.js';
     import '../../packages/mdui/components/card.js';
     import '../../packages/mdui/components/button-icon.js';
+
+    import { $ } from '../../packages/jq/index.js';
+    $(() => {
+      $('#default-value').on('change', (e) => {
+        console.log('change event: ', e.target);
+      })
+    });
   </script>
 </head>
 
@@ -126,7 +133,7 @@ <h2>accordion</h2>
 
     <section>
       <h2>default value</h2>
-      <mdui-collapse value="two" class="preset">
+      <mdui-collapse value="two" class="preset" id="default-value">
         <mdui-collapse-item value="one" header="one header">
           one content<br/>
           one content<br/>

diff --git a/demos/components/dialog.html b/demos/components/dialog.html
@@ -26,15 +26,24 @@
     import '../../packages/icons/refresh.js';
     import { $ } from '../../packages/jq/index.js';
 
-    $('.open').on('click', function() {
-      $(this).prev()[0].open = true;
-    });
+    $(() => {
+      $('.open').on('click', function() {
+        $(this).prev()[0].open = true;
+      });
 
-    $('.close').on('click', function() {
-      $(this).parents('mdui-dialog')[0].open = false;
-    });
+      $('.close').on('click', function() {
+        $(this).parents('mdui-dialog')[0].open = false;
+      });
 
-    $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`));
+      $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`));
+
+      $('#default-open').on({
+        open: (e) => { console.log('open event: ', e.target); },
+        opened: (e) => { console.log('opened event: ', e.target); },
+        close: (e) => { console.log('close event: ', e.target); },
+        closed: (e) => { console.log('closed event: ', e.target); },
+      });
+    });
   </script>
 </head>
 
@@ -160,9 +169,11 @@ <h2>header slot</h2>
     <section>
       <h2>header slot with top-app-bar</h2>
       <mdui-dialog
+        open
         close-on-esc
         close-on-overlay-click
         description="This will reset you app preferences back to their default settings, Them following accounts will also be signed out:"
+        id="default-open"
       >
         <!-- dialog 中的 mdui-top-app-bar 会自动设置 scroll-target 属性 -->
         <mdui-top-app-bar slot="header" variant="small" scroll-behavior="elevate">

diff --git a/demos/components/dropdown.html b/demos/components/dropdown.html
@@ -31,16 +31,25 @@
 
     $(() => {
       const $dropdown = $('.manual-dropdown');
+
       $('#manual-open').on('click', () => {
         $dropdown.each((_, dropdown) => {
           dropdown.open = true;
         });
       });
+
       $('#manual-close').on('click', () => {
         $dropdown.each((_, dropdown) => {
           dropdown.open = false;
         });
       });
+
+      $('#default-open').on({
+        open: (e) => { console.log('open event: ', e.target); },
+        opened: (e) => { console.log('opened event: ', e.target); },
+        close: (e) => { console.log('close event: ', e.target); },
+        closed: (e) => { console.log('closed event: ', e.target); },
+      });
     });
   </script>
 </head>
@@ -49,7 +58,7 @@
   <main>
     <section>
       <h2>default open</h2>
-      <mdui-dropdown open>
+      <mdui-dropdown open id="default-open">
         <mdui-button slot="trigger">Click</mdui-button>
         <mdui-menu>
           <mdui-menu-item>Item 1</mdui-menu-item>

diff --git a/demos/components/menu.html b/demos/components/menu.html
@@ -56,6 +56,13 @@
       $('#selects-submenu').on('change', function () {
         $('#selects-submenu-value').text(this.value);
       });
+
+      $('#default-open').on({
+        'submenu-open': (e) => { console.log('submenu-open event: ', e.target) },
+        'submenu-opened': (e) => { console.log('submenu-opened event: ', e.target) },
+        'submenu-close': (e) => { console.log('submenu-close event: ', e.target) },
+        'submenu-closed': (e) => { console.log('submenu-closed event: ', e.target) },
+      });
     });
   </script>
 </head>
@@ -169,10 +176,10 @@ <h2>Custom Item</h2>
 
     <section>
       <h2>Sub Menu</h2>
-      <mdui-menu>
+      <mdui-menu id="default-open">
         <mdui-menu-item disabled>Item 2</mdui-menu-item>
         <mdui-divider></mdui-divider>
-        <mdui-menu-item>
+        <mdui-menu-item submenu-open>
           Nested submenu
           <mdui-menu-item slot="submenu">Item 1</mdui-menu-item>
           <mdui-menu-item slot="submenu">Item 2</mdui-menu-item>

diff --git a/demos/components/navigation-bar.html b/demos/components/navigation-bar.html
@@ -42,7 +42,17 @@
     import '../../packages/icons/place--outlined.js';
     import { $ } from '../../packages/jq/index.js';
 
-    $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`));
+    $(() => {
+      $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`));
+
+      $('#default-value').on({
+        change: (e) => { console.log('change event: ', e.target); },
+        show: (e) => { console.log('show event: ', e.target); },
+        shown: (e) => { console.log('shown event: ', e.target); },
+        hide: (e) => { console.log('hide event: ', e.target); },
+        hidden: (e) => { console.log('hidden event: ', e.target); },
+      });
+    });
   </script>
 </head>
 
@@ -132,7 +142,7 @@ <h2>Active Icon slot</h2>
 
     <section>
       <h2>scroll-behavior="hide" & default position:fixed</h2>
-      <mdui-navigation-bar scroll-behavior="hide">
+      <mdui-navigation-bar scroll-behavior="hide" value="commute" id="default-value">
         <mdui-navigation-bar-item icon="place" value="place">Label</mdui-navigation-bar-item>
         <mdui-navigation-bar-item icon="commute" value="commute">Label</mdui-navigation-bar-item>
         <mdui-navigation-bar-item icon="bookmark_border" value="bookmark">Label</mdui-navigation-bar-item>

diff --git a/demos/components/navigation-drawer.html b/demos/components/navigation-drawer.html
@@ -17,7 +17,7 @@
     }
     .container {
       position: relative;
-      width: 800px;
+      width: 850px;
       height: 375px;
       box-sizing: border-box;
       overflow: auto;
@@ -38,26 +38,35 @@
     import '../../packages/mdui/components/icon.js';
     import { $ } from '../../packages/jq/index.js';
 
-    $('.open').on('click', function() {
-      if ($(this).prev().is('mdui-navigation-drawer')) {
-        $(this).prev()[0].open = true;
-      } else {
-        $(this).parent().prev()[0].open = true;
-      }
-    });
+    $(() => {
+      $('.open').on('click', function() {
+        if ($(this).prev().is('mdui-navigation-drawer')) {
+          $(this).prev()[0].open = true;
+        } else {
+          $(this).parent().prev()[0].open = true;
+        }
+      });
 
-    $('.close').on('click', function () {
-      $(this).parent()[0].open = false;
-    });
+      $('.close').on('click', function () {
+        $(this).parent()[0].open = false;
+      });
 
-    $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`));
+      $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`));
+
+      $('#default-open').on({
+        open: (e) => { console.log('open event: ', e.target); },
+        opened: (e) => { console.log('opened event: ', e.target); },
+        close: (e) => { console.log('close event: ', e.target); },
+        closed: (e) => { console.log('closed event: ', e.target); },
+      });
+    });
   </script>
 </head>
 <body>
 <main>
   <section>
     <h2>normal</h2>
-    <mdui-navigation-drawer close-on-esc close-on-overlay-click>
+    <mdui-navigation-drawer open close-on-esc close-on-overlay-click id="default-open">
       <mdui-button class="close">close</mdui-button>
       <mdui-list>
         <mdui-list-subheader>Mail</mdui-list-subheader>

diff --git a/demos/components/navigation-rail.html b/demos/components/navigation-rail.html
@@ -40,14 +40,20 @@
     import '../../packages/icons/image--outlined.js';
     import { $ } from '../../packages/jq/index.js';
 
-    $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`));
+    $(() => {
+      $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`));
 
-    $('.change-placement').on('change', function () {
-      $(this).next().find('mdui-navigation-rail')[0].placement = this.value;
-    });
+      $('.change-placement').on('change', function () {
+        $(this).next().find('mdui-navigation-rail')[0].placement = this.value;
+      });
+
+      $('.change-alignment').on('change', function () {
+        $(this).next().find('mdui-navigation-rail')[0].alignment = this.value;
+      });
 
-    $('.change-alignment').on('change', function () {
-      $(this).next().find('mdui-navigation-rail')[0].alignment = this.value;
+      $('#default-value').on('change', e => {
+        console.log('change event: ', e.target);
+      });
     });
   </script>
 </head>
@@ -103,7 +109,7 @@ <h2>no label</h2>
     <section>
       <h2>value</h2>
       <div class="container" style="position: relative; overflow: hidden;">
-        <mdui-navigation-rail contained value="recent">
+        <mdui-navigation-rail contained value="recent" id="default-value">
           <mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
           <mdui-fab lowered icon="edit--outlined" slot="top"></mdui-fab>
           <mdui-navigation-rail-item icon="folder_open--outlined" value="files">All Files</mdui-navigation-rail-item>

diff --git a/demos/components/radio.html b/demos/components/radio.html
@@ -23,14 +23,19 @@
     import '../../packages/mdui/components/button.js';
     import { $ } from '../../packages/jq/index.js';
 
-    $('#set-checked').on('change', function () {
-      $('mdui-radio-group[name="radio4"]')
-        .find(`mdui-radio[value="${this.value}"]`)[0]
-        .checked = true;
-    });
+    $(() => {
+      $('#set-checked').on('change', function () {
+        $('mdui-radio-group[name="radio4"]').val(this.value);
+      });
+
+      $('.prevent-default').on('invalid', (e) => {
+        e.preventDefault();
+      });
 
-    $('.prevent-default').on('invalid', (e) => {
-      e.preventDefault();
+      $('#default-value').on({
+        input: (e) => { console.log('input event: ', e.target); },
+        change: (e) => { console.log('change event: ', e.target); },
+      });
     });
   </script>
 </head>
@@ -57,7 +62,7 @@ <h2>Radio Group</h2>
 
     <section>
       <h2>Radio Group with default value</h2>
-      <mdui-radio-group name="radio2" value="two">
+      <mdui-radio-group name="radio2" value="two" id="default-value">
         <mdui-radio value="one"></mdui-radio>
         <mdui-radio value="two">Radio</mdui-radio>
         <mdui-radio value="three" disabled></mdui-radio>

diff --git a/demos/components/select.html b/demos/components/select.html
@@ -35,26 +35,35 @@
     import '../../packages/mdui/components/button-icon.js';
     import { $ } from '../../packages/jq/index.js';
 
-    // mdui-select 元素内不为空的（可包含 slot），填充 mdui-menu-item
-    $('mdui-select')
-      .filter((_, select) => !$(select).children().filter((_, child) => !child.slot).length)
-      .append(`<mdui-menu-item value="item-1">Item One</mdui-menu-item>
-        <mdui-menu-item value="item-2">Item Two</mdui-menu-item>
-        <mdui-menu-item value="item-3">Item Three</mdui-menu-item>
-        <mdui-menu-item value="item-4">Item Four</mdui-menu-item>
-        <mdui-menu-item value="item-5">Item Five</mdui-menu-item>`);
-
-    // multiple select 只能通过 js 设置初始值
-    $('.multiple-value').map((_, select) => {
-      select.value = ['item-2', 'item-3'];
-    });
-
-    $('.invalid').on('change', function () {
-      if (this.value !== 'item-3') {
-        this.setCustomValidity('请选择 item 3');
-      } else {
-        this.setCustomValidity('');
-      }
+    $(() => {
+      // mdui-select 元素内不为空的（可包含 slot），填充 mdui-menu-item
+      $('mdui-select')
+        .filter((_, select) => !$(select).children().filter((_, child) => !child.slot).length)
+        .append(`<mdui-menu-item value="item-1">Item One</mdui-menu-item>
+          <mdui-menu-item value="item-2">Item Two</mdui-menu-item>
+          <mdui-menu-item value="item-3">Item Three</mdui-menu-item>
+          <mdui-menu-item value="item-4">Item Four</mdui-menu-item>
+          <mdui-menu-item value="item-5">Item Five</mdui-menu-item>`);
+
+      // multiple select 只能通过 js 设置初始值
+      $('.multiple-value').map((_, select) => {
+        select.value = ['item-2', 'item-3'];
+      });
+
+      $('.invalid').on('change', function () {
+        if (this.value !== 'item-3') {
+          this.setCustomValidity('请选择 item 3');
+        } else {
+          this.setCustomValidity('');
+        }
+      });
+
+      $('#default-value').on('change', (e) => {
+        console.log('change event: ', e.target, e.target.value);
+      });
+      $('#default-value-multiple').on('change', (e) => {
+        console.log('multiple change event: ', e.target, e.target.value);
+      });
     });
   </script>
 </head>
@@ -93,10 +102,10 @@ <h2>label</h2>
 
     <section>
       <h2>default value</h2>
-      <mdui-select value="item-3" label="single"></mdui-select>
+      <mdui-select value="item-3" label="single" id="default-value"></mdui-select>
       <mdui-select value="item-3" label="single" variant="outlined"></mdui-select>
       <br />
-      <mdui-select label="multiple" multiple class="multiple-value"></mdui-select>
+      <mdui-select label="multiple" multiple class="multiple-value" id="default-value-multiple"></mdui-select>
       <mdui-select label="multiple" multiple class="multiple-value" variant="outlined"></mdui-select>
     </section>