Initial commit

resources/js/pages/apps/components/MultiStepForm.vue

@@ -0,0 +1,99 @@
+<script setup>
+const props = defineProps({
+  step: Object,
+  stepNumber: Number,
+  totalSteps: Number,
+  activeModelColor: String,
+  activeModelBgColor: String,
+});
+const emit = defineEmits(["cancel", "select"]);
+</script>
+
+<template>
+  <div class="multi-form-container">
+    <div class="multi-form-header mb-3">
+      <div class="d-flex justify-space-between align-center mb-2">
+        <div class="form-title font-weight-bold">
+          {{ step.formTitle }}
+        </div>
+        <div class="d-flex align-center">
+          <VChip :color="activeModelColor" size="small" variant="tonal">
+            {{ stepNumber }}/{{ totalSteps }}
+          </VChip>
+          <VBtn icon size="x-small" @click="emit('cancel')" class="ms-2">
+            <VIcon icon="tabler-x" />
+          </VBtn>
+        </div>
+      </div>
+
+      <VProgressLinear
+        :model-value="(stepNumber / totalSteps) * 100"
+        :color="activeModelColor"
+        height="4"
+        rounded
+        class="mb-3"
+      ></VProgressLinear>
+    </div>
+
+    <div class="step-title font-weight-medium mb-2">
+      {{ step.title }}
+    </div>
+
+    <div class="form-question mb-3">
+      {{ step.question }}
+    </div>
+
+    <div v-if="step.type === 'options'" class="form-options">
+      <div class="d-flex flex-wrap gap-2">
+        <VBtn
+          v-for="(option, optIndex) in step.options"
+          :key="optIndex"
+          :color="activeModelColor"
+          variant="outlined"
+          size="small"
+          class="form-option-btn"
+          @click="emit('select', { id: step.id, value: option })"
+        >
+          {{ option }}
+        </VBtn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.multi-form-container {
+  max-width: 100%;
+}
+
+.multi-form-header {
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  padding-bottom: 12px;
+}
+
+.form-title {
+  font-size: 1.1rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.step-title {
+  font-size: 0.95rem;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+}
+
+.form-question {
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.form-options .form-option-btn {
+  margin-bottom: 8px;
+  border-radius: 8px;
+  text-transform: none;
+}
+
+.form-options .form-option-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+</style>