UBuilder Page Templates

Commonly expected component bundle for AccuraSoft projects

Installation

npm i @ubuilder/page-templates

Usage

// vue 3
<script setup lang="ts">
import { FormGrid } from '@ubuilder/page-templates';
import type { FormField } from '@ubuilder/page-templates/types/components/Form/FormField';

const ff: FormField[] = [ 
  {
    label: '그룹코드',
    field: 'groupCode',
    type: 'textbox',
  },
  {
    label: '코드명',
    field: 'codeNm',
    type: 'textbox',
  },
  {
    label: '사용여부',
    field: 'usage',
    type: 'combobox',
  },
];

const gridOption = {
  title: 'grid Title',
  fields: [
    {
      label: '그룹코드',
      field: 'groupCode',
    },
    {
      label: '그룹코드명',
      field: 'groupCodeNm',
    },
    {
      label: '코드설명',
      field: 'codeExplain',
    },
    {
      label: '코드명',
      field: 'codeNm',
    },
    {
      label: '사용여부',
      field: 'usage',
    },
  ],
};
</script>

<template>
    <FormGrid :form-option="ff" :grid-option="gridOption" title="page title" />
</template>

Templates

FormGrid

FormGrid is a component that combines a search form and a data table.

Props

interface FormFieldProps {
  title: string,
  formOption: FormField[],
  gridOption: {
    title: string,
    fields: GridField[],
  }
}

• title (string): The title of the page.
• formOption (FormField[]): An array of form fields.
• gridOption ({ title: string, fields: GridField[] }): An object containing the grid title and an array of grid fields.

FormField Interface

interface FormField {
  type:
    | 'combobox'
    | 'textbox'
    | 'textarea'
    | 'searchbox'
    | 'radio'
    | 'filebox'
    | 'checkbox'
    | 'numbox'
    | 'numToNumbox'
    | 'numMoneybox'
    | 'numMoneyToMoneybox'
    | 'numPointbox'
    | 'yearbox'
    | 'monthbox'
    | 'datebox'
    | 'timebox'
    | 'period'
    | 'yearPeriod'
    | 'monthPeriod';
  field: string;
  label: string;
  ratio?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
}

GridField Interface

interface GridField {
  field: string;
  label: string | string[];
}