Sortable list of items with nested layout

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "grip-vertical") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Sortable, SortableItem, SortableItemHandle } from "@/components/reui/sortable"
import { Card, CardContent } from "@/components/ui/card"

interface OptionValue {
  id: string
  value: string
}

interface OptionGroup {
  id: string
  name: string
  values: OptionValue[]
}

const optionGroups = ref<OptionGroup[]>([
  {
    id: "1",
    name: "Colors",
    values: [
      { id: "1-1", value: "White" },
      { id: "1-2", value: "Black" },
      { id: "1-3", value: "Grey" },
      { id: "1-4", value: "Green" },
    ],
  },
  {
    id: "2",
    name: "Sizes",
    values: [
      { id: "2-1", value: "Small" },
      { id: "2-2", value: "Medium" },
      { id: "2-3", value: "Large" },
    ],
  },
  {
    id: "3",
    name: "Materials",
    values: [
      { id: "3-1", value: "Cotton" },
      { id: "3-2", value: "Polyester" },
      { id: "3-3", value: "Wool" },
    ],
  },
])

function getParentValue(group: OptionGroup) {
  return group.id
}
function getChildValue(value: OptionValue) {
  return value.id
}
</script>

<template>
  <div class="mx-auto w-full max-w-sm space-y-6 p-6">
    <Sortable
      v-model:value="optionGroups"
      :get-item-value="getParentValue"
      strategy="vertical"
      class="space-y-4"
    >
      <SortableItem v-for="group in optionGroups" :key="group.id" :value="group.id">
        <Card class="p-2">
          <CardContent class="p-0">
            <div class="mb-2 flex items-center gap-2">
              <SortableItemHandle class="text-muted-foreground hover:text-foreground cursor-grab">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical h-4 w-4">
                  <circle cx="9" cy="12" r="1" />
                  <circle cx="9" cy="5" r="1" />
                  <circle cx="9" cy="19" r="1" />
                  <circle cx="15" cy="12" r="1" />
                  <circle cx="15" cy="5" r="1" />
                  <circle cx="15" cy="19" r="1" />
                </svg>
              </SortableItemHandle>
              <h3 class="text-sm font-semibold">{{ group.name }}</h3>
            </div>

            <Sortable
              v-model:value="group.values"
              :get-item-value="getChildValue"
              strategy="vertical"
              class="space-y-2"
            >
              <SortableItem v-for="value in group.values" :key="value.id" :value="value.id">
                <div class="border-border rounded-md flex items-center gap-2 border p-1.5">
                  <SortableItemHandle class="text-muted-foreground hover:text-foreground cursor-grab">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical h-4 w-4">
                      <circle cx="9" cy="12" r="1" />
                      <circle cx="9" cy="5" r="1" />
                      <circle cx="9" cy="19" r="1" />
                      <circle cx="15" cy="12" r="1" />
                      <circle cx="15" cy="5" r="1" />
                      <circle cx="15" cy="19" r="1" />
                    </svg>
                  </SortableItemHandle>
                  <span class="flex-1 text-sm">{{ value.value }}</span>
                </div>
              </SortableItem>
            </Sortable>
          </CardContent>
        </Card>
      </SortableItem>
    </Sortable>
  </div>
</template>