feat: vueform astro material, bootstrap

Author: adamberecz

src/files/vueform/astro/bootstrap/js/astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config'
+import vue from '@astrojs/vue'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
+})

src/files/vueform/astro/bootstrap/js/src/components/TestForm.vue

@@ -0,0 +1,5 @@
+<template>
+  <Vueform>
+    <TextElement name="hello_world" label="Hello" placeholder="World" />
+  </Vueform>
+</template>

src/files/vueform/astro/bootstrap/js/src/pages/_app.ts

@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Vueform from '@vueform/vueform'
+
+export default async (app: App) => {
+  const vueformConfig = (await import('../../vueform.config')).default
+  app.use(Vueform, vueformConfig)
+}

src/files/vueform/astro/bootstrap/js/src/pages/index.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/Layout.astro';
+import TestForm from './../components/TestForm.vue';
+---
+<style is:global lang="scss">
+@import './../styles/style.scss';
+</style>
+
+<Layout title="Welcome to Astro.">
+  <TestForm client:only="vue" />
+</Layout>

src/files/vueform/astro/bootstrap/js/src/styles/style.scss

@@ -0,0 +1,44 @@
+@import 'bootstrap/scss/bootstrap';
+@import '@vueform/vueform/themes/bootstrap/scss/index.scss';
+
+@media (prefers-color-scheme: dark) {
+  :root, :before, :after, * {
+    @include vf-dark-vars;
+  }
+}
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: var(--bs-dark);
+  color: white;
+}
+
+form {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: black;
+  }
+
+  body {
+    background: var(--bs-light);
+    color: black;
+  }
+}

src/files/vueform/astro/bootstrap/js/vueform.config.js

@@ -0,0 +1,9 @@
+import en from '@vueform/vueform/locales/en'
+import theme from '@vueform/vueform/dist/bootstrap'
+import { defineConfig } from '@vueform/vueform'
+
+export default defineConfig({
+  theme,
+  locales: { en },
+  locale: 'en',
+})

src/files/vueform/astro/bootstrap/ts/astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config'
+import vue from '@astrojs/vue'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
+})

src/files/vueform/astro/bootstrap/ts/src/components/TestForm.vue

@@ -0,0 +1,5 @@
+<template>
+  <Vueform>
+    <TextElement name="hello_world" label="Hello" placeholder="World" />
+  </Vueform>
+</template>

src/files/vueform/astro/bootstrap/ts/src/pages/_app.ts

@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Vueform from '@vueform/vueform'
+
+export default async (app: App) => {
+  const vueformConfig = (await import('../../vueform.config')).default
+  app.use(Vueform, vueformConfig)
+}

src/files/vueform/astro/bootstrap/ts/src/pages/index.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/Layout.astro';
+import TestForm from './../components/TestForm.vue';
+---
+<style is:global lang="scss">
+@import './../styles/style.scss';
+</style>
+
+<Layout title="Welcome to Astro.">
+  <TestForm client:only="vue" />
+</Layout>