hy-dispatch-ui-v3 0.1.0

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

@@ -0,0 +1,181 @@
+'use strict';
+
+var vue = require('vue');
+var handler = require('../../../utils/handler.js');
+var date = require('../../../utils/date.js');
+var useLocale = require('../../../hooks/useLocale.js');
+var is = require('../../../utils/is.js');
+
+const genPlaceholderHandler = (config) => {
+  const { t } = useLocale.useLocale();
+  const { type, label, attrs = {} } = config || {};
+  let placeholder = attrs.placeholder, startPlaceholder = attrs.startPlaceholder, endPlaceholder = attrs.endPlaceholder;
+  switch (type) {
+    case "input":
+      placeholder = placeholder || t("hy.pleaseEnterPlaceholder", [label]);
+    case "select":
+      placeholder = placeholder || t("hy.pleaseSelectPlaceholder", [label]);
+    case "date-picker":
+      if (["datetimerange", "daterange", "monthrange", "yearrange"].includes(
+        attrs == null ? void 0 : attrs.type
+      )) {
+        switch (attrs.type) {
+          case "yearrange":
+            startPlaceholder = startPlaceholder || t("hy.startYear");
+            endPlaceholder = endPlaceholder || t("hy.endYear");
+            break;
+          case "monthrange":
+            startPlaceholder = startPlaceholder || t("hy.startMonth");
+            endPlaceholder = endPlaceholder || t("hy.endMonth");
+            break;
+          case "daterange":
+            startPlaceholder = startPlaceholder || t("hy.startDate");
+            endPlaceholder = endPlaceholder || t("hy.endDate");
+            break;
+          case "datetimerange":
+            startPlaceholder = startPlaceholder || t("hy.startDateTime");
+            endPlaceholder = endPlaceholder || t("hy.endDateTime");
+            break;
+        }
+      } else {
+        placeholder = placeholder || t("hy.pleaseSelectPlaceholder", [label]);
+      }
+    default:
+      placeholder = placeholder || label;
+  }
+  return { placeholder, startPlaceholder, endPlaceholder };
+};
+const genColumnWidth = (config) => {
+  let { width, type, attrs } = config || {};
+  let inputWidth;
+  if (!width) {
+    if (type === "date-picker") {
+      switch (attrs == null ? void 0 : attrs.type) {
+        case "datetimerange":
+          inputWidth = 390;
+          break;
+        case "daterange":
+          inputWidth = 240;
+          break;
+        case "datetime":
+          inputWidth = 220;
+          break;
+        default:
+          inputWidth = 145;
+      }
+    } else {
+      width = 250;
+    }
+  }
+  return { width, inputWidth };
+};
+const timeRangeOptionsHandler = (config) => {
+  const { t } = useLocale.useLocale();
+  const { timeRangeOptions } = config || {};
+  if (!(timeRangeOptions == null ? void 0 : timeRangeOptions.length)) return timeRangeOptions;
+  return timeRangeOptions.reduce((list, item) => {
+    let { value, label, unit } = item;
+    if (!value || !is.isNumber(value) || isNaN(value)) return list;
+    const isPlural = value > 1;
+    if (!label) {
+      switch (unit) {
+        case "year":
+          label = `${value} ` + t(isPlural ? "hy.years" : "hy.year");
+          break;
+        case "month":
+          label = `${value} ` + t(isPlural ? "hy.months" : "hy.month");
+          break;
+        case "day":
+        default:
+          unit = "day";
+          label = value === 1 ? t("hy.today") : `${value} ` + t(isPlural ? "hy.days" : "hy.day");
+      }
+    }
+    list.push({ ...item, label, unit });
+    return list;
+  }, []);
+};
+function appSearchItemHandler(column = {}) {
+  const { placeholder, startPlaceholder, endPlaceholder } = genPlaceholderHandler(column);
+  const attrs = {
+    clearable: true,
+    ...column.attrs || {},
+    placeholder
+  };
+  const { width, inputWidth } = genColumnWidth(column);
+  column = handler.mergeDeep(
+    { ...column },
+    {
+      key: /* @__PURE__ */ Symbol("appFormItemKey"),
+      field: column.prop,
+      readonly: column.readonly || false,
+      width,
+      inputWidth,
+      timeRangeOptions: timeRangeOptionsHandler(column)
+    }
+  );
+  if (/^(input)$/.test(column.type)) {
+    return {
+      ...column,
+      attrs: {
+        maxlength: attrs.type === "textarea" ? 255 : attrs.type === "text" ? 100 : void 0,
+        ...attrs
+      }
+    };
+  } else if (/^(radio|checkbox|select)$/.test(column.type)) {
+    return {
+      ...column,
+      attrs: {
+        ...attrs,
+        props: {
+          label: "label",
+          value: "value",
+          disabled: "disabled",
+          options: "options",
+          ...attrs.props
+        }
+      }
+    };
+  } else if (/^date-picker$/.test(column.type)) {
+    return {
+      ...column,
+      attrs: {
+        format: attrs.format || date.getDefaultValueFormatByType(attrs.type),
+        valueFormat: attrs.valueFormat || date.getDefaultValueFormatByType(attrs.type),
+        ...attrs,
+        startPlaceholder,
+        endPlaceholder
+      }
+    };
+  }
+  return column;
+}
+const resetAppSearchValue = (columns = [], obj = {}) => {
+  for (const item of columns) {
+    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;
+      }
+    } else {
+      obj[item.prop] = value;
+    }
+  }
+  return obj;
+};
+const useAppSearch = (config = [], model) => {
+  const columns = [];
+  for (const item of vue.unref(config)) {
+    const target = appSearchItemHandler(item);
+    columns.push(target);
+  }
+  const formModel = resetAppSearchValue(columns, model);
+  return {
+    formModel: vue.toRef(formModel),
+    formColumns: vue.toRef(columns)
+  };
+};
+
+exports.resetAppSearchValue = resetAppSearchValue;
+exports.useAppSearch = useAppSearch;
+//# sourceMappingURL=useAppSearch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAppSearch.js","sources":["../../../../packages/components/appSearch/js/useAppSearch.js"],"sourcesContent":["import { toRef, unref } from 'vue'\nimport { useLocale } from '@hy-dispatch-ui-v3/hooks'\nimport {\n  isNumber,\n  funRunHandler,\n  mergeDeep,\n  getDefaultValueFormatByType,\n} from '@hy-dispatch-ui-v3/utils'\n\n// 生成表单组件占位字符\nconst genPlaceholderHandler = (config) => {\n  const { t } = useLocale()\n  const { type, label, attrs = {} } = config || {}\n  let placeholder = attrs.placeholder,\n    startPlaceholder = attrs.startPlaceholder,\n    endPlaceholder = attrs.endPlaceholder\n  switch (type) {\n    case 'input':\n      placeholder = placeholder || t('hy.pleaseEnterPlaceholder', [label])\n    case 'select':\n      placeholder = placeholder || t('hy.pleaseSelectPlaceholder', [label])\n    case 'date-picker':\n      if (\n        ['datetimerange', 'daterange', 'monthrange', 'yearrange'].includes(\n          attrs?.type\n        )\n      ) {\n        switch (attrs.type) {\n          case 'yearrange':\n            startPlaceholder = startPlaceholder || t('hy.startYear')\n            endPlaceholder = endPlaceholder || t('hy.endYear')\n            break\n          case 'monthrange':\n            startPlaceholder = startPlaceholder || t('hy.startMonth')\n            endPlaceholder = endPlaceholder || t('hy.endMonth')\n            break\n          case 'daterange':\n            startPlaceholder = startPlaceholder || t('hy.startDate')\n            endPlaceholder = endPlaceholder || t('hy.endDate')\n            break\n          case 'datetimerange':\n            startPlaceholder = startPlaceholder || t('hy.startDateTime')\n            endPlaceholder = endPlaceholder || t('hy.endDateTime')\n            break\n        }\n      } else {\n        placeholder = placeholder || t('hy.pleaseSelectPlaceholder', [label])\n      }\n    default:\n      placeholder = placeholder || label\n  }\n  return { placeholder, startPlaceholder, endPlaceholder }\n}\n\nconst genColumnWidth = (config) => {\n  let { width, type, attrs } = config || {}\n  let inputWidth\n  if (!width) {\n    if (type === 'date-picker') {\n      switch (attrs?.type) {\n        case 'datetimerange':\n          inputWidth = 390\n          break\n        case 'daterange':\n          inputWidth = 240\n          break\n        case 'datetime':\n          inputWidth = 220\n          break\n        default:\n          inputWidth = 145\n      }\n    } else {\n      width = 250\n    }\n  }\n  return { width, inputWidth }\n}\n\nconst timeRangeOptionsHandler = (config) => {\n  const { t } = useLocale()\n  const { timeRangeOptions } = config || {}\n  if (!timeRangeOptions?.length) return timeRangeOptions\n  return timeRangeOptions.reduce((list, item) => {\n    let { value, label, unit } = item\n    if (!value || !isNumber(value) || isNaN(value)) return list\n    const isPlural = value > 1\n    if (!label) {\n      switch (unit) {\n        case 'year':\n          label = `${value} ` + t(isPlural ? 'hy.years' : 'hy.year')\n          break\n        case 'month':\n          label = `${value} ` + t(isPlural ? 'hy.months' : 'hy.month')\n          break\n        case 'day':\n        default:\n          unit = 'day'\n          label =\n            value === 1\n              ? t('hy.today')\n              : `${value} ` + t(isPlural ? 'hy.days' : 'hy.day')\n      }\n    }\n    list.push({ ...item, label, unit })\n    return list\n  }, [])\n}\n\n/**\n * @function 创建表单项\n * @param {\n *     prop: string | Array<string>,               // 表单prop，在日期选择范围可填入数据\n *     label: string,                              // 表单项label\n *     defaultValue: function | any                // 默认值\n *     slot: string                                // 自定义插槽名称\n *     type: 'input' | 'select' | 'date-picker'  | 'radio' | 'checkbox'     // 表单组件类型\n *     timeRangeFill: boolean,                      // 仅对 date-picker 的 daterange 类型生效，是否填充开始结束时间\n *     timeRangeOptions: Array<{ label?: string, value: number, unit: 'day' | 'month' | 'year' }>    // 仅对 date-picker 的 daterange、datetimerange 生效，可配置日期范围按钮\n *     attrs: any                                  // 表单组件配置\n *   } column\n * @returns column\n */\nfunction appSearchItemHandler(column = {}) {\n  const { placeholder, startPlaceholder, endPlaceholder } =\n    genPlaceholderHandler(column)\n  const attrs = {\n    clearable: true,\n    ...(column.attrs || {}),\n    placeholder,\n  }\n  const { width, inputWidth } = genColumnWidth(column)\n  column = mergeDeep(\n    { ...column },\n    {\n      key: Symbol('appFormItemKey'),\n      field: column.prop,\n      readonly: column.readonly || false,\n      width,\n      inputWidth,\n      timeRangeOptions: timeRangeOptionsHandler(column),\n    }\n  )\n\n  if (/^(input)$/.test(column.type)) {\n    return {\n      ...column,\n      attrs: {\n        maxlength:\n          attrs.type === 'textarea'\n            ? 255\n            : attrs.type === 'text'\n              ? 100\n              : undefined,\n        ...attrs,\n      },\n    }\n  } else if (/^(radio|checkbox|select)$/.test(column.type)) {\n    return {\n      ...column,\n      attrs: {\n        ...attrs,\n        props: {\n          label: 'label',\n          value: 'value',\n          disabled: 'disabled',\n          options: 'options',\n          ...attrs.props,\n        },\n      },\n    }\n  } else if (/^date-picker$/.test(column.type)) {\n    return {\n      ...column,\n      attrs: {\n        format: attrs.format || getDefaultValueFormatByType(attrs.type),\n        valueFormat:\n          attrs.valueFormat || getDefaultValueFormatByType(attrs.type),\n        ...attrs,\n        startPlaceholder,\n        endPlaceholder,\n      },\n    }\n  }\n\n  return column\n}\n\n// 重置表单默认值\nexport const resetAppSearchValue = (columns = [], obj = {}) => {\n  for (const item of columns) {\n    const value = funRunHandler(item.defaultValue)\n    if (Array.isArray(item.prop)) {\n      for (let i = 0; i < item.prop.length; i++) {\n        obj[item.prop[i]] = value && Array.isArray(value) ? value[i] : undefined\n      }\n    } else {\n      obj[item.prop] = value\n    }\n  }\n  return obj\n}\n\n// 生成表单配置\nexport const useAppSearch = (config = [], model) => {\n  const columns = []\n  for (const item of unref(config)) {\n    const target = appSearchItemHandler(item)\n    columns.push(target)\n  }\n  const formModel = resetAppSearchValue(columns, model)\n  return {\n    formModel: toRef(formModel),\n    formColumns: toRef(columns),\n  }\n}\n"],"names":["useLocale","isNumber","mergeDeep","getDefaultValueFormatByType","funRunHandler","unref","toRef"],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+.app-search {
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background-color: var(--background);
+  padding: 12px 6px 16px 20px;
+  opacity: 1;
+  transition: all 0.3s linear;
+  overflow: hidden;
+  &.app-search-hidden {
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
+  }
+}
+.app-search-header {
+  @apply h-4 flex items-center text-xs text-main mb-4;
+  transition: all 0.3s linear;
+  &.app-search-header-hidden {
+    @apply h-0 mb-0;
+  }
+}
+.app-search-form {
+  overflow: hidden;
+  transition: all 0.3s;
+}
+.app-search-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  position: relative;
+  .el-form-item {
+    margin-bottom: 0;
+    &.hidden {
+      display: none;
+    }
+  }
+  .el-input,
+  .el-date-editor {
+    --el-input-bg-color: transparent;
+    --el-input-border: none;
+    --el-border-color: transparent;
+    --el-input-border-color: transparent;
+    --el-input-text-color: var(--main);
+    --el-input-border-radius: 0px 4px 4px 0px;
+    --el-input-hover-border-color: var(--theme);
+  }
+  .el-select {
+    --el-border-color: transparent;
+    --el-fill-color-blank: transparent;
+    --el-border-radius-base: 0px 4px 4px 0px;
+    --el-border-color-hover: var(--theme);
+  }
+}