Bug report 🐞

Version & Environment

v2.3.x

Expection

• The value of padding should be gap or gapHalf.
• Our React Component looks good.

Feature request 🚀

Hi! I'd like to know if you were planning to port your User and AutoComplete components from React UI to this one. I'd even pay a small amount to get those in :)

Thanks!

特别漂亮, 请问老哥可不可以整一个 react 版本的, 非常感谢Thanks♪(･ω･)ﾉ

Feature request 🚀

Radio Component:

Expected:

• update style
• add description support

Feature request 🚀

Playground component/page is play the component online

Expected:

• No breaking changes

Examples:

Refer to Zeit Playground

About styles 🛠️

Dialog 内容过长时显示会不完全且不能滚动，如图所示：

About docs

[feature] docs.cn

• document language switch button
• redesign document bundle
• auto rollback language

Feature request 🚀

Expected:

• No breaking changes

Support show dropdown on hover

Examples:

<zi-popover trigger="hover"></zi-popover>

Programme:

Others:

About styles 🛠️

https://vue.zeit-ui.co/zh-cn/card
I can only found zi-card and .zi-card.hoverable style in @zeit-ui/vue/dist/zeit-ui.css and @zeit-ui/vue/lib/card.css.
Maybe you guys forgot to add shadow style?

Bug report 🐞

The attr name(fill) of Note is unreasonable.

Version & Environment

v2.3.x

Expection

should be changed to filled.

Actual results (or Errors)

fill

Note Document

Bug report 🐞

Version & Environment

• Chrome v85.0.4183.121 (Official Build) (64-bit)

Button's ripple doesn't work fine!

The ripple of button does not emerge from point of input.

Feature request 🚀

Note Component:

Expected:

• add secondary style
• update type style and add variant

Feature request 🚀

Expected:

When dialog element is open, I would expect the page to stay in the same place. Currently the page jumps to the side because scrollbar is removed due to overflow:hidden set on the body.

I'd recommend measuring the width of the scrollbar and maintaining padding on the body element to be equal to scrollbar width if it's present.

I like how Bootstrap deals with this problem and here's the code they use:
https://github.com/twbs/bootstrap/blob/main/js/src/modal.js#L459

Feature request 🚀

datapicker component add

I know that ZEIT does not support this component, so can you add it, or any suggestions about that?
Thanks

Popper.js V1 is a huge library and this project could be trimmed down significantly by replacing Popper V1 with V2.

Here are bundle sizes before and after replacement:
Before:

After:

Here's the process I had to follow:

1. Remove popperjs v1 and replace with
   "@popperjs/core": "^2.4.2"

2. In tooltip.vue:

import { createPopper } from '@popperjs/core';
...
 mounted() {
    createPopper(this.$refs.host, this.$refs.inner, {
      placement: this.placement,
      modifiers: [
        {
          name: 'arrow',
          options: {
            element: this.$refs.arrow
          }
        },
        {
          name: 'offset',
          options: {
            offset: [0, 8]
          }
        }
      ]
    })
  },

Then, in tooltip.styl, remove all existing arrow styles and replace with:

.zi-tooltip-arrow,
.zi-tooltip-arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: -1;
}

.zi-tooltip-arrow::before {
  content: '';
  transform: rotate(45deg);
  background: var(--geist-foreground);
}

.zi-tooltip-box[data-popper-placement^=bottom] .zi-tooltip-arrow
  top -4px

.zi-tooltip-box[data-popper-placement^=top] .zi-tooltip-arrow
  bottom -4px

.zi-tooltip-box[data-popper-placement^=left] .zi-tooltip-arrow
  right 0

.zi-tooltip-box[data-popper-placement^=right] .zi-tooltip-arrow
  left -8px

After that, the size is significantly trimmed!
Hope this helps!

Feature request 🚀

Feature request 🚀

Expected:

• Add button-dropdown component
• No breaking changes
• Released in version 2.4

Examples:

<zi-button-dropdown >
  <zi-button-dropdown-item main type="warning">
    Default Actions
  </zi-button-dropdown-item>
  <zi-button-dropdown-item type="dange">
    Secondary Actions
  </zi-button-dropdown-item>
</zi-button-dropdown>

Programme:

• Reference Design

Unknown custom element:

All other elements work except for the table component

Feature request 🚀

Display component is added to improve the readability of normal layout.

Expected:

• Remove props caption & shadow on zi-image
• Add component Display
• Add props darkBash to zi-code

Examples:

Refer to React Component

About styles 🛠️

It appears that I cannot see which buttons are active when I use "tab" key on my keyboard.
I'd suggest adding :focus styles to buttons to make them focused and visible via keyboard

Feature request 🚀

Feature request 🚀

Expected:

• add vue3 version

Feature request 🚀

Expected:

• add disabled prop to Slider component

Bug report 🐞

I import components in the following way:

import Vue from 'vue'
import Button from '@zeit-ui/vue/lib/button.common'

import '@zeit-ui/themes/index.css'
import '@zeit-ui/themes/dark.css'
import '@zeit-ui/vue/lib/button.css'

Button.install(Vue)

It works well, but when I try to swtich theme to dark:

import ZeitUI from '@zeit-ui/vue'

ZeitUI.theme.enableDark()

Only the Button turn to dark, but the body's background color is still white. When I change to import 'zeit-ui.css'

import Vue from 'vue'
import Button from '@zeit-ui/vue/lib/button.common'

import '@zeit-ui/vue/dist/zeit-ui.css'
import '@zeit-ui/vue/lib/button.css'

Button.install(Vue)

Everything works well

Version & Environment

"@zeit-ui/vue": "^2.5.0-canary.3" with "nuxt": "^2.13.0"

Expection

Background color of body doesn't turn dark when importing components on demand

Actual results (or Errors)

As described above. I found that when I import 'zeit-ui.css', there is such a css

But that doesn't exist when I use the first way

Feature request 🚀

The vue version of geist ui lacks components as compared to what the react version has. Moreover similar components have more features in react version as compared to their vue counterparts.

Are there any plans to make all the components available on vue as well?

Expected:

• No breaking changes

Examples:

Programme:

Others:

Feature request 🚀

Expected:

• create playground component for example site
• follow zeit design

About styles 🛠️

请问可以增加设置图标大小和颜色的属性吗？现在显示在页面上跟旁边的字体和元素大小不匹配，显得太大了，又没有办法缩小。还有颜色想改成红色的，默认是黑色的。可以在外面包一层div来设置颜色，但是加了一层div之后有时候会引起布局的变化，如果有一个属性可以直接设置颜色会更合理一些。

谢谢。

Feature request 🚀

Type:

• Help

Version & Environment:
latest version

Description:
can not install the package

Screenshots:

Bug report 🐞

dialog默认值为 true 是不显示

Version & Environment

^2.3.2

Expection

需要初始化时设置为 false 后，修改为 true 才显示

[prompt]:<>(please add labels first)
Type:

• Bug
• Feature
• Help

Version & Environment:

Description:

Screenshots:

Feature request 🚀

Expected:

• Add icon option to get a component value
• No breaking changes
• Released in version 2.4

Examples:

<zi-button :icon-right="IconComponent">
Actions
</zi-button>

Programme:

• The current icon does not support custom colors, so the example needs to include the hot to custom icon component.
• Button in some status should ignore the icons.

About styles 🛠️

Hi! This is a great starter kit for many projects!

I was wondering how you would achieve responsive column / row layout like Bootstrap provides, for example if I want layout split in 3 columns on desktop to become 1 column layout on mobile.

What would you recommend to achieve responsive composition?

Feature request 🚀

Refer to codesendbox

• as plugin
• single component

前端素人一枚，没框架就不会编程的那种。

想做点简单的页面，现在需要 header 还有 footer 以及 popup。请问咋办呀。

About styles 🛠️

前端素人一枚。
做了个小网站，喜欢这个效果，但是想一直开启。请问有什么方法没有吗？

Bug report 🐞

Version & Environment

version: 1.1.3
system: macOS

按照文档中的说明引入单个组件

Expection

样式正常显示

Actual results (or Errors)

样式无法被正确处理

可能的解决方案

在组件 styl 文件中 import packages/utils/styles/methods.styl 这个文件

Feature request 🚀

Expected:

• add color vars
• add fonts vars
• export polyfill script

Bug report 🐞

Version & Environment

• Windows 10 2004
• [email protected]
• [email protected]
• @geist-ui/[email protected]

Expection

A successful compilation.

Actual results (or Errors)

The error information displayed in the terminal is below:

gram Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run dev --scripts-prepend-node-path=auto

> [email protected] dev D:\Workspace\project-test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 29/35 modules 6 active ...D:\Workspace\project-test\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 94% asset optimization

 ERROR  Failed to compile with 1 errors                                                                                                                                  上午8:06:41

 error  in ./node_modules/_@[email protected]@@geist-ui/vue/dist/geist-ui.common.js

Module parse failed: Unexpected token (1851:25)
You may need an appropriate loader to handle this file type.
| const props = { size: [String, Number], color: String }
| const computed = {
|   listeners() { return { ...this.$listeners } },
|   styles() {
|     const sizes = this.size ? { height: this.size, width: this.size } : {}

 @ ./src/main.js 7:0-36
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

移动端：

“所有组件”未显示，往上滑动无反应

桌面端：

Environment：
Android 10（MIUI11.0.5）
Firefox Browser

Feature request 🚀

Expected:

• No breaking changes

Examples:

Programme:

Others:

Feature request 🚀

Expected:

• Classifying Styles
• Optimize details

Feature request 🚀

Expected:

• add Textarea component

[prompt]:<>(please add labels first)
Type:

• [true ] Bug
• Feature
• Help

Version & Environment:

Description: note匹配的页面与fieldnote一样

Screenshots:

I use the zeit-ui/vue with nuxt, and I want user the nuxt generate static pages, so the nuxt mode is universal, but when start the project, I miss ReferenceError document is not defined on the 3500 line of /@zeit-ui/vue/dist/zeit-ui.common.js.

I want to know zeit-ui/vue Is there any plan for nuxt support.

About styles 🛠️

• tag in design
• tab in design

Bug report 🐞

Version & Environment

version: 1.1.3
system: macOS

比如

https://github.com/zeit-ui/vue/blob/master/packages/files/files.vue

其实依赖了 file-item，但是没有在 files 中使用 components 注册组件

导致直接引用 Files 组件时，会提示 zi-files-item 未注册

我是这样子使用的

import Files from '@zeit-ui/vue/packages/files'

export default {
  components: { Files }
  template: `<Files :files="[]" />`
}

这里没有使用 Files.install，使用 Files.install 的话可以绕开这个问题，但是我觉得上面的使用方式也是比较常见的

Expection

files 内部注册用到的组件

Actual results (or Errors)

直接使用 files 会提示 zi-files-item 未注册

其他

其他组件可能也有类似问题