@dolanske/vui 1.0.4 → 1.1.1

package/src/components/Table/SelectAll.vue

@@ -1,23 +1,23 @@
-<script setup lang='ts'>
-import type { TableSelectionProvide } from './table'
-import { inject } from 'vue'
-import Button from '../Button/Button.vue'
-import { TableSelectionProvideSymbol } from './table'
-
-const {
-  isSelectedAll,
-  enabled,
-  selectAllRows,
-} = inject(TableSelectionProvideSymbol) as TableSelectionProvide
-</script>
-
-<template>
-  <th v-if="enabled" class="vui-table-interactive-cell" :class="{ selected: isSelectedAll }">
-    <Button
-      square
-      plain
-      :icon="isSelectedAll ? 'ph:check-square-fill' : 'ph:square'"
-      @click="selectAllRows()"
-    />
-  </th>
-</template>
+<script setup lang='ts'>
+import type { TableSelectionProvide } from './table'
+import { inject } from 'vue'
+import Button from '../Button/Button.vue'
+import { TableSelectionProvideSymbol } from './table'
+
+const {
+  isSelectedAll,
+  enabled,
+  selectAllRows,
+} = inject(TableSelectionProvideSymbol) as TableSelectionProvide
+</script>
+
+<template>
+  <th v-if="enabled" class="vui-table-interactive-cell" :class="{ selected: isSelectedAll }">
+    <Button
+      square
+      plain
+      :icon="isSelectedAll ? 'ph:check-square-fill' : 'ph:square'"
+      @click="selectAllRows()"
+    />
+  </th>
+</template>

package/src/components/Table/SelectRow.vue

@@ -1,30 +1,30 @@
-<script setup lang='ts'>
-import type { BaseRow, TableSelectionProvide } from './table'
-import { computed, inject } from 'vue'
-import { isObjectInSet } from '../../shared/helpers'
-import Button from '../Button/Button.vue'
-import { TableSelectionProvideSymbol } from './table'
-
-interface Props {
-  row: BaseRow
-}
-
-const props = defineProps<Props>()
-const {
-  enabled,
-  selectRow,
-  selectedRows,
-} = inject(TableSelectionProvideSymbol) as TableSelectionProvide
-const isSelected = computed(() => isObjectInSet(selectedRows.value, props.row))
-</script>
-
-<template>
-  <td v-if="enabled" class="vui-table-interactive-cell" :class="{ selected: isSelected }">
-    <Button
-      square
-      plain
-      :icon="isSelected ? 'ph:check-square-fill' : 'ph:square'"
-      @click="selectRow(props.row)"
-    />
-  </td>
-</template>
+<script setup lang='ts'>
+import type { BaseRow, TableSelectionProvide } from './table'
+import { computed, inject } from 'vue'
+import { isObjectInSet } from '../../shared/helpers'
+import Button from '../Button/Button.vue'
+import { TableSelectionProvideSymbol } from './table'
+
+interface Props {
+  row: BaseRow
+}
+
+const props = defineProps<Props>()
+const {
+  enabled,
+  selectRow,
+  selectedRows,
+} = inject(TableSelectionProvideSymbol) as TableSelectionProvide
+const isSelected = computed(() => isObjectInSet(selectedRows.value, props.row))
+</script>
+
+<template>
+  <td v-if="enabled" class="vui-table-interactive-cell" :class="{ selected: isSelected }">
+    <Button
+      square
+      plain
+      :icon="isSelected ? 'ph:check-square-fill' : 'ph:square'"
+      @click="selectRow(props.row)"
+    />
+  </td>
+</template>

package/src/components/Table/index.ts

@@ -1,7 +1,7 @@
-import Cell from './Cell.vue'
-import Head from './Head.vue'
-import Root from './Root.vue'
-import SelectAll from './SelectAll.vue'
-import SelectRow from './SelectRow.vue'
-
-export { Cell, Head, Root, SelectAll, SelectRow }
+import Cell from './Cell.vue'
+import Head from './Head.vue'
+import Root from './Root.vue'
+import SelectAll from './SelectAll.vue'
+import SelectRow from './SelectRow.vue'
+
+export { Cell, Head, Root, SelectAll, SelectRow }

package/src/components/Table/table.scss

@@ -1,154 +1,154 @@
-.vui-table-container {
-  display: block;
-  width: 100%;
-  border-radius: var(--border-radius-m);
-
-  &.fixed table {
-    table-layout: fixed;
-  }
-
-  &.outer-border {
-    border: 1px solid var(--color-border);
-  }
-
-  &.nowrap table tr {
-    td {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &.separated-rows table {
-    th,
-    td {
-      border-bottom: 1px solid var(--color-border);
-    }
-  }
-
-  &.separated-cells table {
-    th,
-    td {
-      border-right: 1px solid var(--color-border);
-
-      &:last-of-type {
-        border-right: none;
-      }
-    }
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    text-indent: 0;
-    border: none;
-    overflow: unset;
-
-    tr {
-      border: none;
-
-      &:first-child td {
-        border-top: 0 !important;
-      }
-
-      &:has(.vui-table-interactive-cell.selected) {
-        td {
-          background-color: var(--color-bg-raised);
-        }
-      }
-
-      &:last-child td {
-        border-bottom: 0;
-      }
-    }
-
-    th {
-      border-top: 0 !important;
-    }
-
-    th,
-    td {
-      font-size: var(--font-size-m);
-      border: none;
-      border-left: none !important;
-      transition: var(--transition-fast);
-      position: relative;
-      z-index: 1;
-
-      // Fixed width, only houses a checkbox component
-      &.vui-table-interactive-cell {
-        --checkbox-cell-width: calc(calc(var(--space-xs) * 2) + 32px);
-        width: var(--checkbox-cell-width);
-        min-width: var(--checkbox-cell-width);
-        max-width: var(--checkbox-cell-width);
-        height: auto;
-        padding-inline: var(--space-xs);
-        padding-block: 0;
-        vertical-align: middle;
-
-        &.selected .vui-button.icon .vui-button-slot svg path {
-          color: var(--color-text) !important;
-        }
-
-        .vui-button {
-          vertical-align: middle;
-          display: inline-flex;
-
-          &.icon .vui-button-slot svg {
-            width: 22px !important;
-            height: 22px !important;
-
-            path {
-              color: var(--color-text-light);
-            }
-          }
-        }
-      }
-
-      .vui-cell-context {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 2;
-        position: absolute;
-        inset: 0;
-        padding: var(--space-xs);
-        background-color: var(--color-bg);
-        left: unset;
-      }
-    }
-
-    th {
-      .vui-table-th-content {
-        color: var(--color-text);
-        font-size: var(--font-size-xs);
-        text-transform: uppercase;
-        font-weight: var(--font-weight-semibold);
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        gap: var(--space-xs);
-
-        .vui-table-sort-button:not(.active) svg path {
-          color: var(--color-text-light);
-        }
-      }
-    }
-  }
-
-  .vui-table-pagination-wrap {
-    padding: var(--space-xs) var(--space-m);
-    border-top: 1px solid var(--color-border);
-
-    p {
-      font-size: var(--font-size-s);
-      color: var(--color-text-lighter);
-    }
-  }
-}
-
-:root.light {
-  .vui-table-container table tr:has(.vui-table-interactive-cell.selected) td {
-    background-color: var(--color-bg-medium);
-  }
-}
+.vui-table-container {
+  display: block;
+  width: 100%;
+  border-radius: var(--border-radius-m);
+
+  &.fixed table {
+    table-layout: fixed;
+  }
+
+  &.outer-border {
+    border: 1px solid var(--color-border);
+  }
+
+  &.nowrap table tr {
+    td {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &.separated-rows table {
+    th,
+    td {
+      border-bottom: 1px solid var(--color-border);
+    }
+  }
+
+  &.separated-cells table {
+    th,
+    td {
+      border-right: 1px solid var(--color-border);
+
+      &:last-of-type {
+        border-right: none;
+      }
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    text-indent: 0;
+    border: none;
+    overflow: unset;
+
+    tr {
+      border: none;
+
+      &:first-child td {
+        border-top: 0 !important;
+      }
+
+      &:has(.vui-table-interactive-cell.selected) {
+        td {
+          background-color: var(--color-bg-raised);
+        }
+      }
+
+      &:last-child td {
+        border-bottom: 0;
+      }
+    }
+
+    th {
+      border-top: 0 !important;
+    }
+
+    th,
+    td {
+      font-size: var(--font-size-m);
+      border: none;
+      border-left: none !important;
+      transition: var(--transition-fast);
+      position: relative;
+      z-index: 1;
+
+      // Fixed width, only houses a checkbox component
+      &.vui-table-interactive-cell {
+        --checkbox-cell-width: calc(calc(var(--space-xs) * 2) + 32px);
+        width: var(--checkbox-cell-width);
+        min-width: var(--checkbox-cell-width);
+        max-width: var(--checkbox-cell-width);
+        height: auto;
+        padding-inline: var(--space-xs);
+        padding-block: 0;
+        vertical-align: middle;
+
+        &.selected .vui-button.icon .vui-button-slot svg path {
+          color: var(--color-text) !important;
+        }
+
+        .vui-button {
+          vertical-align: middle;
+          display: inline-flex;
+
+          &.icon .vui-button-slot svg {
+            width: 22px !important;
+            height: 22px !important;
+
+            path {
+              color: var(--color-text-light);
+            }
+          }
+        }
+      }
+
+      .vui-cell-context {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        position: absolute;
+        inset: 0;
+        padding: var(--space-xs);
+        background-color: var(--color-bg);
+        left: unset;
+      }
+    }
+
+    th {
+      .vui-table-th-content {
+        color: var(--color-text);
+        font-size: var(--font-size-xs);
+        text-transform: uppercase;
+        font-weight: var(--font-weight-semibold);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: var(--space-xs);
+
+        .vui-table-sort-button:not(.active) svg path {
+          color: var(--color-text-light);
+        }
+      }
+    }
+  }
+
+  .vui-table-pagination-wrap {
+    padding: var(--space-xs) var(--space-m);
+    border-top: 1px solid var(--color-border);
+
+    p {
+      font-size: var(--font-size-s);
+      color: var(--color-text-lighter);
+    }
+  }
+}
+
+:root.light {
+  .vui-table-container table tr:has(.vui-table-interactive-cell.selected) td {
+    background-color: var(--color-bg-medium);
+  }
+}