{"_id":"@crcong/wc-waterfall","_rev":"2-3577cc02bf746b09dd7afd96e7f827cc","name":"@crcong/wc-waterfall","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.1":{"name":"@crcong/wc-waterfall","private":false,"version":"0.1.1","type":"module","main":"dist/index.cjs","module":"dist/index.mjs","unpkg":"dist/index.iife.js","jsdelivr":"dist/index.iife.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/huodoushigemi/wc-flow-layout.git"},"author":{"name":"灬都是个谜"},"license":"MIT","description":"wc-waterfall is a flow layout component written using web-component","scripts":{"dev":"vite","build:docs":"vite build --outDir docs --base ./","build":"rimraf dist/ && rollup -c && rimraf dist/types","preview":"vite preview"},"devDependencies":{"@rollup/plugin-typescript":"^11.1.1","cssnano":"^6.0.2","postcss":"^8.4.32","postcss-clean":"^1.2.2","rollup":"^3.23.0","rollup-plugin-dts":"^6.0.0","rollup-plugin-esbuild":"^5.0.0","rollup-plugin-postcss":"^4.0.2","tslib":"^2.5.3","typescript":"^5.0.2","vite":"^4.3.9"},"keywords":["flow","flow-layout","flow-list","waterfall","wc-waterfall"],"gitHead":"782ddacc3e2a782f002bdf206bcb8a7132f92ca6","bugs":{"url":"https://github.com/huodoushigemi/wc-flow-layout/issues"},"homepage":"https://github.com/huodoushigemi/wc-flow-layout#readme","_id":"@crcong/wc-waterfall@0.1.1","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-8I33Oeer0RjkYGzfBh/tDGyhVtB+IYe0x6NZPuYSVLkUoamZgOVoy6MAFz8bhSLl6kyLxFz0vV52uxcfb/q9Zw==","shasum":"949fa9b2b6d00b1f366914ee6e52ffe8eaf9413a","tarball":"https://registry.npmjs.org/@crcong/wc-waterfall/-/wc-waterfall-0.1.1.tgz","fileCount":7,"unpackedSize":15379,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICSd3U0Um2LUd6vRTePO0Il2XsSFRXGXShPokcxpUdNBAiBdWyiyaRDYFhb7UJCtO6XJQMKtfkOlTAZSV9Q8UmGoaw=="}]},"_npmUser":{"name":"crcong","email":"crcong@foxmail.com"},"directories":{},"maintainers":[{"name":"crcong","email":"crcong@foxmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wc-waterfall_0.1.1_1712043168970_0.8156530403788103"},"_hasShrinkwrap":false},"0.1.2":{"name":"@crcong/wc-waterfall","private":false,"version":"0.1.2","type":"module","main":"dist/index.cjs","module":"dist/index.mjs","unpkg":"dist/index.iife.js","jsdelivr":"dist/index.iife.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/huodoushigemi/wc-flow-layout.git"},"author":{"name":"灬都是个谜"},"license":"MIT","description":"wc-waterfall is a flow layout component written using web-component","scripts":{"dev":"vite","build:docs":"vite build --outDir docs --base ./","build":"rimraf dist/ && rollup -c && rimraf dist/types","preview":"vite preview"},"devDependencies":{"@rollup/plugin-typescript":"^11.1.1","cssnano":"^6.0.2","postcss":"^8.4.32","postcss-clean":"^1.2.2","rollup":"^3.23.0","rollup-plugin-dts":"^6.0.0","rollup-plugin-esbuild":"^5.0.0","rollup-plugin-postcss":"^4.0.2","tslib":"^2.5.3","typescript":"^5.0.2","vite":"^4.3.9"},"keywords":["flow","flow-layout","flow-list","waterfall","wc-waterfall"],"gitHead":"85f1be0e75f19d2c330013c4c3f817b01ef76ab6","bugs":{"url":"https://github.com/huodoushigemi/wc-flow-layout/issues"},"homepage":"https://github.com/huodoushigemi/wc-flow-layout#readme","_id":"@crcong/wc-waterfall@0.1.2","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-szyUxUh1uYGvcXTgNUSix6KzBFYijfwA2kKjl6/YGg75EXvl4vTjdIzWO/fQzYRwR7IKOlD+Oaq07CaKqfkGtA==","shasum":"d9ea971e64f8c296701a66f5b253e0171d20a4fa","tarball":"https://registry.npmjs.org/@crcong/wc-waterfall/-/wc-waterfall-0.1.2.tgz","fileCount":7,"unpackedSize":15389,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAE71yukK7rQDLBFJyVkv8NGqS+Avb0SXDDMoOwAQjPaAiEAyE8jfmPRY2M7Cgnxl6j+/YVZSIxwwxApTvhKUL8yYQQ="}]},"_npmUser":{"name":"crcong","email":"crcong@foxmail.com"},"directories":{},"maintainers":[{"name":"crcong","email":"crcong@foxmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wc-waterfall_0.1.2_1712044490815_0.4329777366871457"},"_hasShrinkwrap":false},"0.1.3":{"name":"@crcong/wc-waterfall","private":false,"version":"0.1.3","type":"module","main":"dist/index.cjs","module":"dist/index.mjs","unpkg":"dist/index.iife.js","jsdelivr":"dist/index.iife.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/huodoushigemi/wc-flow-layout.git"},"author":{"name":"灬都是个谜"},"license":"MIT","description":"wc-waterfall is a flow layout component written using web-component","scripts":{"dev":"vite","build:docs":"vite build --outDir docs --base ./","build":"rimraf dist/ && rollup -c && rimraf dist/types","preview":"vite preview"},"devDependencies":{"@rollup/plugin-typescript":"^11.1.1","cssnano":"^6.0.2","postcss":"^8.4.32","postcss-clean":"^1.2.2","rollup":"^3.23.0","rollup-plugin-dts":"^6.0.0","rollup-plugin-esbuild":"^5.0.0","rollup-plugin-postcss":"^4.0.2","tslib":"^2.5.3","typescript":"^5.0.2","vite":"^4.3.9"},"keywords":["flow","flow-layout","flow-list","waterfall","wc-waterfall"],"gitHead":"b543fe8639b05d27a0beabe9fb918f2865fb0c67","bugs":{"url":"https://github.com/huodoushigemi/wc-flow-layout/issues"},"homepage":"https://github.com/huodoushigemi/wc-flow-layout#readme","_id":"@crcong/wc-waterfall@0.1.3","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-vydb1v4F9AfyNnSU02P3UR310JOSJABfYCuZQTjf6vWc+nvKXgK255N15q9Y5P1BZXlSThBLidSLNtpF2N/NAg==","shasum":"ca7bdcd3c4c7848f4f2ac98d3e2a98ba388698f5","tarball":"https://registry.npmjs.org/@crcong/wc-waterfall/-/wc-waterfall-0.1.3.tgz","fileCount":7,"unpackedSize":15473,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMmYHO5+4hYeZ+HGNKEPy4q8QNMY8NwDCScCY0aT+RowIgX0LGE00wFO8QqRoyApvGR42tEJ13FfqSY6MzCffOs3k="}]},"_npmUser":{"name":"crcong","email":"crcong@foxmail.com"},"directories":{},"maintainers":[{"name":"crcong","email":"crcong@foxmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wc-waterfall_0.1.3_1712044772824_0.3291655154859019"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-02T07:32:48.864Z","0.1.1":"2024-04-02T07:32:49.107Z","modified":"2024-04-02T07:59:33.090Z","0.1.2":"2024-04-02T07:54:50.970Z","0.1.3":"2024-04-02T07:59:32.945Z"},"maintainers":[{"name":"crcong","email":"crcong@foxmail.com"}],"description":"wc-waterfall is a flow layout component written using web-component","homepage":"https://github.com/huodoushigemi/wc-flow-layout#readme","keywords":["flow","flow-layout","flow-list","waterfall","wc-waterfall"],"repository":{"type":"git","url":"git+https://github.com/huodoushigemi/wc-flow-layout.git"},"author":{"name":"灬都是个谜"},"bugs":{"url":"https://github.com/huodoushigemi/wc-flow-layout/issues"},"license":"MIT","readme":"> fork: The `gap` parameter is separated. `gap` => `gap-x`, `gap-y`\n\n# wc-waterfall\n\nThe `wc-waterfall` is a high performance waterfall component written using `web-component`\n\nIt can support running in various frameworks, such as `React` `Vue` `SolidJs`\n\n![image](https://raw.githubusercontent.com/huodoushigemi/wc-flow-layout/main/public/cover.webp)\n\n## 🌈 Demo\n\n[vue-sfc]: https://play.vuejs.org/#eNqFVE1zmzAQ/Ss75JCkDQb81ZQSz7SdHNpD22l75IJBBiUgaSRhk3r837sCm0CUj/HB2rdvdx+r1e6dz0JMtjVxQidSqaRCgyK6FquY0UpwqWEPkmzgABvJKzhH6nnvOt+l7i7RRG6SskQ4ZilnSkPKSwU3Ju5idnkC80QcscBHMPK6clgIDU0qUWImtKANDyGiTNQatm7FM1LexI6BYwf0gyBoyYTlBM0qadBa4MlbwX7f1T4cTJ5oLRE0J6z9TEJEX8oX+H6f0QgfJjylbZFhByBEap83NEp62a0M5Gd0u/KDyDP/Q2hqQzMbmtvQwoaWNvTBhq5t6KMFBb4N2eoDW31gqw9s9cFAfeQNe4lQ5A2mAk2lH0pzHLV8Be9gb8I1XqCimnIWgnFMZupTzPDaYnaWCNGRqkTm1BBqzdFrgMbd0UwXISyCqWhGIaisCxNJllGWh3CkAGw4066i/0gIU1K10JrLjEhXJhmtcXyXR+Y6Se9zyWuWuTgJXIZwdu2b39R/WixkunDTgpbZxZzBewgu8fEVhOaFxjK+jxkBA16iT4f0YPoWfTaiL96iz0dilic6PuP2Wpwrp1sKbpWIyZ3iDDdK27z46MBHEHbtNNjwEo0jdgqthQo9L80YxuMLpVs5YUR7TFSj0cCJUdqjLCPNhNINQXbsmLwo54A6tMKFs6H5ExUprwQtifwpzJCM1WBWvvveYlrW5OqEpwVJ75/B71TTif4liSJyi4uj92mcMaI79+2fH6TBc+/E1VOXyH7F+ZsoXtZGY0f7gqODsge8Vu23tqk4lX/VbaMJzv7xo4zQthstP3ZwY3995dMf5c4ms76Lh/+zWfXS\n\n- https://huodoushigemi.github.io/wc-flow-layout/\n- [codepen — Basic usage](https://codepen.io/huodoushigemi/pen/dyQbmgW?editors=1100)\n- [codepen — Photo wall](https://codepen.io/huodoushigemi/pen/BaGBxKM?editors=1100)\n- [Vue SFC Playground][vue-sfc]\n- [SolidJs Playground](https://playground.solidjs.com/anonymous/78577fad-c8e2-41fc-8a27-f47849e24615)\n- [Animation][vue-sfc]\n\n## ⚙️ Installation\n\n- ### npm\n\n```shell\nnpm i wc-waterfall\n```\n\n- ### scripts\n\n```html\n\n```\n\n## 🦄 Example\n\n### 🚀 Use in VanillaJS\n\n```js\nimport 'wc-waterfall'\n```\n\n```html\n\n
01
\n
02
\n
03
\n
04
\n
05
\n
06
\n\n```\n\n### 🚀 Use in React\n\n```tsx\n// App.tsx\nimport 'wc-waterfall'\n\nexport default function MyApp() {\n return (\n \n
01
\n
02
\n
03
\n
04
\n
05
\n
06
\n \n )\n}\n```\n\nTypeScript support (JSX/TSX)\n\n```ts\n// shims.d.ts\ndeclare namespace JSX {\n interface IntrinsicElements {\n 'wc-waterfall': React.DetailedHTMLProps & {\n gap-x?: number;\n gap-x?: number;\n cols?: number;\n }, HTMLElement>;\n }\n}\n```\n\n### 🚀 Use in Vue\n\n```js\n// main.ts\nimport 'wc-waterfall'\n```\n\n```html\n\n\n```\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\nexport default defineConfig({\n plugins: [\n vue({\n template: {\n compilerOptions: { isCustomElement: (tag) => tag.startsWith('wc-') }\n },\n })\n ],\n})\n```\n## 🚀 Use in SSR\n```diff\n- import 'wc-waterfall'\n+ if (typeof document != 'undefined') import('wc-waterfall')\n```\n\n## 📄 Props\n\n| Name | Type | Default | Description |\n| ---- | -------- | ------- | -------------------------------- |\n| cols | `number` | 2 | Number of columns |\n| gap-x | `number` | 4 | Interval between cells in row |\n| gap-y | `number` | 4 | Interval between cells in column |\n\n## ⭐️ Show Your Support\n\nPlease give a ⭐️ if this project helped you!\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute, please write the issue or give me a Pull Request freely.\n","readmeFilename":"README.md"}