@tekkare/auriga 0.1.8 → 0.1.10

package/dist/runtime/components/argMultipleSelect.vue

@@ -0,0 +1,797 @@
+<template>
+  <div>
+    <arg-style />
+    <!-- Simple select -->
+    <div class="oip_select_display">
+      <p class="oip_filter_label">{{ multiple_label }}</p>
+      <arg-simple-label
+        :disabled="disabled"
+        :show_amount="show_amount"
+        :amount_value="selected_items.length"
+        @click="changeDisplay()"
+        :class="isDisplay ? 'open' : ''"
+      >
+        <p
+          :class="[
+            show_amount === true ? 'oip_crop big' : 'oip_crop small',
+            (nested && selected_nested.length > 0) ||
+            (!nested && selected_items.length > 0)
+              ? ''
+              : 'oip_empty_select',
+          ]"
+        >
+          {{
+            (nested && selected_nested.length > 0) ||
+            (!nested && selected_items.length > 0)
+              ? getAllSelect
+              : emptyMsg
+          }}
+        </p>
+      </arg-simple-label>
+    </div>
+
+    <div
+      :style="isDisplay === false ? 'display : none' : ''"
+      class="oip_select_dropdown_block multiple"
+      @click.stop
+    >
+      <!--<div v-if="filter_placeholder" class="oip_select_multiple_title">{{ filter_placeholder }}</div>-->
+      <div v-if="search === true" class="oip_search_container">
+        <arg-icon size="20" name="MagnifyingGlass"></arg-icon>
+        <input
+          class="oip_search_name"
+          v-model="searchName"
+          @input="changeInput()"
+          placeholder="Search"
+        />
+      </div>
+      <!-- List -->
+      <div v-if="!nested" class="oip_select_dropdown_selection_container">
+        <div
+          v-if="show_all"
+          class="oip_select_complex_selection_loop"
+          @click="
+            selected_all || getOptions.length === selected_items.length
+              ? del_all()
+              : add_all()
+          "
+        >
+          <arg-icon
+            :class="
+              !selected_all && getOptions.length !== selected_items.length
+                ? 'del'
+                : 'add'
+            "
+            thickness="24"
+            size="16px"
+            :name="
+              selected_all || getOptions.length === selected_items.length
+                ? 'CheckSquareFill'
+                : 'Square'
+            "
+          ></arg-icon>
+          <div
+            :class="[
+              'oip_select_complex_selection_loop_name',
+              !selected_all && getOptions.length !== selected_items.length
+                ? 'del'
+                : 'add',
+            ]"
+          >
+            All
+          </div>
+        </div>
+        <div :class="show_all ? 'oip_select_multiple_left_margin' : ''">
+          <div v-if="multiple_columns" class="oip_row v-start gap-16">
+            <div v-for="(table, tabIndex) of filterName" :key="tabIndex">
+              <div
+                class="oip_select_complex_selection_loop multiple"
+                v-for="(element, index) of table"
+                :key="index"
+                :class="
+                  options_disable.includes(index + tabIndex * 7)
+                    ? 'disabled'
+                    : ''
+                "
+                @click="
+                  selected_items.includes(element)
+                    ? del_element(element, index + tabIndex * 7)
+                    : add_element(element, index + tabIndex * 7)
+                "
+              >
+                <arg-icon
+                  v-if="
+                    tabIndex === 0
+                      ? options_disable.includes(index)
+                      : options_disable.includes(index + tabIndex * 7)
+                  "
+                  name="MinusSquareDisable"
+                  size="16"
+                  color="var(--independence)"
+                  class="disable"
+                />
+                <arg-icon
+                  v-else
+                  :class="selected_items.includes(element) ? 'add' : ''"
+                  size="16px"
+                  thickness="24"
+                  :name="
+                    selected_items.includes(element)
+                      ? 'CheckSquareFill'
+                      : 'Square'
+                  "
+                ></arg-icon>
+                <div
+                  :class="[
+                    'oip_select_complex_selection_loop_name',
+                    selected_items.includes(element) ? 'add' : 'del',
+                  ]"
+                >
+                  {{ element }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else>
+            <div
+              class="oip_select_complex_selection_loop multiple"
+              v-for="(element, index) of filterName"
+              :key="index"
+              :class="options_disable.includes(index) ? 'disabled' : ''"
+              @click="
+                selected_items.includes(element)
+                  ? del_element(element, index)
+                  : add_element(element, index)
+              "
+            >
+              <arg-icon
+                v-if="options_disable.includes(index)"
+                name="MinusSquareDisable"
+                size="16"
+                color="var(--independence)"
+                class="disable"
+              />
+              <arg-icon
+                v-else
+                :class="selected_items.includes(element) ? 'add' : ''"
+                size="16px"
+                thickness="24"
+                :name="
+                  selected_items.includes(element)
+                    ? 'CheckSquareFill'
+                    : 'Square'
+                "
+              ></arg-icon>
+              <div
+                :class="[
+                  'oip_select_complex_selection_loop_name',
+                  selected_items.includes(element) ? 'add' : 'del',
+                  options_disable.includes(index) ? 'disabled' : '',
+                ]"
+              >
+                {{ element }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="oip_select_dropdown_selection_container">
+        <div
+          v-if="show_all"
+          class="oip_select_complex_selection_loop"
+          @click="
+            selected_all || getOptions.length === nestedSelectedLength
+              ? del_all()
+              : add_all()
+          "
+        >
+          <arg-icon
+            :class="
+              !selected_all && getOptions.length !== nestedSelectedLength
+                ? 'del'
+                : selected_all || getOptions.length === nestedSelectedLength
+                ? 'add'
+                : 'more'
+            "
+            thickness="24"
+            size="16px"
+            :name="
+              selected_all || getOptions.length === nestedSelectedLength
+                ? 'CheckSquareFill'
+                : 'Square'
+            "
+          ></arg-icon>
+          <div
+            :class="[
+              'oip_select_complex_selection_loop_name',
+              !selected_all && getOptions.length !== nestedSelectedLength
+                ? 'del'
+                : selected_all || getOptions.length === nestedSelectedLength
+                ? 'add'
+                : 'more',
+            ]"
+          >
+            All
+          </div>
+        </div>
+        <div
+          :class="[
+            show_all ? 'oip_select_multiple_left_margin cate_left_margin' : '',
+            multiple_columns ? 'cate_row' : 'cate_col',
+          ]"
+        >
+          <div v-for="(element, index) of filterNested" :key="index">
+            <div
+              class="oip_select_complex_selection_loop"
+              @click="
+                selectedCats.includes(index)
+                  ? del_all_cat(index)
+                  : add_all_cat(index)
+              "
+            >
+              <arg-icon
+                :class="
+                  !selectedCats.includes(index)
+                    ? 'del'
+                    : selectedCats.includes(index)
+                    ? 'add'
+                    : 'more'
+                "
+                thickness="24"
+                size="16px"
+                :name="
+                  selectedCats.includes(index) ? 'CheckSquareFill' : 'Square'
+                "
+              ></arg-icon>
+              <div
+                :class="[
+                  'oip_select_complex_selection_loop_name',
+                  !selectedCats.includes(index)
+                    ? 'del'
+                    : selectedCats.includes(index)
+                    ? 'add'
+                    : 'more',
+                ]"
+              >
+                {{ element.title }}
+              </div>
+            </div>
+            <div class="left_margin">
+              <div
+                class="oip_select_complex_selection_loop multiple"
+                v-for="(option, optIndex) of element.values"
+                :key="optIndex"
+                @click="
+                  nestedIncludes(option, index)
+                    ? del_nested_element(index, option)
+                    : add_nested_element(index, option)
+                "
+              >
+                <arg-icon
+                  :class="nestedIncludes(option, index) ? 'add' : ''"
+                  size="16px"
+                  thickness="24"
+                  :name="
+                    nestedIncludes(option, index) ? 'CheckSquareFill' : 'Square'
+                  "
+                ></arg-icon>
+                <div
+                  :class="[
+                    'oip_select_complex_selection_loop_name',
+                    nestedIncludes(option, index) ? 'add' : 'del',
+                  ]"
+                >
+                  {{ option }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import argIcon from "./argIcon.vue";
+import argSimpleLabel from "./argSimpleLabel.vue";
+import {
+  ref,
+  computed,
+  onBeforeMount,
+  watch,
+  defineComponent,
+  onUnmounted
+} from "vue";
+export default defineComponent({
+  name: "argMultipleSelect",
+  components: { argIcon, argSimpleLabel },
+  props: {
+    element_table: { type: Array, required: true },
+    nested: { type: Boolean, default: false },
+    search: { type: Boolean, default: true },
+    filter_placeholder: { type: String, required: false },
+    show_all: { type: Boolean, default: false },
+    default_select: { type: Array, required: false },
+    preselection_all: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    multiple_columns: { type: Boolean, default: false },
+    options_disable: { type: Array, default: () => [] },
+    show_amount: { type: Boolean, default: true },
+    emptyMsg: { type: String, default: "No selection" },
+    multiple_label: { type: String, required: true }
+  },
+  emits: ["changeElement", "update:Selection", "changeInputValue", "onClose"],
+  setup(props, { emit }) {
+    const selected_items = ref([]);
+    const selected_nested = ref([]);
+    const isDisplay = ref(false);
+    const searchName = ref(null);
+    const selected_all = ref(false);
+    const selectedCats = ref([]);
+    const valueFrom = ref([]);
+    const element_table_copy = ref([]);
+    watch(
+      () => props.element_table,
+      (new_element_table) => {
+        element_table_copy.value = new_element_table;
+        if (props.preselection_all) {
+          add_all();
+        } else if (props.default_select && props.default_select.length > 0) {
+          selected_items.value = props.default_select.map(
+            (index) => element_table_copy.value[index]
+          );
+        }
+      }
+    );
+    onBeforeMount(() => {
+      element_table_copy.value = props.element_table;
+      if (props.preselection_all) {
+        add_all();
+      } else if (props.default_select && props.default_select.length > 0) {
+        selected_items.value = props.default_select.map(
+          (index) => element_table_copy.value[index]
+        );
+      }
+      emit("changeElement", selected_items.value);
+      emit("update:Selection", selected_items.value);
+    });
+    const getAllSelect = computed(() => {
+      const fullSelect = props.nested ? selected_nested.value : selected_items.value;
+      let filterFill = ``;
+      for (let i = 0; i < fullSelect.length; i++) {
+        if (props.nested) {
+          for (let j = 0; j < fullSelect[i].elements.length; j++) {
+            if (i === 0) {
+              filterFill = fullSelect[i].elements[j];
+            } else {
+              filterFill = `${filterFill}, ${fullSelect[i].elements[j]}`;
+            }
+          }
+        } else {
+          if (i === 0) {
+            filterFill = fullSelect[i];
+          } else {
+            filterFill = `${filterFill}, ${fullSelect[i]}`;
+          }
+        }
+      }
+      return filterFill;
+    });
+    const getOptions = computed(() => {
+      if (props.nested) {
+        const optionsTable = [];
+        for (let i = 0; i < element_table_copy.value.length; i++) {
+          for (let j = 0; j < element_table_copy.value[i].values.length; j++) {
+            optionsTable.push(element_table_copy.value[i].values[j]);
+          }
+        }
+        return optionsTable;
+      } else {
+        if (props.options_disable.length > 0) {
+          return optionsWithoutDisabled.value;
+        } else
+          return element_table_copy.value;
+      }
+    });
+    const filterName = computed(() => {
+      if (!props.multiple_columns) {
+        if (searchName.value !== null) {
+          return element_table_copy.value.filter(
+            (element) => element.toLowerCase().includes(searchName.value.toLowerCase())
+          );
+        } else
+          return props.element_table;
+      } else {
+        let selectTable = [];
+        let finalTable = [];
+        if (searchName.value !== null) {
+          selectTable = [
+            ...new Set(
+              element_table_copy.value.filter(
+                (element) => element.toLowerCase().includes(searchName.value.toLowerCase())
+              )
+            )
+          ];
+          const chunkSize = 7;
+          for (let i = 0; i < selectTable.length; i += chunkSize) {
+            const chunk = selectTable.slice(i, i + chunkSize);
+            finalTable.push(chunk);
+          }
+          return finalTable;
+        } else {
+          const chunkSize = 7;
+          for (let i = 0; i < props.element_table.length; i += chunkSize) {
+            const chunk = props.element_table.slice(i, i + chunkSize);
+            finalTable.push(chunk);
+          }
+          return finalTable;
+        }
+      }
+    });
+    const filterNested = computed(() => {
+      if (searchName.value !== null || searchName.value && searchName.value.length === 0) {
+        return element_table_copy.value.filter(
+          (element) => element.values.includes(
+            searchName.value || searchName.value.toLowerCase()
+          )
+        );
+      } else
+        return props.element_table;
+    });
+    const optionsWithoutDisabled = computed(() => {
+      let optionsArray = [Number];
+      for (let i = 0; i < element_table_copy.value.length; i++) {
+        if (!props.options_disable.includes(i)) {
+          optionsArray.push(element_table_copy.value[i]);
+        }
+      }
+      return optionsArray;
+    });
+    const nestedSelectedLength = computed(() => {
+      let length = 0;
+      for (let i = 0; i < selected_nested.value.length; i++) {
+        length += selected_nested.value[i].elements.length;
+      }
+      return length;
+    });
+    function changeInput() {
+      emit("changeInputValue", searchName.value);
+    }
+    function nestedIncludes(option, index) {
+      if (selectedCats.value.includes(index)) {
+        return true;
+      } else if (selected_nested.value.filter(
+        (a) => a.cat === index && a.elements.includes(option)
+      ).length > 0) {
+        return true;
+      } else
+        return false;
+    }
+    function getNestedOptions(index) {
+      if (selected_all.value) {
+        return getOptions;
+      } else
+        return element_table_copy.value[index].values;
+    }
+    function selected_all_cats(index) {
+      let selected_cat = true;
+      for (let i = 0; i < element_table_copy.value[index].values.length; i++) {
+        if (!selected_items.value.includes(
+          element_table_copy.value[index].values[i]
+        )) {
+          selected_cat = false;
+        }
+      }
+      if (selected_all.value)
+        return selected_all.value;
+      else
+        return selected_cat;
+    }
+    function changeDisplay() {
+      if (props.disabled === false) {
+        if (isDisplay.value === true) {
+          emit("onClose");
+        } else {
+          isDisplay.value = !isDisplay.value;
+          setTimeout(() => {
+            document.addEventListener("click", close);
+          }, 100);
+        }
+      }
+    }
+    function close() {
+      if (isDisplay.value) {
+        emit("onClose");
+        isDisplay.value = false;
+        document.removeEventListener("click", close);
+      }
+    }
+    function add_element(element, index) {
+      if (!props.options_disable.includes(index)) {
+        selected_items.value.push(element);
+        emit("changeElement", selected_items.value);
+        emit("update:Selection", selected_items.value);
+      }
+    }
+    function del_element(element, index) {
+      selected_all.value = false;
+      if (!props.options_disable.includes(index)) {
+        selected_items.value.splice(selected_items.value.indexOf(element), 1);
+        emit("changeElement", selected_items.value);
+        emit("update:Selection", selected_items.value);
+      }
+    }
+    function add_nested_element(index, elem) {
+      if (selected_nested.value.length > 0) {
+        if (selected_nested.value.filter((a) => a.cat === index).length > 0) {
+          selected_nested.value[selected_nested.value.findIndex(
+            (a) => a.cat === index
+          )].elements.push(elem);
+        } else
+          selected_nested.value.push({
+            cat: index,
+            title: element_table_copy.value[index].title,
+            elements: [elem]
+          });
+      } else
+        selected_nested.value.push({
+          cat: index,
+          title: element_table_copy.value[index].title,
+          elements: [elem]
+        });
+      emit("changeElement", selected_nested.value);
+      emit("update:Selection", selected_nested.value);
+    }
+    function del_nested_elements(index, elem) {
+      selected_all.value = false;
+      if (selectedCats.value.includes(index)) {
+        selectedCats.value.splice(
+          selectedCats.value.findIndex((a) => a === index),
+          1
+        );
+      }
+      selected_nested.value[selected_nested.value.findIndex((a) => a.cat === index)].elements.splice(
+        selected_nested.value[selected_nested.value.findIndex(
+          (a) => a.cat === index
+        )].elements.findIndex((a) => a === elem),
+        1
+      );
+      if (selected_nested.value.findIndex(
+        (a) => a.cat === index
+      ) !== -1) {
+        if (selected_nested.value[selected_nested.value.findIndex(
+          (a) => a.cat === index
+        )].elements.length === 0) {
+          selected_nested.value.splice(
+            selected_nested.value.findIndex(
+              (a) => a.cat === index
+            ),
+            1
+          );
+        }
+      }
+      emit("changeElement", selected_nested.value);
+      emit("update:Selection", selected_nested.value);
+    }
+    function add_all() {
+      selected_all.value = true;
+      selected_items.value = [];
+      selected_nested.value = [];
+      if (props.nested) {
+        for (let i = 0; i < element_table_copy.value.length; i++) {
+          selected_nested.value.push({
+            cat: i,
+            title: element_table_copy.value[i].title,
+            elements: []
+          });
+          for (let j = 0; j < element_table_copy.value[i].values.length; j++) {
+            selected_nested.value[i].elements.push(
+              element_table_copy.value[i].values[j]
+            );
+          }
+          selectedCats.value.push(i);
+        }
+      } else {
+        for (let i = 0; i < element_table_copy.value.length; i++) {
+          if (!props.options_disable.includes(i)) {
+            selected_items.value.push(element_table_copy.value[i]);
+          }
+        }
+      }
+      emit(
+        "changeElement",
+        props.nested ? selected_nested.value : selected_items.value
+      );
+      emit(
+        "update:Selection",
+        props.nested ? selected_nested.value : selected_items.value
+      );
+    }
+    function add_all_cat(index) {
+      selectedCats.value.push(index);
+      if (selected_nested.value.filter((f) => f.cat === index).length === 0) {
+        selected_nested.value.push({
+          cat: index,
+          title: element_table.value[index].title,
+          elements: element_table_copy.value[index].values
+        });
+      } else
+        selected_nested.value[selected_nested.value.findIndex(
+          (f) => f.cat === index
+        )].elements = element_table_copy.value[index].values;
+      emit("changeElement", selected_nested.value);
+      emit("update:Selection", selected_nested.value);
+    }
+    function del_all_cat(index) {
+      selected_all.value = false;
+      if (selectedCats.value.includes(index)) {
+        selectedCats.value.splice(selectedCats.value.indexOf(index), 1);
+      }
+      for (let i = 0; i < selected_nested.value.filter((f) => f.cat === index).length; i++) {
+        selected_nested.value.splice(
+          selected_nested.value.findIndex(
+            (f) => f.cat === index
+          ),
+          1
+        );
+      }
+      emit("changeElement", selected_nested.value);
+      emit("update:Selection", selected_nested.value);
+    }
+    function del_all() {
+      selected_all.value = false;
+      selected_items.value = [];
+      selected_nested.value = [];
+      selectedCats.value = [];
+      emit("changeElement", selected_items.value);
+      emit("update:Selection", selected_items.value);
+    }
+    onUnmounted(() => {
+      document.removeEventListener("click", close);
+    });
+    return {
+      del_all,
+      del_all_cat,
+      add_all_cat,
+      add_all,
+      del_nested_elements,
+      add_nested_element,
+      del_element,
+      add_element,
+      close,
+      changeDisplay,
+      selected_all_cats,
+      getNestedOptions,
+      nestedIncludes,
+      changeInput,
+      nestedSelectedLength,
+      optionsWithoutDisabled,
+      filterNested,
+      filterName,
+      getOptions,
+      getAllSelect,
+      isDisplay,
+      searchName,
+      selected_items,
+      selected_nested,
+      selected_all,
+      selectedCats,
+      valueFrom
+    };
+  }
+});
+</script>
+
+<style>
+.oip_select_complex_selection_loop > svg {
+  color: var(--lavendar-grey) !important;
+}
+
+.oip_select_dropdown_block.multiple {
+  min-width: 225px;
+  overflow-y: auto;
+}
+
+.oip_select_complex_selection_loop.multiple {
+  padding-left: 7px;
+}
+
+.oip_select_multiple_left_margin {
+  margin-left: 7px;
+  border-left: 1px solid var(--more);
+}
+
+/*.oip_select_complex_selection_loop>svg.more>* {
+  color: var(--cool-grey) !important;
+  fill: var(--cool-grey) !important;
+}
+
+ .oip_select_complex_selection_loop>svg.add>* {
+  fill: var(--accent) !important;
+  color: var(--pure-white) !important;
+  stroke-width: 0;
+} */
+
+.relative {
+  position: relative;
+}
+</style>
+<style scoped>
+.oip_select_complex_selection_loop > svg.add {
+  width: 16px !important;
+  height: 16px !important;
+}
+.oip_select_complex_selection_loop:hover > svg {
+  color: var(--primary) !important;
+}
+.oip_select_complex_selection_loop > svg.disable {
+  color: var(--independence) !important;
+}
+.oip_select_complex_selection_loop > svg.disable {
+  color: var(--independence) !important;
+}
+.oip_select_complex_selection_loop > .add {
+  font-weight: 700 !important;
+}
+.oip_select_complex_selection_loop:hover > svg.add {
+  color: var(--primary-hover2) !important;
+}
+.oip_select_complex_selection_loop > svg.add {
+  color: var(--primary) !important;
+  fill: var(--primary) !important;
+}
+.oip_select_multiple_title {
+  margin-bottom: 8px;
+}
+.disabled {
+  color: var(--lavendar-grey);
+}
+.oip_select_complex_selection_loop:hover {
+  background: rgba(33, 118, 255, 0.05);
+  border-radius: 4px;
+}
+.oip_select_complex_selection_loop.disabled:hover {
+  background: transparent !important;
+  cursor: initial;
+}
+.oip_select_complex_selection_loop {
+  padding: 2px 4px;
+}
+.oip_select_complex_selection_loop.multiple {
+  margin-left: 5px;
+}
+
+.left_margin {
+  margin-left: 7px;
+  border-left: 1px solid var(--more);
+}
+
+.cate_left_margin {
+  padding-left: 12px !important;
+}
+
+.cate_row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+}
+.cate_col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+.oip_crop {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.oip_crop.big {
+  width: 85% !important;
+}
+.oip_crop.small {
+  width: 98% !important;
+}
+</style>