update(examples): move examples into src dir

2022-04-04 21:42:48 +02:00
parent 9539d7f263
commit c1594b0071
53 changed files with 34 additions and 35 deletions
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { templateRef } from '@vueuse/core'
+import RGBNode from './RGBNode.vue'
+import RGBOutputNode from './RGBOutputNode.vue'
+import { Elements, FlowInstance, VueFlow } from '@braks/vue-flow'
+
+type Colors = {
+  red: number
+  green: number
+  blue: number
+}
+const elements = ref<Elements>([
+  { id: '1', type: 'rgb', data: { color: 'r' }, position: { x: -25, y: 50 } },
+  { id: '2', type: 'rgb', data: { color: 'g' }, position: { x: 50, y: -100 } },
+  { id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 200 } },
+  { id: '4', type: 'rgb-output', data: { label: 'RGB' }, position: { x: 400, y: 50 } },
+  { id: 'e1-4', data: { color: 'red' }, source: '1', target: '4', animated: true },
+  { id: 'e2-4', data: { color: 'green' }, source: '2', target: '4', animated: true },
+  { id: 'e3-4', data: { color: 'blue' }, source: '3', target: '4', animated: true },
+])
+
+const el = templateRef<HTMLDivElement>('page', null)
+
+const onLoad = (flowInstance: FlowInstance) => {
+  flowInstance.fitView({ padding: 1 })
+}
+const color = ref<Colors>({
+  red: 100,
+  green: 150,
+  blue: 100,
+})
+const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
+</script>
+<template>
+  <div ref="page" class="demo-flow">
+    <VueFlow v-model="elements" @pane-ready="onLoad">
+      <template #node-rgb="props">
+        <RGBNode v-bind="props" :amount="color" @change="onChange" />
+      </template>
+      <template #node-rgb-output="props">
+        <RGBOutputNode v-bind="props" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
+      </template>
+    </VueFlow>
+  </div>
+</template>
+<style>
+.demo-flow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80vh;
+  width: 100%;
+  border-radius: 0;
+}
+</style>
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
+
+interface RGBNodeProps extends NodeProps {
+  data: {
+    color: 'r' | 'g' | 'b'
+  }
+  amount: {
+    red: number
+    green: number
+    blue: number
+  }
+}
+
+const props = defineProps<RGBNodeProps>()
+const emit = defineEmits(['change'])
+let color = 'red'
+switch (props.data.color) {
+  case 'r':
+    color = 'red'
+    break
+  case 'g':
+    color = 'green'
+    break
+  case 'b':
+    color = 'blue'
+    break
+}
+
+const colorVal = computed({
+  get: () => props.amount[color as 'red' | 'green' | 'blue'],
+  set: (val) => {
+    emit('change', { color, val })
+  },
+})
+
+const style = { '--color': color } as CSSProperties
+</script>
+<template>
+  <div class="wrapper">
+    <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
+    <input v-model="colorVal" class="slider nodrag" :style="style" type="range" min="0" max="255" />
+    <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
+  </div>
+</template>
+<style>
+.wrapper {
+  padding: 16px;
+  background: #fff;
+  border-radius: 10px;
+  border: 2px solid black;
+  text-align: left;
+}
+
+.slider {
+  --color: red;
+  margin-top: 12px;
+  background: gainsboro;
+  width: 100%;
+  height: 10px;
+  outline: none;
+  border-radius: 999px;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &::-moz-range-thumb,
+  &::-webkit-slider-thumb {
+    @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+    -webkit-appearance: none;
+    background: var(--color);
+  }
+}
+</style>
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
+
+interface RBGOutputNodeProps extends NodeProps {
+  rgb: string
+}
+
+const props = defineProps<RBGOutputNodeProps>()
+</script>
+<template>
+  <div :style="{ backgroundColor: props.rgb }" class="rgb-output-node">
+    <div class="text-md uppercase">{{ props.rgb }}</div>
+    <Handle type="target" :position="Position.Left" />
+  </div>
+</template>
+<style>
+.rgb-output-node {
+  padding: 9px;
+  border-radius: 25px;
+  text-align: left;
+  color: white;
+}
+</style>