edvoyui-component-library-test-flight 0.0.168 → 0.0.170

package/src/components/input/EUINumberInput.vue

@@ -1,250 +0,0 @@
-<template>
-  <div>
-    <label
-      v-if="!inputFilled && label"
-      :for="`${name}-${id}`"
-      :class="[
-        'text-xs w-full text-gray-500 cursor-pointer font-medium',
-        required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-      ]"
-    >
-      {{ label }}
-    </label>
-    <div
-      :class="[
-        'relative',
-        { 'pointer-events-none cursor-not-allowed': disabled },
-        {
-          'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-200':
-            inputFilled,
-        },
-        'group cursor-pointer relative w-full mb-2 overflow-hidden',
-      ]"
-    >
-      <label
-        v-if="inputFilled"
-        :for="`${name}-${id}`"
-        :class="[
-          getIconClass(),
-          inputValue
-            ? 'top-3.5 text-xs text-gray-400 leading-none cursor-default'
-            : 'top-1/2 text-sm w-full text-gray-700 cursor-pointer h-14 pt-5 pb-4',
-          disabled ? 'cursor-not-allowed bg-gray-50 z-10' : 'z-0 bg-white',
-          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-          'absolute font-medium left-0 px-4 -translate-y-1/2 duration-300 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 first-letter:capitalize transition-all ease-in-out',
-        ]"
-      >
-        {{ label || "Label" }}
-      </label>
-      <div
-        v-if="icon && iconType"
-        :class="[
-          'absolute inset-y-0 flex items-center pointer-events-none',
-          iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3',
-          disabled ? 'z-20' : '',
-        ]"
-      >
-        <component :is="icon" class="text-gray-400 size-6" aria-hidden="true" />
-      </div>
-      <input
-        :id="`${name}-${id}`"
-        ref="input"
-        type="number"
-        :value="modelValue"
-        :min="min"
-        :max="max"
-        :step="step || 1"
-        :placeholder="placeholder"
-        :name="name"
-        :class="[
-          'z-10 block placeholder:text-gray-400 focus:outline-none text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 transition-all duration-100 border-none outline-none',
-          inputFilled
-            ? 'pt-6 pb-3 rounded-2xl size-full'
-            : 'py-3 h-10 w-full ring-1 ring-gray-200 focus-within:ring-purple-600 focus-within:ring-2 ring-inset',
-          !inputFilled && rounded ? 'rounded-2xl' : 'rounded-md',
-          disabled ? 'cursor-not-allowed' : 'cursor-text',
-          getIconClass(),
-          !inputFilled && className,
-          'pr-8',
-        ]"
-        :required="required"
-        :disabled="disabled"
-        :readonly="readonly"
-        autocomplete="off"
-        inputmode="numeric"
-        pattern="^([0-9]{1,5}(\.[0-9]{1,2})?|100000(\.0{1,2})?)$"
-        @keypress="handleKeyPress"
-        @wheel.prevent=""
-        @keydown.up.prevent=""
-        @keydown.down.prevent=""
-        @input="emitInput"
-        @focus="hasFocus = true"
-        @blur="hasFocus = false"
-      />
-    </div>
-    <template v-if="errors && Object.keys(errors).length">
-      <EUIErrorMessage :errors="errors" :name="name" />
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
-import {
-  defineProps,
-  defineEmits,
-  computed,
-  PropType,
-  ref,
-  onMounted,
-} from "vue";
-
-const props = defineProps({
-  errors: { type: Object, required: false, default: () => {} },
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  name: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  label: {
-    type: String,
-    required: true,
-    default: "",
-  },
-  autoFocus: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  iconType: {
-    type: String as PropType<"startIcon" | "endIcon">,
-    default: "",
-  },
-  icon: {
-    type: [Object, String],
-    default: "",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  inputFilled: {
-    type: Boolean,
-    default: false,
-  },
-  rounded: Boolean,
-  className: {
-    type: Array as PropType<string[]>,
-    required: false,
-    default: () => [],
-  },
-  min: {
-    type: Number,
-    default: 0,
-    required: true,
-  },
-  max: {
-    type: Number,
-    default: 100,
-    required: true,
-  },
-  step: {
-    type: Number,
-    default: 1,
-    required: true,
-  },
-});
-
-const hasFocus = ref(false);
-const input = ref<HTMLInputElement>();
-
-const id = "id"; //generateUID();
-
-const emit = defineEmits(["update:modelValue"]);
-
-const emitInput = (event: Event) => {
-  const inputEl = event.target as HTMLInputElement;
-  const newValue = parseFloat(inputEl.value);
-
-  // Only emit valid numbers within range
-  if (!isNaN(newValue)) {
-    if (newValue >= props.min && newValue <= props.max) {
-      emit("update:modelValue", newValue);
-    } else if (newValue > props.max) {
-      emit("update:modelValue", props.max);
-      inputEl.value = String(props.max);
-    } else if (newValue < props.min) {
-      emit("update:modelValue", props.min);
-      inputEl.value = String(props.min);
-    }
-  } else {
-    emit("update:modelValue", props.min);
-    inputEl.value = String(props.min);
-  }
-};
-
-
-const handleKeyPress = (e: KeyboardEvent) => {
-  const inputEl = e.target as HTMLInputElement | null;
-  if (!inputEl) return; // Safety check
-  const allowDecimal = props.step < 1;
-  // Allow digits
-  if (/[0-9]/.test(e.key)) return;
-  // Allow one '.' only if step < 1
-  if (allowDecimal && e.key === '.' && !inputEl.value.includes('.')) return;
-  // Otherwise block input
-  e.preventDefault();
-};
-
-
-const inputValue = computed(() => {
-  return props.modelValue === 0 ? true : !!props.modelValue;
-});
-
-const getIconClass = () => {
-  switch (props.iconType) {
-    case "startIcon":
-      return "pl-12 pr-4";
-    case "endIcon":
-      return "pr-12 pl-4";
-    default:
-      return "px-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>

package/src/components/loader/EUICircleLoader.vue

@@ -1,31 +0,0 @@
-<template>
-    <div class="flex flex-col items-center justify-center gap-4 mx-auto size-72">
-        <div class="relative min-h-16">
-            <div class="circle-loader">
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style lang="scss" scoped>
-.circle-loader {
-    @apply box-border size-16 rounded-full relative transform rotate-45 border-[0.8rem] border-solid border-violet-500/25;
-    &::before {
-        content: "";
-        @apply absolute box-border -inset-3 rounded-full border-[0.8rem] border-solid border-violet-600;
-        animation: circleProgress 1s infinite linear;
-    }
-}
-
-@keyframes circleProgress {
-    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
-    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
-}
-</style>

package/src/components/loader/EUICubeLoader.vue

@@ -1,237 +0,0 @@
-<template>
-    <div class="flex flex-col items-center justify-center gap-4 size-72 mx-auto">
-        <div class="min-h-16 relative">
-            <div class="cube">
-                <div class="sides">
-                    <div class="top"></div>
-                    <div class="right"></div>
-                    <div class="bottom"></div>
-                    <div class="left"></div>
-                    <div class="front"></div>
-                    <div class="back"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style lang="scss">
-:root {
-  --cube-side: 2.75rem;
-  --cube-side-half: calc(var(--cube-side) / 2);
-}
-
- @keyframes rotate {
-	 0% {
-		 transform: rotateX(-37.5deg) rotateY(45deg);
-	}
-	 50% {
-		 transform: rotateX(-37.5deg) rotateY(405deg);
-	}
-	 100% {
-		 transform: rotateX(-37.5deg) rotateY(405deg);
-	}
-}
-
- .cube, .cube * {
-   @apply size-[2.75rem] absolute top-1 left-[-0.4rem];
-}
- .sides {
-	 animation: rotate 3s ease infinite;
-	 animation-delay: 0.8s;
-	 transform-style: preserve-3d;
-	 transform: rotateX(-37.5deg) rotateY(45deg);
-}
- .cube .sides * {
-     @apply box-border bg-violet-600 border border-solid border-white;
-}
- .cube .sides .top {
-	 animation: top-animation 3s ease infinite;
-	 animation-delay: 0ms;
-	 transform: rotateX(90deg) translateZ(var(--cube-side));
-	 animation-fill-mode: forwards;
-	 transform-origin: 50% 50%;
-}
-
- @keyframes top-animation {
-	 0% {
-		 opacity: 1;
-		 transform: rotateX(90deg) translateZ(var(--cube-side));
-	}
-	 20% {
-		 opacity: 1;
-		 transform: rotateX(90deg) translateZ(var(--cube-side-half));
-	}
-	 70% {
-		 opacity: 1;
-		 transform: rotateX(90deg) translateZ(var(--cube-side-half));
-	}
-	 90% {
-		 opacity: 1;
-		 transform: rotateX(90deg) translateZ(var(--cube-side));
-	}
-	 100% {
-		 opacity: 1;
-		 transform: rotateX(90deg) translateZ(var(--cube-side));
-	}
-}
-
- .cube .sides .bottom {
-	 animation: bottom-animation 3s ease infinite;
-	 animation-delay: 0ms;
-	 transform: rotateX(-90deg) translateZ(var(--cube-side));
-	 animation-fill-mode: forwards;
-	 transform-origin: 50% 50%;
-}
-
- @keyframes bottom-animation {
-	 0% {
-		 opacity: 1;
-		 transform: rotateX(-90deg) translateZ(var(--cube-side));
-	}
-	 20% {
-		 opacity: 1;
-		 transform: rotateX(-90deg) translateZ(var(--cube-side-half));
-	}
-	 70% {
-		 opacity: 1;
-		 transform: rotateX(-90deg) translateZ(var(--cube-side-half));
-	}
-	 90% {
-		 opacity: 1;
-		 transform: rotateX(-90deg) translateZ(var(--cube-side));
-	}
-	 100% {
-		 opacity: 1;
-		 transform: rotateX(-90deg) translateZ(var(--cube-side));
-	}
-}
-
- .cube .sides .front {
-	 animation: front-animation 3s ease infinite;
-	 animation-delay: 100ms;
-	 transform: rotateY(0deg) translateZ(var(--cube-side));
-	 animation-fill-mode: forwards;
-	 transform-origin: 50% 50%;
-}
-
- @keyframes front-animation {
-	 0% {
-		 opacity: 1;
-		 transform: rotateY(0deg) translateZ(var(--cube-side));
-	}
-	 20% {
-		 opacity: 1;
-		 transform: rotateY(0deg) translateZ(var(--cube-side-half));
-	}
-	 70% {
-		 opacity: 1;
-		 transform: rotateY(0deg) translateZ(var(--cube-side-half));
-	}
-	 90% {
-		 opacity: 1;
-		 transform: rotateY(0deg) translateZ(var(--cube-side));
-	}
-	 100% {
-		 opacity: 1;
-		 transform: rotateY(0deg) translateZ(var(--cube-side));
-	}
-}
-
- .cube .sides .back {
-	 animation: back-animation 3s ease infinite;
-	 animation-delay: 100ms;
-	 transform: rotateY(-180deg) translateZ(var(--cube-side));
-	 animation-fill-mode: forwards;
-	 transform-origin: 50% 50%;
-}
-
- @keyframes back-animation {
-	 0% {
-		 opacity: 1;
-		 transform: rotateY(-180deg) translateZ(var(--cube-side));
-	}
-	 20% {
-		 opacity: 1;
-		 transform: rotateY(-180deg) translateZ(var(--cube-side-half));
-	}
-	 70% {
-		 opacity: 1;
-		 transform: rotateY(-180deg) translateZ(var(--cube-side-half));
-	}
-	 90% {
-		 opacity: 1;
-		 transform: rotateY(-180deg) translateZ(var(--cube-side));
-	}
-	 100% {
-		 opacity: 1;
-		 transform: rotateY(-180deg) translateZ(var(--cube-side));
-	}
-}
-
-.cube .sides .left {
-  animation: left-animation 3s ease infinite;
-  animation-delay: 100ms;
-  transform: rotateY(-90deg) translateZ(var(--cube-side));
-  animation-fill-mode: forwards;
-  transform-origin: 50% 50%;
-}
-
-@keyframes left-animation {
-  0% {
-      opacity: 1;
-      transform: rotateY(-90deg) translateZ(var(--cube-side));
-  }
-  20% {
-      opacity: 1;
-      transform: rotateY(-90deg) translateZ(var(--cube-side-half));
-  }
-  70% {
-      opacity: 1;
-      transform: rotateY(-90deg) translateZ(var(--cube-side-half));
-  }
-  90% {
-      opacity: 1;
-      transform: rotateY(-90deg) translateZ(var(--cube-side));
-  }
-  100% {
-      opacity: 1;
-      transform: rotateY(-90deg) translateZ(var(--cube-side));
-  }
-}
-
-.cube .sides .right {
-  animation: right-animation 3s ease infinite;
-  animation-delay: 100ms;
-  transform: rotateY(90deg) translateZ(var(--cube-side));
-  animation-fill-mode: forwards;
-  transform-origin: 50% 50%;
-}
-
-@keyframes right-animation {
-  0% {
-      opacity: 1;
-      transform: rotateY(90deg) translateZ(var(--cube-side));
-  }
-  20% {
-      opacity: 1;
-      transform: rotateY(90deg) translateZ(var(--cube-side-half));
-  }
-  70% {
-      opacity: 1;
-      transform: rotateY(90deg) translateZ(var(--cube-side-half));
-  }
-  90% {
-      opacity: 1;
-      transform: rotateY(90deg) translateZ(var(--cube-side));
-  }
-  100% {
-      opacity: 1;
-      transform: rotateY(90deg) translateZ(var(--cube-side));
-  }
-}
-</style>

package/src/components/loader/EUILoader.vue

@@ -1,17 +0,0 @@
-<<template>
-    <div class="grid grid-cols-3">
-        <EUISquareLoader />
-        <EUICircleLoader />
-        <EUICubeLoader />
-    </div>
-</template>
-
-<script setup lang="ts">
-import EUICircleLoader from './EUICircleLoader.vue';
-import EUICubeLoader from './EUICubeLoader.vue';
-import EUISquareLoader from './EUISquareLoader.vue';
-</script>
-
-<style scoped>
-
-</style>

package/src/components/loader/EUISquareLoader.vue

@@ -1,47 +0,0 @@
-<template>
-    <div class="flex flex-col items-center justify-center gap-4 size-72 mx-auto">
-        <div class="min-h-16 relative">
-            <div class="square-loader">
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style lang="scss">
-:root {
-  --primary: #705CFF;
-  --primary-2: #705CFF60;
-  --primary-3: #705CFF30;
-}
-.square-loader {
-  --s: 20px;
-  --_d: calc(0.353*var(--s));
-  width: calc(var(--s) + var(--_d));
-  aspect-ratio: 1;
-  display: grid;
-    &:before,
-    &:after {
-        content: "";
-        grid-area: 1/1;
-        clip-path: polygon(var(--_d) 0,100% 0,100% calc(100% - var(--_d)),calc(100% - var(--_d)) 100%,0 100%,0 var(--_d));
-        background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), var(--primary-3) 135deg, var(--primary) 0 270deg, var(--primary-2) 0);
-        animation: l6 2s infinite;
-    }
-
-    &:after {
-    animation-delay:-1s;
-    }
-}
-
-@keyframes l6{
-  0%  {transform:translate(0,0)}
-  25% {transform:translate(30px,0)}
-  50% {transform:translate(30px,30px)}
-  75% {transform:translate(0,30px)}
-  100%{transform:translate(0,0)}
-}
-</style>