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

package/button-edit/index.esm.js

@@ -0,0 +1,300 @@
+import { computed as d, watch as P, ref as g, defineComponent as E, createVNode as f, Teleport as H, Fragment as _, mergeProps as q, withDirectives as z, vShow as J } from "vue";
+const Q = {
+  id: String,
+  buttonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
+  autoComplete: { type: Boolean, default: !1 },
+  customClass: { type: String, default: "" },
+  disable: { type: Boolean, default: !1 },
+  editable: { type: Boolean, default: !0 },
+  enableClear: { type: Boolean, default: !1 },
+  modelValue: { type: String, default: "" },
+  readonly: { type: Boolean, default: !1 },
+  textAlign: { type: String, default: "left" },
+  showButtonWhenDisabled: { type: Boolean, default: !1 },
+  enableTitle: { type: Boolean, default: !1 },
+  inputType: { type: String, default: "text" },
+  forcePlaceholder: { type: Boolean, default: !1 },
+  placeholder: { type: String, default: "" },
+  minLength: Number,
+  maxLength: Number,
+  tabIndex: Number
+};
+function X(e, n, o) {
+  const r = d(() => ({
+    "input-group-append": !0,
+    "append-force-show": e.showButtonWhenDisabled && (e.readonly || e.disable)
+  })), a = d(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable);
+  function l(i) {
+    a.value && (o.value = !0, n.emit("clickButton", { origin: i, value: e.modelValue })), i.stopPropagation();
+  }
+  function u(i) {
+    n.emit("mouseEnterIcon", i);
+  }
+  function s(i) {
+    n.emit("mouseLeaveIcon", i);
+  }
+  function c() {
+    n.emit("mouseOverButton");
+  }
+  return {
+    buttonClass: r,
+    onClickButton: l,
+    onMouseEnterButton: u,
+    onMouseLeaveButton: s,
+    onMouseOverButton: c
+  };
+}
+function I(e, n, o, r) {
+  const a = d(() => e.enableTitle ? o.value : ""), l = d(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), u = d(() => e.readonly || !e.editable);
+  let s = !1;
+  const c = d(() => !e.disable && s), i = d(() => ({
+    "text-left": e.textAlign === "left",
+    "text-center": e.textAlign === "center",
+    "text-right": e.textAlign === "right",
+    "form-control": !0,
+    "f-utils-fill": !0
+  }));
+  function B(t, x = !0) {
+    o.value !== t && (o.value = t, x && n.emit("change", t), n.emit("update:modelValue", t));
+  }
+  P(
+    () => e.modelValue,
+    (t) => {
+      o.value = t, n.emit("change", t);
+    }
+  );
+  function m(t) {
+    s = !1, n.emit("blur", t), t.stopPropagation();
+  }
+  function v(t) {
+    n.emit("click", t);
+  }
+  function y(t) {
+    if (e.disable) {
+      s = !0;
+      return;
+    }
+    s = !0, u.value || n.emit("focus", t);
+  }
+  function b(t) {
+    n.emit("input", t.target.value);
+    const x = t.target.value;
+    r.value = x, o.value !== x && B(x, !1);
+  }
+  function T(t) {
+    t.target.tagName !== "INPUT" && t.preventDefault(), t.stopPropagation();
+  }
+  function p(t) {
+    n.emit("keydown", t);
+  }
+  function k(t) {
+    n.emit("keyup", t);
+  }
+  function w(t) {
+    const x = t.target.value;
+    B(x);
+  }
+  return {
+    hasFocusedTextBox: c,
+    isTextBoxReadonly: u,
+    textBoxClass: i,
+    textBoxPlaceholder: l,
+    textBoxTitle: a,
+    changeTextBoxValue: B,
+    onBlurTextBox: m,
+    onClickTextBox: v,
+    onFocusTextBox: y,
+    onInput: b,
+    onKeyDownTextBox: p,
+    onKeyUpTextBox: k,
+    onMouseDownTextBox: T,
+    onTextBoxValueChange: w
+  };
+}
+function Y(e, n, o, r, a) {
+  const l = g(!1), u = d(() => e.enableClear && !e.readonly && !e.disable), { changeTextBoxValue: s } = I(e, n, o, a);
+  function c(v) {
+    l.value = v;
+  }
+  P(a, () => {
+    r.value ? c(!!a.value) : c(!1);
+  });
+  function i(v) {
+    const y = !e.readonly && !e.disable && e.editable, b = !e.editable;
+    v.stopPropagation(), (y || b) && (s("", !1), c(!l.value), n.emit("clear"));
+  }
+  function B(v) {
+    if (!!u.value) {
+      if (!o.value) {
+        c(!1);
+        return;
+      }
+      (!e.editable || !e.readonly) && !e.disable && c(!0);
+    }
+  }
+  function m(v) {
+    !u.value || c(!1);
+  }
+  return {
+    enableClearButton: u,
+    showClearButton: l,
+    onClearValue: i,
+    onMouseEnterTextBox: B,
+    onMouseLeaveTextBox: m
+  };
+}
+const Z = {
+  popupContentPosition: { type: Object, default: { left: 0, top: 0 } }
+}, $ = E({
+  name: "FOverlay",
+  props: Z,
+  emits: ["click"],
+  setup(e, n) {
+    const o = g(e.popupContentPosition);
+    function r(l) {
+      n.emit("click"), l.preventDefault(), l.stopPropagation();
+    }
+    const a = d(() => ({
+      position: "relative",
+      left: `${o.value.left}px`,
+      top: `${o.value.top}px`
+    }));
+    return () => f(H, {
+      to: "body"
+    }, {
+      default: () => {
+        var l, u;
+        return [f("div", {
+          class: "overlay-container",
+          style: "pointer-events: auto;",
+          onClick: (s) => r(s)
+        }, [f("div", {
+          style: a.value
+        }, [(u = (l = n.slots).default) == null ? void 0 : u.call(l)])])];
+      }
+    });
+  }
+}), M = E({
+  name: "FButtonEdit",
+  props: Q,
+  emits: ["updateExtendInfo", "clear", "change", "click", "clickButton", "blur", "focus", "mouseEnterIcon", "mouseLeaveIcon", "keyup", "keydown", "inputClick", "input", "update:modelValue"],
+  setup(e, n) {
+    const o = g(), r = g(e.modelValue), a = g(!1), {
+      buttonClass: l,
+      onClickButton: u,
+      onMouseEnterButton: s,
+      onMouseLeaveButton: c
+    } = X(e, n, a), i = g(""), {
+      hasFocusedTextBox: B,
+      isTextBoxReadonly: m,
+      textBoxClass: v,
+      textBoxPlaceholder: y,
+      textBoxTitle: b,
+      onBlurTextBox: T,
+      onClickTextBox: p,
+      onFocusTextBox: k,
+      onInput: w,
+      onKeyDownTextBox: t,
+      onKeyUpTextBox: x,
+      onMouseDownTextBox: L,
+      onTextBoxValueChange: S
+    } = I(e, n, r, i), {
+      enableClearButton: D,
+      showClearButton: O,
+      onClearValue: V,
+      onMouseEnterTextBox: F,
+      onMouseLeaveTextBox: K
+    } = Y(e, n, r, B, i), N = d(() => ({
+      "input-group": !0,
+      "f-state-disable": e.disable,
+      "f-state-editable": e.editable && !e.disable && !e.readonly,
+      "f-state-readonly": e.readonly && !e.disable,
+      "f-state-focus": B
+    }));
+    function A() {
+      a.value = !1;
+    }
+    const R = d(() => a.value), j = () => {
+      if (o.value) {
+        const C = o.value.getBoundingClientRect(), {
+          left: h,
+          top: W,
+          height: G
+        } = C;
+        return {
+          left: h,
+          top: W + G
+        };
+      }
+      return {
+        left: 0,
+        top: 0
+      };
+    };
+    function U(C) {
+      a.value = !1;
+    }
+    return n.expose({
+      commitValue: U
+    }), () => f(_, null, [f("div", q(n.attrs, {
+      ref: o,
+      class: "f-cmp-inputgroup",
+      id: e.id
+    }), [f("div", {
+      class: [e.customClass, N.value],
+      onMouseenter: F,
+      onMouseleave: K
+    }, [f("input", {
+      name: "input-group-value",
+      autocomplete: "" + e.autoComplete,
+      class: v.value,
+      disabled: e.disable,
+      maxlength: e.maxLength,
+      minlength: e.minLength,
+      placeholder: y.value,
+      readonly: m.value,
+      tabindex: e.tabIndex,
+      title: b.value,
+      type: e.inputType,
+      value: r.value,
+      onBlur: T,
+      onChange: S,
+      onClick: p,
+      onFocus: k,
+      onInput: w,
+      onKeydown: t,
+      onKeyup: x,
+      onMousedown: L
+    }, null), f("div", {
+      class: l.value
+    }, [D.value && z(f("span", {
+      class: "input-group-text input-group-clear",
+      onClick: V
+    }, [f("i", {
+      class: "f-icon modal_close"
+    }, null)]), [[J, O.value]]), e.buttonContent && f("span", {
+      class: "input-group-text input-group-append-button",
+      onClick: u,
+      onMouseenter: s,
+      onMouseleave: c,
+      innerHTML: e.buttonContent
+    }, null)])])]), R.value && f($, {
+      "popup-content-position": j(),
+      onClick: A
+    }, {
+      default: () => {
+        var C, h;
+        return [(h = (C = n.slots).default) == null ? void 0 : h.call(C)];
+      }
+    })]);
+  }
+}), te = {
+  install(e) {
+    e.component(M.name, M);
+  }
+};
+export {
+  M as ButtonEdit,
+  Q as buttonEditProps,
+  te as default
+};

package/button-edit/index.umd.js

@@ -0,0 +1 @@
+(function(m,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(m=typeof globalThis<"u"?globalThis:m||self,t(m["button-edit"]={},m.Vue))})(this,function(m,t){"use strict";const w={id:String,buttonContent:{type:String,default:'<i class="f-icon f-icon-lookup"></i>'},autoComplete:{type:Boolean,default:!1},customClass:{type:String,default:""},disable:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},enableClear:{type:Boolean,default:!1},modelValue:{type:String,default:""},readonly:{type:Boolean,default:!1},textAlign:{type:String,default:"left"},showButtonWhenDisabled:{type:Boolean,default:!1},enableTitle:{type:Boolean,default:!1},inputType:{type:String,default:"text"},forcePlaceholder:{type:Boolean,default:!1},placeholder:{type:String,default:""},minLength:Number,maxLength:Number,tabIndex:Number};function P(e,o,l){const f=t.computed(()=>({"input-group-append":!0,"append-force-show":e.showButtonWhenDisabled&&(e.readonly||e.disable)})),u=t.computed(()=>e.showButtonWhenDisabled||(!e.editable||!e.readonly)&&!e.disable);function a(c){u.value&&(l.value=!0,o.emit("clickButton",{origin:c,value:e.modelValue})),c.stopPropagation()}function i(c){o.emit("mouseEnterIcon",c)}function s(c){o.emit("mouseLeaveIcon",c)}function d(){o.emit("mouseOverButton")}return{buttonClass:f,onClickButton:a,onMouseEnterButton:i,onMouseLeaveButton:s,onMouseOverButton:d}}function M(e,o,l,f){const u=t.computed(()=>e.enableTitle?l.value:""),a=t.computed(()=>(e.disable||e.readonly)&&!e.forcePlaceholder?"":e.placeholder),i=t.computed(()=>e.readonly||!e.editable);let s=!1;const d=t.computed(()=>!e.disable&&s),c=t.computed(()=>({"text-left":e.textAlign==="left","text-center":e.textAlign==="center","text-right":e.textAlign==="right","form-control":!0,"f-utils-fill":!0}));function x(n,r=!0){l.value!==n&&(l.value=n,r&&o.emit("change",n),o.emit("update:modelValue",n))}t.watch(()=>e.modelValue,n=>{l.value=n,o.emit("change",n)});function g(n){s=!1,o.emit("blur",n),n.stopPropagation()}function B(n){o.emit("click",n)}function b(n){if(e.disable){s=!0;return}s=!0,i.value||o.emit("focus",n)}function y(n){o.emit("input",n.target.value);const r=n.target.value;f.value=r,l.value!==r&&x(r,!1)}function T(n){n.target.tagName!=="INPUT"&&n.preventDefault(),n.stopPropagation()}function v(n){o.emit("keydown",n)}function k(n){o.emit("keyup",n)}function V(n){const r=n.target.value;x(r)}return{hasFocusedTextBox:d,isTextBoxReadonly:i,textBoxClass:c,textBoxPlaceholder:a,textBoxTitle:u,changeTextBoxValue:x,onBlurTextBox:g,onClickTextBox:B,onFocusTextBox:b,onInput:y,onKeyDownTextBox:v,onKeyUpTextBox:k,onMouseDownTextBox:T,onTextBoxValueChange:V}}function N(e,o,l,f,u){const a=t.ref(!1),i=t.computed(()=>e.enableClear&&!e.readonly&&!e.disable),{changeTextBoxValue:s}=M(e,o,l,u);function d(B){a.value=B}t.watch(u,()=>{f.value?d(!!u.value):d(!1)});function c(B){const b=!e.readonly&&!e.disable&&e.editable,y=!e.editable;B.stopPropagation(),(b||y)&&(s("",!1),d(!a.value),o.emit("clear"))}function x(B){if(!!i.value){if(!l.value){d(!1);return}(!e.editable||!e.readonly)&&!e.disable&&d(!0)}}function g(B){!i.value||d(!1)}return{enableClearButton:i,showClearButton:a,onClearValue:c,onMouseEnterTextBox:x,onMouseLeaveTextBox:g}}const E={popupContentPosition:{type:Object,default:{left:0,top:0}}},S=t.defineComponent({name:"FOverlay",props:E,emits:["click"],setup(e,o){const l=t.ref(e.popupContentPosition);function f(a){o.emit("click"),a.preventDefault(),a.stopPropagation()}const u=t.computed(()=>({position:"relative",left:`${l.value.left}px`,top:`${l.value.top}px`}));return()=>t.createVNode(t.Teleport,{to:"body"},{default:()=>{var a,i;return[t.createVNode("div",{class:"overlay-container",style:"pointer-events: auto;",onClick:s=>f(s)},[t.createVNode("div",{style:u.value},[(i=(a=o.slots).default)==null?void 0:i.call(a)])])]}})}}),p=t.defineComponent({name:"FButtonEdit",props:w,emits:["updateExtendInfo","clear","change","click","clickButton","blur","focus","mouseEnterIcon","mouseLeaveIcon","keyup","keydown","inputClick","input","update:modelValue"],setup(e,o){const l=t.ref(),f=t.ref(e.modelValue),u=t.ref(!1),{buttonClass:a,onClickButton:i,onMouseEnterButton:s,onMouseLeaveButton:d}=P(e,o,u),c=t.ref(""),{hasFocusedTextBox:x,isTextBoxReadonly:g,textBoxClass:B,textBoxPlaceholder:b,textBoxTitle:y,onBlurTextBox:T,onClickTextBox:v,onFocusTextBox:k,onInput:V,onKeyDownTextBox:n,onKeyUpTextBox:r,onMouseDownTextBox:L,onTextBoxValueChange:O}=M(e,o,f,c),{enableClearButton:D,showClearButton:F,onClearValue:K,onMouseEnterTextBox:j,onMouseLeaveTextBox:A}=N(e,o,f,x,c),R=t.computed(()=>({"input-group":!0,"f-state-disable":e.disable,"f-state-editable":e.editable&&!e.disable&&!e.readonly,"f-state-readonly":e.readonly&&!e.disable,"f-state-focus":x}));function U(){u.value=!1}const W=t.computed(()=>u.value),_=()=>{if(l.value){const C=l.value.getBoundingClientRect(),{left:h,top:G,height:H}=C;return{left:h,top:G+H}}return{left:0,top:0}};function q(C){u.value=!1}return o.expose({commitValue:q}),()=>t.createVNode(t.Fragment,null,[t.createVNode("div",t.mergeProps(o.attrs,{ref:l,class:"f-cmp-inputgroup",id:e.id}),[t.createVNode("div",{class:[e.customClass,R.value],onMouseenter:j,onMouseleave:A},[t.createVNode("input",{name:"input-group-value",autocomplete:""+e.autoComplete,class:B.value,disabled:e.disable,maxlength:e.maxLength,minlength:e.minLength,placeholder:b.value,readonly:g.value,tabindex:e.tabIndex,title:y.value,type:e.inputType,value:f.value,onBlur:T,onChange:O,onClick:v,onFocus:k,onInput:V,onKeydown:n,onKeyup:r,onMousedown:L},null),t.createVNode("div",{class:a.value},[D.value&&t.withDirectives(t.createVNode("span",{class:"input-group-text input-group-clear",onClick:K},[t.createVNode("i",{class:"f-icon modal_close"},null)]),[[t.vShow,F.value]]),e.buttonContent&&t.createVNode("span",{class:"input-group-text input-group-append-button",onClick:i,onMouseenter:s,onMouseleave:d,innerHTML:e.buttonContent},null)])])]),W.value&&t.createVNode(S,{"popup-content-position":_(),onClick:U},{default:()=>{var C,h;return[(h=(C=o.slots).default)==null?void 0:h.call(C)]}})])}}),I={install(e){e.component(p.name,p)}};m.ButtonEdit=p,m.buttonEditProps=w,m.default=I,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/button-edit/package.json

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

package/checkbox/index.esm.js

@@ -0,0 +1,97 @@
+import { computed as x, ref as v, defineComponent as p, createVNode as m } from "vue";
+const V = {
+  id: String,
+  name: { type: String, default: "" },
+  enumData: { type: Array, default: [] },
+  textField: { type: String, default: "name" },
+  valueField: { type: String, default: "value" },
+  horizontal: { type: Boolean, default: !1 },
+  disable: { type: Boolean, default: !1 },
+  modelValue: [String, Array],
+  tabIndex: { type: Number, default: 0 },
+  separator: { type: String, default: "," },
+  isStringValue: { type: Boolean, default: !0 },
+  loadData: { type: Function }
+};
+function y(e, i, l) {
+  const h = x(() => !e.disable), s = v(e.enumData);
+  function o(t) {
+    return t[e.valueField];
+  }
+  function d(t) {
+    return t[e.textField];
+  }
+  function f(t) {
+    return t ? e.isStringValue ? t.split(e.separator) : t : [];
+  }
+  function g(t) {
+    const a = s.value.map((n) => o(n)).filter((n) => t.some((c) => c === n));
+    return e.isStringValue ? a.join(e.separator) : a;
+  }
+  function u(t) {
+    const r = String(o(t));
+    return f(l.value).some((n) => n === r);
+  }
+  function b(t, r) {
+    if (h.value) {
+      let a = f(l.value) || [];
+      const n = String(o(t));
+      !a || !a.length ? a.push(n) : a.some((c) => c === n) ? a = a.filter((c) => c !== n) : a.push(n), l.value = g(a), i.emit("changeValue", l.value), i.emit("update:modelValue", l.value);
+    }
+    r.stopPropagation();
+  }
+  return {
+    enumData: s,
+    getValue: o,
+    getText: d,
+    checked: u,
+    onClickCheckbox: b
+  };
+}
+const k = p({
+  name: "FCheckboxGroup",
+  props: V,
+  emits: ["changeValue", "update:modelValue"],
+  setup(e, i) {
+    const l = v(e.modelValue), {
+      enumData: h,
+      onClickCheckbox: s,
+      getValue: o,
+      getText: d,
+      checked: f
+    } = y(e, i, l), g = x(() => ({
+      "farris-checkradio-hor": e.horizontal
+    }));
+    return () => m("div", {
+      class: ["farris-input-wrap", g.value]
+    }, [h.value.map((u, b) => {
+      const t = "checkbox_" + e.name + b;
+      return m("div", {
+        class: "custom-control custom-checkbox"
+      }, [m("input", {
+        type: "checkbox",
+        class: "custom-control-input",
+        name: e.name,
+        id: t,
+        value: o(u),
+        checked: f(u),
+        disabled: e.disable,
+        tabindex: e.tabIndex,
+        onClick: (r) => s(u, r)
+      }, null), m("label", {
+        class: "custom-control-label",
+        for: t,
+        title: d(u)
+      }, [d(u)])]);
+    })]);
+  }
+}), C = {
+  install(e) {
+    e.component(k.name, k);
+  }
+};
+export {
+  k as CheckBoxGroup,
+  V as checkboxGroupProps,
+  C as default
+};

package/checkbox/index.umd.js

@@ -0,0 +1 @@
+(function(u,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u.checkbox={},u.Vue))})(this,function(u,n){"use strict";const x={id:String,name:{type:String,default:""},enumData:{type:Array,default:[]},textField:{type:String,default:"name"},valueField:{type:String,default:"value"},horizontal:{type:Boolean,default:!1},disable:{type:Boolean,default:!1},modelValue:[String,Array],tabIndex:{type:Number,default:0},separator:{type:String,default:","},isStringValue:{type:Boolean,default:!0},loadData:{type:Function}};function V(e,s,l){const g=n.computed(()=>!e.disable),f=n.ref(e.enumData);function c(t){return t[e.valueField]}function m(t){return t[e.textField]}function h(t){return t?e.isStringValue?t.split(e.separator):t:[]}function k(t){const a=f.value.map(o=>c(o)).filter(o=>t.some(d=>d===o));return e.isStringValue?a.join(e.separator):a}function r(t){const i=String(c(t));return h(l.value).some(o=>o===i)}function p(t,i){if(g.value){let a=h(l.value)||[];const o=String(c(t));!a||!a.length?a.push(o):a.some(d=>d===o)?a=a.filter(d=>d!==o):a.push(o),l.value=k(a),s.emit("changeValue",l.value),s.emit("update:modelValue",l.value)}i.stopPropagation()}return{enumData:f,getValue:c,getText:m,checked:r,onClickCheckbox:p}}const b=n.defineComponent({name:"FCheckboxGroup",props:x,emits:["changeValue","update:modelValue"],setup(e,s){const l=n.ref(e.modelValue),{enumData:g,onClickCheckbox:f,getValue:c,getText:m,checked:h}=V(e,s,l),k=n.computed(()=>({"farris-checkradio-hor":e.horizontal}));return()=>n.createVNode("div",{class:["farris-input-wrap",k.value]},[g.value.map((r,p)=>{const t="checkbox_"+e.name+p;return n.createVNode("div",{class:"custom-control custom-checkbox"},[n.createVNode("input",{type:"checkbox",class:"custom-control-input",name:e.name,id:t,value:c(r),checked:h(r),disabled:e.disable,tabindex:e.tabIndex,onClick:i=>f(r,i)},null),n.createVNode("label",{class:"custom-control-label",for:t,title:m(r)},[m(r)])])})])}}),y={install(e){e.component(b.name,b)}};u.CheckBoxGroup=b,u.checkboxGroupProps=x,u.default=y,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/checkbox/package.json

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