@tekkare/auriga 0.1.4 → 0.1.6

package/dist/runtime/components/argSimpleLabel.vue

@@ -3,7 +3,16 @@
     <span class="oip_select_label" :class="disabled ? 'disabled' : ''">
       <slot></slot>
     </span>
-    <arg-icon class="oip_select_caret_down" name="CaretDown"></arg-icon>
+    <div v-if="show_amount && amount_value > 0" class="arg-circle-amount">
+      <span>{{ amount_value > 99 ? "99+" : amount_value }}</span>
+    </div>
+    <arg-icon
+      class="oip_select_caret_down"
+      name="CaretDown"
+      size="16"
+      color="var(--cool-grey)"
+      thickness="32"
+    />
   </div>
 </template>
 
@@ -19,7 +28,9 @@ export default defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    }
+    },
+    show_amount: { type: Boolean, default: false },
+    amount_value: { type: Number, default: null }
   }
 });
 </script>
@@ -42,13 +53,15 @@ export default defineComponent({
 
 .oip_select_block {
   cursor: pointer;
-  width: 180px;
-  padding: 12px 20px;
+  width: 228px;
+  padding: 12px;
   display: flex;
+  align-items: center;
+  gap: 4px;
   border: 1.5px solid var(--dividers);
   border-radius: 8px;
   background: var(--pure-white);
-  max-width: 270px;
+  position: relative;
 }
 
 .oip_select_block:hover,
@@ -77,23 +90,26 @@ export default defineComponent({
 .oip_select_label .prmt_tooltip {
   display: flex;
 }
-.oip_select_label > p,
-.oip_select_label .prmt_tooltip p {
-  width: 95%;
+.oip_select_label > span,
+.oip_select_label .prmt_tooltip span {
+  display: block;
+  width: 98%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin: 0;
 }
 
 .oip_select_label {
-  width: 95%;
+  width: 90%;
   font-weight: 700;
   font-size: 14px;
   line-height: 16px;
   color: var(--independence);
   max-height: 16px;
-  margin: 0px;
+}
+
+.oip_select_block svg {
+  flex-shrink: 0 !important;
 }
 
 .oip_select_label.disabled {
@@ -101,8 +117,6 @@ export default defineComponent({
 }
 
 .oip_select_caret_down {
-  width: 12px;
-  height: 12px;
   float: right;
   margin-left: auto;
 }
@@ -206,6 +220,35 @@ export default defineComponent({
   fill: var(--accent) !important;
   color: var(--pure-white) !important;
 }
+.arg-circle-amount {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 50%;
+  background: #e9f1ff;
+  color: var(--primary);
+  padding: 4px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  flex-shrink: 0;
+  position: absolute;
+  right: 40px;
+}
+.oip_empty_select {
+  font-weight: 600;
+  color: var(--cool-grey);
+}
+.oip_select_display {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
 </style>
 <style scoped>
 .oip_select_complex_selection_loop > svg.add {

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

@@ -3,12 +3,30 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    show_amount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    amount_value: {
+        type: NumberConstructor;
+        default: null;
+    };
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    show_amount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    amount_value: {
+        type: NumberConstructor;
+        default: null;
+    };
 }>>, {
     disabled: boolean;
+    show_amount: boolean;
+    amount_value: number;
 }, {}>;
 export default _default;

package/dist/runtime/components/argStyle.vue

@@ -62,6 +62,7 @@ export default defineComponent({
   --nested-table-bg: #eaeaf5;
   --table-hover: #dddded;
   --base-dividers: #ececf2;
+  --not-quite-white: #fdfdff;
 
   /*SHADOWS*/
   --container-shadow: 0px 0px 40px rgba(94, 92, 154, 0.06);
@@ -980,4 +981,13 @@ button {
   gap: 10px;
   flex-wrap: wrap;
 }
+.arg_sub_menu .arg_sub_menu .arg_sub_menu_button {
+  padding-left: 24px !important;
+}
+.arg_sub_menu .arg_sub_menu .auriga_menu_item {
+  padding-left: 40px !important;
+}
+.arg_sub_menu .auriga_menu_item {
+  padding-left: 24px !important;
+}
 </style>

package/dist/runtime/components/argSubMenu.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="arg_sub_menu">
+        <button class="arg_sub_menu_button" @click="openMenu = !openMenu">
+            {{label}}
+            <arg-icon name="CaretUp" size="12" color="var(--primary)" thickness="30" v-if="openMenu"/>
+            <arg-icon name="CaretDown" size="12" color="var(--primary)" thickness="30" v-else/>
+        </button>
+        <div v-show="openMenu" class="arg_sub_menu_content">
+            <slot/>
+        </div>
+    </div>
+</template>
+<script>
+import {
+  ref,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+import argStyle from "./argStyle.vue";
+export default defineComponent({
+  name: "argSubMenu",
+  components: { argIcon, argStyle },
+  props: {
+    label: { type: String, required: true },
+    icon: { type: String },
+    defaultCollapseState: { type: Boolean, default: true }
+  },
+  setup(props) {
+    let openMenu = ref(props.defaultCollapseState);
+    return {
+      openMenu
+    };
+  }
+});
+</script>
+<style>
+.arg_sub_menu{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+    width: 100%;
+    cursor: pointer;
+}
+
+.arg_sub_menu_button{
+    width: 100%;
+    outline: none;
+    border: 0px solid transparent;
+    background-color: transparent;
+    padding: 0;
+    display: flex;
+    padding: 3px 8px 6px 8px;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    cursor: pointer;
+}
+.arg_sub_menu_content{
+    width: 100%;
+}
+</style>

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

@@ -0,0 +1,30 @@
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    defaultCollapseState: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    openMenu: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    defaultCollapseState: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    defaultCollapseState: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/components/argSwitch.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="oip_select_display">
+    <p class="oip_filter_label">{{ switch_label }}</p>
+    <div
+      @click="changeValue"
+      class="prmt_parent_switch"
+      @focus="activate_switch = true"
+      @focusout="activate_switch = false"
+      tabindex="0"
+      :class="activate_switch ? 'open' : ''"
+    >
+      <div
+        :class="[
+          'prmt_switch_text',
+          true_is_active ? 'prmt_switch_is_active' : 'prmt_switch_is_inactive',
+        ]"
+      >
+        {{ active_text }}
+      </div>
+      <div
+        :class="[
+          'prmt_switch',
+          true_is_active ? 'prmt_switch_is_active' : 'prmt_switch_is_inactive',
+        ]"
+      >
+        <div
+          :class="[
+            'prmt_switch_round',
+            true_is_active
+              ? 'prmt_switch_is_active'
+              : 'prmt_switch_is_inactive',
+          ]"
+        ></div>
+      </div>
+      <div
+        :class="[
+          'prmt_switch_text',
+          true_is_active ? 'prmt_switch_is_inactive' : 'prmt_switch_is_active',
+        ]"
+      >
+        {{ inactive_text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ref,
+  watch,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argSwitch",
+  props: {
+    active_text: { type: String, required: true },
+    inactive_text: { type: String, required: true },
+    is_active: { type: Boolean, default: true },
+    switch_label: { type: String, required: true }
+  },
+  emits: ["changeValue", "update:Switch"],
+  setup(props, { emit }) {
+    const true_is_active = ref(true);
+    const activate_switch = ref(false);
+    true_is_active.value = props.is_active;
+    watch(
+      () => props.is_active,
+      (new_is_active) => {
+        true_is_active.value = new_is_active;
+        emit("changeValue", true_is_active.value);
+        emit("update:Switch", true_is_active.value);
+      }
+    );
+    function changeValue() {
+      emit("changeValue", !true_is_active.value);
+      emit("update:Switch", !true_is_active.value);
+      true_is_active.value = !true_is_active.value;
+    }
+    return {
+      changeValue,
+      activate_switch,
+      true_is_active
+    };
+  }
+});
+</script>
+
+<style>
+.prmt_switch_pause {
+  vertical-align: baseline !important;
+  fill: var(--dividers) !important;
+  color: var(--dividers) !important;
+  margin: 0 0 5% 11%;
+  stroke-width: 0px !important;
+}
+.prmt_switch_text {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 16px;
+  transition: all 300ms ease;
+}
+.prmt_switch_text.prmt_switch_is_inactive {
+  color: var(--lavendar-grey);
+}
+.prmt_switch_text.prmt_switch_is_active {
+  color: var(--independence);
+}
+.prmt_switch {
+  transition: all 300ms ease;
+  width: 36px;
+  height: 18px;
+  border-radius: 35.7px;
+  padding: 0 2px;
+}
+
+.prmt_switch.prmt_switch_is_active {
+  border: 1px solid var(--accent);
+  background-color: var(--accent);
+}
+.prmt_switch.prmt_switch_is_inactive {
+  background-color: var(--accent);
+  border: 1px solid var(--accent);
+}
+
+.prmt_switch_round.prmt_switch_is_active {
+  left: 0;
+}
+.prmt_switch_round.prmt_switch_is_inactive {
+  transform: translateX(100%);
+}
+
+.prmt_switch_round {
+  transition: all 300ms ease;
+  margin-bottom: 2px;
+  background-color: var(--pure-white);
+  border: solid 0.5px var(--more);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  box-shadow: var(--button-big-shadow);
+}
+
+.prmt_parent_switch {
+  background-color: var(--pure-white);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  gap: 10px;
+  border: solid 1.5px var(--dividers);
+  border-radius: 8px;
+  padding: 10px 17px;
+}
+.prmt_parent_switch:focus-within {
+  border: 1.5px solid var(--primary) !important;
+  box-shadow: 0px 0px 0px 4px rgba(33, 118, 255, 0.1) !important;
+}
+</style>

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

@@ -0,0 +1,45 @@
+declare const _default: import("vue").DefineComponent<{
+    active_text: {
+        type: StringConstructor;
+        required: true;
+    };
+    inactive_text: {
+        type: StringConstructor;
+        required: true;
+    };
+    is_active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    switch_label: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    changeValue: () => void;
+    activate_switch: import("vue").Ref<boolean>;
+    true_is_active: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changeValue" | "update:Switch")[], "changeValue" | "update:Switch", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active_text: {
+        type: StringConstructor;
+        required: true;
+    };
+    inactive_text: {
+        type: StringConstructor;
+        required: true;
+    };
+    is_active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    switch_label: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & {
+    onChangeValue?: ((...args: any[]) => any) | undefined;
+    "onUpdate:Switch"?: ((...args: any[]) => any) | undefined;
+}, {
+    is_active: boolean;
+}, {}>;
+export default _default;