chenz24 / vue-blu

UI Component Library Base on Vue.js(2.x) and Bulma

Attention

I'm very sorry about the lack of concern about this library Recently. So busy in doing other things and I have no time to maintain it. I will be back in 2 about months. Thanks everyone!(20191203)

近期其他事过于繁忙，以致没时间维护这个库了。很抱歉，不能更新和回答大家的问题。我会在大约两个月后回来继续更新维护它。谢谢大家的支持！(20191203)

• 如果有相关技术问题，可以加我v：baidudw

Vue-Blu

Vue-Blu is an ui components library base on VueJS and Bulma that helps you build your web application easily

Documents & Demo

documents & demo

Installation

Blu is available on NPM

npm install vue-blu --save

Quick Start

import Vue from 'vue'
import VueBlu from 'vue-blu'
import 'vue-blu/dist/css/vue-blu.min.css'

Vue.use(VueBlu)

Development

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run package

Version

• 0.1.9 beta

Compatibility

• Vuejs(2.1.6+)
• Modern browsers and IE10+

Credits

Blu is inspired or powered by these people or projects so I want to thank them

• Vue great work
• Bulma A modern CSS framework based on Flexbox
• vue-admin for the original idea
• ant-design some api design are referenced from this project
• element-ui for the vue-markdown-loader

Copyright and License

Code and documentation copyright 2017 Chenz. Code released under the MIT license. Docs released under Creative Commons.

TODO

Migrate to Vue 3.x in future.

vue-blu's Issues

你好，问一下你的notify或者modal这样的全局组件是怎么写的？

需要用到什么知识点？能详细说一下吗？

modal ok-loading cancel

Thank you for adding the ok-loading attribute, I'm using it when submitting a form and waiting for the remote response before then manually closing the modal.

Is it possible to have the Ok button stop spinning in the case where the remote response comes back with an error? i.e. is there a way to manually stop the loading spinner and make the button show "Ok" again?

When i try to import the sass from 'vue-blu/src/scss/main.scss' it fails for unexpected @character

if i have in my main.js

import 'vue-blu/src/scss/main.scss'

webpack answers this:

Module parse failed: C:\Users\pietro.caruso\Desktop\archi-suite\node_modules\vue-blu\src\scss\main.scss Unexpected character '@' (8:0)
You may need an appropriate loader to handle this file type.

i am using the webpack-simple config with sass enabled

select component missing from vue-blu-master

In src/index.js the following lines cause errors due to missing src/components/select module in vue-blu-master:

Line 33:
import { Select, Option } from './components/select';

Lines 74/75:

  bSelect: Select,
  bOption: Option,

Aside footer buttons

Re https://chenz24.github.io/vue-blu/#/components/aside

Is there a way to specify a callback for the footer buttons on the aside component?

Clicking "OK" or "Cancel" both close the aside and there's no documentation for calling extra functions.

Notify closable default is true

In docs it says that the default for closable is false.

Toggle of calendar/close icon for inline DatePicker fields on mobile (Android)

On mobile (Android) the calendar/close icon toggle is backwards.

When I select a date it shows the calendar icon (instead of close):

Clicking the calendar icon clears the field and changes to a close icon:

So the calendar/close toggle state for the inline fields is backwards I think :)

Feature Request: nav Component

Are there any plans to implement the nav component? (http://bulma.io/documentation/components/nav/)

Can't use simple list inside a tab

Hey,

at the moment it isn't possible to use a simple list inside a tab.

  <ul>
    <li>Foo</li>
    <li>Bar</li>
  </ul>

Perhaps you could use div Elements for the structure instead of ul/li.

What do you think?

Bye,
Alexander

新手疑问

我在项目里引用了之后，也没有报错，但是这是怎么回事呢？

你好，可以针对没有使用过npm的新手出一个教程吗？

十分抱歉的提出这个需求，我是一个想要入门的新手。
看到您的前端框架，十分想要体验一下。 但是以前没有使用过npm之类的东西。
看不懂您写的Quick Start。
不知道该在什么地方import 。
还望不吝赐教。

Error on npm run dev or build

When I try npm run dev I get this error:

Error: Cannot find module '/Users/ae/develop/_web/_hugo/artifacial/node_modules/vue-blu/build/dev-server.js'

I did npm install in the vue directory to load the dependencies. Obviously it is missing the whole build directory. I think I am missing something in the process?

组件渲染失败

[Vue warn]: Error when rendering component

InputNumber class attribute

It would be nice if we could set the class on InputNumber fields like you can with standard Bulma fields (for things like validation, e.g.

:class="{'input': true, 'is-danger': fieldInvalid }"

Using the above currently adds the styling to the outer container making it look like a field within a field.

(also, on the docs in the API section you've put "me" instead of "min" for the minimum value attribute)

Is there an english version for docs?

I was looking to find the docs in English but could not.

Some DatePicker fields appear unstyled and use system calendar on mobile (Android)

Some of the DatePicker fields do not appear styled on mobile while others do:

Also, the unstyled fields show the system default calendar while the styled ones show flatpickr:

InputNumber field does concatenation

If I type a number in an InputNumber field and hit "+" it concatenates the 1, eg enter 5, hit "+" button, field shows 51 not 6. Likewise hitting "-" shows "5-1".

Need to convert input value to integer first :)

Aside/modal "refresh" function?

I'm not sure if "refresh" is the right word, but is there a way to manually trigger loading/initialization of components that are within a modal or an aside?

Not sure if this is related to #44 but if I have a Google Maps autocomplete field or map within an aside, it doesn't load properly (the autocomplete doesn't work and the map only renders the Google logo but not the map tiles/icons). I'm using https://github.com/xkjyeah/vue-google-maps

For example, this will render a map if used in the main part of a page:

<gmap-map
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
></gmap-map>

However if I put this within an aside (<b-aside>) element it only renders the Google logo and does not load the map tiles. Likewise other components like the Autocomplete work in the main page but not within the aside.

I was wondering if there is a way to trigger the aside to "refresh" to load/init these elements, or is there a better way of doing it? i.e. is there some Vue way of initializing/triggering components to load manually?

可以用script标签引入吗？

可以用script标签引入吗？

Using Bulma

Can I use my current Bulma variables (colors, font-family, etc) to work on vue-blu? How?

Closing animation

The Notify and Modal components doesn't have any closing animation, any chance to have this?

dropdown下拉菜单无法设置跳转链接

如图：

请问如何设置跳转链接

props没同步修改

看了下源码 比如pagination

watch: {
    current(val) {
      if (val !== this.interCurrent) {
        this.handleChangePage(val);
      }
    }
}

current修改的时候，会触发handleChangePage
但是 因为interCurrent修改的时候，没有同步修改传进来的prop current，所以可能watch的current并不一定会被触发。
打个比方，一开始current传进来的时候是1，点击页码变成第2页，即interCurrent被修改成了2，此时，如果在父级去设置this.current=1，这时候，pagination就不工作了，因为一直都是1

vue组件化主张的应该是不去修改props的，1.x版本有.sync被废除了，额。。。。觉得越来越别扭

table表格引入分页组件后layout不生效

win10

code

const data = [{'id': 1, 'work_no': '23-4608596', 'given_name': '哲恒', 'family_name': '鲁', 'name': '鲁哲恒', 'birthday': '1986-03-24', 'email': '[email protected]', 'gender': 'Male', 'achievement': 81.0, 'remark': 'bibendum imperdiet nullam orci pede'}]
export default {
components: {
Xcontent
},
data () {
return {
data: data
}
},
computed: {
pagination () {
return {
total: this.data.length,
layout: 'total, pager'
}
}
}
}

Menu的click事件如何获取循环的当前对象

<menu-item v-for="page in sidebarPages" :click="changePage"> <span>{{page.name}}</span> </menu-item>执行changpage事件的时候如果获取page

DatePicker requires manual reset/clear

I'm using a datepicker component within an aside, and I'm setting its v-model to an empty string each time I open the aside modal, however if I choose a date, close the modal, the re-open the modal, the date I last picked is still shown in the datepicker (even though the v-model variable has been reset to an empty string).

The way I'm using to get around this is to give the datepicker a ref, e.g. <datepicker ref="date" and then when the modal is closed I not only reset the v-model variable but also call vm.$refs.date.flatPickr.clear() which seems to work.

So the bug seems to be that the value remains in the field after a date is selected, even if the v-model variable is reset.

DatePicker enableTime:true has .flatpickr-time height: 0

I copy/pasted the example from the demo:

<datepicker placeholder="开启时间选择.." :options="{enableTime: true}"></datepicker>

However I couldn't see the time picker part. I inspected the HTML and saw there was a .flatpickr-time element however its height was set to 0 in the CSS. Guessing it's a bug but let me know if you can repro.

$modal default title is "提示"

The default title for this.$modal.confirm is "提示" instead of "Confirm" or "Prompt" or blank.

scss error

Re https://chenz24.github.io/vue-blu/?ref=madewithvuejs#/customize

node_modules\vue-blu\src\scss\elements\progressbar.scss has an undefined $font variable

I can fix this my setting $font in my variables.scss but it might be an idea to set a default :)

Also I noticed that if I use scss my fonts/colours look like the Bulma defaults, but if I import the dist css it looks like the Vue Blu site. It might be nicer for users to use the default Bulma styles for the dist css :)

Import components on demand

Any way to import components on demand? Something like

import { Alert, Tooltip } from 'vue-blu'

Vue.component('alert', Alert)

That doesn't work.

Popconfirm: Cannot read property 'destroy' of null

Hi,

First of all thanks for the nice library!
I think I've found a bug while using the popconfirm component. I've used it to confirm a deletion of an object. When clicking on 'OK', the component itself is removed (so including the popconfirm component). Although the popconfirm component doesn't exist anymore, it tries to destroy itself after a timeout of 300ms, which results in the following error message:
Uncaught TypeError: Cannot read property 'destroy' of null

A workaround is to set a timeout before removing the component, but that's not really a nice thing to do.

Do you have a solution for this?

Thanks!

新手疑问

请问是不是download，然后运行index.html就能显示Demo的界面？

Directly including vue-blu.js

I included vue-blu.js and:

Vue.use(window["vue-blu"]);

I got Uncaught TypeError: a.apply is not a function

How to add another callback attribute in the InputNumber component

Example: if I want add a label id in the InputNumber component's callback function to find which label is changed, what can I do?

这个项目会不会一直维护下去呢？

你好，vue-blu很漂亮，小伙伴儿们看了也都挺喜欢！
冒昧的问一下，这个项目目前就你一个人在维护吗？会不会一直维护下去呢？

希望能增加几个布局容器组件

例如:目前我想实现类似于方框形的那个tab,不论多少tab,中间是等分的的宽度
layout里面的12等分布局,在mobile下不论怎样都会每行一个块级显示
多媒体组件没有:例如卡片组件,单纯构建一个图文卡片,这个很有用
列表list目前也是没有看到

建议出一个简单的后台模板脚手架

建议出一个简单的后台模板脚手架，便于框架的推广使用者快速入门

demo和文档没有完整的vue写法

如题。
还有能不能再vue-admin中直接集成呢？

如何获取从tab上获取tab-item里面的label内容?

template>
	<div class="columns" id="bottom-nav-fixed">
	  <div class="column">
	    <tabs :on-tab-click="tabCallback" type="toggle" :is-full-width="true" layout="bottom" >
	      <tab-item label="Pictures" icon="image"></tab-item>
	      <tab-item label="Music" icon="music"></tab-item>
	      <tab-item label="Videos" icon="film"></tab-item>
	      <tab-item label="Documents" icon="file-text-o"></tab-item>
	    </tabs>
	  </div>
	</div>
  </template>

	tabCallback:function(s){
		this.$notify.info({content:"打开了第 "+(s+1)+" 个tab"+"  ,路由为"+this.routerlist[s]+"标题:"+this.label})//这里获取不到label 提示未定义,如果用this.tabpanes.label也获取不到 children也获取不到,源码中这个是被集成过来的
		this.$router.push(this.routerlist[s])
		
		}

jquery in ./~/vue-blu/dist/vue-blu.min.js

vue-blu.min.js is looking for jquery when I try to run npm run dev

Do I need jQuery or am I missing something?

I use Laravel mix. I'm not sure if this is Vue-blu issue or Laravel issue.

阔以的

不错不错哦

希望能实现表单验证功能

form表单中能实现表单验证功能吗

InputNumber min behaviour

I noticed that if you try to exceed the max attribute the value is set to the max. That's nice :)

It would be nice for min to work the same, i.e. if someone attempts to backspace/delete the value it automatically sets to the min attribute.

Currently the console displays the following when the value is deleted:
[Vue warn]: Invalid prop: type check failed for prop "val". Expected Number, got String. (found in component <InputNumber>)

全是undefined

系统：macOs
浏览器：chrome
其他如下：

运行结果如下，全是undefined

请问到底是哪里的问题呢？

pagination pageSize

When the page size changes in the demo, "pageSize 50" etc is output in teh console. How do I turn this off?

Also, if a user is showing 10 per page, then goes to the last page, but then chooses to show 50 per page, the current page property should change to the last possible page. e.g. if I have 15 items and I'm showing 10 per page, and my current page is page 2, when I chose to show 20 per page nothing shows because I am still on page 2. Instead, pagination.current should reset to 1 because that's the last possible page I can be on.

I was going to set this myself in the callback but didn't know how to access the private page-size attribute (that gets printed to the console) if I'm using a computed pagination object.

@change function for Checkbox(group) not working

Hello,

I am a bit confused on how to call the change function for checkboxes:

I expected something like this:

<checkbox val="Kobe" @change="changeFunction">Kobe</checkbox>

But the call always goes to the _default function of the change properties instead of the "changeFunction"? So now we are using watch on the array and trigger changeFunction from there but I guess that this is not the intended behavior?

Besides this, wonderful work and I would love to see you on patreon.

vue-blu.min.css文件好像跟vue-admin的css有冲突

在 'vue-blu/dist/css/vue-blu.min.css'
加入前

加入后

modal does not close when OK pressed (in IE 11)

IE 11 console says SCRIPT438: Object doesn't support property or method 'remove'

内置的Bulma样式与bulma官网的最新样式一起用的时候，样式有冲突

内置的Bulma样式与bulma官网的最新样式一起用的时候，样式有冲突
内置是v0.2.3版本，最新是v0.3.1 版本。

样式就冲突了

table 固定表头后，表头没有和内容对齐

系统：win7 64
浏览器版本：谷歌 55.0.2883.75 m; 火狐：50.1.0