mirror of
https://github.com/go-gitea/gitea.git
synced 2026-08-08 20:37:43 +00:00
silverwind
e81ab0a5ea
Removes what would block a later switch to Vue's vapor mode: `vue-chartjs` and the `SvgIcon` render function are virtual DOM components, and `v-memo` has no vapor equivalent. This does not adopt vapor mode, which will be stable in upcoming Vue 3.6. `vue-chartjs` was a thin wrapper over chart.js, so a local `ChartCanvas.vue` replaces it. Chart data and options move into computed values to keep their object identity, which is what `v-memo` was compensating for. `chartjs-adapter-dayjs-4` is moved first-party, just ~40 lines that are easy to maintain.
38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
|
import {computed} from 'vue';
|
|
import {svgParseOuterInner, type SvgName} from '../svg.ts';
|
|
import {html, htmlRaw} from '../utils/html.ts';
|
|
|
|
const props = withDefaults(defineProps<{
|
|
name: SvgName,
|
|
size?: number,
|
|
symbolId?: string,
|
|
}>(), {
|
|
size: 16,
|
|
symbolId: undefined,
|
|
});
|
|
|
|
const icon = computed(() => {
|
|
let {svgOuter, svgInnerHtml} = svgParseOuterInner(props.name);
|
|
const attrs: Record<string, string | number> = {};
|
|
for (const attr of svgOuter.attributes) {
|
|
if (attr.name === 'class') continue;
|
|
attrs[attr.name] = attr.value;
|
|
}
|
|
attrs.width = props.size;
|
|
attrs.height = props.size;
|
|
|
|
const classes = Array.from(svgOuter.classList);
|
|
if (props.symbolId) {
|
|
classes.push('tw-hidden', 'svg-symbol-container');
|
|
svgInnerHtml = html`<symbol id="${props.symbolId}" viewBox="${attrs.viewBox}">${htmlRaw(svgInnerHtml)}</symbol>`;
|
|
}
|
|
attrs.innerHTML = svgInnerHtml; // the icons are bundled, they carry no user input
|
|
return {attrs, classes};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<svg v-bind="icon.attrs" :class="icon.classes"/>
|
|
</template>
|