vxe-pc-ui 0.0.2 → 0.1.0

package/styles/components/pager.scss

@@ -0,0 +1,287 @@
+@import '../helpers/mixin.scss';
+
+/*pager*/
+.vxe-pager {
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: var(--vxe-font-color);
+  font-family: var(--vxe-font-family);
+  text-align: right;
+  background-color: var(--vxe-ui-pager-background-color);
+  &.is--hidden {
+    display: none;
+  }
+  &.align--left {
+    text-align: left;
+  }
+  &.align--center {
+    text-align: center;
+  }
+  &.is--loading {
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: var(--vxe-loading-z-index);
+      user-select: none;
+      background-color: var(--vxe-loading-background-color);
+    }
+  }
+  .vxe-pager--prev-btn,
+  .vxe-pager--next-btn,
+  .vxe-pager--num-btn,
+  .vxe-pager--jump-prev,
+  .vxe-pager--jump-next {
+    color: inherit;
+    outline: 0;
+    padding: 0;
+    border: 1px solid transparent;
+    font-size: inherit;
+    &:not(.is--disabled) {
+      &:focus {
+        box-shadow: 0 0 0.25em 0 var(--vxe-primary-color);
+      }
+      &:hover {
+        color: var(--vxe-primary-lighten-color);
+      }
+      &:active {
+        background-color: #fff;
+      }
+    }
+  }
+  &.is--border,
+  &.is--perfect {
+    &:not(.is--background) {
+      .vxe-pager--prev-btn,
+      .vxe-pager--next-btn,
+      .vxe-pager--num-btn,
+      .vxe-pager--jump-prev,
+      .vxe-pager--jump-next {
+        border-color: var(--vxe-ui-input-border-color);
+      }
+    }
+  }
+  &.is--background,
+  &.is--perfect {
+    .vxe-pager--prev-btn,
+    .vxe-pager--next-btn,
+    .vxe-pager--jump-prev,
+    .vxe-pager--num-btn,
+    .vxe-pager--jump-next {
+      background-color: var(--vxe-ui-pager-perfect-button-background-color);
+    }
+    .vxe-pager--jump-prev,
+    .vxe-pager--num-btn,
+    .vxe-pager--jump-next {
+      &:not(.is--disabled) {
+        &.is--active {
+          color: #fff;
+          background-color: var(--vxe-primary-color);
+          &:hover {
+            background-color: var(--vxe-primary-lighten-color);
+          }
+          &:focus {
+            border-color: var(--vxe-primary-color);
+          }
+          &:active {
+            border-color: var(--vxe-primary-darken-color);
+            background-color: var(--vxe-primary-darken-color);
+          }
+        }
+      }
+    }
+  }
+  &.is--perfect {
+    border: 1px solid var(--vxe-table-border-color);
+    border-top-width: 0;
+    background-color: var(--vxe-ui-pager-perfect-background-color);
+  }
+  &.is--border {
+    .vxe-pager--num-btn {
+      &.is--active {
+        border-color: var(--vxe-primary-color);
+      }
+    }
+  }
+  .vxe-pager--wrapper {
+    flex-grow: 1;
+  }
+  .vxe-pager--jump-icon,
+  .vxe-pager--btn-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .vxe-pager--left-wrapper,
+  .vxe-pager--right-wrapper,
+  .vxe-pager--total,
+  .vxe-pager--prev-btn,
+  .vxe-pager--next-btn,
+  .vxe-pager--jump,
+  .vxe-pager--jump-prev,
+  .vxe-pager--jump-next,
+  .vxe-pager--count,
+  .vxe-pager--sizes {
+    margin: 0 0.4em;
+    vertical-align: middle;
+    display: inline-block;
+  }
+  .vxe-pager--prev-btn,
+  .vxe-pager--jump-prev,
+  .vxe-pager--num-btn,
+  .vxe-pager--jump-next,
+  .vxe-pager--next-btn {
+    position: relative;
+    cursor: pointer;
+  }
+  .vxe-pager--left-wrapper,
+  .vxe-pager--right-wrapper,
+  .vxe-pager--count,
+  .vxe-pager--prev-btn,
+  .vxe-pager--next-btn,
+  .vxe-pager--jump-prev,
+  .vxe-pager--num-btn,
+  .vxe-pager--jump-next {
+    height: 2.15em;
+    line-height: 2em;
+    display: inline-block;
+  }
+  .vxe-pager--jump .vxe-pager--goto,
+  .vxe-pager--sizes > .vxe-input {
+    height: 2.15em;
+    line-height: 2.15em;
+  }
+  .vxe-pager--sizes > .vxe-select--panel .vxe-select-option {
+    text-align: center;
+  }
+  .vxe-pager--jump-prev,
+  .vxe-pager--prev-btn,
+  .vxe-pager--next-btn,
+  .vxe-pager--jump-next,
+  .vxe-pager--num-btn,
+  .vxe-pager--count {
+    min-width: 2.15em;
+  }
+  .vxe-pager--btn-wrapper {
+    padding: 0;
+    margin: 0;
+    display: inline-block;
+    text-align: center;
+    .vxe-pager--jump-prev,
+    .vxe-pager--jump-next {
+      &:hover {
+        .vxe-pager--jump-more-icon {
+          display: none;
+        }
+        .vxe-pager--jump-icon {
+          display: inline-block;
+        }
+      }
+    }
+    .vxe-pager--jump-icon {
+      display: none;
+    }
+  }
+  .vxe-pager--jump-prev,
+  .vxe-pager--prev-btn,
+  .vxe-pager--next-btn,
+  .vxe-pager--jump-next,
+  .vxe-pager--num-btn {
+    text-align: center;
+    border-radius: var(--vxe-border-radius);
+    margin: 0 0.25em;
+    user-select: none;
+    background-color: var(--vxe-ui-pager-background-color);
+    &:not(.is--disabled) {
+      &:hover {
+        color: var(--vxe-primary-lighten-color);
+      }
+      &.is--active,
+      &:focus {
+        color: var(--vxe-primary-color);
+      }
+      &:active {
+        color: var(--vxe-primary-darken-color);
+      }
+    }
+    &.is--disabled {
+      cursor: no-drop;
+      color: var(--vxe-font-disabled-color);
+      &:hover {
+        color: var(--vxe-font-disabled-color);
+      }
+    }
+  }
+  .vxe-pager--num-btn {
+    vertical-align: middle;
+    &.is--active {
+      font-weight: 700;
+    }
+  }
+  .vxe-pager--sizes {
+    width: 7em;
+    text-align: center;
+    cursor: pointer;
+    & .vxe-input--inner {
+      text-align: center;
+    }
+  }
+  .vxe-pager--count {
+    text-align: center;
+    & > span {
+      vertical-align: middle;
+    }
+    .vxe-pager--separator {
+      margin-right: 0.2em;
+      &:before {
+        content: "/";
+      }
+    }
+  }
+  .vxe-pager--jump .vxe-pager--goto {
+    border-radius: var(--vxe-border-radius);
+    border: 1px solid var(--vxe-ui-input-border-color);
+    color: var(--vxe-font-color);
+    transition: border .2s ease-in-out;
+    padding: 0 0.4em;
+    background-color: var(--vxe-ui-input-background-color);
+    &:focus {
+      border: 1px solid var(--vxe-primary-color);
+      outline: 0;
+    }
+  }
+  .vxe-pager--jump {
+    .vxe-pager--goto-text {
+      margin-right: 0.25em;
+    }
+    .vxe-pager--classifier-text {
+      margin-left: 0.25em;
+    }
+    .vxe-pager--goto {
+      width: 3.2em;
+      text-align: center;
+    }
+  }
+}
+
+.vxe-pager {
+  font-size: var(--vxe-font-size);
+  height: var(--vxe-table-row-height-default);
+  &.size--medium {
+    font-size: var(--vxe-font-size-medium);
+    height: var(--vxe-table-row-height-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-font-size-small);
+    height: var(--vxe-table-row-height-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-font-size-mini);
+    height: var(--vxe-table-row-height-mini);
+  }
+}

package/styles/components/pulldown.scss

@@ -0,0 +1,55 @@
+@import '../helpers/mixin.scss';
+
+.vxe-pulldown {
+  position: relative;
+  display: inline-block;
+  color: var(--vxe-font-color);
+  text-align: left;
+}
+
+.vxe-pulldown--panel {
+  display: none;
+  position: absolute;
+  left: 0;
+  padding: 4px 0;
+  color: var(--vxe-font-color);
+  text-align: left;
+  &:not(.is--transfer) {
+    min-width: 100%;
+  }
+  &.is--transfer {
+    position: fixed;
+  }
+  &.animat--leave {
+    display: block;
+    opacity: 0;
+    transform: scaleY(0.5);
+    transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
+    transform-origin: center top;
+    backface-visibility: hidden;
+    &[placement="top"] {
+      transform-origin: center bottom;
+    }
+  }
+  &.animat--enter {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+.vxe-pulldown--panel-wrapper {
+  background-color: var(--vxe-ui-pulldown-panel-background-color);
+}
+
+.vxe-pulldown,
+.vxe-pulldown--panel {
+  font-size: var(--vxe-font-size);
+  &.size--medium {
+    font-size: var(--vxe-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-font-size-mini);
+  }
+}

package/styles/components/radio.scss

@@ -0,0 +1,149 @@
+@import '../helpers/mixin.scss';
+
+/*radio-group*/
+.vxe-radio-group {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+  font-size: 0;
+  &+.vxe-radio-group {
+    margin-left: 10px;
+  }
+}
+
+/*radio*/
+.vxe-radio {
+  @include createRadioIcon();
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  line-height: 1;
+  > input {
+    &[type="radio"] {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border: 0;
+      appearance: none;
+    }
+  }
+  .vxe-radio--label {
+    vertical-align: middle;
+    display: inline-block;
+    max-width: 50em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &:not(.is--disabled) {
+    > input {
+      &:focus+.vxe-radio--icon {
+        color: var(--vxe-primary-color);
+      }
+    }
+  }
+  &:not(.vxe-radio-button) {
+    &+.vxe-radio {
+      margin-left: 10px;
+    }
+  }
+}
+
+.vxe-radio-button {
+  .vxe-radio--label {
+    background-color: var(--vxe-ui-radio-button-default-background-color);
+  }
+  &:first-child {
+    .vxe-radio--label {
+      border-left: 1px solid var(--vxe-ui-input-border-color);
+      border-radius: var(--vxe-border-radius) 0 0 var(--vxe-border-radius);
+    }
+  }
+  &:last-child {
+    .vxe-radio--label {
+      border-radius: 0 var(--vxe-border-radius) var(--vxe-border-radius) 0;
+    }
+  }
+  > input {
+    &:checked+.vxe-radio--label {
+      color: #fff;
+      background-color: var(--vxe-primary-color);
+      border-color: var(--vxe-primary-color);
+    }
+  }
+  .vxe-radio--label {
+    padding: 0 1em;
+    line-height: calc(var(--vxe-button-height-default) - 2px);
+    display: inline-block;
+    border-style: solid;
+    border-color: var(--vxe-ui-input-border-color);
+    border-width: 1px 1px 1px 0;
+    max-width: 50em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &.is--disabled {
+    cursor: not-allowed;
+    > input {
+      &:not(:checked) {
+        &+.vxe-radio--label {
+          color: var(--vxe-ui-input-disabled-color);
+        }
+      }
+      &:checked {
+        &+.vxe-radio--label {
+          border-color: var(--vxe-primary-lighten-color);
+          background-color: var(--vxe-primary-lighten-color);
+        }
+      }
+    }
+  }
+  &:not(.is--disabled) {
+    & > input {
+      &:focus {
+        &+.vxe-radio--label {
+          border-color: var(--vxe-primary-color);
+          box-shadow: 0 0 0.2em 0 var(--vxe-primary-color);
+        }
+      }
+    }
+    &:hover {
+      > input {
+        &:not(:checked) {
+          &+.vxe-radio--label {
+            color: var(--vxe-primary-color);
+          }
+        }
+      }
+    }
+  }
+  &.size--medium {
+    .vxe-radio--label {
+      line-height: calc(var(--vxe-button-height-medium) - 2px);
+    }
+  }
+  &.size--small {
+    .vxe-radio--label {
+      line-height: calc(var(--vxe-button-height-small) - 2px);
+    }
+  }
+  &.size--mini {
+    .vxe-radio--label {
+      line-height: calc(var(--vxe-button-height-mini) - 2px);
+    }
+  }
+}
+
+.vxe-radio {
+  font-size: var(--vxe-font-size);
+  &.size--medium {
+    font-size: var(--vxe-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-font-size-mini);
+  }
+}

package/styles/components/select.scss

@@ -0,0 +1,226 @@
+@import '../helpers/mixin.scss';
+
+.vxe-select {
+  position: relative;
+  display: inline-block;
+  width: 180px;
+  color: var(--vxe-font-color);
+  text-align: left;
+  & > .vxe-input {
+    .vxe-input--inner {
+      cursor: pointer;
+    }
+  }
+  &.is--disabled {
+    & > .vxe-input {
+      .vxe-input--inner {
+        cursor: no-drop;
+      }
+    }
+  }
+  &.is--loading {
+    & > .vxe-input {
+      .vxe-input--inner {
+        cursor: progress;
+      }
+    }
+  }
+  & > .vxe-input {
+    width: 100%;
+    .vxe-input--suffix-icon {
+      display: inline-block;
+      @include createAnimationTransition(transform, .2s);
+    }
+  }
+  &.is--active {
+    &:not(.is--filter) {
+      & > .vxe-input {
+        .vxe-input--inner {
+          border: 1px solid var(--vxe-primary-color);
+        }
+      }
+    }
+  }
+}
+
+.vxe-select-slots {
+  display: none;
+}
+
+.vxe-select--panel {
+  display: none;
+  position: absolute;
+  left: 0;
+  padding: 4px 0;
+  color: var(--vxe-font-color);
+  text-align: left;
+  &:not(.is--transfer) {
+    min-width: 100%;
+  }
+  &.is--transfer {
+    position: fixed;
+  }
+  &.animat--leave {
+    display: block;
+    opacity: 0;
+    transform: scaleY(0.5);
+    transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
+    transform-origin: center top;
+    backface-visibility: hidden;
+    &[placement="top"] {
+      transform-origin: center bottom;
+    }
+  }
+  &.animat--enter {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+.vxe-select--panel-search {
+  display: block;
+  .vxe-select-search--input {
+    width: 100%;
+  }
+}
+
+.vxe-select--panel-wrapper {
+  position: relative;
+  border-radius: var(--vxe-border-radius);
+  border: 1px solid var(---vxe-ui-base-popup-border-color);
+  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
+  background-color: var(--vxe-ui-select-panel-background-color);
+}
+
+.vxe-select--panel-header {
+  border-bottom: 1px solid var(---vxe-ui-base-popup-border-color);
+}
+
+.vxe-select--panel-footer {
+  border-top: 1px solid var(---vxe-ui-base-popup-border-color);
+}
+
+.vxe-select--panel-header,
+.vxe-select--panel-footer {
+  padding: 4px 0;
+}
+
+.vxe-select-option--wrapper {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 4px 0;
+  max-height: 200px;
+}
+
+.vxe-optgroup {
+  .vxe-optgroup--title {
+    padding: 0 6px;
+    color: var(--vxe-optgroup-title-color);
+    font-size: 12px;
+  }
+}
+
+.vxe-optgroup--wrapper {
+  .vxe-select-option {
+    padding: 0 20px;
+  }
+}
+
+.vxe-select-option {
+  padding: 0 0.6em;
+  max-width: 600px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  &.is--selected {
+    font-weight: 700;
+    color: var(--vxe-primary-color);
+  }
+  &:not(.is--disabled) {
+    cursor: pointer;
+    &.is--hover {
+      background-color: var(--vxe-ui-select-option-hover-background-color);
+    }
+  }
+  &.is--disabled {
+    color: var(--vxe-font-disabled-color);
+    cursor: no-drop;
+  }
+}
+
+.vxe-select--search-icon {
+  margin-right: 0.5em;
+}
+
+.vxe-select--search-loading,
+.vxe-select--empty-placeholder {
+  padding: 0 0.6em;
+  text-align: center;
+  color: var(--vxe-ui-select-empty-color);
+}
+
+.vxe-select,
+.vxe-select--panel {
+  font-size: var(--vxe-font-size);
+  &.size--medium {
+    font-size: var(--vxe-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-font-size-mini);
+  }
+}
+
+.vxe-select--panel {
+  .vxe-optgroup--title,
+  .vxe-select-option {
+    height: var(--vxe-ui-select-option-height-default);
+  }
+  .vxe-optgroup--title,
+  .vxe-select-option,
+  .vxe-select--search-loading,
+  .vxe-select--empty-placeholder {
+    line-height: var(--vxe-ui-select-option-height-default);
+  }
+  &.size--medium {
+    .vxe-optgroup--title,
+    .vxe-select-option {
+      height: var(--vxe-ui-select-option-height-medium);
+    }
+    .vxe-optgroup--title,
+    .vxe-select-option,
+    .vxe-select--search-loading,
+    .vxe-select--empty-placeholder {
+      line-height: var(--vxe-ui-select-option-height-medium);
+    }
+  }
+  &.size--small {
+    .vxe-optgroup--title,
+    .vxe-select-option {
+      height: var(--vxe-ui-select-option-height-small);
+    }
+    .vxe-optgroup--title,
+    .vxe-select-option,
+    .vxe-select--search-loading,
+    .vxe-select--empty-placeholder {
+      line-height: var(--vxe-ui-select-option-height-small);
+    }
+  }
+  &.size--mini {
+    .vxe-optgroup--title,
+    .vxe-select-option {
+      height: var(--vxe-ui-select-option-height-mini);
+    }
+    .vxe-optgroup--title,
+    .vxe-select-option,
+    .vxe-select--search-loading,
+    .vxe-select--empty-placeholder {
+      line-height: var(--vxe-ui-select-option-height-mini);
+    }
+  }
+}