npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gitee-frontend

v0.22.0

Published

frontend component library for Gitee

Downloads

111

Readme

Gitee::Frontend

gitee-frontend 是一个前端组件库,基于 jQuery 和 Semantic-UI 实现,包含了码云现在用到的一些通用性较强的组件。

giteego npm npm LICENSE gitee-release-cli

依赖

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

组件

  • 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: '按回车键或点击此处搜索',
      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 tab 配置
      • name: String tab 名称
      • key: String tab key
      • active: String 'active' || '' 初始化激活 tab
    • searchOption: Object 开启远程搜索选项,远程搜索的配置(暂时在 tabs 中使用)
      • key 对应的 tab 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 标识
  • onLoad: Function(Object, Function) 在开始加载下一页任务列表时的回调
  • onUpdate: Function(Object, any) 在更新任务状态时的回调
  • onRender: Function(Object, JQuery) 在渲染任务卡片时的回调
  • onSorted: Function(Array) 在板块列表被排序后的回调

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

开发

# 生成用于示例的相关资源
npm run demo

# 生成全部用于发行的资源:
npm run dist

发布

# 创建 beta 版的发行版
npm run release-beta

# 创建正式发行版
npm run release

# 发布测试版到 npm 服务器上
npm publish --tag=beta

# 发布正式版到 npm 服务器上
npm publish