OSCHINA-MIRROR/gitee-frontend-gitee-frontend

Gitee::Frontend

Gitee-frontend — это компонентная библиотека для фронтенда, основанная на jQuery и Semantic-UI. Она включает в себя некоторые компоненты с высокой степенью универсальности, которые используются в настоящее время на 码云.

Зависимости

Следующие зависимости необходимо импортировать вручную:

Компоненты

— FilteredSearchBox: фильтрующий поисковый блок, дизайн которого основан на одноимённом компоненте GitLab. Улучшена функция множественного выбора условий, поддерживается выбор различных условий фильтрации в поле ввода. По сравнению с обычной панелью фильтров, занимает меньше места на странице и более удобен в использовании.

— Boards: доски, представляющие состояние и прогресс задач в виде блоков и карточек.

Установка

npm install gitee-frontend --save

Использование

Для получения дополнительной информации о том, как использовать, обратитесь к примерам: https://gitee-frontend.gitee.io/gitee-frontend/.

На странице в качестве плагина jQuery:

<link rel="stylesheet" href="dist/jquery/jquery.filtered-search-box.css">
<link rel="stylesheet" href="dist/jquery/jquery.boards.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="dist/jquery/jquery.filtered-search-box.min.js"></script>
<script src="dist/jquery/jquery.boards.min.js"></script>
<script>
var $search = $('#js-search-box');
var $boards = $('#js-boards');

$search.filteredSearchBox({
    // ...
});
$boards.boards({
    // ...
});

var search = $search.data('filteredsearchbox');
var boards = $boards.data('boards')
</script>

В качестве модуля ES:

import '~gitee-frontend/dist/gitee-frontend.css'
import { Boards, FilteredSearchBox } from 'gitee-frontend'

const boards = new Boards($('#js-boards'), { /* options... */ })
const search = new FilteredSearchBox($('#js-search-box'), { /* options... */ })

Пользовательские стили компонентов:

// Пользовательский основной цвет компонента
$primary-color: #409eff;

@import "~gitee-frontend/src/variables";
@import "~gitee-frontend/src/components/filtered-search-box.scss";
@import "~gitee-frontend/src/components/boards.scss";

// Переопределение стилей компонентов
.filtered-search-token {
    // ...
}

FilteredSearchBox

Пример:

var options = {
    data: function () {
        return {
            gender: 'male'
        }
    },
    text: {
      loading: 'Загрузка...',
      searchHelp: 'Нажмите Enter или здесь, чтобы выполнить поиск',
      selectOtherFilter: 'Выберите другое условие фильтрации',
      placeholder: 'Поиск или фильтрация результатов...'
    },
    filters: [
        {
            name: 'Пол',
            key: 'gender',
            none: {
                name: 'Без ограничений',
                value: 'none'
            },
            items: [
                {
                    name: 'Мужской',
                    value: 'male'
                }, {
                    name: 'Женский',
                    value: 'female'
                }
            ]
        }
    ],
    callback: function (data) {
        console.log('Пол:', data.gender)
    }
}
$('#example-element').filteredSearchBox(options)

Описание параметров:

data: Function(): Object начальные данные, тип возвращаемого значения функции должен быть Object
history: Object,Boolean история поиска, если эта функция не требуется, можно установить значение false
- limit Number максимальное количество, по умолчанию 5, то есть сохраняется до 5 последних поисковых запросов
- store Object объект хранилища, по умолчанию localStorage, если требуется настроить местоположение, предоставьте объект, содержащий методы setItem(), getItem() и removeItem()
- storeKey String ключ хранения, по умолчанию "GiteeSearchHistory"
filters: Array список фильтров
- key: String идентификатор фильтра, например: "member_id"
- name: String название фильтра, например: "Член"
- type: String тип фильтра, для фильтрации диапазона дат используйте "daterange"
- icon: String значок фильтра, например: "icon user"
- none: Object условие «без», например: { name: "Не связано", value: 0 }
- tabs: Object конфигурация вкладки
  - name: String имя вкладки
  - key: String ключ вкладки
  - active: String 'active' || '' начальная активация вкладки
- searchOption: Object опция удалённого поиска, конфигурация удалённого поиска (временно используется в tabs)
  - key соответствующая вкладка Конфигурация:
searchTip — поисковая подсказка.
fetcher — Function(config, onSuccess, onError) — получатель, например, если необходимо настроить способ запроса, можно указать его.
converter — Function(data): Object — преобразователь данных, используется для преобразования полученных данных в структуру, поддерживаемую компонентом.
- config: any — параметры конфигурации для фильтра, при использовании типа фильтра "daterange" необходимо вручную указать конфигурацию плагина DateRangePicker.
- items: Array — список опций:
  - name: String — название.
  - value: String — значение.
  - image: String — адрес изображения, например: "https://gitee.com/logo-black.svg".
  - icon: String — значок.
  - iconStyle: String — стиль значка, например: "background-color: #f00;".
  - color: String — цвет, например: #f00.
  - description: String — дополнительное описание.
  - keywords: String — ключевые слова.
- remote: [Object, Array] — конфигурация списка удалённых опций (необязательно), после установки будет запрашиваться указанный адрес для получения списка опций.
  - url: String — API-адрес.
  - params: Object, Function(data): Object, — параметры, передаваемые при запросе.
  - fetcher: Function(config, onSuccess, onError) — получатель, как и выше.
  - converter: Function(data): Object — преобразователь данных.
groups: Array — группы:
- keys: Array — идентификаторы фильтров в группе, например: ["author_id", "project_id"].
- name: String — имя группы.
text: Object — перевод текста.
callback: Function(data) — обратный вызов при определении поиска, параметр — текущий параметр фильтра.
debug: Boolean — включение отладки.

Boards

Использование:

var options = {
    // 配置
}

$('#example-element').boards(options)

Конфигурация:

key: String — поле, используемое для идентификации состояния задачи в блоке, по умолчанию — "state".
name: Sting — наименование доски, рекомендуется установить это свойство при наличии нескольких досок на странице, чтобы избежать конфликтов содержимого, по умолчанию — "board".
message: Object — информация подсказки:
- loading: String — подсказка при загрузке.
- stateDisabled: String — подсказка, когда блок не принимает задачи определённого состояния.
- allComplete: String — подсказка, когда все задачи в блоке загружены.
- btnSetFirst: String — подсказка для кнопки предварительного размещения блока.
- btnSetLast: String — подсказка для кнопки последующего размещения блока.
className: Object — некоторые стили элементов:
- iconComment: String — иконка комментария.
- iconIssue: String — иконка задачи.
- iconAngleLeft: String — левая стрелка.
- iconAngleRight: String — правая стрелка.
- card: String — карточка.
- avatar: String — аватар.
- action: String — кнопка действия.
- actions: String — группа кнопок действий.
data: Array — список блоков:
- name: String — наименование.
- state: String — состояние.
- color: String — основная тема.
plugins: Object — плагины:
- LetterAvatar: Object — плагин символьного аватара, при передаче этого плагина будут отображаться символьные аватары для пользователей без установленных аватаров. Адрес: https://gist.github.com/leecrossley/6027780.
- Sortable: Object — сортировочный плагин, после передачи этого плагина будет доступна сортировка блоков. Адрес: https://github.com/RubaXa/Sortable.
actions: Function(Config) — конструктор набора кнопок действий блока, возвращаемый тип должен быть Array.
actions: Array — набор кнопок действий блока:
- id: String — идентификатор.
- class: String — класс стиля. — icon: String — иконка. — title: String — текст подсказки. — callback Function(Boards, Board, Event) — обратный вызов, вызываемый при нажатии пользователем кнопки действия.
types: Array — типы задач, при перетаскивании карточки задачи, если состояние блока не принадлежит типу задачи, он будет отключён.
- id: Number,String — идентификатор типа.
- states: Array — список состояний:
  - id: Number,String — идентификатор.

Дополнительные параметры конфигурации можно найти в файле src/components/boards/config.js и в коде страницы примера.

Разработка

# Создание ресурсов, используемых в примере
npm run demo

# Создание всех ресурсов для выпуска
npm run dist

Выпуск

# Создание бета-версии выпуска
npm run release-beta

# Создание официальной версии выпуска
npm run release

# Публикация тестовой версии на сервере npm
npm publish --tag=beta

# Официальная публикация на сервере npm
npm publish