svelma-pro/client/stable.207832c2.css.map

{
  "version": 3,
  "file": "stable.207832c2.css",
  "sources": [
    "../../../../../../MDDoc.svelte",
    "../../../../../../stable.svelte"
  ],
  "sourcesContent": [
    "<script>\n  export let html;\n</script>\n\n<style lang=\"scss\">:global(#smx-md-doc) :global(h1, h2, h3, h4, h5, h6) {\n  font-size: initial;\n  font-weight: bold;\n  margin: 30px 0; }\n\n:global(#smx-md-doc) :global(table) {\n  width: 100%;\n  background: #fff;\n  border: solid 1px #ddd;\n  margin-bottom: 1.25rem;\n  table-layout: auto; }\n\n:global(#smx-md-doc) :global(td, th) {\n  border: 1px solid #dbdbdb;\n  border-width: 0 0 1px;\n  padding: 0.5em 0.75em;\n  vertical-align: top; }\n\n:global(#smx-md-doc) :global(ul) {\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.6;\n  list-style-position: outside;\n  margin-bottom: 1.25rem;\n  margin-left: 1.1rem;\n  list-style: initial; }\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL01ERG9jLnN2ZWx0ZSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGtCQUFrQjtFQUNsQixpQkFBaUI7RUFDakIsY0FBYyxFQUFFOztBQUVsQjtFQUNFLFdBQVc7RUFDWCxnQkFBZ0I7RUFDaEIsc0JBQXNCO0VBQ3RCLHNCQUFzQjtFQUN0QixrQkFBa0IsRUFBRTs7QUFFdEI7RUFDRSx5QkFBeUI7RUFDekIscUJBQXFCO0VBQ3JCLHFCQUFxQjtFQUNyQixtQkFBbUIsRUFBRTs7QUFFdkI7RUFDRSxvQkFBb0I7RUFDcEIsZUFBZTtFQUNmLGdCQUFnQjtFQUNoQiw0QkFBNEI7RUFDNUIsc0JBQXNCO0VBQ3RCLG1CQUFtQjtFQUNuQixtQkFBbUIsRUFBRSIsImZpbGUiOiJzcmMvY29tcG9uZW50cy9NRERvYy5zdmVsdGUiLCJzb3VyY2VzQ29udGVudCI6WyI6Z2xvYmFsKCNzbXgtbWQtZG9jKSA6Z2xvYmFsKGgxLCBoMiwgaDMsIGg0LCBoNSwgaDYpIHtcbiAgZm9udC1zaXplOiBpbml0aWFsO1xuICBmb250LXdlaWdodDogYm9sZDtcbiAgbWFyZ2luOiAzMHB4IDA7IH1cblxuOmdsb2JhbCgjc214LW1kLWRvYykgOmdsb2JhbCh0YWJsZSkge1xuICB3aWR0aDogMTAwJTtcbiAgYmFja2dyb3VuZDogI2ZmZjtcbiAgYm9yZGVyOiBzb2xpZCAxcHggI2RkZDtcbiAgbWFyZ2luLWJvdHRvbTogMS4yNXJlbTtcbiAgdGFibGUtbGF5b3V0OiBhdXRvOyB9XG5cbjpnbG9iYWwoI3NteC1tZC1kb2MpIDpnbG9iYWwodGQsIHRoKSB7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNkYmRiZGI7XG4gIGJvcmRlci13aWR0aDogMCAwIDFweDtcbiAgcGFkZGluZzogMC41ZW0gMC43NWVtO1xuICB2ZXJ0aWNhbC1hbGlnbjogdG9wOyB9XG5cbjpnbG9iYWwoI3NteC1tZC1kb2MpIDpnbG9iYWwodWwpIHtcbiAgZm9udC1mYW1pbHk6IGluaGVyaXQ7XG4gIGZvbnQtc2l6ZTogMXJlbTtcbiAgbGluZS1oZWlnaHQ6IDEuNjtcbiAgbGlzdC1zdHlsZS1wb3NpdGlvbjogb3V0c2lkZTtcbiAgbWFyZ2luLWJvdHRvbTogMS4yNXJlbTtcbiAgbWFyZ2luLWxlZnQ6IDEuMXJlbTtcbiAgbGlzdC1zdHlsZTogaW5pdGlhbDsgfVxuXG4vKiMgc291cmNlTWFwcGluZ1VSTD1NRERvYy5zdmVsdGUuY3NzLm1hcCAqLyJdfQ== */</style>\n\n<div id=\"smx-md-doc\">\n  {@html html}\n</div>\n",
    "<script context=\"module\">\n  export async function preload(page, session) {\n    const res = await this.fetch(`components/stable.json`)\n    const jsdoc = await res.json()\n\n    return {\n      jsdoc\n    }\n  }\n</script>\n\n<script>\n  import {\n    onMount\n  } from 'svelte'\n  import {\n    Stable,\n    Icon,\n    Datepicker,\n    Button\n  } from 'svelma-pro'\n  import DocHeader from '../../components/DocHeader.svelte'\n  import Example from '../../components/Example.svelte'\n  import JSDoc from '../../components/JSDoc.svelte'\n  import MDDoc from '../../components/MDDoc.svelte';\n  import md from '../../mddocs/stable.md';\n\n  export let jsdoc\n\n  let colums = [{\n    key: \"id\",\n    title: \"ID\"\n  }, \n  {\n    key: \"name\",\n    title: \"名称\"\n  }, \n  {\n    key: \"date\",\n    title: \"时间\"\n  }, \n  {\n    key: \"admin\",\n    title: \"权限\"\n  },\n   {\n    key: \"desc\",\n    title: \"描述\"\n  }];\n  let data = [{\n      id: 1,\n      name: 'A',\n      date: '2017/10/01',\n      admin: '01',\n      desc: '我是01'\n    },\n    {\n      id: 2,\n      name: 'B',\n      date: '2020/03/19',\n      admin: '02',\n      desc: '我是02'\n    },\n    {\n      id: 3,\n      name: 'C',\n      date: '2019/07/15',\n      admin: '03',\n      desc: '我是03'\n    },\n  ];\n\n\n  let sortBy = \"first_name\";\n  let sortOrder = 1;\n\n  const colums2 = [{\n      key: \"id\",\n      title: \"ID\",\n      sortable: true,\n    },\n    {\n      key: \"first_name\",\n      title: \"FIRST NAME\",\n      sortable: true,\n    },\n    {\n      key: \"last_name\",\n      title: \"LAST NAME\",\n      sortable: true,\n      component: true\n    },\n    {\n      key: \"email\",\n      title: \"EMAIL\",\n      sortable: true\n    },\n    {\n      key: \"gender\",\n      title: \"GENDER\",\n      sortable: true,\n    },\n    {\n      key: \"ip_address\",\n      title: \"IP ADDRESS\",\n      sortable: true,\n    },\n  ];\n\n  let data2 = [{\n      id: 1,\n      first_name: \"1\",\n      last_name: \"234\",\n      gender: \"Mal1e\",\n      ip_address: \"192.168.\",\n      email: \"234\",\n    },\n    {\n      id: 2,\n      first_name: \"2\",\n      last_name: \"234\",\n      gender: \"Male\",\n      ip_address: \"192.168.\",\n      email: \"234\",\n    },\n  ];\n\n\n    function submit(v){\n    alert('当前行为'+v.id);\n  }\n</script>\n\n<style>\n:global(.button){\n  margin: 3px;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9yb3V0ZXMvY29tcG9uZW50cy9zdGFibGUuc3ZlbHRlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQTtFQUNFLFdBQVc7QUFDYiIsImZpbGUiOiJzcmMvcm91dGVzL2NvbXBvbmVudHMvc3RhYmxlLnN2ZWx0ZSIsInNvdXJjZXNDb250ZW50IjpbIlxuOmdsb2JhbCguYnV0dG9uKXtcbiAgbWFyZ2luOiAzcHg7XG59XG4iXX0= */</style>\n<DocHeader title=\"stable\" subtitle=\"表格\" />\n\n<!-- <button class=\"button is-primary\"  on:click=\"{() => add()}\">添加</button> -->\n\n<p class=\"title is-4\">基础表格</p>\n<Example horizontal={true} code={`<script>\n  import { Stable } from 'svelma-pro'\n  let colums = [\n  {key: \"id\",title: \"ID\"},\n  {key: \"name\",title: \"名称\"},\n  {key: \"date\",title: \"时间\"},\n  {key: \"admin\",title: \"权限\"},\n  {key: \"desc\",title: \"描述\"}];\n  let data = [\n  {id: 1,name: 'A',date: '2017/10/01',admin: '01',desc: '我是01'},\n  {id: 2,name: 'B',date: '2020/03/19',admin: '02',desc: '我是02'},\n  {id: 3,name: 'C',date: '2019/07/15',admin: '03',desc: '我是03'},\n  ];\n  </script>\n  <Stable columns={colums} rows={data}></Stable>\n  `}>\n  <div slot=\"preview\" style=\"height: 200px\">\n    <Stable columns={colums} rows={data}></Stable>\n  </div>\n</Example>\n<hr class=\"is-medium\" />\n\n\n<p class=\"title is-4\">表格设置</p>\n更多设置参数见文档。\n<Example horizontal={true} code={`<script>\n  import { Stable } from 'svelma-pro'\n  let colums = [\n  {key: \"id\",title: \"ID\"},\n  {key: \"name\",title: \"名称\"},\n  {key: \"date\",title: \"时间\"},\n  {key: \"admin\",title: \"权限\"},\n  {key: \"desc\",title: \"描述\"}];\n  let data = [\n  {id: 1,name: 'A',date: '2017/10/01',admin: '01',desc: '我是01'},\n  {id: 2,name: 'B',date: '2020/03/19',admin: '02',desc: '我是02'},\n  {id: 3,name: 'C',date: '2019/07/15',admin: '03',desc: '我是03'},\n  ];\n  </script>\n  <Stable columns={colums} rows={data} checkbox={true} bordered={true} narrow={true}></Stable>\n  `}>\n  <div slot=\"preview\" style=\"height:200px\">\n    <Stable columns={colums} rows={data} checkbox={true} bordered={true} narrow={true}></Stable>\n  </div>\n</Example>\n<hr class=\"is-medium\" />\n\n\n<p class=\"title is-4\">高级表格配置</p>\n更多高级配置项详见文档。\n<Example horizontal={true} code={`<script>\n  import { Stable } from 'svelma-pro'\n  import {Button} from \"svelma-pro\";\n\n  let sortBy = \"first_name\";\n  let sortOrder = 1;\n\n  const colums2 = [{\n      key: \"id\",\n      title: \"ID\",\n      sortable: true,\n    },\n    {\n      key: \"first_name\",\n      title: \"FIRST NAME\",\n      sortable: true,\n    },\n    {\n      key: \"last_name\",\n      title: \"LAST NAME\",\n      sortable: true,\n      component: true\n    },\n    {\n      key: \"email\",\n      title: \"EMAIL\",\n      sortable: true\n    },\n    {\n      key: \"gender\",\n      title: \"GENDER\",\n      sortable: true,\n    },\n    {\n      key: \"ip_address\",\n      title: \"IP ADDRESS\",\n      sortable: true,\n    },\n  ];\n\n  const data2 = [{\n      id: 234,\n      first_name: \"1\",\n      last_name: \"234\",\n      gender: \"Mal1e\",\n      ip_address: \"192.168.\",\n      email: \"234\",\n    },\n    {\n      id: 234,\n      first_name: \"2\",\n      last_name: \"234\",\n      gender: \"Male\",\n      ip_address: \"192.168.\",\n      email: \"234\",\n    },\n  ];\n\n  function submit(v){\n    alert('当前行为'+v.id);\n  }\n\n     <Stable columns={colums2} rows={data2} bind:sortBy bind:sortOrder>\n      <div class=\"buttons\" slot=\"component\" let:row>\n        <Button type=\"is-primary\" size=\"is-small\" on:click={(e)=>submit(row)}>Submit</Button>\n        <Button type=\"is-primary\" size=\"is-small\" >Reset</Button>\n      </div>\n    </Stable>\n  `}>\n  <div slot=\"preview\" style=\"height:200px\">\n    <Stable columns={colums2} rows={data2} bind:sortBy bind:sortOrder key={'id'} activedRowKey={[2]}>\n      <div class=\"buttons\" slot=\"component\" let:row>\n        <Button type=\"is-primary\" size=\"is-small\"  on:click={(e)=>submit(row)}>Submit</Button>\n        <Button type=\"is-primary\" size=\"is-small\" >Reset</Button>\n      </div>\n    </Stable>\n  </div>\n</Example>\n\n<MDDoc html={md.html}></MDDoc>\n<!-- <img src=\"./stable.png\" alt=\"\"> -->"
  ],
  "names": [],
  "mappings": "AAI2B,WAAW,AAAC,CAAC,AAAQ,sBAAsB,AAAE,CAAC,AACvE,SAAS,CAAE,OAAO,CAClB,WAAW,CAAE,IAAI,CACjB,MAAM,CAAE,IAAI,CAAC,CAAC,AAAE,CAAC,AAEX,WAAW,AAAC,CAAC,AAAQ,KAAK,AAAE,CAAC,AACnC,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,IAAI,CAChB,MAAM,CAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CACtB,aAAa,CAAE,OAAO,CACtB,YAAY,CAAE,IAAI,AAAE,CAAC,AAEf,WAAW,AAAC,CAAC,AAAQ,MAAM,AAAE,CAAC,AACpC,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CACzB,YAAY,CAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CACrB,OAAO,CAAE,KAAK,CAAC,MAAM,CACrB,cAAc,CAAE,GAAG,AAAE,CAAC,AAEhB,WAAW,AAAC,CAAC,AAAQ,EAAE,AAAE,CAAC,AAChC,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,GAAG,CAChB,mBAAmB,CAAE,OAAO,CAC5B,aAAa,CAAE,OAAO,CACtB,WAAW,CAAE,MAAM,CACnB,UAAU,CAAE,OAAO,AAAE,CAAC;ACyGhB,OAAO,AAAC,CAAC,AACf,MAAM,CAAE,GAAG,AACb,CAAC"
}