first commit

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  plugins: ['prettier'],
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.vue'],
+      parser: 'vue-eslint-parser',
+      extends: ['plugin:vue/essential', 'stable', 'stable/typescript'],
+      parserOptions: {
+        extraFileExtensions: ['.vue'],
+        parser: '@typescript-eslint/parser',
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+    {
+      files: ['**/*.js'],
+      extends: ['stable'],
+    },
+  ],
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+
+/lib
+/example-dist

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit 

.prettierrc

@@ -0,0 +1 @@
+{ "semi": false, "singleQuote": true }

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/node_modules": true
+  },
+  "editor.formatOnSave": true
+}

README.md

@@ -0,0 +1,96 @@
+# Vue Refreshable Scroll View
+
+<p>
+  <a href="https://npmcharts.com/compare/vue-refreshable-scroll-view?minimal=true"><img alt="Downloads" src="https://img.shields.io/npm/dt/vue-refreshable-scroll-view.svg?style=flat-square" /></a>
+  <a href="https://www.npmjs.com/package/vue-refreshable-scroll-view"><img alt="Version" src="https://img.shields.io/npm/v/vue-refreshable-scroll-view.svg?style=flat-square" /></a>
+  <a href="https://www.npmjs.com/package/vue-refreshable-scroll-view"><img alt="License" src="https://img.shields.io/npm/l/vue-refreshable-scroll-view.svg?style=flat-square" /></a>
+  <img alt="VueJS 3.x" src="https://img.shields.io/badge/vue.js-3.x-brightgreen.svg?style=flat-square" />
+  <img alt="Language Typescript" src="https://img.shields.io/badge/language-Typescript-007acc.svg?style=flat-square" />
+</p>
+
+iOS Style Vue component (for Vue 3.0) that you can pull to refresh.
+
+[See Example](https://) ([sources](./example))
+
+## Installation
+
+```bash
+npm i vue-refreshable-scroll-view
+```
+
+## Usage
+
+```js
+import { createApp } from 'vue'
+import RefreshableScrollView from 'vue-refreshable-scroll-view'
+
+const app = createApp(/* */)
+
+app.use(RefreshableScrollView) // export default is plugin
+```
+
+**Local Registration**
+
+[Vue3 Local Registration Guide](https://v3.vuejs.org/guide/component-registration.html#local-registration)
+
+```vue
+<template>
+  <div class="h-screen overflow-y-hidden">
+    <RefreshableScrollView
+      class="h-full overflow-y-auto"
+      :on-refresh="onRefersh"
+    >
+      <template #loading="{ state, progress }">
+        <div>
+          {{ state }}
+        </div>
+      </template>
+      <div>
+        <template v-for="(item, index) in items" :key="index">
+          <div>
+            {{ item }}
+          </div>
+        </template>
+      </div>
+    </RefreshableScrollView>
+  </div>
+</template>
+<script>
+import { RefreshableScrollView } from 'vue-refreshable-scroll-view'
+
+export default {
+  components: {
+    RefreshableScrollView,
+  },
+  methods: {
+    async onRefersh() {
+      await work()
+    },
+  },
+}
+</script>
+```
+
+## Options
+
+### Props
+
+| Name              | Type       | Default | Example          |
+| ----------------- | :--------- | ------- | ---------------- |
+| distanceToRefresh | `number`   | `42`    |                  |
+| damping           | `number`   | `224`   |                  |
+| scale             | `number`   | `0.6`   | between 0 ~ 1    |
+| onRefresh         | `function` | `null`  | `async function` |
+
+### Events
+
+| Name         | Type    |
+| ------------ | :------ |
+| scroll:event | `event` |
+
+### Slots
+
+| Name    | Prop                                  | Default       |
+| ------- | :------------------------------------ | ------------- |
+| default | `{ }`                                 |               |
+| loading | `{ state: string, progress: number }` | `{{ state }}` |

commitlint.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  extends: [
+    '@commitlint/config-conventional',
+  ],
+}

entry.ts

@@ -0,0 +1,4 @@
+import RefreshableScrollView from './src'
+
+export * from './src'
+export default RefreshableScrollView

example/Example.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex flex-col h-screen">
+    <h2 class="m-4 text-4xl font-bold">Refreshable ScrollView</h2>
+    <h4 class="mx-4 mb-2 text-lg text-gray-400">
+      iOS Style Vue component that you can pull to refresh.
+    </h4>
+    <RefreshableScrollView
+      class="flex-grow overflow-y-auto"
+      :on-refresh="onRefersh"
+    >
+      <template #loading="{ state, progress }">
+        <div class="grid w-full h-full text-gray-500 place-items-center">
+          {{ state }}
+        </div>
+      </template>
+      <div class="px-2">
+        <template v-for="(item, index) in items" :key="index">
+          <div class="py-2">
+            {{ item }}
+          </div>
+        </template>
+      </div>
+    </RefreshableScrollView>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return {
+      items: [...Array(51).keys()],
+    }
+  },
+  methods: {
+    async onRefersh() {
+      await new Promise((res) => setTimeout(res, 2000))
+    },
+  },
+})
+</script>

example/entry.ts

@@ -0,0 +1,12 @@
+import './example.css'
+
+import { createApp } from 'vue'
+import RefreshableScrollView from 'refreshable-scroll-view'
+
+import Example from './Example.vue'
+
+const app = createApp(Example)
+
+app.use(RefreshableScrollView)
+
+app.mount('#app')

example/example.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

example/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Vue Refreshable Scroll View Sample</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/entry.ts"></script>
+  </body>
+</html>

example/vite.config.ts

@@ -0,0 +1,16 @@
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      'refreshable-scroll-view': resolve(__dirname, '../src'),
+    },
+  },
+  build: {
+    outDir: resolve(__dirname, '../example-dist'),
+  },
+})