LinuxMirrors/docs/assets/js/components/mirrors-table/index.js

ComponentSystem.register('mirrors-table', {
    template: `
<div class="mirrors-table">
    <t-config-provider :global-config="globalConfig">
        <t-space v-if="!isMobile" align="center" style="margin-bottom: 8px; gap: 20px">
            <blockquote>
                <p>{{ startTitle[0] }} <code>Debian</code>、<code>Ubuntu</code>、<code>CentOS</code>、<code>openEuler</code> {{ startTitle[1] }}</p>
            </blockquote>
            <t-space style="width: 100%">
                <t-popup placement="bottom" :show-arrow="false">
                    <template #content>
                        <t-checkbox-group v-model="selectedCellStatuses" style="padding: 6px" @change="onCellStatusChange">
                            <t-space align="start" direction="vertical" style="gap: 4px">
                                <t-checkbox value="supported">
                                    <t-space align="center" style="gap: 2px">
                                        <t-tag theme="success" variant="light" style="background-color: transparent; vertical-align: -0.35em">
                                            <template #icon>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59L21 7Z"></svg>
                                            </template>
                                        </t-tag>
                                        <span>{{ statusLabels.supported }}</span>
                                    </t-space>
                                </t-checkbox>
                                <t-checkbox value="unsupported">
                                    <t-space align="center" style="gap: 0">
                                        <t-tag theme="danger" variant="light" style="background-color: transparent; vertical-align: -0.35em">
                                            <template #icon>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="vertical-align: -0.2em"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"></svg>
                                            </template>
                                        </t-tag>
                                        <span>{{ statusLabels.unsupported }}</span>
                                    </t-space>
                                </t-checkbox>
                                <t-checkbox value="incompatible">
                                    <t-space align="center" style="gap: 2px">
                                        <t-tag theme="warning" variant="light" style="background-color: transparent; vertical-align: -0.35em">
                                            <svg xmlns="http://www.w3.org/2000/svg" style="margin-left: 2px" width="16" height="16" viewBox="0 0 24 24" style="vertical-align: -0.15em"><path fill="#F6B604" d="M22.11 21.46L2.39 1.73L1.11 3l2.95 2.95A9.95 9.95 0 0 0 2 12c0 5.5 4.5 10 10 10c2.28 0 4.37-.77 6.05-2.06l2.79 2.79l1.27-1.27M12 20c-4.42 0-8-3.58-8-8c0-1.73.56-3.32 1.5-4.62L16.62 18.5A7.78 7.78 0 0 1 12 20M8.17 4.97L6.72 3.5C8.25 2.56 10.06 2 12 2c5.5 0 10 4.5 10 10c0 1.94-.56 3.75-1.5 5.28l-1.47-1.45c.62-1.14.97-2.44.97-3.83c0-4.42-3.58-8-8-8c-1.39 0-2.69.35-3.83.97Z"></svg>
                                        </t-tag>
                                        <span>{{ statusLabels.incompatible }}</span>
                                    </t-space>
                                </t-checkbox>
                            </t-space>
                        </t-checkbox-group>
                    </template>
                    <t-button variant="text" shape="circle">
                        <svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-filter" style="fill: none;"><g id="filter"><path id="fill1" fill="transparent" d="M19.5 4H4.5L10.5 12.5V20H13.5V12.5L19.5 4Z" fill-rule="evenodd" clip-rule="evenodd"></path><path id="stroke1" stroke="currentColor" d="M19.5 4H4.5L10.5 12.5V20H13.5V12.5L19.5 4Z" fill-rule="evenodd" stroke-linecap="square" stroke-width="2" clip-rule="evenodd"></path></g></svg>
                    </t-button>
                </t-popup>
                <t-select
                    v-model="selectedRowFilters"
                    :options="rowFilterOptionsRendered"
                    :min-collapsed-num="1"
                    multiple
                    clearable
                    size="large"
                    :placeholder="rowSelectPlaceholder"
                    style="min-width: 160px; width: 250px"
                    @change="onRowFilterChange"
                />
                <t-select
                    v-model="selectedColumnFilters"
                    :options="filterOptions"
                    :min-collapsed-num="1"
                    multiple
                    clearable
                    size="large"
                    :placeholder="selectPlaceholder"
                    style="min-width: 160px; width: 230px"
                    @change="onFilterChange"
                />
            </div>
        </t-space>
        <blockquote v-if="isMobile">
            <p>{{ startTitle[0] }} <code>Debian</code>、<code>Ubuntu</code>、<code>CentOS</code>、<code>openEuler</code> {{ startTitle[1] }}</p>
        </blockquote>
        <t-table
            :columns="columns"
            :data="data"
            row-key="name"
            size="small"
            verticalAlign="bottom"
            hover
            @data-change="dataChange"
            @filter-change="onTableFilterChange"
        >
            <template v-for="col in columns" :key="col.colKey" #[col.colKey]="{ row }">
                <div v-if="col.colKey === 'name'">
                    <t-popup placement="bottom" :show-arrow="false">
                        <template #content>
                            <t-space direction="vertical" algin="center" style="gap: 2px">
                                <span>{{ row.officialName }}</span>
                                <a :href="row.url" target="_blank" style="color: var(--md-typeset-a-color)">{{ row.domain }}</a>
                            </t-space>
                        </template>
                        <a :href="row.url" target="_blank">
                            <t-space align="center" style="gap: 6px">
                                <span style="display: flex; height: 16px; width: 16px; align-items: center; justify-content: center">
                                    <img v-if="row.icon" :src="'/assets/images/icon/mirrors/' + row.icon" width="16" height="16">
                                </span>
                                <span style="display: flex; align-items: center; justify-content: center">{{ row.name }}</span>
                            </t-space>
                        </a>
                    </t-popup>
                </div>
                <div v-else>
                    <t-tag v-if="typeof row[col.colKey] === 'boolean'" :theme="row[col.colKey] ? 'success' : 'danger'" variant="light" size="small" style="background-color: transparent; height: 26px" style="z-index: 2">
                        <template #icon>
                            <div v-if="row[col.colKey] === true && !['ipv6'].includes(col.colKey) && showSupported">
                                <t-popup placement="bottom" :show-arrow="false">
                                    <template #content>
                                        <a :href="getMirrorSiteBranchUrl(row.domain, col.colKey)" target="_blank" style="color: var(--md-typeset-a-color)">{{ getMirrorSiteBranchUrl(row.domain, col.colKey) }}</a>
                                    </template>
                                    <a :href="getMirrorSiteBranchUrl(row.domain, col.colKey)" target="_blank" style="color: var(--td-success-color)">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59L21 7Z"></svg>
                                    </a>
                                </t-popup>
                            </div>                                               
                            <svg v-else-if="row[col.colKey] === true && showSupported" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59L21 7Z"></svg>
                            <svg v-else-if="row[col.colKey] === false && showUnsupported" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"></svg>
                        </template>
                    </t-tag>
                    <t-tag v-else theme="warning" variant="light" size="small" style="background-color: transparent; height: 26px">
                        <template #icon>
                            <svg v-if="showIncompatible" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="#F6B604" d="M22.11 21.46L2.39 1.73L1.11 3l2.95 2.95A9.95 9.95 0 0 0 2 12c0 5.5 4.5 10 10 10c2.28 0 4.37-.77 6.05-2.06l2.79 2.79l1.27-1.27M12 20c-4.42 0-8-3.58-8-8c0-1.73.56-3.32 1.5-4.62L16.62 18.5A7.78 7.78 0 0 1 12 20M8.17 4.97L6.72 3.5C8.25 2.56 10.06 2 12 2c5.5 0 10 4.5 10 10c0 1.94-.56 3.75-1.5 5.28l-1.47-1.45c.62-1.14.97-2.44.97-3.83c0-4.42-3.58-8-8-8c-1.39 0-2.69.35-3.83.97Z"></svg>
                        </template>
                    </t-tag>
                </template>
            </template>
        </t-table>
    </t-config-provider>
</div>
`,
    data() {
        return {
            allColumns: mirrorsTableColumns,
            columns: mirrorsTableColumns,
            originalData: mirrorsTableData,
            data: mirrorsTableData.slice(),
            rawFilterOptions: mirrorsTableFilterSelectOptions,
            selectedColumnFilters: [],
            selectedRowFilters: [],
            selectedCellStatuses: ['supported', 'unsupported', 'incompatible'],
            activeTableFilters: {},
        }
    },
    created() {
        const allKeys = this._flattenFilterKeys(this.filterOptions)
        this.selectedColumnFilters = allKeys.slice()
        this.selectedRowFilters = Array.isArray(this.originalData) ? this.originalData.map((r) => r.name) : []
        this._debouncedUpdateColumns = debounce(this._updateColumns.bind(this), 120)
        this._debouncedUpdateRows = debounce(this._updateRows.bind(this), 120)
        this._updateColumns()
        this._updateRows()
    },
    computed: {
        isMobile() {
            return window.matchMedia('(max-width: 768px)').matches
        },
        localeFlags() {
            const p = (window && window.location && window.location.pathname) || ''
            return {
                isZhHant: p.includes('/zh-Hant'),
                isEn: p.includes('/en'),
            }
        },
        startTitle() {
            const f = this.localeFlags
            return f.isZhHant ? ['下方列表中的鏡像站均同步了', '軟體倉庫，列表根據單位性質、地理位置、名稱長度排序，與實際下載速度無關。'] : f.isEn ? ['All mirror sites in the list below synchronize the', 'software repositories. The list is sorted by institution type, geographic location, and name length, and is not related to actual download speed.'] : ['下方列表中的镜像站均同步了', '软件仓库，列表根据单位性质、地理位置、名称长度进行排序，与实际速度无关。']
        },
        globalConfig() {
            const f = this.localeFlags
            return {
                animation: { include: ['expand', 'fade'], exclude: [] },
                table: f.isZhHant
                    ? {
                          empty: '\u66AB\u7121\u6578\u64DA',
                          loadingText: '\u6B63\u5728\u8F09\u5165\u4E2D\uFF0C\u8ACB\u7A0D\u5F8C',
                          loadingMoreText: '\u9EDE\u64CA\u8F09\u5165\u66F4\u591A',
                          filterInputPlaceholder: '\u8ACB\u8F38\u5165\u5185\u5BB9\uFF08\u7121\u9ED8\u8A8D\u503C\uFF09',
                          sortAscendingOperationText: '\u9EDE\u64CA\u5347\u5E8F',
                          sortCancelOperationText: '\u9EDE\u64CA\u53D6\u6D88\u6392\u5E8F',
                          sortDescendingOperationText: '\u9EDE\u64CA\u964D\u5E8F',
                          clearFilterResultButtonText: '\u6E05\u7A7A\u7BE9\u9078',
                          columnConfigButtonText: '\u884C\u914D\u7F6E',
                          columnConfigTitleText: '\u8868\u683C\u884C\u914D\u7F6E',
                          columnConfigDescriptionText: '\u8ACB\u9078\u64C7\u9700\u8981\u5728\u8868\u683C\u4E2D\u986F\u793A\u7684\u6578\u64DA\u884C',
                          confirmText: '\u78BA\u8A8D',
                          cancelText: '\u53D6\u6D88',
                          resetText: '\u91CD\u7F6E',
                          selectAllText: '\u5168\u9078',
                          searchResultText: '\u641C\u5C0B"{result}"\uFF0C\u627E\u5230{count}\u9805\u7D50\u679C',
                      }
                    : f.isEn
                    ? {
                          empty: 'Empty Data',
                          loadingText: 'loading...',
                          loadingMoreText: 'loading more',
                          filterInputPlaceholder: '',
                          sortAscendingOperationText: 'click to sort ascending',
                          sortCancelOperationText: 'click to cancel sorting',
                          sortDescendingOperationText: 'click to sort descending',
                          clearFilterResultButtonText: 'Clear',
                          columnConfigButtonText: 'Column Config',
                          columnConfigTitleText: 'Table Column Config',
                          columnConfigDescriptionText: 'Please select columns to show them in the table',
                          confirmText: 'Confirm',
                          cancelText: 'Cancel',
                          resetText: 'Reset',
                          selectAllText: 'Select All',
                          searchResultText: 'Search "{result}". Found no items. | Search "{result}". Found 1 item. | Search "{result}". Found {count} items.',
                      }
                    : undefined,
                select: f.isZhHant
                    ? {
                          empty: '\u66AB\u7121\u6578\u64DA',
                          loadingText: '\u8F09\u5165\u4E2D',
                          placeholder: '\u8ACB\u9078\u64C7',
                      }
                    : f.isEn
                    ? {
                          empty: 'Empty Data',
                          loadingText: 'loading...',
                          placeholder: 'please select',
                      }
                    : undefined,
            }
        },
        selectPlaceholder() {
            const f = this.localeFlags
            return f.isZhHant ? '选择要显示的列' : f.isEn ? 'Select columns to show' : '选择要显示的列'
        },
        rowSelectPlaceholder() {
            const f = this.localeFlags
            return f.isZhHant ? '筛选显示的镜像' : f.isEn ? 'Filter mirrors to show' : '筛选显示的镜像'
        },
        rowFilterOptions() {
            const f = this.localeFlags
            const arr = Array.isArray(this.originalData) ? this.originalData.map((r) => ({ value: r.name, label: r.name, iconName: r.icon })) : []
            const head = { value: '__all__', label: f.isZhHant ? '全選' : f.isEn ? 'Select All' : '全选', checkAll: true }
            return [head].concat(arr)
        },
        rowFilterOptionsRendered() {
            return Array.isArray(this.rowFilterOptions) ? this.rowFilterOptions.map((o) => this._mapOptionForRow(o)) : []
        },
        statusLabels() {
            const f = this.localeFlags
            return {
                supported: f.isZhHant ? '支援' : f.isEn ? 'Supported' : '支持',
                unsupported: f.isZhHant ? '不支援' : f.isEn ? 'Unsupported' : '不支持',
                incompatible: f.isZhHant ? '不相容' : f.isEn ? 'Incompatible' : '不兼容',
            }
        },
        showSupported() {
            return Array.isArray(this.selectedCellStatuses) && this.selectedCellStatuses.includes('supported')
        },
        showUnsupported() {
            return Array.isArray(this.selectedCellStatuses) && this.selectedCellStatuses.includes('unsupported')
        },
        showIncompatible() {
            return Array.isArray(this.selectedCellStatuses) && this.selectedCellStatuses.includes('incompatible')
        },
        filterOptions() {
            return Array.isArray(this.rawFilterOptions) ? this.rawFilterOptions.map((o) => this._mapOptionForFilter(o)) : []
        },
    },
    methods: {
        dataChange(data) {
            try {
                const hasColumnFilters = this.activeTableFilters && Object.keys(this.activeTableFilters).length > 0
                const hasRowFilters = Array.isArray(this.selectedRowFilters) && this.selectedRowFilters.length > 0
                if (hasColumnFilters || hasRowFilters) {
                    return
                }
                this.data = data
            } catch {}
        },
        onFilterChange() {
            if (this._debouncedUpdateColumns) this._debouncedUpdateColumns()
            else this._updateColumns()
        },
        onRowFilterChange() {
            try {
                if (Array.isArray(this.selectedRowFilters) && this.selectedRowFilters.includes('__all__')) {
                    this.selectedRowFilters = Array.isArray(this.originalData) ? this.originalData.map((r) => r.name) : []
                }
            } catch {}
            if (this._debouncedUpdateRows) this._debouncedUpdateRows()
            else this._updateRows()
        },
        getMirrorSiteBranchUrl(domain, branchName) {
            return `https://${domain}/${branchName.replace(/_/, '-')}`
        },
        _mapOptionForRow(opt) {
            const prefix = '/assets/images/icon/mirrors/'
            const copy = Object.assign({}, opt)
            if (copy.iconName) copy.prefixIcon = prefix + copy.iconName
            copy.content = function (h, ctx) {
                const option = (ctx && ctx.option) || copy
                const children = []
                if (option.iconName) {
                    children.push(h('img', { src: prefix + option.iconName, width: 16, height: 16, style: 'vertical-align: middle' }))
                }
                children.push(h('span', { style: option.iconName ? 'margin-left: 8px' : '' }, option.label || option.value || ''))
                return h('div', { style: 'display: flex; align-items: center' }, children)
            }
            return copy
        },
        _mapOptionForFilter(opt) {
            const prefix = '/assets/images/icon/'
            const copy = Object.assign({}, opt)
            if (copy.iconName) copy.prefixIcon = prefix + copy.iconName
            copy.content = function (h, ctx) {
                const option = (ctx && ctx.option) || copy
                const children = []
                if (option.iconName) {
                    children.push(h('img', { src: prefix + option.iconName, width: 16, height: 16, style: 'vertical-align: middle' }))
                }
                children.push(h('span', { style: option.iconName ? 'margin-left: 8px' : '' }, option.label || option.value || ''))
                return h('div', { style: 'display: flex; align-items: center' }, children)
            }
            if (Array.isArray(copy.children)) {
                copy.children = copy.children.map((c) => this._mapOptionForFilter(c))
            }
            return copy
        },
        onCellStatusChange() {
            if (this._debouncedUpdateRows) this._debouncedUpdateRows()
            else this._updateRows()
        },
        onTableFilterChange(filters) {
            try {
                this.activeTableFilters = filters || {}
                if (this._debouncedUpdateRows) this._debouncedUpdateRows()
                else this._updateRows()
            } catch {}
        },
        _updateColumns() {
            try {
                const keys = new Set(this.selectedColumnFilters || [])
                this.columns = this.allColumns.filter((col) => col.colKey === 'name' || keys.has(col.colKey))
            } catch (e) {
                this.columns = this.allColumns
            }
        },
        _updateRows() {
            try {
                this._computeFilteredData()
            } catch {}
        },
        _computeFilteredData() {
            try {
                let rows = Array.isArray(this.originalData) ? this.originalData.slice() : []
                if (Array.isArray(this.selectedRowFilters) && this.selectedRowFilters.length) {
                    const names = new Set(this.selectedRowFilters || [])
                    rows = rows.filter((r) => names.has(r.name))
                }
                const filters = this.activeTableFilters || {}
                const filterKeys = Object.keys(filters)
                if (filterKeys.length) {
                    rows = rows.filter((row) => {
                        for (let i = 0; i < filterKeys.length; i++) {
                            const key = filterKeys[i]
                            let value = filters[key]
                            if (Array.isArray(value)) value = value.length ? value[0] : undefined
                            if (!value) continue
                            const cell = Object.prototype.hasOwnProperty.call(row, key) ? row[key] : undefined
                            if (value === 'supported') {
                                if (cell !== true) return false
                            } else if (value === 'unsupported') {
                                if (cell !== false) return false
                            } else if (value === 'incompatible') {
                                if (cell !== 'incompatible') return false
                            } else {
                                continue
                            }
                        }
                        return true
                    })
                }
                this.data = rows
            } catch {}
        },
        _flattenFilterKeys(options) {
            const set = new Set()
            options.forEach((opt) => {
                if (opt.group && Array.isArray(opt.children)) {
                    opt.children.forEach((child) => {
                        if (child && child.value) set.add(child.value)
                    })
                } else if (Array.isArray(opt.children)) {
                    opt.children.forEach((child) => {
                        if (child && child.value) set.add(child.value)
                    })
                } else if (opt.value) {
                    set.add(opt.value)
                }
            })
            return Array.from(set)
        },
    },
})