diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index c2b555e7..00000000 --- a/.eslintignore +++ /dev/null @@ -1,4 +0,0 @@ -dist -node_modules -tests -*.js diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index ba040f55..00000000 --- a/.eslintrc.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "root": true, - "settings": { - "import/resolver": "typescript" - }, - "env": { - "es6": true - }, - "extends": [ - "plugin:vue/vue3-essential", - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:import/recommended", - "plugin:import/typescript", - "prettier" - ], - "plugins": ["@typescript-eslint", "import"], - "parserOptions": { - "parser": "@typescript-eslint/parser" - }, - "rules": { - "no-console": "error", - "semi": ["error", "never", { "beforeStatementContinuationChars": "always" }], - "import/order": [ - "error", - { - "newlines-between": "always", - "alphabetize": { "order": "asc", "caseInsensitive": true }, - "groups": ["builtin", "external", "internal", "parent", "sibling", "index"] - } - ], - "@typescript-eslint/no-unused-vars": "error", - "@typescript-eslint/no-empty-function": "off", - "@typescript-eslint/no-non-null-assertion": "off" - } -} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 5f91c36a..710f9282 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -5,27 +5,30 @@ name: Tests on: push: - branches: [ "master" ] + branches: ["master"] pull_request: - branches: [ "master" ] + branches: ["master"] jobs: build: - runs-on: ubuntu-latest strategy: matrix: - node-version: [20.x, 22.x] + node-version: [20.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 + - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} - cache: yarn - - run: yarn install --frozen-lockfile - - run: npm run lint - - run: npm run test \ No newline at end of file + + - uses: pnpm/action-setup@v4 + with: + version: 8 + - run: pnpm install + - run: pnpm run lint + - run: pnpm run test diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 00000000..98475b50 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1 @@ +pnpm test diff --git a/docs/.vitepress/components/Badge.vue b/docs/.vitepress/components/Badge.vue deleted file mode 100644 index b0c606c3..00000000 --- a/docs/.vitepress/components/Badge.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - - - diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index bffd0e6b..cdd57b33 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -31,6 +31,10 @@ module.exports = { { text: 'Events', link: '/api/events' }, ], }, + { + text: 'Addons', + link: '/addons', + }, ], editLink: { diff --git a/docs/addons.md b/docs/addons.md new file mode 100644 index 00000000..772fb62f --- /dev/null +++ b/docs/addons.md @@ -0,0 +1,51 @@ +# Addons + +Enhance the functionality of the carousel by adding more features to it/ + +## Navigation + +The **Navigation** addon provides **Next** and **Previous** buttons for navigating through the carousel. + +### How to Use It + +```vue {2,9} + + + + +``` + +## Pagination + +The **Pagination** addon adds pagination indicators to the carousel. + +```vue {2,9} + + + + +``` + +### Config + +| Prop | Default | Description | +| ---------------- | ------- | ---------------------------- | +| `disableOnClick` | false | Disables navigation on click | diff --git a/docs/api/events.md b/docs/api/events.md index 71cad629..9c51876a 100644 --- a/docs/api/events.md +++ b/docs/api/events.md @@ -5,6 +5,15 @@ Carousel events provide flexibility to intercept and react to navigation changes ## How to Use Events ```vue + + - - ``` ## Event Reference diff --git a/docs/test.md b/docs/examples-fallback.md similarity index 68% rename from docs/test.md rename to docs/examples-fallback.md index c4b70c81..dcc48aad 100644 --- a/docs/test.md +++ b/docs/examples-fallback.md @@ -1,45 +1,60 @@ -# Test - +# Examples ## Basic +A simple implementation of the carousel with default settings. + ## Wrap Around +Demonstrates a carousel with continuous wrap-around functionality. + ## Vertical +Showcases a vertically scrolling carousel. Adjust the height to better fit your content. + ## Breakpoints +An example of a responsive carousel with breakpoints for varying screen sizes. + ## Autoplay +Illustrates the carousel with autoplay functionality enabled. + ## Active Classes - +An example highlighting active items with custom classes. + ## Disabled +A demonstration of how to disable the carousel. + ## Custom Navigation +A demonstration of the carousel with fully customizable navigation controls. + ## Gallery - +Transforms the carousel into a gallery-style component. + -