@farris/ui-vue 1.0.0-beta.2 → 1.0.0-beta.4

package/combo-list/index.esm.js

@@ -0,0 +1,457 @@
+import { ref as S, watch as R, defineComponent as N, computed as w, createVNode as f, Teleport as K, inject as q, withModifiers as _, withDirectives as G, vModelCheckbox as J, toRefs as Q, reactive as D, provide as U, resolveComponent as W, Fragment as X, mergeProps as Y } from "vue";
+var x = /* @__PURE__ */ ((e) => (e.Text = "text", e.Tag = "tag", e))(x || {}), O = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e.auto = "auto", e))(O || {});
+const Z = {
+  id: { type: String },
+  editable: { default: !1, type: Boolean },
+  disabled: { default: !1, type: Boolean },
+  readonly: { default: !1, type: Boolean },
+  maxLength: { type: Number },
+  placeholder: { type: String },
+  forcePlaceholder: { default: !1, type: Boolean },
+  enableClear: { default: !0, type: Boolean },
+  enableTitle: { default: !0, type: Boolean },
+  viewType: { default: x.Text, type: String },
+  mapFields: { type: Object },
+  data: { type: Array },
+  idField: { default: "id", type: String },
+  valueField: { default: "id", type: String },
+  textField: { default: "label", type: String },
+  multiSelect: { default: !1, type: Boolean },
+  remote: { default: null, type: Object },
+  maxHeight: { default: 350, type: Number },
+  remoteSearch: { default: !1, type: Boolean },
+  hidePanelOnClear: { default: !0, type: Boolean },
+  separator: { default: ",", type: String },
+  displayText: { type: String, default: "" },
+  modelValue: { type: [String, Number] },
+  dropDownIcon: { type: String, default: '<span class="f-icon f-icon-arrow-60-down"></span>' },
+  tabIndex: { type: Number, default: -1 },
+  enableSearch: { type: Boolean, default: !1 },
+  placement: { type: String, default: O.auto }
+}, E = {
+  value: { required: !0, type: [String, Number] },
+  name: { required: !0, type: [String, Number] },
+  disabled: { default: !1, type: Boolean },
+  checked: { default: !1, type: Boolean }
+}, L = {
+  isPanelVisible: { type: Boolean, default: !1 },
+  position: { type: String, default: O.bottom }
+}, ee = {
+  options: {
+    type: Array
+  }
+}, z = Symbol("fComboList"), A = Symbol("fComboListPanel");
+var j = /* @__PURE__ */ ((e) => (e.clear = "clear", e.update = "update:modelValue", e))(j || {}), H = /* @__PURE__ */ ((e) => (e.panelShow = "panelShow", e.panelHidden = "panelHidden", e))(H || {});
+function le(e, n) {
+  const l = S(""), u = S(e.modelValue), t = S(!1), a = S();
+  if (R([a], ([i]) => {
+    if (e.modelValue) {
+      const d = i.find((s) => s[e.valueField] === e.modelValue);
+      d && (l.value = d[e.textField]);
+    }
+  }), e.remote) {
+    const { url: i, method: d = "GET", headers: s = {}, body: y = null } = e.remote;
+    fetch(i, { method: d, headers: s, body: y }).then((v) => {
+      if (v.status === 200)
+        return v.json();
+      throw new Error(v.statusText);
+    }).then((v) => {
+      a.value = v;
+    }).catch((v) => {
+      console.error(v);
+    });
+  } else
+    a.value = e.data;
+  function o(i) {
+    u.value && (u.value = i.value), l.value = i.name, n.emit("update:modelValue", i.value);
+  }
+  return {
+    displayText: l,
+    modelValue: u,
+    isPanelVisible: t,
+    dataSource: a,
+    onValueChange: o
+  };
+}
+function te(e) {
+  const { isPanelVisible: n, context: l, modelValue: u, props: t } = e, a = (p) => {
+    n.value !== !1 && (n.value = !1);
+  }, o = (p) => {
+    n.value !== !1 && (n.value = !1);
+  };
+  R([n], ([p]) => {
+    p ? (window.addEventListener("resize", a), window.addEventListener("scroll", o)) : (window.removeEventListener("resize", a), window.removeEventListener("scroll", o));
+  });
+  function i(p) {
+    u.value = "", t.hidePanelOnClear && (n.value = !1), l.emit(j.update, ""), l.emit(j.clear);
+  }
+  function d(p) {
+    n.value = !n.value;
+  }
+  function s(p) {
+    n.value = !1;
+  }
+  function y(p) {
+    t.editable === !1 && (n.value = !0);
+  }
+  return {
+    onClear: i,
+    onClick: y,
+    onButtonClick: d,
+    onPanelHidden: s
+  };
+}
+const ae = {
+  popupContentPosition: { type: Object, default: { left: 0, top: 0 } }
+}, ne = N({
+  name: "FOverlay",
+  props: ae,
+  emits: ["click"],
+  setup(e, n) {
+    const l = S(e.popupContentPosition);
+    function u(a) {
+      n.emit("click"), a.preventDefault(), a.stopPropagation();
+    }
+    const t = w(() => ({
+      position: "relative",
+      left: `${l.value.left}px`,
+      top: `${l.value.top}px`
+    }));
+    return () => f(K, {
+      to: "body"
+    }, {
+      default: () => {
+        var a, o;
+        return [f("div", {
+          class: "overlay-container",
+          style: "pointer-events: auto;",
+          onClick: (i) => u(i)
+        }, [f("div", {
+          style: t.value
+        }, [(o = (a = n.slots).default) == null ? void 0 : o.call(a)])])];
+      }
+    });
+  }
+});
+function ue() {
+  const e = q(z, null);
+  return {
+    idField: e == null ? void 0 : e.comboListProps.idField,
+    valueField: e == null ? void 0 : e.comboListProps.valueField,
+    textField: e == null ? void 0 : e.comboListProps.textField
+  };
+}
+function oe(e, n) {
+  const l = q(z, null), u = q(A, null), t = S(l == null ? void 0 : l.dataSource), a = (l == null ? void 0 : l.comboListProps.valueField) || "id", o = (l == null ? void 0 : l.comboListProps.textField) || "label", i = (l == null ? void 0 : l.comboListProps.separator) || ",", d = w(() => {
+    var B;
+    return l != null && l.modelValue ? e.value !== void 0 && ((B = l == null ? void 0 : l.modelValue) == null ? void 0 : B.toString().split(i).includes(e.value.toString())) : !1;
+  }), s = w(() => (l == null ? void 0 : l.comboListProps.multiSelect) || !1), y = w(() => e.name || e.value), p = l == null ? void 0 : l.defaultOptionSlot, v = (B) => {
+    var c, r;
+    if (!e.disabled && e.value !== void 0)
+      if (s.value) {
+        const h = (l == null ? void 0 : l.modelValue) || null, m = (h == null ? void 0 : h.toString().split(i)) || [], b = m == null ? void 0 : m.indexOf(e.value.toString());
+        b !== -1 ? m.splice(b, 1) : m.push(e.value.toString());
+        const g = (c = t.value) == null ? void 0 : c.filter((F) => F[a] && m.includes(F[a].toString())), P = g == null ? void 0 : g.map((F) => F[a]).join(i), V = g == null ? void 0 : g.map((F) => F[o]).join(i);
+        l == null || l.onValueChange({
+          value: P,
+          name: V
+        });
+      } else
+        l == null || l.onValueChange({
+          value: e.value,
+          name: e.name
+        }), (r = u == null ? void 0 : u.onPanelItemClick) == null || r.call(u, B);
+  }, k = w(() => s.value ? d.value : (l == null ? void 0 : l.modelValue) === e.value), C = w(() => ({
+    active: k.value,
+    "list-group-item": !0,
+    "list-group-item-action": !0
+  })), T = w(() => ({
+    cursor: e.disabled ? "not-allowed" : "default"
+  }));
+  return {
+    name: y,
+    optionClass: C,
+    isChecked: d,
+    rowStyle: T,
+    multiSelect: s,
+    onOptionClick: v,
+    defaultOptionSlot: p
+  };
+}
+const ie = N({
+  name: "FOption",
+  props: E,
+  emits: [],
+  setup(e, n) {
+    const {
+      name: l,
+      optionClass: u,
+      rowStyle: t,
+      multiSelect: a,
+      onOptionClick: o,
+      isChecked: i,
+      defaultOptionSlot: d
+    } = oe(e);
+    return () => f("li", {
+      style: t.value,
+      class: u.value,
+      onClick: _(o, ["prevent", "stop"])
+    }, [a.value && f("div", {
+      class: "custom-control custom-checkbox  custom-control-inline",
+      style: "margin:0;padding-right:0;float:none;vertical-align: top;"
+    }, [G(f("input", {
+      class: "custom-control-input",
+      type: "checkbox",
+      title: "custom-input",
+      disabled: e.disabled,
+      "onUpdate:modelValue": (s) => i.value = s
+    }, null), [[J, i.value]]), f("label", {
+      class: "custom-control-label"
+    }, null)]), f("span", {
+      class: "f-datalist-item-text"
+    }, [d ? d({
+      name: l.value
+    }) : l.value])]);
+  }
+}), re = N({
+  name: "FOptions",
+  props: ee,
+  emits: [],
+  setup(e, n) {
+    const {
+      valueField: l = "id",
+      textField: u = "label"
+    } = ue();
+    return () => {
+      var t;
+      return f("ul", {
+        class: "list-group list-group-flush"
+      }, [(t = e == null ? void 0 : e.options) == null ? void 0 : t.map((a) => f(ie, {
+        value: a[l],
+        name: a[u],
+        disabled: a.disabled
+      }, null))]);
+    };
+  }
+});
+function de(e) {
+  const { isPanelVisible: n, panelRef: l, context: u } = e, t = q(z, null), a = S((t == null ? void 0 : t.comboListProps.maxHeight) || 350), o = (t == null ? void 0 : t.comboListProps.valueField) || "id", i = (t == null ? void 0 : t.comboListProps.textField) || "label", d = (t == null ? void 0 : t.comboListProps.placement) || O.bottom, s = S(t == null ? void 0 : t.dataSource), y = S(t == null ? void 0 : t.dataSource), p = S(""), v = w(() => (t == null ? void 0 : t.comboListProps.enableSearch) || !1), k = w(() => ({
+    "z-index": 99999,
+    position: "absolute",
+    background: "#fff",
+    border: "solid 1px #ededed"
+  })), C = w(() => ({
+    "max-height": v.value ? a.value - 36 + "px" : a.value + "px",
+    overflow: "auto",
+    border: "none"
+  })), T = w(() => ({
+    comboPanel: !0,
+    "f-area-hide": !n.value,
+    "f-area-show": n.value
+  })), B = (c, r, h = O.bottom) => {
+    var F;
+    const m = ((F = c == null ? void 0 : c.getBoundingClientRect()) == null ? void 0 : F.height) || 350, b = r.bottom || 0, g = document.body.offsetHeight, P = (r == null ? void 0 : r.top) || 0, V = (r == null ? void 0 : r.height) || 0;
+    if (c.style.left = (r == null ? void 0 : r.left) + "px", c.style.width = (r == null ? void 0 : r.width) + "px", h === O.bottom || h === O.auto) {
+      c.style.top = P + V + "px";
+      const I = g - b, $ = m <= I ? m : I;
+      a.value = $;
+    } else if (h === O.top) {
+      const I = P, $ = m <= I ? m : I;
+      c.style.top = P - $ + "px", a.value = $;
+    }
+  };
+  return R([l, n], ([c, r]) => {
+    var h, m;
+    if (r && c) {
+      const b = t == null ? void 0 : t.comboListRef, g = (m = (h = b == null ? void 0 : b.$el) == null ? void 0 : h.parentNode) == null ? void 0 : m.querySelector(".input-group");
+      if (v.value) {
+        const V = c.querySelector("input");
+        V && V.focus();
+      }
+      const P = g == null ? void 0 : g.getBoundingClientRect();
+      B(c, P, d), u.emit(H.panelShow);
+    }
+  }), R([p], ([c]) => {
+    ce(() => {
+      var r;
+      if (!c)
+        return s.value = y.value;
+      s.value = (r = y == null ? void 0 : y.value) == null ? void 0 : r.filter(
+        (h) => {
+          var m, b;
+          return ((m = h[o]) == null ? void 0 : m.startsWith(c)) || h[o].toString().startsWith(c) || ((b = h[i]) == null ? void 0 : b.startsWith(c));
+        }
+      );
+    }, 500)();
+  }), {
+    panelStyle: k,
+    panelClass: T,
+    cardStyle: C,
+    enableSearch: v,
+    keyword: p,
+    items: s
+  };
+}
+function se(e) {
+  const { context: n } = e;
+  function l(o) {
+    n.emit(H.panelHidden);
+  }
+  function u(o) {
+    n.emit(H.panelHidden);
+  }
+  function t(o) {
+  }
+  function a(o) {
+  }
+  return {
+    onPanelContainerClick: l,
+    onPanelItemClick: u,
+    onSearchClick: t,
+    onPanelClick: a
+  };
+}
+function ce(e, n = 300) {
+  let l;
+  return (...u) => {
+    clearTimeout(l), l = window.setTimeout(() => {
+      e(u);
+    }, n);
+  };
+}
+const fe = N({
+  name: "FPanel",
+  props: L,
+  emits: [H.panelHidden, H.panelShow],
+  setup(e, n) {
+    const l = S(), {
+      isPanelVisible: u
+    } = Q(e), {
+      panelStyle: t,
+      panelClass: a,
+      cardStyle: o,
+      enableSearch: i,
+      keyword: d,
+      items: s
+    } = de({
+      isPanelVisible: u,
+      props: e,
+      panelRef: l,
+      context: n
+    }), {
+      onPanelContainerClick: y,
+      onPanelItemClick: p,
+      onSearchClick: v,
+      onPanelClick: k
+    } = se({
+      panelRef: l,
+      isPanelVisible: u,
+      context: n
+    }), C = D({
+      onPanelItemClick: p
+    });
+    return U(A, C), () => u.value && f(ne, {
+      onClick: y
+    }, {
+      default: () => [f("div", {
+        class: a.value,
+        ref: l,
+        style: t.value,
+        onClick: _(k, ["prevent", "stop"])
+      }, [i.value && f(W("f-button-edit"), {
+        enableClear: !0,
+        style: "padding:5px 10px",
+        buttonContent: "<i class='f-icon f-icon-search'></i>",
+        modelValue: d.value,
+        "onUpdate:modelValue": (T) => d.value = T,
+        onClickButton: v
+      }, null), f("div", {
+        style: "position: relative;",
+        class: "f-datalist"
+      }, [f("div", {
+        class: "card",
+        style: o.value
+      }, [f(re, {
+        options: s.value
+      }, null)])])])]
+    });
+  }
+}), M = N({
+  name: "FComboList",
+  props: Z,
+  emits: [j.clear, j.update],
+  setup(e, n) {
+    const l = S(), {
+      onValueChange: u,
+      displayText: t,
+      modelValue: a,
+      isPanelVisible: o,
+      dataSource: i
+    } = le(e, n), {
+      onClear: d,
+      onButtonClick: s,
+      onPanelHidden: y,
+      onClick: p
+    } = te({
+      props: e,
+      context: n,
+      isPanelVisible: o,
+      modelValue: a
+    }), v = D({
+      comboListRef: l,
+      isPanelVisible: o,
+      comboListProps: e,
+      onValueChange: u,
+      modelValue: a,
+      dataSource: i,
+      defaultOptionSlot: n.slots.default
+    });
+    return U(z, v), () => f(X, null, [f(W("f-button-edit"), Y({
+      ref: l,
+      id: e.id,
+      class: {
+        active: o
+      }
+    }, n.attrs, {
+      disable: e.disabled,
+      readonly: e.readonly,
+      forcePlaceholder: e.forcePlaceholder,
+      editable: e.editable,
+      buttonContent: e.dropDownIcon,
+      placeholder: e.placeholder,
+      enableClear: e.enableClear,
+      maxLength: e.maxLength,
+      tabIndex: e.tabIndex,
+      enableTitle: e.enableTitle,
+      style: "display:block",
+      modelValue: t.value,
+      "onUpdate:modelValue": (k) => t.value = k,
+      onClear: d,
+      onClick: p,
+      onClickButton: s
+    }), null), o.value && f(fe, {
+      isPanelVisible: o.value,
+      onPanelHidden: y
+    }, null)]);
+  }
+}), ve = {
+  install(e) {
+    e.component(M.name, M);
+  }
+};
+export {
+  M as FComboList,
+  O as Placement,
+  x as ViewType,
+  Z as comboListProps,
+  ce as debounce,
+  ve as default,
+  E as optionProps,
+  ee as optionsProps,
+  L as panelProps,
+  le as useComboList,
+  te as useComboListEvent,
+  oe as useOption,
+  de as usePanel,
+  se as usePanelEvent
+};

package/combo-list/index.umd.js

@@ -0,0 +1 @@
+(function(c,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(c=typeof globalThis<"u"?globalThis:c||self,t(c["combo-list"]={},c.Vue))})(this,function(c,t){"use strict";var $=(e=>(e.Text="text",e.Tag="tag",e))($||{}),V=(e=>(e.top="top",e.bottom="bottom",e.auto="auto",e))(V||{});const M={id:{type:String},editable:{default:!1,type:Boolean},disabled:{default:!1,type:Boolean},readonly:{default:!1,type:Boolean},maxLength:{type:Number},placeholder:{type:String},forcePlaceholder:{default:!1,type:Boolean},enableClear:{default:!0,type:Boolean},enableTitle:{default:!0,type:Boolean},viewType:{default:$.Text,type:String},mapFields:{type:Object},data:{type:Array},idField:{default:"id",type:String},valueField:{default:"id",type:String},textField:{default:"label",type:String},multiSelect:{default:!1,type:Boolean},remote:{default:null,type:Object},maxHeight:{default:350,type:Number},remoteSearch:{default:!1,type:Boolean},hidePanelOnClear:{default:!0,type:Boolean},separator:{default:",",type:String},displayText:{type:String,default:""},modelValue:{type:[String,Number]},dropDownIcon:{type:String,default:'<span class="f-icon f-icon-arrow-60-down"></span>'},tabIndex:{type:Number,default:-1},enableSearch:{type:Boolean,default:!1},placement:{type:String,default:V.auto}},R={value:{required:!0,type:[String,Number]},name:{required:!0,type:[String,Number]},disabled:{default:!1,type:Boolean},checked:{default:!1,type:Boolean}},_={isPanelVisible:{type:Boolean,default:!1},position:{type:String,default:V.bottom}},z={options:{type:Array}},j=Symbol("fComboList"),D=Symbol("fComboListPanel");var N=(e=>(e.clear="clear",e.update="update:modelValue",e))(N||{}),k=(e=>(e.panelShow="panelShow",e.panelHidden="panelHidden",e))(k||{});function U(e,o){const l=t.ref(""),i=t.ref(e.modelValue),n=t.ref(!1),a=t.ref();if(t.watch([a],([r])=>{if(e.modelValue){const s=r.find(f=>f[e.valueField]===e.modelValue);s&&(l.value=s[e.textField])}}),e.remote){const{url:r,method:s="GET",headers:f={},body:b=null}=e.remote;fetch(r,{method:s,headers:f,body:b}).then(y=>{if(y.status===200)return y.json();throw new Error(y.statusText)}).then(y=>{a.value=y}).catch(y=>{console.error(y)})}else a.value=e.data;function d(r){i.value&&(i.value=r.value),l.value=r.name,o.emit("update:modelValue",r.value)}return{displayText:l,modelValue:i,isPanelVisible:n,dataSource:a,onValueChange:d}}function W(e){const{isPanelVisible:o,context:l,modelValue:i,props:n}=e,a=m=>{o.value!==!1&&(o.value=!1)},d=m=>{o.value!==!1&&(o.value=!1)};t.watch([o],([m])=>{m?(window.addEventListener("resize",a),window.addEventListener("scroll",d)):(window.removeEventListener("resize",a),window.removeEventListener("scroll",d))});function r(m){i.value="",n.hidePanelOnClear&&(o.value=!1),l.emit(N.update,""),l.emit(N.clear)}function s(m){o.value=!o.value}function f(m){o.value=!1}function b(m){n.editable===!1&&(o.value=!0)}return{onClear:r,onClick:b,onButtonClick:s,onPanelHidden:f}}const Q={popupContentPosition:{type:Object,default:{left:0,top:0}}},X=t.defineComponent({name:"FOverlay",props:Q,emits:["click"],setup(e,o){const l=t.ref(e.popupContentPosition);function i(a){o.emit("click"),a.preventDefault(),a.stopPropagation()}const n=t.computed(()=>({position:"relative",left:`${l.value.left}px`,top:`${l.value.top}px`}));return()=>t.createVNode(t.Teleport,{to:"body"},{default:()=>{var a,d;return[t.createVNode("div",{class:"overlay-container",style:"pointer-events: auto;",onClick:r=>i(r)},[t.createVNode("div",{style:n.value},[(d=(a=o.slots).default)==null?void 0:d.call(a)])])]}})}});function Y(){const e=t.inject(j,null);return{idField:e==null?void 0:e.comboListProps.idField,valueField:e==null?void 0:e.comboListProps.valueField,textField:e==null?void 0:e.comboListProps.textField}}function A(e,o){const l=t.inject(j,null),i=t.inject(D,null),n=t.ref(l==null?void 0:l.dataSource),a=(l==null?void 0:l.comboListProps.valueField)||"id",d=(l==null?void 0:l.comboListProps.textField)||"label",r=(l==null?void 0:l.comboListProps.separator)||",",s=t.computed(()=>{var O;return l!=null&&l.modelValue?e.value!==void 0&&((O=l==null?void 0:l.modelValue)==null?void 0:O.toString().split(r).includes(e.value.toString())):!1}),f=t.computed(()=>(l==null?void 0:l.comboListProps.multiSelect)||!1),b=t.computed(()=>e.name||e.value),m=l==null?void 0:l.defaultOptionSlot,y=O=>{var p,u;if(!e.disabled&&e.value!==void 0)if(f.value){const g=(l==null?void 0:l.modelValue)||null,h=(g==null?void 0:g.toString().split(r))||[],v=h==null?void 0:h.indexOf(e.value.toString());v!==-1?h.splice(v,1):h.push(e.value.toString());const S=(p=n.value)==null?void 0:p.filter(w=>w[a]&&h.includes(w[a].toString())),F=S==null?void 0:S.map(w=>w[a]).join(r),C=S==null?void 0:S.map(w=>w[d]).join(r);l==null||l.onValueChange({value:F,name:C})}else l==null||l.onValueChange({value:e.value,name:e.name}),(u=i==null?void 0:i.onPanelItemClick)==null||u.call(i,O)},P=t.computed(()=>f.value?s.value:(l==null?void 0:l.modelValue)===e.value),B=t.computed(()=>({active:P.value,"list-group-item":!0,"list-group-item-action":!0})),H=t.computed(()=>({cursor:e.disabled?"not-allowed":"default"}));return{name:b,optionClass:B,isChecked:s,rowStyle:H,multiSelect:f,onOptionClick:y,defaultOptionSlot:m}}const Z=t.defineComponent({name:"FOption",props:R,emits:[],setup(e,o){const{name:l,optionClass:i,rowStyle:n,multiSelect:a,onOptionClick:d,isChecked:r,defaultOptionSlot:s}=A(e);return()=>t.createVNode("li",{style:n.value,class:i.value,onClick:t.withModifiers(d,["prevent","stop"])},[a.value&&t.createVNode("div",{class:"custom-control custom-checkbox  custom-control-inline",style:"margin:0;padding-right:0;float:none;vertical-align: top;"},[t.withDirectives(t.createVNode("input",{class:"custom-control-input",type:"checkbox",title:"custom-input",disabled:e.disabled,"onUpdate:modelValue":f=>r.value=f},null),[[t.vModelCheckbox,r.value]]),t.createVNode("label",{class:"custom-control-label"},null)]),t.createVNode("span",{class:"f-datalist-item-text"},[s?s({name:l.value}):l.value])])}}),E=t.defineComponent({name:"FOptions",props:z,emits:[],setup(e,o){const{valueField:l="id",textField:i="label"}=Y();return()=>{var n;return t.createVNode("ul",{class:"list-group list-group-flush"},[(n=e==null?void 0:e.options)==null?void 0:n.map(a=>t.createVNode(Z,{value:a[l],name:a[i],disabled:a.disabled},null))])}}});function K(e){const{isPanelVisible:o,panelRef:l,context:i}=e,n=t.inject(j,null),a=t.ref((n==null?void 0:n.comboListProps.maxHeight)||350),d=(n==null?void 0:n.comboListProps.valueField)||"id",r=(n==null?void 0:n.comboListProps.textField)||"label",s=(n==null?void 0:n.comboListProps.placement)||V.bottom,f=t.ref(n==null?void 0:n.dataSource),b=t.ref(n==null?void 0:n.dataSource),m=t.ref(""),y=t.computed(()=>(n==null?void 0:n.comboListProps.enableSearch)||!1),P=t.computed(()=>({"z-index":99999,position:"absolute",background:"#fff",border:"solid 1px #ededed"})),B=t.computed(()=>({"max-height":y.value?a.value-36+"px":a.value+"px",overflow:"auto",border:"none"})),H=t.computed(()=>({comboPanel:!0,"f-area-hide":!o.value,"f-area-show":o.value})),O=(p,u,g=V.bottom)=>{var w;const h=((w=p==null?void 0:p.getBoundingClientRect())==null?void 0:w.height)||350,v=u.bottom||0,S=document.body.offsetHeight,F=(u==null?void 0:u.top)||0,C=(u==null?void 0:u.height)||0;if(p.style.left=(u==null?void 0:u.left)+"px",p.style.width=(u==null?void 0:u.width)+"px",g===V.bottom||g===V.auto){p.style.top=F+C+"px";const T=S-v,I=h<=T?h:T;a.value=I}else if(g===V.top){const T=F,I=h<=T?h:T;p.style.top=F-I+"px",a.value=I}};return t.watch([l,o],([p,u])=>{var g,h;if(u&&p){const v=n==null?void 0:n.comboListRef,S=(h=(g=v==null?void 0:v.$el)==null?void 0:g.parentNode)==null?void 0:h.querySelector(".input-group");if(y.value){const C=p.querySelector("input");C&&C.focus()}const F=S==null?void 0:S.getBoundingClientRect();O(p,F,s),i.emit(k.panelShow)}}),t.watch([m],([p])=>{J(()=>{var u;if(!p)return f.value=b.value;f.value=(u=b==null?void 0:b.value)==null?void 0:u.filter(g=>{var h,v;return((h=g[d])==null?void 0:h.startsWith(p))||g[d].toString().startsWith(p)||((v=g[r])==null?void 0:v.startsWith(p))})},500)()}),{panelStyle:P,panelClass:H,cardStyle:B,enableSearch:y,keyword:m,items:f}}function G(e){const{context:o}=e;function l(d){o.emit(k.panelHidden)}function i(d){o.emit(k.panelHidden)}function n(d){}function a(d){}return{onPanelContainerClick:l,onPanelItemClick:i,onSearchClick:n,onPanelClick:a}}function J(e,o=300){let l;return(...i)=>{clearTimeout(l),l=window.setTimeout(()=>{e(i)},o)}}const x=t.defineComponent({name:"FPanel",props:_,emits:[k.panelHidden,k.panelShow],setup(e,o){const l=t.ref(),{isPanelVisible:i}=t.toRefs(e),{panelStyle:n,panelClass:a,cardStyle:d,enableSearch:r,keyword:s,items:f}=K({isPanelVisible:i,props:e,panelRef:l,context:o}),{onPanelContainerClick:b,onPanelItemClick:m,onSearchClick:y,onPanelClick:P}=G({panelRef:l,isPanelVisible:i,context:o}),B=t.reactive({onPanelItemClick:m});return t.provide(D,B),()=>i.value&&t.createVNode(X,{onClick:b},{default:()=>[t.createVNode("div",{class:a.value,ref:l,style:n.value,onClick:t.withModifiers(P,["prevent","stop"])},[r.value&&t.createVNode(t.resolveComponent("f-button-edit"),{enableClear:!0,style:"padding:5px 10px",buttonContent:"<i class='f-icon f-icon-search'></i>",modelValue:s.value,"onUpdate:modelValue":H=>s.value=H,onClickButton:y},null),t.createVNode("div",{style:"position: relative;",class:"f-datalist"},[t.createVNode("div",{class:"card",style:d.value},[t.createVNode(E,{options:f.value},null)])])])]})}}),q=t.defineComponent({name:"FComboList",props:M,emits:[N.clear,N.update],setup(e,o){const l=t.ref(),{onValueChange:i,displayText:n,modelValue:a,isPanelVisible:d,dataSource:r}=U(e,o),{onClear:s,onButtonClick:f,onPanelHidden:b,onClick:m}=W({props:e,context:o,isPanelVisible:d,modelValue:a}),y=t.reactive({comboListRef:l,isPanelVisible:d,comboListProps:e,onValueChange:i,modelValue:a,dataSource:r,defaultOptionSlot:o.slots.default});return t.provide(j,y),()=>t.createVNode(t.Fragment,null,[t.createVNode(t.resolveComponent("f-button-edit"),t.mergeProps({ref:l,id:e.id,class:{active:d}},o.attrs,{disable:e.disabled,readonly:e.readonly,forcePlaceholder:e.forcePlaceholder,editable:e.editable,buttonContent:e.dropDownIcon,placeholder:e.placeholder,enableClear:e.enableClear,maxLength:e.maxLength,tabIndex:e.tabIndex,enableTitle:e.enableTitle,style:"display:block",modelValue:n.value,"onUpdate:modelValue":P=>n.value=P,onClear:s,onClick:m,onClickButton:f}),null),d.value&&t.createVNode(x,{isPanelVisible:d.value,onPanelHidden:b},null)])}}),L={install(e){e.component(q.name,q)}};c.FComboList=q,c.Placement=V,c.ViewType=$,c.comboListProps=M,c.debounce=J,c.default=L,c.optionProps=R,c.optionsProps=z,c.panelProps=_,c.useComboList=U,c.useComboListEvent=W,c.useOption=A,c.usePanel=K,c.usePanelEvent=G,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/combo-list/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "combo-list",
+    "version": "1.0.0-beta.5",
+    "main": "index.umd.js",
+    "module": "index.es.js",
+    "style": "style.css",
+    "types": "../types/combo-list/index.d.ts"
+}