@tekkare/auriga 0.1.0 → 0.1.3

package/dist/runtime/components/argComplexSelect.vue

@@ -4,7 +4,7 @@
     <arg-simple-label
       :disabled="disabled"
       id="simple-select-complex"
-      @click="changeDisplay()"
+      @click.stop="changeDisplay()"
       :class="isDisplay ? 'open' : ''"
     >
       <slot></slot>
@@ -151,100 +151,50 @@
   </div>
 </template>
 <script>
-export default {
-  name: "argComplexSelect"
-};
-</script>
-<script setup lang="ts">
-import { ref, computed, defineProps, defineEmits, watch } from "vue";
-import argIcon from "./argIcon.vue";
 import argSimpleLabel from "./argSimpleLabel.vue";
 import argBtn from "./argBtn.vue";
-
-const props = defineProps({
-  element_table: { type: Array<string>, required: true },
-  search_placeholder: { type: String, default: "Search" },
-  need_apply: { type: Boolean, default: false },
-  select_placeholder: { type: String, required: false },
-  smart_selection_table: { type: Array, required: false },
-  return_value: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  already_selected: {
-    type: Array<string>,
-    default: () => [],
+import argIcon from "./argIcon.vue";
+import {
+  ref,
+  computed,
+  watch,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argComplexSelect",
+  components: { argSimpleLabel, argBtn, argIcon },
+  props: {
+    element_table: { type: Array, required: true },
+    search_placeholder: { type: String, default: "Search" },
+    need_apply: { type: Boolean, default: false },
+    select_placeholder: { type: String, required: false },
+    smart_selection_table: { type: Array, required: false },
+    return_value: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    already_selected: {
+      type: Array,
+      default: () => []
+    },
+    show_select_all: { type: Boolean, default: false },
+    max_result: { type: Number, default: 500 }
   },
-  show_select_all: { type: Boolean, default: false },
-  max_result: { type: Number, default: 500 },
-});
-
-const add_table = ref([""]);
-const del_table = ref([""]);
-const isDisplay = ref(false);
-const save_table = ref({ add: [""], del: [""] });
-const smart_selection_selected = ref();
-const searchNameAdd = ref("");
-const searchNameDel = ref("");
-const uid = ref(0);
-const hoverAdd = ref(null);
-const hoverRemove = ref(null);
-
-const emit = defineEmits([
-  "changeElement",
-  "changeAddInputValue",
-  "update:Value",
-]);
-
-del_table.value = Object.assign([], [...new Set(props.already_selected)]);
-add_table.value = Object.assign(
-  [],
-  [...new Set(props.element_table)].filter(
-    (item: string) => !del_table.value.includes(item)
-  )
-);
-save_table.value.add = Object.assign(
-  [],
-  [...new Set(props.element_table)].filter(
-    (item) => !del_table.value.includes(item)
-  )
-);
-uid.value = Math.floor(Math.random() * (100 - 1) + 1);
-
-if (props.already_selected.length > 0) {
-  if (!props.need_apply) {
-    apply_function();
-  }
-}
-
-watch(
-  () => props.element_table,
-  (new_element_table: string[]) => {
+  emits: ["changeElement", "changeAddInputValue", "update:Value"],
+  setup(props, { emit }) {
+    const add_table = ref([""]);
+    const del_table = ref([""]);
+    const isDisplay = ref(false);
+    const save_table = ref({ add: [""], del: [""] });
+    const smart_selection_selected = ref();
+    const searchNameAdd = ref("");
+    const searchNameDel = ref("");
+    const uid = ref(0);
+    const hoverAdd = ref(null);
+    const hoverRemove = ref(null);
     del_table.value = Object.assign([], [...new Set(props.already_selected)]);
-    add_table.value = Object.assign(
-      [],
-      [...new Set(new_element_table)].filter(
-        (item: string) => !del_table.value.includes(item)
-      )
-    );
-    save_table.value.add = Object.assign(
-      [],
-      [...new Set(new_element_table)].filter(
-        (item) => !del_table.value.includes(item)
-      )
-    );
-    if (!props.need_apply) {
-      apply_function();
-    }
-  }
-);
-
-watch(
-  () => props.already_selected,
-  (new_selected: string[]) => {
-    del_table.value = Object.assign([], [...new Set(new_selected)]);
     add_table.value = Object.assign(
       [],
       [...new Set(props.element_table)].filter(
-        (item: string) => !del_table.value.includes(item)
+        (item) => !del_table.value.includes(item)
       )
     );
     save_table.value.add = Object.assign(
@@ -253,182 +203,231 @@ watch(
         (item) => !del_table.value.includes(item)
       )
     );
-    if (!props.need_apply) {
-      apply_function();
+    uid.value = Math.floor(Math.random() * (100 - 1) + 1);
+    if (props.already_selected.length > 0) {
+      if (!props.need_apply) {
+        apply_function();
+      }
     }
-  }
-);
-
-const filterNameAdd = computed(() => {
-  if (searchNameAdd.value !== null) {
-    return add_table.value
-      .filter((element) =>
-        element.toLowerCase().includes(searchNameAdd.value.toLowerCase())
-      )
-      .slice(0, props.max_result);
-  } else return add_table.value.slice(0, props.max_result);
-});
-const filterNameDel = computed(() => {
-  if (searchNameDel.value !== null) {
-    return del_table.value.filter((element) =>
-      element.toLowerCase().includes(searchNameAdd.value.toLowerCase())
+    watch(
+      () => props.element_table,
+      (new_element_table) => {
+        del_table.value = Object.assign(
+          [],
+          [...new Set(props.already_selected)]
+        );
+        add_table.value = Object.assign(
+          [],
+          [...new Set(new_element_table)].filter(
+            (item) => !del_table.value.includes(item)
+          )
+        );
+        save_table.value.add = Object.assign(
+          [],
+          [...new Set(new_element_table)].filter(
+            (item) => !del_table.value.includes(item)
+          )
+        );
+        if (!props.need_apply) {
+          apply_function();
+        }
+      }
     );
-  } else return del_table.value;
-});
-
-function changeInput() {
-  emit("changeAddInputValue", searchNameAdd);
-}
-
-function isInViewport(el: HTMLElement) {
-  const rect = el.getBoundingClientRect();
-  return (
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  );
-}
-
-function changeDisplay() {
-  if (props.disabled === false) {
-    if (isDisplay.value === true) {
-      isDisplay.value = !isDisplay.value;
-    } else {
-      isDisplay.value = !isDisplay.value;
-      setTimeout(() => {
-        document?.addEventListener("click", close);
-      }, 100);
+    watch(
+      () => props.already_selected,
+      (new_selected) => {
+        del_table.value = Object.assign([], [...new Set(new_selected)]);
+        add_table.value = Object.assign(
+          [],
+          [...new Set(props.element_table)].filter(
+            (item) => !del_table.value.includes(item)
+          )
+        );
+        save_table.value.add = Object.assign(
+          [],
+          [...new Set(props.element_table)].filter(
+            (item) => !del_table.value.includes(item)
+          )
+        );
+        if (!props.need_apply) {
+          apply_function();
+        }
+      }
+    );
+    const filterNameAdd = computed(() => {
+      if (searchNameAdd.value !== null) {
+        return add_table.value.filter(
+          (element) => element.toLowerCase().includes(searchNameAdd.value.toLowerCase())
+        ).slice(0, props.max_result);
+      } else
+        return add_table.value.slice(0, props.max_result);
+    });
+    const filterNameDel = computed(() => {
+      if (searchNameDel.value !== null) {
+        return del_table.value.filter(
+          (element) => element.toLowerCase().includes(searchNameAdd.value.toLowerCase())
+        );
+      } else
+        return del_table.value;
+    });
+    function changeInput() {
+      emit("changeAddInputValue", searchNameAdd);
     }
-    const elem = document?.getElementById("select_complex");
-    const simpleElem = document?.getElementById("simple_select_complex");
-    if (elem !== null && simpleElem !== null) {
-      elem.style.display = "";
-      elem.style.left = "";
-      const bounding = elem.getBoundingClientRect();
-      elem.style.left = !isInViewport(elem)
-        ? `${
-            simpleElem.getBoundingClientRect().right +
-            window.scrollX -
-            bounding.width
-          }px`
-        : "";
+    function isInViewport(el) {
+      const rect = el.getBoundingClientRect();
+      return rect.right <= (window.innerWidth || document.documentElement.clientWidth);
     }
-  }
-}
-function close() {
-  if (isDisplay.value === true) {
-    isDisplay.value = false;
-    document.removeEventListener("click", close);
-  }
-}
-
-function add_element(element: string) {
-  smart_selection_selected.value = undefined;
-  del_table.value.push(element);
-  add_table.value.splice(add_table.value.indexOf(element), 1);
-  if (!props.need_apply) {
-    apply_function();
-  }
-}
-
-function del_element(element: string) {
-  smart_selection_selected.value = undefined;
-  add_table.value.push(element);
-  del_table.value.splice(del_table.value.indexOf(element, 1));
-  if (!props.need_apply) {
-    apply_function();
-  }
-}
-
-function add_all_element() {
-  smart_selection_selected.value = undefined;
-  del_table.value = Object.assign([], [...new Set(props.element_table)]);
-  add_table.value = [];
-  if (!props.need_apply) {
-    apply_function();
-  }
-}
-
-function del_all_element() {
-  smart_selection_selected.value = undefined;
-  add_table.value = Object.assign([], [...new Set(props.element_table)]);
-  del_table.value = [];
-  if (!props.need_apply) {
-    apply_function();
-  }
-}
-
-function apply_function() {
-  change_save_table();
-  if (!props.return_value) {
-    emit(
-      "changeElement",
-      del_table.value.map((elem) => props.element_table.indexOf(elem))
-    );
-    emit(
-      "update:Value",
-      del_table.value.map((elem) => props.element_table.indexOf(elem))
-    );
-  } else {
-    emit(
-      "changeElement",
-      del_table.value.map((elem) => elem)
-    );
-    emit(
-      "update:Value",
-      del_table.value.map((elem) => elem)
-    );
-  }
-  if (props.need_apply) {
-    close();
-  }
-}
-
-function smart_selection_select_item(selected: any) {
-  if (props.smart_selection_table !== selected) {
-    del_all_element();
-    selected.item.forEach((index: string | number) => {
-      if (typeof index == "string") {
-        if (
-          typeof props.element_table[props.element_table.indexOf(index)] !==
-          "undefined"
-        ) {
-          del_table.value.push(
-            props.element_table[props.element_table.indexOf(index)]
-          );
-          add_table.value.splice(
-            add_table.value.indexOf(
-              props.element_table[props.element_table.indexOf(index)]
-            ),
-            1
-          );
+    function changeDisplay() {
+      if (props.disabled === false) {
+        isDisplay.value = !isDisplay.value;
+        if (isDisplay.value === true) {
+          setTimeout(() => {
+            document?.addEventListener("click", close);
+          }, 100);
         }
-      } else if (typeof index === "number") {
-        if (typeof props.element_table[index] !== "undefined") {
-          del_table.value.push(props.element_table[index]);
-          add_table.value.splice(
-            add_table.value.indexOf(props.element_table[index]),
-            1
-          );
+        const elem = document?.getElementById("select_complex");
+        const simpleElem = document?.getElementById("simple_select_complex");
+        if (elem !== null && simpleElem !== null) {
+          elem.style.display = "";
+          elem.style.left = "";
+          const bounding = elem.getBoundingClientRect();
+          elem.style.left = !isInViewport(elem) ? `${simpleElem.getBoundingClientRect().right + window.scrollX - bounding.width}px` : "";
         }
       }
-    });
-    smart_selection_selected.value = selected;
-  }
-  if (!props.need_apply) {
-    apply_function();
+    }
+    function close() {
+      if (isDisplay.value === true) {
+        isDisplay.value = false;
+        document?.removeEventListener("click", close);
+      }
+    }
+    function add_element(element) {
+      smart_selection_selected.value = void 0;
+      del_table.value.push(element);
+      add_table.value.splice(add_table.value.indexOf(element), 1);
+      if (!props.need_apply) {
+        apply_function();
+      }
+    }
+    function del_element(element) {
+      smart_selection_selected.value = void 0;
+      add_table.value.push(element);
+      del_table.value.splice(del_table.value.indexOf(element, 1));
+      if (!props.need_apply) {
+        apply_function();
+      }
+    }
+    function add_all_element() {
+      smart_selection_selected.value = void 0;
+      del_table.value = Object.assign([], [...new Set(props.element_table)]);
+      add_table.value = [];
+      if (!props.need_apply) {
+        apply_function();
+      }
+    }
+    function del_all_element() {
+      smart_selection_selected.value = void 0;
+      add_table.value = Object.assign([], [...new Set(props.element_table)]);
+      del_table.value = [];
+      if (!props.need_apply) {
+        apply_function();
+      }
+    }
+    function apply_function() {
+      change_save_table();
+      if (!props.return_value) {
+        emit(
+          "changeElement",
+          del_table.value.map((elem) => props.element_table.indexOf(elem))
+        );
+        emit(
+          "update:Value",
+          del_table.value.map((elem) => props.element_table.indexOf(elem))
+        );
+      } else {
+        emit(
+          "changeElement",
+          del_table.value.map((elem) => elem)
+        );
+        emit(
+          "update:Value",
+          del_table.value.map((elem) => elem)
+        );
+      }
+      if (props.need_apply) {
+        close();
+      }
+    }
+    function smart_selection_select_item(selected) {
+      if (props.smart_selection_table !== selected) {
+        del_all_element();
+        selected.item.forEach((index) => {
+          if (typeof index == "string") {
+            if (typeof props.element_table[props.element_table.indexOf(index)] !== "undefined") {
+              del_table.value.push(
+                props.element_table[props.element_table.indexOf(index)]
+              );
+              add_table.value.splice(
+                add_table.value.indexOf(
+                  props.element_table[props.element_table.indexOf(index)]
+                ),
+                1
+              );
+            }
+          } else if (typeof index === "number") {
+            if (typeof props.element_table[index] !== "undefined") {
+              del_table.value.push(props.element_table[index]);
+              add_table.value.splice(
+                add_table.value.indexOf(props.element_table[index]),
+                1
+              );
+            }
+          }
+        });
+        smart_selection_selected.value = selected;
+      }
+      if (!props.need_apply) {
+        apply_function();
+      }
+    }
+    function cancel_function() {
+      add_table.value = save_table.value.add;
+      del_table.value = save_table.value.del;
+      close();
+    }
+    function change_save_table() {
+      save_table.value = { add: [], del: [] };
+      save_table.value.add = add_table.value;
+      save_table.value.del = del_table.value;
+    }
+    return {
+      add_table,
+      del_table,
+      isDisplay,
+      save_table,
+      smart_selection_selected,
+      searchNameAdd,
+      searchNameDel,
+      uid,
+      hoverAdd,
+      hoverRemove,
+      filterNameAdd,
+      filterNameDel,
+      changeInput,
+      isInViewport,
+      changeDisplay,
+      close,
+      add_element,
+      del_element,
+      add_all_element,
+      del_all_element,
+      apply_function,
+      smart_selection_select_item,
+      cancel_function,
+      change_save_table
+    };
   }
-}
-
-function cancel_function() {
-  add_table.value = save_table.value.add;
-  del_table.value = save_table.value.del;
-  close();
-}
-
-function change_save_table() {
-  save_table.value = { add: [], del: [] };
-  save_table.value.add = add_table.value;
-  save_table.value.del = del_table.value;
-}
+});
 </script>
 
 <style scoped>