cynx-lib 1.3.80 → 1.3.81

package/vue/components/CircularProgress.vue

@@ -1,383 +1,383 @@
-<script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount, watch } from "vue";
-
-const SIZES: Record<string, { svg: number; stroke: number; fontSize: string }> = {
-  xs: { svg: 48, stroke: 4, fontSize: ".7rem" },
-  sm: { svg: 64, stroke: 5, fontSize: ".85rem" },
-  md: { svg: 80, stroke: 6, fontSize: "1rem" },
-  lg: { svg: 100, stroke: 7, fontSize: "1.15rem" },
-  xl: { svg: 120, stroke: 8, fontSize: "1.3rem" },
-};
-
-export interface CircularSegment {
-  value: number;
-  color?: string;
-  label?: string;
-}
-
-const props = withDefaults(
-  defineProps<{
-    value?: number;
-    segments?: CircularSegment[];
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
-    customSize?: number;
-    color?: string;
-    trackColor?: string;
-    label?: string;
-    centerText?: string | number;
-    showPercent?: boolean;
-    animated?: boolean;
-    rounded?: boolean;
-    indeterminate?: boolean;
-    speed?: number;
-    strokeWidth?: number;
-    gap?: number;
-    className?: string;
-    style?: Record<string, any>;
-  }>(),
-  {
-    value: 0,
-    size: "md",
-    color: "var(--blue, #2782e4)",
-    trackColor: "var(--bd2, #e0e0e4)",
-    label: "",
-    showPercent: true,
-    animated: true,
-    rounded: true,
-    indeterminate: false,
-    speed: 1,
-    gap: 4,
-    className: "",
-    style: () => ({}),
-  }
-);
-
-const base = computed(() => SIZES[props.size] || SIZES.md);
-const svg = computed(() => props.customSize || base.value.svg);
-const stroke = computed(() =>
-  props.strokeWidth ??
-  (props.customSize ? Math.max(3, svg.value * 0.06) : base.value.stroke)
-);
-const fontSize = computed(() =>
-  props.customSize
-    ? `${Math.max(11, svg.value * 0.13)}px`
-    : base.value.fontSize
-);
-const cx = computed(() => svg.value / 2);
-const cy = computed(() => svg.value / 2);
-const r = computed(() => (svg.value - stroke.value) / 2);
-const c = computed(() => 2 * Math.PI * r.value);
-const pct = computed(() => Math.min(100, Math.max(0, props.value || 0)));
-const BIG = computed(() => c.value * 4);
-const isRounded = computed(() => props.rounded !== false);
-const cap = computed(() => (isRounded.value ? "round" : "butt"));
-
-const userGap = computed(() =>
-  props.gap !== undefined
-    ? props.gap
-    : isRounded.value
-    ? c.value * 0.05
-    : c.value * 0.03
-);
-const capOverrun = computed(() => (isRounded.value ? stroke.value : 0));
-const gapSize = computed(() => userGap.value + capOverrun.value);
-const total = computed(() => c.value - 2 * gapSize.value);
-
-const isFull = computed(() => pct.value >= 100);
-const isEmpty = computed(() => pct.value <= 0);
-
-const hasSegments = computed(
-  () => Array.isArray(props.segments) && props.segments.length > 0
-);
-const rawSum = computed(() =>
-  hasSegments.value
-    ? props.segments!.reduce((sum, s) => sum + (Number(s.value) || 0), 0)
-    : 0
-);
-
-const indDash = computed(() => {
-  if (isEmpty.value) return `0,${BIG.value}`;
-  if (isFull.value) return `${c.value + stroke.value * 2},${BIG.value}`;
-  const activeLen = (pct.value / 100) * total.value;
-  return `${activeLen},${BIG.value}`;
-});
-
-const indOffset = computed(() => 0);
-
-const trackDash = computed(() => {
-  if (isEmpty.value) return `${c.value},${BIG.value}`;
-  if (isFull.value) return `0,${BIG.value}`;
-  const activeLen = (pct.value / 100) * total.value;
-  const inactiveLen = total.value - activeLen;
-  return `${inactiveLen},${BIG.value}`;
-});
-
-const trackOffset = computed(() => {
-  if (isEmpty.value || isFull.value) return 0;
-  const activeLen = (pct.value / 100) * total.value;
-  return -(activeLen + gapSize.value);
-});
-
-const indOpacity = computed(() => (isEmpty.value ? 0 : 1));
-
-const computedSegments = computed(() => {
-  if (!hasSegments.value || rawSum.value <= 0) return [];
-  const activeSegs = props.segments!.filter(
-    (seg) => (Number(seg.value) || 0) > 0
-  );
-  const segCount = activeSegs.length;
-  if (segCount === 0) return [];
-
-  const gapPx = props.gap !== undefined ? props.gap : 4;
-  const overrun = isRounded.value ? stroke.value : 0;
-  const gapArc = segCount > 1 ? gapPx + overrun : 0;
-  const availableC = Math.max(0, c.value - segCount * gapArc);
-
-  let accumulatedArc = isRounded.value ? stroke.value / 2 : 0;
-
-  return activeSegs.map((seg, idx) => {
-    const val = Number(seg.value) || 0;
-    const segLen = (val / rawSum.value) * availableC;
-    const currentOffset = accumulatedArc;
-    accumulatedArc += segLen + gapArc;
-
-    return {
-      key: idx,
-      val,
-      color: seg.color || props.color,
-      label: seg.label,
-      strokeDasharray: `${Math.max(0.1, segLen).toFixed(2)}, ${BIG.value}`,
-      strokeDashoffset: (-currentOffset).toFixed(2),
-    };
-  });
-});
-
-const gRef = ref<SVGGElement | null>(null);
-const indRef = ref<SVGCircleElement | null>(null);
-const trackRef = ref<SVGCircleElement | null>(null);
-let raf: number | null = null;
-
-const startIndeterminate = () => {
-  if (raf) cancelAnimationFrame(raf);
-  if (!props.indeterminate) return;
-
-  const capRad = (180 / Math.PI) * (stroke.value / r.value) / 2;
-  const gapRad = (180 / Math.PI) * (gapSize.value / r.value);
-  const gapArcLen = ((capRad + gapRad) / 360) * c.value;
-  let angle = -90;
-  let arcFrac = 0.45;
-  let arcDir = 1;
-  let lastTime = performance.now();
-
-  function tick(now: number) {
-    const dt = (now - lastTime) / 16.67;
-    lastTime = now;
-    angle = (angle + 3.6 * props.speed * dt) % 360;
-    arcFrac += 0.006 * arcDir * props.speed * dt;
-    if (arcFrac >= 0.72) {
-      arcFrac = 0.72;
-      arcDir = -1;
-    }
-    if (arcFrac <= 0.18) {
-      arcFrac = 0.18;
-      arcDir = 1;
-    }
-    const indLen = c.value * arcFrac;
-    const trackLen = Math.max(0, c.value - indLen - gapArcLen * 2);
-
-    if (gRef.value) gRef.value.style.transform = `rotate(${angle}deg)`;
-    if (indRef.value)
-      indRef.value.setAttribute("stroke-dasharray", `${indLen.toFixed(2)},9999`);
-    if (trackRef.value) {
-      trackRef.value.setAttribute(
-        "stroke-dasharray",
-        `${trackLen.toFixed(2)},9999`
-      );
-      trackRef.value.setAttribute(
-        "stroke-dashoffset",
-        `${(-(indLen + gapArcLen)).toFixed(2)}`
-      );
-    }
-    raf = requestAnimationFrame(tick);
-  }
-  raf = requestAnimationFrame(tick);
-};
-
-onMounted(() => {
-  if (props.indeterminate) startIndeterminate();
-});
-
-watch(
-  () => [props.indeterminate, props.speed, c.value, stroke.value, r.value, gapSize.value],
-  () => {
-    if (props.indeterminate) {
-      startIndeterminate();
-    } else if (raf) {
-      cancelAnimationFrame(raf);
-      raf = null;
-    }
-  }
-);
-
-onBeforeUnmount(() => {
-  if (raf) cancelAnimationFrame(raf);
-});
-</script>
-
-<template>
-  <div
-    :class="className"
-    :style="{
-      display: 'inline-flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      gap: '4px',
-      ...style,
-    }"
-  >
-    <div :style="{ position: 'relative', width: `${svg}px`, height: `${svg}px` }">
-      <svg
-        :width="svg"
-        :height="svg"
-        :viewBox="`0 0 ${svg} ${svg}`"
-      >
-        <template v-if="indeterminate">
-          <g ref="gRef" :style="{ transformOrigin: `${cx}px ${cy}px` }">
-            <circle
-              ref="trackRef"
-              :cx="cx"
-              :cy="cy"
-              :r="r"
-              fill="none"
-              :stroke="trackColor"
-              :stroke-width="stroke"
-              :stroke-linecap="cap"
-            />
-            <circle
-              ref="indRef"
-              :cx="cx"
-              :cy="cy"
-              :r="r"
-              fill="none"
-              :stroke="color"
-              :stroke-width="stroke"
-              :stroke-linecap="cap"
-            />
-          </g>
-        </template>
-
-        <template v-else-if="hasSegments">
-          <circle
-            v-if="rawSum <= 0 || computedSegments.length === 0"
-            :cx="cx"
-            :cy="cy"
-            :r="r"
-            fill="none"
-            :stroke="trackColor"
-            :stroke-width="stroke"
-          />
-          <template v-else>
-            <circle
-              v-for="seg in computedSegments"
-              :key="seg.key"
-              :cx="cx"
-              :cy="cy"
-              :r="r"
-              fill="none"
-              :stroke="seg.color"
-              :stroke-width="stroke"
-              :stroke-linecap="cap"
-              :stroke-dasharray="seg.strokeDasharray"
-              :stroke-dashoffset="seg.strokeDashoffset"
-              :style="{
-                transform: 'rotate(-90deg)',
-                transformOrigin: '50% 50%',
-                transition: animated
-                  ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), stroke-dashoffset .5s cubic-bezier(0.4,0,0.2,1)'
-                  : 'none',
-              }"
-            >
-              <title v-if="seg.label">{{ `${seg.label}: ${seg.val}` }}</title>
-            </circle>
-          </template>
-        </template>
-
-        <template v-else>
-          <circle
-            :cx="cx"
-            :cy="cy"
-            :r="r"
-            fill="none"
-            :stroke="trackColor"
-            :stroke-width="stroke"
-            :stroke-linecap="cap"
-            :stroke-dasharray="trackDash"
-            :stroke-dashoffset="trackOffset"
-            :style="{
-              transform: 'rotate(-90deg)',
-              transformOrigin: '50% 50%',
-              transition: animated
-                ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), stroke-dashoffset .5s cubic-bezier(0.4,0,0.2,1)'
-                : 'none',
-            }"
-          />
-          <circle
-            :cx="cx"
-            :cy="cy"
-            :r="r"
-            fill="none"
-            :stroke="color"
-            :stroke-width="stroke"
-            :stroke-linecap="cap"
-            :stroke-dasharray="indDash"
-            :stroke-dashoffset="indOffset"
-            :style="{
-              transform: 'rotate(-90deg)',
-              transformOrigin: '50% 50%',
-              opacity: indOpacity,
-              transition: animated
-                ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), opacity .2s'
-                : 'none',
-            }"
-          />
-        </template>
-      </svg>
-
-      <div
-        v-if="$slots.default || (showPercent && !indeterminate)"
-        :style="{
-          position: 'absolute',
-          inset: 0,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontSize: fontSize,
-          fontWeight: 600,
-          color: 'var(--primary-text, #0f172a)',
-          fontVariantNumeric: 'tabular-nums',
-        }"
-      >
-        <slot>
-          {{
-            centerText !== undefined
-              ? centerText
-              : hasSegments
-              ? rawSum
-              : `${Math.round(pct)}%`
-          }}
-        </slot>
-      </div>
-    </div>
-
-    <span
-      v-if="label"
-      :style="{
-        fontSize: '.6rem',
-        color: 'var(--muted, #797b8d)',
-        fontWeight: 500,
-      }"
-    >
-      {{ label }}
-    </span>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount, watch } from "vue";
+
+const SIZES: Record<string, { svg: number; stroke: number; fontSize: string }> = {
+  xs: { svg: 48, stroke: 4, fontSize: ".7rem" },
+  sm: { svg: 64, stroke: 5, fontSize: ".85rem" },
+  md: { svg: 80, stroke: 6, fontSize: "1rem" },
+  lg: { svg: 100, stroke: 7, fontSize: "1.15rem" },
+  xl: { svg: 120, stroke: 8, fontSize: "1.3rem" },
+};
+
+export interface CircularSegment {
+  value: number;
+  color?: string;
+  label?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    value?: number;
+    segments?: CircularSegment[];
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    customSize?: number;
+    color?: string;
+    trackColor?: string;
+    label?: string;
+    centerText?: string | number;
+    showPercent?: boolean;
+    animated?: boolean;
+    rounded?: boolean;
+    indeterminate?: boolean;
+    speed?: number;
+    strokeWidth?: number;
+    gap?: number;
+    className?: string;
+    style?: Record<string, any>;
+  }>(),
+  {
+    value: 0,
+    size: "md",
+    color: "var(--blue, #2782e4)",
+    trackColor: "var(--bd2, #e0e0e4)",
+    label: "",
+    showPercent: true,
+    animated: true,
+    rounded: true,
+    indeterminate: false,
+    speed: 1,
+    gap: 4,
+    className: "",
+    style: () => ({}),
+  }
+);
+
+const base = computed(() => SIZES[props.size] || SIZES.md);
+const svg = computed(() => props.customSize || base.value.svg);
+const stroke = computed(() =>
+  props.strokeWidth ??
+  (props.customSize ? Math.max(3, svg.value * 0.06) : base.value.stroke)
+);
+const fontSize = computed(() =>
+  props.customSize
+    ? `${Math.max(11, svg.value * 0.13)}px`
+    : base.value.fontSize
+);
+const cx = computed(() => svg.value / 2);
+const cy = computed(() => svg.value / 2);
+const r = computed(() => (svg.value - stroke.value) / 2);
+const c = computed(() => 2 * Math.PI * r.value);
+const pct = computed(() => Math.min(100, Math.max(0, props.value || 0)));
+const BIG = computed(() => c.value * 4);
+const isRounded = computed(() => props.rounded !== false);
+const cap = computed(() => (isRounded.value ? "round" : "butt"));
+
+const userGap = computed(() =>
+  props.gap !== undefined
+    ? props.gap
+    : isRounded.value
+    ? c.value * 0.05
+    : c.value * 0.03
+);
+const capOverrun = computed(() => (isRounded.value ? stroke.value : 0));
+const gapSize = computed(() => userGap.value + capOverrun.value);
+const total = computed(() => c.value - 2 * gapSize.value);
+
+const isFull = computed(() => pct.value >= 100);
+const isEmpty = computed(() => pct.value <= 0);
+
+const hasSegments = computed(
+  () => Array.isArray(props.segments) && props.segments.length > 0
+);
+const rawSum = computed(() =>
+  hasSegments.value
+    ? props.segments!.reduce((sum, s) => sum + (Number(s.value) || 0), 0)
+    : 0
+);
+
+const indDash = computed(() => {
+  if (isEmpty.value) return `0,${BIG.value}`;
+  if (isFull.value) return `${c.value + stroke.value * 2},${BIG.value}`;
+  const activeLen = (pct.value / 100) * total.value;
+  return `${activeLen},${BIG.value}`;
+});
+
+const indOffset = computed(() => 0);
+
+const trackDash = computed(() => {
+  if (isEmpty.value) return `${c.value},${BIG.value}`;
+  if (isFull.value) return `0,${BIG.value}`;
+  const activeLen = (pct.value / 100) * total.value;
+  const inactiveLen = total.value - activeLen;
+  return `${inactiveLen},${BIG.value}`;
+});
+
+const trackOffset = computed(() => {
+  if (isEmpty.value || isFull.value) return 0;
+  const activeLen = (pct.value / 100) * total.value;
+  return -(activeLen + gapSize.value);
+});
+
+const indOpacity = computed(() => (isEmpty.value ? 0 : 1));
+
+const computedSegments = computed(() => {
+  if (!hasSegments.value || rawSum.value <= 0) return [];
+  const activeSegs = props.segments!.filter(
+    (seg) => (Number(seg.value) || 0) > 0
+  );
+  const segCount = activeSegs.length;
+  if (segCount === 0) return [];
+
+  const gapPx = props.gap !== undefined ? props.gap : 4;
+  const overrun = isRounded.value ? stroke.value : 0;
+  const gapArc = segCount > 1 ? gapPx + overrun : 0;
+  const availableC = Math.max(0, c.value - segCount * gapArc);
+
+  let accumulatedArc = isRounded.value ? stroke.value / 2 : 0;
+
+  return activeSegs.map((seg, idx) => {
+    const val = Number(seg.value) || 0;
+    const segLen = (val / rawSum.value) * availableC;
+    const currentOffset = accumulatedArc;
+    accumulatedArc += segLen + gapArc;
+
+    return {
+      key: idx,
+      val,
+      color: seg.color || props.color,
+      label: seg.label,
+      strokeDasharray: `${Math.max(0.1, segLen).toFixed(2)}, ${BIG.value}`,
+      strokeDashoffset: (-currentOffset).toFixed(2),
+    };
+  });
+});
+
+const gRef = ref<SVGGElement | null>(null);
+const indRef = ref<SVGCircleElement | null>(null);
+const trackRef = ref<SVGCircleElement | null>(null);
+let raf: number | null = null;
+
+const startIndeterminate = () => {
+  if (raf) cancelAnimationFrame(raf);
+  if (!props.indeterminate) return;
+
+  const capRad = (180 / Math.PI) * (stroke.value / r.value) / 2;
+  const gapRad = (180 / Math.PI) * (gapSize.value / r.value);
+  const gapArcLen = ((capRad + gapRad) / 360) * c.value;
+  let angle = -90;
+  let arcFrac = 0.45;
+  let arcDir = 1;
+  let lastTime = performance.now();
+
+  function tick(now: number) {
+    const dt = (now - lastTime) / 16.67;
+    lastTime = now;
+    angle = (angle + 3.6 * props.speed * dt) % 360;
+    arcFrac += 0.006 * arcDir * props.speed * dt;
+    if (arcFrac >= 0.72) {
+      arcFrac = 0.72;
+      arcDir = -1;
+    }
+    if (arcFrac <= 0.18) {
+      arcFrac = 0.18;
+      arcDir = 1;
+    }
+    const indLen = c.value * arcFrac;
+    const trackLen = Math.max(0, c.value - indLen - gapArcLen * 2);
+
+    if (gRef.value) gRef.value.style.transform = `rotate(${angle}deg)`;
+    if (indRef.value)
+      indRef.value.setAttribute("stroke-dasharray", `${indLen.toFixed(2)},9999`);
+    if (trackRef.value) {
+      trackRef.value.setAttribute(
+        "stroke-dasharray",
+        `${trackLen.toFixed(2)},9999`
+      );
+      trackRef.value.setAttribute(
+        "stroke-dashoffset",
+        `${(-(indLen + gapArcLen)).toFixed(2)}`
+      );
+    }
+    raf = requestAnimationFrame(tick);
+  }
+  raf = requestAnimationFrame(tick);
+};
+
+onMounted(() => {
+  if (props.indeterminate) startIndeterminate();
+});
+
+watch(
+  () => [props.indeterminate, props.speed, c.value, stroke.value, r.value, gapSize.value],
+  () => {
+    if (props.indeterminate) {
+      startIndeterminate();
+    } else if (raf) {
+      cancelAnimationFrame(raf);
+      raf = null;
+    }
+  }
+);
+
+onBeforeUnmount(() => {
+  if (raf) cancelAnimationFrame(raf);
+});
+</script>
+
+<template>
+  <div
+    :class="className"
+    :style="{
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: '4px',
+      ...style,
+    }"
+  >
+    <div :style="{ position: 'relative', width: `${svg}px`, height: `${svg}px` }">
+      <svg
+        :width="svg"
+        :height="svg"
+        :viewBox="`0 0 ${svg} ${svg}`"
+      >
+        <template v-if="indeterminate">
+          <g ref="gRef" :style="{ transformOrigin: `${cx}px ${cy}px` }">
+            <circle
+              ref="trackRef"
+              :cx="cx"
+              :cy="cy"
+              :r="r"
+              fill="none"
+              :stroke="trackColor"
+              :stroke-width="stroke"
+              :stroke-linecap="cap"
+            />
+            <circle
+              ref="indRef"
+              :cx="cx"
+              :cy="cy"
+              :r="r"
+              fill="none"
+              :stroke="color"
+              :stroke-width="stroke"
+              :stroke-linecap="cap"
+            />
+          </g>
+        </template>
+
+        <template v-else-if="hasSegments">
+          <circle
+            v-if="rawSum <= 0 || computedSegments.length === 0"
+            :cx="cx"
+            :cy="cy"
+            :r="r"
+            fill="none"
+            :stroke="trackColor"
+            :stroke-width="stroke"
+          />
+          <template v-else>
+            <circle
+              v-for="seg in computedSegments"
+              :key="seg.key"
+              :cx="cx"
+              :cy="cy"
+              :r="r"
+              fill="none"
+              :stroke="seg.color"
+              :stroke-width="stroke"
+              :stroke-linecap="cap"
+              :stroke-dasharray="seg.strokeDasharray"
+              :stroke-dashoffset="seg.strokeDashoffset"
+              :style="{
+                transform: 'rotate(-90deg)',
+                transformOrigin: '50% 50%',
+                transition: animated
+                  ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), stroke-dashoffset .5s cubic-bezier(0.4,0,0.2,1)'
+                  : 'none',
+              }"
+            >
+              <title v-if="seg.label">{{ `${seg.label}: ${seg.val}` }}</title>
+            </circle>
+          </template>
+        </template>
+
+        <template v-else>
+          <circle
+            :cx="cx"
+            :cy="cy"
+            :r="r"
+            fill="none"
+            :stroke="trackColor"
+            :stroke-width="stroke"
+            :stroke-linecap="cap"
+            :stroke-dasharray="trackDash"
+            :stroke-dashoffset="trackOffset"
+            :style="{
+              transform: 'rotate(-90deg)',
+              transformOrigin: '50% 50%',
+              transition: animated
+                ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), stroke-dashoffset .5s cubic-bezier(0.4,0,0.2,1)'
+                : 'none',
+            }"
+          />
+          <circle
+            :cx="cx"
+            :cy="cy"
+            :r="r"
+            fill="none"
+            :stroke="color"
+            :stroke-width="stroke"
+            :stroke-linecap="cap"
+            :stroke-dasharray="indDash"
+            :stroke-dashoffset="indOffset"
+            :style="{
+              transform: 'rotate(-90deg)',
+              transformOrigin: '50% 50%',
+              opacity: indOpacity,
+              transition: animated
+                ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), opacity .2s'
+                : 'none',
+            }"
+          />
+        </template>
+      </svg>
+
+      <div
+        v-if="$slots.default || (showPercent && !indeterminate)"
+        :style="{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: fontSize,
+          fontWeight: 600,
+          color: 'var(--primary-text, #0f172a)',
+          fontVariantNumeric: 'tabular-nums',
+        }"
+      >
+        <slot>
+          {{
+            centerText !== undefined
+              ? centerText
+              : hasSegments
+              ? rawSum
+              : `${Math.round(pct)}%`
+          }}
+        </slot>
+      </div>
+    </div>
+
+    <span
+      v-if="label"
+      :style="{
+        fontSize: '.6rem',
+        color: 'var(--muted, #797b8d)',
+        fontWeight: 500,
+      }"
+    >
+      {{ label }}
+    </span>
+  </div>
+</template>