detail page port

components/NumberInput.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="number-input">
+        <label>Quantity (Max: {{ max }})</label>
+
+        <div class="input-wrap">
+            <button @click="decrement">-</button>
+
+            <input
+                v-model="model"
+                :id="ID"
+                type="number"
+                :min="min"
+                :max="max"
+            />
+
+            <button @click="increment">+</button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const ID = Math.random().toString(36).substring(2)
+
+const props = defineProps({
+    min: {
+        type: Number,
+        default: () => 1,
+    },
+    max: {
+        type: Number,
+        default: () => 10,
+    },
+})
+
+const model = defineModel()
+
+const increment = () => {
+    if (model.value < props.max) {
+        model.value++
+    }
+}
+const decrement = () => {
+    if (model.value > props.min) {
+        model.value--
+    }
+}
+</script>
+
+<style lang="scss">
+.number-input {
+    label {
+        display: block;
+        margin-bottom: desktop-vw(20px);
+    }
+
+    .input-wrap {
+        grid-template-columns: auto 1fr auto;
+        display: grid;
+        width: 100%;
+        border: 1px solid var(--theme-fg);
+
+        button {
+            background: var(--theme-fg);
+            color: var(--theme-bg);
+            aspect-ratio: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        input {
+            pointer-events: none;
+            text-align: center;
+        }
+    }
+}
+</style>