tide-design-system 2.5.20 → 2.6.0

package/dist/components/TideInputText.vue2.js

@@ -0,0 +1,251 @@
+import { defineComponent, useModel, ref, computed, watchEffect, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createBlock, createCommentVNode, toDisplayString, withDirectives, vModelDynamic, createVNode, mergeModels } from "vue";
+import _sfc_main$1 from "./TideIcon.vue.js";
+/* empty css              */
+import _sfc_main$2 from "./TideInputSupportingText.vue.js";
+import { useFormContext } from "../composables/useTideForm.js";
+import { ICON } from "../types/Icon.js";
+import { SIZE } from "../types/Size.js";
+import { CSS } from "../types/Styles.js";
+import { TEXT_INPUT_TYPE } from "../types/TextInput.js";
+import { ERROR_DISPLAY } from "../types/Validation.js";
+import { getTextInputMode } from "../utilities/forms.js";
+import { VALIDATION_RESULT, getFieldValidationResult } from "../utilities/validation.js";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["autocomplete", "disabled", "inputmode", "maxlength", "minlength", "name", "required", "type", "id"];
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideInputText",
+  props: /* @__PURE__ */ mergeModels({
+    autocomplete: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    error: { default: "" },
+    errorDisplay: { default: ERROR_DISPLAY.LAZY },
+    hasClear: { type: Boolean, default: false },
+    iconLeading: { default: void 0 },
+    inputId: { default: void 0 },
+    inputmode: { default: void 0 },
+    label: { default: void 0 },
+    maxlength: { default: void 0 },
+    minlength: { default: void 0 },
+    name: { default: void 0 },
+    prefix: { default: void 0 },
+    required: { type: Boolean, default: false },
+    suffix: { default: void 0 },
+    supportingText: { default: void 0 },
+    transformValue: { type: Function, default: void 0 },
+    type: { default: TEXT_INPUT_TYPE.TEXT },
+    validators: { default: void 0 }
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["valid"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const modelValue = useModel(__props, "modelValue");
+    const formContext = useFormContext();
+    const errorRef = ref(VALIDATION_RESULT.NO_ERROR);
+    const hasFocus = ref(false);
+    const inputElement = ref(null);
+    const isValidating = ref(false);
+    const showPassword = ref(false);
+    const formattedLabel = computed(() => props.required && props.label ? `${props.label} *` : props.label);
+    const showError = computed(() => {
+      if (hasErrorFromProp.value) return true;
+      if (!isValidating.value) return false;
+      return !errorRef.value.valid;
+    });
+    const hasErrorFromProp = computed(() => props.error !== "");
+    const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
+    const inputModeAttribute = computed(() => getTextInputMode(props.type, props.inputmode));
+    const inputType = computed(
+      () => props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type
+    );
+    const isEmpty = computed(() => modelValue.value == null || modelValue.value === "");
+    const shouldShowClearButton = computed(
+      () => props.hasClear && modelValue.value && props.type !== TEXT_INPUT_TYPE.PASSWORD
+    );
+    const shouldShowPasswordButton = computed(() => props.type === TEXT_INPUT_TYPE.PASSWORD);
+    const supportingTextMessage = computed(() => showError.value && errorRef.value.message || props.supportingText);
+    const handleClear = () => {
+      var _a;
+      modelValue.value = "";
+      (_a = inputElement.value) == null ? void 0 : _a.focus();
+    };
+    const handleFocus = () => {
+      hasFocus.value = true;
+      if (props.errorDisplay === ERROR_DISPLAY.EAGER) isValidating.value = true;
+    };
+    const handleFocusOut = () => {
+      hasFocus.value = false;
+      if (props.errorDisplay === ERROR_DISPLAY.LAZY) isValidating.value = true;
+    };
+    const handleFieldClick = () => {
+      var _a;
+      (_a = inputElement.value) == null ? void 0 : _a.focus();
+    };
+    const preventInputFocusLossOnMousedown = (e) => {
+      if (!hasFocus.value) return;
+      if (e.target !== inputElement.value) e.preventDefault();
+    };
+    watchEffect(() => {
+      errorRef.value = getFieldValidationResult({
+        errorFromProps: props.error,
+        maxlength: props.maxlength,
+        minlength: props.minlength,
+        required: props.required,
+        validators: props.validators,
+        value: modelValue
+      });
+    });
+    watch(
+      [modelValue, () => props.transformValue],
+      () => {
+        var _a, _b;
+        if (!props.transformValue) return;
+        const digits = ((_b = (_a = modelValue.value) == null ? void 0 : _a.match(/\d/g)) == null ? void 0 : _b.join("")) || void 0;
+        modelValue.value = digits ? props.transformValue(digits) : "";
+      },
+      { immediate: true }
+    );
+    watch(
+      () => formContext == null ? void 0 : formContext.forceShowErrors.value,
+      (newValue) => {
+        if (newValue) isValidating.value = true;
+      },
+      { immediate: true }
+    );
+    watch(
+      errorRef,
+      () => {
+        emit("valid", errorRef.value.valid);
+      },
+      { deep: true, immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "tide-input-text",
+          unref(CSS).DISPLAY.FLEX,
+          unref(CSS).FLEX.DIRECTION.COLUMN,
+          unref(CSS).GAP.QUARTER,
+          __props.disabled && "disabled",
+          showError.value && "error"
+        ])
+      }, [
+        createElementVNode("label", {
+          class: normalizeClass([
+            "tide-input-text-field",
+            unref(CSS).DISPLAY.FLEX,
+            unref(CSS).AXIS2.CENTER,
+            unref(CSS).GAP.HALF,
+            unref(CSS).POSITION.RELATIVE,
+            unref(CSS).BORDER.RADIUS.HALF,
+            unref(CSS).BG.SURFACE.DEFAULT,
+            unref(CSS).PADDING.Y.HALF,
+            shouldShowClearButton.value ? [unref(CSS).PADDING.RIGHT.HALF, unref(CSS).PADDING.LEFT.ONE] : [unref(CSS).PADDING.X.ONE],
+            __props.disabled ? unref(CSS).CURSOR.NOT_ALLOWED : unref(CSS).CURSOR.TEXT
+          ]),
+          for: __props.inputId,
+          onClick: handleFieldClick,
+          onMousedown: preventInputFocusLossOnMousedown
+        }, [
+          __props.iconLeading ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            class: normalizeClass([unref(CSS).FONT.COLOR.SURFACE.VARIANT]),
+            icon: __props.iconLeading,
+            size: unref(SIZE).SMALL
+          }, null, 8, ["class", "icon", "size"])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).AXIS2.CENTER, unref(CSS).GAP.QUARTER, unref(CSS).WIDTH.FULL])
+          }, [
+            __props.prefix ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass([
+                "tide-input-text-prefix",
+                unref(CSS).FONT.ROLE.BODY_1,
+                !showError.value && unref(CSS).FONT.COLOR.SURFACE.VARIANT,
+                hasMinilabel.value ? "" : "offset"
+              ])
+            }, toDisplayString(__props.prefix), 3)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.DIRECTION.COLUMN, unref(CSS).WIDTH.FULL])
+            }, [
+              __props.label ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass([
+                  "tide-input-text-label",
+                  hasMinilabel.value ? ["minilabel", unref(CSS).FONT.ROLE.LABEL_3] : unref(CSS).FONT.ROLE.LABEL_1,
+                  !showError.value && unref(CSS).FONT.COLOR.SURFACE.VARIANT,
+                  unref(CSS).CURSOR.TEXT,
+                  unref(CSS).POINTER_EVENTS.OFF
+                ])
+              }, toDisplayString(formattedLabel.value), 3)) : createCommentVNode("", true),
+              withDirectives(createElementVNode("input", {
+                autocomplete: __props.autocomplete ? "on" : "off",
+                class: normalizeClass([unref(CSS).WIDTH.FULL, unref(CSS).FONT.ROLE.BODY_1, __props.disabled && unref(CSS).CURSOR.NOT_ALLOWED]),
+                disabled: __props.disabled,
+                inputmode: inputModeAttribute.value,
+                maxlength: __props.maxlength,
+                minlength: __props.minlength,
+                name: __props.name,
+                ref_key: "inputElement",
+                ref: inputElement,
+                required: __props.required,
+                type: inputType.value,
+                onFocus: handleFocus,
+                onFocusout: handleFocusOut,
+                id: __props.inputId,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
+              }, null, 42, _hoisted_2), [
+                [vModelDynamic, modelValue.value]
+              ])
+            ], 2),
+            __props.suffix ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass([
+                "tide-input-text-suffix",
+                unref(CSS).FONT.ROLE.BODY_1,
+                !showError.value && unref(CSS).FONT.COLOR.SURFACE.VARIANT,
+                hasMinilabel.value ? "" : "offset"
+              ])
+            }, toDisplayString(__props.suffix), 3)) : createCommentVNode("", true)
+          ], 2),
+          shouldShowClearButton.value ? (openBlock(), createElementBlock("button", {
+            key: 1,
+            onClick: handleClear,
+            type: "button"
+          }, [
+            createVNode(_sfc_main$1, {
+              class: normalizeClass([unref(CSS).MARGIN.FULL.HALF]),
+              icon: unref(ICON).CLOSE,
+              size: unref(SIZE).SMALL
+            }, null, 8, ["class", "icon", "size"])
+          ])) : createCommentVNode("", true),
+          shouldShowPasswordButton.value ? (openBlock(), createElementBlock("button", {
+            key: 2,
+            onClick: _cache[1] || (_cache[1] = ($event) => showPassword.value = !showPassword.value),
+            type: "button"
+          }, [
+            createVNode(_sfc_main$1, {
+              class: normalizeClass([unref(CSS).MARGIN.FULL.HALF]),
+              icon: unref(ICON).VISIBILITY,
+              size: unref(SIZE).SMALL
+            }, null, 8, ["class", "icon", "size"])
+          ])) : createCommentVNode("", true)
+        ], 42, _hoisted_1),
+        supportingTextMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 0,
+          "is-error": showError.value,
+          message: supportingTextMessage.value
+        }, null, 8, ["is-error", "message"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideInputText.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputText.vue2.js","sources":["../../src/components/TideInputText.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a text input intended to be used in forms.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputtext--docs) for TideInputText\n   */\n  export default {};\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, ref, watch, watchEffect } from 'vue';\n\n  import TideIcon from '@/components/TideIcon.vue';\n  import TideInputSupportingText from '@/components/TideInputSupportingText.vue';\n  import { useFormContext } from '@/composables/useTideForm';\n  import { ICON } from '@/types/Icon';\n  import { SIZE } from '@/types/Size';\n  import { CSS } from '@/types/Styles';\n  import { TEXT_INPUT_TYPE } from '@/types/TextInput';\n  import { ERROR_DISPLAY } from '@/types/Validation';\n  import { getTextInputMode } from '@/utilities/forms';\n  import { VALIDATION_RESULT, getFieldValidationResult } from '@/utilities/validation';\n\n  import type { FormValueTransformer } from '@/types/Form';\n  import type { Icon } from '@/types/Icon';\n  import type { InputMode, TextInputType } from '@/types/TextInput';\n  import type { ErrorDisplay, ValidationResult, Validator } from '@/types/Validation';\n\n  type Props = {\n    /** Determines whether browser attempts to autocomplete */\n    autocomplete?: boolean;\n\n    /** Determines whether input is interactable */\n    disabled?: boolean;\n\n    /** Overrides the default error message and valid state */\n    error?: string;\n\n    /** Determines whether errors display prior to blur */\n    errorDisplay?: ErrorDisplay;\n\n    /** Determines whether a clear/reset button is shown for the input */\n    hasClear?: boolean;\n\n    /** Icon at left of input value */\n    iconLeading?: Icon;\n\n    /** Unique ID attribute (to bind input label to input) */\n    inputId?: string;\n\n    /** Determines the input editing features offered by the browser */\n    inputmode?: InputMode;\n\n    /** Label content */\n    label?: string;\n\n    /** Applies a maximum character count to the input */\n    maxlength?: number;\n\n    /** Applies a minimum character count to the input */\n    minlength?: number;\n\n    /** Name attribute */\n    name?: string;\n\n    /** Input prefix */\n    prefix?: string;\n\n    /** Determines whether input is required */\n    required?: boolean;\n\n    /** Input suffix (i.e. units) */\n    suffix?: string;\n\n    /** Explainer text beneath input */\n    supportingText?: string;\n\n    /** Determines text formatting applied to input value upon invoking relevant listener event(s) */\n    transformValue?: FormValueTransformer;\n\n    /** Determines the type(s) of values expected by the input */\n    type?: TextInputType;\n\n    /** Determines method(s) used to check for valid input value upon invoking relevant listener event(s) */\n    validators?: Validator[];\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    autocomplete: false,\n    disabled: false,\n    error: '',\n    errorDisplay: ERROR_DISPLAY.LAZY,\n    hasClear: false,\n    iconLeading: undefined,\n    inputId: undefined,\n    inputmode: undefined,\n    label: undefined,\n    maxlength: undefined,\n    minlength: undefined,\n    name: undefined,\n    prefix: undefined,\n    required: false,\n    suffix: undefined,\n    supportingText: undefined,\n    transformValue: undefined,\n    type: TEXT_INPUT_TYPE.TEXT,\n    validators: undefined,\n  });\n\n  type Emits = {\n    (event: 'valid', isValid: boolean): void;\n  };\n  const emit = defineEmits<Emits>();\n\n  const modelValue = defineModel<string>({ required: true });\n\n  const formContext = useFormContext();\n\n  const errorRef = ref<ValidationResult>(VALIDATION_RESULT.NO_ERROR);\n  const hasFocus = ref<boolean>(false);\n  const inputElement = ref<HTMLInputElement | null>(null);\n  const isValidating = ref<boolean>(false);\n  const showPassword = ref<boolean>(false);\n\n  const formattedLabel = computed(() => (props.required && props.label ? `${props.label} *` : props.label));\n  const showError = computed(() => {\n    if (hasErrorFromProp.value) return true;\n    if (!isValidating.value) return false;\n    return !errorRef.value.valid;\n  });\n  const hasErrorFromProp = computed(() => props.error !== '');\n  const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);\n  const inputModeAttribute = computed<InputMode | undefined>(() => getTextInputMode(props.type, props.inputmode));\n  const inputType = computed(() =>\n    props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type\n  );\n  const isEmpty = computed(() => modelValue.value == null || modelValue.value === '');\n  const shouldShowClearButton = computed(\n    () => props.hasClear && modelValue.value && props.type !== TEXT_INPUT_TYPE.PASSWORD\n  );\n  const shouldShowPasswordButton = computed(() => props.type === TEXT_INPUT_TYPE.PASSWORD);\n  const supportingTextMessage = computed(() => (showError.value && errorRef.value.message) || props.supportingText);\n\n  const handleClear = () => {\n    modelValue.value = '';\n    inputElement.value?.focus();\n  };\n\n  const handleFocus = () => {\n    hasFocus.value = true;\n    if (props.errorDisplay === ERROR_DISPLAY.EAGER) isValidating.value = true;\n  };\n\n  const handleFocusOut = () => {\n    hasFocus.value = false;\n    if (props.errorDisplay === ERROR_DISPLAY.LAZY) isValidating.value = true;\n  };\n\n  const handleFieldClick = () => {\n    inputElement.value?.focus();\n  };\n\n  const preventInputFocusLossOnMousedown = (e: MouseEvent) => {\n    if (!hasFocus.value) return;\n    if (e.target !== inputElement.value) e.preventDefault();\n  };\n\n  watchEffect(() => {\n    errorRef.value = getFieldValidationResult({\n      errorFromProps: props.error,\n      maxlength: props.maxlength,\n      minlength: props.minlength,\n      required: props.required,\n      validators: props.validators,\n      value: modelValue,\n    });\n  });\n\n  watch(\n    [modelValue, () => props.transformValue],\n    () => {\n      if (!props.transformValue) return;\n\n      const digits = modelValue.value?.match(/\\d/g)?.join('') || undefined;\n      modelValue.value = digits ? props.transformValue(digits) : '';\n    },\n    { immediate: true }\n  );\n\n  watch(\n    () => formContext?.forceShowErrors.value,\n    (newValue) => {\n      if (newValue) isValidating.value = true;\n    },\n    { immediate: true }\n  );\n\n  watch(\n    errorRef,\n    () => {\n      emit('valid', errorRef.value.valid);\n    },\n    { deep: true, immediate: true }\n  );\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tide-input-text',\n      CSS.DISPLAY.FLEX,\n      CSS.FLEX.DIRECTION.COLUMN,\n      CSS.GAP.QUARTER,\n      disabled && 'disabled',\n      showError && 'error',\n    ]\"\n  >\n    <label\n      :class=\"[\n        'tide-input-text-field',\n        CSS.DISPLAY.FLEX,\n        CSS.AXIS2.CENTER,\n        CSS.GAP.HALF,\n        CSS.POSITION.RELATIVE,\n        CSS.BORDER.RADIUS.HALF,\n        CSS.BG.SURFACE.DEFAULT,\n        CSS.PADDING.Y.HALF,\n        shouldShowClearButton ? [CSS.PADDING.RIGHT.HALF, CSS.PADDING.LEFT.ONE] : [CSS.PADDING.X.ONE],\n        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.TEXT,\n      ]\"\n      :for=\"inputId\"\n      @click=\"handleFieldClick\"\n      @mousedown=\"preventInputFocusLossOnMousedown\"\n    >\n      <TideIcon\n        :class=\"[CSS.FONT.COLOR.SURFACE.VARIANT]\"\n        :icon=\"iconLeading\"\n        :size=\"SIZE.SMALL\"\n        v-if=\"iconLeading\"\n      />\n\n      <div :class=\"[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.WIDTH.FULL]\">\n        <div\n          :class=\"[\n            'tide-input-text-prefix',\n            CSS.FONT.ROLE.BODY_1,\n            !showError && CSS.FONT.COLOR.SURFACE.VARIANT,\n            hasMinilabel ? '' : 'offset',\n          ]\"\n          v-if=\"prefix\"\n        >\n          {{ prefix }}\n        </div>\n\n        <div :class=\"[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.WIDTH.FULL]\">\n          <div\n            :class=\"[\n              'tide-input-text-label',\n              hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,\n              !showError && CSS.FONT.COLOR.SURFACE.VARIANT,\n              CSS.CURSOR.TEXT,\n              CSS.POINTER_EVENTS.OFF,\n            ]\"\n            v-if=\"label\"\n          >\n            {{ formattedLabel }}\n          </div>\n\n          <input\n            :autocomplete=\"autocomplete ? 'on' : 'off'\"\n            :class=\"[CSS.WIDTH.FULL, CSS.FONT.ROLE.BODY_1, disabled && CSS.CURSOR.NOT_ALLOWED]\"\n            :disabled=\"disabled\"\n            :inputmode=\"inputModeAttribute\"\n            :maxlength=\"maxlength\"\n            :minlength=\"minlength\"\n            :name=\"name\"\n            ref=\"inputElement\"\n            :required=\"required\"\n            :type=\"inputType\"\n            @focus=\"handleFocus\"\n            @focusout=\"handleFocusOut\"\n            :id=\"inputId\"\n            v-model=\"modelValue\"\n          />\n        </div>\n\n        <div\n          :class=\"[\n            'tide-input-text-suffix',\n            CSS.FONT.ROLE.BODY_1,\n            !showError && CSS.FONT.COLOR.SURFACE.VARIANT,\n            hasMinilabel ? '' : 'offset',\n          ]\"\n          v-if=\"suffix\"\n        >\n          {{ suffix }}\n        </div>\n      </div>\n\n      <button\n        @click=\"handleClear\"\n        type=\"button\"\n        v-if=\"shouldShowClearButton\"\n      >\n        <TideIcon\n          :class=\"[CSS.MARGIN.FULL.HALF]\"\n          :icon=\"ICON.CLOSE\"\n          :size=\"SIZE.SMALL\"\n        />\n      </button>\n\n      <button\n        @click=\"showPassword = !showPassword\"\n        type=\"button\"\n        v-if=\"shouldShowPasswordButton\"\n      >\n        <TideIcon\n          :class=\"[CSS.MARGIN.FULL.HALF]\"\n          :icon=\"ICON.VISIBILITY\"\n          :size=\"SIZE.SMALL\"\n        />\n      </button>\n    </label>\n\n    <TideInputSupportingText\n      :is-error=\"showError\"\n      :message=\"supportingTextMessage\"\n      v-if=\"supportingTextMessage\"\n    />\n  </div>\n</template>\n\n<style scoped>\n  .tide-input-text-label {\n    height: 1.1875rem;\n    transition: font-size var(--tide-animate), transform var(--tide-animate);\n  }\n\n  .tide-input-text-label:not(.minilabel),\n  .tide-input-text-prefix:not(.offset),\n  .tide-input-text-suffix:not(.offset) {\n    transform: translate(0, calc(9 / 16 * 1rem));\n  }\n\n  .tide-input-text-prefix,\n  .tide-input-text-suffix {\n    transition: transform var(--tide-animate);\n  }\n\n  .tide-input-text.disabled {\n    opacity: var(--tide-disabled);\n  }\n\n  .tide-input-text.error {\n    color: var(--tide-error-primary);\n  }\n\n  .tide-input-text.error .tide-input-text-field {\n    outline-color: var(--tide-error-border);\n    background-color: var(--tide-error-surface);\n  }\n\n  .tide-input-text.error:focus-within .tide-input-text-field {\n    outline-color: var(--tide-error-border);\n  }\n\n  .tide-input-text:focus-within .tide-input-text-field {\n    --tide-input-outline-width: var(--tide-border-width-2);\n    outline-color: var(--tide-border-high);\n  }\n\n  .tide-input-text input {\n    outline: none;\n  }\n\n  .tide-input-text-field {\n    --tide-input-outline-width: var(--tide-border-width-1);\n    outline: var(--tide-input-outline-width) solid var(--tide-border);\n    outline-offset: calc(var(--tide-input-outline-width) * -1);\n    color: var(--tide-on-surface);\n  }\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createBlock","TideIcon","_createVNode","TideInputSupportingText"],"mappings":"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"}

package/dist/components/TideInputTextDeprecated.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideInputTextDeprecated.vue2.js";
+/* empty css                             */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideInputTextDeprecated = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dbb301e9"]]);
+export {
+  TideInputTextDeprecated as default
+};
+//# sourceMappingURL=TideInputTextDeprecated.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputTextDeprecated.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/TideInputTextDeprecated.vue2.js

@@ -0,0 +1,235 @@
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createBlock, createCommentVNode, toDisplayString, withDirectives, vModelDynamic, createVNode } from "vue";
+import _sfc_main$1 from "./TideIcon.vue.js";
+/* empty css              */
+import { ICON } from "../types/Icon.js";
+import { SIZE } from "../types/Size.js";
+import { CSS } from "../types/Styles.js";
+import { TEXT_INPUT_TYPE } from "../types/TextInput.js";
+import { getErrorMessage, getFieldHasError, handleFieldValidation } from "../utilities/validation-deprecated.js";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["autocomplete", "disabled", "maxlength", "minlength", "name", "required", "type", "id"];
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideInputTextDeprecated",
+  props: {
+    autocomplete: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    error: { type: [String, Boolean], default: false },
+    hasClear: { type: Boolean, default: false },
+    iconLeading: { default: void 0 },
+    inputId: { default: void 0 },
+    label: { default: void 0 },
+    maxlength: { default: void 0 },
+    minlength: { default: void 0 },
+    name: { default: void 0 },
+    prefix: { default: void 0 },
+    required: { type: Boolean, default: false },
+    suffix: { default: void 0 },
+    supportingText: { default: void 0 },
+    transformValue: { type: Function, default: void 0 },
+    type: { default: TEXT_INPUT_TYPE.TEXT },
+    validators: { default: void 0 },
+    value: { default: void 0 }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const error = ref(props.error);
+    const hasFocus = ref(false);
+    const input = ref(null);
+    const showPassword = ref(false);
+    const value = ref(props.value);
+    const errorMessage = computed(() => getErrorMessage(props.error, error.value));
+    const formattedLabel = computed(() => props.required && props.label ? `${props.label} *` : props.label);
+    const hasClear = computed(() => props.hasClear && value.value);
+    const hasError = computed(
+      () => props.required && value.value !== void 0 && !value.value || getFieldHasError(error.value, props.error)
+    );
+    const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
+    const isEmpty = computed(() => value.value === "" || value.value === void 0);
+    const inputType = computed(
+      () => props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type
+    );
+    const handleClear = () => {
+      var _a;
+      value.value = "";
+      (_a = input.value) == null ? void 0 : _a.focus();
+    };
+    const handleFocus = () => {
+      hasFocus.value = true;
+    };
+    const handleFocusOut = () => {
+      hasFocus.value = false;
+      if (!value.value) {
+        value.value = "";
+      }
+      handleValidation();
+    };
+    const handleInput = () => {
+      var _a, _b;
+      if (props.transformValue) {
+        const digits = ((_b = (_a = value.value) == null ? void 0 : _a.match(/\d/g)) == null ? void 0 : _b.join("")) || void 0;
+        value.value = digits ? props.transformValue(digits) : "";
+      }
+    };
+    const handleValidation = () => {
+      handleFieldValidation({
+        error,
+        errorFromProps: props.error,
+        maxlength: props.maxlength,
+        minlength: props.minlength,
+        required: props.required,
+        validators: props.validators,
+        value
+      });
+    };
+    const updateValue = (newValue) => {
+      value.value = newValue;
+    };
+    watch(
+      () => props.value,
+      (newValue, oldValue) => {
+        if (newValue !== oldValue || newValue !== value.value) {
+          value.value = newValue;
+        }
+      }
+    );
+    __expose({
+      error,
+      required: props.required,
+      updateValue,
+      value
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "tide-input-text",
+          unref(CSS).DISPLAY.FLEX,
+          unref(CSS).FLEX.DIRECTION.COLUMN,
+          unref(CSS).GAP.QUARTER,
+          __props.disabled && "disabled",
+          hasError.value && "error"
+        ])
+      }, [
+        createElementVNode("label", {
+          class: normalizeClass([
+            "tide-input-text-field",
+            unref(CSS).DISPLAY.FLEX,
+            unref(CSS).AXIS2.CENTER,
+            unref(CSS).GAP.HALF,
+            unref(CSS).POSITION.RELATIVE,
+            unref(CSS).BORDER.RADIUS.HALF,
+            unref(CSS).BG.SURFACE.DEFAULT,
+            hasClear.value ? [unref(CSS).PADDING.RIGHT.HALF, unref(CSS).PADDING.LEFT.ONE] : [unref(CSS).PADDING.X.ONE],
+            unref(CSS).PADDING.Y.HALF,
+            __props.disabled ? unref(CSS).CURSOR.NOT_ALLOWED : unref(CSS).CURSOR.TEXT
+          ]),
+          for: __props.inputId
+        }, [
+          __props.iconLeading ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            class: normalizeClass([unref(CSS).FONT.COLOR.SURFACE.VARIANT]),
+            icon: __props.iconLeading,
+            size: unref(SIZE).SMALL
+          }, null, 8, ["class", "icon", "size"])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).AXIS2.CENTER, unref(CSS).GAP.QUARTER, unref(CSS).WIDTH.FULL])
+          }, [
+            __props.prefix ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass([
+                "tide-input-text-prefix",
+                unref(CSS).FONT.ROLE.BODY_1,
+                !hasError.value && unref(CSS).FONT.COLOR.SURFACE.VARIANT,
+                hasMinilabel.value ? "" : "offset"
+              ])
+            }, toDisplayString(__props.prefix), 3)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.DIRECTION.COLUMN, unref(CSS).WIDTH.FULL])
+            }, [
+              __props.label ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass([
+                  "tide-input-text-label",
+                  hasMinilabel.value ? ["minilabel", unref(CSS).FONT.ROLE.LABEL_3] : unref(CSS).FONT.ROLE.LABEL_1,
+                  !hasError.value && unref(CSS).FONT.COLOR.SURFACE.VARIANT,
+                  unref(CSS).CURSOR.TEXT,
+                  unref(CSS).POINTER_EVENTS.OFF
+                ])
+              }, toDisplayString(formattedLabel.value), 3)) : createCommentVNode("", true),
+              withDirectives(createElementVNode("input", {
+                autocomplete: __props.autocomplete ? "on" : "off",
+                class: normalizeClass([unref(CSS).WIDTH.FULL, __props.disabled && unref(CSS).CURSOR.NOT_ALLOWED, unref(CSS).FONT.ROLE.BODY_1]),
+                disabled: __props.disabled,
+                maxlength: __props.maxlength,
+                minlength: __props.minlength,
+                name: __props.name,
+                ref_key: "input",
+                ref: input,
+                required: __props.required,
+                type: inputType.value,
+                onChange: handleValidation,
+                onFocus: handleFocus,
+                onFocusout: handleFocusOut,
+                onInput: handleInput,
+                id: __props.inputId,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event)
+              }, null, 42, _hoisted_2), [
+                [vModelDynamic, value.value]
+              ])
+            ], 2),
+            __props.suffix ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass([
+                "tide-input-text-suffix",
+                unref(CSS).FONT.ROLE.BODY_1,
+                !hasError.value && unref(CSS).FONT.COLOR.SURFACE.VARIANT,
+                hasMinilabel.value ? "" : "offset"
+              ])
+            }, toDisplayString(__props.suffix), 3)) : createCommentVNode("", true)
+          ], 2),
+          hasClear.value && __props.type !== unref(TEXT_INPUT_TYPE).PASSWORD ? (openBlock(), createElementBlock("button", {
+            key: 1,
+            onClick: handleClear,
+            type: "button"
+          }, [
+            createVNode(_sfc_main$1, {
+              class: normalizeClass([unref(CSS).MARGIN.FULL.HALF]),
+              icon: unref(ICON).CLOSE,
+              size: unref(SIZE).SMALL
+            }, null, 8, ["class", "icon", "size"])
+          ])) : createCommentVNode("", true),
+          __props.type === unref(TEXT_INPUT_TYPE).PASSWORD ? (openBlock(), createElementBlock("button", {
+            key: 2,
+            onClick: _cache[1] || (_cache[1] = ($event) => showPassword.value = !showPassword.value),
+            type: "button"
+          }, [
+            createVNode(_sfc_main$1, {
+              class: normalizeClass([unref(CSS).MARGIN.FULL.HALF]),
+              icon: unref(ICON).VISIBILITY,
+              size: unref(SIZE).SMALL
+            }, null, 8, ["class", "icon", "size"])
+          ])) : createCommentVNode("", true)
+        ], 10, _hoisted_1),
+        __props.supportingText || hasError.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).AXIS2.CENTER, unref(CSS).GAP.QUARTER])
+        }, [
+          hasError.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            class: normalizeClass([]),
+            icon: unref(ICON).ERROR,
+            size: unref(SIZE).SMALL
+          }, null, 8, ["icon", "size"])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass([unref(CSS).FONT.ROLE.LABEL_3])
+          }, toDisplayString(hasError.value ? errorMessage.value : __props.supportingText), 3)
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideInputTextDeprecated.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputTextDeprecated.vue2.js","sources":["../../src/components/TideInputTextDeprecated.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated Use `TideInputText.vue` imported from 'tide-design-system' npm package instead.\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, ref, watch } from 'vue';\n\n  import TideIcon from '@/components/TideIcon.vue';\n  import { ICON } from '@/types/Icon';\n  import { SIZE } from '@/types/Size';\n  import { CSS } from '@/types/Styles';\n  import { TEXT_INPUT_TYPE } from '@/types/TextInput';\n  import { getErrorMessage, getFieldHasError, handleFieldValidation } from '@/utilities/validation-deprecated';\n\n  import type { FormValueTransformer } from '@/types/FormDeprecated';\n  import type { Icon } from '@/types/Icon';\n  import type { TextInputType } from '@/types/TextInput';\n  import type { ValidationError, Validator } from '@/types/ValidationDeprecated';\n\n  type Props = {\n    autocomplete?: boolean;\n    disabled?: boolean;\n    error?: ValidationError;\n    hasClear?: boolean;\n    iconLeading?: Icon;\n    inputId?: string;\n    label?: string;\n    maxlength?: number | undefined;\n    minlength?: number | undefined;\n    name?: string;\n    prefix?: string;\n    required?: boolean;\n    suffix?: string;\n    supportingText?: string;\n    transformValue?: FormValueTransformer;\n    type?: TextInputType;\n    validators?: Validator[];\n    value?: string;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    autocomplete: false,\n    disabled: false,\n    error: false,\n    hasClear: false,\n    iconLeading: undefined,\n    inputId: undefined,\n    label: undefined,\n    maxlength: undefined,\n    minlength: undefined,\n    name: undefined,\n    prefix: undefined,\n    required: false,\n    suffix: undefined,\n    supportingText: undefined,\n    transformValue: undefined,\n    type: TEXT_INPUT_TYPE.TEXT,\n    validators: undefined,\n    value: undefined,\n  });\n\n  const error = ref(props.error);\n  const hasFocus = ref(false);\n  const input = ref<HTMLInputElement | null>(null);\n  const showPassword = ref(false);\n  const value = ref(props.value);\n\n  const errorMessage = computed(() => getErrorMessage(props.error, error.value));\n  const formattedLabel = computed(() => (props.required && props.label ? `${props.label} *` : props.label));\n  const hasClear = computed(() => props.hasClear && value.value);\n  const hasError = computed(\n    () => (props.required && value.value !== undefined && !value.value) || getFieldHasError(error.value, props.error)\n  );\n  const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);\n  const isEmpty = computed(() => value.value === '' || value.value === undefined);\n  const inputType = computed(() =>\n    props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type\n  );\n\n  const handleClear = () => {\n    value.value = '';\n    input.value?.focus();\n  };\n\n  const handleFocus = () => {\n    hasFocus.value = true;\n  };\n\n  const handleFocusOut = () => {\n    hasFocus.value = false;\n\n    if (!value.value) {\n      value.value = '';\n    }\n\n    handleValidation();\n  };\n\n  const handleInput = () => {\n    if (props.transformValue) {\n      const digits = value.value?.match(/\\d/g)?.join('') || undefined;\n\n      value.value = digits ? props.transformValue(digits) : '';\n    }\n  };\n\n  const handleValidation = () => {\n    handleFieldValidation({\n      error,\n      errorFromProps: props.error,\n      maxlength: props.maxlength,\n      minlength: props.minlength,\n      required: props.required,\n      validators: props.validators,\n      value,\n    });\n  };\n\n  const updateValue = (newValue: string) => {\n    value.value = newValue;\n  };\n\n  watch(\n    () => props.value,\n    (newValue, oldValue) => {\n      if (newValue !== oldValue || newValue !== value.value) {\n        value.value = newValue;\n      }\n    }\n  );\n\n  defineExpose({\n    error,\n    required: props.required,\n    updateValue,\n    value,\n  });\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tide-input-text',\n      CSS.DISPLAY.FLEX,\n      CSS.FLEX.DIRECTION.COLUMN,\n      CSS.GAP.QUARTER,\n      disabled && 'disabled',\n      hasError && 'error',\n    ]\"\n  >\n    <label\n      :class=\"[\n        'tide-input-text-field',\n        CSS.DISPLAY.FLEX,\n        CSS.AXIS2.CENTER,\n        CSS.GAP.HALF,\n        CSS.POSITION.RELATIVE,\n        CSS.BORDER.RADIUS.HALF,\n        CSS.BG.SURFACE.DEFAULT,\n        hasClear ? [CSS.PADDING.RIGHT.HALF, CSS.PADDING.LEFT.ONE] : [CSS.PADDING.X.ONE],\n        CSS.PADDING.Y.HALF,\n        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.TEXT,\n      ]\"\n      :for=\"inputId\"\n    >\n      <TideIcon\n        :class=\"[CSS.FONT.COLOR.SURFACE.VARIANT]\"\n        :icon=\"iconLeading\"\n        :size=\"SIZE.SMALL\"\n        v-if=\"iconLeading\"\n      />\n\n      <div :class=\"[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.WIDTH.FULL]\">\n        <div\n          :class=\"[\n            'tide-input-text-prefix',\n            CSS.FONT.ROLE.BODY_1,\n            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,\n            hasMinilabel ? '' : 'offset',\n          ]\"\n          v-if=\"prefix\"\n        >\n          {{ prefix }}\n        </div>\n\n        <div :class=\"[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.WIDTH.FULL]\">\n          <div\n            :class=\"[\n              'tide-input-text-label',\n              hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,\n              !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,\n              CSS.CURSOR.TEXT,\n              CSS.POINTER_EVENTS.OFF,\n            ]\"\n            v-if=\"label\"\n          >\n            {{ formattedLabel }}\n          </div>\n\n          <input\n            :autocomplete=\"autocomplete ? 'on' : 'off'\"\n            :class=\"[CSS.WIDTH.FULL, disabled && CSS.CURSOR.NOT_ALLOWED, CSS.FONT.ROLE.BODY_1]\"\n            :disabled=\"disabled\"\n            :maxlength=\"maxlength\"\n            :minlength=\"minlength\"\n            :name=\"name\"\n            ref=\"input\"\n            :required=\"required\"\n            :type=\"inputType\"\n            @change=\"handleValidation\"\n            @focus=\"handleFocus\"\n            @focusout=\"handleFocusOut\"\n            @input=\"handleInput\"\n            :id=\"inputId\"\n            v-model=\"value\"\n          />\n        </div>\n\n        <div\n          :class=\"[\n            'tide-input-text-suffix',\n            CSS.FONT.ROLE.BODY_1,\n            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,\n            hasMinilabel ? '' : 'offset',\n          ]\"\n          v-if=\"suffix\"\n        >\n          {{ suffix }}\n        </div>\n      </div>\n\n      <button\n        @click=\"handleClear\"\n        type=\"button\"\n        v-if=\"hasClear && type !== TEXT_INPUT_TYPE.PASSWORD\"\n      >\n        <TideIcon\n          :class=\"[CSS.MARGIN.FULL.HALF]\"\n          :icon=\"ICON.CLOSE\"\n          :size=\"SIZE.SMALL\"\n        />\n      </button>\n\n      <button\n        @click=\"showPassword = !showPassword\"\n        type=\"button\"\n        v-if=\"type === TEXT_INPUT_TYPE.PASSWORD\"\n      >\n        <TideIcon\n          :class=\"[CSS.MARGIN.FULL.HALF]\"\n          :icon=\"ICON.VISIBILITY\"\n          :size=\"SIZE.SMALL\"\n        />\n      </button>\n    </label>\n\n    <div\n      :class=\"[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]\"\n      v-if=\"supportingText || hasError\"\n    >\n      <TideIcon\n        :class=\"[]\"\n        :icon=\"ICON.ERROR\"\n        :size=\"SIZE.SMALL\"\n        v-if=\"hasError\"\n      />\n\n      <div :class=\"[CSS.FONT.ROLE.LABEL_3]\">\n        {{ hasError ? errorMessage : supportingText }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .tide-input-text-label {\n    height: 1.1875rem;\n    transition: font-size var(--tide-animate), transform var(--tide-animate);\n  }\n\n  .tide-input-text-label:not(.minilabel),\n  .tide-input-text-prefix:not(.offset),\n  .tide-input-text-suffix:not(.offset) {\n    transform: translate(0, calc(9 / 16 * 1rem));\n  }\n\n  .tide-input-text-prefix,\n  .tide-input-text-suffix {\n    transition: transform var(--tide-animate);\n  }\n\n  .tide-input-text.disabled {\n    opacity: var(--tide-disabled);\n  }\n\n  .tide-input-text.error {\n    color: var(--tide-error-primary);\n  }\n\n  .tide-input-text.error .tide-input-text-field {\n    outline-color: var(--tide-error-border);\n    background-color: var(--tide-error-surface);\n  }\n\n  .tide-input-text.error:focus-within .tide-input-text-field {\n    outline-color: var(--tide-error-border);\n  }\n\n  .tide-input-text:focus-within .tide-input-text-field {\n    --tide-input-outline-width: var(--tide-border-width-2);\n    outline-color: var(--tide-border-high);\n  }\n\n  .tide-input-text input {\n    outline: none;\n  }\n\n  .tide-input-text-field {\n    --tide-input-outline-width: var(--tide-border-width-1);\n    outline: var(--tide-input-outline-width) solid var(--tide-border);\n    outline-offset: calc(var(--tide-input-outline-width) * -1);\n    color: var(--tide-on-surface);\n  }\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createBlock","TideIcon","_createVNode"],"mappings":"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"}

package/dist/components/TideInputTextarea.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideInputTextarea.vue2.js";
+/* empty css                       */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideInputTextarea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-27ae9283"]]);
+export {
+  TideInputTextarea as default
+};
+//# sourceMappingURL=TideInputTextarea.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputTextarea.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}