@wlydfe/pro-ui 0.2.0

package/es/components/search/src/index.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './index.vue2.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const Search = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "index.vue"]]);
+
+export { Search as default };

package/es/components/search/src/index.vue2.mjs

@@ -0,0 +1,216 @@
+import { defineComponent, ref, useSlots, computed, unref, watch, openBlock, createBlock, mergeProps, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, renderList, normalizeProps, guardReactiveProps } from 'vue';
+import { PlusForm } from '../../form/index.mjs';
+import { RefreshRight, Search, ArrowUp, ArrowDown } from '@element-plus/icons-vue';
+import '../../../hooks/index.mjs';
+import { ElFormItem, ElButton, ElIcon } from 'element-plus';
+import { filterSlots, getLabelSlotName, getFieldSlotName, getExtraSlotName } from '../../utils/index.mjs';
+import { useLocale } from '../../../hooks/useLocale.mjs';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PlusSearch"
+  },
+  __name: "index",
+  props: {
+    modelValue: { default: () => ({}) },
+    defaultValues: { default: () => ({}) },
+    columns: { default: () => [] },
+    hasFooter: { type: Boolean, default: true },
+    hasReset: { type: Boolean, default: true },
+    hasUnfold: { type: Boolean, default: true },
+    searchText: { default: "" },
+    resetText: { default: "" },
+    searchLoading: { type: Boolean, default: false },
+    inline: { type: Boolean, default: true },
+    showNumber: { default: 2 },
+    rowProps: { default: () => ({
+      gutter: 20
+    }) },
+    colProps: { default: () => ({
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 6
+    }) }
+  },
+  emits: ["update:modelValue", "search", "change", "reset", "collapse"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useLocale();
+    const plusFormInstance = ref();
+    const isShowUnfold = ref(false);
+    const values = ref({});
+    const slots = useSlots();
+    const labelSlots = filterSlots(slots, getLabelSlotName());
+    const fieldSlots = filterSlots(slots, getFieldSlotName());
+    const extraSlots = filterSlots(slots, getExtraSlotName());
+    const originData = computed(() => {
+      return props.columns.filter((item) => unref(item.hideInSearch) !== true).map((item) => ({ ...item, hideInForm: false }));
+    });
+    const subColumns = computed(() => {
+      if (props.hasUnfold && !isShowUnfold.value) {
+        return originData.value.slice(0, props.showNumber);
+      } else {
+        return originData.value;
+      }
+    });
+    watch(
+      () => props.modelValue,
+      (val) => {
+        values.value = val;
+      },
+      {
+        immediate: true
+      }
+    );
+    const handleChange = async (values2, column) => {
+      emit("update:modelValue", values2);
+      emit("change", values2, column);
+    };
+    const handleSearch = () => {
+      emit("search", values.value);
+    };
+    const handleReset = () => {
+      values.value = { ...props.defaultValues };
+      emit("update:modelValue", values.value);
+      emit("reset", values.value);
+    };
+    const handleUnfold = () => {
+      isShowUnfold.value = !isShowUnfold.value;
+      emit("collapse", isShowUnfold.value);
+    };
+    __expose({
+      plusFormInstance,
+      handleReset,
+      handleSearch,
+      handleUnfold
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PlusForm), mergeProps({
+        ref_key: "plusFormInstance",
+        ref: plusFormInstance
+      }, _ctx.$attrs, {
+        modelValue: values.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => values.value = $event),
+        inline: _ctx.inline,
+        "row-props": _ctx.rowProps,
+        "col-props": _ctx.colProps,
+        columns: subColumns.value,
+        class: "plus-search",
+        "has-footer": false,
+        onChange: handleChange
+      }), createSlots({
+        "search-footer": withCtx(() => [
+          _ctx.hasFooter ? (openBlock(), createBlock(unref(ElFormItem), {
+            key: 0,
+            class: "plus-search__button__wrapper"
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "footer", {
+                isShowUnfold: isShowUnfold.value,
+                handleReset,
+                handleSearch,
+                handleUnfold
+              }, () => [
+                _ctx.hasReset ? (openBlock(), createBlock(unref(ElButton), {
+                  key: 0,
+                  icon: unref(RefreshRight),
+                  onClick: handleReset
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(
+                      toDisplayString(_ctx.resetText || unref(t)("plus.search.resetText")),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["icon"])) : createCommentVNode("v-if", true),
+                createVNode(unref(ElButton), {
+                  type: "primary",
+                  loading: _ctx.searchLoading,
+                  icon: unref(Search),
+                  onClick: handleSearch
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(
+                      toDisplayString(_ctx.searchText || unref(t)("plus.search.searchText")),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["loading", "icon"]),
+                _ctx.hasUnfold && originData.value.length > _ctx.showNumber ? (openBlock(), createBlock(unref(ElButton), {
+                  key: 1,
+                  type: "primary",
+                  link: "",
+                  onClick: handleUnfold
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(
+                      toDisplayString(isShowUnfold.value ? unref(t)("plus.search.retract") : unref(t)("plus.search.expand")) + " ",
+                      1
+                      /* TEXT */
+                    ),
+                    createVNode(unref(ElIcon), null, {
+                      default: withCtx(() => [
+                        isShowUnfold.value ? (openBlock(), createBlock(unref(ArrowUp), { key: 0 })) : (openBlock(), createBlock(unref(ArrowDown), { key: 1 }))
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })) : createCommentVNode("v-if", true)
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          })) : createCommentVNode("v-if", true)
+        ]),
+        _: 2
+        /* DYNAMIC */
+      }, [
+        renderList(unref(labelSlots), (_, key) => {
+          return {
+            name: key,
+            fn: withCtx((data) => [
+              renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
+            ])
+          };
+        }),
+        renderList(unref(fieldSlots), (_, key) => {
+          return {
+            name: key,
+            fn: withCtx((data) => [
+              renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
+            ])
+          };
+        }),
+        renderList(unref(extraSlots), (_, key) => {
+          return {
+            name: key,
+            fn: withCtx((data) => [
+              renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
+            ])
+          };
+        }),
+        _ctx.$slots["tooltip-icon"] ? {
+          name: "tooltip-icon",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "tooltip-icon")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["modelValue", "inline", "row-props", "col-props", "columns"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/search/style/css.d.ts

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/button/style/css';
+import '@wlydfe/pro-ui-components/form/style/css';
+import '@wlydfe/pro-ui-theme-chalk/plus-search.css';

package/es/components/search/style/css.mjs

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/button/style/css.mjs';
+import '../../form/style/css.mjs';
+import '@wlydfe/pro-ui-theme-chalk/plus-search.css';

package/es/components/search/style/index.d.ts

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/button/style/index';
+import '@wlydfe/pro-ui-components/form/style/index';
+import '@wlydfe/pro-ui-theme-chalk/src/search.scss';

package/es/components/search/style/index.mjs

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/button/style/index.mjs';
+import '../../form/style/index.mjs';
+import '../../../theme-chalk/src/search.scss.mjs';