├── .github
    └── workflows
    │   └── index.yml
├── .gitignore
├── .husky
    ├── commit-msg
    └── pre-commit
├── .npmignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── .vscode
    └── settings.json
├── CHANGELOG.md
├── README.md
├── commitlint.config.js
├── jsconfig.json
├── package.json
├── src
    ├── app.html
    ├── lib
    │   ├── components
    │   │   ├── Palette.svelte
    │   │   ├── PaletteCompactToggleButton.svelte
    │   │   ├── PaletteEyeDropperButton.svelte
    │   │   ├── PaletteIconButton.svelte
    │   │   ├── PaletteInput.svelte
    │   │   ├── PaletteLoader.svelte
    │   │   ├── PaletteSettingsButton.svelte
    │   │   ├── PaletteSettingsPanel.svelte
    │   │   ├── PaletteSlot.svelte
    │   │   ├── PaletteTools.svelte
    │   │   ├── PaletteTrashButton.svelte
    │   │   ├── __tests__
    │   │   │   ├── Palette.test.js
    │   │   │   ├── PaletteCompactToggleButton.test.js
    │   │   │   ├── PaletteEyeDropperButton.test.js
    │   │   │   ├── PaletteIconButton.test.js
    │   │   │   ├── PaletteInput.test.js
    │   │   │   └── PaletteSlot.test.js
    │   │   ├── icons
    │   │   │   ├── CompactIcon.svelte
    │   │   │   ├── EnlargeIcon.svelte
    │   │   │   ├── EyeDropperIcon.svelte
    │   │   │   ├── PlusIcon.svelte
    │   │   │   ├── SettingsIcon.svelte
    │   │   │   └── TrashIcon.svelte
    │   │   └── useDeletion.js
    │   ├── enums
    │   │   ├── PaletteDeletionMode.js
    │   │   ├── PaletteEvent.js
    │   │   ├── PaletteIcon.js
    │   │   └── PaletteTool.js
    │   ├── index.js
    │   └── utils
    │   │   ├── __tests__
    │   │       └── utils.test.js
    │   │   └── utils.js
    └── routes
    │   ├── +layout.svelte
    │   ├── +page.js
    │   ├── example1
    │       └── +page.svelte
    │   ├── example2
    │       └── +page.svelte
    │   ├── example3
    │       └── +page.svelte
    │   └── example4
    │       └── +page.svelte
├── static
    ├── app.css
    └── favicon.png
├── svelte.config.js
├── vite.config.js
├── vitest.config.js
├── vitest.setup.js
└── yarn.lock


/.github/workflows/index.yml:
--------------------------------------------------------------------------------
 1 | name: 'deploy'
 2 | on:
 3 |     push:
 4 |         branches:
 5 |             - main
 6 |             - beta
 7 | jobs:
 8 |     release:
 9 |         runs-on: ubuntu-latest
10 |         steps:
11 |             - uses: actions/checkout@v4
12 |             - uses: actions/setup-node@v4
13 |               with:
14 |                   node-version: 20
15 |             - run: yarn install
16 |             - run: yarn test:ci
17 |             - run: yarn build
18 |             - run: npx semantic-release
19 |               env:
20 |                   GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
21 |                   NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
22 |             - uses: codecov/codecov-action@v4
23 |               with:
24 |                   directory: ./coverage/
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Build
 2 | /build
 3 | /dist
 4 | /package
 5 | /.svelte-kit
 6 | 
 7 | # Env
 8 | .env
 9 | .env.*
10 | 
11 | # Misc
12 | .DS_STORE
13 | 
14 | # Dependencies
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | package-lock.json
19 | .yarn
20 | /node_modules
21 | 
22 | # Webstorm
23 | /.idea
24 | *.iml
25 | 
26 | # Tests
27 | /coverage
28 | /__snapshots__


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npx --no -- commitlint --edit $1
5 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | yarn test:ci && yarn format
5 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *.test.js


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | # Build
 2 | /dist
 3 | /.svelte-kit
 4 | 
 5 | # Misc
 6 | .DS_STORE
 7 | .husky
 8 | 
 9 | # Dependencies
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | /node_modules
14 | 
15 | # IDE
16 | /.idea
17 | /.vscode
18 | 
19 | # Tests
20 | /coverage
21 | /__snapshots__


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"printWidth": 120,
 3 | 	"useTabs": true,
 4 | 	"tabWidth": 4,
 5 | 	"singleQuote": true,
 6 | 	"semi": false,
 7 | 	"trailingComma": "es5",
 8 | 	"bracketSpacing": true,
 9 | 	"bracketSameLine": false,
10 | 	"plugins": ["prettier-plugin-svelte"],
11 | 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
12 | }
13 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "todo-tree.tree.showBadges": false
3 | }


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # [4.1.0](https://github.com/untemps/svelte-palette/compare/v4.0.0...v4.1.0) (2024-02-29)
  2 | 
  3 | ### Features
  4 | 
  5 | -   Allow to name colors ([#95](https://github.com/untemps/svelte-palette/issues/95)) ([f707306](https://github.com/untemps/svelte-palette/commit/f7073066eeef159714cee86e5f4bbad301590d0f))
  6 | 
  7 | # [4.0.0](https://github.com/untemps/svelte-palette/compare/v3.0.1...v4.0.0) (2023-12-09)
  8 | 
  9 | ### Features
 10 | 
 11 | -   Refactor codebase and add cool new features ([9c40860](https://github.com/untemps/svelte-palette/commit/9c40860de2457d61bc58a135a3524e0c4734eb37))
 12 | 
 13 | ### BREAKING CHANGES
 14 | 
 15 | -   -   Change default layout
 16 | -   Rename transparent slot
 17 | -   Remove allowDeletion prop
 18 | 
 19 | # [4.0.0-beta.2](https://github.com/untemps/svelte-palette/compare/v4.0.0-beta.1...v4.0.0-beta.2) (2023-12-05)
 20 | 
 21 | ### Bug Fixes
 22 | 
 23 | -   Fix colors calculation with non-array input ([#83](https://github.com/untemps/svelte-palette/issues/83)) ([ed24a36](https://github.com/untemps/svelte-palette/commit/ed24a36f8e5c26088cdecc2b957dab168111d0db))
 24 | 
 25 | # [4.0.0-beta.1](https://github.com/untemps/svelte-palette/compare/v3.0.1...v4.0.0-beta.1) (2023-12-03)
 26 | 
 27 | ### Features
 28 | 
 29 | -   Refactor codebase and add cool new features ([#83](https://github.com/untemps/svelte-palette/issues/83)) ([2d9dcdc](https://github.com/untemps/svelte-palette/commit/2d9dcdc6ea815a487f816e5fd824bfd2313ac0bb))
 30 | 
 31 | ### BREAKING CHANGES
 32 | 
 33 | -   -   Chang default layout
 34 | -   Rename transparent slot
 35 | -   Remove allowDeletion prop
 36 | 
 37 | ## [3.0.1](https://github.com/untemps/svelte-palette/compare/v3.0.0...v3.0.1) (2023-09-29)
 38 | 
 39 | # [3.0.0](https://github.com/untemps/svelte-palette/compare/v2.4.1...v3.0.0) (2023-09-27)
 40 | 
 41 | ### chore
 42 | 
 43 | -   Upgrade to Svelte 4 ([#75](https://github.com/untemps/svelte-palette/issues/75)) ([4fab7aa](https://github.com/untemps/svelte-palette/commit/4fab7aa5eec09ce1b7a783bcdc7759c4bd802c98))
 44 | 
 45 | ### BREAKING CHANGES
 46 | 
 47 | -   No more cjs build and Node 18+ upgrade
 48 | 
 49 | ## [2.4.1](https://github.com/untemps/svelte-palette/compare/v2.4.0...v2.4.1) (2023-04-26)
 50 | 
 51 | ### Bug Fixes
 52 | 
 53 | -   Remove useless z-index ([#68](https://github.com/untemps/svelte-palette/issues/68)) ([4516172](https://github.com/untemps/svelte-palette/commit/451617225f239138eebe4acb242cf578effca961))
 54 | 
 55 | # [2.4.0](https://github.com/untemps/svelte-palette/compare/v2.3.1...v2.4.0) (2023-04-18)
 56 | 
 57 | ### Features
 58 | 
 59 | -   Add support for async colors prop ([#67](https://github.com/untemps/svelte-palette/issues/67)) ([6415080](https://github.com/untemps/svelte-palette/commit/64150800dadac4d251b8afa269d752ec22b3c24c))
 60 | 
 61 | ## [2.3.1](https://github.com/untemps/svelte-palette/compare/v2.3.0...v2.3.1) (2023-03-19)
 62 | 
 63 | ### Bug Fixes
 64 | 
 65 | -   Fix SvelteKit support ([#65](https://github.com/untemps/svelte-palette/issues/65)) ([5c25993](https://github.com/untemps/svelte-palette/commit/5c259932f9c293a32a6ee2856b4da1e649aa4ee9))
 66 | 
 67 | # [2.3.0](https://github.com/untemps/svelte-palette/compare/v2.2.0...v2.3.0) (2023-03-17)
 68 | 
 69 | ### Features
 70 | 
 71 | -   Drill component values into slots ([#64](https://github.com/untemps/svelte-palette/issues/64)) ([de41cc6](https://github.com/untemps/svelte-palette/commit/de41cc6ce4d63c32ef58978c98a79b95fd0253dd))
 72 | 
 73 | # [2.2.0](https://github.com/untemps/svelte-palette/compare/v2.1.0...v2.2.0) (2023-03-13)
 74 | 
 75 | ### Features
 76 | 
 77 | -   Add transition prop ([#61](https://github.com/untemps/svelte-palette/issues/61)) ([345fdcc](https://github.com/untemps/svelte-palette/commit/345fdcce1486200cc5b3f550da47cb2b64738c11))
 78 | 
 79 | # [2.1.0](https://github.com/untemps/svelte-palette/compare/v2.0.0...v2.1.0) (2023-03-11)
 80 | 
 81 | ### Features
 82 | 
 83 | -   Add numColumns prop ([#60](https://github.com/untemps/svelte-palette/issues/60)) ([b2f6dd9](https://github.com/untemps/svelte-palette/commit/b2f6dd99c7bcf2af358a89dc76a2e2af9391aed4))
 84 | 
 85 | # [2.0.0](https://github.com/untemps/svelte-palette/compare/v1.9.2...v2.0.0) (2023-02-27)
 86 | 
 87 | ### Features
 88 | 
 89 | -   Add compact mode ([#59](https://github.com/untemps/svelte-palette/issues/59)) ([966c540](https://github.com/untemps/svelte-palette/commit/966c54026c109bdbf5f9a546425597231b9510f5))
 90 | 
 91 | ### BREAKING CHANGES
 92 | 
 93 | -   Some imports have been renamed
 94 | 
 95 | ## [1.9.2](https://github.com/untemps/svelte-palette/compare/v1.9.1...v1.9.2) (2022-10-07)
 96 | 
 97 | ## [1.9.1](https://github.com/untemps/svelte-palette/compare/v1.9.0...v1.9.1) (2022-10-05)
 98 | 
 99 | ### Bug Fixes
100 | 
101 | -   Fix distribution config and deletionMode update ([#47](https://github.com/untemps/svelte-palette/issues/47)) ([091f437](https://github.com/untemps/svelte-palette/commit/091f4376dd32d651b9e06f59261f3e41f8e63a6a))
102 | 
103 | ## [1.9.1-beta.3](https://github.com/untemps/svelte-palette/compare/v1.9.1-beta.2...v1.9.1-beta.3) (2022-10-04)
104 | 
105 | ### Bug Fixes
106 | 
107 | -   Fix deletion mode update ([842c1b6](https://github.com/untemps/svelte-palette/commit/842c1b66f6bcc85c5732ae7aae4642b1fdaf3689))
108 | 
109 | ## [1.9.1-beta.2](https://github.com/untemps/svelte-palette/compare/v1.9.1-beta.1...v1.9.1-beta.2) (2022-10-04)
110 | 
111 | ## [1.9.1-beta.1](https://github.com/untemps/svelte-palette/compare/v1.9.0...v1.9.1-beta.1) (2022-10-04)
112 | 
113 | # [1.9.0](https://github.com/untemps/svelte-palette/compare/v1.8.2...v1.9.0) (2022-09-29)
114 | 
115 | ### Features
116 | 
117 | -   Add new deletionMode prop ([#46](https://github.com/untemps/svelte-palette/issues/46)) ([2bc0e3f](https://github.com/untemps/svelte-palette/commit/2bc0e3f263905766a550a5fd596e182023de8c7f))
118 | 
119 | ## [1.8.2](https://github.com/untemps/svelte-palette/compare/v1.8.1...v1.8.2) (2022-06-06)
120 | 
121 | ### Bug Fixes
122 | 
123 | -   Prevent from multiple enter event subscriptions on slots ([#31](https://github.com/untemps/svelte-palette/issues/31)) ([429d7ad](https://github.com/untemps/svelte-palette/commit/429d7add9f9b52fa1c401a061a01a93aad0393ab))
124 | 
125 | ## [1.8.1](https://github.com/untemps/svelte-palette/compare/v1.8.0...v1.8.1) (2022-06-05)
126 | 
127 | ### Bug Fixes
128 | 
129 | -   Remove duplicates on allowDuplicates update ([#29](https://github.com/untemps/svelte-palette/issues/29)) ([3fdad78](https://github.com/untemps/svelte-palette/commit/3fdad78e21da70cd92b97f1215ea97415bf532b1))
130 | 
131 | # [1.8.0](https://github.com/untemps/svelte-palette/compare/v1.7.0...v1.8.0) (2022-06-03)
132 | 
133 | ### Features
134 | 
135 | -   Add inputType prop ([#26](https://github.com/untemps/svelte-palette/issues/26)) ([d9d8179](https://github.com/untemps/svelte-palette/commit/d9d81790f4e131afc5886370268b2aa5790fe6a5))
136 | 
137 | # [1.7.0](https://github.com/untemps/svelte-palette/compare/v1.6.2...v1.7.0) (2022-05-28)
138 | 
139 | ### Features
140 | 
141 | -   Implement EyeDropper API ([#24](https://github.com/untemps/svelte-palette/issues/24)) ([34b4751](https://github.com/untemps/svelte-palette/commit/34b47518c779f28949d70d15ca473e4a2e9a7ce3))
142 | 
143 | ## [1.6.2](https://github.com/untemps/svelte-palette/compare/v1.6.1...v1.6.2) (2022-02-11)
144 | 
145 | ## [1.6.1](https://github.com/untemps/svelte-palette/compare/v1.6.0...v1.6.1) (2022-01-11)
146 | 
147 | ### Bug Fixes
148 | 
149 | -   Wait for tooltip content to exist or be added ([#19](https://github.com/untemps/svelte-palette/issues/19)) ([a56714a](https://github.com/untemps/svelte-palette/commit/a56714a3516d34688b4b2cc4a55116885f4b46b7))
150 | 
151 | # [1.6.0](https://github.com/untemps/svelte-palette/compare/v1.5.1...v1.6.0) (2022-01-04)
152 | 
153 | ### Features
154 | 
155 | -   Close tooltip after clicking content ([ec11fc0](https://github.com/untemps/svelte-palette/commit/ec11fc0d36b535f03ab98646aaeb903d782722f8))
156 | 
157 | ## [1.5.1](https://github.com/untemps/svelte-palette/compare/v1.5.0...v1.5.1) (2021-12-19)
158 | 
159 | ### Bug Fixes
160 | 
161 | -   Fix color addition when maxColors is updated ([9bd324e](https://github.com/untemps/svelte-palette/commit/9bd324e8382c981c46f616e7042897ef91f5a9ab))
162 | 
163 | # [1.5.0](https://github.com/untemps/svelte-palette/compare/v1.4.3...v1.5.0) (2021-12-18)
164 | 
165 | ### Bug Fixes
166 | 
167 | -   Fix palette css ([b377ab4](https://github.com/untemps/svelte-palette/commit/b377ab4caaeaaf80f77f6b4ca5e4ad8333c46d37))
168 | 
169 | ### Features
170 | 
171 | -   Allow to pass custom element as deletion tooltip content ([f72cd49](https://github.com/untemps/svelte-palette/commit/f72cd490852440c4f56b2269e1d1045c8d5ad1ac))
172 | -   Allow to set a custom class to deletion tooltip root element ([04a21a2](https://github.com/untemps/svelte-palette/commit/04a21a2dc5bfbcf40f397a1aa13aa77afff2ffa7))
173 | -   Allow to trigger callbacks with custom params from deletion tooltip content elements ([a91b534](https://github.com/untemps/svelte-palette/commit/a91b53404e9a10b4a65cca8f1414109071e8bed5))
174 | 
175 | ## [1.4.3](https://github.com/untemps/svelte-palette/compare/v1.4.2...v1.4.3) (2021-12-12)
176 | 
177 | ### Bug Fixes
178 | 
179 | -   Fix first-run tooltip display ([efb115e](https://github.com/untemps/svelte-palette/commit/efb115e1daa2bb10bf2e42145e990df849c3875d))
180 | 
181 | ## [1.4.3](https://github.com/untemps/svelte-palette/compare/v1.4.2...v1.4.3) (2021-12-12)
182 | 
183 | ### Bug Fixes
184 | 
185 | -   Fix first-run tooltip display ([efb115e](https://github.com/untemps/svelte-palette/commit/efb115e1daa2bb10bf2e42145e990df849c3875d))
186 | 
187 | ## [1.4.2](https://github.com/untemps/svelte-palette/compare/v1.4.1...v1.4.2) (2021-12-07)
188 | 
189 | ## [1.4.1](https://github.com/untemps/svelte-palette/compare/v1.4.0...v1.4.1) (2021-12-06)
190 | 
191 | ### Bug Fixes
192 | 
193 | -   Remove tooltip template earlier to prevent it from flashing ([#12](https://github.com/untemps/svelte-palette/issues/12)) ([dff176a](https://github.com/untemps/svelte-palette/commit/dff176a0edd54b4cc91b1a6175b81cbd330b5e59))
194 | 
195 | # [1.4.0](https://github.com/untemps/svelte-palette/compare/v1.3.0...v1.4.0) (2021-12-06)
196 | 
197 | ### Features
198 | 
199 | -   Add slots for header and footer dividers ([#9](https://github.com/untemps/svelte-palette/issues/9)) ([04caea5](https://github.com/untemps/svelte-palette/commit/04caea57ff85ad6c806ece30382b04779be61f91))
200 | 
201 | # [1.3.0](https://github.com/untemps/svelte-palette/compare/v1.2.1...v1.3.0) (2021-12-06)
202 | 
203 | ### Features
204 | 
205 | -   Pass class down to root tag ([#10](https://github.com/untemps/svelte-palette/issues/10)) ([210ded2](https://github.com/untemps/svelte-palette/commit/210ded27e4e3724317753e746ac028eecc305544))
206 | 
207 | ## [1.2.1](https://github.com/untemps/svelte-palette/compare/v1.2.0...v1.2.1) (2021-12-03)
208 | 
209 | ### Bug Fixes
210 | 
211 | -   Fix selected color management to preserve selection outside of slot focus ([#7](https://github.com/untemps/svelte-palette/issues/7)) ([68df37a](https://github.com/untemps/svelte-palette/commit/68df37af345d94f3a0e499da3ec6ae0aae681ed7))
212 | 
213 | # [1.2.0](https://github.com/untemps/svelte-palette/compare/v1.1.0...v1.2.0) (2021-12-03)
214 | 
215 | ### Features
216 | 
217 | -   Add a maxColors prop to limit the number of slots in the palette ([#6](https://github.com/untemps/svelte-palette/issues/6)) ([48671f8](https://github.com/untemps/svelte-palette/commit/48671f8e6e09c1d165964cfd09fe1ff374fa588b))
218 | 
219 | # [1.1.0](https://github.com/untemps/svelte-palette/compare/v1.0.1...v1.1.0) (2021-12-03)
220 | 
221 | ### Features
222 | 
223 | -   Allow to display a transparent slot at the end of the list ([#5](https://github.com/untemps/svelte-palette/issues/5)) ([90f3233](https://github.com/untemps/svelte-palette/commit/90f32336b828f0dd2933c2901ea4da3c7feb0698))
224 | 
225 | ## [1.0.1](https://github.com/untemps/svelte-palette/compare/v1.0.0...v1.0.1) (2021-11-13)
226 | 
227 | ### Bug Fixes
228 | 
229 | -   Delete slots by index instead of color ([#2](https://github.com/untemps/svelte-palette/issues/2)) ([b03c263](https://github.com/untemps/svelte-palette/commit/b03c26374e32710c2df54376584915a16018fe29))
230 | 
231 | # 1.0.0 (2021-11-07)
232 | 
233 | ### Features
234 | 
235 | -   Add flag to allow deletion ([4c46206](https://github.com/untemps/svelte-palette/commit/4c46206b6a989fca59476ab6f056b55b50068aef))
236 | -   Add flag to allow duplicates ([47418dc](https://github.com/untemps/svelte-palette/commit/47418dc7feab30ad9cfd7df34dca7c87b99f1ceb))
237 | -   Add transition on slot appearance ([8beab34](https://github.com/untemps/svelte-palette/commit/8beab34ba5beea2b48d4bc1072e34eecfeb98cbc))
238 | -   Allow color deletion via a tooltip ([62e95dc](https://github.com/untemps/svelte-palette/commit/62e95dc84096fa1acbb009191e95591992be4af2))
239 | -   Change palette slot root component into button ([8d1dbb8](https://github.com/untemps/svelte-palette/commit/8d1dbb8ac621248c9162429a87ce236c725f0870))
240 | -   Expose Palette parts as slots ([5b32c5f](https://github.com/untemps/svelte-palette/commit/5b32c5fd384c05c45c81338b4bd4f3c92600ccac))
241 | -   Expose Palette selection event ([1a72764](https://github.com/untemps/svelte-palette/commit/1a727641389e6974146d8cf795cb0f26cdf32775))
242 | -   Improve palette input ([6d391f3](https://github.com/untemps/svelte-palette/commit/6d391f344e2f5bc5d58841142e6c6a1c9f0c0da6))
243 | -   Initial commit ([ab80562](https://github.com/untemps/svelte-palette/commit/ab80562e9e0170964490d2cee7fe459b83dacd3b))
244 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |     <img src="assets/svelte-palette.gif" alt="svelte-palette" height="300"/>
  3 | </p>
  4 | <p align="center">
  5 |     Svelte component to display a customisable color picker
  6 | </p>
  7 | 
  8 | ---
  9 | 
 10 | [![npm](https://img.shields.io/npm/v/@untemps/svelte-palette?style=for-the-badge)](https://www.npmjs.com/package/@untemps/svelte-palette)
 11 | [![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/untemps/svelte-palette/index.yml?style=for-the-badge)](https://github.com/untemps/svelte-palette/actions)
 12 | [![Codecov](https://img.shields.io/codecov/c/github/untemps/svelte-palette?style=for-the-badge)](https://codecov.io/gh/untemps/svelte-palette)
 13 | 
 14 | ## Demo
 15 | 
 16 | <p align="center">
 17 |     :red_circle:&nbsp;<big><a href="https://svelte-palette.vercel.app" target="_blank" rel="noopener">LIVE
 18 |     DEMO</a></big>&nbsp;:red_circle:
 19 | </p>
 20 | 
 21 | ## Installation
 22 | 
 23 | ```bash
 24 | yarn add @untemps/svelte-palette
 25 | ```
 26 | 
 27 | ## Usage
 28 | 
 29 | ### Basic Usage
 30 | 
 31 | ```html
 32 | <script>
 33 |     import { Palette } from '@untemps/svelte-palette'
 34 | 
 35 |     const colors = [
 36 | 		'#865C54',
 37 | 		'#8F5447',
 38 | 		'#A65846',
 39 | 		'#A9715E',
 40 | 		'#AD8C72',
 41 |     ]
 42 | 
 43 | 	let bgColor = colors[0]
 44 | </script>
 45 | 
 46 | <main style="--bgColor:{bgColor}">
 47 | 	<Palette {colors} on:select={({ detail: { color } }) => (bgColor = color)} />
 48 | </main>
 49 | 
 50 | <style>
 51 | 	main {
 52 | 		display: flex;
 53 | 		align-items: center;
 54 | 		justify-content: center;
 55 | 		height: 100%;
 56 | 		background-color: var(--bgColor);
 57 | 	}
 58 | ```
 59 | 
 60 | ## API
 61 | 
 62 | | Props                    | Type                                                           | Default | Description                                                                                                                                                                                               |
 63 | | ------------------------ | -------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 64 | | `colors`                 | string[] or Promise<string[]> or object[] or Promise<object[]> | []      | Array of colors to be displayed in the palette. See more about colors in the [Colors Setting](#colors-setting) section                                                                                    |
 65 | | `selectedColor`          | string                                                         | null    | Default selected color. The color must be included in the `colors` prop.                                                                                                                                  |
 66 | | `isCompact`              | boolean                                                        | false   | Flag to display the palette in compact mode.                                                                                                                                                              |
 67 | | `compactColorIndices`    | number[]                                                       | []      | Array of indices to pick from the `colors` array to be displayed in the compacted palette (see [Compact Mode](#compact-mode)).                                                                            |
 68 | | `allowDuplicates`        | boolean                                                        | false   | Flag to allow color duplication.                                                                                                                                                                          |
 69 | | `deletionMode`           | string                                                         | "none"  | Mode of slot deletion, between `"none"` and `"tooltip"` and `"drop"` (see [Deletion Modes](#deletion-modes)).                                                                                             |
 70 | | `tooltipClassName`       | string                                                         | null    | Class name to pass down to the deletion tooltip (see [Styles](#styles)).                                                                                                                                  |
 71 | | `tooltipContentSelector` | string                                                         | null    | Selector of the deletion tooltip content (see [Customize the Content of the Deletion Tooltip](#customize-the-content-of-the-deletion-tooltip)).                                                           |
 72 | | `showTransparentSlot`    | boolean                                                        | false   | Flag to display a transparent slot at the start of the slot list.                                                                                                                                         |
 73 | | `maxColors`              | number                                                         | 30      | Maximum number of slots to be displayed in the palette. Set this value to `-1` to allow infinite number of slots.                                                                                         |
 74 | | `showInput`              | boolean                                                        | false   | Flag to display the input within the footer slot.                                                                                                                                                         |
 75 | | `inputType`              | string                                                         | "text"  | Type of the input within the footer slot. Only "text" and "color" are allowed. All other value will be replaced by "text".                                                                                |
 76 | | `numColumns`             | number                                                         | 5       | Number of columns of the palette grid. This value can't exceed the number of maximum colors defined in `maxColors` and can't be lower than 1. Set this value to `0` to display the slots on a single row. |
 77 | | `transition`             | object                                                         | null    | Animation when a slot is rendered (see [Transition](#transition)).                                                                                                                                        |
 78 | 
 79 | ## Events
 80 | 
 81 | | Event    | Arguments | Type   | Description                                 |
 82 | | -------- | --------- | ------ | ------------------------------------------- |
 83 | | `select` |           |        | **Dispatched whenever a color is clicked.** |
 84 | |          | `color`   | string | Selected color string.                      |
 85 | 
 86 | ## Slots
 87 | 
 88 | | Slot               | Description                                                                           | Available Properties Props                                                |
 89 | | ------------------ | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
 90 | | `header`           | Allow to add a header to the palette. By default, it is empty.                        | `selectedColor`                                                           |
 91 | | `footer`           | Allow to add a footer to the palette. By default, it contains an input to add colors. | `selectedColor`                                                           |
 92 | | `slot`             | Allow to replace the default color slots.                                             | `index`, `color`, `colorName`, `selectedColor`, `transition`, `isCompact` |
 93 | | `transparent_slot` | Allow to replace the default transparent slot.                                        | -                                                                         |
 94 | | `before_slot`      | Allow to add an element before the color slots.                                       | `selectedColor`, `transition`, `isCompact`                                |
 95 | | `after_slot`       | Allow to add an element after the color slots.                                        | `selectedColor`, `transition`, `isCompact`                                |
 96 | | `input`            | Allow to replace the input in the footer if the default footer slot is kept as it is. | `selectedColor`, `inputType`                                              |
 97 | | `settings`         | Allow to replace the settings panel. See the demo to grab a usage example.            | `onClose`                                                                 |
 98 | | `tools`            | Allow to replace the tools panel.                                                     | `isCompact`, `compactColorIndices`, `onSelect`                            |
 99 | | `loader`           | Allow to replace the loader displayed during the colors async retrieving.             | -                                                                         |
100 | 
101 | ## Example
102 | 
103 | ```html
104 | <script>
105 | 	import { Palette } from '@untemps/svelte-palette'
106 | 
107 | 	const colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']
108 | </script>
109 | 
110 | <Palette {colors}>
111 | 	<div slot="header" class="palette__header">
112 | 		<h1>Pick a color</h1>
113 | 	</div>
114 | 	<button let:color slot="slot" class="palette__slot" style="--color:{color}" />
115 | 	<div slot="footer" class="palette__footer">
116 | 		<a href="https://www.untemps.net">@untemps</a>
117 | 	</div>
118 | </Palette>
119 | 
120 | <style>
121 | 	.palette__header {
122 | 		display: flex;
123 | 		justify-content: center;
124 | 	}
125 | 
126 | 	.palette__slot {
127 | 		cursor: pointer;
128 | 		width: 2rem;
129 | 		height: 2rem;
130 | 		margin: 0;
131 | 		background-color: var(--color);
132 | 		border-radius: 20%;
133 | 		border: 1px solid rgba(0, 0, 0, 0.2);
134 | 		box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
135 | 	}
136 | 
137 | 	.palette__footer {
138 | 		display: flex;
139 | 		justify-content: center;
140 | 		padding: 0.5rem;
141 | 	}
142 | </style>
143 | ```
144 | 
145 | # Colors Setting
146 | 
147 | Color can be set in several formats:
148 | 
149 | ## Array of Color Strings
150 | 
151 | ```
152 | colors = ['#865C54', '#8F5447', '#A65846']
153 | ```
154 | 
155 | ## Array of Color Objects
156 | 
157 | ```
158 | colors = [
159 | 	{ name: 'Color #1', value: '#865C54' },
160 | 	{ name: 'Color #2', value: '#8F5447' },
161 | 	{ value: '#A65846' }
162 | ]
163 | ```
164 | 
165 | ## Promise
166 | 
167 | A promise to be resolved with an array of color strings or objects can be passed as well (see [Use an API to fill the palette](#use-an-api-to-fill-the-palette))
168 | 
169 | # Deletion Modes
170 | 
171 | The `deletionMode` prop allows to define the way users can delete (or not) the color slots:
172 | 
173 | | Value     | Description                                                                                                                                                                                |
174 | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
175 | | `none`    | (Default) Color slots cannot be deleted                                                                                                                                                    |
176 | | `tooltip` | A tooltip is displayed when hovering a color slot, a click within deletes the slot <br/>(You can control tooltip display though the `tooltipClassName` and `tooltipContentSelector` props) |
177 | | `drop`    | Colors slots are draggable, a drop outside the palette deletes the slot                                                                                                                    |
178 | 
179 | As an helper, deletion mode enums are exported in `PaletteDeletionMode`.
180 | 
181 | # Compact Mode
182 | 
183 | The compact mode is a way to display a minimal version of the palette with a restricted selection of the original colors and downsized spaces.
184 | 
185 | The `compactColorIndices` prop allows to define the list of the colors to be picked from the `colors` array by their indices.  
186 | If set a control is added to toggle the compact mode.
187 | 
188 | You may also specified whether the palette has to use the compact mode by default by setting `isCompact=true`.
189 | 
190 | ```html
191 | <script>
192 | 	import { Palette } from '@untemps/svelte-palette'
193 | 
194 | 	const colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']
195 | 	const compactColorIndices = [1, 3, 4]
196 | </script>
197 | 
198 | <Palette {colors} {compactColorIndices} />
199 | ```
200 | 
201 | # Styles
202 | 
203 | ### Root Tag Class
204 | 
205 | You can style the component by passing a class down to the root tag (`div`).
206 | 
207 | -   Flag the class as global to make it available in the Palette component
208 | -   Prefix your class with `.palette[role="main"]` to give precedence over the default one or mark each style with `!important` (not recommanded)
209 | 
210 | #### Example
211 | 
212 | ```html
213 | <script>
214 | 	import { Palette } from '@untemps/svelte-palette'
215 | 
216 | 	const colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']
217 | </script>
218 | 
219 | <Palette {colors} class="palette__custom" />
220 | 
221 | <style>
222 | 	:global(.palette[role='main'].palette__custom) {
223 | 		background: yellow;
224 | 	}
225 | </style>
226 | ```
227 | 
228 | ### Deletion Tooltip Class
229 | 
230 | If you set `deletionMode` to `"tooltip"`, you can pass a class name that is set to the tooltip shown when hovering a slot.
231 | 
232 | To do so, set a **global** class name to the `tooltipClassName` prop.
233 | 
234 | > As the tooltip is interactive, make sure you define a sufficient hover area that allow to access the content of the tooltip before the leave event is triggered.
235 | 
236 | If you ignore that prop, a default class is used.
237 | 
238 | > Please note that the default class name is `__tooltip__default`.  
239 | > Provide a different class name otherwise the default class would have the precedence over the custom one.
240 | 
241 | #### Example
242 | 
243 | ```html
244 | <script>
245 | 	import { Palette } from '@untemps/svelte-palette'
246 | 
247 | 	const colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']
248 | </script>
249 | 
250 | <Palette {colors} deletionMode="tooltip" tooltipClassName="tooltip" />
251 | 
252 | <style>
253 | 	:global(.tooltip) {
254 | 		position: absolute;
255 | 		z-index: 9999;
256 | 		max-width: 120px;
257 | 		background-color: black;
258 | 		color: #fff;
259 | 		text-align: center;
260 | 		border-radius: 6px;
261 | 		padding: 0.5rem;
262 | 	}
263 | </style>
264 | ```
265 | 
266 | ## EyeDropper API Support
267 | 
268 | If supported by the browser, the default component within the `input` slot displays a button to trigger the [Web EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper).  
269 | The tool allows to pick a color from the screen.
270 | 
271 | <img src="assets/eyedropper.gif" alt="eyedropper" width="250"/>
272 | 
273 | Once selected, the color is inserted in the input waiting for the user to submit and adding it to the palette.
274 | 
275 | If the API is not available, nothing will be rendered.
276 | 
277 | > The PaletteEyeDropper component can be used on its own anywhere within a slot or in an external component as it is exported from this lib.
278 | 
279 | ## Transition
280 | 
281 | <img src="assets/svelte-palette-transition.gif" alt="svelte-palette-transition" height="300"/>
282 | 
283 | You can customize the way slots appear into the palette by using the `transition` prop.
284 | 
285 | This prop works the same way as the [in/out directive](https://svelte.dev/docs#template-syntax-element-directives-in-fn-out-fn) and accepts an object with two properties :
286 | 
287 | | Value  | Description                                                                                        |
288 | | ------ | -------------------------------------------------------------------------------------------------- |
289 | | `fn`   | Transition function (See [Svelte Transitions](https://svelte.dev/docs#run-time-svelte-transition)) |
290 | | `args` | Parameters to pass to the transition function                                                      |
291 | 
292 | `fn` may be one of the [Svelte exported functions](https://svelte.dev/docs#run-time-svelte-transition) or a custom one as described in the [docs](https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions).
293 | 
294 | ### Example
295 | 
296 | ```html
297 | <script>
298 | 	import { Palette } from '@untemps/svelte-palette'
299 | 	import { elasticOut } from 'svelte/easing'
300 | 
301 | 	const colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']
302 | 
303 | 	const whoosh = (node, params) => {
304 | 		const existingTransform = getComputedStyle(node).transform.replace('none', '')
305 | 
306 | 		return {
307 | 			delay: params.delay || 0,
308 | 			duration: params.duration || 400,
309 | 			easing: params.easing || elasticOut,
310 | 			css: (t, u) => `transform: ${existingTransform} scale(${t})`,
311 | 		}
312 | 	}
313 | </script>
314 | 
315 | <Palette {colors} transition={{ fn: whoosh, args: { duration: 3000 } }} />
316 | ```
317 | 
318 | ## Recipes
319 | 
320 | ### Use an API to Fill the Palette
321 | 
322 | In case you want to call an API to fetch the palette colors, you may pass a promise to the `colors` prop.
323 | 
324 | The component displays a customizable loader waiting to the promise to be resolved. Be aware that the result of the promise must be an array of color strings as well.
325 | 
326 | #### Example
327 | 
328 | ```html
329 | <script>
330 | 	import { Palette } from '@untemps/svelte-palette'
331 | 
332 | 	const colors = fetch('https://www.colr.org/json/colors/random/30')
333 | 		.then((result) => result.json())
334 | 		.then((result) => result.colors.filter((c) => c.hex?.length).map((c) => `#${c.hex}`))
335 | </script>
336 | 
337 | <Palette {colors}>
338 | 	<p slot="loader">Loading...</p>
339 | </Palette>
340 | ```
341 | 
342 | ### Customize the Content of the Deletion Tooltip
343 | 
344 | By default, if `deletionMode` is set to `"tooltip"`, the tooltip displays a trash icon:
345 | 
346 | <img src="assets/trash.png" alt="trash" height="90"/>
347 | 
348 | You may want to display a different content for various purposes.  
349 | That is possible by defining a DOM element selector to the `tooltipContentSelector` prop.
350 | 
351 | > Note the piece of DOM used ad content is deeply cloned using [cloneNode()](https://developer.mozilla.org/fr/docs/Web/API/Node/cloneNode) before appending to the tooltip container.  
352 | > That means the original element stays as it is but depending on element some props or behaviours may be removed from the clone.
353 | 
354 | #### Example
355 | 
356 | ```html
357 | <script>
358 | 	import { Palette } from '@untemps/svelte-palette'
359 | 
360 | 	const colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']
361 | </script>
362 | 
363 | <Palette {colors} deletionMode="tooltip" tooltipContentSelector=".palette__tooltip__button" />
364 | 
365 | <!-- The element used as tooltip content -->
366 | <button class="palette__tooltip__button">Delete</button>
367 | ```
368 | 
369 | ### Use a Color Input
370 | 
371 | By default, the input that allows to add a new slot in the palette is typed as "text".
372 | 
373 | Although you may use the `ìnput` slot to display a custom component, it is possible to turn the input into color mode by setting the `inputType` prop to "color".  
374 | That unlocks the color picker provided by the browser. Therefore the color spot and the eyedropper are hidden.
375 | 
376 | <img src="assets/input-color.gif" alt="input color" width="250"/>
377 | 
378 | #### Example
379 | 
380 | ```html
381 | <script>
382 | 	import { Palette } from '@untemps/svelte-palette'
383 | 
384 | 	const colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']
385 | </script>
386 | 
387 | <Palette {colors} inputType="color" />
388 | ```
389 | 
390 | ### Customize the Tools Panel
391 | 
392 | The tools panel is a container for two actions:
393 | 
394 | -   Display the settings panel (`"settings"`)
395 | -   Toggle the compact mode (`"compact"`)
396 | 
397 | For some use cases, you may want to provide your own controls by using the `tools` slot.
398 | 
399 | To access each tool behaviours, the Palette component exports a `onSelect` function that has to be called with the name of the tool (use the enums from the exported `PaletteTool`).
400 | 
401 | #### Example
402 | 
403 | ```html
404 | <script>
405 | 	import { Palette, PaletteTool } from '@untemps/svelte-palette'
406 | 
407 | 	const colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']
408 | </script>
409 | 
410 | <Palette {colors}>
411 | 	<div slot="tools" let:onSelect let:isCompact>
412 | 		<button on:click="{onSelect(PaletteTool.SETTINGS)}">Settings</button>
413 | 		<button on:click="{onSelect(PaletteTool.COMPACT)}">{isCompact ? 'Expand' : 'Compact'}</button>
414 | 	</div>
415 | </Palette>
416 | ```
417 | 
418 | ## Development
419 | 
420 | The component can be served for development purpose on `http://localhost:5173/` running:
421 | 
422 | ```
423 | yarn dev
424 | ```
425 | 
426 | ## Contributing
427 | 
428 | Contributions are warmly welcomed:
429 | 
430 | -   Fork the repository
431 | -   Create a feature branch
432 | -   Develop the feature AND write the tests (or write the tests AND develop the feature)
433 | -   Commit your changes
434 |     using [Angular Git Commit Guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)
435 | -   Submit a Pull Request
436 | 


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 | 	extends: ['@commitlint/config-conventional'],
 3 | 	rules: {
 4 | 		'subject-case': [2, 'always', ['sentence-case']],
 5 | 		'scope-case': [2, 'always', ['lower-case', 'upper-case']],
 6 | 		'body-max-line-length': [0, 'always', 1000],
 7 | 		'footer-max-line-length': [0, 'always', 1000],
 8 | 	},
 9 | }
10 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"esModuleInterop": true,
 5 | 		"forceConsistentCasingInFileNames": true,
 6 | 		"resolveJsonModule": true,
 7 | 		"skipLibCheck": true,
 8 | 		"sourceMap": true,
 9 | 		"moduleResolution": "NodeNext",
10 | 		"module": "NodeNext"
11 | 	}
12 | }
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"name": "@untemps/svelte-palette",
  3 | 	"version": "4.1.0",
  4 | 	"author": "Vincent Le Badezet <v.lebadezet@untemps.net>",
  5 | 	"license": "MIT",
  6 | 	"homepage": "https://svelte-palette.vercel.app",
  7 | 	"repository": "https://github.com/untemps/svelte-palette",
  8 | 	"bugs": "https://github.com/untemps/svelte-palette/issues",
  9 | 	"description": "Svelte component to display a customisable color picker",
 10 | 	"keywords": [
 11 | 		"palette",
 12 | 		"color",
 13 | 		"color-picker",
 14 | 		"svelte",
 15 | 		"svelte-component",
 16 | 		"component",
 17 | 		"javascript"
 18 | 	],
 19 | 	"private": false,
 20 | 	"publishConfig": {
 21 | 		"access": "public"
 22 | 	},
 23 | 	"svelte": "./dist/index.js",
 24 | 	"types": "./dist/index.d.ts",
 25 | 	"type": "module",
 26 | 	"files": [
 27 | 		"dist",
 28 | 		"!dist/**/*.test.*"
 29 | 	],
 30 | 	"exports": {
 31 | 		".": {
 32 | 			"types": "./dist/index.d.ts",
 33 | 			"svelte": "./dist/index.js"
 34 | 		}
 35 | 	},
 36 | 	"engines": {
 37 | 		"node": ">=20"
 38 | 	},
 39 | 	"devDependencies": {
 40 | 		"@commitlint/cli": "^19.3.0",
 41 | 		"@commitlint/config-conventional": "^19.2.2",
 42 | 		"@semantic-release/changelog": "^6.0.3",
 43 | 		"@semantic-release/git": "^10.0.1",
 44 | 		"@semantic-release/github": "^10.0.6",
 45 | 		"@sveltejs/adapter-auto": "^3.2.2",
 46 | 		"@sveltejs/kit": "^2.5.16",
 47 | 		"@sveltejs/package": "^2.3.2",
 48 | 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 49 | 		"@testing-library/jest-dom": "^6.4.6",
 50 | 		"@testing-library/svelte": "^5.1.0",
 51 | 		"@testing-library/user-event": "^14.5.2",
 52 | 		"@vitest/coverage-v8": "^1.6.0",
 53 | 		"carbon-components-svelte": "^0.85.0",
 54 | 		"carbon-icons-svelte": "^12.9.0",
 55 | 		"cross-env": "^7.0.3",
 56 | 		"font-color-contrast": "^11.1.0",
 57 | 		"husky": "^9.0.11",
 58 | 		"jsdom": "^24.1.0",
 59 | 		"prettier": "^3.3.2",
 60 | 		"prettier-plugin-svelte": "^3.2.4",
 61 | 		"publint": "^0.2.8",
 62 | 		"semantic-release": "^24.0.0",
 63 | 		"svelte": "^4.2.18",
 64 | 		"tslib": "^2.6.3",
 65 | 		"typescript": "^5.4.5",
 66 | 		"vite": "^5.3.1",
 67 | 		"vitest": "^1.6.0"
 68 | 	},
 69 | 	"dependencies": {
 70 | 		"@untemps/svelte-use-drop-outside": "^1.6.0",
 71 | 		"@untemps/svelte-use-tooltip": "^2.8.0",
 72 | 		"@untemps/utils": "^3.0.0"
 73 | 	},
 74 | 	"peerDependencies": {
 75 | 		"svelte": "^4.0.0"
 76 | 	},
 77 | 	"release": {
 78 | 		"branches": [
 79 | 			"main",
 80 | 			{
 81 | 				"name": "beta",
 82 | 				"prerelease": true
 83 | 			}
 84 | 		],
 85 | 		"plugins": [
 86 | 			[
 87 | 				"@semantic-release/commit-analyzer",
 88 | 				{
 89 | 					"releaseRules": [
 90 | 						{
 91 | 							"scope": "force",
 92 | 							"release": "patch"
 93 | 						}
 94 | 					]
 95 | 				}
 96 | 			],
 97 | 			"@semantic-release/release-notes-generator",
 98 | 			"@semantic-release/changelog",
 99 | 			"@semantic-release/npm",
100 | 			"@semantic-release/git",
101 | 			[
102 | 				"@semantic-release/github",
103 | 				{
104 | 					"assets": [
105 | 						{
106 | 							"path": "dist/index.js"
107 | 						}
108 | 					]
109 | 				}
110 | 			]
111 | 		]
112 | 	},
113 | 	"scripts": {
114 | 		"dev": "vite dev",
115 | 		"build": "vite build && yarn package",
116 | 		"preview": "vite preview",
117 | 		"package": "svelte-kit sync && svelte-package && publint",
118 | 		"prepublishOnly": "yarn package",
119 | 		"test": "vitest watch --coverage",
120 | 		"test:ci": "vitest run --coverage",
121 | 		"lint": "prettier --check .",
122 | 		"format": "prettier --write . && git add . && git status",
123 | 		"prepare": "husky install"
124 | 	}
125 | }
126 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<link rel="stylesheet" href="%sveltekit.assets%/app.css" />
 7 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 		%sveltekit.head%
 9 | 	</head>
10 | 	<body data-sveltekit-preload-data="hover">
11 | 		<span id="root">%sveltekit.body%</span>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/Palette.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	// TODO: Manage maxNumColumns
  3 | 	import { createEventDispatcher } from 'svelte'
  4 | 
  5 | 	import { calculateColors, calculateNumColumns } from '../utils/utils.js'
  6 | 
  7 | 	import { SELECT } from '../enums/PaletteEvent'
  8 | 	import { NONE } from '../enums/PaletteDeletionMode'
  9 | 	import { COMPACT, SETTINGS } from '$lib/enums/PaletteTool.js'
 10 | 
 11 | 	import PaletteInput from './PaletteInput.svelte'
 12 | 	import PaletteSlot from './PaletteSlot.svelte'
 13 | 	import PaletteTrashButton from './PaletteTrashButton.svelte'
 14 | 	import PaletteLoader from './PaletteLoader.svelte'
 15 | 	import PaletteTools from './PaletteTools.svelte'
 16 | 	import PaletteSettingsPanel from './PaletteSettingsPanel.svelte'
 17 | 	import PaletteCompactToggleButton from './PaletteCompactToggleButton.svelte'
 18 | 
 19 | 	import useDeletion from './useDeletion'
 20 | 
 21 | 	export let colors = null
 22 | 	export let selectedColor = null
 23 | 	export let isCompact = false
 24 | 	export let compactColorIndices = []
 25 | 	export let allowDuplicates = false
 26 | 	export let deletionMode = NONE
 27 | 	export let tooltipClassName = null
 28 | 	export let tooltipContentSelector = null
 29 | 	export let showTransparentSlot = false
 30 | 	export let maxColors = 30
 31 | 	export let showInput = false
 32 | 	export let inputType = 'text'
 33 | 	export let numColumns = 5
 34 | 	export let transition = null
 35 | 
 36 | 	let _colors = null
 37 | 	let _numColumns = numColumns
 38 | 	let _isSettingsOn = false
 39 | 
 40 | 	$: _isCompact = isCompact
 41 | 
 42 | 	$: Promise.resolve(colors).then((results) => {
 43 | 		if (!!results) {
 44 | 			const newColors = calculateColors(results, {
 45 | 				isCompact: _isCompact,
 46 | 				compactColorIndices,
 47 | 				allowDuplicates,
 48 | 				maxColors,
 49 | 			})
 50 | 			_colors = newColors
 51 | 			_numColumns = calculateNumColumns(newColors.length, {
 52 | 				isCompact: _isCompact,
 53 | 				compactColorIndices,
 54 | 				showTransparentSlot,
 55 | 				numColumns,
 56 | 			})
 57 | 		}
 58 | 	})
 59 | 
 60 | 	$: _tools = [...(compactColorIndices?.length ? [COMPACT] : []), ...($$slots.settings ? [SETTINGS] : [])]
 61 | 
 62 | 	const dispatch = createEventDispatcher()
 63 | 
 64 | 	const _selectColor = (color) => {
 65 | 		selectedColor = color
 66 | 		dispatch(SELECT, { color })
 67 | 	}
 68 | 
 69 | 	const _addColor = (color) => {
 70 | 		_colors = calculateColors([..._colors, color], {
 71 | 			isCompact: _isCompact,
 72 | 			compactColorIndices,
 73 | 			allowDuplicates,
 74 | 			maxColors,
 75 | 		})
 76 | 		_numColumns = calculateNumColumns(_colors.length, {
 77 | 			isCompact: _isCompact,
 78 | 			compactColorIndices,
 79 | 			showTransparentSlot,
 80 | 			numColumns,
 81 | 		})
 82 | 	}
 83 | 
 84 | 	const _removeColor = (index) => (_colors = _colors.filter((c, i) => i !== index))
 85 | 
 86 | 	const _onSlotSelect = ({ detail: { color } }) => _selectColor(color)
 87 | 
 88 | 	const _onInputAdd = ({ detail: { color } }) => _addColor(color)
 89 | 
 90 | 	const _onDelete = (index) => _removeColor(index)
 91 | 
 92 | 	const _onToolSelect = (args) => {
 93 | 		const tool = args?.detail?.tool ?? args
 94 | 		switch (tool) {
 95 | 			case SETTINGS:
 96 | 				_isSettingsOn = true
 97 | 				break
 98 | 			case COMPACT:
 99 | 				_isCompact = !_isCompact
100 | 				_numColumns = _isCompact ? compactColorIndices.length : _numColumns
101 | 				break
102 | 		}
103 | 	}
104 | 
105 | 	const _onExpand = () => {
106 | 		_isCompact = !_isCompact
107 | 		_numColumns = _isCompact ? compactColorIndices.length : _numColumns
108 | 	}
109 | 
110 | 	const _onSettingsClose = () => {
111 | 		_isSettingsOn = false
112 | 	}
113 | </script>
114 | 
115 | <div class="palette {$$props.class ?? ''}" role="main">
116 | 	<section class="palette__content" class:palette__content--compact={_isCompact} style="--num-columns: {_numColumns}">
117 | 		{#if !_isCompact}
118 | 			<slot name="header" {selectedColor} />
119 | 		{/if}
120 | 		{#if !!_colors}
121 | 			<ul class="palette__cells">
122 | 				{#if $$slots.before_slot}
123 | 					<slot name="before_slot" {selectedColor} {transition} isCompact={_isCompact} />
124 | 				{/if}
125 | 				{#if showTransparentSlot}
126 | 					<li data-testid="__palette-cell__" class="palette__cells__cell">
127 | 						<slot name="transparent_slot">
128 | 							<PaletteSlot
129 | 								aria-label="Transparent slot"
130 | 								selected={selectedColor === null}
131 | 								on:select={_onSlotSelect}
132 | 							/>
133 | 						</slot>
134 | 					</li>
135 | 				{/if}
136 | 				{#each _colors as color, index (`${color.value}_${index}`)}
137 | 					<li
138 | 						data-testid="__palette-cell__"
139 | 						class="palette__cells__cell"
140 | 						use:useDeletion={{
141 | 							deletionMode,
142 | 							onDelete: () => _onDelete(index),
143 | 							tooltipContentSelector,
144 | 							tooltipClassName,
145 | 						}}
146 | 					>
147 | 						<slot
148 | 							name="slot"
149 | 							color={color.value}
150 | 							colorName={color.name}
151 | 							{selectedColor}
152 | 							{transition}
153 | 							isCompact={_isCompact}
154 | 							{index}
155 | 						>
156 | 							<PaletteSlot
157 | 								color={color.value}
158 | 								selected={color === selectedColor}
159 | 								{transition}
160 | 								on:select={_onSlotSelect}
161 | 							/>
162 | 						</slot>
163 | 					</li>
164 | 				{/each}
165 | 				{#if $$slots.after_slot}
166 | 					<slot name="after_slot" {selectedColor} {transition} isCompact={_isCompact} />
167 | 				{/if}
168 | 			</ul>
169 | 		{:else}
170 | 			<slot name="loader">
171 | 				<PaletteLoader />
172 | 			</slot>
173 | 		{/if}
174 | 		{#if !_isCompact}
175 | 			<slot name="footer" {selectedColor} />
176 | 		{/if}
177 | 		{#if _isCompact}
178 | 			<PaletteCompactToggleButton isCompact={true} on:click={_onExpand} />
179 | 		{/if}
180 | 	</section>
181 | 	{#if !_isCompact && showInput}
182 | 		<slot name="input" {selectedColor} {inputType}>
183 | 			<PaletteInput color={selectedColor} {inputType} on:add={_onInputAdd} />
184 | 		</slot>
185 | 	{/if}
186 | 	{#if !_isCompact && !!_tools?.length}
187 | 		<slot name="tools" {compactColorIndices} isCompact={_isCompact} onSelect={_onToolSelect}>
188 | 			<PaletteTools tools={_tools} on:select={_onToolSelect} />
189 | 		</slot>
190 | 	{/if}
191 | </div>
192 | {#if $$slots.settings}
193 | 	<PaletteSettingsPanel isVisible={_isSettingsOn} on:close={_onSettingsClose}>
194 | 		<slot name="settings" onClose={_onSettingsClose} />
195 | 	</PaletteSettingsPanel>
196 | {/if}
197 | 
198 | <template id="tooltip-template">
199 | 	<PaletteTrashButton />
200 | </template>
201 | 
202 | <style>
203 | 	:global(*) {
204 | 		box-sizing: border-box;
205 | 	}
206 | 
207 | 	.palette {
208 | 		width: 100%;
209 | 		color: black;
210 | 		display: flex;
211 | 		flex-direction: column;
212 | 		align-items: center;
213 | 		background-color: #fafafa;
214 | 	}
215 | 
216 | 	.palette__content {
217 | 		width: 100%;
218 | 		min-height: 70px;
219 | 		display: flex;
220 | 		flex-direction: column;
221 | 		align-items: center;
222 | 		justify-content: center;
223 | 		padding: 1rem;
224 | 	}
225 | 
226 | 	.palette__content.palette__content--compact {
227 | 		min-height: auto;
228 | 		padding: 0.3rem 0.6rem;
229 | 		flex-direction: row;
230 | 		column-gap: 0.7rem;
231 | 	}
232 | 
233 | 	.palette__content > .palette__cells {
234 | 		width: 100%;
235 | 		display: grid;
236 | 		grid-template-columns: repeat(var(--num-columns), minmax(2rem, 1fr));
237 | 		grid-auto-rows: minmax(2rem, 1fr);
238 | 		column-gap: 0.3rem;
239 | 		row-gap: 0.6rem;
240 | 		align-items: center;
241 | 		justify-items: center;
242 | 		margin: 0;
243 | 		padding: 0;
244 | 		list-style: none;
245 | 	}
246 | 
247 | 	.palette__content > .palette__cells > .palette__cells__cell {
248 | 		width: 100%;
249 | 		display: flex;
250 | 		align-items: center;
251 | 		justify-content: center;
252 | 	}
253 | 
254 | 	.palette__content.palette__content--compact > .palette__cells {
255 | 		grid-template-columns: repeat(var(--num-columns), minmax(1.5rem, 1fr));
256 | 		column-gap: 0;
257 | 	}
258 | </style>
259 | 


--------------------------------------------------------------------------------
/src/lib/components/PaletteCompactToggleButton.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { createEventDispatcher } from 'svelte'
 3 | 
 4 | 	import { COMPACT, ENLARGE } from '../enums/PaletteIcon'
 5 | 
 6 | 	import PaletteIconButton from './PaletteIconButton.svelte'
 7 | 
 8 | 	export let isCompact = false
 9 | 
10 | 	const dispatch = createEventDispatcher()
11 | 
12 | 	const _onClick = () => dispatch('click', { isCompact })
13 | </script>
14 | 
15 | <PaletteIconButton
16 | 	data-testid="__palette-compact-toggle-button__"
17 | 	aria-label={isCompact ? 'Enlarge the palette' : 'Compact the palette'}
18 | 	{...$$restProps}
19 | 	icon={isCompact ? ENLARGE : COMPACT}
20 | 	on:click={_onClick}
21 | />
22 | 


--------------------------------------------------------------------------------
/src/lib/components/PaletteEyeDropperButton.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { createEventDispatcher } from 'svelte'
 3 | 
 4 | 	import { ADD, ERROR } from '../enums/PaletteEvent'
 5 | 	import { EYE_DROPPER } from '../enums/PaletteIcon'
 6 | 
 7 | 	import PaletteIconButton from './PaletteIconButton.svelte'
 8 | 
 9 | 	const dispatch = createEventDispatcher()
10 | 
11 | 	const _onClick = async () => {
12 | 		try {
13 | 			const eyeDropper = new EyeDropper()
14 | 			const { sRGBHex: color } = await eyeDropper.open()
15 | 			dispatch(ADD, {
16 | 				color,
17 | 			})
18 | 		} catch (error) {
19 | 			dispatch(ERROR, {
20 | 				error,
21 | 			})
22 | 		}
23 | 	}
24 | </script>
25 | 
26 | <PaletteIconButton
27 | 	data-testid="__palette-eyedropper-button__"
28 | 	aria-label="Submit the hex color value"
29 | 	{...$$restProps}
30 | 	icon={EYE_DROPPER}
31 | 	type="submit"
32 | 	on:click={_onClick}
33 | />
34 | 


--------------------------------------------------------------------------------
/src/lib/components/PaletteIconButton.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { COMPACT, ENLARGE, EYE_DROPPER, PLUS, SETTINGS, TRASH } from '../enums/PaletteIcon'
 3 | 
 4 | 	import CompactIcon from './icons/CompactIcon.svelte'
 5 | 	import EnlargeIcon from './icons/EnlargeIcon.svelte'
 6 | 	import EyeDropperIcon from './icons/EyeDropperIcon.svelte'
 7 | 	import PlusIcon from './icons/PlusIcon.svelte'
 8 | 	import TrashIcon from './icons/TrashIcon.svelte'
 9 | 	import SettingsIcon from './icons/SettingsIcon.svelte'
10 | 
11 | 	export let icon = null
12 | 	export let isActive = false
13 | 
14 | 	const ICONS = {
15 | 		[COMPACT]: CompactIcon,
16 | 		[ENLARGE]: EnlargeIcon,
17 | 		[EYE_DROPPER]: EyeDropperIcon,
18 | 		[PLUS]: PlusIcon,
19 | 		[TRASH]: TrashIcon,
20 | 		[SETTINGS]: SettingsIcon,
21 | 	}
22 | 
23 | 	const _renderIcon = (name) => {
24 | 		return ICONS[name]
25 | 	}
26 | </script>
27 | 
28 | <button
29 | 	data-testid="__palette-icon-button__"
30 | 	type="button"
31 | 	{...$$restProps}
32 | 	class="icon_button__button {$$props.class ?? ''}"
33 | 	class:icon_button__button--active={isActive}
34 | 	on:click
35 | >
36 | 	<svelte:component this={_renderIcon(icon)} />
37 | </button>
38 | 
39 | <style>
40 | 	.icon_button__button {
41 | 		position: relative;
42 | 		min-width: 2rem;
43 | 		height: 2rem;
44 | 		margin: 0;
45 | 		padding: 0;
46 | 		background-color: #fafafa;
47 | 		border-width: 1px;
48 | 		border-color: #e5e5e5;
49 | 		border-style: solid;
50 | 		border-radius: 0.3rem;
51 | 		cursor: pointer;
52 | 	}
53 | 
54 | 	.icon_button__button:disabled {
55 | 		cursor: auto;
56 | 	}
57 | 
58 | 	.icon_button__button:focus {
59 | 		border-color: #bdbdbd;
60 | 		outline: none;
61 | 	}
62 | 
63 | 	.icon_button__button--active {
64 | 		background-color: #e5e5e5;
65 | 		outline: none;
66 | 	}
67 | 
68 | 	:global(.icon_button__button > svg) {
69 | 		position: absolute;
70 | 		top: calc(50% - 8px);
71 | 		left: calc(50% - 8px);
72 | 		width: 16px;
73 | 		height: 16px;
74 | 	}
75 | 
76 | 	:global(
77 | 			.icon_button__button > svg path,
78 | 			.icon_button__button > svg circle,
79 | 			.icon_button__button > svg line,
80 | 			.icon_button__button > svg polyline
81 | 		) {
82 | 		stroke: #646464;
83 | 	}
84 | 
85 | 	:global(
86 | 			.icon_button__button:disabled > svg path,
87 | 			.icon_button__button:disabled > svg circle,
88 | 			.icon_button__button:disabled > svg line,
89 | 			.icon_button__button:disabled > svg polyline
90 | 		) {
91 | 		stroke: #bdbdbd;
92 | 	}
93 | </style>
94 | 


--------------------------------------------------------------------------------
/src/lib/components/PaletteInput.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
  3 | 
  4 | 	import { ADD } from '../enums/PaletteEvent'
  5 | 	import { PLUS } from '../enums/PaletteIcon'
  6 | 
  7 | 	import PaletteIconButton from './PaletteIconButton.svelte'
  8 | 	import PaletteSlot from './PaletteSlot.svelte'
  9 | 	import PaletteEyeDropperButton from './PaletteEyeDropperButton.svelte'
 10 | 
 11 | 	import { COLOR_REGEX, isColorValid } from '../utils/utils'
 12 | 
 13 | 	export let color = null
 14 | 	export let inputType = 'text'
 15 | 
 16 | 	const dispatch = createEventDispatcher()
 17 | 
 18 | 	let _isEyeDropperAvailable = false
 19 | 	let _gridColumnStart = 2
 20 | 	let _gridColumnEnd = 5
 21 | 
 22 | 	$: color = color?.replace(COLOR_REGEX, '#$1') || ''
 23 | 	$: isValid = isColorValid(color)
 24 | 
 25 | 	$: {
 26 | 		_gridColumnStart = 2 - +(inputType === 'color')
 27 | 		_gridColumnEnd = (_isEyeDropperAvailable ? 5 : 6) + +(inputType === 'color')
 28 | 	}
 29 | 
 30 | 	onMount(() => {
 31 | 		_isEyeDropperAvailable = !!window?.EyeDropper
 32 | 		return () => document.removeEventListener('keypress', _onKeyPress)
 33 | 	})
 34 | 
 35 | 	const _onInputChange = ({ target: { value } }) => {
 36 | 		color = value
 37 | 	}
 38 | 
 39 | 	const _onKeyPress = (e) => {
 40 | 		e.code === 'Enter' && _onSubmit()
 41 | 	}
 42 | 
 43 | 	const _onInputFocus = () => {
 44 | 		document?.addEventListener('keypress', _onKeyPress)
 45 | 	}
 46 | 
 47 | 	const _onInputBlur = () => {
 48 | 		document?.removeEventListener('keypress', _onKeyPress)
 49 | 	}
 50 | 
 51 | 	const _onEyeDropperAdd = ({ detail: { color: value } }) => {
 52 | 		color = value
 53 | 	}
 54 | 
 55 | 	const _onSubmit = () => {
 56 | 		dispatch(ADD, {
 57 | 			color,
 58 | 		})
 59 | 	}
 60 | </script>
 61 | 
 62 | <hr class="palette__divider" />
 63 | <section
 64 | 	data-testid="__palette-input__"
 65 | 	class="palette__input {$$props.class ?? ''}"
 66 | 	style="--grid-column-start: {_gridColumnStart}; --grid-column-end: {_gridColumnEnd}"
 67 | >
 68 | 	<form>
 69 | 		{#if inputType !== 'color'}<PaletteSlot
 70 | 				data-testid="__palette-input-slot__"
 71 | 				bind:color
 72 | 				role="presentation"
 73 | 				tabindex="-1"
 74 | 				disabled
 75 | 			/>{/if}
 76 | 		<span class="palette_input__adder">
 77 | 			<input
 78 | 				data-testid="__palette-input-input__"
 79 | 				type={inputType}
 80 | 				value={color}
 81 | 				aria-label="Enter an hex color value"
 82 | 				title="'The value must be a valid hex color'"
 83 | 				class="palette_input__input"
 84 | 				class:palette_input__input--color={inputType === 'color'}
 85 | 				on:focus={_onInputFocus}
 86 | 				on:blur={_onInputBlur}
 87 | 				on:input|preventDefault={_onInputChange}
 88 | 			/>
 89 | 			<PaletteIconButton
 90 | 				data-testid="__palette-input-submit__"
 91 | 				type="submit"
 92 | 				icon={PLUS}
 93 | 				disabled={!isValid}
 94 | 				aria-label="Submit the hex color value"
 95 | 				class="palette_input__submit"
 96 | 				on:click={_onSubmit}
 97 | 			/>
 98 | 		</span>
 99 | 		{#if _isEyeDropperAvailable && inputType !== 'color'}
100 | 			<PaletteEyeDropperButton aria-label="Pick a color from the screen" on:add={_onEyeDropperAdd} />
101 | 		{/if}
102 | 	</form>
103 | </section>
104 | 
105 | <style>
106 | 	.palette__input {
107 | 		width: 100%;
108 | 		max-width: 14rem;
109 | 		padding: 1rem 1rem;
110 | 	}
111 | 
112 | 	form {
113 | 		width: 100%;
114 | 		position: relative;
115 | 		display: grid;
116 | 		grid-template-columns: repeat(5, minmax(2rem, 1fr));
117 | 		column-gap: 0.3rem;
118 | 		justify-items: center;
119 | 		align-items: center;
120 | 	}
121 | 
122 | 	.palette_input__adder {
123 | 		width: 100%;
124 | 		grid-column: var(--grid-column-start) / var(--grid-column-end);
125 | 		display: flex;
126 | 		align-items: center;
127 | 	}
128 | 
129 | 	.palette_input__input {
130 | 		font-family: Helvetica, sans-serif;
131 | 		font-size: 0.8rem;
132 | 		width: 71%;
133 | 		height: 2rem;
134 | 		margin: 0;
135 | 		padding: 0.4rem;
136 | 		outline: none;
137 | 		color: rgba(0, 0, 0, 0.6);
138 | 		background: rgba(255, 255, 255, 1);
139 | 		border-width: 1px;
140 | 		border-color: #e5e5e5;
141 | 		border-style: solid;
142 | 		border-radius: 0.3rem;
143 | 		border-right-width: 0;
144 | 		border-top-right-radius: 0;
145 | 		border-bottom-right-radius: 0;
146 | 	}
147 | 
148 | 	.palette_input__input:disabled {
149 | 		opacity: 0.5;
150 | 	}
151 | 
152 | 	.palette_input__input:focus {
153 | 		border-right-width: 1px;
154 | 		border-color: #bdbdbd;
155 | 		outline: none;
156 | 		z-index: 2;
157 | 	}
158 | 
159 | 	.palette_input__input--color {
160 | 		width: 12rem;
161 | 		padding: 0.1rem 0.3rem;
162 | 	}
163 | 
164 | 	:global(button.icon_button__button.palette_input__submit) {
165 | 		margin-left: -1px;
166 | 		border-top-left-radius: 0;
167 | 		border-bottom-left-radius: 0;
168 | 	}
169 | 
170 | 	.palette__divider {
171 | 		border: none;
172 | 		background-color: #e9e9e9;
173 | 		width: 100%;
174 | 		height: 1px;
175 | 		margin: 0;
176 | 	}
177 | </style>
178 | 


--------------------------------------------------------------------------------
/src/lib/components/PaletteLoader.svelte:
--------------------------------------------------------------------------------
 1 | <svg width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 2 | 	<path d="M12,2.5 A9.5,9.5 0 0,1 21.5,12" stroke-width="2" stroke="#ccc" fill="none">
 3 | 		<animateTransform
 4 | 			attributeName="transform"
 5 | 			type="rotate"
 6 | 			from="0 12 12"
 7 | 			to="360 12 12"
 8 | 			dur="1s"
 9 | 			repeatCount="indefinite"
10 | 			calcMode="linear"
11 | 		/>
12 | 	</path>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/PaletteSettingsButton.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { SETTINGS } from '../enums/PaletteIcon'
 3 | 
 4 | 	import PaletteIconButton from './PaletteIconButton.svelte'
 5 | </script>
 6 | 
 7 | <PaletteIconButton
 8 | 	data-testid="__palette-settings-button__"
 9 | 	aria-label="Go to settings"
10 | 	{...$$restProps}
11 | 	icon={SETTINGS}
12 | 	on:click
13 | />
14 | 


--------------------------------------------------------------------------------
/src/lib/components/PaletteSettingsPanel.svelte:
--------------------------------------------------------------------------------
 1 | <script context="module">
 2 | 	export const usePortal = (node, { target = 'body', visible = false }) => {
 3 | 		const getTargetEl = (selector) => {
 4 | 			if (!!selector) {
 5 | 				return document.querySelector(selector)
 6 | 			}
 7 | 			return null
 8 | 		}
 9 | 
10 | 		const show = () => {
11 | 			if (!!targetEl) {
12 | 				targetEl.appendChild(node)
13 | 			}
14 | 		}
15 | 
16 | 		const hide = () => {
17 | 			node.parentNode?.removeChild(node)
18 | 		}
19 | 
20 | 		let targetEl = getTargetEl(target)
21 | 		visible ? show() : hide()
22 | 
23 | 		return {
24 | 			update: ({ target: newTarget = target, visible: newVisible = visible }) => {
25 | 				if (newTarget !== target) {
26 | 					targetEl = getTargetEl(newTarget)
27 | 				}
28 | 				if (newVisible !== visible) {
29 | 					newVisible ? show() : hide()
30 | 				}
31 | 			},
32 | 			destroy: () => {
33 | 				hide()
34 | 			},
35 | 		}
36 | 	}
37 | </script>
38 | 
39 | <script>
40 | 	export let target = 'body'
41 | 	export let isVisible = false
42 | </script>
43 | 
44 | <section
45 | 	class="palette__settings__panel"
46 | 	class:palette__settings__panel--visible={isVisible}
47 | 	use:usePortal={{ target, visible: isVisible }}
48 | >
49 | 	<slot />
50 | </section>
51 | 
52 | <style>
53 | 	.palette__settings__panel {
54 | 		visibility: hidden;
55 | 	}
56 | 
57 | 	.palette__settings__panel--visible {
58 | 		visibility: visible;
59 | 	}
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/lib/components/PaletteSlot.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { createEventDispatcher } from 'svelte'
 3 | 
 4 | 	import { SELECT } from '../enums/PaletteEvent'
 5 | 
 6 | 	export let color = null
 7 | 	export let selected = false
 8 | 	export let disabled = false
 9 | 	export let transition = null
10 | 
11 | 	const dispatch = createEventDispatcher()
12 | 
13 | 	const enter = (node) => transition?.fn(node, transition?.args)
14 | 
15 | 	const _onClick = () => {
16 | 		!disabled &&
17 | 			dispatch(SELECT, {
18 | 				color,
19 | 			})
20 | 	}
21 | </script>
22 | 
23 | <button
24 | 	data-testid="__palette-slot__"
25 | 	aria-label={color}
26 | 	{...$$restProps}
27 | 	class:empty={!color}
28 | 	class:selected
29 | 	class:clickable={!disabled}
30 | 	style="--color:{color}; --outerBorderColor:{color || '#aaa'};"
31 | 	{disabled}
32 | 	in:enter
33 | 	on:click|preventDefault={_onClick}
34 | />
35 | 
36 | <style>
37 | 	button {
38 | 		width: 1rem;
39 | 		height: 1rem;
40 | 		margin: 1px 0 0 0;
41 | 		padding: 0;
42 | 		border: 1px solid rgba(0, 0, 0, 0.2);
43 | 		border-radius: 50%;
44 | 		background-color: var(--color);
45 | 	}
46 | 
47 | 	button:active {
48 | 		background-color: var(--color);
49 | 	}
50 | 
51 | 	button:focus {
52 | 		outline: 2px solid #bdbdbd;
53 | 		outline-offset: 2px;
54 | 	}
55 | 
56 | 	button.selected {
57 | 		outline: 2px solid var(--outerBorderColor);
58 | 		outline-offset: 2px;
59 | 	}
60 | 
61 | 	button.clickable {
62 | 		cursor: pointer;
63 | 	}
64 | 
65 | 	button.empty {
66 | 		border: #aaa solid 1px;
67 | 		background: linear-gradient(to top left, #00000000 calc(50% - 1px), #aaa 50% 50%, #00000000 calc(50% + 1px));
68 | 	}
69 | </style>
70 | 


--------------------------------------------------------------------------------
/src/lib/components/PaletteTools.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { createEventDispatcher } from 'svelte'
 3 | 
 4 | 	import { COMPACT, SETTINGS } from '../enums/PaletteTool.js'
 5 | 	import { SELECT } from '../enums/PaletteEvent.js'
 6 | 
 7 | 	import PaletteCompactToggleButton from './PaletteCompactToggleButton.svelte'
 8 | 	import PaletteSettingsButton from './PaletteSettingsButton.svelte'
 9 | 
10 | 	export let tools = []
11 | 
12 | 	const TOOL_BUTTONS = {
13 | 		[COMPACT]: PaletteCompactToggleButton,
14 | 		[SETTINGS]: PaletteSettingsButton,
15 | 	}
16 | 
17 | 	const dispatch = createEventDispatcher()
18 | 
19 | 	const _renderTool = (index) => {
20 | 		return tools[index] ? TOOL_BUTTONS[tools[index]] : null
21 | 	}
22 | 
23 | 	const _selectTool = (index) => {
24 | 		dispatch(SELECT, {
25 | 			tool: tools[index],
26 | 		})
27 | 	}
28 | </script>
29 | 
30 | <hr class="palette__divider" />
31 | <section data-testid="__palette-tools__" aria-label="Palette tools" class="palette__tools">
32 | 	<svelte:component this={_renderTool(0)} on:click={() => _selectTool(0)} />
33 | 	<svelte:component this={_renderTool(1)} on:click={() => _selectTool(1)} />
34 | 	<svelte:component this={_renderTool(2)} on:click={() => _selectTool(2)} />
35 | 	<svelte:component this={_renderTool(3)} on:click={() => _selectTool(3)} />
36 | 	<svelte:component this={_renderTool(4)} on:click={() => _selectTool(4)} />
37 | </section>
38 | 
39 | <style>
40 | 	.palette__tools {
41 | 		width: 100%;
42 | 		max-width: 14rem;
43 | 		display: grid;
44 | 		grid-template-columns: repeat(5, minmax(2rem, 1fr));
45 | 		column-gap: 0.3rem;
46 | 		justify-items: center;
47 | 		align-items: center;
48 | 		padding: 0.5rem 1rem;
49 | 	}
50 | 
51 | 	:global(.palette__tools > button:first-child) {
52 | 		grid-column: 4 / 5;
53 | 		grid-row: 1 / 2;
54 | 	}
55 | 
56 | 	:global(.palette__tools > button:last-child) {
57 | 		grid-column: 5 / 6;
58 | 		grid-row: 1 / 2;
59 | 	}
60 | 
61 | 	.palette__divider {
62 | 		border: none;
63 | 		background-color: #e9e9e9;
64 | 		width: 100%;
65 | 		height: 1px;
66 | 		margin: 0;
67 | 	}
68 | </style>
69 | 


--------------------------------------------------------------------------------
/src/lib/components/PaletteTrashButton.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import TrashIcon from './icons/TrashIcon.svelte'
 3 | 
 4 | 	export let isActive = false
 5 | </script>
 6 | 
 7 | <button
 8 | 	data-testid="__palette-trash-button__"
 9 | 	type="button"
10 | 	{...$$restProps}
11 | 	class="trash_button__button {$$props.class ?? ''}"
12 | 	class:icon_button__button--active={isActive}
13 | 	on:click
14 | >
15 | 	<TrashIcon />
16 | </button>
17 | 
18 | <style>
19 | 	.trash_button__button {
20 | 		position: relative;
21 | 		min-width: 1.6rem;
22 | 		height: 1.6rem;
23 | 		margin: 0;
24 | 		padding: 0;
25 | 		background: none;
26 | 		border: none;
27 | 		cursor: pointer;
28 | 	}
29 | 
30 | 	.trash_button__button:disabled {
31 | 		opacity: 0.5;
32 | 	}
33 | 
34 | 	.trash_button__button:focus {
35 | 		border-color: #bdbdbd;
36 | 		outline: none;
37 | 	}
38 | 
39 | 	.trash_button__button--active {
40 | 		background-color: #e5e5e5;
41 | 		outline: none;
42 | 	}
43 | 
44 | 	:global(.trash_button__button > svg) {
45 | 		position: absolute;
46 | 		top: calc(50% - 12px);
47 | 		left: calc(50% - 12px);
48 | 		width: 24px;
49 | 		height: 24px;
50 | 	}
51 | 
52 | 	:global(
53 | 			.trash_button__button > svg path,
54 | 			.trash_button__button > svg circle,
55 | 			.trash_button__button > svg line,
56 | 			.trash_button__button > svg polyline
57 | 		) {
58 | 		stroke: #fff;
59 | 	}
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/lib/components/__tests__/Palette.test.js:
--------------------------------------------------------------------------------
  1 | import { afterEach, expect, test, vi } from 'vitest'
  2 | import { cleanup, render, screen, waitFor } from '@testing-library/svelte'
  3 | import userEvent from '@testing-library/user-event'
  4 | import { standby } from '@untemps/utils/async/standby'
  5 | 
  6 | import Palette from '../Palette.svelte'
  7 | 
  8 | // TODO: Fix "Error: Not implemented: HTMLFormElement.prototype.requestSubmit"
  9 | import { TOOLTIP, DROP } from '../../enums/PaletteDeletionMode'
 10 | 
 11 | const setup = (component, options) => {
 12 | 	return {
 13 | 		user: userEvent.setup(),
 14 | 		...render(component, options),
 15 | 	}
 16 | }
 17 | 
 18 | afterEach(() => cleanup())
 19 | 
 20 | test('Displays as many color slots as set', async () => {
 21 | 	let cells = null
 22 | 	const colors = ['#ff0', '#0ff', '#f0f']
 23 | 	setup(Palette, {
 24 | 		colors,
 25 | 	})
 26 | 
 27 | 	cells = await screen.findAllByTestId('__palette-cell__')
 28 | 	expect(cells).toHaveLength(colors.length)
 29 | })
 30 | 
 31 | test('Displays as many color slots as set in async mode', async () => {
 32 | 	let cells = null
 33 | 	const colors = Promise.resolve(['#ff0', '#0ff', '#f0f'])
 34 | 	setup(Palette, {
 35 | 		colors,
 36 | 	})
 37 | 
 38 | 	cells = await screen.findAllByTestId('__palette-cell__')
 39 | 	waitFor(() => expect(cells).toHaveLength(3))
 40 | })
 41 | 
 42 | test('Triggers select with color', async () => {
 43 | 	let cells,
 44 | 		cell = null
 45 | 	const onSelect = vi.fn(() => 0)
 46 | 	const colors = ['#ff0', '#0ff', '#f0f']
 47 | 
 48 | 	const { component, user } = setup(Palette, {
 49 | 		colors,
 50 | 	})
 51 | 
 52 | 	component.$on('select', onSelect)
 53 | 
 54 | 	cells = await screen.findAllByTestId('__palette-cell__')
 55 | 	cell = cells[0]
 56 | 	await user.click(cell.firstChild)
 57 | 
 58 | 	expect(onSelect).toHaveBeenCalledWith(new CustomEvent({ detail: { color: colors[0] } }))
 59 | })
 60 | 
 61 | test('Deletes slots if deletionMode is set to "tooltip"', async () => {
 62 | 	let cells,
 63 | 		cell,
 64 | 		trash = null
 65 | 	const colors = ['#ff0', '#0ff', '#f0f']
 66 | 
 67 | 	const { user } = setup(Palette, {
 68 | 		colors,
 69 | 		deletionMode: TOOLTIP,
 70 | 	})
 71 | 
 72 | 	cells = await screen.findAllByTestId('__palette-cell__')
 73 | 	cell = cells[0]
 74 | 
 75 | 	await user.hover(cell)
 76 | 
 77 | 	trash = await screen.findByTestId('__trash-icon__')
 78 | 	expect(trash).toBeInTheDocument()
 79 | 
 80 | 	await user.click(trash)
 81 | 
 82 | 	expect(cell).not.toBeInTheDocument()
 83 | })
 84 | 
 85 | test('Deletes slot if deletionMode is set to "drop"', async () => {
 86 | 	let cells,
 87 | 		cell = null
 88 | 	const colors = ['#ff0', '#0ff', '#f0f']
 89 | 
 90 | 	const { user } = setup(Palette, {
 91 | 		accessors: true,
 92 | 		props: {
 93 | 			colors,
 94 | 			deletionMode: DROP,
 95 | 		},
 96 | 	})
 97 | 
 98 | 	cells = await screen.findAllByTestId('__palette-cell__')
 99 | 
100 | 	cell = cells[0]
101 | 
102 | 	await user.pointer({ keys: '[MouseLeft>]', target: cell })
103 | 
104 | 	const drag = document.querySelector('#drag')
105 | 	drag.getBoundingClientRect = () => ({
106 | 		width: 20,
107 | 		height: 20,
108 | 		top: 2000,
109 | 		left: 2000,
110 | 		right: 2020,
111 | 		bottom: 2020,
112 | 	})
113 | 	await user.pointer('[/MouseLeft]')
114 | 
115 | 	expect(cell).not.toBeInTheDocument()
116 | })
117 | 
118 | test('Displays transparent slot if showTransparentSlot is truthy', async () => {
119 | 	let cells,
120 | 		cell = null
121 | 	const onSelect = vi.fn(() => 0)
122 | 	const colors = ['#ff0', '#0ff', '#f0f']
123 | 
124 | 	const { component, user } = setup(Palette, {
125 | 		colors,
126 | 		showTransparentSlot: true,
127 | 	})
128 | 
129 | 	component.$on('select', onSelect)
130 | 	cells = await screen.findAllByTestId('__palette-cell__')
131 | 	expect(cells).toHaveLength(colors.length + 1)
132 | 
133 | 	cell = cells[0]
134 | 	await user.click(cell.firstChild)
135 | 
136 | 	expect(onSelect).toHaveBeenCalledWith(new CustomEvent({ detail: { color: null } }))
137 | })
138 | 
139 | test.each([
140 | 	[['#ff0', '#0ff', '#f0f'], 99, 4],
141 | 	[['#ff0', '#0ff', '#f0f'], -1, 4],
142 | 	[['#ff0', '#0ff', '#f0f'], 3, 3],
143 | 	[['#ff0', '#0ff', '#f0f'], 1, 1],
144 | ])('Adds or replaces color regarding maxColors value', async (colors, maxColors, expected) => {
145 | 	let input,
146 | 		submit,
147 | 		slots = null
148 | 	const newColor = '0f0'
149 | 	const onSelect = vi.fn(() => 0)
150 | 
151 | 	const { component, user } = setup(Palette, {
152 | 		colors,
153 | 		maxColors,
154 | 		showInput: true,
155 | 	})
156 | 
157 | 	component.$on('select', onSelect)
158 | 
159 | 	input = await screen.findByTestId('__palette-input-input__')
160 | 	await user.type(input, newColor)
161 | 
162 | 	submit = await screen.findByTestId('__palette-input-submit__')
163 | 	await user.click(submit)
164 | 
165 | 	slots = await screen.findAllByTestId('__palette-slot__')
166 | 	expect(slots).toHaveLength(expected)
167 | 
168 | 	await user.click(slots[slots.length - 1])
169 | 
170 | 	expect(onSelect).toHaveBeenCalledWith(new CustomEvent({ detail: { color: '#000' } }))
171 | })
172 | 
173 | test.each([
174 | 	[['#ff0', '#0ff', '#f0f'], false, 3],
175 | 	[['#ff0', '#0ff', '#f0f', '#f0f'], false, 3],
176 | 	[['#ff0', '#0ff', '#f0f'], true, 4],
177 | ])('Adds or not color regarding allowDuplicates value', async (colors, allowDuplicates, expected) => {
178 | 	let input,
179 | 		submit,
180 | 		slots = null
181 | 	const newColor = 'f0f'
182 | 	const onSelect = vi.fn(() => 0)
183 | 
184 | 	const { component, user } = setup(Palette, {
185 | 		colors,
186 | 		allowDuplicates,
187 | 		showInput: true,
188 | 	})
189 | 	component.$on('select', onSelect)
190 | 
191 | 	input = await screen.findByTestId('__palette-input-input__')
192 | 	await user.type(input, newColor)
193 | 
194 | 	submit = await screen.findByTestId('__palette-input-submit__')
195 | 	await user.click(submit)
196 | 
197 | 	slots = await screen.findAllByTestId('__palette-slot__')
198 | 	expect(slots).toHaveLength(expected)
199 | 
200 | 	await user.click(slots[slots.length - 1])
201 | 
202 | 	expect(onSelect).toHaveBeenCalledWith(new CustomEvent({ detail: { color: '#f0f' } }))
203 | })
204 | 
205 | test('Removes duplicates when updating allowDuplicates value', async () => {
206 | 	let slots = null
207 | 	const colors = ['#ff0', '#0ff', '#f0f', '#f0f', '#f0f']
208 | 
209 | 	const { rerender } = setup(Palette, {
210 | 		colors,
211 | 		allowDuplicates: true,
212 | 	})
213 | 
214 | 	slots = await screen.findAllByTestId('__palette-slot__')
215 | 	expect(slots).toHaveLength(colors.length)
216 | 
217 | 	rerender({
218 | 		colors,
219 | 		allowDuplicates: false,
220 | 	})
221 | 
222 | 	await standby(1000)
223 | 
224 | 	slots = await screen.findAllByTestId('__palette-slot__')
225 | 	expect(slots).toHaveLength(3)
226 | })
227 | 


--------------------------------------------------------------------------------
/src/lib/components/__tests__/PaletteCompactToggleButton.test.js:
--------------------------------------------------------------------------------
 1 | import { afterEach, expect, test, vi } from 'vitest'
 2 | import { cleanup, render, screen } from '@testing-library/svelte'
 3 | import userEvent from '@testing-library/user-event'
 4 | 
 5 | import PaletteCompactToggleButton from '../PaletteCompactToggleButton.svelte'
 6 | 
 7 | const setup = (component, options) => {
 8 | 	return {
 9 | 		user: userEvent.setup(),
10 | 		...render(component, options),
11 | 	}
12 | }
13 | 
14 | afterEach(() => cleanup())
15 | 
16 | test('Displays enlarge icon', () => {
17 | 	const isCompact = false
18 | 	setup(PaletteCompactToggleButton, { isCompact })
19 | 	const button = screen.getByTestId('__compact-icon__')
20 | 	expect(button).toBeInTheDocument()
21 | })
22 | 
23 | test('Displays compact icon', () => {
24 | 	const isCompact = true
25 | 	setup(PaletteCompactToggleButton, { isCompact })
26 | 	const button = screen.getByTestId('__enlarge-icon__')
27 | 	expect(button).toBeInTheDocument()
28 | })
29 | 
30 | test('Sets aria-label', () => {
31 | 	const ariaLabel = 'Foo'
32 | 	setup(PaletteCompactToggleButton, { ['aria-label']: ariaLabel })
33 | 	const button = screen.getByLabelText(ariaLabel)
34 | 	expect(button).toBeInTheDocument()
35 | })
36 | 
37 | test('Triggers click event with current state', async () => {
38 | 	const onClick = vi.fn(() => 0)
39 | 	const { component, user } = setup(PaletteCompactToggleButton)
40 | 	component.$on('click', onClick)
41 | 	const button = screen.getByTestId('__palette-compact-toggle-button__')
42 | 	await user.click(button)
43 | 	expect(onClick).toHaveBeenCalledWith(new CustomEvent({ detail: { isCompact: true } }))
44 | })
45 | 


--------------------------------------------------------------------------------
/src/lib/components/__tests__/PaletteEyeDropperButton.test.js:
--------------------------------------------------------------------------------
 1 | import { afterEach, expect, test, vi } from 'vitest'
 2 | import { cleanup, render, screen, waitFor } from '@testing-library/svelte'
 3 | import userEvent from '@testing-library/user-event'
 4 | 
 5 | import PaletteEyeDropperButton from '../PaletteEyeDropperButton.svelte'
 6 | 
 7 | const setup = (component, options) => {
 8 | 	return {
 9 | 		user: userEvent.setup(),
10 | 		...render(component, options),
11 | 	}
12 | }
13 | 
14 | afterEach(() => cleanup())
15 | 
16 | window.EyeDropper = function () {
17 | 	this.open = () => Promise.resolve({ sRGBHex: '#ff0' })
18 | }
19 | 
20 | test('Renders eye dropper button', async () => {
21 | 	setup(PaletteEyeDropperButton)
22 | 	const button = await screen.findByTestId('__palette-eyedropper-button__')
23 | 	expect(button).toBeInTheDocument()
24 | })
25 | 
26 | test('Sets eye dropper button aria-label', () => {
27 | 	const ariaLabel = 'Foo'
28 | 	setup(PaletteEyeDropperButton, { ['aria-label']: ariaLabel })
29 | 	const button = screen.getByLabelText(ariaLabel)
30 | 	expect(button).toBeInTheDocument()
31 | })
32 | 
33 | test('Retrieves color from EyeDropper selection', async () => {
34 | 	const onAdd = vi.fn()
35 | 	const { component, user } = setup(PaletteEyeDropperButton)
36 | 	const button = screen.getByTestId('__palette-eyedropper-button__')
37 | 	component.$on('add', onAdd)
38 | 	await user.click(button)
39 | 	await waitFor(() => expect(onAdd).toHaveBeenCalledWith(new CustomEvent({ detail: { color: '#ff0' } })))
40 | })
41 | 
42 | // EyeDropper API is invalid
43 | test('Throws error', async () => {
44 | 	window.EyeDropper = function () {
45 | 		this.open = () => {
46 | 			throw new Error('Error')
47 | 		}
48 | 	}
49 | 
50 | 	const onError = vi.fn(() => 0)
51 | 	const ariaLabel = 'Foo'
52 | 	const { component, user } = setup(PaletteEyeDropperButton, { ['aria-label']: ariaLabel })
53 | 	const button = screen.getByLabelText(ariaLabel)
54 | 	component.$on('error', onError)
55 | 	await user.click(button)
56 | 	await waitFor(() => expect(onError).toHaveBeenCalled())
57 | })
58 | 
59 | // EyeDropper API is not available
60 | test('Renders nothing', async () => {
61 | 	window.EyeDropper = null
62 | 	setup(PaletteEyeDropperButton)
63 | 	try {
64 | 		await screen.findByTestId('__palette-eyedropper-button__')
65 | 	} catch (e) {
66 | 		expect(e).not.toBeUndefined()
67 | 	}
68 | })
69 | 


--------------------------------------------------------------------------------
/src/lib/components/__tests__/PaletteIconButton.test.js:
--------------------------------------------------------------------------------
 1 | import { afterEach, expect, test, vi } from 'vitest'
 2 | import { cleanup, render, screen } from '@testing-library/svelte'
 3 | import userEvent from '@testing-library/user-event'
 4 | 
 5 | import { COMPACT } from '../../enums/PaletteIcon'
 6 | 
 7 | import PaletteIconButton from '../PaletteIconButton.svelte'
 8 | 
 9 | const setup = (component, options) => {
10 | 	return {
11 | 		user: userEvent.setup(),
12 | 		...render(component, options),
13 | 	}
14 | }
15 | 
16 | afterEach(() => cleanup())
17 | 
18 | test('Renders nothing', () => {
19 | 	setup(PaletteIconButton)
20 | 	const button = screen.getByTestId('__palette-icon-button__')
21 | 	expect(button).toBeEmptyDOMElement()
22 | })
23 | 
24 | test('Displays icon', () => {
25 | 	setup(PaletteIconButton, { icon: COMPACT })
26 | 	const button = screen.getByTestId('__palette-icon-button__')
27 | 	expect(button).not.toBeEmptyDOMElement()
28 | })
29 | 
30 | test('Triggers click event', async () => {
31 | 	const onClick = vi.fn(() => 0)
32 | 	const { component, user } = setup(PaletteIconButton, { icon: COMPACT })
33 | 	component.$on('click', onClick)
34 | 	const button = screen.getByTestId('__palette-icon-button__')
35 | 	await user.click(button)
36 | 	expect(onClick).toHaveBeenCalled()
37 | })
38 | 


--------------------------------------------------------------------------------
/src/lib/components/__tests__/PaletteInput.test.js:
--------------------------------------------------------------------------------
 1 | import { afterEach, expect, test, vi } from 'vitest'
 2 | import { cleanup, render, screen, waitFor } from '@testing-library/svelte'
 3 | import userEvent from '@testing-library/user-event'
 4 | 
 5 | import PaletteInput from '../PaletteInput.svelte'
 6 | 
 7 | const setup = (component, options) => {
 8 | 	return {
 9 | 		user: userEvent.setup(),
10 | 		...render(component, options),
11 | 	}
12 | }
13 | 
14 | afterEach(() => cleanup())
15 | 
16 | test('Enables submit button when input color is valid', async () => {
17 | 	const { user } = setup(PaletteInput)
18 | 	const input = screen.getByTestId('__palette-input-input__')
19 | 	const button = screen.getByRole('button')
20 | 	expect(button).toBeDisabled()
21 | 	await user.type(input, 'ff')
22 | 	expect(button).toBeDisabled()
23 | 	await user.type(input, 'ff0')
24 | 	waitFor(() => expect(button).toBeEnabled())
25 | })
26 | 
27 | test('Enables submit button when set color is valid', async () => {
28 | 	setup(PaletteInput, {
29 | 		color: '#ff0',
30 | 	})
31 | 	const button = screen.getByTestId('__palette-input-submit__')
32 | 	expect(button).toBeEnabled()
33 | })
34 | 
35 | test('Disables submit button when set color is invalid', async () => {
36 | 	setup(PaletteInput, {
37 | 		color: 'ff',
38 | 	})
39 | 	const button = screen.getByTestId('__palette-input-submit__')
40 | 	expect(button).toBeDisabled()
41 | })
42 | 
43 | test('Triggers submit with color when clicking add button', async () => {
44 | 	const onAdd = vi.fn(() => 0)
45 | 	const { component, user } = setup(PaletteInput)
46 | 	const input = screen.getByTestId('__palette-input-input__')
47 | 	const button = screen.getByTestId('__palette-input-submit__')
48 | 	component.$on('add', onAdd)
49 | 	await user.type(input, 'ff0')
50 | 	await user.click(button)
51 | 	expect(onAdd).toHaveBeenCalledWith(new CustomEvent({ detail: { color: '#ff0' } }))
52 | })
53 | 
54 | test('Triggers submit with color when pressing Enter', async () => {
55 | 	const onAdd = vi.fn(() => 0)
56 | 	const { component, user } = setup(PaletteInput)
57 | 	const input = screen.getByTestId('__palette-input-input__')
58 | 	component.$on('add', onAdd)
59 | 	await user.type(input, 'ff0')
60 | 	await user.keyboard('[Enter]')
61 | 	expect(onAdd).toHaveBeenCalledWith(new CustomEvent({ detail: { color: '#ff0' } }))
62 | })
63 | 
64 | test('Does not display slot if inputType is "color"', async () => {
65 | 	setup(PaletteInput, {
66 | 		color: 'ff',
67 | 		inputType: 'color',
68 | 	})
69 | 	const button = screen.queryByTestId('__palette-input-slot__')
70 | 	expect(button).not.toBeInTheDocument()
71 | })
72 | 
73 | test('Does not display EyeDropper button if API is not available', async () => {
74 | 	window.EyeDropper = undefined
75 | 	setup(PaletteInput, {
76 | 		color: 'ff',
77 | 		inputType: 'foo',
78 | 	})
79 | 	const button = screen.queryByTestId('__palette-eyedropper-button__')
80 | 	expect(button).not.toBeInTheDocument()
81 | })
82 | 


--------------------------------------------------------------------------------
/src/lib/components/__tests__/PaletteSlot.test.js:
--------------------------------------------------------------------------------
 1 | import { afterEach, expect, test, vi } from 'vitest'
 2 | import { cleanup, render, screen } from '@testing-library/svelte'
 3 | import userEvent from '@testing-library/user-event'
 4 | 
 5 | import { SELECT } from '../../enums/PaletteEvent.js'
 6 | 
 7 | import PaletteSlot from '../PaletteSlot.svelte'
 8 | 
 9 | const setup = (component, options) => {
10 | 	return {
11 | 		user: userEvent.setup(),
12 | 		...render(component, options),
13 | 	}
14 | }
15 | 
16 | afterEach(() => cleanup())
17 | 
18 | test('Sets color as aria-label if color is set', () => {
19 | 	const color = '#ff0'
20 | 	setup(PaletteSlot, { color })
21 | 	const slot = screen.getByLabelText(color)
22 | 	expect(slot).toBeInTheDocument()
23 | })
24 | 
25 | test('Sets empty aria-label if color is not set', () => {
26 | 	setup(PaletteSlot, { ['aria-label']: 'foo' })
27 | 	const slot = screen.getByLabelText('foo')
28 | 	expect(slot).toBeInTheDocument()
29 | })
30 | 
31 | test('Triggers click event', async () => {
32 | 	const color = '#ff0'
33 | 	const onClick = vi.fn(() => 0)
34 | 	const { component, user } = setup(PaletteSlot, { color })
35 | 	component.$on(SELECT, onClick)
36 | 	const slot = screen.getByTestId('__palette-slot__')
37 | 	await user.click(slot)
38 | 	expect(onClick).toHaveBeenCalledWith(new CustomEvent({ detail: { color } }))
39 | })
40 | 
41 | test('Attaches empty class if color is not set', () => {
42 | 	setup(PaletteSlot)
43 | 	const slot = screen.getByTestId('__palette-slot__')
44 | 	expect(slot).toHaveClass('empty')
45 | })
46 | 
47 | test('Does not attach empty class if color is set', () => {
48 | 	const color = '#ff0'
49 | 	setup(PaletteSlot, { color })
50 | 	const slot = screen.getByTestId('__palette-slot__')
51 | 	expect(slot).not.toHaveClass('empty')
52 | })
53 | 
54 | test('Attaches clickable class if slot is enabled', () => {
55 | 	const color = '#ff0'
56 | 	setup(PaletteSlot, { color })
57 | 	const slot = screen.getByTestId('__palette-slot__')
58 | 	expect(slot).toHaveClass('clickable')
59 | })
60 | 
61 | test('Does not attach clickable class if slot is disabled', () => {
62 | 	const color = '#ff0'
63 | 	setup(PaletteSlot, { color, disabled: true })
64 | 	const slot = screen.getByTestId('__palette-slot__')
65 | 	expect(slot).not.toHaveClass('clickable')
66 | })
67 | 
68 | test('Disables slot', () => {
69 | 	const color = '#ff0'
70 | 	setup(PaletteSlot, { color, disabled: true })
71 | 	const slot = screen.getByTestId('__palette-slot__')
72 | 	expect(slot).toBeDisabled()
73 | })
74 | 
75 | test('Selects slot', () => {
76 | 	const color = '#ff0'
77 | 	setup(PaletteSlot, { color, selected: true })
78 | 	const slot = screen.getByTestId('__palette-slot__')
79 | 	expect(slot).toHaveClass('selected')
80 | })
81 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/CompactIcon.svelte:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-testid="__compact-icon__"
 2 | 	><rect width="256" height="256" fill="none" /><polyline
 3 | 		points="144 64 144 112 192 112"
 4 | 		fill="none"
 5 | 		stroke="currentColor"
 6 | 		stroke-linecap="round"
 7 | 		stroke-linejoin="round"
 8 | 		stroke-width="16"
 9 | 	/><line
10 | 		x1="208"
11 | 		y1="48"
12 | 		x2="144"
13 | 		y2="112"
14 | 		fill="none"
15 | 		stroke="currentColor"
16 | 		stroke-linecap="round"
17 | 		stroke-linejoin="round"
18 | 		stroke-width="16"
19 | 	/><polyline
20 | 		points="64 144 112 144 112 192"
21 | 		fill="none"
22 | 		stroke="currentColor"
23 | 		stroke-linecap="round"
24 | 		stroke-linejoin="round"
25 | 		stroke-width="16"
26 | 	/><line
27 | 		x1="48"
28 | 		y1="208"
29 | 		x2="112"
30 | 		y2="144"
31 | 		fill="none"
32 | 		stroke="currentColor"
33 | 		stroke-linecap="round"
34 | 		stroke-linejoin="round"
35 | 		stroke-width="16"
36 | 	/></svg
37 | >
38 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/EnlargeIcon.svelte:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-testid="__enlarge-icon__"
 2 | 	><rect width="256" height="256" fill="none" /><polyline
 3 | 		points="160 48 208 48 208 96"
 4 | 		fill="none"
 5 | 		stroke="currentColor"
 6 | 		stroke-linecap="round"
 7 | 		stroke-linejoin="round"
 8 | 		stroke-width="16"
 9 | 	/><line
10 | 		x1="144"
11 | 		y1="112"
12 | 		x2="208"
13 | 		y2="48"
14 | 		fill="none"
15 | 		stroke="currentColor"
16 | 		stroke-linecap="round"
17 | 		stroke-linejoin="round"
18 | 		stroke-width="16"
19 | 	/><polyline
20 | 		points="96 208 48 208 48 160"
21 | 		fill="none"
22 | 		stroke="currentColor"
23 | 		stroke-linecap="round"
24 | 		stroke-linejoin="round"
25 | 		stroke-width="16"
26 | 	/><line
27 | 		x1="112"
28 | 		y1="144"
29 | 		x2="48"
30 | 		y2="208"
31 | 		fill="none"
32 | 		stroke="currentColor"
33 | 		stroke-linecap="round"
34 | 		stroke-linejoin="round"
35 | 		stroke-width="16"
36 | 	/></svg
37 | >
38 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/EyeDropperIcon.svelte:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-testid="__eyedropper-icon__"
 2 | 	><rect width="256" height="256" fill="none" /><path
 3 | 		d="M182.43,113.17l4.88,4.89a16,16,0,0,1,0,22.63l-9,9a8,8,0,0,1-11.31,0L106.34,89a8,8,0,0,1,0-11.31l9-9a16,16,0,0,1,22.63,0l4.89,4.88,25-25.1c10.79-10.79,28.37-11.45,39.44-1a28,28,0,0,1,.57,40.15Z"
 4 | 		fill="none"
 5 | 		stroke="currentColor"
 6 | 		stroke-linecap="round"
 7 | 		stroke-linejoin="round"
 8 | 		stroke-width="16"
 9 | 	/><path
10 | 		d="M159.31,141.94l-56.68,56.69a32,32,0,0,1-32.06,8h0l-20,8.74a8,8,0,0,1-8.86-1.67h0a5.74,5.74,0,0,1-1.2-6.36l9.19-21.06h0a32,32,0,0,1,7.7-32.87l56.69-56.68"
11 | 		fill="none"
12 | 		stroke="currentColor"
13 | 		stroke-linecap="round"
14 | 		stroke-linejoin="round"
15 | 		stroke-width="16"
16 | 	/></svg
17 | >
18 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/PlusIcon.svelte:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-testid="__plus-icon__"
 2 | 	><rect width="256" height="256" fill="none" /><line
 3 | 		x1="40"
 4 | 		y1="128"
 5 | 		x2="216"
 6 | 		y2="128"
 7 | 		fill="none"
 8 | 		stroke="currentColor"
 9 | 		stroke-linecap="round"
10 | 		stroke-linejoin="round"
11 | 		stroke-width="16"
12 | 	/><line
13 | 		x1="128"
14 | 		y1="40"
15 | 		x2="128"
16 | 		y2="216"
17 | 		fill="none"
18 | 		stroke="currentColor"
19 | 		stroke-linecap="round"
20 | 		stroke-linejoin="round"
21 | 		stroke-width="16"
22 | 	/></svg
23 | >
24 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/SettingsIcon.svelte:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-testid="__settings-icon__"
 2 | 	><rect width="256" height="256" fill="none" /><circle
 3 | 		cx="128"
 4 | 		cy="128"
 5 | 		r="40"
 6 | 		fill="none"
 7 | 		stroke="currentColor"
 8 | 		stroke-linecap="round"
 9 | 		stroke-linejoin="round"
10 | 		stroke-width="16"
11 | 	/><path
12 | 		d="M41.43,178.09A99.14,99.14,0,0,1,31.36,153.8l16.78-21a81.59,81.59,0,0,1,0-9.64l-16.77-21a99.43,99.43,0,0,1,10.05-24.3l26.71-3a81,81,0,0,1,6.81-6.81l3-26.7A99.14,99.14,0,0,1,102.2,31.36l21,16.78a81.59,81.59,0,0,1,9.64,0l21-16.77a99.43,99.43,0,0,1,24.3,10.05l3,26.71a81,81,0,0,1,6.81,6.81l26.7,3a99.14,99.14,0,0,1,10.07,24.29l-16.78,21a81.59,81.59,0,0,1,0,9.64l16.77,21a99.43,99.43,0,0,1-10,24.3l-26.71,3a81,81,0,0,1-6.81,6.81l-3,26.7a99.14,99.14,0,0,1-24.29,10.07l-21-16.78a81.59,81.59,0,0,1-9.64,0l-21,16.77a99.43,99.43,0,0,1-24.3-10l-3-26.71a81,81,0,0,1-6.81-6.81Z"
13 | 		fill="none"
14 | 		stroke="currentColor"
15 | 		stroke-linecap="round"
16 | 		stroke-linejoin="round"
17 | 		stroke-width="16"
18 | 	/></svg
19 | >
20 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/TrashIcon.svelte:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-testid="__trash-icon__"
 2 | 	><rect width="256" height="256" fill="none" /><line
 3 | 		x1="216"
 4 | 		y1="56"
 5 | 		x2="40"
 6 | 		y2="56"
 7 | 		fill="none"
 8 | 		stroke="currentColor"
 9 | 		stroke-linecap="round"
10 | 		stroke-linejoin="round"
11 | 		stroke-width="16"
12 | 	/><line
13 | 		x1="104"
14 | 		y1="104"
15 | 		x2="104"
16 | 		y2="168"
17 | 		fill="none"
18 | 		stroke="currentColor"
19 | 		stroke-linecap="round"
20 | 		stroke-linejoin="round"
21 | 		stroke-width="16"
22 | 	/><line
23 | 		x1="152"
24 | 		y1="104"
25 | 		x2="152"
26 | 		y2="168"
27 | 		fill="none"
28 | 		stroke="currentColor"
29 | 		stroke-linecap="round"
30 | 		stroke-linejoin="round"
31 | 		stroke-width="16"
32 | 	/><path
33 | 		d="M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56"
34 | 		fill="none"
35 | 		stroke="currentColor"
36 | 		stroke-linecap="round"
37 | 		stroke-linejoin="round"
38 | 		stroke-width="16"
39 | 	/><path
40 | 		d="M168,56V40a16,16,0,0,0-16-16H104A16,16,0,0,0,88,40V56"
41 | 		fill="none"
42 | 		stroke="currentColor"
43 | 		stroke-linecap="round"
44 | 		stroke-linejoin="round"
45 | 		stroke-width="16"
46 | 	/></svg
47 | >
48 | 


--------------------------------------------------------------------------------
/src/lib/components/useDeletion.js:
--------------------------------------------------------------------------------
 1 | import { useTooltip } from '@untemps/svelte-use-tooltip'
 2 | import { useDropOutside } from '@untemps/svelte-use-drop-outside'
 3 | 
 4 | import { TOOLTIP, DROP } from '../enums/PaletteDeletionMode'
 5 | 
 6 | const createAction = (node, deletionMode, options) => {
 7 | 	switch (deletionMode) {
 8 | 		case TOOLTIP: {
 9 | 			return useTooltip(node, {
10 | 				contentSelector: options.tooltipContentSelector || '#tooltip-template',
11 | 				contentActions: {
12 | 					'*': {
13 | 						eventType: 'click',
14 | 						callback: options.onDelete,
15 | 						closeOnCallback: true,
16 | 					},
17 | 				},
18 | 				containerClassName: options.tooltipClassName,
19 | 			})
20 | 		}
21 | 		case DROP: {
22 | 			return useDropOutside(node, {
23 | 				areaSelector: '.palette',
24 | 				animate: true,
25 | 				onDropOutside: options.onDelete,
26 | 			})
27 | 		}
28 | 		default:
29 | 			return null
30 | 	}
31 | }
32 | 
33 | const useDeletion = (node, { deletionMode, ...options }) => {
34 | 	let mode = deletionMode
35 | 	let action = createAction(node, deletionMode, options)
36 | 
37 | 	return {
38 | 		update: ({ deletionMode: newDeletionMode, ...newOptions }) => {
39 | 			mode = newDeletionMode
40 | 			action?.destroy()
41 | 			action = createAction(node, newDeletionMode || deletionMode, { ...options, ...newOptions })
42 | 		},
43 | 		destroy: () => action?.destroy(),
44 | 	}
45 | }
46 | 
47 | export default useDeletion
48 | 


--------------------------------------------------------------------------------
/src/lib/enums/PaletteDeletionMode.js:
--------------------------------------------------------------------------------
1 | export const NONE = 'none'
2 | export const TOOLTIP = 'tooltip'
3 | export const DROP = 'drop'
4 | 


--------------------------------------------------------------------------------
/src/lib/enums/PaletteEvent.js:
--------------------------------------------------------------------------------
1 | export const ADD = 'add'
2 | export const CLOSE = 'close'
3 | export const ERROR = 'error'
4 | export const SELECT = 'select'
5 | export const SUBMIT = 'submit'
6 | 


--------------------------------------------------------------------------------
/src/lib/enums/PaletteIcon.js:
--------------------------------------------------------------------------------
1 | export const COMPACT = 'compact'
2 | export const ENLARGE = 'enlarge'
3 | export const EYE_DROPPER = 'eyeDropper'
4 | export const PLUS = 'plus'
5 | export const SETTINGS = 'settings'
6 | export const TRASH = 'trash'
7 | 


--------------------------------------------------------------------------------
/src/lib/enums/PaletteTool.js:
--------------------------------------------------------------------------------
1 | export const SETTINGS = 'settings'
2 | export const COMPACT = 'compact'
3 | 


--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
 1 | export { default as Palette } from './components/Palette.svelte'
 2 | export { default as PaletteSlot } from './components/PaletteSlot.svelte'
 3 | export { default as PaletteInput } from './components/PaletteInput.svelte'
 4 | export { default as PaletteEyeDropperButton } from './components/PaletteEyeDropperButton.svelte'
 5 | export { default as PaletteTrashButton } from './components/PaletteTrashButton.svelte'
 6 | export { default as PaletteCompactToggleButton } from './components/PaletteCompactToggleButton.svelte'
 7 | export { default as PaletteIconButton } from './components/PaletteIconButton.svelte'
 8 | export { default as PaletteLoader } from './components/PaletteLoader.svelte'
 9 | export { default as PaletteSettingsButton } from './components/PaletteSettingsButton.svelte'
10 | export { default as PaletteSettingsPanel } from './components/PaletteSettingsPanel.svelte'
11 | export { default as PaletteTools } from './components/PaletteTools.svelte'
12 | export { NONE, TOOLTIP, DROP } from './enums/PaletteDeletionMode.js'
13 | export { ADD, CLOSE, ERROR, SELECT, SUBMIT } from './enums/PaletteEvent'
14 | export { COMPACT, SETTINGS } from './enums/PaletteTool'
15 | 


--------------------------------------------------------------------------------
/src/lib/utils/__tests__/utils.test.js:
--------------------------------------------------------------------------------
  1 | import { describe, expect, test } from 'vitest'
  2 | 
  3 | import { calculateColors, calculateNumColumns, isColorValid, transformColors } from '../utils.js'
  4 | 
  5 | describe('utils', () => {
  6 | 	describe('transformColors', () => {
  7 | 		const colorStrings = ['#123456', '#345612', '#456123']
  8 | 		const colorsObjects = [
  9 | 			{
 10 | 				name: 'Foo',
 11 | 				value: '#123456',
 12 | 			},
 13 | 			{
 14 | 				name: 'Bar',
 15 | 				value: '#345612',
 16 | 			},
 17 | 			{
 18 | 				name: 'Gag',
 19 | 				value: '#456123',
 20 | 			},
 21 | 		]
 22 | 
 23 | 		test.each([
 24 | 			[
 25 | 				colorStrings,
 26 | 				[
 27 | 					{
 28 | 						value: '#123456',
 29 | 					},
 30 | 					{
 31 | 						value: '#345612',
 32 | 					},
 33 | 					{
 34 | 						value: '#456123',
 35 | 					},
 36 | 				],
 37 | 			],
 38 | 			[colorsObjects, colorsObjects],
 39 | 			[
 40 | 				[
 41 | 					'#123456',
 42 | 					{
 43 | 						name: 'Bar',
 44 | 						value: '#345612',
 45 | 					},
 46 | 					{
 47 | 						value: '#456123',
 48 | 					},
 49 | 				],
 50 | 				[
 51 | 					{
 52 | 						value: '#123456',
 53 | 					},
 54 | 					{
 55 | 						name: 'Bar',
 56 | 						value: '#345612',
 57 | 					},
 58 | 					{
 59 | 						value: '#456123',
 60 | 					},
 61 | 				],
 62 | 			],
 63 | 		])('colors:%j, expected: %j', (colors, expected) => {
 64 | 			expect(transformColors(colors)).toEqual(expected)
 65 | 		})
 66 | 	})
 67 | 
 68 | 	describe('calculateColors', () => {
 69 | 		const colors = ['#123456', '#345612', '#456123', '#245136', '#425136']
 70 | 		const params = {
 71 | 			isCompact: false,
 72 | 			compactColorIndices: [],
 73 | 			allowDuplicates: true,
 74 | 			maxColors: 5,
 75 | 		}
 76 | 		const colorsObjects = [
 77 | 			{
 78 | 				value: colors[0],
 79 | 			},
 80 | 			{
 81 | 				value: colors[1],
 82 | 			},
 83 | 			{
 84 | 				value: colors[2],
 85 | 			},
 86 | 			{
 87 | 				value: colors[3],
 88 | 			},
 89 | 			{
 90 | 				value: colors[4],
 91 | 			},
 92 | 		]
 93 | 
 94 | 		test.each([
 95 | 			[colors, params, colorsObjects],
 96 | 			[colors, { ...params, isCompact: true }, []],
 97 | 			[colors, { ...params, isCompact: false, compactColorIndices: [0, 4] }, colorsObjects],
 98 | 			[
 99 | 				colors,
100 | 				{ ...params, isCompact: true, compactColorIndices: [0, 4] },
101 | 				[{ value: colors[0] }, { value: colors[4] }],
102 | 			],
103 | 			[colors, { ...params, isCompact: true, compactColorIndices: null }, []],
104 | 			[colors, { ...params, allowDuplicates: false }, colorsObjects],
105 | 			[[1, 1, 1], { ...params, allowDuplicates: false }, [{ value: 1 }]],
106 | 			[[1, 1, 1], { ...params, allowDuplicates: true }, [{ value: 1 }, { value: 1 }, { value: 1 }]],
107 | 			[colors, { ...params, maxColors: 8 }, colorsObjects],
108 | 			[colors, { ...params, maxColors: 3 }, colorsObjects.slice(0, 3)],
109 | 			[[1, 1, 1], { ...params, allowDuplicates: false, maxColors: 2 }, [{ value: 1 }]],
110 | 			[[1, 1, 1], { ...params, allowDuplicates: true, maxColors: 2 }, [{ value: 1 }, { value: 1 }]],
111 | 			[[1, 1, 1], null, [{ value: 1 }, { value: 1 }, { value: 1 }]],
112 | 			[null, params, []],
113 | 			[null, null, []],
114 | 			[[], params, []],
115 | 			['[]', params, []],
116 | 			[1, params, []],
117 | 		])('colors:%j, params:%j, expected: %j', (colors, params, expected) => {
118 | 			expect(calculateColors(colors, params)).toEqual(expected)
119 | 		})
120 | 	})
121 | 
122 | 	describe('calculateNumColumns', () => {
123 | 		const colorLength = 25
124 | 		const params = {
125 | 			isCompact: false,
126 | 			compactColorIndices: [],
127 | 			showTransparentSlot: false,
128 | 			numColumns: 5,
129 | 		}
130 | 
131 | 		test.each([
132 | 			[colorLength, params, , params.numColumns],
133 | 			[colorLength, { ...params, numColumns: 30 }, , 30],
134 | 			[colorLength, { ...params, numColumns: 0 }, , colorLength],
135 | 			[colorLength, { ...params, showTransparentSlot: true }, , params.numColumns],
136 | 			[colorLength, { ...params, numColumns: 30, showTransparentSlot: true }, , 30],
137 | 			[colorLength, { ...params, numColumns: 0, showTransparentSlot: true }, , colorLength + 1],
138 | 			[colorLength, { ...params, numColumns: colorLength, showTransparentSlot: true }, , colorLength],
139 | 			[colorLength, { ...params, isCompact: true }, , 0],
140 | 			[colorLength, { ...params, isCompact: true, compactColorIndices: [0, 1] }, , 2],
141 | 			[colorLength, { ...params, isCompact: true, compactColorIndices: [0, 1], showTransparentSlot: true }, , 3],
142 | 			[0, params, , params.numColumns],
143 | 			[0, params, { minNumColumns: 10 }, params.numColumns],
144 | 			[0, { ...params, showTransparentSlot: true }, , params.numColumns],
145 | 			[0, { ...params, numColumns: 0, showTransparentSlot: true }, { minNumColumns: 10 }, 10],
146 | 			[colorLength, null, , 1],
147 | 			[-1, null, , 1],
148 | 			[colorLength, { ...params, numColumns: -1 }, , colorLength],
149 | 		])('colorLength:%j, params:%j, options:%j, expected:%j', (colorLength, params, options, expected) => {
150 | 			expect(calculateNumColumns(colorLength, params, options)).toBe(expected)
151 | 		})
152 | 	})
153 | 
154 | 	describe('isColorValid', () => {
155 | 		test.each([
156 | 			['#ff0', true],
157 | 			['ff0', true],
158 | 			['ff', false],
159 | 			['fff', true],
160 | 			['ffff', false],
161 | 			['fffff', false],
162 | 			['ffffff', true],
163 | 			['fffffff', false],
164 | 			['ffffffff', true],
165 | 			['fffffffff', false],
166 | 			['ffg', false],
167 | 			['.ff0', false],
168 | 			['ff0ff000.', false],
169 | 			[null, false],
170 | 			[undefined, false],
171 | 			[0, false],
172 | 		])('color:%j, expected:%j', (color, expected) => {
173 | 			expect(isColorValid(color)).toBe(expected)
174 | 		})
175 | 	})
176 | })
177 | 


--------------------------------------------------------------------------------
/src/lib/utils/utils.js:
--------------------------------------------------------------------------------
 1 | import { extractByIndices } from '@untemps/utils/array/extractByIndices'
 2 | 
 3 | export const transformColors = ($colors) => {
 4 | 	return $colors.map((color) => {
 5 | 		const name = color.name ?? null
 6 | 		const value = color.value ?? color
 7 | 		return {
 8 | 			...(!!name && { name }),
 9 | 			value,
10 | 		}
11 | 	})
12 | }
13 | 
14 | export const calculateColors = ($colors, $params) => {
15 | 	if (!$colors || !Array.isArray($colors)) {
16 | 		$colors = []
17 | 	}
18 | 	if (!$params) {
19 | 		$params = { isCompact: false, compactColorIndices: [], allowDuplicates: true, maxColors: $colors.length }
20 | 	}
21 | 	if (!$params.compactColorIndices) {
22 | 		$params = { ...$params, compactColorIndices: [] }
23 | 	}
24 | 	if ($params.maxColors < 0) {
25 | 		$params = { ...$params, maxColors: $colors.length }
26 | 	}
27 | 
28 | 	$colors = transformColors($colors)
29 | 
30 | 	if (!!$params.isCompact) {
31 | 		$colors = extractByIndices($colors, $params.compactColorIndices)
32 | 	}
33 | 	if (!$params.allowDuplicates) {
34 | 		$colors = $colors.filter((item, index) => $colors.findIndex(({ value }) => value === item.value) === index)
35 | 	}
36 | 	if ($colors.length > $params.maxColors) {
37 | 		$colors = $colors.slice(0, $params.maxColors)
38 | 	}
39 | 	return $colors
40 | }
41 | 
42 | export const calculateNumColumns = ($colorLength, $params, $options) => {
43 | 	const MIN_NUM_COLUMNS = 5
44 | 	$colorLength = Math.max($colorLength + +$params?.showTransparentSlot, 0)
45 | 	if (!$params) {
46 | 		$params = { isCompact: false, compactColorIndices: [], showTransparentSlot: false, numColumns: 1 }
47 | 	}
48 | 	if (!!$params.isCompact) {
49 | 		return Math.min($colorLength, +$params.compactColorIndices?.length + +$params.showTransparentSlot)
50 | 	}
51 | 	return $params.numColumns > 0
52 | 		? Math.max($params.numColumns, 0)
53 | 		: Math.max($colorLength, $options?.minNumColumns ?? MIN_NUM_COLUMNS)
54 | }
55 | 
56 | export const COLOR_REGEX = /^#?(([0-9a-f]{2}){3,4}|([0-9a-f]){3})$/i
57 | 
58 | export const isColorValid = ($color) => {
59 | 	return COLOR_REGEX.test($color)
60 | }
61 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import 'carbon-components-svelte/css/g90.css'
 3 | 	import {
 4 | 		Header,
 5 | 		HeaderNav,
 6 | 		HeaderNavItem,
 7 | 		HeaderNavMenu,
 8 | 		SkipToContent,
 9 | 		Content,
10 | 		Grid,
11 | 		Row,
12 | 		Column,
13 | 		SideNav,
14 | 		SideNavItems,
15 | 		SideNavLink,
16 | 	} from 'carbon-components-svelte'
17 | 
18 | 	let isSideNavOpen = false
19 | </script>
20 | 
21 | <Header company="@untemps" platformName="/svelte-palette" bind:isSideNavOpen persistentHamburgerMenu={true}>
22 | 	<HeaderNav>
23 | 		<HeaderNavItem href="/example1" text="Example 1" />
24 | 		<HeaderNavItem href="/example2" text="Example 2" />
25 | 		<HeaderNavItem href="/example3" text="Example 3" />
26 | 		<HeaderNavItem href="/example4" text="Example 4" />
27 | 	</HeaderNav>
28 | </Header>
29 | 
30 | <SideNav bind:isOpen={isSideNavOpen}>
31 | 	<SideNavItems>
32 | 		<SideNavLink href="/example1" text="Example 1" />
33 | 		<SideNavLink href="/example2" text="Example 2" />
34 | 		<SideNavLink href="/example3" text="Example 3" />
35 | 		<SideNavLink href="/example4" text="Example 4" />
36 | 	</SideNavItems>
37 | </SideNav>
38 | 
39 | <slot />
40 | 


--------------------------------------------------------------------------------
/src/routes/+page.js:
--------------------------------------------------------------------------------
1 | import { redirect } from '@sveltejs/kit'
2 | 
3 | export const load = () => {
4 | 	throw redirect(302, '/example1')
5 | }
6 | 


--------------------------------------------------------------------------------
/src/routes/example1/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import { onMount } from 'svelte'
  3 | 	import { fade, blur, fly, scale } from 'svelte/transition'
  4 | 	import { elasticOut } from 'svelte/easing'
  5 | 	import { Button, Select, SelectItem, Slider, Toggle } from 'carbon-components-svelte'
  6 | 	import Close from 'carbon-icons-svelte/lib/Close.svelte'
  7 | 
  8 | 	import { Palette } from '$lib'
  9 | 
 10 | 	let unique = {}
 11 | 	let colors = null
 12 | 
 13 | 	/*onMount(() => {
 14 | 		colors = fetch('https://www.colr.org/json/colors/random/30')
 15 | 			.then((result) => {
 16 | 				return result.json()
 17 | 			})
 18 | 			.then((result) => {
 19 | 				const colorList = result.colors.filter((c) => c.hex?.length).map((c) => `#${c.hex}`)
 20 | 				return colorList
 21 | 			})
 22 | 			.then((result) => {
 23 | 				return new Promise((resolve) => setTimeout(() => resolve(result), 2000))
 24 | 			})
 25 | 			.then((result) => {
 26 | 				maxNumColumns = result.length + 2
 27 | 				bgColor = result[Math.round(Math.random() * (result.length - 1))]
 28 | 				return result
 29 | 			})
 30 | 	})*/
 31 | 
 32 | 	colors = [
 33 | 		'#865C54',
 34 | 		'#8F5447',
 35 | 		'#A65846',
 36 | 		'#A9715E',
 37 | 		'#AD8C72',
 38 | 		'#C2B091',
 39 | 		'#172B41',
 40 | 		'#32465C',
 41 | 		'#617899',
 42 | 		'#9BA2BC',
 43 | 		'#847999',
 44 | 		'#50526A',
 45 | 		'#8B8C6B',
 46 | 		'#97A847',
 47 | 		'#5B652C',
 48 | 		'#6A6A40',
 49 | 		'#F2D9BF',
 50 | 		'#F5BAAE',
 51 | 		'#F1A191',
 52 | 		'#F56476',
 53 | 		'#E43F6F',
 54 | 		'#BE3E82',
 55 | 		'#5E4352',
 56 | 	]
 57 | 	const compactIndices = [2, 7, 13, 20]
 58 | 
 59 | 	let bgColor = colors?.[Math.round(Math.random() * (colors?.length - 1))]
 60 | 
 61 | 	let preselectColor = true
 62 | 	let allowDuplicates = true
 63 | 	let deletionMode = 'tooltip'
 64 | 	let useCustomTooltipClass = false
 65 | 	let useCustomTooltipContent = false
 66 | 	let showTransparentSlot = true
 67 | 	let maxColors = 30
 68 | 	let showInput = true
 69 | 	let inputType = 'text'
 70 | 	let showCompactControl = true
 71 | 	let numColumns = 5
 72 | 	let maxNumColumns = 10
 73 | 	let transitionType = 'custom'
 74 | 
 75 | 	$: unique = {}
 76 | 
 77 | 	const whoosh = (node, params) => {
 78 | 		const existingTransform = getComputedStyle(node).transform.replace('none', '')
 79 | 
 80 | 		return {
 81 | 			delay: params.delay || 0,
 82 | 			duration: params.duration || 400,
 83 | 			easing: params.easing || elasticOut,
 84 | 			css: (t, u) => `transform: ${existingTransform} scale(${t})`,
 85 | 		}
 86 | 	}
 87 | 
 88 | 	const transitions = {
 89 | 		none: null,
 90 | 		custom: { fn: whoosh, args: { duration: 3600 } },
 91 | 		blur: { fn: blur, args: { duration: 1000 } },
 92 | 		fade: { fn: fade, args: { duration: 1000 } },
 93 | 		fly: { fn: fly, args: { y: 20, duration: 1000 } },
 94 | 		scale: { fn: scale, args: { opacity: 0.5, start: 0.5, duration: 1000 } },
 95 | 	}
 96 | </script>
 97 | 
 98 | <main class="example1" style="--bgColor:{bgColor}">
 99 | 	<div class="content">
100 | 		<div>
101 | 			{#key unique}
102 | 				<Palette
103 | 					class="palette__custom"
104 | 					{colors}
105 | 					compactColorIndices={showCompactControl ? compactIndices : null}
106 | 					selectedColor={preselectColor ? bgColor : null}
107 | 					{allowDuplicates}
108 | 					{deletionMode}
109 | 					tooltipClassName={useCustomTooltipClass ? 'tooltip' : null}
110 | 					tooltipContentSelector={useCustomTooltipContent ? '#tooltip-content' : null}
111 | 					{showTransparentSlot}
112 | 					{maxColors}
113 | 					{showInput}
114 | 					{inputType}
115 | 					{numColumns}
116 | 					transition={transitions[transitionType]}
117 | 					on:select={({ detail: { color } }) => {
118 | 						bgColor = color
119 | 						preselectColor = !!bgColor
120 | 					}}
121 | 				>
122 | 					<div slot="settings" class="palette__settings" let:onClose>
123 | 						<div class="settings">
124 | 							<Button
125 | 								kind="tertiary"
126 | 								iconDescription="Close Settings"
127 | 								tooltipPosition="left"
128 | 								icon={Close}
129 | 								class="settings__close-button"
130 | 								on:click={onClose}
131 | 							/>
132 | 							<form class="settings__form">
133 | 								<div class="settings__preselection">
134 | 									<Toggle labelText="Preselect Color" size="sm" bind:toggled={preselectColor}>
135 | 										<span slot="labelA" />
136 | 										<span slot="labelB" />
137 | 									</Toggle>
138 | 									<span
139 | 										class="settings__preselection__color"
140 | 										style={`background-color: ${bgColor}`}
141 | 									/>
142 | 								</div>
143 | 								<hr class="settings__space" />
144 | 								<Select
145 | 									labelText="Input Type"
146 | 									inline
147 | 									selected={inputType}
148 | 									on:change={(e) => (inputType = e.target.value)}
149 | 								>
150 | 									<SelectItem value="text" />
151 | 									<SelectItem value="color" />
152 | 								</Select>
153 | 								<hr class="settings__space" />
154 | 								<Slider
155 | 									labelText="Number of Columns"
156 | 									fullWidth
157 | 									min={0}
158 | 									max={maxNumColumns}
159 | 									step={1}
160 | 									bind:value={numColumns}
161 | 								/>
162 | 								<hr class="settings__space" />
163 | 								<Slider
164 | 									labelText="Maximum Number of Colors"
165 | 									fullWidth
166 | 									min={1}
167 | 									max={50}
168 | 									step={1}
169 | 									bind:value={maxColors}
170 | 								/>
171 | 								<hr class="settings__space" />
172 | 								<Toggle labelText="Allow Duplicates" size="sm" bind:toggled={allowDuplicates}>
173 | 									<span slot="labelA" />
174 | 									<span slot="labelB" />
175 | 								</Toggle>
176 | 								<hr class="settings__space" />
177 | 								<Select
178 | 									labelText="Deletion Mode"
179 | 									inline
180 | 									selected={deletionMode}
181 | 									on:change={(e) => (deletionMode = e.target.value)}
182 | 								>
183 | 									<SelectItem value="none" />
184 | 									<SelectItem value="tooltip" />
185 | 									<SelectItem value="drop" />
186 | 								</Select>
187 | 								<hr class="settings__space" />
188 | 								<Toggle labelText="Custom Tooltip Class" size="sm" bind:toggled={useCustomTooltipClass}>
189 | 									<span slot="labelA" />
190 | 									<span slot="labelB" />
191 | 								</Toggle>
192 | 								<hr class="settings__space" />
193 | 								<Toggle
194 | 									labelText="Custom Tooltip Content"
195 | 									size="sm"
196 | 									bind:toggled={useCustomTooltipContent}
197 | 								>
198 | 									<span slot="labelA" />
199 | 									<span slot="labelB" />
200 | 								</Toggle>
201 | 								<div style="position: absolute; left: -200px; top: -200px">
202 | 									<Button id="tooltip-content">Delete</Button>
203 | 								</div>
204 | 								<hr class="settings__space" />
205 | 								<Toggle labelText="Show Transparent Slot" size="sm" bind:toggled={showTransparentSlot}>
206 | 									<span slot="labelA" />
207 | 									<span slot="labelB" />
208 | 								</Toggle>
209 | 								<hr class="settings__space" />
210 | 								<Toggle labelText="Show Compact Control" size="sm" bind:toggled={showCompactControl}>
211 | 									<span slot="labelA" />
212 | 									<span slot="labelB" />
213 | 								</Toggle>
214 | 								<hr class="settings__space" />
215 | 								<Toggle labelText="Show Input" size="sm" bind:toggled={showInput}>
216 | 									<span slot="labelA" />
217 | 									<span slot="labelB" />
218 | 								</Toggle>
219 | 								<hr class="settings__space" />
220 | 								<Select
221 | 									labelText="Transition Type"
222 | 									inline
223 | 									bind:selected={transitionType}
224 | 									on:change={(e) => (transitionType = e.target.value)}
225 | 								>
226 | 									<SelectItem value="none" />
227 | 									<SelectItem value="custom" />
228 | 									<SelectItem value="fade" />
229 | 									<SelectItem value="blur" />
230 | 									<SelectItem value="fly" />
231 | 									<SelectItem value="scale" />
232 | 								</Select>
233 | 							</form>
234 | 						</div>
235 | 					</div>
236 | 				</Palette>
237 | 			{/key}
238 | 		</div>
239 | 	</div>
240 | </main>
241 | 
242 | <style>
243 | 	.example1 {
244 | 		position: relative;
245 | 		overflow-x: hidden;
246 | 		min-height: 100%;
247 | 		display: flex;
248 | 		justify-content: space-between;
249 | 		align-items: stretch;
250 | 		background-color: var(--bgColor);
251 | 	}
252 | 
253 | 	.example1 .content {
254 | 		width: 100%;
255 | 		max-width: 100%;
256 | 		min-height: 100%;
257 | 		display: flex;
258 | 		flex-direction: column;
259 | 		align-items: center;
260 | 		justify-content: center;
261 | 	}
262 | 
263 | 	.example1 :global(.palette[role='main'].palette__custom) {
264 | 		background-color: #fff;
265 | 	}
266 | 
267 | 	.example1 :global(.tooltip) {
268 | 		position: absolute;
269 | 		z-index: 9999;
270 | 		max-width: initial;
271 | 		background-color: #fff;
272 | 		color: #fff;
273 | 		text-align: center;
274 | 		border-radius: 0;
275 | 		padding: 0.5rem;
276 | 		filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));
277 | 	}
278 | 
279 | 	.example1 :global(.tooltip::after) {
280 | 		content: '';
281 | 		position: absolute;
282 | 		top: 100%;
283 | 		left: 50%;
284 | 		margin-left: -5px;
285 | 		border-width: 5px;
286 | 		border-style: solid;
287 | 		border-color: #fff transparent transparent transparent;
288 | 	}
289 | 
290 | 	.palette__settings {
291 | 		position: absolute;
292 | 		right: 0;
293 | 		top: 0;
294 | 		bottom: 0;
295 | 		z-index: 999;
296 | 	}
297 | 
298 | 	.settings {
299 | 		overflow: hidden auto;
300 | 		width: 320px;
301 | 		min-width: 320px;
302 | 		min-height: 100%;
303 | 		display: flex;
304 | 		flex-direction: column;
305 | 		align-items: flex-end;
306 | 		justify-content: center;
307 | 		background-color: black;
308 | 		padding: 2rem;
309 | 	}
310 | 
311 | 	:global(.bx--btn.bx--btn--icon-only.bx--tooltip__trigger) {
312 | 		position: absolute !important;
313 | 		right: 12px !important;
314 | 		top: 60px !important;
315 | 	}
316 | 
317 | 	:global(.settings--collapsed > .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.settings__close-button) {
318 | 		display: none !important;
319 | 	}
320 | 
321 | 	:global(.settings--expanded + .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.settings__open-button) {
322 | 		display: none !important;
323 | 	}
324 | 
325 | 	.settings__form {
326 | 		width: 100%;
327 | 		display: flex;
328 | 		flex-direction: column;
329 | 		justify-content: center;
330 | 		align-items: flex-start;
331 | 	}
332 | 
333 | 	.settings__space {
334 | 		border: none;
335 | 		margin: 0.5rem 0;
336 | 	}
337 | 
338 | 	.settings__preselection {
339 | 		position: relative;
340 | 	}
341 | 
342 | 	.settings__preselection__color {
343 | 		position: absolute;
344 | 		top: 24px;
345 | 		left: 46px;
346 | 		width: 50px;
347 | 		height: 16px;
348 | 	}
349 | 
350 | 	:global(.bx--toggle__switch) {
351 | 		margin-top: 0.5rem !important;
352 | 	}
353 | 
354 | 	:global(.bx--slider__range-label) {
355 | 		font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif !important;
356 | 		font-size: 0.75rem !important;
357 | 		color: #c6c6c6 !important;
358 | 	}
359 | 
360 | 	:global(.bx--slider) {
361 | 		min-width: 6rem !important;
362 | 	}
363 | 
364 | 	:global(.bx--form-item) {
365 | 		width: 100%;
366 | 	}
367 | </style>
368 | 


--------------------------------------------------------------------------------
/src/routes/example2/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import { Palette } from '$lib'
  3 | 
  4 | 	const colors1 = ['#EDEDE9', '#D6CCC2', '#F5EBE0', '#E3D5CA', '#D5BDAF']
  5 | 	const colors2 = ['#2F1847', '#624763', '#C62E65', '#F9B3D1', '#D63AF9']
  6 | 	const colors3 = ['#DEF2C8', '#C5DAC1', '#BCD0C7', '#A9B2AC', '#898980']
  7 | 	const colors4 = ['#F2F3AE', '#EDD382', '#FC9E4F', '#F4442E', '#020122']
  8 | 
  9 | 	let bgColor = '#000'
 10 | </script>
 11 | 
 12 | <main class="example2" style="--bgColor:{bgColor}">
 13 | 	<div class="content">
 14 | 		<div class="content__grid">
 15 | 			<Palette class="palette__custom" colors={colors1} numColumns="5">
 16 | 				<div slot="slot" let:color style="--color: {color}" class="slot"></div>
 17 | 				<div slot="tools"></div>
 18 | 				<div slot="input"></div>
 19 | 				<div slot="footer" class="footer">
 20 | 					<h1>Quiet & Warm</h1>
 21 | 					<p>Winter Sunday Afternoon</p>
 22 | 				</div>
 23 | 			</Palette>
 24 | 			<Palette class="palette__custom" colors={colors2} numColumns="5">
 25 | 				<div slot="slot" let:color style="--color: {color}" class="slot"></div>
 26 | 				<div slot="tools"></div>
 27 | 				<div slot="input"></div>
 28 | 				<div slot="footer" class="footer">
 29 | 					<h1>Fancy Night</h1>
 30 | 					<p>Club, Cocktails & More</p>
 31 | 				</div>
 32 | 			</Palette>
 33 | 			<Palette class="palette__custom" colors={colors3} numColumns="5">
 34 | 				<div slot="slot" let:color style="--color: {color}" class="slot"></div>
 35 | 				<div slot="tools"></div>
 36 | 				<div slot="input"></div>
 37 | 				<div slot="footer" class="footer">
 38 | 					<h1>Grand'ma Jersey</h1>
 39 | 					<p>Cozy Wool</p>
 40 | 				</div>
 41 | 			</Palette>
 42 | 			<Palette class="palette__custom" colors={colors4} numColumns="5">
 43 | 				<div slot="slot" let:color style="--color: {color}" class="slot"></div>
 44 | 				<div slot="tools"></div>
 45 | 				<div slot="input"></div>
 46 | 				<div slot="footer" class="footer">
 47 | 					<h1>California Sunset</h1>
 48 | 					<p>Chill & the Beach</p>
 49 | 				</div>
 50 | 			</Palette>
 51 | 		</div>
 52 | 	</div>
 53 | </main>
 54 | 
 55 | <style>
 56 | 	.example2 {
 57 | 		position: relative;
 58 | 		overflow-x: hidden;
 59 | 		min-height: 100%;
 60 | 		display: flex;
 61 | 		justify-content: space-between;
 62 | 		align-items: stretch;
 63 | 		background-color: var(--bgColor);
 64 | 	}
 65 | 
 66 | 	.example2 .content {
 67 | 		width: 100%;
 68 | 		max-width: 100%;
 69 | 		min-height: 100%;
 70 | 		display: flex;
 71 | 		flex-direction: column;
 72 | 		align-items: center;
 73 | 		justify-content: center;
 74 | 	}
 75 | 
 76 | 	.example2 .content .content__grid {
 77 | 		display: grid;
 78 | 		grid-template-columns: repeat(2, 1fr);
 79 | 		grid-template-rows: repeat(2, 1fr);
 80 | 		grid-column-gap: 1rem;
 81 | 		grid-row-gap: 1rem;
 82 | 	}
 83 | 
 84 | 	@media screen and (max-width: 640px) {
 85 | 		.example2 .content .content__grid {
 86 | 			grid-template-columns: repeat(1, 1fr);
 87 | 		}
 88 | 	}
 89 | 
 90 | 	.example2 :global(.palette[role='main'].palette__custom) {
 91 | 		background-color: #fff;
 92 | 		border-radius: 1rem;
 93 | 	}
 94 | 
 95 | 	.example2 :global(.palette[role='main'].palette__custom > .palette__content) {
 96 | 		padding: 0;
 97 | 	}
 98 | 
 99 | 	:global(.palette[role='main'].palette__custom > .palette__content > .palette__cells) {
100 | 		column-gap: 0;
101 | 	}
102 | 
103 | 	.example2
104 | 		:global(.palette[role='main'].palette__custom > .palette__content > .palette__cells > li:first-child > .slot) {
105 | 		border-top-left-radius: 1rem;
106 | 	}
107 | 
108 | 	.example2
109 | 		:global(.palette[role='main'].palette__custom > .palette__content > .palette__cells > li:last-child > .slot) {
110 | 		border-top-right-radius: 1rem;
111 | 	}
112 | 
113 | 	.example2 .slot {
114 | 		background-color: var(--color);
115 | 		height: 100px;
116 | 		width: 100%;
117 | 	}
118 | 
119 | 	.example2 .footer {
120 | 		width: 100%;
121 | 		padding: 1.5rem;
122 | 	}
123 | 
124 | 	.example2 .footer h1 {
125 | 		font-size: 1.5rem;
126 | 		font-weight: 600;
127 | 	}
128 | </style>
129 | 


--------------------------------------------------------------------------------
/src/routes/example3/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import { Palette } from '$lib'
  3 | 
  4 | 	const blueColors = [
  5 | 		{ name: 'Blue 1', value: '#e5f0ff' },
  6 | 		{ name: 'Blue 2', value: '#cee5ff' },
  7 | 		{ name: 'Blue 3', value: '#9CC9FE' },
  8 | 		{ name: 'Blue 4', value: '#65b0fb' },
  9 | 		{ name: 'Blue 5', value: '#3496ff' },
 10 | 		{ name: 'Blue 6', value: '#057cff' },
 11 | 		{ name: 'Blue 7', value: '#0362cd' },
 12 | 		{ name: 'Blue 8', value: '#024b98' },
 13 | 		{ name: 'Blue 9', value: '#003464' },
 14 | 		{ name: 'Blue 10', value: '#021730' },
 15 | 	]
 16 | 	const purpleColors = [
 17 | 		{ name: 'Purple 1', value: '#F8EEFC' },
 18 | 		{ name: 'Purple 2', value: '#EFDBF8' },
 19 | 		{ name: 'Purple 3', value: '#DFBBF2' },
 20 | 		{ name: 'Purple 4', value: '#CF99EB' },
 21 | 		{ name: 'Purple 5', value: '#C076E5' },
 22 | 		{ name: 'Purple 6', value: '#AF52DF' },
 23 | 		{ name: 'Purple 7', value: '#8A42B1' },
 24 | 		{ name: 'Purple 8', value: '#6A3184' },
 25 | 		{ name: 'Purple 9', value: '#432258' },
 26 | 		{ name: 'Purple 10', value: '#23102A' },
 27 | 	]
 28 | 	const redColors = [
 29 | 		{ name: 'Red 1', value: '#FEEAEA' },
 30 | 		{ name: 'Red 2', value: '#FFD9D6' },
 31 | 		{ name: 'Red 3', value: '#FFB2AC' },
 32 | 		{ name: 'Red 4', value: '#FF8983' },
 33 | 		{ name: 'Red 5', value: '#FF635A' },
 34 | 		{ name: 'Red 6', value: '#FF3B2F' },
 35 | 		{ name: 'Red 7', value: '#CC3127' },
 36 | 		{ name: 'Red 8', value: '#99241E' },
 37 | 		{ name: 'Red 9', value: '#661A13' },
 38 | 		{ name: 'Red 10', value: '#350A0C' },
 39 | 	]
 40 | </script>
 41 | 
 42 | <main class="example3" style="--bgColor:#000">
 43 | 	<div class="content">
 44 | 		<Palette class="palette__custom" colors={blueColors} numColumns="10">
 45 | 			<div slot="header" class="header">
 46 | 				<h1>Blue</h1>
 47 | 			</div>
 48 | 			<div slot="slot" class="slot" let:color let:colorName let:index>
 49 | 				<div class="slot__color" style="--color:{color}"></div>
 50 | 				<div>
 51 | 					<div class="slot__color-rank">{`${index < 9 ? '0' : ''}${index + 1}`}</div>
 52 | 					<div class="slot__color-label">{colorName}</div>
 53 | 				</div>
 54 | 			</div>
 55 | 			<div slot="input"></div>
 56 | 			<div slot="tools"></div>
 57 | 		</Palette>
 58 | 		<Palette class="palette__custom" colors={purpleColors} numColumns="10">
 59 | 			<div slot="header" class="header">
 60 | 				<h1>Purple</h1>
 61 | 			</div>
 62 | 			<div slot="slot" class="slot" let:color let:colorName let:index>
 63 | 				<div class="slot__color" style="--color:{color}"></div>
 64 | 				<div>
 65 | 					<div class="slot__color-rank">{`${index < 9 ? '0' : ''}${index + 1}`}</div>
 66 | 					<div class="slot__color-label">{colorName}</div>
 67 | 				</div>
 68 | 			</div>
 69 | 			<div slot="input"></div>
 70 | 			<div slot="tools"></div>
 71 | 		</Palette>
 72 | 		<Palette class="palette__custom" colors={redColors} numColumns="10">
 73 | 			<div slot="header" class="header">
 74 | 				<h1>Red</h1>
 75 | 			</div>
 76 | 			<div slot="slot" class="slot" let:color let:colorName let:index>
 77 | 				<div class="slot__color" style="--color:{color}"></div>
 78 | 				<div>
 79 | 					<div class="slot__color-rank">{`${index < 9 ? '0' : ''}${index + 1}`}</div>
 80 | 					<div class="slot__color-label">{colorName}</div>
 81 | 				</div>
 82 | 			</div>
 83 | 			<div slot="input"></div>
 84 | 			<div slot="tools"></div>
 85 | 		</Palette>
 86 | 	</div>
 87 | </main>
 88 | 
 89 | <style>
 90 | 	.example3 {
 91 | 		position: relative;
 92 | 		overflow-x: hidden;
 93 | 		min-height: 100%;
 94 | 		display: flex;
 95 | 		justify-content: center;
 96 | 		align-items: stretch;
 97 | 		background-color: var(--bgColor);
 98 | 		padding: 1rem;
 99 | 	}
100 | 
101 | 	.example3 .content {
102 | 		width: 100%;
103 | 		max-width: 600px;
104 | 		min-height: 100%;
105 | 		display: flex;
106 | 		flex-direction: column;
107 | 		align-items: center;
108 | 		justify-content: center;
109 | 		row-gap: 1px;
110 | 	}
111 | 
112 | 	.example3 :global(.palette[role='main'].palette__custom) {
113 | 		background-color: #fff;
114 | 	}
115 | 
116 | 	@media screen and (max-width: 640px) {
117 | 		.example3 :global(.palette[role='main'].palette__custom .palette__cells) {
118 | 			grid-template-columns: repeat(var(--num-columns), minmax(1rem, 1fr));
119 | 			column-gap: 0;
120 | 		}
121 | 	}
122 | 
123 | 	.example3 .header {
124 | 		width: 100%;
125 | 	}
126 | 
127 | 	.example3 .header > h1 {
128 | 		font-size: 1rem;
129 | 		font-weight: 700;
130 | 		margin-bottom: 0.5rem;
131 | 	}
132 | 
133 | 	.example3 .slot {
134 | 		width: 100%;
135 | 		display: flex;
136 | 		flex-direction: column;
137 | 		row-gap: 0.5rem;
138 | 	}
139 | 
140 | 	@media screen and (max-width: 320px) {
141 | 		.example3 .slot {
142 | 			row-gap: 0;
143 | 		}
144 | 	}
145 | 
146 | 	.example3 .slot__color {
147 | 		width: 100%;
148 | 		max-width: 50px;
149 | 		height: 50px;
150 | 		background-color: var(--color);
151 | 	}
152 | 
153 | 	.example3 .slot__color-rank {
154 | 		font-size: 0, 9rem;
155 | 		font-weight: 700;
156 | 	}
157 | 
158 | 	@media screen and (max-width: 320px) {
159 | 		.example3 .slot__color-rank {
160 | 			display: none;
161 | 		}
162 | 	}
163 | 
164 | 	.example3 .slot__color-label {
165 | 		font-size: 0.6rem;
166 | 		font-weight: 400;
167 | 	}
168 | 
169 | 	@media screen and (max-width: 640px) {
170 | 		.example3 .slot__color-label {
171 | 			display: none;
172 | 		}
173 | 	}
174 | </style>
175 | 


--------------------------------------------------------------------------------
/src/routes/example4/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import fontColorContrast from 'font-color-contrast'
  3 | 
  4 | 	import { Palette, PaletteInput, PaletteSlot } from '$lib'
  5 | 
  6 | 	let colors = ['#F3B700', '#FAA300', '#E57C04', '#FF6201', '#F63E02', '#F50202']
  7 | 
  8 | 	let selectedColor = colors[3]
  9 | 	let textColor = '#fff'
 10 | 	let showInput = false
 11 | 
 12 | 	const _onSelect = ({ detail: { color } }) => {
 13 | 		selectedColor = color
 14 | 		textColor = fontColorContrast(selectedColor)
 15 | 	}
 16 | 
 17 | 	const _onOpen = () => {
 18 | 		showInput = true
 19 | 	}
 20 | 
 21 | 	const _onClose = () => {
 22 | 		showInput = false
 23 | 	}
 24 | 
 25 | 	const _onAdd = ({ detail: { color } }) => {
 26 | 		colors = [...colors, color]
 27 | 	}
 28 | </script>
 29 | 
 30 | <main class="example4" style="--bgColor:#000">
 31 | 	<div class="content">
 32 | 		<div>
 33 | 			<Palette {colors} {selectedColor} numColumns={5} {showInput} allowDuplicates on:select={_onSelect}>
 34 | 				<div
 35 | 					slot="header"
 36 | 					class="header"
 37 | 					let:selectedColor
 38 | 					style="--color:{selectedColor}; --textColor: {textColor}"
 39 | 				>
 40 | 					{selectedColor ?? ''}
 41 | 				</div>
 42 | 				<div slot="tools"></div>
 43 | 				<PaletteSlot
 44 | 					slot="slot"
 45 | 					let:color
 46 | 					{color}
 47 | 					class="slot__custom"
 48 | 					selected={color === selectedColor}
 49 | 					on:select={_onSelect}
 50 | 				></PaletteSlot>
 51 | 				<li slot="after_slot" class="slot__add">
 52 | 					<button class="icon-button" on:click={_onOpen}>
 53 | 						<svg
 54 | 							xmlns="http://www.w3.org/2000/svg"
 55 | 							width="32"
 56 | 							height="32"
 57 | 							fill="#646464"
 58 | 							viewBox="0 0 256 256"
 59 | 							><path
 60 | 								d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"
 61 | 							></path></svg
 62 | 						>
 63 | 					</button>
 64 | 				</li>
 65 | 				<div slot="input" let:selectedColor let:inputType class="input">
 66 | 					<PaletteInput class="input__input" on:add={_onAdd} />
 67 | 					<button class="icon-button" on:click={_onClose}>
 68 | 						<svg
 69 | 							xmlns="http://www.w3.org/2000/svg"
 70 | 							width="16"
 71 | 							height="16"
 72 | 							fill="#646464"
 73 | 							viewBox="0 0 256 256"
 74 | 							><path
 75 | 								d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
 76 | 							></path></svg
 77 | 						>
 78 | 					</button>
 79 | 				</div>
 80 | 			</Palette>
 81 | 		</div>
 82 | 	</div>
 83 | </main>
 84 | 
 85 | <style>
 86 | 	.example4 {
 87 | 		position: relative;
 88 | 		overflow-x: hidden;
 89 | 		min-height: 100%;
 90 | 		display: flex;
 91 | 		justify-content: space-between;
 92 | 		align-items: stretch;
 93 | 		background-color: var(--bgColor);
 94 | 	}
 95 | 
 96 | 	.example4 .content {
 97 | 		width: 100%;
 98 | 		max-width: 100%;
 99 | 		min-height: 100%;
100 | 		display: flex;
101 | 		flex-direction: column;
102 | 		align-items: center;
103 | 		justify-content: center;
104 | 	}
105 | 
106 | 	.example4 .header {
107 | 		width: 100%;
108 | 		min-width: 12rem;
109 | 		height: 100px;
110 | 		background-color: var(--color);
111 | 		color: var(--textColor);
112 | 		padding: 0.5rem;
113 | 		margin-bottom: 1rem;
114 | 	}
115 | 
116 | 	.example4 :global(button.slot__custom) {
117 | 		width: 2rem;
118 | 		height: 2rem;
119 | 		background-color: var(--color);
120 | 		border-radius: 50%;
121 | 	}
122 | 
123 | 	.example4 :global(button.slot__custom--empty) {
124 | 		width: 2rem;
125 | 		height: 2rem;
126 | 		border: 1px solid #aaa;
127 | 		border-radius: 50%;
128 | 	}
129 | 
130 | 	.example4 .slot__add {
131 | 		display: flex;
132 | 		align-items: center;
133 | 		justify-content: center;
134 | 	}
135 | 
136 | 	.example4 .icon-button {
137 | 		background: none;
138 | 		border: none;
139 | 		padding: 0;
140 | 		margin-bottom: -6px;
141 | 		cursor: pointer;
142 | 	}
143 | 
144 | 	.example4 .input {
145 | 		display: flex;
146 | 		flex-direction: row;
147 | 		justify-content: space-between;
148 | 		align-items: flex-start;
149 | 		width: 100%;
150 | 		position: relative;
151 | 	}
152 | 
153 | 	.example4 :global(.input > .palette__divider) {
154 | 		display: none;
155 | 	}
156 | 
157 | 	.example4 :global(.input .icon-button) {
158 | 		position: absolute;
159 | 		right: 1rem;
160 | 		top: -0.5rem;
161 | 	}
162 | </style>
163 | 


--------------------------------------------------------------------------------
/static/app.css:
--------------------------------------------------------------------------------
1 | * {
2 | 	box-sizing: border-box;
3 | }
4 | 
5 | html,
6 | body {
7 | 	height: 100%;
8 | }
9 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/untemps/svelte-palette/f98c10414b3c1866dfe9670ba3bfccba6c9d36b0/static/favicon.png


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto'
 2 | 
 3 | /** @type {import('@sveltejs/kit').Config} */
 4 | const config = {
 5 | 	kit: {
 6 | 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 7 | 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 8 | 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 9 | 		adapter: adapter(),
10 | 	},
11 | }
12 | 
13 | export default config
14 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite'
2 | import { defineConfig } from 'vitest/config'
3 | 
4 | export default defineConfig({
5 | 	plugins: [sveltekit()],
6 | })
7 | 


--------------------------------------------------------------------------------
/vitest.config.js:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from '@sveltejs/kit/vite'
 2 | import { defineConfig } from 'vitest/config'
 3 | 
 4 | export default defineConfig({
 5 | 	test: {
 6 | 		global: true,
 7 | 		environment: 'jsdom',
 8 | 		coverage: {
 9 | 			reporter: ['text', 'lcov'],
10 | 		},
11 | 		setupFiles: ['./vitest.setup.js'],
12 | 	},
13 | 	plugins: [sveltekit()],
14 | })
15 | 


--------------------------------------------------------------------------------
/vitest.setup.js:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/vitest'
2 | 


--------------------------------------------------------------------------------