The svelte-smooth-popover from askingquestions

svelte-smooth-popover's People

Contributors

Stargazers

Watchers

svelte-smooth-popover's Issues

Expose Alignment interface at the top-level

It would be nice to re-expose Alignment interface at the top-level.

// Reexport your entry components here
import Popover, { type Alignment } from './Popover.svelte';

export { Popover, type Alignment };

That way, consumers can import like so:

import type { Alignment } from 'svelte-smooth-popover';

Instead of

import type { Alignment } from 'svelte-smooth-popover/Popover.svelte';

First-Use Challenges

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.

[email protected]

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>