mirror of https://github.com/halo-dev/halo
feat: use storybook to refactor components library docs (#4944)
#### What type of PR is this? /kind feature /area console /milestone 2.8.x #### What this PR does / why we need it: Console Components使用StoryBook代替Histories #### Which issue(s) this PR fixes: Fixes #4117 #### Special notes for your reviewer: 1. 移动到 console/packages/components 目录。 2. pnpm storybook #### Does this PR introduce a user-facing change? ```release-note 使用 Storybook 重构 `@halo-dev/components` 文档。 ```pull/5008/head
Pillar Cat
GitHub
parent
4fab6976d1
commit
5b5fe71544
|
|
@ -24,6 +24,7 @@ module.exports = {
|
|||
extends: ["plugin:cypress/recommended"],
|
||||
},
|
||||
],
|
||||
ignorePatterns: ["!.storybook"],
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
.storybook
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
module.exports = {
|
||||
extends: ["../../.eslintrc.cjs"],
|
||||
extends: ["../../.eslintrc.cjs", "plugin:storybook/recommended"],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import type { StorybookConfig } from "@storybook/vue3-vite";
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
|
||||
addons: [
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-interactions",
|
||||
"@storybook/addon-styling",
|
||||
],
|
||||
framework: {
|
||||
name: "@storybook/vue3-vite",
|
||||
options: {},
|
||||
},
|
||||
docs: {
|
||||
autodocs: "tag",
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import type { Preview } from "@storybook/vue3";
|
||||
|
||||
import "../src/styles/tailwind.css";
|
||||
import "overlayscrollbars/overlayscrollbars.css";
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
layout: "padded",
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
|
||||
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="histoire" />
|
||||
/// <reference types="unplugin-icons/types/vue" />
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
import { defineConfig } from "histoire";
|
||||
import type { UserConfig } from "vite";
|
||||
import { HstVue } from "@histoire/plugin-vue";
|
||||
|
||||
export default defineConfig({
|
||||
setupFile: "./src/histoire.setup.ts",
|
||||
plugins: [HstVue()],
|
||||
vite: {
|
||||
plugins: [
|
||||
{
|
||||
name: "disable-lib-plugin",
|
||||
config(config: UserConfig) {
|
||||
if (!config || !config.build || !config.build.rollupOptions) {
|
||||
return;
|
||||
}
|
||||
config.build.lib = false;
|
||||
config.build.rollupOptions.external = [];
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
|
@ -18,10 +18,10 @@
|
|||
"test:unit:ui": "vitest --environment jsdom --watch --ui",
|
||||
"test:unit:coverage": "vitest run --environment jsdom --coverage",
|
||||
"typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
|
||||
"story:dev": "histoire dev --port 4000",
|
||||
"story:build": "histoire build",
|
||||
"lint": "eslint ./src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
|
||||
"prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'"
|
||||
"prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"keywords": [
|
||||
"halo",
|
||||
|
|
@ -44,9 +44,20 @@
|
|||
"homepage": "https://github.com/halo-dev/halo/tree/main/console/packages/components#readme",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@histoire/plugin-vue": "^0.11.7",
|
||||
"@iconify-json/ri": "^1.1.4",
|
||||
"histoire": "^0.11.7",
|
||||
"@iconify-json/ri": "^1.1.15",
|
||||
"@storybook/addon-essentials": "^7.6.3",
|
||||
"@storybook/addon-interactions": "^7.6.3",
|
||||
"@storybook/addon-links": "^7.6.3",
|
||||
"@storybook/addon-styling": "^1.3.7",
|
||||
"@storybook/blocks": "^7.6.3",
|
||||
"@storybook/testing-library": "^0.0.14-next.2",
|
||||
"@storybook/vue3": "^7.6.3",
|
||||
"@storybook/vue3-vite": "^7.6.3",
|
||||
"eslint-plugin-storybook": "^0.6.15",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"storybook": "^7.6.3",
|
||||
"unplugin-icons": "^0.14.15",
|
||||
"vite-plugin-dts": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VAlert } from ".";
|
||||
|
||||
const meta: Meta<typeof VAlert> = {
|
||||
title: "Alert",
|
||||
component: VAlert,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VAlert },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: `<VAlert v-bind="args"></VAlert>`,
|
||||
}),
|
||||
argTypes: {
|
||||
type: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "success", "info", "warning", "error"],
|
||||
},
|
||||
closable: {
|
||||
control: { type: "boolean" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VAlert>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
type: "default",
|
||||
title: "default",
|
||||
description: "Halo",
|
||||
},
|
||||
};
|
||||
|
||||
export const Success: Story = {
|
||||
args: {
|
||||
type: "success",
|
||||
title: "success",
|
||||
description: "Halo",
|
||||
},
|
||||
};
|
||||
|
||||
export const Info: Story = {
|
||||
args: {
|
||||
type: "info",
|
||||
title: "info",
|
||||
description: "Halo",
|
||||
},
|
||||
};
|
||||
|
||||
export const Warning: Story = {
|
||||
args: {
|
||||
type: "warning",
|
||||
title: "warning",
|
||||
description: "Halo",
|
||||
},
|
||||
};
|
||||
|
||||
export const Error: Story = {
|
||||
args: {
|
||||
type: "error",
|
||||
title: "error",
|
||||
description: "Halo",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { VAlert } from "./index";
|
||||
import { VButton } from "./../button";
|
||||
import { IconMessage } from "../../icons/icons";
|
||||
|
||||
function initState() {
|
||||
return {
|
||||
type: "default",
|
||||
title: "提示",
|
||||
description: "这是一个提示",
|
||||
closable: true,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="Alert">
|
||||
<Variant title="Show Cases">
|
||||
<template #default>
|
||||
<div class="p-3">
|
||||
<VAlert title="default" type="default" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VAlert title="default" type="success" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VAlert title="default" type="info" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VAlert title="default" type="warning" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VAlert title="default" type="error" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VAlert title="提示" type="default">
|
||||
<template #description>
|
||||
目前仅支持远程 Git 仓库和 ZIP 下载链接。更多主题可以访问：
|
||||
<a href="https://halo.run/themes">https://halo.run/themes</a>
|
||||
</template>
|
||||
<template #actions>
|
||||
<div class="flex justify-end">
|
||||
<VButton type="default">访问</VButton>
|
||||
</div>
|
||||
</template>
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
</Variant>
|
||||
|
||||
<Variant :init-state="initState" title="Playground">
|
||||
<template #default="{ state }">
|
||||
<div class="p-3">
|
||||
<VAlert
|
||||
:closable="state.closable"
|
||||
:description="state.description"
|
||||
:title="state.title"
|
||||
:type="state.type"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #controls="{ state }">
|
||||
<HstText v-model="state.type" title="Type" />
|
||||
<HstText v-model="state.title" title="Title" />
|
||||
<HstText v-model="state.description" title="Description" />
|
||||
<HstCheckbox v-model="state.closable" title="Closable" />
|
||||
</template>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Slots">
|
||||
<template #default>
|
||||
<div class="p-3">
|
||||
<VAlert title="你有新的消息" type="default">
|
||||
<template #icon>
|
||||
<IconMessage />
|
||||
</template>
|
||||
<template #description>
|
||||
@Ryan Wang 在你的站点创建了新评论
|
||||
</template>
|
||||
<template #actions>
|
||||
<div class="flex justify-end">
|
||||
<VButton type="default">查看</VButton>
|
||||
</div>
|
||||
</template>
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VAvatar } from ".";
|
||||
|
||||
const meta: Meta<typeof VAvatar> = {
|
||||
title: "Avatar",
|
||||
component: VAvatar,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VAvatar },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: `<VAvatar v-bind="args" />`,
|
||||
}),
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["lg", "md", "sm", "xs"],
|
||||
defaultValue: "md",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VAvatar>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
src: "https://halo.run/logo",
|
||||
alt: "Hello",
|
||||
},
|
||||
};
|
||||
|
||||
export const Circle: Story = {
|
||||
args: {
|
||||
src: "https://halo.run/logo",
|
||||
alt: "Hello",
|
||||
circle: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Text: Story = {
|
||||
args: {
|
||||
alt: "Ryan Wang",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { VAvatar } from "./index";
|
||||
import { VSpace } from "../space";
|
||||
</script>
|
||||
<template>
|
||||
<Story title="Avatar">
|
||||
<VSpace direction="column">
|
||||
<VSpace>
|
||||
<VAvatar size="md" alt="Halo" src="https://halo.run/logo" />
|
||||
<VAvatar size="md" alt="Ryan Wang" src="https://ryanc.cc/avatar" />
|
||||
<VAvatar size="md" alt="John Niang" src="https://johnniang.me/avatar" />
|
||||
<VAvatar size="md" alt="guqing" src="https://guqing.xyz/avatar" />
|
||||
</VSpace>
|
||||
<VSpace>
|
||||
<VAvatar size="md" alt="Halo" />
|
||||
<VAvatar size="md" alt="Ryan Wang" />
|
||||
<VAvatar size="md" alt="John Niang" />
|
||||
<VAvatar size="md" alt="guqing" />
|
||||
</VSpace>
|
||||
<VSpace>
|
||||
<VAvatar size="md" circle alt="Halo" />
|
||||
<VAvatar size="md" circle alt="Ryan Wang" />
|
||||
<VAvatar size="md" circle alt="John Niang" />
|
||||
<VAvatar size="md" circle alt="guqing" />
|
||||
</VSpace>
|
||||
<VSpace>
|
||||
<VAvatar size="xs" circle alt="Halo" src="https://halo.run/logo" />
|
||||
<VAvatar
|
||||
size="sm"
|
||||
circle
|
||||
alt="Ryan Wang"
|
||||
src="https://ryanc.cc/avatar"
|
||||
/>
|
||||
<VAvatar
|
||||
size="md"
|
||||
circle
|
||||
alt="John Niang"
|
||||
src="https://johnniang.me/avatar"
|
||||
/>
|
||||
<VAvatar
|
||||
size="lg"
|
||||
circle
|
||||
alt="guqing"
|
||||
src="https://guqing.xyz/avatar"
|
||||
/>
|
||||
</VSpace>
|
||||
</VSpace>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VButton } from ".";
|
||||
|
||||
const meta: Meta<typeof VButton> = {
|
||||
title: "Button",
|
||||
component: VButton,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VButton },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: `<VButton v-bind="args">${args.default}</VButton>`,
|
||||
}),
|
||||
argTypes: {
|
||||
default: {
|
||||
control: { type: "text" },
|
||||
},
|
||||
type: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "primary", "secondary", "danger"],
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: "select",
|
||||
},
|
||||
options: ["lg", "md", "sm", "xs"],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
default: "Button",
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VButton>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
type: "default",
|
||||
},
|
||||
};
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
type: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
type: "secondary",
|
||||
},
|
||||
};
|
||||
|
||||
export const Danger: Story = {
|
||||
args: {
|
||||
type: "danger",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,161 +0,0 @@
|
|||
<template>
|
||||
<Story title="Button">
|
||||
<Variant title="Type">
|
||||
<template #default>
|
||||
<VSpace>
|
||||
<VButton type="primary"> primary</VButton>
|
||||
<VButton type="secondary"> secondary</VButton>
|
||||
<VButton type="danger"> danger</VButton>
|
||||
<VButton type="default"> default</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant title="Size">
|
||||
<template #default>
|
||||
<VSpace>
|
||||
<VButton size="lg" type="secondary"> Large</VButton>
|
||||
<VButton type="secondary"> default</VButton>
|
||||
<VButton size="sm" type="secondary"> sm</VButton>
|
||||
<VButton size="xs" type="secondary"> xs</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant title="Circle">
|
||||
<template #default>
|
||||
<VSpace>
|
||||
<VButton circle size="lg" type="secondary"> lg</VButton>
|
||||
<VButton circle type="secondary"> d</VButton>
|
||||
<VButton circle size="sm" type="secondary"> sm</VButton>
|
||||
<VButton circle size="xs" type="secondary"> xs</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant title="Block">
|
||||
<template #default>
|
||||
<VSpace class="w-full" direction="column">
|
||||
<VButton block type="primary"> primary</VButton>
|
||||
<VButton block type="secondary"> secondary</VButton>
|
||||
<VButton block type="danger"> danger</VButton>
|
||||
<VButton block type="default"> default</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant :init-state="disabledState" title="Disabled">
|
||||
<template #default="{ state }">
|
||||
<VSpace>
|
||||
<VButton :disabled="state.disabled" type="primary"> primary</VButton>
|
||||
<VButton :disabled="state.disabled" type="secondary">
|
||||
secondary
|
||||
</VButton>
|
||||
<VButton :disabled="state.disabled" type="danger"> danger</VButton>
|
||||
<VButton :disabled="state.disabled" type="default"> default</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
<template #controls="{ state }">
|
||||
<HstCheckbox v-model="state.disabled" title="Disabled" />
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant :init-state="loadingState" title="Loading">
|
||||
<template #default="{ state }">
|
||||
<VSpace>
|
||||
<VButton :loading="state.loading" type="primary"> Primary</VButton>
|
||||
<VButton :loading="state.loading" type="secondary">
|
||||
Secondary
|
||||
</VButton>
|
||||
<VButton :loading="state.loading" type="danger"> Danger</VButton>
|
||||
<VButton :loading="state.loading" type="default"> Default</VButton>
|
||||
<VButton :loading="state.loading" size="lg" type="secondary">
|
||||
Large
|
||||
</VButton>
|
||||
<VButton :loading="state.loading" type="secondary">Default</VButton>
|
||||
<VButton :loading="state.loading" size="sm" type="secondary">
|
||||
sm
|
||||
</VButton>
|
||||
<VButton :loading="state.loading" size="xs" type="secondary">
|
||||
xs
|
||||
</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
<template #controls="{ state }">
|
||||
<HstCheckbox v-model="state.loading" title="Loading" />
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant :init-state="iconState" title="Icon">
|
||||
<template #default="{ state }">
|
||||
<VSpace>
|
||||
<VButton
|
||||
:disabled="state.disabled"
|
||||
:loading="state.loading"
|
||||
size="lg"
|
||||
type="primary"
|
||||
>
|
||||
<template #icon>
|
||||
<IconSettings class="h-full w-full" />
|
||||
</template>
|
||||
Large
|
||||
</VButton>
|
||||
<VButton
|
||||
:disabled="state.disabled"
|
||||
:loading="state.loading"
|
||||
type="secondary"
|
||||
>
|
||||
<template #icon>
|
||||
<IconSettings class="h-full w-full" />
|
||||
</template>
|
||||
Default
|
||||
</VButton>
|
||||
<VButton
|
||||
:disabled="state.disabled"
|
||||
:loading="state.loading"
|
||||
size="sm"
|
||||
type="danger"
|
||||
>
|
||||
<template #icon>
|
||||
<IconSettings class="h-full w-full" />
|
||||
</template>
|
||||
sm
|
||||
</VButton>
|
||||
<VButton
|
||||
:disabled="state.disabled"
|
||||
:loading="state.loading"
|
||||
size="xs"
|
||||
type="default"
|
||||
>
|
||||
<template #icon>
|
||||
<IconSettings class="h-full w-full" />
|
||||
</template>
|
||||
xs
|
||||
</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
<template #controls="{ state }">
|
||||
<HstCheckbox v-model="state.loading" title="Loading" />
|
||||
<HstCheckbox v-model="state.disabled" title="Disabled" />
|
||||
</template>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { VButton } from "./index";
|
||||
import { VSpace } from "../space";
|
||||
import { IconSettings } from "../../icons/icons";
|
||||
|
||||
function loadingState() {
|
||||
return {
|
||||
loading: true,
|
||||
};
|
||||
}
|
||||
|
||||
function disabledState() {
|
||||
return {
|
||||
disabled: true,
|
||||
};
|
||||
}
|
||||
|
||||
function iconState() {
|
||||
return {
|
||||
loading: false,
|
||||
disabled: false,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,629 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VCard } from ".";
|
||||
|
||||
const meta: Meta<typeof VCard> = {
|
||||
title: "Card",
|
||||
component: VCard,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VCard },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: `<VCard v-bind="args">${args.default}</VCard>`,
|
||||
}),
|
||||
argTypes: {
|
||||
default: {
|
||||
control: { type: "text" },
|
||||
},
|
||||
},
|
||||
args: {
|
||||
default: ` <!-- https://lofiui.co/-->
|
||||
<div class="p-3">
|
||||
<VCard title="Page Views">
|
||||
<div class="flex w-full flex-col items-center bg-white">
|
||||
<div class="flex w-full flex-grow items-end space-x-2 sm:space-x-3">
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$37,500</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-16 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jan</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$45,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Feb</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$47,500</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Mar</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$50,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Apr</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$47,500</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">May</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$55,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jun</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$60,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-16 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jul</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$57,500</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Aug</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$67,500</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-32 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Sep</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$65,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-28 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Oct</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$70,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-40 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Nov</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$75,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-40 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Dec</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex w-full">
|
||||
<div class="ml-auto flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-400"></span>
|
||||
<span class="ml-1 text-xs font-medium">Existing</span>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-300"></span>
|
||||
<span class="ml-1 text-xs font-medium">Upgrades</span>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-200"></span>
|
||||
<span class="ml-1 text-xs font-medium">New</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
|
||||
<!-- https://lofiui.co/-->
|
||||
<div class="p-3">
|
||||
<VCard title="Page Views">
|
||||
<div class="flex w-full flex-col items-center bg-white">
|
||||
<div class="flex w-full flex-grow items-end space-x-2 sm:space-x-3">
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$37,500</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-16 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jan</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$45,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Feb</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$47,500</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Mar</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$50,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Apr</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$47,500</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">May</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$55,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jun</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$60,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-16 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jul</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$57,500</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Aug</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$67,500</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-32 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Sep</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$65,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-28 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Oct</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$70,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-40 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Nov</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$75,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-40 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Dec</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex w-full">
|
||||
<div class="ml-auto flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-400"></span>
|
||||
<span class="ml-1 text-xs font-medium">Existing</span>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-300"></span>
|
||||
<span class="ml-1 text-xs font-medium">Upgrades</span>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-200"></span>
|
||||
<span class="ml-1 text-xs font-medium">New</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
|
||||
<div class="p-3">
|
||||
<div class="grid w-full gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<VCard>
|
||||
<div class="flex items-center bg-white">
|
||||
<div
|
||||
class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-green-200"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 fill-current text-green-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-grow flex-col">
|
||||
<span class="text-xl font-bold">$8,430</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-gray-500">Revenue last 30 days</span>
|
||||
<span class="ml-2 text-sm font-semibold text-green-500"
|
||||
>+12.6%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
<VCard>
|
||||
<div class="flex items-center bg-white">
|
||||
<div
|
||||
class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-red-200"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 fill-current text-red-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-grow flex-col">
|
||||
<span class="text-xl font-bold">211</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-gray-500">Sales last 30 days</span>
|
||||
<span class="ml-2 text-sm font-semibold text-red-500"
|
||||
>-8.1%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
<VCard>
|
||||
<div class="flex items-center bg-white">
|
||||
<div
|
||||
class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-green-200"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 fill-current text-green-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-grow flex-col">
|
||||
<span class="text-xl font-bold">140</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-gray-500">Customers last 30 days</span>
|
||||
<span class="ml-2 text-sm font-semibold text-green-500"
|
||||
>+28.4%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
</div>`,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VCard>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
title: "Card",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,607 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { VCard } from "./index";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="Card">
|
||||
<template #default>
|
||||
<!-- https://lofiui.co/-->
|
||||
<div class="p-3">
|
||||
<VCard title="Page Views">
|
||||
<div class="flex w-full flex-col items-center bg-white">
|
||||
<div class="flex w-full flex-grow items-end space-x-2 sm:space-x-3">
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$37,500</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-16 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jan</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$45,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Feb</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$47,500</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Mar</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$50,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Apr</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$47,500</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">May</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$55,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jun</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$60,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-16 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jul</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$57,500</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Aug</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$67,500</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-10 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-32 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Sep</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$65,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-28 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Oct</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$70,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-40 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Nov</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$75,000</span
|
||||
>
|
||||
<div class="flex w-full items-end">
|
||||
<div
|
||||
class="relative flex h-12 flex-grow justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 flex-grow justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-40 flex-grow justify-center bg-indigo-400"
|
||||
></div>
|
||||
</div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Dec</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex w-full">
|
||||
<div class="ml-auto flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-400"></span>
|
||||
<span class="ml-1 text-xs font-medium">Existing</span>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-300"></span>
|
||||
<span class="ml-1 text-xs font-medium">Upgrades</span>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-200"></span>
|
||||
<span class="ml-1 text-xs font-medium">New</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
|
||||
<!-- https://lofiui.co/-->
|
||||
<div class="p-3">
|
||||
<VCard title="Page Views">
|
||||
<div class="flex w-full flex-col items-center bg-white">
|
||||
<div class="flex w-full flex-grow items-end space-x-2 sm:space-x-3">
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$37,500</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-16 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jan</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$45,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Feb</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$47,500</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Mar</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$50,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-6 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Apr</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$47,500</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">May</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$55,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jun</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$60,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-16 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-20 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jul</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$57,500</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-24 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Aug</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$67,500</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-10 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-32 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Sep</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$65,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-28 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Oct</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$70,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-40 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Nov</span>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex flex-grow flex-col items-center pb-5"
|
||||
>
|
||||
<span
|
||||
class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
|
||||
>$75,000</span
|
||||
>
|
||||
<div
|
||||
class="relative flex h-12 w-full justify-center bg-indigo-200"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-8 w-full justify-center bg-indigo-300"
|
||||
></div>
|
||||
<div
|
||||
class="relative flex h-40 w-full justify-center bg-indigo-400"
|
||||
></div>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Dec</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex w-full">
|
||||
<div class="ml-auto flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-400"></span>
|
||||
<span class="ml-1 text-xs font-medium">Existing</span>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-300"></span>
|
||||
<span class="ml-1 text-xs font-medium">Upgrades</span>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-200"></span>
|
||||
<span class="ml-1 text-xs font-medium">New</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
|
||||
<div class="p-3">
|
||||
<div class="grid w-full gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<VCard>
|
||||
<div class="flex items-center bg-white">
|
||||
<div
|
||||
class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-green-200"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 fill-current text-green-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-grow flex-col">
|
||||
<span class="text-xl font-bold">$8,430</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-gray-500">Revenue last 30 days</span>
|
||||
<span class="ml-2 text-sm font-semibold text-green-500"
|
||||
>+12.6%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
<VCard>
|
||||
<div class="flex items-center bg-white">
|
||||
<div
|
||||
class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-red-200"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 fill-current text-red-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-grow flex-col">
|
||||
<span class="text-xl font-bold">211</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-gray-500">Sales last 30 days</span>
|
||||
<span class="ml-2 text-sm font-semibold text-red-500"
|
||||
>-8.1%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
<VCard>
|
||||
<div class="flex items-center bg-white">
|
||||
<div
|
||||
class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-green-200"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 fill-current text-green-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-grow flex-col">
|
||||
<span class="text-xl font-bold">140</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-gray-500">Customers last 30 days</span>
|
||||
<span class="ml-2 text-sm font-semibold text-green-500"
|
||||
>+28.4%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VDialog } from ".";
|
||||
import { VButton } from "../button";
|
||||
|
||||
const meta: Meta<typeof VDialog> = {
|
||||
title: "Dialog",
|
||||
component: VDialog,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VDialog, VButton },
|
||||
height: 400,
|
||||
setup() {
|
||||
const showDialog = () => {
|
||||
args.visible = true;
|
||||
};
|
||||
|
||||
return {
|
||||
args,
|
||||
showDialog,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div style="height: 400px">
|
||||
<VButton @click="showDialog" >点击显示Dialog</VButton>
|
||||
<VDialog v-bind="args" @onCancel="args.visible = false" />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
argTypes: {
|
||||
type: {
|
||||
control: { type: "select" },
|
||||
options: ["success", "info", "warning", "error"],
|
||||
},
|
||||
confirmType: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "primary", "secondary", "danger"],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
title: "Hello",
|
||||
visible: false,
|
||||
description: "Hello World",
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VDialog>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
type: "info",
|
||||
},
|
||||
};
|
||||
|
||||
export const Success: Story = {
|
||||
args: {
|
||||
type: "success",
|
||||
},
|
||||
};
|
||||
|
||||
export const Warning: Story = {
|
||||
args: {
|
||||
type: "warning",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { VButton } from "@/components/button";
|
||||
import { Toast } from "../toast";
|
||||
import { Dialog } from "@/components/dialog";
|
||||
|
||||
const initState = () => {
|
||||
return {
|
||||
visible: false,
|
||||
title: "提示",
|
||||
description: "是否确定删除这篇文章？",
|
||||
confirmText: "确定",
|
||||
cancelText: "取消",
|
||||
type: "info",
|
||||
onConfirm: () => {
|
||||
Toast.info("已删除");
|
||||
},
|
||||
onCancel: () => {
|
||||
Toast.info("已取消");
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
function handleConfirm() {
|
||||
Dialog.success({
|
||||
title: "Hello",
|
||||
description: "Hello World",
|
||||
onConfirm: async () => {
|
||||
await new Promise((resolve) =>
|
||||
setTimeout(() => {
|
||||
resolve("");
|
||||
}, 1000)
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Story :init-state="initState" title="Dialog">
|
||||
<template #default>
|
||||
<VButton @click="handleConfirm">确定</VButton>
|
||||
</template>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VDropdown, VDropdownItem, VDropdownDivider } from ".";
|
||||
import { VButton } from "../button";
|
||||
|
||||
const meta: Meta<typeof VDropdown> = {
|
||||
title: "Dropdown",
|
||||
component: VDropdown,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VDropdown, VDropdownItem, VDropdownDivider, VButton },
|
||||
height: 400,
|
||||
setup() {
|
||||
return {
|
||||
args,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div style="height: 300px">
|
||||
<VDropdown>
|
||||
${args.default}
|
||||
<template #popper>
|
||||
${args.popper}
|
||||
</template>
|
||||
</VDropdown>
|
||||
</div>
|
||||
|
||||
`,
|
||||
}),
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VDropdown>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
default: `<VButton>Hello</VButton>`,
|
||||
popper: `
|
||||
<VDropdownItem>删除</VDropdownItem>
|
||||
<VDropdownDivider></VDropdownDivider>
|
||||
<VDropdownItem>删除</VDropdownItem>
|
||||
<VDropdownItem>编辑</VDropdownItem>
|
||||
`,
|
||||
},
|
||||
};
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { VButton } from "@/components/button";
|
||||
import { VDropdown, VDropdownItem, VDropdownDivider } from "./index";
|
||||
</script>
|
||||
<template>
|
||||
<Story title="Dropdown">
|
||||
<template #default>
|
||||
<VDropdown>
|
||||
<VButton>Hello</VButton>
|
||||
<template #popper>
|
||||
<VDropdownItem>删除</VDropdownItem>
|
||||
<VDropdownDivider></VDropdownDivider>
|
||||
<VDropdownItem>删除</VDropdownItem>
|
||||
<VDropdownItem>编辑</VDropdownItem>
|
||||
</template>
|
||||
</VDropdown>
|
||||
</template>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
import { VEmpty } from ".";
|
||||
import { VSpace } from "../space";
|
||||
import { VButton } from "../button";
|
||||
|
||||
const meta: Meta<typeof VEmpty> = {
|
||||
title: "Empty",
|
||||
component: VEmpty,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VEmpty, VSpace, VButton },
|
||||
height: 400,
|
||||
setup() {
|
||||
return {
|
||||
args,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<VEmpty>
|
||||
<template #actions>
|
||||
${args.actions}
|
||||
</template>
|
||||
</VEmpty>
|
||||
`,
|
||||
}),
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VEmpty>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
title: "没有找到与搜索条件匹配的文章",
|
||||
message: "没有找到与搜索条件匹配的文章，你可以清空搜索条件或者新建文章",
|
||||
actions: `
|
||||
<VSpace>
|
||||
<VButton>清空搜索</VButton>
|
||||
<VButton type="primary">新建文章</VButton>
|
||||
</VSpace>
|
||||
`,
|
||||
},
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { VEmpty } from "./index";
|
||||
import { VButton } from "@/components/button";
|
||||
import { VSpace } from "@/components/space";
|
||||
</script>
|
||||
<template>
|
||||
<Story title="Empty">
|
||||
<template #default>
|
||||
<VEmpty
|
||||
message="没有找到与搜索条件匹配的文章，你可以清空搜索条件或者新建文章"
|
||||
title="没有找到与搜索条件匹配的文章"
|
||||
>
|
||||
<template #actions>
|
||||
<VSpace>
|
||||
<VButton>清空搜索</VButton>
|
||||
<VButton type="primary">新建文章</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</VEmpty>
|
||||
</template>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VLoading } from ".";
|
||||
|
||||
const meta: Meta<typeof VLoading> = {
|
||||
title: "Loading",
|
||||
component: VLoading,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VLoading },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: `<VLoading v-bind="args" />`,
|
||||
}),
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VLoading>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
import { VMenu, VMenuItem, VMenuLabel } from "./index";
|
||||
import {
|
||||
IconBookRead,
|
||||
IconDashboard,
|
||||
IconFolder,
|
||||
IconMessage,
|
||||
IconPages,
|
||||
} from "@/icons/icons";
|
||||
|
||||
const meta: Meta<typeof VMenu> = {
|
||||
title: "Menu",
|
||||
component: VMenu,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: {
|
||||
VMenu,
|
||||
VMenuItem,
|
||||
VMenuLabel,
|
||||
IconBookRead,
|
||||
IconDashboard,
|
||||
IconMessage,
|
||||
IconFolder,
|
||||
IconPages,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
args,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div class="w-1/3">
|
||||
<VMenu>
|
||||
<VMenuItem active title="仪表盘">
|
||||
<template #icon>
|
||||
<IconDashboard />
|
||||
</template>
|
||||
</VMenuItem>
|
||||
<VMenuLabel>内容</VMenuLabel>
|
||||
<VMenuItem title="文章">
|
||||
<template #icon>
|
||||
<IconBookRead />
|
||||
</template>
|
||||
</VMenuItem>
|
||||
<VMenuItem title="页面">
|
||||
<template #icon>
|
||||
<IconPages />
|
||||
</template>
|
||||
</VMenuItem>
|
||||
<VMenuItem title="评论">
|
||||
<template #icon>
|
||||
<IconMessage />
|
||||
</template>
|
||||
</VMenuItem>
|
||||
<VMenuItem title="附件">
|
||||
<template #icon>
|
||||
<IconFolder />
|
||||
</template>
|
||||
</VMenuItem>
|
||||
</VMenu>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VMenu>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<template>
|
||||
<Story title="Menu">
|
||||
<Variant title="Playground">
|
||||
<template #default>
|
||||
<div class="w-1/3">
|
||||
<VMenu>
|
||||
<VMenuItem active title="仪表盘">
|
||||
<template #icon>
|
||||
<Component :is="IconDashboard" />
|
||||
</template>
|
||||
</VMenuItem>
|
||||
<VMenuLabel>内容</VMenuLabel>
|
||||
<VMenuItem title="文章">
|
||||
<template #icon>
|
||||
<Component :is="IconBookRead" />
|
||||
</template>
|
||||
</VMenuItem>
|
||||
<VMenuItem title="页面">
|
||||
<template #icon>
|
||||
<Component :is="IconPages" />
|
||||
</template>
|
||||
</VMenuItem>
|
||||
<VMenuItem title="评论">
|
||||
<template #icon>
|
||||
<Component :is="IconMessage" />
|
||||
</template>
|
||||
</VMenuItem>
|
||||
<VMenuItem title="附件">
|
||||
<template #icon>
|
||||
<Component :is="IconFolder" />
|
||||
</template>
|
||||
</VMenuItem>
|
||||
</VMenu>
|
||||
</div>
|
||||
</template>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { VMenu, VMenuItem, VMenuLabel } from "./index";
|
||||
import {
|
||||
IconBookRead,
|
||||
IconDashboard,
|
||||
IconFolder,
|
||||
IconMessage,
|
||||
IconPages,
|
||||
} from "../../icons/icons";
|
||||
</script>
|
||||
|
|
@ -41,7 +41,7 @@ exports[`Menu > should work with openIds prop 1`] = `
|
|||
</li>
|
||||
<li class=\\"has-submenus menu-item\\">
|
||||
<div class=\\"menu-item-title\\">
|
||||
<!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.172 12l-4.95-4.95l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z\\"></path></svg></span>
|
||||
<!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.171 12l-4.95-4.95l1.415-1.413L16 12l-6.364 6.364l-1.414-1.415l4.95-4.95Z\\"></path></svg></span>
|
||||
</div>
|
||||
<transition-stub name=\\"submenus-show\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
|
||||
<ul class=\\"sub-menu-items transition-all\\">
|
||||
|
|
@ -84,7 +84,7 @@ exports[`Menu > should work with sub menus 1`] = `
|
|||
</li>
|
||||
<li class=\\"has-submenus menu-item\\">
|
||||
<div class=\\"menu-item-title\\">
|
||||
<!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.172 12l-4.95-4.95l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z\\"></path></svg></span>
|
||||
<!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.171 12l-4.95-4.95l1.415-1.413L16 12l-6.364 6.364l-1.414-1.415l4.95-4.95Z\\"></path></svg></span>
|
||||
</div>
|
||||
<transition-stub name=\\"submenus-show\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
|
||||
<ul class=\\"sub-menu-items transition-all\\">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VModal } from ".";
|
||||
import { VButton } from "../button";
|
||||
import { IconArrowLeft, IconArrowRight } from "@/icons/icons";
|
||||
import { VSpace } from "../space";
|
||||
|
||||
const meta: Meta<typeof VModal> = {
|
||||
title: "Modal",
|
||||
component: VModal,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VModal, VButton, VSpace, IconArrowLeft, IconArrowRight },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: `
|
||||
<VButton type="secondary" @click="args.visible = true">打开</VButton>
|
||||
<VModal
|
||||
v-model:visible="args.visible"
|
||||
:fullscreen="args.fullscreen"
|
||||
:title="args.title"
|
||||
:width="args.width"
|
||||
:mount-to-body="true"
|
||||
>
|
||||
<template #actions>
|
||||
<span>
|
||||
<IconArrowLeft role="button" />
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<IconArrowRight role="button" />
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col">
|
||||
<img class="w-full" src="https://ryanc.cc/avatar" />
|
||||
<img class="w-full" src="https://ryanc.cc/avatar" />
|
||||
<img class="w-full" src="https://halo.run/logo" />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<VSpace>
|
||||
<VButton loading type="primary" @click="args.visible = false"
|
||||
>确定
|
||||
</VButton>
|
||||
<VButton @click="args.visible = false">取消</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</VModal>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
visible: false,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VModal>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { IconArrowLeft, IconArrowRight } from "@/icons/icons";
|
||||
import { VButton } from "../../components/button";
|
||||
import { VModal } from "../../components/modal";
|
||||
import { VSpace } from "../../components/space";
|
||||
|
||||
function initState() {
|
||||
return {
|
||||
visible: false,
|
||||
fullscreen: false,
|
||||
width: 500,
|
||||
title: "测试",
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Story :init-state="initState" title="Modal" class="h-full">
|
||||
<template #default="{ state }">
|
||||
<VButton type="secondary" @click="state.visible = true">打开</VButton>
|
||||
<VModal
|
||||
v-model:visible="state.visible"
|
||||
:fullscreen="state.fullscreen"
|
||||
:title="state.title"
|
||||
:width="state.width"
|
||||
:mount-to-body="true"
|
||||
>
|
||||
<template #actions>
|
||||
<span>
|
||||
<IconArrowLeft role="button" />
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<IconArrowRight role="button" />
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex flex-col">
|
||||
<img class="w-full" src="https://ryanc.cc/avatar" />
|
||||
<img class="w-full" src="https://ryanc.cc/avatar" />
|
||||
<img class="w-full" src="https://halo.run/logo" />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<VSpace>
|
||||
<VButton loading type="primary" @click="state.visible = false"
|
||||
>确定
|
||||
</VButton>
|
||||
<VButton @click="state.visible = false">取消</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</VModal>
|
||||
</template>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VPagination } from ".";
|
||||
|
||||
const meta: Meta<typeof VPagination> = {
|
||||
title: "Pagination",
|
||||
component: VPagination,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VPagination },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: `
|
||||
<VPagination
|
||||
v-model:page="args.page"
|
||||
v-model:size="args.size"
|
||||
:total="args.total"
|
||||
/>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 100,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VPagination>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<template>
|
||||
<Story :init-state="initState" title="Pagination">
|
||||
<template #default="{ state }">
|
||||
<VPagination
|
||||
v-model:page="state.page"
|
||||
v-model:size="state.size"
|
||||
:total="state.total"
|
||||
></VPagination>
|
||||
</template>
|
||||
</Story>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { VPagination } from "./index";
|
||||
|
||||
function initState() {
|
||||
return {
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 100,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VSpace } from ".";
|
||||
import { VButton } from "../button";
|
||||
|
||||
const meta: Meta<typeof VSpace> = {
|
||||
title: "Space",
|
||||
component: VSpace,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VSpace, VButton },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: `
|
||||
<VSpace
|
||||
v-bind="args"
|
||||
>
|
||||
<div>Control：</div>
|
||||
<VButton type="primary">确定</VButton>
|
||||
<VButton>取消</VButton>
|
||||
</VSpace>
|
||||
`,
|
||||
}),
|
||||
argTypes: {
|
||||
align: {
|
||||
control: { type: "select" },
|
||||
options: ["start", "end", "center", "stretch"],
|
||||
},
|
||||
spacing: {
|
||||
control: { type: "select" },
|
||||
options: ["xs", "sm", "md", "lg"],
|
||||
},
|
||||
direction: {
|
||||
control: { type: "select" },
|
||||
options: ["row", "column"],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
align: "center",
|
||||
direction: "row",
|
||||
spacing: "xs",
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VSpace>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<Story :init-state="initState" title="Space">
|
||||
<template #default="{ state }">
|
||||
<VSpace
|
||||
:align="state.align"
|
||||
:direction="state.direction"
|
||||
:spacing="state.spacing"
|
||||
>
|
||||
<div>Control：</div>
|
||||
<VButton type="primary">确定</VButton>
|
||||
<VButton>取消</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</Story>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { VSpace } from "../../components/space";
|
||||
import { VButton } from "../../components/button";
|
||||
|
||||
function initState() {
|
||||
return {
|
||||
direction: "row",
|
||||
spacing: "xs",
|
||||
align: "center",
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
import { VStatusDot } from ".";
|
||||
|
||||
const meta: Meta<typeof VStatusDot> = {
|
||||
title: "StatusDot",
|
||||
component: VStatusDot,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VStatusDot },
|
||||
setup() {
|
||||
return {
|
||||
args,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<VStatusDot v-bind="args" />
|
||||
`,
|
||||
}),
|
||||
argTypes: {
|
||||
state: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "success", "warning", "error"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VStatusDot>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
state: "default",
|
||||
text: "默认",
|
||||
},
|
||||
};
|
||||
|
||||
export const Success: Story = {
|
||||
args: {
|
||||
state: "success",
|
||||
text: "成功",
|
||||
},
|
||||
};
|
||||
|
||||
export const Warning: Story = {
|
||||
args: {
|
||||
state: "warning",
|
||||
text: "警告",
|
||||
},
|
||||
};
|
||||
|
||||
export const Error: Story = {
|
||||
args: {
|
||||
state: "error",
|
||||
text: "错误",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import StatusDot from "./StatusDot.vue";
|
||||
import { VSpace } from "../space";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="StatusDot">
|
||||
<Variant title="State">
|
||||
<template #default>
|
||||
<VSpace direction="column">
|
||||
<StatusDot state="default" text="默认" />
|
||||
|
||||
<StatusDot state="success" text="成功" />
|
||||
|
||||
<StatusDot state="warning" text="警告" />
|
||||
|
||||
<StatusDot state="error" text="错误" />
|
||||
</VSpace>
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant title="Animate">
|
||||
<template #default>
|
||||
<VSpace direction="column">
|
||||
<StatusDot state="default" text="默认" animate />
|
||||
|
||||
<StatusDot state="success" text="成功" animate />
|
||||
|
||||
<StatusDot state="warning" text="警告" animate />
|
||||
|
||||
<StatusDot state="error" text="错误" animate />
|
||||
</VSpace>
|
||||
</template>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
import { VSwitch } from ".";
|
||||
|
||||
const meta: Meta<typeof VSwitch> = {
|
||||
title: "Switch",
|
||||
component: VSwitch,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VSwitch },
|
||||
setup() {
|
||||
return {
|
||||
args,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<VSwitch v-bind="args" v-model="args.modelValue" />
|
||||
`,
|
||||
}),
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VSwitch>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { VSwitch } from "./index";
|
||||
|
||||
function initState() {
|
||||
return {
|
||||
value: false,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Story :init-state="initState" title="Switch">
|
||||
<template #default="{ state }">
|
||||
<div class="p-4">
|
||||
<VSwitch v-model="state.value"></VSwitch>
|
||||
</div>
|
||||
</template>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -1,25 +1,9 @@
|
|||
import { describe, expect, it } from "vitest";
|
||||
import { VSwitch } from "../index";
|
||||
import { mount, shallowMount } from "@vue/test-utils";
|
||||
import { mount } from "@vue/test-utils";
|
||||
|
||||
describe("Switch", () => {
|
||||
it("should render", () => {
|
||||
expect(mount(VSwitch)).toBeDefined();
|
||||
});
|
||||
|
||||
it("emits the correct events when clicked", () => {
|
||||
const wrapper = shallowMount(VSwitch);
|
||||
wrapper.find("button").trigger("click");
|
||||
expect(wrapper.emitted("update:modelValue")).toBeTruthy();
|
||||
expect(wrapper.emitted("change")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("does not emit events when disabled or loading", () => {
|
||||
const wrapper = shallowMount(VSwitch, {
|
||||
props: { disabled: true, loading: true },
|
||||
});
|
||||
wrapper.find("button").trigger("click");
|
||||
expect(wrapper.emitted("update:modelValue")).toBeFalsy();
|
||||
expect(wrapper.emitted("change")).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
import { VTabbar } from ".";
|
||||
import { ref } from "vue";
|
||||
|
||||
const meta: Meta<typeof VTabbar> = {
|
||||
title: "Tabbar",
|
||||
component: VTabbar,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VTabbar },
|
||||
setup() {
|
||||
const activeId = ref("general");
|
||||
const items = [
|
||||
{ label: "基本设置", id: "general" },
|
||||
{ label: "文章设置", id: "post" },
|
||||
{ label: "SEO 设置", id: "seo" },
|
||||
{ label: "评论设置", id: "comment" },
|
||||
{ label: "主题路由设置", id: "theme-route" },
|
||||
{ label: "代码注入", id: "code-inject" },
|
||||
];
|
||||
|
||||
return {
|
||||
args,
|
||||
activeId,
|
||||
items,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div class="p-3">
|
||||
<VTabbar
|
||||
v-model:activeId="activeId"
|
||||
:items="items"
|
||||
:type="args.type"
|
||||
:direction="args.direction"
|
||||
/>
|
||||
</div>
|
||||
|
||||
`,
|
||||
}),
|
||||
argTypes: {
|
||||
type: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "pills", "outline"],
|
||||
},
|
||||
direction: {
|
||||
control: { type: "select" },
|
||||
options: ["row", "column"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VTabbar>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
type: "default",
|
||||
},
|
||||
};
|
||||
|
||||
export const Pills: Story = {
|
||||
args: {
|
||||
type: "pills",
|
||||
},
|
||||
};
|
||||
|
||||
export const Outline: Story = {
|
||||
args: {
|
||||
type: "outline",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { VTabbar } from "./index";
|
||||
|
||||
function initState() {
|
||||
return {
|
||||
activeId: "general",
|
||||
items: [
|
||||
{ label: "基本设置", id: "general" },
|
||||
{ label: "文章设置", id: "post" },
|
||||
{ label: "SEO 设置", id: "seo" },
|
||||
{ label: "评论设置", id: "comment" },
|
||||
{ label: "主题路由设置", id: "theme-route" },
|
||||
{ label: "代码注入", id: "code-inject" },
|
||||
],
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Story :init-state="initState" title="Tabbar">
|
||||
<template #default="{ state }">
|
||||
<div class="p-3">
|
||||
<VTabbar v-model:activeId="state.activeId" :items="state.items" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VTabbar
|
||||
v-model:activeId="state.activeId"
|
||||
:items="state.items"
|
||||
type="pills"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VTabbar
|
||||
v-model:activeId="state.activeId"
|
||||
:items="state.items"
|
||||
type="outline"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
import { VTabs, VTabItem } from ".";
|
||||
|
||||
const meta: Meta<typeof VTabs> = {
|
||||
title: "Tabs",
|
||||
component: VTabs,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VTabs, VTabItem },
|
||||
setup() {
|
||||
return {
|
||||
args,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div class="p-3">
|
||||
<VTabs v-model:activeId="args.activeId" type="pills">
|
||||
<VTabItem id="johnniang" label="JohnNiang">
|
||||
This is JohnNiang's Item
|
||||
</VTabItem>
|
||||
<VTabItem id="ryanwang" label="Ryan Wang">
|
||||
This is Ryan Wang's Item
|
||||
</VTabItem>
|
||||
<VTabItem id="guqing" label="guqing">
|
||||
This is guqing's Item
|
||||
</VTabItem>
|
||||
</VTabs>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
argTypes: {
|
||||
type: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "pills", "outline"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VTabs>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
activeId: "ryanwang",
|
||||
type: "default",
|
||||
},
|
||||
};
|
||||
|
||||
export const Pills: Story = {
|
||||
args: {
|
||||
activeId: "ryanwang",
|
||||
type: "pills",
|
||||
},
|
||||
};
|
||||
|
||||
export const Outline: Story = {
|
||||
args: {
|
||||
activeId: "ryanwang",
|
||||
type: "outline",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { VTabItem, VTabs } from "./index";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story :init-state="() => ({ activeId: 'ryanwang' })" title="Tabs">
|
||||
<template #default="{ state }">
|
||||
<div class="p-3">
|
||||
<VTabs v-model:activeId="state.activeId">
|
||||
<VTabItem id="johnniang" label="JohnNiang">
|
||||
This is JohnNiang's Item
|
||||
</VTabItem>
|
||||
<VTabItem id="ryanwang" label="Ryan Wang">
|
||||
This is Ryan Wang's Item
|
||||
</VTabItem>
|
||||
<VTabItem id="guqing" label="guqing">
|
||||
This is guqing's Item
|
||||
</VTabItem>
|
||||
</VTabs>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VTabs v-model:activeId="state.activeId" type="pills">
|
||||
<VTabItem id="johnniang" label="JohnNiang">
|
||||
This is JohnNiang's Item
|
||||
</VTabItem>
|
||||
<VTabItem id="ryanwang" label="Ryan Wang">
|
||||
This is Ryan Wang's Item
|
||||
</VTabItem>
|
||||
<VTabItem id="guqing" label="guqing">
|
||||
This is guqing's Item
|
||||
</VTabItem>
|
||||
</VTabs>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VTabs v-model:activeId="state.activeId" type="outline">
|
||||
<VTabItem id="johnniang" label="JohnNiang">
|
||||
This is JohnNiang's Item
|
||||
</VTabItem>
|
||||
<VTabItem id="ryanwang" label="Ryan Wang">
|
||||
This is Ryan Wang's Item
|
||||
</VTabItem>
|
||||
<VTabItem id="guqing" label="guqing">
|
||||
This is guqing's Item
|
||||
</VTabItem>
|
||||
</VTabs>
|
||||
</div>
|
||||
</template>
|
||||
</Story>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import type { Meta, StoryObj } from "@storybook/vue3";
|
||||
|
||||
import { VTag } from ".";
|
||||
|
||||
const meta: Meta<typeof VTag> = {
|
||||
title: "Tag",
|
||||
component: VTag,
|
||||
tags: ["autodocs"],
|
||||
render: (args) => ({
|
||||
components: { VTag },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: `<VTag v-bind="args">${args.default}<template v-if="${
|
||||
"leftIcon" in args
|
||||
}" #leftIcon>${args.leftIcon}</template></VTag>`,
|
||||
}),
|
||||
argTypes: {
|
||||
default: {
|
||||
control: { type: "text" },
|
||||
},
|
||||
theme: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "primary", "secondary", "danger"],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
default: "Tag",
|
||||
theme: "default",
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof VTag>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
theme: "default",
|
||||
},
|
||||
};
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
theme: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
theme: "secondary",
|
||||
},
|
||||
};
|
||||
|
||||
export const Danger: Story = {
|
||||
args: {
|
||||
theme: "danger",
|
||||
},
|
||||
};
|
||||
|
||||
export const Icon: Story = {
|
||||
args: {
|
||||
leftIcon: `<IconSettings />`,
|
||||
},
|
||||
};
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import "@/styles/tailwind.css";
|
||||
import { defineSetupVue3 } from "@histoire/plugin-vue";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
export default defineSetupVue3(() => {});
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
import { Meta } from '@storybook/blocks';
|
||||
import Code from './assets/code-brackets.svg';
|
||||
import Colors from './assets/colors.svg';
|
||||
import Comments from './assets/comments.svg';
|
||||
import Direction from './assets/direction.svg';
|
||||
import Flow from './assets/flow.svg';
|
||||
import Plugin from './assets/plugin.svg';
|
||||
import Repo from './assets/repo.svg';
|
||||
import StackAlt from './assets/stackalt.svg';
|
||||
|
||||
<Meta title="Introduction" />
|
||||
|
||||
<style>
|
||||
{`
|
||||
.subheading {
|
||||
--mediumdark: '#999999';
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
letter-spacing: 6px;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.link-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 620px) {
|
||||
.link-list {
|
||||
row-gap: 20px;
|
||||
column-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
.link-list {
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr 1fr;
|
||||
-ms-grid-rows: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.link-item {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
border: 1px solid #00000010;
|
||||
border-radius: 5px;
|
||||
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.link-item:hover {
|
||||
border-color: #1EA7FD50;
|
||||
transform: translate3d(0, -3px, 0);
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
|
||||
}
|
||||
|
||||
.link-item:active {
|
||||
border-color: #1EA7FD;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.link-item strong {
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.link-item img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-right: 15px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.link-item span,
|
||||
.link-item p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: inline-block;
|
||||
border-radius: 1em;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
font-weight: 700;
|
||||
background: #E7FDD8;
|
||||
color: #66BF3C;
|
||||
padding: 4px 12px;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.tip-wrapper {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tip-wrapper code {
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
# Welcome to Storybook
|
||||
|
||||
Storybook helps you build UI components in isolation from your app's business logic, data, and context.
|
||||
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
|
||||
|
||||
Browse example stories now by navigating to them in the sidebar.
|
||||
View their code in the `stories` directory to learn how they work.
|
||||
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
|
||||
|
||||
<div className="subheading">Configure</div>
|
||||
|
||||
<div className="link-list">
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/addons/addon-types"
|
||||
target="_blank"
|
||||
>
|
||||
<img src={Plugin} alt="plugin" />
|
||||
<span>
|
||||
<strong>Presets for popular tools</strong>
|
||||
Easy setup for TypeScript, SCSS and more.
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/configure/webpack"
|
||||
target="_blank"
|
||||
>
|
||||
<img src={StackAlt} alt="Build" />
|
||||
<span>
|
||||
<strong>Build configuration</strong>
|
||||
How to customize webpack and Babel
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/configure/styling-and-css"
|
||||
target="_blank"
|
||||
>
|
||||
<img src={Colors} alt="colors" />
|
||||
<span>
|
||||
<strong>Styling</strong>
|
||||
How to load and configure CSS libraries
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
|
||||
target="_blank"
|
||||
>
|
||||
<img src={Flow} alt="flow" />
|
||||
<span>
|
||||
<strong>Data</strong>
|
||||
Providers and mocking for data libraries
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="subheading">Learn</div>
|
||||
|
||||
<div className="link-list">
|
||||
<a className="link-item" href="https://storybook.js.org/docs" target="_blank">
|
||||
<img src={Repo} alt="repo" />
|
||||
<span>
|
||||
<strong>Storybook documentation</strong>
|
||||
Configure, customize, and extend
|
||||
</span>
|
||||
</a>
|
||||
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
|
||||
<img src={Direction} alt="direction" />
|
||||
<span>
|
||||
<strong>In-depth guides</strong>
|
||||
Best practices from leading teams
|
||||
</span>
|
||||
</a>
|
||||
<a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
|
||||
<img src={Code} alt="code" />
|
||||
<span>
|
||||
<strong>GitHub project</strong>
|
||||
View the source and add issues
|
||||
</span>
|
||||
</a>
|
||||
<a className="link-item" href="https://discord.gg/storybook" target="_blank">
|
||||
<img src={Comments} alt="comments" />
|
||||
<span>
|
||||
<strong>Discord chat</strong>
|
||||
Chat with maintainers and the community
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="tip-wrapper">
|
||||
<span className="tip">Tip</span>Edit the Markdown in{' '}
|
||||
<code>stories/Introduction.stories.mdx</code>
|
||||
</div>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue