AMS Components

Components for AMS

Components

AmsButton

Example:

<AmsButton color="primary" size="sm">Button</AmsButton>

Props:

| prop | type | | ---- | ---- | | color | 'primary' | 'success' | 'error' | 'warning' | 'gray' | | size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' |

The button attributes are retained and usable.

AmsSelect

Example:

<AmsSelect size="sm" v-model="value" :options="options">Button</AmsSelect>

Props:

| prop | type | | ---- | ---- | | options | Array<{key: string, label: string}> | Array<string> | | color | 'primary' | 'success' | 'error' | 'warning' | 'gray' | | size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' |

Slots:

| slot | description | --- | --- | | option value | replace default option display |

The select attributes are retained and usable.

AmsInput

Example:

<AmsInput size="sm" v-model="value"></AmsInput>

Props:

| prop | type | | ---- | ---- | | options | Array<{key: string, label: string}> | Array<string> | | color | 'primary' | 'success' | 'error' | 'warning' | 'gray' | | size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' |

The input attributes are retained and usable.

AmsTable

Example:

<AmsTable :rows=rows :columns=columns color="primary"></AmsTable>

Props:

| prop | type | | ---- | ---- | | rows | Array<Record<string, any>> | | columns | Array<{key: string, label?: string}> | Array<string> | | color | 'primary' | 'success' | 'error' | 'warning' | 'gray' | | isLoading | boolean |

Slots:

| slot | description | --- | --- | | header | insert content on top of the table | | footer | insert content below the table | | column key | replace default cell display of a column |

The table attributes are retained and usable.

AmsUpload

Example:

<AmsUpload v-model="files" color="primary"></AmsUpload>

Props:

| prop | type | | ---- | ---- | | label | string | | buttonText | string | | color | 'primary' | 'success' | 'error' | 'warning' | 'gray' | | multiple | boolean | | extraColumns | Array<{key: string, label: string}> |

Slots:

| slot | description | --- | --- | | label | replace label content on the opposite side of the button | | actions | replace contents of the cell of the action column | | file | replace contents of the cell display of file column |

AmsAccordion

Example:

<AmsAccordion title="Accordion" color="primary">Content Here</AmsAccordion>

Props:

| prop | type | | ---- | ---- | | title | string | | color | 'primary' | 'success' | 'error' | 'warning' | 'gray' |

Slots:

| slot | description | --- | --- | | header | replace contents of the accordion header | | footer | replace contents of the accordion footer |

Quick Setup

Install the module to your Nuxt application with one command:

npm i ams-components

That's it! You can now use My Module in your Nuxt app ✨

Local Development Setup

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release