58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import {logEvent} from 'histoire/client'
|
|
import {reactive} from 'vue'
|
|
import {createRouter, createMemoryHistory} from 'vue-router'
|
|
import BaseButton from './BaseButton.vue'
|
|
|
|
function setupApp({ app, story, variant }) {
|
|
// Router mock
|
|
app.use(createRouter({
|
|
history: createMemoryHistory(),
|
|
routes: [
|
|
{ path: '/', name: 'home', component: { render: () => null } },
|
|
],
|
|
}))
|
|
}
|
|
|
|
|
|
const state = reactive({
|
|
disabled: false,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Story :setup-app="setupApp" :layout="{ type: 'grid', width: '200px' }">
|
|
<Variant title="custom">
|
|
<template #controls>
|
|
<HstCheckbox v-model="state.disabled" title="Disabled" />
|
|
</template>
|
|
<BaseButton :disabled="state.disabled">
|
|
Hello!
|
|
</BaseButton>
|
|
</Variant>
|
|
|
|
<Variant title="disabled">
|
|
<BaseButton disabled>
|
|
Hello!
|
|
</BaseButton>
|
|
</Variant>
|
|
|
|
<Variant title="router link">
|
|
<BaseButton :to="'home'">
|
|
Hello!
|
|
</BaseButton>
|
|
</Variant>
|
|
|
|
<Variant title="external link">
|
|
<BaseButton href="https://vikunja.io">
|
|
Hello!
|
|
</BaseButton>
|
|
</Variant>
|
|
|
|
<Variant title="button">
|
|
<BaseButton @click="logEvent('Click', $event)">
|
|
Hello!
|
|
</BaseButton>
|
|
</Variant>
|
|
</Story>
|
|
</template> |