Code Monkey home page Code Monkey logo

heyui's Introduction

HeyUI

npm (tag) npm bundle size npm NPM

An UI components library.

Components

Documentation

visit heyui.top.

Install

npm install heyui@next --save

Start

Basic

<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/heyui@next"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/heyui@next/themes/index.css"></link>

Advanced

import { createApp } from 'vue';
import heyui from 'heyui';
require('heyui/themes/index.less');

app.use(heyui);
app.mount('#app');

Development

npm install

# build
npm run build

Admin Template

HeyUI Admin Template

Browser Support

Modern browsers and Internet Explorer 11+.

LICENSE

MIT

Copyright (c) 2017-present, Lan

heyui's People

Contributors

dependabot[bot] avatar dsaouda avatar huizi666 avatar jameszbl avatar jsnavas avatar kexirong avatar kongyajie avatar puuuudding avatar tangyefei avatar toobug avatar vvpvvp avatar winggao avatar wvffle avatar xy2cq avatar yaooojia avatar zhangkx666 avatar zxlau avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

heyui's Issues

是否可以给时间轴连接线的颜色增加自定义属性?

我的主体背景是 #f2f2f2,这样一来,时间轴的连接线就看不见了。
目前我是自定义全局覆盖的样式去替换 hey的颜色,主要是用了:
/* 覆盖垂直时间轴纵线颜色 */
.h-timeline-pending .h-timeline-item:nth-last-of-type(2) .h-timeline-item-content:after {
border-left: 1px #555 dotted !important;
}

.h-timeline-item-content:after {
content: "";
border-left: 1px #333 dashed !important;
}

但不知道为什么最后一个节点的连接线会超出节点那个圆圈。所以我想还是通过组件提供属性比较好。
考虑到 hey 用了两种颜色(应该是吧),可以设定该属性的值为数组,个人建议。

TagInput的超限提示

TagInput组件的limit属性是否也可以像wordlimit属性那样触发this.$Message提示?
另外:
当输入超出 limit 限制后,会循环触发控制台错误(如下):
Uncaught TypeError: this.locale is not a function
at VueComponent.add (heyui.esm.js?595e:10)
at keyup (heyui.esm.js?595e:10)
at invoker (vue.esm.js?22f2:2027)
at HTMLInputElement.fn._withTask.fn._withTask (vue.esm.js?22f2:1826)

heyui js 体积过大该怎么办?

很喜欢heyui的颜值深得我心,hey dev 开发模式也很棒,当时我遇到了一个尴尬的问题,build之后的common.js 体积高大500kb,在带宽的小的阿里云上面加载时间经常需要几秒钟,其实我只是用了很少的一部分组件。

我想是否有一种开发方式,可以享受 hey-cli 的便利,又能组件按需加载,或者可以讲多个第三库内连在 script 标签下面,可以通过cdn并行加载来提高加载速度,当然我看了,heyui simple方案,确实很不错,就是无法去使用 开发环境了。希望能得到帮助

面包屑的样式问题

Breadcrumb 面包屑加了图标后,上下没有对齐,是否可以处理为图标与文字垂直居中对齐?

移动版

请问会支持移动版优化么?

table组件

1、可否添加loading状态,可以通过传入参数在table上显示一个loading状态
2、table排序的图标靠右显示总觉得很奇怪,可否改为紧跟在名称的后面,这样看起来好点

关于switch组件

场景1:后台返回值为 0、1,每次获取后,都要人为去转换一下,稍微忘记都不行。是否可以从组件级自动判断 -1、0、1,这样的值;

场景2:比如:想用字段 nullAble 代表是否可为空,DB值为 0:不可为空,1:允许为空。但在前端页面控件的LABLE名称为”是否必填“,因此当值为 0时,反而需要组件显示为 “打开”状态。

在这个特性上,比较赞同 iview的处理方法,有两个 api:true-value 和 false-value,这样可以个性控制,满足任意场景。

安装cli报错

npm WARN [email protected] requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node lib/install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shen/.npm/_logs/2018-08-07T03_13_28_356Z-debug.log

作者厉害了,能否增加Transfer窗口和Collapse 折叠面板

作者厉害了,
Transfer窗口
Collapse 折叠面板
Carousel 走马灯

iview 和element-ui也都有这样的功能
有没有这样的计划加上?
这样就能把element-ui 和 iview的功能都给涵盖了,用这样的功能的人不少。用起来也更有口碑!
希望作者能把他们加上,祝heyui发展越来越好
非常感谢!

Select 无内容

原因Select的prop中的render和Vue的自带render冲突。
image
如图,此处应该是_vm.render但是并没有。

"TypeError: Cannot read property 'labelWidth' of undefined"

vue.esm.js?efeb:610 [Vue warn]: Error in render: "TypeError: Cannot read property 'labelWidth' of undefined"

found in

---> <HFormItem> at /Users/alicia/Documents/develop/github/heyui/heyui/src/components/form/formItem.vue
       <HForm> at /Users/alicia/Documents/develop/github/heyui/heyui/src/components/form/form.vue
         <SimpleForm>

代码:

//  simpleform.jsx
import Vue from 'vue'
import {Form, FormItem} from 'heyui'

export default {
  render(h){
    return (<div>1
      <Form label-width={100}>
        <FormItem label="名称" prop="name">
          <input type="text"/>
        </FormItem>
      </Form></div>)
  }
}

调用文件

<template>
<SimpleForm></SimpleForm>
</template>
<script>
  import Vue from 'vue'
  import SimpleForm from '@/components/simpleform'

  export default {
    components: {
      SimpleForm,
    },
}
</script>

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' at Object.eval (typeValids.js?1107:50) at eval (typeValids.js:54) at Object../heyui/src/plugins/validator/validation/typeValids.js (app.js:3166) at __webpack_require__ (app.js:708) at fn (app.js:113) at eval (index.js?2801:2) at Object../heyui/src/plugins/validator/index.js (app.js:3143)

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Object.eval (typeValids.js?1107:50)
    at eval (typeValids.js:54)
    at Object../heyui/src/plugins/validator/validation/typeValids.js (app.js:3166)
    at __webpack_require__ (app.js:708)
    at fn (app.js:113)
    at eval (index.js?2801:2)
    at Object../heyui/src/plugins/validator/index.js (app.js:3143)
    at __webpack_require__ (app.js:708)
    at fn (app.js:113)
    at eval (form.vue?ee25:7)

webpack/webpack#4039

如何编译heyui

运行 npm run build 说 hey 找不到。也没有看到其它的编译方式。

运行 p min build 都不行。

table 组件是否可以增加 “反选”方法

文档中已有setSelection方法,目前个人的实现方式是:
1、先设置一个 变量 selectIds 来记录已选行,
2、遍历table数据集 datas,datas.forEach(v => {
如果 !selectIds.includes(v),就记录 v
})
3、最后把过程2中记录的结果集传给 setSelection
以上步骤只是目前我能够想到的方法,但是感觉这样存在多个循环,是否可以直接在组件级实现反选方法,比如存在一个 _checked参数,然后只需要遍历一次 datas,然后 _checked = !_checked即可?

在 vue2.6.6中 Table 组件有兼容问题

在 vue2.6.6中 Table 组件如果使用如下方式渲染,就会出现列头重复循环

<Table :datas="dataList">
        <TableItem title="帐号">
          <template slot-scope="{data}">
            <DropdownMenu :datas="ctrls" class-name="header-info-dropdown" @click="trigger($event,data)">
              <span>{{data.account}}</span>
            </DropdownMenu>
          </template>
        </TableItem>
        <TableItem title="电话" prop="telephone"></TableItem>
        <TableItem title="关联员工" prop="employeesName"></TableItem>
        <TableItem title="状态" prop="status"></TableItem>
        <TableItem title="创建时间" prop="createDate"></TableItem>
      </Table>

你好,几个特性咨询下

  1. 能否像elementUI一样打包成独立的js和css,这样后台开发时不需要安装nodejs环境

  2. 树形控件能否支持拖拽节点

谢谢!

Form表单验证条件变化时,必填*

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Browser (please complete the following information):
[e.g. chrome, safari]

  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

css-grid for Grid

css-grid should be default choice for grid. It is supported on IE and easier to deal with.

有考虑过压缩后库体积的问题么?

我写 ether-vway 的时候,一开始是使用 jquery 当做基础包,现在正通过复写其中一些简单功能取消对 jquery 的依赖。

过程中自然是使用原生 api 代替 jquery 的操作。问题在于,原生 api 都太长,比如 document.querySelectorAll, document.createEvent 之类,这些都不可被压缩。所以在考虑要不要做一些简单的封装,或者简单的做一个变量 var doc = document 之类,主要目的是使之可以被压缩。也可能直接不管这些就用原生 api。

目前懒得去比较具体有哪些压缩方式、具体能压缩多少,想问问你怎么看待压缩这件事?

为啥呢?

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getConfig' of undefined"

found in

---> at /Users/alicia/Documents/develop/github/heyui/heyui/src/components/form/formItem.vue
at /Users/alicia/Documents/develop/github/heyui/heyui/src/components/form/form.vue

warn @ vue.js:584
vue.js:1719 TypeError: Cannot read property 'getConfig' of undefined
at VueComponent.mounted (heyui.js:10)
at callHook (vue.js:2895)
at Object.insert (vue.js:4084)
at invokeInsertHook (vue.js:5851)
at Vue$3.patch [as patch] (vue.js:6070)
at Vue$3.Vue._update (vue.js:2637)
at Vue$3.updateComponent (vue.js:2765)
at Watcher.get (vue.js:3113)
at new Watcher (vue.js:3102)
at mountComponent (vue.js:2772)
logError @ vue.js:1719
vue.js:584 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getConfig' of undefined"

found in

---> at /Users/alicia/Documents/develop/github/heyui/heyui/src/components/form/formItem.vue
at /Users/alicia/Documents/develop/github/heyui/heyui/src/components/form/form.vue

warn @ vue.js:584
vue.js:1719 TypeError: Cannot read property 'getConfig' of undefined
at VueComponent.mounted (heyui.js:10)
at callHook (vue.js:2895)
at Object.insert (vue.js:4084)
at invokeInsertHook (vue.js:5851)
at Vue$3.patch [as patch] (vue.js:6070)
at Vue$3.Vue._update (vue.js:2637)
at Vue$3.updateComponent (vue.js:2765)
at Watcher.get (vue.js:3113)
at new Watcher (vue.js:3102)
at mountComponent (vue.js:2772)
logError @ vue.js:1719
vue.js:584 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getConfig' of undefined"

found in

---> at /Users/alicia/Documents/develop/github/heyui/heyui/src/components/form/formItem.vue
at /Users/alicia/Documents/develop/github/heyui/heyui/src/components/form/form.vue

warn @ vue.js:584
vue.js:1719 TypeError: Cannot read property 'getConfig' of undefined
at VueComponent.mounted (heyui.js:10)
at callHook (vue.js:2895)
at Object.insert (vue.js:4084)
at invokeInsertHook (vue.js:5851)
at Vue$3.patch [as patch] (vue.js:6070)
at Vue$3.Vue._update (vue.js:2637)
at Vue$3.updateComponent (vue.js:2765)
at Watcher.get (vue.js:3113)
at new Watcher (vue.js:3102)
at mountComponent (vue.js:2772)
logError @ vue.js:1719
vue.js:584 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getConfig' of undefined"

found in

---> at /Users/alicia/Documents/develop/github/heyui/heyui/src/components/form/formItem.vue
at /Users/alicia/Documents/develop/github/heyui/heyui/src/components/form/form.vue

warn @ vue.js:584
vue.js:1719 TypeError: Cannot read property 'getConfig' of undefined
at VueComponent.mounted (heyui.js:10)
at callHook (vue.js:2895)
at Object.insert (vue.js:4084)
at invokeInsertHook (vue.js:5851)
at Vue$3.patch [as patch] (vue.js:6070)
at Vue$3.Vue._update (vue.js:2637)
at Vue$3.updateComponent (vue.js:2765)
at Watcher.get (vue.js:3113)
at new Watcher (vue.js:3102)
at mountComponent (vue.js:2772)

Menu组件的 Active 状态是否可以开放出 API,便于自行辅助控制。

组件自身已经处理了 Active状态,但是留一个控制接口自行处理会更完善一些,比如:

菜单一
菜单二
菜单三

当我点击过“菜单二”,再点击“菜单三”,然后点击浏览器的回退,此时菜单项中,受 Active状态控制的样式依然停留在菜单二上。
当然这个现象可以作为bug处理掉,但还有些属于页面元素点击跳转,而非菜单触发的情景,也需要菜单项的Active状态做出响应,所以增加一个自定义的API会是比较好的办法。

讨论:组件命名

原码及文档中都使用了大写开头的驼峰命名,例如TableItem Button等。但按照Vue文档说明和风格指南,建议使用小写命名,并至少包含一个连字符-

我看到源码中其实也有注册h${ComponentName}的组件,所以我在使用的时候是直接改了名字的,使用的h-button之类的。

建议这里遵循风格指南,组件名使用小写字母,统一以h-开头,尤其是像Button这种组件,极易与HTML原生元素混淆,分开后有利于减少混淆。

textarea的样式问题

描述这个bug
我在使用基于Vue的另外一个markdown组件mavonEditor 时
出现以下情况
如图

chrome浏览器

editorconfig or prettier config

Please put your editor configuration file or create one. My formatting doesn't match with yours and formats too many lines than necessary.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.