init

add main code

.eslintrc.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+	root: true,
+	parser: '@babel/eslint-parser',
+	extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:tailwindcss/recommended'],
+	rules: {
+		'vue/no-unused-vars': 'warn',
+		"no-unused-vars": "warn",
+		'tailwindcss/no-custom-classname': 0,
+		'padding-line-between-statements': [
+			'error',
+			{ blankLine: 'always', prev: 'function', next: 'function' },
+			// { "blankLine": "always", "prev": "function", "next": "block" },
+			// { "blankLine": "always", "prev": "block", "next": "function" },
+		],
+	},
+	overrides: [
+		{
+			files: ['*.vue'],
+			parser: 'vue-eslint-parser',
+		},
+	],
+};

.github/workflows/deploy.yml

@@ -0,0 +1,54 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['master']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7.26.2
+      - name: Install dependencies
+        run: pnpm i
+      - name: Build
+        run: pnpm build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+*.local
+
+.vscode/*
+!.vscode/extensions.json

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+    "useTabs": true,
+    "singleQuote": true,
+    "printWidth": 100
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

README.md

@@ -0,0 +1,49 @@
+# Vue User List Application
+
+## Overview
+
+This Vue application features a dynamic user list interface with Vue's Composition API and IntersectionObserver, enabling infinite scrolling. It includes Vue components and utility functions for API data fetching, designed for a responsive user experience.
+
+## Features
+
+- **Infinite Scrolling**: Automates loading more user data on scroll.
+- **Dynamic Data Fetching**: Generic function for fetching data from an API.
+- **User Cards**: Displays user information in an organized, appealing layout.
+
+## Components
+
+### `UserList.vue`
+- Renders the user list and manages infinite scrolling.
+- Uses `onMounted` to initialize IntersectionObserver and `onBeforeUnmount` for cleanup.
+
+### `UserCard.vue`
+- Displays user details like name, email, and picture.
+- Utilizes computed properties for reactive data management.
+
+## Composables
+
+### `useUsers()`
+- Manages user data fetching and state.
+- `users`: A reactive array of user data.
+- `query`: Reactive object for API query parameters.
+- `observerShow`: Indicates observer element visibility.
+- `getUsers()`: Fetches users from API and updates the state.
+
+## Utility Functions
+
+### `fetchData<T>(url: URL): Promise<T>`
+- Generic function to fetch data from a URL.
+
+### `getUrl(query: ListQuery): URL`
+- Constructs a URL with query parameters for API requests.
+
+## Interfaces
+
+- Defines TypeScript interfaces for type consistency.
+
+## Usage
+
+1. Install Vue and dependencies.
+2. Start the application (`npm run serve`).
+3. Interact with the user list to load more users.
+

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="bg-gray-200 dark:bg-gray-800 dark:text-white">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Infiinity users list</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "emcd-task",
+  "private": true,
+  "version": "1.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint ./src",
+    "lint:debug": "eslint ./src --debug",
+    "lint:fix": "eslint ./src --fix"
+  },
+  "dependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.23.3",
+    "@types/node": "^20.10.5",
+    "@vitejs/plugin-vue": "^4.6.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.56.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-tailwindcss": "^3.13.1",
+    "eslint-plugin-vue": "^9.19.2",
+    "postcss": "^8.4.32",
+    "prettier": "^3.1.1",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vue-eslint-parser": "^9.3.2",
+    "vue-tsc": "^1.8.27"
+  }
+}