<script lang="ts"></script>

<script setup lang="tsx">
import { openConfirm, openDialog, openToast } from './fns';
</script>

<template>
  <div class="primevue py-4 flex items-start flex-wrap gap-6">
    <ProgressSpinner class="w-6 h-6 m-0" />
    <FloatLabel>
      <InputText default-value="DEFAULT_VALUE" id="username" />
      <label for="username">Username</label>
    </FloatLabel>

    <FloatLabel>
      <Select
        :options="[
          { name: '纽约', code: 'NY' },
          { name: '罗马', code: 'RM' },
          { name: '伦敦', code: 'LDN' },
          { name: '伊斯坦布尔', code: 'IST' },
          { name: '巴黎', code: 'PRS' },
        ]"
        optionLabel="name"
        class="min-w-[200px]"
      />
      <label>SELECT</label>
    </FloatLabel>

    <FloatLabel w-full>
      <UploadDemo />
      <label>FileUpload</label>
    </FloatLabel>

    <FloatLabel>
      <FileUpload name="demo[]" url="/api/upload" :maxFileSize="1000000" />
      <label>FileUpload</label>
    </FloatLabel>

    <FloatLabel>
      <DatePicker showButtonBar dateFormat="dd/mm/yy" :default-value="new Date()" />
      <label>DatePicker</label>
    </FloatLabel>

    <Button @click="openToast">提示服务</Button>
    <Button @click="openDialog">对话框服务</Button>
    <Button @click="openConfirm">确认服务</Button>
  </div>
</template>
