A Vue.js 2.0 UI Toolkit for Web

Overview

如果你有Vue组件建设经验,欢迎你加入我们一起完善ATUI

ATUI

Build Status codecov NPM download NPM version gzip size:JS gzip size:css license Gitter

A Vue.js 2.0 UI Toolkit for Web

require Vue.js >=v2.1.4


Install

$ npm install atui --save-dev

Quick Start

// css
import 'atui/dist/greater-blue.css'

// import atui
import atui from 'atui'

new Vue({
  components: {
    vButton: atui.Button,
    vDatePicker: atui.DatePicker
  }
})

// use as required
import vDatePicker from 'atui/lib/date-picker';
new Vue({
  components: {
    vDatePicker: vDatePicker
  }
})

use in browser

<script src="//unpkg.com/[email protected]"></script>
<script src="//unpkg.com/atui"></script>
<script>
  new Vue({
    components: {
      vButton: atui.Button
    }
  })
</script>

Roadmap

https://github.com/aliqin/atui/wiki/roadmap

License

MIT

Thanks

Comments
  • 表格自定义展示列

    表格自定义展示列

    给表格添加自定义展示列,仅显示title,不显示内容,也不报错 default

    `

    ` 相关版本: "atui": "0.0.30", "babel-preset-es2015": "^6.18.0", "vue": "^2.1.10", "vue-router": "^2.2.0", "vueify-insert-css": "^1.0.0"

    opened by 95502967 7
  • Update Table.vue Add Column Click Event

    Update Table.vue Add Column Click Event

    使用过程中我遇到一些问题,比如现在的Table组件的Td,正常使用或使用render函数生成一个Button按钮,没有很好的办法为它增加点击事件,我修改了一下Table.Vue实现了 想贡献一下 希望咱们Atui可以越做越好! 只需要在设置columns字段时增加一个对象名称为columnClick的方法即可完成调用改方法。 当点击字段的时候调用onColumnClick方法 判定传入columns对象的columnClick为方法时调用执行 参数为:column, record, rowIndex

    opened by hpym365 5
  • btnOkText options doesn't active.

    btnOkText options doesn't active.

    ATUI版本

    0.1.31

    Vue 版本

    2.5.13

    操作系统版本 & 浏览器版本

    windows chrome 60.0.3112.113

    关键代码或在线demo(比如jsfiddle、codepen)

    <v-button small v-on:click.native="deleteItem" >Delete Button</v-button>
    

    the deleteItem function:

    deleteItem: function(){
                    atui.Modal.confirm({
                        title: 'Confirm the operation',
                        content: 'Are you sure to delete this item?',
                        onOk () {
                            console.log('sure')
                        },
                        btnOkText: 'sure',
                        btnCancelText: 'Meditation'
                    })
                }
    

    btnOkText的配置是不成功的,还是默认的 “确认”。

    bug 
    opened by saviorZSC 2
  • chore(deps-dev): bump codecov from 1.0.1 to 3.6.5

    chore(deps-dev): bump codecov from 1.0.1 to 3.6.5

    Bumps codecov from 1.0.1 to 3.6.5.

    Release notes

    Sourced from codecov's releases.

    v3.6.4

    Fix for Cirrus CI

    v3.6.3

    AWS Codebuild fixes + package updates

    v3.6.2

    command line args sanitised

    v3.6.1

    Fix for Semaphore

    v3.6.0

    AWS CodeBuild Semaphore v2

    v3.3.0

    Added pipe --pipe, -l

    v3.1.0

    Custom Yaml file Token from .codecov.yml

    v3.0.4

    Security fixes

    v3.0.3

    Fix for not git repos

    V3.0.2

    No release notes provided.

    v3.0.1

    Fixing security vulnerability

    v3.0.0

    Removed support for node 0.12

    Fixing for older node

    No release notes provided.

    v2.2.0

    Added: Support for Jenkins Blue Ocean Added: Clear function to remove all discovered reports after uploading Fix for Gitlab CI

    v2.1.0

    Added support for flags http://docs.codecov.io/docs/flags

    v2.0.2

    ... (truncated)
    Commits
    Maintainer changes

    This version was pushed to npm by drazisil, a new releaser for codecov since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • English Version?

    English Version?

    First of all, ATUI looks really good, and is much more lightweight than Element UI. It looks really well designed and considered.

    But unfortunately there aren't any locales, currently. Is it planned to support English, and other languages? I would be happy to help out with bringing localisation to the library. I don't speak any Chinese, but I may be able to figure out many of the cases from context / other libraries localisation files.

    Apologies to post this here and ignoring the issue guidelines, which are outlined in Chinese.

    enhancement 
    opened by lehni 1
  • Menu动态渲染的数据结构,怎么获取selectedKey?

    Menu动态渲染的数据结构,怎么获取selectedKey?

    ATUI版本 [email protected]

    Vue 版本 "~2.3

    操作系统版本 & 浏览器版本 win10 /google

    关键代码或在线demo(比如jsfiddle、codepen) 使用了官方的demo https://raw.githubusercontent.com/aliqin/atui/dev/src/components/Menu/demo/data.md

    opened by SimpleNice 1
  • 表格属性@row-click,处理方法传参问题

    表格属性@row-click,处理方法传参问题

    给表格设置

    <v-table :data-source="stdDataSource" :columns="stdColumns" :row-selection="stdRowSelection" row-key="id" class="std-lib-content" @rowClick="trigLink(rowIndex,record)">`
    
    trigLink (rowIndex, record){
    	console.log(rowIndex);
    	console.log(record);
    //	baseItemToBeLinked[0]["link"] = record.name;
    //	this.baseDataSource.splice(this.baseDataSource.indexOf(baseItemToBeLinked[0]), 1, baseItemToBeLinked[0]);
    //	baseItemToBeLinked.pop();
    },
    

    两次打印都是undefined

    opened by 95502967 1
  • Modal组件里面使用Select组件出现的问题

    Modal组件里面使用Select组件出现的问题

    ATUI版本 官网文档的版本

    Vue 版本 官网文档的版本

    操作系统版本 & 浏览器版本 macOS Mojave 10.14.2 & Google Chrome 71.0.3578.98

    关键代码或在线demo(比如jsfiddle、codepen)链接

    官网文档对话框组件示例里 当我打开select选项并且关闭对话框时 image 对话框是关闭了,但是select组件的下拉框没有关闭 image

    opened by 747969780 0
  • Table组件的本地排序没效果

    Table组件的本地排序没效果

    这是没实现吗?
    sortAction (column, index, order) { if (typeof column.sorter === 'function') { // TODO:客户端排序 } this.sorderOrder[index] = order this.sorderOrder = Object.assign([], this.sorderOrder) this.$emit('table-change', this.pagination, this.filters, { field: column.dataIndex, order: order }) },

    feature request 
    opened by getlinerm 2
Releases(v0.1.34)
  • v0.1.34(Mar 16, 2019)

  • v0.1.32(Jan 10, 2018)

  • v0.1.31(Dec 3, 2017)

  • V0.1.3(Oct 24, 2017)

    • 修复Select组件tag无法关闭问题
    • 修复Select的Option选中无样式问题
    • 修复Select多选模式时外框无法自动撑开问题
    Source code(tar.gz)
    Source code(zip)
  • v0.0.31(Mar 8, 2017)

  • v0.0.30(Mar 8, 2017)

  • v0.0.29(Mar 7, 2017)

    New

    • 补充Affix组件的demo和测试用例

    Fix

    • 修复vue.use自动注册组件时没有兼容到不传prefix的场景
    • 官网部分文档调整
    Source code(tar.gz)
    Source code(zip)
  • v0.0.28(Mar 4, 2017)

    New

    • Trigger, Select, Popover 三个组件支持配置弹出层的自定义class以及z-index
    • Vue.use(atui)全局注册组件的时候支持加配置参数prefix 来覆盖默认的’v’开头的前缀,避免和其他组件名冲突

    Fix

    • 不兼容的特性,Select组件绑定数据使用v-model,支持双向绑定,去掉之前的default-value
    Source code(tar.gz)
    Source code(zip)
Owner
aliqin
阿里通信
aliqin
SP01-Treloo-UX - Travel Agency Web UI using Vuejs and VuetifyJS

Treloo Trello is a travel agency unreal platform (hahaha), just a Single Page UI

Backendpapa 7 Sep 28, 2022
vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition

vue-ya-semantic-modal Yet another semantic-ui modal component for Vue2 without Jquery but with pure Vue transition This component only provide a frame

null 20 Jan 20, 2022
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Vue Final Modal Looking for a Vue 3 version? It's over here ?? Documentation ?? Examples Introduction Vue Final Modal is a renderless component! You c

Vue Final 502 Nov 25, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius vue modal is simple library for Vue 3 only

Архипцев Евгений 62 Nov 9, 2022
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

??Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Vue Final 498 Nov 22, 2022
Vue-modally - a component based vue modal library

vue-modally is a component based vue modal library, in a simpler term, it lets you use any vue component as asynchronous/synchronous modal programmatically

Sulaiman Adewale 3 Jul 3, 2022
Vue-basic-alert - Basic Vue Alert Component for basic use cases

vue-basic-alert Basic Vue Alert Component for basic use cases. Demo Installation

An Do 3 Aug 13, 2022
Pixabay-gallery-in-vue-and-buefy - A gallery application in Vue and Buefy which uses pixabay API

PixaBay Gallery in Vue and Buefy Project Briefing This is a carousel based galle

Lightning Bolt 2 Aug 17, 2022
Vue modals with a single component

Vuedals VueJS (2.x) Plugin for multiple modals windows with a single component instance. DEMO View demo on jsFiddle What is this? A plugin to open sto

Javis V. Pérez 106 Nov 9, 2022
Easy to use, highly customizable Vue.js modal library.

Vue.js modal Easy to use, highly customizable Vue.js modal library. ?? Examples ?? Documentation ?? Changelog ?? Looking for maintainers ?? Sponsorshi

Yev Vlasenko 4.2k Nov 24, 2022
Modal window for vue.js

Vudal Modal window component based on Semantic UI design. (Does not require semantic ui, it is completely independent) Install plugin import { VudalPl

Egor Vakhrushev 38 Sep 18, 2022
A Vue modal with animations.

Vodal A vue modal with animations. Example Installation npm i -S vodal Usage <vodal :show="show" animation="rotate" @hide="show = false"> <div>A

neverland 374 Oct 3, 2022
A Vue component to display an image gallery lightbox

vue-image-lightbox A simple image/video lightbox component for Vuejs NPM Package I use CSS style from react-images Demo! Development (NPM / Yarn) npm

Dũng Nguyễn Thiện 320 Nov 6, 2022
⚠️ Vue 2 Simple Alert Component (SweetAlert Inspired)

⚠️ vue2-simplert Vue 2 Simple Alert Component (SweetAlert Inspired) Vue2-Simplert Now Coming as Vue.js Plugin Check : https://github.com/mazipan/vue2-

Irfan Maulana 216 Sep 9, 2022
Vue modal component for Semantic-Ui no jquery

Vue-Semantic-Modal Modal component for semantic-ui without jQuery Example Usage <modal v-model="showModal"> <p slot="header">Confirmation needed<

David Desmaisons 46 Jan 31, 2022
Simple vue draggable dialog

vue-dialog-drag Simple draggable dialog Demo Features: Drag & Drop Touch support (only for drag, not for drop) Drop area component 'Pin mode', to lock

emi 171 Nov 25, 2022
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js Live demo Examples directive component thumbnail

mirari 2.1k Nov 30, 2022
the messagebox component for Vue

vue-messageBox this component is attend to offer a easy way to cue user with message but not by bowser's way. Requirements this project is base on ECM

Shawn Cheung 13 Nov 24, 2022
Promisify dialogs in Vue!

Guide & Demo | 2.x docs | 1.x docs Introduction Promisify dialogs! A typical and essential type of user interaction is dialogs. Dialogs are somehow si

Jingkun Hua 293 Nov 5, 2022