chore: merge src and src-next

2020-07-15 20:02:00 +08:00
parent 6672b34618
commit 0304fcb6fa
382 changed files with 464 additions and 24746 deletions
@@ -0,0 +1,110 @@
+import { createNamespace, addUnit } from '../utils';
+
+const [createComponent, bem] = createNamespace('skeleton');
+const DEFAULT_ROW_WIDTH = '100%';
+const DEFAULT_LAST_ROW_WIDTH = '60%';
+
+export default createComponent({
+  props: {
+    title: Boolean,
+    round: Boolean,
+    avatar: Boolean,
+    row: {
+      type: [Number, String],
+      default: 0,
+    },
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+    animate: {
+      type: Boolean,
+      default: true,
+    },
+    avatarSize: {
+      type: String,
+      default: '32px',
+    },
+    avatarShape: {
+      type: String,
+      default: 'round',
+    },
+    titleWidth: {
+      type: [Number, String],
+      default: '40%',
+    },
+    rowWidth: {
+      type: [Number, String, Array],
+      default: DEFAULT_ROW_WIDTH,
+    },
+  },
+
+  setup(props, { slots }) {
+    return function () {
+      if (!props.loading) {
+        return slots.default && slots.default();
+      }
+
+      function Title() {
+        if (props.title) {
+          return (
+            <h3
+              class={bem('title')}
+              style={{ width: addUnit(props.titleWidth) }}
+            />
+          );
+        }
+      }
+
+      function Rows() {
+        const Rows = [];
+        const { rowWidth } = props;
+
+        function getRowWidth(index) {
+          if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
+            return DEFAULT_LAST_ROW_WIDTH;
+          }
+
+          if (Array.isArray(rowWidth)) {
+            return rowWidth[index];
+          }
+
+          return rowWidth;
+        }
+
+        for (let i = 0; i < props.row; i++) {
+          Rows.push(
+            <div
+              class={bem('row')}
+              style={{ width: addUnit(getRowWidth(i)) }}
+            />
+          );
+        }
+
+        return Rows;
+      }
+
+      function Avatar() {
+        if (props.avatar) {
+          const size = addUnit(props.avatarSize);
+          return (
+            <div
+              class={bem('avatar', props.avatarShape)}
+              style={{ width: size, height: size }}
+            />
+          );
+        }
+      }
+
+      return (
+        <div class={bem({ animate: props.animate, round: props.round })}>
+          {Avatar()}
+          <div class={bem('content')}>
+            {Title()}
+            {Rows()}
+          </div>
+        </div>
+      );
+    };
+  },
+});
@@ -1,129 +0,0 @@
-// Utils
-import { createNamespace, addUnit } from '../utils';
-import { inherit } from '../utils/functional';
-
-// Types
-import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
-
-export type SkeletonProps = {
-  row: number | string;
-  title?: boolean;
-  round?: boolean;
-  avatar?: boolean;
-  loading: boolean;
-  animate: boolean;
-  avatarSize: string;
-  avatarShape: 'square' | 'round';
-  titleWidth: number | string;
-  rowWidth: number | string | (number | string)[];
-};
-
-const [createComponent, bem] = createNamespace('skeleton');
-const DEFAULT_ROW_WIDTH = '100%';
-const DEFAULT_LAST_ROW_WIDTH = '60%';
-
-function Skeleton(
-  h: CreateElement,
-  props: SkeletonProps,
-  slots: DefaultSlots,
-  ctx: RenderContext
-) {
-  if (!props.loading) {
-    return slots.default && slots.default();
-  }
-
-  function Title() {
-    if (props.title) {
-      return (
-        <h3 class={bem('title')} style={{ width: addUnit(props.titleWidth) }} />
-      );
-    }
-  }
-
-  function Rows() {
-    const Rows = [];
-    const { rowWidth } = props;
-
-    function getRowWidth(index: number) {
-      if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) {
-        return DEFAULT_LAST_ROW_WIDTH;
-      }
-
-      if (Array.isArray(rowWidth)) {
-        return rowWidth[index];
-      }
-
-      return rowWidth;
-    }
-
-    for (let i = 0; i < props.row; i++) {
-      Rows.push(
-        <div class={bem('row')} style={{ width: addUnit(getRowWidth(i)) }} />
-      );
-    }
-
-    return Rows;
-  }
-
-  function Avatar() {
-    if (props.avatar) {
-      const size = addUnit(props.avatarSize);
-      return (
-        <div
-          class={bem('avatar', props.avatarShape)}
-          style={{ width: size, height: size }}
-        />
-      );
-    }
-  }
-
-  return (
-    <div
-      class={bem({ animate: props.animate, round: props.round })}
-      {...inherit(ctx)}
-    >
-      {Avatar()}
-      <div class={bem('content')}>
-        {Title()}
-        {Rows()}
-      </div>
-    </div>
-  );
-}
-
-Skeleton.props = {
-  title: Boolean,
-  round: Boolean,
-  avatar: Boolean,
-  row: {
-    type: [Number, String],
-    default: 0,
-  },
-  loading: {
-    type: Boolean,
-    default: true,
-  },
-  animate: {
-    type: Boolean,
-    default: true,
-  },
-  avatarSize: {
-    type: String,
-    default: '32px',
-  },
-  avatarShape: {
-    type: String,
-    default: 'round',
-  },
-  titleWidth: {
-    type: [Number, String],
-    default: '40%',
-  },
-  rowWidth: {
-    type: [Number, String, Array],
-    default: DEFAULT_ROW_WIDTH,
-  },
-};
-
-export default createComponent<SkeletonProps>(Skeleton);