@milaboratories/uikit 2.6.1 → 2.6.2

package/dist/components/PlTextField/PlTextField.vue.d.ts

@@ -58,6 +58,10 @@ declare const _default: <M, E = string, C = E>(__VLS_props: NonNullable<Awaited<
          * The string specifies whether the field should be a password or not, value could be "password" or undefined.
          */
         type?: "password";
+        /**
+         * Makes some of corners not rounded
+         * */
+        groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
     }) & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/components/PlTextField/PlTextField.vue.js

@@ -1,8 +1,10 @@
-(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".pl-text-field{--pl-text-field-text-color: var(--txt-01);--contour-color: var(--txt-01);--label-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--show-clearable: none;width:100%;min-width:160px;min-height:var(--control-height);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none}.pl-text-field__envelope{font-family:var(--font-family-base)}.pl-text-field input{font-family:var(--font-family-base);font-weight:500;min-height:calc(var(--control-height) - 2px);line-height:20px;width:100%;padding:0 12px;border:none;font-size:inherit;background-color:transparent;color:var(--pl-text-field-text-color);caret-color:var(--border-color-focus);cursor:inherit}.pl-text-field input:focus{outline:none}.pl-text-field input::placeholder{color:var(--color-placeholder)}.pl-text-field label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-text-field label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-text-field__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-text-field__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-text-field__append{padding-right:12px;display:flex;flex-direction:row;align-items:center;gap:4px;cursor:text}.pl-text-field__append .icon-16{cursor:pointer}.pl-text-field__append .mask-16{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-text-field__clearable{display:var(--show-clearable)!important;--icon-color: var(--ic-02) !important}.pl-text-field__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-text-field__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-text-field:hover{--contour-color: var(--control-hover-color);--show-clearable: inline-block}.pl-text-field:focus-within{--show-clearable: inline-block}.pl-text-field:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-text-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-text-field.dashed .pl-text-field__contour{border-style:dashed}.pl-text-field.nonEmpty{--prefix-color: var(--txt-01)}.pl-text-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-text-field.disabled{--contour-color: var(--color-dis-01);--label-color: var(--dis-01);--pl-text-field-text-color: var(--dis-01);--mask-icon-bg-color: var(--dis-01);cursor:not-allowed}")),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as I, mergeModels as N, useSlots as $, useModel as O, ref as m, reactive as T, computed as s, createElementBlock as d, openBlock as t, createElementVNode as c, createCommentVNode as i, normalizeClass as j, withDirectives as z, createVNode as L, createBlock as p, unref as n, toDisplayString as f, withCtx as U, renderSlot as E, vModelDynamic as A, withModifiers as V } from "vue";
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}
+.pl-text-field{--pl-text-field-text-color: var(--txt-01);--contour-color: var(--txt-01);--label-color: var(--txt-01);--contour-border-width: 1px;--contour-box-shadow: none;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--prefix-color: var(--color-placeholder);--show-clearable: none;width:100%;min-width:160px;min-height:var(--control-height);position:relative;border-radius:var(--border-radius-control);display:flex;flex-direction:row;align-items:center;outline:none}.pl-text-field__envelope{font-family:var(--font-family-base)}.pl-text-field input{font-family:var(--font-family-base);font-weight:500;min-height:calc(var(--control-height) - 2px);line-height:20px;width:100%;padding:0 12px;border:none;font-size:inherit;background-color:transparent;color:var(--pl-text-field-text-color);caret-color:var(--border-color-focus);cursor:inherit}.pl-text-field input:focus{outline:none}.pl-text-field input::placeholder{color:var(--color-placeholder)}.pl-text-field label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-text-field label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-text-field__contour{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius-control);border-width:var(--contour-border-width);border-color:var(--contour-color);border-style:solid;box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-text-field__prefix{padding-left:12px;white-space:nowrap;margin-right:-12px;color:var(--prefix-color)}.pl-text-field__append{padding-right:12px;display:flex;flex-direction:row;align-items:center;gap:4px;cursor:text}.pl-text-field__append .icon-16{cursor:pointer}.pl-text-field__append .mask-16{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-text-field__clearable{display:var(--show-clearable)!important;--icon-color: var(--ic-02) !important}.pl-text-field__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-text-field__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-text-field:hover{--contour-color: var(--control-hover-color);--show-clearable: inline-block}.pl-text-field:focus-within{--show-clearable: inline-block}.pl-text-field:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-text-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-text-field.dashed .pl-text-field__contour{border-style:dashed}.pl-text-field.nonEmpty{--prefix-color: var(--txt-01)}.pl-text-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-text-field.disabled{--contour-color: var(--color-dis-01);--label-color: var(--dis-01);--pl-text-field-text-color: var(--dis-01);--mask-icon-bg-color: var(--dis-01);cursor:not-allowed}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import { defineComponent as N, mergeModels as $, useSlots as x, useModel as O, ref as v, reactive as T, computed as s, createElementBlock as d, openBlock as t, createElementVNode as u, createCommentVNode as i, normalizeClass as j, withDirectives as z, createVNode as L, createBlock as c, unref as n, toDisplayString as f, withCtx as U, renderSlot as E, vModelDynamic as A, withModifiers as V } from "vue";
 import G from "../../assets/images/required.svg.js";
 import { getErrorMessage as H } from "../../helpers/error.js";
 import J from "../../utils/DoubleContour.vue.js";
+
 import { useLabelNotch as K } from "../../utils/useLabelNotch.js";
 import { useValidation as Q } from "../../utils/useValidation.js";
 import W from "../PlIcon16/PlIcon16.vue.js";
@@ -10,10 +12,10 @@ import X from "../PlIcon24/PlIcon24.vue.js";
 import Y from "../PlSvg/PlSvg.vue.js";
 import Z from "../PlTooltip/PlTooltip.vue.js";
 
-const ee = { class: "pl-text-field__envelope" }, le = {
+const ee = { class: "pl-text-field__envelope" }, oe = {
   key: 0,
   ref: "label"
-}, oe = {
+}, le = {
   key: 1,
   class: "pl-text-field__prefix"
 }, re = ["disabled", "placeholder", "type"], te = {
@@ -24,9 +26,9 @@ const ee = { class: "pl-text-field__envelope" }, le = {
   class: "pl-text-field__helper"
 }, se = {
   name: "PlTextField"
-}, be = /* @__PURE__ */ I({
+}, _e = /* @__PURE__ */ N({
   ...se,
-  props: /* @__PURE__ */ N({
+  props: /* @__PURE__ */ $({
     label: {},
     clearable: { type: [Boolean, Function] },
     parse: { type: Function },
@@ -38,7 +40,8 @@ const ee = { class: "pl-text-field__envelope" }, le = {
     dashed: { type: Boolean },
     prefix: {},
     rules: {},
-    type: {}
+    type: {},
+    groupPosition: {}
   }, {
     modelValue: {
       required: !0
@@ -47,16 +50,16 @@ const ee = { class: "pl-text-field__envelope" }, le = {
   }),
   emits: ["update:modelValue"],
   setup(h) {
-    const C = $(), o = O(h, "modelValue"), l = h, y = m(void 0), b = m(), u = m(!1), a = T({
+    const C = x(), l = O(h, "modelValue"), o = h, y = v(void 0), b = v(), p = v(!1), a = T({
       cached: void 0
-    }), v = s({
+    }), m = s({
       get() {
-        return a.cached ? a.cached.value : o.value === void 0 || o.value === null ? "" : String(o.value);
+        return a.cached ? a.cached.value : l.value === void 0 || l.value === null ? "" : String(l.value);
       },
       set(e) {
-        if (a.cached = void 0, l.parse)
+        if (a.cached = void 0, o.parse)
           try {
-            o.value = l.parse(e);
+            l.value = o.parse(e);
           } catch (r) {
             a.cached = {
               error: r instanceof Error ? r.message : String(r),
@@ -64,37 +67,37 @@ const ee = { class: "pl-text-field__envelope" }, le = {
             };
           }
         else
-          o.value = e;
+          l.value = e;
       }
-    }), M = s(() => l.type && l.type === "password" ? u.value ? "text" : l.type : "text"), S = s(() => u.value ? "view-show" : "view-hide"), B = () => {
-      l.clearable && (a.cached = void 0, o.value = l.clearable === !0 ? "" : l.clearable());
-    }, _ = Q(v, l.rules || []), F = s(() => l.clearable ? l.clearable === !0 ? o.value === "" : o.value === l.clearable() : o.value === ""), k = s(() => !F.value), w = s(() => {
-      const e = [], r = H(l.error);
+    }), M = s(() => o.type && o.type === "password" ? p.value ? "text" : o.type : "text"), P = s(() => p.value ? "view-show" : "view-hide"), S = () => {
+      o.clearable && (a.cached = void 0, l.value = o.clearable === !0 ? "" : o.clearable());
+    }, _ = Q(m, o.rules || []), B = s(() => o.clearable ? o.clearable === !0 ? l.value === "" : l.value === o.clearable() : l.value === ""), k = s(() => !B.value), g = s(() => {
+      const e = [], r = H(o.error);
       return r && e.push(r), a.cached && e.push(a.cached.error), _.value.isValid || e.push(..._.value.errors), e;
-    }), g = s(() => w.value.length > 0), P = s(() => l.clearable && k.value && l.type !== "password" && !l.disabled), R = () => u.value = !u.value, D = () => {
+    }), w = s(() => g.value.length > 0), F = s(() => o.clearable && k.value && o.type !== "password" && !o.disabled), R = () => p.value = !p.value, q = () => {
       a.cached = void 0;
-    }, q = () => {
+    }, D = () => {
       var e;
       return (e = b.value) == null ? void 0 : e.focus();
     };
     return K(y), (e, r) => (t(), d("div", ee, [
-      c("div", {
+      u("div", {
         ref_key: "rootRef",
         ref: y,
         class: j(["pl-text-field", {
-          error: g.value,
+          error: w.value,
           disabled: e.disabled,
           dashed: e.dashed,
           nonEmpty: k.value
         }])
       }, [
-        e.label ? (t(), d("label", le, [
-          e.required ? (t(), p(n(Y), {
+        e.label ? (t(), d("label", oe, [
+          e.required ? (t(), c(n(Y), {
             key: 0,
             uri: n(G)
           }, null, 8, ["uri"])) : i("", !0),
-          c("span", null, f(e.label), 1),
-          n(C).tooltip ? (t(), p(n(Z), {
+          u("span", null, f(e.label), 1),
+          n(C).tooltip ? (t(), c(n(Z), {
             key: 1,
             class: "info",
             position: "top"
@@ -105,44 +108,47 @@ const ee = { class: "pl-text-field__envelope" }, le = {
             _: 3
           })) : i("", !0)
         ], 512)) : i("", !0),
-        e.prefix ? (t(), d("div", oe, f(e.prefix), 1)) : i("", !0),
-        z(c("input", {
+        e.prefix ? (t(), d("div", le, f(e.prefix), 1)) : i("", !0),
+        z(u("input", {
           ref_key: "inputRef",
           ref: b,
-          "onUpdate:modelValue": r[0] || (r[0] = (x) => v.value = x),
+          "onUpdate:modelValue": r[0] || (r[0] = (I) => m.value = I),
           disabled: e.disabled,
           placeholder: e.placeholder || "...",
           type: M.value,
           spellcheck: "false",
-          onFocusout: D
+          onFocusout: q
         }, null, 40, re), [
-          [A, v.value]
+          [A, m.value]
         ]),
-        c("div", {
+        u("div", {
           class: "pl-text-field__append",
-          onClick: q
+          onClick: D
         }, [
-          P.value ? (t(), p(n(W), {
+          F.value ? (t(), c(n(W), {
             key: 0,
             class: "pl-text-field__clearable",
             name: "delete-clear",
-            onClick: V(B, ["stop"])
+            onClick: V(S, ["stop"])
           })) : i("", !0),
-          e.type === "password" ? (t(), p(n(X), {
+          e.type === "password" ? (t(), c(n(X), {
             key: 1,
-            name: S.value,
+            name: P.value,
             style: { cursor: "pointer" },
             onClick: V(R, ["stop"])
           }, null, 8, ["name"])) : i("", !0),
           E(e.$slots, "append")
         ]),
-        L(J, { class: "pl-text-field__contour" })
+        L(J, {
+          class: "pl-text-field__contour",
+          "group-position": e.groupPosition
+        }, null, 8, ["group-position"])
       ], 2),
-      g.value ? (t(), d("div", te, f(w.value.join(" ")), 1)) : e.helper ? (t(), d("div", ae, f(e.helper), 1)) : i("", !0)
+      w.value ? (t(), d("div", te, f(g.value.join(" ")), 1)) : e.helper ? (t(), d("div", ae, f(e.helper), 1)) : i("", !0)
     ]));
   }
 });
 export {
-  be as default
+  _e as default
 };
 //# sourceMappingURL=PlTextField.vue.js.map

package/dist/components/PlTextField/PlTextField.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.vue.js","sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: 'PlTextField',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M, E = string, C = E\">\nimport type { Equal } from '@milaboratories/helpers';\nimport { computed, reactive, ref, useSlots } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { useValidation } from '../../utils/useValidation';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport './pl-text-field.scss';\n\nconst slots = useSlots();\n\ntype Model = Equal<M, E | C> extends true ? M : never; // basically in === out\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<Model>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /**\n   * The label to display above the input field.\n   */\n  label?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   * Or you can pass a callback that returns a custom \"empty\" value (null | undefined | string)\n   */\n  clearable?: boolean | (() => C);\n  /**\n   * An optional callback to parse and/or cast the value, the return type overrides the model type.\n   * The callback must throw an exception if the value is invalid\n   */\n  parse?: (v: string) => E;\n  /**\n   * If `true`, the input field is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the input field.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the input field when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the input field when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the input field is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the input field has a dashed border.\n   */\n  dashed?: boolean;\n  /**\n   * A prefix text to display inside the input field before the value.\n   */\n  prefix?: string;\n  /**\n   * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.\n   */\n  rules?: ((v: string) => boolean | string)[];\n  /**\n   * The string specifies whether the field should be a password or not, value could be \"password\" or undefined.\n   */\n  type?: 'password';\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst data = reactive({\n  cached: undefined as { error: string; value: string } | undefined,\n});\n\nconst valueRef = computed<string>({\n  get() {\n    if (data.cached) {\n      return data.cached.value;\n    }\n    return model.value === undefined || model.value === null ? '' : String(model.value);\n  },\n  set(value) {\n    data.cached = undefined;\n\n    if (props.parse) {\n      try {\n        model.value = props.parse(value) as Model;\n      } catch (err) {\n        data.cached = {\n          error: err instanceof Error ? err.message : String(err),\n          value,\n        };\n      }\n    } else {\n      model.value = value as Model;\n    }\n  },\n});\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === 'password') {\n    return showPassword.value ? 'text' : props.type;\n  } else {\n    return 'text';\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? 'view-show' : 'view-hide'));\n\nconst clear = () => {\n  if (props.clearable) {\n    data.cached = undefined;\n    model.value = props.clearable === true ? ('' as Model) : (props.clearable() as Model);\n  }\n};\n\nconst validationData = useValidation(valueRef, props.rules || []);\n\nconst isEmpty = computed(() => {\n  if (props.clearable) {\n    return props.clearable === true ? model.value === '' : model.value === props.clearable();\n  }\n\n  return model.value === '';\n});\n\nconst nonEmpty = computed(() => !isEmpty.value);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (data.cached) {\n    errors.push(data.cached.error);\n  }\n  if (!validationData.value.isValid) {\n    errors.push(...validationData.value.errors);\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(() => props.clearable && nonEmpty.value && props.type !== 'password' && !props.disabled);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst onFocusOut = () => {\n  data.cached = undefined;\n};\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"valueRef\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n        @focusout=\"onFocusOut\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16 v-if=\"canShowClearable\" class=\"pl-text-field__clearable\" name=\"delete-clear\" @click.stop=\"clear\" />\n        <PlIcon24 v-if=\"type === 'password'\" :name=\"passwordIcon\" style=\"cursor: pointer\" @click.stop=\"togglePasswordVisibility\" />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n      {{ displayErrors.join(' ') }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","slots","useSlots","model","_useModel","__props","props","rootRef","ref","inputRef","showPassword","data","reactive","valueRef","computed","value","err","fieldType","passwordIcon","clear","validationData","useValidation","isEmpty","nonEmpty","displayErrors","errors","propsError","getErrorMessage","hasErrors","canShowClearable","togglePasswordVisibility","onFocusOut","setFocusOnInput","_a","useLabelNotch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;GAIAA,KAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;;;;;AAiBA,UAAMC,IAAQC,EAAA,GAORC,IAAQC,EAAkBC,GAAA,YAE/B,GAEKC,IAAQD,GAqDRE,IAAUC,EAAkC,MAAS,GAErDC,IAAWD,EAAA,GAEXE,IAAeF,EAAI,EAAK,GAExBG,IAAOC,EAAS;AAAA,MACpB,QAAQ;AAAA,IAAA,CACT,GAEKC,IAAWC,EAAiB;AAAA,MAChC,MAAM;AACJ,eAAIH,EAAK,SACAA,EAAK,OAAO,QAEdR,EAAM,UAAU,UAAaA,EAAM,UAAU,OAAO,KAAK,OAAOA,EAAM,KAAK;AAAA,MACpF;AAAA,MACA,IAAIY,GAAO;AAGT,YAFAJ,EAAK,SAAS,QAEVL,EAAM;AACR,cAAI;AACF,YAAAH,EAAM,QAAQG,EAAM,MAAMS,CAAK;AAAA,UACjC,SAASC,GAAK;AACZ,YAAAL,EAAK,SAAS;AAAA,cACZ,OAAOK,aAAe,QAAQA,EAAI,UAAU,OAAOA,CAAG;AAAA,cACtD,OAAAD;AAAA,YAAA;AAAA,UAEJ;AAAA;AAEA,UAAAZ,EAAM,QAAQY;AAAA,MAElB;AAAA,IAAA,CACD,GAEKE,IAAYH,EAAS,MACrBR,EAAM,QAAQA,EAAM,SAAS,aACxBI,EAAa,QAAQ,SAASJ,EAAM,OAEpC,MAEV,GAEKY,IAAeJ,EAAS,MAAOJ,EAAa,QAAQ,cAAc,WAAY,GAE9ES,IAAQ,MAAM;AAClB,MAAIb,EAAM,cACRK,EAAK,SAAS,QACdR,EAAM,QAAQG,EAAM,cAAc,KAAQ,KAAgBA,EAAM,UAAA;AAAA,IAEpE,GAEMc,IAAiBC,EAAcR,GAAUP,EAAM,SAAS,CAAA,CAAE,GAE1DgB,IAAUR,EAAS,MACnBR,EAAM,YACDA,EAAM,cAAc,KAAOH,EAAM,UAAU,KAAKA,EAAM,UAAUG,EAAM,UAAA,IAGxEH,EAAM,UAAU,EACxB,GAEKoB,IAAWT,EAAS,MAAM,CAACQ,EAAQ,KAAK,GAExCE,IAAgBV,EAAS,MAAM;AACnC,YAAMW,IAAmB,CAAA,GACnBC,IAAaC,EAAgBrB,EAAM,KAAK;AAC9C,aAAIoB,KACFD,EAAO,KAAKC,CAAU,GAEpBf,EAAK,UACPc,EAAO,KAAKd,EAAK,OAAO,KAAK,GAE1BS,EAAe,MAAM,WACxBK,EAAO,KAAK,GAAGL,EAAe,MAAM,MAAM,GAErCK;AAAA,IACT,CAAC,GAEKG,IAAYd,EAAS,MAAMU,EAAc,MAAM,SAAS,CAAC,GAEzDK,IAAmBf,EAAS,MAAMR,EAAM,aAAaiB,EAAS,SAASjB,EAAM,SAAS,cAAc,CAACA,EAAM,QAAQ,GAEnHwB,IAA2B,MAAOpB,EAAa,QAAQ,CAACA,EAAa,OAErEqB,IAAa,MAAM;AACvB,MAAApB,EAAK,SAAS;AAAA,IAChB,GAEMqB,IAAkB,MAAA;;AAAM,cAAAC,IAAAxB,EAAS,UAAT,gBAAAwB,EAAgB;AAAA;AAE9C,WAAAC,EAAc3B,CAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlTextField.vue.js","sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: 'PlTextField',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M, E = string, C = E\">\nimport type { Equal } from '@milaboratories/helpers';\nimport { computed, reactive, ref, useSlots } from 'vue';\nimport SvgRequired from '../../assets/images/required.svg?raw';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { useValidation } from '../../utils/useValidation';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\nimport { PlSvg } from '../PlSvg';\nimport { PlTooltip } from '../PlTooltip';\nimport './pl-text-field.scss';\n\nconst slots = useSlots();\n\ntype Model = Equal<M, E | C> extends true ? M : never; // basically in === out\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<Model>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /**\n   * The label to display above the input field.\n   */\n  label?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   * Or you can pass a callback that returns a custom \"empty\" value (null | undefined | string)\n   */\n  clearable?: boolean | (() => C);\n  /**\n   * An optional callback to parse and/or cast the value, the return type overrides the model type.\n   * The callback must throw an exception if the value is invalid\n   */\n  parse?: (v: string) => E;\n  /**\n   * If `true`, the input field is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the input field.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the input field when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the input field when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the input field is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the input field has a dashed border.\n   */\n  dashed?: boolean;\n  /**\n   * A prefix text to display inside the input field before the value.\n   */\n  prefix?: string;\n  /**\n   * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.\n   */\n  rules?: ((v: string) => boolean | string)[];\n  /**\n   * The string specifies whether the field should be a password or not, value could be \"password\" or undefined.\n   */\n  type?: 'password';\n  /**\n   * Makes some of corners not rounded\n   * */\n  groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst data = reactive({\n  cached: undefined as { error: string; value: string } | undefined,\n});\n\nconst valueRef = computed<string>({\n  get() {\n    if (data.cached) {\n      return data.cached.value;\n    }\n    return model.value === undefined || model.value === null ? '' : String(model.value);\n  },\n  set(value) {\n    data.cached = undefined;\n\n    if (props.parse) {\n      try {\n        model.value = props.parse(value) as Model;\n      } catch (err) {\n        data.cached = {\n          error: err instanceof Error ? err.message : String(err),\n          value,\n        };\n      }\n    } else {\n      model.value = value as Model;\n    }\n  },\n});\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === 'password') {\n    return showPassword.value ? 'text' : props.type;\n  } else {\n    return 'text';\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? 'view-show' : 'view-hide'));\n\nconst clear = () => {\n  if (props.clearable) {\n    data.cached = undefined;\n    model.value = props.clearable === true ? ('' as Model) : (props.clearable() as Model);\n  }\n};\n\nconst validationData = useValidation(valueRef, props.rules || []);\n\nconst isEmpty = computed(() => {\n  if (props.clearable) {\n    return props.clearable === true ? model.value === '' : model.value === props.clearable();\n  }\n\n  return model.value === '';\n});\n\nconst nonEmpty = computed(() => !isEmpty.value);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (data.cached) {\n    errors.push(data.cached.error);\n  }\n  if (!validationData.value.isValid) {\n    errors.push(...validationData.value.errors);\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(() => props.clearable && nonEmpty.value && props.type !== 'password' && !props.disabled);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst onFocusOut = () => {\n  data.cached = undefined;\n};\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"valueRef\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n        @focusout=\"onFocusOut\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16 v-if=\"canShowClearable\" class=\"pl-text-field__clearable\" name=\"delete-clear\" @click.stop=\"clear\" />\n        <PlIcon24 v-if=\"type === 'password'\" :name=\"passwordIcon\" style=\"cursor: pointer\" @click.stop=\"togglePasswordVisibility\" />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n      {{ displayErrors.join(' ') }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","slots","useSlots","model","_useModel","__props","props","rootRef","ref","inputRef","showPassword","data","reactive","valueRef","computed","value","err","fieldType","passwordIcon","clear","validationData","useValidation","isEmpty","nonEmpty","displayErrors","errors","propsError","getErrorMessage","hasErrors","canShowClearable","togglePasswordVisibility","onFocusOut","setFocusOnInput","_a","useLabelNotch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;GAIAA,KAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,UAAMC,IAAQC,EAAA,GAORC,IAAQC,EAAkBC,GAAA,YAE/B,GAEKC,IAAQD,GAyDRE,IAAUC,EAAkC,MAAS,GAErDC,IAAWD,EAAA,GAEXE,IAAeF,EAAI,EAAK,GAExBG,IAAOC,EAAS;AAAA,MACpB,QAAQ;AAAA,IAAA,CACT,GAEKC,IAAWC,EAAiB;AAAA,MAChC,MAAM;AACJ,eAAIH,EAAK,SACAA,EAAK,OAAO,QAEdR,EAAM,UAAU,UAAaA,EAAM,UAAU,OAAO,KAAK,OAAOA,EAAM,KAAK;AAAA,MACpF;AAAA,MACA,IAAIY,GAAO;AAGT,YAFAJ,EAAK,SAAS,QAEVL,EAAM;AACR,cAAI;AACF,YAAAH,EAAM,QAAQG,EAAM,MAAMS,CAAK;AAAA,UACjC,SAASC,GAAK;AACZ,YAAAL,EAAK,SAAS;AAAA,cACZ,OAAOK,aAAe,QAAQA,EAAI,UAAU,OAAOA,CAAG;AAAA,cACtD,OAAAD;AAAA,YAAA;AAAA,UAEJ;AAAA;AAEA,UAAAZ,EAAM,QAAQY;AAAA,MAElB;AAAA,IAAA,CACD,GAEKE,IAAYH,EAAS,MACrBR,EAAM,QAAQA,EAAM,SAAS,aACxBI,EAAa,QAAQ,SAASJ,EAAM,OAEpC,MAEV,GAEKY,IAAeJ,EAAS,MAAOJ,EAAa,QAAQ,cAAc,WAAY,GAE9ES,IAAQ,MAAM;AAClB,MAAIb,EAAM,cACRK,EAAK,SAAS,QACdR,EAAM,QAAQG,EAAM,cAAc,KAAQ,KAAgBA,EAAM,UAAA;AAAA,IAEpE,GAEMc,IAAiBC,EAAcR,GAAUP,EAAM,SAAS,CAAA,CAAE,GAE1DgB,IAAUR,EAAS,MACnBR,EAAM,YACDA,EAAM,cAAc,KAAOH,EAAM,UAAU,KAAKA,EAAM,UAAUG,EAAM,UAAA,IAGxEH,EAAM,UAAU,EACxB,GAEKoB,IAAWT,EAAS,MAAM,CAACQ,EAAQ,KAAK,GAExCE,IAAgBV,EAAS,MAAM;AACnC,YAAMW,IAAmB,CAAA,GACnBC,IAAaC,EAAgBrB,EAAM,KAAK;AAC9C,aAAIoB,KACFD,EAAO,KAAKC,CAAU,GAEpBf,EAAK,UACPc,EAAO,KAAKd,EAAK,OAAO,KAAK,GAE1BS,EAAe,MAAM,WACxBK,EAAO,KAAK,GAAGL,EAAe,MAAM,MAAM,GAErCK;AAAA,IACT,CAAC,GAEKG,IAAYd,EAAS,MAAMU,EAAc,MAAM,SAAS,CAAC,GAEzDK,IAAmBf,EAAS,MAAMR,EAAM,aAAaiB,EAAS,SAASjB,EAAM,SAAS,cAAc,CAACA,EAAM,QAAQ,GAEnHwB,IAA2B,MAAOpB,EAAa,QAAQ,CAACA,EAAa,OAErEqB,IAAa,MAAM;AACvB,MAAApB,EAAK,SAAS;AAAA,IAChB,GAEMqB,IAAkB,MAAA;;AAAM,cAAAC,IAAAxB,EAAS,UAAT,gBAAAwB,EAAgB;AAAA;AAE9C,WAAAC,EAAc3B,CAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/composition/filters/metadata.d.ts

@@ -21,6 +21,27 @@ export declare const filterUiMetadata: {
         };
         supportedFor: typeof isNumericValueType;
     };
+    notEqual: {
+        label: string;
+        form: {
+            column: {
+                label: string;
+                fieldType: "SUniversalPColumnId";
+                defaultValue: () => undefined;
+            };
+            type: {
+                label: string;
+                fieldType: "FilterType";
+                defaultValue: () => "notEqual";
+            };
+            x: {
+                label: string;
+                fieldType: "number";
+                defaultValue: () => number;
+            };
+        };
+        supportedFor: typeof isNumericValueType;
+    };
     lessThan: {
         label: string;
         form: {
@@ -436,6 +457,90 @@ export declare const filterUiMetadata: {
         };
         supportedFor: () => false;
     };
+    patternMatchesRegularExpression: {
+        label: string;
+        form: {
+            column: {
+                label: string;
+                fieldType: "SUniversalPColumnId";
+                defaultValue: () => undefined;
+            };
+            type: {
+                label: string;
+                fieldType: "FilterType";
+                defaultValue: () => "patternMatchesRegularExpression";
+            };
+            value: {
+                label: string;
+                fieldType: "string";
+                defaultValue: () => string;
+            };
+        };
+        supportedFor: typeof isStringValueType;
+    };
+    patternFuzzyContainSubsequence: {
+        label: string;
+        form: {
+            column: {
+                label: string;
+                fieldType: "SUniversalPColumnId";
+                defaultValue: () => undefined;
+            };
+            type: {
+                label: string;
+                fieldType: "FilterType";
+                defaultValue: () => "patternFuzzyContainSubsequence";
+            };
+            value: {
+                label: string;
+                fieldType: "string";
+                defaultValue: () => string;
+            };
+        };
+        supportedFor: typeof isStringValueType;
+    };
+    inSet: {
+        label: string;
+        form: {
+            column: {
+                label: string;
+                fieldType: "SUniversalPColumnId";
+                defaultValue: () => undefined;
+            };
+            type: {
+                label: string;
+                fieldType: "FilterType";
+                defaultValue: () => "inSet";
+            };
+            value: {
+                fieldType: "unknown[]";
+                label: string;
+                defaultValue: () => never[];
+            };
+        };
+        supportedFor: typeof isStringValueType;
+    };
+    notInSet: {
+        label: string;
+        form: {
+            column: {
+                label: string;
+                fieldType: "SUniversalPColumnId";
+                defaultValue: () => undefined;
+            };
+            type: {
+                label: string;
+                fieldType: "FilterType";
+                defaultValue: () => "notInSet";
+            };
+            value: {
+                label: string;
+                fieldType: "unknown[]";
+                defaultValue: () => never[];
+            };
+        };
+        supportedFor: typeof isStringValueType;
+    };
 };
 export declare function getFilterUiTypeOptions(columnSpec?: SimplifiedPColumnSpec): {
     label: string;
@@ -461,6 +566,26 @@ export declare function getFilterUiMetadata(type: FilterSpecType): {
         };
     };
     supportedFor: typeof isNumericValueType;
+} | {
+    label: string;
+    form: {
+        column: {
+            label: string;
+            fieldType: "SUniversalPColumnId";
+            defaultValue: () => undefined;
+        };
+        type: {
+            label: string;
+            fieldType: "FilterType";
+            defaultValue: () => "notEqual";
+        };
+        x: {
+            label: string;
+            fieldType: "number";
+            defaultValue: () => number;
+        };
+    };
+    supportedFor: typeof isNumericValueType;
 } | {
     label: string;
     form: {
@@ -856,6 +981,86 @@ export declare function getFilterUiMetadata(type: FilterSpecType): {
         };
     };
     supportedFor: () => false;
+} | {
+    label: string;
+    form: {
+        column: {
+            label: string;
+            fieldType: "SUniversalPColumnId";
+            defaultValue: () => undefined;
+        };
+        type: {
+            label: string;
+            fieldType: "FilterType";
+            defaultValue: () => "patternMatchesRegularExpression";
+        };
+        value: {
+            label: string;
+            fieldType: "string";
+            defaultValue: () => string;
+        };
+    };
+    supportedFor: typeof isStringValueType;
+} | {
+    label: string;
+    form: {
+        column: {
+            label: string;
+            fieldType: "SUniversalPColumnId";
+            defaultValue: () => undefined;
+        };
+        type: {
+            label: string;
+            fieldType: "FilterType";
+            defaultValue: () => "patternFuzzyContainSubsequence";
+        };
+        value: {
+            label: string;
+            fieldType: "string";
+            defaultValue: () => string;
+        };
+    };
+    supportedFor: typeof isStringValueType;
+} | {
+    label: string;
+    form: {
+        column: {
+            label: string;
+            fieldType: "SUniversalPColumnId";
+            defaultValue: () => undefined;
+        };
+        type: {
+            label: string;
+            fieldType: "FilterType";
+            defaultValue: () => "inSet";
+        };
+        value: {
+            fieldType: "unknown[]";
+            label: string;
+            defaultValue: () => never[];
+        };
+    };
+    supportedFor: typeof isStringValueType;
+} | {
+    label: string;
+    form: {
+        column: {
+            label: string;
+            fieldType: "SUniversalPColumnId";
+            defaultValue: () => undefined;
+        };
+        type: {
+            label: string;
+            fieldType: "FilterType";
+            defaultValue: () => "notInSet";
+        };
+        value: {
+            label: string;
+            fieldType: "unknown[]";
+            defaultValue: () => never[];
+        };
+    };
+    supportedFor: typeof isStringValueType;
 };
 declare function isNumericValueType(spec: SimplifiedPColumnSpec): boolean;
 declare function isStringValueType(spec: SimplifiedPColumnSpec): boolean;