vxe-design 0.0.1 → 3.0.1

package/styles/components/widget-form/widget-form-subtable.scss

@@ -0,0 +1,204 @@
+@use '../../helpers/baseMixin.scss';
+
+.vxe-form-design--widget-subtable-view {
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  border-radius: var(--vxe-ui-base-border-radius);
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+.vxe-form-design--widget-subtable-view-box {
+  border: 1px solid var(--vxe-ui-input-border-color);
+  border-width: 1px 1px 1px 0;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.vxe-form-design--widget-subtable-view-left {
+  position: sticky;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-shrink: 0;
+  box-shadow: 8px 0px 10px -5px rgba(0,0,0,.12);
+  border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
+  z-index: 5;
+}
+.vxe-form-design--widget-subtable-view-right {
+  flex-grow: 1;
+}
+.vxe-form-design--widget-subtable-col {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 54px;
+  text-align: center;
+  border-top: 1px solid var(--vxe-ui-input-border-color);
+  border-right: 1px solid var(--vxe-ui-input-border-color);
+  border-bottom: 1px solid var(--vxe-ui-input-border-color);
+  background-color: var(--vxe-ui-layout-background-color);
+  &:first-child {
+    border-left: 1px solid var(--vxe-ui-input-border-color);
+    border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+}
+.vxe-form-design--widget-subtable-head {
+  flex-shrink: 0;
+  height: 2.8em;
+  line-height: 2.8em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 var(--vxe-ui-layout-padding-default);
+  border-bottom: 1px solid var(--vxe-ui-input-border-color);
+}
+.vxe-form-design--widget-subtable-body {
+  flex-grow: 1;
+  padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-form-design--widget-subtable-head,
+.vxe-form-design--widget-subtable-body {
+  width: 100%;
+}
+.vxe-form-design--widget-subtable-body,
+.vxe-form-design--widget-subtable-view-empty {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.vxe-form-design--widget-subtable-view-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  background-color: var(--vxe-ui-layout-background-color);
+  border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--vxe-ui-input-border-color);
+    z-index: 1;
+    pointer-events: none;
+  }
+}
+.vxe-form-design--widget-subtable-view-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  & > .vxe-form-design--widget-subtable-view-item {
+    border-right: 1px solid var(--vxe-ui-input-border-color);
+    .vxe-form-design--preview-item-operate {
+      top: 0.4em;
+    }
+  }
+}
+.vxe-form-design--widget-subtable-view-list-move {
+  @include baseMixin.createAnimationTransition(transform, 0.35s);
+}
+
+.vxe-form-design--widget-subtable-view-item {
+  position: relative;
+  min-width: 200px;
+  cursor: grabbing;
+  &:hover {
+    background-color: var(--vxe-ui-form-design-sub-widget-hover-background-color);
+  }
+  &.is--active {
+    background: var(--vxe-ui-base-active-background-color);
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 1px dashed var(--vxe-ui-font-primary-color);
+      pointer-events: none;
+      z-index: 2;
+    }
+  }
+}
+.vxe-form-design--widget-subtable-view-item-box {
+  height: 100%;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+}
+
+.vxe-form-design--widget-subtable-view-empty {
+  flex-grow: 1;
+  color: var(--vxe-ui-font-placeholder-color);
+  padding: 0 var(--vxe-ui-layout-padding-threefold);
+  min-height: 78px;
+  min-width: 200px;
+  cursor: default;
+}
+
+.vxe-form-design--widget-subtable-form-item {
+  overflow: hidden;
+}
+.vxe-form-design--widget-subtable-view-item-wrapper {
+  height: 100%;
+  .vxe-form--item {
+    &.is--vertical {
+      padding: 0;
+      .vxe-form--item-title {
+        height: 2.8em;
+        line-height: 2.8em;
+        padding: 0 var(--vxe-ui-layout-padding-default);
+      }
+      .vxe-form--item-content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0 var(--vxe-ui-layout-padding-default);
+      }
+    }
+  }
+  .vxe-form--item-title {
+    border-bottom: 1px solid var(--vxe-ui-input-border-color);
+  }
+}
+
+.vxe-form-design--preview-item {
+  &.widget-subtable {
+    padding: 0 var(--vxe-ui-layout-padding-double);
+    &::after {
+      display: none;
+    }
+  }
+  .vxe-form-design--preview-item-view {
+    .vxe-form-design--widget-subtable-form-item {
+      & > .vxe-form--item-content {
+        padding: 0;
+      }
+    }
+    .vxe-form--group-content {
+      align-items: unset;
+    }
+  }
+}

package/styles/components/widget-item/widget-item-all.scss

@@ -0,0 +1,4 @@
+@use './widget-item-devices.scss';
+@use './widget-item-layout.scss';
+@use './widget-item-data-source.scss';
+@use './widget-item-prop-list.scss';

package/styles/components/widget-item/widget-item-data-source.scss

@@ -0,0 +1,110 @@
+@use '../../helpers/baseMixin.scss';
+
+.vxe-form-design--widget-form-item-data-source-wrapper {
+  max-height: 30vh;
+  min-height: 140px;
+  overflow: auto;
+}
+.vxe-form-design--widget-form-item-data-source-type {
+  margin-bottom: 16px;
+}
+.vxe-form-design--widget-form-item-data-source-option {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  padding: var(--vxe-ui-layout-padding-half) 0;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: var(--vxe-ui-layout-padding-half);
+    width: var(--vxe-ui-layout-padding-default);
+    height: 100%;
+    border: 1px dotted var(--vxe-ui-base-popup-border-color);
+    border-width: 0 0 0 1px;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: var(--vxe-ui-layout-padding-half);
+    width: var(--vxe-ui-layout-padding-default);
+    height: 0;
+    border-top: 1px dotted var(--vxe-ui-base-popup-border-color);
+  }
+  &.is--first {
+    &::before {
+      top: 50%;
+      height: 50%;
+    }
+  }
+  &.is--last {
+    &::before {
+      height: 50%;
+    }
+  }
+  .vxe-button {
+    flex-shrink: 0;
+  }
+  .vxe-form-design--widget-expand-btn {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 2em;
+    i {
+      cursor: pointer;
+      background-color: var(--vxe-ui-layout-background-color);
+      @include baseMixin.createAnimationTransition(transform, 0.1s);
+      z-index: 2;
+    }
+  }
+}
+.vxe-form-design--widget-form-item-data-source-sub-option {
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: var(--vxe-ui-layout-padding-half);
+    width: var(--vxe-ui-layout-padding-default);
+    height: 100%;
+    border: 1px dotted var(--vxe-ui-base-popup-border-color);
+    border-width: 0 0 0 1px;
+  }
+  &:last-child {
+    &::before {
+      display: none;
+    }
+  }
+  .vxe-form-design--widget-form-item-data-source-option {
+    padding-left: var(--vxe-ui-layout-padding-double);
+    &:first-child {
+      &::before {
+        top: 0;
+        height: 50%;
+      }
+    }
+    &::before {
+      top: -50%;
+      left: calc(var(--vxe-ui-layout-padding-double) + 0.5em);
+      width: var(--vxe-ui-layout-padding-default);
+      height: 100%;
+    }
+    &::after {
+      left: calc(var(--vxe-ui-layout-padding-double) + 0.5em);
+    }
+  }
+}
+
+.vxe-form-design--widget-form-item-data-source-popup {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  & > .vxe-textarea {
+    flex-grow: 1;
+    .vxe-textarea--inner {
+      height: 100%;
+    }
+  }
+}

package/styles/components/widget-item/widget-item-devices.scss

@@ -0,0 +1,4 @@
+.vxe-form-design--widget-form-item-devices {
+  display: flex;
+  flex-direction: column;
+}

package/styles/components/widget-item/widget-item-layout.scss

@@ -0,0 +1,87 @@
+.vxe-form-design--widget-form-item-layout {
+  display: flex;
+  flex-direction: row;
+}
+.vxe-form-design--widget-form-item-option {
+  width: 50%;
+  text-align: center;
+  padding: var(--vxe-ui-layout-padding-default);
+  margin: 0 var(--vxe-ui-layout-padding-default);
+  border: 1px solid var(--vxe-ui-input-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  cursor: pointer;
+  &.is--vertical {
+    .vxe-form-design--widget-form-item-option-row {
+      display: flex;
+      flex-direction: column;
+      &:nth-child(1) {
+        &::before {
+          content: "";
+          display: block;
+          width: 30%;
+          height: 1.2em;
+          margin: 2px;
+          background-color: var(--vxe-ui-font-tinge-color);
+          border-radius: var(--vxe-ui-base-border-radius);
+        }
+      }
+      &:nth-child(2) {
+        &::before {
+          content: "";
+          display: block;
+          width: 100%;
+          height: 1.2em;
+          margin: 2px;
+          background-color: var(--vxe-ui-font-tinge-color);
+          border-radius: var(--vxe-ui-base-border-radius);
+        }
+      }
+    }
+  }
+  &.is--horizontal {
+    .vxe-form-design--widget-form-item-option-row {
+      display: flex;
+      flex-direction: row;
+      &:nth-child(1),
+      &:nth-child(2) {
+        &::before {
+          content: "";
+          display: block;
+          width: 30%;
+          height: 1.2em;
+          margin: 2px;
+          background-color: var(--vxe-ui-font-tinge-color);
+          border-radius: var(--vxe-ui-base-border-radius);
+        }
+        &::after {
+          content: "";
+          display: block;
+          width: 70%;
+          height: 1.2em;
+          margin: 2px;
+          background-color: var(--vxe-ui-font-tinge-color);
+          border-radius: var(--vxe-ui-base-border-radius);
+        }
+      }
+    }
+  }
+  &:hover {
+    border-color: var(--vxe-ui-font-primary-color);
+  }
+  &.is--active {
+    color: var(--vxe-ui-font-primary-color);
+    border-color: var(--vxe-ui-font-primary-color);
+    .vxe-form-design--widget-form-item-option-row {
+      &:nth-child(1),
+      &:nth-child(2) {
+        &::before,
+        &::after {
+          background-color: var(--vxe-ui-font-primary-color);
+        }
+      }
+    }
+  }
+}
+.vxe-form-design--widget-form-item-option-row {
+  margin-bottom: 0.2em;
+}

package/styles/components/widget-item/widget-item-prop-list.scss

@@ -0,0 +1,49 @@
+.vxe-form-design--widget-form-item-prop-list {
+  margin-bottom: var(--vxe-ui-layout-padding-double);
+  padding: 0 var(--vxe-ui-layout-padding-default);
+  &:first-child {
+    margin-top: var(--vxe-ui-layout-padding-default);
+  }
+  & > span {
+    padding: 0 0.5em;
+    &:first-child {
+      padding: 0;
+      padding-right: var(--vxe-ui-layout-padding-default);
+    }
+  }
+  & > span:first-child,
+  .vxe-form-design--widget-form-item-prop-width,
+  .vxe-form-design--widget-form-item-prop-unit { 
+    display: inline-flex;
+    vertical-align: middle;
+  }
+}
+
+.vxe-form {
+  .vxe-form-design--widget-form-item-prop-list {
+    & > .vxe-form-design--widget-form-item-prop-width {
+      width: 90px;
+    }
+    & > .vxe-form-design--widget-form-item-prop-unit {
+      width: 90px;
+    }
+  }
+}
+
+.vxe-list-design--widget-form-item-prop-list {
+  margin-bottom: var(--vxe-ui-layout-padding-double);
+  padding: 0 var(--vxe-ui-layout-padding-default);
+  &:first-child {
+    margin-top: var(--vxe-ui-layout-padding-default);
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+  & > span {
+    padding: 0 0.5em;
+    &:first-child {
+      padding: 0;
+      padding-right: var(--vxe-ui-layout-padding-default);
+    }
+  }
+}

package/styles/helpers/baseMixin.scss

@@ -0,0 +1,105 @@
+@mixin createAnimationTransition ($property, $duration: .1s, $func: ease-in-out) {
+  transition: $property $duration $func;
+}
+
+@mixin createCheckboxIcon {
+  & {
+    cursor: pointer;
+  }
+  .vxe-checkbox--icon {
+    font-size: 1.22em;
+  }
+  .vxe-checkbox--icon {
+    color: var(--vxe-ui-input-border-color);
+    vertical-align: middle;
+    font-weight: 700;
+    user-select: none;
+  }
+  &.is--checked,
+  &.is--indeterminate {
+    color: var(--vxe-ui-font-primary-color);
+    .vxe-checkbox--icon {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  &:not(.is--disabled) {
+    &:hover {
+      .vxe-checkbox--icon {
+        color: var(--vxe-ui-font-primary-color);
+      }
+    }
+  }
+  &.is--hidden {
+    cursor: default;
+  }
+  &.is--readonly {
+    cursor: auto;
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-font-disabled-color);
+    cursor: not-allowed;
+    .vxe-checkbox--icon {
+      color: var(--vxe-ui-input-disabled-color);
+    }
+  }
+  .vxe-checkbox--label {
+    padding-left: 0.5em;
+    vertical-align: middle;
+  }
+}
+
+@mixin createRadioIcon {
+  & {
+    cursor: pointer;
+  }
+  .vxe-radio--icon {
+    font-size: 1.26em;
+  }
+  .vxe-radio--icon {
+    color: var(--vxe-ui-input-border-color);
+    border-radius: 50%;
+    vertical-align: middle;
+    font-weight: 700;
+    user-select: none;
+  }
+  &.is--checked {
+    color: var(--vxe-ui-font-primary-color);
+    .vxe-radio--icon {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  &:not(.is--disabled) {
+    &:hover {
+      .vxe-radio--icon {
+        color: var(--vxe-ui-font-primary-color);
+      }
+    }
+  }
+  &.is--readonly {
+    cursor: auto;
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-font-disabled-color);
+    cursor: not-allowed;
+    .vxe-radio--icon {
+      color: var(--vxe-ui-input-disabled-color);
+    }
+  }
+  .vxe-radio--label {
+    padding-left: 0.5em;
+    vertical-align: middle;
+  }
+}
+
+@mixin createEmptyMask {
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    user-select: none;
+  }
+}

package/styles/helpers/baseVar.scss

@@ -0,0 +1,4 @@
+// 24 栅格布局
+$colSpanList: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
+              37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
+              70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;

package/styles/helpers/placement.scss

@@ -0,0 +1,39 @@
+@use './baseMixin.scss';
+
+@mixin createPlacementPanel {
+  display: none;
+  position: absolute;
+  left: 0;
+  padding: 4px 0;
+  color: var(--vxe-ui-font-color);
+  text-align: left;
+  &:not(.is--transfer) {
+    min-width: 100%;
+  }
+  &.is--transfer {
+    position: fixed;
+  }
+  &.ani--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;
+    }
+  }
+  &.ani--enter {
+    opacity: 1;
+    transform: scaleY(1);
+    & > div {
+      &::after {
+        display: none;
+      }
+    }
+  }
+  & > div {
+    @include baseMixin.createEmptyMask();
+  }
+}

package/styles/theme/dark.scss

@@ -0,0 +1,9 @@
+[data-vxe-ui-theme="dark"] {
+  /*form-design*/
+  --vxe-ui-form-design-widget-hover-background-color: var(--vxe-ui-base-hover-background-color);
+  --vxe-ui-form-design-sub-widget-hover-background-color: #27292b;
+  
+  /*list-design*/
+  --vxe-ui-list-design-table-border-color: #37373a;
+  --vxe-ui-list-design-table-header-background-color: #28282a;
+}

package/styles/theme/light.scss

@@ -0,0 +1,11 @@
+@use '../variable.scss' as light_variable;
+
+[data-vxe-ui-theme="light"] {
+  /*form-design*/
+  --vxe-ui-form-design-widget-hover-background-color: var(--vxe-ui-base-hover-background-color);
+  --vxe-ui-form-design-sub-widget-hover-background-color: #{light_variable.$vxe-ui-form-design-sub-widget-hover-background-color};
+  
+  /*list-design*/
+  --vxe-ui-list-design-table-border-color: #{light_variable.$vxe-ui-list-design-table-border-color};
+  --vxe-ui-list-design-table-header-background-color: #{light_variable.$vxe-ui-list-design-table-header-background-color};
+}

package/styles/variable.scss

@@ -0,0 +1,9 @@
+$vxe-ui-base-hover-background-color: rgba(0, 0, 0, 0.04) !default;
+
+/*form-design*/
+$vxe-ui-form-design-widget-hover-background-color: $vxe-ui-base-hover-background-color !default;
+$vxe-ui-form-design-sub-widget-hover-background-color: rgba(0, 0, 0, 0.05) !default;
+
+/*list-design*/
+$vxe-ui-list-design-table-border-color: #e8eaec !default;
+$vxe-ui-list-design-table-header-background-color: #f8f8f9 !default;