Quick Start

Get up and running with @ftx/ui in minutes.

Basic Component Usage

1. Import a Component

<template>
  <FTxButton @click="handleClick">
    Click Me
  </FTxButton>
</template>

<script setup>
import { FTxButton } from '@ftx/ui';

function handleClick() {
  console.log('Button clicked');
}
</script>

2. Use Multiple Components

<template>
  <div>
    <FTxButton @click="showAlert">Show Alert</FTxButton>
    <FTxSelectBox
      v-model="selected"
      :options="options"
      label="Choose an option"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { FTxButton, FTxSelectBox, ftxAlert } from '@ftx/ui';

const selected = ref(null);
const options = [
  { id: 1, name: 'Option 1' },
  { id: 2, name: 'Option 2' }
];

function showAlert() {
  ftxAlert('Hello from @ftx/ui!');
}
</script>

Using Plugins

Alert Dialog

import { ftxAlert } from '@ftx/ui';

// Simple usage
ftxAlert('Operation completed successfully!');

// With options
ftxAlert({
  title: 'Success',
  message: 'Your changes have been saved.',
  icon: 'check_circle'
}).onOk(() => {
  console.log('User clicked OK');
});

Confirmation Dialog

import { ftxConfirm } from '@ftx/ui';

ftxConfirm({
  title: 'Delete Item',
  message: 'Are you sure you want to delete this item?',
  icon: 'warning'
})
  .onOk(() => {
    deleteItem();
  })
  .onCancel(() => {
    console.log('Cancelled');
  });

Notifications

import { ftxNotify } from '@ftx/ui';

// Simple notification
ftxNotify('Item saved successfully');

// With options
ftxNotify({
  message: 'Operation completed!',
  type: 'positive',
  position: 'top-right',
  timeout: 3000
});

Using the Grid Component

<template>
  <FtxGrid
    id="users-grid"
    :rows="users"
    :columns="columns"
    :pagination="pagination"
    @request="handleRequest"
  />
</template>

<script setup>
import { ref } from 'vue';
import { FtxGrid } from '@ftx/ui';

const users = ref([]);
const pagination = ref({
  page: 1,
  rowsPerPage: 10,
  rowsNumber: 0
});

const columns = [
  { name: 'id', label: 'ID', field: 'id', sortable: true },
  { name: 'name', label: 'Name', field: 'name', sortable: true },
  { name: 'email', label: 'Email', field: 'email' }
];

function handleRequest(props) {
  // Handle grid data request
  // props contains pagination, filters, sort, etc.
}
</script>

Next Steps

• Explore Components for detailed component documentation
• Check out Plugins for dialog and notification helpers
• View Storybook for interactive examples
• See @ftx/utils for utility functions