feature: vor und nachteile

praesentation/node_modules/vue-flow-layout/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 zyyv <https://github.com/zyyv>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

praesentation/node_modules/vue-flow-layout/README.md

@@ -0,0 +1,65 @@
+<h1 align="center">vue-flow-layout</h1>
+
+<p align="center">🌊 The Vue waterfull layout component.</p>
+
+<p align="center">
+<a>
+<img src="https://img.shields.io/npm/v/vue-flow-layout?style=flat&colorA=080f12&colorB=1fa669" alt="npm version" />
+</a>
+<a>
+<img src="https://img.shields.io/npm/dm/vue-flow-layout?style=flat&colorA=080f12&colorB=1fa669" alt="npm downloads" />
+</a>
+<img src="https://img.shields.io/github/license/zyyv/vue-flow-layout.svg?style=flat&colorA=080f12&colorB=1fa669" alt="License" />
+</a>
+</p>
+
+## Features
+
+- 🌊 Waterfull layout
+- 📦 Lightweight
+- 🎨 Elegant transition
+- 📱 Responsive
+
+## Install
+
+```bash
+pnpm add vue-flow-layout
+```
+
+## Usage
+
+```ts
+import { createApp } from 'vue'
+import VueFlowLayout from 'vue-flow-layout'
+import App from './App.vue'
+
+createApp(App).use(VueFlowLayout).mount('#app')
+```
+
+Use in your component:
+
+```vue
+<template>
+  <FlowLayout>
+    <div v-for="i in 100" :key="i" class="item">
+      {{ i }}
+    </div>
+  </FlowLayout>
+</template>
+```
+
+## Props
+
+| Name       | Type                     | Default | Description                          |
+| ---------- | ------------------------ | ------- | ------------------------------------ |
+| cols       | number                   | 2       | The number of columns                |
+| gap        | number \| [number, number] | 4       | The gap between items for X|Y       |
+| duration   | number                   | 350ms   | The transition duration              |
+
+## Credits
+
+- [wc-flow-layout](https://github.com/huodoushigemi/wc-flow-layout)
+
+## license
+
+[MIT](./LICENSE)

praesentation/node_modules/vue-flow-layout/dist/index.d.mts

@@ -0,0 +1,42 @@
+import * as vue from 'vue';
+import { PropType, VNode, App } from 'vue';
+
+declare const _default$1: vue.DefineComponent<vue.ExtractPropTypes<{
+    cols: {
+        type: PropType<number>;
+        default: number;
+    };
+    gap: {
+        type: PropType<number | [number, number]>;
+        default: number;
+    };
+    duration: {
+        type: PropType<boolean | number>;
+        default: boolean;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    cols: {
+        type: PropType<number>;
+        default: number;
+    };
+    gap: {
+        type: PropType<number | [number, number]>;
+        default: number;
+    };
+    duration: {
+        type: PropType<boolean | number>;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    cols: number;
+    gap: number | [number, number];
+    duration: number | boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare const _default: {
+    install: (app: App) => void;
+};
+
+export { _default$1 as FlowLayout, _default as default };

praesentation/node_modules/vue-flow-layout/dist/index.d.ts

@@ -0,0 +1,42 @@
+import * as vue from 'vue';
+import { PropType, VNode, App } from 'vue';
+
+declare const _default$1: vue.DefineComponent<vue.ExtractPropTypes<{
+    cols: {
+        type: PropType<number>;
+        default: number;
+    };
+    gap: {
+        type: PropType<number | [number, number]>;
+        default: number;
+    };
+    duration: {
+        type: PropType<boolean | number>;
+        default: boolean;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    cols: {
+        type: PropType<number>;
+        default: number;
+    };
+    gap: {
+        type: PropType<number | [number, number]>;
+        default: number;
+    };
+    duration: {
+        type: PropType<boolean | number>;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    cols: number;
+    gap: number | [number, number];
+    duration: number | boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare const _default: {
+    install: (app: App) => void;
+};
+
+export { _default$1 as FlowLayout, _default as default };

praesentation/node_modules/vue-flow-layout/dist/index.mjs

@@ -0,0 +1,162 @@
+import { defineComponent, ref, watch, onMounted, onUnmounted, h } from 'vue';
+
+const prevW = Symbol("prevW");
+const prevH = Symbol("prevH");
+const FlowLayout = /* @__PURE__ */ defineComponent({
+  name: "FlowLayout",
+  props: {
+    cols: {
+      type: Number,
+      default: 2
+    },
+    gap: {
+      type: [Number, Array],
+      default: 4
+    },
+    duration: {
+      type: [Boolean, Number],
+      default: true
+    }
+  },
+  setup(props, { slots }) {
+    let sizeObs;
+    let childrenObs;
+    const layout = ref(null);
+    const layouting = ref(false);
+    const reLayout = () => {
+      if (layouting.value || !layout.value)
+        return;
+      layouting.value = true;
+      requestAnimationFrame(() => {
+        try {
+          const parent = layout.value;
+          const children = Array.from(parent.children);
+          const len = children.length;
+          const [gapX, gapY] = Array.isArray(props.gap) ? props.gap : [props.gap, props.gap];
+          const colWidth = (parent.offsetWidth - (props.cols - 1) * gapX) / props.cols;
+          for (const el of children) {
+            el.style.width = `${colWidth}px`;
+          }
+          const hs = Array.from({ length: len }, (_, index) => {
+            const el = children[index];
+            el[prevW] = el.offsetWidth;
+            el[prevH] = el.offsetHeight;
+            return el.offsetHeight;
+          });
+          const columnHs = Array.from({ length: props.cols }, () => 0);
+          for (let i = 0; i < children.length; i++) {
+            const el = children[i];
+            const minColHeight = Math.min(...columnHs);
+            const colIndex = columnHs.indexOf(minColHeight);
+            const left = colIndex * (colWidth + gapX);
+            const top = minColHeight;
+            el.style.left = `${left}px`;
+            el.style.top = `${top}px`;
+            columnHs[colIndex] += hs[i] + gapY;
+          }
+          parent.style.height = `${Math.max(...columnHs) - gapY}px`;
+        } finally {
+          if (layout.value) {
+            layout.value[prevW] = layout.value.offsetWidth;
+            layout.value[prevH] = layout.value.offsetHeight;
+          }
+          layouting.value = false;
+        }
+      });
+    };
+    const sizeListener = () => {
+      if (!layout.value)
+        return;
+      const parent = layout.value;
+      sizeObs = new ResizeObserver((els) => {
+        for (const { target: el } of els) {
+          if (el.offsetWidth !== el[prevW] || el.offsetHeight !== el[prevH]) {
+            reLayout();
+          }
+        }
+      });
+      sizeObs.observe(parent);
+      for (const el of parent.children) {
+        sizeObs.observe(el);
+      }
+    };
+    const childrenListener = () => {
+      if (!layout.value)
+        return;
+      const parent = layout.value;
+      childrenObs = new MutationObserver((ml) => {
+        for (const m of ml) {
+          for (const el of m.addedNodes) {
+            if (el.nodeType === 1)
+              sizeObs.observe(el);
+          }
+          for (const el of m.removedNodes) {
+            if (el.nodeType === 1)
+              sizeObs.unobserve(el);
+          }
+        }
+        reLayout();
+      });
+      childrenObs.observe(parent, { childList: true, subtree: true });
+    };
+    watch(() => [props.cols, props.gap], reLayout);
+    onMounted(() => {
+      reLayout();
+      sizeListener();
+      childrenListener();
+    });
+    onUnmounted(() => {
+      sizeObs.disconnect();
+      childrenObs.disconnect();
+    });
+    return () => {
+      const parentStyle = {
+        position: "relative",
+        display: "block",
+        boxSizing: "border-box",
+        overflow: "unset !important"
+      };
+      const childStyle = {
+        position: "absolute",
+        boxSizing: "border-box",
+        ...props.duration ? {
+          transition: `all ${typeof props.duration === "number" ? `${props.duration}ms` : "350ms"}`
+        } : {}
+      };
+      const children = slots.default?.();
+      function setStyle(vnode, style, depath = 1) {
+        if (Array.isArray(vnode.children) && depath > 0) {
+          vnode.children.forEach((vvnode) => {
+            setStyle(vvnode, style, depath - 1);
+          });
+        } else {
+          const props2 = vnode.props = vnode.props || {};
+          props2.style = {
+            ...props2.style,
+            ...childStyle
+          };
+        }
+      }
+      children?.forEach((child) => {
+        setStyle(child, childStyle);
+      });
+      return h(
+        "div",
+        {
+          id: "vue-flow-layout",
+          ref: layout,
+          style: parentStyle
+        },
+        children
+      );
+    };
+  }
+});
+
+const index = {
+  install: (app) => {
+    app.component("FlowLayout", FlowLayout);
+  }
+};
+
+export { FlowLayout, index as default };

praesentation/node_modules/vue-flow-layout/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "vue-flow-layout",
+  "type": "module",
+  "version": "0.1.1",
+  "description": "🌊 The Vue waterfull layout component.",
+  "author": "Chris <hizyyv@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/zyyv/vue-flow-layout#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zyyv/vue-flow-layout.git"
+  },
+  "bugs": "https://github.com/zyyv/vue-flow-layout/issues",
+  "keywords": [
+    "vue",
+    "waterfull",
+    "flow-layout",
+    "vue-flow-layout"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.4.37"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^3.7.3",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "bumpp": "^9.6.1",
+    "eslint": "^9.11.1",
+    "typescript": "^5.5.3",
+    "unbuild": "^2.0.0",
+    "vite": "^5.4.1",
+    "vue": "^3.4.37",
+    "vue-tsc": "^2.0.29"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub && pnpm play",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "play": "pnpm -C playground dev",
+    "release": "pnpm lint:fix && bumpp -r && pnpm publish"
+  }
+}