feat: extract product identity workflow step

2026-09-10 03:09:39 -04:00
parent 8ff547feaa
commit 3e29ca0529
5 changed files with 90 additions and 33 deletions
@@ -0,0 +1,48 @@
+<script setup>
+defineProps({
+  productName: { type: String, required: true },
+  categoryId: { type: String, required: true },
+  categories: { type: Array, required: true },
+  isSaving: { type: Boolean, default: false },
+});
+
+defineEmits(['update:productName', 'update:categoryId', 'submit']);
+</script>
+
+<template>
+  <form id="workflow-product" class="showcase-panel product-identity-step" @submit.prevent="$emit('submit')">
+    <div>
+      <p class="catalog-kicker">Step 1</p>
+      <h2>Identify the Product</h2>
+      <p class="product-identity-step__intro">Create the shared product record before adding a physical copy.</p>
+    </div>
+    <label class="fixture-label" for="product-name">Name</label>
+    <input
+      id="product-name"
+      :value="productName"
+      class="fixture-input"
+      required
+      @input="$emit('update:productName', $event.target.value)"
+    />
+    <label class="fixture-label" for="product-category">Category</label>
+    <select
+      id="product-category"
+      :value="categoryId"
+      class="fixture-input"
+      required
+      @change="$emit('update:categoryId', $event.target.value)"
+    >
+      <option value="" disabled>Select a category</option>
+      <option v-for="category in categories" :key="category.id" :value="category.id">
+        {{ category.name }}
+      </option>
+    </select>
+    <button class="button button--primary" type="submit" :disabled="isSaving">
+      Create product
+    </button>
+  </form>
+</template>
+
+<style scoped lang="scss">
+@use './ProductIdentityStep.scss';
+</style>