zartui 0.1.21 → 0.1.22

package/lib/picker/index.less

@@ -1,151 +1,151 @@
-@import '../style/var';
-@import '../style/hairline';
-
-.zt-picker {
-  position: relative;
-  background-color: @picker-background-color;
-  user-select: none;
-
-  &__toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: @picker-toolbar-height;
-  }
-
-  &__border {
-    position: relative;
-  }
-
-  &__border::after {
-    .hairline-bottom();
-  }
-
-  &__cancel,
-  &__confirm {
-    height: 100%;
-    padding: @picker-action-padding;
-    font-size: @picker-action-font-size;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-
-    &:active {
-      opacity: @active-opacity;
-    }
-  }
-
-  &__confirm {
-    color: @picker-confirm-action-color;
-    font-weight: @picker-confirm-action-font-weight;
-  }
-
-  &__cancel {
-    color: @picker-cancel-action-color;
-    font-weight: @picker-cancel-action-font-weight;
-  }
-
-  &__title {
-    max-width: 50%;
-    font-weight: @plain-font-weight;
-    font-size: @picker-title-font-size;
-    line-height: @picker-title-line-height;
-    text-align: center;
-    color: rgba(0, 0, 0, 0.4);
-  }
-
-  &__header {
-    width: 100%;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    font-size: @picker-title-font-size;
-    font-weight: @plain-font-weight;
-
-    >li {
-      flex: auto;
-      text-align: center;
-    }
-  }
-
-  &__columns {
-    position: relative;
-    display: flex;
-    cursor: grab;
-  }
-
-  &__loading {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: @picker-loading-icon-color;
-    background-color: @picker-loading-mask-color;
-  }
-
-  &__frame {
-    position: absolute;
-    top: 50%;
-    right: @padding-md;
-    left: @padding-md;
-    z-index: 2;
-    transform: translateY(-50%);
-    pointer-events: none;
-  }
-
-  &__background {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    opacity: 0.04;
-    background-color: #000;
-  }
-
-  &__mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    background-image: linear-gradient(
-        180deg,
-        hsla(0, 0%, 100%, 0.9),
-        hsla(0, 0%, 100%, 0.4)
-      ),
-      linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
-    background-repeat: no-repeat;
-    background-position: top, bottom;
-    // fix rendering failure during animation on safari
-    transform: translateZ(0);
-    pointer-events: none;
-  }
-
-  &-column {
-    flex: 1;
-    overflow: hidden;
-    font-size: @picker-option-font-size;
-
-    &__wrapper {
-      transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
-    }
-
-    &__item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 @padding-base;
-      color: @picker-option-text-color;
-
-      &--disabled {
-        cursor: not-allowed;
-        opacity: @picker-option-disabled-opacity;
-      }
-    }
-  }
-}
+@import '../style/var';
+@import '../style/hairline';
+
+.zt-picker {
+  position: relative;
+  background-color: @picker-background-color;
+  user-select: none;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: @picker-toolbar-height;
+  }
+
+  &__border {
+    position: relative;
+  }
+
+  &__border::after {
+    .hairline-bottom();
+  }
+
+  &__cancel,
+  &__confirm {
+    height: 100%;
+    padding: @picker-action-padding;
+    font-size: @picker-action-font-size;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:active {
+      opacity: @active-opacity;
+    }
+  }
+
+  &__confirm {
+    color: @picker-confirm-action-color;
+    font-weight: @picker-confirm-action-font-weight;
+  }
+
+  &__cancel {
+    color: @picker-cancel-action-color;
+    font-weight: @picker-cancel-action-font-weight;
+  }
+
+  &__title {
+    max-width: 50%;
+    font-weight: @plain-font-weight;
+    font-size: @picker-title-font-size;
+    line-height: @picker-title-line-height;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  &__header {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    font-size: @picker-title-font-size;
+    font-weight: @plain-font-weight;
+
+    >li {
+      flex: auto;
+      text-align: center;
+    }
+  }
+
+  &__columns {
+    position: relative;
+    display: flex;
+    cursor: grab;
+  }
+
+  &__loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @picker-loading-icon-color;
+    background-color: @picker-loading-mask-color;
+  }
+
+  &__frame {
+    position: absolute;
+    top: 50%;
+    right: @padding-md;
+    left: @padding-md;
+    z-index: 2;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  &__background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0.04;
+    background-color: #000;
+  }
+
+  &__mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(
+            180deg,
+            hsla(0, 0%, 100%, 0.9),
+            hsla(0, 0%, 100%, 0.4)
+    ),
+    linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
+    background-repeat: no-repeat;
+    background-position: top, bottom;
+    // fix rendering failure during animation on safari
+    transform: translateZ(0);
+    pointer-events: none;
+  }
+
+  &-column {
+    flex: 1;
+    overflow: hidden;
+    font-size: @picker-option-font-size;
+
+    &__wrapper {
+      transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
+    }
+
+    &__item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 @padding-base;
+      color: @picker-option-text-color;
+
+      &--disabled {
+        cursor: not-allowed;
+        opacity: @picker-option-disabled-opacity;
+      }
+    }
+  }
+}

package/lib/picker/shared.js

@@ -12,6 +12,10 @@ var pickerProps = {
   showToolbar: Boolean,
   cancelButtonText: String,
   confirmButtonText: String,
+  showPicker: {
+    type: Boolean,
+    default: false
+  },
   allowHtml: {
     type: Boolean,
     default: true

package/lib/picker/style/index.js

@@ -1,3 +1,7 @@
 require('../../style/base.css');
 require('../../loading/index.css');
+require('../../overlay/index.css');
+require('../../info/index.css');
+require('../../icon/index.css');
+require('../../popup/index.css');
 require('../index.css');

package/lib/picker/style/less.js

@@ -1,3 +1,7 @@
 require('../../style/base.less');
 require('../../loading/index.less');
+require('../../overlay/index.less');
+require('../../info/index.less');
+require('../../icon/index.less');
+require('../../popup/index.less');
 require('../index.less');

package/lib/popup/index.less

@@ -1,137 +1,137 @@
-@import '../style/var';
-
-.zt {
-  &-overflow-hidden {
-    overflow: hidden !important;
-  }
-
-  &-popup {
-    position: fixed;
-    max-height: 100%;
-    overflow-y: auto;
-    background-color: @popup-background-color;
-    transition: @popup-transition;
-    -webkit-overflow-scrolling: touch;
-
-    &--center {
-      top: 50%;
-      left: 50%;
-      transform: translate3d(-50%, -50%, 0);
-
-      &.zt-popup--round {
-        border-radius: @popup-round-border-radius;
-      }
-    }
-
-    &--top {
-      top: 0;
-      left: 0;
-      width: 100%;
-
-      &.zt-popup--round {
-        border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
-      }
-    }
-
-    &--right {
-      top: 50%;
-      right: 0;
-      transform: translate3d(0, -50%, 0);
-
-      &.zt-popup--round {
-        border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
-      }
-    }
-
-    &--bottom {
-      bottom: 0;
-      left: 0;
-      width: 100%;
-
-      &.zt-popup--round {
-        border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
-      }
-    }
-
-    &--left {
-      top: 50%;
-      left: 0;
-      transform: translate3d(0, -50%, 0);
-
-      &.zt-popup--round {
-        border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
-      }
-    }
-
-    &--safe-area-inset-bottom {
-      padding-bottom: constant(safe-area-inset-bottom);
-      padding-bottom: env(safe-area-inset-bottom);
-    }
-
-    &-slide-top-enter-active,
-    &-slide-left-enter-active,
-    &-slide-right-enter-active,
-    &-slide-bottom-enter-active {
-      transition-timing-function: @animation-timing-function-enter;
-    }
-
-    &-slide-top-leave-active,
-    &-slide-left-leave-active,
-    &-slide-right-leave-active,
-    &-slide-bottom-leave-active {
-      transition-timing-function: @animation-timing-function-leave;
-    }
-
-    &-slide-top-enter,
-    &-slide-top-leave-active {
-      transform: translate3d(0, -100%, 0);
-    }
-
-    &-slide-right-enter,
-    &-slide-right-leave-active {
-      transform: translate3d(100%, -50%, 0);
-    }
-
-    &-slide-bottom-enter,
-    &-slide-bottom-leave-active {
-      transform: translate3d(0, 100%, 0);
-    }
-
-    &-slide-left-enter,
-    &-slide-left-leave-active {
-      transform: translate3d(-100%, -50%, 0);
-    }
-
-    &__close-icon {
-      position: absolute;
-      z-index: @popup-close-icon-z-index;
-      color: @popup-close-icon-color;
-      font-size: @popup-close-icon-size;
-      cursor: pointer;
-
-      &:active {
-        color: @popup-close-icon-active-color;
-      }
-
-      &--top-left {
-        top: @popup-close-icon-margin;
-        left: @popup-close-icon-margin;
-      }
-
-      &--top-right {
-        top: @popup-close-icon-margin;
-        right: @popup-close-icon-margin;
-      }
-
-      &--bottom-left {
-        bottom: @popup-close-icon-margin;
-        left: @popup-close-icon-margin;
-      }
-
-      &--bottom-right {
-        right: @popup-close-icon-margin;
-        bottom: @popup-close-icon-margin;
-      }
-    }
-  }
-}
+@import '../style/var';
+
+.zt {
+  &-overflow-hidden {
+    overflow: hidden !important;
+  }
+
+  &-popup {
+    position: fixed;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: @popup-background-color;
+    transition: @popup-transition;
+    -webkit-overflow-scrolling: touch;
+
+    &--center {
+      top: 50%;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0);
+
+      &.zt-popup--round {
+        border-radius: @popup-round-border-radius;
+      }
+    }
+
+    &--top {
+      top: 0;
+      left: 0;
+      width: 100%;
+
+      &.zt-popup--round {
+        border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
+      }
+    }
+
+    &--right {
+      top: 50%;
+      right: 0;
+      transform: translate3d(0, -50%, 0);
+
+      &.zt-popup--round {
+        border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
+      }
+    }
+
+    &--bottom {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+
+      &.zt-popup--round {
+        border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
+      }
+    }
+
+    &--left {
+      top: 50%;
+      left: 0;
+      transform: translate3d(0, -50%, 0);
+
+      &.zt-popup--round {
+        border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
+      }
+    }
+
+    &--safe-area-inset-bottom {
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    &-slide-top-enter-active,
+    &-slide-left-enter-active,
+    &-slide-right-enter-active,
+    &-slide-bottom-enter-active {
+      transition-timing-function: @animation-timing-function-enter;
+    }
+
+    &-slide-top-leave-active,
+    &-slide-left-leave-active,
+    &-slide-right-leave-active,
+    &-slide-bottom-leave-active {
+      transition-timing-function: @animation-timing-function-leave;
+    }
+
+    &-slide-top-enter,
+    &-slide-top-leave-active {
+      transform: translate3d(0, -100%, 0);
+    }
+
+    &-slide-right-enter,
+    &-slide-right-leave-active {
+      transform: translate3d(100%, -50%, 0);
+    }
+
+    &-slide-bottom-enter,
+    &-slide-bottom-leave-active {
+      transform: translate3d(0, 100%, 0);
+    }
+
+    &-slide-left-enter,
+    &-slide-left-leave-active {
+      transform: translate3d(-100%, -50%, 0);
+    }
+
+    &__close-icon {
+      position: absolute;
+      z-index: @popup-close-icon-z-index;
+      color: @popup-close-icon-color;
+      font-size: @popup-close-icon-size;
+      cursor: pointer;
+
+      &:active {
+        color: @popup-close-icon-active-color;
+      }
+
+      &--top-left {
+        top: @popup-close-icon-margin;
+        left: @popup-close-icon-margin;
+      }
+
+      &--top-right {
+        top: @popup-close-icon-margin;
+        right: @popup-close-icon-margin;
+      }
+
+      &--bottom-left {
+        bottom: @popup-close-icon-margin;
+        left: @popup-close-icon-margin;
+      }
+
+      &--bottom-right {
+        right: @popup-close-icon-margin;
+        bottom: @popup-close-icon-margin;
+      }
+    }
+  }
+}

package/lib/popup/style/index.js

@@ -1,5 +1,5 @@
 require('../../style/base.css');
+require('../../overlay/index.css');
 require('../../info/index.css');
 require('../../icon/index.css');
-require('../../overlay/index.css');
 require('../index.css');

package/lib/popup/style/less.js

@@ -1,5 +1,5 @@
 require('../../style/base.less');
+require('../../overlay/index.less');
 require('../../info/index.less');
 require('../../icon/index.less');
-require('../../overlay/index.less');
 require('../index.less');