@tekkare/auriga 0.1.44 → 0.1.46

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.44"
+  "version": "0.1.46"
 }

package/dist/runtime/components/argAdvancedSearchBar.vue

@@ -514,7 +514,7 @@ export default defineComponent({
   background: var(--pure-white);
   border: 1.5px solid var(--dividers);
   border-radius: 8px;
-  align-self: stretch;
+  width: calc(100% - 24px);
   height: 40px;
 }
 

package/dist/runtime/components/argBtn.vue

@@ -18,13 +18,19 @@
       @click="send()"
     >
       <span :class="{ oip_button_is_loading: loading }" class="oip_button_flex">
-        <span v-if="prefixIcon">
-          <arg-icon :name="prefixIcon" size="20" :color="getIconColor" />
-        </span>
+        <arg-icon
+          v-if="prefixIcon"
+          :name="prefixIcon"
+          size="20"
+          :color="getIconColor"
+        />
         <slot></slot>
-        <span v-if="suffixIcon">
-          <arg-icon :name="suffixIcon" size="20" :color="getIconColor" />
-        </span>
+        <arg-icon
+          v-if="suffixIcon"
+          :name="suffixIcon"
+          size="20"
+          :color="getIconColor"
+        />
       </span>
       <span class="oip_button_loading" v-if="loading">
         <div class="oip_button_spinner">

package/dist/runtime/components/argCheckbox.vue

@@ -143,7 +143,7 @@ export default defineComponent({
   font-size: 14px;
   line-height: 16px;
   height: 40px;
-  width: 228px;
+  width: 202px;
   cursor: pointer;
 }
 .filter_tooltip {

package/dist/runtime/components/argFilterCard.vue

@@ -120,8 +120,7 @@ export default defineComponent({
 }
 
 .full-width {
-  align-self: stretch;
-  flex-basis: 100%;
+  width: 100%;
 }
 
 .filter-icon {

package/dist/runtime/components/argHomeSelectedBlock.vue

@@ -23,7 +23,7 @@
         </div>
         <p class="theme_descr">{{ selected.description }}</p>
       </div>
-      <div>
+      <div class="selected_block_links">
         <div v-for="(item, index) in selected.links" :key="index">
           <arg-sub-menu
             v-if="item.subLinks"
@@ -115,4 +115,9 @@ export default defineComponent({
   font-weight: 400;
   line-height: 160%;
 }
+.selected_block_links {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
 </style>

package/dist/runtime/components/argMainLayout.vue

@@ -3,7 +3,11 @@
   <div :class="sidebarOpen ? 'arg_main_with_sidebar' : 'arg_main_no_sidebar'">
     <slot name="sidebar" />
     <div class="arg_main_layout_body">
-      <div class="arg_info" id="arg_info_section">
+      <div
+        class="arg_info"
+        :class="infoOpen ? 'arg_info_open' : 'arg_info_closed'"
+        id="arg_info_section"
+      >
         <slot name="infoBar" />
         <slot name="infoSection" />
       </div>
@@ -18,7 +22,7 @@
 import {
   onMounted,
   defineComponent,
-  onBeforeUpdate
+  onUpdated
 } from "vue";
 import argFooter from "./argFooter.vue";
 import argStyle from "./argStyle.vue";
@@ -29,6 +33,10 @@ export default defineComponent({
     sidebarOpen: {
       type: Boolean,
       default: true
+    },
+    infoOpen: {
+      type: Boolean,
+      default: false
     }
   },
   setup() {
@@ -38,7 +46,7 @@ export default defineComponent({
       window.addEventListener("popstate", adjustMarginForBody);
       window.addEventListener("click", adjustMarginForBody);
     });
-    onBeforeUpdate(() => {
+    onUpdated(() => {
       adjustMarginForBody();
     });
     function adjustMarginForBody() {
@@ -81,6 +89,12 @@ export default defineComponent({
 .arg_info {
   position: fixed;
   right: 8px;
-  z-index: 98;
+}
+
+.arg_info_open {
+  z-index: 99;
+}
+.arg_info_closed {
+  z-index: 95;
 }
 </style>

package/dist/runtime/components/argMainLayout.vue.d.ts

@@ -3,12 +3,21 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    infoOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     sidebarOpen: {
         type: BooleanConstructor;
         default: boolean;
     };
+    infoOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     sidebarOpen: boolean;
+    infoOpen: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/argMultipleSelect.vue.d.ts

@@ -1,10 +1,10 @@
 declare const _default: import("vue").DefineComponent<{
     element_table: {
         type: {
-            (arrayLength: number): any[];
-            (...items: any[]): any[];
-            new (arrayLength: number): any[];
-            new (...items: any[]): any[];
+            (arrayLength: number): (Object | String)[];
+            (...items: (Object | String)[]): (Object | String)[];
+            new (arrayLength: number): (Object | String)[];
+            new (...items: (Object | String)[]): (Object | String)[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];
@@ -143,10 +143,10 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onClose" | "changeElement" | "update:Selection" | "changeInputValue")[], "onClose" | "changeElement" | "update:Selection" | "changeInputValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     element_table: {
         type: {
-            (arrayLength: number): any[];
-            (...items: any[]): any[];
-            new (arrayLength: number): any[];
-            new (...items: any[]): any[];
+            (arrayLength: number): (Object | String)[];
+            (...items: (Object | String)[]): (Object | String)[];
+            new (arrayLength: number): (Object | String)[];
+            new (...items: (Object | String)[]): (Object | String)[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];

package/dist/runtime/components/argScopeChange.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="scope_change_display">
+    <arg-btn btn-style="primary-fill" @onClick="changeDisplay()">{{
+      getTitle
+    }}</arg-btn>
+    <div
+      :style="
+        isDisplay === false || scopes.length === 0 ? 'display : none' : ''
+      "
+      class="scope_select_dropdown_block"
+    >
+      <div class="oip_select_dropdown_selection_container">
+        <arg-btn
+          btn-style="primary-stroke"
+          class="my-4"
+          @onClick="newScope()"
+          prefix-icon="PlusCircle"
+          >{{ lang === "fr" ? "Nouveau scope" : "New scope" }}</arg-btn
+        >
+        <div
+          v-for="(element, index) of scopes"
+          :key="index"
+          class="oip_select_complex_selection_loop"
+          @click="selectScope(element)"
+        >
+          <arg-icon
+            :class="selectedScope?.id === element.id ? 'add' : ''"
+            :color="
+              selectedScope?.id === element.id
+                ? 'var(--primary)'
+                : 'var(--lavendar-grey)'
+            "
+            size="16"
+            :name="
+              selectedScope?.id === element.id ? 'CircleSelectFill' : 'Circle'
+            "
+          />
+          <div
+            :class="[
+              'oip_select_complex_selection_loop_name',
+              selectedScope?.id === element.id ? 'add' : 'del',
+            ]"
+          >
+            {{ element.title }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import argIcon from "./argIcon.vue";
+import argBtn from "./argBtn.vue";
+import {
+  onMounted,
+  ref,
+  computed,
+  watch,
+  defineComponent,
+  onUnmounted
+} from "vue";
+export default defineComponent({
+  name: "argScopeChange",
+  components: { argIcon, argBtn },
+  props: {
+    scopes: { type: Array, required: true },
+    active_scope: { type: Object, required: false, default: null },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    }
+  },
+  emits: ["changeScope", "update:Scope", "onNewScope"],
+  setup(props, { emit }) {
+    const isDisplay = ref(false);
+    const selectedScope = ref(null);
+    onMounted(() => {
+      if (props.active_scope !== null) {
+        selectedScope.value = props.active_scope;
+      }
+    });
+    watch(
+      () => props.scopes,
+      (new_scopes) => {
+        if (new_scopes !== null) {
+          selectedScope.value = new_scopes;
+        }
+      }
+    );
+    const getTitle = computed(() => {
+      if (props.scopes.length > 0) {
+        return props.lang === "en" ? "Change scope" : "Changer de scope";
+      } else
+        return props.lang === "en" ? "New scope" : "Nouveau scope";
+    });
+    function closeDropdown() {
+      isDisplay.value = false;
+      document?.removeEventListener("click", closeDropdown);
+    }
+    function selectScope(scope) {
+      selectedScope.value = scope;
+      emit("changeScope", scope);
+      emit("update:Scope", scope);
+    }
+    function changeDisplay() {
+      if (props.scopes.length === 0) {
+        emit("onNewScope");
+      } else {
+        if (isDisplay.value === true) {
+          isDisplay.value = !isDisplay.value;
+        } else {
+          isDisplay.value = !isDisplay.value;
+          setTimeout(() => {
+            document?.addEventListener("click", closeDropdown);
+          }, 100);
+        }
+      }
+    }
+    function newScope() {
+      emit("onNewScope");
+    }
+    onUnmounted(() => {
+      document?.removeEventListener("click", closeDropdown);
+    });
+    return {
+      isDisplay,
+      closeDropdown,
+      changeDisplay,
+      getTitle,
+      selectScope,
+      selectedScope,
+      newScope
+    };
+  }
+});
+</script>
+
+<style scoped>
+.scope_select_dropdown_block {
+  z-index: 99 !important;
+  margin-top: 15px;
+  position: absolute;
+  min-width: 100px;
+  max-height: 200px;
+  border: 1.5px solid var(--dividers);
+  background: var(--demi-fond);
+  border-radius: 12px;
+  box-shadow: var(--overlay-shadow);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  right: -16px;
+}
+
+.scope_change_display {
+  position: relative;
+}
+
+.oip_select_complex_selection_loop > svg.add {
+  color: var(--primary) !important;
+}
+.oip_select_complex_selection_loop > svg.disable,
+.oip_select_complex_selection_loop.disabled_option:hover svg {
+  color: var(--independence) !important;
+}
+.oip_select_complex_selection_loop:hover > svg.add {
+  color: var(--primary-hover) !important;
+}
+
+.oip_select_complex_selection_loop:hover svg {
+  color: var(--primary) !important;
+}
+.oip_select_complex_selection_loop .add {
+  font-weight: 700 !important;
+}
+.oip_select_complex_selection_loop:hover {
+  background: rgba(33, 118, 255, 0.05) !important;
+  border-radius: 4px !important;
+}
+.oip_select_complex_selection_loop {
+  padding: 2px 4px;
+}
+.oip_select_complex_selection_loop.disabled_option:hover {
+  background: transparent !important;
+}
+.oip_select_complex_selection_loop {
+  margin: 4px 0px !important;
+}
+svg.add {
+  flex-shrink: 0;
+}
+.my-4 {
+  margin: 4px 0px;
+}
+
+.full_width {
+  width: 100%;
+}
+</style>

package/dist/runtime/components/argScopeChange.vue.d.ts

@@ -0,0 +1,73 @@
+declare const _default: import("vue").DefineComponent<{
+    scopes: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    active_scope: {
+        type: ObjectConstructor;
+        required: false;
+        default: null;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    isDisplay: import("vue").Ref<boolean>;
+    closeDropdown: () => void;
+    changeDisplay: () => void;
+    getTitle: import("vue").ComputedRef<"Change scope" | "Changer de scope" | "New scope" | "Nouveau scope">;
+    selectScope: (scope: any) => void;
+    selectedScope: any;
+    newScope: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:Scope" | "changeScope" | "onNewScope")[], "update:Scope" | "changeScope" | "onNewScope", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    scopes: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    active_scope: {
+        type: ObjectConstructor;
+        required: false;
+        default: null;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    "onUpdate:Scope"?: ((...args: any[]) => any) | undefined;
+    onChangeScope?: ((...args: any[]) => any) | undefined;
+    onOnNewScope?: ((...args: any[]) => any) | undefined;
+}, {
+    lang: string;
+    active_scope: Record<string, any>;
+}, {}>;
+export default _default;

package/dist/runtime/components/argScopeModal.vue

@@ -220,6 +220,7 @@ export default defineComponent({
   width: 50%;
   flex: 1 1 0;
   display: flex;
+  align-self: stretch;
 }
 
 .arg_save_header > h1 {
@@ -276,6 +277,7 @@ textarea::placeholder {
   justify-content: center;
   white-space: wrap;
   text-align: center;
+  align-self: stretch;
 }
 
 .cursor-pointer {

package/dist/runtime/components/argSearchInput.vue

@@ -79,7 +79,7 @@ export default defineComponent({
   background: var(--pure-white);
   border: 1.5px solid var(--dividers);
   border-radius: 8px;
-  align-self: stretch;
+  width: calc(100% - 24px);
   margin: 5px 0px;
   min-height: 40px;
 }

package/dist/runtime/components/argSimpleLabel.vue

@@ -61,7 +61,7 @@ export default defineComponent({
 
 .oip_select_block {
   cursor: pointer;
-  width: 222px;
+  width: 202px;
   padding: 12px;
   display: flex;
   align-items: center;

package/dist/runtime/components/argStyle.vue

@@ -91,6 +91,7 @@ body {
   color: var(--independence);
   background: var(--background);
   margin: 0px;
+  text-wrap: pretty;
 }
 a {
   text-decoration: none;
@@ -707,6 +708,7 @@ button {
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  text-wrap: pretty;
 }
 .oip_button_loading {
   position: absolute;

package/dist/runtime/components/argSubMenu.vue

@@ -1,7 +1,18 @@
 <template>
   <div :class="sidebarOpen ? 'arg_sub_menu' : 'arg_sub_small'">
     <button class="arg_sub_menu_button" @click="openMenu = !openMenu">
-      <span v-show="sidebarOpen">{{ label }}</span>
+      <div class="oip_row v-center gap-4">
+        <arg-icon
+          v-if="icon !== null"
+          :name="icon"
+          size="12"
+          color="var(--cool-grey)"
+          thickness="30"
+          :class="[openMenu ? 'active_icon' : '']"
+        />
+        <arg-flag v-else-if="flagIso !== null" :iso="flagIso" emoji />
+        <span v-show="sidebarOpen">{{ label }}</span>
+      </div>
       <arg-tooltip
         :tooltip-text="label"
         :disable="sidebarOpen"
@@ -16,7 +27,7 @@
           :class="[
             'action_icon',
             sidebarOpen ? '' : 'icon_sb',
-            openMenu ? 'active_icon' : '',
+            openMenu ? 'active_icon rotate_icon' : '',
           ]"
         />
       </arg-tooltip>
@@ -38,7 +49,8 @@ export default defineComponent({
   components: { argIcon, argTooltip },
   props: {
     label: { type: String, required: true },
-    icon: { type: String },
+    icon: { type: String, default: null },
+    flagIso: { type: String, default: null },
     defaultCollapseState: { type: Boolean, default: true },
     sidebarOpen: { type: Boolean, default: true }
   },
@@ -106,7 +118,10 @@ export default defineComponent({
 }
 
 .active_icon {
-  transform: rotate(180deg);
   color: var(--primary) !important;
 }
+
+.rotate_icon {
+  transform: rotate(180deg);
+}
 </style>

package/dist/runtime/components/argSubMenu.vue.d.ts

@@ -5,6 +5,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     icon: {
         type: StringConstructor;
+        default: null;
+    };
+    flagIso: {
+        type: StringConstructor;
+        default: null;
     };
     defaultCollapseState: {
         type: BooleanConstructor;
@@ -23,6 +28,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     icon: {
         type: StringConstructor;
+        default: null;
+    };
+    flagIso: {
+        type: StringConstructor;
+        default: null;
     };
     defaultCollapseState: {
         type: BooleanConstructor;
@@ -33,7 +43,9 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
+    icon: string;
     sidebarOpen: boolean;
+    flagIso: string;
     defaultCollapseState: boolean;
 }, {}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",