@tekkare/auriga 0.2.198 → 0.2.199

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json CHANGED
@@ -4,5 +4,5 @@
4
4
  "compatibility": {
5
5
  "nuxt": "^3.0.0"
6
6
  },
7
- "version": "0.2.198"
7
+ "version": "0.2.199"
8
8
  }
@@ -41,5 +41,5 @@ export default defineComponent({
41
41
  });
42
42
  </script>
43
43
  <style scoped>
44
- .arg_modal_container{align-items:center;background-color:transparent;display:flex;flex-direction:column;height:100vh;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition:background-color .35s ease,opacity .35s ease;width:100%}.arg_modal_open{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:rgba(0,0,0,.6);opacity:1;pointer-events:auto;z-index:99}.arg_modal{align-items:flex-start;background:var(--base-white,#fff);border-radius:12px;display:flex;flex-shrink:0;height:100%;opacity:0;transform:scale(.95);transition:transform .35s ease,opacity .35s ease;width:100%}.arg_modal_visible{opacity:1;transform:scale(1)}.arg_modal.row{flex-direction:row;max-height:711px;max-width:1014px}.arg_modal.col{flex-direction:column;max-height:663px;max-width:966px}.arg_modal_open.set-width{padding:0 15%;width:70%}.arg_modal_header{align-items:center;align-self:stretch;border-bottom:1px solid var(--light,#ececf2);display:flex;justify-content:space-between;padding:24px}.arg_modal_body{align-self:stretch;flex:1;overflow-y:auto;padding:24px}.arg_modal_body.no-header.no-footer{overflow-y:visible;padding:0}.arg_modal_footer{align-items:center;align-self:stretch;border-top:1px solid var(--light,#ececf2);display:flex;gap:16px;padding:24px}.arg_modal_close{align-items:center;border-radius:4px;cursor:pointer;display:flex;justify-content:center;padding:6px}.arg_modal_close:hover{background-color:var(--lightest,#f5f5fa)}
44
+ .arg_modal_container{align-items:center;background-color:transparent;display:flex;flex-direction:column;height:100vh;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition:background-color .35s ease,opacity .35s ease;width:100%}.arg_modal_open{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:rgba(0,0,0,.6);opacity:1;pointer-events:auto;z-index:99}.arg_modal{align-items:flex-start;background:var(--base-white,#fff);border-radius:12px;display:flex;flex-shrink:0;height:100%;opacity:0;transform:scale(.95);transition:transform .35s ease,opacity .35s ease;width:100%}.arg_modal_visible{opacity:1;transform:scale(1)}.arg_modal.row{flex-direction:row;max-height:711px;max-width:1014px}.arg_modal.col{flex-direction:column;max-height:663px;max-width:966px}.arg_modal_open.set-width{padding:0 15%;width:70%}.arg_modal_header{align-items:center;align-self:stretch;border-bottom:1px solid var(--light,#ececf2);display:flex;justify-content:space-between;padding:24px}.arg_modal_body{align-self:stretch;flex:1;overflow-y:auto;padding:24px}.arg_modal_body.no-header.no-footer{overflow-y:visible;padding:24px}.arg_modal_footer{align-items:center;align-self:stretch;border-top:1px solid var(--light,#ececf2);display:flex;gap:16px;padding:24px}.arg_modal_close{align-items:center;border-radius:4px;cursor:pointer;display:flex;justify-content:center;padding:6px}.arg_modal_close:hover{background-color:var(--lightest,#f5f5fa)}
45
45
  </style>
@@ -1,62 +1,54 @@
1
1
  <template>
2
- <div
3
- class="info_main_container"
4
- :class="infoOpen ? 'info_main_container_open' : ''"
5
- >
6
- <div class="oip_info_container" @click.stop>
7
- <div v-if="infoOpen" class="oip_info_close" @click="closeInfo()">
8
- <arg-icon name="X" size="20" />
9
- <p>{{ langData }}</p>
10
- </div>
11
- <div
12
- class="oip_info_section"
13
- :class="infoOpen ? 'oip_info_section_open' : 'oip_info_section'"
14
- >
15
- <div class="oip_info_sidebar">
2
+ <arg-drawer :open="infoOpen" side="right" :width="620" @on-close="closeInfo()">
3
+ <div v-if="infoOpen" class="oip_info_close" @click="closeInfo()">
4
+ <arg-icon name="X" size="20" />
5
+ <p>{{ langData }}</p>
6
+ </div>
7
+ <div class="oip_info_section">
8
+ <div class="oip_info_sidebar">
9
+ <div
10
+ v-for="(item, index) in toolbarArray"
11
+ :key="index"
12
+ class="oip_info_menu"
13
+ :class="trueActiveMenu === item.name ? 'active_info_menu' : ''"
14
+ @click="openMenu(item.name)"
15
+ >
16
+ <div class="oip_row v-center gap-4">
17
+ <arg-icon
18
+ :name="item.icon"
19
+ size="20"
20
+ :color="trueActiveMenu === item.name ? '' : 'var(--dark)'"
21
+ />
22
+ <p>{{ getLabel(item.name) }}</p>
23
+ </div>
16
24
  <div
17
- v-for="(item, index) in toolbarArray"
18
- :key="index"
19
- class="oip_info_menu"
20
- :class="trueActiveMenu === item.name ? 'active_info_menu' : ''"
21
- @click="openMenu(item.name)"
25
+ v-if="item.name === 'Sources' && sourceAmount > 0"
26
+ class="arg_source_amount"
22
27
  >
23
- <div class="oip_row v-center gap-4">
24
- <arg-icon
25
- :name="item.icon"
26
- size="20"
27
- :color="trueActiveMenu === item.name ? '' : 'var(--dark)'"
28
- />
29
- <p>{{ getLabel(item.name) }}</p>
30
- </div>
31
- <div
32
- v-if="item.name === 'Sources' && sourceAmount > 0"
33
- class="arg_source_amount"
34
- >
35
- {{ sourceAmount }}
36
- </div>
37
- <div
38
- v-if="item.name !== 'Sources' && item?.size && item?.size > 0"
39
- class="arg_source_amount"
40
- >
41
- {{ item?.size }}
42
- </div>
28
+ {{ sourceAmount }}
43
29
  </div>
44
- </div>
45
- <div class="oip_info_content">
46
30
  <div
47
- v-for="(item, index) in toolbarArray"
48
- :key="index"
49
- :class="[
50
- 'toolbar_menu_content',
51
- trueActiveMenu === item.name ? '' : 'hide',
52
- ]"
31
+ v-if="item.name !== 'Sources' && item?.size && item?.size > 0"
32
+ class="arg_source_amount"
53
33
  >
54
- <slot :name="item.name" />
34
+ {{ item?.size }}
55
35
  </div>
56
36
  </div>
57
37
  </div>
38
+ <div class="oip_info_content">
39
+ <div
40
+ v-for="(item, index) in toolbarArray"
41
+ :key="index"
42
+ :class="[
43
+ 'toolbar_menu_content',
44
+ trueActiveMenu === item.name ? '' : 'hide',
45
+ ]"
46
+ >
47
+ <slot :name="item.name" />
48
+ </div>
49
+ </div>
58
50
  </div>
59
- </div>
51
+ </arg-drawer>
60
52
  </template>
61
53
 
62
54
  <script>
@@ -68,9 +60,10 @@ import {
68
60
  watch
69
61
  } from "vue";
70
62
  import argIcon from "./argIcon.vue";
63
+ import argDrawer from "./argDrawer.vue";
71
64
  export default defineComponent({
72
65
  name: "argToolbarContent",
73
- components: { argIcon },
66
+ components: { argIcon, argDrawer },
74
67
  props: {
75
68
  toolbarOpen: {
76
69
  type: Boolean,
@@ -136,29 +129,10 @@ export default defineComponent({
136
129
  trueActiveMenu.value = new_active_menu;
137
130
  }
138
131
  );
139
- watch(
140
- () => infoOpen.value,
141
- () => {
142
- if (infoOpen.value) {
143
- setTimeout(() => {
144
- document.addEventListener("click", closeInfo);
145
- }, 500);
146
- } else document.removeEventListener("click", closeInfo);
147
- }
148
- );
149
132
  onMounted(() => {
150
133
  trueActiveMenu.value = props.activeMenu;
151
134
  infoOpen.value = props.toolbarOpen;
152
135
  });
153
- function toggleBodyOverflow(state) {
154
- if (typeof window !== "undefined") {
155
- const body = document.querySelector("html");
156
- if (body) {
157
- state ? body.style.setProperty("overflow", "hidden") : body.style.removeProperty("overflow");
158
- }
159
- }
160
- }
161
- watch(infoOpen, toggleBodyOverflow, { immediate: true });
162
136
  function openMenu(item) {
163
137
  trueActiveMenu.value = item;
164
138
  emit("update:Menu", trueActiveMenu.value);
@@ -183,5 +157,5 @@ export default defineComponent({
183
157
  </script>
184
158
 
185
159
  <style scoped>
186
- .info_main_container{background-color:transparent;opacity:0;transition:background-color .3s linear,opacity .4s linear;z-index:0}.info_main_container_open{background-color:rgba(0,0,0,.4);bottom:0;height:100%;left:0;opacity:1;position:fixed;top:0;width:100%;z-index:99}.oip_info_menu{align-items:center;align-self:stretch;border-bottom:2px solid transparent;color:var(--dark);cursor:pointer;display:flex;font-size:14px;font-style:normal;font-weight:500;gap:4px;justify-content:space-between;line-height:normal;padding:0 16px 4px}.active_info_menu{border-bottom:2px solid var(--primary-primary,#2176ff)!important;color:var(--darkest)!important}.oip_info_item svg{flex-basis:100%}.oip_info_item:hover{background:rgba(237,237,243,.65)}.oip_info_close{align-items:center;background:var(--white);border-radius:var(--s,8px);cursor:pointer;display:flex;font-size:14px;font-style:normal;font-weight:400;gap:6px;line-height:160%;margin:24px;padding:6px 12px 6px 8px}.oip_info_close:hover{background:var(--light)!important}.oip_info_section{align-items:flex-start;display:flex;flex-direction:row;height:0;overflow:hidden;transition:all .5s ease;width:0}.oip_info_section_open{height:100%;width:620px}.oip_info_sidebar{background:var(--base-demi-fond,#f9f9fa);gap:16px;padding:24px 0;width:160px}.oip_info_content,.oip_info_sidebar{align-items:flex-start;align-self:stretch;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-left:1px solid var(--light,#ececf2);display:flex;flex-direction:column}.oip_info_content{background:var(--base-white,#fff);border-radius:var(--None,0);gap:24px;overflow-y:scroll;padding:24px;width:460px}.oip_info_content::-webkit-scrollbar{height:5px!important;width:5px!important}.oip_info_content::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.oip_info_content::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.oip_info_container{align-items:flex-start;display:inline-flex;height:100%;position:fixed;right:0;top:0;z-index:999}.hide{display:none}.arg_source_amount{align-items:center;background:var(--system-alert,#ef4444);border-radius:30px;color:var(--white);display:flex;flex-direction:column;font-size:10px;font-style:normal;font-weight:900;height:var(--m,16px);justify-content:center;line-height:normal;width:var(--m,16px)}.toolbar_menu_content{align-self:stretch}
160
+ .oip_info_menu{align-items:center;align-self:stretch;border-bottom:2px solid transparent;color:var(--dark);cursor:pointer;display:flex;font-size:14px;font-style:normal;font-weight:500;gap:4px;justify-content:space-between;line-height:normal;padding:0 16px 4px}.active_info_menu{border-bottom:2px solid var(--primary-primary,#2176ff)!important;color:var(--darkest)!important}.oip_info_item svg{flex-basis:100%}.oip_info_item:hover{background:rgba(237,237,243,.65)}.oip_info_close{align-items:center;background:var(--white);border-radius:var(--s,8px);cursor:pointer;display:flex;font-size:14px;font-style:normal;font-weight:400;gap:6px;line-height:160%;margin:24px;padding:6px 12px 6px 8px}.oip_info_close:hover{background:var(--light)!important}.oip_info_section{align-items:flex-start;display:flex;flex-direction:row;height:100%}.oip_info_sidebar{background:var(--base-demi-fond,#f9f9fa);gap:16px;padding:24px 0;width:160px}.oip_info_content,.oip_info_sidebar{align-items:flex-start;align-self:stretch;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-left:1px solid var(--light,#ececf2);display:flex;flex-direction:column}.oip_info_content{background:var(--base-white,#fff);border-radius:var(--None,0);gap:24px;overflow-y:scroll;padding:24px;width:460px}.oip_info_content::-webkit-scrollbar{height:5px!important;width:5px!important}.oip_info_content::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.oip_info_content::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.hide{display:none}.arg_source_amount{align-items:center;background:var(--system-alert,#ef4444);border-radius:30px;color:var(--white);display:flex;flex-direction:column;font-size:10px;font-style:normal;font-weight:900;height:var(--m,16px);justify-content:center;line-height:normal;width:var(--m,16px)}.toolbar_menu_content{align-self:stretch}
187
161
  </style>
@@ -65,5 +65,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
65
65
  toolbarArray: unknown[];
66
66
  }, {}, {
67
67
  argIcon: any;
68
+ argDrawer: any;
68
69
  }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
69
70
  export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tekkare/auriga",
3
- "version": "0.2.198",
3
+ "version": "0.2.199",
4
4
  "description": "Aurgia is a UI kit developped by Tekkare",
5
5
  "license": "MIT",
6
6
  "type": "module",