init component

node_modules/buetify/lib/components/table/BTableRow.js

@@ -0,0 +1,120 @@
+import { exists } from 'fp-ts/Option';
+import { pipe } from 'fp-ts/pipeable';
+import { BCheckbox } from '../form/checkbox/BCheckbox';
+import { isString } from '../../utils/helpers';
+import { useInjectedVisibleColumns } from './composables/shared';
+import { useInjectedCheckableTable } from './composables/useCheckableTable';
+import { useInjectedDraggableTable } from './composables/useDraggableTable';
+import { useInjectedSelectableTable } from './composables/useSelectableTable';
+import { eqBTableRowData } from './shared';
+import { h, defineComponent, computed } from 'vue';
+export default defineComponent({
+  name: 'b-table-row',
+  props: {
+    index: {
+      type: Number,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    },
+    onRowClick: {
+      type: Function
+    }
+  },
+
+  setup(props, {
+    slots
+  }) {
+    const {
+      checkedRowIds,
+      variant,
+      toggleRow,
+      isCheckable
+    } = useInjectedCheckableTable();
+    const {
+      selectedRowIds,
+      toggleRowSelection,
+      isSelectable
+    } = useInjectedSelectableTable();
+    const draggable = useInjectedDraggableTable();
+    const visibleColumns = useInjectedVisibleColumns();
+    const isChecked = computed(() => checkedRowIds.value.has(props.row.id));
+    const isSelected = computed(() => selectedRowIds.value.has(props.row.id));
+    const classes = computed(() => {
+      const isActive = draggable.isActive.value;
+      const isDroppable = props.row.isDroppable ?? !!props.row.isDraggable;
+      return [{
+        'is-selected': isSelected.value,
+        'is-checked': isChecked.value,
+        'is-draggable': draggable.isDraggable.value && !!props.row.isDraggable,
+        'is-droppable': isActive && isDroppable,
+        'is-undroppable': isActive && !isDroppable,
+        'is-drop-target': isActive && pipe(draggable.target.value, exists(t => eqBTableRowData.equals(t, props.row)))
+      }, props.row.classes];
+    });
+    const dragListeners = computed(() => draggable.useRowDragListeners(props.row, props.index));
+
+    function toggleCheck() {
+      toggleRow(props.row);
+    }
+
+    function onClick(e) {
+      if (props.onRowClick) {
+        props.onRowClick(props.row, e);
+      }
+
+      if (props.row.isSelectable ?? isSelectable.value) {
+        e.stopPropagation();
+        toggleRowSelection(props.row);
+      }
+    }
+
+    return () => {
+      const columns = visibleColumns.value.map(column => {
+        const children = [];
+        const value = column.value ? isString(column.value) ? props.row[column.value] : column.value(props.row) : undefined;
+        const columnSlot = slots[column.slotName || column.label];
+
+        if (columnSlot) {
+          children.push(columnSlot({
+            row: props.row,
+            column,
+            value
+          }));
+        } else if (value !== null) {
+          children.push(String(value));
+        }
+
+        const textClass = column.position === undefined ? 'has-text-left' : column.position === 'is-left' ? 'has-text-left' : column.position === 'is-centered' ? 'has-text-centered' : 'has-text-right';
+        return h('td', {
+          class: [textClass, {
+            'is-sticky-left': column.isSticky
+          }],
+          'data-label': column.label
+        }, children);
+      });
+
+      if (isCheckable.value) {
+        columns.unshift(h('td', {
+          class: 'checkbox-cell'
+        }, [h(BCheckbox, {
+          modelValue: isChecked.value,
+          variant: variant.value,
+          isDisabled: props.row.isCheckable === false,
+          'onUpdate:modelValue': toggleCheck
+        })]));
+      }
+
+      return h('tr', {
+        class: classes.value,
+        onClick,
+        draggable: draggable.isDraggable.value && !!props.row.isDraggable,
+        ...dragListeners.value
+      }, columns);
+    };
+  }
+
+});
+//# sourceMappingURL=BTableRow.js.map