Data Display Components

/**
 * Enterprise-grade data table with advanced features
 */
import DataTable from "primevue/datatable";
import Column from "primevue/column";

interface DataTableProps extends BaseComponentProps {
  value?: any[];
  dataKey?: string;
  rows?: number;
  first?: number;
  totalRecords?: number;
  paginator?: boolean;
  paginatorPosition?: "top" | "bottom" | "both";
  alwaysShowPaginator?: boolean;
  paginatorTemplate?: string;
  pageLinkSize?: number;
  rowsPerPageOptions?: number[];
  currentPageReportTemplate?: string;
  lazy?: boolean;
  loading?: boolean;
  loadingIcon?: string;
  sortField?: string;
  sortOrder?: number;
  defaultSortOrder?: number;
  multiSortMeta?: DataTableSortMeta[];
  sortMode?: "single" | "multiple";
  removableSort?: boolean;
  filters?: DataTableFilterMeta;
  filterDisplay?: "menu" | "row";
  filterLocale?: string;
  selection?: any | any[];
  selectionMode?: "single" | "multiple" | "checkbox" | "radiobutton";
  compareSelectionBy?: "equals" | "deepEquals";
  metaKeySelection?: boolean;
  contextMenu?: boolean;
  contextMenuSelection?: any;
  selectAll?: boolean;
  rowHover?: boolean;
  csvSeparator?: string;
  exportFilename?: string;
  exportFunction?: Function;
  resizableColumns?: boolean;
  columnResizeMode?: "fit" | "expand";
  reorderableColumns?: boolean;
  expandedRows?: any[];
  expandedRowIcon?: string;
  collapsedRowIcon?: string;
  rowGroupMode?: "subheader" | "rowspan";
  groupRowsBy?: string;
  expandableRowGroups?: boolean;
  expandedRowGroups?: any[];
  stateStorage?: "session" | "local";
  stateKey?: string;
  editMode?: "cell" | "row";
  editingRows?: any[];
  rowClass?: Function;
  rowStyle?: Function;
  scrollable?: boolean;
  scrollDirection?: "vertical" | "horizontal" | "both";
  scrollHeight?: string;
  virtualScrollerOptions?: VirtualScrollerOptions;
  frozenColumns?: any[];
  frozenValue?: any[];
  responsiveLayout?: "scroll" | "stack";
  breakpoint?: string;
  showGridlines?: boolean;
  stripedRows?: boolean;
  tableStyle?: any;
  tableClass?: string;
  size?: "small" | "large";
}

<template>
  <DataTable 
    :value="products" 
    :paginator="true" 
    :rows="10"
    :filters="filters"
    filterDisplay="menu"
    :loading="loading"
    dataKey="id"
    :globalFilterFields="['name', 'category', 'representative.name']"
  >
    <template #header>
      <div class="flex justify-content-between">
        <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined />
        <IconField iconPosition="left">
          <InputIcon>
            <i class="pi pi-search" />
          </InputIcon>
          <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
        </IconField>
      </div>
    </template>
    
    <Column field="name" header="Name" sortable style="min-width: 12rem">
      <template #body="{ data }">
        {{ data.name }}
      </template>
      <template #filter="{ filterModel }">
        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
      </template>
    </Column>
    
    <Column field="category" header="Category" sortable filterMenuStyle="width: 14rem">
      <template #body="{ data }">
        <Tag :value="data.category" :severity="getSeverity(data)" />
      </template>
      <template #filter="{ filterModel }">
        <MultiSelect 
          v-model="filterModel.value" 
          :options="categories" 
          placeholder="Any" 
          class="p-column-filter" 
        />
      </template>
    </Column>
    
    <Column field="price" header="Price" sortable dataType="numeric">
      <template #body="{ data }">
        {{ formatCurrency(data.price) }}
      </template>
    </Column>
  </DataTable>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';

const products = ref([]);
const filters = ref({
  'global': { value: null, matchMode: FilterMatchMode.CONTAINS },
  'name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
  'category': { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
});
</script>

/**
 * Column definition for DataTable
 */
import Column from "primevue/column";

interface ColumnProps extends BaseComponentProps {
  columnKey?: string;
  field?: string;
  sortField?: string;
  filterField?: string;
  dataType?: "text" | "numeric" | "date";
  sortable?: boolean;
  header?: string;
  footer?: string;
  style?: any;
  class?: string;
  headerStyle?: any;
  headerClass?: string;
  bodyStyle?: any;
  bodyClass?: string;
  footerStyle?: any;
  footerClass?: string;
  showFilterMenu?: boolean;
  showFilterOperator?: boolean;
  showClearButton?: boolean;
  showApplyButton?: boolean;
  showFilterMatchModes?: boolean;
  showAddButton?: boolean;
  filterMatchModeOptions?: FilterMatchModeOptions[];
  maxConstraints?: number;
  excludeGlobalFilter?: boolean;
  filterHeaderClass?: string;
  filterHeaderStyle?: any;
  filterMenuClass?: string;
  filterMenuStyle?: any;
  selectionMode?: "single" | "multiple";
  expander?: boolean;
  colspan?: number;
  rowspan?: number;
  rowReorder?: boolean;
  rowReorderIcon?: string;
  reorderableColumn?: boolean;
  rowEditor?: boolean;
  frozen?: boolean;
  alignFrozen?: "left" | "right";
  exportable?: boolean;
  exportHeader?: string;
  exportFooter?: string;
  filterMatchMode?: string;
  hidden?: boolean;
}

/**
 * Tree structure in table format
 */
import TreeTable from "primevue/treetable";

interface TreeTableProps extends BaseComponentProps {
  value?: TreeNode[];
  expandedKeys?: object;
  selectionKeys?: any;
  selectionMode?: "single" | "multiple" | "checkbox";
  metaKeySelection?: boolean;
  rows?: number;
  first?: number;
  totalRecords?: number;
  paginator?: boolean;
  paginatorPosition?: "top" | "bottom" | "both";
  alwaysShowPaginator?: boolean;
  paginatorTemplate?: string;
  pageLinkSize?: number;
  rowsPerPageOptions?: number[];
  currentPageReportTemplate?: string;
  lazy?: boolean;
  loading?: boolean;
  loadingIcon?: string;
  rowHover?: boolean;
  autoLayout?: boolean;
  sortField?: string;
  sortOrder?: number;
  defaultSortOrder?: number;
  multiSortMeta?: TreeTableSortMeta[];
  sortMode?: "single" | "multiple";
  removableSort?: boolean;
  filters?: object;
  filterMode?: "lenient" | "strict";
  filterLocale?: string;
  resizableColumns?: boolean;
  columnResizeMode?: "fit" | "expand";
  indentation?: number;
  showGridlines?: boolean;
  scrollable?: boolean;
  scrollDirection?: "vertical" | "horizontal" | "both";
  scrollHeight?: string;
  frozenColumns?: any[];
  responsiveLayout?: "scroll" | "stack";
  size?: "small" | "large";
}

/**
 * Hierarchical tree component with full feature set
 */
import Tree from "primevue/tree";

interface TreeProps extends BaseComponentProps {
  value?: TreeNode[];
  expandedKeys?: object;
  selectionKeys?: any;
  selectionMode?: "single" | "multiple" | "checkbox";
  metaKeySelection?: boolean;
  loading?: boolean;
  loadingIcon?: string;
  filter?: boolean;
  filterBy?: string;
  filterMode?: "lenient" | "strict";
  filterPlaceholder?: string;
  filterLocale?: string;
  scrollHeight?: string;
  level?: number;
}

<template>
  <Tree 
    :value="nodes" 
    :expandedKeys="expandedKeys"
    :selectionKeys="selectedKeys"
    selectionMode="checkbox"
    :filter="true"
    filterPlaceholder="Search..."
    class="w-full md:w-30rem"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Tree from 'primevue/tree';

const nodes = ref([]);
const expandedKeys = ref({});
const selectedKeys = ref({});

onMounted(() => {
  nodes.value = [
    {
      key: '0',
      label: 'Documents',
      data: 'Documents Folder',
      icon: 'pi pi-fw pi-inbox',
      children: [
        {
          key: '0-0',
          label: 'Work',
          data: 'Work Folder',
          icon: 'pi pi-fw pi-cog',
          children: [
            { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
            { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
          ]
        }
      ]
    }
  ];
});
</script>

/**
 * Reorderable list component
 */
import OrderList from "primevue/orderlist";

interface OrderListProps extends BaseComponentProps {
  modelValue?: any[];
  selection?: any[];
  dataKey?: string;
  listStyle?: any;
  responsive?: boolean;
  breakpoint?: string;
  stripedRows?: boolean;
  showSourceControls?: boolean;
  showTargetControls?: boolean;
  metaKeySelection?: boolean;
  autoOptionFocus?: boolean;
  focusOnHover?: boolean;
  tabindex?: number;
}

/**
 * Dual list for item transfer between collections
 */
import PickList from "primevue/picklist";

interface PickListProps extends BaseComponentProps {
  modelValue?: any[][];
  selection?: any[][];
  dataKey?: string;
  listStyle?: any;
  metaKeySelection?: boolean;
  responsive?: boolean;
  breakpoint?: string;
  stripedRows?: boolean;
  showSourceControls?: boolean;
  showTargetControls?: boolean;
  targetHeader?: string;
  sourceHeader?: string;
  autoOptionFocus?: boolean;
  focusOnHover?: boolean;
  moveUpButtonProps?: object;
  moveTopButtonProps?: object;
  moveDownButtonProps?: object;
  moveBottomButtonProps?: object;
  moveToTargetProps?: object;
  moveAllToTargetProps?: object;
  moveToSourceProps?: object;
  moveAllToSourceProps?: object;
  tabindex?: number;
}

/**
 * Standalone pagination component
 */
import Paginator from "primevue/paginator";

interface PaginatorProps extends BaseComponentProps {
  totalRecords?: number;
  rows?: number;
  first?: number;
  pageLinkSize?: number;
  rowsPerPageOptions?: number[];
  template?: string;
  currentPageReportTemplate?: string;
  alwaysShow?: boolean;
}

/**
 * Virtual scrolling for performance with large datasets
 */
import VirtualScroller from "primevue/virtualscroller";

interface VirtualScrollerProps extends BaseComponentProps {
  items?: any[];
  itemSize?: number | number[];
  scrollHeight?: string;
  scrollWidth?: string;
  orientation?: "vertical" | "horizontal" | "both";
  numToleratedItems?: number;
  delay?: number;
  resizeDelay?: number;
  lazy?: boolean;
  disabled?: boolean;
  loaderDisabled?: boolean;
  columns?: any[];
  loading?: boolean;
  autoSize?: boolean;
  showSpacer?: boolean;
  showLoader?: boolean;
  tabindex?: number;
  inline?: boolean;
  step?: number;
}

/**
 * Chart.js integration component (requires chart.js dependency)
 */
import Chart from "primevue/chart";

interface ChartProps extends BaseComponentProps {
  type?: string;
  data?: object;
  options?: object;
  plugins?: any[];
  width?: number;
  height?: number;
  canvasProps?: object;
}

<template>
  <Chart type="bar" :data="chartData" :options="chartOptions" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Chart from 'primevue/chart';

const chartData = ref({});
const chartOptions = ref({});

onMounted(() => {
  chartData.value = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: '#42A5F5',
        data: [65, 59, 80, 81, 56, 55, 40]
      }
    ]
  };
  
  chartOptions.value = {
    responsive: true,
    maintainAspectRatio: false
  };
});
</script>

/**
 * Organization chart for hierarchical structures
 */
import OrganizationChart from "primevue/organizationchart";

interface OrganizationChartProps extends BaseComponentProps {
  value?: TreeNode;
  selectionKeys?: object;
  selectionMode?: "single" | "multiple";
  collapsible?: boolean;
  collapsedKeys?: object;
}

/**
 * Timeline component for chronological events
 */
import Timeline from "primevue/timeline";

interface TimelineProps extends BaseComponentProps {
  value?: any[];
  align?: "left" | "right" | "alternate" | "top" | "bottom";
  layout?: "vertical" | "horizontal";
  dataKey?: string;
}

<template>
  <Timeline :value="events" align="alternate">
    <template #marker="slotProps">
      <span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}">
        <i :class="slotProps.item.icon"></i>
      </span>
    </template>
    <template #content="slotProps">
      <Card>
        <template #title>
          {{ slotProps.item.status }}
        </template>
        <template #subtitle>
          {{ slotProps.item.date }}
        </template>
        <template #content>
          <p>{{ slotProps.item.description }}</p>
        </template>
      </Card>
    </template>
  </Timeline>
</template>

<script setup>
import { ref } from 'vue';
import Timeline from 'primevue/timeline';
import Card from 'primevue/card';

const events = ref([
  { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
  { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
  { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
  { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
]);
</script>

/**
 * Flexible data display with multiple layout options
 */
import DataView from "primevue/dataview";

interface DataViewProps extends BaseComponentProps {
  value?: any[];
  layout?: "list" | "grid";
  rows?: number;
  first?: number;
  totalRecords?: number;
  paginator?: boolean;
  paginatorPosition?: "top" | "bottom" | "both";
  alwaysShowPaginator?: boolean;
  paginatorTemplate?: string;
  pageLinkSize?: number;
  rowsPerPageOptions?: number[];
  currentPageReportTemplate?: string;
  sortField?: string;
  sortOrder?: number;
  lazy?: boolean;
  loading?: boolean;
  loadingIcon?: string;
  dataKey?: string;
  emptyMessage?: string;
}

/**
 * Carousel component for images and content with navigation
 */
import Carousel from "primevue/carousel";

interface CarouselProps extends BaseComponentProps {
  value?: any[];
  page?: number;
  numVisible?: number;
  numScroll?: number;
  responsiveOptions?: CarouselResponsiveOption[];
  orientation?: "horizontal" | "vertical";
  verticalViewPortHeight?: string;
  containerClass?: string;
  indicatorsClass?: string;
  contentClass?: string;
  circular?: boolean;
  autoplayInterval?: number;
  showNavigators?: boolean;
  showIndicators?: boolean;
}

interface CarouselResponsiveOption {
  breakpoint: string;
  numVisible: number;
  numScroll: number;
}

<template>
  <Carousel
    :value="products"
    :numVisible="3"
    :numScroll="1"
    :responsiveOptions="responsiveOptions"
    circular
    :autoplayInterval="3000"
  >
    <template #item="slotProps">
      <div class="product-item">
        <img :src="slotProps.data.image" :alt="slotProps.data.name" />
        <h4>{{ slotProps.data.name }}</h4>
        <p>${{ slotProps.data.price }}</p>
      </div>
    </template>
  </Carousel>
</template>

<script setup>
import { ref } from 'vue';
import Carousel from 'primevue/carousel';

const products = ref([
  { id: 1, name: 'Product 1', image: '/images/product1.jpg', price: 99 },
  { id: 2, name: 'Product 2', image: '/images/product2.jpg', price: 149 },
  { id: 3, name: 'Product 3', image: '/images/product3.jpg', price: 199 }
]);

const responsiveOptions = ref([
  { breakpoint: '1024px', numVisible: 3, numScroll: 1 },
  { breakpoint: '768px', numVisible: 2, numScroll: 1 },
  { breakpoint: '560px', numVisible: 1, numScroll: 1 }
]);
</script>

/**
 * Advanced image gallery with comprehensive features
 */
import Galleria from "primevue/galleria";

interface GalleriaProps extends BaseComponentProps {
  value?: any[];
  activeIndex?: number;
  fullScreen?: boolean;
  visible?: boolean;
  numVisible?: number;
  responsiveOptions?: GalleriaResponsiveOption[];
  showItemNavigators?: boolean;
  showThumbnailNavigators?: boolean;
  showItemNavigatorsOnHover?: boolean;
  changeItemOnIndicatorHover?: boolean;
  circular?: boolean;
  autoPlay?: boolean;
  transitionInterval?: number;
  showThumbnails?: boolean;
  thumbnailsPosition?: "bottom" | "top" | "left" | "right";
  verticalThumbnailViewPortHeight?: string;
  showIndicators?: boolean;
  showIndicatorsOnItem?: boolean;
  indicatorsPosition?: "bottom" | "top" | "left" | "right";
  baseZIndex?: number;
  maskClass?: string;
  containerStyle?: any;
  containerClass?: string;
}

interface GalleriaResponsiveOption {
  breakpoint: string;
  numVisible: number;
}

/**
 * Image component with preview and zoom capabilities
 */
import Image from "primevue/image";

interface ImageProps extends BaseComponentProps {
  preview?: boolean;
  class?: string;
  style?: any;
  imageStyle?: any;
  imageClass?: string;
  previewButtonProps?: object;
  indicatorIcon?: string;
  previewIcon?: string;
  closeIcon?: string;
  rotateRightIcon?: string;
  rotateLeftIcon?: string;
  zoomInIcon?: string;
  zoomOutIcon?: string;
  zoomImageStyle?: any;
  zoomImageClass?: string;
}

<template>
  <Image
    src="/demo/images/nature1.jpg"
    alt="Nature"
    width="250"
    preview
    imageStyle="width: 100%; height: auto;"
  />
</template>

<script setup>
import Image from 'primevue/image';
</script>

/**
 * Progress meter group for multiple metrics
 */
import MeterGroup from "primevue/metergroup";

interface MeterGroupProps extends BaseComponentProps {
  value?: MeterItem[];
  min?: number;
  max?: number;
  orientation?: "horizontal" | "vertical";
  labelPosition?: "start" | "end";
  labelOrientation?: "horizontal" | "vertical";
}

interface MeterItem {
  label?: string;
  value?: number;
  color?: string;
  icon?: string;
}

<template>
  <MeterGroup :value="meterValues" />
</template>

<script setup>
import { ref } from 'vue';
import MeterGroup from 'primevue/metergroup';

const meterValues = ref([
  { label: 'CPU', value: 60, color: '#34d399' },
  { label: 'Memory', value: 40, color: '#fbbf24' },
  { label: 'Storage', value: 20, color: '#f87171' }
]);
</script>

// Tree node structure
interface TreeNode {
  key?: string;
  label?: string;
  data?: any;
  icon?: string;
  expandedIcon?: string;
  collapsedIcon?: string;
  children?: TreeNode[];
  leaf?: boolean;
  expanded?: boolean;
  type?: string;
  parent?: TreeNode;
  partialSelected?: boolean;
  style?: any;
  styleClass?: string;
  selectable?: boolean;
  loading?: boolean;
}

// DataTable sort metadata
interface DataTableSortMeta {
  field: string;
  order: number;
}

// DataTable filter metadata
interface DataTableFilterMeta {
  [key: string]: DataTableFilterMetaData | DataTableOperatorFilterMetaData;
}

interface DataTableFilterMetaData {
  value: any;
  matchMode: string;
}

interface DataTableOperatorFilterMetaData {
  operator: DataTableFilterOperator;
  constraints: DataTableFilterMetaData[];
}

// Virtual scroller options
interface VirtualScrollerOptions {
  lazy?: boolean;
  itemSize?: number | number[];
  showLoader?: boolean;
  loading?: boolean;
  delay?: number;
  loadingTemplate?: string;
  loaderIconTemplate?: string;
  numToleratedItems?: number;
}

// Filter match modes
enum FilterMatchMode {
  STARTS_WITH = 'startsWith',
  CONTAINS = 'contains',
  NOT_CONTAINS = 'notContains',
  ENDS_WITH = 'endsWith',
  EQUALS = 'equals',
  NOT_EQUALS = 'notEquals',
  LT = 'lt',
  LTE = 'lte',
  GT = 'gt',
  GTE = 'gte',
  BETWEEN = 'between',
  IN = 'in',
  IS = 'is',
  IS_NOT = 'isNot',
  BEFORE = 'before',
  AFTER = 'after',
  DATE_IS = 'dateIs',
  DATE_IS_NOT = 'dateIsNot',
  DATE_BEFORE = 'dateBefore',
  DATE_AFTER = 'dateAfter',
}

// Filter operators
enum FilterOperator {
  AND = 'and',
  OR = 'or'
}