Skip to content

Commit 78a39e6

Browse files
syropiansyropian
committed
Inital v2 commit
1 parent 3b52174 commit 78a39e6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+2859
-10024
lines changed

‎.babelrc

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎.editorconfig

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎.gitattributes

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎.github/workflows/tests.yml

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎.gitignore

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
node_modules
2-
*.log
3-
*.orig
42
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎.npmignore

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎.vscode/extensions.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["johnsoncodehk.volar"]
3+
}

‎LICENSE

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎README.md

Lines changed: 11 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,20 @@
1-
# vue-input-autowidth [![Actions Status](https://github.com/syropian/vue-input-autowidth/workflows/Tests/badge.svg)](https://github.com/syropian/vue-input-autowidth/actions)
1+
# vue-input-autowidth
22

3-
> A Vue.js directive for adjusting a text input's width to fit its content.
3+
A Vue.js directive for adjusting a text input's width to fit its content.
44

5-
![](http://d.pr/i/lfmNKs+)
6-
7-
**[Demo](https://syropian.github.io/vue-input-autowidth/)**
8-
9-
### Install
5+
## Installation
106

117
```bash
12-
$ yarn add vue-input-autowidth
8+
npm install vue-input-autowidth@next --save
9+
# or...
10+
yarn add vue-input-autowidth@next
1311
```
1412

15-
or
16-
17-
```bash
18-
$ npm install --save vue-input-autowidth
19-
```
20-
21-
It's also available on Unpkg: https://unpkg.com/vue-input-autowidth
22-
23-
### Usage
24-
25-
```js
26-
import VueInputAutowidth from 'vue-input-autowidth'
27-
28-
Vue.use(VueInputAutowidth)
29-
30-
// and in your template...
31-
<input
32-
type="text"
33-
v-autowidth="{maxWidth: '960px', minWidth: '20px', comfortZone: 0}"
34-
v-model="name"
35-
placeholder="Watch me change size with my content!"
36-
/>
37-
```
38-
39-
### Options
40-
41-
#### maxWidth
13+
_or_
4214

43-
Type: `String`
44-
Default: `'none'`
15+
Use the UMD build from [Unpkg](https://unpkg.com/vue-input-autowidth), available as `VueInputAutowidth` in the global scope.
4516

46-
The maximum width the input field will grow to.
47-
48-
#### minWidth
49-
50-
Type: `String`
51-
Default: `'none'`
52-
53-
The minimum width the input field will shrink to.
54-
55-
#### comfortZone
56-
57-
Type: `Number`
58-
Default: `0`
59-
60-
The additional space in pixels to add to the far side of the input's content.
61-
62-
### Development
63-
64-
```bash
65-
# To run the example
66-
$ npm run example
67-
68-
# To run the tests
69-
$ npm test
70-
71-
# To publish the dist file
72-
$ npm run build
17+
```html
18+
<script src="/vendor/vue.js">
19+
<script src="https://unpkg.com/vue-input-autowidth">
7320
```
74-
75-
### License
76-
77-
MIT © [Collin Henderson](https://github.com/syropian)

‎__tests__/VueInputAutowidth.test.js

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎demo/.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎demo/.vscode/extensions.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["johnsoncodehk.volar"]
3+
}

‎demo/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Vue 3 + Typescript + Vite
2+
3+
This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
8+
9+
## Type Support For `.vue` Imports in TS
10+
11+
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.

‎demo/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>vue-input-autowidth</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎demo/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "demo",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vue-tsc --noEmit && vite build -c ./vite.demo.config.ts",
7+
"serve": "vite preview"
8+
},
9+
"dependencies": {
10+
"vue": "^3.2.6"
11+
},
12+
"devDependencies": {
13+
"@vitejs/plugin-vue": "^1.8.0",
14+
"@tailwindcss/typography": "^0.4.1",
15+
"@highlightjs/vue-plugin": "^2.0.1",
16+
"@vue/compiler-sfc": "^3.2.6",
17+
"autoprefixer": "^10.3.4",
18+
"highlight.js": "^11.2.0",
19+
"postcss": "^8.3.6",
20+
"tailwindcss": "^2.2.15",
21+
"typescript": "^4.3.2",
22+
"vite": "^2.5.4",
23+
"vue-tsc": "^0.2.2"
24+
}
25+
}

‎demo/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎demo/public/favicon.ico

4.19 KB
Binary file not shown.

‎demo/src/App.vue

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<template>
2+
<div class="my-32">
3+
<div
4+
class="flex items-center justify-between w-full mx-auto mt-8 max-w-prose"
5+
>
6+
<h1 class="text-4xl font-bold">
7+
<span class="relative inline-block top-1">↔️</span>
8+
<span class="inline-block ml-2">vue-input-autowidth</span>
9+
</h1>
10+
<nav class="flex items-center">
11+
<a
12+
href="https://github.com/syropian/vue-input-autowidth"
13+
target="_blank"
14+
rel="noopener noreferrer"
15+
class="inline-block transition-colors hover:text-purple-500"
16+
>
17+
GitHub
18+
</a>
19+
</nav>
20+
</div>
21+
<div class="w-full mx-auto mt-8 max-w-prose">
22+
<input
23+
type="text"
24+
class="input"
25+
placeholder="Watch me change size with my content!"
26+
v-model="msg"
27+
v-autowidth
28+
/>
29+
</div>
30+
<div class="w-full mx-auto mt-8 prose max-w-prose">
31+
<h2>Install</h2>
32+
<highlightjs language="bash" :code="installCode" />
33+
34+
<h2>Add The Plugin</h2>
35+
<h3>Globally</h3>
36+
<highlightjs language="javascript" :code="addGlobalCode" />
37+
<h3>Per-component</h3>
38+
<highlightjs language="javascript" :code="perComponentCode" />
39+
<h3>Add the directive to a text input</h3>
40+
<highlightjs language="xml" :code="useDirectiveCode" />
41+
42+
<h3>Configure</h3>
43+
<p>You can pass various options to the directive</p>
44+
<highlightjs language="xml" :code="showOptionsCode" />
45+
<input
46+
type="text"
47+
class="input"
48+
placeholder="An example with custom options"
49+
v-model="msg"
50+
v-autowidth
51+
/>
52+
53+
<footer>
54+
<p class="text-gray-500">
55+
&copy; {{ new Date().getFullYear() }} Collin Henderson
56+
</p>
57+
</footer>
58+
</div>
59+
</div>
60+
</template>
61+
62+
<script setup lang="ts">
63+
import { Ref, ref } from "vue";
64+
65+
const msg: Ref<string> = ref("");
66+
67+
const installCode = ref(`$ npm install vue-input-autowidth@next --save
68+
# or...
69+
$ yarn add vue-input-autowidth@next`);
70+
const addGlobalCode = ref(`import { createApp } from 'vue'
71+
import App from './App.vue'
72+
import VueInputAutowidth from 'vue-input-autowidth'
73+
74+
createApp(App).use(VueInputAutowidth).mount("#app")
75+
`);
76+
const perComponentCode = `import { directive as VueInputAutowidth } from 'vue-input-autowidth'
77+
78+
export default defineComponent({
79+
directives: { autowidth: VueInputAutowidth },
80+
setup() {
81+
...
82+
},
83+
})`;
84+
const useDirectiveCode = `<input
85+
type="text"
86+
placeholder="Watch me change size with my content!"
87+
v-model="msg"
88+
v-autowidth
89+
/>`;
90+
91+
const showOptionsCode = ref(`<input
92+
type="text"
93+
placeholder="Watch me change size with my content!"
94+
v-model="msg"
95+
v-autowidth="{
96+
minWidth: '75px',
97+
maxWidth: '75%',
98+
comfortZone: '1ch',
99+
}"
100+
/>`);
101+
</script>
102+
103+
<style>
104+
#app {
105+
-webkit-font-smoothing: antialiased;
106+
-moz-osx-font-smoothing: grayscale;
107+
}
108+
109+
.input {
110+
@apply transition-colors min-w-0 px-3 py-2 rounded-md text-lg focus:outline-none border-2 border-gray-300 focus:border-purple-500;
111+
}
112+
</style>

‎demo/src/app.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

0 commit comments

Comments
 (0)