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

package/src/components/button/EUIButtonGroup.vue

@@ -1,287 +0,0 @@
-<template>
-  <div>
-    <div
-      class="inline-flex items-center gap-2 px-2 py-2 overflow-hidden transition-all duration-200 ease-in bg-white shadow-xl w-max shadow-purple-50"
-      :class="[rounded ? 'rounded-full' : 'rounded-lg']"
-      v-bind="$attrs"
-    >
-      <slot name="before" />
-      <nav
-        ref="navContainer"
-        class="relative z-0 inline-flex flex-row items-center gap-2"
-      >
-        <div
-          ref="navIndicator"
-          class="absolute left-0 top-0 h-full w-auto -z-[1] transition-all duration-350 ease-[cubic-bezier(0.15,0.3,0.25,1)]"
-          :class="[
-            getBtnClass(activeBtnName),
-            rounded ? 'rounded-full' : 'rounded-lg',
-          ]"
-        ></div>
-        <button
-          v-for="(data, index) in items"
-          :key="`data-${index}`"
-          v-bind="buttonAttrs"
-          :type="type"
-          :size="size"
-          :iconType="iconType"
-          :data-name="data.name"
-          :class="[
-            'capitalize box-border border-none inline-flex flex-row gap-x-2 items-center !bg-transparent',
-            rounded ? 'rounded-full' : 'rounded-lg',
-            getBtnClass(data.name || ''),
-            { 'bar-indicator': data.name !== activeBtnName },
-          ]"
-          :disabled="disabled"
-          :loading="loading"
-          :icon="icon"
-          @click="handleOnChange(data || '')"
-          style="transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1)"
-        >
-          <component
-            :is="icon"
-            v-if="iconType === 'icon' || iconType === 'startIcon'"
-            :class="[iconWidth]"
-          />
-          <slot :data="data" :activeName="activeBtnName">
-            {{ data?.name }}
-          </slot>
-          <component
-            :is="icon"
-            v-if="iconType === 'endIcon'"
-            :class="[iconWidth]"
-          />
-          <svg
-            v-if="loading"
-            class="animate-spin"
-            :class="[iconWidth]"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              class="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              stroke-width="4"
-            />
-            <path
-              fill="currentColor"
-              class="opacity-75"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-        </button>
-      </nav>
-      <slot name="after" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onMounted,
-  PropType,
-  reactive,
-  ref,
-  toRefs,
-  useAttrs,
-} from "vue";
-
-interface Item {
-  name: string;
-  [key: string]: any;
-}
-
-const props = defineProps({
-  items: {
-    type: Array as () => Item[],
-    default: () => [],
-  },
-  defaultActive: {
-    type: String,
-    default: "",
-  },
-  type: {
-    type: String as PropType<"button" | "submit" | "reset">,
-    default: "button",
-  },
-  size: {
-    type: String as PropType<"xs" | "sm" | "md" | "lg">,
-    default: "md",
-  },
-  activeColor: {
-    type: String as PropType<
-      | "danger"
-      | "success"
-      | "black"
-      | "white"
-      | "purple"
-      | "secondary"
-      | "tertiary"
-    >,
-    default: "white",
-  },
-  iconType: {
-    type: String as PropType<"startIcon" | "endIcon" | "icon">,
-    default: "",
-  },
-  icon: {
-    type: [String, Object, Function],
-    default: "",
-  },
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-  loading: Boolean,
-  disabled: Boolean,
-});
-
-defineOptions({
-  inheritAttrs: false,
-});
-const attrs = useAttrs();
-const buttonAttrs = computed(() => {
-  const { class: _class, style: _style, id: _id, ...rest } = attrs;
-  return rest;
-});
-
-const emit = defineEmits<{
-  (event: "update:activeButton", activeButton: Item): void;
-}>();
-
-const navIndicator = ref<HTMLElement | null>(null);
-const navContainer = ref<HTMLElement | null>(null);
-
-const { items, defaultActive } = toRefs(props);
-const activeBtnName = ref(defaultActive.value || items.value[0]?.name || "");
-
-const marker = (el: HTMLElement) => {
-  const indicator = navIndicator.value;
-  if (indicator && el) {
-    indicator.style.left = el.offsetLeft + "px";
-    indicator.style.width = el.offsetWidth + "px";
-  }
-};
-
-const updateMarkerPosition = () => {
-  const activeBtn = navContainer.value?.querySelector(
-    `button[data-name="${activeBtnName.value}"]`
-  );
-  if (activeBtn) {
-    marker(activeBtn as HTMLElement);
-  }
-};
-
-const handleOnChange = (val: any) => {
-  activeBtnName.value = val?.name;
-  emit("update:activeButton", val);
-  nextTick(() => {
-    updateMarkerPosition();
-  });
-};
-
-onMounted(() => {
-  nextTick(() => {
-    requestAnimationFrame(() => {
-      updateMarkerPosition();
-    });
-  });
-});
-
-// Computed classes for button size
-const sizeClasses = reactive({
-  xs: "text-xs font-medium leading-[normal]", //24
-  sm: "text-sm font-medium", //32
-  md: "text-base font-semibold", //40
-  lg: "text-base font-semibold", //48
-});
-
-const btnColors = {
-  black: {
-    enabled:
-      "text-white bg-gray-900 hover:bg-gray-800 active:bg-black cursor-pointer active:shadow-black/50",
-    disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-gray-800",
-  },
-  white: {
-    enabled:
-      "bg-white hover:bg-gray-100 text-gray-500 hover:text-gray-900 cursor-pointer active:shadow-white/50 active:bg-transparent",
-    disabled: "bg-opacity-80 cursor-not-allowed text-gray-400 bg-gray-200",
-  },
-  danger: {
-    enabled:
-      "bg-red-500 hover:bg-red-600 active:bg-red-500 text-white cursor-pointer active:shadow-red-500/50",
-    disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-red-500",
-  },
-  success: {
-    enabled:
-      "bg-green-600 hover:bg-green-700 active:bg-green-600 text-white cursor-pointer active:shadow-green-500/50",
-    disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-green-600",
-  },
-  purple: {
-    enabled:
-      "bg-purple-700 hover:bg-purple-800 active:bg-purple-700 text-white cursor-pointer active:shadow-purple-500/50",
-    disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-purple-500",
-  },
-  secondary: {
-    enabled:
-      "bg-purple-100 hover:bg-purple-50 active:bg-purple-100 cursor-pointer text-gray-700 active:shadow-purple-200",
-    disabled: "bg-opacity-75 cursor-not-allowed text-gray-400 bg-purple-50",
-  },
-  tertiary: {
-    enabled:
-      "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",
-    disabled:
-      "bg-opacity-75 cursor-not-allowed text-gray-400 bg-gray-50 ring-1 ring-gray-100",
-  },
-};
-
-const iconClasses = {
-  lg: props.iconType === "icon" ? "p-3" : "px-6 py-3",
-  md: props.iconType === "icon" ? "p-2" : "px-4 py-2",
-  sm: props.iconType === "icon" ? "p-1.5" : "px-4 py-1.5",
-  xs: props.iconType === "icon" ? "p-1" : "px-3 py-1",
-};
-
-const iconWidthClasses = reactive({
-  xs: "w-4 h-4 text-current",
-  sm: "w-5 h-5 text-current",
-  md: "w-6 h-6 text-current",
-  lg: "w-6 h-6 text-current",
-});
-
-const iconWidth = computed(() => {
-  return iconWidthClasses[props.size] || "";
-});
-
-const getBtnClass = (btnName: string) => {
-  const isActive = btnName === activeBtnName.value;
-  const colorKey = isActive ? props.activeColor : "white";
-  const state = props.disabled ? "disabled" : "enabled";
-  const colorClass = btnColors[colorKey] ? btnColors[colorKey][state] : "";
-  const sizeClass = sizeClasses[props.size] || "";
-  const typeClass = iconClasses[props.size] || "";
-  return `${colorClass} ${sizeClass} ${typeClass}`;
-};
-</script>
-
-<style lang="scss" scoped>
-.bar-indicator {
-  @apply relative;
-  &::before {
-    content: "";
-    transition: 0.4s;
-    will-change: opacity;
-    @apply absolute -bottom-4 left-0 w-full h-[0.1875rem] rounded-t-xl bg-gray-300 z-[-1] origin-bottom opacity-0;
-  }
-}
-
-.bar-indicator:hover::before {
-  @apply opacity-100 -bottom-2;
-}
-</style>

package/src/components/button/buttonAnimateTab.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="inline-flex flex-col items-end w-full space-y-20">
-    <div
-      class="inline-flex items-center gap-2 px-3 py-3 transition-colors duration-100 ease-in bg-white rounded-full shadow-xl w-max shadow-purple-50"
-    >
-      <slot name="before" />
-      <nav class="relative inline-flex flex-row items-center gap-2">
-        <div id="nav-indicator"></div>
-        <EUIBtnGroup
-          v-for="(data, index) in allDays"
-          :key="`data-${index}`"
-          size="sm"
-          :data-name="data.name"
-          :color="activeDays === data.name ? 'tertiary' : 'white'"
-          rounded
-          @click="handleOnChange(data.name)"
-        >
-          {{ data.name }}
-          <small class="opacity-75">({{ data.count }})</small></EUIBtnGroup
-        >
-      </nav>
-      <slot name="after" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { nextTick, onMounted, ref } from "vue";
-import EUIBtnGroup from "./EUIBtnGroup.vue";
-
-const allDays = ref([
-  { name: "7 days", count: 5 },
-  { name: "15 days", count: 10 },
-  { name: "16-30 days", count: 20 },
-  { name: "31-60 days", count: 121 },
-  { name: "61-90 days", count: 40 },
-]);
-
-const activeDays = ref(allDays.value[0].name);
-
-onMounted(() => {
-  nextTick(() => {
-    const activeBtn = document.querySelector(
-      `nav button[data-name="${activeDays.value}"]`
-    );
-    if (activeBtn) marker(activeBtn as HTMLElement);
-  });
-});
-
-const marker = (el: HTMLElement) => {
-  const indicator = document.querySelector("#nav-indicator") as HTMLElement;
-  if (indicator && el) {
-    indicator.style.left = el.offsetLeft + "px";
-    indicator.style.width = el.offsetWidth + "px";
-  }
-};
-
-const handleOnChange = (val: string) => {
-  activeDays.value = val;
-  nextTick(() => {
-    const activeBtn = document.querySelector(
-      `nav button[data-name="${activeDays.value}"]`
-    );
-    if (activeBtn) marker(activeBtn as HTMLElement);
-  });
-};
-</script>
-
-<style lang="scss" scoped>
-#nav-indicator {
-  transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1);
-  @apply absolute w-auto h-1 bg-gray-500 rounded-t-lg -bottom-3;
-}
-</style>

package/src/components/checkbox/EUICheckbox.vue

@@ -1,110 +0,0 @@
-<template>
-<div>
-   <label class="flex flex-row items-center scale-100 translate-x-0 translate-y-0 eui-checkbox">
-    <input v-model="isChecked" type="checkbox" id="checkbox" class="appearance-none sr-only input-checkbox" :disabled="disabled"
-      @change="toggle($event)" />
-      <div class="cbx-icon" for="checkbox">
-        <span>
-            <svg width="14px" height="14px">
-                <use xlink:href="#check-box"></use>
-            </svg>
-        </span>
-        <svg class="absolute pointer-events-none select-none inline-svg size-0">
-          <symbol id="check-box" viewbox="0 0 14 14">
-            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
-          </symbol>
-        </svg>
-      </div>
-      <slot name="label">
-        <span v-if="label" class="text-sm font-medium tracking-wide text-gray-700 ms-2 first-letter:capitalize">{{ label }}</span>
-      </slot>
-  </label>
-  <template v-if="errors && Object.keys(errors).length">
-    <EUIErrorMessage :errors="errors" :name="name" />
-  </template>
-</div>
-</template>
-
-<script setup lang="ts">
-import { PropType, watch,ref } from "vue";
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
-
-const props = defineProps({
-  errors: { type: Object, required: false, default: () => {} },
-  name: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  modelValue: {
-    type: Boolean as PropType<boolean>,
-    required: true,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  label: { type: String as PropType<string>, required: true, default: "" },
-});
-
-const emit = defineEmits(["update:modelValue", "toggle"]);
-const isChecked = ref<boolean>(props.modelValue);
-
-watch(isChecked, (newValue) => {
-  emit("update:modelValue", newValue);
-});
-
-const toggle = ($event: Event) => {
-  if($event) {
-    emit("toggle", isChecked.value);
-  }
-};
-
-watch(props, (newValue) => {
-  isChecked.value = newValue.modelValue;
-});
-</script>
-
-<style lang="scss">
-.eui-checkbox .cbx-icon {
-  transition: all 0.2s ease;
-  @apply select-none cursor-pointer p-px rounded-md overflow-hidden inline-block scale-110;
-}
-
-.eui-checkbox .cbx-icon span {
-  transform: translate3d(0, 0, 0);
-  transition: all 0.2s ease;
-  @apply float-left align-middle relative size-5 border-[1.5px] border-gray-400 rounded scale-100;
-}
-
-.eui-checkbox .cbx-icon span > svg {
-  top: 3.5px;
-  left: 2.5px;
-  stroke-width: 1.75;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-dasharray: 18px;
-  stroke-dashoffset: 18px;
-  transition: all 0.3s ease;
-  transition-delay: 0.1s;
-  transform: translate3d(0, 0, 0);
-  @apply absolute fill-none stroke-white;
-}
-
-.eui-checkbox .input-checkbox:checked + .cbx-icon > span {
-  animation: anim 0.4s ease;
-  @apply bg-purple-700 border-purple-700;
-}
-
-.eui-checkbox .input-checkbox:checked + .cbx-icon span > svg {
-  stroke-dashoffset: 0;
-  transition: rotate(8deg);
-}
-
-@keyframes anim {
-  50% {
-    transform: scale(0.85);
-  }
-}
-</style>