Skip to content

Commit

Permalink
fix!: 短横线命名slot无法被正确替换
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: 组件的slot名称由短横线替换为驼峰格式

受到影响的组件有: address , addresslist , calendar , card , comment , inputnumber , navbar , noticebar ,
pagination , progress , sku , trendarrow , uploader

link #96
  • Loading branch information
@yang1206
yang1206 committed Nov 7, 2023
1 parent 791310b commit 52587ed
Show file tree
Hide file tree
Showing 44 changed files with 287 additions and 223 deletions.
20 changes: 14 additions & 6 deletions .stylelintrc
View file
Expand Up @@ -7,7 +7,9 @@
"stylelint-config-html",
"stylelint-config-recess-order"
],
"plugins": ["stylelint-order"],
"plugins": [
"stylelint-order"
],
"rules": {
"selector-class-pattern": [
"^([#a-z][$#{}a-z0-9]*)((-{1,2}|_{2})[$#{}a-z0-9]+)*$",
Expand All @@ -18,17 +20,24 @@
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": ["::v-deep","deep","v-deep"]
"ignorePseudoClasses": [
"::v-deep",
"deep",
"v-deep"
]
}
],
"selector-type-no-unknown": [
true,
{
"ignoreTypes": ["page"]
"ignoreTypes": [
"page",
"rich-text"
]
}
],
"no-descending-specificity" :null,
"no-empty-source" :null,
"no-descending-specificity": null,
"no-empty-source": null,
"keyframes-name-pattern": "^[a-z]+([A-Z][a-z]*)*$"
},
"ignoreFiles": [
Expand All @@ -47,5 +56,4 @@
"*.gif",
"*.md"
]

}
8 changes: 4 additions & 4 deletions docs/components/business/address.md
View file
Expand Up @@ -307,7 +307,7 @@
:is-show-custom-address="false"
@selected="selected3"
>
<template #unselected-icon>
<template #unselectedIcon>
<nut-icon name="heart1" style="margin-right:8px">
</template>
<template #icon>
Expand Down Expand Up @@ -600,9 +600,9 @@
|----- | ----- |
| bottom | 可自定义底部 |
| icon | 自定义选中项的图标 |
| unselected-icon | 未选中地址时的图标 |
| close-icon | 关闭弹层的图标 |
| back-icon | 自定义地址与已有地址切换时返回的图标 |
| unselectedIcon | 未选中地址时的图标 |
| closeIcon | 关闭弹层的图标 |
| backIcon | 自定义地址与已有地址切换时返回的图标 |

## 主题定制

Expand Down
10 changes: 5 additions & 5 deletions docs/components/business/addresslist.md
View file
Expand Up @@ -243,11 +243,11 @@ export default {

| 名称 | 说明 | 作用域参数 |
| ------------- | -------------------------------- | -------------- |
| item-infos | 地址列表项姓名/联系方式/默认一行 | `{ item }` |
| item-icon | 地址列表项图标 | `{ item }` |
| item-addr | 地址列表项详细地址 | `{ item }` |
| swipe-right | 地址列表项右滑区域 | `{ item }` |
| longpress-btns | 地址列表项长按遮罩内容 | `{ item }` |
| itemInfos | 地址列表项姓名/联系方式/默认一行 | `{ item }` |
| itemIcon | 地址列表项图标 | `{ item }` |
| itemAddr | 地址列表项详细地址 | `{ item }` |
| swipeRight | 地址列表项右滑区域 | `{ item }` |
| longpressBtns | 地址列表项长按遮罩内容 | `{ item }` |

### data 数组中每一项 与 options 对象的参数磨平

Expand Down
4 changes: 2 additions & 2 deletions docs/components/business/card.md
View file
Expand Up @@ -116,7 +116,7 @@
:delivery="state.delivery"
:shopName="state.shopName"
>
<template #shop-tag>
<template #shopTag>
<div>自定义店铺介绍</div>
</template>
<template #price>
Expand Down Expand Up @@ -236,7 +236,7 @@
| prolist | 自定义商品介绍 |
| price | 价格自定义内容 |
| origin | 价格后方自定义内容 |
| shop-tag | 店铺介绍自定义 |
| shopTag | 店铺介绍自定义 |
| footer | 右下角内容自定义 |

## 主题定制
Expand Down
10 changes: 5 additions & 5 deletions docs/components/business/comment.md
View file
Expand Up @@ -18,7 +18,7 @@
@clickImages="clickImages"
:operation="['replay']"
>
<template #comment-labels>
<template #commentLabels>
<image
style="height:15px;width:50px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/211858/17/4258/12101/618e6f78Ed0edcadc/e83a673555edf59f.jpg"
Expand Down Expand Up @@ -70,15 +70,15 @@ export default {
ellipsis="6"
@clickImages="clickImages"
>
<template #comment-labels>
<template #commentLabels>
<img
class="nut-comment-header__labels--item"
src="https://storage.360buyimg.com/imgtools/78925d9440-f9e874d0-e93d-11eb-8e5c-0da9e18a13b1.png"
style="height: 12px"
/>
</template>

<template #comment-shop-reply>
<template #commentShopReply>
<div class="nut-comment-shop">
<text style="display:inline-block">京东美妆国际：</text
>尊敬的客户您好，非常抱歉给您带来不愉快的购物体验，关于过敏，什么成分都不存在个别性和普遍性。
Expand Down Expand Up @@ -180,8 +180,8 @@ export default {

| 名称 | 说明 |
|--------|----------------|
| comment-labels | 评论用户的标签 |
| comment-shop-reply | 评论最底部，用于展示商家回复|
| commentLabels | 评论用户的标签 |
| commentShopReply | 评论最底部，用于展示商家回复|

### images 数组

Expand Down
50 changes: 13 additions & 37 deletions docs/components/business/sku.md
View file
Expand Up @@ -65,30 +65,6 @@ export default {
</script>
```

### 微信小程序的特殊处理

由于 uniapp 混乱的 slot 机制，微信小程序环境需要手动传递 header与operate组件

```html
<nut-sku
v-model:visible="base"
:sku="skuData"
@selectSku="selectSku"
@close="close"
>
<!-- #ifdef MP-WEIXIN -->
<template #sku-header>
<nut-sku-header :goods="goodsInfo" />
</template>
<template #sku-operate>
<nut-sku-operate
@clickBtnOperate="clickBtnOperate"
/>
</template>
<!-- #endif -->
</nut-sku>
```

### 不可售

```html
Expand All @@ -103,7 +79,7 @@ export default {
@selectSku="selectSku"
:btnOptions="['buy', 'cart']"
>
<template #sku-operate>
<template #skuOperate>
<div class="sku-operate-box">
<nut-button class="sku-operate-box-dis" type="warning">查看相似商品</nut-button>
<nut-button class="sku-operate-box-dis" type="info">到货通知</nut-button>
Expand Down Expand Up @@ -277,24 +253,24 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可
@clickBtnOperate="clickBtnOperate"
>
<!-- 商品展示区，价格区域 -->
<template #sku-header-price>
<template #skuHeaderPrice>
<div>
<nut-price :price="goods.price" :needSymbol="true" :thousands="false"> </nut-price>
<span class="tag"></span>
</div>
</template>
<!-- 商品展示区，编号区域 -->
<template #sku-header-extra>
<template #skuHeaderExtra>
<span class="nut-sku-header-right-extra">重量：0.1kg 编号：{{skuId}} </span>
</template>
<!-- sku 展示区上方与商品信息展示区下方区域，无默认展示内容 -->
<template #sku-select-top>
<template #skuSelectTop>
<div class="address">
<nut-cell style="box-shadow:none;padding:13px 0" title="送至" :desc="addressDesc" @click="showAddressPopup=true"></nut-cell>
</div>
</template>
<!-- 底部按钮操作区 -->
<template #sku-operate>
<template #skuOperate>
<div class="sku-operate-box">
<nut-button class="sku-operate-item" shape="square" type="warning">加入购物车</nut-button>
<nut-button class="sku-operate-item" shape="square" type="primary">立即购买</nut-button>
Expand Down Expand Up @@ -462,14 +438,14 @@ Sku 组件默认划分为若干区域，这些区域都定义成了插槽，可

| 名称 | 说明 |
|--------|----------------|
| sku-header | 商品信息展示区，包含商品图片、价格、编号 |
| sku-header-price | 商品信息展示区，价格区域展示|
| sku-header-extra | 商品信息展示区，编号区域展示 |
| sku-select-top | Sku 展示区上方与商品信息展示区下方区域，无默认展示内容 |
| sku-select | Sku 展示区 |
| sku-stepper | 数量选择区 |
| sku-stepper-bottom | 数量选择区下方区域 |
| sku-operate | 底部按钮操作区域 |
| skuHeader | 商品信息展示区，包含商品图片、价格、编号 |
| skuHeaderPrice | 商品信息展示区，价格区域展示|
| skuHeaderExtra | 商品信息展示区，编号区域展示 |
| skuSelectTop | Sku 展示区上方与商品信息展示区下方区域，无默认展示内容 |
| skuSelect | Sku 展示区 |
| skuStepper | 数量选择区 |
| skuStepperBottom | 数量选择区下方区域 |
| skuOperate | 底部按钮操作区域 |

### goods 对象结构

Expand Down
6 changes: 3 additions & 3 deletions docs/components/dentry/calendar.md
View file
Expand Up @@ -749,9 +749,9 @@ export default {
|---------|--------------|
| btn | 自定义日历标题下部，可用以添加自定义操作 |
| day | 日期信息 |
| top-info | 日期顶部信息 |
| bottom-info | 日期底部信息 |
| footer-info `v1.1.6` | 日历自定义底部，替代confirm按钮（不支持微信小程序） |
| topInfo | 日期顶部信息 |
| bottomInfo | 日期底部信息 |
| footerInfo `v1.1.6` | 日历自定义底部，替代confirm按钮（不支持微信小程序） |
### Methods

通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 `Calendar` 实例并调用实例方法。
Expand Down
8 changes: 4 additions & 4 deletions docs/components/dentry/inputnumber.md
View file
Expand Up @@ -167,10 +167,10 @@
```html
<template>
<nut-input-number v-model="value">
<template #left-icon>
<template #leftIcon>
<nut-icon name="left" />
</template>
<template #right-icon>
<template #rightIcon>
<nut-icon name="right" />
</template>
</nut-input-number>
Expand Down Expand Up @@ -206,8 +206,8 @@

| 名称 | 说明 |
|-----------|----------------|
| left-icon | 自定义左侧按钮 |
| right-icon | 自定义右侧按钮 |
| leftIcon | 自定义左侧按钮 |
| rightIcon | 自定义右侧按钮 |

### Events

Expand Down
4 changes: 2 additions & 2 deletions docs/components/dentry/uploader.md
View file
Expand Up @@ -281,8 +281,8 @@ setup() {
| 名称 | 说明 |
|-------------|------------------------------|
| default | 默认插槽自定义内容 |
| upload-icon | 自定义上传按钮中间`icon`区域 |
| delete-icon | 自定义右上角删除按钮区域 |
| uploadIcon | 自定义上传按钮中间`icon`区域 |
| deleteIcon | 自定义右上角删除按钮区域 |
### Methods
Expand Down
6 changes: 0 additions & 6 deletions docs/components/exhibition/animate.md
View file
Expand Up @@ -37,8 +37,6 @@ function onClick2() {
</template>
```

:::

### 循环动画

```vue
Expand Down Expand Up @@ -83,8 +81,6 @@ function onClick2() {

### 点击触发

:::demo

```vue
<template>
<nut-animate type="slide-right" action="click">
Expand All @@ -110,8 +106,6 @@ function onClick2() {
</template>
```

:::

## API

### Props
Expand Down
8 changes: 4 additions & 4 deletions docs/components/exhibition/noticebar.md
View file
Expand Up @@ -58,7 +58,7 @@
<nut-noticebar
:scrollable="false"
>
<template v-slot:left-icon>
<template v-slot:leftIcon>
<img
src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
style="width: 20px; height: 20px"
Expand Down Expand Up @@ -153,7 +153,7 @@
```html
<template>
<nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' >
<template #right-icon>
<template #rightIcon>
<nut-icon name="fabulous" />
</template>
</nut-noticebar>
Expand Down Expand Up @@ -203,8 +203,8 @@
| 名称 | 说明 |
|--------------|----------------------------------|
| default | 通知文本的内容 |
| right-icon | 自定义右侧图标 |
| left-icon | 自定义左侧图标, 滚动方向为 `across` 生效 |
| rightIcon | 自定义右侧图标 |
| leftIcon | 自定义左侧图标, 滚动方向为 `across` 生效 |

### Events

Expand Down
4 changes: 2 additions & 2 deletions docs/components/exhibition/progress.md
View file
Expand Up @@ -99,7 +99,7 @@
stroke-width="15"
status="icon"
>
<template #icon-name>
<template #iconName>
<nut-icon name="issue" color="red" width="15px" height="15px" />
</template>
</nut-progress>
Expand Down Expand Up @@ -171,7 +171,7 @@

| 名称 | 说明 | 作用域参数 |
| --------- | ---------------- | ---------- |
| icon-name | 右侧 `icon` 内容 | - |
| iconName | 右侧 `icon` 内容 | - |

## 主题定制

Expand Down
8 changes: 4 additions & 4 deletions docs/components/exhibition/trendarrow.md
View file
Expand Up @@ -96,10 +96,10 @@
<template>
<nut-cell>
<nut-trend-arrow :rate="10.2365">
<template #up-icon><nut-icon name="success" color="blue" size="18px" /></template>
<template #upIcon><nut-icon name="success" color="blue" size="18px" /></template>
</nut-trend-arrow>
<nut-trend-arrow :rate="-10.2365">
<template #down-icon><nut-icon name="failure" color="red" /></template>
<template #downIcon><nut-icon name="failure" color="red" /></template>
</nut-trend-arrow>
</nut-cell>
</template>
Expand All @@ -125,8 +125,8 @@

| 名称 | 说明 |
|---------|--------------|
| up-icon | 自定义向上箭头图标，默认使用 `TriangleUp` |
| down-icon | 自定义向下箭头图标，默认使用 `TriangleDown` |
| upIcon | 自定义向上箭头图标，默认使用 `TriangleUp` |
| downIcon | 自定义向下箭头图标，默认使用 `TriangleDown` |

## 主题定制

Expand Down
6 changes: 3 additions & 3 deletions docs/components/nav/navbar.md
View file
Expand Up @@ -35,7 +35,7 @@
:titleIcon="true"
desc="编辑"
>
<template #title-icon>
<template #titleIcon>
<nut-icon name="cart2" width="16px" />
</template>
<template #right>
Expand Down Expand Up @@ -198,8 +198,8 @@ export default {
| left | 自定义左侧内容 |
| right | 自定义右侧内容 |
| content | 自定义导航栏中间内容 |
| left-show | 左侧箭头自定义图标 |
| title-icon | 标题中自定义图标 |
| leftShow | 左侧箭头自定义图标 |
| titleIcon | 标题中自定义图标 |

## 主题定制

Expand Down

1 comment on commit 52587ed

@vercel
Copy link

@vercel vercel bot commented on 52587ed Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

uniapp-nutui – ./

uniapp-nutui-git-main-nutui-uniapp.vercel.app
uniapp-nutui.vercel.app
uniapp-nutui-nutui-uniapp.vercel.app
uniapp-nutui.tech
www.uniapp-nutui.tech

Please sign in to comment.