useAisFloater

Testing

Mounted

<template>
  <div class="grid gap-24">
    <div class="flex gap-8 items-center">
      <div>
        <AisToggle v-model="showTest" label="Mounted"/>
      </div>
      <div v-if="showTest">
        <AisButton ref="btn2" variant="secondary" keep-focus>Component</AisButton>
        <AisTooltip :target="btn2" :content="content" triggers="click"></AisTooltip>
      </div>
      <div>
        <AisInput v-model="content" />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, onUpdated, onBeforeUpdate } from 'vue'
  import {AisToggle} from '@ais-public/ais-components'
  import {AisButton} from '@ais-public/ais-components'
  import {AisTooltip} from '@ais-public/ais-components'
  import {AisInput} from '@ais-public/ais-components'
  import {AisAddon} from '@ais-public/ais-components'
  import {AisIcon} from '@ais-public/ais-components'
  import {useAisFloater} from '@ais-public/ais-components'
  import {useAisPopover} from '@ais-public/ais-components'
  import {useAisTooltip} from '@ais-public/ais-components'
  import {vTooltip} from '@ais-public/ais-components'

  const test = ref(undefined)
  const showTest = ref(true)

  const options = ref({
    //triggers: 'focus',
    // allowHtml: false,
    // content: 'Hello, world'
    allowHtml: true,
    content: '<em>Hello</em> <strong>World</strong>'
  })

  const btn2 = ref(undefined)
  const addon = ref(undefined)

  const btnOptions = ref({
    triggers: 'click',
    // allowHtml: false,
    // content: 'Hello, world'
    //placement: 'bottom',
    allowHtml: true,
    content: '<em>Hello</em> <strong>Button</strong>',
    variant: 'secondary',
    placement: 'bottom',
  })

  const content = ref('Hello, content')

  //const btnFloater = useAisTooltip(btn, btnOptions)
  // console.log('BTN FLOATER', btnFloater)


  const showPops = ref(true)

  // const popBtn = ref(undefined)
  // const popBtnFloater = usePop(popBtn, btnOptions)

  // const popBtn2 = ref(undefined)
  // const popBtnFloater2 = useAisPopover(popBtn2, { triggers: 'click', title: 'Title', content: 'Popover'})


  onMounted(() => {
    //console.log('UseAisFloaterExample onMounted')
  })

  onUpdated(() => {
    //console.log('UseAisFloaterExample onUpdated', btn2.value)
  })
</script>

Reposition

Box

<template>
  <AisButtonBar>
    <AisBox
      v-for="x in count"
      class="px-8 py-2"
    >
      Box
    </AisBox>
    <AisIconButton
        ref="ibttn"
        icon="options"
        label="Increment count" keep-focus
        class="p-1.5 -ml-1.5"
    />
    <AisPopover
        ref="pop"
        :target="ibttn"
        triggers="click"
        placement="bottom"
        :offset="15"
        arrow
    >
      <div class="grid gap-2">
        <AisIconButton
            label="Add Box"
            icon="new"
            @click="addBox"
        >
          Increment
        </AisIconButton>
        <AisIconButton
            label="Remove Box"
            icon="delete"
            @click="removeBox"
        >
          Decrement
        </AisIconButton>
      </div>
    </AisPopover>
  </AisButtonBar>
</template>

<script setup>
  import {ref} from 'vue'
  import {AisButtonBar} from '@ais-public/ais-components'
  import {AisBox} from '@ais-public/ais-components'
  import {AisIconButton} from '@ais-public/ais-components'
  import {AisPopover} from '@ais-public/ais-components'

  const count = ref(1)
  const ibttn = ref()
  const pop = ref()

  /**
   * Since we switched to updating position using an interva,
   * we no longer need to manually update the popover's position
   * on the component events.
   */

  const addBox = () => {
    console.log('Add box', pop.value)
    count.value++
    //pop.value.position()
  }

  const removeBox = () => {
    console.log('Remove box', pop.value)
    count.value--
    //pop.value.position()
  }
</script>