import{c as t,d as n,b as e,e as d,g as r,h as a,j as o,k as s,l,a as i,D as c,o as m,f as $,E as f,p as h,i as u,F as p,m as g,A as b,y,G as k,V as v,S as w,ab as _,ac as S}from"./chunk.82446879.js";import{z as x,g as A}from"./chunk.f5a3f321.js";import"./chunk.e8a2e241.js";import{a as E}from"./chunk.4b4ee497.js";import"./chunk.b01e898f.js";import{a as j}from"./chunk.fb378401.js";import"./chunk.94a6e723.js";function M(t){let n;return{c(){n=d("div"),this.h()},l(t){n=r(t,"DIV",{id:!0}),a(n).forEach(o),this.h()},h(){s(n,"id","smx-md-doc")},m(e,d){l(e,n,d),n.innerHTML=t[0]},p(t,[e]){1&e&&(n.innerHTML=t[0])},i:i,o:i,d(t){t&&o(n)}}}function B(t,n,e){let{html:d}=n;return t.$set=(t=>{"html"in t&&e(0,d=t.html)}),[d]}class C extends t{constructor(t){super(),n(this,t,B,M,e,{html:0})}}var D={html:'
Option | \nType | \nDescription | \n
---|---|---|
columns | \nObject[] | \n列配置 | \n
rows | \nObject[] | \n行数据 | \n
sortBy | \nString | \n需要排序列key | \n
sortOrder | \nNumber | \n排序 1 = 升序, -1 降序 | \n
clickCol | \nfunction | \nevent listener/callback | \n
clickRow | \nfunction | \nevent listener/callback | \n
clickCell | \nfunction | \nevent listener/callback | \n
classNameTable | \nString/Array | \nclass name(s) for table element | \n
classNameThead | \nString/Array | \nclass name(s) for thead element | \n
classNameTbody | \nString/Array | \nclass name(s) for tbody element | \n
classNameSelect | \nString/Array | \nclass name(s) for select elements | \n
classNameRow | \nString/Array | \nclass name(s) for row elements | \n
classNameCell | \nString/Array | \nclass name(s) for cell elements | \n
fullwidth | \nBoolean | \n是否全宽度 | \n
bordered | \nBoolean | \n为所有单元格添加边框 | \n
hoverable | \nBoolean | \n在每行上添加悬停效果 | \n
striped | \nBoolean | \n在表中添加条纹 | \n
narrow | \nBoolean | \n使单元格变窄 | \n
custom | \nBoolean | \n自定义列 | \n
tWidth | \nString | \n宽度 | \n
tHeight | \nString | \n高度 | \n
fixedHeader | \nBoolean | \n固定表头,固定表头时需要设置父级div高度或者自定义tHeight 。 | \n
activedRowKey | \nArray | \n选中key | \n
key | \nString | \n唯一id,设置激活行时必须设置 | \n
点击事件
\nevent
, col
, key
event
, row
event
, row
, key
event
,checkbox
‡ 字段允许双向绑定
\nOption | \nType | \nDescription | \n
---|---|---|
key | \nString | \n数据唯一key | \n
title | \nString | \n显示标题 | \n
[class] | \nString | \n单元格指定样式类名 | \n
[sortable] | \nBoolean | \n是否开启排序 | \n
[filterOptions] | \nArray/Function | \noptional array of objects with name and value . Function is provided array of rows | \n
[filterValue] | \nString | \n要过滤的值,通常与值相同 | \n
[headerClass] | \nString | \n标题头指定样式类名 | \n
[renderValue] | \nFunction | \n自定义呈现渲染html | \n
component | \nBoolean | \n展示自定义组件,目前只允许针对某一列进行设置 | \n
在引入bluma的scss样式下,我们可以使用变量来控制表格风格样式。
\nName | \nType | \nDefault value | \nComputed value | \n
---|---|---|---|
$table-color | \ncolor | \n$text-strong | \nhsl(0, 0%, 21%) | \n
$table-background-color | \ncolor | \n$scheme-main | \nhsl(0, 0%, 100%) | \n
$table-cell-border | \nsize | \n1px solid $border | \n\n |
$table-cell-border-width | \nsize | \n0 0 1px | \n\n |
$table-cell-padding | \nsize | \n0.5em 0.75em | \n\n |
$table-cell-heading-color | \ncolor | \n$text-strong | \nhsl(0, 0%, 21%) | \n
$table-head-cell-border-width | \nsize | \n0 0 2px | \n\n |
$table-head-cell-color | \ncolor | \n$text-strong | \nhsl(0, 0%, 21%) | \n
$table-foot-cell-border-width | \nsize | \n2px 0 0 | \n\n |
$table-foot-cell-color | \ncolor | \n$text-strong | \nhsl(0, 0%, 21%) | \n
$table-head-background-color | \nstring | \ntransparent | \n\n |
$table-body-background-color | \nstring | \ntransparent | \n\n |
$table-foot-background-color | \nstring | \ntransparent | \n\n |
$table-row-hover-background-color | \ncolor | \n$scheme-main-bis | \nhsl(0, 0%, 98%) | \n
$table-row-active-background-color | \ncolor | \n$primary | \nhsl(171, 100%, 41%) | \n
$table-row-active-color | \ncolor | \n$primary-invert | \n#fff | \n
$table-striped-row-even-background-color | \ncolor | \n$scheme-main-bis | \nhsl(0, 0%, 98%) | \n
$table-striped-row-even-hover-background-color | \ncolor | \n$scheme-main-ter | \nhsl(0, 0%, 96%) | \n
$table-colors | \nfunction | \n$colors | \nmergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) | \n
<script>\n import Table from "../../Table";\n const rows = [\n /** 数据体 */\n ];\n const columns = [\n /** 列设置 */\n ];\n</script>\n\n<Table columns="{columns}" rows="{rows}"></Table>
\n// define some sample data...\nconst rows = [\n { id: 1, first_name: "Marilyn", last_name: "Monroe", gender: "female" },\n { id: 2, first_name: "Abraham", last_name: "Lincoln", gender: "male" },\n { id: 3, first_name: "Mother", last_name: "Teresa", gender: "female" },\n { id: 4, first_name: "John F.", last_name: "Kennedy", gender: "male" },\n { id: 5, first_name: "Martin Luther", last_name: "King", gender: "male" },\n { id: 6, first_name: "Nelson", last_name: "Mandela", gender: "male" },\n { id: 7, first_name: "Winston", last_name: "Churchill", gender: "male" },\n { id: 8, first_name: "George", last_name: "Soros", gender: "male" },\n { id: 9, first_name: "Bill", last_name: "Gates", gender: "male" },\n { id: 10, first_name: "Muhammad", last_name: "Ali", gender: "male" },\n { id: 11, first_name: "Mahatma", last_name: "Gandhi", gender: "male" },\n { id: 12, first_name: "Margaret", last_name: "Thatcher", gender: "female" },\n { id: 13, first_name: "Christopher", last_name: "Columbus", gender: "male" },\n { id: 14, first_name: "Charles", last_name: "Darwin", gender: "male" },\n { id: 15, first_name: "Elvis", last_name: "Presley", gender: "male" },\n { id: 16, first_name: "Albert", last_name: "Einstein", gender: "male" },\n { id: 17, first_name: "Paul", last_name: "McCartney", gender: "male" },\n { id: 18, first_name: "Queen", last_name: "Victoria", gender: "female" },\n { id: 19, first_name: "Pope", last_name: "Francis", gender: "male" }\n // etc...\n];\n\n// define column configs\nconst columns = [\n {\n key: "id",\n title: "ID",\n sortable: true,\n filterOptions: rows => {\n // generate groupings of 0-10, 10-20 etc...\n let nums = {};\n rows.forEach(row => {\n let num = Math.floor(row.id / 10);\n if (nums[num] === undefined)\n nums[num] = { name: `${num * 10} to ${(num + 1) * 10}`, value: num };\n });\n // fix order\n nums = Object.entries(nums)\n .sort()\n .reduce((o, [k, v]) => ((o[k] = v), o), {});\n return Object.values(nums);\n },\n filterValue: v => Math.floor(v.id / 10),\n headerClass: "text-left"\n },\n {\n key: "first_name",\n title: "FIRST_NAME",\n sortable: true,\n filterOptions: rows => {\n // use first letter of first_name to generate filter\n let letrs = {};\n rows.forEach(row => {\n let letr = row.first_name.charAt(0);\n if (letrs[letr] === undefined)\n letrs[letr] = {\n name: `${letr.toUpperCase()}`,\n value: letr.toLowerCase()\n };\n });\n // fix order\n letrs = Object.entries(letrs)\n .sort()\n .reduce((o, [k, v]) => ((o[k] = v), o), {});\n return Object.values(letrs);\n },\n filterValue: v => v.first_name.charAt(0).toLowerCase()\n },\n {\n key: "last_name",\n title: "LAST_NAME",\n sortable: true,\n filterOptions: rows => {\n // use first letter of last_name to generate filter\n let letrs = {};\n rows.forEach(row => {\n let letr = row.last_name.charAt(0);\n if (letrs[letr] === undefined)\n letrs[letr] = {\n name: `${letr.toUpperCase()}`,\n value: letr.toLowerCase()\n };\n });\n // fix order\n letrs = Object.entries(letrs)\n .sort()\n .reduce((o, [k, v]) => ((o[k] = v), o), {});\n return Object.values(letrs);\n },\n filterValue: v => v.last_name.charAt(0).toLowerCase()\n },\n {\n key: "gender",\n title: "GENDER",\n renderValue: v => v.gender.charAt(0).toUpperCase() + v.gender.substring(1), // capitalize\n sortable: true,\n filterOptions: ["male", "female"] // provide array\n }\n];
',metadata:{},filename:"stable.md",path:"/Users/keiferju/workplace/Publish/svelma-pro/docs/src/mddocs/stable.md"};function O(t){let n,e;const m=new x({props:{columns:t[2],rows:t[3]}});return{c(){n=d("div"),c(m.$$.fragment),this.h()},l(t){n=r(t,"DIV",{slot:!0,style:!0});var e=a(n);f(m.$$.fragment,e),e.forEach(o),this.h()},h(){s(n,"slot","preview"),v(n,"height","200px")},m(t,d){l(t,n,d),p(m,n,null),e=!0},p:i,i(t){e||(b(m.$$.fragment,t),e=!0)},o(t){y(m.$$.fragment,t),e=!1},d(t){t&&o(n),k(m)}}}function T(t){let n,e;const m=new x({props:{columns:t[2],rows:t[3],checkbox:!0,bordered:!0,narrow:!0}});return{c(){n=d("div"),c(m.$$.fragment),this.h()},l(t){n=r(t,"DIV",{slot:!0,style:!0});var e=a(n);f(m.$$.fragment,e),e.forEach(o),this.h()},h(){s(n,"slot","preview"),v(n,"height","200px")},m(t,d){l(t,n,d),p(m,n,null),e=!0},p:i,i(t){e||(b(m.$$.fragment,t),e=!0)},o(t){y(m.$$.fragment,t),e=!1},d(t){t&&o(n),k(m)}}}function I(t){let n;return{c(){n=$("Submit")},l(t){n=u(t,"Submit")},m(t,e){l(t,n,e)},d(t){t&&o(n)}}}function N(t){let n;return{c(){n=$("Reset")},l(t){n=u(t,"Reset")},m(t,e){l(t,n,e)},d(t){t&&o(n)}}}function R(t){let n,e,i;const $=new A({props:{type:"is-primary",size:"is-small",$$slots:{default:[I]},$$scope:{ctx:t}}});$.$on("click",function(...n){return t[7](t[10],...n)});const u=new A({props:{type:"is-primary",size:"is-small",$$slots:{default:[N]},$$scope:{ctx:t}}});return{c(){n=d("div"),c($.$$.fragment),e=m(),c(u.$$.fragment),this.h()},l(t){n=r(t,"DIV",{class:!0,slot:!0});var d=a(n);f($.$$.fragment,d),e=h(d),f(u.$$.fragment,d),d.forEach(o),this.h()},h(){s(n,"class","buttons"),s(n,"slot","component")},m(t,d){l(t,n,d),p($,n,null),g(n,e),p(u,n,null),i=!0},p(n,e){t=n;const d={};2048&e&&(d.$$scope={dirty:e,ctx:t}),$.$set(d);const r={};2048&e&&(r.$$scope={dirty:e,ctx:t}),u.$set(r)},i(t){i||(b($.$$.fragment,t),b(u.$$.fragment,t),i=!0)},o(t){y($.$$.fragment,t),y(u.$$.fragment,t),i=!1},d(t){t&&o(n),k($),k(u)}}}function z(t){let n,e,i,m;function $(n){t[8].call(null,n)}function h(n){t[9].call(null,n)}let u={columns:t[4],rows:t[5],key:"id",activedRowKey:[2],$$slots:{component:[R,({row:t})=>({10:t}),({row:t})=>t?1024:0]},$$scope:{ctx:t}};void 0!==t[0]&&(u.sortBy=t[0]),void 0!==t[1]&&(u.sortOrder=t[1]);const g=new x({props:u});return w.push(()=>_(g,"sortBy",$)),w.push(()=>_(g,"sortOrder",h)),{c(){n=d("div"),c(g.$$.fragment),this.h()},l(t){n=r(t,"DIV",{slot:!0,style:!0});var e=a(n);f(g.$$.fragment,e),e.forEach(o),this.h()},h(){s(n,"slot","preview"),v(n,"height","200px")},m(t,e){l(t,n,e),p(g,n,null),m=!0},p(t,n){const d={};2048&n&&(d.$$scope={dirty:n,ctx:t}),!e&&1&n&&(e=!0,d.sortBy=t[0],S(()=>e=!1)),!i&&2&n&&(i=!0,d.sortOrder=t[1],S(()=>i=!1)),g.$set(d)},i(t){m||(b(g.$$.fragment,t),m=!0)},o(t){y(g.$$.fragment,t),m=!1},d(t){t&&o(n),k(g)}}}function L(t){let n,e,i,v,w,_,S,x,A,M,B,I,N,R,L,V,F,P;const G=new E({props:{title:"stable",subtitle:"表格"}}),H=new j({props:{horizontal:!0,code:"