@ginger-tek/picovue
Version:
Pico CSS 2 + Vue 3
112 lines (104 loc) • 4.17 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tests</title>
<link href="https://unpkg.com/@picocss/pico@2.1.1/css/pico.min.css" rel='stylesheet'>
<link href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel='stylesheet'>
</head>
<body>
<div id="app" class="container">
{{ selectedItem }}
<pv-input-list v-model="selectedItem" :items="getListItems" placeholder="Start typin!"></pv-input-list>
<pv-dropdown v-model="selected" :items="['first', 'second']"></pv-dropdown>
<pv-multi-select v-model="selectedArr" :items="['first', 'second']">
<template #selected>{{ selectedArr.join(', ') }}</template>
</pv-multi-select>
<pv-tags v-model="tags"></pv-tags>
{{ tags }}
<div>{{ selected }}</div>
<pv-modal ref="modalRef" @closed="getItems">
<button @click="appendToast('test')">Toast</button>
<button @click="confirmAction">Confirm</button>
</pv-modal>
<button @click="confirmAction">Confirm</button>
<pv-dark-mode></pv-dark-mode>
<button @click="modalRef.openModal()">Modal</button>
<pv-tabs>
<pv-tab :hidden="false">
<template #title>
<i class="bi bi-person-circle"></i>
<i>First</i>
</template>
<input>
</pv-tab>
<pv-tab>
<template #title>
{{ tags.join(',') }}
</template>
<textarea></textarea>
<p>fgsfjlfkgljlg;sj;kldf</p>
<p>fgsfjlfkgljlg;sj;kldf</p>
<p>fgsfjlfkgljlg;sj;kldf</p>
<p>fgsfjlfkgljlg;sj;kldf</p>
</pv-tab>
</pv-tabs>
<pv-toaster></pv-toaster>
<div class="grid">
<pv-button @click="appendToast('test')">Regular</pv-button>
<pv-button variant="success" @click="appendToast('test', {variant:'success'})">Toast</pv-button>
<pv-button variant="info" @click="appendToast('test', {variant:'info'})">Toast</pv-button>
<pv-button variant="warning" @click="appendToast('test', {variant:'warning'})">Toast</pv-button>
<pv-button variant="danger" @click="appendToast('test', {variant:'danger'})">Toast</pv-button>
</div>
<br>
<pv-alert variant="success">Success</pv-alert>
<pv-alert variant="info">Info</pv-alert>
<pv-alert variant="warning">Warning</pv-alert>
<pv-alert variant="danger">Error</pv-alert>
<pv-confirm ref="confirmRef"></pv-confirm>
<hr>
<pv-table :items="items" :fields="['name','username','email','address','company']" filter bordered sort>
<template #address="{address}">
{{ address.street }} {{ address.suite }}, {{ address.city }} {{ address.zipcode }}
</template>
<template #company="{name}">
{{ name }}
</template>
</pv-table>
</div>
<script src="https://unpkg.com/vue/dist/vue.global.js"></script>
<script src="/dist/picovue.global.js"></script>
<script type="module">
Vue.createApp({
setup() {
const appendToast = Vue.inject('appendToast')
const selected = Vue.ref(null)
const selectedItem = Vue.ref(null)
const selectedArr = Vue.ref([])
const tags = Vue.ref(['tag', 'tesdfsdf'])
const modalRef = Vue.ref(null)
const confirmRef = Vue.ref(null)
const items = Vue.ref([])
async function getListItems (v) {
const res = await fetch('https://jsonplaceholder.typicode.com/users').then(r => r.json())
return res
.map(i => ({ label: i.name, value: i }))
.filter(i => i.label.match(new RegExp(v, 'i')))
}
async function confirmAction() {
const res = await confirmRef.value.confirmAsync('Are you sure?')
}
async function getItems() {
items.value = await fetch('https://jsonplaceholder.typicode.com/users').then(r => r.json())
}
Vue.onBeforeMount(getItems)
return { selected, selectedArr, selectedItem, appendToast, tags, modalRef, confirmRef, items, getItems, getListItems, confirmAction }
}
})
.use(PicoVue)
.mount('#app')
</script>
</body>
</html>