easysoft / zui

ZUI is an HTML5 front UI framework.

ZUI 3

ZUI 3 是一个全新的开源 UI 组件库，提供了丰富的实用组件，并提供自由的定制使用方式，不依赖任何 JavaScript 框架，可以在任何 Web 应用中通过原生的方式使用。

访问 https://easysoft.github.io/zui/3/ 来提前预览组件库。

👉 如果你需要访问 ZUI 1，请访问 https://openzui.com/ ，ZUI 1 源码已经转移到 zui1 分支。

特性

• 🌸 丰富的 CSS 工具类：基于 Tailwind CSS 提供了丰富的 CSS 工具类，包括特别的语义化外观类名；
• 💠 强大的 JS 组件：基于 Preact 提供了大量 JavaScript 组件，每个组件提供了大量实用的功能选项；
• 💖 友好现代的界面：提供了经过精心设计的界面风格，所有组件交互经过反复优化和验证以提供最佳方式；
• 🌗 主题和深色模式：基于 CSS 变量的主题模式，快速生成主题，内置支持深色模式
• 📦 自由使用：不依赖具体的框架，所有 CSS 工具类开箱即用，所有 JS 组件支持原生调用，丰富的引入方式，支持通过 ESM 导入，或者直接在浏览器中引用整个 JS 和 CSS，支持打包定制自己的组合版本；
• ⚙️ 高度定制：除了按需引入，还支持打包定制自己的组合版本，避免多余

一些激动人心的新特性正在开发，包括：

• 交互式的文档示例；
• 在线演练场；
• 主题设计器；
• 设计规范指导文档；
• 可配置的定制打包机制，支持在线生成打包配置；
• 适用于 React 和 Preact 的组件库；
• 通用组件插件机制，允许对所有组件进行扩展。

快速预览

使用 CSS 工具类

<button class="btn primary">ZUI 3</button>
<button class="btn primary-outline">Read more</button>

使用 JS 组件

<menu id="colorPicker"></menu>

<script>
const colorPicker = new ColorPicker('#colorPicker', {
    heading: '选择颜色',
    defaultValue: '#0ea5e9',
});
</script>

开发

安装

$ pnpm install

启动开发服务器

$ pnpm dev

构建

$ pnpm build

文档开发预览

$ pnpm docs:dev

文档构建

$ pnpm docs:build

技术栈

• Node.js 18+
• 包管理器：pnpm
• 构建工具：Vite
• CSS 工具库：TailwindCSS
• 静态文档网站生成：VitePress
• TypeScript 4.5+
• 字体图标生成：Fantasticon
• JS 组件开发 preact.js

FAQ

• 为何没有 ZUI 2？
  • ZUI 3 和 ZUI 1 跨度太大了，所以跳过了大版本号。
• 我可以在项目中使用吗？
  • 目前 ZUI 3 处理快速开发中的不稳定状态，如果没有深入了解项目源码，不建议在真实项目中使用，欢迎参与项目开发。

zui's Issues

关于用户手册

现在的用户手册只能作为演示效果
实际上要用来指导开发，可能还有点费劲呢
如果能做好指导开发的文档，ZUI会更有吸引力

弹出框取消后仍然有选中状态，BOOTSTRAP默认没此问题

弹出框取消后仍然有选中状态，BOOTSTRAP默认没此问题

表格缺少排序样式

表格缺少排序样式

datatable插件显示的横向滚动条效果只有拖到最下面才可以看到么？

我尝试用datatable插件做个列表显示，但是由于行数较多。
当我想查看第一条数据的后面几列的时候，需要把页面拉到最下面，
然后再把横向滚动条拉到后方的位置才能看到。

不知道是不是有存在类似于表头固定（fixedHeader）那样
固定表格的横向滚动条在显示范围下方的方法呢？

建议集成富编辑器TinyMCE

kindeditor已经基本停止维护，而且还存在很多不稳定和不兼容的情况。
tinymce作为全球最老最成熟的富编辑器，而且可以做到响应式，建议zui集成。

zui.sexy网站路由失效

http://zui.sexy/ 网站路由失效，无法前进后退。不知去哪反馈，只能在这提交了。

关于日历的一个BUG

var calendar = $('#calendarExample').data('zui.calendar');
var newEvent = {title: '吃饭了', desc: '要吃更多', start: '2014-8-14 12:00', end: '2014-8-14 13:00'};
calendar.addEvents(newEvent);
--------运行错误-----------------
Uncaught TypeError: undefined is not a function

弱弱的问下，输入组没有验证么...？

RT~~
貌似H5自带的验证和框架都没有
只能自己写JS了咩？

caught TypeError: $.zui.modalTrigger is not a constructor

We meet the issue at those code as below:

var myModalTrigger = new $.zui.ModalTrigger(options);
myModalTrigger.show();

when we wanna create a modaltrigger objects.

zui-theme.css .panel-group .panel 编译问题

以indigo主题为模板，修改@border-radius-large为 0px;
@color-primary: #3F51B5; @color-secondary: #3949AB; @color-pale: #ECEFF1; @border-radius-base: 0; @border-radius-large: 0px; @border-radius-small: 0;

编译下载zui-theme.css后使用发现，panel仍然有圆角。

原因如下

zui-theme.css文件没有覆盖 .panel-group .panel 的radius样式。

有没有现成的后台管理布局呢？

有没有现成的后台管理布局呢？，不然自己拼很麻烦。。

droppable.js组件系列有文档吗？

如题？

多语言

很棒的前端框架，一次集成了所需要的东西，可以搞个英文版，多语言的。让老外也感受感受zui魅力

autocomplete需要优化一下

autocomplete属性默认是打开的，但是在出现自动提示的时候这些提示会**跟着页面滚动，遮住其他页面元素，体验比较差，这个地方至少给一个属性什么的，让用户选择原生提示方式或者你们优化过的提示方式**吧。

请问 zui 的文档是用什么工具生成的？

希望解答哦 谢谢！

文件上传时，如果设置了multi_selection:false，每次只能选择一个文件，但是可以多次选择，文件队列会一直叠加，建议修复成：再次选择时替换原本队列中已选择的文件

在js方法ModalTrigger.prototype.showk中有个bug

     $modal.toggleClass('fade', options.fade)
            .addClass(options.cssClass)
            .toggleClass('modal-md', options.size === 'md')
            .toggleClass('modal-sm', options.size === 'sm')
            .toggleClass('modal-lg', options.size === 'lg')
            .toggleClass('modal-fullscreen', options.size === 'fullscreen')
            .toggleClass('modal-loading', !this.isShown);

这里的modal-md,modal-sm,modal-lg,modal-fullscreen,modal-loading应该要加到$dialog上才会有作用，否则在使用lg时样式会乱

    $modal.toggleClass('fade', options.fade)
        .addClass(options.cssClass);

    $dialog.toggleClass('modal-md', options.size === 'md')
        .toggleClass('modal-sm', options.size === 'sm')
        .toggleClass('modal-lg', options.size === 'lg')
        .toggleClass('modal-fullscreen', options.size === 'fullscreen')
        .toggleClass('modal-loading', !this.isShown);

仪表盘初始化时怎么设置初始化排序？

http://zui.sexy/#view/dashboard/1
初始化数据data中没有order选项，如果在用户拖动顺序后afterOrdered事件里保存了新的顺序，怎么在初始化的时候加载？

文件上传，如果初始化时设置了staticFiles(初始静态文件对象数组)值，文件队列的上传状态不显示，而且添加文件时上传状态(尤其是大小)只显示当前选择的，建议修复此bug

Uncaught TypeError: Cannot read property 'strCode' of undefined at zui.uploader.js:49 at zui.uploader.js:897

Uncaught TypeError: Cannot read property 'strCode' of undefined
at zui.uploader.js:49
at zui.uploader.js:897

图表控件在不刷新页面的情况下，重复渲染，当鼠标划过的时候，会显示旧的数据。

/*!

• ZUI: Standard edition - v1.5.0 - 2016-09-06
• http://zui.sexy
• GitHub: https://github.com/easysoft/zui.git
• Copyright (c) 2016 cnezsoft.com; Licensed MIT
  */
  ——————————————————————
  使用以上版本的zui程序,引用了zui.chart.min.js

使用如下方法创建饼图
var myPieChart = $("#myPieChart").pieChart(data, options);
第一次渲染显示正常。

——————————————————————

再次使用调用
$("#myPieChart").pieChart(data, options);
第二次渲染，看似显示正常，但当鼠标划过图表的时候，图表会显示旧的数据，且新旧数据交替显示。

无奈之下，只能手动将旧的实例的数据清空
var length = myPieChart.segments.length;
for (var i = 0; i < length; i++) {
instance.removeData();
console.log(i)
}
并再次渲染，才能得到没有旧数据的图表
$("#myPieChart").pieChart(data, options);

———————————————————————

期望结果：
每次重新渲染不需要手动清空旧的数据。
希望作者可以改进。

1.5.0版本漂浮消息报错：TypeError: Cannot read property 'id' of undefined

以 new $.zui.Messager(message) 方式创建 Messager 实例即可触发。

报错位置：

zui/src/js/messager.js

Line 38 in a224dd0

that.id = options.id || (id++);

由 a224dd0 引入

sublime编辑器语法提示插件~

uk就提供了~，不知道zui能不能做一个~

跟vue结合，动态生成lightbox点击图片不展示大图

代码如下

...
<div v-for="chat in chats">
    <span v-if="chat.media == 1">
        <img data-toggle="lightbox" v-bind:src="chat.s_imageUrl" class="img-thumbnail" alt="" v-bind:data-image="chat.imageUrl" data-caption="" />
    </span>
</div>
...
<script type="text/javascript">
    var vm = new Vue({
        el: '#chat',
        data: {
            chats: []
        }
    });
    var wsc = new WebSocket('ws://' + location.hostname + ':3000/cust-client/cust/connect?account='+account);
    wsc.onmessage = function(evt){
        vm.chats.push(evt.data)
    }
</script>

现在的情况是这样，如果我在data中初始化chats，比如data:{chats:[msgObject1]}，图片能正常显示，点击图片也能展示大图，但是如果是在websocket中接收到message对象，再往data中塞的时候，图片也能正常显示，点击没有反应，console中也看不到异常信息，折腾了半天没搞定，这是我代码写的不对吗？

用来Chosen之后，输入组变成这样。。

用来Chosen之后，输入组变成这样。。

zui 现在 还有人维护么

还有没有人维护 ，打算 做一个网站 前端 选择一款框架

modal很nice，但是ajax调用只能用url传递参数，建议增加ajax传递参数的接口

我用tp开发，由于变态的url设定，使用url传递参数不太好，因此建议增加ajax调用的传递参数用法，谢谢
翘首以待。

lib里集成的Kindeitor有问题

数据表格的问题

如图, 当数据表格的表头部分存在多行多列时, 无法正常启用数据表格.

不知道大家用到这种情况的地方多不多.

ie下无法使用dist\lib\calendar\demo.html

ie9 - ie11 calendar.addEvents(newEvents); 没有执行 events中为空

图表：柱状图不能显示颜色

/*!

• ZUI: Standard edition - v1.5.0 - 2016-09-06
• http://zui.sexy
• GitHub: https://github.com/easysoft/zui.git
• Copyright (c) 2016 cnezsoft.com; Licensed MIT
  */

使用以上版本的zui ,调用柱状图（或者曲线图）

var data = {
labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
datasets: [
{
label: "蓝队",
color: 'primary',
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "绿队",
color: 'green',
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};

var options = {responsive: true}; // 图表配置项，可以留空来使用默认的配置
var myBarChart = $('#myBarChart').barChart(data, options);

但得到的图表只有灰黑色，没有办法显示彩色。

但调用饼图就能获得彩色的图像。

希望作者检查是否bug
希望作者能够改进。

日期选择: 点击 X 清空日期，再次调开日期控件，此时不能进行月份的增减

/*!

• ZUI: Standard edition - v1.5.0 - 2016-09-06
• http://zui.sexy
• GitHub: https://github.com/easysoft/zui.git
• Copyright (c) 2016 cnezsoft.com; Licensed MIT
  */

使用以上的zui版本文件，点击 X 清空日期，再次调开日期控件，此时不能进行月份的增减

图表控件不支持ie8

使用zui 1.5,并使用以上的兼容性代码，在ie8上使用图表控件,不能显示正常的饼图，线型图及柱状图。

官方数据表格最后一个例子存在BUG

缩小浏览器，滚动至最后，当滚动到图中那个位置时点击“更新评分”按钮，会发现标题头浮动而且位置不对：

强烈建议更换更好用的日历控件

推荐：https://chmln.github.io/flatpickr/
或者：http://www.jayui.com/jedate/

【BUG】点击分页条中激活状态的那个li，会导致激活状态取消，变成hover上去变色

分页条：http://zui.sexy/#component/pager

建议，数据表格插件增加表头钉住功能

需求是这样的，今天看到项目中的数据表格插件能锁定横向的评分之类的。
在oa或者管理后台之类的项目中，表格往往有很多行，往下滚动之后就忘记了哪一行叫什么名字。
希望也能钉住表头。

不知道我表述的清不清楚。如果不清楚请回复

建议集成bootstrapvalidator插件

用的挺频繁的，建议集成哦。

文档的生成构建是不是没开源呢

对于init.json的生成感兴趣，这部分是否可以共享，谢谢。

日历组件启动参数startDate无效

启动参数startDate无效，查看代码后发现一个重复赋值问题，手动去掉后解决。

错误在 lib/zui.calendar.js 102行，此处
this.date = 'today';
将上方99行的
this.date = this.options.startDate || 'today';
给重新赋值了。

使用dropdowm 改变宽度时不灵活

当div.dropdown 设置宽度的时候，内容下面的div.dropdown>.dropdown-menu 并不会随之改变。若以插件的角度来看待，他们应该同时改变。

拖拽选取 页面挂掉了

http://zui.sexy/#javascript/selectable

关于表格自定义列宽问题

希望能支持自定义列宽！

文档不是用markdown语法么？

不是用markdown语法么? 请问有什么工具可以分享么？

栅格系统还是升级下吧，float:left 不好用。。。

            <form action="" class="row">
                <div class="form-group col-sm-6 col-md-4 col-lg-3">
                    <label>门店名称</label>
                    <input type="text" class="form-control">
                    <div class="help-block">用户名可以包含特殊字符及汉字。</div>
                </div>
                <div class="form-group col-sm-6 col-md-4 col-lg-3">
                    <label>负责人</label>
                    <input type="text" class="form-control">
                </div>
                <div class="form-group col-sm-6 col-md-4 col-lg-3">
                    <label>电话</label>
                    <input type="text" class="form-control">
                </div>
            </form>

这个电话 本来应该是另起一行才对。。。

官方例子中的数据表格在safari下行高过大

官方例子中的数据表格在safari下行高过大。

建议增加autocomplete控件

或者扩展choose实现autocomplete（服务端获取数据）的功能

关于模态框组件,不支持定义按钮

模态框组件现在支持定义标题和内容, 可不可以支持定义按钮?
这样可以方便替换confirm这些原生的确认对话框等. 或定制其他功能. 谢谢

图片上传控件中 svg格式上传 ，在服务端接收到的数据类型对应错误

上传一个svg格式的文件

PHP的服务端打印的日志

array(14) {
  ["file_name"]=>
  string(12) "placemap.svg"
  ["file_type"]=>
  string(10) "text/plain"
  ["file_path"]=>
  string(44) "/home/evenvi/workspace/wips_view/assets/map/"
  ["full_path"]=>
  string(56) "/home/evenvi/workspace/wips_view/assets/map/placemap.svg"
  ["raw_name"]=>
  string(8) "placemap"
  ["orig_name"]=>
  string(0) ""
  ["client_name"]=>
  string(12) "placemap.svg"
  ["file_ext"]=>
  string(4) ".svg"
  ["file_size"]=>
  int(17806)
  ["is_image"]=>
  bool(false)
  ["image_width"]=>
  NULL
  ["image_height"]=>
  NULL
  ["image_type"]=>
  string(0) ""
  ["image_size_str"]=>
  string(0) ""
}

mime发生变更了，svg应该对应的是'image/svg+xml', 'application/xml', 'text/xml'

然之协同里面的表格导出乱码

系统：OS X EI Captian
浏览器：Chrome 51.0.2704.103 (64-bit)
然之版本：3.4

导出任务表格的时候，不论选择哪种编码方式都是乱码