e0056bfc40
* fix: shadow on nav * feat: improve add dependency flow * feat: update suggested dependency style * feat: update dependency rows to use version number and update styles * feat: implement combobox select searched text on focus * feat: add Tabs.vue * feat: update nav tabs to use tabs * feat: improve project search dropdown * fix: dependency search not clearing inbound query * fix: combobox no options open state bug * feat: improve dependency project and version search
51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import { ChartIcon, DownloadIcon, UsersIcon } from '@modrinth/assets'
|
|
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
import { ref } from 'vue'
|
|
|
|
import Tabs from '../../components/base/Tabs.vue'
|
|
|
|
const meta = {
|
|
title: 'Base/Tabs',
|
|
component: Tabs,
|
|
} satisfies Meta<typeof Tabs>
|
|
|
|
export default meta
|
|
|
|
export const Default: StoryObj = {
|
|
render: () => ({
|
|
components: { Tabs },
|
|
setup() {
|
|
const value = ref('area')
|
|
const tabs = [
|
|
{ value: 'line', label: 'Line' },
|
|
{ value: 'area', label: 'Area' },
|
|
{ value: 'bar', label: 'Bar' },
|
|
]
|
|
|
|
return { value, tabs }
|
|
},
|
|
template: /* html */ `
|
|
<Tabs v-model:value="value" :tabs="tabs" />
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const WithIcons: StoryObj = {
|
|
render: () => ({
|
|
components: { Tabs },
|
|
setup() {
|
|
const value = ref('downloads')
|
|
const tabs = [
|
|
{ value: 'overview', label: 'Overview', icon: ChartIcon },
|
|
{ value: 'downloads', label: 'Downloads', icon: DownloadIcon },
|
|
{ value: 'users', label: 'Users', icon: UsersIcon },
|
|
]
|
|
|
|
return { value, tabs }
|
|
},
|
|
template: /* html */ `
|
|
<Tabs v-model:value="value" :tabs="tabs" />
|
|
`,
|
|
}),
|
|
}
|