Skip to content

Commit 4e82fd8

Browse files
hperrinhperrin
committed
feat: add chip-input component
1 parent 0989e80 commit 4e82fd8

30 files changed

+1111
-0
lines changed

‎MIGRATING.md

+9
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,22 @@ This doc contains information that will help you migrate your code from an older
44

55
# SMUI 7 -> SMUI 8
66

7+
## Breaking Changes
8+
79
- Svelte 5 is required! Svelte 4 will not work.
810
- Events have been renamed, removing colons and adopting CamelCase. (ex: SMUISwitch:change to SMUISwitchChange)
911
- Event listeners for DOM events no longer need to use the CustomEvent type. They can use the correct type, like MouseEvent and KeyboardEvent.
1012
- Event modifiers are now wrapper functions, exported from `@smui/common/events`.
1113
- The deprecated "MDC" events have been removed. All event names should be migrated to the corresponding "SMUI" event names.
1214
- The "Fixation" theme now uses Tahoma as its large header font.
1315

16+
## Changes
17+
18+
### Components
19+
20+
- Chip Input
21+
- A new component!
22+
1423
# SMUI 6 -> SMUI 7
1524

1625
SMUI 7 migrated to upstream MDC 14.0 from 13.0:

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ Click a component/package below to go to the documentation. (Note that this docu
104104
- [Autocomplete](packages/autocomplete/README.md)‡
105105
- [Checkbox](packages/checkbox/README.md)
106106
- [Chips](packages/chips/README.md)
107+
- [Chip Input](packages/chip-input/README.md)‡
107108
- [Floating Label](packages/floating-label/README.md)
108109
- [Form Field](packages/form-field/README.md)
109110
- [Line Ripple](packages/line-ripple/README.md)

‎package-lock.json

+52
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/chip-input/README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Svelte Material UI - Chip Input
2+
3+
A chip input lets the user enter text and have that text be included in a set of chips. It can provide autocomplete functionality as well, where the user can pick a choice from the autocomplete to be added to the set of chips.
4+
5+
# Installation
6+
7+
```sh
8+
npm install --save-dev @smui-extra/chip-input
9+
```
10+
11+
# Examples and Usage Information
12+
13+
https://sveltematerialui.com/demo/chip-input

‎packages/chip-input/_index.scss

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@use 'smui-theme';
2+
@use './style';

‎packages/chip-input/_style.scss

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@use '@smui-extra/autocomplete/style' as autocomplete-style;
2+
@use '@smui/chips/style' as chips-style;
3+
@use '@smui/floating-label/style' as floating-label-style;
4+
@use '@smui/line-ripple/style' as line-ripple-style;
5+
@use '@smui/list/style' as list-style;
6+
@use '@smui/textfield/style' as textfield-style;
7+
8+
.smui-chip-input {
9+
display: flex;
10+
flex-wrap: wrap;
11+
align-items: center;
12+
position: relative;
13+
gap: 8px;
14+
15+
&.smui-chip-input--disabled .mdc-deprecated-chip-trailing-action {
16+
display: none;
17+
}
18+
19+
.smui-chip-input__chip-set {
20+
padding: 0;
21+
gap: 8px;
22+
}
23+
24+
.smui-chip-input__chip-set .mdc-chip {
25+
margin: 0;
26+
}
27+
28+
.smui-chip-input__autocomplete {
29+
flex-grow: 1;
30+
}
31+
32+
.smui-chip-input__textfield {
33+
width: 100%;
34+
}
35+
36+
.smui-chip-input__loading {
37+
display: flex;
38+
width: 100%;
39+
justify-content: center;
40+
align-items: center;
41+
}
42+
}

‎packages/chip-input/package.json

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{
2+
"name": "@smui-extra/chip-input",
3+
"version": "8.0.0-alpha.0",
4+
"description": "Svelte Material UI - Chip Input",
5+
"type": "module",
6+
"main": "dist/index.js",
7+
"module": "dist/index.js",
8+
"svelte": "dist/index.js",
9+
"exports": {
10+
"./package.json": {
11+
"types": "./package.json",
12+
"svelte": "./package.json"
13+
},
14+
".": {
15+
"types": "./src/index.d.ts",
16+
"svelte": "./dist/index.js"
17+
}
18+
},
19+
"types": "src/index.d.ts",
20+
"keywords": [
21+
"svelte",
22+
"svelte3",
23+
"material-ui",
24+
"material-design",
25+
"material",
26+
"svelte-components",
27+
"sveltejs"
28+
],
29+
"scripts": {
30+
"build": "npm run build:js && npm run build:svelte && npm run build:sass",
31+
"build:js": "tsc -p . --outDir dist/ --rootDir src/",
32+
"build:svelte": "cp src/*.svelte dist/",
33+
"build:sass": "sass --no-source-map -I node_modules -I ../smui-theme/node_modules -I ../../node_modules _style.scss bare.css",
34+
"clean": "git status --ignored -u --porcelain . | grep -v node_modules/ | grep -e '^!! ' | sed 's/^!! packages\\/[a-z-]*\\///g' | tr '\\n' ' ' | xargs rm",
35+
"check": "npx svelte-check --ignore dist",
36+
"prepublish": "npm run build",
37+
"test": "echo \"Error: no test specified\" && exit 1"
38+
},
39+
"publishConfig": {
40+
"access": "public"
41+
},
42+
"repository": {
43+
"type": "git",
44+
"url": "git+https://github.com/hperrin/svelte-material-ui.git"
45+
},
46+
"author": "Hunter Perrin <hperrin@gmail.com>",
47+
"bugs": {
48+
"url": "https://github.com/hperrin/svelte-material-ui/issues"
49+
},
50+
"license": "Apache-2.0",
51+
"dependencies": {
52+
"@smui-extra/autocomplete": "^8.0.0-alpha.0",
53+
"@smui/chips": "^8.0.0-alpha.0",
54+
"@smui/common": "^8.0.0-alpha.0",
55+
"@smui/floating-label": "^8.0.0-alpha.0",
56+
"@smui/line-ripple": "^8.0.0-alpha.0",
57+
"@smui/list": "^8.0.0-alpha.0",
58+
"@smui/textfield": "^8.0.0-alpha.0",
59+
"svelte2tsx": "^0.7.8"
60+
},
61+
"devDependencies": {
62+
"@tsconfig/svelte": "^5.0.4",
63+
"sass": "^1.76.0",
64+
"svelte-check": "^3.7.1",
65+
"tslib": "^2.6.2",
66+
"typescript": "^5.4.5"
67+
}
68+
}

0 commit comments

Comments
 (0)