framework7/kitchen-sink/vue/src/pages/smart-select.vue at 65e6148e5e9a3afe1f2482487ebfe5244a4e1e07 · framework7io/framework7 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
  <f7-page>
    <f7-navbar title="Smart Select" back-link="Back"></f7-navbar>
    <f7-block>
      Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
    </f7-block>
    <f7-list strong-ios outline-ios dividers-ios>
      <f7-list-item title="Fruit" smart-select>
        <select name="fruits">
          <option value="apple" selected>Apple</option>
          <option value="pineapple">Pineapple</option>
          <option value="pear">Pear</option>
          <option value="orange">Orange</option>
          <option value="melon">Melon</option>
          <option value="peach">Peach</option>
          <option value="banana">Banana</option>
        </select>
      </f7-list-item>
      <f7-list-item
        title="Car"
        smart-select
        :smart-select-params="{
          openIn: 'popup',
          searchbar: true,
          searchbarPlaceholder: 'Search car',
        }"
      >
        <select name="car" multiple>
          <optgroup label="Japanese">
            <option value="honda" selected>Honda</option>
            <option value="lexus">Lexus</option>
            <option value="mazda">Mazda</option>
            <option value="nissan">Nissan</option>
            <option value="toyota">Toyota</option>
          </optgroup>
          <optgroup label="German">
            <option value="audi" selected>Audi</option>
            <option value="bmw">BMW</option>
            <option value="mercedes">Mercedes</option>
            <option value="vw">Volkswagen</option>
            <option value="volvo">Volvo</option>
          </optgroup>
          <optgroup label="American">
            <option value="cadillac">Cadillac</option>
            <option value="chrysler">Chrysler</option>
            <option value="dodge">Dodge</option>
            <option value="ford" selected>Ford</option>
          </optgroup>
        </select>
      </f7-list-item>
      <f7-list-item title="Mac or Windows" smart-select :smart-select-params="{ openIn: 'sheet' }">
        <select name="mac-windows">
          <option value="mac" selected>Mac</option>
          <option value="windows">Windows</option>
        </select>
      </f7-list-item>
      <f7-list-item title="Super Hero" smart-select :smart-select-params="{ openIn: 'popover' }">
        <select name="superhero" multiple>
          <option value="Batman" selected>Batman</option>
          <option value="Superman">Superman</option>
          <option value="Hulk">Hulk</option>
          <option value="Spiderman">Spiderman</option>
          <option value="Ironman">Ironman</option>
          <option value="Thor">Thor</option>
          <option value="Wonder Woman">Wonder Woman</option>
        </select>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Vue Model</f7-block-title>
    <f7-list strong-ios outline-ios dividers-ios class="no-margin-top">
      <f7-list-item group-title title="Coin flip guess" />
      <f7-list-item
        v-model:smart-selection="predictedCoinFlip"
        title="Predicted outcome"
        smart-select
        :smart-select-params="{ openIn: 'sheet' }"
      >
        <select name="coin-flip">
          <option value="heads">Heads</option>
          <option value="tails">Tails</option>
        </select>
      </f7-list-item>
      <f7-list-button title="Toggle prediction" @click="toggleCoinGuess" />
      <f7-list-item group-title title="Purchase" />
      <f7-list-item title="Total amout">
        <template #after>
          $15 + ${{ 15 * (tipPercentage / 100) }} ({{ tipPercentage }}%) tip
        </template>
      </f7-list-item>
      <f7-list-item
        v-model:smart-selection.number="tipPercentage"
        title="Tip percentage"
        smart-select
        :smart-select-params="{ openIn: 'sheet' }"
      >
        <select name="tip-1">
          <option value="10">10% tip</option>
          <option value="20">20% tip</option>
        </select>
      </f7-list-item>
      <f7-list-item
        v-model:smart-selection.number="tipPercentage"
        title="Tip formula"
        smart-select
        :smart-select-params="{ openIn: 'sheet' }"
      >
        <select name="tip-2">
          <option value="10">purchase * 0.10</option>
          <option value="20">purchase * 0.20</option>
        </select>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7List,
  f7ListButton,
  f7BlockTitle,
  f7Block,
  f7ListItem,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7List,
    f7ListButton,
    f7Block,
    f7BlockTitle,
    f7ListItem,
  },
  data() {
    return {
      predictedCoinFlip: 'tails',
      tipPercentage: 20,
    };
  },
  methods: {
    toggleCoinGuess() {
      this.predictedCoinFlip = this.predictedCoinFlip === 'tails' ? 'heads' : 'tails';
    },
  },
};
</script>