Action Sheet

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Action Sheet</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong inset">
        <p class="grid grid-cols-2 grid-gap">
          <a class="button button-fill" @click=${openDemo1}>One group</a>
          <a class="button button-fill" @click=${openDemo2}>Two groups</a>
        </p>
        <p>
          <a class="button button-fill" @click=${openGrid}>Action Grid</a>
        </p>
      </div>
      <div class="block-title">Action Sheet To Popover</div>
      <div class="block block-strong inset">
        <p>Action Sheet can be automatically converted to Popover (for tablets). This button will open Popover on
          tablets and Action Sheet on phones: <a style="display:inline-block"
            class="button button-to-popover button-small" @click=${openActionsPopover}>Actions</a></p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $on, $f7, $el }) => {
    let actions1;
    let actions2;
    let actionsGrid;
    let actionsToPopover;

    const openDemo1 = () => {
      actions1.open();
    }
    const openDemo2 = () => {
      actions2.open();
    }
    const openGrid = () => {
      actionsGrid.open();
    }
    const openActionsPopover = () => {
      actionsToPopover.open();
    }

    $on('pageInit', () => {
      // 1 Group
      const buttons1 = [
        {
          text: 'Do something',
          label: true
        },
        {
          text: 'Button 1',
          strong: true
        },
        {
          text: 'Button 2',
        },
        {
          text: 'Cancel',
          color: 'red'
        },
      ];

      // 2 Groups
      const buttons2 = [
        // First Group
        [
          {
            text: 'Do something',
            label: true
          },
          {
            text: 'Button 1',
            strong: true
          },
          {
            text: 'Button 2',
          }
        ],
        // Second Group
        [
          {
            text: 'Cancel',
            color: 'red'
          }
        ]
      ]

      // Grid buttons with icons/images
      const gridButtons = [
        [
          {
            text: 'Button 1',
            icon: '<img src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg" width="48" style="max-width: 100%; border-radius: 8px"/>'
          },
          {
            text: 'Button 2',
            icon: '<img src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg" width="48" style="max-width: 100%; border-radius: 8px">'
          },
          {
            text: 'Button 3',
            icon: '<img src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg" width="48" style="max-width: 100%; border-radius: 8px">'
          },
        ],
        [
          {
            text: 'Button 1',
            icon: '<img src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg" width="48" style="max-width: 100%; border-radius: 8px"/>'
          },
          {
            text: 'Button 2',
            icon: '<img src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg" width="48" style="max-width: 100%; border-radius: 8px">'
          },
          {
            text: 'Button 3',
            icon: '<img src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg" width="48" style="max-width: 100%; border-radius: 8px">'
          },
        ],
      ]

      actions1 = $f7.actions.create({ buttons: buttons1 });
      actions2 = $f7.actions.create({ buttons: buttons2 });
      actionsGrid = $f7.actions.create({ buttons: gridButtons, grid: true });

      // Actions To Popover
      actionsToPopover = $f7.actions.create({
        buttons: buttons1,
        // Need to specify popover target
        targetEl: $el.value.find('.button-to-popover')
      });
    })

    $on('pageBeforeRemove', () => {
      actions1.destroy();
      actions2.destroy();
      actionsGrid.destroy();
      actionsToPopover.destroy();
    })

    return $render;
  }

</script>