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

package/src/components/toggle/EUIToggle.vue

@@ -1,101 +0,0 @@
-<template>
-  <div>
-    <label class="inline-flex items-center cursor-pointer eui-switch">
-        <input
-            v-model="isChecked"
-            type="checkbox"
-            class="sr-only peer eui-switch_input"
-            :disabled="disabled"
-            @change="toggle($event)"
-        />
-        <div
-        class="eui-switch_circle relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300/10 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-700"
-        >
-            <span class="eui-switch_icons"></span>
-        </div>
-        <span v-if="label" class="text-sm font-medium text-gray-900 ms-3 first-letter:capitalize">
-            {{ label }}
-        </span>
-    </label>
-    <template v-if="errors && Object.keys(errors).length">
-      <EUIErrorMessage :errors="errors" :name="name" />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, ref, watch } from "vue";
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
-
-// Props declaration
-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" scoped>
-.eui-switch_icons {
-      @apply size-5 absolute z-10;
-      transform: translateX(0%) !important;
-      &::before,
-      &::after {
-        content: '';
-        border-width: 0 2px 2px 0;
-        left: 9px;
-        @apply absolute border-solid border-red-500 transform size-[5px] ;
-      }
-      &::after {
-        @apply rotate-45 top-2;
-      }
-      &::before {
-        bottom: 3px;
-        rotate: 225deg;
-      }
-    }
-
-    .eui-switch_input:checked + .eui-switch_circle {
-    .eui-switch_icons {
-      transform: translateX(120%) !important;
-      &::after {
-        width: 5.3px;
-        border-width: 0 2.4px 2.4px 0;
-        @apply border-green-500 top-1.5 left-1.5 h-2.5;
-      }
-      &::before {
-        @apply hidden;
-      }
-    }
-  }
-</style>

package/src/components/tooltip/EUITooltip.vue

@@ -1,111 +0,0 @@
-<template>
-  <div ref="tooltipContainer" class="relative cursor-default">
-    <div @mouseover="showTooltip" @mouseleave="hideTooltip">
-      <slot>
-        <InformationCircleIcon class="text-current size-5" />
-      </slot>
-    </div>
-
-    <div v-if="isVisible" ref="tooltip" class="tooltip">
-      <div class="arrow" data-popper-arrow />
-      <slot name="tooltip">Tooltip content</slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { InformationCircleIcon } from "@heroicons/vue/24/outline";
-import { createPopper, Instance } from "@popperjs/core";
-import { PropType, ref, nextTick } from "vue";
-
-const popperInstance = ref<Instance | null>(null);
-const tooltipContainer = ref<HTMLElement | null>(null);
-const tooltip = ref<HTMLElement | null>(null);
-const isVisible = ref(false);
-
-const props = defineProps({
-  placement: {
-    type: String as PropType<
-      "top" | "left" | "bottom" | "right" | "bottom-start" | "bottom-end"
-    >,
-    default: "left",
-  },
-});
-
-const showTooltip = async () => {
-  isVisible.value = true;
-  await nextTick(); // Ensures the tooltip element is rendered before creating the Popper instance
-  createPopperInstance();
-};
-
-const hideTooltip = () => {
-  isVisible.value = false;
-  if (popperInstance.value) {
-    popperInstance.value.destroy();
-    popperInstance.value = null;
-  }
-};
-
-const createPopperInstance = () => {
-  if (tooltipContainer.value && tooltip.value) {
-    popperInstance.value = createPopper(tooltipContainer.value, tooltip.value, {
-      placement: props.placement,
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, 8],
-          },
-        },
-      ],
-    });
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.tooltip {
-  @apply block z-50 px-3 py-2 text-sm font-light text-white/90 bg-gray-900 shadow-md ring-inset ring-1 ring-gray-950 rounded-lg shadow-gray-100 max-w-xs min-w-0 size-max text-start break-all max-h-96;
-}
-.arrow,
-.arrow::before {
-  background: inherit;
-  @apply size-3 absolute border-[0.375rem] border-gray-900 rounded-tl-sm;
-}
-
-.arrow {
-  @apply invisible;
-}
-
-.arrow::before {
-  content: "";
-  @apply visible transform rotate-45;
-}
-
-.tooltip {
-  &[data-popper-placement^="top"] > .arrow {
-    @apply bottom-px;
-    &::before {
-      @apply border-t-transparent border-l-transparent -mx-1;
-    }
-  }
-  &[data-popper-placement^="bottom"] > .arrow {
-    @apply -top-[0.70rem];
-    &::before {
-      @apply border-b-transparent border-r-transparent -mx-1;
-    }
-  }
-  &[data-popper-placement^="left"] > .arrow {
-    @apply right-px;
-    &::before {
-      @apply border-l-transparent border-b-transparent -mt-1.5;
-    }
-  }
-  &[data-popper-placement^="right"] > .arrow {
-    @apply -left-[0.95rem];
-    &::before {
-      @apply border-r-transparent border-t-transparent -mt-1 mx-1;
-    }
-  }
-}
-</style>

package/src/components/uidemo/select-com.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="grid w-full grid-cols-3 gap-10">
-    <div>
-      <EUISelect
-        v-model="businessAreaSel"
-        :items="businessArea"
-        search-label="name"
-        label="Select Label"
-        placeholder="Placeholder"
-        :multiple="false"
-        :inputFilled="false"
-      />
-      <pre class="text-green-500 text-xxs">{{ businessAreaSel }}</pre>
-    </div>
-
-    <div>
-      <EUISelect
-        v-model="checkboxData"
-        search-label="name"
-        placeholder="Placeholder"
-        :items="datas"
-        :selected-count="true"
-        selectedCountLabel="Checkbox"
-        :multiple="true"
-        :is-checkbox="true"
-      />
-      <pre class="text-green-500 text-xxs">{{ checkboxData }}</pre>
-    </div>
-
-    <div>
-      <EUISelect
-        v-model="multipleData"
-        search-label="name"
-        label="Select Label"
-        placeholder="Placeholder"
-        :items="datas"
-        :multiple="true"
-        :multiple-limit="3"
-      />
-      <pre class="text-green-500 text-xxs">{{ multipleData }}</pre>
-    </div>
-    <div>
-      <EUISelect
-        v-model="singleData"
-        search-label="name"
-        label="Select Label"
-        placeholder="Placeholder"
-        :items="datas"
-        :multiple="false"
-      />
-      <pre class="text-green-500 text-xxs">{{ singleData }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import EUISelect from "../select/EUISelect.vue";
-
-const businessArea = ref(["All", "B2B", "B2C", "Accelerator"]);
-const businessAreaSel = ref(businessArea.value?.[0]);
-
-const checkboxData = ref([]);
-const multipleData = ref([]);
-const singleData = ref({});
-const datas = ref([
-  {
-    value: "ShawnBurke",
-    name: "Shawn Burke",
-    age: 6,
-  },
-  {
-    value: "EmeryNolan",
-    name: "Emery Nolan",
-    age: 4,
-  },
-  {
-    value: "EmbryGrant",
-    name: "Embry Grant",
-    age: 3,
-  },
-  {
-    value: "JesseAustin",
-    name: "Jesse Austin",
-    age: 9,
-  },
-  {
-    value: "TandyChristensen",
-    name: "Tandy Christensen",
-    age: 7,
-  },
-  {
-    value: "ShawnBurkeNew",
-    name: "Shawn Burke New",
-    age: 6,
-  },
-  {
-    value: "EmeryNolanNew",
-    name: "Emery Nolan New",
-    age: 4,
-  },
-  {
-    value: "EmbryGrantNew",
-    name: "Embry Grant New",
-    age: 3,
-  },
-  {
-    value: "JesseAustinNew",
-    name: "Jesse Austin New",
-    age: 9,
-  },
-  {
-    value: "TandyChristensenNew",
-    name: "Tandy Christensen New",
-    age: 7,
-  },
-]);
-</script>
-
-<style scoped></style>