Tabs

<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui'


const items = ref<PTabsItem[]>([
  {
    label: 'Account',
    icon: 'i-lucide:user',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    icon: 'i-lucide:lock',
    content: 'This is the password content.'
  }
])
</script>

<template>
  <PTabs :items="items" class="w-full" />
</template>

<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui'


const items = ref<PTabsItem[]>([
  {
    label: 'Account',
    icon: 'i-lucide:user',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    icon: 'i-lucide:lock',
    content: 'This is the password content.'
  }
])
</script>

<template>
  <PTabs :items="items" class="w-full" />
</template>

<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui'


const items = ref<PTabsItem[]>([
  {
    label: 'Account',
    icon: 'i-lucide:user',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    icon: 'i-lucide:lock',
    content: 'This is the password content.'
  }
])
</script>

<template>
  <PTabs :items="items" class="w-full" />
</template>

<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui'


const items = ref<PTabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

<template>
  <PTabs color="neutral" :items="items" class="w-full" />
</template>

<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui'


const items = ref<PTabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

<template>
  <PTabs color="neutral" variant="link" :items="items" class="w-full" />
</template>

<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui'


const items = ref<PTabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

<template>
  <PTabs size="md" variant="pill" :items="items" class="w-full" />
</template>

<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui'


const items = ref<PTabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

<template>
  <PTabs orientation="vertical" variant="pill" :items="items" class="w-full" />
</template>

<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui';
import { useRoute, useRouter } from '#app';
import { computed } from 'vue';

const route = useRoute();
const router = useRouter();

const items: Array<PTabsItem> = [
  {
    label: 'Account',
    value: 'account',
  },
  {
    label: 'Password',
    value: 'password',
  },
];

const active = computed({
  get() {
    return (route.query.tab as string) || 'account';
  },
  set(tab) {
    // Hash is specified here to prevent the page from scrolling to the top
    router.push({
      path: '/docs/pohon/components/tabs',
      query: { tab },
      hash: '#control-active-item',
    });
  },
});
</script>

<template>
  <PTabs
    v-model="active"
    :content="false"
    :items="items"
    class="w-full"
  />
</template>

<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui';

const items: Array<PTabsItem> = [
  {
    label: 'Account',
    icon: 'i-lucide:user',
  },
  {
    label: 'Password',
    icon: 'i-lucide:lock',
  },
];
</script>

<template>
  <PTabs
    :items="items"
    class="w-full"
  >
    <template #content="{ item }">
      <p>This is the {{ item.label }} tab.</p>
    </template>
  </PTabs>
</template>

<script setup lang="ts">
import type { PTabsItem } from 'pohon-ui';
import { reactive } from 'vue';

const items = [
  {
    label: 'Account',
    description: 'Make changes to your account here. Click save when you\'re done.',
    icon: 'i-lucide:user',
    slot: 'account' as const,
  },
  {
    label: 'Password',
    description: 'Change your password here. After saving, you\'ll be logged out.',
    icon: 'i-lucide:lock',
    slot: 'password' as const,
  },
] satisfies Array<PTabsItem>;

const state = reactive({
  name: 'praburangki',
  username: 'praburangki',
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
});
</script>

<template>
  <PTabs
    :items="items"
    variant="link"
    :pohon="{ trigger: 'grow' }"
    class="gap-4 w-full"
  >
    <template #account="{ item }">
      <p class="color-text-muted mb-4">
        {{ item.description }}
      </p>

      <PForm
        :state="state"
        class="flex flex-col gap-4"
      >
        <PFormField
          label="Name"
          name="name"
        >
          <PInput
            v-model="state.name"
            class="w-full"
          />
        </PFormField>
        <PFormField
          label="Username"
          name="username"
        >
          <PInput
            v-model="state.username"
            class="w-full"
          />
        </PFormField>

        <PButton
          label="Save changes"
          type="submit"
          variant="soft"
          class="self-end"
        />
      </PForm>
    </template>

    <template #password="{ item }">
      <p class="color-text-muted mb-4">
        {{ item.description }}
      </p>

      <PForm
        :state="state"
        class="flex flex-col gap-4"
      >
        <PFormField
          label="Current Password"
          name="current"
          required
        >
          <PInput
            v-model="state.currentPassword"
            type="password"
            required
            class="w-full"
          />
        </PFormField>
        <PFormField
          label="New Password"
          name="new"
          required
        >
          <PInput
            v-model="state.newPassword"
            type="password"
            required
            class="w-full"
          />
        </PFormField>
        <PFormField
          label="Confirm Password"
          name="confirm"
          required
        >
          <PInput
            v-model="state.confirmPassword"
            type="password"
            required
            class="w-full"
          />
        </PFormField>

        <PButton
          label="Change password"
          type="submit"
          variant="soft"
          class="self-end"
        />
      </PForm>
    </template>
  </PTabs>
</template>