ダイアログ

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Dialog</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>There are 1:1 replacements of native Alert, Prompt and Confirm modals. They support callbacks, have very easy
          api and can be combined with each other. Check these examples:</p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill" @click=${openAlert}>Alert</button>
          <button class="button button-fill" @click=${openConfirm}>Confirm</button>
          <button class="button button-fill" @click=${openPrompt}>Prompt</button>
        </p>
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-fill" @click=${openLogin}>Login</button>
          <button class="button button-fill" @click=${openPassword}>Password</button>
        </p>
      </div>
      <div class="block-title">Vertical Buttons</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>
          <button class="button button-fill" @click=${openVerticalButtons}>Vertical Buttons</button>
        </p>
      </div>
      <div class="block-title">Preloader Dialog</div>
      <div class="block block-strong-ios block-outline-ios">
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-fill" @click=${openPreloader}>Preloader</button>
          <button class="button button-fill" @click=${openCustomPreloader}>Custom Text</button>
        </p>
      </div>
      <div class="block-title">Progress Dialog</div>
      <div class="block block-strong-ios block-outline-ios">
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-fill" @click=${openInfiniteProgress}>Infinite</button>
          <button class="button button-fill" @click=${openDeterminedProgress}>Determined</button>
        </p>
      </div>
      <div class="block-title">Dialogs Stack</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>This feature doesn't allow to open multiple dialogs at the same time, and will automatically open next dialog
          when you close the current one. Such behavior is similar to browser native dialogs: </p>
        <p>
          <button class="button button-fill" @click=${openAlerts}>Open Multiple Alerts</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7 }) => {
    const openAlert = () => {
      $f7.dialog.alert('Hello!');
    }
    const openConfirm = () => {
      $f7.dialog.confirm('Are you feel good today?', function () {
        $f7.dialog.alert('Great!');
      });
    }
    const openPrompt = () => {
      $f7.dialog.prompt('What is your name?', function (name) {
        $f7.dialog.confirm('Are you sure that your name is ' + name + '?', function () {
          $f7.dialog.alert('Ok, your name is ' + name);
        });
      });
    }
    const openLogin = () => {
      $f7.dialog.login('Enter your username and password', function (username, password) {
        $f7.dialog.alert('Thank you!<br />Username:' + username + '<br />Password:' + password);
      });
    }
    const openPassword = () => {
      $f7.dialog.password('Enter your password', function (password) {
        $f7.dialog.alert('Thank you!<br />Password:' + password);
      });
    }
    const openAlerts = () => {
      $f7.dialog.alert('Alert 1');
      $f7.dialog.alert('Alert 2');
      $f7.dialog.alert('Alert 3');
      $f7.dialog.alert('Alert 4');
      $f7.dialog.alert('Alert 5');
    }
    const openVerticalButtons = () => {
      $f7.dialog.create({
        title: 'Vertical Buttons',
        buttons: [
          {
            text: 'Button 1',
          },
          {
            text: 'Button 2',
          },
          {
            text: 'Button 3',
          },
        ],
        verticalButtons: true,
      }).open();
    }
    const openPreloader = () => {
      $f7.dialog.preloader();
      setTimeout(function () {
        $f7.dialog.close();
      }, 3000);
    }
    const openCustomPreloader = () => {
      $f7.dialog.preloader('My text...');
      setTimeout(function () {
        $f7.dialog.close();
      }, 3000);
    }
    const openInfiniteProgress = () => {
      $f7.dialog.progress();
      setTimeout(function () {
        $f7.dialog.close();
      }, 3000);
    }
    const openDeterminedProgress = () => {
      var progress = 0;
      var dialog = $f7.dialog.progress('Loading assets', progress);
      dialog.setText('Image 1 of 10');
      var interval = setInterval(function () {
        progress += 10;
        dialog.setProgress(progress);
        dialog.setText('Image ' + ((progress) / 10) + ' of 10');
        if (progress === 100) {
          clearInterval(interval);
          dialog.close();
        }
      }, 300)
    }

    return $render;
  };
</script>