{{ card.data.name }}
+${{ card.data.price.toFixed(2) }}
+ ++ {{ card.data.inStock ? 'In Stock' : 'Out of Stock' }} +
+diff --git a/.browserslistrc b/.browserslistrc deleted file mode 100644 index b29aeba..0000000 --- a/.browserslistrc +++ /dev/null @@ -1,3 +0,0 @@ -current node -last 2 versions and > 2% -ie > 10 diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..5a5809d --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}] +charset = utf-8 +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +end_of_line = lf +max_line_length = 100 diff --git a/.gitignore b/.gitignore index 0def5e4..f36b6ac 100644 --- a/.gitignore +++ b/.gitignore @@ -1,19 +1,47 @@ -.DS_Store +# Dependencies node_modules -# /dist +.pnp +.pnp.js + +# Testing +coverage + +# Build outputs +dist/ +**/dist/ +build +.next +out +.nuxt +.svelte-kit -# local env files -.env.local -.env.*.local +# Turbo +.turbo -# Log files +# Environment +.env +.env.* +!.env.example + +# Cache +.cache +.mf +.rollup.cache +tsconfig.tsbuildinfo + +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* +pnpm-debug.log* # Editor directories and files +.vscode/* +!.vscode/extensions.json .idea -.vscode +.DS_Store *.suo *.ntvs* *.njsproj diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..c92168f --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "Vue.volar", + "dbaeumer.vscode-eslint", + "EditorConfig.EditorConfig", + "esbenp.prettier-vscode" + ] +} diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index d97bc1a..0000000 --- a/babel.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - presets: [ - '@babel/preset-env', - ], -}; diff --git a/build/rollup.config.js b/build/rollup.config.js deleted file mode 100644 index acabf7b..0000000 --- a/build/rollup.config.js +++ /dev/null @@ -1,152 +0,0 @@ -// rollup.config.js -import fs from 'fs'; -import path from 'path'; -import vue from 'rollup-plugin-vue'; -import alias from '@rollup/plugin-alias'; -import commonjs from '@rollup/plugin-commonjs'; -import replace from '@rollup/plugin-replace'; -import babel from 'rollup-plugin-babel'; -import { terser } from 'rollup-plugin-terser'; -import minimist from 'minimist'; - -// Get browserslist config and remove ie from es build targets -const esbrowserslist = fs.readFileSync('./.browserslistrc') - .toString() - .split('\n') - .filter((entry) => entry && entry.substring(0, 2) !== 'ie'); - -const argv = minimist(process.argv.slice(2)); - -const projectRoot = path.resolve(__dirname, '..'); - -const baseConfig = { - input: 'src/entry.js', - plugins: { - preVue: [ - replace({ - 'process.env.NODE_ENV': JSON.stringify('production'), - }), - alias({ - resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'], - entries: { - '@': path.resolve(projectRoot, 'src'), - }, - }), - ], - vue: { - css: true, - template: { - isProduction: true, - }, - }, - babel: { - exclude: 'node_modules/**', - extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'], - }, - }, -}; - -// ESM/UMD/IIFE shared settings: externals -// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency -const external = [ - // list external dependencies, exactly the way it is written in the import statement. - // eg. 'jquery' - 'vue', -]; - -// UMD/IIFE shared settings: output.globals -// Refer to https://rollupjs.org/guide/en#output-globals for details -const globals = { - // Provide global variable names to replace your external imports - // eg. jquery: '$' - vue: 'Vue', -}; - -// Customize configs for individual targets -const buildFormats = []; -if (!argv.format || argv.format === 'es') { - const esConfig = { - ...baseConfig, - external, - output: { - file: 'dist/vue-card-stack.esm.js', - format: 'esm', - exports: 'named', - }, - plugins: [ - ...baseConfig.plugins.preVue, - vue(baseConfig.plugins.vue), - babel({ - ...baseConfig.plugins.babel, - presets: [ - [ - '@babel/preset-env', - { - targets: esbrowserslist, - }, - ], - ], - }), - commonjs(), - ], - }; - buildFormats.push(esConfig); -} - -if (!argv.format || argv.format === 'cjs') { - const umdConfig = { - ...baseConfig, - external, - output: { - compact: true, - file: 'dist/vue-card-stack.ssr.js', - format: 'cjs', - name: 'VueCardStack', - exports: 'named', - globals, - }, - plugins: [ - ...baseConfig.plugins.preVue, - vue({ - ...baseConfig.plugins.vue, - template: { - ...baseConfig.plugins.vue.template, - optimizeSSR: true, - }, - }), - babel(baseConfig.plugins.babel), - commonjs(), - ], - }; - buildFormats.push(umdConfig); -} - -if (!argv.format || argv.format === 'iife') { - const unpkgConfig = { - ...baseConfig, - external, - output: { - compact: true, - file: 'dist/vue-card-stack.min.js', - format: 'iife', - name: 'VueCardStack', - exports: 'named', - globals, - }, - plugins: [ - ...baseConfig.plugins.preVue, - vue(baseConfig.plugins.vue), - babel(baseConfig.plugins.babel), - commonjs(), - terser({ - output: { - ecma: 5, - }, - }), - ], - }; - buildFormats.push(unpkgConfig); -} - -// Export config -export default buildFormats; diff --git a/demos/vue/.gitignore b/demos/vue/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/demos/vue/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/demos/vue/README.md b/demos/vue/README.md new file mode 100644 index 0000000..e69de29 diff --git a/demos/vue/eslint.config.mjs b/demos/vue/eslint.config.mjs new file mode 100644 index 0000000..4d183fc --- /dev/null +++ b/demos/vue/eslint.config.mjs @@ -0,0 +1,10 @@ +import eslintConfigBase from '@card-stack/eslint-config/base' +import eslintConfigVue from '@card-stack/eslint-config/vue' + +export default [ + { + ignores: ['vite.config.ts', '*.config.ts', '*.config.js', 'eslint.config.mjs'] + }, + ...eslintConfigBase, + ...eslintConfigVue +] diff --git a/demos/vue/index.html b/demos/vue/index.html new file mode 100644 index 0000000..dde16aa --- /dev/null +++ b/demos/vue/index.html @@ -0,0 +1,13 @@ + + +
+ + + +{{ card.data.title }}
+Stackable, swipeable, tweakable Vue card component.
npm install vue-card-stack
-
-or
-
-yarn add vue-card-stack
-import Vue from "vue";
-import VueCardStack from "vue-card-stack";
-
-export default {
- components: {
- VueCardStack,
- },
- data() {
- return {
- cards: [
- { background: "#00659d" },
- { background: "#00abbc" },
- { background: "#e2c58a" },
- { background: "#fc8890" },
- { background: "#b35d7f" },
- ],
- };
- },
-};
-<vue-card-stack :cards="cards" :stack-width="360" :card-width="280">
- <template v-slot:card="{ card }">
- <div
- style="width: 100%; height: 100%;"
- :style="{ background: card.background }"
- ></div>
- </template>
-</vue-card-stack>
-<vue-card-stack :cards="cards" :stack-width="360" :card-width="280">
- <template v-slot:card="{ card }">
- <div
- style="width: 100%; height: 100%;"
- :style="{ background: card.background }"
- ></div>
- </template>
-
- <template v-slot:nav="{ activeCardIndex, onNext, onPrevious }">
- <nav class="nav">
- <div class="counter">{{activeCardIndex + 1}}/{{cards.length}}</div>
- <button v-on:click="onPrevious" class="button">
- <span class="chevron left"></span>
- </button>
- <button v-on:click="onNext" class="button">
- <span class="chevron right"></span>
- </button>
- </nav>
- </template>
-</vue-card-stack>
-| Name | Type | Default | Description |
|---|---|---|---|
| cards | Array | [] | Array of cards to render stack. |
| cardWidth | Number | 300 | Width of card in pixels. |
| cardHeight | Number | 400 | Height of card in pixels. |
| stackWidth | Number|String | cardWidth + paddingHorizontal | Width of card stack in pixels or as a percentage (responsive). |
| sensitivity | Number | 0.25 | Distance card must travel as percentage of cardWidth + paddingHorizontal. |
| maxVisibleCards | Number | 10 | Number of cards that will be visible at any one time. |
| scaleMultiplier | Number | 0.75 | A number between 0 and 1 that determines how much a card scales as it moved through the stack. |
| speed | Number | 0.2 | Duration in milliseconds for card swipe transition. |
| paddingHorizontal | Number | 20 | A gutter size in pixels that will be applied to left and right hand side of card stack. |
| paddingVertical | Number | 20 | A gutter size in pixels that will be applied to top and bottom of card stack. |
TIP
To help get you up and running quickly, most props are optional. To get started, simply provide an Array of cards to the component.
| Name | Attributes | Listen to | Description |
|---|---|---|---|
| move | (value) | @move | Emitted as card position changes. Value represents distance card has moved as a value between 0 and 1 values below 0 and above 1 are returned if card is moved beyond min and max distances. |
| Name | Description |
|---|---|
| card | Slot for individual card in stack. |
| nav | Slot for controlling navigation of card stack.
|
Card {{ card.$index + 1 }}
+${{ card.data.price.toFixed(2) }}
+ ++ {{ card.data.inStock ? 'In Stock' : 'Out of Stock' }} +
+Error in Card Stack: {{ error.message }}
+{{ card.data.description }}
+ *