First-Use Challenges

[djamez]

Hello. Thank you for a very comprehensive and potentially easy-to-use Popover package for Svelte.

In attempting to use the component ("svelte": "^4.2.7"), I have encountered some challenges:

• a) vite-plugin-svelte warning: Upon executing npm run dev, the following warning is emitted:

[vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

svelte-smooth-popover@1.0.9

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

• b) Usability: With the following code:

<script lang="ts">
  import { Popover } from 'svelte-smooth-popover';
  import { browser } from '$app/environment';
  $: open = false;
</script>

<button>
  Example
  <Popover
    align="top-center"
    {open}
    showOnClick={true}
    borderRadius={10}
    caretWidth={7}
    offset={10}
    caretCurveAmount={1}
    caretCurveTopAngle={-15}
    caretCurveTopStrength={0.33}
    caretCurveBottomAngle={15}
    caretCurveBottomStrength={0.66}
    alignAnchor="auto"
  >
    <div
      style="border-radius: 10px;"
      class="flex min-w-[200px] items-center justify-center bg-slate-400 p-10 text-black"
    >
      <button class="rounded-md bg-cyan-700 px-2 text-sm text-white" on:click={() => (open = false)}>
                 Done
            </button>
    </div>
  </Popover>
</button>

1. The caret does not display
2. I cannot close the Popover programmatically even when I make the open prop reactive (as in the button inside the div)

Is there something that I am missing?