hy-dispatch-ui-v3 0.1.5 → 0.2.0

package/lib/components/appSearch/cpns/appSearchItem.vue.js

@@ -0,0 +1,242 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var index = require('../js/index.js');
+var index$2 = require('../../appDatePicker/index.js');
+var index$3 = require('../../appOrgCascader/index.js');
+var is = require('../../../utils/is.js');
+var form = require('../../../utils/form.js');
+var index$1 = require('../../appInput/index.js');
+
+const _sfc_main = {
+  __name: "appSearchItem",
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    column: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["search"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const columnProp = vue.computed(() => {
+      let field = is.isArray(props.column.field) ? props.column.field[0] : props.column.field;
+      return field;
+    });
+    const bindValue = vue.computed({
+      get() {
+        const prop = is.isArray(props.column.field) ? props.column.field[0] : props.column.field;
+        return form.getValueByProp(props.model, prop);
+      },
+      set(val) {
+        const prop = is.isArray(props.column.field) ? props.column.field[0] : props.column.field;
+        form.setValueByProp(props.model, prop, val);
+      }
+    });
+    const bindValue2 = vue.computed({
+      get() {
+        const prop = is.isArray(props.column.field) ? props.column.field[1] : props.column.field;
+        return form.getValueByProp(props.model, prop);
+      },
+      set(val) {
+        const prop = is.isArray(props.column.field) ? props.column.field[1] : props.column.field;
+        form.setValueByProp(props.model, prop, val);
+      }
+    });
+    function onChangeHandler(value, column) {
+      emits("search");
+    }
+    function onKeydownEnterHander(e) {
+      emits("search");
+    }
+    function onTimeRangeClickHandler(column, options) {
+      const { field } = column;
+      const dateValue = index.timeRangeHandler(column, options);
+      const flag = dateValue.length && dateValue.every((value, index) => {
+        return is.isArray(field) ? value === props.model[field[index]] : props.model[field][index];
+      });
+      if (flag) return;
+      if (is.isArray(field)) {
+        props.model[field[0]] = dateValue[0];
+        props.model[field[1]] = dateValue[1];
+      } else {
+        props.model[field] = dateValue;
+      }
+      emits("search");
+    }
+    return (_ctx, _cache) => {
+      return vue.unref(index.columnShowHandler)(props, __props.column) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElFormItem), {
+        key: 0,
+        prop: columnProp.value
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", { class: "flex bg-background-2 rounded border border-transparent hover:border-theme box-border" }, [
+            vue.createElementVNode(
+              "div",
+              {
+                class: "flex",
+                style: vue.normalizeStyle(vue.unref(index.columnItemStyle)(props, __props.column))
+              },
+              [
+                vue.createCommentVNode(" \u8868\u5355label "),
+                vue.createElementVNode("div", { class: "flex items-center text-auxiliary text-xs px-3 whitespace-nowrap border-r border-border" }, [
+                  __props.column.labelSlot && _ctx.$slots[__props.column.labelSlot] ? vue.renderSlot(_ctx.$slots, __props.column.labelSlot, {
+                    key: 0,
+                    column: __props.column
+                  }) : (vue.openBlock(), vue.createElementBlock(
+                    "span",
+                    { key: 1 },
+                    vue.toDisplayString(__props.column.label),
+                    1
+                    /* TEXT */
+                  ))
+                ]),
+                vue.createCommentVNode(" \u8868\u5355\u7EC4\u4EF6 "),
+                vue.createElementVNode(
+                  "div",
+                  {
+                    class: vue.normalizeClass({ "app-search-custom-wrapper": __props.column.slot }),
+                    style: vue.normalizeStyle(vue.unref(index.columnItemInputStyle)(props, __props.column))
+                  },
+                  [
+                    vue.createCommentVNode(" \u81EA\u5B9A\u4E49\u5177\u540D\u63D2\u69FD "),
+                    __props.column.slot ? vue.renderSlot(_ctx.$slots, __props.column.slot, {
+                      key: 0,
+                      column: __props.column
+                    }) : __props.column.type === "input" ? (vue.openBlock(), vue.createElementBlock(
+                      vue.Fragment,
+                      { key: 1 },
+                      [
+                        vue.createCommentVNode(" \u8F93\u5165\u6846 "),
+                        vue.createVNode(vue.unref(index$1.AppInput), vue.mergeProps({
+                          modelValue: bindValue.value,
+                          "onUpdate:modelValue": ($event) => bindValue.value = $event
+                        }, __props.column.attrs, {
+                          disabled: vue.unref(index.isDisabled)(props, __props.column),
+                          onKeydown: vue.withKeys(($event) => onKeydownEnterHander($event, __props.column), ["enter"]),
+                          onChange: ($event) => onChangeHandler($event, __props.column)
+                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "onKeydown", "onChange"])
+                      ],
+                      2112
+                      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                    )) : __props.column.type === "select" ? (vue.openBlock(), vue.createElementBlock(
+                      vue.Fragment,
+                      { key: 2 },
+                      [
+                        vue.createCommentVNode(" \u9009\u62E9\u6846 "),
+                        vue.createVNode(vue.unref(elementPlus.ElSelect), vue.mergeProps({
+                          modelValue: bindValue.value,
+                          "onUpdate:modelValue": ($event) => bindValue.value = $event
+                        }, __props.column.attrs, {
+                          disabled: vue.unref(index.isDisabled)(props, __props.column),
+                          options: vue.unref(index.optionsHandler)(props, __props.column),
+                          onChange: ($event) => onChangeHandler($event, __props.column)
+                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "options", "onChange"])
+                      ],
+                      2112
+                      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                    )) : __props.column.type === "date-picker" ? (vue.openBlock(), vue.createElementBlock(
+                      vue.Fragment,
+                      { key: 3 },
+                      [
+                        vue.createCommentVNode(" \u65E5\u671F\u9009\u62E9\u6846 "),
+                        [
+                          "datetimerange",
+                          "daterange",
+                          "monthrange",
+                          "yearrange"
+                        ].includes(__props.column.attrs?.type) && vue.unref(is.isArray)(__props.column.field) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.AppDatePicker), vue.mergeProps({
+                          key: 0,
+                          start: bindValue.value,
+                          "onUpdate:start": ($event) => bindValue.value = $event,
+                          end: bindValue2.value,
+                          "onUpdate:end": ($event) => bindValue2.value = $event,
+                          "is-range": true,
+                          style: { "width": "100%" },
+                          timeRangeFill: __props.column.timeRangeFill
+                        }, __props.column.attrs, {
+                          disabled: vue.unref(index.isDisabled)(props, __props.column),
+                          onChange: ($event) => onChangeHandler($event, __props.column)
+                        }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "timeRangeFill", "disabled", "onChange"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$2.AppDatePicker), vue.mergeProps({
+                          key: 1,
+                          modelValue: bindValue.value,
+                          "onUpdate:modelValue": ($event) => bindValue.value = $event,
+                          "is-range": false,
+                          style: { "width": "100%" },
+                          timeRangeFill: __props.column.timeRangeFill
+                        }, __props.column.attrs, {
+                          disabled: vue.unref(index.isDisabled)(props, __props.column),
+                          onChange: ($event) => onChangeHandler($event, __props.column)
+                        }), null, 16, ["modelValue", "onUpdate:modelValue", "timeRangeFill", "disabled", "onChange"]))
+                      ],
+                      64
+                      /* STABLE_FRAGMENT */
+                    )) : __props.column.type === "org-cascader" ? (vue.openBlock(), vue.createElementBlock(
+                      vue.Fragment,
+                      { key: 4 },
+                      [
+                        vue.createCommentVNode(" \u90E8\u95E8\u7EA7\u8054\u9009\u62E9\u6846 "),
+                        vue.createVNode(vue.unref(index$3.AppOrgCascader), vue.mergeProps({
+                          modelValue: bindValue.value,
+                          "onUpdate:modelValue": ($event) => bindValue.value = $event
+                        }, __props.column.attrs, {
+                          disabled: vue.unref(index.isDisabled)(props, __props.column)
+                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"])
+                      ],
+                      2112
+                      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                    )) : vue.createCommentVNode("v-if", true)
+                  ],
+                  6
+                  /* CLASS, STYLE */
+                )
+              ],
+              4
+              /* STYLE */
+            ),
+            __props.column.type === "date-picker" && ["daterange", "datetimerange"].includes(__props.column.attrs?.type) && __props.column.timeRangeOptions?.length ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "flex text-main select-none"
+            }, [
+              (vue.openBlock(true), vue.createElementBlock(
+                vue.Fragment,
+                null,
+                vue.renderList(__props.column.timeRangeOptions, (item, index$1) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: index$1,
+                    class: vue.normalizeClass(["border-l border-border px-[10px] cursor-pointer", {
+                      "bg-[rgba(var(--hy-theme),0.2)] text-theme font-bold": vue.unref(index.isSelectedTimeRange)(__props.column, item, __props.model)
+                    }]),
+                    onClick: ($event) => onTimeRangeClickHandler(__props.column, item)
+                  }, [
+                    vue.createElementVNode(
+                      "span",
+                      null,
+                      vue.toDisplayString(item.label),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])) : vue.createCommentVNode("v-if", true)
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["prop"])) : vue.createCommentVNode("v-if", true);
+    };
+  }
+};
+
+exports.default = _sfc_main;

package/lib/components/appSearch/js/index.js

@@ -37,8 +37,11 @@ function columnShowHandler(props, column) {
   return true;
 }
 function isDisabled(props, column) {
-  var _a;
-  return !!(props.loading || ((_a = column.attrs) == null ? void 0 : _a.disabled));
+  if (props.loading) return true;
+  const disabled = vue.unref(column.attrs?.disabled);
+  if (is.isBoolean(disabled)) return disabled;
+  if (is.isFunction(disabled)) return disabled(column, props.model);
+  return false;
 }
 function isEmptyValue(e) {
   return is.isEmpty(e) || is.isArray(e) && !e.length;
@@ -47,17 +50,18 @@ function useShrink(props, templateRef) {
   const { addResize, removeResize } = useResizeHandler.useResizeHandler();
   const resizeExpandKey = /* @__PURE__ */ Symbol("appSearchExpand");
   const isExpand = vue.ref(false);
+  const showShrink = vue.ref(true);
   const containerHeight = vue.ref(getContainerPickUpHeight());
   function getContainerPickUpHeight() {
     switch (props.size) {
       case "large":
-        return 41;
+        return 43;
       case "small":
-        return 25;
+        return 27;
       case "":
       case "default":
       default:
-        return 33;
+        return 35;
     }
   }
   function switchShrink() {
@@ -80,6 +84,7 @@ function useShrink(props, templateRef) {
   );
   return {
     isExpand,
+    showShrink,
     containerHeight,
     switchShrink,
     shrinkResizeHandler,
@@ -90,7 +95,8 @@ function useShrink(props, templateRef) {
 }
 function timeRangeHandler(column, options) {
   const { value, unit } = options;
-  let { timeRangeFill, attrs } = column;
+  const { attrs } = column;
+  let { timeRangeFill } = attrs;
   const format = "YYYY-MM-DD";
   const date = dayjs(Date.now());
   timeRangeFill = timeRangeFill || attrs.type === "datetimerange";
@@ -99,7 +105,7 @@ function timeRangeHandler(column, options) {
     case "month":
       return [
         date.subtract(value, unit).format(`${format}${timeRangeFill ? " 00:00:00" : ""}`),
-        current
+        date.format(`${format}${timeRangeFill ? " 23:59:59" : ""}`)
       ];
     case "day":
     default:
@@ -120,6 +126,12 @@ function isSelectedTimeRange(column, options, model = {}) {
   }
   return start === model[field][0] && end === model[field][1];
 }
+function optionsHandler(props, column) {
+  const options = vue.unref(column.attrs.options);
+  if (is.isArray(options)) return options;
+  if (is.isFunction(options)) return options(column, props.model);
+  return [];
+}
 
 exports.columnItemInputStyle = columnItemInputStyle;
 exports.columnItemStyle = columnItemStyle;
@@ -127,5 +139,6 @@ exports.columnShowHandler = columnShowHandler;
 exports.isDisabled = isDisabled;
 exports.isEmptyValue = isEmptyValue;
 exports.isSelectedTimeRange = isSelectedTimeRange;
+exports.optionsHandler = optionsHandler;
 exports.timeRangeHandler = timeRangeHandler;
 exports.useShrink = useShrink;

package/lib/components/appSearch/js/useAppSearch.js

@@ -2,6 +2,7 @@
 
 var vue = require('vue');
 var handler = require('../../../utils/handler.js');
+var form = require('../../../utils/form.js');
 var date = require('../../../utils/date.js');
 var useLocale = require('../../../hooks/useLocale.js');
 var is = require('../../../utils/is.js');
@@ -26,7 +27,7 @@ const genPlaceholderHandler = (config) => {
       placeholder = placeholder || t("hy.pleaseSelectPlaceholder", [label]);
     case "date-picker":
       if (["datetimerange", "daterange", "monthrange", "yearrange"].includes(
-        attrs == null ? void 0 : attrs.type
+        attrs?.type
       )) {
         switch (attrs.type) {
           case "yearrange":
@@ -59,7 +60,7 @@ const genColumnWidth = (config) => {
   let inputWidth;
   if (!width) {
     if (type === "date-picker") {
-      switch (attrs == null ? void 0 : attrs.type) {
+      switch (attrs?.type) {
         case "datetimerange":
           inputWidth = 390;
           break;
@@ -81,7 +82,7 @@ const genColumnWidth = (config) => {
 const timeRangeOptionsHandler = (config) => {
   const { t } = useLocale.useLocale();
   const { timeRangeOptions } = config || {};
-  if (!(timeRangeOptions == null ? void 0 : timeRangeOptions.length)) return timeRangeOptions;
+  if (!timeRangeOptions?.length) return timeRangeOptions;
   return timeRangeOptions.reduce((list, item) => {
     let { value, label, unit } = item;
     if (!value || !is.isNumber(value) || isNaN(value)) return list;
@@ -166,10 +167,14 @@ const resetAppSearchValue = (columns = [], obj = {}) => {
     const value = handler.funRunHandler(item.defaultValue);
     if (Array.isArray(item.prop)) {
       for (let i = 0; i < item.prop.length; i++) {
-        obj[item.prop[i]] = value && Array.isArray(value) ? value[i] : void 0;
+        form.genValueByProp(
+          obj,
+          item.prop[i],
+          Array.isArray(value) ? value[i] : void 0
+        );
       }
     } else {
-      obj[item.prop] = value;
+      form.genValueByProp(obj, item.prop, value);
     }
   }
   return obj;

package/lib/components/appSearch/style/appSearch.scss

@@ -49,11 +49,21 @@
     --el-input-text-color: rgb(var(--hy-main));
     --el-input-border-radius: 0px 4px 4px 0px;
     --el-input-hover-border-color: rgb(var(--hy-theme));
+    .hy-el-input__wrapper,
+    &.hy-el-input__wrapper {
+      box-shadow: none !important;
+    }
   }
   .hy-el-select {
     --el-border-color: transparent;
     --el-fill-color-blank: transparent;
     --el-border-radius-base: 0px 4px 4px 0px;
     --el-border-color-hover: rgb(var(--hy-theme));
+    .hy-el-select__wrapper {
+      box-shadow: none !important;
+    }
+  }
+  .app-search-custom-wrapper {
+    min-height: var(--hy-el-component-size);
   }
 }