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