Merge pull request #13 from privatenumber/develop

.github/workflows/release.yml

@@ -0,0 +1,33 @@
+name: Release
+
+on:
+  push:
+    branches: [ master, next, next-major, beta, alpha ]
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - name: Install dependencies
+        run: |
+          npm i -g pnpm
+          pnpm i --frozen-lockfile
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test --if-present
+      - name: Build
+        run: npm run build --if-present
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+name: Test
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [master, develop, next]
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    strategy:
+      matrix:
+        node-version: [10.x, 14.x]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: |
+          npm i -g pnpm
+          pnpm i --frozen-lockfile
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test --if-present

.gitignore

@@ -1,20 +1,25 @@
+# Mac OS X
 .DS_Store
-node_modules
 
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw*
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Jest coverage data
+coverage
+
+# Distribution files
+dist

README.md

@@ -1,14 +1,51 @@
-# SplitView
+# SplitView [![Latest version](https://badgen.net/npm/v/vue-split-view)](https://npm.im/vue-split-view) [![Monthly downloads](https://badgen.net/npm/dm/vue-split-view)](https://npm.im/vue-split-view) [![Install size](https://packagephobia.now.sh/badge?p=vue-split-view)](https://packagephobia.now.sh/result?p=vue-split-view) [![Bundle size](https://badgen.net/bundlephobia/minzip/vue-split-view)](https://bundlephobia.com/result?p=vue-split-view)
 
-A component that offers two slots with a draggable divider.
+Create a resizable split-view to partition the UI.
+
+👉 [CodePen Demo](https://codepen.io/privatenumber/pen/xxEYxgB)
+
+## 🚀 Install
+```sh
+npm i vue-split-view
+```
+
+## 🚦 Quick Setup
+
+### Bundler
+
+#### Vue.js 3
+```js
+import VueSplitView from 'vue-split-view'
+```
+
+#### Vue.js 2
+```js
+import VueSplitView from 'vue-split-view/dist/vue2'
+```
+
+### Browser
+- Load the CSS stylesheet: `vue-split-view/dist/style.css`
+
+#### ESM
+```js
+import VueSplitView from 'vue-split-view/dist/vue3.esm.js'
+```
+
+#### UMD
+```
+vue-split-view/dist/vue3.umd.js
+```
+
+## 👨🏻‍🏫 Examples
 
 ### Horizontal split
 ```html
 <split-view>
-	<template slot="A">
+	<template #A>
 		Slot A
 	</template>
-	<template slot="B">
+
+	<template #B>
 		Slot B
 	</template>
 </split-view>
@@ -17,49 +54,94 @@ A component that offers two slots with a draggable divider.
 ### Vertical split
 ```html
 <split-view direction="vertical">
-	<template slot="A">
+	<template #A>
 		Slot A
 	</template>
-	<template slot="B">
+
+	<template #B>
 		Slot B
 	</template>
 </split-view>
 ```
 
-### Setting drag constraints
+### Minimum width / height
 ```html
 <split-view
 	direction="horizontal"
 	a-init="100px"
 	a-min="50px"
 	a-max="200px"
 >
-	<template slot="A">
+	<template #A>
 		Slot A
 	</template>
-	<template slot="B">
-		Slot B
 
+	<template #B>
+		Slot B
 	</template>
 </split-view>
 ```
 
 ### Nesting split-views
 ```html
 <split-view direction="horizontal">
-	<template slot="A">
+	<template #A>
 		Slot A
 	</template>
-	<split-view
-		slot="B"
-		direction="vertical"
-	>
-		<template slot="A">
-			Slot BA
-		</template>
-		<template slot="B">
-			Slot BB
-		</template>
-	</split-view>
+
+	<template #B>
+		<split-view direction="vertical">
+			<template #A>
+				Slot BA
+			</template>
+
+			<template #B>
+				Slot BB
+			</template>
+		</split-view>
+	</template>
 </split-view>
 ```
+
+## 🎛 API
+
+
+### Props
+
+#### direction
+
+Type: `String`
+
+Default: `horizontal`
+
+The direction the split-view should be partitioned in. Possible values are: `horizontal`, `vertical`.
+
+#### a-init
+
+Type: `String`
+
+Default: `none`
+
+The initial width/height of the first partition. The second partition fills the remaining width/height. Numeric values translate to pixels, string values are directly used for the `width`/`height` CSS property.
+
+#### a-min
+Type: `String`
+
+Default: `none`
+
+The minimum width/height of the first partition. This influences the second partition's maximum width/height. The value is directly used for the `min-width`/`min-height` CSS property.
+
+#### a-max
+Type: `String`
+
+Default: `none`
+
+The maxium width/height of the first partition. This influences the second partition's minimum width/height. The value is directly used for the `max-width`/`max-height` CSS property.
+
+### Slots
+
+#### A
+Content of the first partition.
+
+#### B
+Content of the second partition.

babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	presets: [
+		[
+			'@babel/preset-env',
+			{
+				loose: true,
+			},
+		],
+	],
+};