plain-design 1.0.0-beta.71 → 1.0.0-beta.73

package/src/packages/components/TabGroup/header/horizontal/TabsHeaderHorizontal.tsx

@@ -1,94 +1,94 @@
-import {designComponent, onUpdated, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
-import {TabCommonProps} from "../../tabs.utils";
-import {TabsHeaderHorizontalText} from "./TabsHeaderHorizontalText";
-import {TabsHeaderHorizontalCard} from "./TabsHeaderHorizontalCard";
-import {TabsHeaderHorizontalShadow} from "./TabsHeaderHorizontalShadow";
-import './tabs-header-horizontal.scss';
-import {delay} from "plain-utils/utils/delay";
-import {unit} from "plain-utils/string/unit";
-import {Button} from "../../../Button";
-
-export const TabsHeaderHorizontal = designComponent({
-  name: 'tabs-header-horizontal',
-  provideRefer: true,
-  props: {
-    ...TabCommonProps,
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-
-    const state = reactive({
-      showMoreButton: false,
-      scrollLeft: 0,
-      offsetWidth: 0,
-      scrollWidth: 0,
-    });
-
-    const classes = useClasses(() => [
-      'tabs-header',
-      'tabs-header-horizontal',
-      `tabs-header-type-${props.headType}`,
-      `tabs-header-pos-${props.headPosition}`,
-      {
-        'tabs-header-show-more': state.showMoreButton
-      }
-    ]);
-
-    const listStyles = useStyles(style => {
-      if (state.showMoreButton) {
-        style.left = unit(state.scrollLeft);
-      }
-    });
-
-    onUpdated(async () => {
-      await delay(50);
-      const { scrollWidth, offsetWidth } = refs.el!;
-      let flag = scrollWidth > offsetWidth + 20;
-      if (state.showMoreButton !== flag) {
-        state.showMoreButton = flag;
-      }
-      state.offsetWidth = offsetWidth;
-      state.scrollWidth = scrollWidth;
-    });
-
-    const handler = {
-      scrollLeft: () => {
-        const scrollLeft = state.scrollLeft + state.offsetWidth;
-        state.scrollLeft = Math.min(0, scrollLeft);
-      },
-      scrollRight: () => {
-        const scrollLeft = state.scrollLeft - state.offsetWidth;
-        state.scrollLeft = Math.max(-(state.scrollWidth - state.offsetWidth), scrollLeft);
-      },
-    };
-
-    return {
-      refer: {
-        refs,
-      },
-      render: () => (
-        <div className={classes.value} ref={onRef.el}>
-          {state.showMoreButton && (
-            <div className="tabs-header-more-button">
-              <Button icon="pi-left" mode="text" onClick={handler.scrollLeft}/>
-              <Button icon="pi-right" mode="text" onClick={handler.scrollRight}/>
-            </div>
-          )}
-          <div className="tabs-header-list" style={listStyles.value}>
-            {(() => {
-              const Type = props.headType === 'shadow' ? TabsHeaderHorizontalShadow :
-                props.headType === 'card' ? TabsHeaderHorizontalCard : TabsHeaderHorizontalText;
-              return (
-                <Type headType={props.headType} headPosition={props.headPosition}>
-                  {slots.default()}
-                </Type>
-              );
-            })()}
-          </div>
-        </div>
-      )
-    };
-  },
-});
+import {designComponent, onUpdated, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {TabCommonProps} from "../../tabs.utils";
+import {TabsHeaderHorizontalText} from "./TabsHeaderHorizontalText";
+import {TabsHeaderHorizontalCard} from "./TabsHeaderHorizontalCard";
+import {TabsHeaderHorizontalShadow} from "./TabsHeaderHorizontalShadow";
+import './tabs-header-horizontal.scss';
+import {delay} from "plain-utils/utils/delay";
+import {unit} from "plain-utils/string/unit";
+import {Button} from "../../../Button";
+
+export const TabsHeaderHorizontal = designComponent({
+  name: 'tabs-header-horizontal',
+  provideRefer: true,
+  props: {
+    ...TabCommonProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    const state = reactive({
+      showMoreButton: false,
+      scrollLeft: 0,
+      offsetWidth: 0,
+      scrollWidth: 0,
+    });
+
+    const classes = useClasses(() => [
+      'tabs-header',
+      'tabs-header-horizontal',
+      `tabs-header-type-${props.headType}`,
+      `tabs-header-pos-${props.headPosition}`,
+      {
+        'tabs-header-show-more': state.showMoreButton
+      }
+    ]);
+
+    const listStyles = useStyles(style => {
+      if (state.showMoreButton) {
+        style.left = unit(state.scrollLeft);
+      }
+    });
+
+    onUpdated(async () => {
+      await delay(50);
+      const { scrollWidth, offsetWidth } = refs.el!;
+      let flag = scrollWidth > offsetWidth + 20;
+      if (state.showMoreButton !== flag) {
+        state.showMoreButton = flag;
+      }
+      state.offsetWidth = offsetWidth;
+      state.scrollWidth = scrollWidth;
+    });
+
+    const handler = {
+      scrollLeft: () => {
+        const scrollLeft = state.scrollLeft + state.offsetWidth;
+        state.scrollLeft = Math.min(0, scrollLeft);
+      },
+      scrollRight: () => {
+        const scrollLeft = state.scrollLeft - state.offsetWidth;
+        state.scrollLeft = Math.max(-(state.scrollWidth - state.offsetWidth), scrollLeft);
+      },
+    };
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} ref={onRef.el}>
+          {state.showMoreButton && (
+            <div className="tabs-header-more-button">
+              <Button icon="pi-left" mode="text" onClick={handler.scrollLeft}/>
+              <Button icon="pi-right" mode="text" onClick={handler.scrollRight}/>
+            </div>
+          )}
+          <div className="tabs-header-list" style={listStyles.value}>
+            {(() => {
+              const Type = props.headType === 'shadow' ? TabsHeaderHorizontalShadow :
+                props.headType === 'card' ? TabsHeaderHorizontalCard : TabsHeaderHorizontalText;
+              return (
+                <Type headType={props.headType} headPosition={props.headPosition}>
+                  {slots.default()}
+                </Type>
+              );
+            })()}
+          </div>
+        </div>
+      )
+    };
+  },
+});

package/src/packages/components/TabGroup/header/horizontal/TabsHeaderHorizontalCard.tsx

@@ -1,15 +1,15 @@
-import {designComponent} from "plain-design-composition";
-import {TabCommonProps} from "../../tabs.utils";
-import './tabs-header-card.scss';
-
-export const TabsHeaderHorizontalCard = designComponent({
-  props: {
-    ...TabCommonProps,
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-    return () => <>
-      {slots.default()}
-    </>;
-  },
-});
+import {designComponent} from "plain-design-composition";
+import {TabCommonProps} from "../../tabs.utils";
+import './tabs-header-card.scss';
+
+export const TabsHeaderHorizontalCard = designComponent({
+  props: {
+    ...TabCommonProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+    return () => <>
+      {slots.default()}
+    </>;
+  },
+});

package/src/packages/components/TabGroup/header/horizontal/TabsHeaderHorizontalShadow.tsx

@@ -1,15 +1,15 @@
-import {designComponent} from "plain-design-composition";
-import {TabCommonProps} from "../../tabs.utils";
-import './tabs-header-shadow.scss';
-
-export const TabsHeaderHorizontalShadow = designComponent({
-  props: {
-    ...TabCommonProps,
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-    return () => <>
-      {slots.default()}
-    </>;
-  },
-});
+import {designComponent} from "plain-design-composition";
+import {TabCommonProps} from "../../tabs.utils";
+import './tabs-header-shadow.scss';
+
+export const TabsHeaderHorizontalShadow = designComponent({
+  props: {
+    ...TabCommonProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+    return () => <>
+      {slots.default()}
+    </>;
+  },
+});

package/src/packages/components/TabGroup/header/horizontal/TabsHeaderHorizontalText.tsx

@@ -1,66 +1,66 @@
-import {designComponent, onUpdated, reactive, useStyles} from "plain-design-composition";
-import {TabCommonProps} from "../../tabs.utils";
-import './tabs-header-text.scss';
-import {unit} from "plain-utils/string/unit";
-import {TabsHeaderHorizontal} from "./TabsHeaderHorizontal";
-
-interface ElItemInfo {
-  left: number,
-  width: number,
-  active: boolean,
-}
-
-export const TabsHeaderHorizontalText = designComponent({
-  props: {
-    ...TabCommonProps,
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-
-    const state = reactive({
-      elInfo: {
-        data: [] as ElItemInfo[],
-        key: '',
-      },
-    });
-
-    const parent = TabsHeaderHorizontal.use.inject();
-
-    onUpdated(() => {
-      const { el } = parent.refs;
-      if (!el) {
-        if (state.elInfo.data.length > 0) {state.elInfo = { data: [], key: '' };}
-        return;
-      }
-      const tabItemEls = Array.from<HTMLElement>(el.querySelectorAll('.tabs-header-item'));
-      const elInfoData: ElItemInfo[] = tabItemEls.map((itemEl) => {
-        const { offsetWidth: width, offsetLeft: left } = itemEl;
-        const active = itemEl.getAttribute('data-active')?.toString() == '1';
-        return { width, left, active };
-      });
-      const elInfo = {
-        data: elInfoData,
-        key: JSON.stringify(elInfoData)
-      };
-      if (elInfo.key !== state.elInfo.key) {
-        state.elInfo = elInfo;
-      }
-    });
-
-    const indicatorStyles = useStyles(() => {
-      const activeInfo = state.elInfo.data.find(i => i.active);
-      if (!activeInfo) {
-        return { width: 0, left: 0 };
-      } else {
-        return { width: unit(activeInfo.width), left: unit(activeInfo.left) };
-      }
-    });
-
-    return () => <>
-      {slots.default()}
-      <div className="tabs-header-horizontal-text-indicator-container">
-        <i className="tabs-header-horizontal-text-indicator" style={indicatorStyles.value}/>
-      </div>
-    </>;
-  },
-});
+import {designComponent, onUpdated, reactive, useStyles} from "plain-design-composition";
+import {TabCommonProps} from "../../tabs.utils";
+import './tabs-header-text.scss';
+import {unit} from "plain-utils/string/unit";
+import {TabsHeaderHorizontal} from "./TabsHeaderHorizontal";
+
+interface ElItemInfo {
+  left: number,
+  width: number,
+  active: boolean,
+}
+
+export const TabsHeaderHorizontalText = designComponent({
+  props: {
+    ...TabCommonProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const state = reactive({
+      elInfo: {
+        data: [] as ElItemInfo[],
+        key: '',
+      },
+    });
+
+    const parent = TabsHeaderHorizontal.use.inject();
+
+    onUpdated(() => {
+      const { el } = parent.refs;
+      if (!el) {
+        if (state.elInfo.data.length > 0) {state.elInfo = { data: [], key: '' };}
+        return;
+      }
+      const tabItemEls = Array.from<HTMLElement>(el.querySelectorAll('.tabs-header-item'));
+      const elInfoData: ElItemInfo[] = tabItemEls.map((itemEl) => {
+        const { offsetWidth: width, offsetLeft: left } = itemEl;
+        const active = itemEl.getAttribute('data-active')?.toString() == '1';
+        return { width, left, active };
+      });
+      const elInfo = {
+        data: elInfoData,
+        key: JSON.stringify(elInfoData)
+      };
+      if (elInfo.key !== state.elInfo.key) {
+        state.elInfo = elInfo;
+      }
+    });
+
+    const indicatorStyles = useStyles(() => {
+      const activeInfo = state.elInfo.data.find(i => i.active);
+      if (!activeInfo) {
+        return { width: 0, left: 0 };
+      } else {
+        return { width: unit(activeInfo.width), left: unit(activeInfo.left) };
+      }
+    });
+
+    return () => <>
+      {slots.default()}
+      <div className="tabs-header-horizontal-text-indicator-container">
+        <i className="tabs-header-horizontal-text-indicator" style={indicatorStyles.value}/>
+      </div>
+    </>;
+  },
+});

package/src/packages/components/TabGroup/header/horizontal/tabs-header-card.scss

@@ -1,85 +1,85 @@
-@include prefix(tab-group) {
-  .tabs-header.tabs-header-horizontal.tabs-header-type-card {
-    .tabs-header-item {
-      line-height: 45px;
-      padding: 0 20px;
-      border-left: solid 1px plv(border-color);
-
-      &:last-child {
-        border-right: solid 1px plv(border-color);
-      }
-
-      &:hover, &.tabs-header-item-active {
-        color: plv(primary-6);
-      }
-
-      &:not(.tabs-header-item-active) {
-        background-color: plv(secondary-light-1);
-      }
-    }
-
-    &.tabs-header-pos-top {
-      .tabs-header-list {
-        border-bottom: solid 1px plv(border-color);
-
-        .tabs-header-item {
-          border-top: solid 1px plv(border-color);
-
-          &:first-child {
-            border-top-left-radius: plv(box-size-normal-border-radius);
-          }
-
-          &:last-child {
-            border-top-right-radius: plv(box-size-normal-border-radius);
-          }
-
-          &.tabs-header-item-active {
-            position: relative;
-
-            &:before {
-              position: absolute;
-              background-color: plv(background-light);
-              left: 0;
-              right: 0;
-              top: 100%;
-              height: 1px;
-              content: '';
-            }
-          }
-        }
-      }
-    }
-
-    &.tabs-header-pos-bottom {
-      .tabs-header-list {
-        border-top: solid 1px plv(border-color);
-
-        .tabs-header-item {
-          border-bottom: solid 1px plv(border-color);
-
-          &:first-child {
-            border-bottom-left-radius: plv(box-size-normal-border-radius);
-          }
-
-          &:last-child {
-            border-bottom-right-radius: plv(box-size-normal-border-radius);
-          }
-
-          &.tabs-header-item-active {
-            position: relative;
-
-            &:before {
-              position: absolute;
-              background-color: plv(background-light);
-              left: 0;
-              right: 0;
-              bottom: 100%;
-              height: 1px;
-              content: '';
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@include prefix(tab-group) {
+  .tabs-header.tabs-header-horizontal.tabs-header-type-card {
+    .tabs-header-item {
+      line-height: 45px;
+      padding: 0 20px;
+      border-left: solid 1px plv(border-color);
+
+      &:last-child {
+        border-right: solid 1px plv(border-color);
+      }
+
+      &:hover, &.tabs-header-item-active {
+        color: plv(primary-6);
+      }
+
+      &:not(.tabs-header-item-active) {
+        background-color: plv(secondary-light-1);
+      }
+    }
+
+    &.tabs-header-pos-top {
+      .tabs-header-list {
+        border-bottom: solid 1px plv(border-color);
+
+        .tabs-header-item {
+          border-top: solid 1px plv(border-color);
+
+          &:first-child {
+            border-top-left-radius: plv(box-size-normal-border-radius);
+          }
+
+          &:last-child {
+            border-top-right-radius: plv(box-size-normal-border-radius);
+          }
+
+          &.tabs-header-item-active {
+            position: relative;
+
+            &:before {
+              position: absolute;
+              background-color: plv(background-light);
+              left: 0;
+              right: 0;
+              top: 100%;
+              height: 1px;
+              content: '';
+            }
+          }
+        }
+      }
+    }
+
+    &.tabs-header-pos-bottom {
+      .tabs-header-list {
+        border-top: solid 1px plv(border-color);
+
+        .tabs-header-item {
+          border-bottom: solid 1px plv(border-color);
+
+          &:first-child {
+            border-bottom-left-radius: plv(box-size-normal-border-radius);
+          }
+
+          &:last-child {
+            border-bottom-right-radius: plv(box-size-normal-border-radius);
+          }
+
+          &.tabs-header-item-active {
+            position: relative;
+
+            &:before {
+              position: absolute;
+              background-color: plv(background-light);
+              left: 0;
+              right: 0;
+              bottom: 100%;
+              height: 1px;
+              content: '';
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/packages/components/TabGroup/header/horizontal/tabs-header-horizontal.scss

@@ -1,59 +1,59 @@
-@include prefix(tab-group) {
-  .tabs-header-horizontal {
-    overflow: hidden;
-    position: relative;
-
-    .tabs-header-list {
-      display: inline-flex;
-      align-items: center;
-      white-space: nowrap;
-      min-width: 100%;
-      position: relative;
-      transition: 300ms ease left;
-    }
-
-    .tabs-header-item {
-      display: inline-block;
-    }
-
-    &.tabs-header-show-more {
-      padding-right: 80px;
-
-      .tabs-header-more-button {
-        z-index: 1;
-        position: absolute;
-        background-color: plv(background-color);
-        right: 0;
-        top: 0;
-        bottom: 0;
-        width: 80px;
-        box-shadow: 0 2px 8px plv(gray-4);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: plv(text-1);
-      }
-    }
-  }
-
-  &.tabs-head-position-top, &.tabs-head-position-bottom {
-    &.tabs-fit-height {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      flex: 1;
-
-      & > .tabs-body {
-        flex: 1;
-        overflow: hidden;
-        display: flex;
-        align-items: stretch;
-
-        & > .inner-tab {
-          flex: 1;
-          overflow: auto;
-        }
-      }
-    }
-  }
-}
+@include prefix(tab-group) {
+  .tabs-header-horizontal {
+    overflow: hidden;
+    position: relative;
+
+    .tabs-header-list {
+      display: inline-flex;
+      align-items: center;
+      white-space: nowrap;
+      min-width: 100%;
+      position: relative;
+      transition: 300ms ease left;
+    }
+
+    .tabs-header-item {
+      display: inline-block;
+    }
+
+    &.tabs-header-show-more {
+      padding-right: 80px;
+
+      .tabs-header-more-button {
+        z-index: 1;
+        position: absolute;
+        background-color: plv(background-color);
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 80px;
+        box-shadow: 0 2px 8px plv(gray-4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: plv(text-1);
+      }
+    }
+  }
+
+  &.tabs-head-position-top, &.tabs-head-position-bottom {
+    &.tabs-fit-height {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      flex: 1;
+
+      & > .tabs-body {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        align-items: stretch;
+
+        & > .inner-tab {
+          flex: 1;
+          overflow: auto;
+        }
+      }
+    }
+  }
+}