feat(rate): add allow-half prop (#426)

* feat:n-input Support hidden password

* feat(form): support require-mark-placement(#171)

* Revert "feat(form): support require-mark-placement(#171)"

This reverts commit 0627777693.

* Revert "feat:n-input Support hidden password"

This reverts commit ea6491783d.

* feat(n-rate): add allow-half prop

* feat(rate): add docs and fix code

* feat(rate): fix code

* feat(rate): fix doc

* feat(rate): fix doc

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-rate` add `allow-half` prop.
+
 ## 2.15.4 (2021-07-09)
 
 ### Feats

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-rate` 新增 `allow-half` 属性
+
 ## 2.15.4 (2021-07-09)
 
 ### Feats

src/rate/demos/enUS/allow-half.demo.md

@@ -0,0 +1,5 @@
+# Allow Activated Half of the Icon
+
+```html
+<n-rate allow-half />
+```

src/rate/demos/enUS/index.demo-entry.md

@@ -9,12 +9,14 @@ basic
 size
 color
 icon
+allow-half
 ```
 
 ## Props
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| allow-half | `boolean` | `false` | Allow activated half of the icon. |
 | color | `string` | `undefined` | Icon color activated(support `#FFF`, `#FFFFFF`, `yellow`,`rgb(0, 0, 0)` formatted colors). |
 | count | `number` | `5` | Icon count. |
 | default-value | `number` | `0` | Value of activated icons by default. |

src/rate/demos/zhCN/allow-half.demo.md

@@ -0,0 +1,5 @@
+# 可以激活一半星星
+
+```html
+<n-rate allow-half />
+```

src/rate/demos/zhCN/index.demo-entry.md

@@ -9,12 +9,14 @@ basic
 size
 color
 icon
+allow-half
 ```
 
 ## Props
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| allow-half | `boolean` | `false` | 允许只激活一半图标 |
 | color | `string` | `undefined` | 已激活图标颜色（支持形如 `#FFF`， `#FFFFFF`， `yellow`，`rgb(0, 0, 0)` 的颜色） |
 | count | `number` | `5` | 图标个数 |
 | default-value | `number` | `0` | 默认已激活图标个数 |

src/rate/src/Rate.tsx

@@ -21,6 +21,7 @@ import StarIcon from './StarIcon'
 
 const rateProps = {
   ...(useTheme.props as ThemeProps<RateTheme>),
+  allowHalf: Boolean,
   count: {
     type: Number,
     default: 5
@@ -76,8 +77,20 @@ export default defineComponent({
       nTriggerFormChange()
       nTriggerFormInput()
     }
-    function handleMouseEnter (index: number): void {
-      hoverIndexRef.value = index
+    function handleMouseMove (
+      index: number,
+      offset: number,
+      size: number
+    ): void {
+      if (props.allowHalf) {
+        if (offset >= Math.floor(size / 2)) {
+          hoverIndexRef.value = index + 1
+        } else {
+          hoverIndexRef.value = index + 0.5
+        }
+      } else {
+        hoverIndexRef.value = index + 1
+      }
     }
     function handleMouseLeave (): void {
       hoverIndexRef.value = null
@@ -85,12 +98,16 @@ export default defineComponent({
     function handleClick (index: number): void {
       doUpdateValue(index + 1)
     }
+    function handleHalfClick (index: number): void {
+      doUpdateValue(index + 0.5)
+    }
     return {
       mergedClsPrefix: mergedClsPrefixRef,
       mergedValue: useMergedState(controlledValueRef, uncontrolledValueRef),
       hoverIndex: hoverIndexRef,
-      handleMouseEnter,
+      handleMouseMove,
       handleClick,
+      handleHalfClick,
       handleMouseLeave,
       cssVars: computed(() => {
         const { size } = props
@@ -135,12 +152,18 @@ export default defineComponent({
               {
                 [`${mergedClsPrefix}-rate__item--active`]:
                   hoverIndex !== null
-                    ? index <= hoverIndex
-                    : index < mergedValue
+                    ? index + 1 <= hoverIndex
+                    : index + 1 <= mergedValue
               }
             ]}
             onClick={() => this.handleClick(index)}
-            onMouseenter={() => this.handleMouseEnter(index)}
+            onMousemove={(e) => {
+              this.handleMouseMove(
+                index,
+                e.offsetX,
+                (e.currentTarget as HTMLDivElement).offsetWidth
+              )
+            }}
           >
             {defaultSlot ? (
               defaultSlot()
@@ -149,6 +172,31 @@ export default defineComponent({
                 {{ default: () => StarIcon }}
               </NBaseIcon>
             )}
+            {this.allowHalf ? (
+              <div
+                class={[
+                  `${mergedClsPrefix}-rate__item__left`,
+                  {
+                    [`${mergedClsPrefix}-rate__item__left--active`]:
+                      hoverIndex !== null
+                        ? index + 0.5 <= hoverIndex
+                        : index + 0.5 <= mergedValue
+                  }
+                ]}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  this.handleHalfClick(index)
+                }}
+              >
+                {defaultSlot ? (
+                  defaultSlot()
+                ) : (
+                  <NBaseIcon clsPrefix={mergedClsPrefix}>
+                    {{ default: () => StarIcon }}
+                  </NBaseIcon>
+                )}
+              </div>
+            ) : null}
           </div>
         ))}
       </div>

src/rate/src/styles/index.cssr.ts

@@ -16,6 +16,7 @@ export default cB('rate', {
     `)
   ]),
   cE('item', `
+    position: relative;
     display: flex;
     transition:
       transform .1s var(--bezier),
@@ -37,5 +38,26 @@ export default cB('rate', {
     cM('active', {
       color: 'var(--item-color-active)'
     })
+  ]),
+  cE('item__left', `
+    display: inherit;
+    transition: inherit;
+    transform: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+`, [
+    c('&:hover', {
+      transform: 'scale(1.05)'
+    }),
+    c('&:active', {
+      transform: 'scale(0.96)'
+    }),
+    cM('active', {
+      color: 'var(--item-color-active)'
+    })
   ])
 ])