edvoyui-component-library-test-flight 0.0.25 → 0.0.27

package/src/components/inputNormal/EUIInputNormal.vue

@@ -1,161 +0,0 @@
-<template>
-  <div>
-    <label
-        v-if="label"
-        :for="`${name}-${id}`"
-        :class="[
-          'text-sm w-full text-gray-600 cursor-pointer font-medium',
-          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-        ]"
-      >
-        {{ label }}
-      </label>
-    <div
-      :class="disabled || readonly ? 'pointer-events-none cursor-not-allowed' : ''"
-      class="relative w-full overflow-hidden cursor-pointer group"
-    >
-      <div
-        v-if="icon && iconType"
-        class="absolute inset-y-0 flex items-center pointer-events-none"
-        :class="[
-          iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3',
-          disabled ? 'cursor-not-allowed' : '',
-        ]"
-      >
-        <component
-          :is="icon"
-          class="text-gray-400 size-6"
-          aria-hidden="true"
-        />
-      </div>
-      <input
-        :id="`${name}-${id}`"
-        ref="input"
-        :type="type"
-        :value="modelValue"
-        :placeholder="placeholder"
-        :name="name"
-        :class="['z-10 h-10 w-full  px-4 py-3 placeholder:text-gray-400 focus:outline-none block text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 ring-1 ring-gray-100 focus-within:ring-purple-600 focus-within:ring-2 ring-inset transition-all duration-100 border-none outline-none', rounded ? 'rounded-2xl' : 'rounded-md', getIconClass(), disabled ? 'cursor-not-allowed' : 'cursor-text', className]"
-        :required="required"
-        :disabled="disabled"
-        :readonly="readonly"
-        autocomplete="off"
-        @input="emitInput"
-        @focus="hasFocus = true"
-        @blur="hasFocus = false"
-      />
-    </div>
-    <EUIErrorMessage :errors="errors" :name="name" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
-import {
-  defineProps,
-  defineEmits,
-  PropType,
-  ref,
-  onMounted,
-} from "vue";
-
-const props = defineProps({
-  errors: { type: Object, required: false, default: () => {} },
-  type: {
-    type: String as PropType<
-      "text" | "number" | "email" | "password" | "search" | "date"
-    >,
-    default: "text",
-  },
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  name: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  label: {
-    type: String,
-    required: true,
-    default: "",
-  },
-    placeholder: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  iconType: {
-    type: String as PropType<"startIcon" | "endIcon">,
-    default: "",
-  },
-  icon: {
-    type: [Object, String],
-    default: "",
-  },
-   autoFocus: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  readonly:{
-    type:Boolean,
-    default: false
-  },
-  rounded:Boolean,
-  className: {
-    type: Array as PropType<string[]>,
-    required: false,
-    default: () => [],
-  },
-});
-
-const hasFocus = ref(false);
-const input = ref<HTMLInputElement>();
-const id = "id"; //generateUID();
-
-const emit = defineEmits(["update:modelValue"]);
-const emitInput = (event: Event) => {
-  const newValue = (event?.target as HTMLInputElement)?.value;
-  if (newValue !== undefined) {
-    emit("update:modelValue", newValue);
-  }
-};
-
-const getIconClass = () => {
-  switch (props.iconType) {
-    case "startIcon":
-      return "pl-12 pr-4";
-    case "endIcon":
-      return "pr-12 pl-4";
-  }
-};
-
-onMounted(() => {
-  if (props?.autoFocus) {
-    input?.value?.focus();
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-/* Firefox */
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-</style>