hy-dispatch-ui-v3 0.1.6 → 0.2.1

package/es/components/appSearch/cpns/appSearchItem.vue.mjs

@@ -0,0 +1,238 @@
+import { computed, unref, openBlock, createBlock, withCtx, createElementVNode, normalizeStyle, createCommentVNode, renderSlot, createElementBlock, toDisplayString, normalizeClass, Fragment, createVNode, mergeProps, withKeys, renderList } from 'vue';
+import { ElFormItem, ElSelect } from 'element-plus';
+import { columnShowHandler, columnItemStyle, columnItemInputStyle, isDisabled, optionsHandler, isSelectedTimeRange, timeRangeHandler } from '../js/index.mjs';
+import { AppDatePicker } from '../../appDatePicker/index.mjs';
+import { AppOrgCascader } from '../../appOrgCascader/index.mjs';
+import { isArray } from '../../../utils/is.mjs';
+import { setValueByProp, getValueByProp } from '../../../utils/form.mjs';
+import { AppInput } from '../../appInput/index.mjs';
+
+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 = computed(() => {
+      let field = isArray(props.column.field) ? props.column.field[0] : props.column.field;
+      return field;
+    });
+    const bindValue = computed({
+      get() {
+        const prop = isArray(props.column.field) ? props.column.field[0] : props.column.field;
+        return getValueByProp(props.model, prop);
+      },
+      set(val) {
+        const prop = isArray(props.column.field) ? props.column.field[0] : props.column.field;
+        setValueByProp(props.model, prop, val);
+      }
+    });
+    const bindValue2 = computed({
+      get() {
+        const prop = isArray(props.column.field) ? props.column.field[1] : props.column.field;
+        return getValueByProp(props.model, prop);
+      },
+      set(val) {
+        const prop = isArray(props.column.field) ? props.column.field[1] : props.column.field;
+        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 = timeRangeHandler(column, options);
+      const flag = dateValue.length && dateValue.every((value, index) => {
+        return isArray(field) ? value === props.model[field[index]] : props.model[field][index];
+      });
+      if (flag) return;
+      if (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 unref(columnShowHandler)(props, __props.column) ? (openBlock(), createBlock(unref(ElFormItem), {
+        key: 0,
+        prop: columnProp.value
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", { class: "flex bg-background-2 rounded border border-transparent hover:border-theme box-border" }, [
+            createElementVNode(
+              "div",
+              {
+                class: "flex",
+                style: normalizeStyle(unref(columnItemStyle)(props, __props.column))
+              },
+              [
+                createCommentVNode(" \u8868\u5355label "),
+                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] ? renderSlot(_ctx.$slots, __props.column.labelSlot, {
+                    key: 0,
+                    column: __props.column
+                  }) : (openBlock(), createElementBlock(
+                    "span",
+                    { key: 1 },
+                    toDisplayString(__props.column.label),
+                    1
+                    /* TEXT */
+                  ))
+                ]),
+                createCommentVNode(" \u8868\u5355\u7EC4\u4EF6 "),
+                createElementVNode(
+                  "div",
+                  {
+                    class: normalizeClass({ "app-search-custom-wrapper": __props.column.slot }),
+                    style: normalizeStyle(unref(columnItemInputStyle)(props, __props.column))
+                  },
+                  [
+                    createCommentVNode(" \u81EA\u5B9A\u4E49\u5177\u540D\u63D2\u69FD "),
+                    __props.column.slot ? renderSlot(_ctx.$slots, __props.column.slot, {
+                      key: 0,
+                      column: __props.column
+                    }) : __props.column.type === "input" ? (openBlock(), createElementBlock(
+                      Fragment,
+                      { key: 1 },
+                      [
+                        createCommentVNode(" \u8F93\u5165\u6846 "),
+                        createVNode(unref(AppInput), mergeProps({
+                          modelValue: bindValue.value,
+                          "onUpdate:modelValue": ($event) => bindValue.value = $event
+                        }, __props.column.attrs, {
+                          disabled: unref(isDisabled)(props, __props.column),
+                          onKeydown: 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" ? (openBlock(), createElementBlock(
+                      Fragment,
+                      { key: 2 },
+                      [
+                        createCommentVNode(" \u9009\u62E9\u6846 "),
+                        createVNode(unref(ElSelect), mergeProps({
+                          modelValue: bindValue.value,
+                          "onUpdate:modelValue": ($event) => bindValue.value = $event
+                        }, __props.column.attrs, {
+                          disabled: unref(isDisabled)(props, __props.column),
+                          options: unref(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" ? (openBlock(), createElementBlock(
+                      Fragment,
+                      { key: 3 },
+                      [
+                        createCommentVNode(" \u65E5\u671F\u9009\u62E9\u6846 "),
+                        [
+                          "datetimerange",
+                          "daterange",
+                          "monthrange",
+                          "yearrange"
+                        ].includes(__props.column.attrs?.type) && unref(isArray)(__props.column.field) ? (openBlock(), createBlock(unref(AppDatePicker), 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: unref(isDisabled)(props, __props.column),
+                          onChange: ($event) => onChangeHandler($event, __props.column)
+                        }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "timeRangeFill", "disabled", "onChange"])) : (openBlock(), createBlock(unref(AppDatePicker), 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: unref(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" ? (openBlock(), createElementBlock(
+                      Fragment,
+                      { key: 4 },
+                      [
+                        createCommentVNode(" \u90E8\u95E8\u7EA7\u8054\u9009\u62E9\u6846 "),
+                        createVNode(unref(AppOrgCascader), mergeProps({
+                          modelValue: bindValue.value,
+                          "onUpdate:modelValue": ($event) => bindValue.value = $event
+                        }, __props.column.attrs, {
+                          disabled: unref(isDisabled)(props, __props.column)
+                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"])
+                      ],
+                      2112
+                      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                    )) : 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 ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "flex text-main select-none"
+            }, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(__props.column.timeRangeOptions, (item, index) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: index,
+                    class: normalizeClass(["border-l border-border px-[10px] cursor-pointer", {
+                      "bg-[rgba(var(--hy-theme),0.2)] text-theme font-bold": unref(isSelectedTimeRange)(__props.column, item, __props.model)
+                    }]),
+                    onClick: ($event) => onTimeRangeClickHandler(__props.column, item)
+                  }, [
+                    createElementVNode(
+                      "span",
+                      null,
+                      toDisplayString(item.label),
+                      1
+                      /* TEXT */
+                    )
+                  ], 10, ["onClick"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])) : createCommentVNode("v-if", true)
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["prop"])) : createCommentVNode("v-if", true);
+    };
+  }
+};
+
+export { _sfc_main as default };

package/es/components/appSearch/js/index.mjs

@@ -35,8 +35,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 = unref(column.attrs?.disabled);
+  if (isBoolean(disabled)) return disabled;
+  if (isFunction(disabled)) return disabled(column, props.model);
+  return false;
 }
 function isEmptyValue(e) {
   return isEmpty(e) || isArray(e) && !e.length;
@@ -45,17 +48,18 @@ function useShrink(props, templateRef) {
   const { addResize, removeResize } = useResizeHandler();
   const resizeExpandKey = /* @__PURE__ */ Symbol("appSearchExpand");
   const isExpand = ref(false);
+  const showShrink = ref(true);
   const containerHeight = 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() {
@@ -78,6 +82,7 @@ function useShrink(props, templateRef) {
   );
   return {
     isExpand,
+    showShrink,
     containerHeight,
     switchShrink,
     shrinkResizeHandler,
@@ -88,7 +93,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";
@@ -97,7 +103,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:
@@ -118,5 +124,11 @@ function isSelectedTimeRange(column, options, model = {}) {
   }
   return start === model[field][0] && end === model[field][1];
 }
+function optionsHandler(props, column) {
+  const options = unref(column.attrs.options);
+  if (isArray(options)) return options;
+  if (isFunction(options)) return options(column, props.model);
+  return [];
+}
 
-export { columnItemInputStyle, columnItemStyle, columnShowHandler, isDisabled, isEmptyValue, isSelectedTimeRange, timeRangeHandler, useShrink };
+export { columnItemInputStyle, columnItemStyle, columnShowHandler, isDisabled, isEmptyValue, isSelectedTimeRange, optionsHandler, timeRangeHandler, useShrink };

package/es/components/appSearch/js/useAppSearch.mjs

@@ -1,5 +1,6 @@
 import { unref, toRef } from 'vue';
 import { funRunHandler, mergeDeep } from '../../../utils/handler.mjs';
+import { genValueByProp } from '../../../utils/form.mjs';
 import { getDefaultValueFormatByType } from '../../../utils/date.mjs';
 import { useLocale } from '../../../hooks/useLocale.mjs';
 import { isNumber } from '../../../utils/is.mjs';
@@ -24,7 +25,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":
@@ -57,7 +58,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;
@@ -79,7 +80,7 @@ const genColumnWidth = (config) => {
 const timeRangeOptionsHandler = (config) => {
   const { t } = 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 || !isNumber(value) || isNaN(value)) return list;
@@ -164,10 +165,14 @@ const resetAppSearchValue = (columns = [], obj = {}) => {
     const value = 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;
+        genValueByProp(
+          obj,
+          item.prop[i],
+          Array.isArray(value) ? value[i] : void 0
+        );
       }
     } else {
-      obj[item.prop] = value;
+      genValueByProp(obj, item.prop, value);
     }
   }
   return obj;

package/es/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);
   }
 }