Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://terryz.github.io/docs-vue3/select-page/ below:

Website Navigation

• Vue 2 components

SelectPage | Vue3 components

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

Repository status

Detailed changes for each release are documented in Changelog

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

Install v-selectpage component in to your project

Introduction to the working modes of v-selectpage components

Regular dropdown selection mode

import { SelectPageList, SelectPageTable } from 'v-selectpage'

The core module is a list and table module with search and paging functionality, which can be used directly, placed in other containers, or combined with other components to greatly expand the forms and scenarios in which the functionality can be used

import { SelectPageListCore, SelectPageTableCore } from 'v-selectpage'

templatets

<SelectPageList @fetch-data="fetchData" />

import {
  type PageParameters,
  type FetchDataCallback,
  SelectPageList
} from 'v-selectpage'

// data list for example
const list = [
  { id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛' },
  { id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士' },
  { id: 3, name: 'Detroit Pistons', desc: '底特律活塞' },
  ...
]

function fetchData (data: PageParameters, callback: FetchDataCallback) {
  const { search, pageNumber, pageSize } = data

  const start = (pageNumber - 1) * pageSize
  const end = start + pageSize - 1
  // filter by search keyword
  const filtered = search
    ? list.filter(val => val.name.includes(search))
    : list
  callback(
    // get current page items
    filtered.filter((val, index) => index >= start && index <= end),
    filtered.length
  )
}

In the above example, local static data is used as an example, but in more cases we need to apply remote data for loading and query

function fetchData (data, callback) {
  const params = { ... }
  // get current page items from remote api
  axios.post('some-api-address', params).then(resp => {
    callback(resp.list, resp.count)
  })
}

When the dropdown container is open and the input focus is in the search box, the following actions can be used for shortcut operations

• up and down key to toggle the current highlighted item
• left and right key to switch to the previous or next page
• enter When a highlighted row exists, the data in that row will be selected
• esc close dropdown container

templatets

<SelectPageTable
  :columns="teamColumns"
  @fetch-data="fetchData"
/>

import {
  type PageParameters,
  type FetchDataCallback,
  type SelectPageTableColumn,
  SelectPageTable
} from 'v-selectpage'

// data list for example
const list = [
  { id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛', abbr: 'CHI' },
  { id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士', abbr: 'CLE' },
  { id: 3, name: 'Detroit Pistons', desc: '底特律活塞', abbr: 'DET' },
  ...
]
const teamColumns: SelectPageTableColumn[] = [
  { title: 'Id', data: 'id' },
  { title: 'Team name', data: row => `${row.abbr} - ${row.name}`, width: 250 },
  { title: 'Description', data: 'desc' }
]

function fetchData (data: PageParameters, callback: FetchDataCallback) {
  ...
}

teamColumns defines the data columns in the table. The data attribute in the column model has the same function as labelProp, that is, you can specify a certain data column as the content field, or provide a function to render the content of the cell to make customizations

In the table view, labelProp is only used to specify the content of the selected item in the trigger object

List view core module

<template>
  <SelectPageListCore @fetch-data="fetchData" />
</template>
<script setup>
import { SelectPageListCore } from 'v-selectpage'
</script>

Table view core module

<template>
  <SelectPageTableCore @fetch-data="fetchData" />
</template>
<script setup>
import { SelectPageTableCore } from 'v-selectpage'
</script>

Set the multiple prop to enabled multiple item selection

templatets

<SelectPageList
  multiple
  v-model="selected"
  @fetch-data="fetchData"
  @fetch-selected-data="fetchSelectedData"
/>

import { ref } from 'vue'
import {
  type SelectPageKey,
  type FetchSelectedDataCallback,
  type PageParameters,
  type FetchDataCallback,
  SelectPageList
} from 'v-selectpage'
// data list for example
const list = [
  { id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛' },
  { id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士' },
  { id: 3, name: 'Detroit Pistons', desc: '底特律活塞' },
  ...
]
const selected = ref<SelectPageKey[]>([1, 2, 4])

function fetchData (data: PageParameters, callback: FetchDataCallback) { ... }
function fetchSelectedData (
  keys: SelectPageKey[],
  callback: FetchSelectedDataCallback
) {
  // get items model by keys when v-model is set to a non-empty value
  callback(list.filter(val => keys.includes(val.id)))
}

The above is an example of setting a default selected item. v-model is used in conjunction with the fetch-selected-data event. When one or more keys are set using v-model (the content of the key values should correspond to the data columns specified by keyProp), the component responds to the fetch-selected-data event to fetch the data corresponding to the key, while the selection of the item(s) through the interaction of the component does not trigger this event.

Set the max value to limit the maximum number of selections that can be made

<SelectPageList
  multiple
  v-model="selected"
  :max="3"
  @fetch-data="fetchData"
  @fetch-selected-data="fetchSelectedData"
/>

Other setting options for components

<SelectPageList disabled />
<SelectPageList :disabled="true" />

<SelectPageList :pagination="false" />

Some languages have a writing habit of writing from right to left, such as Hebrew he and Arabic ar

<SelectPageList :rtl="true" />

<SelectPageList :width="500" />
<SelectPageList width="20rem" />

Some cases that may be used in actual business applications for reference

Data source: country-list

<template>
  <SelectPageList
    key-prop="key"
    :label-prop="countryLabel"
    placeholder="Countries of the world"
    @fetch-data="fetchCountries"
  />
</template>

<script setup>
import { SelectPageList } from 'v-selectpage'

function countryLabel (data) {
  return `(${data.key}) ${data.name}`
}
function fetchCountries (data, callback) {
  ...
}
</script>

Data source: timezones

<template>
  <SelectPageTable
    key-prop="key"
    label-prop="name"
    :columns="timezonesColumn"
    placeholder="World time zone"
    @fetch-data="fetchTimezones"
  />
</template>

<script setup>
import { SelectPageTable } from 'v-selectpage'
const timezonesColumn = [
  {title: 'area',data: 'key'},
  {title: 'time zone',data: 'name'}
]
function fetchTimezones (data, callback) {
  ...
}
</script>

type SelectPageKey = string | number

/**
 * `zh-chs` Chinese Simplified
 * `en` English
 * `ja` Japanese
 * `ar` Arabic
 * `es` Spanish
 * `de` German
 * `ro` Romanian
 * `fr` French
 * `pt-br` Portuguese-Brazil
 * `pl` Polish
 * `nl` Dutch
 * `zh-cht` Chinese Traditional
 * `ru` Russian
 * `tr` Turkish
 */
type LanguageKey =
  'zh-chs' | 'en' | 'ja' | 'ar' | 'es' | 'de' | 'ro' |
  'fr' | 'pt-br' | 'pl' | 'nl' | 'zh-cht' | 'ru' | 'tr'

interface TableColumn {
  /** Title text */
  title: string
  /** Data property or data processing function */
  data: string | function
  /** Column width */
  width?: number | string
}

interface PageParameters {
  /** Search keyword */
  search: string
  /** Current page number */
  pageNumber: number
  /** The number of records per page */
  pageSize: number
}

type FetchDataCallback = (
  /** Data list */
  dataList: Record<string, unknown>[],
  /** Total number of records */
  resultCount: number
) => void

type FetchSelectedDataCallback = (dataList: Record<string, unknown>[]) => void

interface SelectPageProps {
  /**
   * Binds the key value of the selected item to match the contents
   * of the field specified by `keyProp`
   */
  modelValue?: SelectPageKey[]
  /**
   * The placeholder text content displayed when no item is selected.
   * If this parameter is not set, the component will use the placeholder
   * set in i18n by default
   *
   * This prop only work on `Selector mode`
   */
  placeholder?: string
  /**
   * Multiple selection mode
   *
   * @default false
   */
  multiple?: boolean
  /**
   * The language used by the component
   *
   * @default `en`
   */
  language?: string
  /**
   * Specify a property as a key value field that will be used as
   * the basis field for `v-model/modelValue` and data matching
   *
   * @default `id`
   */
  keyProp?: string
  /**
   * Specify a data property or a function to process the text content
   * displayed by the list item
   *
   * @default `name`
   */
  labelProp?: string | Function
  /**
   * The number of records per page is displayed, and when the paging
   * bar is turned off, a fixed `0` is applied
   *
   * @default 10
   */
  pageSize?: number
  /**
   * Maximum number of items that can be selected, set to `0` for no limit
   *
   * This option relies on the `multiple` prop being set to `true`
   *
   * @default 0
   */
  max?: number
  /**
   * Data list using pagination bar
   *
   * @default true
   */
  pagination?: boolean
  /**
   * Text rendering direction from right to left
   *
   * @default false
   */
  rtl?: boolean
  /**
   * Specifies the width of the content container
   * specifying content in number format automatically uses pixels in px units
   * content in string format is applied directly
   */
  width?: string | number
  /**
   * Debounce delay when typing, in milliseconds
   *
   * @default 300
   */
  debounce?: number
}

interface SelectPageTableProps extends SelectPageProps {
  /**
   * Tabular data column setting model
   * 
   * This prop only work on tabular form components
   * - `SelectPageTable`
   * - `SelectPageTableCore`
   */
  columns?: SelectPageTableColumn[]
}

interface SelectorProps {
  /**
   * Component disabled states, only work on `Selector mode`
   *
   * @default false
   */
  disabled?: boolean
  /**
   * Add custom class to trigger container, work on `Selector mode`
   */
  customTriggerClass?: string
  /**
   * Add custom class to dropdown container, work on `Selector mode`
   */
  customContainerClass?: string
}

interface SelectPageSelectorProps extends
  SelectPageProps, SelectorProps {}

interface SelectPageTableSelectorProps extends
  SelectPageTableProps, SelectorProps {}

Response events for various operations of components

When an item's selection status changes, the item key collection is output in response to this event

`update:modelValue`: (keys: SelectPageKey[]) => void

Handling of v-model for manual binding

<SelectPageListCore
  :modelValue="selected"
  @update:modelValue="keys => selected = keys"
/>

Response data list fetching and content searching

`fetch-data`: (data: PageParameters, callback: FetchDataCallback) => void

The response function submits the results of the data query to the component via the callback function based on the paging and search information provided by data

function fetchData (data, callback) {
  const params = { ... }
  search(params).then(resp => callback(resp.list, resp.count))
}

Close pagination bar

When the pagination bar is turned off, the parameters output in the event response will become fixed, see pagination props setting for details

When the selected item is changed through v-model/modelValue, respond to this event to obtain the selected item data model

`fetch-selected-data`: (
  keys: SelectPageKey[],
  callback: FetchSelectedDataCallback
) => void

The event response function gets the corresponding data model based on the key collection and submits it to the component via the callback function

function fetchSelectedData (keys, callback) {
  search({ keys }).then(resp => callback(resp.list))
}

Events responded to when the status of an item selection changes

`selection-change`: (items: Record<string, unknown>[]) => void

In response to the selected items being removed

remove: (items: Record<string, unknown>[]) => void

Trigger event is used to close the dropdown container

`close-dropdown`: () => void

This event only work on Core module mode

Trigger events are used to automatically adjust the dropdown container position

`adjust-dropdown`: () => void

This event only work on Core module mode

Respond to dropdown container state changes

`visible-change`: (visible: boolean) => void

This event only work on Selector mode

Before using the component's API, you need to declare the ref attribute for the component, and use ref() to declare a reactive variable with the corresponding name to call the API method

<template>
  <SelectPageListCore ref="selectPage" />
</template>

<script setup>
import { ref } from 'vue'
import { SelectPageListCore } from 'v-selectpage'

const selectPage = ref()
// call api
selectPage.value.removeAll()
</script>

Remove the selected state of the specified data

removeItem: (item: Record<string, unknown>) => void

This API only work on Core module mode

Remove all selected items

This API only work on Core module mode

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4