@skyservice-developers/vue-dev-kit 1.5.9 → 1.5.10

package/package.json

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

package/src/vue2/components/SkySelect.vue

@@ -26,24 +26,49 @@
       </svg>
     </button>
 
-    <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 === value,
-          'sky-select-option-focused': idx === focusedIdx,
-        }"
-        @click="select(option)"
-        @mouseenter="focusedIdx = idx"
-      >
-        <span>{{ option.label }}</span>
-        <svg v-if="option.value === value" 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>
+    <template v-if="open">
+      <portal v-if="teleport" to="sky-select-portal">
+        <div
+          class="sky-select-dropdown 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 === value,
+              'sky-select-option-focused': idx === focusedIdx,
+            }"
+            @click="select(option)"
+            @mouseenter="focusedIdx = idx"
+          >
+            <span>{{ option.label }}</span>
+            <svg v-if="option.value === value" 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>
+      </portal>
+      <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 === value,
+            'sky-select-option-focused': idx === focusedIdx,
+          }"
+          @click="select(option)"
+          @mouseenter="focusedIdx = idx"
+        >
+          <span>{{ option.label }}</span>
+          <svg v-if="option.value === value" 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>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -71,11 +96,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    teleport: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       open: false,
       focusedIdx: -1,
+      dropdownStyle: {},
     };
   },
   computed: {
@@ -89,6 +119,17 @@ export default {
     },
   },
   methods: {
+    calcDropdownStyle() {
+      if (!this.teleport || !this.$refs.root) return;
+      const rect = this.$refs.root.getBoundingClientRect();
+      this.dropdownStyle = {
+        position: 'fixed',
+        top: `${rect.bottom + 4}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        zIndex: 'var(--sky-select-dropdown-z-index, 9999)',
+      };
+    },
     toggle() {
       if (this.disabled) return;
       this.open ? this.close() : this.openDropdown();
@@ -96,11 +137,18 @@ export default {
     openDropdown() {
       this.open = true;
       this.focusedIdx = this.normalizedOptions.findIndex((o) => o.value === this.value);
+      this.calcDropdownStyle();
       this.$nextTick(() => document.addEventListener('mousedown', this.onOutsideClick));
+      if (this.teleport) {
+        window.addEventListener('scroll', this.onScrollOrResize, true);
+        window.addEventListener('resize', this.onScrollOrResize);
+      }
     },
     close() {
       this.open = false;
       document.removeEventListener('mousedown', this.onOutsideClick);
+      window.removeEventListener('scroll', this.onScrollOrResize, true);
+      window.removeEventListener('resize', this.onScrollOrResize);
     },
     select(option) {
       this.$emit('input', option.value);
@@ -109,6 +157,9 @@ export default {
     onOutsideClick(e) {
       if (!this.$refs.root.contains(e.target)) this.close();
     },
+    onScrollOrResize() {
+      this.calcDropdownStyle();
+    },
     onKeydown(e) {
       if (!this.open) {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -133,6 +184,8 @@ export default {
   },
   beforeDestroy() {
     document.removeEventListener('mousedown', this.onOutsideClick);
+    window.removeEventListener('scroll', this.onScrollOrResize, true);
+    window.removeEventListener('resize', this.onScrollOrResize);
   },
 };
 </script>
@@ -233,6 +286,17 @@ export default {
   padding: 4px;
 }
 
+.sky-select-dropdown-teleported {
+  position: fixed;
+  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;
+}
+
 /* Option */
 .sky-select-option {
   display: flex;

package/src/vue3/components/SkySelect.vue

@@ -21,34 +21,94 @@
       >
         {{ 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>
 
-    <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>
+    <template v-if="open">
+      <Teleport v-if="teleport" to="body">
+        <div
+          class="sky-select-dropdown 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>
-    </div>
+    </template>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onBeforeUnmount } from 'vue';
+import { ref, computed, onBeforeUnmount } from "vue";
 
 const props = defineProps({
   modelValue: {
@@ -60,7 +120,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   disabled: {
     type: Boolean,
@@ -70,24 +130,42 @@ 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 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 = {
+    position: "fixed",
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    zIndex: "var(--sky-select-dropdown-z-index, 9999)",
+  };
+}
+
 function toggle() {
   if (props.disabled) return;
   open.value ? close() : openDropdown();
@@ -95,17 +173,26 @@ function toggle() {
 
 function openDropdown() {
   open.value = true;
-  focusedIdx.value = normalizedOptions.value.findIndex((o) => o.value === props.modelValue);
-  document.addEventListener('mousedown', onOutsideClick);
+  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);
+  }
 }
 
 function close() {
   open.value = false;
-  document.removeEventListener('mousedown', onOutsideClick);
+  document.removeEventListener("mousedown", onOutsideClick);
+  window.removeEventListener("scroll", onScrollOrResize, true);
+  window.removeEventListener("resize", onScrollOrResize);
 }
 
 function select(option) {
-  emit('update:modelValue', option.value);
+  emit("update:modelValue", option.value);
   close();
 }
 
@@ -113,30 +200,40 @@ function onOutsideClick(e) {
   if (!root.value?.contains(e.target)) close();
 }
 
+function onScrollOrResize() {
+  calcDropdownStyle();
+}
+
 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);
+  document.removeEventListener("mousedown", onOutsideClick);
+  window.removeEventListener("scroll", onScrollOrResize, true);
+  window.removeEventListener("resize", onScrollOrResize);
 });
 </script>
 
@@ -236,6 +333,17 @@ onBeforeUnmount(() => {
   padding: 4px;
 }
 
+.sky-select-dropdown-teleported {
+  position: fixed;
+  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;
+}
+
 /* Option */
 .sky-select-option {
   display: flex;