@farris/ui-vue 1.0.0-beta.1 → 1.0.0-beta.3

package/switch/index.esm.js

@@ -0,0 +1,78 @@
+import { defineComponent as y, toRefs as C, ref as k, computed as a, createVNode as l } from "vue";
+const b = {
+  modelValue: { type: Boolean, default: !1 },
+  disable: { type: Boolean },
+  onBackground: { type: String },
+  offBackground: { type: String },
+  onColor: { type: String },
+  offColor: { type: String },
+  onLabel: { type: String },
+  offLabel: { type: String },
+  size: { type: String, default: "medium" }
+}, r = y({
+  name: "FSwitch",
+  props: b,
+  emits: ["update:modelValue"],
+  setup(o, u) {
+    const {
+      disable: c,
+      size: s,
+      onLabel: e,
+      offLabel: t
+    } = C(o), n = k(o.modelValue);
+    function i() {
+      return "";
+    }
+    function d() {
+      return "";
+    }
+    function m() {
+      return "";
+    }
+    const p = a(() => ({
+      switch: !0,
+      "f-cmp-switch": !0,
+      checked: n.value,
+      disabled: c.value,
+      "switch-large": s.value === "large",
+      "switch-medium": s.value === "medium",
+      "switch-small": s.value === "small"
+    })), h = a(() => ({
+      outline: "none",
+      "backgroud-color": i(),
+      "border-color": d()
+    })), g = a(() => ({
+      background: m()
+    })), v = a(() => (e == null ? void 0 : e.value) || (t == null ? void 0 : t.value));
+    function f(S, B = !0) {
+      c.value || (n.value = !n.value, u.emit("update:modelValue", n.value));
+    }
+    function w(S) {
+      f();
+    }
+    return () => l("span", {
+      tabindex: "0",
+      role: "button",
+      class: p.value,
+      style: h.value,
+      onClick: w
+    }, [v.value && l("span", {
+      class: "switch-pane"
+    }, [l("span", {
+      class: "switch-label-checked"
+    }, [e == null ? void 0 : e.value]), l("span", {
+      class: "switch-label-unchecked"
+    }, [t == null ? void 0 : t.value])]), l("small", {
+      style: g.value
+    }, [u.slots.default && u.slots.default()])]);
+  }
+}), z = {
+  install(o) {
+    o.component(r.name, r);
+  }
+};
+export {
+  r as Switch,
+  z as default,
+  b as switchProps
+};

package/switch/index.umd.js

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.switch={},t.Vue))})(this,function(t,e){"use strict";const c={modelValue:{type:Boolean,default:!1},disable:{type:Boolean},onBackground:{type:String},offBackground:{type:String},onColor:{type:String},offColor:{type:String},onLabel:{type:String},offLabel:{type:String},size:{type:String,default:"medium"}},i=e.defineComponent({name:"FSwitch",props:c,emits:["update:modelValue"],setup(l,s){const{disable:r,size:u,onLabel:o,offLabel:n}=e.toRefs(l),a=e.ref(l.modelValue);function p(){return""}function m(){return""}function f(){return""}const h=e.computed(()=>({switch:!0,"f-cmp-switch":!0,checked:a.value,disabled:r.value,"switch-large":u.value==="large","switch-medium":u.value==="medium","switch-small":u.value==="small"})),g=e.computed(()=>({outline:"none","backgroud-color":p(),"border-color":m()})),w=e.computed(()=>({background:f()})),S=e.computed(()=>(o==null?void 0:o.value)||(n==null?void 0:n.value));function y(C,k=!0){r.value||(a.value=!a.value,s.emit("update:modelValue",a.value))}function v(C){y()}return()=>e.createVNode("span",{tabindex:"0",role:"button",class:h.value,style:g.value,onClick:v},[S.value&&e.createVNode("span",{class:"switch-pane"},[e.createVNode("span",{class:"switch-label-checked"},[o==null?void 0:o.value]),e.createVNode("span",{class:"switch-label-unchecked"},[n==null?void 0:n.value])]),e.createVNode("small",{style:w.value},[s.slots.default&&s.slots.default()])])}}),d={install(l){l.component(i.name,i)}};t.Switch=i,t.default=d,t.switchProps=c,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/switch/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "switch",
+    "version": "1.0.0-beta.4",
+    "main": "index.umd.js",
+    "module": "index.es.js",
+    "style": "style.css"
+}

package/tabs/index.esm.js

@@ -0,0 +1,385 @@
+import { defineComponent as H, shallowRef as D, ref as w, computed as p, provide as ne, onMounted as M, nextTick as S, createVNode as s, Fragment as oe, withDirectives as ie, vModelText as ue, createTextVNode as re, inject as de, getCurrentInstance as ce, onUnmounted as fe, watch as ve } from "vue";
+const pe = {
+  tabType: { type: String, default: "default" },
+  autoTitleWidth: { type: Boolean, default: !1 },
+  titleLength: { type: Number, default: 7 },
+  position: { type: String, default: "top" },
+  showDropDwon: { type: Boolean, default: !1 },
+  showTooltips: { type: Boolean, default: !1 },
+  scrollStep: { type: Number, default: 10 },
+  autoResize: { type: Boolean, default: !1 },
+  closeable: { type: Boolean, default: !1 },
+  selectedTab: { type: String, default: "" },
+  width: { type: Number },
+  height: { type: Number },
+  searchBoxVisible: { type: Boolean, default: !0 },
+  titleWidth: { type: Number, default: 0 },
+  customClass: { type: String, default: "" },
+  activeId: { type: String },
+  fill: { type: Boolean, default: !1 }
+};
+function be(t, m, o) {
+  function i(u) {
+    const f = u.value.findIndex((g) => g.props.show !== !1 && !o.value && !g.props.disabled);
+    !o.value && f !== -1 && (o.value = u.value[f].props.id);
+  }
+  function b(u) {
+    return { width: `${u.tabWidth}px` };
+  }
+  function h(u) {
+    return {
+      "nav-item": !0,
+      "d-none": u.show !== void 0 ? !u.show : !1,
+      "f-state-active": u.id === o.value,
+      "f-state-disable": u.disabled
+    };
+  }
+  function a(u) {
+    return {
+      "nav-link": !0,
+      "tabs-text-truncate": !0,
+      active: u.id === o.value,
+      disabled: u.disabled
+    };
+  }
+  function c(u) {
+    return {
+      "st-tab-text": !0,
+      "farris-title-auto": t.autoTitleWidth
+    };
+  }
+  function T(u) {
+    var g;
+    if (t.autoTitleWidth)
+      return;
+    const f = (g = u.value) == null ? void 0 : g.querySelectorAll(".st-tab-text");
+    if (!!f)
+      for (let y = 0; y < f.length; y++) {
+        const k = f[y].parentNode;
+        f[y].scrollWidth > k.offsetWidth ? f[y].classList.contains("farris-title-text-custom") || f[y].classList.add("farris-title-text-custom") : f[y].classList.remove("farris-title-text-custom");
+      }
+  }
+  function B(u, f) {
+    const g = o.value;
+    o.value = f, m.emit("tabChange", {
+      prevId: g,
+      nextId: o.value
+    }), u.preventDefault(), u.stopPropagation();
+  }
+  return {
+    setActiveId: i,
+    getTabStyle: b,
+    getTabClass: h,
+    getTabNavLinkClass: a,
+    getTabTextClass: c,
+    changeTitleStyle: T,
+    selectTabByTabId: B
+  };
+}
+const V = H({
+  name: "FTabs",
+  props: pe,
+  emits: ["tabChange", "tabRemove"],
+  setup(t, m) {
+    const o = D(), i = D(), b = w(!0), h = w(!0), a = w([]), c = w(t.activeId), T = p(() => {
+      const e = a.value.find((l) => l.props.id === c.value);
+      return e == null ? void 0 : e.slots;
+    }), B = p(() => {
+      const e = a.value.find((n) => n.props.id === c.value);
+      return (e == null ? void 0 : e.props.toolbarPosition) === "inHead";
+    }), u = w("atuo"), f = w(""), {
+      setActiveId: g,
+      getTabStyle: y,
+      getTabClass: k,
+      getTabNavLinkClass: U,
+      getTabTextClass: q,
+      changeTitleStyle: E,
+      selectTabByTabId: I
+    } = be(t, m, c), x = () => {
+      var l;
+      const e = (l = i.value) == null ? void 0 : l.parentElement;
+      !e || !i.value || (e.offsetWidth < i.value.scrollWidth ? b.value = !1 : b.value = !0);
+    }, N = (e) => {
+      e.preventDefault(), e.stopPropagation();
+    }, W = (e, l) => {
+      if (!i.value)
+        return;
+      const n = i.value.scrollLeft, r = i.value.scrollWidth - i.value.offsetWidth;
+      if (l > 0) {
+        if (i.value.scrollLeft >= r)
+          return;
+        i.value.scrollLeft = n + t.scrollStep + e;
+      } else if (l < 0) {
+        if (i.value.scrollLeft <= 0)
+          return;
+        i.value.scrollLeft = n - t.scrollStep - e;
+      }
+    }, P = (e) => {
+      if (b.value || !i.value)
+        return;
+      const l = i.value.querySelectorAll(".nav-item"), {
+        parentElement: n
+      } = i.value, r = l[e];
+      if (r && n) {
+        const d = n.getBoundingClientRect().left, v = n.getBoundingClientRect().right, L = r.getBoundingClientRect().left, C = r.getBoundingClientRect().right;
+        L < d ? W(d - L, -1) : v < C && W(C - v, 1);
+      }
+    }, j = (e) => {
+      a.value.findIndex((n) => n.props.id === e.props.id) === -1 && a.value.push(e), S(() => {
+        x();
+      });
+    }, z = (e) => {
+      a.value.findIndex((n) => n.props.id === e.props.id) !== -1 && (a.value.forEach((n) => {
+        n.props.id === e.props.id && (n = e);
+      }), S(() => {
+        E(i), x();
+      }));
+    };
+    function R(e, l, n = !1) {
+      a.value.findIndex((r) => r.props.id === l), a.value = a.value.filter((r) => r.props.id !== l), c.value === l && (c.value = "", g(a)), N(e), S(() => {
+        E(i), x(), n && (h.value = !0);
+        const r = a.value.findIndex((d) => d.props.id === c.value);
+        P(r), m.emit("tabRemove", {
+          removeIndex: r,
+          removeId: l,
+          activeId: c.value
+        });
+      });
+    }
+    ne("tabs", {
+      activeId: c,
+      addTab: j,
+      updateTab: z,
+      tabs: a
+    });
+    const O = p(() => t.fill || t.tabType === "fill"), _ = p(() => t.tabType === "pills"), $ = p(() => ({
+      "farris-tabs-header": !0,
+      "farris-tabs-inHead": B.value,
+      "farris-tabs-inContent": !B.value,
+      "farris-tabs-nav-fill": O.value,
+      "farris-tabs-nav-pills": _.value
+    })), G = p(() => ({
+      width: B.value && t.titleWidth ? `${t.titleWidth}%` : ""
+    })), J = p(() => ({
+      btn: !0,
+      "sc-nav-btn": !0,
+      "px-1": !0,
+      "sc-nav-lr": !0,
+      "d-none": b.value
+    })), K = p(() => ({
+      "btn-group": !0,
+      "sc-nav-btn": !0,
+      dropdown: !0,
+      "d-none": b.value
+    })), Q = p(() => ({
+      "dropdown-menu": !0,
+      "tabs-pt28": t.searchBoxVisible,
+      show: !h.value
+    })), X = p(() => ({
+      btn: !0,
+      "sc-nav-rg": !0,
+      "d-none": b.value
+    })), Y = () => ({
+      width: u.value
+    }), Z = (e) => ({
+      "dropdown-item": !0,
+      "text-truncate": !0,
+      "px-2": !0,
+      disabled: e.props.disabled,
+      active: e.props.id === c.value,
+      "d-none": e.props.show !== !0
+    }), ee = (e, l) => {
+      if (l.disabled)
+        return;
+      I(e, l.id);
+      const n = a.value.findIndex((r) => r.props.id === l.id);
+      h.value = !0, S(() => {
+        x(), P(n);
+      });
+    }, A = p(() => {
+      var l, n;
+      let e = [];
+      return t.searchBoxVisible ? e = (l = a.value) == null ? void 0 : l.filter((r) => r.props.title.includes(f.value)) : e = (n = a.value) == null ? void 0 : n.slice(), e;
+    }), te = p(() => ({
+      spacer: !0,
+      "f-utils-fill": !0,
+      "spacer-sides-dropdown": !b.value
+    })), le = p(() => ({
+      nav: !0,
+      "farris-nav-tabs": !0,
+      "flex-nowrap": !0,
+      "nav-fill": t.fill || t.tabType === "fill",
+      "nav-pills": t.tabType === "pills",
+      "flex-row": t.position === "top" || t.position === "bottom",
+      "flex-column": t.position === "left" || t.position === "right"
+    })), se = p(() => ({
+      "farris-tabs": !0,
+      "flex-column": t.position === "top",
+      "flex-column-reverse": t.position === "bottom",
+      "flex-row": t.position === "left",
+      "flex-row-reverse": t.position === "right"
+    })), ae = (e, l) => {
+      I(e, l), S(() => {
+        x();
+      });
+    };
+    return M(() => {
+      S(() => {
+        E(i), window.addEventListener("click", (e) => {
+          var l;
+          h.value || (l = o.value) != null && l.contains(e.target) || (h.value = !0);
+        }), window.addEventListener("resize", (e) => {
+          x();
+        });
+      });
+    }), () => {
+      var e, l, n, r;
+      return s(oe, null, [s("div", {
+        class: se.value,
+        ref: o
+      }, [s("div", {
+        class: $.value
+      }, [s("div", {
+        class: "farris-tabs-title scroll-tabs",
+        style: G.value
+      }, [s("button", {
+        title: "left-arrow-button",
+        type: "button",
+        class: J.value,
+        onClick: () => {
+          W(0, -1);
+        }
+      }, null), s("div", {
+        class: te.value,
+        style: "width:100%"
+      }, [s("ul", {
+        class: le.value,
+        ref: i
+      }, [a.value.map((d) => {
+        const v = d.props, L = d.slots.title;
+        return s("li", {
+          class: k(v),
+          style: y(v)
+        }, [s("a", {
+          class: U(v),
+          onClick: (C) => ae(C, v.id)
+        }, [L ? L() : s("span", {
+          class: q(v),
+          title: v.title
+        }, [v.title]), v.removeable && s("span", {
+          class: "st-drop-close",
+          onClick: (C) => R(C, v.id)
+        }, [s("i", {
+          class: "f-icon f-icon-close"
+        }, null)])])]);
+      })])]), s("div", {
+        class: K.value
+      }, [s("button", {
+        title: "right-arrow-button",
+        type: "button",
+        class: X.value,
+        onClick: () => {
+          W(0, 1);
+        }
+      }, null), s("button", {
+        title: "toggle-button",
+        class: "btn dropdown-toggle-split dropdown-toggle",
+        onClick: () => {
+          h.value = !1;
+        }
+      }, null), s("div", {
+        class: Q.value
+      }, [t.searchBoxVisible && s("div", {
+        onClick: (d) => N(d),
+        class: "pb-1 tabs-li-absolute"
+      }, [ie(s("input", {
+        title: "search-box",
+        type: "text",
+        class: "form-control k-textbox",
+        "onUpdate:modelValue": (d) => f.value = d
+      }, null), [[ue, f.value]]), s("span", {
+        class: "f-icon f-icon-page-title-query tabs-icon-search"
+      }, null)]), A.value.length ? s("ul", {
+        class: "tab-dropdown-menu--items",
+        style: Y()
+      }, [A.value.map((d) => s("li", {
+        class: Z(d),
+        onClick: (v) => ee(v, d.props)
+      }, [d.props.removeable && s("span", {
+        class: "float-right st-drop-close",
+        onClick: (v) => R(v, d.props.id, !0)
+      }, [s("i", {
+        class: "f-icon f-icon-close"
+      }, null)]), s("a", {
+        class: "dropdown-title"
+      }, [d.props.title])]))]) : s("div", {
+        class: "dropdown-no-data"
+      }, [re("\u6CA1\u6709\u76F8\u5173\u6570\u636E")])])])]), T.value && s("div", {
+        class: "farris-tabs-toolbar"
+      }, [(l = (e = T.value) == null ? void 0 : e.toolbarExtra) == null ? void 0 : l.call(e)])]), s("div", {
+        class: "farris-tabs-content"
+      }, [(r = (n = m.slots).default) == null ? void 0 : r.call(n)])])]);
+    };
+  }
+}), he = {
+  tabWidth: { type: Number, default: -1 },
+  id: { type: String, default: "" },
+  customTitleClass: { type: String, default: "" },
+  titleOverflow: { type: Boolean, default: !1 },
+  title: { type: String, default: "" },
+  selected: { type: Boolean, default: !1 },
+  disabled: { type: Boolean, default: !1 },
+  removeable: { type: Boolean, default: !1 },
+  show: { type: Boolean, default: !0 },
+  toolbar: { type: Object },
+  toolbarPosition: { type: String, default: "inContent" }
+}, F = H({
+  name: "FTabPage",
+  props: he,
+  emits: [],
+  setup(t, m) {
+    const o = de("tabs");
+    ce();
+    const i = w(!0), b = {
+      slots: m.slots,
+      props: t
+    };
+    M(() => {
+      const a = o == null ? void 0 : o.tabs.value.findIndex((c) => c.props.id === t.id);
+      !a || a === -1 ? o == null || o.addTab(b) : a > -1 && (i.value = !1, console.warn(`\u5DF2\u7ECF\u5B58\u5728id\u4E3A${t.id}\u7684\u9875\u7B7E\u5566`));
+    }), fe(() => {
+    });
+    function h() {
+      return {
+        display: (t == null ? void 0 : t.id) === (o == null ? void 0 : o.activeId.value) ? "" : "none"
+      };
+    }
+    return ve(() => t, (a) => {
+      o == null || o.updateTab({
+        props: a,
+        slots: m.slots
+      });
+    }, {
+      immediate: !0,
+      deep: !0
+    }), () => {
+      var c, T;
+      const a = (T = (c = m.slots).default) == null ? void 0 : T.call(c);
+      return i.value ? s("div", {
+        class: "farris-tab-page",
+        style: h()
+      }, [a]) : null;
+    };
+  }
+}), ge = {
+  install(t) {
+    t.component(V.name, V), t.component(F.name, F);
+  }
+};
+export {
+  F as TabPage,
+  V as Tabs,
+  ge as default,
+  he as tabPageProps,
+  pe as tabsProps
+};

package/tabs/index.umd.js

@@ -0,0 +1 @@
+(function(b,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(b=typeof globalThis<"u"?globalThis:b||self,e(b.tabs={},b.Vue))})(this,function(b,e){"use strict";const L={tabType:{type:String,default:"default"},autoTitleWidth:{type:Boolean,default:!1},titleLength:{type:Number,default:7},position:{type:String,default:"top"},showDropDwon:{type:Boolean,default:!1},showTooltips:{type:Boolean,default:!1},scrollStep:{type:Number,default:10},autoResize:{type:Boolean,default:!1},closeable:{type:Boolean,default:!1},selectedTab:{type:String,default:""},width:{type:Number},height:{type:Number},searchBoxVisible:{type:Boolean,default:!0},titleWidth:{type:Number,default:0},customClass:{type:String,default:""},activeId:{type:String},fill:{type:Boolean,default:!1}},oe="";function M(l,h,n){function i(r){const f=r.value.findIndex(g=>g.props.show!==!1&&!n.value&&!g.props.disabled);!n.value&&f!==-1&&(n.value=r.value[f].props.id)}function m(r){return{width:`${r.tabWidth}px`}}function v(r){return{"nav-item":!0,"d-none":r.show!==void 0?!r.show:!1,"f-state-active":r.id===n.value,"f-state-disable":r.disabled}}function o(r){return{"nav-link":!0,"tabs-text-truncate":!0,active:r.id===n.value,disabled:r.disabled}}function u(r){return{"st-tab-text":!0,"farris-title-auto":l.autoTitleWidth}}function y(r){var g;if(l.autoTitleWidth)return;const f=(g=r.value)==null?void 0:g.querySelectorAll(".st-tab-text");if(!!f)for(let T=0;T<f.length;T++){const k=f[T].parentNode;f[T].scrollWidth>k.offsetWidth?f[T].classList.contains("farris-title-text-custom")||f[T].classList.add("farris-title-text-custom"):f[T].classList.remove("farris-title-text-custom")}}function C(r,f){const g=n.value;n.value=f,h.emit("tabChange",{prevId:g,nextId:n.value}),r.preventDefault(),r.stopPropagation()}return{setActiveId:i,getTabStyle:m,getTabClass:v,getTabNavLinkClass:o,getTabTextClass:u,changeTitleStyle:y,selectTabByTabId:C}}const S=e.defineComponent({name:"FTabs",props:L,emits:["tabChange","tabRemove"],setup(l,h){const n=e.shallowRef(),i=e.shallowRef(),m=e.ref(!0),v=e.ref(!0),o=e.ref([]),u=e.ref(l.activeId),y=e.computed(()=>{const t=o.value.find(a=>a.props.id===u.value);return t==null?void 0:t.slots}),C=e.computed(()=>{const t=o.value.find(s=>s.props.id===u.value);return(t==null?void 0:t.props.toolbarPosition)==="inHead"}),r=e.ref("atuo"),f=e.ref(""),{setActiveId:g,getTabStyle:T,getTabClass:k,getTabNavLinkClass:H,getTabTextClass:j,changeTitleStyle:P,selectTabByTabId:E}=M(l,h,u),x=()=>{var a;const t=(a=i.value)==null?void 0:a.parentElement;!t||!i.value||(t.offsetWidth<i.value.scrollWidth?m.value=!1:m.value=!0)},I=t=>{t.preventDefault(),t.stopPropagation()},V=(t,a)=>{if(!i.value)return;const s=i.value.scrollLeft,d=i.value.scrollWidth-i.value.offsetWidth;if(a>0){if(i.value.scrollLeft>=d)return;i.value.scrollLeft=s+l.scrollStep+t}else if(a<0){if(i.value.scrollLeft<=0)return;i.value.scrollLeft=s-l.scrollStep-t}},R=t=>{if(m.value||!i.value)return;const a=i.value.querySelectorAll(".nav-item"),{parentElement:s}=i.value,d=a[t];if(d&&s){const c=s.getBoundingClientRect().left,p=s.getBoundingClientRect().right,N=d.getBoundingClientRect().left,w=d.getBoundingClientRect().right;N<c?V(c-N,-1):p<w&&V(w-p,1)}},q=t=>{o.value.findIndex(s=>s.props.id===t.props.id)===-1&&o.value.push(t),e.nextTick(()=>{x()})},U=t=>{o.value.findIndex(s=>s.props.id===t.props.id)!==-1&&(o.value.forEach(s=>{s.props.id===t.props.id&&(s=t)}),e.nextTick(()=>{P(i),x()}))};function A(t,a,s=!1){o.value.findIndex(d=>d.props.id===a),o.value=o.value.filter(d=>d.props.id!==a),u.value===a&&(u.value="",g(o)),I(t),e.nextTick(()=>{P(i),x(),s&&(v.value=!0);const d=o.value.findIndex(c=>c.props.id===u.value);R(d),h.emit("tabRemove",{removeIndex:d,removeId:a,activeId:u.value})})}e.provide("tabs",{activeId:u,addTab:q,updateTab:U,tabs:o});const _=e.computed(()=>l.fill||l.tabType==="fill"),O=e.computed(()=>l.tabType==="pills"),z=e.computed(()=>({"farris-tabs-header":!0,"farris-tabs-inHead":C.value,"farris-tabs-inContent":!C.value,"farris-tabs-nav-fill":_.value,"farris-tabs-nav-pills":O.value})),$=e.computed(()=>({width:C.value&&l.titleWidth?`${l.titleWidth}%`:""})),G=e.computed(()=>({btn:!0,"sc-nav-btn":!0,"px-1":!0,"sc-nav-lr":!0,"d-none":m.value})),J=e.computed(()=>({"btn-group":!0,"sc-nav-btn":!0,dropdown:!0,"d-none":m.value})),K=e.computed(()=>({"dropdown-menu":!0,"tabs-pt28":l.searchBoxVisible,show:!v.value})),Q=e.computed(()=>({btn:!0,"sc-nav-rg":!0,"d-none":m.value})),X=()=>({width:r.value}),Y=t=>({"dropdown-item":!0,"text-truncate":!0,"px-2":!0,disabled:t.props.disabled,active:t.props.id===u.value,"d-none":t.props.show!==!0}),Z=(t,a)=>{if(a.disabled)return;E(t,a.id);const s=o.value.findIndex(d=>d.props.id===a.id);v.value=!0,e.nextTick(()=>{x(),R(s)})},D=e.computed(()=>{var a,s;let t=[];return l.searchBoxVisible?t=(a=o.value)==null?void 0:a.filter(d=>d.props.title.includes(f.value)):t=(s=o.value)==null?void 0:s.slice(),t}),ee=e.computed(()=>({spacer:!0,"f-utils-fill":!0,"spacer-sides-dropdown":!m.value})),te=e.computed(()=>({nav:!0,"farris-nav-tabs":!0,"flex-nowrap":!0,"nav-fill":l.fill||l.tabType==="fill","nav-pills":l.tabType==="pills","flex-row":l.position==="top"||l.position==="bottom","flex-column":l.position==="left"||l.position==="right"})),le=e.computed(()=>({"farris-tabs":!0,"flex-column":l.position==="top","flex-column-reverse":l.position==="bottom","flex-row":l.position==="left","flex-row-reverse":l.position==="right"})),ae=(t,a)=>{E(t,a),e.nextTick(()=>{x()})};return e.onMounted(()=>{e.nextTick(()=>{P(i),window.addEventListener("click",t=>{var a;v.value||(a=n.value)!=null&&a.contains(t.target)||(v.value=!0)}),window.addEventListener("resize",t=>{x()})})}),()=>{var t,a,s,d;return e.createVNode(e.Fragment,null,[e.createVNode("div",{class:le.value,ref:n},[e.createVNode("div",{class:z.value},[e.createVNode("div",{class:"farris-tabs-title scroll-tabs",style:$.value},[e.createVNode("button",{title:"left-arrow-button",type:"button",class:G.value,onClick:()=>{V(0,-1)}},null),e.createVNode("div",{class:ee.value,style:"width:100%"},[e.createVNode("ul",{class:te.value,ref:i},[o.value.map(c=>{const p=c.props,N=c.slots.title;return e.createVNode("li",{class:k(p),style:T(p)},[e.createVNode("a",{class:H(p),onClick:w=>ae(w,p.id)},[N?N():e.createVNode("span",{class:j(p),title:p.title},[p.title]),p.removeable&&e.createVNode("span",{class:"st-drop-close",onClick:w=>A(w,p.id)},[e.createVNode("i",{class:"f-icon f-icon-close"},null)])])])})])]),e.createVNode("div",{class:J.value},[e.createVNode("button",{title:"right-arrow-button",type:"button",class:Q.value,onClick:()=>{V(0,1)}},null),e.createVNode("button",{title:"toggle-button",class:"btn dropdown-toggle-split dropdown-toggle",onClick:()=>{v.value=!1}},null),e.createVNode("div",{class:K.value},[l.searchBoxVisible&&e.createVNode("div",{onClick:c=>I(c),class:"pb-1 tabs-li-absolute"},[e.withDirectives(e.createVNode("input",{title:"search-box",type:"text",class:"form-control k-textbox","onUpdate:modelValue":c=>f.value=c},null),[[e.vModelText,f.value]]),e.createVNode("span",{class:"f-icon f-icon-page-title-query tabs-icon-search"},null)]),D.value.length?e.createVNode("ul",{class:"tab-dropdown-menu--items",style:X()},[D.value.map(c=>e.createVNode("li",{class:Y(c),onClick:p=>Z(p,c.props)},[c.props.removeable&&e.createVNode("span",{class:"float-right st-drop-close",onClick:p=>A(p,c.props.id,!0)},[e.createVNode("i",{class:"f-icon f-icon-close"},null)]),e.createVNode("a",{class:"dropdown-title"},[c.props.title])]))]):e.createVNode("div",{class:"dropdown-no-data"},[e.createTextVNode("\u6CA1\u6709\u76F8\u5173\u6570\u636E")])])])]),y.value&&e.createVNode("div",{class:"farris-tabs-toolbar"},[(a=(t=y.value)==null?void 0:t.toolbarExtra)==null?void 0:a.call(t)])]),e.createVNode("div",{class:"farris-tabs-content"},[(d=(s=h.slots).default)==null?void 0:d.call(s)])])])}}}),W={tabWidth:{type:Number,default:-1},id:{type:String,default:""},customTitleClass:{type:String,default:""},titleOverflow:{type:Boolean,default:!1},title:{type:String,default:""},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},removeable:{type:Boolean,default:!1},show:{type:Boolean,default:!0},toolbar:{type:Object},toolbarPosition:{type:String,default:"inContent"}},B=e.defineComponent({name:"FTabPage",props:W,emits:[],setup(l,h){const n=e.inject("tabs");e.getCurrentInstance();const i=e.ref(!0),m={slots:h.slots,props:l};e.onMounted(()=>{const o=n==null?void 0:n.tabs.value.findIndex(u=>u.props.id===l.id);!o||o===-1?n==null||n.addTab(m):o>-1&&(i.value=!1,console.warn(`\u5DF2\u7ECF\u5B58\u5728id\u4E3A${l.id}\u7684\u9875\u7B7E\u5566`))}),e.onUnmounted(()=>{});function v(){return{display:(l==null?void 0:l.id)===(n==null?void 0:n.activeId.value)?"":"none"}}return e.watch(()=>l,o=>{n==null||n.updateTab({props:o,slots:h.slots})},{immediate:!0,deep:!0}),()=>{var u,y;const o=(y=(u=h.slots).default)==null?void 0:y.call(u);return i.value?e.createVNode("div",{class:"farris-tab-page",style:v()},[o]):null}}}),F={install(l){l.component(S.name,S),l.component(B.name,B)}};b.TabPage=B,b.Tabs=S,b.default=F,b.tabPageProps=W,b.tabsProps=L,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/tabs/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "tabs",
+    "version": "1.0.0-beta.4",
+    "main": "index.umd.js",
+    "module": "index.es.js",
+    "style": "style.css"
+}

package/tabs/style.css

@@ -0,0 +1 @@
+.farris-tabs .st-drop-close{line-height:1}.farris-tabs .tabs-li-absolute{padding:4px;margin:0;position:relative}.farris-tabs .farris-tabs-header .dropdown-menu{right:0;left:auto;min-height:80px}.farris-tabs .tabs-li-absolute input{line-height:26px;height:26px;padding-right:24px}.farris-tabs .tabs-icon-search{position:absolute;right:4px;top:50%;font-size:14px;padding:0 4px;width:auto;height:24px;line-height:1;color:#00000040;margin-top:-12px;line-height:20px}.farris-tabs .dropdown-no-data{height:26px;line-height:26px;text-align:center;padding-top:5px}.farris-tabs .farris-tabs-header .farris-tabs-title.scroll-tabs .spacer .farris-nav-tabs .nav-item{flex-shrink:0}

package/text/index.esm.js

@@ -0,0 +1,33 @@
+import { defineComponent as i, ref as e, computed as l, createVNode as p } from "vue";
+const v = {
+  modelValue: { type: String, default: "" }
+}, s = i({
+  name: "FText",
+  props: v,
+  emits: ["update:modelValue"],
+  setup(o, d) {
+    const n = e(!0), t = e(!0), r = e(""), a = e(0), u = e(0), x = e(o.modelValue), c = l(() => ({
+      "f-form-control-text": !n.value,
+      "f-form-context-textarea": n,
+      "f-component-text-auto-size": t.value
+    })), m = l(() => ({
+      textalign: r.value,
+      height: !t.value && a.value > 0 ? `${a.value}px` : "",
+      "min-height": !t.value && a.value > 0 ? `${a.value}px` : "",
+      "max-height": !t.value && u.value > 0 ? `${u.value}px` : ""
+    }));
+    return l(() => ""), () => p("span", {
+      class: c.value,
+      style: m.value
+    }, [x.value]);
+  }
+}), h = {
+  install(o) {
+    o.component(s.name, s);
+  }
+};
+export {
+  s as Text,
+  h as default,
+  v as textProps
+};

package/text/index.umd.js

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.text={},t.Vue))})(this,function(t,e){"use strict";const a={modelValue:{type:String,default:""}},l=e.defineComponent({name:"FText",props:a,emits:["update:modelValue"],setup(u,p){const s=e.ref(!0),n=e.ref(!0),f=e.ref(""),o=e.ref(0),i=e.ref(0),c=e.ref(u.modelValue),d=e.computed(()=>({"f-form-control-text":!s.value,"f-form-context-textarea":s,"f-component-text-auto-size":n.value})),m=e.computed(()=>({textalign:f.value,height:!n.value&&o.value>0?`${o.value}px`:"","min-height":!n.value&&o.value>0?`${o.value}px`:"","max-height":!n.value&&i.value>0?`${i.value}px`:""}));return e.computed(()=>""),()=>e.createVNode("span",{class:d.value,style:m.value},[c.value])}}),r={install(u){u.component(l.name,l)}};t.Text=l,t.default=r,t.textProps=a,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/text/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "text",
+    "version": "1.0.0-beta.4",
+    "main": "index.umd.js",
+    "module": "index.es.js",
+    "style": "style.css"
+}