✨(component): update

2022-07-14 09:12:36 +08:00 · 2022-07-14 09:12:36 +08:00 · 07b11011b1
commit 07b11011b1
parent 2911c00d10
8 changed files with 309 additions and 128 deletions
--- a/package/component/src/component/checkbox/index.vue
+++ b/package/component/src/component/checkbox/index.vue
@ -23,7 +23,7 @@ const props = withDefaults(defineProps<LayCheckboxProps>(), {
  isIndeterminate: false,
  modelValue: false,
  disabled: false,
-  label:''
+  label: "",
 });

 const checkboxGroup: any = inject("checkboxGroup", {});
@ -100,11 +100,14 @@ const ifDisabled = computed(() => {
  if (props.disabled) {
    return true;
  }
-  if (checkboxGroup.hasOwnProperty('disabled')&&checkboxGroup.disabled.value) {
+  if (
+    checkboxGroup.hasOwnProperty("disabled") &&
+    checkboxGroup.disabled.value
+  ) {
    return true;
  }
  return false;
-})
+});
 </script>

 <template>
@ -118,7 +121,9 @@ const ifDisabled = computed(() => {
      }"
      :lay-skin="skin"
    >
-      <span><slot>{{label}}</slot></span>
+      <span
+        ><slot>{{ label }}</slot></span
+      >
      <lay-icon
        :type="
          props.isIndeterminate && isChecked
--- a/package/component/src/component/checkboxGroup/index.vue
+++ b/package/component/src/component/checkboxGroup/index.vue
@ -10,19 +10,23 @@ import { Recordable } from "../../types";

 export interface LayCheckboxGroupProps {
  modelValue?: Recordable[];
-  disabled?:boolean
+  disabled?: boolean;
 }

 const props = withDefaults(defineProps<LayCheckboxGroupProps>(), {
  modelValue: () => [],
-  disabled:false
+  disabled: false,
 });

 const emit = defineEmits(["update:modelValue", "change"]);

 const modelValue = ref(props.modelValue);
-const disabled=ref(props.disabled)
-provide("checkboxGroup", { name: "LayCheckboxGroup", modelValue: modelValue,disabled:disabled });
+const disabled = ref(props.disabled);
+provide("checkboxGroup", {
+  name: "LayCheckboxGroup",
+  modelValue: modelValue,
+  disabled: disabled,
+});

 watch(
  () => modelValue,
@ -42,11 +46,13 @@ watch(
  () => props.disabled,
  (val) => (disabled.value = val)
 );
-
 </script>

 <template>
-  <div class="layui-checkbox-group" :class="{'layui-checkbox-group-disabled':disabled}">
+  <div
+    class="layui-checkbox-group"
+    :class="{ 'layui-checkbox-group-disabled': disabled }"
+  >
    <slot></slot>
  </div>
 </template>
--- a/package/component/src/component/datePicker/index.vue
+++ b/package/component/src/component/datePicker/index.vue
@ -1,22 +1,48 @@
 <template>
  <div>
    <lay-dropdown ref="dropdownRef" :disabled="props.disabled">
-      <lay-input readonly :name="name" :model-value="dateValue || modelValue" :placeholder="placeholder"
-        prefix-icon="layui-icon-date">
+      <lay-input
+        readonly
+        :name="name"
+        :model-value="dateValue || modelValue"
+        :placeholder="placeholder"
+        prefix-icon="layui-icon-date"
+      >
      </lay-input>
      <template #content>
        <!-- 日期选择 -->
-        <div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
+        <div
+          class="layui-laydate"
+          v-show="showPane === 'date' || showPane === 'datetime'"
+        >
          <div class="layui-laydate-main laydate-main-list-0">
            <div class="layui-laydate-header">
-              <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
-              <i class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i>
+              <i
+                class="layui-icon laydate-icon laydate-prev-y"
+                @click="changeYearOrMonth('year', -1)"
+                ></i
+              >
+              <i
+                class="layui-icon laydate-icon laydate-prev-m"
+                @click="changeYearOrMonth('month', -1)"
+                ></i
+              >
              <div class="laydate-set-ym">
                <span @click="showYearPanel">{{ currentYear }} 年</span>
-                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
+                <span @click="showPane = 'month'"
+                  >{{ currentMonth + 1 }} 月</span
+                >
              </div>
-              <i class="layui-icon laydate-icon laydate-next-m" @click="changeYearOrMonth('month', 1)"></i>
-              <i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
+              <i
+                class="layui-icon laydate-icon laydate-next-m"
+                @click="changeYearOrMonth('month', 1)"
+                ></i
+              >
+              <i
+                class="layui-icon laydate-icon laydate-next-y"
+                @click="changeYearOrMonth('year', 1)"
+                ></i
+              >
            </div>
            <div class="layui-laydate-content">
              <table>
@ -26,17 +52,26 @@
                  </tr>
                </thead>
                <tbody>
-                  <template v-for="(o, i) of dateList.length % 7 == 0
+                  <template
+                    v-for="(o, i) of dateList.length % 7 == 0
                      ? dateList.length / 7
-                  : Math.floor(dateList.length / 7) + 1" :key="i">
+                      : Math.floor(dateList.length / 7) + 1"
+                    :key="i"
+                  >
                    <tr>
-                      <td v-for="(item, index) of dateList.slice(
+                      <td
+                        v-for="(item, index) of dateList.slice(
                          i * 7,
                          i * 7 + 7
-                      )" :key="index" :data-unix="item.value" :class="{
+                        )"
+                        :key="index"
+                        :data-unix="item.value"
+                        :class="{
                          'laydate-day-prev': item.type !== 'current',
                          'layui-this': item.value === currentDay,
-}" @click="handleDayClick(item)">
+                        }"
+                        @click="handleDayClick(item)"
+                      >
                        {{ item.day }}
                      </td>
                    </tr>
@ -46,37 +81,69 @@
            </div>
          </div>
          <div class="layui-laydate-footer">
-            <span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time">选择时间</span>
+            <span
+              v-if="type === 'datetime'"
+              @click="showPane = 'time'"
+              class="laydate-btns-time"
+              >选择时间</span
+            >
            <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
+                >清空</span
+              >
+              <span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
+              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+                >确定</span
+              >
            </div>
          </div>
        </div>
        <!-- 年份选择器 -->
-        <div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
+        <div
+          class="layui-laydate"
+          v-show="showPane === 'year' || showPane === 'yearmonth'"
+        >
          <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
            <div class="layui-laydate-header">
              <div class="laydate-set-ym">
                <span class="laydate-time-text">选择年份</span>
              </div>
            </div>
-            <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
+            <div
+              class="layui-laydate-content"
+              style="height: 220px; overflow-y: auto"
+            >
              <ul class="layui-laydate-list laydate-year-list">
-                <li v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]"
-                  @click="handleYearClick(item)">
+                <li
+                  v-for="item of yearList"
+                  :key="item"
+                  :class="[{ 'layui-this': currentYear === item }]"
+                  @click="handleYearClick(item)"
+                >
                  {{ item }}
                </li>
              </ul>
            </div>
          </div>
          <div class="layui-laydate-footer">
-            <span class="layui-laydate-preview" title="当前选中的结果" style="color: rgb(102, 102, 102)">{{ dateValue }}</span>
+            <span
+              class="layui-laydate-preview"
+              title="当前选中的结果"
+              style="color: rgb(102, 102, 102)"
+              >{{ dateValue }}</span
+            >
            <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
+                >清空</span
+              >
+              <span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
+              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+                >确定</span
+              >
            </div>
          </div>
        </div>
@ -84,30 +151,59 @@
        <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 class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
+              <i
+                class="layui-icon laydate-icon laydate-prev-y"
+                @click="changeYearOrMonth('year', -1)"
+                ></i
+              >
              <div class="laydate-set-ym">
-                <span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }}
-                  年</span>
-                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
+                <span
+                  @click="showYearPanel"
+                  v-if="showPane === 'date' || showPane === 'datetime'"
+                  >{{ currentYear }} 年</span
+                >
+                <span @click="showPane = 'month'"
+                  >{{ currentMonth + 1 }} 月</span
+                >
              </div>
-              <i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
+              <i
+                class="layui-icon laydate-icon laydate-next-y"
+                @click="changeYearOrMonth('year', 1)"
+                ></i
+              >
            </div>
            <div class="layui-laydate-content" style="height: 220px">
              <ul class="layui-laydate-list laydate-month-list">
-                <li v-for="item of MONTH_NAME" :key="item" :class="[
+                <li
+                  v-for="item of MONTH_NAME"
+                  :key="item"
+                  :class="[
                    { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
-                ]" @click="handleMonthClick(item)">
+                  ]"
+                  @click="handleMonthClick(item)"
+                >
                  {{ item.slice(0, 3) }}
                </li>
              </ul>
            </div>
          </div>
          <div class="layui-laydate-footer">
-            <span class="layui-laydate-preview" title="当前选中的结果" style="color: rgb(102, 102, 102)">{{ dateValue }}</span>
+            <span
+              class="layui-laydate-preview"
+              title="当前选中的结果"
+              style="color: rgb(102, 102, 102)"
+              >{{ dateValue }}</span
+            >
            <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
+                >清空</span
+              >
+              <span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
+              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+                >确定</span
+              >
            </div>
          </div>
        </div>
@ -123,13 +219,19 @@
              <ul class="layui-laydate-list laydate-time-list">
                <li class="num-list" v-for="item in els" :key="item.type">
                  <ol class="scroll" @click="choseTime">
-                    <li v-for="(it, index) in item.count" :id="item.type + index.toString()"
-                      :data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
+                    <li
+                      v-for="(it, index) in item.count"
+                      :id="item.type + index.toString()"
+                      :data-value="index.toString().padStart(2, '0')"
+                      :data-type="item.type"
+                      :key="it"
+                      :class="[
                        'num',
                        index.toString().padStart(2, '0') == hms[item.type]
                          ? 'layui-this'
                          : '',
-                      ]">
+                      ]"
+                    >
                      {{ index.toString().padStart(2, "0") }}
                    </li>
                  </ol>
@ -138,11 +240,22 @@
            </div>
          </div>
          <div class="layui-laydate-footer">
-            <span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</span>
+            <span
+              @click="showPane = 'date'"
+              v-if="type != 'time'"
+              class="laydate-btns-time"
+              >返回日期</span
+            >
            <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
+                >清空</span
+              >
+              <span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
+              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+                >确定</span
+              >
            </div>
          </div>
        </div>
@ -232,7 +345,9 @@ watch(
 );

 onMounted(() => {
-  currentDay.value = props.modelValue ? new Date(props.modelValue).getTime() : -1;
+  currentDay.value = props.modelValue
+    ? new Date(props.modelValue).getTime()
+    : -1;
  if (currentDay.value == -1) {
    setTimeout(() => {
      now();
@ -338,12 +453,15 @@ watch(
  },
  { immediate: true }
 );
-const unWatch = ref(true)
-watch(() => props.modelValue, () => {
+const unWatch = ref(true);
+watch(
+  () => props.modelValue,
+  () => {
    if (!unWatch.value) {
      currentDay.value = new Date(props.modelValue).getTime();
    }
-})
+  }
+);
 // 确认事件
 const ok = () => {
  if (dropdownRef.value)
@ -353,7 +471,7 @@ const ok = () => {

 // 现在时间
 const now = () => {
-  unWatch.value = true
+  unWatch.value = true;
  currentDay.value = dayjs().valueOf();
  hms.value.hh = dayjs().hour();
  hms.value.mm = dayjs().minute();
@ -362,7 +480,7 @@ const now = () => {

 // 清空日期
 const clear = () => {
-  unWatch.value = true
+  unWatch.value = true;
  currentDay.value = -1;
 };

@ -390,7 +508,7 @@ const showYearPanel = () => {

 // 点击年份
 const handleYearClick = (item: any) => {
-  unWatch.value = true
+  unWatch.value = true;
  currentYear.value = item;
  if (props.type === "year") {
    currentDay.value = dayjs().year(item).valueOf();
@ -404,7 +522,7 @@ const handleYearClick = (item: any) => {

 // 点击月份
 const handleMonthClick = (item: any) => {
-  unWatch.value = true
+  unWatch.value = true;
  currentMonth.value = MONTH_NAME.indexOf(item);
  if (props.type === "month") {
    currentDay.value = dayjs(currentDay.value)
@ -421,7 +539,7 @@ const handleMonthClick = (item: any) => {

 // 点击日期
 const handleDayClick = (item: any) => {
-  unWatch.value = true
+  unWatch.value = true;
  currentDay.value = item.value;
  if (item.type !== "current") {
    currentMonth.value =
@ -431,7 +549,7 @@ const handleDayClick = (item: any) => {

 // 点击时间 - hms
 const choseTime = (e: any) => {
-  unWatch.value = true
+  unWatch.value = true;
  if (e.target.nodeName == "LI") {
    let { value, type } = e.target.dataset;
    hms.value[type as keyof typeof hms.value] = value;
--- a/package/component/src/component/formItem/index.vue
+++ b/package/component/src/component/formItem/index.vue
@ -42,7 +42,7 @@ export interface LayFormItemProps {
 const props = withDefaults(defineProps<LayFormItemProps>(), {
  mode: "block",
  labelPosition: "right",
-  labelWidth: 95
+  labelWidth: 95,
 });

 const layForm = inject("LayForm", {} as LayFormContext);
@ -166,22 +166,32 @@ onMounted(() => {
 });

 const getMarginLeft = computed(() => {
-  if (props.mode === 'block') {
-    let labelWidth = typeof props.labelWidth === "string" ? parseFloat(props.labelWidth) : props.labelWidth;
+  if (props.mode === "block") {
+    let labelWidth =
+      typeof props.labelWidth === "string"
+        ? parseFloat(props.labelWidth)
+        : props.labelWidth;
    labelWidth += 15;
    return {
-      marginLeft:labelWidth+'px'
+      marginLeft: labelWidth + "px",
+    };
  }
-  }
-})
+});
 </script>

 <template>
-  <div class="layui-form-item" :class="[`layui-form-item-${labelPosition}`]" ref="formItemRef">
+  <div
+    class="layui-form-item"
+    :class="[`layui-form-item-${labelPosition}`]"
+    ref="formItemRef"
+  >
    <label class="layui-form-label" :style="{ width: labelWidth + 'px' }">
-      <span v-if="props.prop && isRequired" :class="
+      <span
+        v-if="props.prop && isRequired"
+        :class="
          ['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
-      ">
+        "
+      >
        <slot name="required" :props="{ ...props, model: layForm.model }">{{
          layForm.requiredIcons ? "" : "*"
        }}</slot>
@ -194,10 +204,14 @@ const getMarginLeft = computed(() => {
      <div ref="slotParent">
        <slot :props="{ ...props, model: layForm.model }"></slot>
      </div>
-      <span v-if="errorStatus" :class="[
+      <span
+        v-if="errorStatus"
+        :class="[
          'layui-error-message',
          { 'layui-error-message-anim': errorStatus },
-      ]">{{ errorMsg }}</span>
+        ]"
+        >{{ errorMsg }}</span
+      >
    </div>
  </div>
 </template>
--- a/package/component/src/component/page/index.vue
+++ b/package/component/src/component/page/index.vue
@ -77,7 +77,7 @@ const totalPage = computed(() => {
 const currentPage: Ref<number> = ref(props.modelValue);
 const currentPageShow: Ref<number> = ref(currentPage.value);

-const emit = defineEmits(["jump", "limit", 'update:modelValue']);
+const emit = defineEmits(["jump", "limit", "update:modelValue"]);

 const prev = function () {
  if (currentPage.value === 1) {
@ -114,39 +114,62 @@ watch(currentPage, function () {
  }
  currentPageShow.value = currentPage.value;
  emit("jump", { current: currentPage.value });
-  emit('update:modelValue', currentPage.value)
+  emit("update:modelValue", currentPage.value);
 });
-watch(() => props.modelValue, function () {
-  currentPage.value = props.modelValue
-  currentPageShow.value = currentPage.value
-})
+watch(
+  () => props.modelValue,
+  function () {
+    currentPage.value = props.modelValue;
+    currentPageShow.value = currentPage.value;
+  }
+);
 </script>

 <template>
  <div class="layui-laypage layui-laypage-default">
-    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条 {{ maxPage }} 页</span>
-    <a href="javascript:;" class="layui-laypage-prev" :class="[
+    <span v-if="showCount" class="layui-laypage-count"
+      >共 {{ total }} 条 {{ maxPage }} 页</span
+    >
+    <a
+      href="javascript:;"
+      class="layui-laypage-prev"
+      :class="[
        currentPage === 1 ? 'layui-disabled' : '',
        theme && currentPage !== 1 ? 'layui-laypage-a-' + theme : '',
-    ]" @click="prev()">
+      ]"
+      @click="prev()"
+    >
      <slot v-if="slots.prev" name="prev"></slot>
      <template v-else>{{ t("page.prev") }}</template>
    </a>
    <template v-if="showPage">
      <template v-for="index of totalPage" :key="index">
        <span v-if="index === currentPage" class="layui-laypage-curr">
-          <em class="layui-laypage-em" :class="[theme ? 'layui-bg-' + theme : '']"></em>
+          <em
+            class="layui-laypage-em"
+            :class="[theme ? 'layui-bg-' + theme : '']"
+          ></em>
          <em>{{ index }}</em>
        </span>
-        <a v-else href="javascript:;" @click="jump(index)" :class="[theme ? 'layui-laypage-a-' + theme : '']">{{ index
-        }}</a>
+        <a
+          v-else
+          href="javascript:;"
+          @click="jump(index)"
+          :class="[theme ? 'layui-laypage-a-' + theme : '']"
+          >{{ index }}</a
+        >
      </template>
    </template>

-    <a href="javascript:;" class="layui-laypage-next" :class="[
+    <a
+      href="javascript:;"
+      class="layui-laypage-next"
+      :class="[
        currentPage === maxPage ? 'layui-disabled' : '',
        theme && currentPage !== maxPage ? 'layui-laypage-a-' + theme : '',
-    ]" @click="next()">
+      ]"
+      @click="next()"
+    >
      <slot v-if="slots.next" name="next"></slot>
      <template v-else>{{ t("page.next") }}</template>
    </a>
@ -162,9 +185,18 @@ watch(() => props.modelValue, function () {
    </a>
    <span v-if="props.showSkip" class="layui-laypage-skip">
      到第
-      <input v-model="currentPageShow" @keypress.enter="jumpPage()" type="number"
-        class="layui-input layui-input-number" />页
-      <button type="button" class="layui-laypage-btn" @click="jumpPage()" :disabled="currentPageShow > maxPage">
+      <input
+        v-model="currentPageShow"
+        @keypress.enter="jumpPage()"
+        type="number"
+        class="layui-input layui-input-number"
+      />页
+      <button
+        type="button"
+        class="layui-laypage-btn"
+        @click="jumpPage()"
+        :disabled="currentPageShow > maxPage"
+      >
        确定
      </button>
    </span>
--- a/package/component/src/component/radio/index.vue
+++ b/package/component/src/component/radio/index.vue
@ -7,7 +7,7 @@ export default {

 <script setup lang="ts">
 import "./index.less";
-import { disable } from '@umijs/ssr-darkreader';
+import { disable } from "@umijs/ssr-darkreader";

 export interface LayRadioProps {
  modelValue?: string | boolean;
@ -64,21 +64,27 @@ const ifDisabled = computed(() => {
  if (props.disabled) {
    return true;
  }
-  if (radioGroup.hasOwnProperty('disabled')&&radioGroup.disabled.value) {
+  if (radioGroup.hasOwnProperty("disabled") && radioGroup.disabled.value) {
    return true;
  }
  return false;
-})
+});
 </script>

 <template>
  <span class="layui-radio">
    <input type="radio" :value="value" :name="naiveName" />
-    <div class="layui-unselect layui-form-radio" :class="{
+    <div
+      class="layui-unselect layui-form-radio"
+      :class="{
        'layui-form-radioed': isChecked,
        'layui-radio-disabled layui-disabled': ifDisabled,
-    }" @click.stop="handleClick">
-      <i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring">&#xe643;</i>
+      }"
+      @click.stop="handleClick"
+    >
+      <i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"
+        >&#xe643;</i
+      >
      <i v-else class="layui-icon layui-form-radioed">&#xe63f;</i>
      <span>
        <slot>{{ label }}</slot>
--- a/package/component/src/component/radioGroup/index.vue
+++ b/package/component/src/component/radioGroup/index.vue
@ -14,18 +14,18 @@ export interface LayRadioGroupProps {
 }

 const props = withDefaults(defineProps<LayRadioGroupProps>(), {
-  disabled:false
+  disabled: false,
 });

 const emit = defineEmits(["update:modelValue", "change"]);

 const modelValue = ref(props.modelValue);
-const disabled=ref(props.disabled)
+const disabled = ref(props.disabled);
 provide("radioGroup", {
  name: "LayRadioGroup",
  modelValue: modelValue,
  naiveName: props.name,
-  disabled:disabled
+  disabled: disabled,
 });

 watch(