update(docs): split features into separate files
This commit is contained in:
Braks
@@ -0,0 +1,95 @@
|
||||
<script lang="ts" setup>
|
||||
import { GraphEdge, GraphNode, useVueFlow, VueFlow, Background, Controls } from "@braks/vue-flow";
|
||||
|
||||
const getStyle = (el: GraphNode) => {
|
||||
const classes = ["font-semibold", "!border-2", "transition-colors", "duration-300", "ease-in-out"];
|
||||
if (el.selected) classes.push(...["!border-green-500/80", "!shadow-md", "!shadow-green-500/50", "!bg-green-100/45", "!text-gray-700"]);
|
||||
if (el.selected && !el.dragging) classes.push("animate-pulse");
|
||||
return classes.join(" ");
|
||||
};
|
||||
|
||||
const emit = defineEmits(['pane'])
|
||||
|
||||
const { onPaneReady } = useVueFlow({
|
||||
modelValue: [
|
||||
{
|
||||
id: "1",
|
||||
type: "input",
|
||||
label: "input",
|
||||
position: { x: 250, y: 5 },
|
||||
class: getStyle
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
label: "default",
|
||||
position: { x: 100, y: 100 },
|
||||
class: getStyle
|
||||
},
|
||||
{ id: "3", label: "default", position: { x: 400, y: 100 }, class: getStyle },
|
||||
{
|
||||
id: "4",
|
||||
type: "output",
|
||||
label: "output",
|
||||
position: { x: 250, y: 225 },
|
||||
class: getStyle
|
||||
},
|
||||
{
|
||||
id: "e1-2",
|
||||
source: "1",
|
||||
label: "animated edge",
|
||||
target: "2",
|
||||
animated: true,
|
||||
class: "transition-all duration-1000",
|
||||
style: (el: GraphEdge) => {
|
||||
const sourceNodeSelected = el.sourceNode.selected;
|
||||
return {
|
||||
transition: "stroke ease-in-out 300ms",
|
||||
stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
|
||||
};
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "e1-3", source: "1", label: "default edge", target: "3", style: (el: GraphEdge) => {
|
||||
const sourceNodeSelected = el.sourceNode.selected;
|
||||
return {
|
||||
transition: "stroke ease-in-out 300ms",
|
||||
stroke: el.selected || sourceNodeSelected ? "red" : undefined
|
||||
};
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "e2-4", source: "2", type: "step", target: "4", animated: true, style: (el: GraphEdge) => {
|
||||
const sourceNodeSelected = el.sourceNode.selected;
|
||||
return {
|
||||
transition: "stroke ease-in-out 300ms",
|
||||
stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
|
||||
};
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
onPaneReady((i) => emit('pane', i))
|
||||
</script>
|
||||
<template>
|
||||
<div class="md:max-w-1/3 flex flex-col justify-center">
|
||||
<div class="flex flex-col gap-2 items-center md:items-start">
|
||||
<h1>Feature-rich</h1>
|
||||
<p>
|
||||
Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection,
|
||||
controls,
|
||||
several event handlers and more.
|
||||
</p>
|
||||
<a class="button max-w-max" href="/docs">
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden">
|
||||
<VueFlow>
|
||||
<Controls class="!left-auto !right-[10px]" />
|
||||
<Background pattern-color="#aaa" style="background: #f8f8f8" :gap="8" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,17 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
Elements,
|
||||
VueFlow,
|
||||
MiniMap,
|
||||
Controls,
|
||||
Background,
|
||||
FlowInstance,
|
||||
Position,
|
||||
GraphEdge,
|
||||
GraphNode
|
||||
} from "@braks/vue-flow";
|
||||
import { reactive } from "vue";
|
||||
import { useBreakpoints, whenever } from "@vueuse/core";
|
||||
import { FlowInstance } from "@braks/vue-flow";
|
||||
|
||||
const breakpoints = useBreakpoints({
|
||||
mobile: 360,
|
||||
@@ -20,215 +10,34 @@ const breakpoints = useBreakpoints({
|
||||
desktop: 1280
|
||||
});
|
||||
|
||||
const getStyle = (el: GraphNode) => {
|
||||
const classes = ["font-semibold", "!border-2", "transition-colors", "duration-300", "ease-in-out"];
|
||||
if (el.selected) classes.push(...["!border-green-500/80", "!shadow-md", "!shadow-green-500/50", "!bg-green-100/45", "!text-gray-700"]);
|
||||
if (el.selected && !el.dragging) classes.push("animate-pulse");
|
||||
return classes.join(" ");
|
||||
const instances = reactive<FlowInstance[]>([])
|
||||
|
||||
const onLoad = (instance: FlowInstance) => {
|
||||
instances.push(instance)
|
||||
instance.fitView()
|
||||
};
|
||||
|
||||
const elements = ref<Elements>([
|
||||
{
|
||||
id: "1",
|
||||
type: "input",
|
||||
label: "input",
|
||||
position: { x: 250, y: 5 },
|
||||
class: getStyle
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
label: "default",
|
||||
position: { x: 100, y: 100 },
|
||||
class: getStyle
|
||||
},
|
||||
{ id: "3", label: "default", position: { x: 400, y: 100 }, class: getStyle },
|
||||
{
|
||||
id: "4",
|
||||
type: "output",
|
||||
label: "output",
|
||||
position: { x: 250, y: 225 },
|
||||
class: getStyle
|
||||
},
|
||||
{
|
||||
id: "e1-2",
|
||||
source: "1",
|
||||
label: "animated edge",
|
||||
target: "2",
|
||||
animated: true,
|
||||
class: "transition-all duration-1000",
|
||||
style: (el: GraphEdge) => {
|
||||
const sourceNodeSelected = el.sourceNode.selected;
|
||||
return {
|
||||
transition: "stroke ease-in-out 300ms",
|
||||
stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
|
||||
};
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "e1-3", source: "1", label: "default edge", target: "3", style: (el: GraphEdge) => {
|
||||
const sourceNodeSelected = el.sourceNode.selected;
|
||||
return {
|
||||
transition: "stroke ease-in-out 300ms",
|
||||
stroke: el.selected || sourceNodeSelected ? "red" : undefined
|
||||
};
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "e2-4", source: "2", type: "step", target: "4", animated: true, style: (el: GraphEdge) => {
|
||||
const sourceNodeSelected = el.sourceNode.selected;
|
||||
return {
|
||||
transition: "stroke ease-in-out 300ms",
|
||||
stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
|
||||
};
|
||||
}
|
||||
}
|
||||
]);
|
||||
const fitViews = () => {
|
||||
instances.forEach(i => i.fitView())
|
||||
}
|
||||
|
||||
const customizableElements = ref<Elements>([
|
||||
{ id: "1", type: "text-input", label: "First Name", position: { x: 0, y: 0 } },
|
||||
{ id: "2", type: "text-input", label: "Last Name", position: { x: 400, y: 0 } },
|
||||
{ id: "3", type: "text-output", label: "Node 3", position: { x: 240, y: 200 } },
|
||||
{ id: "e1-3", source: "1", target: "3", animated: true },
|
||||
{ id: "e2-3", source: "2", target: "3", animated: true }
|
||||
]);
|
||||
|
||||
const additionalElements = ref<Elements>([
|
||||
{
|
||||
id: "1",
|
||||
type: "input",
|
||||
sourcePosition: Position.Right,
|
||||
label: "input",
|
||||
style: { width: "75px" },
|
||||
position: { x: 25, y: 120 }
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
label: "A",
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 150, y: 25 },
|
||||
style: { width: "75px" }
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
label: "B",
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 250, y: 25 },
|
||||
style: { width: "75px" }
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
label: "C",
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 350, y: 25 },
|
||||
style: { width: "75px" }
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
label: "D",
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 150, y: 220 },
|
||||
style: { width: "75px" }
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
label: "E",
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 250, y: 220 },
|
||||
style: { width: "75px" }
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
label: "F",
|
||||
targetPosition: Position.Left,
|
||||
sourcePosition: Position.Right,
|
||||
position: { x: 350, y: 220 },
|
||||
style: { width: "75px" }
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
type: "output",
|
||||
label: "Output",
|
||||
targetPosition: Position.Left,
|
||||
position: { x: 500, y: 120 },
|
||||
style: { width: "75px" }
|
||||
},
|
||||
{ id: "e1-2", type: "step", source: "1", target: "2" },
|
||||
{ id: "e2-3", type: "step", source: "2", target: "3" },
|
||||
{ id: "e3-4", type: "step", source: "3", target: "4" },
|
||||
{ id: "e4-8", type: "step", source: "4", target: "8" },
|
||||
{ id: "e1-5", type: "step", source: "1", target: "5", animated: true },
|
||||
{ id: "e5-6", type: "step", source: "5", target: "6", animated: true },
|
||||
{ id: "e6-7", type: "step", source: "6", target: "7", animated: true },
|
||||
{ id: "e6-8", type: "step", source: "7", target: "8", animated: true }
|
||||
]);
|
||||
|
||||
const label = ref({
|
||||
first: "",
|
||||
last: ""
|
||||
});
|
||||
|
||||
const instance = ref<FlowInstance>();
|
||||
const onChange = ({ name, val }: { name: "first" | "last"; val: string }) => (label.value[name] = val);
|
||||
const onLoad = (vf: FlowInstance) => {
|
||||
if (!instance.value) instance.value = vf;
|
||||
vf.fitView();
|
||||
};
|
||||
whenever(breakpoints.greater("tablet"), () => instance.value.fitView());
|
||||
whenever(breakpoints.smaller("tablet"), () => instance.value.fitView());
|
||||
whenever(breakpoints.greater("tablet"), fitViews);
|
||||
whenever(breakpoints.smaller("tablet"), fitViews);
|
||||
</script>
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="flex flex-col gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left">
|
||||
<div class="flex flex-col md:flex-row gap-12 md:gap-24">
|
||||
<div class="md:max-w-1/3 flex flex-col justify-center">
|
||||
<div class="flex flex-col gap-2 items-center md:items-start">
|
||||
<h1>Feature-rich</h1>
|
||||
<p>
|
||||
Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection,
|
||||
controls,
|
||||
several event handlers and more.
|
||||
</p>
|
||||
<a class="button max-w-max" href="/docs">
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden">
|
||||
<VueFlow v-model="elements" @pane-ready="onLoad">
|
||||
<Controls />
|
||||
<Background pattern-color="#aaa" style="background: #f8f8f8" :gap="8" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
<Basic @pane="onLoad" />
|
||||
</div>
|
||||
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
|
||||
<div
|
||||
class="w-full md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800">
|
||||
<RGB />
|
||||
</div>
|
||||
<div class="md:max-w-1/3 flex flex-col md:flex-row gap-12 justify-end">
|
||||
<div class="gap-2 flex flex-col justify-center">
|
||||
<h1>Customizable</h1>
|
||||
<p>
|
||||
You can create your own node and edge types or just pass a custom style.
|
||||
Implement custom UIs
|
||||
inside your nodes
|
||||
and add functionality to your edges.
|
||||
</p>
|
||||
<a class="button max-w-max" href="/docs">Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
<RGB @pane="onLoad" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
<style>
|
||||
.button {
|
||||
@apply
|
||||
shadow-lg transition-colors duration-200 hover:bg-black font-semibold text-lg mt-4 px-5 py-3 rounded-xl bg-green-500 text-white;
|
||||
|
||||
@@ -61,7 +61,7 @@ const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="bg-white h-[80vh]">
|
||||
<div class="bg-white h-[75vh]">
|
||||
<VueFlow>
|
||||
<template #node-box="props">
|
||||
<template v-if="props.id === 'intro'">
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import {
|
||||
Elements,
|
||||
FlowInstance,
|
||||
BackgroundVariant,
|
||||
VueFlow,
|
||||
Background,
|
||||
Controls,
|
||||
MiniMap,
|
||||
BackgroundVariant,
|
||||
GraphNode, StringFunc
|
||||
GraphNode,
|
||||
StringFunc,
|
||||
useVueFlow
|
||||
} from "@braks/vue-flow";
|
||||
import { templateRef, useBreakpoints, useElementBounding, whenever } from "@vueuse/core";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import CustomEdge from "./edges/Custom.vue";
|
||||
import RGBNode from "./nodes/Input.vue";
|
||||
import RGBOutputNode from "./nodes/Output.vue";
|
||||
@@ -21,45 +21,38 @@ type Colors = {
|
||||
blue: number
|
||||
}
|
||||
|
||||
const breakpoints = useBreakpoints({
|
||||
mobile: 360,
|
||||
tablet: 640,
|
||||
laptop: 1024,
|
||||
desktop: 1280
|
||||
const emit = defineEmits(["pane"]);
|
||||
|
||||
const { id, onPaneReady, store } = useVueFlow({
|
||||
id: "rgb-flow",
|
||||
nodes: [
|
||||
{ id: "1", type: "rgb", data: { color: "g" }, position: { x: -25, y: 0 } },
|
||||
{ id: "2", type: "rgb", data: { color: "r" }, position: { x: 50, y: -110 } },
|
||||
{ id: "3", type: "rgb", data: { color: "b" }, position: { x: 0, y: 110 } },
|
||||
{ id: "4", type: "rgb-output", label: "RGB", position: { x: 400, y: -25 } }
|
||||
],
|
||||
edges: [
|
||||
{ id: "e1-4", type: "rgb-line", data: { color: "green" }, source: "1", target: "4", animated: true },
|
||||
{ id: "e2-4", type: "rgb-line", data: { color: "red" }, source: "2", target: "4", animated: true },
|
||||
{ id: "e3-4", type: "rgb-line", data: { color: "blue" }, source: "3", target: "4", animated: true }
|
||||
],
|
||||
zoomOnScroll: false,
|
||||
nodeExtent: [[-50, -150], [500, 300]]
|
||||
});
|
||||
|
||||
const elements = ref<Elements>([
|
||||
{ id: "1", type: "rgb", data: { color: "g" }, position: { x: -25, y: 0 } },
|
||||
{ id: "2", type: "rgb", data: { color: "r" }, position: { x: 50, y: -110 } },
|
||||
{ id: "3", type: "rgb", data: { color: "b" }, position: { x: 0, y: 110 } },
|
||||
{ id: "4", type: "rgb-output", label: "RGB", position: { x: 400, y: -25 } },
|
||||
{ id: "e1-4", type: "rgb-line", data: { color: "green" }, source: "1", target: "4", animated: true },
|
||||
{ id: "e2-4", type: "rgb-line", data: { color: "red" }, source: "2", target: "4", animated: true },
|
||||
{ id: "e3-4", type: "rgb-line", data: { color: "blue" }, source: "3", target: "4", animated: true }
|
||||
]);
|
||||
const instance = ref<FlowInstance>();
|
||||
onMounted(() => console.log(id));
|
||||
|
||||
const el = templateRef<HTMLDivElement>("page", null);
|
||||
onPaneReady((i) => emit("pane", i));
|
||||
|
||||
const bounds = useElementBounding(el);
|
||||
const onLoad = (flowInstance: FlowInstance) => {
|
||||
instance.value = flowInstance;
|
||||
instance.value.fitView();
|
||||
};
|
||||
whenever(breakpoints.greater("tablet"), () => onLoad(instance.value));
|
||||
whenever(breakpoints.smaller("tablet"), () => onLoad(instance.value));
|
||||
const el = templateRef<HTMLDivElement>("el", null);
|
||||
|
||||
const color = ref<Colors>({
|
||||
red: 100,
|
||||
green: 150,
|
||||
blue: 100
|
||||
red: 222,
|
||||
green: 45,
|
||||
blue: 140
|
||||
});
|
||||
|
||||
const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val));
|
||||
const bg = ref(BackgroundVariant.Lines);
|
||||
const bgSize = ref(1);
|
||||
const bgGap = ref(48);
|
||||
const backgroundChange = (variant: BackgroundVariant) => (bg.value = variant);
|
||||
const sizeChange = (size: number) => (bgSize.value = size);
|
||||
|
||||
const nodeColor: StringFunc = (node: GraphNode) => {
|
||||
switch (node.id) {
|
||||
@@ -75,27 +68,39 @@ const nodeColor: StringFunc = (node: GraphNode) => {
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div ref="page" class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
|
||||
<div
|
||||
class="w-full md:min-h-[300px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2"
|
||||
:style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }">
|
||||
<VueFlow id="rgb-flow" v-model="elements" class="relative font-mono" :zoom-on-scroll="false"
|
||||
:node-extent="[[-50, -150], [500, 300]]" @pane-ready="onLoad">
|
||||
<template #edge-rgb-line="rgbLineProps">
|
||||
<CustomEdge
|
||||
v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
|
||||
</template>
|
||||
<template #node-rgb="rgbProps">
|
||||
<RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
|
||||
</template>
|
||||
<template #node-rgb-output="rgbOutputProps">
|
||||
<RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
|
||||
</template>
|
||||
<Controls />
|
||||
<Background :variant="bg" :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="bgGap"
|
||||
:size="bgSize" />
|
||||
<MiniMap class="transform scale-75 origin-bottom-right" :node-color="nodeColor" />
|
||||
</VueFlow>
|
||||
<div
|
||||
ref="el"
|
||||
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2"
|
||||
:style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }">
|
||||
<VueFlow class="relative font-mono">
|
||||
<template #edge-rgb-line="rgbLineProps">
|
||||
<CustomEdge
|
||||
v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
|
||||
</template>
|
||||
<template #node-rgb="rgbProps">
|
||||
<RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
|
||||
</template>
|
||||
<template #node-rgb-output="rgbOutputProps">
|
||||
<RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
|
||||
</template>
|
||||
<Controls class="transform scale-75 md:scale-100 origin-bottom-left" />
|
||||
<Background :variant="BackgroundVariant.Lines" :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
|
||||
:gap="48"
|
||||
:size="1" />
|
||||
<MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right"
|
||||
:node-color="nodeColor" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
<div class="md:max-w-1/3 flex flex-col gap-12 justify-center">
|
||||
<div class="flex flex-col gap-2 items-center md:items-start">
|
||||
<h1>Customizable</h1>
|
||||
<p>
|
||||
You can create your own node and edge types or just pass a custom style.
|
||||
Implement custom UIs
|
||||
inside your nodes
|
||||
and add functionality to your edges.
|
||||
</p>
|
||||
<a class="button max-w-max" href="/docs">Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<script lang="ts" setup>
|
||||
import { Handle, NodeProps, Position } from '@braks/vue-flow'
|
||||
import { Handle, NodeProps, Position } from "@braks/vue-flow";
|
||||
|
||||
interface RBGOutputNodeProps extends NodeProps {
|
||||
rgb: string
|
||||
rgb: string;
|
||||
}
|
||||
const props = defineProps<RBGOutputNodeProps>()
|
||||
const emit = defineEmits(['next'])
|
||||
const next = () => emit('next')
|
||||
|
||||
const props = defineProps<RBGOutputNodeProps>();
|
||||
</script>
|
||||
<template>
|
||||
<div :style="{ backgroundColor: props.rgb }" class="px-6 py-2 rounded-xl text-white text-center" @click="next">
|
||||
<div :style="{ backgroundColor: props.rgb }"
|
||||
class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white">
|
||||
<div class="text-xl font-bold">Color Output</div>
|
||||
<div class="font-semibold">{{ props.rgb }}</div>
|
||||
<Handle type="target" :position="Position.Left" />
|
||||
|
||||
Reference in New Issue
Block a user