@slidy/vue - config

assets/scripts/images-api.ts

@@ -1,4 +1,4 @@
-import type { ImageSchema, GetPhotos, Size, Slide } from '../types';
+import type { ImageSchema, Size, Slide } from '../types';
 
 export const getPhotos = async ({
     limit = 5,

packages/vue/esbuild.js

@@ -8,7 +8,7 @@ const esbuildBase = {
     bundle: true,
     minify: !DEV,
     plugins: [vue(), eslint()],
-    entryPoints: ['src/index.ts'],
+    entryPoints: ['src/Slidy/index.ts'],
     sourcemap: DEV ? 'inline' : false,
     legalComments: 'none',
     logLevel: 'info',
@@ -30,7 +30,7 @@ const builds = {
 if (DEV) {
     const ctx = await context({
         ...esbuildBase,
-        entryPoints: ['public/app.ts'],
+        entryPoints: ['src/dev/app.ts'],
         outfile: 'public/build/bundle.js',
         loader: { '.svg': 'file' },
     });

packages/vue/eslint.config.mjs

@@ -0,0 +1,16 @@
+import pluginVue from 'eslint-plugin-vue';
+export default [
+    // add more generic rulesets here, such as:
+    // js.configs.recommended,
+    ...pluginVue.configs['flat/recommended'],
+    {
+        ignores: ['**/node_modules'],
+    },
+    // ...pluginVue.configs['flat/vue2-recommended'], // Use this if you are using Vue.js 2.x.
+    {
+        rules: {
+            // override/add rules settings here, such as:
+            // 'vue/no-unused-vars': 'error'
+        },
+    },
+];

packages/vue/package.json

@@ -21,7 +21,7 @@
     },
     "scripts": {
         "dev": "node esbuild --dev",
-        "build": "node esbuild && tsc && node ../../env/dts",
+        "build": "node esbuild && tsc --project tsconfig.build.json && node ../../env/dts",
         "build:local": "pnpm build -r --filter=@slidy/react...",
         "format": "prettier --write '**/*.{ts,tsx,md,svelte,json,html,css}'",
         "pub": "pnpm build && pnpm publish --no-git-checks --access public"
@@ -55,9 +55,11 @@
         "@vue/eslint-config-prettier": "^10.1.0",
         "@vue/eslint-config-typescript": "^14.1.3",
         "@vue/tsconfig": "^0.6.0",
+        "esbuild-plugin-vue": "^0.2.4",
+        "esbuild-plugin-vue-next": "^0.1.4",
         "esbuild-plugin-vue3": "^0.4.2",
         "eslint-plugin-vue": "^9.31.0",
         "vue": "^3.5.12",
         "vue-tsc": "^1.8.27"
     }
-}
+}

packages/vue/src/Slidy/Slidy.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { slidy } from '@slidy/core';
+import type { Options } from '@slidy/core';
+import type { Slide } from 'assets/types';
+
+const { items = [], options = { index: 2, snap: 'center' } } = defineProps<{
+    items: Slide[];
+    options: Options;
+}>();
+
+const vSlidy = {
+    mounted(el: HTMLElement) {
+        console.log(el, items, options);
+        slidy(el, options);
+    },
+};
+</script>
+
+<template>
+    <section v-slidy>
+        <img v-for="{ src, alt, width, height } in items" :src :alt :width :height />
+    </section>
+</template>
+
+<style>
+section {
+    display: flex;
+    gap: 1rem;
+}
+
+section img {
+    flex: auto;
+    object-fit: cover;
+}
+</style>

packages/vue/src/dev/App.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref, onMounted, type Ref } from 'vue';
+import { Header, Main, Footer } from './components';
+import { Slidy } from '../Slidy';
+import { getRandomSlides } from '@slidy/assets/scripts';
+import type { Slide } from 'assets/types';
+import { Options } from '@slidy/core';
+
+const options: Ref<Options> = ref({
+    axis: 'y',
+});
+
+let items = ref<Slide[] | undefined>([]);
+
+onMounted(async () => {
+    items.value = await getRandomSlides();
+    console.log(items.value);
+});
+</script>
+
+<template>
+    <Header />
+    <Main>
+        <Slidy :items :options />
+    </Main>
+    <Footer />
+</template>
+
+<style>
+@import './assets/dev.css';
+</style>

packages/vue/src/dev/app.d.ts

@@ -0,0 +1 @@
+export {};

packages/vue/public/components/Header.vue → packages/vue/src/dev/components/Header.vue

@@ -1,12 +1,16 @@
+<script setup>
+import pkg from '../../../package.json';
+</script>
+
 <template>
     <header>
         <img id="slidy-logo" alt="Slidy" width="50" height="50" src="favicon.png" />
         <h3>
             Slidy
-            <span>3.1.0</span>
+            <span>{{ pkg.version }}</span>
             <sub>vueJS</sub>
             <sub id="stats" />
         </h3>
         <button id="dark" @click="activate(this, dark)">dark</button>
     </header>
-</template>
+</template>

packages/vue/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outFile": "dist/index.d.ts",
+    },
+    "exclude": [
+        "dist",
+        "public",
+        "src/dev/*"
+    ]
+}

packages/vue/tsconfig.json

@@ -1,11 +1,14 @@
 {
     "extends": "../../tsconfig.json",
     "compilerOptions": {
-        "outFile": "dist/index.d.ts",
         "isolatedModules": false,
         "jsx": "preserve"
     },
     "include": [
-        "src/*"
+        "src/**/*",
+    ],
+    "exclude": [
+        "dist",
+        "public"
     ]
 }

tsconfig.json

@@ -2,51 +2,23 @@
     "compilerOptions": {
         "baseUrl": ".",
         "paths": {
-            "@slidy/assets/*": [
-                "assets/*"
-            ],
-            "@slidy/animation": [
-                "packages/animation/src"
-            ],
-            "@slidy/core": [
-                "packages/core/src"
-            ],
-            "@slidy/easing": [
-                "packages/easing/src"
-            ],
-            "@slidy/plugins": [
-                "packages/plugins/src"
-            ],
-            "@slidy/element": [
-                "packages/element/src"
-            ],
-            "@slidy/media": [
-                "packages/media/src"
-            ],
-            "@slidy/react": [
-                "packages/react/src"
-            ],
-            "@slidy/solid": [
-                "packages/solid/src"
-            ],
-            "@slidy/svelte": [
-                "packages/svelte/src"
-            ],
-            "@slidy/malina": [
-                "packages/malina/src"
-            ],
-            "@slidy/vue": [
-                "packages/vue/src"
-            ]
+            "@slidy/assets/*": ["assets/*"],
+            "@slidy/animation": ["packages/animation/src"],
+            "@slidy/core": ["packages/core/src"],
+            "@slidy/easing": ["packages/easing/src"],
+            "@slidy/plugins": ["packages/plugins/src"],
+            "@slidy/element": ["packages/element/src"],
+            "@slidy/media": ["packages/media/src"],
+            "@slidy/react": ["packages/react/src"],
+            "@slidy/solid": ["packages/solid/src"],
+            "@slidy/svelte": ["packages/svelte/src"],
+            "@slidy/malina": ["packages/malina/src"],
+            "@slidy/vue": ["packages/vue/src"]
         },
         "declaration": true,
         "emitDeclarationOnly": true,
         "moduleResolution": "Node",
-        "lib": [
-            "DOM",
-            "ESNext",
-            "DOM.Iterable"
-        ],
+        "lib": ["DOM", "ESNext", "DOM.Iterable"],
         "module": "ESNext",
         "target": "ESNext",
         "strict": true,
@@ -56,7 +28,5 @@
         "resolveJsonModule": true,
         "esModuleInterop": true
     },
-    "exclude": [
-        "node_modules/*"
-    ]
-}
+    "exclude": ["node_modules/*"]
+}