fix: checkbox间距调整，官网首页赋能案例样式修改 (#511)

* fix: checkbox间距调整，官网案例样式调整

* fix: checkbox样式调整

* fix: taro drag

* fix: taro drag doc

src/packages/__VUE/checkbox/demo.vue

@@ -14,7 +14,10 @@
           >复选框</nut-checkbox
         >
       </nut-cell>
-      <nut-cell title="当前选中值" :desc="checkbox1" />
+      <nut-cell>
+        <div style="marginright: 10px">当前选中值</div>
+        <div>{{ checkbox1 }}</div>
+      </nut-cell>
     </nut-cell-group>
 
     <nut-cell-group title="禁用状态">
@@ -57,20 +60,43 @@
     <nut-cell-group title="checkboxGroup使用">
       <nut-cell>
         <nut-checkboxgroup v-model="checkboxgroup1">
-          <nut-checkbox v-model="checkbox9" label="1">组合复选框</nut-checkbox>
+          <nut-checkbox
+            v-model="checkbox9"
+            label="1"
+            style="margin: 2px 20px 15px 0"
+            >组合复选框</nut-checkbox
+          >
           <nut-checkbox v-model="checkbox10" label="2">组合复选框</nut-checkbox>
-          <nut-checkbox v-model="checkbox11" label="3">组合复选框</nut-checkbox>
+          <nut-checkbox
+            v-model="checkbox11"
+            label="3"
+            style="margin: 2px 20px 0 0"
+            >组合复选框</nut-checkbox
+          >
           <nut-checkbox v-model="checkbox12" label="4">组合复选框</nut-checkbox>
         </nut-checkboxgroup>
       </nut-cell>
-      <nut-cell title="当前选中值" :desc="checkboxgroup1" />
+      <nut-cell>
+        <div style="marginright: 10px">当前选中值</div>
+        <div>{{ checkboxgroup1 }}</div>
+      </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="checkboxGroup禁用">
       <nut-cell>
         <nut-checkboxgroup v-model="checkboxgroup1" disabled>
-          <nut-checkbox v-model="checkbox9" label="1">组合复选框</nut-checkbox>
+          <nut-checkbox
+            v-model="checkbox9"
+            label="1"
+            style="margin: 2px 20px 15px 0"
+            >组合复选框</nut-checkbox
+          >
           <nut-checkbox v-model="checkbox10" label="2">组合复选框</nut-checkbox>
-          <nut-checkbox v-model="checkbox11" label="3">组合复选框</nut-checkbox>
+          <nut-checkbox
+            v-model="checkbox11"
+            label="3"
+            style="margin: 2px 20px 0 0"
+            >组合复选框</nut-checkbox
+          >
           <nut-checkbox v-model="checkbox12" label="4">组合复选框</nut-checkbox>
         </nut-checkboxgroup>
       </nut-cell>
@@ -82,12 +108,22 @@
           ref="group"
           @change="changeBox4"
         >
-          <nut-checkbox v-model="checkbox15" label="1">组合复选框</nut-checkbox>
+          <nut-checkbox
+            v-model="checkbox15"
+            label="1"
+            style="margin: 0 20px 0 0"
+            >组合复选框</nut-checkbox
+          >
           <nut-checkbox v-model="checkbox16" label="2">组合复选框</nut-checkbox>
         </nut-checkboxgroup>
       </nut-cell>
       <nut-cell>
-        <nut-button type="primary" @click="toggleAll(true)">全选</nut-button>
+        <nut-button
+          type="primary"
+          @click="toggleAll(true)"
+          style="margin: 0 20px 0 0"
+          >全选</nut-button
+        >
         <nut-button type="info" @click="toggleAll(false)">取消</nut-button>
       </nut-cell>
     </nut-cell-group>

src/packages/__VUE/drag/demo.vue

@@ -31,7 +31,6 @@
 </template>
 
 <script lang="ts">
-import { ref, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('drag');
 export default createDemo({

src/packages/__VUE/drag/doc.taro.md

@@ -1,51 +1,33 @@
 # Drag 拖拽
 实现可拖拽的任意元素
 
-## 基本用法
+## 限制拖拽边界
 ```html
-<nut-drag>
-  <div class="touch-dom">可点击，可拖拽</div>
+<nut-drag style="width: 90%; height: 200px; border: 1px solid red" direction="all" width="120"height="40">
+    <nut-button style="width: 120px; height: 40px" type="primary">触摸移动</nut-button>
 </nut-drag>
 ```
+
 ## 限制拖拽方向
 ```html
-<nut-drag direction="x">
-  <div class="touch-dom">只能在X轴拖动</div>
-</nut-drag>
-```
-## 自动吸边
-```html
-<nut-drag direction="x" :attract="true">
-  <div class="touch-dom">拖动我</div>
-</nut-drag>
+ <nut-drag direction="x" width="120" height="40">
+      <nut-button style="width: 120px; height: 40px" type="primary">只能X轴拖拽</nut-button>
+ </nut-drag>
+ <nut-drag direction="y" width="120" height="40">
+    <nut-button style="width: 120px; height: 40px" type="primary">只能X轴拖拽</nut-button>
+ </nut-drag>
 ```
-## 限制拖拽边界
+## 不限制边界
 ```html
-<nut-drag
-  :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"
-  :attract="true"
->
-  <div class="touch-dom">拖动我</div>
-</nut-drag>
-<script>
- setup() {
-    function right() {
-      return document.documentElement.clientWidth - 300 - 9;
-    }
-    function bottom() {
-      return document.documentElement.clientHeight - 559;
-    }
-    return {
-      right,
-      bottom
-    };
-  }
-</script>
+ <nut-drag direction="all" width="120" height="40">
+    <nut-button style="width: 120px; height: 40px" type="primary" >触摸移动</nut-button>
+ </nut-drag>
 ```
 ## Prop
 
 | 字段      | 说明                                              | 类型           | 默认值                              |
 | :-------- | :------------------------------------------------ | :------------- | :---------------------------------- |
-| attract   | 是否开启自动吸边                                  | Boolean        | false                                |
+| width   | 子元素宽度                                  | string        |              ''                   |
+| height   | 子元素高度                                  | string        |             ''                    |
 | direction | 拖拽元素的拖拽方向限制，**x**/**y**/**all**三选一 | String         | 'all'                               |
 | boundary  | 拖拽元素的拖拽边界                                | Object         | {top: 0,left: 0,right: 0,bottom: 0} |

src/packages/__VUE/drag/index.taro.vue

@@ -0,0 +1,55 @@
+<template>
+  <movable-area>
+    <movable-view
+      :style="{ width: width + 'px', height: height + 'px' }"
+      :direction="direction"
+    >
+      <slot></slot>
+    </movable-view>
+  </movable-area>
+</template>
+<script lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { createComponent } from '../../utils/create';
+import requestAniFrame from '../../utils/raf';
+const { componentName, create } = createComponent('drag');
+export default create({
+  props: {
+    direction: {
+      type: String,
+      default: 'all'
+    },
+    width: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: String,
+      default: ''
+    }
+  },
+
+  setup(props, { emit }) {
+    const direction = ref('all');
+
+    function checkDirection() {
+      if (props.direction == 'x') {
+        direction.value = 'horizontal';
+      }
+      if (props.direction == 'y') {
+        direction.value = 'vertical';
+      }
+    }
+    onMounted(() => {
+      checkDirection();
+    });
+    return {
+      direction
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/sites/doc/views/Main.vue

@@ -103,8 +103,13 @@
             @click="onRight"
           ></div>
         </div>
-        <ul class="doc-content-cases-content__list">
-          <li v-for="img in casesImages">
+        <ul
+          :class="[
+            'doc-content-cases-content__list',
+            themeNameValue() == 'black' ? 'noShadow' : ''
+          ]"
+        >
+          <li v-for="(img, index) in casesImages" :key="index">
             <img :src="img" />
           </li>
         </ul>
@@ -112,7 +117,7 @@
     </div>
     <div class="doc-content-more" v-if="articleList.length">
       <div class="doc-content-hd">
-        <h4 class="doc-content-title">更多内容</h4>
+        <h4 class="doc-content-title"></h4>
         <a class="sub-more" href="#/resource">More</a>
       </div>
       <ul class="more-list">
@@ -152,7 +157,8 @@ export default defineComponent({
       // theme: 'white',
       articleList,
       casesImages,
-      currentCaseItem
+      currentCaseItem,
+      localTheme: localStorage.getItem('nutui-theme-color')
     });
     onMounted(() => {
       // 文章列表接口
@@ -200,6 +206,11 @@ export default defineComponent({
         return `doc-content-${RefData.getInstance().themeColor.value}`;
       };
     });
+    const themeNameValue = computed(() => {
+      return function () {
+        return RefData.getInstance().themeColor.value;
+      };
+    });
     const toLink = (id: number) => {
       window.open('//jelly.jd.com/article/' + id);
     };
@@ -210,6 +221,7 @@ export default defineComponent({
       toIntro,
       ...toRefs(data),
       themeName,
+      themeNameValue,
       toLink,
       onLeft,
       onRight
@@ -419,17 +431,28 @@ export default defineComponent({
           height: 390px;
           flex-shrink: 0;
           margin-right: 20px;
-          box-shadow: 0px 1px 7px 0px #edeef1;
           transition: all 0.5s;
           &:first-child {
             margin-right: 139px;
             transform: scale(1.04);
+            border-radius: 10px;
+            overflow: hidden;
+          }
+          &:nth-child(-n + 4) {
+            box-shadow: 0 4px 7px 0 rgb(144 156 164 / 80%);
+            border-radius: 3px;
+            overflow: hidden;
           }
           > img {
             width: 100%;
             height: 100%;
           }
         }
+        &.noShadow {
+          > li {
+            box-shadow: none !important;
+          }
+        }
       }
     }
   }
@@ -595,11 +618,6 @@ export default defineComponent({
   .doc-content-cases-content__main {
     background: #474753;
   }
-  .doc-content-cases-content__list {
-    li {
-      box-shadow: none;
-    }
-  }
   .doc-content-more {
     .more-item img {
       box-shadow: none;

src/sites/mobile-taro/vue/project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "dist/",
   "projectname": "%40nutui%2Fnutui-taro-mobile",
   "description": "nutui-taro-vue",
-  "appid": "wxf2b976b67dab3882",
+  "appid": "wxee296c9bffc451d9",
   "setting": {
     "urlCheck": true,
     "es6": false,
@@ -23,13 +23,14 @@
     "compileHotReLoad": false,
     "useMultiFrameRuntime": true,
     "useApiHook": true,
-    "useApiHostProcess": false,
+    "useApiHostProcess": true,
     "babelSetting": {
       "ignore": [],
       "disablePlugins": [],
       "outputPath": ""
     },
     "enableEngineNative": false,
+    "bundle": false,
     "useIsolateContext": true,
     "useCompilerModule": true,
     "userConfirmedUseCompilerModuleSwitch": false,

src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,5 +1,6 @@
 export default {
   pages: [
+    'pages/drag/index',
     'pages/toast/index',
     'pages/notify/index',
     'pages/dialog/index',

src/sites/mobile-taro/vue/src/pages/drag/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="demo full">
+    <h2>基础用法</h2>
+    <nut-drag
+      style="width: 90%; height: 200px; border: 1px solid red"
+      direction="all"
+      width="120"
+      height="40"
+    >
+      <nut-button style="width: 120px; height: 40px" type="primary"
+        >触摸移动</nut-button
+      >
+    </nut-drag>
+    <h2 style="margin: 60px 0 0 0">限制拖拽方向</h2>
+    <nut-drag
+      style="width: 100%; height: 200px; position: absolute"
+      direction="x"
+      width="120"
+      height="40"
+    >
+      <nut-button style="width: 120px; height: 40px" type="primary"
+        >只能X轴拖拽</nut-button
+      >
+    </nut-drag>
+    <nut-drag
+      style="
+        width: 100%;
+        height: 200px;
+        position: absolute;
+        margin: 0 0 0 200px;
+      "
+      direction="y"
+      width="120"
+      height="40"
+    >
+      <nut-button style="width: 120px; height: 40px" type="primary"
+        >只能y轴拖拽</nut-button
+      >
+    </nut-drag>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  setup() {}
+};
+</script>
+
+<style lang="scss"></style>