tusen-ai / naive-ui Goto Github PK

What problem does the feature solve?

I think the card component can add a prop to control the shadow effect of the card, like:

This prop can replace the current hoverable prop.

What does the proposed API look like?

<n-card shadow="never">
  ...
</n-card>

This function solves the problem (这个功能解决的问题)

GoGo

Expected API (期望的 API)

GoGo

What problem does the feature solve?

Refer to react-ellipsis.

I think these features are necessary for an Ellipsis component:

• control whether clamp
• custom ellipsis node
• end character filter

I can make a pr with pleasure if in need.

This function solves the problem (这个功能解决的问题)

This makes customizing the datable more intuitive by allowing use of automatically imported components (vite-plugin-components) using slots rather than the render function

Expected API (期望的 API)

https://vuetifyjs.com/en/components/data-tables/#slots

Environment Info

• Naive UI version: 2.11.5
• Browser Info: Electron (Chromium)
• System Info: Windows 10

Reproduction link

https://codesandbox.io/embed/restless-waterfall-20ggg

Steps to reproduce

just add : :modes="['hex']" to color picker component.
Ref : https://www.naiveui.com/en-US/dark/components/color-picker

What is expected?

i wanna lock the color picker to hexa only

What is actually happening?

when i force hex mode only, RGBA still in the selection. For my case, RGBA is the default mode.

Thanks :D

Environment Info

• Naive UI version: 2.11.7
• Vue version: 3.0.11
• Browser Info: Chrome(89.0.4389.128)
• System Info: Mac OS 11.2.3

Reproduction link

<n-input
      v-model:value="form.functionalExpectations"
      type="textarea"
      placeholder="请输入"
      :autosize="{ minRows: 2, maxRows: 5 }"
    ></n-input>

Steps to reproduce

When I set the minRows and maxRows properties at the same time, entering a lot of text will stretch the textarea horizontally

What is expected?

What is actually happening?

What problem does the feature solve?

发现TreeSelect组件没有提供，但我觉得是不是抽象出来一个下拉容器组件更加容易实现select的各种需求

What does the proposed API look like?

https://xuliangzhan_admin.gitee.io/vxe-table/v4/table/module/pulldown

Environment Info

• Naive UI version: (eg. 2.11.0)
• Browser Info: (eg. Chome 91)
• System Info: (eg. Mac OS 11.2.3, Windows)

Reproduction link

https://codesandbox.io/s/silly-smoke-h733h?file=/src/Demo.vue

Steps to reproduce

What is expected?

What is actually happening?

Add x or y, not working. Add both, default slot disappear.

This function solves the problem (这个功能解决的问题)

virtual-scroll

Expected API (期望的 API)

1.关于Data Table的虚拟化是否支持树形?
2.关于Tree的虚拟化是否支持不开启虚拟话的正常功能?例如复选和单选!

Hi, it's a little question. I feel confused with this statement in the docs.

All the staff in Naive UI is wrote in TypeScript. It can work with your typescript project seamlessly.

do you mean All of the stuffs?

What problem does the feature solve?

There are designs that are infeasible to implement without the support of a generic horizontal toolbar component. For example, I want to implement a toolbar that displays some summary information on the left, a lightweight pagination component in the middle, and some action buttons on the right. It isn't possible to implement this kind of design with the menu component because it expects all items to be traditional text-based menu items with a label.

What does the proposed API look like?

An <n-toolbar> component is required that carries with it some default styling for what you'd expect a toolbar to look like.

This function solves the problem (这个功能解决的问题)

GoGo

Expected API (期望的 API)

GoGo

This function solves the problem (这个功能解决的问题)

daterange类型的选择器在actions缺失confirm时实际上无法选择时间

Expected API (期望的 API)

daterange类型的选择器在actions缺失confirm时是否可以支持默认选中结束时间来结束选择

TuSimple/naive-ui version (版本)

2.11.8

Vue version (Vue 版本)

3.1.1

Browser and its version (浏览器及其版本)

Chrome

System and its version (系统及其版本)

MacOS

Node version (Node 版本)

Reappearance link (重现链接)

https://www.codesandbox.com

Reappearance steps (重现步骤)

GOGOG

Expected results (期望的结果)

Cool

Actual results (实际的结果)

Cool

Remarks (补充说明)

Cool

Environment Info

• Naive UI version: (eg. 2.11.0)
• Browser Info: (eg. Chome 91)
• System Info: (eg. Mac OS 11.2.3, Windows)

Reproduction link

https://www.naiveui.com/zh-CN/light/components/button

What is actually happening?

点开上面的code文档，下面的演示button样式变形

Example:

Environment Info

• Naive UI version: (eg. 2.11.11)
• Browser Info: (eg. Chome 86)
• System Info: (eg. Windows)

What is actually happening?

引入 vite-plugin-windicss 后
点击按钮出现黑边，有解决方法吗？

Environment Info

• Naive UI version: 2.11.6
• Vue: 3.0.5

Minimal Reproduction

SFC Code:

<template>
  <NInput v-model:value="value" type="input"></NInput>
  <input v-model="value" />
  <button @click="onClick">Button</button>
</template>

<script>
import { NInput } from "naive-ui";
import { ref } from "vue";
export default {
  components: {
    NInput: NInput,
  },
  setup() {
    const value = ref("");
    const onClick = () => {
      value.value = undefined;
    };

    return {
      value,
      onClick,
    };
  },
};
</script>

What is expected?

After the button is clicked, the result of native input and n-input to be the same

What is actually happening?

value display in n-input is not cleared

Screenshots

Before:

After:

Environment Info

• Naive UI version: 2.11.7
• Vue version: 3.0.5
• Browser Info: Microsoft Edge 91.0.864.41
• System Info: Windows 10 (Arch WSL)

Reproduction link

https://codesandbox.io/s/ts-error-in-nmenu-and-ncalendar-77xxs?file=/src/App.vue

Steps to reproduce

I use vite and vue-ts as my startup project, every thing is ok in dev server, but when I try to run yarn vue-tsc --noEmit && vite build got some ts error. And I found both of error come from @update:value method.

# Create a vue-ts project and install naive-ui
$ yarn create @vitejs/app naive-test --template vue-ts && cd naive-test && yarn
$ yarn add naive-ui

// App.vue

<template>
  <NCalendar @update:value="handleUpdateCalendarValue">
    <template #="{ year, month, date }"> </template>
  </NCalendar>
  <NMenu @update:value="handleUpdateMenuValue" :options="menuOptions" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { MenuOption, NCalendar, NMenu } from "naive-ui";
export default defineComponent({
  name: "App",
  components: {
    NCalendar,
    NMenu,
  },
  setup() {
    const menuOptions = [
      {
        label: "Item1",
        key: "item1",
      },
      {
        label: "Item2",
        key: "item2",
      },
    ];

    const handleUpdateCalendarValue = (
      timestamp: number,
      { year, month, date }: { year: number; month: number; date: number }
    ) => {
      console.log({ timestamp, year, month, date });
    };

    const handleUpdateMenuValue = (key: string, item: MenuOption) => {
      console.log("key =>", key);
      console.log("item =>", item);
    };

    return {
      handleUpdateCalendarValue,

      menuOptions,
      handleUpdateMenuValue,
    };
  },
});
</script>

$ yarn vue-tsc --noEmit

What is expected?

No error in typescript check.

What is actually happening?

Environment Info

• Naive UI version: 2.11.7
• Vue version: 3.1.1
• Browser Info: Chome 91.0.4472.77
• System Info: macos 11.4

Reproduction link

https://codesandbox.io/s/naive-ui-test-vi95j?file=/src/App.vue:1326-1347

Steps to reproduce

click reset botton

What is expected?

the form can be reset

What is actually happening?

The form does not have a method called clearValidationEffect ,and with an error,but i found a method called restoreValidation,it is useful for clear validation ,but not for form's value

Environment Info

• Naive UI version: 2.11.4
• Browser Info: Chome 91
• System Info: Windows

Reproduction link

Steps to reproduce

What is expected?

   Should make it cursor pointer

What is actually happening?

It would be great if you could add dates to the changelog for new entries going forward. This would allow people to more easily see when the most recent releases occurred. It's okay to leave old entries as-is, but it would be really appreciated if new entries could be dated 🙏

You might also want to consider creating a git tag for each release too.

When you set the header-style prop on an <n-card> element, the styles are applied to the .n-card-header__main element, not the .n-card-header. The padding is applied to the .n-card-header element, which means there is no nice way to reduce this padding if desired.

The documentation suggests that rowKey can be either a String or a Function, but the type of the prop is defined only as a Function. Attempting to pass a String results in a warning from the Vue core.

Environment Info

• Naive UI version: 2.11.4

Bug description

In the doc, options are optional.

error | (content: string, option?: MessageOption) => MessageReactive
info | (content: string, option?: MessageOption) => MessageReactive
loading | (content: string, option?: MessageOption) => MessageReactive
success | (content: string, option?: MessageOption) => MessageReactive
warning | (content: string, option?: MessageOption) => MessageReactive

But in the node_modules\naive-ui\lib\message\src\MessageProvider.d.ts

export interface MessageApiInjection {
    info: (content: string, options: MessageOptions) => MessageReactive;
    success: (content: string, options: MessageOptions) => MessageReactive;
    warning: (content: string, options: MessageOptions) => MessageReactive;
    error: (content: string, options: MessageOptions) => MessageReactive;
    loading: (content: string, options: MessageOptions) => MessageReactive;
}

I think this is a mistake.

Tu-Simple, sometimes naive ;-)

What problem does the feature solve?

If a button only has an icon and no label, the icon should be larger by default. This is necessary because it's the only thing to click on.

Right now even if you've set the size of the button to large, the icon will only be a maximum of 20px in size. You can set size="40" (for example) on the n-icon element, but then the presentation goes all whacky because the icon slot container element is still set to have a size of 20px.

What does the proposed API look like?

A new prop named something like icon would be a good idea.

Some pictures that can demonstrate the feature.

Here you can see the icon buttons overlapping each other:

如题

Environment Info

• Naive UI version:2.11.4
• Browser Info: Chome
• System Info:Windows

Reproduction link

Steps to reproduce

What is expected?

如代码，在dropdown中，透传给popover组件的trigger slot 为什么是 default ，然后下面又重新传了 default 函数，我在写dropdown 单测时，传入 trigger 发现始终未生效

如文档所示，trigger 应该是 触发弹出的元素

What is actually happening?

What problem does the feature solve?

What does the proposed API look like?

What problem does the feature solve?

we can custom column in template with slot

What does the proposed API look like?

//  template:

 <n-data-table  :columns="columns" :data="data" >
        <template #slotName="{value,row,columnProp}" >
             <span >{{row.title}} {{value}} Custom things</span>
        </template>
</n-data-table>


........
// script:

setup() {

      return {
          data:[],
          columns:[{
                key:'name',
                title: 'name',
                slot:'slotName'
           }]
      }
}

Some pictures that can demonstrate the feature.

What problem does the feature solve?

It would be nice to have a slot exposed for custom actions in the Date Picker to augment the three that are available. This way you can add buttons on the component itself for your own predefined date range's such as This Month, Last Week, etc.

What problem does the feature solve?

If an error occurs while loading the data used to fill the data table, I would like to show an error message rather than just saying "No data".

What does the proposed API look like?

Other frameworks tend to handle this with a slot.

Environment Info

• Naive UI version: (eg. 2.11.0)
• Browser Info: (eg. Chome 92.0.4515.40)
• System Info: (eg. Windows)

Steps to reproduce

点击日历组件，日历组件的框对应的时间和实际对应的时间不一致

What is expected?

能显示正确的时间

What is actually happening?

see https://vuejs.org/v2/style-guide/index.html#Component-name-casing-in-templates-strongly-recommended

In most projects, component names should always be PascalCase in single-file components
...
using kebab-case everywhere is also acceptable

It seems that it will be great if we change demo codes from from kebab-case to PascalCase

This function solves the problem (这个功能解决的问题)

Although it's ok to use the onchange event, it would be more convenient with file-list two way boninded. Since it's not two way binded, it cannot be validated together with other form items. The app I'm building requires an upload that accepts one zip file or multiple pdf files

Expected API (期望的 API)

v-model:file-list:"fileList"

I have some interest in naive-ui and am browsing the documentation. This error occurs when I tried the demo in the documentation.

Environment Info

• Naive UI version: 2.11.4
• Browser Info: Edge 91.0.864.41
• System Info: Windows 10

Reproduction link

https://www.naiveui.com/zh-CN/light/components/dropdown

Steps to reproduce

Right click in the green square more than three times.

For the first two click, the dropdown component opens where I clicked. But from the third click, it will never change position.

What is expected?

Maybe change the position?

What is actually happening?

See above.

I also tried the demo in the sandbox. I noticed that the xRef.value and yRef.value changed as I clicked, but the position of the component did not change. But I am new to vue3, so I can't locate where is the problem.

This function solves the problem (这个功能解决的问题)

Multiple progress on one bar, or a progress bar with steps and customisation for each steps

Expected API (期望的 API)

<template>
  <n-group-progress merged>
    <!-- All progress bars will be merged in one progress bar -->
    <n-progress type="line" status="info" :percentage="10" :show-indicator="false" />
    <n-progress type="line" status="success" :percentage="20" :show-indicator="false" />
    <n-progress type="line" status="warning" :percentage="30" :show-indicator="false" />
  </n-group-progress>
</template>

<template>
  <n-group-progress merged :steps="[30, 60]">
    <!-- The progress bar will be split in 3 parts the second will start a 30% and the third at 60% of total width, like with the slider component mark attribute -->
    <n-progress type="line" status="info" :percentage="10" :show-indicator="false" />
    <n-progress type="line" status="success" :percentage="20" :show-indicator="false" />
    <n-progress type="line" status="warning" :percentage="30" :show-indicator="false" />
  </n-group-progress>
</template>

TuSimple/naive-ui version (版本)

2.11.11

Vue version (Vue 版本)

3.1.1

Browser and its version (浏览器及其版本)

Chrome 最新版

System and its version (系统及其版本)

Windows 最新版

请看这个文档，https://www.naiveui.com/zh-CN/os-theme/components/slider

Expected results (根据文档，我写出这样的代码)：

on-update:value="onChange"

Actual (实际应该写成这样)：

@update:value="onChange"

Remarks (补充说明)

文档中，对于 update 事件的描述是 on-update:value，而实际在 vue3 里的写法是 @update:value ，这样的文档写法是否可以改进一下？或者建议加上关于 on-update 的例子

What problem does the feature solve?

Hello,

Really nice library. Thanks for sharing.

Playing around with table component and not able handle onClick event on table row. Documentation says there is only one event onSelect in selection mode but this is other usecase.

What does the proposed API look like?

Just propagate event on table props ( onRowSelect:(record:T(any)) => void; )

Btw really nice styles - so clean! Gj

What problem does the feature solve?

https://www.naiveui.com/zh-CN/os-theme/components/badge#processing
现在处理中的动画，感觉上有点闪烁速度有点快
在设置 value 后没有动画，设计上就是这样么

What does the proposed API look like?

https://www.naiveui.com/zh-CN/os-theme/components/progress

Menu items should have the option of creating router-link components to support native routing functionality provided by Vue Router. This should also ensure actual <a> tags are generated, so as to be more friendly to accessibility.

What problem does the feature solve?

I find there're two issues on the doc website:

• some clickable targets have no [role="button"], like dropdown menuitems, radio buttons and breadcrumbs
• some non-clickable components has click listeners, like tags
• some disabled components still has click listeners but no [aria-disabled] is added, like cascader menuitems and checkboxes
• usually a <input> is wrapped by <div>s, and the div.n-input has a click listener but without [aria-hidden=true]

What does the proposed API look like?

I have an extension "Vimium C" to help users use keyboard to click page elements, and when it find links, it will pick those with [role=button], [role=link] and filter out those [aria-hidden], [aria-disabled], [aria-hidden=true], [aria-disabled=true]. It also hooks the global addEventListener function to learn what "plain" elements are clickable.

When I tested Vimium C's LinkHints.activate (triggered by f) on pages like https://www.naiveui.com/zh-CN/os-theme/components/input , I found many clickable were not recognized, while many others were mistakenly hinted.

So I want this framework to add more clues to let such keyboard helper extensions work better.

Environment Info

• Naive UI version: 2.11.4
• Browser Info: Chome 91
• System Info: Mac OS 10.15

Reproduction link

https://www.naiveui.com/zh-CN/light/components/spin

Steps to reproduce

官网例子

What is expected?

流畅动画

What is actually happening?

闪烁

This function solves the problem (这个功能解决的问题)

增强友好，右击出现dropdown后不一定选择某项之后才能关闭，点击dropdown外部它也应该关闭

Expected API (期望的 API)

https://ant.design/components/dropdown-cn/
他应该像antd一样出现之后，再次点击任何位置就关闭了

Environment Info

• Naive UI version: 2.11.4
• Browser Info: Safari 14.1.1
• System Info: Mac OS 11.4

Steps to reproduce

进入Mention，点击远程加载的文本框.
输入任意字符，会返回该字符为前缀的所有内容，而不会过滤内容。

What is expected?

类似基本用法中，可以过滤内容，显示无数据。

What is actually happening?

What problem does the feature solve?

When I use time-picker to quickly select a time, I wish to just leave the value not disabled on the panel.

Such as I disable every 10 minutes(enable 0, 10, 20...), to choose 08:00, 08:10, 08:20...
But the panel show 9 disabled value and 1 enable value.
It not make me choose value faster but slow down.

So i think if you can add a prop to control the show/hide of disabled hours(minutes, seconds), because these values
have been disabled by user, means user don't want to use them, so these disabled value should not be shown by default.

What does the proposed API look like?

The disabled value should not show by default.

<template>
  <n-time-picker
    v-model:value="time0"
    :show-disabled="true"
    :is-hour-disabled="isHourDisabled"
    :is-minute-disabled="isMinuteDisabled"
    :is-second-disabled="isSecondDisabled"
  />
</template>

Thank your!

Overview

RTL(Right to Left) support is a very import feature for the component library. However it'll take great efforts to fulfill the feature since all of the components need to implement extra styles, thus we need your help to achieve the goal.

We've add experimental RTL feature for n-button, n-tag, n-page-header and n-card. If you are interested in contributing to the RTL feature, please reference those components.

You can find the example in the following files.

• ./src/button
• ./src/radio
• ./src/avater
• ./src/badage
• ./src/avatar-group
• ./src/tag
• ./src/card

Tech Details

Here are some discussion about tech detail about implementation.

In general, Naive UI has an internal useRtl composable to mount & update rtl style on demand. It accepts RTL styles passed from n-config-provider and takes adventage of the style.

The component that supports RTL has a style file in component-name/styles/rtl.ts, which exports { name: 'ComponentName', style: CssRenderStyle }.

Components

Here are some components in need RTL support.If you intresting in it,feel free to commont.We will convert it to issue for you,then you can work on it.

• RTL support for affix
• RTL support for alert
• RTL support for anchor
• RTL support for auto-complete
• RTL support for back-top
• RTL support for breadcrumb
• RTL support for calendar
• RTL support for card
• RTL support for caroulsel
• RTL support for cascader
• RTL support for checkbox
• RTL support for code
• RTL support for collapse
• RTL support for collapse-transition
• RTL support for color-piker
• RTL support for data-table
• RTL support for date-piker
• RTL support for description
• RTL support for dailog
• RTL support for divider
• RTL support for drawer
• RTL support for dropdown
• RTL support for dynamic-input
• RTL support for dynamic-tags
• RTL support for element
• RTL support for ellipsis
• RTL support for empty
• RTL support for form
• RTL support for gradient-text
• RTL support for input
• RTL support for input-number
• RTL support for layout
• RTL support for list
• RTL support for loading-bar
• RTL support for log
• RTL support for menu
• RTL support for mention
• RTL support for message
• RTL support for modal
• RTL support for notification
• RTL support for page-header
• RTL support for pagination
• RTL support for popconfirm
• RTL support for popover
• RTL support for popselect
• RTL support for progress
• RTL support for radio
• RTL support for rate
• RTL support for result
• RTL support for scrollbar
• RTL support for select
• RTL support for skeleton
• RTL support for slider
• RTL support for space
• RTL support for spin
• RTL support for statistic
• RTL support for steps
• RTL support for switch
• RTL support for table
• RTL support for tabs
• RTL support for tag
• RTL support for thing
• RTL support for time
• RTL support for time-picker
• RTL support for timeline
• RTL support for tooltip
• RTL support for transfer
• RTL support for tree
• RTL support for tree-select
• RTL support for typography
• RTL support for upload
• RTL support for watermark

Environment Info

• Naive UI version: 2.11.4
• Browser Info: Chome 89.0.4389.90
• System Info: Ubuntu 18.04.5 LTS

What is actually happening?

In the select component remote feature (single and multiple) documents, there is an unused variable noDataContent in the sample code, is it the var for placeholder?