Vue to Svelte transition

[greendesertsnow]

Vue refs and v-model

<script setup>
  import { ref } from 'vue'
  import { Switch } from '@headlessui/vue'

  const enabled = ref(false)
</script>
 
<template>
  <Switch v-model='checked'>
  </Switch>
</template>
}

becomes

<script>
  import { Switch } from '@rgossiaux/svelte-headlessui'
  let enabled = false;
</script>

<Switch checked={enabled} on:change={(e) => enabled = e.detail}>
</Switch>

Vue Event Handlers

<script setup>
  import { ref } from 'vue'
  import {
    Dialog,
    DialogOverlay,
    DialogTitle,
    DialogDescription,
  } from '@headlessui/vue'

  const isOpen = ref(true)

  function setIsOpen(value) {
    isOpen.value = value
  }
</script>

<template>
   <Dialog :open="isOpen" @close="setIsOpen">
    <DialogOverlay />

    <DialogTitle>Deactivate account</DialogTitle>
    <DialogDescription>
      This will permanently deactivate your account
    </DialogDescription>

    <p>
      Are you sure you want to deactivate your account? All of your data will be
      permanently removed. This action cannot be undone.
    </p>

    <button @click="setIsOpen(false)">Deactivate</button>
    <button @click="setIsOpen(false)">Cancel</button>
  </Dialog>
</template>

becomes

  import {
    Dialog,
    DialogOverlay,
    DialogTitle,
    DialogDescription,
  } from "@rgossiaux/svelte-headlessui";
  let isOpen = true;
</script>

<Dialog open={isOpen} on:close={() => (isOpen = false)}>
  <DialogOverlay />

  <DialogTitle>Deactivate account</DialogTitle>
  <DialogDescription>
    This will permanently deactivate your account
  </DialogDescription>

  <p>
    Are you sure you want to deactivate your account? All of your data will be
    permanently removed. This action cannot be undone.
  </p>

  <button on:click={() => (isOpen = false)}>Deactivate</button>
  <button on:click={() => (isOpen = false)}>Cancel</button>
</Dialog>

and

  <Listbox v-model="selectedPerson">
  </Listbox>

becomes

<Listbox value={selectedPerson} on:change={(e) => selectedPerson = e.detail}>
</Listbox>

###Render Props

<template>
  <Popover>
    <PopoverButton>Solutions</PopoverButton>
    <PopoverPanel v-slot="{ close }">
      <button @click="accept(close)">Read and accept</button>
    </PopoverPanel>
  </Popover>
</template>

<script setup>
  async function accept(close) {
    await fetch('/accept-terms', { method: 'POST' })
    close()
  }
</script>

becomes

  <Popover>
    <PopoverButton>Solutions</PopoverButton>
      <PopoverPanel let:close>
        <button
          on:click={async () => {
            await fetch('/accept-terms', { method: 'POST' })
            close()
          }}
        >
          Read and accept
        </button>
      </PopoverPanel>
  </Popover>

###Conditional rendering

<template>
  <Disclosure v-slot="{ open }">
    <DisclosureButton>Is team pricing available?</DisclosureButton>

    <div v-show="open">
      <!--
        Using `static`, `DisclosurePanel` is always rendered and
        ignores the `open` state.
      -->
      <DisclosurePanel static>
        <!-- ... -->
      </DisclosurePanel>
    </div>
  </Disclosure>
</template>

becomes

<Disclosure let:open>
  <DisclosureButton>Is team pricing available?</DisclosureButton>

  {#if open}
    <div>
        <!-- Using `static`, `DisclosurePanel` is always rendered and -->
        <!-- ignores the `open` state. -->
      <DisclosurePanel static> <!-- ... --></DisclosurePanel>
    </div>
  {/if}
</Disclosure>

###Iteration / mapping

<template>
  <Listbox v-model="selectedPerson">
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
    <ListboxOptions>
      <ListboxOption
        v-for="person in people"
        :key="person"
        :value="person"
        :disabled="person.unavailable"
      >
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

becomes

<Listbox value={selectedPerson} on:change={(e) => selectedPerson = e.detail}>
  <ListboxButton>{selectedPerson.name}</ListboxButton>
  <ListboxOptions>
    {#each people as person (person.id)}
      <ListboxOption
        value={person}
        disabled={person.unavailable}
      >
        {person.name}
      </ListboxOption>
    {/each}
  </ListboxOptions>
</Listbox>

Using dynamic component

[greendesertsnow]

I don't understand why we're not using bind:value instead of on:change.
And can you guys please comment on Using dynamic component. What's that all about? I'm new to Svelte.