README.md · erikvonlee123/gitee-frontend

# Gitee::Frontend

gitee-frontend 是一个前端组件库，基于 jQuery 和 Semantic-UI 实现，包含了[码云](https://gitee.com)现在用到的一些通用性较强的组件。

[![npm](https://img.shields.io/npm/v/gitee-frontend.svg)](https://gitee.com/mayun-team/gitee-frontend/releases)
[![npm](https://img.shields.io/npm/l/gitee-frontend.svg)](https://gitee.com/mayun-team/gitee-frontend/blob/master/LICENSE)

## 依赖

以下依赖项需要手动引入。

- [jQuery](https://jquery.com/)
- [Semantic-UI](https://semantic-ui.com/)
- [Date Range Picker](http://www.daterangepicker.com)

## 组件

- **[FilteredSearchBox](#filteredsearchbox):** 筛选搜索框，支持在输入框中选择各种筛选条件，与常规的筛选面板相比，页面空间占用小，操作方便。
- **[Boards](#boards):** 看板，以板块+卡片的形式展示任务的状态和进度。

## 安装

$ npm install gitee-frontend --save

## 使用

参考示例：[https://mayun-team.gitee.io/gitee-frontend/](https://mayun-team.gitee.io/gitee-frontend/)

## 开发

生成用于示例的相关资源：

$ npm run demo

生成全部用于发行的资源：

$ npm run dist

构建一个新版本：

$ npm version 1.x.x -m "build: build 1.x.x"

发布当前版本的 npm 包：

$ npm publish

### FilteredSearchBox

示例：

``` js
var options = {
    data: function () {
        return {
            gender: 'male'
        }
    },
    text: {
      loading: '载入中...',
      searchHelp: '按回车键或点击此处搜索',
      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 }`
  - **config:** `any` 给筛选器的配置参数，当筛选器类型为 `"daterange"` 时，需要手动指定 [DateRangePicker](http://www.daterangepicker.com) 插件的配置
  - **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` 远程选项列表的配置（可选），设置它后，将会请求指定地址来获取选项列表
    - **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

用法：

``` js
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` 标识
- **onLoad:** `Function(Object, Function)` 在开始加载下一页任务列表时的回调
- **onUpdate:** `Function(Object, any)` 在更新任务状态时的回调
- **onRender:** `Function(Object, JQuery)` 在渲染任务卡片时的回调
- **onSorted:** `Function(Array)` 在板块列表被排序后的回调

详细的配置参数可参考 [src/components/boards/config.js](src/components/boards/config.js) 文件，以及示例页面中的 js 代码。

erikvonlee123/gitee-frontend

简介

发行版

贡献者

近期动态

erikvonlee123/gitee-frontend .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

erikvonlee123/gitee-frontend