edvoyui-component-library-test-flight 0.0.150 → 0.0.151

package/src/components/searchTagSelect/SearchInput.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="relative h-10 rounded-full">
+    <template v-if="icon">
+      <div
+        v-if="icon"
+        class="absolute flex items-center justify-center w-6 h-6 top-2 left-4"
+      >
+        <component
+          :is="icon"
+          :class="[
+            'w-5 h-5',
+            { 'text-gray-800': inputValue },
+            hasError ? 'text-red-500' : 'text-gray-400',
+          ]"
+          aria-hidden="true"
+        />
+      </div>
+    </template>
+    <input
+      ref="searchInput"
+      type="text"
+      :class="['search-input', hasError ? 'error-state' : '']"
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="emitInput"
+      @focus="onFocus"
+      @blur="onBlur"
+      @click="onClick"
+    />
+    <div
+      v-if="inputValue"
+      class="absolute flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 ease-in bg-gray-100 cursor-pointer hover:text-gray-700 rounded-xl top-2 right-2"
+      @click.stop="clearSearch"
+    >
+      <XMarkIcon class="w-3 h-3 text-current" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from "vue";
+import { XMarkIcon } from "@heroicons/vue/20/solid";
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+  isToFocus: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  icon: {
+    type: [Object, Function],
+    required: false,
+  },
+  hasError: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const searchInput = ref<HTMLInputElement>();
+const hasFocus = ref(false);
+const emit = defineEmits([
+  "update:modelValue",
+  "blur",
+  "cleared",
+  "focus",
+  "click",
+]);
+
+const emitInput = (event: Event) => {
+  const inputElement = event.target as HTMLInputElement;
+  let newValue = inputElement.value;
+  if (newValue !== undefined) {
+    //TODO: firstlater is uppercase added
+    const selectionStart = inputElement.selectionStart;
+    const selectionEnd = inputElement.selectionEnd;
+    if (typeof newValue === "string" && newValue.length > 0) {
+      if (newValue[0] !== newValue[0].toUpperCase()) {
+        newValue = newValue.charAt(0).toUpperCase() + newValue.slice(1);
+      }
+    }
+    emit("update:modelValue", newValue);
+
+    nextTick(() => {
+      if (searchInput.value) {
+        if (searchInput.value.value === newValue) {
+          searchInput.value.setSelectionRange(selectionStart, selectionEnd);
+        }
+      }
+    });
+  }
+};
+
+const inputValue = computed(() => {
+  return props.modelValue === 0 ? true : !!props.modelValue;
+});
+
+const onFocus = () => {
+  hasFocus.value = true;
+  emit("focus");
+};
+
+const onBlur = () => {
+  hasFocus.value = false;
+  emit("blur");
+};
+
+const onClick = () => {
+  emit("click");
+};
+
+const clearSearch = () => {
+  emit("update:modelValue", null);
+  emit("cleared");
+  nextTick(() => {
+    searchInput.value?.focus();
+  });
+};
+
+onMounted(() => {
+  if (props?.isToFocus) {
+    searchInput?.value?.focus();
+  }
+});
+
+// Expose the searchInput ref for parent components to access
+defineExpose({
+  searchInput,
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(input.search-input) {
+  transition: 0.2s;
+  @apply w-full pl-12 pr-2 py-2 text-sm text-gray-700 border-none rounded-full h-10 ring-1 ring-gray-200 ring-opacity-75 focus:ring-2 font-medium focus:ring-purple-400 focus:outline-none outline-none appearance-none ring-inset;
+
+  &::placeholder {
+    @apply font-normal text-gray-400;
+  }
+  &:focus::placeholder {
+    @apply opacity-0 invisible;
+  }
+
+  &.error-state {
+    @apply ring-1 ring-red-500;
+  }
+
+  &.error-state::placeholder {
+    @apply text-red-500;
+  }
+}
+</style>

package/src/components/tag/EUITag.vue

@@ -1,21 +1,23 @@
 <template>
   <div
     :class="[
-      'inline-flex items-center px-2 py-1 rounded-md gap-x-1 bg-gray-50 ring-1 ring-inset ring-gray-400/10 max-w-xs w-auto',
-       {'pointer-events-none select-none cursor-none': disabled}
+      'inline-flex items-center max-w-xs w-auto',
+       {'pointer-events-none select-none': disabled},
+      tagClass
     ]"
   >
-    <div class="text-sm font-medium text-gray-600 truncate cursor-pointer"><slot /></div>
+    <div class="text-current truncate cursor-pointer" :class="[props.size === 'lg'? 'text-base font-semibold':'text-sm font-medium']"><slot /></div>
     <button
       v-if="closeIcon"
       type="button"
-      class="relative -mr-1 size-3.5 group rounded hover:bg-red-300/50 active:bg-red-300"
+      class="relative -mr-1 rounded group hover:bg-red-300/50 active:bg-red-300"
+      :class="[props.size === 'lg' ? 'size-6' : props.size === 'md'? 'size-5' : 'size-3.5']"
       @click.stop="removeTag"
     >
       <span class="sr-only">Remove</span>
       <svg
         viewBox="0 0 14 14"
-        class="size-3.5 stroke-gray-400 group-hover:stroke-red-600/75"
+        class="stroke-gray-400 group-hover:stroke-red-600/75"
       >
         <path d="M4 4l6 6m0-6l-6 6" />
       </svg>
@@ -24,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from "vue";
+import { computed, PropType, reactive, toRefs } from "vue";
 
 const props = defineProps({
   closeIcon: {
@@ -36,6 +38,15 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+   size: {
+    type: String as PropType<"sm" | "md" | "lg">, //28,40, 48
+    default: "sm",
+  },
+  color: {
+    type: String as PropType<
+      "white" | "secondary" | 'tertiary'>,
+    default: "tertiary",
+  },
 });
 const { closeIcon } = toRefs(props);
 const emit = defineEmits(["remove"]);
@@ -43,6 +54,35 @@ const emit = defineEmits(["remove"]);
 const removeTag = () => {
   emit("remove");
 };
+
+const sizeClasses = reactive({
+  sm: "px-2 py-1 rounded-md gap-x-1", // 32
+  md: "px-4 py-2 rounded-full gap-2", // 40
+  lg: "px-6 py-3 rounded-full gap-2", // 48
+});
+
+const tagClass = computed(() => {
+  const btnDisabled = props.disabled;
+  const btnColor = {
+  white: btnDisabled
+      ? "bg-opacity-80 cursor-not-allowed text-gray-400 bg-gray-200"
+      : "bg-white hover:bg-gray-100 text-black cursor-pointer active:shadow-white/50 active:bg-transparent",
+  secondary: btnDisabled
+      ? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-purple-50"
+      : "bg-purple-100 hover:bg-purple-50 active:bg-purple-100 cursor-pointer text-gray-700 active:shadow-purple-200",
+   tertiary: btnDisabled
+      ? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-gray-50 ring-1 ring-gray-400/20"
+      : "bg-gray-100 hover:bg-gray-50 active:bg-gray-100 text-gray-700 cursor-pointer active:shadow-bg-gray-200/50 ring-1 ring-gray-200",
+  }
+   const disabledClass =
+    props.disabled === true
+      ? "active:!translate-y-0 active:!scale-100 active:!shadow-none"
+      : "";
+
+  const colorClass = btnColor[props.color] || "";
+  const sizeClass = sizeClasses[props.size] || "";
+  return `${colorClass} ${sizeClass}  ${disabledClass}`;
+})
 </script>
 
 <style scoped></style>

package/dist/EUITelephone.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUITelephone.vue.d.ts","sourceRoot":"","sources":["../src/components/telephone/EUITelephone.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,8GAA8G,CAAC;AACrI,cAAc,8GAA8G,CAAC;AAC7H,OAAO,4GAA4G,CAAC;AACpH,eAAe,SAAS,CAAC"}

package/dist/button/EUIButton.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUIButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/button/EUIButton.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wGAAwG,CAAC;AAC/H,cAAc,wGAAwG,CAAC;AACvH,OAAO,sGAAsG,CAAC;AAC9G,eAAe,SAAS,CAAC"}

package/dist/button/EUIButtonGroup.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUIButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../src/components/button/EUIButtonGroup.vue"],"names":[],"mappings":"AACA,cAAc,6GAA6G,CAAC;AAC5H,OAAO,2HAA2H,CAAC;;AAEnI,wBAA0F"}