quasar-ui-qwindow/packages/ui/umd-test.html at dev · quasarframework/quasar-ui-qwindow · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta
      name="viewport"
      content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"
    />

    <link rel="icon" href="data:," />
    <title>UMD test</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@^2.0.0/dist/quasar.prod.css"
      rel="stylesheet"
      type="text/css"
    />
    <link href="dist/index.css?ae=qwindow" rel="stylesheet" type="text/css" />
    <style>
      .window-demo-page {
        min-height: calc(100vh - 50px);
        background: linear-gradient(135deg, #eef5f8 0%, #f8fbfd 55%, #e6f2ef 100%);
      }

      .window-demo {
        background: #ffffff;
        border-color: rgba(28, 80, 105, 0.22);
        box-shadow: 0 18px 40px rgba(28, 58, 82, 0.22);
      }

      .window-demo-body {
        width: 100%;
        height: 100%;
        padding: 24px;
        background: linear-gradient(180deg, #ffffff 0%, #f3f8fb 100%);
      }

      .window-demo-panel {
        height: 100%;
        border-radius: 8px;
        border: 1px solid rgba(28, 80, 105, 0.16);
        background: #ffffff;
      }
    </style>
  </head>
  <body>
    <div id="q-app">
      <q-layout view="lHh Lpr fff">
        <q-header class="glossy bg-primary">
          <q-toolbar>
            <q-toolbar-title> QWindow v{{ version }} </q-toolbar-title>

            <div>Quasar v{{ $q.version }}</div>
          </q-toolbar>
        </q-header>

        <q-page-container>
          <q-page padding class="window-demo-page">
            <q-window
              v-model="showing"
              v-bind="windowProps"
              title="UMD QWindow"
              content-class="window-demo"
              background-color="#1976d2"
            >
              <div class="window-demo-body">
                <div class="window-demo-panel q-pa-md column justify-between">
                  <div>
                    <div class="text-h6 text-primary">Floating panel</div>
                    <div class="text-body2 text-grey-8 q-mt-sm">
                      This panel is loaded from the UMD bundle.
                    </div>
                  </div>
                  <q-chip dense color="primary" text-color="white" icon="open_in_new">
                    QWindow smoke test
                  </q-chip>
                </div>
              </div>
            </q-window>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@^3.0.0/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@^2.0.0/dist/quasar.umd.prod.js"></script>
    <script src="dist/index.umd.js?ae=qwindow"></script>

    <script>
      const { computed, ref } = Vue
      const windowPlugin = globalThis.QWindow
      const bundleReady =
        windowPlugin !== void 0 &&
        typeof windowPlugin.install === 'function' &&
        typeof windowPlugin.useQWindowResponsiveProps === 'function' &&
        windowPlugin.QWindow !== void 0

      const app = Vue.createApp({
        setup() {
          const showing = ref(true)
          const windowProps =
            bundleReady === true
              ? windowPlugin.useQWindowResponsiveProps({
                  width: 380,
                  height: 240,
                  startX: 40,
                  startY: 90,
                  mobileWidth: 320,
                  mobileHeight: 260,
                  mobileStartY: 84,
                })
              : computed(() => ({
                  width: 380,
                  height: 240,
                  startX: 40,
                  startY: 90,
                }))

          return {
            version: bundleReady === true ? windowPlugin.version : 'bundle missing',
            windowProps,
            showing,
          }
        },
      })
      app.use(Quasar)
      if (bundleReady === true) {
        app.use(windowPlugin)
      }
      app.mount('#q-app')
    </script>
  </body>
</html>