@milaboratories/uikit 2.10.45 → 2.10.46

package/dist/components/PlNumberField/pl-number-field.css

@@ -1 +1 @@
-.pl-number-field{--contour-color:var(--txt-01);--contour-border-width:1px;--options-bg:#fff;--option-hover-bg:var(--btn-sec-hover-grey);--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);--color-hint:#9d9eae}.pl-number-field ::placeholder{color:#cfd1db;opacity:1}.pl-number-field__main-wrapper{height:40px;position:relative}.pl-number-field__wrapper{border-radius:6px;padding-left:12px}.pl-number-field__wrapper.withoutArrows{padding-right:12px}.pl-number-field__icons{border-left:1px solid var(--contour-color);border-radius:0 6px 6px 0;width:40px}.pl-number-field__icon{line-height:0}.pl-number-field__icon.disabled{cursor:not-allowed;z-index:1;position:relative}.pl-number-field__icon.disabled svg path{fill:#cfd1db}.pl-number-field__icon:hover{background-color:#9babcc29}.pl-number-field__icon:first-child{border-bottom:1px solid var(--contour-color)}.pl-number-field__hint{color:var(--color-hint);margin-top:3px}.pl-number-field__error{color:var(--txt-error);margin-top:3px;font-size:12px;font-weight:500;line-height:16px}.pl-number-field input{background:unset;text-overflow:ellipsis;border:none;outline:none;width:100%}.pl-number-field__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none;transition:all .3s}.pl-number-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-number-field:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-number-field.error{--contour-color:var(--txt-error);--label-color:var(--txt-error);--color-hint:var(--txt-error)}.pl-number-field.disabled{--contour-color:var(--color-dis-01);--control-mask-fill:var(--color-dis-01);cursor:not-allowed}.pl-number-field.disabled label,.pl-number-field.disabled .mi-number-field__hint,.pl-number-field.disabled input{color:var(--contour-color)}.pl-number-field.disabled svg path{fill:var(--contour-color)}.pl-number-field.disabled .mi-number-field__icons{pointer-events:none}.pl-number-field label{top:0;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);align-items:center;padding:0 4px;transition:color .3s;display:flex;position:absolute;overflow:hidden;transform:translateY(-60%)}.pl-number-field label .required{color:var(--txt-error);margin-right:4px;font-size:12px;font-weight:500;line-height:16px;display:inline-block}
+.pl-number-field{--contour-color:var(--txt-01);--contour-border-width:1px;--options-bg:#fff;--option-hover-bg:var(--btn-sec-hover-grey);--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);--color-hint:#9d9eae;--show-clearable:none}.pl-number-field ::placeholder{color:#cfd1db;opacity:1}.pl-number-field__main-wrapper{height:40px;position:relative}.pl-number-field__wrapper{border-radius:6px;gap:8px;padding-left:12px;padding-right:8px}.pl-number-field__icons{border-left:1px solid var(--contour-color);border-radius:0 6px 6px 0;width:40px}.pl-number-field__icon{line-height:0}.pl-number-field__icon.disabled{cursor:not-allowed;z-index:1;position:relative}.pl-number-field__icon.disabled svg path{fill:#cfd1db}.pl-number-field__icon:hover{background-color:#9babcc29}.pl-number-field__icon:first-child{border-bottom:1px solid var(--contour-color)}.pl-number-field__clearable{cursor:pointer;display:var(--show-clearable)!important;--icon-color:var(--ic-02)!important}.pl-number-field__hint{color:var(--color-hint);margin-top:3px}.pl-number-field__error{color:var(--txt-error);margin-top:3px;font-size:12px;font-weight:500;line-height:16px}.pl-number-field input{background:unset;text-overflow:ellipsis;border:none;outline:none;width:100%}.pl-number-field__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none;transition:all .3s}.pl-number-field:hover,.pl-number-field:focus-within{--show-clearable:inline-block}.pl-number-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-number-field:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-number-field.error{--contour-color:var(--txt-error);--label-color:var(--txt-error);--color-hint:var(--txt-error)}.pl-number-field.disabled{--contour-color:var(--color-dis-01);--control-mask-fill:var(--color-dis-01);cursor:not-allowed}.pl-number-field.disabled label,.pl-number-field.disabled .mi-number-field__hint,.pl-number-field.disabled input{color:var(--contour-color)}.pl-number-field.disabled svg path{fill:var(--contour-color)}.pl-number-field.disabled .mi-number-field__icons{pointer-events:none}.pl-number-field label{top:0;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);align-items:center;padding:0 4px;transition:color .3s;display:flex;position:absolute;overflow:hidden;transform:translateY(-60%)}.pl-number-field label .required{color:var(--txt-error);margin-right:4px;font-size:12px;font-weight:500;line-height:16px;display:inline-block}

package/dist/components/PlSearchField/PlSearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlSearchField.js","names":[],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<string>({ required: true });\n\nconst props = defineProps<{\n  modelValue?: string;\n  clearable?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  helper?: string;\n}>();\nconst slots = defineSlots<{\n  helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null || slots.helper != null);\n\nconst clear = () => (model.value = \"\");\n</script>\n\n<template>\n  <div ref=\"root\" :class=\"$style.component\">\n    <PlIcon24 name=\"search\" />\n    <input\n      ref=\"input\"\n      v-model=\"model\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder || 'Find...'\"\n      type=\"text\"\n      spellcheck=\"false\"\n    />\n    <PlIcon16\n      v-if=\"props.clearable && nonEmpty\"\n      :class=\"$style.clear\"\n      name=\"delete-clear\"\n      @click.stop=\"clear\"\n    />\n\n    <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\">\n      <template #tooltip>\n        <slot name=\"helper\">\n          {{ props.helper }}\n        </slot>\n      </template>\n    </PlTooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n  --pl-search-field-border-bottom-color: var(--txt-01);\n  --pl-search-field-bg: transparent;\n  --pl-search-field-caret-color: auto;\n  --pl-search-field-clear-display: none;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--control-height) - 2px);\n  line-height: calc(var(--control-height) - 2px);\n  background-color: var(--pl-search-field-bg);\n  padding: 0 0 0 0;\n  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n  input {\n    margin-left: 8px;\n    width: 100%;\n    height: 20px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    caret-color: var(--pl-search-field-caret-color);\n  }\n\n  &:focus-within {\n    --pl-search-field-border-bottom-color: var(--txt-focus);\n    --pl-search-field-caret-color: var(--border-color-focus);\n    --pl-search-field-clear-display: block;\n  }\n\n  &:hover {\n    --pl-search-field-clear-display: block;\n  }\n\n  .clear {\n    --icon-color: var(--ic-02);\n    cursor: pointer;\n    margin-left: auto;\n    display: var(--pl-search-field-clear-display);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlSearchField.js","names":[],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"V extends undefined | string, C extends V\">\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<V>({ required: true });\n\nconst props = defineProps<{\n  modelValue?: string;\n  clearable?: boolean | (() => C);\n  placeholder?: string;\n  disabled?: boolean;\n  helper?: string;\n}>();\nconst slots = defineSlots<{\n  helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null || slots.helper != null);\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n</script>\n\n<template>\n  <div ref=\"root\" :class=\"$style.component\">\n    <PlIcon24 name=\"search\" />\n    <input\n      ref=\"input\"\n      v-model=\"model\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder || 'Find...'\"\n      type=\"text\"\n      spellcheck=\"false\"\n    />\n    <PlIcon16\n      v-if=\"props.clearable && nonEmpty\"\n      :class=\"$style.clear\"\n      name=\"delete-clear\"\n      @click.stop=\"clear\"\n    />\n\n    <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\">\n      <template #tooltip>\n        <slot name=\"helper\">\n          {{ props.helper }}\n        </slot>\n      </template>\n    </PlTooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n  --pl-search-field-border-bottom-color: var(--txt-01);\n  --pl-search-field-bg: transparent;\n  --pl-search-field-caret-color: auto;\n  --pl-search-field-clear-display: none;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--control-height) - 2px);\n  line-height: calc(var(--control-height) - 2px);\n  background-color: var(--pl-search-field-bg);\n  padding: 0 0 0 0;\n  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n  input {\n    margin-left: 8px;\n    width: 100%;\n    height: 20px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    caret-color: var(--pl-search-field-caret-color);\n  }\n\n  &:focus-within {\n    --pl-search-field-border-bottom-color: var(--txt-focus);\n    --pl-search-field-caret-color: var(--border-color-focus);\n    --pl-search-field-clear-display: block;\n  }\n\n  &:hover {\n    --pl-search-field-clear-display: block;\n  }\n\n  .clear {\n    --icon-color: var(--ic-02);\n    cursor: pointer;\n    margin-left: auto;\n    display: var(--pl-search-field-clear-display);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/PlSearchField/PlSearchField.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlSearchField.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<string>({ required: true });\n\nconst props = defineProps<{\n  modelValue?: string;\n  clearable?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  helper?: string;\n}>();\nconst slots = defineSlots<{\n  helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null || slots.helper != null);\n\nconst clear = () => (model.value = \"\");\n</script>\n\n<template>\n  <div ref=\"root\" :class=\"$style.component\">\n    <PlIcon24 name=\"search\" />\n    <input\n      ref=\"input\"\n      v-model=\"model\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder || 'Find...'\"\n      type=\"text\"\n      spellcheck=\"false\"\n    />\n    <PlIcon16\n      v-if=\"props.clearable && nonEmpty\"\n      :class=\"$style.clear\"\n      name=\"delete-clear\"\n      @click.stop=\"clear\"\n    />\n\n    <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\">\n      <template #tooltip>\n        <slot name=\"helper\">\n          {{ props.helper }}\n        </slot>\n      </template>\n    </PlTooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n  --pl-search-field-border-bottom-color: var(--txt-01);\n  --pl-search-field-bg: transparent;\n  --pl-search-field-caret-color: auto;\n  --pl-search-field-clear-display: none;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--control-height) - 2px);\n  line-height: calc(var(--control-height) - 2px);\n  background-color: var(--pl-search-field-bg);\n  padding: 0 0 0 0;\n  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n  input {\n    margin-left: 8px;\n    width: 100%;\n    height: 20px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    caret-color: var(--pl-search-field-caret-color);\n  }\n\n  &:focus-within {\n    --pl-search-field-border-bottom-color: var(--txt-focus);\n    --pl-search-field-caret-color: var(--border-color-focus);\n    --pl-search-field-clear-display: block;\n  }\n\n  &:hover {\n    --pl-search-field-clear-display: block;\n  }\n\n  .clear {\n    --icon-color: var(--ic-02);\n    cursor: pointer;\n    margin-left: auto;\n    display: var(--pl-search-field-clear-display);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlSearchField.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"V extends undefined | string, C extends V\">\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<V>({ required: true });\n\nconst props = defineProps<{\n  modelValue?: string;\n  clearable?: boolean | (() => C);\n  placeholder?: string;\n  disabled?: boolean;\n  helper?: string;\n}>();\nconst slots = defineSlots<{\n  helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null || slots.helper != null);\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n</script>\n\n<template>\n  <div ref=\"root\" :class=\"$style.component\">\n    <PlIcon24 name=\"search\" />\n    <input\n      ref=\"input\"\n      v-model=\"model\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder || 'Find...'\"\n      type=\"text\"\n      spellcheck=\"false\"\n    />\n    <PlIcon16\n      v-if=\"props.clearable && nonEmpty\"\n      :class=\"$style.clear\"\n      name=\"delete-clear\"\n      @click.stop=\"clear\"\n    />\n\n    <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\">\n      <template #tooltip>\n        <slot name=\"helper\">\n          {{ props.helper }}\n        </slot>\n      </template>\n    </PlTooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n  --pl-search-field-border-bottom-color: var(--txt-01);\n  --pl-search-field-bg: transparent;\n  --pl-search-field-caret-color: auto;\n  --pl-search-field-clear-display: none;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--control-height) - 2px);\n  line-height: calc(var(--control-height) - 2px);\n  background-color: var(--pl-search-field-bg);\n  padding: 0 0 0 0;\n  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n  input {\n    margin-left: 8px;\n    width: 100%;\n    height: 20px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    caret-color: var(--pl-search-field-caret-color);\n  }\n\n  &:focus-within {\n    --pl-search-field-border-bottom-color: var(--txt-focus);\n    --pl-search-field-caret-color: var(--border-color-focus);\n    --pl-search-field-clear-display: block;\n  }\n\n  &:hover {\n    --pl-search-field-clear-display: block;\n  }\n\n  .clear {\n    --icon-color: var(--ic-02);\n    cursor: pointer;\n    margin-left: auto;\n    display: var(--pl-search-field-clear-display);\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,40 +1,28 @@
-type __VLS_Props = {
-    modelValue?: string;
-    clearable?: boolean;
-    placeholder?: string;
-    disabled?: boolean;
-    helper?: string;
-};
-type __VLS_PublicProps = {
-    modelValue: string;
-} & __VLS_Props;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
+declare const _default: <V extends undefined | string, C extends V>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: V) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & ({
+        modelValue: V;
+    } & {
+        modelValue?: string;
+        clearable?: boolean | (() => C);
+        placeholder?: string;
+        disabled?: boolean;
+        helper?: string;
+    }) & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
     slots: Readonly<{
         helper: () => unknown;
     }> & {
         helper: () => unknown;
     };
-    refs: {
-        root: HTMLDivElement;
-        input: HTMLInputElement;
-    };
-    rootEl: HTMLDivElement;
+    emit: (evt: "update:modelValue", value: V) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    root: HTMLDivElement;
-    input: HTMLInputElement;
-}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};
 //# sourceMappingURL=PlSearchField.vue.d.ts.map

package/dist/components/PlSearchField/PlSearchField.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlSearchField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"names":[],"mappings":"AA6GA,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAcF,KAAK,iBAAiB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;CAClB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WA4FT,OAAO,IAA6B;;gBA9GxC,MAAM,OAAO;;gBAAb,MAAM,OAAO;;;;;;;EAmHtB;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;kBASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlSearchField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"names":[],"mappings":"yBA+GiB,CAAC,SAAS,SAAS,GAAG,MAAM,EAAE,CAAC,SAAS,CAAC,EACzD,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WA0JO,mBAAmB,CAAC;;;oBAzHhB,CAAC;;qBA7BE,MAAM;oBACP,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC;sBACjB,MAAM;mBACT,OAAO;iBACT,MAAM;oBAkJ6E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;gBAhJD,MAAM,OAAO;;gBAAb,MAAM,OAAO;;;EAoJnB,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AArKzE,wBAqK4E;AAM5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/PlSearchField/PlSearchField.vue2.js

@@ -8,7 +8,7 @@ var C = ["disabled", "placeholder"], w = /* @__PURE__ */ u({
 	__name: "PlSearchField",
 	props: /* @__PURE__ */ d({
 		modelValue: {},
-		clearable: { type: Boolean },
+		clearable: { type: [Boolean, Function] },
 		placeholder: {},
 		disabled: { type: Boolean },
 		helper: {}
@@ -18,7 +18,9 @@ var C = ["disabled", "placeholder"], w = /* @__PURE__ */ u({
 	}),
 	emits: ["update:modelValue"],
 	setup(u) {
-		let d = _(u, "modelValue"), w = u, T = v(), E = r(() => d.value != null && d.value.length > 0), D = r(() => w.helper != null || T.helper != null), O = () => d.value = "";
+		let d = _(u, "modelValue"), w = u, T = v(), E = r(() => d.value != null && d.value.length > 0), D = r(() => w.helper != null || T.helper != null), O = () => {
+			w.clearable && (d.value = typeof w.clearable == "function" ? w.clearable() : "");
+		};
 		return (r, u) => (p(), o("div", {
 			ref: "root",
 			class: f(r.$style.component)

package/dist/components/PlSearchField/PlSearchField.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlSearchField.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<string>({ required: true });\n\nconst props = defineProps<{\n  modelValue?: string;\n  clearable?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  helper?: string;\n}>();\nconst slots = defineSlots<{\n  helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null || slots.helper != null);\n\nconst clear = () => (model.value = \"\");\n</script>\n\n<template>\n  <div ref=\"root\" :class=\"$style.component\">\n    <PlIcon24 name=\"search\" />\n    <input\n      ref=\"input\"\n      v-model=\"model\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder || 'Find...'\"\n      type=\"text\"\n      spellcheck=\"false\"\n    />\n    <PlIcon16\n      v-if=\"props.clearable && nonEmpty\"\n      :class=\"$style.clear\"\n      name=\"delete-clear\"\n      @click.stop=\"clear\"\n    />\n\n    <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\">\n      <template #tooltip>\n        <slot name=\"helper\">\n          {{ props.helper }}\n        </slot>\n      </template>\n    </PlTooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n  --pl-search-field-border-bottom-color: var(--txt-01);\n  --pl-search-field-bg: transparent;\n  --pl-search-field-caret-color: auto;\n  --pl-search-field-clear-display: none;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--control-height) - 2px);\n  line-height: calc(var(--control-height) - 2px);\n  background-color: var(--pl-search-field-bg);\n  padding: 0 0 0 0;\n  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n  input {\n    margin-left: 8px;\n    width: 100%;\n    height: 20px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    caret-color: var(--pl-search-field-caret-color);\n  }\n\n  &:focus-within {\n    --pl-search-field-border-bottom-color: var(--txt-focus);\n    --pl-search-field-caret-color: var(--border-color-focus);\n    --pl-search-field-clear-display: block;\n  }\n\n  &:hover {\n    --pl-search-field-clear-display: block;\n  }\n\n  .clear {\n    --icon-color: var(--ic-02);\n    cursor: pointer;\n    margin-left: auto;\n    display: var(--pl-search-field-clear-display);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,EAAmB,GAAA,aAAoB,EAE/C,IAAQ,GAOR,IAAQ,GAEV,EAEE,IAAW,QAAe,EAAM,SAAS,QAAQ,EAAM,MAAM,SAAS,EAAE,EACxE,IAAY,QAAe,EAAM,UAAU,QAAQ,EAAM,UAAU,KAAK,EAExE,UAAe,EAAM,QAAQ;yBAIjC,EAwBM,OAAA;GAxBD,KAAI;GAAQ,OAAK,EAAEA,EAAAA,OAAO,UAAS;;GACtC,EAA0B,EAAA,EAAA,EAAA,EAAhB,MAAK,UAAQ,CAAA;KACvB,EAOE,SAAA;IANA,KAAI;6CACU,QAAA;IACb,UAAU,EAAM;IAChB,aAAa,EAAM,eAAW;IAC/B,MAAK;IACL,YAAW;wBAJF,EAAA,MAAK,CAAA,CAAA;GAOR,EAAM,aAAa,EAAA,SAAA,GAAA,EAD3B,EAKE,EAAA,EAAA,EAAA;;IAHC,OAAK,EAAEA,EAAAA,OAAO,MAAK;IACpB,MAAK;IACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;GAGH,EAAA,SAAA,GAAA,EAAjB,EAMY,GAAA;;IANgB,OAAM;IAAO,UAAS;;IACrC,SAAO,QAGT,CAFP,EAEO,EAAA,QAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAM,OAAM,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"PlSearchField.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"V extends undefined | string, C extends V\">\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<V>({ required: true });\n\nconst props = defineProps<{\n  modelValue?: string;\n  clearable?: boolean | (() => C);\n  placeholder?: string;\n  disabled?: boolean;\n  helper?: string;\n}>();\nconst slots = defineSlots<{\n  helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null || slots.helper != null);\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n</script>\n\n<template>\n  <div ref=\"root\" :class=\"$style.component\">\n    <PlIcon24 name=\"search\" />\n    <input\n      ref=\"input\"\n      v-model=\"model\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder || 'Find...'\"\n      type=\"text\"\n      spellcheck=\"false\"\n    />\n    <PlIcon16\n      v-if=\"props.clearable && nonEmpty\"\n      :class=\"$style.clear\"\n      name=\"delete-clear\"\n      @click.stop=\"clear\"\n    />\n\n    <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\">\n      <template #tooltip>\n        <slot name=\"helper\">\n          {{ props.helper }}\n        </slot>\n      </template>\n    </PlTooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n  --pl-search-field-border-bottom-color: var(--txt-01);\n  --pl-search-field-bg: transparent;\n  --pl-search-field-caret-color: auto;\n  --pl-search-field-clear-display: none;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--control-height) - 2px);\n  line-height: calc(var(--control-height) - 2px);\n  background-color: var(--pl-search-field-bg);\n  padding: 0 0 0 0;\n  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n  input {\n    margin-left: 8px;\n    width: 100%;\n    height: 20px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    caret-color: var(--pl-search-field-caret-color);\n  }\n\n  &:focus-within {\n    --pl-search-field-border-bottom-color: var(--txt-focus);\n    --pl-search-field-caret-color: var(--border-color-focus);\n    --pl-search-field-clear-display: block;\n  }\n\n  &:hover {\n    --pl-search-field-clear-display: block;\n  }\n\n  .clear {\n    --icon-color: var(--ic-02);\n    cursor: pointer;\n    margin-left: auto;\n    display: var(--pl-search-field-clear-display);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,EAAc,GAAA,aAAoB,EAE1C,IAAQ,GAOR,IAAQ,GAEV,EAEE,IAAW,QAAe,EAAM,SAAS,QAAQ,EAAM,MAAM,SAAS,EAAE,EACxE,IAAY,QAAe,EAAM,UAAU,QAAQ,EAAM,UAAU,KAAK,EAExE,UAAc;AAClB,GAAI,EAAM,cACR,EAAM,QAAS,OAAO,EAAM,aAAc,aAAa,EAAM,WAAW,GAAG;;yBAM7E,EAwBM,OAAA;GAxBD,KAAI;GAAQ,OAAK,EAAEA,EAAAA,OAAO,UAAS;;GACtC,EAA0B,EAAA,EAAA,EAAA,EAAhB,MAAK,UAAQ,CAAA;KACvB,EAOE,SAAA;IANA,KAAI;6CACU,QAAA;IACb,UAAU,EAAM;IAChB,aAAa,EAAM,eAAW;IAC/B,MAAK;IACL,YAAW;wBAJF,EAAA,MAAK,CAAA,CAAA;GAOR,EAAM,aAAa,EAAA,SAAA,GAAA,EAD3B,EAKE,EAAA,EAAA,EAAA;;IAHC,OAAK,EAAEA,EAAAA,OAAO,MAAK;IACpB,MAAK;IACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;GAGH,EAAA,SAAA,GAAA,EAAjB,EAMY,GAAA;;IANgB,OAAM;IAAO,UAAS;;IACrC,SAAO,QAGT,CAFP,EAEO,EAAA,QAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAM,OAAM,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.js","names":[],"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>\nimport { computed, 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\n/**\n * The current value of the input field.\n */\nconst model = defineModel<string>({\n  default: \"\",\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   */\n  clearable?: boolean;\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?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\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    model.value = \"\";\n  }\n};\n\nconst validationData = useValidation(model, props.rules || []);\n\nconst isEmpty = computed(() => model.value === \"\");\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 (!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(\n  () => props.clearable && nonEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\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=\"model\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\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"],"mappings":""}
+{"version":3,"file":"PlTextField.js","names":[],"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\n  lang=\"ts\"\n  setup\n  generic=\"\n    R extends true | false,\n    V extends undefined | string,\n    C extends Exclude<V, R extends true ? undefined : never>\n  \"\n>\nimport { computed, 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 { 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\n/**\n * The current value of the input field.\n */\nconst model = defineModel<V>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /** The label to display above the input field. */\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   * If a function, calls it to get the reset value.\n   */\n  clearable?: (R extends true ? never : boolean) | (() => C);\n  /** If `true`, the input field is marked as required and will show an error if left empty. */\n  required?: R;\n  /** An error message to display below the input field. */\n  error?: unknown;\n  /** A helper text to display below the input field when there are no errors. */\n  helper?: string;\n  /** A placeholder text to display inside the input field when it is empty. */\n  placeholder?: string;\n  /** If `true`, the input field is disabled and cannot be interacted with. */\n  disabled?: boolean;\n  /** If `true`, the input field has a dashed border. */\n  dashed?: boolean;\n  /** A prefix text to display inside the input field before the value. */\n  prefix?: string;\n  /** Additional validity check for input value that must return an error text if failed */\n  validate?: (v: V) => string | undefined;\n  /** The string specifies whether the field should be a password or not, value could be \"password\" or undefined. */\n  type?: \"password\";\n  /** Makes some of corners not rounded */\n  groupPosition?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\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    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n\nconst isEmpty = computed(() => model.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 (props.validate) {\n    const error = props.validate(model.value as V);\n    if (error) {\n      errors.push(error);\n    }\n  }\n  if (props.required && isEmpty.value) {\n    errors.push(\"Value is required\");\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n  () => props.clearable && !isEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\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: !isEmpty,\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=\"model\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\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"],"mappings":""}

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

@@ -1,124 +1,52 @@
 /**
  * Component for one-line string data manipulation
  */
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
-    modelValue?: string;
-} & {
-    /**
-     * The label to display above the input field.
-     */
-    label?: string;
-    /**
-     * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
-     */
-    clearable?: boolean;
-    /**
-     * If `true`, the input field is marked as required.
-     */
-    required?: boolean;
-    /**
-     * An error message to display below the input field.
-     */
-    error?: unknown;
-    /**
-     * A helper text to display below the input field when there are no errors.
-     */
-    helper?: string;
-    /**
-     * A placeholder text to display inside the input field when it is empty.
-     */
-    placeholder?: string;
-    /**
-     * If `true`, the input field is disabled and cannot be interacted with.
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the input field has a dashed border.
-     */
-    dashed?: boolean;
-    /**
-     * A prefix text to display inside the input field before the value.
-     */
-    prefix?: string;
-    /**
-     * 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.
-     */
-    rules?: ((v: string) => boolean | string)[];
-    /**
-     * 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";
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import('vue').PublicProps, Readonly<{
-    modelValue?: string;
-} & {
-    /**
-     * The label to display above the input field.
-     */
-    label?: string;
-    /**
-     * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
-     */
-    clearable?: boolean;
-    /**
-     * If `true`, the input field is marked as required.
-     */
-    required?: boolean;
-    /**
-     * An error message to display below the input field.
-     */
-    error?: unknown;
-    /**
-     * A helper text to display below the input field when there are no errors.
-     */
-    helper?: string;
-    /**
-     * A placeholder text to display inside the input field when it is empty.
-     */
-    placeholder?: string;
-    /**
-     * If `true`, the input field is disabled and cannot be interacted with.
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the input field has a dashed border.
-     */
-    dashed?: boolean;
-    /**
-     * A prefix text to display inside the input field before the value.
-     */
-    prefix?: string;
-    /**
-     * 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.
-     */
-    rules?: ((v: string) => boolean | string)[];
-    /**
-     * 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";
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    rootRef: HTMLDivElement;
-    label: HTMLLabelElement;
-    inputRef: HTMLInputElement;
-}, HTMLDivElement>, {
-    tooltip?(_: {}): any;
-    append?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+declare const _default: <R extends true | false, V extends undefined | string, C extends Exclude<V, R extends true ? undefined : never>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: V) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & ({
+        modelValue: V;
+    } & {
+        /** The label to display above the input field. */
+        label?: string;
+        /**
+         * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
+         * If a function, calls it to get the reset value.
+         */
+        clearable?: (R extends true ? never : boolean) | (() => C);
+        /** If `true`, the input field is marked as required and will show an error if left empty. */
+        required?: R;
+        /** An error message to display below the input field. */
+        error?: unknown;
+        /** A helper text to display below the input field when there are no errors. */
+        helper?: string;
+        /** A placeholder text to display inside the input field when it is empty. */
+        placeholder?: string;
+        /** If `true`, the input field is disabled and cannot be interacted with. */
+        disabled?: boolean;
+        /** If `true`, the input field has a dashed border. */
+        dashed?: boolean;
+        /** A prefix text to display inside the input field before the value. */
+        prefix?: string;
+        /** Additional validity check for input value that must return an error text if failed */
+        validate?: (v: V) => string | undefined;
+        /** 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;
+    slots: {
+        tooltip?(_: {}): any;
+        append?(_: {}): any;
     };
+    emit: (evt: "update:modelValue", value: V) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};
 //# sourceMappingURL=PlTextField.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTextField/PlTextField.vue"],"names":[],"mappings":"AAmNA,OAAO,sBAAsB,CAAC;AAG9B;;GAEG;;iBAiIU,MAAM;;IArHjB;;OAEG;YACK,MAAM;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;eACQ,OAAO;IAClB;;OAEG;aACM,OAAO;IAChB;;OAEG;aACM,MAAM;IACf;;OAEG;YACK,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC,EAAE;IAC3C;;OAEG;WACI,UAAU;IACjB;;SAEK;oBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;;;iBA6DD,MAAM;;IArHjB;;OAEG;YACK,MAAM;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;eACQ,OAAO;IAClB;;OAEG;aACM,OAAO;IAChB;;OAEG;aACM,MAAM;IACf;;OAEG;YACK,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC,EAAE;IAC3C;;OAEG;WACI,UAAU;IACjB;;SAEK;oBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;;;;;;;qBA4NgB,GAAG;oBACJ,GAAG;;AAhShC,wBA8VK;AASL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlTextField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTextField/PlTextField.vue"],"names":[],"mappings":"AAsMA,OAAO,sBAAsB,CAAC;AAG9B;;GAEG;yBAEC,CAAC,SAAS,IAAI,GAAG,KAAK,EACtB,CAAC,SAAS,SAAS,GAAG,MAAM,EAC5B,CAAC,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC,EAE3D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAmUO,mBAAmB,CAAC;;;oBAlNhB,CAAC;;QAtGX,kDAAkD;gBAC1C,MAAM;QACd;;;WAGG;oBACS,CAAC,CAAC,SAAS,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC1D,6FAA6F;mBAClF,CAAC;QACZ,yDAAyD;gBACjD,OAAO;QACf,+EAA+E;iBACtE,MAAM;QACf,6EAA6E;sBAC/D,MAAM;QACpB,4EAA4E;mBACjE,OAAO;QAClB,sDAAsD;iBAC7C,OAAO;QAChB,wEAAwE;iBAC/D,MAAM;QACf,yFAAyF;mBAC9E,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS;QACvC,kHAAkH;eAC3G,UAAU;QACjB,wCAAwC;wBAEpC,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;oBAqRgF,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBArDmB,GAAG;wBACJ,GAAG;;;EAwD5B,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAlVzE,wBAkV4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/PlTextField/PlTextField.vue2.js

@@ -10,112 +10,115 @@ import a from "../../utils/DoubleContour.js";
 import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
 import "../PlIcon16/index.js";
 import s from "../../assets/images/required.js";
-import { useValidation as c } from "../../utils/useValidation.js";
 import './pl-text-field.css';/* empty css              */
-import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, ref as y, renderSlot as b, toDisplayString as x, unref as S, useModel as C, useSlots as w, vModelDynamic as T, withCtx as E, withDirectives as D, withModifiers as O } from "vue";
-var k = { class: "pl-text-field__envelope" }, A = {
+import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, openBlock as _, ref as v, renderSlot as y, toDisplayString as b, unref as x, useModel as S, useSlots as C, vModelDynamic as w, withCtx as T, withDirectives as E, withModifiers as D } from "vue";
+var O = { class: "pl-text-field__envelope" }, k = {
 	key: 0,
 	ref: "label"
-}, j = {
+}, A = {
 	key: 1,
 	class: "pl-text-field__prefix"
-}, M = [
+}, j = [
 	"disabled",
 	"placeholder",
 	"type"
-], N = {
+], M = {
 	key: 0,
 	class: "pl-text-field__error"
-}, P = {
+}, N = {
 	key: 1,
 	class: "pl-text-field__helper"
-}, F = /* @__PURE__ */ h({
+}, P = /* @__PURE__ */ m({
 	name: "PlTextField",
-	props: /* @__PURE__ */ g({
+	props: /* @__PURE__ */ h({
 		label: {},
-		clearable: { type: Boolean },
-		required: { type: Boolean },
+		clearable: { type: Function },
+		required: {},
 		error: {},
 		helper: {},
 		placeholder: {},
 		disabled: { type: Boolean },
 		dashed: { type: Boolean },
 		prefix: {},
-		rules: {},
+		validate: { type: Function },
 		type: {},
 		groupPosition: {}
 	}, {
-		modelValue: { default: "" },
+		modelValue: { required: !0 },
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(h) {
-		let g = w(), F = C(h, "modelValue"), I = h, L = y(void 0), R = y(), z = y(!1), B = l(() => I.type && I.type === "password" ? z.value ? "text" : I.type : "text"), V = l(() => z.value ? "view-show" : "view-hide"), H = () => {
-			I.clearable && (F.value = "");
-		}, U = c(F, I.rules || []), W = l(() => F.value === ""), G = l(() => !W.value), K = l(() => {
-			let e = [], n = t(I.error);
-			return n && e.push(n), U.value.isValid || e.push(...U.value.errors), e;
-		}), q = l(() => K.value.length > 0), J = l(() => I.clearable && G.value && I.type !== "password" && !I.disabled), Y = () => z.value = !z.value, X = () => R.value?.focus();
-		return o(L), (t, o) => (v(), f("div", k, [p("div", {
+	setup(m) {
+		let h = C(), P = S(m, "modelValue"), F = m, I = v(void 0), L = v(), R = v(!1), z = c(() => F.type && F.type === "password" ? R.value ? "text" : F.type : "text"), B = c(() => R.value ? "view-show" : "view-hide"), V = () => {
+			F.clearable && (P.value = typeof F.clearable == "function" ? F.clearable() : "");
+		}, H = c(() => P.value === ""), U = c(() => {
+			let e = [], n = t(F.error);
+			if (n && e.push(n), F.validate) {
+				let t = F.validate(P.value);
+				t && e.push(t);
+			}
+			return F.required && H.value && e.push("Value is required"), e;
+		}), W = c(() => U.value.length > 0), G = c(() => F.clearable && !H.value && F.type !== "password" && !F.disabled), K = () => R.value = !R.value, q = () => L.value?.focus();
+		return o(I), (t, o) => (_(), d("div", O, [f("div", {
 			ref_key: "rootRef",
-			ref: L,
-			class: _(["pl-text-field", {
-				error: q.value,
-				disabled: h.disabled,
-				dashed: h.dashed,
-				nonEmpty: G.value
+			ref: I,
+			class: g(["pl-text-field", {
+				error: W.value,
+				disabled: m.disabled,
+				dashed: m.dashed,
+				nonEmpty: !H.value
 			}])
 		}, [
-			h.label ? (v(), f("label", A, [
-				h.required ? (v(), u(S(n), {
+			m.label ? (_(), d("label", k, [
+				m.required ? (_(), l(x(n), {
 					key: 0,
-					uri: S(s)
-				}, null, 8, ["uri"])) : d("", !0),
-				p("span", null, x(h.label), 1),
-				S(g).tooltip ? (v(), u(S(e), {
+					uri: x(s)
+				}, null, 8, ["uri"])) : u("", !0),
+				f("span", null, b(m.label), 1),
+				x(h).tooltip ? (_(), l(x(e), {
 					key: 1,
 					class: "info",
 					position: "top"
 				}, {
-					tooltip: E(() => [b(t.$slots, "tooltip")]),
+					tooltip: T(() => [y(t.$slots, "tooltip")]),
 					_: 3
-				})) : d("", !0)
-			], 512)) : d("", !0),
-			h.prefix ? (v(), f("div", j, x(h.prefix), 1)) : d("", !0),
-			D(p("input", {
+				})) : u("", !0)
+			], 512)) : u("", !0),
+			m.prefix ? (_(), d("div", A, b(m.prefix), 1)) : u("", !0),
+			E(f("input", {
 				ref_key: "inputRef",
-				ref: R,
-				"onUpdate:modelValue": o[0] ||= (e) => F.value = e,
-				disabled: h.disabled,
-				placeholder: h.placeholder || "...",
-				type: B.value,
+				ref: L,
+				"onUpdate:modelValue": o[0] ||= (e) => P.value = e,
+				disabled: m.disabled,
+				placeholder: m.placeholder || "...",
+				type: z.value,
 				spellcheck: "false"
-			}, null, 8, M), [[T, F.value]]),
-			p("div", {
+			}, null, 8, j), [[w, P.value]]),
+			f("div", {
 				class: "pl-text-field__append",
-				onClick: X
+				onClick: q
 			}, [
-				J.value ? (v(), u(S(i), {
+				G.value ? (_(), l(x(i), {
 					key: 0,
 					class: "pl-text-field__clearable",
 					name: "delete-clear",
-					onClick: O(H, ["stop"])
-				})) : d("", !0),
-				h.type === "password" ? (v(), u(S(r), {
+					onClick: D(V, ["stop"])
+				})) : u("", !0),
+				m.type === "password" ? (_(), l(x(r), {
 					key: 1,
-					name: V.value,
+					name: B.value,
 					style: { cursor: "pointer" },
-					onClick: O(Y, ["stop"])
-				}, null, 8, ["name"])) : d("", !0),
-				b(t.$slots, "append")
+					onClick: D(K, ["stop"])
+				}, null, 8, ["name"])) : u("", !0),
+				y(t.$slots, "append")
 			]),
-			m(a, {
+			p(a, {
 				class: "pl-text-field__contour",
-				"group-position": h.groupPosition
+				"group-position": m.groupPosition
 			}, null, 8, ["group-position"])
-		], 2), q.value ? (v(), f("div", N, x(K.value.join(" ")), 1)) : h.helper ? (v(), f("div", P, x(h.helper), 1)) : d("", !0)]));
+		], 2), W.value ? (_(), d("div", M, b(U.value.join(" ")), 1)) : m.helper ? (_(), d("div", N, b(m.helper), 1)) : u("", !0)]));
 	}
 });
-export { F as default };
+export { P as default };
 
 //# sourceMappingURL=PlTextField.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"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>\nimport { computed, 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\n/**\n * The current value of the input field.\n */\nconst model = defineModel<string>({\n  default: \"\",\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   */\n  clearable?: boolean;\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?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\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    model.value = \"\";\n  }\n};\n\nconst validationData = useValidation(model, props.rules || []);\n\nconst isEmpty = computed(() => model.value === \"\");\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 (!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(\n  () => props.clearable && nonEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\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=\"model\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;EAiBR,IAAM,IAAQ,GAAU,EAKlB,IAAQ,EAAmB,GAAA,aAE/B,EAEI,IAAQ,GA4DR,IAAU,EAAkC,KAAA,EAAU,EAEtD,IAAW,GAAmC,EAE9C,IAAe,EAAI,GAAM,EAEzB,IAAY,QACZ,EAAM,QAAQ,EAAM,SAAS,aACxB,EAAa,QAAQ,SAAS,EAAM,OAEpC,OAET,EAEI,IAAe,QAAgB,EAAa,QAAQ,cAAc,YAAa,EAE/E,UAAc;AAClB,GAAI,EAAM,cACR,EAAM,QAAQ;KAIZ,IAAiB,EAAc,GAAO,EAAM,SAAS,EAAE,CAAC,EAExD,IAAU,QAAe,EAAM,UAAU,GAAG,EAE5C,IAAW,QAAe,CAAC,EAAQ,MAAM,EAEzC,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAO/C,UANI,KACF,EAAO,KAAK,EAAW,EAEpB,EAAe,MAAM,WACxB,EAAO,KAAK,GAAG,EAAe,MAAM,OAAO,EAEtC;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,IAAmB,QACjB,EAAM,aAAa,EAAS,SAAS,EAAM,SAAS,cAAc,CAAC,EAAM,SAChF,EAEK,UAAkC,EAAa,QAAQ,CAAC,EAAa,OAErE,UAAwB,EAAS,OAAO,OAAO;SAErD,EAAc,EAAQ,kBAIpB,EAoDM,OApDN,GAoDM,CAnDJ,EA8CM,OAAA;YA7CA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,iBAAe;WACI,EAAA;cAAmB,EAAA;YAAkB,EAAA;cAAgB,EAAA;;;GAOjE,EAAA,SAAA,GAAA,EAAb,EAQQ,SARR,GAQQ;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAIlB,EAAA,UAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;KAEX,EAOE,SAAA;aANI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACxB,MAAM,EAAA;IACP,YAAW;wBAJF,EAAA,MAAK,CAAA,CAAA;GAMhB,EAcM,OAAA;IAdD,OAAM;IAAyB,SAAO;;IAEjC,EAAA,SAAA,GAAA,EADR,EAKE,EAAA,EAAA,EAAA;;KAHA,OAAM;KACN,MAAK;KACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;IAGZ,EAAA,SAAI,cAAA,GAAA,EADZ,EAKE,EAAA,EAAA,EAAA;;KAHC,MAAM,EAAA;KACP,OAAA,EAAA,QAAA,WAAuB;KACtB,SAAK,EAAO,GAAwB,CAAA,OAAA,CAAA;;IAEvC,EAAsB,EAAA,QAAA,SAAA;;GAExB,EAAgF,GAAA;IAAjE,OAAM;IAA0B,kBAAgB,EAAA;;SAEtD,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAAwE,OAAxE,GAAwE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"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\n  lang=\"ts\"\n  setup\n  generic=\"\n    R extends true | false,\n    V extends undefined | string,\n    C extends Exclude<V, R extends true ? undefined : never>\n  \"\n>\nimport { computed, 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 { 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\n/**\n * The current value of the input field.\n */\nconst model = defineModel<V>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /** The label to display above the input field. */\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   * If a function, calls it to get the reset value.\n   */\n  clearable?: (R extends true ? never : boolean) | (() => C);\n  /** If `true`, the input field is marked as required and will show an error if left empty. */\n  required?: R;\n  /** An error message to display below the input field. */\n  error?: unknown;\n  /** A helper text to display below the input field when there are no errors. */\n  helper?: string;\n  /** A placeholder text to display inside the input field when it is empty. */\n  placeholder?: string;\n  /** If `true`, the input field is disabled and cannot be interacted with. */\n  disabled?: boolean;\n  /** If `true`, the input field has a dashed border. */\n  dashed?: boolean;\n  /** A prefix text to display inside the input field before the value. */\n  prefix?: string;\n  /** Additional validity check for input value that must return an error text if failed */\n  validate?: (v: V) => string | undefined;\n  /** The string specifies whether the field should be a password or not, value could be \"password\" or undefined. */\n  type?: \"password\";\n  /** Makes some of corners not rounded */\n  groupPosition?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\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    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n\nconst isEmpty = computed(() => model.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 (props.validate) {\n    const error = props.validate(model.value as V);\n    if (error) {\n      errors.push(error);\n    }\n  }\n  if (props.required && isEmpty.value) {\n    errors.push(\"Value is required\");\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n  () => props.clearable && !isEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\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: !isEmpty,\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=\"model\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;EAwBR,IAAM,IAAQ,GAAU,EAKlB,IAAQ,EAAc,GAAA,aAE1B,EAEI,IAAQ,GAuCR,IAAU,EAAkC,KAAA,EAAU,EAEtD,IAAW,GAAmC,EAE9C,IAAe,EAAI,GAAM,EAEzB,IAAY,QACZ,EAAM,QAAQ,EAAM,SAAS,aACxB,EAAa,QAAQ,SAAS,EAAM,OAEpC,OAET,EAEI,IAAe,QAAgB,EAAa,QAAQ,cAAc,YAAa,EAE/E,UAAc;AAClB,GAAI,EAAM,cACR,EAAM,QAAS,OAAO,EAAM,aAAc,aAAa,EAAM,WAAW,GAAG;KAIzE,IAAU,QAAe,EAAM,UAAU,GAAG,EAE5C,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAI/C,OAHI,KACF,EAAO,KAAK,EAAW,EAErB,EAAM,UAAU;IAClB,IAAM,IAAQ,EAAM,SAAS,EAAM,MAAW;AAC9C,IAAI,KACF,EAAO,KAAK,EAAM;;AAMtB,UAHI,EAAM,YAAY,EAAQ,SAC5B,EAAO,KAAK,oBAAoB,EAE3B;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,IAAmB,QACjB,EAAM,aAAa,CAAC,EAAQ,SAAS,EAAM,SAAS,cAAc,CAAC,EAAM,SAChF,EAEK,UAAkC,EAAa,QAAQ,CAAC,EAAa,OAErE,UAAwB,EAAS,OAAO,OAAO;SAErD,EAAc,EAAQ,kBAIpB,EAoDM,OApDN,GAoDM,CAnDJ,EA8CM,OAAA;YA7CA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,iBAAe;WACI,EAAA;cAAmB,EAAA;YAAkB,EAAA;eAA2B,EAAA;;;GAO5E,EAAA,SAAA,GAAA,EAAb,EAQQ,SARR,GAQQ;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAIlB,EAAA,UAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;KAEX,EAOE,SAAA;aANI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACxB,MAAM,EAAA;IACP,YAAW;wBAJF,EAAA,MAAK,CAAA,CAAA;GAMhB,EAcM,OAAA;IAdD,OAAM;IAAyB,SAAO;;IAEjC,EAAA,SAAA,GAAA,EADR,EAKE,EAAA,EAAA,EAAA;;KAHA,OAAM;KACN,MAAK;KACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;IAGZ,EAAA,SAAI,cAAA,GAAA,EADZ,EAKE,EAAA,EAAA,EAAA;;KAHC,MAAM,EAAA;KACP,OAAA,EAAA,QAAA,WAAuB;KACtB,SAAK,EAAO,GAAwB,CAAA,OAAA,CAAA;;IAEvC,EAAsB,EAAA,QAAA,SAAA;;GAExB,EAAgF,GAAA;IAAjE,OAAM;IAA0B,kBAAgB,EAAA;;SAEtD,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAAwE,OAAxE,GAAwE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}