feat: publish 0.4.0

example/docs/zh-CN/components/button.md

@@ -238,8 +238,8 @@ export default {
 
 <template>
   <lay-button-container>
-      <lay-button type="default" :loading="loading">加载</lay-button>
+      <lay-button type="default" :loading="loadState">加载</lay-button>
-      <lay-switch v-model="loading"></lay-switch>
+      <lay-switch v-model="loadState"></lay-switch>
   </lay-button-container>
 </template>
 
@@ -249,10 +249,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const loading = ref(true)
+    const loadState = ref(true)
 
     return {
-      loading
+      loadState
     }
   }
 }
@@ -288,23 +288,11 @@ export default {
 
 :::
 
-::: title 主题配置
+::: title Button 变量
 :::
 
-<p style="margin-left: 30px">less</p>
-
-```
-@button-primary-color: #009688; // 主题色
-@button-border-radius: 2px; // 圆角
-@button-border-color: #d2d2d2; // 边框色
 ```
 
-<p style="margin-left: 30px">css</p>
-
-```
---button-primary-color: #009688; // 主题色
---button-border-radius: 2px; // 圆角
---button-border-color: #d2d2d2; // 边框色
 ```
 
 ::: title Button 属性

example/docs/zh-CN/components/datePicker.md

@@ -34,6 +34,32 @@ export default {
 
 :::
 
+::: title 日期时间
+:::
+
+::: demo
+
+<template>
+  <lay-date-picker type="datetime" v-model="endTime"></lay-date-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+   const endTime = ref("2022-03-04 17:35:00");
+
+    return {
+      endTime
+    }
+  }
+}
+</script>
+
+:::
+
 ::: comment
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -29,6 +29,7 @@
           <li>[修复] carousel-item 轮播项使用 v-for 无法渲染。</li>
           <li>[修复] checkbox 复选框组件, 选中颜色丢失。</li>
           <li>[修复] slider 滑块组件, 默认 step 值异常。</li>
+          <li>[修复] form 表单错误提示没有间距的问题。</li>
           <li>[升级] layer-vue 1.3.10 版本。</li>
         </ul> 
       </li>

example/index.html

@@ -10,7 +10,7 @@
     <meta name="author" content="Jmys <jmys1992@gmail.com>" />
     <meta
       name="keywords"
-      content="element-pro,pro-components,admin,element-plus,components,vue,ui"
+      content="layui,layui-vue,vue,layer,layer-vue,ui,components"
     />
     <link rel="icon" href="/favicon.ico" />
     <title>Layui - Vue 开源前端 UI 框架</title>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.4.0-alpha.3",
+  "version": "0.4.0",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

src/component/collapseItem/index.vue

@@ -6,6 +6,7 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
+import LayTransition from "../transition/index.vue";
 import { withDefaults, inject, computed, ref } from "vue";
 
 export interface LayCollapseItemProps {
@@ -57,11 +58,13 @@ const showHandle = function () {
       <i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
     </h2>
     <lay-transition>
-      <div class="layui-colla-content" v-if="isShow">
+      <div v-if="isShow">
+        <div class="layui-colla-content">
           <p>
             <slot :props="props"></slot>
           </p>
         </div>
+      </div>
     </lay-transition>
   </div>
 </template>

src/component/datePicker/index.vue

@@ -3,6 +3,7 @@
     <lay-dropdown>
       <lay-input :value="dateValue || modelValue" readonly />
       <template #content>
+
         <!-- 日期选择 -->
         <div class="layui-laydate" v-show="showPanel === 'date'">
           <div class="layui-laydate-main laydate-main-list-0">
@@ -68,12 +69,14 @@
           </div>
           <div class="layui-laydate-footer">
             <span
+              v-if="type === 'datetime'"
               @click="showPanel = 'time'"
               class="layui-laydate-preview"
               style="color: rgb(102, 102, 102)"
             >
               {{ `${hms.hh}:${hms.mm}:${hms.ss}` }}
             </span>
+            
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear">清空</span
               ><span lay-type="now" class="laydate-btns-now">现在</span
@@ -82,6 +85,7 @@
           </div>
         </div>
 
+        <!-- 年份选择器 -->
         <div class="layui-laydate" v-show="showPanel === 'year'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
             <div class="layui-laydate-header">
@@ -123,6 +127,7 @@
           </div>
         </div>
 
+        <!-- 月份选择器 -->
         <div class="layui-laydate" v-show="showPanel === 'month'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
             <div class="layui-laydate-header">
@@ -174,6 +179,7 @@
           </div>
         </div>
 
+        <!-- 事件选择器 -->
         <div class="layui-laydate" v-if="showPanel == 'time'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
             <div class="layui-laydate-header">
@@ -230,8 +236,14 @@ import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
 import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 
-const props = defineProps({
+export interface LayDatePickerProps {
-  modelValue: { type: String, required: false },
+  modelValue?: string;
+  type: 'date' | 'datetime' | 'year' | 'time' | 'month';
+}
+
+const props = withDefaults(defineProps<LayDatePickerProps>(), {
+  modelValue: '',
+  type: 'date'
 });
 
 const $emits = defineEmits(["update:modelValue"]);

src/component/transition/index.vue

@@ -59,11 +59,7 @@ const beforeLeave = (el: any) => {
   el.dataset.oldPaddingBottom = el.style.paddingBottom;
   el.dataset.oldOverflow = el.style.overflow;
   var computedStyle = getComputedStyle(el, null);
-  el.style.height =
+  el.style.height = el.scrollHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom) + "px";
-    el.scrollHeight -
-    parseInt(computedStyle.paddingTop) -
-    parseInt(computedStyle.paddingBottom) +
-    "px";
   el.style.overflow = "hidden";
 };