Merge pull request #3 from megasanjay/add-ts

Add ts

README.md

@@ -4,6 +4,10 @@
 
 A simple marquee component with ZERO dependencies for Vue 3. This component was originally developed for internal use but I figured this could be useful to someone else as well. This component is modeled after a React marquee component I found called [React Fast Marquee](https://github.com/justin-chu/react-fast-marquee). To keep a smooth animation running, clones of the content can be created for seamless transitions with no sudden jarring appearences or empty spaces in between content.
 
+# Warning
+
+The latest version of vue3-marquee is in the experimental stage. I'm looking for users with typescript applications to verify the use of this library before I update the version numbers.
+
 # Demos
 
 View the live demos here: [https://vue3-marquee.vercel.app/examples.html](https://vue3-marquee.vercel.app/examples.html)

build/rollup.config.js

@@ -9,6 +9,7 @@ import replace from "@rollup/plugin-replace";
 import babel from "@rollup/plugin-babel";
 import PostCSS from "rollup-plugin-postcss";
 import { terser } from "rollup-plugin-terser";
+import typescript from "rollup-plugin-typescript2";
 import minimist from "minimist";
 
 // Get browserslist config and remove ie from es build targets
@@ -28,7 +29,7 @@ const argv = minimist(process.argv.slice(2));
 const projectRoot = path.resolve(__dirname, "..");
 
 const baseConfig = {
-  input: "src/entry.js",
+  input: "src/entry.ts",
   plugins: {
     preVue: [
       alias({
@@ -80,6 +81,7 @@ const external = [
 const globals = {
   // Provide global variable names to replace your external imports
   // eg. jquery: '$'
+
   vue: "Vue",
 };
 
@@ -88,14 +90,15 @@ const buildFormats = [];
 if (!argv.format || argv.format === "es") {
   const esConfig = {
     ...baseConfig,
-    input: "src/entry.esm.js",
+    input: "src/entry.esm.ts",
     external,
     output: {
       file: "dist/vue3-marquee.esm.js",
       format: "esm",
       exports: "named",
     },
     plugins: [
+      typescript(),
       replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
@@ -130,6 +133,7 @@ if (!argv.format || argv.format === "cjs") {
       globals,
     },
     plugins: [
+      typescript(),
       replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
@@ -153,6 +157,7 @@ if (!argv.format || argv.format === "iife") {
       globals,
     },
     plugins: [
+      typescript(),
       replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),

dev/serve.ts

@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import ServeDev from "./serve.vue";
+
+const app = createApp(ServeDev);
+app.mount("#app");

dev/serve.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import { defineComponent } from "vue";
 import Vue3Marquee from "@/vue3-marquee.vue";
 
@@ -7,25 +7,83 @@ export default defineComponent({
   components: {
     Vue3Marquee,
   },
+  data() {
+    return {
+      img_30: this.getImgURLS(30),
+      img_5: this.getImgURLS(5),
+    };
+  },
+  methods: {
+    generateRandomString() {
+      const randomString = Math.random().toString(36).substring(2, 15);
+      return `https://avatars.dicebear.com/api/avataaars/${randomString}.svg`;
+    },
+    getImgURLS(num: number) {
+      let array = [];
+      for (let i = 0; i < num; i++) {
+        array.push(this.generateRandomString());
+      }
+      return array;
+    },
+  },
 });
 </script>
 
 <template>
   <div id="app">
-    <vue3-marquee :clone="true">
-      <img
-        height="200"
-        src="https://images.unsplash.com/photo-1633614907351-22b3992b906c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80"
-      />
-      <img
-        height="200"
-        src="https://images.unsplash.com/photo-1633077666323-68f2e8bae631?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80"
-      />
-      <img
-        height="200"
-        src="https://images.unsplash.com/photo-1633596683562-4a47eb4983c5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2064&q=80"
-        alt=""
-      />
-    </vue3-marquee>
+    <div>
+      <p>Default</p>
+      <Vue3Marquee>
+        <img v-for="i in img_30" :key="i" height="100" :src="i" />
+      </Vue3Marquee>
+    </div>
+    <div>
+      <p>Duration : 10s</p>
+      <Vue3Marquee :duration="10">
+        <img v-for="i in img_30" :key="i" height="100" :src="i" />
+      </Vue3Marquee>
+    </div>
+    <div>
+      <p>Direction : reverse</p>
+      <Vue3Marquee direction="reverse">
+        <img v-for="i in img_30" :key="i" height="100" :src="i" />
+      </Vue3Marquee>
+    </div>
+    <div>
+      <p>Pause on hover</p>
+      <Vue3Marquee :pause-on-hover="true">
+        <img v-for="i in img_30" :key="i" height="100" :src="i" />
+      </Vue3Marquee>
+    </div>
+    <div>
+      <p>Pause on click</p>
+      <Vue3Marquee :pause-on-click="true">
+        <img v-for="i in img_30" :key="i" height="100" :src="i" />
+      </Vue3Marquee>
+    </div>
+    <div>
+      <p>Gradient</p>
+      <Vue3Marquee :gradient="true">
+        <img v-for="i in img_30" :key="i" height="100" :src="i" />
+      </Vue3Marquee>
+    </div>
+    <div>
+      <p>Gradient color</p>
+      <Vue3Marquee :gradient="true" :gradient-color="[78, 205, 196]">
+        <img v-for="i in img_30" :key="i" height="100" :src="i" />
+      </Vue3Marquee>
+    </div>
+    <div>
+      <p>Gradient width</p>
+      <Vue3Marquee :gradient="true" gradient-width="1000px">
+        <img v-for="i in img_30" :key="i" height="100" :src="i" />
+      </Vue3Marquee>
+    </div>
+    <div>
+      <p>clone</p>
+      <Vue3Marquee :clone="true">
+        <img v-for="i in img_5" :key="i" height="100" :src="i" />
+      </Vue3Marquee>
+    </div>
   </div>
 </template>

docs/.vitepress/config.js → docs/.vitepress/config.ts

@@ -56,6 +56,7 @@ module.exports = {
         text: "Guide",
         link: "/guide",
       },
+      { text: "v1.0.x", link: "/v1/guide.html" },
       {
         text: "Examples",
         link: "/examples",
@@ -64,6 +65,10 @@ module.exports = {
         text: "Submit an issue",
         link: "https://github.com/megasanjay/vue3-marquee/issues/new",
       },
+      {
+        text: "View on npm",
+        link: "https://www.npmjs.com/package/vue3-marquee",
+      },
       {
         text: "Github",
         link: "https://github.com/megasanjay/vue3-marquee",

docs/guide.md

@@ -2,6 +2,12 @@
 
 **vue3-marquee** is a simple marquee component for Vue 3 that creates customizable marquees. This component uses slots for your content and props for any config options.
 
+::: warning
+You are viewing the documentation for latest version of vue3-maquee. If you are running a version that is 1.0.x, click [here](/v1/guide) to access the documentation.
+
+The latest version is still slightly experimental in terms of typescript support.
+:::
+
 ## Introduction
 
 `vue3-marquee` was born from an internal need for a quick and easy marquee component that I wanted to use in our website homepage. Many of the component libraries that I found were either unmaintained, complex or not compatible with Vue 3. This component should also work for you if you would like to use a marquee component that just works out of the box and is customizable to fit your use case.
@@ -10,6 +16,18 @@ In my search for a good marquee component, I found a React library that seemed t
 
 In `vue3-marquee` you have the option of cloning content to remove any empty spaces for marquee elements that don't fit the width of the container. This will allow you to have seamless content that just works.
 
+## Changes from v1
+
+With version 2, typescript support has been added. It's currently in the beta phase but when I get some results from other devs using this library with typescript projects, I will push a full release to npm.
+
+The options object has been removed since it was adding additional code on the backend to handle. All options for the component should now be passed via template props.
+
+The clone attribute has been marked as experimental for the moment. If the options gives you strange artifacts or isn't what you are looking for, please just create a copy of your content to fit the width of your container.
+
+The `direction` prop has now changed to use the css value of `normal` or `reverse` natively. Use these as your passed props.
+
+The `gradientWidth` prop has been modified to only accept string attributes. Pass a valid css unit to adjust the width of the gradient.
+
 ## Installation
 
 ### NPM
@@ -74,13 +92,13 @@ All the possible props for `vue3-marquee` are shown below.
 
 The direction for the content to move in
 
-| Type   | Default value | Required | Accepted values   |
-| ------ | ------------- | -------- | ----------------- |
-| String | "left"        | no       | "left" or "right" |
+| Type   | Default value | Required | Accepted values       |
+| ------ | ------------- | -------- | --------------------- |
+| String | "normal"      | no       | "normal" or "reverse" |
 
 ### duration
 
-The time taken for the marquee content to move the width of the container (in seconds)
+The time taken for the marquee content to move the width of its own container (in seconds)
 
 | Type   | Default value | Required | Accepted values |
 | ------ | ------------- | -------- | --------------- |
@@ -122,12 +140,12 @@ The RGB colors for the color of the gradient
 
 What portion of the container edges should be taken by the gradient overlay.
 
-| Type             | Default value | Required |
-| ---------------- | ------------- | -------- |
-| String or Number | 200           | no       |
+| Type   | Default value | Required | Accepted values    |
+| ------ | ------------- | -------- | ------------------ |
+| String | 200px         | no       | Any valid css unit |
 
 ::: tip
-You can use either a number or string value here. Numbers correspond to pixel values and strings can be any accepted css size unit (eg: 10%, 2em)
+Any accepted css size unit (eg: 10%, 2em) can be used here
 :::
 
 ### pauseOnHover
@@ -146,42 +164,14 @@ Whether to pause the marquee when you hold the right click button
 | ------- | ------------- | -------- | --------------- |
 | Boolean | false         | no       | true or false   |
 
-### clone
+### clone - experimental
+
+::: warning
+This option is still in the experimental stage.
+:::
 
 Whether to clone the content if you want no empty spaces in the animation. Use this option if you find empty spaces between your marquee animations.
 
 | Type    | Default value | Required | Accepted values |
 | ------- | ------------- | -------- | --------------- |
 | Boolean | false         | no       | true or false   |
-
-## options
-
-You can also provide all of the props in an `options` prop for cleaner looking html.
-
-| Type   | Default value | Required |
-| ------ | ------------- | -------- |
-| Object | "{ }"         | no       |
-
-```vue
-<template>
-  <vue3-marquee :options="options"> </vue3-marquee>
-</template>
-
-<script>
-import Vue3Marquee from "vue3-marquee";
-
-export default defineComponent({
-  components: {
-    Vue3Marquee,
-  },
-  data() {
-    return {
-      options: {
-        duration: 25,
-        direction: "left",
-      },
-    };
-  },
-});
-</script>
-```

docs/index.md

@@ -7,8 +7,8 @@ actionLink: /guide
 features:
   - title: ⚡ Zero Dependencies
     details: This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.
-  - title: 🌠 Dynamic content
-    details: You can put in any content that would like.
+  - title: 🌠 Typescript Support
+    details: Native TS support has been provided with this library.
   - title: 🙌 Easy to use
     details: Only a single component with all the props you need.
 footer: Made by Sanjay Soundarajan with ❤️

docs/package.json

@@ -15,10 +15,11 @@
   "author": "Sanjay Soundarajan <[email protected]> (https://sanjaysoundarajan.dev)",
   "license": "MIT",
   "devDependencies": {
+    "copyfiles": "^2.4.1",
     "vitepress": "^0.20.0"
   },
   "dependencies": {
-    "vue3-marquee": "^1.0.0"
+    "vue3-marquee": "^2.0.1-beta"
   },
   "repository": {
     "type": "git",