It would be great if it could become possible to collapse the menu into a burger-like menu when the visitor is on smaller screens.

I have the following code and made a gif to show my problem.

1.) The wrong menu-items get highlighted. Seems like a 2 menu-item delay
2.) Router-Links (at-menu router) aren't working in dev environment - only in after bundling in prod.
3.) Before that I've used the router feature - <router-link><at-menu-item></at-menu-item></router-link> which resolved the 1st Problem and reverse the 2nd - links worked in dev but not in prod.

`

        <div class='nav-left'>
            <router-link :to="{ path: '/' }"><img class="header-logo" src="./../../assets/logo_noborder.png"></router-link>
            <at-menu-item :to="{ path: '/sponsors' }" name="1" class="general-menu-one"><i class="icon icon-award"></i>Sponsors</at-menu-item>
            <at-menu-item :to="{ path: '/users'}" name="2" class="general-menu-two"><i class="icon icon-users"></i>Users</at-menu-item>
        </div>
        <div  class='nav-right'>
                <div v-if="isAuthenticated" class="nav-right-user">
                    <at-submenu router>
                        <template slot="title"><i class="icon icon-user">User</i></template>
                        <at-menu-item :to="{ path: '/user/' + currentUserName }" name="1" class="usermenu-item-three"><i class="icon icon-home"></i>Profile</at-menu-item>
                        <at-menu-item :to="{ path: '/balance'}" name="2" class="usermenu-item-two"><i class="icon icon-layers"></i>Balance</at-menu-item>
                        <at-menu-item :to="{ path: '/settings'}" name="3" class="usermenu-item-three"><i class="icon icon-settings"></i>Settings</at-menu-item>
                        <at-menu-item v-on:click.native="logout()" :to="{ path: '/logout'}" name="6" class="usermenu-item-four"><i class="icon icon-log-out"></i>Logout</at-menu-item>
                    </at-submenu>    
                </div>
                <div v-if="!isAuthenticated" class="nav-right-login">
                    <at-button class="btn btn-apply" @click="login()">Login</at-button>
                </div>
        </div>
        </at-menu>`

Would appreciate help on that - thank you :)

This is one example
<at-input v-model="inputValue" placeholder="Please input"></at-input>
On initial load, it is working fine but when we are visiting any dead URL and going back from the page, all issues are popping up (due to AT-UI components).

We tried to use few components and it is throwing error in the console

1. Error while initializing app RangeError: Maximum call stack size exceeded
2. Property or method "inputValue" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
   3.TypeError: Cannot read property '$options' of undefined

Hey guys,

Thanks for the great work. I've been playing around with the library and got stuck trying to activate a given tab pane on load. Is there a way to do this via props or should I just use the active tab class?

Thanks!

Hi,
Just wanted to point, the type attribute of native button is a closed list:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
and has a special meaning, even in a text-based browsers:
https://www.cs.bu.edu/teaching/unix/lynx/

The at-button binds type property into native button property/attr. Hence the at-button of defult type:

<at-button type="primary">Primary Button</at-button>

translates to:

<button data-v-4352c070="" type="default" class="at-btn at-btn--default" data-v-a01f69b8="">
...
</button>

which seems fine, but is wrong, as default (and presumed) type is a button type
while the others are custom, library specific domain language terms:

<at-button type="text">Text Button</at-button>

becomes button with:

type='text'

The text is not a correct attribute by specs.

The pick of domain specific translation for a native term seems to prevents me from using builtin native feature like using cancel or submit types of buttons to use some built-in native behaviours in the browsers.

Let me know if you want a help with this,

Thanks!

I am getting the following error when we are using AT UI input component on NUXTJS framework:
[nuxt] Error while initializing app InternalError: too much recursion
Stack trace:
_traverse@http://localhost:8080/_nuxt/common.2bf36607221e21f9dbc9.js:6095:7
_traverse@http://localhost:8080/_nuxt/common.2bf36607221e21f9dbc9.js:6112:19
_traverse@http://localhost:8080/_nuxt/common.2bf36607221e21f9dbc9.js:6108:19
_traverse@http://localhost:8080/_nuxt/common.2bf36607221e21f9dbc9.js:6112:19

Here is my component code:

<template>
   <div class="eSubscribe">
            <a href="javascript:void(0)" class="subTxt" :class="{'hide':ishide}" @click.prevent="showEmail"><i class="icon icon-mail"/> Subscribe to New Offers</a>
            <div class="emailForm" :class="{'collapsed': iscollapsed}">
              <at-input size="large" placeholder="Enter your Email ID" append-button>
                <div slot="append">
                  <span>Subscribe</span>
                </div>
              </at-input>
            </div>
          </div>
</template>

<script>
	export default {
	  data () {
    return {
      ishide: false,
      iscollapsed: false
    }
  },
  methods: {
    showEmail () {
      this.ishide = !this.ishide
      this.iscollapsed = !this.iscollapsed
    }
	  }
	}
</script>

自定义模态框确定按钮的回调，同时也触发了on-cancel 事件？
自定义模态框

Where can I find Rich Text Editor (like Tinymce), I want to show that?

Is the framework still getting updates? I see future in this but its buggy in some things and misses components, wish i had time to support

Because .flex-center class has text-align: center style children elements (like select) break:

Steps to reproduce

1. 按照quickstart 初始化项目
   vue init at-ui/at-template my-project
2. 在main.js中注释掉 全局引用

import Vue from 'vue'
import App from './App.vue'
import 'at-ui-style'
// import AtUI from 'at-ui'

// Vue.use(AtUI)

new Vue({
  el: '#app',
  ...App
})

3. 在App.vue页面将示例代码拷上去

import { AtInput } from 'at-ui'

export default {
  components: {
    AtInput
  },
  data () {
    return {
      value: 'O2Team'
    }
  }
}

<template>
  <div>
    <at-input v-model="value" placeholder="请输入..."></at-input>
  </div>
</template>

Which browser?

chrome 版本 62.0.3202.94（正式版本） （32 位）

What is expected?

显示input

What is actually happening?

console报错
vue.esm.js?efeb:574 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Reproduction Link

Hello,

In Breadcrumb docs, It tells how to integrate with vue-router. But Menu will use more.
How do I use vue-router with menu component?

复现步骤：

• https://at-ui.github.io/at-ui/#/zh/docs/select 分组选项
• 点击下拉框，选择任意值，选择后值没有出现在框里面

When i run npm i, it report error like this:
ERROR in ./docs/main.js
Module not found: Error: Can't resolve 'at-ui-style' in 'D:\source-control\git\at-ui\docs'

for example, if i want to use the icons sliders, it exists on the site of feather, but not in at-ui

Hi. Some issues with the at-modal components. How can I prevent the modal from closing automatically when I click the confirm button? Is there a method I can call to programmatically close it? Would also be nice to see if there are methods to be able to detect when modal is open and when modal is closed. Maybe like an onShow and onHide.

重现路径

Dropdown 下拉菜单 -> 激活的方式 -> 点击Click 菜单 -> 点击某个选项，Dropdown 没有关闭

期望方式

点击某个选项后，应该能正常关闭 Dropdown

I would like to make a PR for table filters, but first I would like to know which kind of filters people would like to use in at-table.

1. Is a search bar for filtering a good idea? I wouldn`t like to scape the table scope for first, but if useful thats a thing to consider.
2. Basic filters -> give options.
3. Complex filters -> give options.

Thoughts on front-end and back-end sorting? I guess front-end only for now or give options to the developer/user?

Some egs.: the most generic example: age column, filter and show only rows with age over 38, or between age X and Y. Tags filter like ElementUI table is a thing to consider too, its so useful. Date filter.

Obs.: I won`t overload the table element as well so, go light. I pretend to start after discussing and getting thoughts on this, specially by @koppthe

Hello dears,
is it possible to align the pre-label input as shown in the orange line of the image below?

and thanks for your lovely UI framework :)

for the slider component, if I use it in this way:

<at-slider v-model="states[participator.uid].volume"></at-slider>

then I won't be able to change its value.

Is there a reason why the "Side Inline Navigator" toggling sooo laggy? Ive tested it in many pcs and its quite annoying :/

Setting the loading bar width via the config doesn't change the height, it remains at 2px.

When calling any of the triggers for the loading bar i.e this.$Loading.error() Vue emits the following console warning:
[Vue warn]: The data property "width" is already declared as a prop. Use prop default value instead.
This happens regardless if the width was set via .config() or not.

Steps to reproduce:

this.$Loading.config({
    width: 4,
});

this.$Loading.start();

Versions:
Vue: 2.4.3,
at-ui: 1.2.0-beta.2

This code is copy-pasted from the docs, I've just changed the theme to dark. You can see that SubMenu 7 is white text on white background.

Customizable modal have a property showClose which have default value true. After passing value false is still showing cancel button.

Copied just example from the documentation.

Steps to reproduce

Which browser?

Google Chrome
"at-ui": "^1.3.0",
"at-ui-style": "^1.5.0",
"vue": "^2.5.8",
"vue-router": "^2.8.1",
"vuex": "^3.0.1"

What is expected?

After passing showClose=False, close button shouldn't be visible in modal

Best Regards,
Andrzej

at-ui 官网也是使用vue来写的吧，有使用哪个已经成型的开源项目来弄的么，还是自己一点点写出来的？

cant resolve ‘at-ui-style’
src/stylesheet file is null

为了中文的阅读方便, 以及更好的推广.
建议 凹凸 Team 新增 一个中文的 Contributing 文件.

1.add full width property
(I know at-button can be add custom class but I think it should have)

2.disabled property should depend on params to control it
(I don't find disabled property in document)

use the code of official table example

It will be awesome if a card component could be available.

https://material.io/guidelines/components/cards.html

Cheers

I am using Nuxt.js, and used its boilerplate to build the Nuxt.js template.
This is the problem I am getting after importing import 'at-ui-style' code.

nuxt:render Rendering url / +3m
[vue-router] Failed to resolve async component default: SyntaxError: Invalid or unexpected token
[vue-router] uncaught error during route navigation:
/Users/bluemix/Odoo_OpendEduCat/auc_nuxtjs/node_modules/at-ui-style/css/at.css:1
(function (exports, require, module, __filename, __dirname) { @charset "UTF-8";
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:576:28)
    at Object.Module._extensions..js (module.js:623:10)
    at Module.load (module.js:531:32)
    at tryModuleLoad (module.js:494:12)
    at Function.Module._load (module.js:486:3)
    at Module.require (module.js:556:17)
    at require (internal/module.js:11:18)
    at r (/Users/bluemix/Odoo_OpendEduCat/auc_nuxtjs/node_modules/vue-server-renderer/build.js:7758:16)
    at Object.<anonymous> (server-bundle.js:3839:18)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.68 (pages/index.4d0ebf856b8182389e7a.js:85:70)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.62 (pages/index.4d0ebf856b8182389e7a.js:9:288)
    at __webpack_require__ (server-bundle.js:27:30)

and thanks for your great project 🙂

例如 column 里传的参数是

columns: [
  {
    title: '姓名',
    key: 'name'
  },
  {
    title: '年龄',
    key: 'age'
  },
  {
    title: '地址',
    key: 'address',
    children: [
      {
        title: '省份',
        key: 'province'
      },
      {
        title: '城市',
        key: 'city'
      }
    ]
  }
]

理论上应该可以渲染两级表格的表头。

Hello, is there a way to launch a "Notify" without being inside a component context? I'm implementing a login page and I want to launch a "Notify" at any given time, but I'm out of a component context, thanks for the help right away!

用了什么开源的系统吗

先把issue close了

Hi there

I just started to check out AT-UI and I like it very much so far! I just got two things I'm missing from the documentation:

• Is there any way to display links inside a table? I got an array of JSON objects that make up the table data. I would like to add a column "Edit" for each entry that will route to an edit component when clicked. I didn't find that possibilty so far?
• Is there any way to have filters for each column of a table?

Best regards

Hi!

In my case i need 24-col width on xs screen, 18-col width on sm screen and 12-col width on md screen.

<div class="row at-row flex-center">
  <div class="col-xs-24 col-sm-18 col-md-12"></div>
</div>

But sm always override xs:

It happens because max-width media query used.

Your framework is amazing. And I'm trying to use pagination, but I don't see any examples and am not sure how to go forward.

Do you have some code snippets?

在Menu的标签闭合处标签没匹配是不是个手误？

Hi!

Great work on this UI library 🎉

I tried with Nuxt.js but it seems that it does not support SSR, do you plan to support it? It should not be too hard, just making sure that window is used only if not defined.

I have the following code:

<div @click="addUser(name)"><at-checkbox></at-checkbox></div>

When I click on that checkbox - the event gets triggered twice. Putting the @click inside the at-checkbox doesn't work.

I've also tried with @select and @change but nothing worked. Ideas?

http://ng-at.thunderjava.com/

这是文档地址

https://github.com/icepoint0/at-angular

这是github地址。
有些细节可能做得还不是很到位。

感谢作者提供了这份ui

I have following code, a standard input and an at-input:

<input v-on:keyup.enter="login"></input> <at-input v-model="topic" placeholder="topic of talk" size="large" v-on:keyup.enter="login"> <template slot="prepend"> <span>{{ topicPrepend }}</span> </template> <at-input>

the keyup event is fired on the standard input, but not on the at-input.

HTTPS is friendly to users when SSH key is not yet configured. I got following errors:

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of '[email protected]:at-ui/at-ui-style.git' into submodule path '/Volumes/DevelopOnly/Demo/at-ui/src/stylesheet' failed
Failed to clone 'src/stylesheet'. Retry scheduled
Cloning into '/Volumes/DevelopOnly/Demo/at-ui/src/stylesheet'...
Permission denied (publickey).
fatal: Could not read from remote repository.

The docs at https://at-ui.github.io/at-ui/#/en/docs/quickstart says I can import on demand like this:
import { AtInput } from 'at-ui' but AtInput is not exported, the correct is Input.

But even if I try to import just Input, it returns undefined:

import AtUI, {Input} from 'at-ui'
console.log('AtUI.Input:', AtUI.Input) // ok
console.log('Input:', Input) // undefined

Steps to reproduce

vue init at-ui/at-template at-ui-bug
cd at-ui-bug
yarn
yarn dev
// add above lines to src/index.js

如图，标题可否做成响应式的。

"vue": "~2.4.4",
"at-ui": "^1.3.0",
"at-ui-style": "^1.5.0",
"nuxt": "^1.0.0-rc3",

hello dears,
is there any possibility of having a calendar view in AT UI?
thanks :)

Steps to reproduce

When you hover on inputNumber component, the buttons appear on right, but if you try to increase o decrease values with these buttons, they appear that invrease button is high than decrease button.

Which browser?

Chrome 62

What is expected?

Seems that when hover over these buttons, an effect increase the button selected, but the size on increase and the size on decrease need to be the same.

What is actually happening?

The size of the buttons on hover are different. Size on increase button are greater that size on decrease button.

Reproduction Link

Easy to see only in the examples on your page.

At present, there are not enough components in AT-UI, and there are still many details that need to be improved.
If you wish new components be added to the next version, please reply in this issue, thank you!

Schedule

• TimePicker
• DatePicker
• Form

Done

Release

• Sidebar
• Table
• Tabs
• Steps
• Rate
• Collapse
• Card
• Timeline