vue-string-directives
v1.1.0
Published
Vue string directives library can change form input value dynamically.
Maintainers
tarkhovReadme
Vue string directives
Vue string directives library can change form input value dynamically. All languages are supported.
Contents
Compatibility
Library | Version ------- | ------- Vue | >= 3.5
Installation
NPM
npm install vue-string-directivesManually
Download package and unpack it or use following commands:
wget https://github.com/tarkhov/vue-string-directives/releases/download/v1.0.0/vue-string-directives.zip
unzip vue-string-directives.zipUsage
Add following code to your main.js file created by Vue CLI:
import { createApp } from 'vue'
import { VueStringDirectives } from 'vue-string-directives'
import App from './App.vue'
const app = createApp(App)
app.use(VueStringDirectives)
app.mount('#app')Alternatively you can use a specific directive to import it into a specific component:
import { upper, lower } from 'vue-string-directives'
export default {
directives: {
upper,
lower
}
}Also you can import all directives to component:
import { StringDirectivesMixin } from 'vue-string-directives'
export default {
mixins: [StringDirectivesMixin]
}Camel case
const camel = defineModel('camel')<template>
<!-- Input: camel 123 case. Output: camelCase. -->
<input type="text" v-model="camel" v-camel>
<!-- Input: camel 123 case. Output: camel123Case. -->
<input type="text" v-model="camel" v-camel.numbers>
<!-- Or -->
<input type="text" v-model="camel" v-camel="{ numbers: true }">
<!-- Input: cameL 123 casE. Output: camelCase. -->
<input type="text" v-model="camel" v-camel.lower>
<!-- Or -->
<input type="text" v-model="camel" v-camel="{ lower: true }">
<!-- Input: cameL 123 casE. Output: camel123Case. -->
<input type="text" v-model="camel" v-camel.numbers.lower>
<!-- Or -->
<input type="text" v-model="camel" v-camel="{ numbers: true, lower: true }">
</template>Capitalize
const capitalize = defineModel('capitalize')<template>
<!-- Input: capitalize. Output: Capitalize. -->
<input type="text" v-model="capitalize" v-capitalize>
<!-- Input: cApitalizE. Output: Capitalize. -->
<input type="text" v-model="capitalize" v-capitalize.lower>
<!-- Or -->
<input type="text" v-model="capitalize" v-capitalize="{ lower: true }">
</template>Flat case
const flat = defineModel('flat')<template>
<!-- Input: Flat 123 Case. Output: flatcase. -->
<input type="text" v-model="flat" v-flat>
<!-- Input: Flat 123 Case. Output: flat123case. -->
<input type="text" v-model="flat" v-flat.numbers>
<!-- Or -->
<input type="text" v-model="flat" v-flat="{ numbers: true }">
</template>Kebab case
const kebab = defineModel('kebab')<template>
<!-- Input: Kebab 123 Case. Output: kebab-case. -->
<input type="text" v-model="kebab" v-kebab>
<!-- Input: Kebab 123 Case. Output: kebab-123-case. -->
<input type="text" v-model="kebab" v-kebab.numbers>
<!-- Or -->
<input type="text" v-model="kebab" v-kebab="{ numbers: true }">
</template>Lower case
const lower = defineModel('lower')<template>
<!-- Input: LOWERCASE. Output: lowercase. -->
<input type="text" v-model="lower" v-lower>
<!-- Input: LOWERCASE. Output: lOWERCASE. -->
<input type="text" v-model="lower" v-lower.first>
<!-- Or -->
<input type="text" v-model="lower" v-lower="{ first: true }">
</template>Pad
const lower = defineModel('plowerd')<template>
<!-- Input: pad. Output: ___pad____. -->
<input type="text" v-model="pad" v-pad:10="_">
<!-- Or -->
<input type="text" v-model="pad" v-pad="{ count: 10, chars: '_' }">
<!-- Input: pad. Output: _________pad. -->
<input type="text" v-model="pad" v-pad:10.start="_">
<!-- Or -->
<input type="text" v-model="pad" v-pad="{ count: 10, chars: '_', start: true }">
<!-- Input: pad. Output: pad_______. -->
<input type="text" v-model="pad" v-pad:10.end="_">
<!-- Or -->
<input type="text" v-model="pad" v-pad="{ count: 10, chars: '_', end: true }">
</template>Pascal case
const pascal = defineModel('pascal')<template>
<!-- Input: pascal 123 case. Output: PascalCase. -->
<input type="text" v-model="pascal" v-pascal>
<!-- Input: pascal 123 case. Output: Pascal123Case. -->
<input type="text" v-model="pascal" v-pascal.numbers>
<!-- Or -->
<input type="text" v-model="pascal" v-pascal="{ numbers: true }">
<!-- Input: pascaL 123 casE. Output: PascalCase. -->
<input type="text" v-model="pascal" v-pascal.lower>
<!-- Or -->
<input type="text" v-model="pascal" v-pascal="{ lower: true }">
<!-- Input: pascaL 123 casE. Output: Pascal123Case. -->
<input type="text" v-model="pascal" v-pascal.numbers.lower>
<!-- Or -->
<input type="text" v-model="pascal" v-pascal="{ numbers: true, lower: true }">
</template>Repeat
const repeat = defineModel('repeat')<template>
<!-- Input: repeat. Output: repeat-----. -->
<input type="text" v-model="repeat" v-repeat:5="-">
<!-- Or -->
<input type="text" v-model="repeat" v-repeat="{ count: 5, string: '-' }">
</template>Replace
const replace = defineModel('replace')<template>
<!-- Input: replace123. Output: replace---. -->
<input type="text" v-model="replace" v-replace="{ regexp: '[0-9]', flags: 'g', string: '-' }">
</template>Snake case
const snake = defineModel('snake')<template>
<!-- Input: Snake 123 Case. Output: snake_case. -->
<input type="text" v-model="snake" v-snake>
<!-- Input: Snake 123 Case. Output: snake_123_case. -->
<input type="text" v-model="snake" v-snake.numbers>
<!-- Or -->
<input type="text" v-model="snake" v-snake="{ numbers: true }">
</template>Title case
const title = defineModel('title')<template>
<!-- Input: title 123 case. Output: Title Case. -->
<input type="text" v-model="title" v-title>
<!-- Input: title 123 case. Output: Title 123 Case. -->
<input type="text" v-model="title" v-title.numbers>
<!-- Or -->
<input type="text" v-model="title" v-title="{ numbers: true }">
<!-- Input: titlE 123 casE. Output: Title Case. -->
<input type="text" v-model="title" v-title.lower>
<!-- Or -->
<input type="text" v-model="title" v-title="{ lower: true }">
<!-- Input: titlE 123 casE. Output: Title 123 Case. -->
<input type="text" v-model="title" v-title.numbers.lower>
<!-- Or -->
<input type="text" v-model="title" v-title="{ numbers: true, lower: true }">
</template>Train case
const train = defineModel('train')<template>
<!-- Input: train 123 case. Output: Train-Case. -->
<input type="text" v-model="train" v-train>
<!-- Input: train 123 case. Output: Train-123-Case. -->
<input type="text" v-model="train" v-train.numbers>
<!-- Or -->
<input type="text" v-model="train" v-train="{ numbers: true }">
<!-- Input: traiN 123 casE. Output: Train-Case. -->
<input type="text" v-model="train" v-train.lower>
<!-- Or -->
<input type="text" v-model="train" v-train="{ lower: true }">
<!-- Input: traiN 123 casE. Output: Train-123-Case. -->
<input type="text" v-model="train" v-train.numbers.lower>
<!-- Or -->
<input type="text" v-model="train" v-train="{ numbers: true, lower: true }">
</template>Truncate
const truncate = defineModel('truncate')<template>
<!-- Input: truncate. Output: trunc... -->
<input type="text" v-model="truncate" v-truncate:5="'...'">
<!-- Or -->
<input type="text" v-model="truncate" v-truncate="{ count: 5, omission: '...' }">
</template>Upper case
const upper = defineModel('upper')<template>
<!-- Input: uppercase. Output: UPPERCASE. -->
<input type="text" v-model="upper" v-upper>
<!-- Input: uppercase. Output: Uppercase. -->
<input type="text" v-model="upper" v-upper.first>
<!-- Or -->
<input type="text" v-model="upper" v-upper="{ first: true }">
<!-- Input: uppercase one two three. Output: Uppercase One Two Three. -->
<input type="text" v-model="upper" v-upper.first.every>
<!-- Or -->
<input type="text" v-model="upper" v-upper="{ first: true, every: true }">
</template>Author
License
This project is licensed under the MIT License - see the LICENSE file for details.