@tekkare/auriga 0.2.6 → 0.2.7

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.6"
7
+ "version": "0.2.7"
8
8
  }
@@ -297,7 +297,7 @@ export default defineComponent({
297
297
  const hoverTag = ref();
298
298
  const showInfo = ref(false);
299
299
  const showChangeType = ref(null);
300
- const regexSearch = /^[\s\.\+\/\!]|[\+\/\!\s][\s\.]+|[\s\.]+[\+\/\!\s]$|\s+[\+\/]|\s+$/g;
300
+ const regexSearch = /^[\s\.\/\!]|[\/\!\s][\s\.]+|\s+[\/]|\s+$/g;
301
301
  const suggOpen = ref(false);
302
302
  const optionIndex = ref(0);
303
303
  const iconColor = computed(() => {
@@ -50,7 +50,12 @@
50
50
  <arg-pills
51
51
  v-for="(item, index) of smart_selection_table"
52
52
  :key="index"
53
- @onClick="smart_selection_select_item(item)"
53
+ :active="smart_selection_selected?.name === item.name"
54
+ @onClick="
55
+ smart_selection_selected?.name !== item.name
56
+ ? smart_selection_select_item(item)
57
+ : del_all_element()
58
+ "
54
59
  >
55
60
  {{ item.name }}
56
61
  </arg-pills>
@@ -81,6 +86,16 @@
81
86
  v-model="searchNameAdd"
82
87
  @input="changeInput"
83
88
  />
89
+ <div
90
+ v-if="searchNameAdd.length > 0"
91
+ class="close-icon"
92
+ @click="
93
+ searchNameAdd = '';
94
+ changeInput();
95
+ "
96
+ >
97
+ <arg-icon name="X" size="14" color="var(--dark)" thickness="32" />
98
+ </div>
84
99
  </div>
85
100
  <div class="oip_select_complex_options">
86
101
  <arg-data-loader
@@ -142,10 +157,16 @@
142
157
  <arg-icon name="MagnifyingGlass" color="var(--medium)" size="14" />
143
158
  <input
144
159
  class="complex_input"
145
- :placeholder="getPlaceholderAdd"
160
+ :placeholder="getPlaceholderDel"
146
161
  v-model="searchNameDel"
147
- @input="changeInput"
148
162
  />
163
+ <div
164
+ v-if="searchNameDel.length > 0"
165
+ class="close-icon"
166
+ @click="searchNameDel = ''"
167
+ >
168
+ <arg-icon name="X" size="14" color="var(--dark)" thickness="32" />
169
+ </div>
149
170
  </div>
150
171
  <div class="oip_select_complex_options">
151
172
  <p class="oip_body" v-if="del_table.length === 0">
@@ -278,7 +299,7 @@ export default defineComponent({
278
299
  const getAddText = {
279
300
  en: "Custom selection",
280
301
  fr: "S\xE9lection sur mesure",
281
- es: "Dselecci\xF3n personalizada"
302
+ es: "Selecci\xF3n personalizada"
282
303
  };
283
304
  const getAddAllText = {
284
305
  en: "Select all",
@@ -497,7 +518,7 @@ export default defineComponent({
497
518
  }
498
519
  function add_all_element() {
499
520
  smart_selection_selected.value = void 0;
500
- del_table.value = Object.assign([], [...new Set(props.element_table)]);
521
+ del_table.value = Object.assign([], [...new Set(filterNameAdd.value)]);
501
522
  add_table.value = [];
502
523
  if (!props.need_apply) {
503
524
  apply_function();
@@ -745,3 +766,18 @@ export default defineComponent({
745
766
  align-self: stretch;
746
767
  }
747
768
  </style>
769
+
770
+ <style>
771
+ .close-icon {
772
+ display: flex;
773
+ align-items: center;
774
+ justify-content: center;
775
+ border-radius: 100%;
776
+ background: var(--light);
777
+ padding: 5px;
778
+ cursor: pointer;
779
+ }
780
+ .close-icon:hover svg {
781
+ color: var(--primary) !important;
782
+ }
783
+ </style>
@@ -56,6 +56,16 @@
56
56
  @input="changeInput()"
57
57
  :placeholder="getPlaceholder"
58
58
  />
59
+ <div
60
+ v-if="searchName.length > 0"
61
+ class="close-icon"
62
+ @click="
63
+ searchName = '';
64
+ changeInput();
65
+ "
66
+ >
67
+ <arg-icon name="X" size="14" color="var(--dark)" thickness="32" />
68
+ </div>
59
69
  </div>
60
70
  <!-- List -->
61
71
  <arg-data-loader
@@ -43,6 +43,16 @@
43
43
  :placeholder="getPlaceholder"
44
44
  @input="changeInput()"
45
45
  />
46
+ <div
47
+ v-if="searchName.length > 0"
48
+ class="close-icon"
49
+ @click="
50
+ searchName = '';
51
+ changeInput();
52
+ "
53
+ >
54
+ <arg-icon name="X" size="14" color="var(--dark)" thickness="32" />
55
+ </div>
46
56
  </div>
47
57
  <arg-data-loader
48
58
  v-if="loading"
@@ -15,7 +15,7 @@
15
15
  </template>
16
16
 
17
17
  <script>
18
- import { ref, defineComponent } from "vue";
18
+ import { ref, defineComponent, watch } from "vue";
19
19
  import argIcon from "./argIcon.vue";
20
20
  import argStyle from "./argStyle.vue";
21
21
  export default defineComponent({
@@ -53,6 +53,12 @@ export default defineComponent({
53
53
  emits: ["onClose", "onClick"],
54
54
  setup(props, { emit }) {
55
55
  const isActive = ref(props.active);
56
+ watch(
57
+ () => props.active,
58
+ () => {
59
+ isActive.value = props.active;
60
+ }
61
+ );
56
62
  function clickPill() {
57
63
  if (!props.haveClose) {
58
64
  isActive.value = !isActive.value;
@@ -248,5 +248,5 @@ export default defineComponent({
248
248
  });
249
249
  </script>
250
250
  <style scoped>
251
- .filters_input_search{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;display:flex;flex-direction:row;gap:12px;justify-content:space-between;min-height:40px;padding:0 12px;width:calc(100% - 24px)}.filters_input_search.no_bottom{border:1.5px solid var(--primary)!important;border-bottom:none!important;border-radius:8px 8px 0 0;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.search-section{align-items:center;display:flex;flex-direction:row;gap:12px;width:100%}.filters_input_search:not(.no_bottom):hover{border:1.5px solid rgba(33,118,255,.2)}.filters_input_search.no_bottom:hover{border-bottom:none!important}.filters_input_search:focus-within{border:1.5px solid var(--primary)!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search.no_bottom:focus-within{border-bottom:none!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search:focus-within .search-icon,.filters_input_search:hover .search-icon{color:var(--primary)!important}.filters_input_style{width:100%}.filters_input_style,.filters_input_style:focus-visible{border:none;outline:none}.filters_input_style::-moz-placeholder{color:var(--medium)}.filters_input_style::placeholder{color:var(--medium)}.close-icon{align-items:center;background:var(--light);border-radius:100%;cursor:pointer;display:flex;justify-content:center;padding:5px}.relative{position:relative;width:100%}.search_suggestions{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fff;border:1.5px solid var(--light);border-radius:0 0 8px 8px;left:0;max-height:200px;overflow-y:scroll;position:absolute;width:100%;z-index:99}.search_suggestions::-webkit-scrollbar{height:5px;width:5px}.search_suggestions::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.search_suggestions::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.sugg_open{border-top:1.5px solid var(--primary)!important;border:1.5px solid var(--primary)!important;border-top-color:var(--light)!important;box-shadow:2px 2px 3px rgba(33,118,255,.1),-2px 2px 3px rgba(33,118,255,.1)}.sugg_container{cursor:pointer;display:flex;flex-direction:column}.sugg_container p:not(.loading){align-items:center;display:flex;gap:8px;padding:8px 12px}.sugg_container p.selected,.sugg_container p:not(.not-found,.loading):hover{background:rgba(93,153,250,.2)}.sugg_container p.selected svg,.sugg_container p:not(.not-found,.loading):hover svg{color:var(--primary)!important}.sugg_container p:last-of-type{border-radius:0 0 8px 8px}.loading{color:var(--medium);font-style:italic;padding:8px 12px}.loading:after{animation:dots 1.3s step-end infinite;content:"";display:inline-block}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}
251
+ .filters_input_search{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;display:flex;flex-direction:row;gap:12px;justify-content:space-between;min-height:40px;padding:0 12px;width:calc(100% - 24px)}.filters_input_search.no_bottom{border:1.5px solid var(--primary)!important;border-bottom:none!important;border-radius:8px 8px 0 0;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.search-section{align-items:center;display:flex;flex-direction:row;gap:12px;width:100%}.filters_input_search:not(.no_bottom):hover{border:1.5px solid rgba(33,118,255,.2)}.filters_input_search.no_bottom:hover{border-bottom:none!important}.filters_input_search:focus-within{border:1.5px solid var(--primary)!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search.no_bottom:focus-within{border-bottom:none!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search:focus-within .search-icon,.filters_input_search:hover .search-icon{color:var(--primary)!important}.filters_input_style{width:100%}.filters_input_style,.filters_input_style:focus-visible{border:none;outline:none}.filters_input_style::-moz-placeholder{color:var(--medium)}.filters_input_style::placeholder{color:var(--medium)}.close-icon{align-items:center;background:var(--light);border-radius:100%;cursor:pointer;display:flex;justify-content:center;padding:5px}.close-icon:hover svg{color:var(--primary)!important}.relative{position:relative;width:100%}.search_suggestions{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fff;border:1.5px solid var(--light);border-radius:0 0 8px 8px;left:0;max-height:200px;overflow-y:scroll;position:absolute;width:100%;z-index:99}.search_suggestions::-webkit-scrollbar{height:5px;width:5px}.search_suggestions::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.search_suggestions::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.sugg_open{border-top:1.5px solid var(--primary)!important;border:1.5px solid var(--primary)!important;border-top-color:var(--light)!important;box-shadow:2px 2px 3px rgba(33,118,255,.1),-2px 2px 3px rgba(33,118,255,.1)}.sugg_container{cursor:pointer;display:flex;flex-direction:column}.sugg_container p:not(.loading){align-items:center;display:flex;gap:8px;padding:8px 12px}.sugg_container p.selected,.sugg_container p:not(.not-found,.loading):hover{background:rgba(93,153,250,.2)}.sugg_container p.selected svg,.sugg_container p:not(.not-found,.loading):hover svg{color:var(--primary)!important}.sugg_container p:last-of-type{border-radius:0 0 8px 8px}.loading{color:var(--medium);font-style:italic;padding:8px 12px}.loading:after{animation:dots 1.3s step-end infinite;content:"";display:inline-block}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}
252
252
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tekkare/auriga",
3
- "version": "0.2.6",
3
+ "version": "0.2.7",
4
4
  "description": "Aurgia is a UI kit developped by Tekkare",
5
5
  "license": "MIT",
6
6
  "type": "module",