cbvirtua 1.0.10 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "",
   "main": "index.js",
   "scripts": {

package/vant/style/README.md

@@ -0,0 +1,79 @@
+# Built-in Style
+
+### Intro
+
+Vant contains some common styles that can be used directly by the className.
+
+### Text ellipsis
+
+When the text content length exceeds the maximum container width, the excess text is automatically omitted.
+
+```html
+<div class="van-ellipsis">
+  This is a paragraph that displays up to one line of text, and the rest of the
+  text will be omitted.
+</div>
+
+<div class="van-multi-ellipsis--l2">
+  This is a paragraph that displays up to two lines of text, and the rest of the
+  text will be omitted.
+</div>
+
+<div class="van-multi-ellipsis--l3">
+  This is a paragraph that displays up to three lines of text, and the rest of
+  the text will be omitted.
+</div>
+```
+
+### Hairline
+
+Add 1px border under the Retina screen for the element, based on a pseudo element.
+
+```html
+<!-- border top -->
+<div class="van-hairline--top"></div>
+
+<!-- border bottom -->
+<div class="van-hairline--bottom"></div>
+
+<!-- border left -->
+<div class="van-hairline--left"></div>
+
+<!-- border right -->
+<div class="van-hairline--right"></div>
+
+<!-- border top & bottom -->
+<div class="van-hairline--top-bottom"></div>
+
+<!-- full border -->
+<div class="van-hairline--surround"></div>
+```
+
+### Animation
+
+```html
+<!-- fade in  -->
+<transition name="van-fade">
+  <div v-show="visible">Fade</div>
+</transition>
+
+<!-- slide up -->
+<transition name="van-slide-up">
+  <div v-show="visible">Slide Up</div>
+</transition>
+
+<!-- slide down -->
+<transition name="van-slide-down">
+  <div v-show="visible">Slide Down</div>
+</transition>
+
+<!-- slide left -->
+<transition name="van-slide-left">
+  <div v-show="visible">Slide Left</div>
+</transition>
+
+<!-- slide right -->
+<transition name="van-slide-right">
+  <div v-show="visible">Slide Right</div>
+</transition>
+```

package/vant/style/README.zh-CN.md

@@ -0,0 +1,79 @@
+# 内置样式
+
+### 介绍
+
+Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。
+
+### 文字省略
+
+当文本内容长度超过容器最大宽度时，自动省略多余的文本。
+
+```html
+<!-- 最多显示一行 -->
+<div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>
+
+<!-- 最多显示两行 -->
+<div class="van-multi-ellipsis--l2">
+  这是一段最多显示两行的文字，多余的内容会被省略
+</div>
+
+<!-- 最多显示三行 -->
+<div class="van-multi-ellipsis--l3">
+  这是一段最多显示三行的文字，多余的内容会被省略
+</div>
+```
+
+### 1px 边框
+
+为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。
+
+```html
+<!-- 上边框 -->
+<div class="van-hairline--top"></div>
+
+<!-- 下边框 -->
+<div class="van-hairline--bottom"></div>
+
+<!-- 左边框 -->
+<div class="van-hairline--left"></div>
+
+<!-- 右边框 -->
+<div class="van-hairline--right"></div>
+
+<!-- 上下边框 -->
+<div class="van-hairline--top-bottom"></div>
+
+<!-- 全边框 -->
+<div class="van-hairline--surround"></div>
+```
+
+### 动画
+
+可以通过 `transition` 组件使用内置的动画
+
+```html
+<!-- 淡入 -->
+<transition name="van-fade">
+  <div v-show="visible">Fade</div>
+</transition>
+
+<!-- 上滑进入 -->
+<transition name="van-slide-up">
+  <div v-show="visible">Slide Up</div>
+</transition>
+
+<!-- 下滑进入 -->
+<transition name="van-slide-down">
+  <div v-show="visible">Slide Down</div>
+</transition>
+
+<!-- 左滑进入 -->
+<transition name="van-slide-left">
+  <div v-show="visible">Slide Left</div>
+</transition>
+
+<!-- 右滑进入 -->
+<transition name="van-slide-right">
+  <div v-show="visible">Slide Right</div>
+</transition>
+```

package/vant/style/animation.less

@@ -0,0 +1,139 @@
+@import './var';
+
+@keyframes van-slide-up-enter {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes van-slide-up-leave {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes van-slide-down-enter {
+  from {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes van-slide-down-leave {
+  to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes van-slide-left-enter {
+  from {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes van-slide-left-leave {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes van-slide-right-enter {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes van-slide-right-leave {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes van-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes van-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes van-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.van-fade {
+  &-enter-active {
+    animation: @animation-duration-base van-fade-in both
+      @animation-timing-function-enter;
+  }
+
+  &-leave-active {
+    animation: @animation-duration-base van-fade-out both
+      @animation-timing-function-leave;
+  }
+}
+
+.van-slide-up {
+  &-enter-active {
+    animation: van-slide-up-enter @animation-duration-base both
+      @animation-timing-function-enter;
+  }
+
+  &-leave-active {
+    animation: van-slide-up-leave @animation-duration-base both
+      @animation-timing-function-leave;
+  }
+}
+
+.van-slide-down {
+  &-enter-active {
+    animation: van-slide-down-enter @animation-duration-base both
+      @animation-timing-function-enter;
+  }
+
+  &-leave-active {
+    animation: van-slide-down-leave @animation-duration-base both
+      @animation-timing-function-leave;
+  }
+}
+
+.van-slide-left {
+  &-enter-active {
+    animation: van-slide-left-enter @animation-duration-base both
+      @animation-timing-function-enter;
+  }
+
+  &-leave-active {
+    animation: van-slide-left-leave @animation-duration-base both
+      @animation-timing-function-leave;
+  }
+}
+
+.van-slide-right {
+  &-enter-active {
+    animation: van-slide-right-enter @animation-duration-base both
+      @animation-timing-function-enter;
+  }
+
+  &-leave-active {
+    animation: van-slide-right-leave @animation-duration-base both
+      @animation-timing-function-leave;
+  }
+}

package/vant/style/base.less

@@ -0,0 +1,10 @@
+/**
+ * Entry of basic styles
+ */
+
+@import './var';
+@import './normalize';
+@import './ellipsis';
+@import './clearfix';
+@import './hairline';
+@import './animation';

package/vant/style/clearfix.less

@@ -0,0 +1,5 @@
+@import './mixins/clearfix';
+
+.van-clearfix {
+  .clearfix();
+}

package/vant/style/demo/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('ellipsis')">
+      <div class="van-ellipsis">{{ t('text1') }}</div>
+      <div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
+    </demo-block>
+
+    <demo-block card :title="t('hairline')">
+      <div class="van-hairline--top" />
+    </demo-block>
+
+    <demo-block card :title="t('animation')">
+      <van-cell is-link title="Fade" @click="animate('van-fade')" />
+      <van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
+      <van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
+      <van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
+      <van-cell
+        is-link
+        title="Slide Right"
+        @click="animate('van-slide-right')"
+      />
+    </demo-block>
+
+    <transition :name="transitionName">
+      <div v-show="show" class="demo-animate-block" />
+    </transition>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      hairline: '1px 边框',
+      ellipsis: '文字省略',
+      animation: '动画',
+      toggle: '切换动画',
+      text1: '这是一段最多显示一行的文字，后面的内容会省略',
+      text2:
+        '这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略',
+    },
+    'en-US': {
+      hairline: 'Hairline',
+      ellipsis: 'Text Ellipsis',
+      animation: 'Animation',
+      toggle: 'Switch animation',
+      text1:
+        'This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.',
+      text2:
+        'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.',
+    },
+  },
+
+  data() {
+    return {
+      show: false,
+      transitionName: '',
+    };
+  },
+
+  methods: {
+    animate(transitionName) {
+      this.show = true;
+      this.transitionName = transitionName;
+
+      setTimeout(() => {
+        this.show = false;
+      }, 500);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../style/var';
+
+.demo-style {
+  .van-ellipsis,
+  .van-multi-ellipsis--l2 {
+    max-width: 300px;
+    margin-left: @padding-md;
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  .van-ellipsis {
+    margin-bottom: @padding-md;
+  }
+
+  .van-hairline--top {
+    height: 30px;
+    background-color: @white;
+
+    &::after {
+      top: 5px;
+    }
+  }
+
+  .demo-animate-block {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    margin: -50px 0 0 -50px;
+    background-color: @blue;
+    border-radius: 8px;
+  }
+}
+</style>

package/vant/style/ellipsis.less

@@ -0,0 +1,13 @@
+@import './mixins/ellipsis';
+
+.van-ellipsis {
+  .ellipsis();
+}
+
+.van-multi-ellipsis--l2 {
+  .multi-ellipsis(2);
+}
+
+.van-multi-ellipsis--l3 {
+  .multi-ellipsis(3);
+}

package/vant/style/hairline.less

@@ -0,0 +1,47 @@
+@import './var';
+@import './mixins/hairline';
+
+[class*='van-hairline'] {
+  &::after {
+    .hairline();
+  }
+}
+
+.van-hairline {
+  &,
+  &--top,
+  &--left,
+  &--right,
+  &--bottom,
+  &--surround,
+  &--top-bottom {
+    position: relative;
+  }
+
+  &--top::after {
+    border-top-width: @border-width-base;
+  }
+
+  &--left::after {
+    border-left-width: @border-width-base;
+  }
+
+  &--right::after {
+    border-right-width: @border-width-base;
+  }
+
+  &--bottom::after {
+    border-bottom-width: @border-width-base;
+  }
+
+  &,
+  &-unset {
+    &--top-bottom::after {
+      border-width: @border-width-base 0;
+    }
+  }
+
+  &--surround::after {
+    border-width: @border-width-base;
+  }
+}

package/vant/style/mixins/clearfix.less

@@ -0,0 +1,7 @@
+.clearfix() {
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}

package/vant/style/mixins/ellipsis.less

@@ -0,0 +1,15 @@
+.multi-ellipsis(@lines) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: @lines;
+
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+.ellipsis() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/vant/style/mixins/hairline.less

@@ -0,0 +1,39 @@
+@import '../var';
+
+.hairline-common() {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+}
+
+.hairline(@color: @border-color) {
+  .hairline-common();
+
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid @color;
+  transform: scale(0.5);
+}
+
+.hairline-top(@color: @border-color, @left: 0, @right: 0) {
+  .hairline-common();
+
+  top: 0;
+  right: @right;
+  left: @left;
+  border-top: 1px solid @color;
+  transform: scaleY(0.5);
+}
+
+.hairline-bottom(@color: @border-color, @left: 0, @right: 0) {
+  .hairline-common();
+
+  right: @right;
+  bottom: 0;
+  left: @left;
+  border-bottom: 1px solid @color;
+  transform: scaleY(0.5);
+}

package/vant/style/normalize.less

@@ -0,0 +1,38 @@
+@import './var';
+
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  margin: 0;
+  font-family: @base-font-family;
+}
+
+a {
+  text-decoration: none;
+}
+
+input,
+button,
+textarea {
+  color: inherit;
+  font: inherit;
+}
+
+a,
+input,
+button,
+textarea,
+[class*='van-'] {
+  &:focus {
+    outline: none;
+  }
+}
+
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}