CODEWITHSUNDEEP
javascriptsvelteflowbite-svelte
Viewed
Viewed

Reputation: 1323

How to get exported value of svelte component?

The library flowbite-svelte has component Popover with open property. The property changing by click on button. In order to control external event listener (no in example) I need to know current value of open property. How to get it?

I tried to use open= and bind:open=, but buth undefined when button clicked.

Online REPL

<script>
import { onMount } from 'svelte'
import { Popover } from 'flowbite-svelte'

let popover
let isOpen

onMount(() => {
  popover.$on('show', () => {
    console.log(popover.open) // undefined
    console.log(isOpen) // undefined
  })
})
</script>

<button>Click</button>

<Popover
  <!-- open={isOpen} or bind:open={isOpen} -->
  bind:this={popover}
  trigger="click">
    Some content
</Popover>

Upvotes: 0

Views: 200

Answers (3)

taiff
taiff

Reputation: 89

Use the 'open' property of Popover.

Here are the full list of properties for Popover including inherited ones:

interface $$Props extends ComponentProps<Popper> {
  title?: string;
  defaultClass?: string;
}

interface $$Props extends ComponentProps<Frame> {
  activeContent?: boolean;
  arrow?: boolean;
  offset?: number;
  placement?: Placement;
  trigger?: 'hover' | 'click' | 'focus';
  triggeredBy?: string;
  reference?: string;
  strategy?: 'absolute' | 'fixed';
  open?: boolean;
  yOnly?: boolean;
}

See Popover interface and popper interface for the above.

Upvotes: 0

Viewed
Viewed

Reputation: 1323

I found solution via debugging. When show event occurs, callback has this with popover instance. Inside this.$$.ctx stored values by index from this.$$.props.

<script>
import { onMount } from 'svelte'
import { Popover } from 'flowbite-svelte'

let popover

onMount(() => {
  popover.$on('show', onPopoverOpenChanged)
})

function onPopoverOpenChanged() {
  let indexPropOpen = this.$$.props.open
  let isOpen = this.$$.ctx[indexPropOpen]
  if (isOpen) {
    
  } else {
    
  }
}
</script>

<button>Click</button>

<Popover
  bind:this={popover}
  trigger="click">
    Some content
</Popover>

Upvotes: 1

brunnerh
brunnerh

Reputation: 185280

There is no property for that, and there also is only a show event, no event for closing.

That being the case, there currently is no proper way of getting the state. You could maybe query the DOM, but this functionality should be part of the component.

Maybe open an issue if there is none already.

Upvotes: 1

Related Questions