chore: Typescript: Rewrite VehicleIcon (#21633)

Co-authored-by: Michael Geers <michael@geers.tv>

assets/js/components/MultiIcon/MultiIcon.stories.ts

@@ -1,3 +1,4 @@
+import { ICON_SIZE } from "@/types/evcc";
 import MultiIcon from "./MultiIcon.vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
@@ -10,7 +11,8 @@ export default {
 			description: "Number of icons to display",
 		},
 		size: {
-			control: { type: "select", options: ["sm", "md", "lg", "xl"] },
+			options: Object.values(ICON_SIZE),
+			control: { type: "select" },
 			description: "Size of the icons",
 		},
 	},
@@ -41,5 +43,5 @@ export const AllCounts: StoryFn<typeof MultiIcon> = (args) => ({
 });
 
 AllCounts.args = {
-	size: "xl",
+	size: ICON_SIZE.XL,
 };

assets/js/components/MultiIcon/MultiIcon.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 import _1 from "./1.vue";
 import _2 from "./2.vue";
 import _3 from "./3.vue";
@@ -14,6 +14,7 @@ import _7 from "./7.vue";
 import _8 from "./8.vue";
 import _9 from "./9.vue";
 import Plus from "./Plus.vue";
+import { ICON_SIZE } from "@/types/evcc";
 
 const icons = {
 	_1,
@@ -31,7 +32,7 @@ export default defineComponent({
 	name: "MultiIcon",
 	props: {
 		count: { type: Number, default: 1 },
-		size: { type: String, default: "s" },
+		size: { type: String as PropType<ICON_SIZE>, default: ICON_SIZE.S },
 	},
 	computed: {
 		icon() {

assets/js/components/VehicleIcon/Airpurifier.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Airpurifier",
-};
+});
 </script>

assets/js/components/VehicleIcon/Battery.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Battery",
-};
+});
 </script>

assets/js/components/VehicleIcon/Bike.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Bike",
-};
+});
 </script>

assets/js/components/VehicleIcon/Bulb.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Bulb",
-};
+});
 </script>

assets/js/components/VehicleIcon/Bus.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Bus",
-};
+});
 </script>

assets/js/components/VehicleIcon/Climate.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Climate",
-};
+});
 </script>

assets/js/components/VehicleIcon/Coffeemaker.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Coffeemaker",
-};
+});
 </script>

assets/js/components/VehicleIcon/Compute.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Compute",
-};
+});
 </script>

assets/js/components/VehicleIcon/Cooking.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Cooking",
-};
+});
 </script>

assets/js/components/VehicleIcon/Cooler.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Cooler",
-};
+});
 </script>

assets/js/components/VehicleIcon/Desktop.vue

@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Desktop",
-};
+});
 </script>

assets/js/components/VehicleIcon/Device.vue

@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Device",
-};
+});
 </script>

assets/js/components/VehicleIcon/Dishwasher.vue

@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Dishwasher",
-};
+});
 </script>

assets/js/components/VehicleIcon/Dryer.vue

@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Dryer",
-};
+});
 </script>

assets/js/components/VehicleIcon/Floorlamp.vue

@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Floorlamp",
-};
+});
 </script>

assets/js/components/VehicleIcon/Generic.vue

@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Plug",
-};
+});
 </script>

assets/js/components/VehicleIcon/Heater.vue

@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Heater",
-};
+});
 </script>

assets/js/components/VehicleIcon/Heatexchange.vue

@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Heatexchange",
-};
+});
 </script>

assets/js/components/VehicleIcon/Heatpump.vue

@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Heatpump",
-};
+});
 </script>

assets/js/components/VehicleIcon/Kettle.vue

@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Kettle",
-};
+});
 </script>

assets/js/components/VehicleIcon/Laundry.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Laundry",
-};
+});
 </script>

assets/js/components/VehicleIcon/Laundry2.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Laundry2",
-};
+});
 </script>

assets/js/components/VehicleIcon/Machine.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Machine",
-};
+});
 </script>

assets/js/components/VehicleIcon/Meter.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Meter",
-};
+});
 </script>

assets/js/components/VehicleIcon/Microwave.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Microwave",
-};
+});
 </script>

assets/js/components/VehicleIcon/Moped.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Moped",
-};
+});
 </script>

assets/js/components/VehicleIcon/Motorcycle.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Motorcycle",
-};
+});
 </script>

assets/js/components/VehicleIcon/Pump.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Pump",
-};
+});
 </script>

assets/js/components/VehicleIcon/Rickshaw.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Rickshaw",
-};
+});
 </script>

assets/js/components/VehicleIcon/Rocket.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Rocket",
-};
+});
 </script>

assets/js/components/VehicleIcon/Scooter.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Scooter",
-};
+});
 </script>

assets/js/components/VehicleIcon/Shuttle.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Shuttle",
-};
+});
 </script>

assets/js/components/VehicleIcon/SmartConsumer.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "SmartConsumer",
-};
+});
 </script>

assets/js/components/VehicleIcon/Taxi.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Taxi",
-};
+});
 </script>

assets/js/components/VehicleIcon/Tool.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Tool",
-};
+});
 </script>

assets/js/components/VehicleIcon/Tractor.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Tractor",
-};
+});
 </script>

assets/js/components/VehicleIcon/Van.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Van",
-};
+});
 </script>

assets/js/components/VehicleIcon/VehicleIcon.stories.js

@@ -1,104 +0,0 @@
-import VehicleIcon from "./VehicleIcon.vue";
-
-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: ["sm", "md", "lg", "xl"],
-      defaultValue: "xl",
-    },
-  },
-};
-
-const Template = (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: "xl",
-};
-
-// Multiple icons stories
-export const TwoCars = Template.bind({});
-TwoCars.args = {
-  names: ["car", "car"],
-  size: "xl",
-};
-
-export const CarAndThreeBikes = Template.bind({});
-CarAndThreeBikes.args = {
-  names: ["car", "bike", "bike", "bike"],
-  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>
-  `,
-});

assets/js/components/VehicleIcon/VehicleIcon.stories.ts

@@ -0,0 +1,106 @@
+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>
+  `,
+});

assets/js/components/VehicleIcon/VehicleIcon.vue

@@ -3,7 +3,8 @@
 	<MultiIcon v-else :count="count" :size="size"></MultiIcon>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, type Component, type PropType } from "vue";
 import "@h2d2/shopicons/es/regular/car3";
 import MultiIcon from "../MultiIcon";
 
@@ -45,8 +46,9 @@ import tool from "./Tool.vue";
 import tractor from "./Tractor.vue";
 import van from "./Van.vue";
 import waterheater from "./WaterHeater.vue";
+import { ICON_SIZE } from "@/types/evcc";
 
-const icons = {
+const icons: Record<string, Component | string> = {
 	airpurifier,
 	battery,
 	bike,
@@ -90,20 +92,20 @@ const icons = {
 
 export const ICONS = Object.keys(icons);
 
-export default {
+export default defineComponent({
 	name: "VehicleIcon",
 	components: { MultiIcon },
 	props: {
 		name: { type: String, default: "car" },
-		names: { type: Array },
-		size: { type: String, default: "s" },
+		names: { type: Array as PropType<string[]>, default: () => [] },
+		size: { type: String as PropType<ICON_SIZE>, default: ICON_SIZE.S },
 	},
 	computed: {
-		uniqueNames() {
-			return [...new Set(this.names || [this.name])];
+		uniqueNames(): string[] {
+			return [...new Set(this.names && this.names.length ? this.names : [this.name])];
 		},
 		count() {
-			return this.names?.length || 0;
+			return this.names.length;
 		},
 		single() {
 			return this.uniqueNames.length == 1;
@@ -112,7 +114,7 @@ export default {
 			return icons[this.uniqueNames[0]] || `shopicon-regular-car3`;
 		},
 	},
-};
+});
 </script>
 
 <style scoped>

assets/js/components/VehicleIcon/WaterHeater.vue

@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "WaterHeater",
-};
+});
 </script>

assets/js/types/evcc.ts

@@ -54,6 +54,14 @@ export enum CURRENCY {
 	DKK = "DKK",
 }
 
+export enum ICON_SIZE {
+	XS = "xs",
+	S = "s",
+	M = "m",
+	L = "l",
+	XL = "xl",
+}
+
 export enum CHARGE_MODE {
 	OFF = "off",
 	NOW = "now",