106 lines
2.1 KiB
TypeScript
106 lines
2.1 KiB
TypeScript
import { ICON_SIZE } from "@/types/evcc";
|
|
import VehicleIcon from "./VehicleIcon.vue";
|
|
import type { Meta, StoryFn } from "@storybook/vue3";
|
|
|
|
const icons = [
|
|
"car",
|
|
"bike",
|
|
"bus",
|
|
"moped",
|
|
"motorcycle",
|
|
"rocket",
|
|
"scooter",
|
|
"taxi",
|
|
"tractor",
|
|
"rickshaw",
|
|
"shuttle",
|
|
"van",
|
|
"airpurifier",
|
|
"battery",
|
|
"bulb",
|
|
"climate",
|
|
"coffeemaker",
|
|
"compute",
|
|
"cooking",
|
|
"cooler",
|
|
"desktop",
|
|
"device",
|
|
"dishwasher",
|
|
"dryer",
|
|
"floorlamp",
|
|
"generic",
|
|
"heater",
|
|
"heatexchange",
|
|
"heatpump",
|
|
"kettle",
|
|
"laundry",
|
|
"laundry2",
|
|
"machine",
|
|
"meter",
|
|
"smartconsumer",
|
|
"microwave",
|
|
"pump",
|
|
"tool",
|
|
"waterheater",
|
|
];
|
|
|
|
export default {
|
|
title: "VehicleIcon/VehicleIcon",
|
|
component: VehicleIcon,
|
|
argTypes: {
|
|
name: {
|
|
control: "select",
|
|
options: icons,
|
|
},
|
|
names: { control: "object" },
|
|
size: {
|
|
control: "select",
|
|
options: Object.values(ICON_SIZE),
|
|
defaultValue: ICON_SIZE.XL,
|
|
},
|
|
},
|
|
} as Meta<typeof VehicleIcon>;
|
|
|
|
const Template: StoryFn<typeof VehicleIcon> = (args) => ({
|
|
components: { VehicleIcon },
|
|
setup() {
|
|
return { args };
|
|
},
|
|
template: '<VehicleIcon v-bind="args" />',
|
|
});
|
|
|
|
// Single icon story that can be controlled via args
|
|
export const SingleIcon = Template.bind({});
|
|
SingleIcon.args = {
|
|
name: "car",
|
|
size: ICON_SIZE.XL,
|
|
};
|
|
|
|
// Multiple icons stories
|
|
export const TwoCars = Template.bind({});
|
|
TwoCars.args = {
|
|
names: ["car", "car"],
|
|
size: ICON_SIZE.XL,
|
|
};
|
|
|
|
export const CarAndThreeBikes = Template.bind({});
|
|
CarAndThreeBikes.args = {
|
|
names: ["car", "bike", "bike", "bike"],
|
|
size: ICON_SIZE.XL,
|
|
};
|
|
|
|
// Story showing all icons at once
|
|
export const AllIcons = () => ({
|
|
components: { VehicleIcon },
|
|
setup() {
|
|
return { icons };
|
|
},
|
|
template: `
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px;">
|
|
<div v-for="icon in icons" :key="icon" style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
|
|
<VehicleIcon :name="icon" size="xl" />
|
|
<small>{{ icon }}</small>
|
|
</div>
|
|
</div>
|
|
`,
|
|
});
|