@mywzzz/mineadmin-search-panel 1.0.7

package/README.md

@@ -0,0 +1,94 @@
+# @mywzzz/mineadmin-search-panel
+
+Vue 3 + Element Plus search panel component extracted from MineAdmin scenarios.
+
+## Install
+
+```bash
+npm install @mywzzz/mineadmin-search-panel
+```
+
+Peer dependencies:
+
+- `vue`
+- `element-plus`
+- `@iconify/vue`
+
+## Usage
+
+```ts
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+
+createApp(App).use(ElementPlus).mount('#app')
+```
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import SearchPanel, { type LegacySearchPanelItem } from '@mywzzz/mineadmin-search-panel'
+import '@mywzzz/mineadmin-search-panel/style.css'
+
+const form = ref<Record<string, unknown>>({
+  username: '',
+  status: '',
+})
+
+const items: LegacySearchPanelItem[] = [
+  {
+    label: () => '用户名',
+    prop: 'username',
+    render: 'input',
+    renderProps: {
+      clearable: true,
+      placeholder: '请输入用户名',
+    },
+  },
+  {
+    label: () => '状态',
+    prop: 'status',
+    render: 'select',
+    renderProps: {
+      clearable: true,
+      options: [
+        { label: '启用', value: '1' },
+        { label: '禁用', value: '0' },
+      ],
+    },
+  },
+]
+</script>
+
+<template>
+  <SearchPanel
+    v-model="form"
+    title="用户检索"
+    subtitle="真实 npm 包使用示例"
+    :items="items"
+    :fold="true"
+    @search="console.log"
+    @reset="console.log"
+  />
+</template>
+```
+
+## Supported item input
+
+- Library items: `input` / `select` / `date-picker` / `input-number`
+- Legacy MineAdmin-style items: `label` + `prop` + `render` + `renderProps`
+- Custom component items: component must support `v-model` and pass width-related attrs or styles to the actual input control
+
+## Build
+
+```bash
+npm run build
+```
+
+The build outputs:
+
+- `dist/index.js`
+- `dist/index.umd.cjs`
+- `dist/index.d.ts`
+- `dist/style.css`

package/dist/SearchPanel.vue.d.ts

@@ -0,0 +1,38 @@
+import type { SearchPanelCols, SearchPanelProps } from './types';
+declare var __VLS_1: {}, __VLS_37: string, __VLS_38: {
+    item: import("./types").SearchPanelSlotItem;
+    model: Record<string, unknown>;
+    update: (value: unknown) => void;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_37>]?: (props: typeof __VLS_38) => any;
+} & {
+    actions?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<SearchPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (value: Record<string, unknown>) => any;
+    "update:modelValue": (value: Record<string, unknown>) => any;
+    reset: (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<SearchPanelProps> & Readonly<{
+    onSearch?: ((value: Record<string, unknown>) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+    onReset?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {
+    modelValue: Record<string, unknown>;
+    defaultValue: Record<string, unknown>;
+    labelWidth: string;
+    cols: SearchPanelCols;
+    fold: boolean;
+    foldRows: number;
+    searchText: string;
+    resetText: string;
+    foldText: string;
+    unfoldText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import SearchPanel from './SearchPanel.vue';
+import './style/index.css';
+export { normalizeSearchPanelItems, resolveLabelValue, resolveLegacyVNode, resolvePropValue, } from './normalize';
+export type { ColsConfig, LegacySearchPanelItem, LegacySearchPanelRender, SearchPanelBaseItem, SearchPanelBuiltinItem, SearchPanelCols, SearchPanelComponentItem, SearchPanelContext, SearchPanelInputItem, SearchPanelItem, SearchPanelOption, SearchPanelProps, SearchPanelSlotItem, SearchPanelSlotRenderer, } from './types';
+export { SearchPanel };
+export default SearchPanel;

package/dist/index.js

@@ -0,0 +1,317 @@
+import { isVNode as j, defineComponent as Z, ref as x, watch as z, computed as f, onMounted as ee, onBeforeUnmount as ne, openBlock as a, createElementBlock as y, createElementVNode as v, toDisplayString as b, createCommentVNode as m, renderSlot as F, createVNode as _, unref as u, withModifiers as R, withCtx as c, normalizeStyle as E, Fragment as I, renderList as U, createBlock as h, resolveDynamicComponent as N, mergeProps as D, withKeys as te, createTextVNode as T } from "vue";
+import { ElInputNumber as le, ElDatePicker as oe, ElSelect as re, ElInput as ae, ElForm as ue, ElFormItem as se, ElOption as ie, ElButton as K, ElLink as de } from "element-plus";
+import { Icon as O } from "@iconify/vue";
+const ce = {
+  input: ae,
+  select: re,
+  "date-picker": oe,
+  "input-number": le
+};
+function pe(e) {
+  return ce[e];
+}
+function fe(e) {
+  if (e.fullWidth !== !1)
+    return { width: "100%" };
+}
+const w = {
+  input: "input",
+  select: "select",
+  "date-picker": "date-picker",
+  inputNumber: "input-number",
+  "input-number": "input-number"
+};
+function ye(e) {
+  return typeof e == "function" ? e() : e ?? "";
+}
+function ve(e) {
+  return typeof e == "function" ? e() : e ?? "";
+}
+function me(e) {
+  return typeof e == "string" && e in w;
+}
+function he(e) {
+  const r = ve(e.prop), o = e.label ?? r;
+  if (me(e.render))
+    return {
+      key: r,
+      label: o,
+      span: e.span,
+      type: w[e.render],
+      options: e.renderProps?.options,
+      componentProps: e.renderProps
+    };
+  if (typeof e.render == "function") {
+    const k = e.render, s = k();
+    return typeof s == "string" && s in w ? {
+      key: r,
+      label: o,
+      span: e.span,
+      type: w[s],
+      options: e.renderProps?.options,
+      componentProps: e.renderProps
+    } : j(s) ? {
+      key: r,
+      label: o,
+      span: e.span,
+      type: "slot",
+      slotName: `legacy:${r}`
+    } : {
+      key: r,
+      label: o,
+      span: e.span,
+      type: "component",
+      component: s,
+      componentProps: e.renderProps
+    };
+  }
+  return e.render ? {
+    key: r,
+    label: o,
+    span: e.span,
+    type: "component",
+    component: e.render,
+    componentProps: e.renderProps
+  } : {
+    key: r,
+    label: o,
+    span: e.span,
+    type: "input",
+    componentProps: e.renderProps
+  };
+}
+function ke(e) {
+  return e.map((r) => "type" in r && "key" in r ? r : he(r));
+}
+function be(e) {
+  if ("type" in e && "key" in e || typeof e.render != "function")
+    return null;
+  const r = e.render, o = r();
+  return j(o) ? o : null;
+}
+const _e = { class: "ma-search-panel" }, ge = {
+  key: 0,
+  class: "ma-search-panel__card ma-search-panel__header"
+}, we = { class: "ma-search-panel__title-wrap" }, Ve = {
+  key: 0,
+  class: "ma-search-panel__title"
+}, Pe = {
+  key: 1,
+  class: "ma-search-panel__subtitle"
+}, Ce = { class: "ma-search-panel__card" }, Se = { class: "ma-search-panel__field ma-search-panel__field--full" }, xe = { class: "ma-search-panel__actions" }, Le = /* @__PURE__ */ Z({
+  __name: "SearchPanel",
+  props: {
+    items: {},
+    modelValue: { default: () => ({}) },
+    defaultValue: { default: () => ({}) },
+    title: {},
+    subtitle: {},
+    labelWidth: { default: "90px" },
+    cols: { default: 3 },
+    fold: { type: Boolean, default: !1 },
+    foldRows: { default: 1 },
+    searchText: { default: "搜索" },
+    resetText: { default: "重置" },
+    foldText: { default: "展开搜索" },
+    unfoldText: { default: "收起搜索" }
+  },
+  emits: ["update:modelValue", "search", "reset"],
+  setup(e, { emit: r }) {
+    const o = e, k = r;
+    function s() {
+      const n = {};
+      return V.value.forEach((l) => {
+        n[l.key] = o.defaultValue?.[l.key];
+      }), n;
+    }
+    const d = x({
+      ...s(),
+      ...o.modelValue
+    });
+    z(
+      () => [o.items, o.defaultValue, o.modelValue],
+      () => {
+        d.value = {
+          ...s(),
+          ...o.modelValue
+        };
+      },
+      { deep: !0 }
+    );
+    function L(n) {
+      d.value = n, k("update:modelValue", n);
+    }
+    const $ = x(typeof window > "u" ? 1440 : window.innerWidth), V = f(() => ke(o.items));
+    function A(n) {
+      if (typeof n == "number")
+        return n;
+      const l = $.value;
+      return l >= 1920 ? n.xl ?? 4 : l >= 1200 ? n.lg ?? 3 : l >= 992 ? n.md ?? 2 : l >= 768 ? n.sm ?? 2 : n.xs ?? 1;
+    }
+    function P() {
+      typeof window < "u" && ($.value = window.innerWidth);
+    }
+    ee(() => {
+      P(), typeof window < "u" && window.addEventListener("resize", P);
+    }), ne(() => {
+      typeof window < "u" && window.removeEventListener("resize", P);
+    });
+    const g = f(() => Math.max(A(o.cols), 1)), B = f(() => Math.max(g.value * o.foldRows - 1, 0)), p = x(o.fold);
+    z(
+      () => o.fold,
+      (n) => {
+        p.value = n;
+      }
+    );
+    const M = f(() => o.items.length > B.value), q = f(() => p.value && M.value ? V.value.slice(0, B.value) : V.value), G = f(() => ({
+      gridTemplateColumns: `repeat(${g.value}, minmax(0, 1fr))`
+    }));
+    function C(n, l) {
+      L({ ...d.value, [n]: l });
+    }
+    function H() {
+      const n = s();
+      L(n), k("reset", n);
+    }
+    function S() {
+      const n = {};
+      Object.entries(d.value).forEach(([l, t]) => {
+        t !== "" && t !== void 0 && t !== null && (n[l] = t);
+      }), k("search", n);
+    }
+    function J(n) {
+      return n.type === "input" || n.type === "select" || n.type === "date-picker" || n.type === "input-number";
+    }
+    function Q(n) {
+      return n.type === "component";
+    }
+    function X(n) {
+      return o.items.find((l) => "type" in l && "key" in l ? l.key === n.key : n.key === (typeof l.prop == "function" ? l.prop() : l.prop));
+    }
+    function Y(n) {
+      return n.type === "slot" ? n.slotName : `legacy:${n.key}`;
+    }
+    function W(n) {
+      const l = X(n);
+      return l ? be(l) : null;
+    }
+    return (n, l) => (a(), y("div", _e, [
+      e.title || e.subtitle || n.$slots.actions ? (a(), y("div", ge, [
+        v("div", we, [
+          e.title ? (a(), y("div", Ve, b(e.title), 1)) : m("", !0),
+          e.subtitle ? (a(), y("div", Pe, b(e.subtitle), 1)) : m("", !0)
+        ]),
+        F(n.$slots, "actions")
+      ])) : m("", !0),
+      v("div", Ce, [
+        _(u(ue), {
+          model: d.value,
+          "label-width": e.labelWidth,
+          onSubmit: R(S, ["prevent"])
+        }, {
+          default: c(() => [
+            v("div", {
+              class: "ma-search-panel__grid",
+              style: E(G.value)
+            }, [
+              (a(!0), y(I, null, U(q.value, (t) => (a(), h(u(se), {
+                key: t.key,
+                class: "ma-search-panel__item",
+                label: u(ye)(t.label),
+                style: E(t.span ? { gridColumn: `span ${t.span}` } : void 0)
+              }, {
+                default: c(() => [
+                  v("div", Se, [
+                    J(t) ? (a(), h(N(u(pe)(t.type)), D({
+                      key: 0,
+                      "model-value": d.value[t.key]
+                    }, { ref_for: !0 }, t.componentProps, {
+                      class: "ma-search-panel__field--full",
+                      onKeyup: te(S, ["enter"]),
+                      "onUpdate:modelValue": (i) => C(t.key, i)
+                    }), {
+                      default: c(() => [
+                        t.type === "select" ? (a(!0), y(I, { key: 0 }, U(t.options ?? [], (i) => (a(), h(u(ie), {
+                          key: String(i.value),
+                          label: i.label,
+                          value: i.value
+                        }, null, 8, ["label", "value"]))), 128)) : m("", !0)
+                      ]),
+                      _: 2
+                    }, 1040, ["model-value", "onUpdate:modelValue"])) : Q(t) ? (a(), h(N(t.component), D({
+                      key: 1,
+                      "model-value": d.value[t.key]
+                    }, { ref_for: !0 }, t.componentProps, {
+                      style: u(fe)(t),
+                      class: "ma-search-panel__field--full",
+                      "onUpdate:modelValue": (i) => C(t.key, i)
+                    }), null, 16, ["model-value", "style", "onUpdate:modelValue"])) : F(n.$slots, Y(t), {
+                      key: 2,
+                      item: t,
+                      model: d.value,
+                      update: (i) => C(t.key, i)
+                    }, () => [
+                      W(t) ? (a(), h(N(W(t)), { key: 0 })) : m("", !0)
+                    ])
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["label", "style"]))), 128)),
+              v("div", {
+                class: "ma-search-panel__actions-wrap",
+                style: E({ gridColumn: `${g.value} / ${g.value + 1}` })
+              }, [
+                v("div", xe, [
+                  _(u(K), {
+                    type: "primary",
+                    onClick: S
+                  }, {
+                    icon: c(() => [
+                      _(u(O), { icon: "heroicons:magnifying-glass" })
+                    ]),
+                    default: c(() => [
+                      T(" " + b(e.searchText), 1)
+                    ]),
+                    _: 1
+                  }),
+                  _(u(K), { onClick: H }, {
+                    default: c(() => [
+                      T(b(e.resetText), 1)
+                    ]),
+                    _: 1
+                  }),
+                  M.value ? (a(), h(u(de), {
+                    key: 0,
+                    type: "primary",
+                    underline: "never",
+                    class: "ma-search-panel__fold-toggle",
+                    onClick: l[0] || (l[0] = R((t) => p.value = !p.value, ["prevent"]))
+                  }, {
+                    icon: c(() => [
+                      _(u(O), {
+                        icon: p.value ? "material-symbols:keyboard-arrow-down" : "material-symbols:keyboard-arrow-up"
+                      }, null, 8, ["icon"])
+                    ]),
+                    default: c(() => [
+                      T(b(p.value ? e.foldText : e.unfoldText) + " ", 1)
+                    ]),
+                    _: 1
+                  })) : m("", !0)
+                ])
+              ], 4)
+            ], 4)
+          ]),
+          _: 3
+        }, 8, ["model", "label-width"])
+      ])
+    ]));
+  }
+});
+export {
+  Le as SearchPanel,
+  Le as default,
+  ke as normalizeSearchPanelItems,
+  ye as resolveLabelValue,
+  be as resolveLegacyVNode,
+  ve as resolvePropValue
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus","@iconify/vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.MaSearchPanel={},c.Vue,c.ElementPlus,c.IconifyVue))})(this,(function(c,e,i,w){"use strict";const L={input:i.ElInput,select:i.ElSelect,"date-picker":i.ElDatePicker,"input-number":i.ElInputNumber};function M(n){return L[n]}function z(n){if(n.fullWidth!==!1)return{width:"100%"}}const y={input:"input",select:"select","date-picker":"date-picker",inputNumber:"input-number","input-number":"input-number"};function b(n){return typeof n=="function"?n():n??""}function _(n){return typeof n=="function"?n():n??""}function D(n){return typeof n=="string"&&n in y}function $(n){const a=_(n.prop),l=n.label??a;if(D(n.render))return{key:a,label:l,span:n.span,type:y[n.render],options:n.renderProps?.options,componentProps:n.renderProps};if(typeof n.render=="function"){const f=n.render,s=f();return typeof s=="string"&&s in y?{key:a,label:l,span:n.span,type:y[s],options:n.renderProps?.options,componentProps:n.renderProps}:e.isVNode(s)?{key:a,label:l,span:n.span,type:"slot",slotName:`legacy:${a}`}:{key:a,label:l,span:n.span,type:"component",component:s,componentProps:n.renderProps}}return n.render?{key:a,label:l,span:n.span,type:"component",component:n.render,componentProps:n.renderProps}:{key:a,label:l,span:n.span,type:"input",componentProps:n.renderProps}}function B(n){return n.map(a=>"type"in a&&"key"in a?a:$(a))}function C(n){if("type"in n&&"key"in n||typeof n.render!="function")return null;const a=n.render,l=a();return e.isVNode(l)?l:null}const I={class:"ma-search-panel"},F={key:0,class:"ma-search-panel__card ma-search-panel__header"},W={class:"ma-search-panel__title-wrap"},R={key:0,class:"ma-search-panel__title"},U={key:1,class:"ma-search-panel__subtitle"},j={class:"ma-search-panel__card"},q={class:"ma-search-panel__field ma-search-panel__field--full"},O={class:"ma-search-panel__actions"},N=e.defineComponent({__name:"SearchPanel",props:{items:{},modelValue:{default:()=>({})},defaultValue:{default:()=>({})},title:{},subtitle:{},labelWidth:{default:"90px"},cols:{default:3},fold:{type:Boolean,default:!1},foldRows:{default:1},searchText:{default:"搜索"},resetText:{default:"重置"},foldText:{default:"展开搜索"},unfoldText:{default:"收起搜索"}},emits:["update:modelValue","search","reset"],setup(n,{emit:a}){const l=n,f=a;function s(){const t={};return h.value.forEach(r=>{t[r.key]=l.defaultValue?.[r.key]}),t}const p=e.ref({...s(),...l.modelValue});e.watch(()=>[l.items,l.defaultValue,l.modelValue],()=>{p.value={...s(),...l.modelValue}},{deep:!0});function E(t){p.value=t,f("update:modelValue",t)}const S=e.ref(typeof window>"u"?1440:window.innerWidth),h=e.computed(()=>B(l.items));function K(t){if(typeof t=="number")return t;const r=S.value;return r>=1920?t.xl??4:r>=1200?t.lg??3:r>=992?t.md??2:r>=768?t.sm??2:t.xs??1}function k(){typeof window<"u"&&(S.value=window.innerWidth)}e.onMounted(()=>{k(),typeof window<"u"&&window.addEventListener("resize",k)}),e.onBeforeUnmount(()=>{typeof window<"u"&&window.removeEventListener("resize",k)});const m=e.computed(()=>Math.max(K(l.cols),1)),x=e.computed(()=>Math.max(m.value*l.foldRows-1,0)),u=e.ref(l.fold);e.watch(()=>l.fold,t=>{u.value=t});const P=e.computed(()=>l.items.length>x.value),A=e.computed(()=>u.value&&P.value?h.value.slice(0,x.value):h.value),G=e.computed(()=>({gridTemplateColumns:`repeat(${m.value}, minmax(0, 1fr))`}));function V(t,r){E({...p.value,[t]:r})}function H(){const t=s();E(t),f("reset",t)}function g(){const t={};Object.entries(p.value).forEach(([r,o])=>{o!==""&&o!==void 0&&o!==null&&(t[r]=o)}),f("search",t)}function J(t){return t.type==="input"||t.type==="select"||t.type==="date-picker"||t.type==="input-number"}function Q(t){return t.type==="component"}function X(t){return l.items.find(r=>"type"in r&&"key"in r?r.key===t.key:t.key===(typeof r.prop=="function"?r.prop():r.prop))}function Y(t){return t.type==="slot"?t.slotName:`legacy:${t.key}`}function T(t){const r=X(t);return r?C(r):null}return(t,r)=>(e.openBlock(),e.createElementBlock("div",I,[n.title||n.subtitle||t.$slots.actions?(e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("div",W,[n.title?(e.openBlock(),e.createElementBlock("div",R,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0),n.subtitle?(e.openBlock(),e.createElementBlock("div",U,e.toDisplayString(n.subtitle),1)):e.createCommentVNode("",!0)]),e.renderSlot(t.$slots,"actions")])):e.createCommentVNode("",!0),e.createElementVNode("div",j,[e.createVNode(e.unref(i.ElForm),{model:p.value,"label-width":n.labelWidth,onSubmit:e.withModifiers(g,["prevent"])},{default:e.withCtx(()=>[e.createElementVNode("div",{class:"ma-search-panel__grid",style:e.normalizeStyle(G.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(A.value,o=>(e.openBlock(),e.createBlock(e.unref(i.ElFormItem),{key:o.key,class:"ma-search-panel__item",label:e.unref(b)(o.label),style:e.normalizeStyle(o.span?{gridColumn:`span ${o.span}`}:void 0)},{default:e.withCtx(()=>[e.createElementVNode("div",q,[J(o)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(M)(o.type)),e.mergeProps({key:0,"model-value":p.value[o.key]},{ref_for:!0},o.componentProps,{class:"ma-search-panel__field--full",onKeyup:e.withKeys(g,["enter"]),"onUpdate:modelValue":d=>V(o.key,d)}),{default:e.withCtx(()=>[o.type==="select"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(o.options??[],d=>(e.openBlock(),e.createBlock(e.unref(i.ElOption),{key:String(d.value),label:d.label,value:d.value},null,8,["label","value"]))),128)):e.createCommentVNode("",!0)]),_:2},1040,["model-value","onUpdate:modelValue"])):Q(o)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.component),e.mergeProps({key:1,"model-value":p.value[o.key]},{ref_for:!0},o.componentProps,{style:e.unref(z)(o),class:"ma-search-panel__field--full","onUpdate:modelValue":d=>V(o.key,d)}),null,16,["model-value","style","onUpdate:modelValue"])):e.renderSlot(t.$slots,Y(o),{key:2,item:o,model:p.value,update:d=>V(o.key,d)},()=>[T(o)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(T(o)),{key:0})):e.createCommentVNode("",!0)])])]),_:2},1032,["label","style"]))),128)),e.createElementVNode("div",{class:"ma-search-panel__actions-wrap",style:e.normalizeStyle({gridColumn:`${m.value} / ${m.value+1}`})},[e.createElementVNode("div",O,[e.createVNode(e.unref(i.ElButton),{type:"primary",onClick:g},{icon:e.withCtx(()=>[e.createVNode(e.unref(w.Icon),{icon:"heroicons:magnifying-glass"})]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(n.searchText),1)]),_:1}),e.createVNode(e.unref(i.ElButton),{onClick:H},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.resetText),1)]),_:1}),P.value?(e.openBlock(),e.createBlock(e.unref(i.ElLink),{key:0,type:"primary",underline:"never",class:"ma-search-panel__fold-toggle",onClick:r[0]||(r[0]=e.withModifiers(o=>u.value=!u.value,["prevent"]))},{icon:e.withCtx(()=>[e.createVNode(e.unref(w.Icon),{icon:u.value?"material-symbols:keyboard-arrow-down":"material-symbols:keyboard-arrow-up"},null,8,["icon"])]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.value?n.foldText:n.unfoldText)+" ",1)]),_:1})):e.createCommentVNode("",!0)])],4)],4)]),_:3},8,["model","label-width"])])]))}});c.SearchPanel=N,c.default=N,c.normalizeSearchPanelItems=B,c.resolveLabelValue=b,c.resolveLegacyVNode=C,c.resolvePropValue=_,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/normalize.d.ts

@@ -0,0 +1,6 @@
+import { type VNode } from 'vue';
+import type { SearchPanelItem, SearchPanelLabel, SearchPanelProp, SearchPanelInputItem } from './types';
+export declare function resolveLabelValue(label: SearchPanelLabel | undefined): string;
+export declare function resolvePropValue(prop: SearchPanelProp | undefined): string;
+export declare function normalizeSearchPanelItems(items: SearchPanelInputItem[]): SearchPanelItem[];
+export declare function resolveLegacyVNode(item: SearchPanelInputItem): VNode | VNode[] | null;

package/dist/renderers/adapters.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from 'vue';
+import type { SearchPanelComponentItem } from '../types';
+/**
+ * 库版约定：自定义组件至少要能承接 class/style/attrs 到实际输入控件。
+ * 第一版骨架仅做参数收口，不在这里实现复杂适配器。
+ */
+export declare function resolveComponentStyle(item: SearchPanelComponentItem): CSSProperties | undefined;

package/dist/renderers/builtin.d.ts

@@ -0,0 +1,5 @@
+import { ElOption } from 'element-plus';
+import type { Component } from 'vue';
+import type { SearchPanelBuiltinType } from '../types';
+export declare function getBuiltinRenderer(type: SearchPanelBuiltinType): Component;
+export { ElOption };

package/dist/style.css

@@ -0,0 +1 @@
+.ma-search-panel{display:flex;flex-direction:column;gap:12px}.ma-search-panel__card{background:#fff;border:1px solid #ebeef5;border-radius:8px;padding:16px;box-sizing:border-box}.ma-search-panel__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.ma-search-panel__title-wrap{display:flex;align-items:center;gap:12px}.ma-search-panel__title{font-size:16px;line-height:24px;font-weight:600;color:#303133}.ma-search-panel__subtitle{font-size:13px;line-height:20px;color:#909399}.ma-search-panel__grid{display:grid;gap:12px 16px;align-items:start}.ma-search-panel__item,.ma-search-panel__field,.ma-search-panel__field>*{min-width:0}.ma-search-panel__item{margin-bottom:0}.ma-search-panel__field--full,.ma-search-panel__field--full>*{width:100%}.ma-search-panel__actions-wrap{align-self:start}.ma-search-panel__actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}.ma-search-panel__fold-toggle{flex-shrink:0}

package/dist/types.d.ts

@@ -0,0 +1,71 @@
+import type { CSSProperties, Component, VNode } from 'vue';
+export interface SearchPanelOption {
+    label: string;
+    value: string | number | boolean;
+}
+export type SearchPanelLabel = string | (() => string);
+export type SearchPanelProp = string | (() => string);
+export interface ColsConfig {
+    xl?: number;
+    lg?: number;
+    md?: number;
+    sm?: number;
+    xs?: number;
+}
+export type SearchPanelCols = number | ColsConfig;
+export type SearchPanelBuiltinType = 'input' | 'select' | 'date-picker' | 'input-number';
+export type SearchPanelBuiltinAliasType = SearchPanelBuiltinType | 'inputNumber';
+export type LegacySearchPanelRender = SearchPanelBuiltinAliasType | (() => Component | VNode | string) | Component;
+export interface SearchPanelBaseItem {
+    key: string;
+    label: SearchPanelLabel;
+    span?: number;
+    labelWidth?: string;
+}
+export interface SearchPanelBuiltinItem extends SearchPanelBaseItem {
+    type: SearchPanelBuiltinType;
+    options?: SearchPanelOption[];
+    componentProps?: Record<string, unknown>;
+}
+export interface SearchPanelComponentItem extends SearchPanelBaseItem {
+    type: 'component';
+    component: unknown;
+    componentProps?: Record<string, unknown>;
+    fullWidth?: boolean;
+}
+export interface SearchPanelSlotItem extends SearchPanelBaseItem {
+    type: 'slot';
+    slotName: string;
+}
+export type SearchPanelItem = SearchPanelBuiltinItem | SearchPanelComponentItem | SearchPanelSlotItem;
+export interface LegacySearchPanelItem {
+    label?: SearchPanelLabel;
+    prop?: SearchPanelProp;
+    render?: LegacySearchPanelRender;
+    renderProps?: Record<string, unknown>;
+    span?: number;
+    offset?: number;
+}
+export type SearchPanelInputItem = SearchPanelItem | LegacySearchPanelItem;
+export interface SearchPanelProps {
+    items: SearchPanelInputItem[];
+    modelValue?: Record<string, unknown>;
+    defaultValue?: Record<string, unknown>;
+    title?: string;
+    subtitle?: string;
+    labelWidth?: string;
+    cols?: SearchPanelCols;
+    fold?: boolean;
+    foldRows?: number;
+    searchText?: string;
+    resetText?: string;
+    foldText?: string;
+    unfoldText?: string;
+}
+export interface SearchPanelContext {
+    item: SearchPanelItem;
+    model: Record<string, unknown>;
+    update: (key: string, value: unknown) => void;
+    style?: CSSProperties;
+}
+export type SearchPanelSlotRenderer = (context: SearchPanelContext) => VNode | VNode[] | null;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@mywzzz/mineadmin-search-panel",
+  "version": "1.0.7",
+  "type": "module",
+  "description": "Library-ready search panel component for MineAdmin and Vue 3 projects",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": ["dist"],
+  "sideEffects": ["**/*.css"],
+  "scripts": {
+    "dev": "vite --config vite.config.ts",
+    "typecheck": "vue-tsc --project tsconfig.json --noEmit",
+    "build:types": "vue-tsc --project tsconfig.json --declaration --emitDeclarationOnly --outDir dist",
+    "build": "vite build --config vite.config.ts && npm run build:types",
+    "pack:dry": "npm pack --dry-run",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "vue3",
+    "element-plus",
+    "search-panel",
+    "mineadmin"
+  ],
+  "peerDependencies": {
+    "@iconify/vue": "^4.3.0",
+    "element-plus": "^2.11.8",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4",
+    "vue-tsc": "^2.2.12"
+  }
+}