sprintify-ui 0.8.59 → 0.8.60

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sprintify-ui",
3
- "version": "0.8.59",
3
+ "version": "0.8.60",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "build": "rimraf dist && vue-tsc && vite build",
@@ -1,15 +1,29 @@
1
1
  <template>
2
2
  <div class="-mx-4 -my-2">
3
+
4
+ <div class="px-4 w-full">
5
+ <BaseInput
6
+ v-model="search"
7
+ size="sm"
8
+ class="w-full mb-2"
9
+ :placeholder="t('sui.search')"
10
+ />
11
+ </div>
12
+
3
13
  <BaseDraggable
4
- :model-value="columns"
14
+ :model-value="filteredColumns"
5
15
  item-key="newKey"
6
16
  handle=".handle"
17
+ :disabled="dragDisabled"
7
18
  @update:model-value="onDragUpdate"
8
19
  >
9
20
  <template #item="{ element }">
10
21
  <div class="flex items-center border-b">
11
22
 
12
- <div class="handle shrink-0 cursor-move relative py-1 pl-4 pr-1 -left-1">
23
+ <div
24
+ class="handle shrink-0 relative py-1 pl-4 pr-1 -left-1"
25
+ :class="[dragDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-move']"
26
+ >
13
27
  <BaseIcon
14
28
  icon="mdi:drag"
15
29
  class="text-slate-400 w-5 h-5"
@@ -49,6 +63,8 @@ import BaseDraggable from './BaseDraggable.vue';
49
63
  import { BaseIcon } from '.';
50
64
  import { BaseTableColumnData } from '@/types';
51
65
  import { customKeyActions } from '@/services/table/customKeyActions';
66
+ import BaseInput from './BaseInput.vue';
67
+ import { t } from '@/i18n';
52
68
 
53
69
  const props = defineProps({
54
70
  table: {
@@ -94,6 +110,20 @@ watch(
94
110
  { immediate: true }
95
111
  );
96
112
 
113
+ // Search
114
+
115
+ const search = ref('');
116
+
117
+ const filteredColumns = computed(() => {
118
+ return columns.value.filter((col) => col.label.toLowerCase().includes(search.value.toLowerCase()));
119
+ });
120
+
121
+ const dragDisabled = computed(() => {
122
+ return filteredColumns.value.length != columns.value.length;
123
+ });
124
+
125
+ // Visible columns
126
+
97
127
  function onVisibleColumnChange(event: any, newKey: string) {
98
128
  const checked = event.target.checked as boolean;
99
129
 
@@ -110,7 +140,10 @@ function onVisibleColumnChange(event: any, newKey: string) {
110
140
  emit('update:visibleColumns', newVisibleColumns);
111
141
  }
112
142
 
143
+ // Drag
144
+
113
145
  function onDragUpdate(value: BaseTableColumnData[]) {
114
146
  emit('update:columnOrder', value.map((v) => v.newKey));
115
147
  }
148
+
116
149
  </script>