vueless 0.0.568 → 0.0.570

package/ui.form-input/UInput.vue

@@ -1,130 +1,35 @@
-<template>
-  <ULabel
-    ref="labelComponentRef"
-    :for="elementId"
-    :label="label"
-    :description="description"
-    :disabled="disabled"
-    :error="error"
-    :size="size"
-    :align="labelAlign"
-    centred
-    v-bind="inputLabelAttrs"
-  >
-    <label :for="elementId" v-bind="wrapperAttrs">
-      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
-        <!-- @slot Use it to add something before the text. -->
-        <slot name="left" />
-      </span>
-
-      <span
-        v-if="hasSlotContent($slots['left-icon']) || leftIcon"
-        ref="leftSlotWrapperRef"
-        v-bind="leftIconWrapperAttrs"
-      >
-        <!--
-          @slot Use it to add icon before the text.
-          @binding {string} icon-name
-          @binding {string} icon-size
-        -->
-        <slot name="left-icon" :icon-name="leftIcon" :icon-size="iconSize">
-          <UIcon
-            v-if="leftIcon"
-            :name="leftIcon"
-            :size="iconSize"
-            internal
-            v-bind="leftIconAttrs"
-          />
-        </slot>
-      </span>
-
-      <input
-        :id="elementId"
-        ref="inputRef"
-        v-model="inputValue"
-        :placeholder="placeholder"
-        :type="inputType"
-        :readonly="readonly"
-        :disabled="disabled"
-        :maxlength="maxLength"
-        :inputmode="inputmode"
-        v-bind="inputAttrs"
-        :data-test="dataTest"
-        @focus="onFocus"
-        @blur="onBlur"
-        @input="onInput"
-        @change="onChange"
-        @mousedown="onMousedown"
-        @click="onClick"
-      />
-
-      <label v-if="isTypePassword" v-bind="rightIconWrapperAttrs" :for="elementId">
-        <UIcon
-          v-if="isTypePassword"
-          :name="
-            isShownPassword
-              ? config.defaults.passwordVisibleIcon
-              : config.defaults.passwordHiddenIcon
-          "
-          color="gray"
-          interactive
-          internal
-          v-bind="passwordIconAttrs"
-          :data-test="`${dataTest}-password-icon`"
-          @click="onClickShowPassword"
-        />
-      </label>
-
-      <span v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconWrapperAttrs">
-        <!--
-          @slot Use it to add icon after the text.
-          @binding {string} icon-name
-          @binding {string} icon-size
-        -->
-        <slot name="right-icon" :icon-name="rightIcon" :icon-size="iconSize">
-          <UIcon
-            v-if="rightIcon"
-            :name="rightIcon"
-            :size="iconSize"
-            internal
-            v-bind="rightIconAttrs"
-          />
-        </slot>
-      </span>
-
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
-    </label>
-  </ULabel>
-</template>
-
-<script>
-import { getDefault } from "../utils/ui.ts";
-
-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>
-
-<script setup>
+<script setup lang="ts">
 import { ref, computed, onMounted, useSlots, useId } from "vue";
 
+import { getDefault } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 import { useMutationObserver } from "../composables/useMutationObserver.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
 
-import defaultConfig from "./config.js";
-import { UInput } from "./constants.js";
-import useAttrs from "./useAttrs.js";
+import defaultConfig from "./config.ts";
+import { UInput } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UInputProps, IconSize } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
+const props = withDefaults(defineProps<UInputProps>(), {
+  labelAlign: getDefault<UInputProps>(defaultConfig, UInput).labelAlign,
+  size: getDefault<UInputProps>(defaultConfig, UInput).size,
+  validationRule: getDefault<UInputProps>(defaultConfig, UInput).validationRule,
+  type: getDefault<UInputProps>(defaultConfig, UInput).type,
+  inputmode: getDefault<UInputProps>(defaultConfig, UInput).inputmode,
+  readonly: getDefault<UInputProps>(defaultConfig, UInput).readonly,
+  disabled: getDefault<UInputProps>(defaultConfig, UInput).disabled,
+  noAutocomplete: getDefault<UInputProps>(defaultConfig, UInput).noAutocomplete,
+  modelValue: "",
+  dataTest: "",
+  config: () => ({}),
+});
+
 const emit = defineEmits([
   /**
    * Triggers when the input value is changes.
@@ -166,173 +71,20 @@ const emit = defineEmits([
   "input",
 ]);
 
-const props = defineProps({
-  /**
-   * Input value.
-   */
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-
-  /**
-   * Input label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Label placement.
-   * @values top, topInside, topWithDesc, left, right
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UInput).labelAlign,
-  },
-
-  /**
-   * Input placeholder.
-   */
-  placeholder: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Input description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Input size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UInput).size,
-  },
-
-  /**
-   * Left icon name.
-   */
-  leftIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right icon name.
-   */
-  rightIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Maximum character length.
-   */
-  maxLength: {
-    type: [String, Number],
-    default: "",
-  },
-
-  /**
-   * Prevents some characters from input.
-   * You can use predefined values or own RegExp.
-   * @values symbol, string, stringAndNumber, number, integer
-   */
-  validationRule: {
-    type: [String, RegExp],
-    default: getDefault(defaultConfig, UInput).validationRule,
-    validator: (value) => Object.keys(VALIDATION_RULES_REG_EX).includes(value) || value === "",
-  },
-
-  /**
-   * Input type.
-   * @values text, number, tel, email, url, search, password
-   */
-  type: {
-    type: String,
-    default: getDefault(defaultConfig, UInput).type,
-  },
-
-  /**
-   * Set specific keyboard for mobile devices.
-   * @values text, decimal, numeric, tel, email, url, search, none
-   */
-  inputmode: {
-    type: String,
-    default: getDefault(defaultConfig, UInput).inputmode,
-  },
-
-  /**
-   * Make input read-only.
-   */
-  readonly: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInput).readonly,
-  },
-
-  /**
-   * Disable the input.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInput).disabled,
-  },
-
-  /**
-   * Disable browsers autocomplete.
-   */
-  noAutocomplete: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInput).noAutocomplete,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
+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,
+};
 
 const slots = useSlots();
 
 const isShownPassword = ref(false);
-const inputRef = ref(null);
-const labelComponentRef = ref(null);
-const leftSlotWrapperRef = ref(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+const leftSlotWrapperRef = ref<HTMLElement | null>(null);
+const labelComponentRef = ref<{ labelElement: HTMLElement } | null>(null);
 
 const isTypePassword = computed(() => props.type === "password");
 
@@ -341,10 +93,8 @@ const inputValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const inputPasswordClasses = computed(() => {
-  return inputValue.value && !isShownPassword.value && isTypePassword.value
-    ? "tracking-widest [font-family:text-security-disc,serif] [-webkit-text-security:disc]"
-    : "";
+const applyPasswordClasses = computed(() => {
+  return Boolean(inputValue.value && !isShownPassword.value && isTypePassword.value);
 });
 
 const elementId = props.id || useId();
@@ -359,7 +109,7 @@ const {
   leftIconAttrs,
   rightIconAttrs,
   rightIconWrapperAttrs,
-} = useAttrs(props, { isTypePassword, inputPasswordClasses });
+} = useAttrs(props, { applyPasswordClasses });
 
 const iconSize = computed(() => {
   const sizes = {
@@ -368,23 +118,35 @@ const iconSize = computed(() => {
     lg: "md",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as IconSize;
 });
 
 const inputType = computed(() => {
   return isShownPassword.value || props.noAutocomplete ? "text" : props.type;
 });
 
+const passwordIcon = computed(() => {
+  return isShownPassword.value
+    ? config.value?.defaults?.passwordVisibleIcon || ""
+    : config.value?.defaults?.passwordHiddenIcon || "";
+});
+
 onMounted(() => {
   toggleReadonlyToPreventAutocomplete(true);
   setLabelPosition();
 });
 
-function onInput(inputEvent) {
-  let value = inputEvent.target.value;
+function onInput(inputEvent: InputEvent) {
+  const target = inputEvent.target as HTMLInputElement | null;
+
+  if (!target) return;
+
+  let value = target.value;
 
   if (props.validationRule) {
-    const input = document.querySelector(`#${elementId}`);
+    const input = document.querySelector(`#${elementId}`) as HTMLInputElement | null;
+
+    if (!input) return;
 
     value = VALIDATION_RULES_REG_EX[props.validationRule]
       ? transformValue(value, VALIDATION_RULES_REG_EX[props.validationRule])
@@ -396,29 +158,29 @@ function onInput(inputEvent) {
   emit("input", value);
 }
 
-function onChange(event) {
+function onChange(event: CustomEvent) {
   emit("change", event);
 }
 
-function onClick(event) {
+function onClick(event: MouseEvent) {
   toggleReadonlyToPreventAutocomplete(false);
 
   emit("click", event);
 }
 
-function onFocus(event) {
+function onFocus(event: FocusEvent) {
   toggleReadonlyToPreventAutocomplete(false);
 
   emit("focus", event);
 }
 
-function onBlur(event) {
+function onBlur(event: FocusEvent) {
   toggleReadonlyToPreventAutocomplete(true);
 
   emit("blur", event);
 }
 
-function onMousedown(event) {
+function onMousedown(event: MouseEvent) {
   toggleReadonlyToPreventAutocomplete(false);
 
   emit("mousedown", event);
@@ -432,15 +194,15 @@ function onClickShowPassword() {
  * This trick prevents default browser autocomplete behavior.
  * @param toggleState { boolean }
  */
-function toggleReadonlyToPreventAutocomplete(toggleState) {
-  if (props.noAutocomplete && !props.readonly) {
+function toggleReadonlyToPreventAutocomplete(toggleState: boolean) {
+  if (props.noAutocomplete && !props.readonly && inputRef.value) {
     toggleState
       ? inputRef.value.setAttribute("readonly", "readonly")
       : inputRef.value.removeAttribute("readonly");
   }
 }
 
-function transformValue(value, exp) {
+function transformValue(value: string | number, exp: string | RegExp) {
   const regExp = new RegExp(exp, "ig");
   const matches = String(value).match(regExp);
 
@@ -459,12 +221,13 @@ function setLabelPosition() {
     return;
   }
 
-  const leftSlotOrIconWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
-
-  const leftPaddingValue = parseFloat(getComputedStyle(inputRef.value).paddingLeft);
+  if (leftSlotWrapperRef.value && inputRef.value && labelComponentRef.value?.labelElement) {
+    const leftSlotOrIconWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
+    const leftPaddingValue = parseFloat(getComputedStyle(inputRef.value).paddingLeft);
 
-  if (labelComponentRef.value.labelElement) {
-    labelComponentRef.value.labelElement.style.left = `${leftSlotOrIconWidth + leftPaddingValue}px`;
+    if (labelComponentRef.value?.labelElement) {
+      labelComponentRef.value.labelElement.style.left = `${leftSlotOrIconWidth + leftPaddingValue}px`;
+    }
   }
 }
 
@@ -477,6 +240,104 @@ defineExpose({
 });
 </script>
 
+<template>
+  <ULabel
+    ref="labelComponentRef"
+    :for="elementId"
+    :label="label"
+    :description="description"
+    :disabled="disabled"
+    :error="error"
+    :size="size"
+    :align="labelAlign"
+    centred
+    v-bind="inputLabelAttrs"
+  >
+    <label :for="elementId" v-bind="wrapperAttrs">
+      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
+        <!-- @slot Use it to add something before the text. -->
+        <slot name="left" />
+      </span>
+
+      <span
+        v-if="hasSlotContent($slots['left-icon']) || leftIcon"
+        ref="leftSlotWrapperRef"
+        v-bind="leftIconWrapperAttrs"
+      >
+        <!--
+          @slot Use it to add icon before the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+        -->
+        <slot name="left-icon" :icon-name="leftIcon" :icon-size="iconSize">
+          <UIcon
+            v-if="leftIcon"
+            :name="leftIcon"
+            :size="iconSize"
+            internal
+            v-bind="leftIconAttrs"
+          />
+        </slot>
+      </span>
+
+      <input
+        :id="elementId"
+        ref="inputRef"
+        v-model="inputValue"
+        :placeholder="placeholder"
+        :type="inputType"
+        :readonly="readonly"
+        :disabled="disabled"
+        :maxlength="maxLength"
+        :inputmode="inputmode"
+        v-bind="inputAttrs"
+        :data-test="dataTest"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="onInput"
+        @change="onChange"
+        @mousedown="onMousedown"
+        @click="onClick"
+        @paste="onPaste"
+        @copy="onCopy"
+      />
+
+      <label v-if="isTypePassword" v-bind="rightIconWrapperAttrs" :for="elementId">
+        <UIcon
+          v-if="isTypePassword"
+          :name="passwordIcon"
+          color="gray"
+          interactive
+          internal
+          v-bind="passwordIconAttrs"
+          :data-test="`${dataTest}-password-icon`"
+          @click="onClickShowPassword"
+        />
+      </label>
+
+      <span v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconWrapperAttrs">
+        <!--
+          @slot Use it to add icon after the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+        -->
+        <slot name="right-icon" :icon-name="rightIcon" :icon-size="iconSize">
+          <UIcon
+            v-if="rightIcon"
+            :name="rightIcon"
+            :size="iconSize"
+            internal
+            v-bind="rightIconAttrs"
+          />
+        </slot>
+      </span>
+
+      <!-- @slot Use it to add something after the text. -->
+      <slot name="right" />
+    </label>
+  </ULabel>
+</template>
+
 <style lang="postcss" scoped>
 @font-face {
   font-family: text-security-disc;

package/ui.form-input/{config.js → config.ts}

@@ -43,6 +43,9 @@ export default /*tw*/ {
         focus-within:border-red-500 focus-within:ring-red-700/15
       `,
       },
+      typePassword: {
+        true: "tracking-widest [font-family:text-security-disc,serif] [-webkit-text-security:disc]",
+      },
     },
     compoundVariants: [
       { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },

package/ui.form-input/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.form-input/storybook/{stories.js → stories.ts}

@@ -10,6 +10,14 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UInputProps } from "../types.ts";
+
+interface UInputArgs extends UInputProps {
+  slotTemplate?: string;
+  enum: "labelAlign" | "size" | "validationRule";
+}
+
 export default {
   id: "3010",
   title: "Form Inputs & Controls / Input",
@@ -24,9 +32,9 @@ export default {
   parameters: {
     ...getDocsDescription(UInput.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UInputArgs> = (args: UInputArgs) => ({
   components: { UInput, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UInput.__name);
@@ -35,17 +43,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UInput v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UInput>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UInputArgs> = (args: UInputArgs, { argTypes }) => ({
   components: { UInput, UCol },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `
@@ -77,7 +85,7 @@ export const Placeholder = DefaultTemplate.bind({});
 Placeholder.args = { placeholder: "some placeholder text" };
 
 export const Readonly = DefaultTemplate.bind({});
-Readonly.args = { readonly: true, value: "some value for read" };
+Readonly.args = { readonly: true, modelValue: "some value for read" };
 
 export const NoAutocomplete = DefaultTemplate.bind({});
 NoAutocomplete.args = { noAutocomplete: true };