vueless 0.0.2 → 0.0.3

package/ui.form-input/index.vue

@@ -1,524 +1,385 @@
 <template>
-  <div class="mono-input-wrapper">
-    <label :for="id" :class="inputBlockClass" class="mono-input-block">
-      <t-input
-        :id="id"
-        ref="input"
-        class="mono-input"
-        :model-value="modelValue"
-        :placeholder="placeholder"
-        :type="inputType"
-        :class="inputClass"
-        :readonly="readonly"
-        :disabled="disabled"
-        :maxlength="maxLength"
-        :inputmode="inputMode"
-        :data-cy="dataCy"
-        @focus="onFocus"
-        @blur="onBlur"
-        @update:modelValue="onInput"
-        @change="onChange"
-        @mousedown="onMousedown"
-        @click="onClick"
-      />
-
-      <label v-if="isTypePassword" class="icon-label" :for="id">
-        <UIcon
-          color="gray"
-          class="icon-label-password"
-          :name="isShownPassword ? 'visibility' : 'visibility_off'"
-          :data-cy="`${dataCy}-show-password`"
-          @click="onClickShowPassword"
-        />
+  <div v-bind="wrapperAttrs">
+    <ULabel
+      ref="labelComponent"
+      :for="id"
+      :label="label"
+      :description="description"
+      :disabled="disabled"
+      :error="error"
+      :size="size"
+      :align="labelAlign"
+      v-bind="labelAttrs"
+    >
+      <label :for="id" v-bind="blockAttrs">
+        <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper" v-bind="leftSlotAttrs">
+          <!-- @slot Use it to add some component before text. -->
+          <slot name="left" />
+        </span>
+
+        <span v-bind="inputWrapperAttrs">
+          <input
+            :id="id"
+            ref="input"
+            v-model="inputValue"
+            :placeholder="placeholder"
+            :type="inputType"
+            :readonly="readonly"
+            :disabled="disabled"
+            :maxlength="maxLength"
+            :inputmode="inputMode"
+            :data-cy="dataCy"
+            v-bind="inputAttrs"
+            @focus="onFocus"
+            @blur="onBlur"
+            @input="onInput"
+            @change="onChange"
+            @mousedown="onMousedown"
+            @click="onClick"
+          />
+        </span>
+
+        <label
+          v-if="hasSlotContent($slots['right-icon']) || isTypePassword"
+          v-bind="rightSlotAttrs"
+          :for="id"
+        >
+          <!-- @slot Use it to add icon after text. -->
+          <slot name="right-icon">
+            <UIcon
+              v-if="isTypePassword"
+              :name="passwordIconName"
+              color="gray"
+              interactive
+              fill
+              :data-cy="`${dataCy}-show-password`"
+              v-bind="passwordIconAttrs"
+              @click="onClickShowPassword"
+            />
+          </slot>
+        </label>
+
+        <span v-if="hasSlotContent($slots['right'])" v-bind="rightSlotAttrs">
+          <!-- @slot Use it to add some component after text. -->
+
+          <slot name="right" />
+        </span>
       </label>
-
-      <label v-if="isShownSlot.icon" class="icon-label" :for="id">
-        <!-- @slot Use it to add icon after text. -->
-        <slot name="icon" />
-      </label>
-
-      <span v-else-if="isShownSlot.rightSlot" class="mono-input-right-slot">
-        <!-- @slot Use it to add some component after text. -->
-
-        <slot name="right" />
-      </span>
-    </label>
-
-    <label class="label" :class="labelClass" :for="id">
-      {{ label }}
-    </label>
-
-    <p v-if="error" class="error-message" :data-cy="`${dataCy}-error-message`">
-      {{ error }}
-    </p>
-
-    <p v-if="description && !error" class="description">
-      {{ description }}
-    </p>
+    </ULabel>
   </div>
 </template>
 
 <script>
 import { getRandomId } from "vueless/service.ui";
-import ValidationServiceDefault from "vueless/service.validation";
 
-import UIcon from "vueless/ui.image-icon";
-import TInput from "vueless/library.vue-tailwind-3/t-input";
-
-const {
-  NUMBER_REG_EXP,
-  INTEGER_REG_EXP,
-  LETTERS_REG_EXP,
-  LETTERS_AND_SYMBOLS_REG_EXP,
-  LETTERS_AND_NUMBERS_REG_EXP,
-} = new ValidationServiceDefault();
-
-const VALIDATION_RULES = {
-  integer: INTEGER_REG_EXP,
-  number: NUMBER_REG_EXP,
-  string: LETTERS_REG_EXP,
-  stringAndNumber: LETTERS_AND_NUMBERS_REG_EXP,
-  symbol: LETTERS_AND_SYMBOLS_REG_EXP,
+const VALIDATION_RULES_REG_EX = {
+  integer: /\d*/g,
+  number: /\d*\.?\d*/g,
+  string: /[a-zA-Z]+/g,
+  stringAndNumber: /[a-zA-Z0-9]+/g,
+  symbol: /\D/g,
 };
+</script>
 
-export default {
-  name: "UInput",
-
-  components: {
-    UIcon,
-    TInput,
+<script setup>
+import { ref, computed, onMounted, useSlots } from "vue";
+import UIService from "vueless/service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UInput } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UInput", inheritAttrs: false });
+
+const emit = defineEmits([
+  "update:modelValue",
+  "change",
+  "click",
+  "focus",
+  "mousedown",
+  "blur",
+  "input",
+]);
+
+const props = defineProps({
+  /**
+   * Input value.
+   */
+  modelValue: {
+    type: [String, Number],
+    default: "",
   },
 
-  props: {
-    /**
-     * Set input size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Set input value.
-     */
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Set input placeholder.
-     */
-    placeholder: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set input label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set description for input.
-     */
-    description: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set the maximum length of the input value.
-     */
-    maxLength: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Make input read only.
-     */
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make input inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set input type.
-     * @values text, number, email, tel, password, url
-     */
-    type: {
-      type: String,
-      default: "text",
-      validator: (value) => !Object.keys(VALIDATION_RULES).includes(value),
-    },
-
-    /**
-     * Set input mode.
-     * @values none, text, decimal, numeric, tel, email, url
-     */
-    inputMode: {
-      type: String,
-      default: "text",
-    },
-
-    /**
-     * Disable browsers autocomplete.
-     */
-    noAutocomplete: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set error message.
-     */
-    error: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Prevents inputting some characters (for ex. input numbers only).
-     * You can use predefined values or your own RegExp.
-     * @values symbol, string, stringAndNumber, number, integer
-     */
-    validationRule: {
-      type: [String, RegExp],
-      default: "",
-    },
-
-    /**
-     * Generates unique element id.
-     * @ignore
-     */
-    id: {
-      type: String,
-      default: () => getRandomId(),
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Input label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  emits: ["update:modelValue", "change", "click", "focus", "mousedown", "blur", "input"],
-
-  data: () => ({
-    isShownPassword: false,
-  }),
-
-  computed: {
-    inputClass() {
-      return {
-        "size-sm": this.size === "sm",
-        "size-md": this.size === "md",
-        "size-lg": this.size === "lg",
-        "mono-input-with-icon-padding": this.isShownSlot.icon,
-        "mono-input-password-emulation":
-          this.isTypePassword && !this.isShownPassword && this.modelValue,
-        "error-input": this.error,
-      };
-    },
-
-    inputBlockClass() {
-      return {
-        disabled: this.disabled,
-        "error-input": this.error,
-      };
-    },
-
-    isShownSlot() {
-      return {
-        icon: !!this.$slots["icon"],
-        rightSlot: !!this.$slots["right"],
-      };
-    },
-
-    labelClass() {
-      return {
-        "error-label": this.error,
-        "size-label-sm": this.size === "sm",
-        "size-label-md": this.size === "md",
-        "size-label-lg": this.size === "lg",
-      };
-    },
-
-    isTypePassword() {
-      return this.type === "password";
-    },
-
-    inputType() {
-      return this.isShownPassword || this.noAutocomplete ? "text" : this.type;
-    },
+  /**
+   * Show label outside the input block.
+   */
+  labelOutside: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInput).default.labelOutside,
   },
 
-  mounted() {
-    this.toggleReadonlyToPreventAutocomplete(true);
+  /**
+   * Input placeholder.
+   */
+  placeholder: {
+    type: String,
+    default: "",
   },
 
-  methods: {
-    onInput(value) {
-      if (this.validationRule) {
-        const input = document.querySelector(`#${this.id}`);
-
-        if (VALIDATION_RULES[this.validationRule]) {
-          value = this.transformValue(value, VALIDATION_RULES[this.validationRule]);
-        } else {
-          value = this.transformValue(value, this.validationRule);
-        }
-
-        input.value = value;
-      }
-
-      this.$emit("update:modelValue", value);
-      this.$emit("input", value);
-    },
-
-    onChange() {
-      this.$emit("change");
-    },
-
-    onClick(event) {
-      this.toggleReadonlyToPreventAutocomplete(false);
-
-      this.$emit("click", event);
-    },
-
-    onFocus() {
-      this.toggleReadonlyToPreventAutocomplete(false);
-
-      this.$emit("focus");
-    },
-
-    onBlur() {
-      this.toggleReadonlyToPreventAutocomplete(true);
-
-      this.$emit("blur");
-    },
-
-    onMousedown() {
-      this.toggleReadonlyToPreventAutocomplete(false);
+  /**
+   * Input description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
 
-      this.$emit("mousedown");
-    },
+  /**
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
 
-    onClickShowPassword() {
-      this.isShownPassword = !this.isShownPassword;
-    },
+  /**
+   * Input size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInput).default.size,
+  },
 
-    /**
-     * This trick prevents default browser autocomplete behaviour.
-     * @param toggleState { boolean }
-     */
-    toggleReadonlyToPreventAutocomplete(toggleState) {
-      if (this.noAutocomplete && !this.readonly) {
-        const input = document.getElementById(this.id);
+  /**
+   * Maximum character length.
+   */
+  maxLength: {
+    type: [String, Number],
+    default: "",
+  },
 
-        toggleState
-          ? input.setAttribute("readonly", "readonly")
-          : input.removeAttribute("readonly");
-      }
-    },
+  /**
+   * Prevents input some characters (for ex. input numbers only).
+   * You can use predefined values or your own RegExp.
+   * @values symbol, string, stringAndNumber, number, integer
+   */
+  validationRule: {
+    type: [String, RegExp],
+    default: "",
+  },
 
-    transformValue(value, exp) {
-      const regExp = new RegExp(exp, "ig");
-      const matches = String(value).match(regExp);
+  /**
+   * Input type.
+   * @values text, number, email, tel, password, url
+   */
+  type: {
+    type: String,
+    default: "text",
+    validator: (value) => !Object.keys(VALIDATION_RULES_REG_EX).includes(value),
+  },
 
-      return matches ? matches.join("") : "";
-    },
+  /**
+   * Input mode (to show different mobile keyboard).
+   * @values none, text, decimal, numeric, tel, email, url
+   */
+  inputMode: {
+    type: String,
+    default: UIService.get(defaultConfig, UInput).default.inputMode,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-@font-face {
-  font-family: text-security-disc;
-  src: url("./text-security-disc.woff");
-}
+  /**
+   * Set input read-only.
+   */
+  readonly: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInput).default.readonly,
+  },
 
-.mono-input {
-  @apply font-normal text-gray-900;
-  @apply rounded-lg border-none bg-white shadow-none;
-  @apply w-full px-4;
+  /**
+   * Disable the input.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInput).default.disabled,
+  },
 
-  &-wrapper {
-    @apply relative w-full;
-  }
+  /**
+   * Disable browsers autocomplete.
+   */
+  noAutocomplete: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInput).default.noAutocomplete,
+  },
 
-  &:focus {
-    @apply ring-0;
-  }
+  /**
+   * Unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-  &:read-only {
-    @apply border-gray-300 ring-0;
-  }
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-  &::placeholder {
-    @apply font-normal text-gray-400;
-  }
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-  &:disabled {
-    @apply text-gray-900;
-    @apply border-gray-100 bg-gray-100 opacity-100;
-    @apply cursor-default;
-  }
+const slots = useSlots();
 
-  /* this trick replace characters to dots same as in input type="password" */
-  &-password-emulation {
-    @apply pr-11 leading-5 tracking-widest;
-    font-family: text-security-disc, serif;
-    -webkit-text-security: disc;
-  }
+const isShownPassword = ref(false);
+const input = ref(null);
+const labelComponent = ref(null);
+const leftSlotWrapper = ref(null);
 
-  &-block {
-    @apply relative flex;
-    @apply rounded-lg border border-solid border-gray-300 bg-white !opacity-100;
+defineExpose({ input });
 
-    &:hover {
-      @apply border-gray-400;
-    }
+const isTypePassword = computed(() => props.type === "password");
 
-    &:focus-within {
-      @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
-    }
-  }
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
 
-  &-right-slot {
-    @apply block;
-    @apply flex w-full items-center justify-end;
-    @apply whitespace-nowrap pr-4;
-  }
+const inputPasswordClasses = computed(() => {
+  return inputValue.value && !isShownPassword.value && isTypePassword.value
+    ? "tracking-widest [font-family:text-security-disc,serif] [-webkit-text-security:disc]"
+    : "";
+});
 
-  &-with-icon-padding {
-    @apply pr-11;
+const {
+  config,
+  inputAttrs,
+  blockAttrs,
+  wrapperAttrs,
+  labelAttrs,
+  passwordIconAttrs,
+  leftSlotAttrs,
+  inputWrapperAttrs,
+  rightSlotAttrs,
+  hasSlotContent,
+} = useAttrs(props, { isTypePassword, inputPasswordClasses });
+
+const labelAlign = computed(() => {
+  return props.labelOutside ? "top" : "topInside";
+});
+
+const passwordIconName = computed(() => {
+  return isShownPassword.value
+    ? config.value.passwordVisibleIconName
+    : config.value.passwordHiddenIconName;
+});
+
+const inputType = computed(() => {
+  return isShownPassword.value || props.noAutocomplete ? "text" : props.type;
+});
+
+onMounted(() => {
+  toggleReadonlyToPreventAutocomplete(true);
+  setLabelPosition();
+});
+
+function onInput(inputEvent) {
+  let value = inputEvent.target.value;
+
+  if (props.validationRule) {
+    const input = document.querySelector(`#${props.id}`);
+
+    value = VALIDATION_RULES_REG_EX[props.validationRule]
+      ? transformValue(value, VALIDATION_RULES_REG_EX[props.validationRule])
+      : transformValue(value, props.validationRule);
+
+    input.value = value;
   }
-}
 
-.label {
-  @apply absolute font-normal text-gray-500;
+  emit("input", value);
 }
 
-.description {
-  @apply text-xs font-normal text-gray-500/[85];
-  @apply pl-4 pt-2;
+function onChange(event) {
+  emit("change", event);
 }
 
-.disabled {
-  @apply text-gray-900;
-  @apply border-gray-100 bg-gray-100 opacity-100;
-  @apply cursor-default;
+function onClick(event) {
+  toggleReadonlyToPreventAutocomplete(false);
 
-  &:hover {
-    @apply border-gray-100;
-  }
+  emit("click", event);
 }
 
-.error {
-  &-message {
-    @apply text-xs font-normal text-red-500;
-    @apply mt-2 pl-4;
-  }
+function onFocus(event) {
+  toggleReadonlyToPreventAutocomplete(false);
 
-  &-label {
-    @apply text-red-500;
-  }
+  emit("focus", event);
+}
 
-  &-input {
-    @apply border-red-300;
+function onBlur(event) {
+  toggleReadonlyToPreventAutocomplete(true);
 
-    &:hover {
-      @apply border-red-400;
-    }
+  emit("blur", event);
+}
 
-    &:focus {
-      @apply border-red-500 ring-red-100;
-    }
+function onMousedown(event) {
+  toggleReadonlyToPreventAutocomplete(false);
 
-    &:focus-within {
-      @apply border-red-500 ring-red-100;
-    }
-  }
+  emit("mousedown", event);
 }
 
-.icon {
-  &-label {
-    @apply flex items-center justify-center;
-    @apply h-full w-11;
-    @apply absolute right-0;
-
-    &-password {
-      @apply cursor-pointer;
-
-      &:hover {
-        :deep(g [fill]) {
-          @apply transition duration-100 ease-in-out;
-          @apply text-gray-500;
-        }
-      }
-    }
-  }
+function onClickShowPassword() {
+  isShownPassword.value = !isShownPassword.value;
 }
 
-.size {
-  &-sm {
-    @apply text-sm;
-    @apply pb-2 pt-6;
+/**
+ * This trick prevents default browser autocomplete behavior.
+ * @param toggleState { boolean }
+ */
+function toggleReadonlyToPreventAutocomplete(toggleState) {
+  if (props.noAutocomplete && !props.readonly) {
+    const input = document.getElementById(props.id);
 
-    &::placeholder {
-      @apply text-sm font-normal;
-    }
+    toggleState ? input.setAttribute("readonly", "readonly") : input.removeAttribute("readonly");
   }
+}
 
-  &-md {
-    @apply text-base;
-    @apply pb-2.5 pt-7;
+function transformValue(value, exp) {
+  const regExp = new RegExp(exp, "ig");
+  const matches = String(value).match(regExp);
 
-    &::placeholder {
-      @apply text-base font-normal;
-    }
-  }
+  return matches ? matches.join("") : "";
+}
 
-  &-lg {
-    @apply text-lg;
-    @apply pb-3 pt-8;
+function setLabelPosition() {
+  if (props.labelOutside || !hasSlotContent(slots["left"])) return;
 
-    &::placeholder {
-      @apply text-lg font-normal;
-    }
-  }
+  const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
 
-  &-label {
-    &-sm {
-      @apply text-xs;
-      @apply left-4 top-2;
-    }
-
-    &-md {
-      @apply text-sm;
-      @apply left-4 top-2.5;
-    }
-
-    &-lg {
-      @apply text-base;
-      @apply left-4 top-3;
-    }
-  }
+  labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+}
+</script>
+
+<style lang="postcss" scoped>
+@font-face {
+  font-family: text-security-disc;
+  src: url("./assets/fonts/text-security-disc.woff");
 }
 </style>