<script setup lang="ts">
import { ref, computed } from 'vue'

interface OrderItem {
  id: string
  name: string
  price: number
  quantity: number
}

const items = ref<OrderItem[]>([
  { id: '1', name: 'Mechanical Keyboard', price: 149.99, quantity: 1 }
])

const subtotal = computed(() => 
  items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
)

const addItem = (name: string, price: number) => {
  items.value.push({ id: crypto.randomUUID(), name, price, quantity: 1 })
}
</script>

<template>
  <div class="cart-container">
    <h2>Shopping Cart ({{ items.length }} items)</h2>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - ${{ item.price }} x {{ item.quantity }}
      </li>
    </ul>
    <p class="font-bold">Total: ${{ subtotal.toFixed(2) }}</p>
  </div>
</template>

// Reusable Headless Composable with Scope Cleanup
import { ref, onMounted, onScopeDispose } from 'vue'

export function useWindowResize() {
  const width = ref(window.innerWidth)
  const height = ref(window.innerHeight)

  const handleResize = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }

  onMounted(() => window.addEventListener('resize', handleResize))
  onScopeDispose(() => window.removeEventListener('resize', handleResize))

  return { width, height }
}

// Enterprise Pinia Setup Store with Full TypeScript Inference
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  const profile = ref<{ id: string; email: string; role: string } | null>(null)
  const token = ref<string | null>(null)

  const isAuthenticated = computed(() => !!token.value)
  const isAdmin = computed(() => profile.value?.role === 'ADMIN')

  async function login(credentials: { email: string; pass: string }) {
    const res = await fetch('/api/login', { method: 'POST', body: JSON.stringify(credentials) })
    const data = await res.json()
    token.value = data.token
    profile.value = data.user
  }

  function logout() {
    profile.value = null
    token.value = null
  }

  return { profile, token, isAuthenticated, isAdmin, login, logout }
})

<!-- Generic Component Definition in Vue 3.3+ -->
<script setup lang="ts" generic="T extends { id: string; label: string }">
defineProps<{
  items: T[]
  selectedId?: string
}>()

const emit = defineEmits<{
  (e: 'select', item: T): void
}>()
</script>

<template>
  <div class="list-box">
    <div
      v-for="item in items"
      :key="item.id"
      :class="{ active: item.id === selectedId }"
      @click="emit('select', item)"
    >
      <slot name="row" :item="item">
        {{ item.label }}
      </slot>
    </div>
  </div>
</template>