@skyservice-developers/vue-dev-kit 1.5.11 → 1.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyservice-developers/vue-dev-kit",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "description": "Vue 2 and Vue 3 developer toolkit - components and helpers",
   "type": "module",
   "main": "./dist/vue3/vue-dev-kit.cjs",

package/src/vue3/components/Modal.vue

@@ -3,7 +3,7 @@
     <div
       v-if="modelValue"
       class="sky-modal-overlay"
-      @click.self="handleOverlayClick"
+      @mousedown.self="handleOverlayClick"
     >
         <div class="sky-modal" :style="modalStyle">
           <div class="sky-modal-header">

package/src/vue3/components/SkySelect.vue

@@ -21,95 +21,34 @@
       >
         {{ selectedOption ? selectedOption.label : placeholder }}
       </span>
-      <svg
-        class="sky-select-chevron"
-        viewBox="0 0 16 16"
-        fill="none"
-        aria-hidden="true"
-      >
-        <path
-          d="M4 6l4 4 4-4"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
+      <svg class="sky-select-chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+        <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </button>
 
-    <template v-if="open">
-      <Teleport v-if="teleport" to="body">
-        <div
-          ref="dropdownEl"
-          class="sky-select-dropdown-teleported"
-          :style="dropdownStyle"
-        >
-          <div
-            v-for="(option, idx) in normalizedOptions"
-            :key="option.value"
-            class="sky-select-option"
-            :class="{
-              'sky-select-option-selected': option.value === modelValue,
-              'sky-select-option-focused': idx === focusedIdx,
-            }"
-            @click="select(option)"
-            @mouseenter="focusedIdx = idx"
-          >
-            <span>{{ option.label }}</span>
-            <svg
-              v-if="option.value === modelValue"
-              class="sky-select-check"
-              viewBox="0 0 16 16"
-              fill="none"
-              aria-hidden="true"
-            >
-              <path
-                d="M3 8l4 4 6-6"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </div>
-        </div>
-      </Teleport>
-      <div v-else class="sky-select-dropdown">
-        <div
-          v-for="(option, idx) in normalizedOptions"
-          :key="option.value"
-          class="sky-select-option"
-          :class="{
-            'sky-select-option-selected': option.value === modelValue,
-            'sky-select-option-focused': idx === focusedIdx,
-          }"
-          @click="select(option)"
-          @mouseenter="focusedIdx = idx"
-        >
-          <span>{{ option.label }}</span>
-          <svg
-            v-if="option.value === modelValue"
-            class="sky-select-check"
-            viewBox="0 0 16 16"
-            fill="none"
-            aria-hidden="true"
-          >
-            <path
-              d="M3 8l4 4 6-6"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </div>
+    <div v-if="open" class="sky-select-dropdown">
+      <div
+        v-for="(option, idx) in normalizedOptions"
+        :key="option.value"
+        class="sky-select-option"
+        :class="{
+          'sky-select-option-selected': option.value === modelValue,
+          'sky-select-option-focused': idx === focusedIdx,
+        }"
+        @click="select(option)"
+        @mouseenter="focusedIdx = idx"
+      >
+        <span>{{ option.label }}</span>
+        <svg v-if="option.value === modelValue" class="sky-select-check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path d="M3 8l4 4 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
       </div>
-    </template>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onBeforeUnmount } from "vue";
+import { ref, computed, onBeforeUnmount } from 'vue';
 
 const props = defineProps({
   modelValue: {
@@ -121,7 +60,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: "",
+    default: '',
   },
   disabled: {
     type: Boolean,
@@ -131,41 +70,24 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  teleport: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue']);
 
 const root = ref(null);
-const dropdownEl = ref(null);
 const open = ref(false);
 const focusedIdx = ref(-1);
-const dropdownStyle = ref({});
 
 const normalizedOptions = computed(() =>
   props.options.map((opt) =>
-    typeof opt === "string" ? { label: opt, value: opt } : opt,
-  ),
+    typeof opt === 'string' ? { label: opt, value: opt } : opt
+  )
 );
 
-const selectedOption = computed(
-  () =>
-    normalizedOptions.value.find((o) => o.value === props.modelValue) ?? null,
+const selectedOption = computed(() =>
+  normalizedOptions.value.find((o) => o.value === props.modelValue) ?? null
 );
 
-function calcDropdownStyle() {
-  if (!props.teleport || !root.value) return;
-  const rect = root.value.getBoundingClientRect();
-  dropdownStyle.value = {
-    top: `${rect.bottom + 4}px`,
-    left: `${rect.left}px`,
-    width: `${rect.width}px`,
-  };
-}
-
 function toggle() {
   if (props.disabled) return;
   open.value ? close() : openDropdown();
@@ -173,86 +95,51 @@ function toggle() {
 
 function openDropdown() {
   open.value = true;
-  focusedIdx.value = normalizedOptions.value.findIndex(
-    (o) => o.value === props.modelValue,
-  );
-  calcDropdownStyle();
-  document.addEventListener("mousedown", onOutsideClick);
-  if (props.teleport) {
-    window.addEventListener("scroll", onScrollOrResize, true);
-    window.addEventListener("resize", onScrollOrResize);
-  }
+  focusedIdx.value = normalizedOptions.value.findIndex((o) => o.value === props.modelValue);
+  document.addEventListener('mousedown', onOutsideClick);
 }
 
 function close() {
   open.value = false;
-  document.removeEventListener("mousedown", onOutsideClick);
-  window.removeEventListener("scroll", onScrollOrResize, true);
-  window.removeEventListener("resize", onScrollOrResize);
+  document.removeEventListener('mousedown', onOutsideClick);
 }
 
 function select(option) {
-  emit("update:modelValue", option.value);
+  emit('update:modelValue', option.value);
   close();
 }
 
 function onOutsideClick(e) {
-  if (root.value?.contains(e.target)) return;
-  if (dropdownEl.value?.contains(e.target)) return;
-  close();
-}
-
-function onScrollOrResize() {
-  calcDropdownStyle();
+  if (!root.value?.contains(e.target)) close();
 }
 
 function onKeydown(e) {
   if (!open.value) {
-    if (e.key === "Enter" || e.key === " ") {
+    if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       openDropdown();
     }
     return;
   }
-  if (e.key === "Escape") {
+  if (e.key === 'Escape') {
     close();
-  } else if (e.key === "ArrowDown") {
+  } else if (e.key === 'ArrowDown') {
     e.preventDefault();
-    focusedIdx.value = Math.min(
-      focusedIdx.value + 1,
-      normalizedOptions.value.length - 1,
-    );
-  } else if (e.key === "ArrowUp") {
+    focusedIdx.value = Math.min(focusedIdx.value + 1, normalizedOptions.value.length - 1);
+  } else if (e.key === 'ArrowUp') {
     e.preventDefault();
     focusedIdx.value = Math.max(focusedIdx.value - 1, 0);
-  } else if (e.key === "Enter") {
+  } else if (e.key === 'Enter') {
     e.preventDefault();
-    if (focusedIdx.value >= 0)
-      select(normalizedOptions.value[focusedIdx.value]);
+    if (focusedIdx.value >= 0) select(normalizedOptions.value[focusedIdx.value]);
   }
 }
 
 onBeforeUnmount(() => {
-  document.removeEventListener("mousedown", onOutsideClick);
-  window.removeEventListener("scroll", onScrollOrResize, true);
-  window.removeEventListener("resize", onScrollOrResize);
+  document.removeEventListener('mousedown', onOutsideClick);
 });
 </script>
 
-<style>
-.sky-select-dropdown-teleported {
-  position: fixed;
-  z-index: var(--sky-select-dropdown-z-index, 9999);
-  background: var(--sky-select-dropdown-bg, #fff);
-  border: var(--sky-select-dropdown-border, 1px solid #d1d5db);
-  border-radius: var(--sky-select-dropdown-radius, 6px);
-  box-shadow: var(--sky-select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
-  max-height: var(--sky-select-dropdown-max-height, 220px);
-  overflow-y: auto;
-  padding: 4px;
-}
-</style>
-
 <style scoped>
 .sky-select {
   position: relative;