seven-design-ui 0.0.1 → 0.0.2

package/packages/components/src/cascader/cascader.css

@@ -0,0 +1,381 @@
+/* Cascader 级联选择器样式 */
+.sd-cascader {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-size: var(--sd-font-size-base);
+}
+
+.sd-cascader__input {
+  position: relative;
+  width: 100%;
+  min-height: 32px;
+  padding: 4px 30px 4px 12px;
+  border: 1px solid var(--sd-border-color);
+  border-radius: var(--sd-border-radius-base);
+  background-color: var(--sd-fill-color-blank);
+  color: var(--sd-text-color-regular);
+  font-size: inherit;
+  line-height: 1.5715;
+  cursor: pointer;
+  transition: all var(--sd-transition-duration-fast);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.sd-cascader__input:hover {
+  border-color: var(--sd-border-color-hover);
+}
+
+.sd-cascader__input:focus {
+  border-color: var(--sd-color-primary);
+  box-shadow: 0 0 0 2px var(--sd-color-primary-light-9);
+  outline: none;
+}
+
+.sd-cascader__input.is-disabled {
+  background-color: var(--sd-fill-color-light);
+  color: var(--sd-text-color-placeholder);
+  cursor: not-allowed;
+}
+
+.sd-cascader__input.is-disabled:hover {
+  border-color: var(--sd-border-color);
+}
+
+.sd-cascader__input.is-disabled .sd-cascader__tag {
+  color: var(--sd-text-color-placeholder);
+  background-color: var(--sd-fill-color-light);
+}
+
+.sd-cascader__placeholder {
+  color: var(--sd-text-color-placeholder);
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sd-cascader__selected-text {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sd-cascader__tag {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: 20px;
+  padding: 0 6px;
+  font-size: var(--sd-font-size-small);
+  background-color: var(--sd-color-primary-light-9);
+  color: var(--sd-color-primary);
+  border-radius: var(--sd-border-radius-small);
+  margin: 2px 0;
+}
+
+.sd-cascader__tag-content {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sd-cascader__tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+  color: var(--sd-color-primary);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all var(--sd-transition-duration-fast);
+}
+
+.sd-cascader__tag-close:hover {
+  background-color: var(--sd-color-primary);
+  color: white;
+}
+
+.sd-cascader__suffix {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--sd-text-color-placeholder);
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sd-cascader__arrow {
+  transition: transform var(--sd-transition-duration);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.sd-cascader__arrow.is-expanded {
+  transform: rotateZ(180deg);
+}
+
+.sd-cascader__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--sd-text-color-placeholder);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all var(--sd-transition-duration-fast);
+}
+
+.sd-cascader__clear:hover {
+  color: var(--sd-text-color-regular);
+  background-color: var(--sd-fill-color-light);
+}
+
+.sd-cascader__panel {
+  display: flex;
+  width: fit-content;
+  min-width: 180px;
+  border-radius: var(--sd-border-radius-base);
+  font-size: var(--sd-font-size-base);
+  background-color: var(--sd-color-white);
+  border: 1px solid var(--sd-border-color);
+  border-radius: var(--sd-border-radius-base);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
+  opacity: 0;
+  transition: opacity var(--sd-transition-duration-fast);
+}
+
+.sd-cascader__search {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--sd-border-color-lighter);
+}
+
+.sd-cascader__search-input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--sd-border-color);
+  border-radius: var(--sd-border-radius-small);
+  font-size: var(--sd-font-size-base);
+  background-color: var(--sd-fill-color-blank);
+  color: var(--sd-text-color-regular);
+  outline: none;
+  transition: border-color var(--sd-transition-duration-fast);
+}
+
+.sd-cascader__search-input:focus {
+  border-color: var(--sd-color-primary);
+  box-shadow: 0 0 0 2px var(--sd-color-primary-light-9);
+}
+
+.sd-cascader__panel.is-visible {
+  opacity: 1;
+}
+
+.sd-cascader__menu {
+  min-width: 180px;
+  box-sizing: border-box;
+  color: var(--sd-text-color-regular);
+  border-right: 1px solid var(--sd-border-color-lighter);
+  max-height: 204px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--sd-border-color) transparent;
+}
+
+.sd-cascader__menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sd-cascader__menu::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sd-cascader__menu::-webkit-scrollbar-thumb {
+  background: var(--sd-border-color);
+  border-radius: 3px;
+}
+
+.sd-cascader__menu::-webkit-scrollbar-thumb:hover {
+  background: var(--sd-border-color-hover);
+}
+
+.sd-cascader__menu:last-child {
+  border-right: none;
+}
+
+.sd-cascader__menu:last-child .sd-cascader__menu-item {
+  padding-right: 20px;
+}
+
+.sd-cascader__menu-list {
+  position: relative;
+  min-height: 100%;
+  margin: 0;
+  padding: 6px 0;
+  list-style: none;
+  box-sizing: border-box;
+}
+
+.sd-cascader__menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 30px 0 20px;
+  height: 34px;
+  line-height: 34px;
+  outline: none;
+  cursor: pointer;
+  transition: all var(--sd-transition-duration-fast);
+  user-select: none;
+}
+
+.sd-cascader__menu-item:not(.is-disabled):hover,
+.sd-cascader__menu-item:not(.is-disabled):focus {
+  background-color: var(--sd-fill-color-light);
+}
+
+.sd-cascader__menu-item.is-disabled {
+  color: var(--sd-text-color-placeholder);
+  cursor: not-allowed;
+}
+
+.sd-cascader__menu-item.is-active,
+.sd-cascader__menu-item.in-active-path {
+  color: var(--sd-color-primary);
+  font-weight: 500;
+  background-color: var(--sd-color-primary-light-9);
+}
+
+.sd-cascader__menu-item.is-focused {
+  background-color: var(--sd-fill-color-light);
+  outline: 2px solid var(--sd-color-primary);
+  outline-offset: -2px;
+}
+
+.sd-cascader__menu-item-label {
+  flex: 1;
+  text-align: left;
+  padding: 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sd-cascader__menu-item:hover {
+  background-color: var(--sd-fill-color-light);
+}
+
+.sd-cascader__menu-item.is-active {
+  color: var(--sd-color-primary);
+  font-weight: 500;
+}
+
+.sd-cascader__menu-item.is-active,
+.sd-cascader__menu-item:hover {
+  background-color: var(--sd-color-primary-light-9);
+}
+
+.sd-cascader__menu-item.is-disabled {
+  color: var(--sd-text-color-placeholder);
+  cursor: not-allowed;
+}
+
+.sd-cascader__menu-item.is-disabled:hover {
+  background-color: transparent;
+}
+
+.sd-cascader__menu-item-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sd-cascader__menu-item-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--sd-border-color);
+  border-radius: 2px;
+  background-color: var(--sd-color-white);
+  transition: all var(--sd-transition-duration-fast);
+}
+
+.sd-cascader__menu-item-checkbox.is-checked {
+  background-color: var(--sd-color-primary);
+  border-color: var(--sd-color-primary);
+}
+
+.sd-cascader__menu-item-checkbox.is-checked::after {
+  content: '';
+  display: block;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.sd-cascader__menu-item-checkbox.is-disabled {
+  background-color: var(--sd-fill-color-light);
+  border-color: var(--sd-border-color-light);
+  cursor: not-allowed;
+}
+
+.sd-cascader__menu-item-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--sd-text-color-placeholder);
+  transition: transform var(--sd-transition-duration-fast);
+}
+
+.sd-cascader__menu-item.has-children .sd-cascader__menu-item-arrow {
+  transform: rotate(90deg);
+}
+
+.sd-cascader__menu-item-prefix {
+  position: absolute;
+  left: 10px;
+}
+
+.sd-cascader__menu-item-postfix {
+  position: absolute;
+  right: 10px;
+}
+
+.sd-cascader__menu-item-label {
+  flex: 1;
+  text-align: left;
+  padding: 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
+/* 空状态 */
+.sd-cascader__empty {
+  margin: 20px 0;
+  padding: 20px;
+  color: var(--sd-text-color-placeholder);
+  text-align: center;
+  font-size: var(--sd-font-size-small);
+}

package/packages/components/src/cascader/index.ts

@@ -0,0 +1 @@
+export * from './Cascader'

package/packages/components/src/index.ts

@@ -6,3 +6,4 @@ export * from './button'
 export * from './input'
 export * from './switch'
 export * from './pagination'
+export * from './cascader'

package/play/src/App.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useState } from 'react'
-import { Button, Input, Switch, Pagination } from '@seven-design-ui/components'
+import { Button, Input, Switch, Pagination, Cascader } from '@seven-design-ui/components'
+import { basicOptions, disabledOptions, multipleOptions, hoverOptions } from './options'
 
 function CustomContentSwitch() {
   const [switch1, setSwitch1] = useState(true)
@@ -79,6 +80,8 @@ function App() {
   const [loading, setLoading] = useState(false)
   const [paginationPage, setPaginationPage] = useState(1)
   const [paginationSize, setPaginationSize] = useState(10)
+  const [cascaderValue, setCascaderValue] = useState()
+  const [multipleCascaderValue, setMultipleCascaderValue] = useState([])
 
   const handleClick = () => {
     setLoading(true)
@@ -229,6 +232,76 @@ function App() {
             <p className="demo-tip">可以直接跳转到指定页码</p>
           </div>
         </section>
+
+        {/* Cascader 示例 */}
+        <section className="demo-section">
+          <h2>Cascader 级联选择器</h2>
+
+          {/* 基础使用 */}
+          <div className="demo-column">
+            <h3>基础使用</h3>
+            <Cascader
+              options={basicOptions}
+              value={cascaderValue}
+              onChange={setCascaderValue}
+              placeholder="请选择城市"
+            />
+            <p className="demo-tip">选中值: {cascaderValue || '无'}</p>
+          </div>
+
+          {/* 禁用选项 */}
+          <div className="demo-column">
+            <h3>禁用选项</h3>
+            <Cascader
+              options={disabledOptions}
+              placeholder="请选择城市（杭州被禁用）"
+            />
+          </div>
+
+          {/* 清空功能 */}
+          <div className="demo-column">
+            <h3>可清空</h3>
+            <Cascader
+              options={basicOptions}
+              defaultValue={['zhejiang', 'hangzhou', 'xihu']}
+              clearable
+              placeholder="可清空的级联选择器"
+            />
+          </div>
+
+          {/* 仅显示最后一级 */}
+          <div className="demo-column">
+            <h3>仅显示最后一级</h3>
+            <Cascader
+              options={basicOptions}
+              showAllLevels={false}
+              placeholder="仅显示最后一级标签"
+            />
+          </div>
+
+          {/* 多选 */}
+          <div className="demo-column">
+            <h3>多选</h3>
+            <Cascader
+              options={multipleOptions}
+              value={multipleCascaderValue}
+              onChange={setMultipleCascaderValue}
+              multiple
+              placeholder="请选择多个城市"
+            />
+            <p className="demo-tip">选中值: {multipleCascaderValue.join(', ') || '无'}</p>
+          </div>
+
+          {/* 悬停展开 */}
+          <div className="demo-column">
+            <h3>悬停展开</h3>
+            <Cascader
+              options={hoverOptions}
+              expandTrigger="hover"
+              placeholder="鼠标悬停展开子菜单"
+            />
+          </div>
+        </section>
       </main>
     </div>
   )

package/play/src/index.css

@@ -48,6 +48,8 @@ body {
   border-radius: 12px;
   padding: 32px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: visible;
 }
 
 .demo-section h2 {

package/play/src/options/basic.ts

@@ -0,0 +1,32 @@
+import { CascaderOption } from '@seven-design-ui/components'
+
+export const basicOptions: CascaderOption[] = [
+  {
+    value: 'zhejiang',
+    label: '浙江',
+    children: [
+      {
+        value: 'hangzhou',
+        label: '杭州',
+        children: [
+          { value: 'xihu', label: '西湖' },
+          { value: 'xiasha', label: '萧山' },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: '江苏',
+    children: [
+      {
+        value: 'nanjing',
+        label: '南京',
+        children: [
+          { value: 'zhonghuamen', label: '中华门' },
+          { value: 'meiyuanxincun', label: '梅园新村' },
+        ],
+      },
+    ],
+  },
+]

package/play/src/options/disabled.ts

@@ -0,0 +1,25 @@
+import { CascaderOption } from '@seven-design-ui/components'
+
+export const disabledOptions: CascaderOption[] = [
+  {
+    value: 'zhejiang',
+    label: '浙江',
+    children: [
+      {
+        value: 'hangzhou',
+        label: '杭州',
+        disabled: true,
+        children: [
+          { value: 'xihu', label: '西湖' },
+        ],
+      },
+      {
+        value: 'ningbo',
+        label: '宁波',
+        children: [
+          { value: 'jiangbei', label: '江北' },
+        ],
+      },
+    ],
+  },
+]

package/play/src/options/hover.ts

@@ -0,0 +1,18 @@
+import { CascaderOption } from '@seven-design-ui/components'
+
+export const hoverOptions: CascaderOption[] = [
+  {
+    value: 'zhejiang',
+    label: '浙江',
+    children: [
+      {
+        value: 'hangzhou',
+        label: '杭州',
+        children: [
+          { value: 'xihu', label: '西湖' },
+          { value: 'xiasha', label: '萧山' },
+        ],
+      },
+    ],
+  },
+]

package/play/src/options/index.ts

@@ -0,0 +1,4 @@
+export { basicOptions } from './basic'
+export { disabledOptions } from './disabled'
+export { multipleOptions } from './multiple'
+export { hoverOptions } from './hover'

package/play/src/options/multiple.ts

@@ -0,0 +1,39 @@
+import { CascaderOption } from '@seven-design-ui/components'
+
+export const multipleOptions: CascaderOption[] = [
+  {
+    value: 'zhejiang',
+    label: '浙江',
+    children: [
+      {
+        value: 'hangzhou',
+        label: '杭州',
+        children: [
+          { value: 'xihu', label: '西湖' },
+          { value: 'xiasha', label: '萧山' },
+        ],
+      },
+      {
+        value: 'ningbo',
+        label: '宁波',
+        disableCheckbox: true,
+        children: [
+          { value: 'jiangbei', label: '江北' },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: '江苏',
+    children: [
+      {
+        value: 'nanjing',
+        label: '南京',
+        children: [
+          { value: 'zhonghuamen', label: '中华门' },
+        ],
+      },
+    ],
+  },
+]