julian/chrom-tool
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

support delete extensions

Browse Source
This commit is contained in:
Julian Freeman
2026-04-17 14:54:16 -04:00
parent d724db6f0f
commit 469b684876
12 changed files with 1253 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/components/browser-data/ExtensionsList.vue
View File

@@ -1,29 +1,89 @@
<script setup lang="ts">
import { computed } from "vue";
import type { ExtensionSortKey, ExtensionSummary } from "../../types/browser";
defineProps<{
const props = defineProps<{
extensions: ExtensionSummary[];
sortKey: ExtensionSortKey;
extensionMonogram: (name: string) => string;
selectedExtensionIds: string[];
deleteBusy: boolean;
}>();
const emit = defineEmits<{
"update:sortKey": [value: ExtensionSortKey];
showProfiles: [extensionId: string];
toggleExtension: [extensionId: string];
toggleAllExtensions: [];
deleteExtension: [extensionId: string];
deleteSelected: [];
}>();
const allSelected = computed(
() =>
props.extensions.length > 0 &&
props.extensions.every((extension) => props.selectedExtensionIds.includes(extension.id)),
);
function isSelected(extensionId: string) {
return props.selectedExtensionIds.includes(extensionId);
}
</script>
<template>
<section class="table-section">
<div class="extensions-toolbar">
<label class="toolbar-checkbox" :class="{ disabled: !extensions.length }">
<input
type="checkbox"
class="native-checkbox"
:checked="allSelected"
:disabled="!extensions.length || deleteBusy"
@change="emit('toggleAllExtensions')"
/>
<span class="custom-checkbox" :class="{ checked: allSelected }" aria-hidden="true">
<svg viewBox="0 0 16 16">
<path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
</svg>
</span>
<span>Select All</span>
</label>
<button
class="danger-button"
type="button"
:disabled="!selectedExtensionIds.length || deleteBusy"
@click="emit('deleteSelected')"
>
{{ deleteBusy ? "Deleting..." : `Delete Selected (${selectedExtensionIds.length})` }}
</button>
</div>
<div v-if="extensions.length" class="data-table">
<div class="data-table-header extensions-grid">
<div class="header-cell checkbox-cell">Pick</div>
<div class="header-cell icon-cell">Icon</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
<button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="emit('update:sortKey', 'id')">Extension ID</button>
<div class="header-cell actions-cell">Profiles</div>
<div class="header-cell actions-cell">Actions</div>
</div>
<div class="data-table-body styled-scrollbar">
<article v-for="extension in extensions" :key="extension.id" class="data-table-row extensions-grid">
<div class="row-cell checkbox-cell">
<label class="table-checkbox" :class="{ disabled: deleteBusy }">
<input
type="checkbox"
class="native-checkbox"
:checked="isSelected(extension.id)"
:disabled="deleteBusy"
@change="emit('toggleExtension', extension.id)"
/>
<span class="custom-checkbox" :class="{ checked: isSelected(extension.id) }" aria-hidden="true">
<svg viewBox="0 0 16 16">
<path d="M3.5 8.2L6.4 11.1L12.5 4.9" />
</svg>
</span>
</label>
</div>
<div class="extension-icon table-icon" :class="{ filled: Boolean(extension.iconDataUrl) }">
<img v-if="extension.iconDataUrl" :src="extension.iconDataUrl" :alt="`${extension.name} icon`" />
<span v-else>{{ extensionMonogram(extension.name) }}</span>
@@ -37,6 +97,14 @@ const emit = defineEmits<{
<span>View</span>
<span class="badge neutral">{{ extension.profileIds.length }}</span>
</button>
<button
class="danger-button inline-danger-button"
type="button"
:disabled="deleteBusy"
@click="emit('deleteExtension', extension.id)"
>
Delete
</button>
</div>
</article>
</div>
@@ -49,11 +117,94 @@ const emit = defineEmits<{
<style scoped>
.table-section {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0;
height: 100%;
min-height: 0;
}
.extensions-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.toolbar-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text);
font-size: 0.88rem;
cursor: pointer;
}
.toolbar-checkbox.disabled {
opacity: 0.55;
cursor: default;
}
.native-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.table-checkbox {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.table-checkbox.disabled {
cursor: default;
opacity: 0.5;
}
.custom-checkbox {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 7px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.78),
0 4px 10px rgba(15, 23, 42, 0.06);
}
.custom-checkbox svg {
width: 12px;
height: 12px;
}
.custom-checkbox path {
fill: none;
stroke: #fff;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
}
.custom-checkbox.checked {
border-color: rgba(47, 111, 237, 0.2);
background: linear-gradient(135deg, #2f6fed, #5aa1f7);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 8px 18px rgba(47, 111, 237, 0.22);
}
.custom-checkbox.checked path {
opacity: 1;
}
.data-table {
display: flex;
flex-direction: column;
@@ -74,7 +225,7 @@ const emit = defineEmits<{
.extensions-grid {
display: grid;
grid-template-columns: 60px minmax(180px, 1.1fr) minmax(220px, 1fr) 154px;
grid-template-columns: 52px 60px minmax(180px, 1.1fr) minmax(220px, 1fr) 250px;
gap: 12px;
align-items: center;
}
@@ -182,6 +333,18 @@ const emit = defineEmits<{
.actions-cell {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.checkbox-cell {
display: flex;
justify-content: center;
}
.inline-danger-button {
padding: 7px 10px;
border-radius: 12px;
font-size: 0.8rem;
}
.icon-cell {
@@ -190,16 +353,22 @@ const emit = defineEmits<{
@media (max-width: 900px) {
.extensions-grid {
grid-template-columns: 56px minmax(160px, 1fr) minmax(160px, 1fr) 148px;
grid-template-columns: 52px 56px minmax(160px, 1fr) minmax(160px, 1fr) 220px;
}
}
@media (max-width: 720px) {
.extensions-grid {
grid-template-columns: 56px minmax(0, 1fr) 132px;
.extensions-toolbar {
flex-direction: column;
align-items: stretch;
}
.extensions-grid > :nth-child(3) {
.extensions-grid {
grid-template-columns: 52px 56px minmax(0, 1fr) 132px;
}
.extensions-grid > :nth-child(4),
.extensions-grid > :nth-child(5) {
display: none;
}
}