v-selectpage
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published
SelectPage

v-selectpage

CircleCI code coverage npm version

SelectPage for Vue3, a select items components provides the list of items with pagination

Financial Contributors on Open Collective JavaScript Style Guide npm download

If you are using vue 2.x version, please use v-selectpage 2.x version instead









Examples and Documentation

Documentation and examples please visit below sites

The jQuery version: SelectPage

Features

  • Display contents with pagination
  • I18n support
  • Select single / multiple options
  • Tags form for multiple selection
  • Keyboard navigation
  • Searchable
  • Provide display forms such as list view and table view
  • Customization of row / cell content rendering
  • Core module that can be used independently

I18n support languages

  • Chinese Simplified
  • English
  • Japanese
  • Arabic
  • Spanish
  • German
  • Romanian
  • French
  • Portuguese-Brazil
  • Polish
  • Dutch
  • Chinese Traditional
  • Russian
  • Turkish

Installation

https://nodei.co/npm/v-selectpage.png?downloads=true&downloadRank=true&stars=true

Install v-selectpage to your project

# npm
npm i v-selectpage
# yarn
yarn add v-selectpage
# pnpm
pnpm add v-selectpage

Usage

Quick start example

<template>
  <SelectPageList
    key-prop="id"
    label-prop="name"
    @fetch-data="fetchData"
  />
</template>

<script setup lang="ts">
import { SelectPageList } from 'v-selectpage'
import type { PageParameters, FetchDataCallback } from 'v-selectpage'

function fetchData (data: PageParameters, callback: FetchDataCallback) {
  // pagination information and search keyword
  const { search, pageNumber, pageSize } = data

  // request parameters
  const parameters = {
    search,
    pageNumber,
    pageSize,
    ...
  }

  // fetch data list with pagination state
  doDataRequest(parameters)
    .then(resp => {
      /**
       * Return data format for example
       * {
       *   list: object[], // current page data list
       *   total: number // result count
       * }
       */
      callback(resp.list, resp.total)
    })
    .catch(() => {
      // clear the data list if necessary when request fails
      callback([], 0)
    })
}
</script>

Set default selected items

<template>
  <SelectPageTable
    language="zh-chs"
    v-model="selected"
    :multiple="true"
    :columns="columns"
    @fetch-data="fetchData"
    @fetch-selected-data="fetchSelectedData"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SelectPageTable } from 'v-selectpage'
import type {
  SelectPageKey, FetchSelectedDataCallback,
  PageParameters, FetchDataCallback, SelectPageTableColumn
} from 'v-selectpage'

const selected = ref<SelectPageKey[]>([2, 4, 7])
const columns: SelectPageTableColumn[] = [
  { title: 'Id', data: 'id' },
  { title: 'Team name', data: row => `${row.abbr} - ${row.name}`, width: 250 },
  { title: 'Description', data: 'desc' }
]

// fetch current page data
function fetchData (data: PageParameters, callback: FetchDataCallback) {
  ...
}
// fetch selected items data
function fetchSelectedData (keys: SelectPageKey[], callback: FetchSelectedDataCallback) {
  // get data models by keys
  doDataRequest({ keys }).then(resp => {
    callback(resp)
  })
}
</script>

Plugin preview

List view for Single selection

single

List view for multiple selection with tags form

multiple

Table view for single selection

table

Dependencies

License

license

Package Sidebar

Install

npm i v-selectpage

Weekly Downloads

251

Version

3.0.1

License

MIT

Unpacked Size

109 kB

Total Files

9

Last publish

Collaborators

  • terryz