index.tsx 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import { use } from '../utils';
  2. import Cell from '../cell';
  3. import CellGroup from '../cell-group';
  4. import { inherit } from '../utils/functional';
  5. // Types
  6. import { CreateElement, RenderContext } from 'vue/types';
  7. import { ScopedSlot, DefaultSlots } from '../utils/use/sfc';
  8. export type PanelProps = {
  9. icon?: string;
  10. desc?: string;
  11. title?: string;
  12. status?: string;
  13. };
  14. export type PanelSlots = DefaultSlots & {
  15. header?: ScopedSlot;
  16. footer?: ScopedSlot;
  17. };
  18. const [sfc, bem] = use('panel');
  19. function Panel(
  20. h: CreateElement,
  21. props: PanelProps,
  22. slots: PanelSlots,
  23. ctx: RenderContext<PanelProps>
  24. ) {
  25. const Content = () => [
  26. slots.header ? (
  27. slots.header()
  28. ) : (
  29. <Cell
  30. icon={props.icon}
  31. label={props.desc}
  32. title={props.title}
  33. value={props.status}
  34. class={bem('header')}
  35. valueClass={bem('header-value')}
  36. />
  37. ),
  38. <div class={bem('content')}>{slots.default && slots.default()}</div>,
  39. slots.footer && (
  40. <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer()}</div>
  41. )
  42. ];
  43. return (
  44. <CellGroup
  45. class={bem()}
  46. scopedSlots={{ default: Content }}
  47. {...inherit(ctx, true)}
  48. />
  49. );
  50. }
  51. Panel.props = {
  52. icon: String,
  53. desc: String,
  54. title: String,
  55. status: String
  56. };
  57. export default sfc<PanelProps>(Panel);