[improvement] Panel: tsx (#2782)

packages/panel/index.tsx

@@ -0,0 +1,65 @@
+import { use } from '../utils';
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+import { inherit } from '../utils/functional';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { ScopedSlot, DefaultSlots } from '../utils/use/sfc';
+
+export type PanelProps = {
+  icon?: string;
+  desc?: string;
+  title?: string;
+  status?: string;
+};
+
+export type PanelSlots = DefaultSlots & {
+  header?: ScopedSlot;
+  footer?: ScopedSlot;
+};
+
+const [sfc, bem] = use('panel');
+
+function Panel(
+  h: CreateElement,
+  props: PanelProps,
+  slots: PanelSlots,
+  ctx: RenderContext<PanelProps>
+) {
+  const Content = () => [
+    slots.header ? (
+      slots.header()
+    ) : (
+      <Cell
+        icon={props.icon}
+        label={props.desc}
+        title={props.title}
+        value={props.status}
+        class={bem('header')}
+        valueClass={bem('header-value')}
+      />
+    ),
+    <div class={bem('content')}>{slots.default && slots.default()}</div>,
+    slots.footer && (
+      <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer()}</div>
+    )
+  ];
+
+  return (
+    <CellGroup
+      class={bem()}
+      scopedSlots={{ default: Content }}
+      {...inherit(ctx, true)}
+    />
+  );
+}
+
+Panel.props = {
+  icon: String,
+  desc: String,
+  title: String,
+  status: String
+};
+
+export default sfc<PanelProps>(Panel);