-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #141 from silinternational/develop
Release
- Loading branch information
Showing
27 changed files
with
2,438 additions
and
2,689 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,12 +4,13 @@ Reusable Svelte components for some internal applications | |
|
|
||
| ## installation | ||
|
|
||
| To install to your Svelte project, open your project's root directory in a terminal. Type `npm i @silintl/ui-components --save-dev` and press enter. You may also have to run `npm i material-components-web@10.0.0 --save-dev` and possibly `npm i [email protected] --save-dev` to get sass stuff working if it doesn't work initially or you want to develop additional material web components in your app. It may depend on your version of npm if this is necessary. You should already have svelte@3 installed if you are using this library. | ||
| To install to your Svelte project, open your project's root directory in a terminal. Type or paste `npm i -D [email protected] material-components-web@13.0.0 @silintl/ui-components` and press enter (versions will vary if you use an older release of this repo). Sass and-material-components web are required to develop additional material web components in your app, but it may depend on your version of npm if they are necessary even if you don't. You should already have svelte@3 installed if you are using this library. If you are using typescript you will probaly need to run `npm i -D tslib` to avoid a material-components-web type error. | ||
|
|
||
| You will also want to follow the example below for your index.html (app.html for sveltekit templates) for Material Icons to work and for Google fonts to load. | ||
| see https://github.com/material-components/material-web#2-write-html-and-javascript | ||
|
|
||
| Your index.html could look something like this | ||
|
|
||
| ``` | ||
| <!doctype html> | ||
| <html> | ||
|
|
@@ -27,35 +28,40 @@ Your index.html could look something like this | |
| <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"> | ||
| </head> | ||
| ... | ||
| ``` | ||
| ``` | ||
|
|
||
| See `theming` and `typography` for more details on how to configure fonts and themes. | ||
|
|
||
| See https://google.github.io/material-design-icons/#sizing for sizing material icons. | ||
|
|
||
| ## theming | ||
|
|
||
| If you are using an [MDC theme](https://material.io/develop/web/docs/theming) you may want to include a _typography.scss file and import it into | ||
| _index.scss. | ||
| If you are using an [MDC theme](https://material.io/develop/web/docs/theming) you may want to include a \_typography.scss file and import it into | ||
| \_index.scss. | ||
|
|
||
| Import _index.scss or other file(s) that contains stuff like --mdc-theme-primary --mdc-theme-secondary and other root variables to the App.svelte (Index.svelte in sveltekit templates) or Index.html (App.html for sveltekit) file (unless they are being declared there already) so they get applied to the ui-components. | ||
| Import \_index.scss or other file(s) that contains stuff like --mdc-theme-primary --mdc-theme-secondary and other root variables to the App.svelte (Index.svelte in sveltekit templates) or Index.html (App.html for sveltekit) file (unless they are being declared there already) so they get applied to the ui-components. | ||
|
|
||
| See https://github.com/silinternational/ui-components/blob/develop/stories/_theme.scss for exposed theme properties. | ||
|
|
||
| ## typography | ||
|
|
||
| See [typography](https://material.io/develop/web/components/typography) | ||
|
|
||
| In your _typography.scss or similar file include the following snippet: | ||
| In your \_typography.scss or similar file include the following snippet: | ||
|
|
||
| ``` | ||
| @use '@material/typography/mdc-typography'; | ||
| ``` | ||
|
|
||
| and something similar to the following: | ||
|
|
||
| ``` | ||
| :root { | ||
| --mdc-typography-font-family: Source Sans Pro, Roboto, sans-serif; | ||
| } | ||
| ``` | ||
| and then import it to your sass entry point like _index.scss. You may prefer to declare your root typography rules elsewhere (eg. index.html) which is ok. | ||
|
|
||
| and then import it to your sass entry point like \_index.scss. You may prefer to declare your root typography rules elsewhere (eg. index.html) which is ok. | ||
|
|
||
| ## bundler configuration | ||
|
|
||
|
|
@@ -112,9 +118,7 @@ Just include `import { Button } from '@silintl/ui-components'` in your script se | |
|
|
||
| In your main sass file just use the following pattern to override any sass variables. See https://github.com/silinternational/ui-components/blob/develop/stories/_index.scss for exposed sass variables. | ||
|
|
||
| `@use './components/mdc/Button' with ( | ||
| $radius: 16px | ||
| );` | ||
| `@use './components/mdc/Button' with ( $radius: 16px );` | ||
|
|
||
| ## examples | ||
|
|
||
|
|
@@ -195,4 +199,4 @@ Classes from [global.scss](https://github.com/silinternational/ui-components/blo | |
|
|
||
| ## contributions | ||
|
|
||
| All commit messages must follow [Angular Commit Message Conventions](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format) for a release to be triggered upon merging to main. Here is a basic example: `feat(pencil): add 'graphiteWidth' option`. This will trigger a minor release. If this is not done, an empty commit with the proper format can be pushed to trigger the release. See https://github.com/semantic-release/semantic-release for more details. Semantic Release will also update the version and the CHANGELOG based on the commit messages. | ||
| All commit messages must follow [Angular Commit Message Conventions](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format) for a release to be triggered upon merging to main. Here is a basic example: `feat(pencil): add 'graphiteWidth' option`. This will trigger a minor release. If this is not done, an empty commit with the proper format can be pushed to trigger the release. See https://github.com/semantic-release/semantic-release for more details. Semantic Release will also update the version and the CHANGELOG based on the commit messages. | ||
91 changes: 91 additions & 0 deletions
91
components/custom/SearchableSelect/SearchableSelect.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| <script> | ||
| import { generateRandomID } from '../../../random' | ||
| import { createEventDispatcher } from 'svelte' | ||
| export let options = {} | ||
| export let choice = '' | ||
| export let placeholder = '' | ||
| export let padding = '12px' | ||
| export let width = '232px' | ||
| export let maxlength = 255 | ||
| export let disabled = false | ||
| let element = {} | ||
| let randomId = generateRandomID('dataList-') | ||
| $: internalChoice = choice | ||
| const dispatch = createEventDispatcher() | ||
| const onChange = () => { | ||
| options[internalChoice] && dispatch('chosen', options[internalChoice]) | ||
| choice = internalChoice | ||
| element.blur() | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } | ||
| .custom-field { | ||
| font-size: 14px; | ||
| position: relative; | ||
| border-top: 20px solid transparent; | ||
| } | ||
| .custom-field input { | ||
| border-radius: 8px; | ||
| border: 1px solid gray; | ||
| padding: var(--field-padding) 0 var(--field-padding) var(--field-padding); | ||
| } | ||
| .custom-field .placeholder { | ||
| position: absolute; | ||
| bottom: -52px; | ||
| top: 23px; | ||
| transform: translateY(-50%); | ||
| color: #aaa; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| left: var(--field-padding); | ||
| width: calc(100% - (var(--field-padding) * 2)); | ||
| transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease; | ||
| } | ||
| .custom-field input:not(:placeholder-shown) + .placeholder, | ||
| .custom-field input:focus + .placeholder { | ||
| top: 3px; | ||
| font-size: 10px; | ||
| color: #222; | ||
| } | ||
| </style> | ||
|
|
||
| <label class="custom-field" style="--field-padding: {padding}; {$$props.class}"> | ||
| <input | ||
| autocomplete="off" | ||
| {disabled} | ||
| {maxlength} | ||
| class="fs-14 {$$props.class}" | ||
| style="width: {width}" | ||
| list={randomId} | ||
| placeholder=" " | ||
| bind:this={element} | ||
| bind:value={internalChoice} | ||
| on:change={onChange} | ||
| on:blur={() => dispatch('check', internalChoice)} | ||
| on:focus={() => (internalChoice = '')} | ||
| /> | ||
| <span class="placeholder">{placeholder}</span> | ||
| </label> | ||
|
|
||
| <datalist id={randomId}> | ||
| {#each Object.keys(options) as option} | ||
| <option value={option} /> | ||
| {/each} | ||
| </datalist> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import SearchableSelect from './SearchableSelect.svelte' | ||
|
|
||
| export default SearchableSelect |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| import Badge from './Badge' | ||
| import Form from './Form' | ||
| import StaticChip from './StaticChip' | ||
| import SearchableSelect from './SearchableSelect' | ||
|
|
||
| export { Badge, Form, StaticChip } | ||
| export { Badge, Form, SearchableSelect, StaticChip } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1 @@ | ||
| @use '@material/icon-button'; | ||
|
|
||
| @include icon-button.core-styles; | ||
| @use '@material/icon-button/styles'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <li role="separator" class="mdc-list-divider" /> | ||
| <li role="separator" class="mdc-deprecated-list-divider" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| @use '@material/list'; | ||
|
|
||
| @include list.core-styles; | ||
| @include list.deprecated-core-styles; |
Oops, something went wrong.