huiyi-select-table 0.0.2 → 0.0.8

package/huiyi-select-table.mjs

@@ -0,0 +1,127 @@
+import { defineComponent as M, resolveComponent as w, openBlock as g, createElementBlock as x, createVNode as I, unref as _, isRef as j, withDirectives as A, createElementVNode as H, withCtx as F, Fragment as K, renderList as N, createBlock as U, vShow as q } from "vue";
+const Q = { class: "spanDiv" }, $ = /* @__PURE__ */ M({
+  name: "InputSelectCompont",
+  __name: "SelectTable",
+  props: {
+    originalData: Object,
+    showValue: String,
+    columnList: Object
+  },
+  emits: ["slectValue"],
+  setup(o, { emit: u }) {
+    const r = o, a = ref(""), s = ref(!1), t = ref([]), b = ref([]), p = ref(!1), n = ref(-1), v = ref(-1), h = ref(null), d = () => {
+      s.value = !0, a.value ? (t.value = r.originalData.filter((e) => Object.keys(e).some((l) => String(e[l]).toLowerCase().includes(a.value.toLowerCase()))), console.log(t.value), n.value = -1, v.value = -1) : t.value = r.originalData;
+    }, C = u, D = (e) => {
+      b.value = e;
+    }, y = (e) => {
+      b.value = e, e && (a.value = e[r.showValue], s.value = !1), C("slectValue", e);
+    }, V = () => {
+      p.value == !1 && (s.value = !1);
+    }, S = () => {
+      p.value = !0;
+    }, R = () => {
+      p.value = !1;
+    }, T = (e) => {
+      if (console.log(e.key, "event.key "), t.value.length !== 0)
+        if (e.key == "ArrowDown") {
+          e.preventDefault();
+          let l = n.value + 1;
+          l >= t.value.length && (l = 0), console.log(l, "newIndex"), k(l);
+        } else if (e.key == "ArrowUp") {
+          e.preventDefault();
+          let l = n.value - 1;
+          l < 0 && (l = t.value.length - 1), k(l);
+        } else
+          e.key === "Enter" && (e.preventDefault(), s.value == !0 ? O() : d());
+    }, O = () => {
+      if (n.value >= 0) {
+        v.value === n.value ? v.value = -1 : v.value = n.value;
+        const e = t.value;
+        console.log(e[n.value], n.value, "hh[currentHighlightIndex]"), y(t.value[n.value]);
+      }
+    }, k = (e) => {
+      n.value = e, nextTick(() => {
+        if (h.value && t.value.length > 0 && e >= 0 && e < t.value.length) {
+          const c = h.value.$el.querySelectorAll(".el-table__row");
+          console.log(c, "rows"), c.length > 0 && e < c.length && c[e].scrollIntoView({ behavior: "smooth", block: "nearest" }), h.value.setCurrentRow(t.value[n.value]);
+        }
+      });
+    };
+    return (e, l) => {
+      const c = w("el-input"), E = w("el-table-column"), L = w("el-table");
+      return g(), x("span", {
+        class: "spanInput",
+        onMouseover: S,
+        onMouseout: R
+      }, [
+        I(c, {
+          placeholder: "请输入搜索内容",
+          modelValue: _(a),
+          "onUpdate:modelValue": l[0] || (l[0] = (i) => j(a) ? a.value = i : null),
+          id: "filterInput",
+          onInput: d,
+          style: { width: "200px" },
+          onFocus: d,
+          onBlur: V,
+          onKeydown: T
+        }, null, 8, ["modelValue"]),
+        A(H("div", Q, [
+          I(L, {
+            ref_key: "singleTableRef",
+            ref: h,
+            border: "",
+            class: "spanInputTable",
+            "row-class-name": o.originalData,
+            "highlight-current-row": "",
+            data: _(t),
+            style: { width: "300px", height: "230px", position: "fixed" },
+            onCurrentChange: D,
+            onRowClick: y
+          }, {
+            default: F(() => [
+              (g(!0), x(K, null, N(o.columnList, (i, B) => (g(), U(E, {
+                key: B,
+                prop: i.prop,
+                label: i.label,
+                width: i.width,
+                "show-overflow-tooltip": "",
+                align: "center"
+              }, null, 8, ["prop", "label", "width"]))), 128))
+            ]),
+            _: 1
+          }, 8, ["row-class-name", "data"])
+        ], 512), [
+          [q, _(s)]
+        ])
+      ], 32);
+    };
+  }
+});
+const z = (o, u) => {
+  const r = o.__vccOpts || o;
+  for (const [a, s] of u)
+    r[a] = s;
+  return r;
+}, f = /* @__PURE__ */ z($, [["__scopeId", "data-v-e18f660a"]]);
+f.install = (o) => {
+  o.component(f.name, f);
+};
+const G = [
+  f
+], m = function(o) {
+  m.installed || G.forEach((u) => {
+    o.component(u.name, u);
+  });
+};
+typeof window < "u" && window.Vue && m(window.Vue);
+const P = {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install: m,
+  // 以下是具体的组件列表
+  SelectTable: f
+};
+export {
+  f as SelectTable,
+  P as default,
+  m as install
+};

package/huiyi-select-table.umd.js

@@ -0,0 +1 @@
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.HuiyiSelectTable={},s.Vue))})(this,function(s,e){"use strict";const L="",k={class:"spanDiv"},C=e.defineComponent({name:"InputSelectCompont",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object},emits:["slectValue"],setup(a,{emit:i}){const f=a,r=ref(""),c=ref(!1),n=ref([]),m=ref([]),g=ref(!1),o=ref(-1),w=ref(-1),_=ref(null),v=()=>{c.value=!0,r.value?(n.value=f.originalData.filter(l=>Object.keys(l).some(t=>String(l[t]).toLowerCase().includes(r.value.toLowerCase()))),console.log(n.value),o.value=-1,w.value=-1):n.value=f.originalData},I=i,V=l=>{m.value=l},b=l=>{m.value=l,l&&(r.value=l[f.showValue],c.value=!1),I("slectValue",l)},T=()=>{g.value==!1&&(c.value=!1)},D=()=>{g.value=!0},R=()=>{g.value=!1},O=l=>{if(console.log(l.key,"event.key "),n.value.length!==0)if(l.key=="ArrowDown"){l.preventDefault();let t=o.value+1;t>=n.value.length&&(t=0),console.log(t,"newIndex"),y(t)}else if(l.key=="ArrowUp"){l.preventDefault();let t=o.value-1;t<0&&(t=n.value.length-1),y(t)}else l.key==="Enter"&&(l.preventDefault(),c.value==!0?B():v())},B=()=>{if(o.value>=0){w.value===o.value?w.value=-1:w.value=o.value;const l=n.value;console.log(l[o.value],o.value,"hh[currentHighlightIndex]"),b(n.value[o.value])}},y=l=>{o.value=l,nextTick(()=>{if(_.value&&n.value.length>0&&l>=0&&l<n.value.length){const d=_.value.$el.querySelectorAll(".el-table__row");console.log(d,"rows"),d.length>0&&l<d.length&&d[l].scrollIntoView({behavior:"smooth",block:"nearest"}),_.value.setCurrentRow(n.value[o.value])}})};return(l,t)=>{const d=e.resolveComponent("el-input"),E=e.resolveComponent("el-table-column"),M=e.resolveComponent("el-table");return e.openBlock(),e.createElementBlock("span",{class:"spanInput",onMouseover:D,onMouseout:R},[e.createVNode(d,{placeholder:"请输入搜索内容",modelValue:e.unref(r),"onUpdate:modelValue":t[0]||(t[0]=p=>e.isRef(r)?r.value=p:null),id:"filterInput",onInput:v,style:{width:"200px"},onFocus:v,onBlur:T,onKeydown:O},null,8,["modelValue"]),e.withDirectives(e.createElementVNode("div",k,[e.createVNode(M,{ref_key:"singleTableRef",ref:_,border:"",class:"spanInputTable","row-class-name":a.originalData,"highlight-current-row":"",data:e.unref(n),style:{width:"300px",height:"230px",position:"fixed"},onCurrentChange:V,onRowClick:b},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.columnList,(p,j)=>(e.openBlock(),e.createBlock(E,{key:j,prop:p.prop,label:p.label,width:p.width,"show-overflow-tooltip":"",align:"center"},null,8,["prop","label","width"]))),128))]),_:1},8,["row-class-name","data"])],512),[[e.vShow,e.unref(c)]])],32)}}}),H="",u=((a,i)=>{const f=a.__vccOpts||a;for(const[r,c]of i)f[r]=c;return f})(C,[["__scopeId","data-v-e18f660a"]]);u.install=a=>{a.component(u.name,u)};const S=[u],h=function(a){h.installed||S.forEach(i=>{a.component(i.name,i)})};typeof window<"u"&&window.Vue&&h(window.Vue);const x={install:h,SelectTable:u};s.SelectTable=u,s.default=x,s.install=h,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/package.json

@@ -1,27 +1,19 @@
 {
   "name": "huiyi-select-table",
-  "version": "0.0.2",
-  "description": "select,table",
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "main": "dist/huiyi-select-table.umd.js",
-  "module": "dist/huiyi-select-table.es.js",
-  "files": ["dist"],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build --config vite.config.lib.ts && tsc --emitDeclarationOnly --declaration",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "element-plus": "^2.11.7",
-    "vue": "^3.5.24"
-  },
-  "devDependencies": {
-    "@types/node": "^24.10.0",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/tsconfig": "^0.8.1",
-    "typescript": "^5.7.3",
-    "vite": "^7.2.2",
-    "vue-tsc": "^2.2.0"
+  "version": "0.0.8",
+  "description": "A Vue.js select table component",
+  "main": "huiyi-select-table.umd.js",
+  "module": "huiyi-select-table.mjs",
+  "unpkg": "huiyi-select-table.umd.js",
+  "browser": "huiyi-select-table.umd.js",
+  "keywords": [
+    "vue",
+    "component",
+    "select-table"
+  ],
+  "author": "Time Components Up",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
   }
 }

package/style.css

@@ -0,0 +1 @@
+.el-table .warning-row[data-v-e18f660a]{--el-table-tr-bg-color: #141}.spanInput[data-v-e18f660a]{display:inline-block;position:relative}.spanDiv[data-v-e18f660a]{z-index:10000;position:absolute;top:35px;background-color:#fff;height:230px;border:1px solid #eee}

package/README.md

@@ -1,5 +0,0 @@
-# Vue 3 + TypeScript + Vite
-
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/dist/huiyi-select-table.css

@@ -1 +0,0 @@
-.el-table .warning-row[data-v-2d4704ea]{--el-table-tr-bg-color: #141}.spanInput[data-v-2d4704ea]{display:inline-block;position:relative}.spanDiv[data-v-2d4704ea]{z-index:10000;position:absolute;top:35px;background-color:#fff;height:230px;border:1px solid #eee}

package/dist/huiyi-select-table.js

@@ -1,123 +0,0 @@
-import { defineComponent as j, resolveComponent as w, createElementBlock as C, openBlock as g, createVNode as I, withDirectives as A, unref as m, isRef as H, createElementVNode as N, withCtx as F, Fragment as K, renderList as U, createBlock as q, vShow as Q } from "vue";
-const $ = { class: "spanDiv" }, z = /* @__PURE__ */ j({
-  name: "InputSelectCompont",
-  __name: "SelectTable",
-  props: {
-    originalData: Object,
-    showValue: String,
-    columnList: Object
-  },
-  emits: ["slectValue"],
-  setup(n, { emit: u }) {
-    const r = n, a = ref(""), s = ref(!1), t = ref([]), _ = ref([]), p = ref(!1), o = ref(-1), f = ref(-1), h = ref(null), d = () => {
-      s.value = !0, a.value ? (t.value = r.originalData.filter((e) => Object.keys(e).some((l) => String(e[l]).toLowerCase().includes(a.value.toLowerCase()))), console.log(t.value), o.value = -1, f.value = -1) : t.value = r.originalData;
-    }, x = u, D = (e) => {
-      _.value = e;
-    }, k = (e) => {
-      _.value = e, e && (a.value = e[r.showValue], s.value = !1), x("slectValue", e);
-    }, R = () => {
-      p.value == !1 && (s.value = !1);
-    }, S = () => {
-      p.value = !0;
-    }, O = () => {
-      p.value = !1;
-    }, E = (e) => {
-      if (console.log(e.key, "event.key "), t.value.length !== 0)
-        if (e.key == "ArrowDown") {
-          e.preventDefault();
-          let l = o.value + 1;
-          l >= t.value.length && (l = 0), console.log(l, "newIndex"), y(l);
-        } else if (e.key == "ArrowUp") {
-          e.preventDefault();
-          let l = o.value - 1;
-          l < 0 && (l = t.value.length - 1), y(l);
-        } else e.key === "Enter" && (e.preventDefault(), s.value == !0 ? T() : d());
-    }, T = () => {
-      if (o.value >= 0) {
-        f.value === o.value ? f.value = -1 : f.value = o.value;
-        const e = t.value;
-        console.log(e[o.value], o.value, "hh[currentHighlightIndex]"), k(t.value[o.value]);
-      }
-    }, y = (e) => {
-      o.value = e, nextTick(() => {
-        if (h.value && t.value.length > 0 && e >= 0 && e < t.value.length) {
-          const c = h.value.$el.querySelectorAll(".el-table__row");
-          console.log(c, "rows"), c.length > 0 && e < c.length && c[e].scrollIntoView({ behavior: "smooth", block: "nearest" }), h.value.setCurrentRow(t.value[o.value]);
-        }
-      });
-    };
-    return (e, l) => {
-      const c = w("el-input"), L = w("el-table-column"), B = w("el-table");
-      return g(), C("span", {
-        class: "spanInput",
-        onMouseover: S,
-        onMouseout: O
-      }, [
-        I(c, {
-          placeholder: "请输入搜索内容",
-          modelValue: m(a),
-          "onUpdate:modelValue": l[0] || (l[0] = (i) => H(a) ? a.value = i : null),
-          id: "filterInput",
-          onInput: d,
-          style: { width: "200px" },
-          onFocus: d,
-          onBlur: R,
-          onKeydown: E
-        }, null, 8, ["modelValue"]),
-        A(N("div", $, [
-          I(B, {
-            ref_key: "singleTableRef",
-            ref: h,
-            border: "",
-            class: "spanInputTable",
-            "row-class-name": e.tableRowClassName,
-            "highlight-current-row": "",
-            data: m(t),
-            style: { width: "300px", height: "230px", position: "fixed" },
-            onCurrentChange: D,
-            onRowClick: k
-          }, {
-            default: F(() => [
-              (g(!0), C(K, null, U(n.columnList, (i, M) => (g(), q(L, {
-                key: M,
-                prop: i.prop,
-                label: i.label,
-                width: i.width,
-                "show-overflow-tooltip": "",
-                align: "center"
-              }, null, 8, ["prop", "label", "width"]))), 128))
-            ]),
-            _: 1
-          }, 8, ["row-class-name", "data"])
-        ], 512), [
-          [Q, m(s)]
-        ])
-      ], 32);
-    };
-  }
-}), G = (n, u) => {
-  const r = n.__vccOpts || n;
-  for (const [a, s] of u)
-    r[a] = s;
-  return r;
-}, v = /* @__PURE__ */ G(z, [["__scopeId", "data-v-2d4704ea"]]);
-v.install = (n) => {
-  n.component(v.name, v);
-};
-const V = [
-  v
-], b = function(n) {
-  b.installed || V.forEach((u) => {
-    n.component(u.name, u);
-  });
-};
-typeof window < "u" && window.Vue && b(window.Vue);
-const P = {
-  install: b,
-  ...V
-};
-export {
-  v as SelectTable,
-  P as default,
-  b as install
-};

package/dist/huiyi-select-table.umd.cjs

@@ -1 +0,0 @@
-(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a.HuiyiSelectTable={},a.Vue))})(this,(function(a,l){"use strict";const C={class:"spanDiv"},d=((s,c)=>{const i=s.__vccOpts||s;for(const[r,u]of c)i[r]=u;return i})(l.defineComponent({name:"InputSelectCompont",__name:"SelectTable",props:{originalData:Object,showValue:String,columnList:Object},emits:["slectValue"],setup(s,{emit:c}){const i=s,r=ref(""),u=ref(!1),n=ref([]),b=ref([]),g=ref(!1),o=ref(-1),w=ref(-1),m=ref(null),v=()=>{u.value=!0,r.value?(n.value=i.originalData.filter(e=>Object.keys(e).some(t=>String(e[t]).toLowerCase().includes(r.value.toLowerCase()))),console.log(n.value),o.value=-1,w.value=-1):n.value=i.originalData},V=c,S=e=>{b.value=e},y=e=>{b.value=e,e&&(r.value=e[i.showValue],u.value=!1),V("slectValue",e)},x=()=>{g.value==!1&&(u.value=!1)},D=()=>{g.value=!0},T=()=>{g.value=!1},R=e=>{if(console.log(e.key,"event.key "),n.value.length!==0)if(e.key=="ArrowDown"){e.preventDefault();let t=o.value+1;t>=n.value.length&&(t=0),console.log(t,"newIndex"),k(t)}else if(e.key=="ArrowUp"){e.preventDefault();let t=o.value-1;t<0&&(t=n.value.length-1),k(t)}else e.key==="Enter"&&(e.preventDefault(),u.value==!0?O():v())},O=()=>{if(o.value>=0){w.value===o.value?w.value=-1:w.value=o.value;const e=n.value;console.log(e[o.value],o.value,"hh[currentHighlightIndex]"),y(n.value[o.value])}},k=e=>{o.value=e,nextTick(()=>{if(m.value&&n.value.length>0&&e>=0&&e<n.value.length){const f=m.value.$el.querySelectorAll(".el-table__row");console.log(f,"rows"),f.length>0&&e<f.length&&f[e].scrollIntoView({behavior:"smooth",block:"nearest"}),m.value.setCurrentRow(n.value[o.value])}})};return(e,t)=>{const f=l.resolveComponent("el-input"),B=l.resolveComponent("el-table-column"),E=l.resolveComponent("el-table");return l.openBlock(),l.createElementBlock("span",{class:"spanInput",onMouseover:D,onMouseout:T},[l.createVNode(f,{placeholder:"请输入搜索内容",modelValue:l.unref(r),"onUpdate:modelValue":t[0]||(t[0]=p=>l.isRef(r)?r.value=p:null),id:"filterInput",onInput:v,style:{width:"200px"},onFocus:v,onBlur:x,onKeydown:R},null,8,["modelValue"]),l.withDirectives(l.createElementVNode("div",C,[l.createVNode(E,{ref_key:"singleTableRef",ref:m,border:"",class:"spanInputTable","row-class-name":e.tableRowClassName,"highlight-current-row":"",data:l.unref(n),style:{width:"300px",height:"230px",position:"fixed"},onCurrentChange:S,onRowClick:y},{default:l.withCtx(()=>[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(s.columnList,(p,M)=>(l.openBlock(),l.createBlock(B,{key:M,prop:p.prop,label:p.label,width:p.width,"show-overflow-tooltip":"",align:"center"},null,8,["prop","label","width"]))),128))]),_:1},8,["row-class-name","data"])],512),[[l.vShow,l.unref(u)]])],32)}}}),[["__scopeId","data-v-2d4704ea"]]);d.install=s=>{s.component(d.name,d)};const _=[d],h=function(s){h.installed||_.forEach(c=>{s.component(c.name,c)})};typeof window<"u"&&window.Vue&&h(window.Vue);const I={install:h,..._};a.SelectTable=d,a.default=I,a.install=h,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>