feat: vue library v-model-integration (#234)

- Using a mix of stencil/vue-output-target with manually wrapped component to provide easier v-model integration - update stencil version
getgoui · Nov 5, 2023 · 69f70da · 69f70da · vercel · Nov 5, 2023
1 parent bec42a3
commit 69f70da
Show file tree

Hide file tree

Showing 72 changed files with 1,736 additions and 1,326 deletions.
diff --git a/.vscode/terminals.json b/.vscode/terminals.json
@@ -1,5 +1,5 @@
 {
-  "autorun": true,
+  "autorun": false,
   "autokill": true,
   "terminals": [
     {
@@ -20,6 +20,11 @@
       "name": "Vue",
       "icon": "library",
       "cwd": "./packages/vue"
+    },
+    {
+      "name": "Vue App",
+      "icon": "run",
+      "cwd": "./apps/vue-starter"
     }
   ]
 }
diff --git a/apps/vanilla-starter/index.html b/apps/vanilla-starter/index.html
@@ -10,9 +10,11 @@
     <div>
       <div class="container">
         <h1>Hello Go UI</h1>
-        <go-card border flat card-title="Counter example">
+        <go-card border flat heading="Counter example">
           <p>You're looking at custom elements from Go UI</p>
-          <go-button block="mobile" id="counter-btn" type="button" variant="primary" slot="footer">Counter is <span id="count">0</span></go-button>
+          <go-button block="mobile" id="counter-btn" type="button" variant="primary" slot="footer"
+            >Counter is <span id="count">0</span></go-button
+          >
         </go-card>
         <p>
           <go-link href="https://www.go-ui.com">Learn more about Go UI</go-link>

diff --git a/apps/vue-starter/README.md b/apps/vue-starter/README.md
@@ -1,7 +1,7 @@
-# Vue 3 + Vite
+## Vue 3 + Vite + Go UI
 
 This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
 ## Recommended IDE Setup
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
diff --git a/apps/vue-starter/package.json b/apps/vue-starter/package.json
@@ -9,10 +9,10 @@
   },
   "dependencies": {
     "@go-ui/vue": "workspace:*",
-    "vue": "^3.2.45"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
-    "vite": "^4.0.0"
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.3.9"
   }
 }
diff --git a/apps/vue-starter/src/App.vue b/apps/vue-starter/src/App.vue
@@ -1,254 +1,39 @@
-<script setup>
-import { ref } from 'vue';
-import {
-  GoButton,
-  GoCard,
-  GoHero,
-  GoLink,
-  GoSelect,
-  GoInput,
-  GoDatepicker,
-  GoCheckbox,
-  GoRadio,
-  GoFieldset,
-  GoIcon,
-  GoTextarea,
-  GoSwitch,
-} from '@go-ui/vue';
-import vitelogo from './assets/vite.svg';
-import vuelogo from './assets/vue.svg';
-let count = ref(0);
-let text = ref('v-model supported');
-
-let selectedFruits = {
-  apple: false,
-  orange: true,
-  watermelon: false,
-};
-</script>
-
 <template>
   <div>
-    <GoHero
-      :breadcrumbs="[
-        {
-          label: 'Home',
-          url: '#',
-        },
-      ]"
-      preHeading="Vite + Vue + GoUI"
-      heading="Develop with happiness">
+    <GoHero :breadcrumbs="breadcrumbs" preHeading="Vite + Vue + GoUI" heading="Develop with happiness">
       <img
-        src="https://images.unsplash.com/photo-1599811392833-a39014faf967?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
-        alt="Beach"
+        src="https://images.unsplash.com/photo-1698417749491-72bba47caf07?auto=format&fit=crop&q=80&w=1470&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Mountain view"
         slot="full-width-bg" />
       <p>Check out the full documentation of Go UI at <GoLink href="https://go-ui.com">go-ui.com</GoLink></p>
     </GoHero>
 
-    <div class="container pt-5">
-      <GoCard border cardTitle="Counter example" media-position="left">
-        <div class="d-flex" slot="media">
-          <img :src="vuelogo" alt="vue logo" />
-          <img :src="vitelogo" alt="vite logo" />
-        </div>
-        <p>Edit <code>src/App.jsx</code> and save to test HMR</p>
-        <div slot="footer">
-          <GoButton block="all" variant="primary" @click="count++"> count is {{ count }} </GoButton>
-        </div>
-      </GoCard>
-      <GoCard class="mt-4" card-title="Form components">
-        <h2>Checkbox</h2>
-        <pre>{{ { selectedFruits } }}</pre>
-        <go-fieldset label="What fruit do you like?" hint="Select one or more">
-          <go-checkbox
-            v-model="selectedFruits.apple"
-            name="fruit"
-            label="Apple"
-            value="apple"
-            hint="Not the company"></go-checkbox>
-          <go-checkbox v-model="selectedFruits.banana" name="fruit" label="Banana" value="banana"></go-checkbox>
-          <go-checkbox v-model="selectedFruits.orange" name="fruit" label="Orange" value="orange"></go-checkbox>
-          <go-checkbox v-model="selectedFruits.kiwi" name="fruit" label="Kiwi" value="kiwi"></go-checkbox>
-          <go-checkbox
-            v-model="selectedFruits.watermelon"
-            name="fruit"
-            label="Watermelon"
-            value="watermelon"></go-checkbox>
-        </go-fieldset>
-
-        <h3>Error state</h3>
-        <go-fieldset
-          label="What fruit do you like?"
-          error="[This is an error message]"
-          hint="Select one or more"
-          is-list>
-          <go-checkbox name="fruit2" label="Apple" value="apple" hint="Not the company"></go-checkbox>
-          <go-checkbox name="fruit2" label="Banana" value="banana"></go-checkbox>
-          <go-checkbox name="fruit2" label="Orange" value="orange"></go-checkbox>
-          <go-checkbox name="fruit2" label="Kiwi" value="kiwi"></go-checkbox>
-          <go-checkbox name="fruit2" label="Watermelon" value="watermelon"></go-checkbox>
-        </go-fieldset>
-
-        <h2>Datepicker</h2>
-        <go-datepicker
-          id="test"
-          type="text"
-          label="Date picker"
-          hint="Please enter a date"
-          auto-flip
-          value="2000-01-01"></go-datepicker>
-        <go-datepicker
-          type="text"
-          label="Error state"
-          hint="Please enter a date"
-          error="This is an error"></go-datepicker>
-        <go-datepicker type="text" label="Disabled state" value="2000-01-01" disabled></go-datepicker>
-        <go-datepicker
-          id="readonly-test"
-          type="text"
-          label="Readonly state"
-          value="2000-01-01"
-          readonly></go-datepicker>
-        <go-datepicker type="text" label="Custom icon">
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-datepicker>
-
-        <go-datepicker type="text" label="Prefix slot">
-          <div slot="prefix">https://go-ui.com/</div>
-
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-datepicker>
-        <go-datepicker type="text" label="Suffix slot">
-          <div slot="suffix">.com.au</div>
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-datepicker>
-
-        <h2>Input</h2>
-        <pre>{{ text }}</pre>
-        <go-input id="test" type="text" v-model="text" label="Input field" hint="Please enter some text"></go-input>
-        <go-input type="text" label="Error state" hint="Please enter some text" error="This is an error"></go-input>
-        <go-input type="text" label="Disabled state" value="I'm not editable" disabled></go-input>
-        <go-input type="text" label="Readonly state" value="I'm not editable" readonly></go-input>
-        <go-input type="text" label="Custom icon">
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-input>
-
-        <go-input type="text" label="Prefix slot">
-          <div slot="prefix">https://go-ui.com/</div>
-
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-input>
-        <go-input type="text" label="Suffix slot">
-          <div slot="suffix">.com.au</div>
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-input>
-
-        <h2>Radio</h2>
-        <go-fieldset label="What fruit do you like?" hint="Select one" is-list>
-          <go-radio name="fruit" label="Apple" value="apple" hint="Not the company"></go-radio>
-          <go-radio name="fruit" label="Banana" value="banana"></go-radio>
-          <go-radio name="fruit" label="Orange" value="orange"></go-radio>
-          <go-radio name="fruit" label="Kiwi" value="kiwi"></go-radio>
-          <go-radio name="fruit" label="Watermelon" value="watermelon"></go-radio>
-        </go-fieldset>
-
-        <p>Error state</p>
-        <go-fieldset label="What fruit do you like?" error="[This is an error message]" hint="Select one" is-list>
-          <go-radio name="fruit2" label="Apple" value="apple" hint="Not the company"></go-radio>
-          <go-radio name="fruit2" label="Banana" value="banana"></go-radio>
-          <go-radio name="fruit2" label="Orange" value="orange"></go-radio>
-          <go-radio name="fruit2" label="Kiwi" value="kiwi"></go-radio>
-          <go-radio name="fruit2" label="Watermelon" value="watermelon"></go-radio>
-        </go-fieldset>
+    <div class="container">
+      <GoMd :content="readme" />
+    </div>
+  </div>
+</template>
 
-        <h2>Select</h2>
+<script setup>
+import { ref } from 'vue';
+import { GoHero, GoLink, GoMd } from '@go-ui/vue';
+import readme from '../README.md?raw';
 
-        <go-select
-          name="select-1"
-          label="Select"
-          hint="This is a hint message"
-          value="Banana"
-          options="['Apple', 'Banana', 'Blueberry', 'Boysenberry', 'Cherry', 'Durian', 'Eggplant', 'Fig', 'Grape', 'Guava', 'Huckleberry']">
-        </go-select>
-        <go-select
-          name="select-4"
-          label="Prefix slot"
-          options="['Apple', 'Banana', 'Blueberry', 'Boysenberry', 'Cherry', 'Durian', 'Eggplant', 'Fig', 'Grape', 'Guava', 'Huckleberry']">
-          <div slot="prefix">https://go-ui.com/</div>
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-select>
-        <go-select
-          name="select-3"
-          label="Suffix slot"
-          options="['Apple', 'Banana', 'Blueberry', 'Boysenberry', 'Cherry', 'Durian', 'Eggplant', 'Fig', 'Grape', 'Guava', 'Huckleberry']">
-          <div slot="suffix">.com.au</div>
+console.log({ readme });
+const text = ref('v-model supported');
 
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-select>
-        <h2>Switch</h2>
-        <go-switch checked name="switch1" label="Switch"></go-switch>
-        <br />
-        <go-switch checked name="switch2" label="Stacked switch" stack></go-switch>
-        <br />
-        <go-switch checked name="switch3" label="Full-width switch" full-width></go-switch>
-        <br />
-        <go-switch checked name="switch4" label="On off switch" show-on-off></go-switch>
-        <br />
-        <go-switch
-          checked
-          name="switch5"
-          label="Yes no switch"
-          show-on-off
-          active-label="Yes"
-          inactive-label="No"></go-switch>
-        <br />
-        <go-switch
-          checked
-          name="switch5"
-          label="On off outside switch"
-          show-on-off-outside
-          active-label="Yes"
-          inactive-label="No"></go-switch>
+const selectedFruits = ref({
+  apple: true,
+  orange: true,
+  watermelon: false,
+});
 
-        <h2>Textarea</h2>
-        <go-textarea
-          id="txt-1"
-          v-model="text"
-          auto-grow
-          label="Textarea"
-          hint="This is a textarea field"
-          maxlength="1000"></go-textarea>
-        <go-textarea
-          label="Error state"
-          hint="Please enter some text"
-          error="This is an error"
-          maxlength="1000"></go-textarea>
-        <go-textarea label="Disabled state" value="I'm not editable" disabled></go-textarea>
-        <go-textarea label="Readonly state" value="I'm not editable" readonly></go-textarea>
-        <go-textarea label="Custom icon">
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-textarea>
+const switchVal = ref(false);
 
-        <go-textarea label="Prefix slot">
-          <div slot="prefix">https://go-ui.com/</div>
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-textarea>
-        <go-textarea label="Suffix slot">
-          <div slot="suffix">.com.au</div>
-          <go-icon icon-set="material-icons" name="search" slot="icon-before"></go-icon>
-          <go-icon icon-set="material-icons" name="star_outline" slot="icon-after"></go-icon>
-        </go-textarea>
-      </GoCard>
-    </div>
-  </div>
-</template>
+const breadcrumbs = `[
+  {
+    label: 'Home',
+    url: '#',
+  }
+]`;
+</script>
diff --git a/apps/vue-starter/src/main.js b/apps/vue-starter/src/main.js
@@ -1,4 +1,6 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import '@go-ui/vue/dist/go-ui.css';
-createApp(App).mount('#app');
+import { ComponentLibrary } from '@go-ui/vue';
+
+createApp(App).use(ComponentLibrary).mount('#app');
diff --git a/apps/vue-starter/vite.config.js b/apps/vue-starter/vite.config.js
@@ -1,7 +1,16 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
-})
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // treat all tags with a dash as custom elements
+          isCustomElement: (tag) => tag.includes('go-'),
+        },
+      },
+    }),
+  ],
+});