├── .gitignore
├── scripts
└── build.js
├── package.json
├── LICENSE
├── src
└── index.js
├── README.md
└── dist
├── slug.esm.js
└── slug.min.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # misc
9 | .DS_Store
10 | *.pem
11 |
12 | # debug
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 |
17 | # local env files
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 |
23 | # testing
24 | index.html
25 |
--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
1 | buildPlugin({
2 | entryPoints: ['builds/cdn.js'],
3 | outfile: 'dist/slug.min.js',
4 | })
5 |
6 | buildPlugin({
7 | entryPoints: ['builds/module.js'],
8 | outfile: 'dist/slug.esm.js',
9 | platform: 'neutral',
10 | mainFields: ['main', 'module'],
11 | })
12 |
13 | function buildPlugin(buildOptions) {
14 | return require('esbuild').buildSync({
15 | ...buildOptions,
16 | minify: true,
17 | bundle: true,
18 | })
19 | }
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "alpinejs-slug",
3 | "version": "1.1.3",
4 | "description": "Transform a string into a slug with Alpine JS and Slugify 🐌",
5 | "keywords": [
6 | "Alpine JS Plugin",
7 | "Alpine JS Plugins",
8 | "Alpine JS Slug",
9 | "Alpine JS Slugify",
10 | "Alpine JS",
11 | "Alpine",
12 | "Slugify",
13 | "String to Slug"
14 | ],
15 | "author": "Mark Mead",
16 | "license": "MIT",
17 | "repository": "https://github.com/markmead/alpinejs-slug.git",
18 | "module": "dist/slug.esm.js",
19 | "unpkg": "dist/slug.min.js",
20 | "scripts": {
21 | "build": "node scripts/build.js"
22 | },
23 | "devDependencies": {
24 | "esbuild": "^0.25.0",
25 | "slugify": "^1.6.6"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Mark Mead
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import slugify from 'slugify'
2 |
3 | export default function (Alpine) {
4 | Alpine.directive(
5 | 'slug',
6 | (el, { modifiers, expression }, { evaluateLater, effect }) => {
7 | const setValue = evaluateLater(expression)
8 |
9 | const isInput = el.tagName === 'INPUT'
10 |
11 | const replacementMod = modifiers.includes('replacement')
12 | ? modifiers[modifiers.indexOf('replacement') + 1]
13 | : '-'
14 |
15 | const localeMod = modifiers.includes('locale')
16 | ? modifiers[modifiers.indexOf('locale') + 1]
17 | : {}
18 |
19 | const isLowercase = !modifiers.includes('keep-case')
20 | const isStrict = !modifiers.includes('not-strict')
21 | const isTrimmed = !modifiers.includes('untrimmed')
22 |
23 | let isLazy = modifiers.includes('lazy')
24 |
25 | const slugOptions = {
26 | lower: isLowercase,
27 | replacement: replacementMod,
28 | strict: isStrict,
29 | trim: isTrimmed,
30 | locale: localeMod,
31 | }
32 |
33 | effect(() => {
34 | setValue((passedString) => {
35 | if (isLazy) {
36 | isLazy = false
37 |
38 | return
39 | }
40 |
41 | const stringSlug = slugify(passedString, slugOptions)
42 |
43 | isInput ? (el.value = stringSlug) : (el.innerText = stringSlug)
44 | })
45 | })
46 | }
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Alpine JS Slug
2 |
3 | Transform a string into a slug with Alpine JS and
4 | [Slugify](https://www.npmjs.com/package/slugify) 🐌
5 |
6 | ## Install
7 |
8 | ### With a CDN
9 |
10 | ```html
11 |
15 |
16 |
17 | ```
18 |
19 | ### With a Package Manager
20 |
21 | ```shell
22 | npm i -D alpinejs-slug
23 |
24 | yarn add -D alpinejs-slug
25 | ```
26 |
27 | ```js
28 | import Alpine from 'alpinejs'
29 | import slug from 'alpinejs-slug'
30 |
31 | Alpine.plugin(slug)
32 |
33 | Alpine.start()
34 | ```
35 |
36 | ## Example
37 |
38 | ```html
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |