@v1nt1248/3nclient-lib 0.0.42 → 0.1.1

package/src/components/ui3n-table.vue

@@ -1,110 +1,110 @@
 <script lang="ts" setup>
-  import { computed, ref } from 'vue'
-  import { Icon } from '@iconify/vue'
-  import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue'
-  import type { ListingEntryTypeExtended, EntityAction, SortField } from '../constants'
-
-  export interface Ui3nTableProps {
-    items: ListingEntryTypeExtended[];
-    textIfEmpty?: string;
+import { computed, ref } from 'vue';
+import { Icon } from '@iconify/vue';
+import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue';
+import type { ListingEntryTypeExtended, EntityAction, SortField } from '../constants';
+
+export interface Ui3nTableProps {
+  items: ListingEntryTypeExtended[];
+  textIfEmpty?: string;
+}
+
+export interface Ui3nTableEmits {
+  (ev: 'go', name: string): void;
+  (ev: 'action', value: { action: EntityAction, entity: ListingEntryTypeExtended }): void;
+}
+
+const props = defineProps<Ui3nTableProps>();
+const emits = defineEmits<Ui3nTableEmits>();
+
+const sortField = ref<SortField>('name');
+const sortDirection = ref<'asc' | 'desc'>('asc');
+
+const sortByName = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
+  if (sortDirection.value === 'desc') {
+    return itemA.name < itemB.name ? 1 : -1;
   }
-
-  export interface Ui3nTableEmits {
-    (ev: 'go', name: string): void;
-    (ev: 'action', value: { action: EntityAction, entity: ListingEntryTypeExtended }): void;
+  return itemA.name > itemB.name ? 1 : -1;
+};
+const sortByType = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
+  if (sortDirection.value === 'desc') {
+    return itemA.type! < itemB.type! ? 1 : -1;
   }
-
-  const props = defineProps<Ui3nTableProps>()
-  const emit = defineEmits<Ui3nTableEmits>()
-
-  const sortField = ref<SortField>('name')
-  const sortDirection = ref<'asc'|'desc'>('asc')
-
-  const sortByName = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
-    if (sortDirection.value === 'desc') {
-      return itemA.name < itemB.name ? 1 : -1
-    }
-    return itemA.name > itemB.name ? 1 : -1
+  return itemA.type! > itemB.type! ? 1 : -1;
+};
+const sortByCreatedAt = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
+  const tsA = itemA.ctime!.getTime();
+  const tsB = itemB.ctime!.getTime();
+  return sortDirection.value === 'asc' ? tsA - tsB : tsB - tsA;
+};
+const sortByChangedAt = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
+  const tsA = itemA.mtime!.getTime();
+  const tsB = itemB.mtime!.getTime();
+  return sortDirection.value === 'asc' ? tsA - tsB : tsB - tsA;
+};
+
+const placeholder = computed(() => props.textIfEmpty || 'Empty');
+const sortMap = {
+  name: sortByName,
+  type: sortByType,
+  createdAt: sortByCreatedAt,
+  changedAt: sortByChangedAt,
+};
+const sortedItems = computed(() => [...props.items].sort(sortMap[sortField.value]));
+const changeSort = (field: SortField) => {
+  if (field !== sortField.value) {
+    sortField.value = field;
+    sortDirection.value = 'asc';
+  } else {
+    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
   }
-  const sortByType = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
-    if (sortDirection.value === 'desc') {
-      return itemA.type! < itemB.type! ? 1 : -1
-    }
-    return itemA.type! > itemB.type! ? 1 : -1
+};
+
+const getTimeAsString = (date: Date) => {
+  return date
+    ? `${`${date.getDate()}`.padStart(2, '0')}/${`${date.getMonth() + 1}`.padStart(2, '0')}/${date.getFullYear()} ${`${date.getHours()}`.padStart(2, '0')}:${`${date.getMinutes()}`.padStart(2, '0')}`
+    : '';
+};
+
+const handleClick = (ev: MouseEvent) => {
+  ev.preventDefault();
+  const { target } = ev;
+  const { id, classList } = target as Element;
+  if (classList.contains('ui3n-table__item') && id) {
+    return props.items.find(i => i.id === id);
   }
-  const sortByCreatedAt = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
-    const tsA = itemA.ctime!.getTime()
-    const tsB = itemB.ctime!.getTime()
-    return sortDirection.value === 'asc' ? tsA - tsB : tsB - tsA
+  return undefined;
+};
+const onClick = (ev: MouseEvent) => {
+  handleClick(ev);
+  const entity = handleClick(ev);
+  if (entity && entity.isFolder && entity.fullPath) {
+    emits('go', entity.fullPath);
   }
-  const sortByChangedAt = (itemA: ListingEntryTypeExtended, itemB: ListingEntryTypeExtended) => {
-    const tsA = itemA.mtime!.getTime()
-    const tsB = itemB.mtime!.getTime()
-    return sortDirection.value === 'asc' ? tsA - tsB : tsB - tsA
+};
+const onRightClick = (ev: MouseEvent) => {
+  handleClick(ev);
+  const entity = handleClick(ev);
+  if (entity) {
+    emits('action', { action: 'open:menu', entity });
   }
+};
 
-  const placeholder = computed(() => props.textIfEmpty || 'Empty')
-  const sortMap = {
-    name: sortByName,
-    type: sortByType,
-    createdAt: sortByCreatedAt,
-    changedAt: sortByChangedAt,
-  }
-  const sortedItems =computed(() => [...props.items].sort(sortMap[sortField.value]))
-  const changeSort = (field: SortField) => {
-    if (field !== sortField.value) {
-      sortField.value = field
-      sortDirection.value = 'asc'
-    } else {
-      sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
-    }
-  }
-
-  const getTimeAsString = (date: Date) => {
-    return date
-      ? `${`${date.getDate()}`.padStart(2, '0')}/${`${date.getMonth() + 1}`.padStart(2, '0')}/${date.getFullYear()} ${`${date.getHours()}`.padStart(2, '0')}:${`${date.getMinutes()}`.padStart(2, '0')}`
-      : ''
-  }
-
-  const handleClick = (ev: MouseEvent) => {
-    ev.preventDefault()
-    const { target } = ev
-    const { id, classList } = target as Element
-    if (classList.contains('ui3n-table__item') && id) {
-      return props.items.find(i => i.id === id)
-    }
-    return undefined
-  }
-  const onClick = (ev: MouseEvent) => {
-    handleClick(ev)
-    const entity = handleClick(ev)
-    if (entity && entity.isFolder && entity.fullPath) {
-      emit('go', entity.fullPath)
-    }
-  }
-  const onRightClick = (ev: MouseEvent) => {
-    handleClick(ev)
-    const entity = handleClick(ev)
-    if (entity) {
-      emit( 'action', { action: 'open-menu', entity })
-    }
-  }
-
-  const handleActions = (ev: MouseEvent, action: EntityAction, entity: ListingEntryTypeExtended) => {
-    ev.preventDefault()
-    ev.stopImmediatePropagation()
-    emit('action', { action, entity })
-  }
+const handleActions = (ev: MouseEvent, action: EntityAction, entity: ListingEntryTypeExtended) => {
+  ev.preventDefault();
+  ev.stopImmediatePropagation();
+  emits('action', { action, entity });
+};
 </script>
 
 <template>
-  <div class="ui3n-table">
-    <div class="ui3n-table__header">
+  <div :class="$style.table">
+    <div :class="$style.header">
       <div
-        class="ui3n-table__header-cell ui3n-table__header-cell--sortable ui3n-table__name"
+        :class="[$style.cellHeader, $style.cellHeaderSortable, $style.columnName]"
         @click="changeSort('name')"
       >
-        <span class="ui3n-table__header-text">Name</span>
+        <span :class="$style.cellHeaderText">Name</span>
         <ui3n-table-sort-icon
           v-if="sortField === 'name'"
           :value="sortDirection"
@@ -112,10 +112,10 @@
         />
       </div>
       <div
-        class="ui3n-table__header-cell ui3n-table__header-cell--sortable ui3n-table__type"
+        :class="[$style.cellHeader, $style.cellHeaderSortable, $style.columnType]"
         @click="changeSort('type')"
       >
-        <span class="ui3n-table__header-text">Type</span>
+        <span :class="$style.cellHeaderText">Type</span>
         <ui3n-table-sort-icon
           v-if="sortField === 'type'"
           :value="sortDirection"
@@ -124,10 +124,10 @@
       </div>
 
       <div
-        class="ui3n-table__header-cell ui3n-table__header-cell--sortable ui3n-table__changedAt"
+        :class="[$style.cellHeader, $style.cellHeaderSortable, $style.columnChangeAt]"
         @click="changeSort('changedAt')"
       >
-        <span class="ui3n-table__header-text">Changed At</span>
+        <span :class="$style.cellHeaderText">Changed At</span>
         <ui3n-table-sort-icon
           v-if="sortField === 'changedAt'"
           :value="sortDirection"
@@ -136,12 +136,12 @@
       </div>
     </div>
 
-    <div class="ui3n-table__content">
+    <div :class="$style.content">
       <div
         v-for="item in sortedItems"
         :id="item.id"
         :key="item.id"
-        class="ui3n-table__item"
+        :class="$style.row"
         @click="onClick"
         @click.right="onRightClick"
       >
@@ -149,15 +149,15 @@
           :icon="item.isFolder ? 'folder' : 'subject'"
           :width="16"
           :height="16"
-          class="ui3n-table__item-icon"
+          :class="$style.rowIcon"
         />
-        <div class="ui3n-table__item-cell ui3n-table__name">
+        <div :class="[$style.cellRow, $style.columnName]">
           {{ item.name }}
         </div>
-        <div class="ui3n-table__item-cell ui3n-table__type">
+        <div :class="[$style.cellRow, $style.columnType]">
           {{ item.ext || '' }}
         </div>
-        <div class="ui3n-table__item-cell ui3n-table__changedAt">
+        <div :class="[$style.cellRow, $style.columnChangeAt]">
           {{ getTimeAsString(item.mtime!) }}
         </div>
 
@@ -166,7 +166,7 @@
           icon="bookmark"
           :width="12"
           :height="12"
-          class="ui3n-table__item-bookmark"
+          :class="$style.rowBookmark"
           @click="handleActions($event, 'add:favorites', item)"
         />
 
@@ -174,14 +174,14 @@
           icon="baseline-edit"
           :width="12"
           :height="12"
-          class="ui3n-table__item-rename"
+          :class="$style.rowRename"
           @click="handleActions($event, 'rename', item)"
         />
       </div>
 
       <div
         v-if="!sortedItems.length"
-        class="ui3n-table__empty"
+        :class="$style.emptyText"
       >
         {{ placeholder }}
       </div>
@@ -189,135 +189,140 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-  @import "../assets/styles/mixins";
-
-  .ui3n-table {
-    --table-header-height: 36px;
-    --table-row-height: 28px;
-
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    &__header {
-      position: sticky;
-      top: 0;
-      display: flex;
-      width: 100%;
-      height: var(--table-header-height);
-      justify-content: flex-start;
-      align-items: center;
-      padding: 0 calc(var(--base-size) * 2);
-      background-color: var(--gray-50);
-
-      &-cell {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        font-size: var(--font-13);
-        line-height: var(--font-18);
-        font-weight: 500;
-        color: var(--black-90);
-
-        &--sortable {
-          cursor: pointer;
-        }
-      }
-
-      &-text {
-        display: block;
-        position: relative;
-        @include text-overflow-ellipsis(100%)
-      }
-    }
-
-    &__item {
-      display: flex;
-      width: 100%;
-      height: var(--table-row-height);
-      justify-content: flex-start;
-      align-items: center;
-      padding: 0 calc(var(--base-size) * 2) 0 calc(var(--base-size) * 5);
-      cursor: pointer;
-      border-bottom: 1px solid var(--gray-50);
-
-      &-bookmark,
-      &-rename {
-        display: none;
-        position: absolute;
-        z-index: 1;
-        color: var(--black-30);
-      }
-
-      &-bookmark {
-        left: 2px;
-      }
-
-      &-rename {
-        right: calc(var(--base-size) * 13 + 24px);
-      }
-
-      &-icon {
-        position: absolute;
-        left: calc(var(--base-size) * 2);
-        color: var(--black-30);
-        pointer-events: none;
-      }
-
-      &-cell {
-        position: relative;
-        font-weight: 400;
-        pointer-events: none;
-      }
-
-      &:hover {
-        background-color: var(--blue-main-30);
-
-        .ui3n-table__item-bookmark,
-        .ui3n-table__item-rename {
-          display: block;
-        }
-
-        .ui3n-table__item-icon {
-          color: var(--blue-main);
-        }
-      }
+<style lang="scss" module>
+@import "../assets/styles/mixins";
+
+.table {
+  --table-header-height: 36px;
+  --table-row-height: 28px;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  display: flex;
+  width: 100%;
+  height: var(--table-header-height);
+  justify-content: flex-start;
+  align-items: center;
+  padding: var(--spacing-m);
+  background-color: var(--color-bg-table-header-default);
+}
+
+.cellHeader {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: var(--font-14);
+  line-height: var(--font-20);
+  font-weight: 500;
+  color: var(--color-text-table-primary-default);
+}
+
+.cellHeaderSortable {
+  cursor: pointer;
+}
+
+.cellHeaderText {
+  display: block;
+  position: relative;
+  @include text-overflow-ellipsis(100%);
+}
+
+.row {
+  display: flex;
+  width: 100%;
+  height: var(--table-row-height);
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0 var(--spacing-m) 0 calc(var(--spacing-l) + var(--spacing-s));
+  cursor: pointer;
+  border-bottom: 1px solid var(--color-border-table-primary-default);
+
+  &:hover {
+    background-color: var(--color-bg-control-primary-hover);
+
+    .rowBookmark,
+    .rowRename {
+      display: block;
     }
 
-    &__name {
-      flex: 1 0;
-
-      &.ui3n-table__item-cell {
-        font-size: var(--font-12);
-      }
+    .rowIcon {
+      color: var(--color-icon-table-accent-hover);
     }
+  }
+}
+
+.rowBookmark,
+.rowRename {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  color: var(--color-icon-control-accent-unselected);
+}
+
+.rowBookmark {
+  left: 2px;
+}
+
+.rowRename {
+  right: calc(var(--spacing-l) * 4);
+}
+
+.rowIcon {
+  position: absolute;
+  left: var(--spacing-m);
+  color: var(--color-icon-table-secondary-default);
+  pointer-events: none;
+}
+
+.cellRow {
+  position: relative;
+  font-weight: 400;
+  pointer-events: none;
+}
+
+.columnName {
+  flex: 1 0;
+
+  .rowCell {
+    font-size: var(--font-12);
+  }
+}
 
-    &__type {
-      width: calc(var(--base-size) * 7);
-      text-align: center;
+.columnType {
+  position: relative;
+  width: 56px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-      &.ui3n-table__item-cell {
-        font-size: var(--font-10);
-      }
-    }
 
-    &__changedAt {
-      width: calc(var(--base-size) * 13);
+  .rowCell {
+    font-size: var(--font-10);
+  }
+}
 
-      &.ui3n-table__item-cell {
-        font-size: var(--font-11);
-      }
-    }
+.columnChangeAt {
+  position: relative;
+  width: 104px;
 
-    &__empty {
-      font-size: var(--font-20);
-      font-style: italic;
-      color: var(--black-30);
-      text-align: center;
-      padding-top: calc(var(--base-size) * 10);
-    }
+  .rowCell {
+    font-size: var(--font-12);
   }
+}
+
+.emptyText {
+  font-size: var(--font-14);
+  line-height: var(--font-20);
+  color: var(--color-text-control-secondary-default);
+  text-align: center;
+  padding: 56px 0;
+}
 </style>