Commit bc98fb7c authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

feat: add 'handlers' prop for 'Table'

parent 6f7b4e5a

src/Playground.vue

+9 −0
Original line number Diff line number Diff line
@@ -202,6 +202,15 @@ const pbValue = ref(0); 
    theme="black"

    stripedRows

    editable

    :no-editing-settings="{

      cells: [[0, 0]],

    }"

    :handlers="[

      {

        cell: [0, 0],

        handler: () => (visibleDrawer = true),

      },

    ]"

  ></Table>

  <button class="testButton" @click="visibleDrawer = !visibleDrawer">Нажми меня</button>

  <div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>

src/common/interfaces/componentsProps.ts

+7 −3
Original line number Diff line number Diff line
@@ -37,10 +37,14 @@ export interface ITableProps { 
  darknessTextColor?: TDarkness;

  editable?: boolean;

  noEditingSettings?: {

    columns: number[];

    rows: number[];

    cells: [number, number][];

    columns?: number[];

    rows?: number[];

    cells?: [number, number][];

  };

  handlers?: {

    cell: [number, number];

    handler?: unknown;

  }[];

}



export interface ITLProps {

src/components/Table/Table.vue

+6 −0
Original line number Diff line number Diff line
@@ -151,10 +151,12 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe 
          <td

            v-for="(item, columnIndex) of row"

            :key="columnIndex"

            @click="handlers?.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex)?.handler"

            :class="{

              leftBorder: showAllLines,

              darkRow: stripedRows && rowIndex % 2,

              noEdit: !editable || (noEditingSettings?.columns && ~noEditingSettings.columns?.indexOf(columnIndex)),

              pointer: handlers?.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex),

            }"

            :style="`padding: calc(${initGap} / 2 + ${additionalHeightFromSize}) ${initGap}`"

          >
@@ -169,6 +171,7 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe 
              :noEditingSettings="noEditingSettings?.cells"

              :fontSize="fontSize"

              :knobWidth="knobWidth"

              :noEdit="!!handlers?.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex)"

              @updateData="updateData"

            />

          </td>
@@ -219,4 +222,7 @@ tr::after { 
.noEdit {

  pointer-events: none;

}

.pointer {

  cursor: pointer;

}

</style>

src/components/Table/components/TableCell.vue

+4 −3
Original line number Diff line number Diff line
@@ -15,9 +15,10 @@ interface IProps { 
  columnIndex: number;

  center: boolean | undefined;

  editable: boolean;

  noEditingSettings: [number, number][] | undefined;

  fontSize: string;

  knobWidth: string;

  noEditingSettings: [number, number][] | undefined;

  noEdit: boolean;

}

defineProps<IProps>();

defineEmits(['updateData']);
@@ -30,9 +31,9 @@ defineEmits(['updateData']); 
      {

        cellCenter: center,

        noEdit:

          noEdit ||

          !editable ||

          (noEditingSettings &&

            noEditingSettings.find((i: [number, number]) => i[0] === rowIndex && i[1] === columnIndex)),

          noEditingSettings?.find((i: [number, number]) => i[0] === rowIndex && i[1] === columnIndex),

      },

    ]"

  >