plain-design 1.0.0-beta.4 → 1.0.0-beta.5

package/src/pages/index/components/normal/DemoVirtualList.tsx

@@ -1,378 +1,378 @@
-import {computed, designPage, getComponentCls, classnames,reactive} from "plain-design-composition";
-import data2 from '../../../data/data-2.json';
-import {DemoRow} from "../../Demo/DemoRow";
-import {Alert, ApplicationConfigurationProvider, Checkbox, VirtualList} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <DemoRow title={'基本用法'}>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
-        <VirtualList
-          data={list.value} size={40} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
-
-  return () => (
-    <DemoRow title={'动态高度'}>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
-        <VirtualList data={list.value} size={60} dynamicSize v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              data-vid={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: item.size + 'px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                  color: 'white'
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));
-
-  const state = reactive({ disabledVirtualScroll: false, });
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <DemoRow title={'禁用/启用虚拟滚动'}>
-      <Checkbox v-model={state.disabledVirtualScroll} label={'禁用虚拟滚动'}/>
-      <br/>
-      <br/>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }} key={state.disabledVirtualScroll ? '1' : '2'}>
-        <VirtualList data={list.value} size={40} disabled={state.disabledVirtualScroll} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                  color: 'white'
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <DemoRow title={'横向滚动'}>
-      <Alert style={{ marginBottom: '16px' }}>当需要横向滚动时，必须指定横向滚动的宽度</Alert>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6', display: 'inline-block' }}>
-        <VirtualList
-          data={list.value} width={200} size={40} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6', display: 'inline-block' }}>
-        <VirtualList
-          data={list.value} width={600} size={40} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
+import {computed, designPage, getComponentCls, classnames,reactive} from "plain-design-composition";
+import data2 from '../../../data/data-2.json';
+import {DemoRow} from "../../Demo/DemoRow";
+import {Alert, ApplicationConfigurationProvider, Checkbox, VirtualList} from "../../../../packages";
+
+export const demo1 = designPage(() => {
+
+  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
+  let colors: string[] = [];
+  const getRandomColor = () => {
+    if (colors.length === 0) {colors = [...sourceColors];}
+    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
+    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
+    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    return { backgroundColor, color };
+  };
+  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
+
+  function getClass(item: any) {
+    console.log('item', item);
+    return {};
+  }
+
+  return () => (
+    <DemoRow title={'基本用法'}>
+      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
+        <VirtualList
+          data={list.value} size={40} v-slots={{
+          default: ({ item, index }) => (
+            <div
+              key={index}
+              onClick={() => console.log(index, { ...item })}
+              style={{
+                ...item.color,
+                height: '40px',
+                display: 'block',
+                width: '100%'
+              }}
+            >
+              <div
+                style={{
+                  width: '40px',
+                  backgroundColor: 'var(--custom-secondary-2)',
+                  height: '100%',
+                  overflow: 'hidden',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+                className={classnames(getClass(item))}>
+                {index + 1}
+              </div>
+              <div style={{
+                width: 'calc(100% - 40px)',
+                float: 'right',
+                height: '100%',
+                padding: '0 12px',
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                boxSizing: 'border-box',
+              }}>
+                <div style={{
+                  fontSize: '12px',
+                  display: 'flex',
+                  justifyContent: 'space-between'
+                }}>
+                  <span>{item.name}</span>
+                  <span>{item.date}</span>
+                </div>
+                <div style={{
+                  textAlign: 'right',
+                }}>
+                  {item.star}
+                </div>
+              </div>
+            </div>
+          )
+        }}/>
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const demo2 = designPage(() => {
+
+  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
+  let colors: string[] = [];
+  const getRandomColor = () => {
+    if (colors.length === 0) {colors = [...sourceColors];}
+    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
+    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
+    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    return { backgroundColor, color };
+  };
+  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
+
+  return () => (
+    <DemoRow title={'动态高度'}>
+      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
+        <VirtualList data={list.value} size={60} dynamicSize v-slots={{
+          default: ({ item, index }) => (
+            <div
+              key={index}
+              data-vid={index}
+              onClick={() => console.log(index, { ...item })}
+              style={{
+                ...item.color,
+                height: item.size + 'px',
+                display: 'block',
+                width: '100%'
+              }}
+            >
+              <div
+                style={{
+                  width: '40px',
+                  backgroundColor: 'var(--custom-secondary-2)',
+                  height: '100%',
+                  overflow: 'hidden',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}>
+                {index + 1}
+              </div>
+              <div style={{
+                width: 'calc(100% - 40px)',
+                float: 'right',
+                height: '100%',
+                padding: '0 12px',
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                boxSizing: 'border-box',
+              }}>
+                <div style={{
+                  fontSize: '12px',
+                  display: 'flex',
+                  justifyContent: 'space-between'
+                }}>
+                  <span>{item.name}</span>
+                  <span>{item.date}</span>
+                </div>
+                <div style={{
+                  textAlign: 'right',
+                  color: 'white'
+                }}>
+                  {item.star}
+                </div>
+              </div>
+            </div>
+          )
+        }}/>
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demo3 = designPage(() => {
+
+  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
+  let colors: string[] = [];
+  const getRandomColor = () => {
+    if (colors.length === 0) {colors = [...sourceColors];}
+    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
+    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
+    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    return { backgroundColor, color };
+  };
+  const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));
+
+  const state = reactive({ disabledVirtualScroll: false, });
+
+  function getClass(item: any) {
+    console.log('item', item);
+    return {};
+  }
+
+  return () => (
+    <DemoRow title={'禁用/启用虚拟滚动'}>
+      <Checkbox v-model={state.disabledVirtualScroll} label={'禁用虚拟滚动'}/>
+      <br/>
+      <br/>
+      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }} key={state.disabledVirtualScroll ? '1' : '2'}>
+        <VirtualList data={list.value} size={40} disabled={state.disabledVirtualScroll} v-slots={{
+          default: ({ item, index }) => (
+            <div
+              key={index}
+              onClick={() => console.log(index, { ...item })}
+              style={{
+                ...item.color,
+                height: '40px',
+                display: 'block',
+                width: '100%'
+              }}
+            >
+              <div
+                style={{
+                  width: '40px',
+                  backgroundColor: 'var(--custom-secondary-2)',
+                  height: '100%',
+                  overflow: 'hidden',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+                className={classnames(getClass(item))}>
+                {index + 1}
+              </div>
+              <div style={{
+                width: 'calc(100% - 40px)',
+                float: 'right',
+                height: '100%',
+                padding: '0 12px',
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                boxSizing: 'border-box',
+              }}>
+                <div style={{
+                  fontSize: '12px',
+                  display: 'flex',
+                  justifyContent: 'space-between'
+                }}>
+                  <span>{item.name}</span>
+                  <span>{item.date}</span>
+                </div>
+                <div style={{
+                  textAlign: 'right',
+                  color: 'white'
+                }}>
+                  {item.star}
+                </div>
+              </div>
+            </div>
+          )
+        }}/>
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const demo4 = designPage(() => {
+
+  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
+  let colors: string[] = [];
+  const getRandomColor = () => {
+    if (colors.length === 0) {colors = [...sourceColors];}
+    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
+    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
+    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    return { backgroundColor, color };
+  };
+  const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));
+
+  function getClass(item: any) {
+    console.log('item', item);
+    return {};
+  }
+
+  return () => (
+    <DemoRow title={'横向滚动'}>
+      <Alert style={{ marginBottom: '16px' }}>当需要横向滚动时，必须指定横向滚动的宽度</Alert>
+      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6', display: 'inline-block' }}>
+        <VirtualList
+          data={list.value} width={200} size={40} v-slots={{
+          default: ({ item, index }) => (
+            <div
+              key={index}
+              onClick={() => console.log(index, { ...item })}
+              style={{
+                ...item.color,
+                height: '40px',
+                display: 'block',
+                width: '100%'
+              }}
+            >
+              <div
+                style={{
+                  width: '40px',
+                  backgroundColor: 'var(--custom-secondary-2)',
+                  height: '100%',
+                  overflow: 'hidden',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+                className={classnames(getClass(item))}>
+                {index + 1}
+              </div>
+              <div style={{
+                width: 'calc(100% - 40px)',
+                float: 'right',
+                height: '100%',
+                padding: '0 12px',
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                boxSizing: 'border-box',
+              }}>
+                <div style={{
+                  fontSize: '12px',
+                  display: 'flex',
+                  justifyContent: 'space-between'
+                }}>
+                  <span>{item.name}</span>
+                  <span>{item.date}</span>
+                </div>
+                <div style={{
+                  textAlign: 'right',
+                }}>
+                  {item.star}
+                </div>
+              </div>
+            </div>
+          )
+        }}/>
+      </div>
+      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6', display: 'inline-block' }}>
+        <VirtualList
+          data={list.value} width={600} size={40} v-slots={{
+          default: ({ item, index }) => (
+            <div
+              key={index}
+              onClick={() => console.log(index, { ...item })}
+              style={{
+                ...item.color,
+                height: '40px',
+                display: 'block',
+                width: '100%'
+              }}
+            >
+              <div
+                style={{
+                  width: '40px',
+                  backgroundColor: 'var(--custom-secondary-2)',
+                  height: '100%',
+                  overflow: 'hidden',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+                className={classnames(getClass(item))}>
+                {index + 1}
+              </div>
+              <div style={{
+                width: 'calc(100% - 40px)',
+                float: 'right',
+                height: '100%',
+                padding: '0 12px',
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                boxSizing: 'border-box',
+              }}>
+                <div style={{
+                  fontSize: '12px',
+                  display: 'flex',
+                  justifyContent: 'space-between'
+                }}>
+                  <span>{item.name}</span>
+                  <span>{item.date}</span>
+                </div>
+                <div style={{
+                  textAlign: 'right',
+                }}>
+                  {item.star}
+                </div>
+              </div>
+            </div>
+          )
+        }}/>
+      </div>
+    </DemoRow>
+  );
+});