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

package/src/packages/components/Scroll/scroll.scss

@@ -1,168 +1,168 @@
-@include prefix(scroll) {
-  display: block;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-  box-sizing: border-box;
-
-  &.scroll-disabled {
-    .scroll-wrapper {
-      overflow: hidden !important;
-      cursor: not-allowed;
-    }
-  }
-
-  .scroll-wrapper {
-    height: calc(100% + 17px);
-    width: calc(100% + 17px);
-    overflow: scroll;
-    display: inline-block;
-    float: left;
-
-    &::-webkit-scrollbar {
-      background: transparent;
-      width: 17px;
-      height: 17px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: transparent;
-    }
-
-    .scroll-content {
-      display: inline-block;
-      vertical-align: top;
-
-      ::-webkit-scrollbar {
-        background: #f1f1f1;
-        width: 17px;
-        height: 17px;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        background: #c1c1c1;
-      }
-
-    }
-  }
-
-  .vertical-scrollbar-wrapper, .horizontal-scrollbar-wrapper {
-    z-index: 3;
-  }
-
-  .vertical-scrollbar-wrapper {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-
-    .vertical-scrollbar {
-      top: 0;
-      right: 2px;
-    }
-
-  }
-
-  .horizontal-scrollbar-wrapper {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    .horizontal-scrollbar {
-      left: 0;
-      bottom: 2px;
-    }
-  }
-
-  & > .horizontal-scrollbar-wrapper, & > .vertical-scrollbar-wrapper {
-    .vertical-scrollbar, .horizontal-scrollbar {
-      position: absolute;
-      border-radius: 100px;
-      cursor: pointer;
-      /*opacity: 1;*/
-      opacity: 0;
-      transition-duration: 0.2s;
-      transition-property: opacity, height, width;
-    }
-  }
-
-  &.scroll-always-show-scroll-bar {
-    & > .horizontal-scrollbar-wrapper, & > .vertical-scrollbar-wrapper {
-      .vertical-scrollbar, .horizontal-scrollbar {
-        opacity: 1;
-      }
-    }
-  }
-
-  &:hover, &[is-dragging] {
-    & > .horizontal-scrollbar-wrapper, & > .vertical-scrollbar-wrapper {
-      .vertical-scrollbar, .horizontal-scrollbar {
-        opacity: 1;
-      }
-    }
-  }
-
-  &[virtual-scrolling] {
-    @include prefix(item) {
-      transition: none !important;
-    }
-  }
-  &[disable-all-transition] {
-    *:not([data-force-transition=true]) {
-      &, &:before, &:after {
-        transition: none !important;
-      }
-    }
-  }
-
-  .auto-scroll-indicator-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    pointer-events: none;
-  }
-
-  .auto-scroll-indicator-vertical {
-    position: absolute;
-    left: 0;
-    right: 0;
-    opacity: 0.1;
-    height: 20px;
-    pointer-events: auto;
-    z-index: 100;
-
-    &.auto-scroll-indicator-start {
-      top: 0;
-      background: linear-gradient(to top, transparent, plv(secondary-9));
-    }
-
-    &.auto-scroll-indicator-end {
-      bottom: 0;
-      background: linear-gradient(to bottom, transparent, plv(secondary-9));
-    }
-  }
-
-  .auto-scroll-indicator-horizontal {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    opacity: 0.1;
-    width: 20px;
-    pointer-events: auto;
-    z-index: 100;
-
-    &.auto-scroll-indicator-start {
-      left: 0;
-      background: linear-gradient(to left, transparent, plv(secondary-9));
-    }
-
-    &.auto-scroll-indicator-end {
-      right: 0;
-      background: linear-gradient(to right, transparent, plv(secondary-9));
-    }
-  }
-}
+@include prefix(scroll) {
+  display: block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+
+  &.scroll-disabled {
+    .scroll-wrapper {
+      overflow: hidden !important;
+      cursor: not-allowed;
+    }
+  }
+
+  .scroll-wrapper {
+    height: calc(100% + 17px);
+    width: calc(100% + 17px);
+    overflow: scroll;
+    display: inline-block;
+    float: left;
+
+    &::-webkit-scrollbar {
+      background: transparent;
+      width: 17px;
+      height: 17px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: transparent;
+    }
+
+    .scroll-content {
+      display: inline-block;
+      vertical-align: top;
+
+      ::-webkit-scrollbar {
+        background: #f1f1f1;
+        width: 17px;
+        height: 17px;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+      }
+
+    }
+  }
+
+  .vertical-scrollbar-wrapper, .horizontal-scrollbar-wrapper {
+    z-index: 3;
+  }
+
+  .vertical-scrollbar-wrapper {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
+    .vertical-scrollbar {
+      top: 0;
+      right: 2px;
+    }
+
+  }
+
+  .horizontal-scrollbar-wrapper {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    .horizontal-scrollbar {
+      left: 0;
+      bottom: 2px;
+    }
+  }
+
+  & > .horizontal-scrollbar-wrapper, & > .vertical-scrollbar-wrapper {
+    .vertical-scrollbar, .horizontal-scrollbar {
+      position: absolute;
+      border-radius: 100px;
+      cursor: pointer;
+      /*opacity: 1;*/
+      opacity: 0;
+      transition-duration: 0.2s;
+      transition-property: opacity, height, width;
+    }
+  }
+
+  &.scroll-always-show-scroll-bar {
+    & > .horizontal-scrollbar-wrapper, & > .vertical-scrollbar-wrapper {
+      .vertical-scrollbar, .horizontal-scrollbar {
+        opacity: 1;
+      }
+    }
+  }
+
+  &:hover, &[is-dragging] {
+    & > .horizontal-scrollbar-wrapper, & > .vertical-scrollbar-wrapper {
+      .vertical-scrollbar, .horizontal-scrollbar {
+        opacity: 1;
+      }
+    }
+  }
+
+  &[virtual-scrolling] {
+    @include prefix(item) {
+      transition: none !important;
+    }
+  }
+  &[disable-all-transition] {
+    *:not([data-force-transition=true]) {
+      &, &:before, &:after {
+        transition: none !important;
+      }
+    }
+  }
+
+  .auto-scroll-indicator-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    pointer-events: none;
+  }
+
+  .auto-scroll-indicator-vertical {
+    position: absolute;
+    left: 0;
+    right: 0;
+    opacity: 0.1;
+    height: 20px;
+    pointer-events: auto;
+    z-index: 100;
+
+    &.auto-scroll-indicator-start {
+      top: 0;
+      background: linear-gradient(to top, transparent, plv(secondary-9));
+    }
+
+    &.auto-scroll-indicator-end {
+      bottom: 0;
+      background: linear-gradient(to bottom, transparent, plv(secondary-9));
+    }
+  }
+
+  .auto-scroll-indicator-horizontal {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    opacity: 0.1;
+    width: 20px;
+    pointer-events: auto;
+    z-index: 100;
+
+    &.auto-scroll-indicator-start {
+      left: 0;
+      background: linear-gradient(to left, transparent, plv(secondary-9));
+    }
+
+    &.auto-scroll-indicator-end {
+      right: 0;
+      background: linear-gradient(to right, transparent, plv(secondary-9));
+    }
+  }
+}

package/src/packages/components/Scroll/useAutoScroll.ts

@@ -1,68 +1,68 @@
-import {addClass} from "plain-utils/dom/addClass";
-import {Scroll} from "./index";
-
-function createIndicator(hostEl: HTMLElement, vertical: boolean) {
-
-  const start = document.createElement('div');
-  const end = document.createElement('div');
-
-  addClass(start, `auto-scroll-indicator-start auto-scroll-indicator-${vertical ? 'vertical' : 'horizontal'}`);
-  addClass(end, `auto-scroll-indicator-end auto-scroll-indicator-${vertical ? 'vertical' : 'horizontal'}`);
-
-  const wrapper = document.createElement('div');
-  addClass(wrapper, 'auto-scroll-indicator-wrapper');
-  wrapper.appendChild(start);
-  wrapper.appendChild(end);
-
-  hostEl.appendChild(wrapper);
-
-  return { start, end, wrapper };
-}
-
-export function useAutoScroll(config: {
-  getScroll: () => typeof Scroll.use.class | null | undefined,
-  vertical: boolean,
-}) {
-
-  let { getScroll, vertical } = config;
-
-  const state = {
-    indicator: null as null | ReturnType<typeof createIndicator>,
-  };
-
-  const methods = {
-    showHover() {
-
-      const scroll = getScroll();
-      if (!scroll) {return;}
-
-      state.indicator = createIndicator(scroll.refs.host!, vertical);
-
-      const handler = {
-        enterStart: () => {
-          vertical ? scroll.methods.autoScrollTop() : scroll.methods.autoScrollLeft();
-        },
-        enterEnd: () => {
-          vertical ? scroll.methods.autoScrollBottom() : scroll.methods.autoScrollRight();
-        },
-        leave: () => {
-          scroll.methods.stopAutoScroll();
-        }
-      };
-
-      state.indicator.start.addEventListener('mouseenter', handler.enterStart);
-      state.indicator.end.addEventListener('mouseenter', handler.enterEnd);
-
-      state.indicator.start.addEventListener('mouseleave', handler.leave);
-      state.indicator.end.addEventListener('mouseleave', handler.leave);
-    },
-    hideHover() {
-      if (!!state.indicator) {
-        state.indicator.wrapper.parentElement?.removeChild(state.indicator.wrapper);
-      }
-    },
-  };
-
-  return methods;
-
-}
+import {addClass} from "plain-utils/dom/addClass";
+import {Scroll} from "./index";
+
+function createIndicator(hostEl: HTMLElement, vertical: boolean) {
+
+  const start = document.createElement('div');
+  const end = document.createElement('div');
+
+  addClass(start, `auto-scroll-indicator-start auto-scroll-indicator-${vertical ? 'vertical' : 'horizontal'}`);
+  addClass(end, `auto-scroll-indicator-end auto-scroll-indicator-${vertical ? 'vertical' : 'horizontal'}`);
+
+  const wrapper = document.createElement('div');
+  addClass(wrapper, 'auto-scroll-indicator-wrapper');
+  wrapper.appendChild(start);
+  wrapper.appendChild(end);
+
+  hostEl.appendChild(wrapper);
+
+  return { start, end, wrapper };
+}
+
+export function useAutoScroll(config: {
+  getScroll: () => typeof Scroll.use.class | null | undefined,
+  vertical: boolean,
+}) {
+
+  let { getScroll, vertical } = config;
+
+  const state = {
+    indicator: null as null | ReturnType<typeof createIndicator>,
+  };
+
+  const methods = {
+    showHover() {
+
+      const scroll = getScroll();
+      if (!scroll) {return;}
+
+      state.indicator = createIndicator(scroll.refs.host!, vertical);
+
+      const handler = {
+        enterStart: () => {
+          vertical ? scroll.methods.autoScrollTop() : scroll.methods.autoScrollLeft();
+        },
+        enterEnd: () => {
+          vertical ? scroll.methods.autoScrollBottom() : scroll.methods.autoScrollRight();
+        },
+        leave: () => {
+          scroll.methods.stopAutoScroll();
+        }
+      };
+
+      state.indicator.start.addEventListener('mouseenter', handler.enterStart);
+      state.indicator.end.addEventListener('mouseenter', handler.enterEnd);
+
+      state.indicator.start.addEventListener('mouseleave', handler.leave);
+      state.indicator.end.addEventListener('mouseleave', handler.leave);
+    },
+    hideHover() {
+      if (!!state.indicator) {
+        state.indicator.wrapper.parentElement?.removeChild(state.indicator.wrapper);
+      }
+    },
+  };
+
+  return methods;
+
+}

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

@@ -1,39 +1,39 @@
-import {designComponent, getComponentCls, iMouseEvent, useClasses} from "plain-design-composition";
-import {SegmentGroup} from "../SegmentGroup";
-import './segment.scss';
-
-export const Segment = designComponent({
-  name: '-segment',
-  props: {
-    label: {},
-    val: {},
-  },
-  emits: {
-    onClick: (e: iMouseEvent) => true,
-  },
-  slots: ['default'],
-  setup: ({ props, event, slots }) => {
-
-    const group = SegmentGroup.use.inject();
-
-    const classes = useClasses(() => [
-      getComponentCls('segment'),
-      { 'segment-active': group.isSegmentActived(props.val), }
-    ]);
-
-    const handler = {
-      onClick: (e: iMouseEvent) => {
-        group.onClickSegment(props.val);
-        event.emit.onClick(e);
-      },
-    };
-
-    return () => (
-      <span className={classes.value} onClick={handler.onClick}>
-        {slots.default(props.label as any)}
-      </span>
-    );
-  },
-});
-
-export default Segment;
+import {designComponent, getComponentCls, iMouseEvent, useClasses} from "plain-design-composition";
+import {SegmentGroup} from "../SegmentGroup";
+import './segment.scss';
+
+export const Segment = designComponent({
+  name: '-segment',
+  props: {
+    label: {},
+    val: {},
+  },
+  emits: {
+    onClick: (e: iMouseEvent) => true,
+  },
+  slots: ['default'],
+  setup: ({ props, event, slots }) => {
+
+    const group = SegmentGroup.use.inject();
+
+    const classes = useClasses(() => [
+      getComponentCls('segment'),
+      { 'segment-active': group.isSegmentActived(props.val), }
+    ]);
+
+    const handler = {
+      onClick: (e: iMouseEvent) => {
+        group.onClickSegment(props.val);
+        event.emit.onClick(e);
+      },
+    };
+
+    return () => (
+      <span className={classes.value} onClick={handler.onClick}>
+        {slots.default(props.label as any)}
+      </span>
+    );
+  },
+});
+
+export default Segment;

package/src/packages/components/Segment/segment.scss

@@ -1,46 +1,46 @@
-@include prefix(segment-group) {
-
-  background-color: plv(secondary-light-2);
-  display: inline-flex;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 3px;
-
-  @include prefix(segment) {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding: 0 12px;
-    background-color: transparent;
-    transition: all ease 300ms;
-
-    & + span {
-      margin-left: 3px;
-    }
-    &:hover {
-      color: plv(primary-6);
-      cursor: pointer;
-    }
-    &.segment-active {
-      background-color: plv(background-color);
-      color: plv(primary-6);
-    }
-  }
-
-  @include sizeMixin(segment-group, (font-size, height)) {
-
-    &.segment-group-shape-square {
-      border-radius: $border-radius;
-      @include prefix(segment) {
-        border-radius: $border-radius;
-      }
-    }
-
-    &.segment-group-shape-round {
-      border-radius: $height;
-      @include prefix(segment) {
-        border-radius: $height;
-      }
-    }
-  }
-}
+@include prefix(segment-group) {
+
+  background-color: plv(secondary-light-2);
+  display: inline-flex;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 3px;
+
+  @include prefix(segment) {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    background-color: transparent;
+    transition: all ease 300ms;
+
+    & + span {
+      margin-left: 3px;
+    }
+    &:hover {
+      color: plv(primary-6);
+      cursor: pointer;
+    }
+    &.segment-active {
+      background-color: plv(background-color);
+      color: plv(primary-6);
+    }
+  }
+
+  @include sizeMixin(segment-group, (font-size, height)) {
+
+    &.segment-group-shape-square {
+      border-radius: $border-radius;
+      @include prefix(segment) {
+        border-radius: $border-radius;
+      }
+    }
+
+    &.segment-group-shape-round {
+      border-radius: $height;
+      @include prefix(segment) {
+        border-radius: $height;
+      }
+    }
+  }
+}