plain-design 1.0.0-beta.21 → 1.0.0-beta.23

package/src/packages/components/StepGroup/step.utils.ts

@@ -1,44 +1,44 @@
-/*节点状态类型*/
-export enum StepStatus {
-  wait = 'wait',
-  finish = 'finish',
-  process = 'process',
-  error = 'error',
-}
-
-export const StepUtils = {
-  getCurrentIndex: (current: any, items: any[]) => {
-    if (typeof current === "number") {
-      return current;
-    } else {
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        // console.log(item, i)
-        if (item.props.val === current) return i;
-      }
-    }
-  },
-  getStepStatus: (
-    group: { currentStatus: StepStatus, currentIndex: { value: number } },
-    child: { status: StepStatus, index: { value: number } }
-  ): StepStatus | null => {
-
-    const { currentStatus, currentIndex } = group;
-    const { status, index } = child;
-
-    if (!!status) return status as StepStatus;
-    if (currentIndex.value > index.value) {
-      return StepStatus.finish;
-    } else if (currentIndex.value === index.value) {
-      if (!!currentStatus) {
-        return currentStatus as StepStatus;
-      } else {
-        return StepStatus.process;
-      }
-    } else if (currentIndex.value < index.value) {
-      return StepStatus.wait;
-    } else {
-      return null;
-    }
-  }
-};
+/*节点状态类型*/
+export enum StepStatus {
+  wait = 'wait',
+  finish = 'finish',
+  process = 'process',
+  error = 'error',
+}
+
+export const StepUtils = {
+  getCurrentIndex: (current: any, items: any[]) => {
+    if (typeof current === "number") {
+      return current;
+    } else {
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        // console.log(item, i)
+        if (item.props.val === current) return i;
+      }
+    }
+  },
+  getStepStatus: (
+    group: { currentStatus: StepStatus, currentIndex: { value: number } },
+    child: { status: StepStatus, index: { value: number } }
+  ): StepStatus | null => {
+
+    const { currentStatus, currentIndex } = group;
+    const { status, index } = child;
+
+    if (!!status) return status as StepStatus;
+    if (currentIndex.value > index.value) {
+      return StepStatus.finish;
+    } else if (currentIndex.value === index.value) {
+      if (!!currentStatus) {
+        return currentStatus as StepStatus;
+      } else {
+        return StepStatus.process;
+      }
+    } else if (currentIndex.value < index.value) {
+      return StepStatus.wait;
+    } else {
+      return null;
+    }
+  }
+};

package/src/packages/components/Tab/index.tsx

@@ -1,42 +1,42 @@
-import {designComponent, useRefs} from "plain-design-composition";
-import {TabCollector} from "../TabGroup";
-
-export const Tab = designComponent({
-  name: '-tab',
-  inheritAttrs: false,
-  inheritPropsType: HTMLDivElement,
-  props: {
-    title: { type: String },                              // 页签标题
-    init: { type: Boolean },                              // 是否立即初始化（默认第一次点击页签的时候才会初始化内容）
-    val: { type: [String, Number] },                      // 页签唯一标识，用于 tabs 绑定值
-    destroyOnHide: { type: Boolean },                     // 是否再隐藏页签的时候销毁页签页面(重新打开页签的时候，页签内容会重新初始化)
-  },
-  slots: ['default'],
-  scopeSlots: {
-    head: (data: { active: boolean }) => {},
-  },
-  emits: {
-    onClose: () => true,
-  },
-  setup({ props, slots, scopeSlots, event, attrs }) {
-    const { refs, onRef } = useRefs({
-      el: HTMLSpanElement,
-    });
-    TabCollector.child({ sort: () => refs.el! });
-    // console.log('attrs', {...attrs})
-    return {
-      refer: {
-        slots,
-        scopeSlots,
-        props,
-        event,
-        attrs,
-      },
-      render: () => (<span ref={onRef.el}>{props.title}</span>)
-    };
-  }
-});
-
-export type PlTabComponent = typeof Tab.use.class
-
-export default Tab;
+import {designComponent, useRefs} from "plain-design-composition";
+import {TabCollector} from "../TabGroup";
+
+export const Tab = designComponent({
+  name: '-tab',
+  inheritAttrs: false,
+  inheritPropsType: HTMLDivElement,
+  props: {
+    title: { type: String },                              // 页签标题
+    init: { type: Boolean },                              // 是否立即初始化（默认第一次点击页签的时候才会初始化内容）
+    val: { type: [String, Number] },                      // 页签唯一标识，用于 tabs 绑定值
+    destroyOnHide: { type: Boolean },                     // 是否再隐藏页签的时候销毁页签页面(重新打开页签的时候，页签内容会重新初始化)
+  },
+  slots: ['default'],
+  scopeSlots: {
+    head: (data: { active: boolean }) => {},
+  },
+  emits: {
+    onClose: () => true,
+  },
+  setup({ props, slots, scopeSlots, event, attrs }) {
+    const { refs, onRef } = useRefs({
+      el: HTMLSpanElement,
+    });
+    TabCollector.child({ sort: () => refs.el! });
+    // console.log('attrs', {...attrs})
+    return {
+      refer: {
+        slots,
+        scopeSlots,
+        props,
+        event,
+        attrs,
+      },
+      render: () => (<span ref={onRef.el}>{props.title}</span>)
+    };
+  }
+});
+
+export type PlTabComponent = typeof Tab.use.class
+
+export default Tab;

package/src/packages/components/TabGroup/TabsHeader.tsx

@@ -1,105 +1,105 @@
-import {classnames, designComponent, onBeforeUnmount, onMounted, PropType, reactive, useRefs, useStyles} from "plain-design-composition";
-import {TabData} from "./tabs.utils";
-
-export const TabsHeader = designComponent({
-  props: {
-    tabs: { type: Array as PropType<TabData[]>, required: true },
-  },
-  emits: {
-    onClickTabHead: (tab: TabData) => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const { refs, onRef } = useRefs({
-      el: HTMLDivElement,
-      list: HTMLDivElement,
-    });
-
-    const state = reactive({
-      offsetData: {
-        listLeft: 0,                    // list元素当前left值
-        hostWidth: 0,                   // 容器宽度
-        totalWidth: 0,                  // 总的item宽度
-        children: [] as { left: number, width: number }[],
-      },
-    });
-
-    const utils = {
-      refreshOffsetData: () => {
-        const { offsetWidth } = refs.el!;
-        const { children } = refs.list!;
-        state.offsetData.hostWidth = offsetWidth;
-        state.offsetData.children = (Array.from(children) as HTMLDivElement[]).reduce((prev, item, index) => {
-          const { offsetLeft, offsetWidth } = item;
-          /*最后一个是 indicator，所以这里找最后一个child是-2*/
-          if (index === children.length - 2) {state.offsetData.totalWidth = offsetLeft + offsetWidth;}
-          prev.push({ left: offsetLeft, width: offsetWidth });
-          return prev;
-        }, [] as { left: number, width: number }[]);
-      }
-    };
-
-    const handler = {
-      onMousewheel: (e: WheelEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        const { totalWidth, hostWidth, listLeft } = state.offsetData;
-        if (totalWidth < hostWidth) {return;}
-        const delta = ((Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY));
-        let target = listLeft - delta;
-        if (target > 0) {
-          target = 0;
-        } else if (target < (hostWidth - totalWidth)) {
-          target = hostWidth - totalWidth;
-        }
-        state.offsetData.listLeft = target;
-      }
-    };
-
-    const listStyles = useStyles(style => {
-      style.left = `${state.offsetData.listLeft}px`;
-    });
-    const indicatorStyle = useStyles(style => {
-      const index = props.tabs.findIndex(i => i.active);
-      if (index == null || index === -1) return;
-      const el = state.offsetData.children[index];
-      if (!el) return;
-      const { left, width } = el;
-      style.left = `${left}px`;
-      style.width = `${width}px`;
-    });
-
-    let refreshTimer: number;
-    onMounted(() => {
-      refreshTimer = setInterval(() => utils.refreshOffsetData(), 1000) as any as number;
-
-      refs.el!.addEventListener('wheel', handler.onMousewheel);
-    });
-    onBeforeUnmount(() => {
-      clearInterval(refreshTimer);
-
-      refs.el!.removeEventListener('wheel', handler.onMousewheel);
-    });
-
-    return {
-      render: () => (
-        <div className="tabs-header" ref={onRef.el}>
-          <div className="tabs-header-list" style={listStyles.value} ref={onRef.list}>
-            {props.tabs.map((tab, index) => (
-              <div
-                className={classnames([
-                  'tabs-header-item',
-                  { 'tabs-header-item-active': tab.active }
-                ])}
-                key={index}
-                onClick={() => emit.onClickTabHead(tab)}>
-                {tab.item.scopeSlots.head({ active: false }, tab.item.props.title)}
-              </div>
-            ))}
-            <i className="tabs-header-indicator" style={indicatorStyle.value}/>
-          </div>
-        </div>
-      )
-    };
-  },
-});
+import {classnames, designComponent, onBeforeUnmount, onMounted, PropType, reactive, useRefs, useStyles} from "plain-design-composition";
+import {TabData} from "./tabs.utils";
+
+export const TabsHeader = designComponent({
+  props: {
+    tabs: { type: Array as PropType<TabData[]>, required: true },
+  },
+  emits: {
+    onClickTabHead: (tab: TabData) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({
+      el: HTMLDivElement,
+      list: HTMLDivElement,
+    });
+
+    const state = reactive({
+      offsetData: {
+        listLeft: 0,                    // list元素当前left值
+        hostWidth: 0,                   // 容器宽度
+        totalWidth: 0,                  // 总的item宽度
+        children: [] as { left: number, width: number }[],
+      },
+    });
+
+    const utils = {
+      refreshOffsetData: () => {
+        const { offsetWidth } = refs.el!;
+        const { children } = refs.list!;
+        state.offsetData.hostWidth = offsetWidth;
+        state.offsetData.children = (Array.from(children) as HTMLDivElement[]).reduce((prev, item, index) => {
+          const { offsetLeft, offsetWidth } = item;
+          /*最后一个是 indicator，所以这里找最后一个child是-2*/
+          if (index === children.length - 2) {state.offsetData.totalWidth = offsetLeft + offsetWidth;}
+          prev.push({ left: offsetLeft, width: offsetWidth });
+          return prev;
+        }, [] as { left: number, width: number }[]);
+      }
+    };
+
+    const handler = {
+      onMousewheel: (e: WheelEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const { totalWidth, hostWidth, listLeft } = state.offsetData;
+        if (totalWidth < hostWidth) {return;}
+        const delta = ((Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY));
+        let target = listLeft - delta;
+        if (target > 0) {
+          target = 0;
+        } else if (target < (hostWidth - totalWidth)) {
+          target = hostWidth - totalWidth;
+        }
+        state.offsetData.listLeft = target;
+      }
+    };
+
+    const listStyles = useStyles(style => {
+      style.left = `${state.offsetData.listLeft}px`;
+    });
+    const indicatorStyle = useStyles(style => {
+      const index = props.tabs.findIndex(i => i.active);
+      if (index == null || index === -1) return;
+      const el = state.offsetData.children[index];
+      if (!el) return;
+      const { left, width } = el;
+      style.left = `${left}px`;
+      style.width = `${width}px`;
+    });
+
+    let refreshTimer: number;
+    onMounted(() => {
+      refreshTimer = setInterval(() => utils.refreshOffsetData(), 1000) as any as number;
+
+      refs.el!.addEventListener('wheel', handler.onMousewheel);
+    });
+    onBeforeUnmount(() => {
+      clearInterval(refreshTimer);
+
+      refs.el!.removeEventListener('wheel', handler.onMousewheel);
+    });
+
+    return {
+      render: () => (
+        <div className="tabs-header" ref={onRef.el}>
+          <div className="tabs-header-list" style={listStyles.value} ref={onRef.list}>
+            {props.tabs.map((tab, index) => (
+              <div
+                className={classnames([
+                  'tabs-header-item',
+                  { 'tabs-header-item-active': tab.active }
+                ])}
+                key={index}
+                onClick={() => emit.onClickTabHead(tab)}>
+                {tab.item.scopeSlots.head({ active: false }, tab.item.props.title)}
+              </div>
+            ))}
+            <i className="tabs-header-indicator" style={indicatorStyle.value}/>
+          </div>
+        </div>
+      )
+    };
+  },
+});

package/src/packages/components/TabGroup/TabsInner.tsx

@@ -1,60 +1,60 @@
-import {designComponent, mergeAttrs, nextTick, PropType, reactive, RenderNode, useStyles, watch} from "plain-design-composition";
-import {PlTabComponent} from "../Tab";
-
-export const TabsInner = designComponent({
-  props: {
-    item: { type: Object as PropType<PlTabComponent>, required: true },
-    active: { type: Boolean },
-    render: { type: Function as PropType<() => RenderNode>, required: true }
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-
-    const state = reactive({
-      show: false,
-      init: props.item.props.init,
-    });
-
-    const methods = {
-      show: async () => {
-        if (state.show) return;
-        else {
-          if (!state.init) {
-            state.init = true;
-            await nextTick();
-          }
-          state.show = true;
-        }
-      },
-      hide: async () => {
-        if (!state.show) return;
-        else {
-          state.show = false;
-          if (props.item!.props.destroyOnHide) {
-            await nextTick();
-            state.init = false;
-          }
-        }
-      }
-    };
-
-    watch(() => props.active, async (val) => {val ? await methods.show() : await methods.hide();}, { immediate: true });
-
-    const styles = useStyles((styles) => {
-      if (!props.active) {
-        styles.display = 'none';
-      }
-    });
-
-    return {
-      render: () => (
-        <div {...mergeAttrs(
-          { class: 'inner-tab', style: styles.value },
-          props.item.attrs
-        )}>
-          {!!state.init && props.render()}
-        </div>
-      )
-    };
-  },
-});
+import {designComponent, mergeAttrs, nextTick, PropType, reactive, RenderNode, useStyles, watch} from "plain-design-composition";
+import {PlTabComponent} from "../Tab";
+
+export const TabsInner = designComponent({
+  props: {
+    item: { type: Object as PropType<PlTabComponent>, required: true },
+    active: { type: Boolean },
+    render: { type: Function as PropType<() => RenderNode>, required: true }
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const state = reactive({
+      show: false,
+      init: props.item.props.init,
+    });
+
+    const methods = {
+      show: async () => {
+        if (state.show) return;
+        else {
+          if (!state.init) {
+            state.init = true;
+            await nextTick();
+          }
+          state.show = true;
+        }
+      },
+      hide: async () => {
+        if (!state.show) return;
+        else {
+          state.show = false;
+          if (props.item!.props.destroyOnHide) {
+            await nextTick();
+            state.init = false;
+          }
+        }
+      }
+    };
+
+    watch(() => props.active, async (val) => {val ? await methods.show() : await methods.hide();}, { immediate: true });
+
+    const styles = useStyles((styles) => {
+      if (!props.active) {
+        styles.display = 'none';
+      }
+    });
+
+    return {
+      render: () => (
+        <div {...mergeAttrs(
+          { class: 'inner-tab', style: styles.value },
+          props.item.attrs
+        )}>
+          {!!state.init && props.render()}
+        </div>
+      )
+    };
+  },
+});