{"_id":"vue-surf","_rev":"40-19c4fc7c352e758d33327a4409bb3634","name":"vue-surf","dist-tags":{"latest":"2.0.0"},"versions":{"0.0.0":{"name":"vue-surf","private":false,"version":"0.0.0","type":"module","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview","lint":"eslint . --ext .vue,.js,.ts,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"},"dependencies":{"@types/node":"^20.6.1","@vueuse/core":"^10.4.1","sass":"^1.66.1","vue":"^3.3.4"},"devDependencies":{"@rushstack/eslint-patch":"^1.1.0","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.2","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^11.0.3","eslint":"^8.49.0","eslint-plugin-vue":"^9.17.0","prettier":"^3.0.3","typescript":"^5.0.2","vite":"^4.4.5","vue-tsc":"^1.8.5"},"gitHead":"4cadbc6b8193b366994b04e922e59f9d8c4a3521","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\n\n\n```\nAnd Ta-da!\n\n\"Vue\n\n## Props\n\n### width\n```typescript\nwidth: {\n type: [Number | String],\n default: \"100%\"\n}\n```\n\nThe width of the wave, accept direct `number` values representing pixels or `string` with `px` or `%` units.\"\n\n
\n\n### color\n```typescript\ntype LinearGradientColor = {\n name: string;\n rotate?: number;\n steps: {\n offset: number;\n color: string;\n opacity?: number\n }[];\n}\n\ncolor: {\n type: [String, Object] as PropType,\n default: \"white\",\n}\n```\nConfiguring the fill color of the wave, it accept standard monochrome `string` or utilize a specific object format to configure linear gradients.\n\n```typescript\nconst color = reactive({\n name: \"myGradient\" // name must be specified\n rotate: 90,\n steps: [\n { offset: 0, color: '#FEAC5E', opacity: 0.3 },\n { offset: 0.5, color: '#C779D0' },\n { offset: 1, color: '#4BC0C8' },\n ],\n})\n```\n\n\"apexes-series\"\n\n> Radial gradients are currently not supported\n\n
\n\n### shape\n```typescript\ntype WaveShape = \"wavy\" | \"serrated\" | \"petal\";\n\nshape: {\n type: String as () => WaveShape,\n default: \"wavy\",\n}\n```\nIn addition to the regular wave pattern, VueSurf also offer options for a serrated and a petal-like pattern for you to choose from.\n\n

\n \"serrated\"\n \"petal\"\n

\n\n
\n\n### apexesSeries\n```typescript\ntype Apex =\n | [number | string, number | string]\n | {\n distance: number | string;\n height: number | string;\n };\n\ntype Apexes =\n | Apex[]\n | {\n apexes: Apex[];\n shape?: WaveShape;\n color?: string | LinearGradientColor;\n };\n\napexesSeries: {\n type: Array as () => Apexes[],\n default: undefined,\n}\n```\n#### What is Apex?\n\nAn apex is configured as the smallest unit of a wave, consisting of both `distance` and `height`. You can represent it using either an object or an array.\n\n```typescript\nconst apex = ref([0, \"50%\"]); // [distance, height]\n// or \nconst apex = ref({ distance: 0, height: \"50%\" });\n```\n\nHere, the term `distance` refers to the length of separation from the **previous apex**. And `height` denotes the vertical distance of the apex from the reference plane used for calculation.\n\nBoth `distance` and `height` accept direct `number` values representing pixels or `string` with `px` or `%` units.\n\n\"apex\"\n\n> ⚠️ It is noteworthy that when configured using percentages, they will be calculated relative to the width of the wave.
\n\n#### What is Apexes?\n\nApexes are an array composed of multiple `apex`, and you can freely use either object or array formats for each apex within the array.\n\n```typescript\nconst apexes = ref([\n { distance: 0, height: \"50%\" },\n [100, 50],\n [\"100px\", 120]\n]);\n```\n\nAdditionally, if you wish to set apexes with shapes or colors distinct from the `shape` and `color` props, you can describe apexes using objects and specify the 'shape' and 'color' properties.\n\n```typescript\nconst myApexes = ref({\n apexes: [\n { distance: 0, height: \"20%\" },\n [100, 50],\n [\"100px\", 120]\n ],\n shape: \"petal\",\n color: \"lightblue\"\n});\n```\n\n> ⚠️ Due to the absence of a preceding apex for the first apex, any distance configuration for it will be disregarded.\n\n#### Setting ApexesSeries\n\nApexesSeries is an array composed of one or multiple `apexes`. Similarly, you have the option to utilize either object or array formats for apexes within it.\"\n\n```typescript\nconst apexesSeries = ref([\n [\n { distance: 0, height: \"20%\" },\n [120, 0],\n [120, 120]\n ],\n {\n apexes: [\n { distance: 0, height: \"10%\" },\n [120, 0],\n [120, 60]\n ],\n shape: \"petal\",\n color: \"lightblue\"\n }\n])\n```\n\nWhen you pass an ApexesSeries with a length greater than 1, the wave transformation animation will automatically activate. However, you can disable it by setting `apexesSeriesTransformAuto` to `false`.\n\n

\n\"apexes-series\"\n

\n\nOf course, you can also directly replace the values of ApexesSeries dynamically to achieve the transformation effect.\n\n```typescript\nconst apexesSeries = ref([\n [\n [0, 50],\n [100, 0],\n [100, 50]\n ],\n])\n\napexesSeries.value = [\n [0, 100],\n [50, 0],\n [50, 100]\n]\n```\n\n> ⚠️ Please ensure that each `apexes` within the `apexesSeries` possesses an equal **length** and **total distance** to maintain the effectiveness of the transformation animation.\"\n\n
\n\n### apexesIndex\n```typescript\napexesIndex: {\n type: Number,\n default: undefined,\n}\n```\nYou can specify `apexesIndex` to determine which set of `apexes` from `apexesSeries` the wave should display.When it is configured, the transformation animation will be deactivated.\n\n\n
\n\n### side\n```typescript\ntype WaveSide = \"top\" | \"bottom\";\n\nside: {\n type: String as () => WaveSide,\n default: \"top\",\n}\n```\nThe determination of whether the wave faces upwards or downwards also dictates whether the height of the apexes is measured from the top or the bottom.\n\n```html\n\n\n\n```\n\n

\n \"side-top\"\n \"side-bottom\"\n

\n\n
\n\n### repeat\n```typescript\nrepeat: {\n type: Boolean,\n default: true,\n}\n```\nThe decision to automatically repeat is contingent upon whether the cumulative `distance` set by an `apexes` is insufficient to cover the entire `width` of the wave.\n\n```html\n\n```\n

\n\"repeat\"\n

\n\n
\n\n### closure\n```typescript\nclosure: {\n type: Boolean,\n default: true,\n}\n```\nTo facilitate a natural alignment of repeated waves, the height of the last apex in an `apexes` will automatically align with the height of the first apex. You can set it to `false` to disable this behavior.\n\n```html\n\n```\n

\n\"closure\"\n

\n\n
\n\n### smooth\n```typescript\nsmooth: {\n type: [Boolean, Number],\n default: true,\n}\n```\nAt times, when you configure a significant difference in distance between consecutive apexes, the presentation of the wave may not appear as smooth.\n\nTo mitigate such outcomes, we perform certain calculations. However, you have the option to set it to `false` to disable this behavior.\n\nAlternatively, you can provide a `number` value between 0 and 1 to adjust the level of smoothness.\n\n```html\n\n```\n

\n \"smooth-true\"\n \"smooth-false\"\n

\n\n>⚠️ If the numerical disparities are indeed substantial, the extent of smoothing may still remain limited\n\n
\n\n### marquee\n```typescript\nmarquee: {\n type: Boolean,\n default: true,\n}\n```\nWhen you use , the marquee animation effect will automatically activate. You can set it to `false` to deactivate the animation. \n\nSwitch it from `true` to `false`, the animation will completely reset. If you only wish to pause the marquee, please set `marqueeSpeed` to zero.\n\n

\n\"marquee\"\n

\n\n
\n\n### marqueeSpeed\n```typescript\nmarqueeSpeed: {\n type: Number,\n default: 2,\n}\n```\nIt accepts a `number` value ranging from -25 to 25 to control the speed of the marquee animation. When the value is greater than 0, the animation moves to the right; when less than 0, it moves to the left.\n\n\n
\n\n### transitionDuration\n```typescript\ntransitionDuration: {\n type: Number,\n default: 500,\n}\n```\n\nRegardless of how you modify the current state of the wave ( ApexesSeriesTransform, Changing ApexesIndex or Changing Apex Value Directly... ), there will always be interpolation animations. You can pass a `number` value to adjust the transition duration. The unit is millisecond.\n\n
\n\n### apexesSeriesTransformAuto\n```typescript\napexesSeriesTransformAuto: {\n type: Boolean,\n default: true,\n}\n```\nWhen you pass an ApexesSeries with a length greater than 1, VueSurf will transform the wave in accordance with the order of the ApexesSeries. You can set `apexesSeriesTransformAuto` to `false` to disable it.\n\n\n
\n\n### apexesSeriesTransformDuration\n```typescript\napexesSeriesTransformDuration: {\n type: Number,\n default: undefined,\n}\n```\nThis parameter only becomes meaningful when `apexesSeriesTransformAuto` is set to true.\n\nIt determines how long it takes to replace the current wave with the next set of Apexes. The unit is millisecond.\n\nTo achieve a seamless animation effect, when no value is specified, it defaults to being the same as `transitionDuration`. However, if `transitionDuration` is set to 0, `apexesSeriesTransformDuration` will automatically be set to 500.\n\n
\n\n### onApexesChanged\n```typescript\ntype ApexesChangedCallback = (\n currentApexes: Apex[],\n currentShape: WaveShape,\n) => void;\n\nonApexesChanged: {\n type: Function as ApexesChangedCallback,\n default: undefined,\n}\n```\nA callback function that is invoked when there is an update to the apexes.\n\n
\n\n## License\n\n[MIT](./LICENSE) License © 2023 [max.lee](https://github.com/f820602)","readmeFilename":"README.md","keywords":["vue","animation","wave","svg"],"license":"MIT","homepage":"https://github.com/f820602h/vue-surf#readme","repository":{"type":"git","url":"git+https://github.com/f820602h/vue-surf.git"},"author":{"name":"max.lee","email":"f820602h@gmail.com"},"bugs":{"url":"https://github.com/f820602h/vue-surf/issues"}}