Merge branch 'main' of github.com:phy-lei/nutui-solid-next

README.md

@@ -7,9 +7,9 @@
 - [ ] Popup
 - [ ] ConfigProvider
 - [x] Image  [@yisumay](https://github.com/yisumay)
-- [ ] Layout
-- [ ] Col
-- [ ] Row
+- [x] Layout [@yisumay](https://github.com/yisumay)
+- [x] Col  [@yisumay](https://github.com/yisumay)
+- [x] Row  [@yisumay](https://github.com/yisumay)
 - [ ] Sticky
 - [x] Divider [@yisumay](https://github.com/yisumay)
 - [ ] Grid

packages/config.json

@@ -108,6 +108,17 @@
           "taro": true,
           "author": "yisumay"
         },
+        {
+          "version": "1.0.0",
+          "name": "Layout",
+          "type": "component",
+          "cName": "布局",
+          "desc": "布局",
+          "sort": 1,
+          "show": true,
+          "taro": true,
+          "author": "yisumay"
+        },
         {
           "version": "1.0.0",
           "name": "Space",

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

@@ -0,0 +1,61 @@
+---
+layout: ../../layouts/Layout.astro
+title: Layout
+---
+
+import CodeBlock from '@/components/CodeBlock.astro'
+
+# Layout 布局
+
+### 介绍
+
+用于快速进行布局
+
+### 安装
+
+```tsx
+import { Col, Row } from '@nutui/nutui-solid';
+```
+
+### 基础用法
+
+:::demo
+
+<CodeBlock src='basic.tsx'></CodeBlock>
+
+:::
+
+### 分栏间隔
+
+:::demo
+
+<CodeBlock src='gap.tsx'></CodeBlock>
+
+:::
+
+### Flex 布局
+
+:::demo
+
+<CodeBlock src='flex.tsx'></CodeBlock>
+
+:::
+
+## API
+
+### Row Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 布局方式，可选值为 `flex` | string | `-` |
+| gutter | 列元素之间的间距（单位为`px`） | string \| number | `-` |
+| justify | Flex 主轴对齐方式，可选值为 `start` `end` `center` `space-around` `space-between` `space-evenly` | string | `start` |
+| align | `Flex` 交叉轴对齐方式，可选值为 `flex-start` `center` `flex-end` | string | `flex-start` |
+| flexWrap | `Flex` 是否换行，可选值为 `nowrap` `wrap` `reverse` | string | `nowrap` |
+
+### Col Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| span | 列元素宽度（共分为 24 份，例如设置一行 3 个，那么 span 值为 8） | string \| number | `24` |
+| offset | 列元素偏移距离 | string \| number | `0` |

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

@@ -0,0 +1,35 @@
+---
+import Demo from '@/components/Demo.astro';
+import MobileLayout from '@/layouts/MobileLayout.astro';
+import Basic from '~/nutui-solid/src/components/layout/demos/basic.tsx'
+import Gap from '~/nutui-solid/src/components/layout/demos/gap.tsx'
+import Flex from '~/nutui-solid/src/components/layout/demos/flex.tsx'
+
+const useTranslate = (obj) => {
+  return [obj['zh-CN']];
+};
+
+const [translated] = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    gap: '分栏间隔',
+    flex: 'Flex 布局'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    gap: 'Column spacing',
+    flex: 'Flex Layout'
+  },
+});
+---
+
+<MobileLayout>
+  <Demo>
+    <h2>{translated.basic}</h2>
+    <Basic client:only="client" />
+    <h2>{translated.gap}</h2>
+    <Gap client:only="client" />
+    <h2>{translated.flex}</h2>
+    <Flex client:only="client" />
+  </Demo>
+</MobileLayout>

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

@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`should render Col correctly and should render gutter correctly 1`] = `
+<div
+  class="nut-row nut-row- nut-row-justify-start nut-row-align-flex-start nut-row-flex-nowrap"
+>
+  <div
+    class="nut-col nut-col-gutter nut-col-8 nut-col-offset-0"
+    style="padding-left: 3px; padding-right: 3px;"
+  >
+    8
+  </div>
+  <div
+    class="nut-col nut-col-gutter nut-col-8 nut-col-offset-0"
+    style="padding-left: 3px; padding-right: 3px;"
+  >
+    8
+  </div>
+  <div
+    class="nut-col nut-col-gutter nut-col-8 nut-col-offset-0"
+    style="padding-left: 3px; padding-right: 3px;"
+  >
+    8
+  </div>
+</div>
+`;

packages/nutui-solid/src/components/col/__test__/col.spec.tsx

@@ -0,0 +1,12 @@
+import { test, expect } from "vitest"
+import { render } from "@solidjs/testing-library"
+import { Row, Col } from 'nutui-solid'
+
+test('should render Col correctly and should render gutter correctly', async () => {
+  const { container } = render(() => <Row gutter="6">
+  <Col span="8">8</Col>
+  <Col span="8">8</Col>
+  <Col span="8">8</Col>
+</Row>)
+expect(container.children[0]).toMatchSnapshot()
+})

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

@@ -0,0 +1,42 @@
+import { Component, JSX, ParentProps, createMemo, mergeProps, splitProps, useContext } from 'solid-js'
+import { DataContext } from '../row/UserContext'
+
+export type ColProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onClick'> & Partial<{
+  span: string | number
+  offset: string | number
+}>
+
+const defaultProps: ColProps = {
+  span: 24,
+  offset: 0,
+}
+
+export const Col: Component<ParentProps<ColProps>> = (props) => {
+  const merged = mergeProps(defaultProps, props)
+  const { gutter } = useContext(DataContext)
+  const [local, rest] = splitProps(merged, [
+    'span',
+    'offset',
+  ])
+
+  const classes = createMemo(() => {
+    const prefixCls = 'nut-col'
+    return {
+      [prefixCls]: true,
+      [`${prefixCls}-gutter`]: !!gutter,
+      [`nut-col-${local.span}`]: true,
+      [`nut-col-offset-${local.offset}`]: true,
+    }
+  })
+
+  const style = createMemo(() => {
+    return {
+      paddingLeft: `${Number(gutter) / 2}px`,
+      paddingRight: `${Number(gutter) / 2}px`,
+    }
+  })
+
+  return (
+    <div classList={classes()} style={style()} {...rest}>{props.children}</div>
+  )
+}

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

@@ -0,0 +1,45 @@
+import { Component, JSX, ParentProps, createMemo, mergeProps, splitProps } from 'solid-js'
+import { useDataContext } from '../row/UserContext'
+
+export type ColProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onClick'> & Partial<{
+  span: string | number
+  offset: string | number
+}>
+
+const defaultProps: ColProps = {
+  span: 24,
+  offset: 0,
+}
+
+export const Col: Component<ParentProps<ColProps>> = (props) => {
+  const merged = mergeProps(defaultProps, props)
+  const context = useDataContext()
+
+  const [local, rest] = splitProps(merged, [
+    'span',
+    'offset',
+  ])
+
+  const classes = createMemo(() => {
+    const prefixCls = 'nut-col'
+    return {
+      [prefixCls]: true,
+      [`${prefixCls}-gutter`]: !!context.gutter,
+      [`nut-col-${local.span}`]: true,
+      [`nut-col-offset-${local.offset}`]: true,
+    }
+  })
+
+  const style = createMemo(() => {
+    if (context.gutter) {
+      return {
+        'padding-left': `${Number(context.gutter) / 2}px`,
+        'padding-right': `${Number(context.gutter) / 2}px`,
+      }
+    }
+  })
+
+  return (
+    <div classList={classes()} style={style()} {...rest}>{props.children}</div>
+  )
+}

packages/nutui-solid/src/components/col/index.scss

@@ -0,0 +1,24 @@
+.nut-col {
+  float: left;
+  box-sizing: border-box;
+  word-break: break-all;
+
+  &-gutter {
+    &:last-child {
+      padding-right: 0 !important;
+    }
+    &:first-child {
+      padding-left: 0 !important;
+    }
+  }
+}
+
+@for $i from 1 through 24 {
+  .nut-col-offset-#{$i} {
+    margin-left: calc((100 / 24) * #{$i} * 1%);
+  }
+
+  .nut-col-#{$i} {
+    width: calc((100 / 24) * #{$i} * 1%);
+  }
+}

packages/nutui-solid/src/components/col/index.taro.ts

@@ -0,0 +1,5 @@
+import { Col } from './col.taro'
+
+export type { ColProps } from './col.taro'
+
+export default Col

packages/nutui-solid/src/components/col/index.ts

@@ -0,0 +1,5 @@
+import { Col } from './col'
+
+export type { ColProps } from './col'
+
+export default Col

packages/nutui-solid/src/components/layout/demos/basic.tsx

@@ -0,0 +1,72 @@
+import { Col, Row } from 'nutui-solid'
+
+export const demoStyles = `
+.layout-flex-content {
+  line-height: var(--nutui-row-content-line-height, 40px);
+  color: var(--nutui-row-content-color, #fff);
+  text-align: center;
+  border-radius: var(--nutui-row-content-border-radius, 6px);
+  background: var(--nutui-row-content-background-color,var(--row-content-bg-color, #ff8881));
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.layout-flex-content-light {
+  background: var(--row-content-light-bg-color,#ffc7c4);
+}
+`
+
+function Basic() {
+  return (
+    <>
+      <style>{demoStyles}</style>
+      <Row>
+        <Col span="24">
+          <div class="layout-flex-content">span:24</div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span="12">
+          <div class="layout-flex-content">span:12</div>
+        </Col>
+        <Col span="12">
+          <div class="layout-flex-content layout-flex-content-light">
+            span:12
+          </div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span="8">
+          <div class="layout-flex-content">span:8</div>
+        </Col>
+        <Col span="8">
+          <div class="layout-flex-content layout-flex-content-light">
+            span:8
+          </div>
+        </Col>
+        <Col span="8">
+          <div class="layout-flex-content">span:8</div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span="6">
+          <div class="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div class="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+        <Col span="6">
+          <div class="layout-flex-content">span:6</div>
+        </Col>
+        <Col span="6">
+          <div class="layout-flex-content layout-flex-content-light">
+            span:6
+          </div>
+        </Col>
+      </Row>
+    </>
+  )
+}
+export default Basic