{"version":3,"file":"Table.stories.mjs","names":["UTable","UTableCell","UTableHeaderCell","UAvatarGroup","UBadge","UTableCellSupText","UButton","UPagination","UTableRow","reactive","meta","title","component","tags","argTypes","headerItems","isChecked","text","prependIcon","undefined","appendIcon","coworkers","Name","profileName","profileText","imagePath","avatarNote","Status","status","color","Email","Role","badges","size","AlternatingFillsTable","render","args","components","setup","template","methods","switchCheckbox"],"sources":["../../src/stories/Table.stories.ts"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/vue3'\nimport { UTableProps } from '../components/UTable/UTable'\nimport {\n  UTable,\n  UTableCell,\n  UTableHeaderCell,\n  UAvatarGroup,\n  UBadge,\n  UTableCellSupText,\n  UButton,\n  UPagination,\n  UTableRow,\n} from '../components'\nimport { ExtractPropTypes } from 'vue'\nimport { reactive } from 'vue'\n\nconst meta: Meta = {\n  title: 'Example/Table',\n  component: UTable,\n  tags: ['autodocs'],\n  argTypes: {\n    //\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof UTable>\n\nconst headerItems: any[] = [\n  {\n    isChecked: false,\n    text: 'Name',\n    prependIcon: undefined,\n    appendIcon: undefined,\n  },\n  {\n    isChecked: undefined,\n    text: 'Status',\n    prependIcon: undefined,\n    appendIcon: '$arrowDown',\n  },\n  {\n    isChecked: undefined,\n    text: 'Role',\n    prependIcon: '$helpCircle',\n    appendIcon: undefined,\n  },\n  {\n    isChecked: undefined,\n    text: 'Email address',\n    prependIcon: undefined,\n    appendIcon: undefined,\n  },\n  {\n    isChecked: undefined,\n    text: 'Teams',\n    prependIcon: undefined,\n    appendIcon: undefined,\n  },\n  {\n    isChecked: undefined,\n    text: undefined,\n    prependIcon: undefined,\n    appendIcon: undefined,\n  },\n]\n\nconst coworkers: any[] = reactive([\n  {\n    Name: {\n      profileName: 'Olivia Rhye',\n      profileText: '@olivia',\n      imagePath: '@/components/Table/avatars/Avatar1.svg',\n      avatarNote: '',\n    },\n    Status: {\n      status: 'Active',\n      color: 'success',\n    },\n    Email: 'olivia@untitledui.com',\n    Role: 'Product Designer',\n  },\n  {\n    Name: {\n      profileName: 'Phoenix Baker',\n      profileText: '@phoenix',\n      imagePath: '@/components/Table/avatars/Avatar2.svg',\n      avatarNote: '',\n    },\n    Status: {\n      status: 'Active',\n      color: 'success',\n    },\n    Email: 'phoenix@untitledui.com',\n    Role: 'Product Manager',\n  },\n  {\n    Name: {\n      profileName: 'Lana Steiner',\n      profileText: '@lana',\n      imagePath: '@/components/Table/avatars/Avatar3.svg',\n      avatarNote: '',\n    },\n    Status: {\n      status: 'Active',\n      color: 'success',\n    },\n    Email: 'lana@untitledui.com',\n    Role: 'Frontend Developer',\n  },\n  {\n    Name: {\n      profileName: 'Demi Wilkinson',\n      profileText: '@demi',\n      imagePath: '@/components/Table/avatars/Avatar4.svg',\n      avatarNote: '',\n    },\n    Status: {\n      status: 'Active',\n      color: 'success',\n    },\n    Email: 'demi@untitledui.com',\n    Role: 'Backend Developer',\n  },\n  {\n    Name: {\n      profileName: 'Candice Wu',\n      profileText: '@candice',\n      imagePath: '',\n      avatarNote: 'CW',\n    },\n    Status: {\n      status: 'Active',\n      color: 'success',\n    },\n    Email: 'candice@untitledui.com',\n    Role: 'Fullstack Developer',\n  },\n])\n\nconst badges: any[] = [\n  { text: 'Design', color: 'primary', size: 'sm' },\n  { text: 'Product', color: 'blue', size: 'sm' },\n  { text: 'Marketing', color: 'indigo', size: 'sm' },\n  { text: 'Label', color: 'indigo', size: 'sm' },\n  { text: 'Label', color: 'indigo', size: 'sm' },\n  { text: 'Label', color: 'indigo', size: 'sm' },\n  { text: 'Label', color: 'indigo', size: 'sm' },\n]\n\nexport const AlternatingFillsTable: Story = {\n  render: (args: ExtractPropTypes<UTableProps>) => ({\n    components: {\n      UTable,\n      UTableRow,\n      UPagination,\n      UTableCell,\n      UTableHeaderCell,\n      UAvatarGroup,\n      UBadge,\n      UTableCellSupText,\n      UButton,\n    },\n    setup() {\n      return { args, headerItems, coworkers, badges }\n    },\n    template: `<UTable class=\"overflow-hidden\">\n    <template #header>\n      <h1 class=\"w-full text-center mb-3\">HEADER</h1>\n    </template>\n    <template #tableHeader>\n    <UTableRow height=\"44\">\n      <UTableHeaderCell\n        v-for=\"(headerItem, index) in headerItems\" :key=\"index\"\n        :text=\"headerItem.text\"\n        color=\"gray\"\n        align=\"left\"\n        :isChecked=\"headerItem.isChecked\"\n        :appendIcon=\"headerItem.appendIcon\"\n        :prependIcon=\"headerItem.prependIcon\"\n        :width=\"index === 4 ? '23%' : index === 1 ? '11%' : ''\"\n        @change=\"switchCheckbox\"\n      ></UTableHeaderCell>\n      </UTableRow>\n    </template>\n    <template #tableContent>\n      <UTableRow \n        v-for=\"(coworker, index) in coworkers\"\n        :divider=\"index % 2 !== 0 ? 'alternating fills' : 'divider line'\"\n        :key=\"index\"\n        @mouseenter=\"coworker.isHovered = true\"\n        @mouseleave=\"coworker.isHovered = false\">\n          <UTableCell :class=\"index === coworkers.length - 1 ? 'border-b border-error-600' : '' \">\n            <UAvatarGroup\n              :profileName=\"coworker.Name.profileName\"\n              :profileText=\"coworker.Name.profileText\"\n              :avatar-note=\"coworker.Name.avatarNote\"\n            ></UAvatarGroup>\n          </UTableCell>\n\n          <UTableCell>\n            <UBadge :color=\"coworker.Status.color\">{{ coworker.Status.status }}</UBadge>\n          </UTableCell>\n\n          <UTableCell>\n            <UTableCellSupText>{{ coworker.Role }}</UTableCellSupText>\n          </UTableCell>\n\n          <UTableCell>\n            <UTableCellSupText>{{ coworker.Email }}</UTableCellSupText>\n          </UTableCell>\n\n          <UTableCell :badges=\"badges\"></UTableCell>\n\n          <UTableCell>\n            <UButton\n              size=\"md\"\n              type=\"Secondary Gray\"\n              prependIcon=\"trash1\"\n            ></UButton>\n            <UButton\n              size=\"md\"\n              type=\"Secondary Gray\"\n              prependIcon=\"edit1\"\n            ></UButton>\n          </UTableCell>\n      </UTableRow>\n    </template>\n    <template #footer>\n      <div class=\"py-3 px-6\">\n        <UPagination type=\"minimal\" pagesCount=\"5\"></UPagination>\n      </div>\n    </template>\n    </UTable>`,\n    methods: {\n      switchCheckbox() {\n        if (args.isChecked !== undefined) {\n          args.isChecked = !args.isChecked\n        }\n      },\n    },\n  }),\n  args: {} as UTableProps,\n}\n"],"mappings":"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"}