EOxUI/vuetify.html at main · EOX-A/EOxUI · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EOxUI Vuetify Playground</title>

    <!-- Vuetify 3 Styles & MDI Fonts via CDN -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vuetify@3.5.0/dist/vuetify.min.css"
    />

    <!-- EOx Specific Styles -->
    <link rel="stylesheet" href="style/fonts.css" />
    <link rel="stylesheet" href="style/slider.css" />
    <link rel="stylesheet" href="lib/vuetify/style.css" />

    <style>
      :root {
        --primary: #004170 !important;
      }
      [v-cloak] {
        display: none;
      }
      #app {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <v-app style="background: transparent">
        <v-main>
          <v-container>
            <h1 class="text-h4 font-weight-bold mb-4">
              EOxUI Vuetify Playground
            </h1>
            <p class="mb-4">
              This playground demonstrates the
              <strong>EOx Vuetify Blueprint</strong>. The look and feel should
              mirror the BeerCSS version.
            </p>

            <v-row>
              <v-col cols="12" md="6">
                <!-- V-BTN mirroring BeerCSS Buttons -->
                <h2 class="text-h6 mb-2">Buttons & Icons</h2>
                <div class="d-flex flex-wrap ga-4">
                  <v-btn color="primary">Primary Btn</v-btn>
                  <v-btn color="secondary">Secondary Btn</v-btn>
                  <v-btn icon="mdi-home" variant="tonal"></v-btn>
                  <v-btn prepend-icon="mdi-send">Extended FAB</v-btn>
                </div>
              </v-col>

              <v-col cols="12" md="6">
                <!-- V-TEXT-FIELD mirroring BeerCSS Fields -->
                <h2 class="text-h6 mb-2">Form Elements</h2>
                <v-text-field
                  label="EOx Outlined Input"
                  variant="outlined"
                  prepend-inner-icon="mdi-magnify"
                  persistent-placeholder
                ></v-text-field>

                <div class="d-flex flex-wrap ga-4">
                  <v-checkbox
                    label="Checkbox"
                    density="compact"
                    v-model="checkboxVal"
                    hide-details
                  ></v-checkbox>
                  <v-radio-group inline hide-details v-model="radioVal">
                    <v-radio label="Radio" value="1"></v-radio>
                  </v-radio-group>
                  <v-switch
                    label="Switch"
                    color="primary"
                    inset
                    hide-details
                  ></v-switch>
                </div>
              </v-col>

              <v-col cols="12">
                <h2 class="text-h6 mb-2">Data & Indicators</h2>
                <v-slider v-model="sliderVal" label="Slider"></v-slider>

                <v-progress-linear
                  indeterminate
                  color="primary"
                  height="6"
                  rounded
                ></v-progress-linear>
              </v-col>
            </v-row>
          </v-container>
        </v-main>
      </v-app>
    </div>

    <!-- Vue 3 & Vuetify 3 via CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.5.0/dist/vuetify.min.js"></script>

    <script type="module">
      import { eox } from "./lib/vuetify/blueprint.js";

      const { createApp, ref } = Vue;
      const { createVuetify } = Vuetify;

      const vuetify = createVuetify({
        blueprint: eox, // Using the EOx blueprint from lib/vuetify/blueprint.js
      });

      createApp({
        setup() {
          const sliderVal = ref(50);
          const checkboxVal = ref(true);
          const radioVal = ref("1");
          return { sliderVal, checkboxVal, radioVal };
        },
      })
        .use(vuetify)
        .mount("#app");
    </script>
  </body>
</html>