Indicator

<dv-indicator>
  <dv-indicator-item>
    <dv-badge variant="secondary" />
  </dv-indicator-item>
  <div class="grid w-32 h-32 dv-bgbase300 place-items-center"> content </div>
</dv-indicator>
vue

<dv-indicator>
  <dv-indicator-item>
    <dv-badge variant="primary">New</dv-badge>
  </dv-indicator-item>
  <div class="grid w-32 h-32 dv-bgbase300 place-items-center"> content </div>
</dv-indicator>
vue

<dv-indicator>
  <dv-indicator-item>
    <dv-badge variant="secondary">99+</dv-badge>
  </dv-indicator-item>
  <dv-button>INBOX</dv-button>
</dv-indicator>
vue

<dv-indicator>
  <dv-indicator-item>
    <dv-badge variant="secondary">Typing...</dv-badge>
  </dv-indicator-item>
  <dv-avatar src="https://placeimg.com/160/160/people" :size="80" />
</dv-indicator>
vue

<dv-tabs variant="lifted" modelValue="1">
  <dv-tab-panel name="1">
    <template #title>
      <dv-indicator>
        <dv-indicator-item>
          <dv-badge variant="secondary">1</dv-badge>
        </dv-indicator-item>
        <a>Tiny 1</a>
      </dv-indicator>
    </template>
  </dv-tab-panel>
  <dv-tab-panel name="2" title="Tiny2" />
  <dv-tab-panel name="3" title="Tiny3" />
</dv-tabs>
vue

<dv-indicator>
  <dv-indicator-item>
    <dv-badge>Required</dv-badge>
  </dv-indicator-item>
  <dv-input placeholder="Your email address" />
</dv-indicator>
vue

<dv-indicator>
  <dv-indicator-item placement="bottom-end">
    <dv-button variant="primary">Apply</dv-button>
  </dv-indicator-item>
  <dv-card
    class="dv-bgbase100"
    bordered
    title="Job Title"
    description="Rerum reiciendis beatae tenetur excepturi"
  ></dv-card>
</dv-indicator>
vue

import { Badge } from 'daisyui-vue';

export default {
  setup: () => {
    const vs = 'top-middle-bottom'.split('-');
    const hs = 'start-center-end'.split('-');
    const ls = [];
    vs.forEach((v) => {
      hs.forEach((h) => {
        ls.push(v + '-' + h);
      });
    });
    return () => (
      <dv-indicator>
        {ls.map((p) => (
          <dv-indicator-item
            key={p}
            placement={p}
            tag={Badge}
            variant="secondary"
          >
            {p}
          </dv-indicator-item>
        ))}
        <div class="grid w-80 h-32 dv-bgbase300 place-items-center">
          content
        </div>
      </dv-indicator>
    );
  },
};
tsx