Merge branch 'develop' of https://gitee.com/lockingreal/layui-vue into develop

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

@@ -261,6 +261,7 @@ export default {
       <lay-button size="sm">删除</lay-button>
     </template>
     <template v-slot:username="{ data }"> {{data.username}} </template>
+    <template v-slot:username-title>😊</template>
     <template v-slot:password="{ data }"> {{data.password}} </template>
     <template v-slot:operator="{ data }">
       <lay-button >修改</lay-button>
@@ -283,6 +284,7 @@ export default {
       {
         title:"账户",
         width:"200px",
+        titleSlot: "username-title",
         customSlot:"username",
         key:"username"
       },{
@@ -384,8 +386,8 @@ export default {
 | key        | 数据字段   | --   |
 | customSlot | 自定义插槽 | --   |
 | width      | 宽度       | --   |
-| sort      | 排序       | --   |
-
+| sort       | 排序       | --   |
+| titleSlot  | 标题插槽   | --   |
 :::
 
 ::: comment

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

@@ -16,9 +16,16 @@
       <li> 
         <h3>0.4.3 <span class="layui-badge-rim">2022-03-27</span></h3> 
         <ul>
+          <li>[新增] upload 文件上传组件。</li>
+          <li>[新增] date-picker 组件 name 属性, 等同原生 name 属性。</li>
+          <li>[新增] date-picker 组件 type 属性 date 值, 支持日期选择。 </li>
+          <li>[新增] date-picker 组件 type 属性 datetime 值, 支持日期时间选择。</li>
+          <li>[新增] date-picker 组件 now 操作, 将 年 月 日 重置为当前日期。</li>
+          <li>[新增] table 组件 data 属性 titleSlot 选项, 自定义标题插槽。</li>
           <li>[修复] menu 组件 level 属性的语义与实际功能相悖。</li>
           <li>[修复] input 组件 height 高度固定 38 px。</li>
           <li>[修复] step 组件 line 样式。</li>
+          <li>[依赖] monent 日期 js 框架。</li>
         </ul> 
       </li>
     </ul>

example/src/layouts/Layout.vue

@@ -212,7 +212,7 @@
             </a>
           </li>
           <li class="layui-nav-item">
-            <a href="javascript:void(0)"> 0.4.2 </a>
+            <a href="javascript:void(0)"> 0.4.3 </a>
           </li>
         </ul>
       </lay-header>

example/src/view/index.vue

@@ -20,7 +20,7 @@
           >
         </div>
         <div class="site-version">
-          <span>{{ t('home.version') }}：v<cite class="site-showv">0.4.2</cite></span>
+          <span>{{ t('home.version') }}：v<cite class="site-showv">0.4.3</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -41,10 +41,11 @@
     "@vueuse/core": "^7.6.2",
     "async-validator": "^4.0.7",
     "evtd": "^0.2.3",
+    "moment": "^2.29.1",
+    "uuid": "^8.3.2",
     "vue": "^3.2.31",
     "vue-i18n": "^9.2.0-beta.33",
     "vue-router": "^4.0.12",
-    "uuid": "^8.3.2",
     "xlsx": "^0.18.4"
   },
   "devDependencies": {

src/component/datePicker/index.vue

@@ -1,10 +1,14 @@
 <template>
   <div>
     <lay-dropdown>
-      <lay-input :value="dateValue || modelValue" readonly />
+      <lay-input :name="name" :value="dateValue || modelValue" readonly>
+        <template #prefix>
+          <lay-icon type="layui-icon-date"></lay-icon>
+        </template>
+      </lay-input>
       <template #content>
         <!-- 日期选择 -->
-        <div class="layui-laydate" v-show="showPanel === 'date'">
+        <div class="layui-laydate" v-show="showPane === 'date'">
           <div class="layui-laydate-main laydate-main-list-0">
             <div class="layui-laydate-header">
               <i
@@ -18,7 +22,7 @@
               >
               <div class="laydate-set-ym">
                 <span @click="showYearPanel">{{ currentYear }} 年</span
-                ><span @click="showPanel = 'month'"
+                ><span @click="showPane = 'month'"
                   >{{ currentMonth + 1 }} 月</span
                 >
               </div>
@@ -56,7 +60,7 @@
                         :data-unix="item.value"
                         :class="{
                           'laydate-day-prev': item.type !== 'current',
-                          'layui-this': item.value === selectedDay,
+                          'layui-this': item.value === currentDay,
                         }"
                         @click="handleDayClick(item)"
                       >
@@ -71,23 +75,21 @@
           <div class="layui-laydate-footer">
             <span
               v-if="type === 'datetime'"
-              @click="showPanel = 'time'"
-              class="layui-laydate-preview"
-              style="color: rgb(102, 102, 102)"
+              @click="showPane = 'time'"
+              class="laydate-btns-time"
+              >选择时间</span
             >
-              {{ `${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
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
               ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
             </div>
           </div>
         </div>
 
         <!-- 年份选择器 -->
-        <div class="layui-laydate" v-show="showPanel === 'year'">
+        <div class="layui-laydate" v-show="showPane === 'year'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
             <div class="layui-laydate-header">
               <div class="laydate-set-ym">
@@ -105,7 +107,7 @@
                   :class="[{ 'layui-this': currentYear === item }]"
                   @click="
                     currentYear = item;
-                    showPanel = 'date';
+                    showPane = 'date';
                   "
                 >
                   {{ item }}
@@ -122,14 +124,15 @@
             >
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear">清空</span
-              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
               ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
             </div>
           </div>
         </div>
 
         <!-- 月份选择器 -->
-        <div class="layui-laydate" v-show="showPanel === 'month'">
+        <div class="layui-laydate" v-show="showPane === 'month'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
             <div class="layui-laydate-header">
               <i
@@ -139,7 +142,7 @@
               >
               <div class="laydate-set-ym">
                 <span @click="showYearPanel">{{ currentYear }} 年</span
-                ><span @click="showPanel = 'month'"
+                ><span @click="showPane = 'month'"
                   >{{ currentMonth + 1 }} 月</span
                 >
               </div>
@@ -159,7 +162,7 @@
                   ]"
                   @click="
                     currentMonth = MONTH_NAME.indexOf(item);
-                    showPanel = 'date';
+                    showPane = 'date';
                   "
                 >
                   {{ item.slice(0, 3) }}
@@ -176,14 +179,15 @@
             >
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear">清空</span
-              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
               ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
             </div>
           </div>
         </div>
 
         <!-- 时间选择器 -->
-        <div class="layui-laydate" v-if="showPanel == 'time'">
+        <div class="layui-laydate" v-if="showPane == 'time'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
             <div class="layui-laydate-header">
               <div class="laydate-set-ym">
@@ -215,12 +219,13 @@
             </div>
           </div>
           <div class="layui-laydate-footer">
-            <span @click="showPanel = 'date'" class="layui-laydate-preview"
-              >返回</span
+            <span @click="showPane = 'date'" class="laydate-btns-time"
+              >返回日期</span
             >
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear">清空</span
-              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
               ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
             </div>
           </div>
@@ -231,15 +236,10 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  computed,
-  nextTick,
-  ref,
-  watch,
-  defineProps,
-  defineEmits,
-  onMounted,
-} from "vue";
+import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
+
+import moment from "moment";
+import LayIcon from "../icon/index";
 import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import { getDayLength, getYears, getDate, getMonth, getYear } from "./day";
@@ -262,7 +262,7 @@ const MONTH_NAME = [
   "12月",
 ];
 
-const hms = ref({ hh: "00", mm: "00", ss: "00" });
+const hms = ref({ hh: 0, mm: 0, ss: 0 });
 const els = [
   { count: 24, type: "hh" },
   { count: 60, type: "mm" },
@@ -272,6 +272,7 @@ const els = [
 export interface LayDatePickerProps {
   modelValue?: string;
   type: "date" | "datetime" | "year" | "time" | "month";
+  name: string;
 }
 
 const props = withDefaults(defineProps<LayDatePickerProps>(), {
@@ -279,25 +280,39 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   type: "date",
 });
 
-const currentDate = getDate();
 const currentYear = ref(getYear());
 const currentMonth = ref(getMonth());
+const currentDay = ref<number>();
 
 const yearList = ref<number[]>(getYears());
 const dateList = ref<any[]>([]);
-const showPanel = ref("date");
-const selectedDay = ref<number>();
+const showPane = ref("date");
 
-// 最终结果
+// 计算结果日期
 const dateValue = computed<string>(() => {
-  if (!selectedDay.value) return "";
-  const d = new Date(selectedDay.value);
-  const y = d.getFullYear();
-  const m = (d.getMonth() + 1).toString().padStart(2, "0");
-  const day = d.getDate().toString().padStart(2, "0");
-  const currentValue = `${y}-${m}-${day} ${hms.value.hh}:${hms.value.mm}:${hms.value.ss}`;
-  $emits("update:modelValue", currentValue);
-  return currentValue;
+  let momentVal;
+  let momentObj = moment(currentDay.value)
+    .hour(hms.value.hh)
+    .minute(hms.value.mm)
+    .second(hms.value.ss);
+  switch (props.type) {
+    case "date":
+      momentVal = momentObj.format("YYYY-MM-DD");
+      break;
+    case "datetime":
+      momentVal = momentObj.format("YYYY-MM-DD hh:mm:ss");
+      break;
+    case "year":
+      momentVal = momentObj.format("YYYY");
+      break;
+    case "month":
+      momentVal = momentObj.format("MM");
+      break;
+    default:
+      momentVal = momentObj.format();
+  }
+  $emits("update:modelValue", momentVal);
+  return momentVal;
 });
 
 // 设置日期列表
@@ -353,7 +368,7 @@ watch(
 
 // 点击日期
 const handleDayClick = (item: any) => {
-  selectedDay.value = item.value;
+  currentDay.value = item.value;
   if (item.type !== "current") {
     currentMonth.value =
       item.type === "prev" ? currentMonth.value - 1 : currentMonth.value + 1;
@@ -363,6 +378,14 @@ const handleDayClick = (item: any) => {
 // 确认事件
 const ok = () => {};
 
+// 现在时间
+const now = () => {
+  currentDay.value = moment().valueOf();
+};
+
+// 清空日期
+const clear = () => {};
+
 // 切换年月
 const changeYearOrMonth = (type: "year" | "month", num: number) => {
   if (type === "year") {
@@ -382,7 +405,7 @@ const changeYearOrMonth = (type: "year" | "month", num: number) => {
 
 // 显示年列表面板
 const showYearPanel = () => {
-  showPanel.value = "year";
+  showPane.value = "year";
   nextTick(() => {
     (
       document.querySelector(".year-panel-item.active") as HTMLElement

src/component/table/index.vue

@@ -93,12 +93,16 @@ const change = function (page: any) {
   emit("change", page);
 };
 
-const rowClick = function (data: any) {
-  emit("row", data);
+const rowClick = function (data: any,evt:MouseEvent) {
+  emit("row", data,evt);
 };
 
-const rowDoubleClick = function (data: any) {
-  emit("row-double", data);
+const rowDoubleClick = function (data: any,evt:MouseEvent) {
+  emit("row-double", data,evt);
+};
+
+const contextmenu = function (data: any,evt:MouseEvent) {
+  emit("contextmenu", data,evt);
 };
 
 // 打印 table 数据
@@ -246,12 +250,19 @@ onMounted(() => {
                 </th>
                 <template v-for="column in columns" :key="column">
                   <th v-if="tableColumnKeys.includes(column.key)">
-                    <!-- TODO Table header slot  -->
                     <div
                       class="layui-table-cell"
                       :style="{ width: column.width }"
                     >
-                      <span>{{ column.title }}</span>
+                      <span v-if="column.titleSlot">
+                        <template v-if="column.titleSlot">
+                          <slot :name="column.titleSlot"></slot>
+                        </template>
+                        <template>
+                          {{ column.title }}
+                        </template>
+                      </span>
+                      <span v-else>{{ column.title }}</span>
                       <span
                         v-if="column.sort"
                         class="layui-table-sort layui-inline"
@@ -281,8 +292,9 @@ onMounted(() => {
             <tbody>
               <template v-for="data in tableDataSource" :key="data">
                 <tr
-                  @click.stop="rowClick(data)"
-                  @dblclick.stop="rowDoubleClick(data)"
+                  @click.stop="rowClick(data,$event)"
+                  @dblclick.stop="rowDoubleClick(data,$event)"
+                  @contextmenu.stop="contextmenu(data,$event)"
                 >
                   <!-- 复选框 -->
                   <td v-if="checkbox" class="layui-table-col-special">

src/component/upload/index.vue

@@ -7,7 +7,7 @@ export default {
 import "./index.less";
 import { Recordable } from "../../types";
 import { layer } from "@layui/layer-vue";
-import { ref, useSlots, withDefaults, onMounted, defineExpose } from "vue";
+import { ref, useSlots, withDefaults } from "vue";
 import { templateRef } from "@vueuse/core";
 
 // 组件的参数字段类型
@@ -32,6 +32,7 @@ const props = withDefaults(defineProps<LayUploadProps>(), {
   number: 0,
   drag: false,
 });
+
 const slot = useSlots();
 const slots = slot.default && slot.default();
 const emit = defineEmits(["choose", "before", "done", "error"]);

src/theme/date.less

@@ -22,7 +22,7 @@
   
   /* 主体结构 */
   .layui-laydate, .layui-laydate *{box-sizing: border-box;}
-  .layui-laydate{position: absolute; z-index: 66666666; margin: 5px 0; border-radius: 2px; font-size: 14px; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
+  .layui-laydate{ z-index: 66666666; border-radius: 2px; font-size: 14px; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
   .layui-laydate-main{width: 272px;}
   .layui-laydate-header *,
   .layui-laydate-content td,
@@ -92,7 +92,7 @@
   .laydate-time-list ol li{width: 130%; padding-left: 4px; height: 30px; line-height: 30px; text-align: left; cursor: pointer;}
   
   /* 提示 */
-  .layui-laydate-hint{position: absolute; top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}
+  .layui-laydate-hint{ top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}
   
   
   /* 双日历 */
@@ -103,7 +103,7 @@
   
   
   /* 默认简约主题 */
-  .layui-laydate, .layui-laydate-hint{border: 1px solid #d2d2d2; box-shadow: 0 2px 4px rgba(0,0,0,.12); background-color: #fff; color: #666;}
+  .layui-laydate, .layui-laydate-hint{background-color: #fff; color: #666;}
   .layui-laydate-header{border-bottom: 1px solid #e2e2e2;}
   .layui-laydate-header i:hover,
   .layui-laydate-header span:hover{color: #5FB878;}