@zkwq/business 0.0.47 → 0.0.49

package/dist/css/AppDialog.css

@@ -1,4 +1,47 @@
-
+.AppDialog__wrapper.base-dialog__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.AppDialog {
+  max-height: 100vh;
+  transition: max-height 0.8s ease, height 0.8s ease;
+}
+.AppDialog.base-dialog {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+.AppDialog .base-dialog__header {
+  padding: 0;
+}
+.AppDialog .base-dialog__body {
+  padding: 0;
+}
+.AppDialog--fullPage {
+  height: 100vh;
+}
+.AppDialog--fullPage.AppDialog .base-dialog__body {
+  height: 100%;
+}
+.AppDialog--fullPage.AppDialog .AppDialog__inner {
+  height: 100vh;
+  overflow: visible;
+}
+.AppDialog--fullPage.AppDialog .AppDialog__content {
+  height: 100%;
+}
+.Modal__closeButton {
+  position: absolute;
+  top: 8px;
+  right: -60px;
+  padding: 12px;
+}
+.Modal__closeIcon {
+  vertical-align: top;
+  fill: #FFF;
+}
 
 
 
@@ -116,47 +159,4 @@
 .AppDialog__subtitle--left[data-v-47783249] {
     padding: 0 16px;
 }
-}.AppDialog__wrapper.base-dialog__wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.AppDialog {
-  max-height: 100vh;
-  transition: max-height 0.8s ease, height 0.8s ease;
-}
-.AppDialog.base-dialog {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-.AppDialog .base-dialog__header {
-  padding: 0;
-}
-.AppDialog .base-dialog__body {
-  padding: 0;
-}
-.AppDialog--fullPage {
-  height: 100vh;
-}
-.AppDialog--fullPage.AppDialog .base-dialog__body {
-  height: 100%;
-}
-.AppDialog--fullPage.AppDialog .AppDialog__inner {
-  height: 100vh;
-  overflow: visible;
-}
-.AppDialog--fullPage.AppDialog .AppDialog__content {
-  height: 100%;
-}
-.Modal__closeButton {
-  position: absolute;
-  top: 8px;
-  right: -60px;
-  padding: 12px;
-}
-.Modal__closeIcon {
-  vertical-align: top;
-  fill: #FFF;
 }

package/dist/css/AppDialog.min.css

@@ -1 +1 @@
-[data-v-47783249]:export{primary:#2F3A91;success:#67C23A;warning:#FF791A;danger:#F1403C;info:#8590a6}.AppDialog__inner[data-v-47783249]{max-height:100vh;transition:max-height .8s ease,height .8s ease}.AppDialog__content[data-v-47783249]{padding:10px 20px 50px}.AppDialog__title[data-v-47783249]{margin-top:40px;font-size:24px;font-weight:500;color:#2f3a91;text-align:center}.AppDialog__subtitle[data-v-47783249]{padding:0 38px;margin-top:4px;font-size:14px;line-height:1.5;color:#8590a6;text-align:center}.AppDialog__title--left[data-v-47783249]{padding:0 20px;font-size:15px;color:#2f3a91;font-weight:600;height:60px;line-height:60px}.AppDialog__subtitle--left[data-v-47783249]{padding:0 20px;font-size:14px;line-height:1;color:#8590a6;text-align:left}@media (max-width:576px){.AppDialog__title--left[data-v-47783249]{padding:20px 16px 10px}.AppDialog__subtitle--left[data-v-47783249]{padding:0 16px}}.AppDialog__wrapper.base-dialog__wrapper{display:flex;flex-direction:column;justify-content:center;overflow-x:hidden;overflow-y:auto}.AppDialog{max-height:100vh;transition:max-height .8s ease,height .8s ease}.AppDialog.base-dialog{margin-top:0!important;margin-bottom:0!important}.AppDialog .base-dialog__header{padding:0}.AppDialog .base-dialog__body{padding:0}.AppDialog--fullPage{height:100vh}.AppDialog--fullPage.AppDialog .base-dialog__body{height:100%}.AppDialog--fullPage.AppDialog .AppDialog__inner{height:100vh;overflow:visible}.AppDialog--fullPage.AppDialog .AppDialog__content{height:100%}.Modal__closeButton{position:absolute;top:8px;right:-60px;padding:12px}.Modal__closeIcon{vertical-align:top;fill:#FFF}
+.AppDialog__wrapper.base-dialog__wrapper{display:flex;flex-direction:column;justify-content:center;overflow-x:hidden;overflow-y:auto}.AppDialog{max-height:100vh;transition:max-height .8s ease,height .8s ease}.AppDialog.base-dialog{margin-top:0!important;margin-bottom:0!important}.AppDialog .base-dialog__header{padding:0}.AppDialog .base-dialog__body{padding:0}.AppDialog--fullPage{height:100vh}.AppDialog--fullPage.AppDialog .base-dialog__body{height:100%}.AppDialog--fullPage.AppDialog .AppDialog__inner{height:100vh;overflow:visible}.AppDialog--fullPage.AppDialog .AppDialog__content{height:100%}.Modal__closeButton{position:absolute;top:8px;right:-60px;padding:12px}.Modal__closeIcon{vertical-align:top;fill:#FFF}[data-v-47783249]:export{primary:#2F3A91;success:#67C23A;warning:#FF791A;danger:#F1403C;info:#8590a6}.AppDialog__inner[data-v-47783249]{max-height:100vh;transition:max-height .8s ease,height .8s ease}.AppDialog__content[data-v-47783249]{padding:10px 20px 50px}.AppDialog__title[data-v-47783249]{margin-top:40px;font-size:24px;font-weight:500;color:#2f3a91;text-align:center}.AppDialog__subtitle[data-v-47783249]{padding:0 38px;margin-top:4px;font-size:14px;line-height:1.5;color:#8590a6;text-align:center}.AppDialog__title--left[data-v-47783249]{padding:0 20px;font-size:15px;color:#2f3a91;font-weight:600;height:60px;line-height:60px}.AppDialog__subtitle--left[data-v-47783249]{padding:0 20px;font-size:14px;line-height:1;color:#8590a6;text-align:left}@media (max-width:576px){.AppDialog__title--left[data-v-47783249]{padding:20px 16px 10px}.AppDialog__subtitle--left[data-v-47783249]{padding:0 16px}}

package/dist/scss/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'base';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';

package/dist/scss/drawer.scss

@@ -0,0 +1,218 @@
+@import "mixins";
+@import "var";
+
+@keyframes base-drawer-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@mixin drawer-animation($direction) {
+
+  @keyframes #{$direction}-drawer-in {
+    0% {
+
+      @if $direction == ltr {
+        transform: translate(-100%, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(100%, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, -100%);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 100%);
+      }
+    }
+
+    100% {
+      @if $direction == ltr {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 0px);
+      }
+    }
+  }
+
+  @keyframes #{$direction}-drawer-out {
+    0% {
+      @if $direction == ltr {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(0px, 0px);;
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 0);
+      }
+    }
+
+    100% {
+      @if $direction == ltr {
+        transform: translate(-100%, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(100%, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, -100%);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 100%);
+      }
+    }
+  }
+}
+
+@mixin animation-in($direction) {
+  .base-drawer__open &.#{$direction} {
+    animation: #{$direction}-drawer-in .3s 1ms;
+  }
+}
+
+@mixin animation-out($direction) {
+  &.#{$direction} {
+    animation: #{$direction}-drawer-out .3s;
+  }
+}
+
+@include drawer-animation(rtl);
+@include drawer-animation(ltr);
+@include drawer-animation(ttb);
+@include drawer-animation(btt);
+
+$directions: rtl, ltr, ttb, btt;
+
+@include b(drawer) {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: $--dialog-background-color;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
+  0 16px 24px 2px rgba(0, 0, 0, 0.14),
+  0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+
+  @each $direction in $directions {
+    @include animation-out($direction);
+    @include animation-in($direction);
+  }
+
+  &__wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    margin: 0;
+  }
+
+  &__header {
+    align-items: center;
+    color: $--color-text-primary;
+    display: flex;
+    margin-bottom: 28px;
+    padding: $--dialog-padding-primary;
+    padding-bottom: 0;
+    & > :first-child {
+      flex: 1;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    flex: 1;
+    line-height: inherit;
+    font-size: 1rem;
+  }
+
+  &__close-btn {
+    border: none;
+    cursor: pointer;
+    font-size: $--font-size-extra-large;
+    color: $--color-text-secondary;
+    background-color: transparent;
+  }
+
+  &__body {
+    flex: 1;
+    padding-bottom: 60px;
+    & > * {
+      box-sizing: border-box;
+    }
+  }
+
+  &.ltr, &.rtl {
+    height: 100%;
+    top: 0;
+    bottom: 0;
+  }
+
+  &.ttb, &.btt {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  &.ltr {
+    left: 0;
+  }
+
+  &.rtl {
+    right: 0;
+  }
+
+  &.ttb {
+    top: 0;
+  }
+
+  &.btt {
+    bottom: 0;
+  }
+}
+
+.base-drawer__container {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.base-drawer-fade-enter-active {
+  animation: base-drawer-fade-in .3s;
+}
+
+.base-drawer-fade-leave-active {
+  animation: base-drawer-fade-in .3s reverse;
+}

package/dist/scss/function.scss

@@ -0,0 +1,43 @@
+@import "config";
+
+
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, $modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + $state-prefix) {
+    @return true
+  } @else {
+    @return false
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true
+  } @else {
+    @return false
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}

package/dist/{mixins.scss → scss/mixins.scss}

@@ -194,3 +194,19 @@
     @content
   }
 }
+
+@mixin transition-base($prop) {
+  transition: $prop .3s;
+}
+
+@mixin position-absolute($top, $right, $bottom, $left) {
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+@mixin margin-x($infix) {
+  margin-left: $infix;
+  margin-right: $infix;
+}