Docs #

<template>
  <FUITable :data="tableData" ref="tableRef">
    <!--
    fixed or fixed="left" will fix the column to the left
    checkbox is a special attribute, it will be rendered as a checkbox
    every fixed column needs to have a width defined.
    it is advised to also define a width for the other columns but not strictly required
  -->
    <FUIColumn checkbox fixed width="50" />
    <!--
    header specifies the heading of the column
    it will automatically assume that the prop attribute is "automaticProp"
  -->
    <FUIColumn header="Automatic Prop" />
    <!--
    prop specifies the property that is shown in this column
    order lets you reorder columns as needed. The next 2 columns are swapped
    It is advised to set an order on all unfixed columns if you plan on reordering them
  -->
    <FUIColumn header="Swapped" prop="swapped" order="2" />
    <!--
    getter and setter can be used to convert the data to something else
    or convert the input to something else if the column is editable
    If you pass a custom getter, and setter, you dont need to pass prop.
    If you want to edit the "getted" value, you also have to set "getter-on-edit".
    Otherwise, the underlying source is displayed when editing (=focusing on the cell)
  -->
    <FUIColumn header="Getter/Setter" :getter="getterExample" :setter="setterExample" order="1" editable />
    <!--
      You can also pass a function to editable which lets you decide if a cell is editable on a row by row basis.
    -->
    <FUIColumn header="Editable" prop="editable" order="3" editable :editable="isEditable" />
    <!--
    sortable will make this column... sortable
  -->
    <FUIColumn header="Sortable" prop="sortable" order="4" sortable />
    <!--
    you can also pass a sort function to the sortable attribute
  -->
    <FUIColumn header="Has Sort Func" prop="hasSortFunc" order="5" :sortable="customSort" />
    <!--
    If you need to hide columns, you can use the hidden attribute
    CAUTION: Dont use v-if and v-show. They will break the table
  -->
    <FUIColumn header="Hidden" prop="hidden" order="6" hidden />
    <!-- 
      Pass options to render a select field instead of an input field
      Pass editable to allow it to be changeable
    -->
    <FUIColumn header="Select" prop="select" order="7" editable :options="selectOptions" />
    <!-- 
    Example of a fixed-right column
  -->
    <FUIColumn header="Fixed Right" prop="fixedRight" fixed="right" width="100" />
    <!--
    You can pass custom components (e.g. buttons) as slot to the column
  -->
    <FUIColumn header="Custom Slot" prop="customSlot" order="9" v-slot="{ row, col, valueRef, listeners }">
      <button @click="onClickColCustomerSlot(row, col, valueRef, listeners)">Click me</button>
    </FUIColumn>

    <!--
      You can create dynamic attributes for the column based on row data with :dynamic-attr
    -->
    <FUIColumn header="Dynamic Attr" prop="dynamicAttr" order="10" :dynamic-attr="getDynamicAttr" />
  </FUITable>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FUIColumn, FUITablem, Row, Col } from 'fuzzy-ui'

const generateRandomString = (minlen: number, maxlen: number) => {
  const len = Math.floor(Math.random() * (maxlen - minlen + 1)) + minlen
  let result = ''
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  const charsLen = chars.length
  for (let i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * charsLen))
  }
  return result
}

const tableRef = ref()

const tableData = ref([
  {
    // All columns defined above with random content:
    automaticProp: generateRandomString(5, 10),
    swapped: generateRandomString(5, 10),
    getterSetter: 0.12345
    editable: generateRandomString(5, 10),
    sortable: generateRandomString(5, 10),
    hasSortFunc: generateRandomString(5, 10),
    hidden: generateRandomString(5, 10),
    select: 'option1'
    fixedRight: generateRandomString(5, 10),
    dynamicAttr: 10
  },
  {
    // All columns defined above with random content:
    automaticProp: generateRandomString(5, 10),
    getterSetter: 0.1358653
    editable: generateRandomString(5, 10),
    sortable: generateRandomString(5, 10),
    hasSortFunc: generateRandomString(5, 10),
    hidden: generateRandomString(5, 10),
    select: '' // Leave empty or set to undefined to show placeholder
    fixedRight: generateRandomString(5, 10),
    dynamicAttr: 20
  },
])

const selectOptions = [
  {
    label: 'Option 1',
    value: 'option1'
  },
  {
    label: 'Option 2',
    value: 'option2'
  },
  {
    label: 'Option 3',
    value: 'option3'
  },
]


// Hide some precision and only show it when editing
const getterExample = (row: Row) => {
  return row.getterSetter.toFixed(2)
}

// Converts string to number
const setterExample = (row: Row, value: string) => {
  row.getterSetter = parseFloat(value)
}

// Only allows editing when automaticProp col is not empty
const isEditable = (row: Row) => {
  return row.automaticProp.length > 0
}

// sort string by their length instead of their content
const customSort = (a: Row, b: Row) => {
  return a.hasSortFunc.length - b.hasSortFunc.length
}

// The function gets passed all the properties that are passed to the slot:
// row: the row object that holds the data
// col: the column object that holds the column definition
// valueRef: the reference to the value of the cell (unefined in this case because this column is not backed by any data)
// listeners: event handlers that manage focus and blur events for any inputs that are probably used in the slot
const onClickColCustomerSlot = (row: Row, col: Col, valueRef: Ref<unknown>, listeners: any) => {
  console.log(row, col, valueRef, listeners)
}

const getDynamicAttr = (row: Row, col: Col) => {
  return {
    style: {
      color: row.dynamicAttr > 15 ? 'red' : 'green'
    }
  }
}
</script>

<template>
  <!-- Most likely the easiest usage -->
  <FUIButton @click="doSomethingLong">Click Me</FUIButton>
  <FUIButton @click="doSomethingLong" label="Click Me" />
  <FUIButton @click="doSomethingLong" label="Click Me" :icon="IconComponent" />

  <!-- Icon slot -->
  <FUIButton @click="doSomethingLong" label="Click Me">
    <template #icon><i-carbon-accessibility /></template>
  </FUIButton>

  <!-- Icon Only (automatically squared) -->
  <FUIButton @click="doSomethingLong" :icon="IconComponent" />
  <FUIButton @click="doSomethingLong">
    <template #icon><i-carbon-accessibility /></template>
  </FUIButton>

  <!-- label slot -->
  <FUIButton @click="doSomethingLong">
    <template #label>Click Me</template>
  </FUIButton>

  <!--use a different loader than default -->
  <FUIButton @click="doSomethingLong" :loader="LoaderComponent" label="Click Me" />
  <FUIButton @click="doSomethingLong" label="Click Me">
    <template #loader><FUIDotLoader /></template>
  </FUIButton>

  <!-- force square button (or not square for icon only) -->
  <FUIButton @click="doSomethingLong" square label="Click Me" />
  <FUIButton @click="doSomethingLong" :square="false" :icon="IconComponent" />

  <!-- force loading state -->
  <FUIButton label="Click Me" :loading="true" />

  <!-- render as link -->
  <FUIButton href="https://www.google.com" label="Click Me" />
  <!-- render as any component you want -->
  <FUIButton is="span" label="Click Me" />
  <FUIButton :is="ButtonComponent" label="Click Me" />
</template>

<script setup>
import { h } from 'vue'
import { FUIButton, FUIDotLoader } from 'fuzzy-ui'

const IconComponent = { render: () => h('A') } // fake icon
const LoaderComponent = { render: () => h('L') } // fake icon
const ButtonComponent = FUIButton

// Returning a promise will automatically trigger loading state
const doSomethingLong = () => {
  return new Promise(resolve => {
    setTimeout(resolve, 1000)
  })
}
</script>

<template>
  <!-- this will wrap all slots available so the functionality is not lost -->
  <FUIButton v-bind="$attrs" class="filled">
    <template v-for="(_, slot) of $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </FUIButton>
</template>

<script setup>
  import { FUIButton } from 'fuzzy-ui'
</script>

<style scoped>
.filled {
  --fuzzy-ui-button-background-color: #0070f3;
  --fuzzy-ui-button-hover-background-color: #0060e9;
  --fuzzy-ui-button-active-background-color: #0050d7;
  --fuzzy-ui-button-disabled-background-color: #66aeff;
  --fuzzy-ui-button-border-color: #7ebaff;
  --fuzzy-ui-button-active-color: #bcbcbc;
  --fuzzy-ui-button-color: #fff;
  font-size: 40px;
}
</style>