diff --git a/src/Playground.vue b/src/Playground.vue index cdb68c000d8a865181dc8ca8a20d8127812c5a88..c27834cd4c153c73a6e97d1c898c21eac86d43cc 100644 --- a/src/Playground.vue +++ b/src/Playground.vue @@ -241,7 +241,7 @@ const knob = ref(0); ></Table> <button class="testButton" @click="visibleDrawer = !visibleDrawer">Ðажми менÑ</button> <div class="hui" style="width: 500px; height: 500px; background-color: gray"></div> - <Popup v-model:active="popupActive" parentSelector=".hui" theme="sky"> + <Popup v-model="popupActive" parentSelector=".hui" theme="sky"> <Button @click=" () => { @@ -252,7 +252,7 @@ const knob = ref(0); label="Открыть модальное окно" /> </Popup> - <Popup v-model:active="popupActive2" theme="sky" + <Popup v-model="popupActive2" theme="sky" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas. diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue index 91c48bb45d1098df18b5031d59b6dbcc9bcdedae..be0a5e20a2954f1cca873f5b82f5622ade395254 100644 --- a/src/components/Table/Table.vue +++ b/src/components/Table/Table.vue @@ -12,13 +12,11 @@ const props = withDefaults(defineProps<ITableProps>(), { darknessTheme: '500', fontSize: '16px', }); -const data = defineModel<ITableItem[][]>({ - required: false, -}); +const data = defineModel<ITableItem[][]>(); const columns = ref(props.columns); const sortStateActive = ref<[number, string] | []>([]); -const columnToFilter = ref<number>(0); +const indexColumnToFilter = ref<number>(0); const isFilterPopup = ref<boolean>(false); const filterValue = ref<string>(''); const isRegisterSensitive = ref<boolean>(false); @@ -48,8 +46,8 @@ const rows = computed<ITableItem[][]>(() => data.value ?? props.data, sortStateActive.value, props.multipleSort, - columnToFilter.value, - props.columns[columnToFilter.value ?? 0].type ?? 'text', + indexColumnToFilter.value, + props.columns[sortStateActive.value?.[0] ?? -1]?.type ?? 'text', filterValue.value, isRegisterSensitive.value, ), @@ -57,6 +55,7 @@ const rows = computed<ITableItem[][]>(() => const changeColumnSortMode = (index: number) => { const cur = sortState.value[index]; + console.log(index, cur); const newValue = cur === 'none' ? 'down' : cur === 'down' ? 'up' : 'none'; if (cur === 'up') { sortStateActive.value = []; @@ -68,12 +67,12 @@ const changeColumnSortMode = (index: number) => { columns.value[index].initSort = newValue; }; const setFilter = (column: number) => { - if (columnToFilter.value === column || !isFilterPopup.value) { + if (indexColumnToFilter.value === column || !isFilterPopup.value) { isFilterPopup.value = !isFilterPopup.value; } - if (columnToFilter.value !== column) { + if (indexColumnToFilter.value !== column) { filterValue.value = ''; - columnToFilter.value = column; + indexColumnToFilter.value = column; } }; const cancelFilter = () => { @@ -98,7 +97,7 @@ const cancelFilter = () => { v-model:isRegisterSensitive="isRegisterSensitive" :columns="columns" :sortState="sortState" - :columnToFilter="columnToFilter" + :indexColumnToFilter="indexColumnToFilter" :initGap="initGap" :additionalHeightFromSize="additionalHeightFromSize" :theme="theme" diff --git a/src/components/Table/TableHeader.vue b/src/components/Table/TableHeader.vue index c21051f7b914b8f1a7fc749ddca9b7336d7fb5ea..4ef4267d86d7839abe4dcb5f3953a14efac590b1 100644 --- a/src/components/Table/TableHeader.vue +++ b/src/components/Table/TableHeader.vue @@ -15,7 +15,7 @@ import { computed } from 'vue'; interface Props { columns: ITableColumn[]; sortState: string[]; - columnToFilter: number; + indexColumnToFilter: number; initGap: string; additionalHeightFromSize: string; theme: TThemeColor; @@ -44,7 +44,7 @@ const calcLeft = (selector: string) => { if (!el) return 0; return el.getBoundingClientRect().left - table.getBoundingClientRect().left + +iconSize.value; }; -const isColumnTypeText = computed(() => props.columns[props.columnToFilter].type === 'text'); +const isColumnTypeText = computed(() => props.columns[props.indexColumnToFilter].type === 'text'); </script> <template> @@ -87,12 +87,12 @@ const isColumnTypeText = computed(() => props.columns[props.columnToFilter].type </div> </th> <Popup - v-model:active="isFilterPopup" - :parentSelector="`#filter${columnToFilter}`" + v-model="isFilterPopup" + :parentSelector="`#filter${indexColumnToFilter}`" buttonMenu :theme="theme" :top="+iconSize + 10" - :left="calcLeft(`#filter${columnToFilter}`)" + :left="calcLeft(`#filter${indexColumnToFilter}`)" maxHeight="200px" > <article style="padding: 2px"> diff --git a/src/components/Table/helpers.ts b/src/components/Table/helpers.ts index 172f8645beb8c23214647b83897237dc6bef7dd8..47e87a7d4667abec0f7803bf982ebe127a22c270 100644 --- a/src/components/Table/helpers.ts +++ b/src/components/Table/helpers.ts @@ -5,18 +5,18 @@ export const calcRows = ( initRows: ITableItem[][] | undefined, sortStateActive: [number, string] | [], multipleSort: boolean, - columnToFilter: number, - columnToFilterType: TTableColumnType, + indexColumnToFilter: number, + columnToSortType: TTableColumnType, filterValue: string, isRegisterSensitive: boolean, ) => { if (!initRows?.length) return []; // ['up', 'down', ...] let rows = [...initRows]; - if (filterValue) { + console.log('oh...'); rows = rows.filter((row) => { - const item = isRegisterSensitive ? row[columnToFilter].value : row[columnToFilter].value.toLowerCase(); + const item = isRegisterSensitive ? row[indexColumnToFilter].value : row[indexColumnToFilter].value.toLowerCase(); return item.startsWith(isRegisterSensitive ? filterValue : filterValue.toLowerCase()); }); } @@ -43,7 +43,8 @@ export const calcRows = ( } else { const index = sortStateActive[0]; const value = sortStateActive[1]; - if (columnToFilterType === 'number') + console.log(value, index, columnToSortType); + if (columnToSortType === 'number') return rows.sort((a, b) => value === 'down' ? +a[index].value - +b[index].value : +b[index].value - +a[index].value, );