@pocketprep/ui-kit 3.1.5 → 3.2.0

package/lib/components/Tables/TeachTable.md

@@ -1,696 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="table-examples__summary">
-            Table with count, search, sort, row selection, and max height
-            <ul class="table-examples__list">
-                <li>Teach Admin - Organizations</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__1"
-            name="Organizations"
-            rows-max-height="558px"
-            :count="table1.rows.length"
-            :rows="table1.rows"
-            :columns="table1.columns"
-            :default-selected-row-id="table1.defaultSelectedRowId"
-            :show-search="true"
-            :show-selected="true"
-            :grid="grid"
-            :table-content-styles="{
-                borderWidth: '1px 1px 0 1px',
-                borderColor: '#dfe3e7',
-                borderStyle: 'solid',
-            }"
-            :table-column-labels-styles="{
-                paddingLeft: '16px',
-                backgroundColor: '#f4f5f9',
-            }"
-            :table-row-styles="{
-                paddingLeft: '16px',
-            }"
-            @sort="table1.updateSortSettings"
-            @searchStringChanged="table1.searchStringChanged"
-            @rowClicked="table1.rowClicked"
-        />
-        <div class="table-examples__summary">
-            Table with actions, count, sort, row selection, and row ordering
-            <ul class="table-examples__list">
-                <li>Teach Stats Sidebar - Groups</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__11"
-            name="Groups"
-            :count="table11.rows.length"
-            :actions="table11.actions"
-            :rows="table11.rows"
-            :columns="table11.columns"
-            :default-selected-row-id="table11.defaultSelectedRowId"
-            :show-drag-and-drop="table11.showDragAndDrop"
-            :show-selected="true"
-            :grid="grid"
-            :table-content-styles="{
-                borderWidth: '1px 1px 0 1px',
-                borderColor: '#dfe3e7',
-                borderStyle: 'solid',
-            }"
-            :table-column-labels-styles="{
-                paddingLeft: '16px',
-                backgroundColor: '#f4f5f9',
-            }"
-            :table-row-styles="{
-                paddingLeft: '16px',
-            }"
-            @rowClicked="table11.rowClicked"
-            @actionClicked="table11.actionClicked"
-            @sort="table11.updateSortSettings"
-            @rowMoved="table11.rowMoved"
-        />
-        <div class="table-examples__summary">
-            Table with actions, count and total, search, sort, filters, and row selection
-            <ul class="table-examples__list">
-                <li>Teach Stats Sidebar - Students</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__12"
-            name="Students"
-            :count="table12.rows.length"
-            :total="table12.rows.length"
-            :actions="table12.actions"
-            :columns="table12.columns"
-            :rows="table12.rows"
-            :show-search="true"
-            :show-filters="true"
-            :filter-chips="table12.filterChips"
-            :default-sort="{ column: table12.columns[0], direction: 1 }"
-            :sort-toggle-order="[ 1, -1 ]"
-            :show-selected="true"
-            :default-selected-row-id="table12.defaultSelectedRowId"
-            :grid="grid"
-            :table-content-styles="{
-                borderWidth: '1px 1px 0 1px',
-                borderColor: '#dfe3e7',
-                borderStyle: 'solid',
-            }"
-            :table-column-labels-styles="{
-                paddingLeft: '16px',
-                backgroundColor: '#f4f5f9',
-            }"
-            :table-row-styles="{
-                paddingLeft: '16px',
-            }"
-            @rowClicked="table12.rowClicked"
-            @searchStringChanged="table12.updateSearchString"
-            @actionClicked="table12.actionClicked"
-            @sort="table12.updateSortSettings"
-        />
-        <div class="table-examples__summary">
-            Open Table with count, search, sort, row selection, and pagination
-            <ul class="table-examples__list">
-                <li>Teach Admin - Instructors</li>
-                <li>Teach Admin - Instructor's Visible Groups</li>
-                <li>Teach Admin - Students</li>
-                <li>Teach Admin - Student's Groups</li>
-                <li>Teach Admin - Groups</li>
-                <li>Teach Admin - Group's Students</li>
-                <li>Teach Admin - Exams</li>
-                <li>Teach Admin - Licenses</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__2"
-            name="Open Table with count, default sort, pagination, search, and row selection"
-            theme="open"
-            :count="table2.rows.length"
-            :rows="table2.rows"
-            :columns="table2.columns"
-            :default-sort="{ column: table2.columns[0], direction: 1 }"
-            :sort-toggle-order="[ 1, -1 ]"
-            :show-pagination="true"
-            :per-page="5"
-            :show-search="true"
-            :show-selected="true"
-            :grid="grid"
-            @sort="table2.updateSortSettings"
-            @searchStringChanged="table2.searchStringChanged"
-            @rowClicked="table2.rowClicked"
-        />
-        <div class="table-examples__summary">
-            Open Table with sort, row edit, row segment control, and no header label
-            <ul class="table-examples__list">
-                <li>Teach Settings - Groups</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__3"
-            theme="open"
-            :rows="table3.rows"
-            :columns="table3.columns"
-            :default-sort="{ column: table3.columns[1], direction: 1 }"
-            :sort-toggle-order="[ 1, -1 ]"
-            :show-header="false"
-            :show-row-edit="true"
-            tooltip-text="Edit Group"
-            :show-row-segment-control="true"
-            segment-control-label="Segment Control Example"
-            :grid="grid"
-            @segmentControlChange="table3.segmentControlChange"
-            @sort="table3.updateSortSettings"
-            @editClicked="table3.editClicked"
-        />
-        <div class="table-examples__summary">
-            Open Table with sort, row edit, and no header label
-            <ul class="table-examples__list">
-                <li>Teach Settings - Instructors</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__4"
-            theme="open"
-            :rows="table4.rows"
-            :columns="table4.columns"
-            :default-sort="{ column: table4.columns[0], direction: 1 }"
-            :sort-toggle-order="[ 1, -1 ]"
-            :show-header="false"
-            :show-row-edit="true"
-            tooltip-text="Edit Prep"
-            :grid="grid"
-            @sort="table4.updateSortSettings"
-            @editClicked="table4.editClicked"
-        />
-        <div class="table-examples__summary">
-            Open Table with sort, row edit, checked rows, and no header label
-            <ul class="table-examples__list">
-                <li>Teach Settings - Seats</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__5"
-            theme="open"
-            :rows="table5.rows"
-            :columns="table5.columns"
-            :default-sort="{ column: table5.columns[0], direction: 1 }"
-            :sort-toggle-order="[ 1, -1 ]"
-            :show-header="false"
-            :show-row-edit="true"
-            :show-checkboxes="true"
-            :disable-row-checked-color="true"
-            :initial-checked-rows="[ 1 ]"
-            tooltip-text="Edit Prep"
-            :grid="grid"
-            @sort="table5.updateSortSettings"
-            @checkedRowsChanged="table5.checkedRowsChanged"
-        />
-        <div class="table-examples__summary">
-            Open Table with search, sort, row edit, pagination, row buttons, and no header label
-            <ul class="table-examples__list">
-                <li>Teach Settings - Students</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__6"
-            theme="open"
-            :rows="table6.rows"
-            :columns="table6.columns"
-            :default-sort="{ column: table6.columns[0], direction: 1 }"
-            :sort-toggle-order="[ 1, -1 ]"
-            :show-header="false"
-            :show-row-edit="true"
-            :show-search="true"
-            :show-pagination="true"
-            :show-row-button="true"
-            :row-button-styles="{ width: '102px' }"
-            plural-item-name="Students"
-            row-button-text="Cancel Invite"
-            tooltip-text="Edit Invite"
-            :grid="grid"
-            @sort="table6.updateSortSettings"
-            @searchStringChanged="table6.updateSearchString"
-            @editClicked="table6.editClicked"
-            @rowButtonClicked="table6.buttonClicked"
-        />
-        <div class="table-examples__summary">
-            Open Table with search, sort, checked rows, pagination, and no header label
-            <ul class="table-examples__list">
-                <li>Teach Add Group Side Panel - Add Students</li>
-                <li>Teach Edit Group -> Select Students Side Panel - Students</li>
-                <li>Teach Admin -> Add Exams Side Panel - Exams</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__7"
-            theme="open"
-            :rows="table7.rows"
-            :columns="table7.columns"
-            :default-sort="{ column: table7.columns[0], direction: 1 }"
-            :sort-toggle-order="[ 1, -1 ]"
-            :show-header="false"
-            :show-search="true"
-            :show-pagination="true"
-            :show-checkboxes="true"
-            plural-item-name="Students"
-            :grid="grid"
-            @sort="table7.updateSortSettings"
-            @searchStringChanged="table7.updateSearchString"
-            @checkedRowsChanged="table7.updatedCheckedRows"
-        />
-        <div class="table-examples__summary">
-            Open Table with search, sort, row buttons, pagination, and no header label
-            <ul class="table-examples__list">
-                <li>Teach Add Group Side Panel - Preview Group</li>
-                <li>Teach Edit Group Side Panel - Group Students</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__8"
-            theme="open"
-            :rows="table8.rows"
-            :columns="table8.columns"
-            :default-sort="{ column: table8.columns[0], direction: 1 }"
-            :sort-toggle-order="[ 1, -1 ]"
-            :show-header="false"
-            :show-search="true"
-            :show-pagination="true"
-            :show-row-button="true"
-            plural-item-name="Students"
-            row-button-text="Remove"
-            :grid="grid"
-            @sort="table8.updateSortSettings"
-            @searchStringChanged="table8.updateSearchString"
-            @rowButtonClicked="table8.rowButtonClicked"
-        />
-        <div class="table-examples__summary">
-            Open Table with sort and no header label
-            <ul class="table-examples__list">
-                <li>Teach Add Students Side Panel - Add Emails</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__9"
-            theme="open"
-            :rows="table9.rows"
-            :columns="table9.columns"
-            :default-sort="{ column: table9.columns[0], direction: 1 }"
-            :sort-toggle-order="[ 1, -1 ]"
-            :show-header="false"
-            :grid="grid"
-            @sort="table9.updateSortSettings"
-        />
-        <div class="table-examples__summary">
-            Open Table with sort, row buttons, and no header label
-            <ul class="table-examples__list">
-                <li>Teach Edit Instructor Side Panel - Exams</li>
-                <li>Teach Edit Student Side Panel - Student Groups</li>
-            </ul>
-        </div>
-        <Table
-            class="table-examples__10"
-            theme="open"
-            :rows="table10.rows"
-            :columns="table10.columns"
-            :show-header="false"
-            :show-row-button="true"
-            row-button-text="Remove"
-            :row-button-styles="{ width: '69px' }"
-            :grid="grid"
-            @rowButtonClicked="table10.rowButtonClicked"
-            @sort="table10.updateSortSettings"
-        />
-    </div>
-</template>
-
-<script>
-import Table from '../Tables/Table.vue'
-
-// const grid = {
-//     'display': 'inline-grid',
-//     'grid-template-columns': 'repeat(2, minmax(150px, 1fr))',
-// }
-const grid = undefined
-
-const rows1 = [{
-    id: 1,
-    exampleApp: 'Teach Admin',
-    data: 'Organizations',
-}]
-const columns1 = [{
-    name: 'App Context',
-    propName: 'exampleApp',
-    styles: {
-        'min-width': '260px',
-    },
-}, {
-    name: 'Data',
-    propName: 'data',
-    styles: {
-        'min-width': '260px',
-    },
-}]
-const table1 = {
-    rows: rows1,
-    columns: columns1,
-    defaultSelectedRowId: 1,
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    searchStringChanged: (searchString) => {
-        // noop
-    },
-    rowClicked: (row) => {
-        // noop
-    }
-}
-
-const rows2 = [{
-    id: 1,
-    exampleApp: 'Teach Admin',
-    data: 'Instructors',
-}, {
-    id: 2,
-    exampleApp: 'Teach Admin',
-    data: 'Instructor\'s Visible Groups',
-}, {
-    id: 3,
-    exampleApp: 'Teach Admin',
-    data: 'Students',
-}, {
-    id: 4,
-    exampleApp: 'Teach Admin',
-    data: 'Student\'s Groups',
-}, {
-    id: 5,
-    exampleApp: 'Teach Admin',
-    data: 'Groups',
-}, {
-    id: 6,
-    exampleApp: 'Teach Admin',
-    data: 'Group\'s Students',
-}, {
-    id: 7,
-    exampleApp: 'Teach Admin',
-    data: 'Exams',
-}, {
-    id: 8,
-    exampleApp: 'Teach Admin',
-    data: 'Licenses',
-}]
-const columns2 = columns1
-const table2 = {
-    rows: rows2,
-    columns: columns2,
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    searchStringChanged: (searchString) => {
-        // noop
-    },
-    rowClicked: (row) => {
-        // noop
-    }
-}
-
-const rows3 = [{
-    id: 1,
-    exampleApp: 'Teach Settings',
-    data: 'Groups',
-}]
-const columns3 = columns1
-const table3 = {
-    rows: rows3,
-    columns: columns3,
-    segmentControlChange: (controlChange) => {
-        // noop
-    },
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    editClicked: (row) => {
-        // noop
-    }
-}
-
-const rows4 = [{
-    id: 1,
-    exampleApp: 'Teach Settings',
-    data: 'Instructors',
-}]
-const columns4 = columns1
-const table4 = {
-    rows: rows4,
-    columns: columns4,
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    editClicked: (row) => {
-        // noop
-    }
-}
-
-const rows5 = [{
-    id: 1,
-    exampleApp: 'Teach Settings',
-    data: 'Seats',
-}]
-const columns5 = columns1
-const table5 = {
-    rows: rows5,
-    columns: columns5,
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    checkedRowsChanged: (checkedRows) => {
-        // noop
-    }
-}
-
-const rows6 = [{
-    id: 1,
-    exampleApp: 'Teach Settings',
-    data: 'Students',
-}]
-const columns6 = columns1
-const table6 = {
-    rows: rows6,
-    columns: columns6,
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    updateSearchString: (searchString) => {
-        // noop
-    },
-    editClicked: (row) => {
-        // noop
-    },
-    buttonClicked: (row) => {
-        // noop
-    }
-}
-
-const rows7 = [{
-    id: 1,
-    exampleApp: 'Teach Add Group Side Panel',
-    data: 'Add Students',
-}, {
-    id: 2,
-    exampleApp: 'Teach Edit Group -> Select Students Side Panel',
-    data: 'Students',
-}, {
-    id: 3,
-    exampleApp: 'Teach Admin -> Add Exams Side Panel',
-    data: 'Exams',
-}]
-const columns7 = columns1
-const table7 = {
-    rows: rows7,
-    columns: columns7,
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    updateSearchString: (searchString) => {
-        // noop
-    },
-    updatedCheckedRows: (checkedRows) => {
-        // noop
-    }
-}
-
-const rows8 = [{
-    id: 1,
-    exampleApp: 'Teach Add Group Side Panel',
-    data: 'Preview Group',
-}, {
-    id: 2,
-    exampleApp: 'Teach Edit Group Side Panel',
-    data: 'Group Students',
-}]
-const columns8 = columns1
-const table8 = {
-    rows: rows8,
-    columns: columns8,
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    updateSearchString: (searchString) => {
-        // noop
-    },
-    rowButtonClicked: (checkedRows) => {
-        // noop
-    }
-}
-
-const rows9 = [{
-    id: 1,
-    exampleApp: 'Teach Add Students Side Panel',
-    data: 'Add Emails',
-}]
-const columns9 = columns1
-const table9 = {
-    rows: rows9,
-    columns: columns9,
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-}
-
-const rows10 = [{
-    id: 1,
-    exampleApp: 'Teach Edit Instructor Side Panel',
-    data: 'Exams',
-}, {
-    id: 2,
-    exampleApp: 'Teach Edit Student Side Panel',
-    data: 'Student Groups',
-}]
-const columns10 = columns1
-const table10 = {
-    rows: rows10,
-    columns: columns10,
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    rowButtonClicked: (row) => {
-        // noop
-    }
-}
-
-const rows11 = [{
-    id: 1,
-    exampleApp: 'Teach Stats Sidebar',
-    data: 'Groups',
-}]
-const columns11 = columns1
-const table11 = {
-    actions: [{
-        id: 1,
-        icon: 'edit',
-        text: 'Edit Groups',
-    }],
-    rows: rows11,
-    columns: columns11,
-    defaultSelectedRowId: 1,
-    showDragAndDrop: false,
-    actionClicked: (action) => {
-        if (action.text === 'Edit Groups') {
-            table11.showDragAndDrop = !table11.showDragAndDrop
-        }
-    },
-    rowClicked: (row) => {
-        // noop
-    },
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    rowMoved: (row) => {
-        // noop
-    }
-}
-
-const rows12 = [{
-    id: 1,
-    exampleApp: 'Teach Stats Sidebar',
-    data: 'Students',
-}]
-const columns12 = columns1
-const table12 = {
-    actions: [{
-        id: 2,
-        icon: 'add',
-        text: 'Add Students',
-    }],
-    filterChips: [{
-        id: 1,
-        text: 'Example Filter',
-    }],
-    rows: rows12,
-    columns: columns12,
-    defaultSelectedRowId: 1,
-    showDragAndDrop: false,
-    actionClicked: (action) => {
-        // noop
-    },
-    rowClicked: (row) => {
-        // noop
-    },
-    updateSortSettings: (sortSettings) => {
-        // noop
-    },
-    updateSearchString: (searchString) => {
-        // noop
-    }
-}
-
-export default {
-    components: {
-        Table,
-    },
-    data () {
-        return {
-            grid,
-            table1,
-            table2,
-            table3,
-            table4,
-            table5,
-            table6,
-            table7,
-            table8,
-            table9,
-            table10,
-            table11,
-            table12,
-        }
-    },
-}
-</script>
-
-<style>
-.table-examples__1,
-.table-examples__2,
-.table-examples__3,
-.table-examples__4,
-.table-examples__5,
-.table-examples__6,
-.table-examples__7,
-.table-examples__8,
-.table-examples__9,
-.table-examples__10,
-.table-examples__11,
-.table-examples__12 {
-    margin-bottom: 72px;
-}
-
-.table-examples__summary {
-    background-color: #f4f5f9;
-    padding: 10px;
-    margin-bottom: 12px;
-    border-radius: 6px;
-}
-
-.table-examples__list {
-    margin: 0;
-}
-</style>
-```