feat: sticky组件实现、demo、测试用例

package.json

@@ -9,7 +9,7 @@
   "main": "index.js",
   "scripts": {
     "gen-icon": "pnpm --filter @nutui/icons-solid run build",
-    "dev": "./bootstrap.sh",
+    "dev": "bash ./bootstrap.sh",
     "build": "pnpm build-ui && pnpm --filter nutui-solid-site run build",
     "dev-ui": "pnpm --filter nutui-solid run dev",
     "build-ui": "pnpm --filter nutui-solid run build",

packages/config.json

@@ -188,6 +188,17 @@
           "show": true,
           "taro": true,
           "author": "yisumay"
+        },
+        {
+          "version": "1.0.0",
+          "name": "Sticky",
+          "type": "component",
+          "cName": "粘性布局",
+          "desc": "当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在距离屏幕固定的距离处",
+          "sort": 1,
+          "show": true,
+          "taro": true,
+          "author": "yisumay"
         }
       ]
     },

packages/nutui-solid-site/src/content/zh-cn/sticky.mdx

@@ -0,0 +1,68 @@
+---
+layout: ../../layouts/Layout.astro
+title: Sticky
+---
+
+import CodeBlock from '@/components/CodeBlock.astro'
+
+# Sticky 单元格 
+
+### 介绍
+
+使用 fixed 定位实现的类似 position: sticky 的吸顶效果。
+
+### 安装
+
+```tsx
+import { Sticky } from '@nutui/nutui-solid';
+```
+
+### 基础用法
+
+:::demo
+
+<CodeBlock src='basic.tsx'></CodeBlock>
+
+:::
+
+### 吸顶距离
+
+:::demo
+
+<CodeBlock src='top.tsx'></CodeBlock>
+
+:::
+
+### 指定容器
+
+:::demo
+
+<CodeBlock src='container.tsx'></CodeBlock>
+
+:::
+
+### 吸底距离
+
+:::demo
+
+<CodeBlock src='bottom.tsx'></CodeBlock>
+
+:::
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| position | 吸附位置（`top`、`bottom`） | string | `top` |
+| top | 吸顶距离，`position` 为 `top` 时生效 | number | `0` |
+| bottom | 吸底距离，`position` 为 `bottom` 时生效 | number | `0` |
+| container | 容器的 `HTML` 节点 | Element | - |
+| z-index | 吸附时的层级 | number | `99` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| onChange | 吸附状态改变时触发 | `fixed: boolean` |

packages/nutui-solid-site/src/pages/demo/sticky.astro

@@ -0,0 +1,41 @@
+---
+import Demo from '@/components/Demo.astro';
+import MobileLayout from '@/layouts/MobileLayout.astro';
+import Basic from '~/nutui-solid/src/components/sticky/demos/basic.tsx';
+import Bottom from '~/nutui-solid/src/components/sticky/demos/bottom';
+import Top from '~/nutui-solid/src/components/sticky/demos/top';
+import Container from '~/nutui-solid/src/components/sticky/demos/container';
+
+
+const useTranslate = (obj) => {
+  return [obj['zh-CN']];
+};
+
+const [translated] = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    top: '吸顶距离',
+    container: '指定容器',
+    bottom: '吸底距离',
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    top: 'Top Distance',
+    container: 'Custom Container',
+    bottom: 'Bottom Distance'
+  },
+});
+---
+
+<MobileLayout>
+  <Demo>
+    <h2>{translated.basic}</h2>
+    <Basic client:only="solid-js" />
+     <h2>{translated.top}</h2>
+    <Top client:only="solid-js" />
+     <h2>{translated.container}</h2>
+    <Container client:only="solid-js" />
+    <h2>{translated.bottom}</h2>
+    <Bottom client:only="solid-js" />
+  </Demo>
+</MobileLayout>

packages/nutui-solid/src/components/cell/__test__/__snapshots__/cell.spec.tsx.snap

@@ -20,7 +20,7 @@ exports[`prop isLink 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M353.83 158.17a42.67 42.67 0 1 1 60.34-60.34l384 384a42.67 42.67 0 0 1 0 60.36l-384 384a42.67 42.67 0 1 1-60.34-60.36L707.67 512 353.83 158.17z"
+      d="m387.547 980.846 305.006-397.532a117.1 117.1 0 0 0 0-142.628L387.584 43.154a44.837 44.837 0 0 0-71.131 54.492l305.042 397.568a27.54 27.54 0 0 1 0 33.572L316.489 926.318a44.8 44.8 0 0 0 71.058 54.564"
       fill="currentColor"
     />
   </svg>

packages/nutui-solid/src/components/cell/cell.taro.tsx

@@ -1,6 +1,6 @@
 import { Component, JSX, ParentProps, Show, createMemo, mergeProps, splitProps } from 'solid-js'
 import { ArrowRight } from '@nutui/icons-solid'
-import { pxCheck } from '@/utils/pxCheck'
+import { pxCheck } from '@/utils/px-check'
 
 export type CellSize = 'normal' | 'large'
 

packages/nutui-solid/src/components/cell/cell.tsx

@@ -1,6 +1,6 @@
 import { Component, JSX, ParentProps, Show, createMemo, mergeProps, splitProps } from 'solid-js'
 import { ArrowRight } from '@nutui/icons-solid'
-import { pxCheck } from '@/utils/pxCheck'
+import { pxCheck } from '@/utils/px-check'
 
 export type CellSize = 'normal' | 'large'
 

packages/nutui-solid/src/components/grid/grid.context.tsx

@@ -1,7 +1,7 @@
 import { GridLocalProps } from './grid'
 import { createContext } from '@/hooks/create-context'
 
-type GridContextType = GridLocalProps
+type GridContextType = Omit<GridLocalProps, 'onClickItem'>
 
 export const [GridContextProvider, useGridContext, GridContext]
   = createContext<GridContextType>({

packages/nutui-solid/src/components/grid/grid.taro.tsx

@@ -1,6 +1,6 @@
 import { Component, JSX, ParentProps, createMemo, mergeProps, splitProps } from 'solid-js'
 import { GridContextProvider } from './grid.context'
-import { pxCheck } from '@/utils/pxCheck'
+import { pxCheck } from '@/utils/px-check'
 
 export type GridDirection = 'horizontal' | 'vertical'
 
@@ -13,7 +13,6 @@ export type GridLocalProps = Partial<{
   reverse: boolean
   direction: GridDirection
   clickable: boolean
-  onClickItem: (index: number) => void
 }>
 
 export type GridProps = JSX.HTMLAttributes<HTMLDivElement> & GridLocalProps
@@ -40,7 +39,6 @@ export const Grid: Component<ParentProps<GridProps>> = (props) => {
     'reverse',
     'direction',
     'clickable',
-    'onClickItem',
   ])
 
   const classes = createMemo(() => {
@@ -71,7 +69,6 @@ export const Grid: Component<ParentProps<GridProps>> = (props) => {
       reverse={local.reverse}
       direction={local.direction}
       clickable={local.clickable}
-      onClickItem={local.onClickItem}
     >
       <div classList={classes()} style={styles()}>
         {rest.children}

packages/nutui-solid/src/components/grid/grid.tsx

@@ -1,6 +1,6 @@
 import { Component, JSX, ParentProps, createMemo, mergeProps, splitProps } from 'solid-js'
 import { GridContextProvider } from './grid.context'
-import { pxCheck } from '@/utils/pxCheck'
+import { pxCheck } from '@/utils/px-check'
 
 export type GridDirection = 'horizontal' | 'vertical'
 
@@ -13,7 +13,6 @@ export type GridLocalProps = Partial<{
   reverse: boolean
   direction: GridDirection
   clickable: boolean
-  onClickItem: (index: number) => void
 }>
 
 export type GridProps = JSX.HTMLAttributes<HTMLDivElement> & GridLocalProps
@@ -40,7 +39,6 @@ export const Grid: Component<ParentProps<GridProps>> = (props) => {
     'reverse',
     'direction',
     'clickable',
-    'onClickItem',
   ])
 
   const classes = createMemo(() => {
@@ -71,7 +69,6 @@ export const Grid: Component<ParentProps<GridProps>> = (props) => {
       reverse={local.reverse}
       direction={local.direction}
       clickable={local.clickable}
-      onClickItem={local.onClickItem}
     >
       <div classList={classes()} style={styles()}>
         {rest.children}

packages/nutui-solid/src/components/griditem/grid-item.taro.tsx

@@ -1,7 +1,6 @@
 import { Component, JSX, ParentProps, createMemo, mergeProps, splitProps } from 'solid-js'
 import { useGridContext } from '../grid/grid.context'
-import { useGridItemContext } from '../grid/grid.item.context'
-import { pxCheck } from '@/utils/pxCheck'
+import { pxCheck } from '@/utils/px-check'
 
 export type GridItemProps = JSX.HTMLAttributes<HTMLDivElement> & Partial<{
   text: string
@@ -23,7 +22,6 @@ const defaultProps = {
 export const GridItem: Component<ParentProps<GridItemProps>> = (props) => {
   const merged = mergeProps(defaultProps, props)
   const parent = useGridContext()
-  const child = useGridItemContext()
 
   const [local, rest] = splitProps(merged, [
     'text',
@@ -40,9 +38,6 @@ export const GridItem: Component<ParentProps<GridItemProps>> = (props) => {
     }
     else if (parent.gutter) {
       style['padding-right'] = pxCheck(parent.gutter)
-      if (child.index >= +parent.columnNum) {
-        style['margin-top'] = pxCheck(parent.gutter)
-      }
     }
     return style
   })
@@ -65,9 +60,6 @@ export const GridItem: Component<ParentProps<GridItemProps>> = (props) => {
     if (typeof rest?.onClick === 'function') {
       rest.onClick(e)
     }
-    if (parent?.onClickItem) {
-      parent?.onClickItem(child.index)
-    }
     if (props.url) {
       props.replace ? location.replace(props.url) : (location.href = props.url)
     }

packages/nutui-solid/src/components/griditem/grid-item.tsx

@@ -1,6 +1,6 @@
 import { Component, JSX, ParentProps, createMemo, mergeProps, splitProps, useContext } from 'solid-js'
 import { GridContext } from '../grid/grid.context'
-import { pxCheck } from '@/utils/pxCheck'
+import { pxCheck } from '@/utils/px-check'
 
 export type GridItemProps = JSX.HTMLAttributes<HTMLDivElement> & Partial<{
   text: string

packages/nutui-solid/src/components/image/__test__/__snapshots__/image.spec.tsx.snap

@@ -25,12 +25,12 @@ exports[`Image: load error 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M696.43 465.25c40.61 0 73.53-32.72 73.53-73.09s-32.96-73.08-73.53-73.08-73.54 32.72-73.54 73.08 32.92 73.09 73.54 73.09zM535.74 650.62l-273.61-259.4a56.19 56.19 0 0 0-15.36 11.58l-114 119.63-6-222.77c-.73-26.82 20.84-49.41 47.67-50.14l201.77-5.44 47.34-50-250.43 6.75C119 202.33 76.33 247.17 77.78 301l7.32 271.4 4.5 166.78C91.06 793 136.05 835.47 190.2 834l176-4.75 12-.32 47.34-50 116.18-122.64z"
+          d="M696.43 465.25c40.61 0 73.53-32.72 73.53-73.09s-32.96-73.08-73.53-73.08-73.54 32.72-73.54 73.08 32.92 73.09 73.54 73.09M535.74 650.62l-273.61-259.4a56.2 56.2 0 0 0-15.36 11.58l-114 119.63-6-222.77c-.73-26.82 20.84-49.41 47.67-50.14l201.77-5.44 47.34-50-250.43 6.75C119 202.33 76.33 247.17 77.78 301l7.32 271.4 4.5 166.78C91.06 793 136.05 835.47 190.2 834l176-4.75 12-.32 47.34-50 116.18-122.64z"
           fill="currentColor"
         />
         ,
         <path
-          d="m861.71 214.8-242.83-33.86-55.09 41.46L855 263a49.05 49.05 0 0 1 41.79 55.13l-54.33 389.59-120.87-159.05A59.86 59.86 0 0 0 638.06 537l-44 33.08 65.07 86.15L603.84 698l-79.57 60.1-54.92 41.48 34.17 4.76 270.73 37.76a97.55 97.55 0 0 0 109.88-79.6 22.37 22.37 0 0 0 .65-3.44l60.53-434.16c7.44-53.32-29.95-102.62-83.6-110.1z"
+          d="m861.71 214.8-242.83-33.86-55.09 41.46L855 263a49.05 49.05 0 0 1 41.79 55.13l-54.33 389.59-120.87-159.05A59.86 59.86 0 0 0 638.06 537l-44 33.08 65.07 86.15L603.84 698l-79.57 60.1-54.92 41.48 34.17 4.76 270.73 37.76a97.55 97.55 0 0 0 109.88-79.6 22.4 22.4 0 0 0 .65-3.44l60.53-434.16c7.44-53.32-29.95-102.62-83.6-110.1"
           fill="currentColor"
         />
       </svg>
@@ -63,12 +63,12 @@ exports[`Image: loading 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M384 341.33a85.33 85.33 0 1 1-170.67 0 85.33 85.33 0 0 1 170.67 0z"
+          d="M853.161 892.55H362.595l-209.433-.414a19 19 0 0 1-1.813-.092c-24.849-2.485-47.825-14.06-64.696-32.595-16.991-18.665-26.35-42.855-26.35-68.112V264.626c0-55.808 45.404-101.211 101.212-101.211H853.16c55.808 0 101.21 45.403 101.21 101.211v225.513q0 .414-.018.826c-.022.494-1.972 51.723 15.481 85.462 4.717 9.119 1.148 20.335-7.97 25.053-9.117 4.714-20.335 1.15-25.053-7.97-21.3-41.177-19.845-97.643-19.619-103.74V264.627c0-35.307-28.724-64.031-64.03-64.031H161.515c-35.308 0-64.032 28.724-64.032 64.031v526.711c0 32.755 24.321 59.958 56.718 63.62l208.431.412h490.53c35.306 0 64.03-28.725 64.03-64.032l-.382-93.677c-.105-1.75-1.587-19.548-19.55-42.5l-.147-.19-21.712-28.489-117.227-155.119c-.416-.55-38.995-50.852-86.272-45.534-38.335 4.315-75.955 45.164-108.79 118.132-17.615 39.141-34.65 68.269-52.082 89.046-17.607 20.986-35.68 33.52-55.251 38.317-43.423 10.638-81.05-18.995-120.887-50.373l-5.057-3.98c-46.555-36.578-68.75-28.224-158.33 59.602-7.33 7.188-19.1 7.071-26.289-.26-7.187-7.33-7.07-19.1.26-26.287 46.659-45.746 77.544-72.727 107.086-84.283 33.358-13.048 64.275-6.267 100.242 21.994l5.093 4.008c33.923 26.72 63.22 49.795 89.029 43.467 25.618-6.279 53.3-42.114 82.28-106.509 39.14-86.976 85.838-134.027 138.797-139.849 68.454-7.515 117.824 57.405 119.892 60.172l117.122 154.98 21.6 28.344c26.277 33.631 27.334 61.639 27.367 64.725l.001.128.384 94.06c.001 55.884-45.4 101.287-101.209 101.287z"
           fill="currentColor"
         />
         ,
         <path
-          d="M0 170.67a128 128 0 0 1 128-128h768a128 128 0 0 1 128 128v682.66a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128V170.67zM128 128a42.67 42.67 0 0 0-42.67 42.67v405.84a383.38 383.38 0 0 1 128-21.84c71.89 0 139.16 19.75 196.68 54.12C492.46 473.96 641.05 384 810.67 384c44.37 0 87.32 6.17 128 17.66V170.67A42.67 42.67 0 0 0 896 128H128zM85.33 668.74v184.59A42.67 42.67 0 0 0 128 896h380.97C488.28 751.25 363.8 640 213.33 640c-45.8 0-89.19 10.3-128 28.74zM594.99 896H896a42.67 42.67 0 0 0 42.67-42.67V491.18a383.36 383.36 0 0 0-128-21.85c-141.91 0-265.81 76.97-332.31 191.45A382.98 382.98 0 0 1 594.99 896z"
+          d="M312.328 446.968c-42.325 0-76.759-34.434-76.759-76.76s34.434-76.759 76.76-76.759 76.759 34.435 76.759 76.76-34.434 76.759-76.76 76.759m0-116.34c-21.824 0-39.579 17.756-39.579 39.58s17.755 39.58 39.58 39.58 39.579-17.756 39.579-39.58-17.755-39.58-39.58-39.58"
           fill="currentColor"
         />
       </svg>

packages/nutui-solid/src/components/image/image.taro.tsx

@@ -1,7 +1,7 @@
 import { Component, JSX, ParentProps, Show, createEffect, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from 'solid-js'
 import { DOMElement } from 'solid-js/jsx-runtime'
 import { ImageError, ImageIcon } from '@nutui/icons-solid'
-import { pxCheck } from '@/utils/pxCheck'
+import { pxCheck } from '@/utils/px-check'
 
 export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
 export type ImagePosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | string

packages/nutui-solid/src/components/image/image.tsx

@@ -1,7 +1,7 @@
 import { Component, JSX, ParentProps, Show, createEffect, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from 'solid-js'
 import { DOMElement } from 'solid-js/jsx-runtime'
 import { ImageError, ImageIcon } from '@nutui/icons-solid'
-import { pxCheck } from '@/utils/pxCheck'
+import { pxCheck } from '@/utils/px-check'
 
 export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
 export type ImagePosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | string

packages/nutui-solid/src/components/nutui.solid.build.ts

@@ -20,6 +20,8 @@ import Col from './col';
 export * from './col';
 import Space from './space';
 export * from './space';
+import Sticky from './sticky';
+export * from './sticky';
 
 
 import './button/index.scss';
@@ -33,5 +35,6 @@ import './layout/index.scss';
 import './row/index.scss';
 import './col/index.scss';
 import './space/index.scss';
+import './sticky/index.scss';
 
-export { Button, Cell, CellGroup, Image, Divider, Grid, GridItem, Layout, Row, Col, Space };
+export { Button, Cell, CellGroup, Image, Divider, Grid, GridItem, Layout, Row, Col, Space, Sticky };

packages/nutui-solid/src/components/sticky/__test__/__snapshots__/sticky.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`should sticky to bottom after scroll 1`] = `
+<div
+  class="nut-sticky"
+>
+  <div
+    class="nut-sticky__box"
+  />
+</div>
+`;
+
+exports[`should sticky to top after scroll 1`] = `
+<div
+  class="nut-sticky"
+>
+  <div
+    class="nut-sticky__box"
+  />
+</div>
+`;