@tekkare/auriga 0.1.25 → 0.1.26

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.25"
+  "version": "0.1.26"
 }

package/dist/runtime/components/argBtn.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div :class="fullWidth ? 'full_width' : ''">
     <span
       v-if="onlyIcon === false"
       :class="
-        `oip_${btnStyle}_button oip_btn ` +
-        [becomeSmall === true ? 'prmt_button_big' : '']
+        `oip_${btnStyle}_button oip_btn oip_btn_${size} ` +
+        [becomeSmall === true ? 'prmt_button_big ' : ''] +
+        [fullWidth === true ? 'oip_full_btn' : '']
       "
       @click="send()"
     >
@@ -53,7 +54,6 @@
 
 <script>
 import argIcon from "./argIcon.vue";
-import argStyle from "./argStyle.vue";
 import {
   ref,
   computed,
@@ -61,7 +61,7 @@ import {
 } from "vue";
 export default defineComponent({
   name: "argBtn",
-  components: { argIcon, argStyle },
+  components: { argIcon },
   props: {
     btnStyle: { type: String, default: "primary" },
     becomeSmall: { type: Boolean, default: true },
@@ -69,7 +69,15 @@ export default defineComponent({
     onlyIcon: { type: Boolean, default: false },
     prefixIcon: { type: String, default: null },
     suffixIcon: { type: String, default: null },
-    loading: { type: Boolean, default: false }
+    loading: { type: Boolean, default: false },
+    fullWidth: { type: Boolean, default: false },
+    size: {
+      type: String,
+      default: "s",
+      validator: (value) => {
+        return ["s", "m"].includes(value);
+      }
+    }
   },
   emits: ["onClick"],
   setup(props, { emit }) {
@@ -113,4 +121,8 @@ export default defineComponent({
     display: none !important;
   }
 }
+
+.full_width {
+  width: 100%;
+}
 </style>

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

@@ -27,6 +27,15 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }, {
     getIconColor: import("vue").ComputedRef<string>;
     send: () => void;
@@ -59,6 +68,15 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & {
     onOnClick?: ((...args: any[]) => any) | undefined;
 }, {
@@ -69,5 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     prefixIcon: string;
     suffixIcon: string;
     loading: boolean;
+    fullWidth: boolean;
+    size: string;
 }, {}>;
 export default _default;

package/dist/runtime/components/argDropdownSelect.vue

@@ -67,7 +67,7 @@
       </div>
       <div v-else class="oip_select_dropdown_selection_container">
         <div
-          v-for="(element, index) of filterName()"
+          v-for="(element, index) of filterName"
           :key="index"
           class="oip_select_complex_selection_loop"
           :class="values_disabled.includes(index) ? 'disabled_option' : ''"
@@ -191,6 +191,7 @@ export default defineComponent({
     watch(
       () => props.element_table,
       (new_element_table) => {
+        table_values.value = new_element_table;
         if (props.watch_default_change) {
           selected_item.value = new_element_table[props.default_select];
           selected_number.value = props.default_select;
@@ -265,14 +266,14 @@ export default defineComponent({
       isDisplay.value = false;
       document?.removeEventListener("click", closeDropdown);
     }
-    function filterName() {
+    const filterName = computed(() => {
       if (searchName.value !== null) {
-        return props.element_table.filter(
+        return table_values.value.filter(
           (element) => element.toLowerCase().includes(searchName.value.toLowerCase())
         );
       }
-      return props.element_table;
-    }
+      return table_values.value;
+    });
     function changeDisplay() {
       if (props.disabled === false) {
         if (isDisplay.value === true) {

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

@@ -98,7 +98,7 @@ declare const _default: import("vue").DefineComponent<{
     checkActiveEllipsis: () => void;
     add_element: (element: string, index: number) => void;
     closeDropdown: () => void;
-    filterName: () => string[];
+    filterName: import("vue").ComputedRef<string[]>;
     changeDisplay: () => void;
     changeInput: () => void;
     getEmptyMsg: import("vue").ComputedRef<string>;

package/dist/runtime/components/argNoSelectedScope.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="arg_no_scope_display">
+    <div class="arg_no_selected_scope">
+      <div class="icon_square">
+        <arg-icon name="CrosshairSimple" size="32" />
+      </div>
+      <div class="arg_no_scope_text">
+        {{ getNoScopeMsg }}
+      </div>
+      <div v-if="scopeArray.length > 0" class="arg_scopes_select">
+        <div class="oip-row v-center justify-between">
+          <p class="args_select_title">
+            {{
+              lang === "fr"
+                ? "Appliquer un scope existant"
+                : "Apply an existing scope"
+            }}
+          </p>
+          <!-- Manage Scopes -->
+        </div>
+        <arg-radio-buttons
+          dir="column"
+          :elements="scopeArray"
+          :return_value="true"
+          v-model:Selection="selectedScope"
+        />
+      </div>
+      <arg-btn
+        v-if="scopeArray.length > 0"
+        :btn-style="selectedScope !== null ? 'primary-fill' : 'disable'"
+        size="m"
+        full-width
+        @onClick="selectScope"
+        >{{ lang === "fr" ? "Appliquer le scope" : "Apply scope" }}</arg-btn
+      >
+      <div class="oip_row v-center gap-8 full-width">
+        <div class="scope_sep" />
+        <p class="scope_sep_text">or</p>
+        <div class="scope_sep" />
+      </div>
+      <arg-btn
+        v-if="scopeArray.length > 0"
+        btn-style="primary-stroke"
+        size="m"
+        full-width
+        @onClick="createNewScope"
+        >{{ lang === "fr" ? "+ Nouveau scope" : "+ New scope" }}</arg-btn
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ref,
+  computed,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+import argRadioButtons from "./argRadioButtons.vue";
+export default defineComponent({
+  name: "argNoSelectedScope",
+  components: { argIcon, argRadioButtons },
+  props: {
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    },
+    scopeArray: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["onSelectScope", "update:Scope", "onCreateScope"],
+  setup(props, { emit }) {
+    const selectedScope = ref(null);
+    const getNoScopeMsg = computed(() => {
+      if (props.lang === "en") {
+        return `You need to select your scope to view any results or data. Please choose one of the options below to proceed.`;
+      } else
+        return `Vous devez s\xE9lectionner votre scope pour voir les r\xE9sultats ou donn\xE9es. Veuillez choisir une des options ci-dessous pour continuer`;
+    });
+    function selectScope() {
+      emit("onSelectScope", selectedScope.value);
+      emit("update:Scope", selectedScope.value);
+    }
+    function createNewScope() {
+      emit("onCreateScope");
+    }
+    return { getNoScopeMsg, selectedScope, selectScope, createNewScope };
+  }
+});
+</script>
+
+<style scoped>
+.arg_no_selected_scope {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  max-width: 382px;
+}
+
+.icon_square {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dividers);
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.arg_no_scope_text {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  color: var(--cool-grey);
+}
+
+.arg_no_scope_display {
+  height: 100%;
+  width: 100%;
+  margin-top: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.arg_scopes_select {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.args_select_title {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.scope_sep {
+  height: 1px;
+  background-color: var(--wild-blue-yonder);
+  flex: 1 1 0;
+  min-width: 40%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.scope_sep_text {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: var(--wild-blue-yonder);
+}
+</style>

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

@@ -0,0 +1,34 @@
+declare const _default: import("vue").DefineComponent<{
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    scopeArray: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}, {
+    getNoScopeMsg: import("vue").ComputedRef<"You need to select your scope to view any results or data. Please choose one of the options below to proceed." | "Vous devez sélectionner votre scope pour voir les résultats ou données. Veuillez choisir une des options ci-dessous pour continuer">;
+    selectedScope: any;
+    selectScope: () => void;
+    createNewScope: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onSelectScope" | "update:Scope" | "onCreateScope")[], "onSelectScope" | "update:Scope" | "onCreateScope", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    scopeArray: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & {
+    onOnSelectScope?: ((...args: any[]) => any) | undefined;
+    "onUpdate:Scope"?: ((...args: any[]) => any) | undefined;
+    onOnCreateScope?: ((...args: any[]) => any) | undefined;
+}, {
+    lang: string;
+    scopeArray: unknown[];
+}, {}>;
+export default _default;

package/dist/runtime/components/argRadioButtons.vue

@@ -3,7 +3,7 @@
     <div
       v-for="(radio, index) in elements"
       :key="index"
-      class="oip_row v-center gap-4"
+      class="oip_row v-center gap-4 radio_item"
       :class="selectedRadio === index + 1 ? 'selected-radio' : 'display-radio'"
       @click="selectRadio(index + 1, radio)"
     >
@@ -37,7 +37,7 @@ export default defineComponent({
     },
     defaultSelect: {
       type: Number,
-      default: 1
+      default: null
     },
     returnValue: {
       type: Boolean,
@@ -50,7 +50,7 @@ export default defineComponent({
   },
   emits: ["changeElement", "update:Selection"],
   setup(props, { emit }) {
-    const selectedRadio = ref(1);
+    const selectedRadio = ref(null);
     onMounted(() => {
       if (typeof props.defaultSelect === "number") {
         selectedRadio.value = props.defaultSelect;
@@ -134,4 +134,8 @@ export default defineComponent({
   align-items: flex-start;
   gap: 8px;
 }
+
+.radio_item {
+  padding: 6px;
+}
 </style>

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

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     defaultSelect: {
         type: NumberConstructor;
-        default: number;
+        default: null;
     };
     returnValue: {
         type: BooleanConstructor;
@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    selectedRadio: import("vue").Ref<number>;
+    selectedRadio: any;
     selectRadio: (index: number, value: string) => void;
     getIconName: (index: number) => "CheckCircleFill" | "Circle";
     getColor: (index: number) => "var(--primary)" | "var(--lavendar-grey)";
@@ -53,7 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     defaultSelect: {
         type: NumberConstructor;
-        default: number;
+        default: null;
     };
     returnValue: {
         type: BooleanConstructor;

package/dist/runtime/components/argStyle.vue

@@ -291,10 +291,9 @@ button {
 
 .oip_btn {
   border-radius: 8px !important;
-  padding: 10px 20px !important;
+  padding: 0px 16px !important;
   outline: none !important;
   cursor: pointer !important;
-  max-height: 16px;
   white-space: nowrap;
   display: flex;
   justify-content: center;
@@ -309,54 +308,66 @@ button {
   width: fit-content;
 }
 
-.oip_primary_button {
+.oip_btn_s {
+  height: 32px;
+}
+
+.oip_btn_m {
+  height: 40px;
+}
+
+.oip_full_btn {
+  width: calc(100% - 32px) !important;
+}
+
+.oip_primary-fill_button {
   background: var(--primary) !important;
   border: 2px solid var(--primary) !important;
   box-shadow: var(--primary-button-shadow) !important;
   color: var(--pure-white) !important;
 }
-.oip_primary_button .oip_button_spinner div {
+.oip_primary-fill_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
 
-.oip_primary_button:hover,
-.oip_primary_button:focus {
+.oip_primary-fill_button:hover,
+.oip_primary-fill_button:focus {
   background: var(--primary-hover2) !important;
   border: 2px solid var(--primary-hover2) !important;
   box-shadow: none !important;
   color: var(--pure-white) !important;
 }
-.oip_primary_button.is-disabled,
-.oip_primary_button.is-disabled:hover,
-.oip_primary_button.is-disabled:focus {
-  background: var(--more) !important;
-  border: 2px solid var(--more) !important;
+.oip_primary-fill_button.is-disabled,
+.oip_primary-fill_button.is-disabled:hover,
+.oip_primary-fill_button.is-disabled:focus {
+  background: var(--dividers) !important;
+  border: 2px solid var(--dividers) !important;
   box-shadow: none !important;
-  color: var(--cool-grey) !important;
+  color: var(--wild-blue-yonder) !important;
 }
 
-.oip_primary_icon_button {
+.oip_primary-fill_icon_button {
   background: var(--primary) !important;
   border: 2px solid var(--primary) !important;
   box-shadow: var(--primary-button-shadow) !important;
   color: var(--pure-white) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
 }
 
-.oip_primary_icon_button .oip_button_spinner div {
+.oip_primary-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
-.oip_primary_icon_button:hover,
-.oip_primary_icon_button:focus {
+.oip_primary-fill_icon_button:hover,
+.oip_primary-fill_icon_button:focus {
   background: var(--primary-hover) !important;
   border: 2px solid var(--primary-hover) !important;
   box-shadow: var(--primary-button-shadow) !important;
   color: var(--pure-white) !important;
 }
 
-.oip_secondary_button,
+/*.oip_secondary_button,
 .oip_secondary_button:hover,
 .oip_secondary_button:focus {
   background: var(--pure-white) !important;
@@ -379,269 +390,255 @@ button {
   box-shadow: none !important;
   color: var(--wild-blue-yonder) !important;
   padding: 10px !important;
-}
+}*/
 
-.oip_terciary_button,
-.oip_dark_button,
-.oip_tertiary_button {
+.oip_secondary-fill_button {
   background: var(--independence) !important;
   border: 2px solid var(--independence) !important;
   box-shadow: 4px 7px 12px 0px rgba(62, 63, 94, 0.2) !important;
   color: var(--pure-white) !important;
 }
 
-.oip_tertiary_button:hover,
-.oip_tertiary_button:focus,
-.oip_terciary_button:hover,
-.oip_terciary_button:focus,
-.oip_dark_button:hover,
-.oip_dark_button:focus,
-.oip_terciary_icon_button:hover,
-.oip_terciary_icon_button:focus,
-.oip_tertiary_icon_button:hover,
-.oip_tertiary_icon_button:focus,
-.oip_dark_icon_button:hover,
-.oip_dark_icon_button:focus {
+.oip_secondary-fill_button:hover,
+.oip_secondary-fill_button:focus,
+.oip_secondary-fill_icon_button:hover,
+.oip_secondary-fill_icon_button:focus {
   background: #21223d !important;
   border: 2px solid #21223d !important;
   box-shadow: none !important;
 }
 
-.oip_tertiary_button .oip_button_spinner div,
-.oip_dark_button .oip_button_spinner div,
-.oip_tertiary_icon_button .oip_button_spinner div,
-.oip_dark_icon_button .oip_button_spinner div {
+.oip_secondary-fill_button .oip_button_spinner div,
+.oip_secondary-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
 
-.oip_terciary_icon_button,
-.oip_tertiary_icon_button,
-.oip_dark_icon_button {
+.oip_secondary-fill_icon_button {
   background: var(--independence) !important;
   border: 2px solid var(--independence) !important;
   box-shadow: 4px 7px 12px 0px rgba(62, 63, 94, 0.2) !important;
   color: var(--pure-white) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
 }
 
 .oip_disable_button,
 .oip_disable_button:hover,
 .oip_disable_button:focus {
-  background: var(--more) !important;
-  border: 2px solid var(--more) !important;
+  background: var(--dividers) !important;
+  border: 2px solid var(--dividers) !important;
   box-shadow: none !important;
-  color: var(--cool-grey) !important;
+  color: var(--wild-blue-yonder) !important;
 }
 
 .oip_disable_icon_button,
 .oip_disable_icon_button:hover,
 .oip_disable_icon_button:focus {
-  background: var(--more) !important;
-  border: 2px solid var(--more) !important;
+  background: var(--dividers) !important;
+  border: 2px solid var(--dividers) !important;
   box-shadow: none !important;
-  color: var(--cool-grey) !important;
+  color: var(--wild-blue-yonder) !important;
 }
 
 .el-button + .el-button {
   margin-left: 0px !important;
 }
-.oip_skeleton_button {
+.oip_secondary-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(62, 63, 94, 0.2) !important;
   box-shadow: none !important;
   color: var(--independence) !important;
 }
 
-.oip_skeleton_button:hover,
-.oip_skeleton_button:focus {
+.oip_secondary-stroke_button:hover,
+.oip_secondary-stroke_button:focus {
   background: rgba(62, 63, 94, 0.05) !important;
   border: 2px solid rgba(62, 63, 94, 0.2) !important;
   box-shadow: none !important;
   color: var(--independence) !important;
 }
 
-.oip_skeleton_button:hover .oip__button_prefix_icon,
-.oip_skeleton_button:focus .oip__button_prefix_icon,
-.oip_skeleton_button:hover .oip__button_suffix_icon,
-.oip_skeleton_button:focus .oip__button_suffix_icon {
+.oip_secondary-stroke_button:hover .oip__button_prefix_icon,
+.oip_secondary-stroke_button:focus .oip__button_prefix_icon,
+.oip_secondary-stroke_button:hover .oip__button_suffix_icon,
+.oip_secondary-stroke_button:focus .oip__button_suffix_icon {
   stroke: var(--independence) !important;
   color: var(--independence) !important;
 }
-.oip_skeleton_button .oip_button_spinner div,
-.oip_skeleton_icon_button .oip_button_spinner div {
+.oip_secondary-stroke_button .oip_button_spinner div,
+.oip_secondary-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--independence);
   border-color: var(--independence) transparent transparent transparent;
 }
-.oip_skeleton_icon_button {
+.oip_secondary-stroke_icon_button {
   background: transparent !important;
   border: 2px solid rgba(62, 63, 94, 0.2) !important;
   box-shadow: none !important;
   color: var(--independence) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
 }
 
-.oip_skeleton_icon_button:hover,
-.oip_skeleton_icon_button:focus {
+.oip_secondary-stroke_icon_button:hover,
+.oip_secondary-stroke_icon_button:focus {
   border: 2px solid rgba(33, 118, 255, 0.2) !important;
 }
-.oip_skeleton_icon_button:hover svg,
-.oip_skeleton_icon_buttonn:focus svg,
-.oip_skeleton_icon_button:hover svg,
-.oip_skeleton_icon_button:focus svg {
+.oip_secondary-stroke_icon_button:hover svg,
+.oip_secondary-stroke_icon_buttonn:focus svg,
+.oip_secondary-stroke_icon_button:hover svg,
+.oip_secondary-stroke_icon_button:focus svg {
   stroke: var(--primary) !important;
   color: var(--primary) !important;
 }
 
-.oip_outlined_button {
+.oip_primary-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(33, 118, 255, 0.2) !important;
   box-shadow: none !important;
   color: var(--primary) !important;
 }
 
-.oip_outlined_button:hover,
-.oip_outlined_button:focus,
-.oip_outlined_icon_button:hover,
-.oip_outlined_icon_button:focus {
+.oip_primary-stroke_button:hover,
+.oip_primary-stroke_button:focus,
+.oip_primary-stroke_icon_button:hover,
+.oip_primary-stroke_icon_button:focus {
   background: rgba(33, 118, 255, 0.05) !important;
   color: var(--primary-hover2) !important;
 }
-.oip_outlined_button .oip_button_spinner div,
-.oip_outlined_icon_button .oip_button_spinner div {
+.oip_primary-stroke_button .oip_button_spinner div,
+.oip_primary-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--primary);
   border-color: var(--primary) transparent transparent transparent;
 }
-.oip_outlined_icon_button {
+.oip_primary-stroke_icon_button {
   background: transparent !important;
   border: 2px solid rgba(33, 118, 255, 0.2) !important;
   box-shadow: none !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--primary) !important;
 }
-.oip_warning_button {
+.oip_warning-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(239, 68, 68, 0.2);
   box-shadow: none !important;
   color: var(--system-alert) !important;
 }
-.oip_warning_button:hover,
-.oip_warning_button:focus,
-.oip_warning_icon_button:hover,
-.oip_warning_icon_button:focus {
+.oip_warning-stroke_button:hover,
+.oip_warning-stroke_button:focus,
+.oip_warning-stroke_icon_button:hover,
+.oip_warning-stroke_icon_button:focus {
   background: rgba(239, 68, 68, 0.2) !important;
   border: 2px solid rgba(251, 70, 84, 0.2) !important;
   color: var(--alert-hover) !important;
 }
-.oip_warning_button .oip_button_spinner div,
-.oip_warning_icon_button .oip_button_spinner div {
+.oip_warning-stroke_button .oip_button_spinner div,
+.oip_warning-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--system-alert);
   border-color: var(--system-alert) transparent transparent transparent;
 }
-.oip_warning_button:hover .oip_button_spinner div,
-.oip_warning_icon_button:hover .oip_button_spinner div {
+.oip_warning-stroke_button:hover .oip_button_spinner div,
+.oip_warning-stroke_icon_button:hover .oip_button_spinner div {
   border: 2px solid var(--alert-hover);
   border-color: var(--alert-hover) transparent transparent transparent;
 }
-.oip_warning_button:hover .oip__button_prefix_icon,
-.oip_warning_button:focus .oip__button_prefix_icon,
-.oip_warning_button:hover .oip__button_suffix_icon,
-.oip_warning_button:focus .oip__button_suffix_icon {
+.oip_warning-stroke_button:hover .oip__button_prefix_icon,
+.oip_warning-stroke_button:focus .oip__button_prefix_icon,
+.oip_warning-stroke_button:hover .oip__button_suffix_icon,
+.oip_warning-stroke_button:focus .oip__button_suffix_icon {
   stroke: var(--alert-hover) !important;
   color: var(--alert-hover) !important;
 }
-.oip_warning_icon_button {
+.oip_warning-stroke_icon_button {
   background: transparent !important;
   border: 2px solid rgba(239, 68, 68, 0.2) !important;
   box-shadow: none !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--system-alert) !important;
 }
-.oip_warning_icon_button:hover,
-.oip_warning_icon_button:hover {
+.oip_warning-stroke_icon_button:hover,
+.oip_warning-stroke_icon_button:hover {
   border: 2px solid rgba(251, 70, 84, 0.2) !important;
   color: var(--alert-hover) !important;
 }
-.oip_warning_icon_button:hover svg,
-.oip_warning_icon_button:hover svg {
+.oip_warning-stroke_icon_button:hover svg,
+.oip_warning-stroke_icon_button:hover svg {
   stroke: var(--alert-hover) !important;
   color: var(--alert-hover) !important;
 }
-.oip_red_button {
+.oip_warning-fill_button {
   background: var(--system-alert) !important;
   border: 2px solid rgba(239, 68, 68, 0.2);
   box-shadow: 4px 7px 12px 0px rgba(239, 68, 68, 0.2) !important;
   color: var(--pure-white) !important;
 }
-.oip_red_button:hover,
-.oip_red_button:focus,
-.oip_red_icon_button:hover,
-.oip_red_icon_button:focus {
+.oip_warning-fill_button:hover,
+.oip_warning-fill_button:focus,
+.oip_warning-fill_icon_button:hover,
+.oip_warning-fill_icon_button:focus {
   background: var(--alert-hover) !important;
   border: 2px solid var(--alert-hover) !important;
   box-shadow: none !important;
 }
-.oip_red_button .oip_button_spinner div,
-.oip_red_icon_button .oip_button_spinner div {
+.oip_warning-fill_button .oip_button_spinner div,
+.oip_warning-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
-.oip_red_icon_button {
+.oip_warning-fill_icon_button {
   background: var(--system-alert) !important;
   border: 2px solid var(--system-alert) !important;
   box-shadow: 4px 7px 12px 0px rgba(239, 68, 68, 0.2) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--pure-white) !important;
 }
 
-.oip_green_button {
+.oip_success-fill_button {
   background: var(--green) !important;
   border: 2px solid var(--green) !important;
   box-shadow: 4px 7px 12px 0px rgba(34, 197, 94, 0.2) !important;
   color: var(--pure-white) !important;
 }
-.oip_green_button:hover,
-.oip_green_button:focus,
-.oip_green_icon_button:hover,
-.oip_green_icon_button:focus {
+.oip_success-fill_button:hover,
+.oip_success-fill_button:focus,
+.oip_success-fill_icon_button:hover,
+.oip_success-fill_icon_button:focus {
   background: #2eb830 !important;
   border: 2px solid #2eb830 !important;
   box-shadow: none !important;
 }
-.oip_green_button .oip_button_spinner div,
-.oip_green_icon_button .oip_button_spinner div {
+.oip_success-fill_button .oip_button_spinner div,
+.oip_success-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
-.oip_green_icon_button {
+.oip_success-fill_icon_button {
   background: var(--green) !important;
   border: 2px solid var(--green) !important;
   box-shadow: 4px 7px 12px 0px rgba(34, 197, 94, 0.2) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--pure-white) !important;
 }
 
-.oip_success_button {
+.oip_success-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(34, 197, 94, 0.2) !important;
   color: var(--system-success) !important;
 }
-.oip_success_button:hover,
-.oip_success_button:focus,
-.oip_success_icon_button:hover,
-.oip_success_icon_button:focus {
+.oip_success-stroke_button:hover,
+.oip_success-stroke_button:focus,
+.oip_success-stroke_icon_button:hover,
+.oip_success-stroke_icon_button:focus {
   border: 2px solid rgba(34, 197, 94, 0.2) !important;
   background: rgba(34, 197, 94, 0.05) !important;
   color: #069a3d !important;
 }
-.oip_success_button .oip_button_spinner div,
-.oip_success_icon_button .oip_button_spinner div {
+.oip_success-stroke_button .oip_button_spinner div,
+.oip_success-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--system-success);
   border-color: var(--system-success) transparent transparent transparent;
 }
-.oip_success_icon_button {
+.oip_success-stroke_icon_button {
   border: 2px solid rgba(34, 197, 94, 0.2) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--system-success) !important;
 }
 .oip_button_flex {
@@ -728,62 +725,66 @@ button {
   background: rgba(244, 63, 94, 0.1) !important;
   color: #9f1239;
 }
-/*.oip_tag.is_pink {
+.oip_tag.is_pink {
   background: rgba(236, 72, 153, 0.1) !important;
   color: #9d174d;
-}*/
+}
 .oip_tag.is_fushia {
   background: rgba(217, 70, 239, 0.1) !important;
   color: #86198f;
 }
-/*.oip_tag.is_purple {
+.oip_tag.is_purple {
   background: rgba(168, 85, 247, 0.1) !important;
   color: #6b21a8;
 }
-.oip_tag.is_indigo {
+.oip_tag.is_violet {
   background: rgba(139, 92, 246, 0.1) !important;
   color: #5b21b6;
-}*/
+}
+.oip_tag.is_indigo {
+  background: rgba(99, 102, 241, 0.1) !important;
+  color: #3730a3;
+}
 .oip_tag.is_blue {
   background: rgba(59, 130, 246, 0.1) !important;
   color: #1e40af;
 }
-/*.oip_tag.is_sapphire {
+.oip_tag.is_sky {
   background: rgba(14, 165, 233, 0.1) !important;
   color: #075985;
 }
-.oip_tag.is_turquoise {
+.oip_tag.is_cyan {
   background: rgba(6, 182, 212, 0.1) !important;
   color: #155e75;
 }
 .oip_tag.is_teal {
   background: rgba(20, 184, 166, 0.1) !important;
   color: #115e59;
-}*/
+}
 .oip_tag.is_emerald {
   background: rgba(16, 185, 129, 0.1) !important;
   color: #065f46;
 }
-/*.oip_tag.is_green {
+.oip_tag.is_green {
   background: rgba(34, 197, 94, 0.1) !important;
   color: #166534;
-}*/
+}
 .oip_tag.is_lime {
   background: rgba(132, 204, 22, 0.1) !important;
   color: #3f6212;
 }
-/*.oip_tag.is_yellow {
+.oip_tag.is_yellow {
   background: rgba(234, 179, 8, 0.1) !important;
   color: #854d0e;
-}*/
+}
 .oip_tag.is_amber {
   background: rgba(245, 158, 11, 0.1) !important;
   color: #92400e;
 }
-/*.oip_tag.is_coral {
+.oip_tag.is_orange {
   background: rgba(249, 115, 22, 0.1) !important;
   color: #9a3412;
-}*/
+}
 
 .oip_tag.is_gray {
   background: var(--background) !important;
@@ -793,18 +794,6 @@ button {
   stroke: var(--cool-grey);
   color: var(--cool-grey);
 }
-.oip_tag.is_light_red {
-  background: rgba(251, 70, 84, 0.1) !important;
-  color: var(--alert) !important;
-}
-.oip_tag.is_light_green {
-  background: rgba(50, 209, 117, 0.1) !important;
-  color: var(--success) !important;
-}
-.oip_tag.is_light_primary {
-  background: #e9f1ff !important;
-  color: var(--primary) !important;
-}
 .oip_tag .oip_tag__close {
   display: inline-block;
   cursor: pointer;
@@ -1007,4 +996,9 @@ button {
   align-items: flex-start;
   gap: 4px;
 }
+
+.arg_page {
+  height: 100%;
+  width: 100%;
+}
 </style>

package/dist/runtime/components/argTags.vue

@@ -18,7 +18,7 @@ export default defineComponent({
   name: "argTags",
   components: { argIcon, argStyle },
   props: {
-    setStyle: { type: String, default: "light_grey" },
+    setStyle: { type: String, default: "gray" },
     haveClose: { type: Boolean, default: false }
   },
   emits: ["onClose"],

package/package.json

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