├── .github
    └── README.md
├── .gitignore
├── LICENSE
├── README.md
├── dev
    ├── demo-styles.css
    ├── serve-setup.vue
    ├── serve.js
    └── serve.vue
├── index.html
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── src
    ├── assets
    │   └── transparent-pattern.svg
    ├── bem.ts
    ├── color-input.vue
    ├── components
    │   └── color-picker.vue
    ├── entry.ts
    ├── types.ts
    └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config-demo.js
└── vite.config.js


/.github/README.md:
--------------------------------------------------------------------------------
  1 | # vue-color-input
  2 | Slick and perfomant Vue 3 color picker component whose goal is to replace `<input type="color">`
  3 | 
  4 | <p align="center">
  5 |     🚀&nbsp;&nbsp;<b><a href="https://gvguy.github.io/vue-color-input/">Live demo</a></b>&nbsp;&nbsp;🚀
  6 | </p>
  7 | <p align="center">
  8 |     <a href="https://codepen.io/vanechka222/pen/oNeNXrr">Codepen</a>
  9 | </p>
 10 | 
 11 | <p align="center">
 12 |     <img src="https://media.giphy.com/media/wyURgcSzyHlJcsOovd/source.gif">
 13 | </p>
 14 | 
 15 | ## Why
 16 | 
 17 | ### Multi-format
 18 | Forget about color conversions: vue-color-input does it for you. Unlike `<input type="color">` (which only understands hex) vue-color-input supports all commonly used color models, and by default __will output color in the same format that was passed as input__. It also has support for alpha channel, unless you specifically disable it.
 19 | 
 20 | ### Customizable
 21 | HTML's native color input is annoying to style. Most likely you'll have to get tricky hiding the original input & binding click event to a presentable-looking div. But it only gets you halfway there cause the color picker popup window is still out of reach and it might look way different in different browsers.  
 22 | With vue-color-input this poblem is solved. It looks pretty out of the box with the default styles, but it's also intuitive & straight-forward to customize from css.
 23 | 
 24 | ### Uniform
 25 | Not only that native color input looks different in different browsers, it also operates differently, and in some cases it's just not what you expect it to be. Yes, I'm looking at you, Safari. vue-color-input delivers a color picker that looks and performs the same regardless of browser.
 26 | 
 27 | ### It just works
 28 | vue-color-input combines minimalist approach with comprehensive functionality. You *can* customize and extend it to your liking, set it up with additional properties, but you _don't have to_. It works as expected out of the box just as well, with only `v-model` provided.
 29 | 
 30 | 
 31 | ## Usage
 32 | 
 33 | ### Install
 34 | ```
 35 | npm i vue-color-input
 36 | ```
 37 | 
 38 | ### Import
 39 | ```javascript
 40 | import ColorInput from 'vue-color-input'
 41 | ```
 42 | 
 43 | ### Use
 44 | ```xml
 45 | <ColorInput v-model="color" />
 46 | ```
 47 | 
 48 | 
 49 | # Table of contents
 50 | 
 51 | | [Props](#props)                                      | [Styling](#styling)                             | [Events](#events)           | [Exposed](#exposed-methods-and-properties)         |
 52 | |------------------------------------------------------|-------------------------------------------------|-----------------------------|----------------------------------------------------|
 53 | | [v-model](#v-model)                                  | [Class names](#class-names)                     | [Event names](#event-names) | [Methods](#exposed-methods)                        |
 54 | | [format](#format-optional)                           | [Customization](#customizing-factory-styles)    |                             | [Properties](#exposed-properties)                  |
 55 | | [position](#position-optional)                       | [Transitions](#transitions)                     |                             |                                                    |
 56 | | [disabled](#disabled-optional)                       | [Box active transition](#box-active-transition) |                             |                                                    |
 57 | | [disable-alpha](#disable-alpha-optional)             | [Example CSS](#example-css)                     |                             |                                                    |
 58 | | [disable-text-inputs](#disable-text-inputs-optional) | [Styling guidelines](#styling-guidelines)       |                             |                                                    |
 59 | | [transition](#transition-optional)                   |                                                 |                             |                                                    |
 60 | | [class](#class-optional)                             |                                                 |                             |                                                    |
 61 | 
 62 | 
 63 | # Props
 64 | 
 65 | ## v-model
 66 | 
 67 | This is where you supply the variable holding the color to be adjusted by end user.  
 68 | Model value is allowed to be changed externally too, vue-color-input will adjust accordingly.  
 69 | When first initialized and every time v-model value updates _from outside the component_, incoming color format is stored to be matched by output.
 70 | 
 71 | ### Input (initial value)
 72 | 
 73 | Under the hood vue-color-input uses [`tinycolor2`](https://www.npmjs.com/package/tinycolor2) for color conversion. So everything tinycolor [accepts as input](https://github.com/bgrins/TinyColor#accepted-string-input), is valid here as well (both string and object).
 74 | 
 75 | ### Output (return value)
 76 | 
 77 | By default output will be a string or an object in the same color model as the initial value.
 78 | 
 79 | For example:
 80 | ```javascript
 81 | // in parent component
 82 | 
 83 | const color = ref('rgb(50, 150, 150)')
 84 | ```
 85 | ```xml
 86 | <!-- in template -->
 87 | 
 88 | <ColorInput v-model="color" />
 89 | ```
 90 | User adjusts hue to `0`, now `color` becomes
 91 | ```javascript
 92 | "rgb(150, 50, 50)"
 93 | ```
 94 | Then user adjusts alpha to `0.5`, `color` becomes
 95 | ```javascript
 96 | "rgba(150, 50, 50, 0.5)"
 97 | ```
 98 | 
 99 | Let's say `color` property was initialy set to be an object:
100 | ```javascript
101 | // in parent component
102 | 
103 | const color = ref({ "h": 350, "s": 1, "l": 0.8 })
104 | ```
105 | In the same scenario the resulting output would be
106 | ```javascript
107 | { "h": 0, "s": 1, "l": 0.8, "a": 0.5 }
108 | ```
109 | 
110 | vue-color-input will always try to output color in the same color model as the initial value (unless target format is specified explicitly by `format` property.  
111 | However in some cases that would not be possible. For those colors it will fall back to different formats.
112 | 
113 | ### name || hex -> rgba fallback
114 | 
115 | If initial color format was `name` (e.g. `"purple"`) or `hex` (e.g. `"#800080"`), and then alpha is changed to be less than `1`, output will be formatted as `rgba`:
116 | ```javascript
117 | "#cd5c5c" // hex input
118 | 
119 | /* user changes alpha to 0.9 */
120 | 
121 | "rgba(205, 92, 92, 0.9)" // rgba output
122 | ```
123 | 
124 | _Note: this behavior does not apply if `format` property is explicitly set to be `hex` or `name`._  
125 | _Note 2: if initial color format is `hex8` (e.g. `#800080ff`), output will be `hex8` also, unless specified differently by `format` property._
126 | 
127 | ### name -> hex fallback
128 | 
129 | If initial color format was `name`, but the resulting output color does not have a name equivalent, `hex` value will be output instead:
130 | ```javascript
131 | "indianred" // name input
132 | 
133 | /* user changes hue to 180 */
134 | 
135 | "#5ccdcc" // hex output
136 | ```
137 | 
138 | ### invalid -> rgb fallback
139 | 
140 | Invalid color initialy diasplays as black. Default output format will be set to `rgb`:
141 | ```javascript
142 | "ironmanred" // invalid string input
143 | 
144 | /* user changes alpha to 0.1 */
145 | 
146 | "rgba(0, 0, 0, 0.1)" // rgb(a) output
147 | ```
148 | 
149 | ## format <sub><sup>_`optional`_</sup></sub>
150 | 
151 | Here you can supply the color format you want the output to be in.
152 | 
153 | The value consists of two arguments: format & type. The order of two is inconsequential, e.g. both `"hsl object"` & `"object hsl"` are valid values.  
154 | 
155 | __Format__ is the target color model that the return value is converted to. `[ "rgb", "hsv", "hsl", "hex", "hex8", "name" ]`  
156 | 
157 | __Type__ is data type of the return value. `[ "string", "object" ]`  
158 | 
159 | If you want to use v-model value for styling, `"string"` type should do the job. On the other hand, if you want to continue processing the data, `"object"` is probably more useful.  
160 | 
161 | Hsv & hsl color component values are presented differently in different output types:
162 | ```javascript
163 | "hsl(0, 53%, 58%)" // "hsl string"
164 | 
165 | { "h": 0, "s": 0.531, "l": 0.582, "a": 1 } // "hsl object"
166 | ```
167 | Notice how strings contain percent-based values, and object 0-1 floats.
168 | 
169 | >Note that name & hex formats don't support alpha channel. Specifying either of them as target format will prevent vue-color-input from falling back to rgba. Instead, it will disable alpha slider and always return full opacity color.  
170 | >If this is not the behavior that you want, and you'd rather it fall back to rgba to support alpha, you should not specify the format.
171 | 
172 | ### Type
173 | String
174 | 
175 | ### Allowed values
176 | ```javascript
177 | [ "rgb", "rgb object", "rgb string", 
178 |   "hsv", "hsv object", "hsv string", 
179 |   "hsl", "hsl object", "hsl string",
180 |   "name", "name string",
181 |   "hex", "hex string",
182 |   "hex8", "hex8 string" ]
183 | ```
184 | _Note: `"name object"`, `"hex object"` & `"hex8 object"`, make no sense and therefore are illegal._  
185 | _Note 2: format without type is allowed, type without format is not._
186 | 
187 | ### Default value
188 | Calculated to match the input.
189 | 
190 | ### Example
191 | ```xml
192 | <ColorInput v-model="color" format="rgb object" />
193 | ```
194 | 
195 | ## position <sub><sup>_`optional`_</sup></sub>
196 | 
197 | This is where you specify the position of the popup color picker window relative to the clickable box.
198 | 
199 | ### Type
200 | String
201 | 
202 | ### Allowed values
203 | ```javascript
204 | [ "top", "top right", "top left", "top center",
205 |   "right top", "right", "right bottom", "right center",
206 |   "bottom right", "bottom", "bottom left", "bottom center",
207 |   "left top", "left bottom", "left", "left center" ]
208 | ```
209 | Pretty intuitive: the first value is the direction from the box in which the popup will appear, the second is how it will align.  
210 | _Note: Omitting the second parameter results in center alignment, making `"top"` a shortcut for `"top center"`_
211 | 
212 | ### Default value
213 | `"bottom"`
214 | 
215 | ### Example
216 | ```xml
217 | <ColorInput v-model="color" position="right top" />
218 | ```
219 | 
220 | ## disabled <sub><sup>_`optional`_</sup></sub>
221 | 
222 | Setting this to `true` will make the initial box nonresponsive to user clicks. The popup will not appear.  
223 | However the box will still react to v-model changes, should they come from elsewhere.
224 | 
225 | ### Type
226 | Boolean
227 | 
228 | ### Allowed values
229 | ```javascript
230 | [ true, false ]
231 | ```
232 | 
233 | ### Default value
234 | `false`
235 | 
236 | ### Example
237 | ```xml
238 | <ColorInput v-model="color" :disabled="!allowColorAdjustment" />
239 | ```
240 | 
241 | ## disable-alpha <sub><sup>_`optional`_</sup></sub>
242 | 
243 | If you set this to `true`, alpha slider will be removed from the color picker, and the returned color will always have full opacity.
244 | 
245 | >Specifying name or hex as the target `format` will make this property default to `true` and ignore any passed value.
246 | 
247 | ### Type
248 | Boolean
249 | 
250 | ### Allowed values
251 | ```javascript
252 | [ true, false ]
253 | ```
254 | 
255 | ### Default value
256 | `false`,  
257 | `true` if target format is hex or name
258 | 
259 | ### Example
260 | ```xml
261 | <ColorInput v-model="color" disable-alpha />
262 | ```
263 | 
264 | ## disable-text-inputs <sub><sup>_`optional`_</sup></sub>
265 | 
266 | With this property you can hide the section of the color picker containing the text inputs.
267 | 
268 | ### Type
269 | Boolean
270 | 
271 | ### Allowed values
272 | ```javascript
273 | [ true, false ]
274 | ```
275 | 
276 | ### Default value
277 | `false`
278 | 
279 | ### Example
280 | ```xml
281 | <ColorInput v-model="color" disable-text-inputs />
282 | ```
283 | 
284 | ## transition <sub><sup>_`optional`_</sup></sub>
285 | 
286 | Set this to a custom transition name to override factory enter and leave-to transitions of the popup.
287 | 
288 | This is _not_ the only way to customize color picker transition.  
289 | You can also override default transition classes from css. More details [below](#transitions).
290 | 
291 | >More information about Vue enter/leave transitions [here](https://v3.vuejs.org/guide/transitions-enterleave.html).
292 | 
293 | ### Type
294 | String
295 | 
296 | ### Default value
297 | `"color-input__popup-"`
298 | 
299 | ### Example
300 | ```xml
301 | <ColorInput v-model="color" transition="my-cool-transition" />
302 | ```
303 | ```css
304 | .my-cool-transition-enter-from,
305 | .my-cool-transition-leave-to {
306 |     transform: rotate(240) scale(.5);
307 |     opacity: 0;
308 | }
309 | .my-cool-transition-enter-active,
310 | .my-cool-transition-leave-active {
311 |     transition: transform .3s, opacity .3s;
312 | }
313 | ```
314 | 
315 | ## class <sub><sup>_`optional`_</sup></sub>
316 | 
317 | With this you can provide a custom class that will get applied both to the root element and the popup elemnt. You can use this class later for styling.
318 | 
319 | ### Type
320 | String
321 | 
322 | ### Example
323 | ```xml
324 | <ColorInput v-model="color" class="custom" />
325 | ```
326 | 
327 | # Styling
328 | 
329 | As previously mentioned, applying styles to vue-color-input is a breeze.
330 | 
331 | Default CSS is written with custumizability in mind, so anything you want to style will likely work as expected, and the whole component's layout will not get screwed up by that.
332 | 
333 | Starting with v2, vue-color-input now uses bem class-naming approach instead of nested selectors and scoped styles to simplify customization while providing a namespaced classname isolation across the DOM.
334 | 
335 | ## Class names
336 | 
337 | | class                                | description                                             |
338 | |--------------------------------------|---------------------------------------------------------|
339 | | `.color-input__box [class]`          | Root clickable box                                      |
340 | | `.color-input__popup [class]`        | Popup color picker window (teleported to body)          |
341 | | `.color-input__saturation-area`      | Picking area where you select saturation and brightness |
342 | | `.color-input__slider`               | Hue and opacity sliders (track)                         |
343 | | `.color-input__saturation-pointer`   | Pointer in the saturation-brightness area               |
344 | | `.color-input__slider-pointer`       | Pointer on a slider                                     |
345 | 
346 | Feel free to scout the HTML for more class names.
347 | 
348 | ## Customizing factory styles
349 | 
350 | You don't have to use `!important` rules for everything you want to customize. Instead, here are several approaches you can take to override factory styles.
351 | 
352 | ### Specificity
353 | 
354 | The easiest way is to add a level of [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) to your selectors as in `div.class`, and that will outweight the factory styles which are defined simply as `.class`.
355 | 
356 | Example:
357 | ```css
358 | div.color-input__box {
359 |   border-radius: 50%; 
360 | }
361 | div.color-input__popup {
362 |   background: pink;
363 | }
364 | ```
365 | 
366 | ### Custom class
367 | 
368 | You can also use a `class` prop to set a custom class name on _both_ the root element and the popup, to later use it in your selectors.
369 | 
370 | Bear in mind though that the class is applied _only_ to the root elemnent and the popup root element, not to all nested elements. So it will be `.custom.color-input__box` and `.custom.color-input__popup` _but_ for all their nested elements it will be `.custom .color-input__box-inner` (note the space).
371 | 
372 | Example:
373 | ```xml
374 | <ColorInput :color="color" class="custom" />
375 | ```
376 | ```css
377 | .custom.color-input__box {
378 |   border-radius: 50%;
379 | }
380 | .custom.color-input__popup {
381 |   background: pink;
382 | }
383 | ```
384 | 
385 | ## Transitions
386 | 
387 | Instead of using `transition` property with a custom transition name, you can simply override default transition styles.  
388 | This can be done in the same manner as with the other classes, e.g:
389 | 
390 | ```css
391 | .color-input__popup--enter-from {
392 |     transform: translateY(-100%) scale(.1);
393 | }
394 | .color-input__popup--leave-to {
395 |     transform: scale(3);
396 | }
397 | /* and if you want to change the durations as well */
398 | .color-input__popup--enter-active,
399 | .color-input__popup--leave-active {
400 |     transition: all .5s;
401 | }
402 | ```
403 | 
404 | >More information about Vue enter/leave transitions [here](https://v3.vuejs.org/guide/transitions-enterleave.html).
405 | 
406 | ## Box active transition
407 | 
408 | When clicked on, the box gets what looks like an outline, but in reality its content is scaled down and background is revealed.
409 | 
410 | Here's what the box element html looks like:
411 | ```xml
412 | <!-- This has a background -->
413 | <div class="color-input__box  [--active] [--disabled]">
414 |     <!-- This scales down to reveal it -->
415 |     <div class="color-input__box-inner [--active]">
416 |         <div class="color-input__box-color" />
417 |     </div>
418 | </div>
419 | ```
420 | To customize this transition, you can use `.color-input__box--active` in combination with `.color-input__box-inner--active`.  
421 | For example:
422 | ```css
423 | div.color-input__box--active {
424 |     /* "outline" color */
425 |     background: #0f0f0f;
426 | }
427 | div.color-input__box-inner--active {
428 |     /* different transition effect */
429 |     transform: scale(.9) rotate(90deg);
430 | }
431 | ```
432 | 
433 | ## Popup offset
434 | 
435 | The popup gets a default offset from the box which is equal to `10px`. If you would like to use a different offset, you should set it with a `--popup-offset` css property defined on the popup.
436 | 
437 | Example:
438 | ```css
439 | div.color-input__popup {
440 |   --popup-offset: 20px;
441 | }
442 | ```
443 | 
444 | ## Example CSS
445 | 
446 | ```css
447 | div.color-input__box {
448 |     /* make clickable box a 100x100 circle */
449 |     width: 100px;
450 |     height: 100px;
451 |     border-radius: 50px;
452 | }
453 | div.color-input__popup {
454 |     /* dark mode for popup window */
455 |     background: #000;
456 |     color: #fbfbfb;
457 |     /* and make it wide */
458 |     width: 400px;
459 | }
460 | div.color-input__slider {
461 |     /* thin out the sliders and make them wider */
462 |     height: 2px;
463 |     width: 92%;
464 | }
465 | div.color-input__saturation-area {
466 |     /* bigger picking area */
467 |     height: 150px;
468 | }
469 | div.color-input__slider-pointer {
470 |     /* make slider pointers square-ish and 10x10 */
471 |     border-radius: 4px;
472 |     width: 10px;
473 |     height: 10px;
474 | }
475 | div.color-input__saturation-pointer {
476 |     /* increase saturation pointer size */
477 |     width: 40px;
478 |     height: 40px;
479 | }
480 | ```
481 | 
482 | ## Styling guidelines
483 | 
484 | ### Use stylesheets, no need to set inline styles
485 | 
486 | Inline styles will only let you style the root element, when typically you will want to style more than that.
487 | 
488 | ### Use specificity or custom class to override default styles
489 | 
490 | Read more about the both approaches [here](#customizing-factory-styles).
491 | 
492 | ### Don't expect the popup to be nested within the root
493 | 
494 | As the popup is teleported to the body, the following nested css selectors won't work:
495 | ```xml
496 | <ColorInput class="my-custom-class" />
497 | ```
498 | ```css
499 | /* ❌ example of selector that won't work */
500 | .my-custom-class .color-input__popup {}
501 | ```
502 | Instead, think of box and popup as two _separate roots_ that both get your custom class. And then both of those have some children that you can access with nested selectors:
503 | ```css
504 | .my-custom-class.color-input__popup {}
505 | .my-custom-class.color-input__box {}
506 | .my-custom-class .color-input__slider {}
507 | .my-custom-class .color-input__box-inner {}
508 | ```
509 | And likewise...
510 | 
511 | ### Don't expect your custom class to point only to the box
512 | 
513 | As described above, _both the box and the popup_ will get your custom class, so don't try to use your custom class without the specifying selector, that will apply the styles to both the box and the popup:
514 | ```css
515 | /* ❌ example of what not to do */
516 | .my-custom-class {
517 |   width: 50px;
518 |   height: 50px;
519 | }
520 | ```
521 | Instead, use a specifying classname:
522 | ```css
523 | .my-custom-class.color-input__box {}
524 | .my-custom-class.color-input__popup {}
525 | ```
526 | 
527 | ### Use preprocesser nesting to reduce typing
528 | 
529 | If you use a style preprocessor (like sass), you can use it's nesting to reduce the amount of typing and produce a cleaner and more readable code:
530 | ```scss
531 | div.color-input {
532 |     &__box {
533 |         &--disabled {}
534 |         &--active {}
535 |     }
536 |     &__popup {}
537 |     &__slider {}
538 | }
539 | ```
540 | 
541 | ### Don't use scoped styles
542 | 
543 | With scoped styles you won't be able to reach component's inner elements, so you should use global styles.
544 | 
545 | If, for some reason, you need to use several vue-color-input instances that should be styled differently, you can set different class names on them to provide instance-based scope.
546 | 
547 | 
548 | # Events
549 | 
550 | The instance provides hooks for custom event handling.
551 | 
552 | Most events carry payload with current state of the corresponding color component.
553 | 
554 | Note that event data is always passed in __hsv__ format.
555 | 
556 | ## Event names
557 | 
558 | Generally you don't need to rely on events to retrieve color data from this component. Instead, you should use [v-model](#v-model) two-way binding.
559 | 
560 | But if you want to setup some additional hooks, the component emits following events:
561 | 
562 | | event | description | payload |
563 | |---|---|---|
564 | | __pickStart__ | color picking process is initiated, popup is opening |  |
565 | | __pickEnd__ | color picking process is finished, popup will close now |  |
566 | | __mounted__ | lifecycle hook, emitted from root component's mounted() |  |
567 | | __beforeUnmount__ | lifecycle hook, emitted from root component's beforeUnmount() |  |
568 | | __saturationInputStart__ | saturation-brightness adjustment has begun. This is only emitted when pointerdown inside saturation-brightness area is registered. This will _not_ emit when text inputs are edited | current state of saturation & value (hsv) `{ s: 0.5, v: 0.5 }` |
569 | | __saturationInputEnd__ | saturation-brightness adjustment has ended. This is only emitted when pointerup of the saturation-brightness area is registered. This will _not_ emit when text inputs are edited | current state of saturation & value (hsv) `{ s: 0.5, v: 0.5 }` |
570 | | __saturationInput__ | saturation-brightness is being adjusted. This will emit every time saturation-brightness is changed, including text inputs | current state of saturation & value (hsv) `{ s: 0.5, v: 0.5 }` |
571 | | __hueInputStart__ | hue adjustment has begun. This is only emitted when pointerdown over the hue slider is registered. This will _not_ emit when hue is changed from text inputs | current state of hue `{ h: 180 }` |
572 | | __hueInputEnd__ | hue adjustment has ended. This is only emitted when pointerup of the hue slider is registered. This will _not_ emit when hue is changed from text inputs | current state of hue `{ h: 180 }` |
573 | | __hueInput__ | hue is being adjusted. This will emit every time hue is changed, including text inputs | current state of hue `{ h: 180 }` |
574 | | __alphaInputStart__ | alpha adjustment has begun. This is only emitted when pointerdown over the alpha slider is registered. This will _not_ emit when alpha is changed from text inputs | current state of alpha `{ a: 0.5 }` |
575 | | __alphaInputEnd__ | alpha adjustment has ended. This is only emitted when pointerup of the alpha slider is registered. This will _not_ emit when alpha is changed from text inputs | current state of alpha `{ a: 0.5 }` |
576 | | __alphaInput__ | alpha is being adjusted. This will emit every time alpha is changed, including text inputs | current state of alpha `{ a: 0.5 }` |
577 | | __change__ | the color has changed by user interaction. This will emit every time _any_ parameter is changed.  This _will_ emit when color is changed from text inputs as well, on blur | current state of all color components `{ h: 180, s: 0.5, v: 0.5, a: 0.5 }` |
578 | 
579 | ## Example
580 | 
581 | ```xml
582 | <ColorInput
583 |     v-model="color"
584 |     @mounted="colorInputMountedHandler"
585 |     @pickStart="colorPickerShowHandler"
586 | />
587 | ```
588 | 
589 | 
590 | # Exposed methods and properties
591 | 
592 | You shouldn't _need_ to manually access instance methods and properties, but if you feel like it, you can.  
593 | This can be done by specifying a `ref` property on the instance.
594 | 
595 | The following section implies you have a vue-color-input instance with a `ref` variable named `colorInput` in a script setup context:
596 | ```xml
597 | <ColorInput v-model="color" ref="colorInput" />
598 | ```
599 | ```javascript
600 | const colorInput = ref()
601 | ```
602 | 
603 | ## Exposed methods
604 | 
605 | ```javascript
606 | colorInput.value.pickStart() // begin color selection (show popup)
607 | colorInput.value.pickEnd() // end color selection (hide popup)
608 | ```
609 | 
610 | ## Exposed properties
611 | 
612 | ```javascript
613 | colorInput.value.color // tinycolor instance
614 | colorInput.value.active // boolean - is the picker currently active
615 | ```
616 | 
617 | 
618 | # License
619 | 
620 | MIT
621 | 
622 | 
623 | 
624 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | demo/
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw*
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Ivan Chepurin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <!-- short readme for npm. full readme .github/README.md -->
 2 | 
 3 | # vue-color-input
 4 | Slick and perfomant Vue 3 color picker component whose goal is to replace `<input type="color">`
 5 | 
 6 | <p align="center">
 7 |     🚀&nbsp;&nbsp;<b><a href="https://gvguy.github.io/vue-color-input/">Live demo</a></b>&nbsp;&nbsp;🚀
 8 | </p>
 9 | <p align="center">
10 |     <a href="https://codepen.io/vanechka222/pen/oNeNXrr">Codepen template</a>
11 | </p>
12 | 
13 | ## Why
14 | 
15 | ### Multi-format
16 | Forget about color conversions: vue-color-input does it for you. Unlike `<input type="color">` (which only understands hex) vue-color-input supports all commonly used color models, and by default __will output color in the same format that was passed as input__. It also has support for alpha channel, unless you specifically disable it.
17 | 
18 | ### Customizable
19 | HTML's native color input is annoying to style. Most likely you'll have to get tricky hiding the original input & binding click event to a presentable-looking div. But it only gets you halfway there cause the color picker popup window is still out of reach and it might look way different in different browsers.  
20 | With vue-color-input this poblem is solved. It looks pretty out of the box with the default styles, but it's also intuitive & straight-forward to customize from css.
21 | 
22 | ### Uniform
23 | Not only that native color input looks different in different browsers, it also operates differently, and in some cases it's just not what you expect it to be. Yes, I'm looking at you, Safari. vue-color-input delivers a color picker that looks and performs the same regardless of browser.
24 | 
25 | ### It just works
26 | vue-color-input combines minimalist approach with comprehensive functionality. You *can* customize and extend it to your liking, set it up with additional properties, but you _don't have to_. It works as expected out of the box just as well, with only `v-model` provided.
27 | 
28 | ## Usage
29 | 
30 | ### Install
31 | ```
32 | npm i vue-color-input
33 | ```
34 | 
35 | ### Import
36 | ```javascript
37 | import ColorInput from 'vue-color-input'
38 | ```
39 | 
40 | ### Use
41 | ```xml
42 | <ColorInput v-model="color" />
43 | ```
44 | 
45 | 
46 | # Docs
47 | 
48 | See complete documentation [on github](https://github.com/gVguy/vue-color-input#table-of-contents)
49 | 
50 | 
51 | # License
52 | 
53 | MIT
54 | 
55 | 
56 | 
57 | 


--------------------------------------------------------------------------------
/dev/demo-styles.css:
--------------------------------------------------------------------------------
 1 | div.color-input__box {
 2 | 	width: 100px;
 3 | 	height: 100px;
 4 | }
 5 | div.color-input__box--active {
 6 | 	background: #0f0f0f;
 7 | }
 8 | div.color-input__box-inner--active {
 9 | 	transform: scale(.88);
10 | }
11 | div.color-input__box--disabled {}
12 | 
13 | div.color-input__popup {}
14 | div.color-input__slider {}
15 | div.color-input__slider-pointer {}
16 | div.color-input__saturation-pointer {}
17 | 
18 | div.color-input__popup--enter-from,
19 | div.color-input__popup--leave-to {}
20 | div.color-input__popup--enter-active,
21 | div.color-input__popup--leave-active {}
22 | 


--------------------------------------------------------------------------------
/dev/serve-setup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import ColorInput from '../src/color-input.vue'
 3 | import { ref } from 'vue'
 4 | 
 5 | const color = ref('#ccc')
 6 | 
 7 | const colorInput = ref<InstanceType<typeof ColorInput>>()
 8 | 
 9 | setTimeout(() => {
10 | 	colorInput.value.pickStart()
11 | }, 2000)
12 | 
13 | setTimeout(() => {
14 | 	console.log(colorInput.value.active)
15 | 	console.log(colorInput.value.color.toRgb())
16 | }, 4000)
17 | 
18 | 
19 | </script>
20 | 
21 | <template>
22 | 	<ColorInput v-model="color" ref="colorInput" class="my-color-input" />
23 | </template>
24 | 
25 | <style>
26 | </style>
27 | 
28 | 


--------------------------------------------------------------------------------
/dev/serve.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue';
 2 | import Dev from './serve.vue';
 3 | import DevSetup from './serve-setup.vue';
 4 | 
 5 | const app = createApp(Dev);
 6 | app.config.unwrapInjectedRef = true;
 7 | app.mount('#app');
 8 | 
 9 | document.title = 'vue-color-input';
10 | 


--------------------------------------------------------------------------------
/dev/serve.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="app">
  3 | 		<h1>vue-color-input demo</h1>
  4 | 		<h3>
  5 | 			<a class="docs-link" href="https://github.com/gVguy/vue-color-input#vue-color-input"
  6 | 			:style="{ color: linkColor }">Docs</a>
  7 | 		</h3>
  8 | 		<div class="setup">
  9 | 			<div class="setup-block main">
 10 | 				<h3>v-model</h3>
 11 | 				<input class="color-text" v-model="colorString" spellcheck="false">
 12 | 				<div>
 13 | 					<span v-for="f in formatOptions"
 14 | 					:class="['setup-radio-button', { active: (format === f) }]"
 15 | 					@click="formatSelect(f)"
 16 | 					@pointerdown.stop>{{f}}</span>
 17 | 				</div>
 18 | 				<div>
 19 | 					<span v-for="(state, t) in typeOptions"
 20 | 					:class="['setup-radio-button', { active: (type === t), disabled: !state }]"
 21 | 					@click="state ? typeSelect(t) : null"
 22 | 					@pointerdown.stop>{{t}}</span>
 23 | 				</div>
 24 | 			</div>
 25 | 			<div class="setup-block">
 26 | 				<h3>position</h3>
 27 | 				<select v-model="position">
 28 | 					<option v-for="opt in positionOptions" :value="opt">{{opt}}</option>
 29 | 				</select>
 30 | 			</div>
 31 | 			<div class="setup-block">
 32 | 				<h3>disabled</h3>
 33 | 				<input type="checkbox" class="chx" v-model="disabled" @pointerdown.stop>
 34 | 			</div>
 35 | 			<div class="setup-block">
 36 | 				<h3>disable-alpha</h3>
 37 | 				<input v-if="!hexNameSelected" type="checkbox" class="chx" v-model="disableAlpha" @pointerdown.stop>
 38 | 				<input v-else type="checkbox" class="chx disabled" checked disabled @pointerdown.stop>
 39 | 			</div>
 40 | 			<div class="setup-block">
 41 | 				<h3>disable-text-inputs</h3>
 42 | 				<input type="checkbox" class="chx" v-model="disableTextInputs" @pointerdown.stop>
 43 | 			</div>
 44 | 		</div>
 45 | 		<color-input 
 46 | 			v-model="color"
 47 | 			:format="format + (type ? ' ' + type : '')"
 48 | 			:position="position"
 49 | 			:disable-alpha="disableAlpha"
 50 | 			:disabled="disabled"
 51 | 			:disable-text-inputs="disableTextInputs"
 52 | 			@mounted="logEvent('mounted');"
 53 | 			@beforeUnmount="logEvent('beforeUnmount');"
 54 | 			@pickStart="logEvent('pickStart')"
 55 | 			@pickEnd="logEvent('pickEnd')"
 56 | 			@hueInputStart="logEvent('hueInputStart', $event)"
 57 | 			@hueInputEnd="logEvent('hueInputEnd', $event)"
 58 | 			@hueInput="logEvent('hueInput', $event)"
 59 | 			@alphaInputStart="logEvent('alphaInputStart', $event)"
 60 | 			@alphaInputEnd="logEvent('alphaInputEnd', $event)"
 61 | 			@alphaInput="logEvent('alphaInput', $event)"
 62 | 			@saturationInputStart="logEvent('saturationInputStart', $event)"
 63 | 			@saturationInputEnd="logEvent('saturationInputEnd', $event)"
 64 | 			@saturationInput="logEvent('saturationInput', $event)"
 65 | 			@change="logEvent('change', $event)"
 66 | 			ref="colorInput" 
 67 | 		/>
 68 | 		<div class="detailsSection">
 69 | 			<div class="detailsBlock">
 70 | 				<h2>Style it</h2>
 71 | 				<div class="textarea-buttons">
 72 | 					<button @click="resetDemoStyles">Reset</button>
 73 | 					<button @click="clearDemoStyles">Clear</button>
 74 | 				</div>
 75 | 				<textarea
 76 | 				@input="updateStyles"
 77 | 				@keydown="textareaKeyHandler"
 78 | 				ref="textarea"
 79 | 				v-model="styles"
 80 | 				spellcheck="false">
 81 | 				</textarea>
 82 | 			</div>
 83 | 			<div class="detailsBlock">
 84 | 				<h2>Event Log</h2>
 85 | 				<div class="textarea-buttons right">
 86 | 					<button @pointerdown.prevent.stop @click="log = ''">Clear</button>
 87 | 					<button @pointerdown.prevent.stop @click="logEnabled = !logEnabled">{{ logEnabled ? 'Disable' : 'Enable' }}</button>
 88 | 				</div>
 89 | 				<div class="event-log-wrapper">
 90 | 					<textarea ref="eventLog" class="event-log" readonly v-text="log"></textarea>
 91 | 					<div :class="['log-overlay', { disabled: !logEnabled }]">
 92 | 						<h2 v-if="!logEnabled">Log disabled</h2>
 93 | 					</div>
 94 | 				</div>
 95 | 			</div>
 96 | 		</div>
 97 | 	</div>
 98 | </template>
 99 | 
100 | <script>
101 | 	import { defineComponent } from 'vue';
102 | 	import ColorInput from '../src/color-input.vue';
103 | 
104 | 	import demoStyles from './demo-styles.css?raw';
105 | 
106 | 	export default defineComponent({
107 | 		name: 'ServeDev',
108 | 		components: {
109 | 			ColorInput
110 | 		},
111 | 		data() {
112 | 			return {
113 | 				color: 'hsl(182, 41%, 75%)',
114 | 				linkColor: 'hsl(182, 41%, 52%)', // limited
115 | 				styles: demoStyles,
116 | 				position: 'bottom',
117 | 				disableAlpha: false,
118 | 				disabled: false,
119 | 				disableTextInputs: false,
120 | 				log: '',
121 | 				logEnabled: true,
122 | 				format: '',
123 | 				type: '',
124 | 				formatOptions: ['rgb', 'hex', 'hex8', 'name', 'hsl', 'hsv'],
125 | 			}
126 | 		},
127 | 		computed: {
128 | 			logStyles() {
129 | 				return {
130 | 					opacity: this.logEnabled ? 1 : .3
131 | 				}
132 | 			},
133 | 			hexNameSelected() {
134 | 				return ['hex','name'].includes(this.format);
135 | 			},
136 | 			typeOptions() {
137 | 				const options = { string: false, object: false };
138 | 				if (this.format) {
139 | 					if (['rgb','hsl','hsv'].includes(this.format)) {
140 | 						options.object = true;
141 | 					} else if (this.type === 'object') {
142 | 						this.type = '';
143 | 					}
144 | 					options.string = true;
145 | 				}
146 | 				return options;
147 | 			},
148 | 			colorString: {
149 | 				get() {
150 | 					let color = this.color;
151 | 					if (typeof color === 'object') {
152 | 						color = JSON.parse(JSON.stringify(color));
153 | 						for (let [k,v] of Object.entries(color)) {
154 | 							if (typeof v ==='number') color[k] = Number(v.toFixed(3));
155 | 						}
156 | 						color = JSON.stringify(color)
157 | 					}
158 | 					return color;
159 | 				},
160 | 				set(v) {
161 | 					if (/{.*}/.test(v.trim())) {
162 | 						v = v.replace(/'/g,'"');
163 | 						v = v.replace(/([{,])\s?(\w*)(:)/g, '$1"$2"$3'); // add quotes for parse
164 | 						try {
165 | 							v = JSON.parse(v);
166 | 						} catch(e) {}
167 | 					}
168 | 					this.color = v;
169 | 				}
170 | 			},
171 | 		},
172 | 		methods: {
173 | 			formatSelect(f) {
174 | 				this.format = (this.format === f) ? '' : f; 
175 | 			},
176 | 			typeSelect(t) {
177 | 				this.type = (this.type === t) ? '' : t; 
178 | 			},
179 | 			textareaKeyHandler(e) {
180 | 				const textarea = e.target;
181 | 				switch (e.key) {
182 | 					case 'Tab': {
183 | 						e.preventDefault();
184 | 						textarea.setRangeText('\t', textarea.selectionStart, textarea.selectionEnd, 'end');
185 | 						break;
186 | 					}
187 | 					case 'Enter': {
188 | 						const textBeforeInsertion = textarea.value.slice(0,textarea.selectionStart);
189 | 						const symbolBeforeInsertion = textBeforeInsertion.slice(-1);
190 | 						const symbolAfterInsertion = textarea.value.charAt(textarea.selectionEnd);
191 | 						if (symbolBeforeInsertion === '{' && symbolAfterInsertion === '}') {
192 | 							const finalPosition = textarea.selectionStart + 2;
193 | 							textarea.setRangeText('\n\t\n', textarea.selectionStart, textarea.selectionEnd, 'end');
194 | 							textarea.selectionStart = finalPosition;
195 | 							textarea.selectionEnd = finalPosition;
196 | 							e.preventDefault();
197 | 						}
198 | 						else if (textBeforeInsertion.split('{').length > textBeforeInsertion.split('}').length) {
199 | 							e.preventDefault();
200 | 							textarea.setRangeText('\n\t', textarea.selectionStart, textarea.selectionEnd, 'end');
201 | 						}
202 | 						break;
203 | 					}
204 | 					case '}': {
205 | 						const textBeforeInsertion = textarea.value.slice(0,textarea.selectionStart);
206 | 						const lineStartPosition = textBeforeInsertion.lastIndexOf('\n');
207 | 						const thisLine = textBeforeInsertion.slice(lineStartPosition);
208 | 						if (!thisLine.trim().length) textarea.setRangeText('', lineStartPosition + 1, textarea.selectionEnd, 'end');
209 | 						break;
210 | 					}
211 | 				}
212 | 			},
213 | 			resizeTextarea() {
214 | 				this.$refs.textarea.style.height = this.$refs.textarea.scrollHeight + 3 + 'px';
215 | 			},
216 | 			updateStyles() {
217 | 				this.styleSheet.innerText = this.styles;
218 | 			},
219 | 			logEvent(eventName, value='') {
220 | 				if (!this.logEnabled) return;
221 | 				const now = Date.now();
222 | 				if (this.lastLog[eventName] && now - this.lastLog[eventName] < 100) return;
223 | 				this.$refs.eventLog.scrollTop = 0;
224 | 				this.lastLog[eventName] = now;
225 | 
226 | 				if (typeof value === 'object') value = JSON.stringify(value);
227 | 				this.log = eventName + ' ' + value + '\n' + this.log;
228 | 			},
229 | 			resetDemoStyles() {
230 | 				this.styles = demoStyles;
231 | 				this.updateStyles();
232 | 			},
233 | 			clearDemoStyles() {
234 | 				this.styles = demoStyles.replace(/{[^{]*}/gm, '{}');
235 | 				this.updateStyles();
236 | 			}
237 | 		},
238 | 		created() {
239 | 			//create options for position dropdown
240 | 			const values = ['top','right','bottom','left'];
241 | 			const conflicts = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }
242 | 			this.positionOptions = values.flatMap((v, i) => values.map(q => {
243 | 				if (conflicts[v] === q) return false;
244 | 				return v === q ? v : v + ' ' + q;
245 | 			})).filter(v => v);
246 | 
247 | 			// empty object for log records
248 | 			this.lastLog = {};
249 | 		},
250 | 		mounted() {
251 | 			// style node for demo styles
252 | 			this.styleSheet = document.createElement("style");
253 | 			this.styleSheet.type = "text/css";
254 | 			this.styleSheet.innerText = this.styles;
255 | 			document.head.appendChild(this.styleSheet);
256 | 
257 | 			// textarea size
258 | 			this.resizeTextarea();
259 | 			// log initial size to match textarea
260 | 			this.$refs.eventLog.style.height = this.$refs.textarea.style.height;
261 | 
262 | 			//add code spans instead of `` in description blocks
263 | 			document.querySelectorAll('.detailsBlock p').forEach(p => {
264 | 				let result = p.innerHTML.replace(/([^`]*`[^`]*)`/gm, '$1</span>').replace(/`/gm, '<span class="code">');
265 | 				p.innerHTML = result;
266 | 			});
267 | 		},
268 | 		watch: {
269 | 			color() {
270 | 				let hsl = this.$refs.colorInput.color.clone().setAlpha(1).toHslString();
271 | 				let [h,s,l] = hsl.match(/\d+/g);
272 | 				const limit = 60 - 0.2 * s; // (0 => 60), (100 => 40)
273 | 				l = Math.min(limit, l); // limit l to calculated limit
274 | 				this.linkColor = `hsl(${h}, ${s}%, ${l}%)`
275 | 			}
276 | 		}
277 | 	});
278 | </script>
279 | 
280 | <style lang="scss">
281 | 	@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
282 | 	@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap');
283 | 	body {
284 | 		background: #fbfbfb;
285 | 		font-family: 'Montserrat', sans-serif;
286 | 		font-size: 16px;
287 | 	}
288 | 	#app {
289 | 		display: flex;
290 | 		flex-direction: column;
291 | 		align-items: center;
292 | 		text-align: center;
293 | 		width: 100%;
294 | 	}
295 | 	h1 {
296 | 		margin-bottom: 0;
297 | 	}
298 | 	.docs-link {
299 | 		margin-bottom: 20px;
300 | 		text-decoration: underline;
301 | 	}
302 | 	.setup {
303 | 		display: flex;
304 | 		justify-content: center;
305 | 		align-items: center;
306 | 		flex-wrap: wrap;
307 | 		margin-bottom: 20px;
308 | 	}
309 | 	.setup-block {
310 | 		flex: 0 1;
311 | 		margin: 10px;
312 | 		text-align: center;
313 | 		&.main {
314 | 			flex-basis: 100%;
315 | 			& .color-text {
316 | 				width: 380px;
317 | 				height: 40px;
318 | 			}
319 | 		}
320 | 	}
321 | 	.setup-block h3 {
322 | 		margin: 0;
323 | 		white-space: nowrap;
324 | 	}
325 | 	.setup-radio-button {
326 | 		font-size: .8em;
327 | 		border-radius: 5px;
328 | 		padding: 1px 4px;
329 | 		margin: 2px;
330 | 		background: #ddd;
331 | 		cursor: pointer;
332 | 		&:not(.disabled):hover {
333 | 			background: #ccc;
334 | 		}
335 | 		&.active {
336 | 			background: #aaa;
337 | 		}
338 | 		&.disabled {
339 | 			color: #777;
340 | 			cursor: default;
341 | 		}
342 | 	}
343 | 	input.color-text, select {
344 | 		font-family: inherit;
345 | 		font-size: 20px;
346 | 		outline: none;
347 | 		border-width: 0 0 1px 0;
348 | 		border-color: #0f0f0f;
349 | 		padding: 2px;
350 | 		background: inherit;
351 | 		box-sizing: border-box;
352 | 	}
353 | 	select {
354 | 		background-image: none;
355 | 		border-radius: 0;
356 | 		width: 230px;
357 | 		height: 30px;
358 | 	}
359 | 	input.chx {
360 | 		width: 30px;
361 | 		height: 30px;
362 | 		&.disabled {
363 | 			cursor: not-allowed;
364 | 		}
365 | 	}
366 | 	.detailsSection {
367 | 		display: flex;
368 | 		flex-wrap: wrap;
369 | 		flex-basis: 50%;
370 | 		width: 100%;
371 | 	}
372 | 	.detailsBlock {
373 | 		padding: 20px;
374 | 		text-align: left;
375 | 		position: relative;
376 | 		min-width: 350px;
377 | 		flex: 1 1;
378 | 	}
379 | 	.detailsBlock h2 {
380 | 		text-align: center;
381 | 	}
382 | 	textarea {
383 | 		tab-size: 3;
384 | 		width: 100%;
385 | 		max-width: 100%;
386 | 		padding: 10px;
387 | 		border-radius: 3px;
388 | 		font-size: 16px;
389 | 		box-sizing: border-box;
390 | 	}
391 | 	textarea, .code {
392 | 		font-family: 'Source Code Pro', monospace;
393 | 		background-color: #efefef;
394 | 	}
395 | 	.event-log-wrapper {
396 | 		position: relative;
397 | 	}
398 | 	.event-log {
399 | 		overflow-y: auto;
400 | 		overflow-x: hidden;
401 | 		resize: none;
402 | 		text-align: right;
403 | 	}
404 | 	.log-overlay {
405 | 		display: flex;
406 | 		align-items: center;
407 | 		justify-content: center;
408 | 		position: absolute;
409 | 		top: 0;
410 | 		left: 0;
411 | 		width: 100%;
412 | 		height: 100%;
413 | 		pointer-events: none;
414 | 		&.disabled {
415 | 			background: rgba(250,250,250,.8)
416 | 		}
417 | 	}
418 | 	.textarea-buttons {
419 | 		margin: 5px 0;
420 | 		&.right {
421 | 			text-align: right;
422 | 		}
423 | 	}
424 | 	.small {
425 | 		font-size: .8em;
426 | 	}
427 | 	button {
428 | 		margin-right: 5px;
429 | 	}
430 | 	.box-parent {
431 | 		position: relative;
432 | 	}
433 | </style>
434 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + Vue</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/dev/serve.js"></script>
12 |   </body>
13 | </html>
14 | 
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-color-input",
 3 |   "type": "module",
 4 |   "version": "2.0.0",
 5 |   "description": "Slick and perfomant vue 3 color picker component whose goal is to replace <input type=color>",
 6 |   "keywords": [
 7 |     "vue",
 8 |     "color",
 9 |     "input",
10 |     "picker",
11 |     "vue-color-input"
12 |   ],
13 |   "author": "Ivan Che <ivan.chepurin@gmail.com>",
14 |   "license": "MIT",
15 |   "repository": "gVguy/vue-color-input",
16 |   "files": [
17 |     "dist/*",
18 |     "src/**/*.vue",
19 |     "src/assets/*.svg"
20 |   ],
21 |   "sideEffects": [
22 |     "**/*.css"
23 |   ],
24 |   "main": "./dist/color-input.umd.cjs",
25 |   "module": "./dist/color-input.js",
26 |   "exports": {
27 |     ".": {
28 |       "import": "./dist/color-input.js",
29 |       "require": "./dist/color-input.umd.cjs"
30 |     }
31 |   },
32 |   "scripts": {
33 |     "dev": "vite dev",
34 |     "build": "vite build",
35 |     "build:demo": "vite build --config vite.config-demo.js",
36 |     "publish:demo": "gh-pages -d demo",
37 |     "prepublishOnly": "npm run build"
38 |   },
39 |   "dependencies": {
40 |     "tinycolor2": "^1.4.2"
41 |   },
42 |   "devDependencies": {
43 |     "@types/tinycolor2": "^1.4.6",
44 |     "@vitejs/plugin-vue": "^5.1.1",
45 |     "autoprefixer": "^10.3.7",
46 |     "gh-pages": "^3.2.3",
47 |     "postcss": "^8.2.10",
48 |     "sass": "^1.42.1",
49 |     "typescript": "^5.5.4",
50 |     "vite": "^5.3.5",
51 |     "vite-plugin-dts": "3.9.1",
52 |     "vite-plugin-lib-inject-css": "^2.1.1",
53 |     "vue": "^3.4.26",
54 |     "vue-tsc": "^2.0.29"
55 |   },
56 |   "peerDependencies": {
57 |     "vue": "^3.0.5"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
   1 | lockfileVersion: '6.0'
   2 | 
   3 | settings:
   4 |   autoInstallPeers: true
   5 |   excludeLinksFromLockfile: false
   6 | 
   7 | dependencies:
   8 |   tinycolor2:
   9 |     specifier: ^1.4.2
  10 |     version: 1.6.0
  11 | 
  12 | devDependencies:
  13 |   '@types/tinycolor2':
  14 |     specifier: ^1.4.6
  15 |     version: 1.4.6
  16 |   '@vitejs/plugin-vue':
  17 |     specifier: ^5.1.1
  18 |     version: 5.1.1(vite@5.3.5)(vue@3.4.35)
  19 |   autoprefixer:
  20 |     specifier: ^10.3.7
  21 |     version: 10.4.19(postcss@8.4.40)
  22 |   gh-pages:
  23 |     specifier: ^3.2.3
  24 |     version: 3.2.3
  25 |   postcss:
  26 |     specifier: ^8.2.10
  27 |     version: 8.4.40
  28 |   sass:
  29 |     specifier: ^1.42.1
  30 |     version: 1.77.8
  31 |   typescript:
  32 |     specifier: ^5.5.4
  33 |     version: 5.5.4
  34 |   vite:
  35 |     specifier: ^5.3.5
  36 |     version: 5.3.5(sass@1.77.8)
  37 |   vite-plugin-dts:
  38 |     specifier: 3.9.1
  39 |     version: 3.9.1(typescript@5.5.4)(vite@5.3.5)
  40 |   vite-plugin-lib-inject-css:
  41 |     specifier: ^2.1.1
  42 |     version: 2.1.1(vite@5.3.5)
  43 |   vue:
  44 |     specifier: ^3.4.26
  45 |     version: 3.4.35(typescript@5.5.4)
  46 |   vue-tsc:
  47 |     specifier: ^2.0.29
  48 |     version: 2.0.29(typescript@5.5.4)
  49 | 
  50 | packages:
  51 | 
  52 |   /@ast-grep/napi-darwin-arm64@0.22.6:
  53 |     resolution: {integrity: sha512-L9rEGJ8fNi5LxbZj860wbXxjX7DLNV799zcTaPOSzYadvNyhMY3LWvDXd45Vtx6Dh8QRtCoEMQmw8KaRCEjm9A==}
  54 |     engines: {node: '>= 10'}
  55 |     cpu: [arm64]
  56 |     os: [darwin]
  57 |     requiresBuild: true
  58 |     dev: true
  59 |     optional: true
  60 | 
  61 |   /@ast-grep/napi-darwin-x64@0.22.6:
  62 |     resolution: {integrity: sha512-0iuM6iDJNhcPd6a/JJr64AallR7ttGW/MvUujfQdvJEZY5p9LK35xm23dULznW0tIMgwtMKPRaprgk8LPondKg==}
  63 |     engines: {node: '>= 10'}
  64 |     cpu: [x64]
  65 |     os: [darwin]
  66 |     requiresBuild: true
  67 |     dev: true
  68 |     optional: true
  69 | 
  70 |   /@ast-grep/napi-linux-arm64-gnu@0.22.6:
  71 |     resolution: {integrity: sha512-9PAqNJlAQfFm1RW0DVCM/S4gFHdppxUTWacB3qEeJZXgdLnoH0KGQa4z3Xo559SPYDKZy0VnY02mZ3XJ+v6/Vw==}
  72 |     engines: {node: '>= 10'}
  73 |     cpu: [arm64]
  74 |     os: [linux]
  75 |     requiresBuild: true
  76 |     dev: true
  77 |     optional: true
  78 | 
  79 |   /@ast-grep/napi-linux-x64-gnu@0.22.6:
  80 |     resolution: {integrity: sha512-nZf+gxXVrZqvP1LN6HwzOMA4brF3umBXfMequQzv8S6HeJ4c34P23F0Tw8mHtQpVYP9PQWJUvt3LJQ8Xvd5Hiw==}
  81 |     engines: {node: '>= 10'}
  82 |     cpu: [x64]
  83 |     os: [linux]
  84 |     requiresBuild: true
  85 |     dev: true
  86 |     optional: true
  87 | 
  88 |   /@ast-grep/napi-linux-x64-musl@0.22.6:
  89 |     resolution: {integrity: sha512-gcJeBMgJQf2pZZo0lgH0Vg4ycyujM7Am8VlomXhavC/dPpkddA1tiHSIC4fCNneLU1EqHITy3ALSmM4GLdsjBw==}
  90 |     engines: {node: '>= 10'}
  91 |     cpu: [x64]
  92 |     os: [linux]
  93 |     requiresBuild: true
  94 |     dev: true
  95 |     optional: true
  96 | 
  97 |   /@ast-grep/napi-win32-arm64-msvc@0.22.6:
  98 |     resolution: {integrity: sha512-YDDzvPIyl4ti8xZfjvGSGVCX9JJjMQjyWPlXcwRpiLRnHThtHTDL8PyE2yq+gAPuZ28QbrygMkP9EKXIyYFVcQ==}
  99 |     engines: {node: '>= 10'}
 100 |     cpu: [arm64]
 101 |     os: [win32]
 102 |     requiresBuild: true
 103 |     dev: true
 104 |     optional: true
 105 | 
 106 |   /@ast-grep/napi-win32-ia32-msvc@0.22.6:
 107 |     resolution: {integrity: sha512-w5P0MDcBD3bifC2K9nCDEFYacy8HQnXdf6fX6cIE/7xL8XEDs6D1lQjGewrZDcMAXVXUQfupj4P27ZsJRmuIoQ==}
 108 |     engines: {node: '>= 10'}
 109 |     cpu: [ia32]
 110 |     os: [win32]
 111 |     requiresBuild: true
 112 |     dev: true
 113 |     optional: true
 114 | 
 115 |   /@ast-grep/napi-win32-x64-msvc@0.22.6:
 116 |     resolution: {integrity: sha512-1aaHvgsCBwUP0tDf4HXPMpUV/nUwsOWgRCiBc2zIJjdEjT9TTk795EIX9Z1Nc0OMCrxVEceyiKcYTofXa0Fpxw==}
 117 |     engines: {node: '>= 10'}
 118 |     cpu: [x64]
 119 |     os: [win32]
 120 |     requiresBuild: true
 121 |     dev: true
 122 |     optional: true
 123 | 
 124 |   /@ast-grep/napi@0.22.6:
 125 |     resolution: {integrity: sha512-kNF87HiI4omHC7VzyBZSvqOAXtMlSDRF2YX+O5ya0XKv/7/GYms1opLQ+BQ9twLLDj0WsSFX4MYg0TrinZTxTg==}
 126 |     engines: {node: '>= 10'}
 127 |     optionalDependencies:
 128 |       '@ast-grep/napi-darwin-arm64': 0.22.6
 129 |       '@ast-grep/napi-darwin-x64': 0.22.6
 130 |       '@ast-grep/napi-linux-arm64-gnu': 0.22.6
 131 |       '@ast-grep/napi-linux-x64-gnu': 0.22.6
 132 |       '@ast-grep/napi-linux-x64-musl': 0.22.6
 133 |       '@ast-grep/napi-win32-arm64-msvc': 0.22.6
 134 |       '@ast-grep/napi-win32-ia32-msvc': 0.22.6
 135 |       '@ast-grep/napi-win32-x64-msvc': 0.22.6
 136 |     dev: true
 137 | 
 138 |   /@babel/helper-string-parser@7.24.8:
 139 |     resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
 140 |     engines: {node: '>=6.9.0'}
 141 |     dev: true
 142 | 
 143 |   /@babel/helper-validator-identifier@7.24.7:
 144 |     resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
 145 |     engines: {node: '>=6.9.0'}
 146 |     dev: true
 147 | 
 148 |   /@babel/parser@7.25.0:
 149 |     resolution: {integrity: sha512-CzdIU9jdP0dg7HdyB+bHvDJGagUv+qtzZt5rYCWwW6tITNqV9odjp6Qu41gkG0ca5UfdDUWrKkiAnHHdGRnOrA==}
 150 |     engines: {node: '>=6.0.0'}
 151 |     hasBin: true
 152 |     dependencies:
 153 |       '@babel/types': 7.25.2
 154 |     dev: true
 155 | 
 156 |   /@babel/types@7.25.2:
 157 |     resolution: {integrity: sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==}
 158 |     engines: {node: '>=6.9.0'}
 159 |     dependencies:
 160 |       '@babel/helper-string-parser': 7.24.8
 161 |       '@babel/helper-validator-identifier': 7.24.7
 162 |       to-fast-properties: 2.0.0
 163 |     dev: true
 164 | 
 165 |   /@esbuild/aix-ppc64@0.21.5:
 166 |     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
 167 |     engines: {node: '>=12'}
 168 |     cpu: [ppc64]
 169 |     os: [aix]
 170 |     requiresBuild: true
 171 |     dev: true
 172 |     optional: true
 173 | 
 174 |   /@esbuild/android-arm64@0.21.5:
 175 |     resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
 176 |     engines: {node: '>=12'}
 177 |     cpu: [arm64]
 178 |     os: [android]
 179 |     requiresBuild: true
 180 |     dev: true
 181 |     optional: true
 182 | 
 183 |   /@esbuild/android-arm@0.21.5:
 184 |     resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
 185 |     engines: {node: '>=12'}
 186 |     cpu: [arm]
 187 |     os: [android]
 188 |     requiresBuild: true
 189 |     dev: true
 190 |     optional: true
 191 | 
 192 |   /@esbuild/android-x64@0.21.5:
 193 |     resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
 194 |     engines: {node: '>=12'}
 195 |     cpu: [x64]
 196 |     os: [android]
 197 |     requiresBuild: true
 198 |     dev: true
 199 |     optional: true
 200 | 
 201 |   /@esbuild/darwin-arm64@0.21.5:
 202 |     resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
 203 |     engines: {node: '>=12'}
 204 |     cpu: [arm64]
 205 |     os: [darwin]
 206 |     requiresBuild: true
 207 |     dev: true
 208 |     optional: true
 209 | 
 210 |   /@esbuild/darwin-x64@0.21.5:
 211 |     resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
 212 |     engines: {node: '>=12'}
 213 |     cpu: [x64]
 214 |     os: [darwin]
 215 |     requiresBuild: true
 216 |     dev: true
 217 |     optional: true
 218 | 
 219 |   /@esbuild/freebsd-arm64@0.21.5:
 220 |     resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
 221 |     engines: {node: '>=12'}
 222 |     cpu: [arm64]
 223 |     os: [freebsd]
 224 |     requiresBuild: true
 225 |     dev: true
 226 |     optional: true
 227 | 
 228 |   /@esbuild/freebsd-x64@0.21.5:
 229 |     resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
 230 |     engines: {node: '>=12'}
 231 |     cpu: [x64]
 232 |     os: [freebsd]
 233 |     requiresBuild: true
 234 |     dev: true
 235 |     optional: true
 236 | 
 237 |   /@esbuild/linux-arm64@0.21.5:
 238 |     resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
 239 |     engines: {node: '>=12'}
 240 |     cpu: [arm64]
 241 |     os: [linux]
 242 |     requiresBuild: true
 243 |     dev: true
 244 |     optional: true
 245 | 
 246 |   /@esbuild/linux-arm@0.21.5:
 247 |     resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
 248 |     engines: {node: '>=12'}
 249 |     cpu: [arm]
 250 |     os: [linux]
 251 |     requiresBuild: true
 252 |     dev: true
 253 |     optional: true
 254 | 
 255 |   /@esbuild/linux-ia32@0.21.5:
 256 |     resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
 257 |     engines: {node: '>=12'}
 258 |     cpu: [ia32]
 259 |     os: [linux]
 260 |     requiresBuild: true
 261 |     dev: true
 262 |     optional: true
 263 | 
 264 |   /@esbuild/linux-loong64@0.21.5:
 265 |     resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
 266 |     engines: {node: '>=12'}
 267 |     cpu: [loong64]
 268 |     os: [linux]
 269 |     requiresBuild: true
 270 |     dev: true
 271 |     optional: true
 272 | 
 273 |   /@esbuild/linux-mips64el@0.21.5:
 274 |     resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
 275 |     engines: {node: '>=12'}
 276 |     cpu: [mips64el]
 277 |     os: [linux]
 278 |     requiresBuild: true
 279 |     dev: true
 280 |     optional: true
 281 | 
 282 |   /@esbuild/linux-ppc64@0.21.5:
 283 |     resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
 284 |     engines: {node: '>=12'}
 285 |     cpu: [ppc64]
 286 |     os: [linux]
 287 |     requiresBuild: true
 288 |     dev: true
 289 |     optional: true
 290 | 
 291 |   /@esbuild/linux-riscv64@0.21.5:
 292 |     resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
 293 |     engines: {node: '>=12'}
 294 |     cpu: [riscv64]
 295 |     os: [linux]
 296 |     requiresBuild: true
 297 |     dev: true
 298 |     optional: true
 299 | 
 300 |   /@esbuild/linux-s390x@0.21.5:
 301 |     resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
 302 |     engines: {node: '>=12'}
 303 |     cpu: [s390x]
 304 |     os: [linux]
 305 |     requiresBuild: true
 306 |     dev: true
 307 |     optional: true
 308 | 
 309 |   /@esbuild/linux-x64@0.21.5:
 310 |     resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
 311 |     engines: {node: '>=12'}
 312 |     cpu: [x64]
 313 |     os: [linux]
 314 |     requiresBuild: true
 315 |     dev: true
 316 |     optional: true
 317 | 
 318 |   /@esbuild/netbsd-x64@0.21.5:
 319 |     resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
 320 |     engines: {node: '>=12'}
 321 |     cpu: [x64]
 322 |     os: [netbsd]
 323 |     requiresBuild: true
 324 |     dev: true
 325 |     optional: true
 326 | 
 327 |   /@esbuild/openbsd-x64@0.21.5:
 328 |     resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
 329 |     engines: {node: '>=12'}
 330 |     cpu: [x64]
 331 |     os: [openbsd]
 332 |     requiresBuild: true
 333 |     dev: true
 334 |     optional: true
 335 | 
 336 |   /@esbuild/sunos-x64@0.21.5:
 337 |     resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
 338 |     engines: {node: '>=12'}
 339 |     cpu: [x64]
 340 |     os: [sunos]
 341 |     requiresBuild: true
 342 |     dev: true
 343 |     optional: true
 344 | 
 345 |   /@esbuild/win32-arm64@0.21.5:
 346 |     resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
 347 |     engines: {node: '>=12'}
 348 |     cpu: [arm64]
 349 |     os: [win32]
 350 |     requiresBuild: true
 351 |     dev: true
 352 |     optional: true
 353 | 
 354 |   /@esbuild/win32-ia32@0.21.5:
 355 |     resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
 356 |     engines: {node: '>=12'}
 357 |     cpu: [ia32]
 358 |     os: [win32]
 359 |     requiresBuild: true
 360 |     dev: true
 361 |     optional: true
 362 | 
 363 |   /@esbuild/win32-x64@0.21.5:
 364 |     resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
 365 |     engines: {node: '>=12'}
 366 |     cpu: [x64]
 367 |     os: [win32]
 368 |     requiresBuild: true
 369 |     dev: true
 370 |     optional: true
 371 | 
 372 |   /@jridgewell/sourcemap-codec@1.5.0:
 373 |     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 374 |     dev: true
 375 | 
 376 |   /@microsoft/api-extractor-model@7.28.13:
 377 |     resolution: {integrity: sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==}
 378 |     dependencies:
 379 |       '@microsoft/tsdoc': 0.14.2
 380 |       '@microsoft/tsdoc-config': 0.16.2
 381 |       '@rushstack/node-core-library': 4.0.2
 382 |     transitivePeerDependencies:
 383 |       - '@types/node'
 384 |     dev: true
 385 | 
 386 |   /@microsoft/api-extractor@7.43.0:
 387 |     resolution: {integrity: sha512-GFhTcJpB+MI6FhvXEI9b2K0snulNLWHqC/BbcJtyNYcKUiw7l3Lgis5ApsYncJ0leALX7/of4XfmXk+maT111w==}
 388 |     hasBin: true
 389 |     dependencies:
 390 |       '@microsoft/api-extractor-model': 7.28.13
 391 |       '@microsoft/tsdoc': 0.14.2
 392 |       '@microsoft/tsdoc-config': 0.16.2
 393 |       '@rushstack/node-core-library': 4.0.2
 394 |       '@rushstack/rig-package': 0.5.2
 395 |       '@rushstack/terminal': 0.10.0
 396 |       '@rushstack/ts-command-line': 4.19.1
 397 |       lodash: 4.17.21
 398 |       minimatch: 3.0.8
 399 |       resolve: 1.22.8
 400 |       semver: 7.5.4
 401 |       source-map: 0.6.1
 402 |       typescript: 5.4.2
 403 |     transitivePeerDependencies:
 404 |       - '@types/node'
 405 |     dev: true
 406 | 
 407 |   /@microsoft/tsdoc-config@0.16.2:
 408 |     resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==}
 409 |     dependencies:
 410 |       '@microsoft/tsdoc': 0.14.2
 411 |       ajv: 6.12.6
 412 |       jju: 1.4.0
 413 |       resolve: 1.19.0
 414 |     dev: true
 415 | 
 416 |   /@microsoft/tsdoc@0.14.2:
 417 |     resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
 418 |     dev: true
 419 | 
 420 |   /@rollup/pluginutils@5.1.0:
 421 |     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
 422 |     engines: {node: '>=14.0.0'}
 423 |     peerDependencies:
 424 |       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
 425 |     peerDependenciesMeta:
 426 |       rollup:
 427 |         optional: true
 428 |     dependencies:
 429 |       '@types/estree': 1.0.5
 430 |       estree-walker: 2.0.2
 431 |       picomatch: 2.3.1
 432 |     dev: true
 433 | 
 434 |   /@rollup/rollup-android-arm-eabi@4.19.1:
 435 |     resolution: {integrity: sha512-XzqSg714++M+FXhHfXpS1tDnNZNpgxxuGZWlRG/jSj+VEPmZ0yg6jV4E0AL3uyBKxO8mO3xtOsP5mQ+XLfrlww==}
 436 |     cpu: [arm]
 437 |     os: [android]
 438 |     requiresBuild: true
 439 |     dev: true
 440 |     optional: true
 441 | 
 442 |   /@rollup/rollup-android-arm64@4.19.1:
 443 |     resolution: {integrity: sha512-thFUbkHteM20BGShD6P08aungq4irbIZKUNbG70LN8RkO7YztcGPiKTTGZS7Kw+x5h8hOXs0i4OaHwFxlpQN6A==}
 444 |     cpu: [arm64]
 445 |     os: [android]
 446 |     requiresBuild: true
 447 |     dev: true
 448 |     optional: true
 449 | 
 450 |   /@rollup/rollup-darwin-arm64@4.19.1:
 451 |     resolution: {integrity: sha512-8o6eqeFZzVLia2hKPUZk4jdE3zW7LCcZr+MD18tXkgBBid3lssGVAYuox8x6YHoEPDdDa9ixTaStcmx88lio5Q==}
 452 |     cpu: [arm64]
 453 |     os: [darwin]
 454 |     requiresBuild: true
 455 |     dev: true
 456 |     optional: true
 457 | 
 458 |   /@rollup/rollup-darwin-x64@4.19.1:
 459 |     resolution: {integrity: sha512-4T42heKsnbjkn7ovYiAdDVRRWZLU9Kmhdt6HafZxFcUdpjlBlxj4wDrt1yFWLk7G4+E+8p2C9tcmSu0KA6auGA==}
 460 |     cpu: [x64]
 461 |     os: [darwin]
 462 |     requiresBuild: true
 463 |     dev: true
 464 |     optional: true
 465 | 
 466 |   /@rollup/rollup-linux-arm-gnueabihf@4.19.1:
 467 |     resolution: {integrity: sha512-MXg1xp+e5GhZ3Vit1gGEyoC+dyQUBy2JgVQ+3hUrD9wZMkUw/ywgkpK7oZgnB6kPpGrxJ41clkPPnsknuD6M2Q==}
 468 |     cpu: [arm]
 469 |     os: [linux]
 470 |     requiresBuild: true
 471 |     dev: true
 472 |     optional: true
 473 | 
 474 |   /@rollup/rollup-linux-arm-musleabihf@4.19.1:
 475 |     resolution: {integrity: sha512-DZNLwIY4ftPSRVkJEaxYkq7u2zel7aah57HESuNkUnz+3bZHxwkCUkrfS2IWC1sxK6F2QNIR0Qr/YXw7nkF3Pw==}
 476 |     cpu: [arm]
 477 |     os: [linux]
 478 |     requiresBuild: true
 479 |     dev: true
 480 |     optional: true
 481 | 
 482 |   /@rollup/rollup-linux-arm64-gnu@4.19.1:
 483 |     resolution: {integrity: sha512-C7evongnjyxdngSDRRSQv5GvyfISizgtk9RM+z2biV5kY6S/NF/wta7K+DanmktC5DkuaJQgoKGf7KUDmA7RUw==}
 484 |     cpu: [arm64]
 485 |     os: [linux]
 486 |     requiresBuild: true
 487 |     dev: true
 488 |     optional: true
 489 | 
 490 |   /@rollup/rollup-linux-arm64-musl@4.19.1:
 491 |     resolution: {integrity: sha512-89tFWqxfxLLHkAthAcrTs9etAoBFRduNfWdl2xUs/yLV+7XDrJ5yuXMHptNqf1Zw0UCA3cAutkAiAokYCkaPtw==}
 492 |     cpu: [arm64]
 493 |     os: [linux]
 494 |     requiresBuild: true
 495 |     dev: true
 496 |     optional: true
 497 | 
 498 |   /@rollup/rollup-linux-powerpc64le-gnu@4.19.1:
 499 |     resolution: {integrity: sha512-PromGeV50sq+YfaisG8W3fd+Cl6mnOOiNv2qKKqKCpiiEke2KiKVyDqG/Mb9GWKbYMHj5a01fq/qlUR28PFhCQ==}
 500 |     cpu: [ppc64]
 501 |     os: [linux]
 502 |     requiresBuild: true
 503 |     dev: true
 504 |     optional: true
 505 | 
 506 |   /@rollup/rollup-linux-riscv64-gnu@4.19.1:
 507 |     resolution: {integrity: sha512-/1BmHYh+iz0cNCP0oHCuF8CSiNj0JOGf0jRlSo3L/FAyZyG2rGBuKpkZVH9YF+x58r1jgWxvm1aRg3DHrLDt6A==}
 508 |     cpu: [riscv64]
 509 |     os: [linux]
 510 |     requiresBuild: true
 511 |     dev: true
 512 |     optional: true
 513 | 
 514 |   /@rollup/rollup-linux-s390x-gnu@4.19.1:
 515 |     resolution: {integrity: sha512-0cYP5rGkQWRZKy9/HtsWVStLXzCF3cCBTRI+qRL8Z+wkYlqN7zrSYm6FuY5Kd5ysS5aH0q5lVgb/WbG4jqXN1Q==}
 516 |     cpu: [s390x]
 517 |     os: [linux]
 518 |     requiresBuild: true
 519 |     dev: true
 520 |     optional: true
 521 | 
 522 |   /@rollup/rollup-linux-x64-gnu@4.19.1:
 523 |     resolution: {integrity: sha512-XUXeI9eM8rMP8aGvii/aOOiMvTs7xlCosq9xCjcqI9+5hBxtjDpD+7Abm1ZhVIFE1J2h2VIg0t2DX/gjespC2Q==}
 524 |     cpu: [x64]
 525 |     os: [linux]
 526 |     requiresBuild: true
 527 |     dev: true
 528 |     optional: true
 529 | 
 530 |   /@rollup/rollup-linux-x64-musl@4.19.1:
 531 |     resolution: {integrity: sha512-V7cBw/cKXMfEVhpSvVZhC+iGifD6U1zJ4tbibjjN+Xi3blSXaj/rJynAkCFFQfoG6VZrAiP7uGVzL440Q6Me2Q==}
 532 |     cpu: [x64]
 533 |     os: [linux]
 534 |     requiresBuild: true
 535 |     dev: true
 536 |     optional: true
 537 | 
 538 |   /@rollup/rollup-win32-arm64-msvc@4.19.1:
 539 |     resolution: {integrity: sha512-88brja2vldW/76jWATlBqHEoGjJLRnP0WOEKAUbMcXaAZnemNhlAHSyj4jIwMoP2T750LE9lblvD4e2jXleZsA==}
 540 |     cpu: [arm64]
 541 |     os: [win32]
 542 |     requiresBuild: true
 543 |     dev: true
 544 |     optional: true
 545 | 
 546 |   /@rollup/rollup-win32-ia32-msvc@4.19.1:
 547 |     resolution: {integrity: sha512-LdxxcqRVSXi6k6JUrTah1rHuaupoeuiv38du8Mt4r4IPer3kwlTo+RuvfE8KzZ/tL6BhaPlzJ3835i6CxrFIRQ==}
 548 |     cpu: [ia32]
 549 |     os: [win32]
 550 |     requiresBuild: true
 551 |     dev: true
 552 |     optional: true
 553 | 
 554 |   /@rollup/rollup-win32-x64-msvc@4.19.1:
 555 |     resolution: {integrity: sha512-2bIrL28PcK3YCqD9anGxDxamxdiJAxA+l7fWIwM5o8UqNy1t3d1NdAweO2XhA0KTDJ5aH1FsuiT5+7VhtHliXg==}
 556 |     cpu: [x64]
 557 |     os: [win32]
 558 |     requiresBuild: true
 559 |     dev: true
 560 |     optional: true
 561 | 
 562 |   /@rushstack/node-core-library@4.0.2:
 563 |     resolution: {integrity: sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==}
 564 |     peerDependencies:
 565 |       '@types/node': '*'
 566 |     peerDependenciesMeta:
 567 |       '@types/node':
 568 |         optional: true
 569 |     dependencies:
 570 |       fs-extra: 7.0.1
 571 |       import-lazy: 4.0.0
 572 |       jju: 1.4.0
 573 |       resolve: 1.22.8
 574 |       semver: 7.5.4
 575 |       z-schema: 5.0.5
 576 |     dev: true
 577 | 
 578 |   /@rushstack/rig-package@0.5.2:
 579 |     resolution: {integrity: sha512-mUDecIJeH3yYGZs2a48k+pbhM6JYwWlgjs2Ca5f2n1G2/kgdgP9D/07oglEGf6mRyXEnazhEENeYTSNDRCwdqA==}
 580 |     dependencies:
 581 |       resolve: 1.22.8
 582 |       strip-json-comments: 3.1.1
 583 |     dev: true
 584 | 
 585 |   /@rushstack/terminal@0.10.0:
 586 |     resolution: {integrity: sha512-UbELbXnUdc7EKwfH2sb8ChqNgapUOdqcCIdQP4NGxBpTZV2sQyeekuK3zmfQSa/MN+/7b4kBogl2wq0vpkpYGw==}
 587 |     peerDependencies:
 588 |       '@types/node': '*'
 589 |     peerDependenciesMeta:
 590 |       '@types/node':
 591 |         optional: true
 592 |     dependencies:
 593 |       '@rushstack/node-core-library': 4.0.2
 594 |       supports-color: 8.1.1
 595 |     dev: true
 596 | 
 597 |   /@rushstack/ts-command-line@4.19.1:
 598 |     resolution: {integrity: sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==}
 599 |     dependencies:
 600 |       '@rushstack/terminal': 0.10.0
 601 |       '@types/argparse': 1.0.38
 602 |       argparse: 1.0.10
 603 |       string-argv: 0.3.2
 604 |     transitivePeerDependencies:
 605 |       - '@types/node'
 606 |     dev: true
 607 | 
 608 |   /@types/argparse@1.0.38:
 609 |     resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
 610 |     dev: true
 611 | 
 612 |   /@types/estree@1.0.5:
 613 |     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 614 |     dev: true
 615 | 
 616 |   /@types/tinycolor2@1.4.6:
 617 |     resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
 618 |     dev: true
 619 | 
 620 |   /@vitejs/plugin-vue@5.1.1(vite@5.3.5)(vue@3.4.35):
 621 |     resolution: {integrity: sha512-sDckXxlHpMsjRQbAH9WanangrfrblsOd3pNifePs+FOHjJg1jfWq5L/P0PsBRndEt3nmdUnmvieP8ULDeX5AvA==}
 622 |     engines: {node: ^18.0.0 || >=20.0.0}
 623 |     peerDependencies:
 624 |       vite: ^5.0.0
 625 |       vue: ^3.2.25
 626 |     dependencies:
 627 |       vite: 5.3.5(sass@1.77.8)
 628 |       vue: 3.4.35(typescript@5.5.4)
 629 |     dev: true
 630 | 
 631 |   /@volar/language-core@1.11.1:
 632 |     resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
 633 |     dependencies:
 634 |       '@volar/source-map': 1.11.1
 635 |     dev: true
 636 | 
 637 |   /@volar/language-core@2.4.0-alpha.18:
 638 |     resolution: {integrity: sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==}
 639 |     dependencies:
 640 |       '@volar/source-map': 2.4.0-alpha.18
 641 |     dev: true
 642 | 
 643 |   /@volar/source-map@1.11.1:
 644 |     resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==}
 645 |     dependencies:
 646 |       muggle-string: 0.3.1
 647 |     dev: true
 648 | 
 649 |   /@volar/source-map@2.4.0-alpha.18:
 650 |     resolution: {integrity: sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==}
 651 |     dev: true
 652 | 
 653 |   /@volar/typescript@1.11.1:
 654 |     resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==}
 655 |     dependencies:
 656 |       '@volar/language-core': 1.11.1
 657 |       path-browserify: 1.0.1
 658 |     dev: true
 659 | 
 660 |   /@volar/typescript@2.4.0-alpha.18:
 661 |     resolution: {integrity: sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==}
 662 |     dependencies:
 663 |       '@volar/language-core': 2.4.0-alpha.18
 664 |       path-browserify: 1.0.1
 665 |       vscode-uri: 3.0.8
 666 |     dev: true
 667 | 
 668 |   /@vue/compiler-core@3.4.35:
 669 |     resolution: {integrity: sha512-gKp0zGoLnMYtw4uS/SJRRO7rsVggLjvot3mcctlMXunYNsX+aRJDqqw/lV5/gHK91nvaAAlWFgdVl020AW1Prg==}
 670 |     dependencies:
 671 |       '@babel/parser': 7.25.0
 672 |       '@vue/shared': 3.4.35
 673 |       entities: 4.5.0
 674 |       estree-walker: 2.0.2
 675 |       source-map-js: 1.2.0
 676 |     dev: true
 677 | 
 678 |   /@vue/compiler-dom@3.4.35:
 679 |     resolution: {integrity: sha512-pWIZRL76/oE/VMhdv/ovZfmuooEni6JPG1BFe7oLk5DZRo/ImydXijoZl/4kh2406boRQ7lxTYzbZEEXEhj9NQ==}
 680 |     dependencies:
 681 |       '@vue/compiler-core': 3.4.35
 682 |       '@vue/shared': 3.4.35
 683 |     dev: true
 684 | 
 685 |   /@vue/compiler-sfc@3.4.35:
 686 |     resolution: {integrity: sha512-xacnRS/h/FCsjsMfxBkzjoNxyxEyKyZfBch/P4vkLRvYJwe5ChXmZZrj8Dsed/752H2Q3JE8kYu9Uyha9J6PgA==}
 687 |     dependencies:
 688 |       '@babel/parser': 7.25.0
 689 |       '@vue/compiler-core': 3.4.35
 690 |       '@vue/compiler-dom': 3.4.35
 691 |       '@vue/compiler-ssr': 3.4.35
 692 |       '@vue/shared': 3.4.35
 693 |       estree-walker: 2.0.2
 694 |       magic-string: 0.30.11
 695 |       postcss: 8.4.40
 696 |       source-map-js: 1.2.0
 697 |     dev: true
 698 | 
 699 |   /@vue/compiler-ssr@3.4.35:
 700 |     resolution: {integrity: sha512-7iynB+0KB1AAJKk/biENTV5cRGHRdbdaD7Mx3nWcm1W8bVD6QmnH3B4AHhQQ1qZHhqFwzEzMwiytXm3PX1e60A==}
 701 |     dependencies:
 702 |       '@vue/compiler-dom': 3.4.35
 703 |       '@vue/shared': 3.4.35
 704 |     dev: true
 705 | 
 706 |   /@vue/compiler-vue2@2.7.16:
 707 |     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 708 |     dependencies:
 709 |       de-indent: 1.0.2
 710 |       he: 1.2.0
 711 |     dev: true
 712 | 
 713 |   /@vue/language-core@1.8.27(typescript@5.5.4):
 714 |     resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
 715 |     peerDependencies:
 716 |       typescript: '*'
 717 |     peerDependenciesMeta:
 718 |       typescript:
 719 |         optional: true
 720 |     dependencies:
 721 |       '@volar/language-core': 1.11.1
 722 |       '@volar/source-map': 1.11.1
 723 |       '@vue/compiler-dom': 3.4.35
 724 |       '@vue/shared': 3.4.35
 725 |       computeds: 0.0.1
 726 |       minimatch: 9.0.5
 727 |       muggle-string: 0.3.1
 728 |       path-browserify: 1.0.1
 729 |       typescript: 5.5.4
 730 |       vue-template-compiler: 2.7.16
 731 |     dev: true
 732 | 
 733 |   /@vue/language-core@2.0.29(typescript@5.5.4):
 734 |     resolution: {integrity: sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==}
 735 |     peerDependencies:
 736 |       typescript: '*'
 737 |     peerDependenciesMeta:
 738 |       typescript:
 739 |         optional: true
 740 |     dependencies:
 741 |       '@volar/language-core': 2.4.0-alpha.18
 742 |       '@vue/compiler-dom': 3.4.35
 743 |       '@vue/compiler-vue2': 2.7.16
 744 |       '@vue/shared': 3.4.35
 745 |       computeds: 0.0.1
 746 |       minimatch: 9.0.5
 747 |       muggle-string: 0.4.1
 748 |       path-browserify: 1.0.1
 749 |       typescript: 5.5.4
 750 |     dev: true
 751 | 
 752 |   /@vue/reactivity@3.4.35:
 753 |     resolution: {integrity: sha512-Ggtz7ZZHakriKioveJtPlStYardwQH6VCs9V13/4qjHSQb/teE30LVJNrbBVs4+aoYGtTQKJbTe4CWGxVZrvEw==}
 754 |     dependencies:
 755 |       '@vue/shared': 3.4.35
 756 |     dev: true
 757 | 
 758 |   /@vue/runtime-core@3.4.35:
 759 |     resolution: {integrity: sha512-D+BAjFoWwT5wtITpSxwqfWZiBClhBbR+bm0VQlWYFOadUUXFo+5wbe9ErXhLvwguPiLZdEF13QAWi2vP3ZD5tA==}
 760 |     dependencies:
 761 |       '@vue/reactivity': 3.4.35
 762 |       '@vue/shared': 3.4.35
 763 |     dev: true
 764 | 
 765 |   /@vue/runtime-dom@3.4.35:
 766 |     resolution: {integrity: sha512-yGOlbos+MVhlS5NWBF2HDNgblG8e2MY3+GigHEyR/dREAluvI5tuUUgie3/9XeqhPE4LF0i2wjlduh5thnfOqw==}
 767 |     dependencies:
 768 |       '@vue/reactivity': 3.4.35
 769 |       '@vue/runtime-core': 3.4.35
 770 |       '@vue/shared': 3.4.35
 771 |       csstype: 3.1.3
 772 |     dev: true
 773 | 
 774 |   /@vue/server-renderer@3.4.35(vue@3.4.35):
 775 |     resolution: {integrity: sha512-iZ0e/u9mRE4T8tNhlo0tbA+gzVkgv8r5BX6s1kRbOZqfpq14qoIvCZ5gIgraOmYkMYrSEZgkkojFPr+Nyq/Mnw==}
 776 |     peerDependencies:
 777 |       vue: 3.4.35
 778 |     dependencies:
 779 |       '@vue/compiler-ssr': 3.4.35
 780 |       '@vue/shared': 3.4.35
 781 |       vue: 3.4.35(typescript@5.5.4)
 782 |     dev: true
 783 | 
 784 |   /@vue/shared@3.4.35:
 785 |     resolution: {integrity: sha512-hvuhBYYDe+b1G8KHxsQ0diDqDMA8D9laxWZhNAjE83VZb5UDaXl9Xnz7cGdDSyiHM90qqI/CyGMcpBpiDy6VVQ==}
 786 |     dev: true
 787 | 
 788 |   /ajv@6.12.6:
 789 |     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 790 |     dependencies:
 791 |       fast-deep-equal: 3.1.3
 792 |       fast-json-stable-stringify: 2.1.0
 793 |       json-schema-traverse: 0.4.1
 794 |       uri-js: 4.4.1
 795 |     dev: true
 796 | 
 797 |   /anymatch@3.1.3:
 798 |     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
 799 |     engines: {node: '>= 8'}
 800 |     dependencies:
 801 |       normalize-path: 3.0.0
 802 |       picomatch: 2.3.1
 803 |     dev: true
 804 | 
 805 |   /argparse@1.0.10:
 806 |     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 807 |     dependencies:
 808 |       sprintf-js: 1.0.3
 809 |     dev: true
 810 | 
 811 |   /array-union@1.0.2:
 812 |     resolution: {integrity: sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==}
 813 |     engines: {node: '>=0.10.0'}
 814 |     dependencies:
 815 |       array-uniq: 1.0.3
 816 |     dev: true
 817 | 
 818 |   /array-uniq@1.0.3:
 819 |     resolution: {integrity: sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==}
 820 |     engines: {node: '>=0.10.0'}
 821 |     dev: true
 822 | 
 823 |   /async@2.6.4:
 824 |     resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
 825 |     dependencies:
 826 |       lodash: 4.17.21
 827 |     dev: true
 828 | 
 829 |   /autoprefixer@10.4.19(postcss@8.4.40):
 830 |     resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
 831 |     engines: {node: ^10 || ^12 || >=14}
 832 |     hasBin: true
 833 |     peerDependencies:
 834 |       postcss: ^8.1.0
 835 |     dependencies:
 836 |       browserslist: 4.23.2
 837 |       caniuse-lite: 1.0.30001645
 838 |       fraction.js: 4.3.7
 839 |       normalize-range: 0.1.2
 840 |       picocolors: 1.0.1
 841 |       postcss: 8.4.40
 842 |       postcss-value-parser: 4.2.0
 843 |     dev: true
 844 | 
 845 |   /balanced-match@1.0.2:
 846 |     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 847 |     dev: true
 848 | 
 849 |   /binary-extensions@2.3.0:
 850 |     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
 851 |     engines: {node: '>=8'}
 852 |     dev: true
 853 | 
 854 |   /brace-expansion@1.1.11:
 855 |     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 856 |     dependencies:
 857 |       balanced-match: 1.0.2
 858 |       concat-map: 0.0.1
 859 |     dev: true
 860 | 
 861 |   /brace-expansion@2.0.1:
 862 |     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 863 |     dependencies:
 864 |       balanced-match: 1.0.2
 865 |     dev: true
 866 | 
 867 |   /braces@3.0.3:
 868 |     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
 869 |     engines: {node: '>=8'}
 870 |     dependencies:
 871 |       fill-range: 7.1.1
 872 |     dev: true
 873 | 
 874 |   /browserslist@4.23.2:
 875 |     resolution: {integrity: sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==}
 876 |     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
 877 |     hasBin: true
 878 |     dependencies:
 879 |       caniuse-lite: 1.0.30001645
 880 |       electron-to-chromium: 1.5.4
 881 |       node-releases: 2.0.18
 882 |       update-browserslist-db: 1.1.0(browserslist@4.23.2)
 883 |     dev: true
 884 | 
 885 |   /caniuse-lite@1.0.30001645:
 886 |     resolution: {integrity: sha512-GFtY2+qt91kzyMk6j48dJcwJVq5uTkk71XxE3RtScx7XWRLsO7bU44LOFkOZYR8w9YMS0UhPSYpN/6rAMImmLw==}
 887 |     dev: true
 888 | 
 889 |   /chokidar@3.6.0:
 890 |     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
 891 |     engines: {node: '>= 8.10.0'}
 892 |     dependencies:
 893 |       anymatch: 3.1.3
 894 |       braces: 3.0.3
 895 |       glob-parent: 5.1.2
 896 |       is-binary-path: 2.1.0
 897 |       is-glob: 4.0.3
 898 |       normalize-path: 3.0.0
 899 |       readdirp: 3.6.0
 900 |     optionalDependencies:
 901 |       fsevents: 2.3.3
 902 |     dev: true
 903 | 
 904 |   /commander@2.20.3:
 905 |     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 906 |     dev: true
 907 | 
 908 |   /commander@9.5.0:
 909 |     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
 910 |     engines: {node: ^12.20.0 || >=14}
 911 |     requiresBuild: true
 912 |     dev: true
 913 |     optional: true
 914 | 
 915 |   /commondir@1.0.1:
 916 |     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 917 |     dev: true
 918 | 
 919 |   /computeds@0.0.1:
 920 |     resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
 921 |     dev: true
 922 | 
 923 |   /concat-map@0.0.1:
 924 |     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 925 |     dev: true
 926 | 
 927 |   /csstype@3.1.3:
 928 |     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 929 |     dev: true
 930 | 
 931 |   /de-indent@1.0.2:
 932 |     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 933 |     dev: true
 934 | 
 935 |   /debug@4.3.6:
 936 |     resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
 937 |     engines: {node: '>=6.0'}
 938 |     peerDependencies:
 939 |       supports-color: '*'
 940 |     peerDependenciesMeta:
 941 |       supports-color:
 942 |         optional: true
 943 |     dependencies:
 944 |       ms: 2.1.2
 945 |     dev: true
 946 | 
 947 |   /electron-to-chromium@1.5.4:
 948 |     resolution: {integrity: sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==}
 949 |     dev: true
 950 | 
 951 |   /email-addresses@3.1.0:
 952 |     resolution: {integrity: sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==}
 953 |     dev: true
 954 | 
 955 |   /entities@4.5.0:
 956 |     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
 957 |     engines: {node: '>=0.12'}
 958 |     dev: true
 959 | 
 960 |   /esbuild@0.21.5:
 961 |     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
 962 |     engines: {node: '>=12'}
 963 |     hasBin: true
 964 |     requiresBuild: true
 965 |     optionalDependencies:
 966 |       '@esbuild/aix-ppc64': 0.21.5
 967 |       '@esbuild/android-arm': 0.21.5
 968 |       '@esbuild/android-arm64': 0.21.5
 969 |       '@esbuild/android-x64': 0.21.5
 970 |       '@esbuild/darwin-arm64': 0.21.5
 971 |       '@esbuild/darwin-x64': 0.21.5
 972 |       '@esbuild/freebsd-arm64': 0.21.5
 973 |       '@esbuild/freebsd-x64': 0.21.5
 974 |       '@esbuild/linux-arm': 0.21.5
 975 |       '@esbuild/linux-arm64': 0.21.5
 976 |       '@esbuild/linux-ia32': 0.21.5
 977 |       '@esbuild/linux-loong64': 0.21.5
 978 |       '@esbuild/linux-mips64el': 0.21.5
 979 |       '@esbuild/linux-ppc64': 0.21.5
 980 |       '@esbuild/linux-riscv64': 0.21.5
 981 |       '@esbuild/linux-s390x': 0.21.5
 982 |       '@esbuild/linux-x64': 0.21.5
 983 |       '@esbuild/netbsd-x64': 0.21.5
 984 |       '@esbuild/openbsd-x64': 0.21.5
 985 |       '@esbuild/sunos-x64': 0.21.5
 986 |       '@esbuild/win32-arm64': 0.21.5
 987 |       '@esbuild/win32-ia32': 0.21.5
 988 |       '@esbuild/win32-x64': 0.21.5
 989 |     dev: true
 990 | 
 991 |   /escalade@3.1.2:
 992 |     resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
 993 |     engines: {node: '>=6'}
 994 |     dev: true
 995 | 
 996 |   /escape-string-regexp@1.0.5:
 997 |     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
 998 |     engines: {node: '>=0.8.0'}
 999 |     dev: true
1000 | 
1001 |   /estree-walker@2.0.2:
1002 |     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
1003 |     dev: true
1004 | 
1005 |   /fast-deep-equal@3.1.3:
1006 |     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
1007 |     dev: true
1008 | 
1009 |   /fast-json-stable-stringify@2.1.0:
1010 |     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
1011 |     dev: true
1012 | 
1013 |   /filename-reserved-regex@2.0.0:
1014 |     resolution: {integrity: sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==}
1015 |     engines: {node: '>=4'}
1016 |     dev: true
1017 | 
1018 |   /filenamify@4.3.0:
1019 |     resolution: {integrity: sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==}
1020 |     engines: {node: '>=8'}
1021 |     dependencies:
1022 |       filename-reserved-regex: 2.0.0
1023 |       strip-outer: 1.0.1
1024 |       trim-repeated: 1.0.0
1025 |     dev: true
1026 | 
1027 |   /fill-range@7.1.1:
1028 |     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
1029 |     engines: {node: '>=8'}
1030 |     dependencies:
1031 |       to-regex-range: 5.0.1
1032 |     dev: true
1033 | 
1034 |   /find-cache-dir@3.3.2:
1035 |     resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
1036 |     engines: {node: '>=8'}
1037 |     dependencies:
1038 |       commondir: 1.0.1
1039 |       make-dir: 3.1.0
1040 |       pkg-dir: 4.2.0
1041 |     dev: true
1042 | 
1043 |   /find-up@4.1.0:
1044 |     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
1045 |     engines: {node: '>=8'}
1046 |     dependencies:
1047 |       locate-path: 5.0.0
1048 |       path-exists: 4.0.0
1049 |     dev: true
1050 | 
1051 |   /fraction.js@4.3.7:
1052 |     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
1053 |     dev: true
1054 | 
1055 |   /fs-extra@7.0.1:
1056 |     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
1057 |     engines: {node: '>=6 <7 || >=8'}
1058 |     dependencies:
1059 |       graceful-fs: 4.2.11
1060 |       jsonfile: 4.0.0
1061 |       universalify: 0.1.2
1062 |     dev: true
1063 | 
1064 |   /fs-extra@8.1.0:
1065 |     resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
1066 |     engines: {node: '>=6 <7 || >=8'}
1067 |     dependencies:
1068 |       graceful-fs: 4.2.11
1069 |       jsonfile: 4.0.0
1070 |       universalify: 0.1.2
1071 |     dev: true
1072 | 
1073 |   /fs.realpath@1.0.0:
1074 |     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
1075 |     dev: true
1076 | 
1077 |   /fsevents@2.3.3:
1078 |     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
1079 |     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
1080 |     os: [darwin]
1081 |     requiresBuild: true
1082 |     dev: true
1083 |     optional: true
1084 | 
1085 |   /function-bind@1.1.2:
1086 |     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
1087 |     dev: true
1088 | 
1089 |   /gh-pages@3.2.3:
1090 |     resolution: {integrity: sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==}
1091 |     engines: {node: '>=10'}
1092 |     hasBin: true
1093 |     dependencies:
1094 |       async: 2.6.4
1095 |       commander: 2.20.3
1096 |       email-addresses: 3.1.0
1097 |       filenamify: 4.3.0
1098 |       find-cache-dir: 3.3.2
1099 |       fs-extra: 8.1.0
1100 |       globby: 6.1.0
1101 |     dev: true
1102 | 
1103 |   /glob-parent@5.1.2:
1104 |     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
1105 |     engines: {node: '>= 6'}
1106 |     dependencies:
1107 |       is-glob: 4.0.3
1108 |     dev: true
1109 | 
1110 |   /glob@7.2.3:
1111 |     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
1112 |     deprecated: Glob versions prior to v9 are no longer supported
1113 |     dependencies:
1114 |       fs.realpath: 1.0.0
1115 |       inflight: 1.0.6
1116 |       inherits: 2.0.4
1117 |       minimatch: 3.1.2
1118 |       once: 1.4.0
1119 |       path-is-absolute: 1.0.1
1120 |     dev: true
1121 | 
1122 |   /globby@6.1.0:
1123 |     resolution: {integrity: sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==}
1124 |     engines: {node: '>=0.10.0'}
1125 |     dependencies:
1126 |       array-union: 1.0.2
1127 |       glob: 7.2.3
1128 |       object-assign: 4.1.1
1129 |       pify: 2.3.0
1130 |       pinkie-promise: 2.0.1
1131 |     dev: true
1132 | 
1133 |   /graceful-fs@4.2.11:
1134 |     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
1135 |     dev: true
1136 | 
1137 |   /has-flag@4.0.0:
1138 |     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
1139 |     engines: {node: '>=8'}
1140 |     dev: true
1141 | 
1142 |   /hasown@2.0.2:
1143 |     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
1144 |     engines: {node: '>= 0.4'}
1145 |     dependencies:
1146 |       function-bind: 1.1.2
1147 |     dev: true
1148 | 
1149 |   /he@1.2.0:
1150 |     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
1151 |     hasBin: true
1152 |     dev: true
1153 | 
1154 |   /immutable@4.3.7:
1155 |     resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
1156 |     dev: true
1157 | 
1158 |   /import-lazy@4.0.0:
1159 |     resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
1160 |     engines: {node: '>=8'}
1161 |     dev: true
1162 | 
1163 |   /inflight@1.0.6:
1164 |     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
1165 |     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
1166 |     dependencies:
1167 |       once: 1.4.0
1168 |       wrappy: 1.0.2
1169 |     dev: true
1170 | 
1171 |   /inherits@2.0.4:
1172 |     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
1173 |     dev: true
1174 | 
1175 |   /is-binary-path@2.1.0:
1176 |     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
1177 |     engines: {node: '>=8'}
1178 |     dependencies:
1179 |       binary-extensions: 2.3.0
1180 |     dev: true
1181 | 
1182 |   /is-core-module@2.15.0:
1183 |     resolution: {integrity: sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==}
1184 |     engines: {node: '>= 0.4'}
1185 |     dependencies:
1186 |       hasown: 2.0.2
1187 |     dev: true
1188 | 
1189 |   /is-extglob@2.1.1:
1190 |     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
1191 |     engines: {node: '>=0.10.0'}
1192 |     dev: true
1193 | 
1194 |   /is-glob@4.0.3:
1195 |     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
1196 |     engines: {node: '>=0.10.0'}
1197 |     dependencies:
1198 |       is-extglob: 2.1.1
1199 |     dev: true
1200 | 
1201 |   /is-number@7.0.0:
1202 |     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
1203 |     engines: {node: '>=0.12.0'}
1204 |     dev: true
1205 | 
1206 |   /jju@1.4.0:
1207 |     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
1208 |     dev: true
1209 | 
1210 |   /json-schema-traverse@0.4.1:
1211 |     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
1212 |     dev: true
1213 | 
1214 |   /jsonfile@4.0.0:
1215 |     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
1216 |     optionalDependencies:
1217 |       graceful-fs: 4.2.11
1218 |     dev: true
1219 | 
1220 |   /kolorist@1.8.0:
1221 |     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
1222 |     dev: true
1223 | 
1224 |   /locate-path@5.0.0:
1225 |     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
1226 |     engines: {node: '>=8'}
1227 |     dependencies:
1228 |       p-locate: 4.1.0
1229 |     dev: true
1230 | 
1231 |   /lodash.get@4.4.2:
1232 |     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
1233 |     dev: true
1234 | 
1235 |   /lodash.isequal@4.5.0:
1236 |     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
1237 |     dev: true
1238 | 
1239 |   /lodash@4.17.21:
1240 |     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
1241 |     dev: true
1242 | 
1243 |   /lru-cache@6.0.0:
1244 |     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
1245 |     engines: {node: '>=10'}
1246 |     dependencies:
1247 |       yallist: 4.0.0
1248 |     dev: true
1249 | 
1250 |   /magic-string@0.30.11:
1251 |     resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
1252 |     dependencies:
1253 |       '@jridgewell/sourcemap-codec': 1.5.0
1254 |     dev: true
1255 | 
1256 |   /make-dir@3.1.0:
1257 |     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
1258 |     engines: {node: '>=8'}
1259 |     dependencies:
1260 |       semver: 6.3.1
1261 |     dev: true
1262 | 
1263 |   /minimatch@3.0.8:
1264 |     resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==}
1265 |     dependencies:
1266 |       brace-expansion: 1.1.11
1267 |     dev: true
1268 | 
1269 |   /minimatch@3.1.2:
1270 |     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
1271 |     dependencies:
1272 |       brace-expansion: 1.1.11
1273 |     dev: true
1274 | 
1275 |   /minimatch@9.0.5:
1276 |     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
1277 |     engines: {node: '>=16 || 14 >=14.17'}
1278 |     dependencies:
1279 |       brace-expansion: 2.0.1
1280 |     dev: true
1281 | 
1282 |   /ms@2.1.2:
1283 |     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
1284 |     dev: true
1285 | 
1286 |   /muggle-string@0.3.1:
1287 |     resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
1288 |     dev: true
1289 | 
1290 |   /muggle-string@0.4.1:
1291 |     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
1292 |     dev: true
1293 | 
1294 |   /nanoid@3.3.7:
1295 |     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
1296 |     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
1297 |     hasBin: true
1298 |     dev: true
1299 | 
1300 |   /node-releases@2.0.18:
1301 |     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
1302 |     dev: true
1303 | 
1304 |   /normalize-path@3.0.0:
1305 |     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
1306 |     engines: {node: '>=0.10.0'}
1307 |     dev: true
1308 | 
1309 |   /normalize-range@0.1.2:
1310 |     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
1311 |     engines: {node: '>=0.10.0'}
1312 |     dev: true
1313 | 
1314 |   /object-assign@4.1.1:
1315 |     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
1316 |     engines: {node: '>=0.10.0'}
1317 |     dev: true
1318 | 
1319 |   /once@1.4.0:
1320 |     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
1321 |     dependencies:
1322 |       wrappy: 1.0.2
1323 |     dev: true
1324 | 
1325 |   /p-limit@2.3.0:
1326 |     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
1327 |     engines: {node: '>=6'}
1328 |     dependencies:
1329 |       p-try: 2.2.0
1330 |     dev: true
1331 | 
1332 |   /p-locate@4.1.0:
1333 |     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
1334 |     engines: {node: '>=8'}
1335 |     dependencies:
1336 |       p-limit: 2.3.0
1337 |     dev: true
1338 | 
1339 |   /p-try@2.2.0:
1340 |     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
1341 |     engines: {node: '>=6'}
1342 |     dev: true
1343 | 
1344 |   /path-browserify@1.0.1:
1345 |     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
1346 |     dev: true
1347 | 
1348 |   /path-exists@4.0.0:
1349 |     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
1350 |     engines: {node: '>=8'}
1351 |     dev: true
1352 | 
1353 |   /path-is-absolute@1.0.1:
1354 |     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
1355 |     engines: {node: '>=0.10.0'}
1356 |     dev: true
1357 | 
1358 |   /path-parse@1.0.7:
1359 |     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
1360 |     dev: true
1361 | 
1362 |   /picocolors@1.0.1:
1363 |     resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
1364 |     dev: true
1365 | 
1366 |   /picomatch@2.3.1:
1367 |     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
1368 |     engines: {node: '>=8.6'}
1369 |     dev: true
1370 | 
1371 |   /pify@2.3.0:
1372 |     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
1373 |     engines: {node: '>=0.10.0'}
1374 |     dev: true
1375 | 
1376 |   /pinkie-promise@2.0.1:
1377 |     resolution: {integrity: sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==}
1378 |     engines: {node: '>=0.10.0'}
1379 |     dependencies:
1380 |       pinkie: 2.0.4
1381 |     dev: true
1382 | 
1383 |   /pinkie@2.0.4:
1384 |     resolution: {integrity: sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==}
1385 |     engines: {node: '>=0.10.0'}
1386 |     dev: true
1387 | 
1388 |   /pkg-dir@4.2.0:
1389 |     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
1390 |     engines: {node: '>=8'}
1391 |     dependencies:
1392 |       find-up: 4.1.0
1393 |     dev: true
1394 | 
1395 |   /postcss-value-parser@4.2.0:
1396 |     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
1397 |     dev: true
1398 | 
1399 |   /postcss@8.4.40:
1400 |     resolution: {integrity: sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==}
1401 |     engines: {node: ^10 || ^12 || >=14}
1402 |     dependencies:
1403 |       nanoid: 3.3.7
1404 |       picocolors: 1.0.1
1405 |       source-map-js: 1.2.0
1406 |     dev: true
1407 | 
1408 |   /punycode@2.3.1:
1409 |     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
1410 |     engines: {node: '>=6'}
1411 |     dev: true
1412 | 
1413 |   /readdirp@3.6.0:
1414 |     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
1415 |     engines: {node: '>=8.10.0'}
1416 |     dependencies:
1417 |       picomatch: 2.3.1
1418 |     dev: true
1419 | 
1420 |   /resolve@1.19.0:
1421 |     resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==}
1422 |     dependencies:
1423 |       is-core-module: 2.15.0
1424 |       path-parse: 1.0.7
1425 |     dev: true
1426 | 
1427 |   /resolve@1.22.8:
1428 |     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
1429 |     hasBin: true
1430 |     dependencies:
1431 |       is-core-module: 2.15.0
1432 |       path-parse: 1.0.7
1433 |       supports-preserve-symlinks-flag: 1.0.0
1434 |     dev: true
1435 | 
1436 |   /rollup@4.19.1:
1437 |     resolution: {integrity: sha512-K5vziVlg7hTpYfFBI+91zHBEMo6jafYXpkMlqZjg7/zhIG9iHqazBf4xz9AVdjS9BruRn280ROqLI7G3OFRIlw==}
1438 |     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
1439 |     hasBin: true
1440 |     dependencies:
1441 |       '@types/estree': 1.0.5
1442 |     optionalDependencies:
1443 |       '@rollup/rollup-android-arm-eabi': 4.19.1
1444 |       '@rollup/rollup-android-arm64': 4.19.1
1445 |       '@rollup/rollup-darwin-arm64': 4.19.1
1446 |       '@rollup/rollup-darwin-x64': 4.19.1
1447 |       '@rollup/rollup-linux-arm-gnueabihf': 4.19.1
1448 |       '@rollup/rollup-linux-arm-musleabihf': 4.19.1
1449 |       '@rollup/rollup-linux-arm64-gnu': 4.19.1
1450 |       '@rollup/rollup-linux-arm64-musl': 4.19.1
1451 |       '@rollup/rollup-linux-powerpc64le-gnu': 4.19.1
1452 |       '@rollup/rollup-linux-riscv64-gnu': 4.19.1
1453 |       '@rollup/rollup-linux-s390x-gnu': 4.19.1
1454 |       '@rollup/rollup-linux-x64-gnu': 4.19.1
1455 |       '@rollup/rollup-linux-x64-musl': 4.19.1
1456 |       '@rollup/rollup-win32-arm64-msvc': 4.19.1
1457 |       '@rollup/rollup-win32-ia32-msvc': 4.19.1
1458 |       '@rollup/rollup-win32-x64-msvc': 4.19.1
1459 |       fsevents: 2.3.3
1460 |     dev: true
1461 | 
1462 |   /sass@1.77.8:
1463 |     resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==}
1464 |     engines: {node: '>=14.0.0'}
1465 |     hasBin: true
1466 |     dependencies:
1467 |       chokidar: 3.6.0
1468 |       immutable: 4.3.7
1469 |       source-map-js: 1.2.0
1470 |     dev: true
1471 | 
1472 |   /semver@6.3.1:
1473 |     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
1474 |     hasBin: true
1475 |     dev: true
1476 | 
1477 |   /semver@7.5.4:
1478 |     resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
1479 |     engines: {node: '>=10'}
1480 |     hasBin: true
1481 |     dependencies:
1482 |       lru-cache: 6.0.0
1483 |     dev: true
1484 | 
1485 |   /semver@7.6.3:
1486 |     resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
1487 |     engines: {node: '>=10'}
1488 |     hasBin: true
1489 |     dev: true
1490 | 
1491 |   /source-map-js@1.2.0:
1492 |     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
1493 |     engines: {node: '>=0.10.0'}
1494 |     dev: true
1495 | 
1496 |   /source-map@0.6.1:
1497 |     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
1498 |     engines: {node: '>=0.10.0'}
1499 |     dev: true
1500 | 
1501 |   /sprintf-js@1.0.3:
1502 |     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
1503 |     dev: true
1504 | 
1505 |   /string-argv@0.3.2:
1506 |     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
1507 |     engines: {node: '>=0.6.19'}
1508 |     dev: true
1509 | 
1510 |   /strip-json-comments@3.1.1:
1511 |     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
1512 |     engines: {node: '>=8'}
1513 |     dev: true
1514 | 
1515 |   /strip-outer@1.0.1:
1516 |     resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==}
1517 |     engines: {node: '>=0.10.0'}
1518 |     dependencies:
1519 |       escape-string-regexp: 1.0.5
1520 |     dev: true
1521 | 
1522 |   /supports-color@8.1.1:
1523 |     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
1524 |     engines: {node: '>=10'}
1525 |     dependencies:
1526 |       has-flag: 4.0.0
1527 |     dev: true
1528 | 
1529 |   /supports-preserve-symlinks-flag@1.0.0:
1530 |     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
1531 |     engines: {node: '>= 0.4'}
1532 |     dev: true
1533 | 
1534 |   /tinycolor2@1.6.0:
1535 |     resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
1536 |     dev: false
1537 | 
1538 |   /to-fast-properties@2.0.0:
1539 |     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
1540 |     engines: {node: '>=4'}
1541 |     dev: true
1542 | 
1543 |   /to-regex-range@5.0.1:
1544 |     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
1545 |     engines: {node: '>=8.0'}
1546 |     dependencies:
1547 |       is-number: 7.0.0
1548 |     dev: true
1549 | 
1550 |   /trim-repeated@1.0.0:
1551 |     resolution: {integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==}
1552 |     engines: {node: '>=0.10.0'}
1553 |     dependencies:
1554 |       escape-string-regexp: 1.0.5
1555 |     dev: true
1556 | 
1557 |   /typescript@5.4.2:
1558 |     resolution: {integrity: sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==}
1559 |     engines: {node: '>=14.17'}
1560 |     hasBin: true
1561 |     dev: true
1562 | 
1563 |   /typescript@5.5.4:
1564 |     resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
1565 |     engines: {node: '>=14.17'}
1566 |     hasBin: true
1567 |     dev: true
1568 | 
1569 |   /universalify@0.1.2:
1570 |     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
1571 |     engines: {node: '>= 4.0.0'}
1572 |     dev: true
1573 | 
1574 |   /update-browserslist-db@1.1.0(browserslist@4.23.2):
1575 |     resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
1576 |     hasBin: true
1577 |     peerDependencies:
1578 |       browserslist: '>= 4.21.0'
1579 |     dependencies:
1580 |       browserslist: 4.23.2
1581 |       escalade: 3.1.2
1582 |       picocolors: 1.0.1
1583 |     dev: true
1584 | 
1585 |   /uri-js@4.4.1:
1586 |     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
1587 |     dependencies:
1588 |       punycode: 2.3.1
1589 |     dev: true
1590 | 
1591 |   /validator@13.12.0:
1592 |     resolution: {integrity: sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==}
1593 |     engines: {node: '>= 0.10'}
1594 |     dev: true
1595 | 
1596 |   /vite-plugin-dts@3.9.1(typescript@5.5.4)(vite@5.3.5):
1597 |     resolution: {integrity: sha512-rVp2KM9Ue22NGWB8dNtWEr+KekN3rIgz1tWD050QnRGlriUCmaDwa7qA5zDEjbXg5lAXhYMSBJtx3q3hQIJZSg==}
1598 |     engines: {node: ^14.18.0 || >=16.0.0}
1599 |     peerDependencies:
1600 |       typescript: '*'
1601 |       vite: '*'
1602 |     peerDependenciesMeta:
1603 |       vite:
1604 |         optional: true
1605 |     dependencies:
1606 |       '@microsoft/api-extractor': 7.43.0
1607 |       '@rollup/pluginutils': 5.1.0
1608 |       '@vue/language-core': 1.8.27(typescript@5.5.4)
1609 |       debug: 4.3.6
1610 |       kolorist: 1.8.0
1611 |       magic-string: 0.30.11
1612 |       typescript: 5.5.4
1613 |       vite: 5.3.5(sass@1.77.8)
1614 |       vue-tsc: 1.8.27(typescript@5.5.4)
1615 |     transitivePeerDependencies:
1616 |       - '@types/node'
1617 |       - rollup
1618 |       - supports-color
1619 |     dev: true
1620 | 
1621 |   /vite-plugin-lib-inject-css@2.1.1(vite@5.3.5):
1622 |     resolution: {integrity: sha512-RIMeVnqBK/8I0E9nnQWzws6pdj5ilRMPJSnXYb6nWxNR4EmDPnksnb/ACoR5Fy7QfzULqS4gtQMrjwnNCC9zoA==}
1623 |     peerDependencies:
1624 |       vite: '*'
1625 |     dependencies:
1626 |       '@ast-grep/napi': 0.22.6
1627 |       magic-string: 0.30.11
1628 |       picocolors: 1.0.1
1629 |       vite: 5.3.5(sass@1.77.8)
1630 |     dev: true
1631 | 
1632 |   /vite@5.3.5(sass@1.77.8):
1633 |     resolution: {integrity: sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==}
1634 |     engines: {node: ^18.0.0 || >=20.0.0}
1635 |     hasBin: true
1636 |     peerDependencies:
1637 |       '@types/node': ^18.0.0 || >=20.0.0
1638 |       less: '*'
1639 |       lightningcss: ^1.21.0
1640 |       sass: '*'
1641 |       stylus: '*'
1642 |       sugarss: '*'
1643 |       terser: ^5.4.0
1644 |     peerDependenciesMeta:
1645 |       '@types/node':
1646 |         optional: true
1647 |       less:
1648 |         optional: true
1649 |       lightningcss:
1650 |         optional: true
1651 |       sass:
1652 |         optional: true
1653 |       stylus:
1654 |         optional: true
1655 |       sugarss:
1656 |         optional: true
1657 |       terser:
1658 |         optional: true
1659 |     dependencies:
1660 |       esbuild: 0.21.5
1661 |       postcss: 8.4.40
1662 |       rollup: 4.19.1
1663 |       sass: 1.77.8
1664 |     optionalDependencies:
1665 |       fsevents: 2.3.3
1666 |     dev: true
1667 | 
1668 |   /vscode-uri@3.0.8:
1669 |     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
1670 |     dev: true
1671 | 
1672 |   /vue-template-compiler@2.7.16:
1673 |     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
1674 |     dependencies:
1675 |       de-indent: 1.0.2
1676 |       he: 1.2.0
1677 |     dev: true
1678 | 
1679 |   /vue-tsc@1.8.27(typescript@5.5.4):
1680 |     resolution: {integrity: sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==}
1681 |     hasBin: true
1682 |     peerDependencies:
1683 |       typescript: '*'
1684 |     dependencies:
1685 |       '@volar/typescript': 1.11.1
1686 |       '@vue/language-core': 1.8.27(typescript@5.5.4)
1687 |       semver: 7.6.3
1688 |       typescript: 5.5.4
1689 |     dev: true
1690 | 
1691 |   /vue-tsc@2.0.29(typescript@5.5.4):
1692 |     resolution: {integrity: sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==}
1693 |     hasBin: true
1694 |     peerDependencies:
1695 |       typescript: '>=5.0.0'
1696 |     dependencies:
1697 |       '@volar/typescript': 2.4.0-alpha.18
1698 |       '@vue/language-core': 2.0.29(typescript@5.5.4)
1699 |       semver: 7.6.3
1700 |       typescript: 5.5.4
1701 |     dev: true
1702 | 
1703 |   /vue@3.4.35(typescript@5.5.4):
1704 |     resolution: {integrity: sha512-+fl/GLmI4GPileHftVlCdB7fUL4aziPcqTudpTGXCT8s+iZWuOCeNEB5haX6Uz2IpRrbEXOgIFbe+XciCuGbNQ==}
1705 |     peerDependencies:
1706 |       typescript: '*'
1707 |     peerDependenciesMeta:
1708 |       typescript:
1709 |         optional: true
1710 |     dependencies:
1711 |       '@vue/compiler-dom': 3.4.35
1712 |       '@vue/compiler-sfc': 3.4.35
1713 |       '@vue/runtime-dom': 3.4.35
1714 |       '@vue/server-renderer': 3.4.35(vue@3.4.35)
1715 |       '@vue/shared': 3.4.35
1716 |       typescript: 5.5.4
1717 |     dev: true
1718 | 
1719 |   /wrappy@1.0.2:
1720 |     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
1721 |     dev: true
1722 | 
1723 |   /yallist@4.0.0:
1724 |     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
1725 |     dev: true
1726 | 
1727 |   /z-schema@5.0.5:
1728 |     resolution: {integrity: sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==}
1729 |     engines: {node: '>=8.0.0'}
1730 |     hasBin: true
1731 |     dependencies:
1732 |       lodash.get: 4.4.2
1733 |       lodash.isequal: 4.5.0
1734 |       validator: 13.12.0
1735 |     optionalDependencies:
1736 |       commander: 9.5.0
1737 |     dev: true
1738 | 


--------------------------------------------------------------------------------
/src/assets/transparent-pattern.svg:
--------------------------------------------------------------------------------
1 | <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg">
2 |   <rect height="5" width="5" y="0" x="0" fill="#cccccc" shape-rendering="crispEdges"/>
3 |   <rect height="5" width="5" y="5" x="5" fill="#cccccc" shape-rendering="crispEdges"/>
4 | </svg>


--------------------------------------------------------------------------------
/src/bem.ts:
--------------------------------------------------------------------------------
 1 | const ROOT_CLASS = 'color-input'
 2 | export function bem(className: string, state = {}) {
 3 | 	const baseClass = `${ROOT_CLASS}__${className}`
 4 | 	const result: Record<string, boolean> = {}
 5 | 	result[baseClass] = true
 6 | 	for (const [key, value] of Object.entries(state)) {
 7 | 		result[`${baseClass}--${key}`] = !!value
 8 | 	}
 9 | 	return result
10 | }
11 | 


--------------------------------------------------------------------------------
/src/color-input.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div
  3 |       :class="[$attrs.class, bem('box', { disabled, active })]"
  4 |       @click.stop="pickStart"
  5 |       ref="root"
  6 |     >
  7 |       <div
  8 | 	:class="bem('box-inner', { active })"
  9 | 	:style="transparentPatternBg"
 10 |       >
 11 |         <div :class="bem('box-color')" :style="boxColorStyles"></div>
 12 |       </div>
 13 |     </div>
 14 | 
 15 |     <Teleport to="body">
 16 |       <transition :name="transition">
 17 |         <color-picker
 18 | 	  v-if="color"
 19 | 	  :class="$attrs.class"
 20 |           :color="color"
 21 |           :position="processedPosition"
 22 |           :disable-alpha="processedDisableAlpha"
 23 |           :boxRect="boxRect"
 24 |           :disable-text-inputs="disableTextInputs"
 25 |           v-show="active"
 26 |           :style="{ visibility: hidePicker ? 'hidden' : '' }"
 27 |           @ready="hidePicker = false"
 28 |           @updateColor="emitUpdate"
 29 |           @hueInputStart="$emit('hueInputStart', $event)"
 30 |           @hueInputEnd="$emit('hueInputEnd', $event)"
 31 |           @hueInput="$emit('hueInput', $event)"
 32 |           @alphaInputStart="$emit('alphaInputStart', $event)"
 33 |           @alphaInputEnd="$emit('alphaInputEnd', $event)"
 34 |           @alphaInput="$emit('alphaInput', $event)"
 35 |           @saturationInputStart="$emit('saturationInputStart', $event)"
 36 |           @saturationInputEnd="$emit('saturationInputEnd', $event)"
 37 |           @saturationInput="$emit('saturationInput', $event)"
 38 |           @change="$emit('change', $event)"
 39 |           ref="picker"
 40 |         />
 41 |       </transition>
 42 |     </Teleport>
 43 | </template>
 44 | 
 45 | <script setup lang="ts">
 46 | import { ref, shallowRef, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
 47 | import type { ColorInputWithoutInstance } from 'tinycolor2'
 48 | import tinycolor from "tinycolor2";
 49 | import { bem } from './bem'
 50 | import { allowedPosition, allowedFormat, Format, Position, FormatCategory, FormatType } from './types'
 51 | import transparentPattern from "./assets/transparent-pattern.svg";
 52 | import ColorPicker from "./components/color-picker.vue";
 53 | 
 54 | 
 55 | const isSameNodeRecursive = (elA: HTMLElement, elB: HTMLElement) => {
 56 |   while (!/^(body|html)$/i.test(elA.tagName)) {
 57 |     if (elA === elB) return true;
 58 |     elA = elA.parentNode as HTMLElement;
 59 |   }
 60 |   return false;
 61 | };
 62 | 
 63 | 
 64 | 
 65 | const props = withDefaults(defineProps<{
 66 |   format?: Format;
 67 |   position?: Position;
 68 |   transition?: string;
 69 |   disableAlpha?: boolean;
 70 |   disabled?: boolean;
 71 |   disableTextInputs?: boolean;
 72 | }>(), {
 73 |   format: 'rgb',
 74 |   position: 'bottom',
 75 |   transition: 'color-input__popup-',
 76 | });
 77 | 
 78 | 
 79 | const modelValue = defineModel<string|Record<string, number>>({ required: true })
 80 | 
 81 | 
 82 | const emit = defineEmits([
 83 |   'mounted',
 84 |   'beforeUnmount',
 85 |   'update:modelValue',
 86 |   'pickStart',
 87 |   'pickEnd',
 88 |   'hueInputStart',
 89 |   'hueInputEnd',
 90 |   'hueInput',
 91 |   'alphaInputStart',
 92 |   'alphaInputEnd',
 93 |   'alphaInput',
 94 |   'saturationInputStart',
 95 |   'saturationInputEnd',
 96 |   'saturationInput',
 97 |   'change',
 98 | ])
 99 | 
100 | 
101 | const color = shallowRef<ReturnType<typeof tinycolor> | null>(null);
102 | const active = ref(false);
103 | const ready = ref(false);
104 | const hidePicker = ref(false);
105 | const boxRect = ref({} as DOMRect);
106 | const originalFormatCategory = ref<FormatCategory>('rgb');
107 | const originalFormatType = ref<FormatType>('string');
108 | 
109 | const output = ref<string|object|null>(null);
110 | const root = ref<HTMLElement|null>(null);
111 | const picker = ref<any>(null); // picker instance
112 | 
113 | const transparentPatternBg = computed(() => ({
114 |   backgroundImage: `url(${transparentPattern})`,
115 | }));
116 | 
117 | const boxColorStyles = computed(() => ({
118 |   background: color.value?.toRgbString(),
119 | }));
120 | 
121 | const processedPosition = computed(() => {
122 |   let position = props.position.toLowerCase() as Position;
123 |   if (!allowedPosition.includes(position)) {
124 |     if (position) {
125 |       console.warn('[vue-color-input]: invalid position -> ' + position);
126 |     }
127 |     position = 'bottom center';
128 |   }
129 |   const positionArr = position.split(' ') as ('top'|'right'|'bottom'|'left'|'center')[];
130 |   positionArr[1] = positionArr[1] || 'center';
131 | 
132 |   if (
133 |     ['top', 'bottom'].includes(positionArr[0]) ||
134 |     ['right', 'left'].includes(positionArr[1])
135 |   )
136 |     return positionArr;
137 |   positionArr.reverse();
138 |   return positionArr;
139 | });
140 | 
141 | const processedFormat = computed(() => {
142 |   let propsFormat = props.format;
143 |   let formatCategory: FormatCategory
144 |   let force = false;
145 |   if (propsFormat) {
146 |     propsFormat = propsFormat.toLowerCase() as FormatCategory;
147 |     if (!allowedFormat.includes(propsFormat)) {
148 |       console.warn('[vue-color-input]: invalid format -> ' + propsFormat);
149 |       formatCategory = originalFormatCategory.value;
150 |     } else {
151 |       force = true;
152 |     }
153 |   } else {
154 |     formatCategory = originalFormatCategory.value;
155 |   }
156 | 
157 |   const formatArr = propsFormat.split(' ');
158 |   let type: FormatType;
159 |   const idx = formatArr.findIndex((f) => ['string', 'object'].includes(f));
160 |   if (idx < 0) {
161 |     type = ['rgb', 'hsv', 'hsl'].includes(propsFormat[0]) ? originalFormatType.value : 'string';
162 |   } else {
163 |     type = formatArr.splice(idx, 1)[0] as FormatType;
164 |   }
165 |   formatCategory = formatArr[0] as FormatCategory;
166 | 
167 |   return { type, format: formatCategory, force };
168 | });
169 | 
170 | const processedDisableAlpha = computed(() => {
171 |   const format = processedFormat.value;
172 |   if (format.force && ['hex', 'name'].includes(format.format)) {
173 |     return true;
174 |   } else {
175 |     return props.disableAlpha;
176 |   }
177 | });
178 | 
179 | const pickStart = () => {
180 |   if (active.value || props.disabled) return;
181 |   getBoxRect();
182 |   active.value = true;
183 | 
184 |   ready.value = false;
185 |   hidePicker.value = true;
186 |   picker.value.init();
187 | 
188 |   document.addEventListener('pointerdown', pickEnd);
189 |   window.addEventListener('resize', getBoxRect);
190 |   emit('pickStart');
191 | };
192 | 
193 | const pickEnd = (e?: Event) => {
194 |   if (
195 |     !active.value ||
196 |     (e && isSameNodeRecursive(e.target as HTMLElement, picker.value.$refs.pickerRoot))
197 |   )
198 |     return;
199 |   document.removeEventListener('pointerdown', pickEnd);
200 |   window.removeEventListener('resize', getBoxRect);
201 |   active.value = false;
202 |   emit('pickEnd');
203 | };
204 | 
205 | const init = () => {
206 |   color.value = tinycolor(modelValue.value as ColorInputWithoutInstance);
207 | 
208 |   let format = color.value.getFormat() as FormatCategory|undefined;
209 |   originalFormatCategory.value = format ? format : 'rgb';
210 |   let type = typeof modelValue.value;
211 |   originalFormatType.value = ['string', 'object'].includes(type) ? type as FormatType : 'string';
212 |   processedFormat.value;
213 | 
214 |   output.value = null;
215 | 
216 |   if (!color.value.isValid()) {
217 |     console.warn('[vue-color-input]: invalid color -> ' + color.value.getOriginalInput());
218 |   }
219 | };
220 | 
221 | const emitUpdate = (hsv?: {h:number;s:number;v:number;a?:number}) => {
222 |   if (hsv) color.value = tinycolor(hsv);
223 | 
224 |   let format = processedFormat.value.format;
225 |   if (color.value!.getAlpha() < 1 && ['hex', 'name'].includes(format)) {
226 |     if (processedFormat.value.force) {
227 |       color.value!.setAlpha(1);
228 |     } else {
229 |       format = 'rgb';
230 |     }
231 |   }
232 |   if (processedFormat.value.type === 'object') {
233 |     output.value = color.value?.[
234 |       'to' + format.charAt(0).toUpperCase() + format.slice(1) as 'toRgb'
235 |     ]() || null;
236 |   } else {
237 |     output.value = color.value!.toString(processedFormat.value.format);
238 |   }
239 |   emit('update:modelValue', output.value);
240 | };
241 | 
242 | const getBoxRect = () => {
243 |   boxRect.value = root.value!.getBoundingClientRect();
244 | };
245 | 
246 | 
247 | onMounted(() => {
248 |   init();
249 |   emit('mounted');
250 | });
251 | 
252 | onBeforeUnmount(() => {
253 |   pickEnd();
254 |   emit('beforeUnmount');
255 | });
256 | 
257 | watch(
258 |   () => modelValue.value,
259 |   () => {
260 |     let input =
261 |       typeof modelValue.value === 'object'
262 |         ? JSON.stringify(modelValue.value)
263 |         : modelValue.value;
264 |     let outputStr =
265 |       typeof output.value === 'object'
266 |         ? JSON.stringify(output.value)
267 |         : output.value;
268 |     if (input !== outputStr) {
269 |       init();
270 |       if (active.value) {
271 |         nextTick(() => {
272 |           picker.value.init();
273 |         });
274 |       }
275 |     }
276 |   }
277 | );
278 | 
279 | watch(
280 |   () => props.disabled,
281 |   () => {
282 |     pickEnd();
283 |   }
284 | );
285 | 
286 | watch(
287 |   () => processedDisableAlpha.value,
288 |   (newVal) => {
289 |     if (newVal) {
290 |       color.value!.setAlpha(1);
291 |       emitUpdate();
292 |     }
293 |     if (active.value)
294 |       nextTick(() => {
295 |         picker.value.init();
296 |       });
297 |   }
298 | );
299 | 
300 | watch(
301 |   () => props.format,
302 |   () => {
303 |     emitUpdate();
304 |   }
305 | );
306 | 
307 | 
308 | defineExpose({
309 |   pickStart,
310 |   pickEnd,
311 |   color,
312 |   active
313 | })
314 | 
315 | </script>
316 | 
317 | <style lang="scss">
318 | %fill-100 {
319 |   width: 100%;
320 |   height: 100%;
321 | }
322 | .color-input {
323 |   position: relative;
324 |   display: inline-block;
325 | 
326 |   &__box {
327 |     width: 40px;
328 |     height: 40px;
329 |     cursor: pointer;
330 |     border-radius: 20%;
331 |     overflow: hidden;
332 |     transition: background-color 0.05s 0.15s;
333 |     &-inner {
334 |       border-radius: inherit;
335 |       overflow: hidden;
336 |       transition: transform .2s;
337 |       @extend %fill-100;
338 |       background-color: #fff;
339 |       background-size: 100%;
340 |       &--active {
341 |         transform: scale(0.9);
342 |       }
343 |     }
344 |     &-color {
345 |       @extend %fill-100;
346 |     }
347 |     &--active {
348 |       background: #fbfbfb;
349 |       transition: all 0.2s, background-color 0.05s;
350 |     }
351 |     &--disabled {
352 |       cursor: not-allowed;
353 |     }
354 |   }
355 | }
356 | 
357 | </style>
358 | 


--------------------------------------------------------------------------------
/src/components/color-picker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div
  3 | 		ref="pickerRoot"
  4 | 		:style="[
  5 | 			pickerPosition,
  6 | 			{
  7 | 				'--box-width': boxRect.width + 'px',
  8 | 				'--box-height': boxRect.height + 'px'
  9 | 			}
 10 | 		]"
 11 | 		:class="bem('popup', {
 12 | 			[position[0]]: true,
 13 | 			[position[1]]: true,
 14 | 			[position.join('-')]: true
 15 | 		})"
 16 | 	>
 17 | 		<div :class="bem('saturation-area')" :style="pureHueBackground" @pointerdown="saturationPickStart">
 18 | 			<canvas :class="bem('slider-canvas')" ref="saturationCanvas"></canvas>
 19 | 			<div :class="bem('saturation-pointer')" ref="saturationPointer" :style="[saturationPointerStyles, {background: hexString}]"></div>
 20 | 		</div>
 21 | 		<div :class="bem('slider')" @pointerdown="huePickStart">
 22 | 			<div :class="bem('slider-container')">
 23 | 				<canvas :class="bem('slider-canvas')" ref="hueCanvas"></canvas>
 24 | 			</div>
 25 | 			<div :class="bem('slider-active-area')">
 26 | 				<div :class="bem('slider-pointer')" ref="huePointer" :style="[ huePointerStyles, pureHueBackground ]"></div>
 27 | 			</div>
 28 | 		</div>
 29 | 		<div v-if="!disableAlpha" :class="bem('slider')" @pointerdown="alphaPickStart">
 30 | 			<div
 31 | 				:class="bem('slider-container')"
 32 | 				:style="transparentPatternBg"
 33 | 			>
 34 | 				<div :class="bem('slider-canvas')" ref="alphaCanvas" :style="alphaCanvasStyles"></div>
 35 | 			</div>
 36 | 			<div :class="bem('slider-active-area')">
 37 | 				<div :class="bem('slider-pointer')" ref="alphaPointer" :style="alphaPointerStyles">
 38 | 					<div
 39 | 						:class="bem('pointer-transparent')"
 40 | 						:style="[alphaPointerTransparentStyles, transparentPatternBg]"
 41 | 					>
 42 | 						<div
 43 | 							:class="bem('pointer-color')"
 44 | 							:style="[alphaPointerColorStyles, {background: hexString}]" />
 45 | 					</div>
 46 | 				</div>
 47 | 			</div>
 48 | 		</div>
 49 | 		<div :class="bem('text-inputs-area')" v-if="!disableTextInputs" :style="{'--outline-color': hexString}">
 50 | 			<div :class="bem('text-inputs-wrapper')">
 51 | 				<div
 52 | 					v-for="value, key in (textInputActive) ? textInputsFreeze : textInputs" 
 53 | 					:key="'text-input-' + key"
 54 | 					:class="bem('text-input-container')"
 55 | 				>
 56 | 					<label :for="'text-input-' + key">{{key}}</label>
 57 | 					<input
 58 | 						:value="value"
 59 | 						:class="bem('text-input', { [key]: true })"
 60 | 						autocomplete="off"
 61 | 						spellcheck="false" 
 62 | 						:id="'text-input-' + key"
 63 | 						:data-component="key"
 64 | 						@input.prevent="textInputInputHandler"
 65 | 						@focus="textInputFocusHandler"
 66 | 						@blur="textInputBlurHandler"
 67 | 						@keypress.enter="$event.target.blur()"
 68 | 					>
 69 | 				</div>
 70 | 			</div>
 71 | 			<div :class="bem('text-format-arrows')" :style="arrowsStyles">
 72 | 				<div :class="bem('arrow-up')" @click="textInputFormatChange(-1)"></div>
 73 | 				<div :class="bem('arrow-down')" @click="textInputFormatChange(1)"></div>
 74 | 			</div>
 75 | 		</div>
 76 | 	</div>
 77 | </template>
 78 | 
 79 | <script>
 80 | import transparentPattern from '../assets/transparent-pattern.svg'
 81 | import {bem} from '../bem'
 82 | import tinycolor from 'tinycolor2'
 83 | 
 84 | export default {
 85 | 	name: 'ColorPicker',
 86 | 	props: [
 87 | 		'color',
 88 | 		'position',
 89 | 		'boxRect',
 90 | 		'disableAlpha',
 91 | 		'disableTextInputs'
 92 | 	],
 93 | 	emits: [
 94 | 		'updateColor',
 95 | 		'hueInputStart',
 96 | 		'hueInputEnd',
 97 | 		'hueInput',
 98 | 		'alphaInputStart',
 99 | 		'alphaInputEnd',
100 | 		'alphaInput',
101 | 		'saturationInputStart',
102 | 		'saturationInputEnd',
103 | 		'saturationInput',
104 | 		'ready',
105 | 		'change'
106 | 	],
107 | 	data() {
108 | 		return {
109 | 			h: undefined,
110 | 			s: undefined,
111 | 			v: undefined,
112 | 			a: undefined,
113 | 			hueTranslateX: 0,
114 | 			alphaTranslateX: 0,
115 | 			saturationTranslateX: 0,
116 | 			saturationTranslateY: 0,
117 | 			sliderPointerWidth: 0,
118 | 			saturationPointerWidth: 0,
119 | 			saturationPointerHeight: 0,
120 | 			pickerPositionA: {
121 | 				anchor: 'top',
122 | 				offset: 0
123 | 			},
124 | 			pickerPositionB: {
125 | 				anchor: 'left',
126 | 				offset: 0
127 | 			},
128 | 			pickerWidth: 0,
129 | 			pickerHeight: 0,
130 | 			textInputsFormat: 'rgb',
131 | 			textInputActive: null,
132 | 			textInputsFreeze: {},
133 | 			arrowColor: '#0f0f0f',
134 | 			sliderWidth: 0,
135 | 		}
136 | 	},
137 | 	computed: {
138 | 		pureHueBackground() {
139 | 			return {
140 | 				background: 'hsl(' + this.h + ', 100%, 50%)'
141 | 			}
142 | 		},
143 | 		hexString() {
144 | 			return this.color.toHexString()
145 | 		},
146 | 		huePointerStyles() {
147 | 			return {
148 | 				transform: 'translate(' + (this.hueTranslateX - this.sliderPointerWidth * .5) + 'px)'
149 | 			}
150 | 		},
151 | 		alphaPointerStyles() {
152 | 			return {
153 | 				transform: 'translate(' + (this.alphaTranslateX - this.sliderPointerWidth * .5) + 'px)'
154 | 			}
155 | 		},
156 | 		alphaPointerTransparentStyles() {
157 | 			return {
158 | 				backgroundPosition: -this.alphaTranslateX + 'px',
159 | 			}
160 | 		},
161 | 		alphaPointerColorStyles() {
162 | 			return {
163 | 				opacity: this.a,
164 | 			}
165 | 		},
166 | 		alphaCanvasStyles() {
167 | 			return {
168 | 				background: 'linear-gradient(90deg, transparent 0%, ' + this.color.toHexString() + ' 100%)'
169 | 			}
170 | 		},
171 | 		saturationPointerStyles() {
172 | 			const translateX = this.saturationTranslateX - this.saturationPointerWidth * .5;
173 | 			const translateY = this.saturationTranslateY + this.saturationPointerHeight * .5;
174 | 			return {
175 | 				transform: 'translate(' + translateX + 'px, ' + translateY + 'px)'
176 | 			}
177 | 		},
178 | 		arrowsStyles() {
179 | 			return {
180 | 				'--arrow-color': this.arrowColor
181 | 			}
182 | 		},
183 | 		pickerPosition() {
184 | 			let { top, left } = this.boxRect
185 | 			top += window.scrollY
186 | 			left += window.scrollX
187 | 			const [yAlign, xAlign] = this.position
188 | 			if (yAlign == 'bottom') {
189 | 				top += this.boxRect.height
190 | 			} else if (yAlign == 'top') {
191 | 				top -= this.pickerHeight
192 | 			} else { // y center
193 | 				top += this.boxRect.height * .5
194 | 				top -= this.pickerHeight * .5
195 | 			}
196 | 			if (xAlign == 'right') {
197 | 				if (yAlign == 'center') {
198 | 					left += this.boxRect.width
199 | 				}
200 | 			} else if (xAlign == 'left') {
201 | 				left -= this.pickerWidth
202 | 				if (yAlign != 'center')
203 | 					left += this.boxRect.width
204 | 			} else { // x center
205 | 				left += this.boxRect.width * .5
206 | 				left -= this.pickerWidth * .5
207 | 			}
208 | 			return {
209 | 				top: top + 'px',
210 | 				left: left + 'px'
211 | 			};
212 | 		},
213 | 		textInputs() {
214 | 			const format = this.textInputsFormat;
215 | 			const textInputs = {};
216 | 			if (['name','hex'].includes(format)) {
217 | 				textInputs.hex = this.color.toString('hex');
218 | 			} else {
219 | 				const stringSplit = this.color.toString(format).split('(')[1].slice(0,-1).split(', ');
220 | 				format.split('').forEach((k, i) => textInputs[k] = stringSplit[i]);
221 | 			}
222 | 			if (!this.disableAlpha) {
223 | 				textInputs.a = Number(this.color.getAlpha().toFixed(2));
224 | 			}
225 | 
226 | 			// if textInputs has hue, add it from this.h
227 | 			if (textInputs.hasOwnProperty('h')) {
228 | 				// in mode with hue, use this.h
229 | 				textInputs.h = Math.round(this.h);
230 | 				if (textInputs.hasOwnProperty('l')) {
231 | 					// we're in hsl, use this.s
232 | 
233 | 					//convert s(hsv) to s(hsl)
234 | 					let s = this.s;
235 | 					const v = this.v || 0.001;
236 | 					const l = (2 - s) * v / 2;
237 | 					if (l < 0.5) {
238 | 						s *= v / (l * 2);
239 | 						// convert to % and use
240 | 						textInputs.s = Math.round(s * 100) + '%';
241 | 					}
242 | 				}
243 | 			}
244 | 			return textInputs;
245 | 		},
246 | 		transparentPatternBg() {
247 | 			return { backgroundImage: `url(${transparentPattern})` }
248 | 		}
249 | 	},
250 | 	methods: {
251 | 		bem,
252 | 		saturationPickStart(e) {
253 | 			this.getCanvasRects();
254 | 			document.addEventListener('pointerup', this.saturationPickEnd);
255 | 			document.addEventListener('pointermove', this.saturationPickMove);
256 | 			this.saturationPickMove(e);
257 | 			this.emitHook('saturationInputStart', { s: this.s, v: this.v });
258 | 			this.colorSnapshot = this.color.toRgbString(); // this to track change
259 | 		},
260 | 		saturationPickEnd(e) {
261 | 			document.removeEventListener('pointerup', this.saturationPickEnd);
262 | 			document.removeEventListener('pointermove', this.saturationPickMove);
263 | 			this.emitHook('saturationInputEnd', { s: this.s, v: this.v });
264 | 			if (this.colorSnapshot !== this.color.toRgbString()) {
265 | 				// something changed, emit change hook
266 | 				this.emitHook('change', { h: this.h, s: this.s, v: this.v, a: this.a });
267 | 			}
268 | 		},
269 | 		saturationPickMove(e) {
270 | 			if (e.clientX >= this.saturationCanvasRect.x && e.clientX <= this.saturationCanvasRect.right) {
271 | 				this.s = ((e.clientX - this.saturationCanvasRect.x) / this.saturationCanvasRect.width);
272 | 			} else if (e.clientX < this.saturationCanvasRect.x) this.s = 0;
273 | 			else this.s = 1;
274 | 			if (e.clientY >= this.saturationCanvasRect.y && e.clientY <= this.saturationCanvasRect.bottom) {
275 | 				this.v = (1 - ((e.clientY - this.saturationCanvasRect.y) / this.saturationCanvasRect.height));
276 | 			} else if (e.clientY < this.saturationCanvasRect.y) this.v = 1;
277 | 			else this.v = 0;
278 | 		},
279 | 		huePickStart(e) {
280 | 			this.getCanvasRects();
281 | 			document.addEventListener('pointerup', this.huePickEnd);
282 | 			document.addEventListener('pointermove', this.huePickMove);
283 | 			this.huePickMove(e);
284 | 			this.emitHook('hueInputStart', { h: this.h });
285 | 			this.colorSnapshot = this.color.toRgbString(); // this to track change
286 | 		},
287 | 		huePickEnd(e) {
288 | 			document.removeEventListener('pointerup', this.huePickEnd);
289 | 			document.removeEventListener('pointermove', this.huePickMove);
290 | 			this.emitHook('hueInputEnd', { h: this.h });
291 | 			if (this.colorSnapshot !== this.color.toRgbString()) {
292 | 				// something changed, emit change hook
293 | 				this.emitHook('change', { h: this.h, s: this.s, v: this.v, a: this.a });
294 | 			}
295 | 		},
296 | 		huePickMove(e) {
297 | 			if (e.clientX >= this.hueCanvasRect.x && e.clientX <= this.hueCanvasRect.right) {
298 | 				this.h = ((e.clientX - this.hueCanvasRect.x) * 360 / this.hueCanvasRect.width);
299 | 			} else if (e.clientX < this.hueCanvasRect.x) this.h = 0;
300 | 			else this.h = 360;
301 | 		},
302 | 		alphaPickStart(e) {
303 | 			this.getCanvasRects();
304 | 			document.addEventListener('pointerup', this.alphaPickEnd);
305 | 			document.addEventListener('pointermove', this.alphaPickMove);
306 | 			this.alphaPickMove(e);
307 | 			this.emitHook('alphaInputStart', { a: this.a });
308 | 			this.colorSnapshot = this.color.toRgbString(); // this to track change
309 | 		},
310 | 		alphaPickEnd(e) {
311 | 			document.removeEventListener('pointerup', this.alphaPickEnd);
312 | 			document.removeEventListener('pointermove', this.alphaPickMove);
313 | 			this.emitHook('alphaInputEnd', { a: this.a });
314 | 			if (this.colorSnapshot !== this.color.toRgbString()) {
315 | 				// something changed, emit change hook
316 | 				this.emitHook('change', { h: this.h, s: this.s, v: this.v, a: this.a });
317 | 			}
318 | 		},
319 | 		alphaPickMove(e) {
320 | 			if (e.clientX >= this.alphaCanvasRect.x && e.clientX <= this.alphaCanvasRect.right) {
321 | 				this.a = ((e.clientX - this.alphaCanvasRect.x) / this.alphaCanvasRect.width);
322 | 			} else if (e.clientX < this.alphaCanvasRect.x) this.a = 0;
323 | 			else this.a = 1;
324 | 		},
325 | 		emitUpdate(output) {
326 | 			output = output || { h: this.h, s: this.s, v: this.v, a: this.a };
327 | 			this.$emit('updateColor', output);
328 | 		},
329 | 		emitHook(eventName, value) {
330 | 			if (typeof value === 'object') {
331 | 				for (let [k, v] of Object.entries(value)) value[k] = Number(v.toFixed(3));
332 | 			} else {
333 | 				value = Number(value.toFixed(3));
334 | 			}
335 | 			this.$emit(eventName, value);
336 | 			// if (eventName=='change') console.log('change')
337 | 		},
338 | 		textInputInputHandler(e) {
339 | 			const component = e.target.dataset.component;
340 | 			this.textInputsFreeze[component] = e.target.value;
341 | 
342 | 			let output = { ...this.textInputsFreeze };
343 | 
344 | 			if (output.hasOwnProperty('hex')) {
345 | 				// editing hex
346 | 				const a = output.a;
347 | 				output = tinycolor(output.hex);
348 | 				if (output.getFormat() !== 'hex8') {
349 | 					// unless hex8 is entered use existing alpha
350 | 					output.setAlpha(a);
351 | 				}
352 | 			} else {
353 | 				output = tinycolor(output);
354 | 			}
355 | 
356 | 			const hsv = output.toHsv();
357 | 
358 | 			if (this.textInputsFormat === 'hsl') {
359 | 				// editing in hsl
360 | 				if (hsv.h === 0) {
361 | 					// hue got converted to 0, use previous value
362 | 					hsv.h = parseInt(this.textInputsFreeze.h);
363 | 				}
364 | 				if (hsv.v === 0) {
365 | 					// fix for editing s but l is 0, so it converts to 0
366 | 					let s = this.textInputsFreeze.s;
367 | 					const isPercent = (s.indexOf('%') !== -1);
368 | 					s = parseFloat(s);
369 | 					if (!s || s < 0) s = 0;
370 | 					else if (isPercent || s > 1) {
371 | 						s = Math.min(s * 0.01, 1);
372 | 					}
373 | 
374 | 					// convert to hsv
375 | 					const l = 0.001;
376 | 					const v = s * l + l;
377 | 					s = 2 - 2 * l / v;
378 | 
379 | 					hsv.s = s;
380 | 				}
381 | 			}
382 | 
383 | 			// assign new values with gate for the convertion noise
384 | 			const threshold = {
385 | 				h: .5,
386 | 				s: .001,
387 | 				v: .001,
388 | 			}
389 | 			if (component !== 'a') {
390 | 				// editing color component (not alpha)
391 | 				// gate and assign new values if change is over threshold
392 | 				Object.keys(hsv).filter(k => k !== 'a').forEach(k => {
393 | 					const oldVal = this[k];
394 | 					const newVal = hsv[k];
395 | 					if (Math.abs(oldVal - newVal) > threshold[k]) {
396 | 						this[k] = newVal;
397 | 					}
398 | 				});
399 | 
400 | 				if (output.getFormat() === 'hex8' && output.getOriginalInput().length > 7) {
401 | 					// hex8 was entered into hex field
402 | 					if (!this.disableAlpha) {
403 | 						// alpha enabled, update it too
404 | 						this.a = hsv.a;
405 | 						this.textInputsFreeze.a = Number(this.a.toFixed(2));
406 | 					} else {
407 | 						// alpha disabled, treat the color as invalid
408 | 						Object.assign(this.$data, { h: 0, s: 0, v: 0 });
409 | 					}
410 | 				}
411 | 			} else {
412 | 				// editing alpha, assign it right away. Don't touch other components
413 | 				this.a = hsv.a;
414 | 			}
415 | 		},
416 | 		textInputFocusHandler(e) {
417 | 			// if focused from blur, freeze current color
418 | 			// if focused from another text input, don't update
419 | 			if (!this.textInputActive) {
420 | 				this.textInputsFreeze = { ...this.textInputs };
421 | 				this.colorSnapshot = this.color.toRgbString(); // this to track change
422 | 			}
423 | 			this.textInputActive = e.target.dataset.component;
424 | 		},
425 | 		textInputBlurHandler(e) {
426 | 			setTimeout(() => {
427 | 				if (this.textInputActive === e.target.dataset.component) {
428 | 					// actually blurred, not just focused another
429 | 
430 | 					// check if something actually changed
431 | 					if (this.colorSnapshot !== this.color.toRgbString()) {
432 | 						// something changed, emit change hook
433 | 						this.emitHook('change', { h: this.h, s: this.s, v: this.v, a: this.a });
434 | 					}
435 | 
436 | 					this.textInputsFreeze = {};
437 | 					this.textInputActive = null;
438 | 				}
439 | 			}, 0);
440 | 		},
441 | 		textInputFormatChange(dir) {
442 | 			const formats = ['rgb','name','hsl'];
443 | 			let currentFormat = this.textInputsFormat;
444 | 			if (currentFormat === 'hex') currentFormat = 'name'; // use name because name falls back to hex
445 | 			let i = formats.indexOf(this.textInputsFormat) + dir;
446 | 			if (i < 0) i = formats.length - 1;
447 | 			else if (i === formats.length) i = 0;
448 | 			this.textInputsFormat = formats[i];
449 | 		},
450 | 		getCanvasRects() {
451 | 			this.saturationCanvasRect = this.$refs.saturationCanvas.getBoundingClientRect();
452 | 			this.hueCanvasRect = this.$refs.hueCanvas.getBoundingClientRect();
453 | 			this.alphaCanvasRect = this.disableAlpha ? {} : this.$refs.alphaCanvas.getBoundingClientRect();
454 | 		},
455 | 		init() {
456 | 			const pickerRoot = this.$refs.pickerRoot;
457 | 			const computedStyle = window.getComputedStyle(pickerRoot);
458 | 
459 | 			// get color values from model value
460 | 			Object.assign(this.$data, this.color.toHsv());
461 | 
462 | 			// wait for picker to render (stealthy)
463 | 			// and then get all the necessary values that rely on element being displayed
464 | 			window.requestAnimationFrame(() => {
465 | 				// get picker size
466 | 				const { width, height } = pickerRoot.getBoundingClientRect();
467 | 				this.pickerHeight = height;
468 | 				this.pickerWidth = width;
469 | 
470 | 				// get canvas rects and set initial values
471 | 				this.getCanvasRects();
472 | 				this.hueTranslateX = this.h * this.hueCanvasRect.width / 360;
473 | 				this.alphaTranslateX = this.a * this.alphaCanvasRect.width;
474 | 				this.saturationTranslateX = this.s * this.saturationCanvasRect.width;
475 | 				this.saturationTranslateY = -this.v * this.saturationCanvasRect.height;
476 | 				this.sliderPointerWidth = this.$refs.huePointer.offsetWidth;
477 | 				this.saturationPointerWidth = this.$refs.saturationPointer.offsetWidth;
478 | 				this.saturationPointerHeight = this.$refs.saturationPointer.offsetHeight;
479 | 
480 | 				// wait for it to hide
481 | 				// and then let the parent know picker is ready
482 | 				window.requestAnimationFrame(() => {
483 | 					this.$emit('ready');
484 | 				});
485 | 			});
486 | 
487 | 			// get background-color to color the arrows
488 | 			const background = computedStyle.getPropertyValue('background-color');
489 | 			if (tinycolor(background).isDark()) {
490 | 				this.arrowColor = '#fbfbfb';
491 | 			}
492 | 
493 | 		},
494 | 		fillCanvas() {
495 | 			// fill hue canvas
496 | 			let canvas = this.$refs.hueCanvas;
497 | 			let ctx = canvas.getContext('2d');
498 | 			let gradient = ctx.createLinearGradient(canvas.width, 0, 0, 0);
499 | 			gradient.addColorStop(0, 'hsl(0,100%,50%)');
500 | 			gradient.addColorStop(.17, 'hsl(298.8, 100%, 50%)');
501 | 			gradient.addColorStop(.33, 'hsl(241.2, 100%, 50%)');
502 | 			gradient.addColorStop(.50, 'hsl(180, 100%, 50%)');
503 | 			gradient.addColorStop(.67, 'hsl(118.8, 100%, 50%)');
504 | 			gradient.addColorStop(.83, 'hsl(61.2,100%,50%)');
505 | 			gradient.addColorStop(1, 'hsl(360,100%,50%)');
506 | 			ctx.fillStyle = gradient;
507 | 			ctx.fillRect(0, 0, canvas.width, canvas.height);
508 | 
509 | 			// fill saturation canvas
510 | 			canvas = this.$refs.saturationCanvas;
511 | 			ctx = canvas.getContext('2d');
512 | 			// white layer
513 | 			gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
514 | 			gradient.addColorStop(0, 'rgba(250,250,250,1)');
515 | 			gradient.addColorStop(1, 'rgba(250,250,250,0)');
516 | 			ctx.fillStyle = gradient;
517 | 			ctx.fillRect(0, 0, canvas.width, canvas.height);
518 | 			// black layer
519 | 			gradient = ctx.createLinearGradient(0, canvas.height, 0, 0);
520 | 			gradient.addColorStop(0, 'rgba(0,0,0,1)');
521 | 			gradient.addColorStop(1, 'rgba(0,0,0,0)');
522 | 			ctx.fillStyle = gradient;
523 | 			ctx.fillRect(0, 0, canvas.width, canvas.height);
524 | 		}
525 | 	},
526 | 	watch: {
527 | 		h(newVal, oldVal) {
528 | 			this.hueTranslateX = this.h * this.hueCanvasRect.width / 360;
529 | 			if (oldVal === undefined) return;
530 | 			this.emitUpdate();
531 | 			this.emitHook('hueInput', { h: this.h });
532 | 		},
533 | 		s(newVal, oldVal) {
534 | 			this.saturationTranslateX = this.s * this.saturationCanvasRect.width;
535 | 			if (oldVal === undefined) return;
536 | 			this.emitUpdate();
537 | 			this.emitHook('saturationInput', { s: this.s, v: this.v });
538 | 		},
539 | 		v(newVal, oldVal) {
540 | 			this.saturationTranslateY = -this.v * this.saturationCanvasRect.height;
541 | 			if (oldVal === undefined) return;
542 | 			this.emitUpdate();
543 | 			this.emitHook('saturationInput', { s: this.s, v: this.v });
544 | 		},
545 | 		a(newVal, oldVal) {
546 | 			this.alphaTranslateX = this.a * this.alphaCanvasRect.width;
547 | 			if (oldVal === undefined) return;
548 | 			this.emitUpdate();
549 | 			this.emitHook('alphaInput', { a: this.a });
550 | 		},
551 | 	},
552 | 	mounted() {
553 | 		this.getCanvasRects();
554 | 		// this.init();
555 | 		this.fillCanvas();
556 | 	},
557 | 	beforeUnmount() {
558 | 	}
559 | }
560 | 
561 | </script>
562 | 
563 | <style lang="scss">
564 | 	%fill-100 {
565 | 		width: 100%;
566 | 		height: 100%;
567 | 	}
568 | 	%flex-center {
569 | 		display: flex;
570 | 		justify-content: center;
571 | 		align-items: center;
572 | 	}
573 | 	%slider-pointer {
574 | 		border-radius: 50%;
575 | 		background: #fbfbfb;
576 | 		overflow: hidden;
577 | 		border: 2px #fbfbfb solid;
578 | 		box-shadow: 0 0 5px rgba(15,15,15,.3);
579 | 	}
580 | 	%arrow {
581 | 		width: 12px;
582 | 		height: 10px;
583 | 		opacity: .4;
584 | 		transition: .3s;
585 | 		position: relative;
586 | 		@extend %flex-center;
587 | 		&::before {
588 | 			display: block;
589 | 			content: '';
590 | 			width: 0;
591 | 			height: 0;
592 | 			border-left: 5px solid transparent;
593 | 			border-right: 5px solid transparent;
594 | 		}
595 | 		&:hover {
596 | 			opacity: .8;
597 | 		}
598 | 	}
599 | 	.color-input {
600 | 		&__popup {
601 | 			position: absolute;
602 | 			z-index: 9999;
603 | 			width: auto;
604 | 			min-width: 280px;
605 | 			background-color: #fbfbfb;
606 | 			box-shadow: 0px 5px 10px rgba(15, 15, 15, 0.4);
607 | 			user-select: none;
608 | 			color: #0f0f0f;
609 | 			--popup-offset: 10px;
610 | 			&--top {
611 | 			  translate: 0 calc(var(--popup-offset) * -1);
612 | 			}
613 | 			&--bottom {
614 | 			  translate: 0 var(--popup-offset);
615 | 			}
616 | 			&--center-right {
617 | 				translate: var(--popup-offset) 0;
618 | 			}
619 | 			&--center-left {
620 | 				translate: calc(var(--popup-offset) * -1) 0;
621 | 			}
622 | 			&--enter-from,
623 | 			&--leave-to {
624 | 				transform: translateY(-10px);
625 | 				opacity: 0;
626 | 			}
627 | 			&--enter-active,
628 | 			&--leave-active {
629 | 				transition: transform 0.3s, opacity 0.3s;
630 | 			}
631 | 		}
632 | 		&__slider {
633 | 			width: 85%;
634 | 			height: 6px;
635 | 			margin: 18px auto;
636 | 			position: relative;
637 | 		}
638 | 		&__slider-container {
639 | 			display: block;
640 | 			@extend %fill-100;
641 | 			top: 50%;
642 | 			border-radius: 3px;
643 | 			overflow: hidden;
644 | 			background-size: contain;
645 | 		}
646 | 		&__slider-canvas {
647 | 			@extend %fill-100;
648 | 			display: block;
649 | 		}
650 | 		&__slider-active-area {
651 | 			position: absolute;
652 | 			top: 50%;
653 | 			transform: translateY(-50%);
654 | 			left: 0;
655 | 			width: 100%;
656 | 		}
657 | 		&__slider-pointer {
658 | 			@extend %slider-pointer;
659 | 			width: 12px;
660 | 			height: 12px;
661 | 		}
662 | 		&__pointer-color {
663 | 			@extend %fill-100;
664 | 		}
665 | 		&__pointer-transparent {
666 | 			@extend %fill-100;
667 | 			background-size: auto 100%;
668 | 		}
669 | 		&__saturation-area {
670 | 			width: 100%;
671 | 			height: 125px;
672 | 			position: relative;
673 | 		}
674 | 		&__saturation-pointer {
675 | 			@extend %slider-pointer;
676 | 			top: auto;
677 | 			width: 20px;
678 | 			height: 20px;
679 | 			position: absolute;
680 | 			bottom: 0;
681 | 			left: 0;
682 | 			z-index: 10001;
683 | 		}
684 | 		&__text-inputs-area {
685 | 			display: flex;
686 | 			margin: 0 7px 10px;
687 | 		}
688 | 		&__text-inputs-wrapper {
689 | 			flex: 1 0;
690 | 			@extend %flex-center;
691 | 			flex-wrap: wrap;
692 | 		}
693 | 		&__text-input-container {
694 | 			white-space: nowrap;
695 | 		}
696 | 		&__text-input {
697 | 			font-family: inherit;
698 | 			color: inherit;
699 | 			width: 4ch;
700 | 			text-align: center;
701 | 			margin: 0 5px;
702 | 			background: transparent;
703 | 			border-style: solid;
704 | 			border-width: 1px;
705 | 			border-radius: 3px;
706 | 			&:focus {
707 | 				outline-color: var(--outline-color);
708 | 			}
709 | 			&--hex {
710 | 				width: 8ch;
711 | 			}
712 | 		}
713 | 		&__text-format-arrows {
714 | 			flex: 0 1;
715 | 			@extend %flex-center;
716 | 			flex-direction: column;
717 | 		}
718 | 		&__arrow-up {
719 | 			@extend %arrow;
720 | 			&::before {
721 | 				border-bottom: 5px solid var(--arrow-color);
722 | 			}
723 | 		}
724 | 		&__arrow-down {
725 | 			@extend %arrow;
726 | 			&::before {
727 | 				border-top: 5px solid var(--arrow-color);
728 | 			}
729 | 		}
730 | 	}
731 | </style>
732 | 


--------------------------------------------------------------------------------
/src/entry.ts:
--------------------------------------------------------------------------------
1 | import ColorInput from './color-input.vue'
2 | export default ColorInput
3 | 
4 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | export const allowedPosition = [
 2 |   "top", "top right", "top left", "top center",
 3 |   "right top", "right", "right bottom", "right center",
 4 |   "bottom right", "bottom", "bottom left", "bottom center",
 5 |   "left top", "left bottom", "left", "left center"
 6 | ] as const
 7 | 
 8 | export type Position = typeof allowedPosition[number]
 9 | 
10 | 
11 | export const allowedFormat = [
12 |   "rgb", "rgb object", "rgb string", 
13 |   "hsv", "hsv object", "hsv string", 
14 |   "hsl", "hsl object", "hsl string",
15 |   "name", "name string",
16 |   "hex", "hex string",
17 |   "hex8", "hex8 string"
18 | ] as const
19 | 
20 | export type Format = typeof allowedFormat[number]
21 | 
22 | export type FormatCategory = 'rgb'|'hsv'|'hsl'|'name'|'hex'|'hex8'
23 | 
24 | export type FormatType = 'string'|'object'
25 | 
26 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "node",
11 |     "allowSyntheticDefaultImports": true,
12 |     "allowImportingTsExtensions": true,
13 |     "isolatedModules": true,
14 |     "moduleDetection": "force",
15 |     "noEmit": true,
16 |     "jsx": "preserve",
17 | 
18 |     /* Linting */
19 |     "strict": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "noFallthroughCasesInSwitch": true
23 |   },
24 |   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
25 | }
26 | 
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files": [],
3 |   "references": [
4 |     { "path": "./tsconfig.app.json" },
5 |     { "path": "./tsconfig.node.json" }
6 |   ]
7 | }
8 | 
9 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022",
 4 |     "lib": ["ES2023"],
 5 |     "module": "ESNext",
 6 |     "skipLibCheck": true,
 7 | 
 8 |     /* Bundler mode */
 9 |     "moduleResolution": "bundler",
10 |     "allowImportingTsExtensions": true,
11 |     "isolatedModules": true,
12 |     "moduleDetection": "force",
13 |     "noEmit": true,
14 | 
15 |     /* Linting */
16 |     "strict": true,
17 |     "noUnusedLocals": true,
18 |     "noUnusedParameters": true,
19 |     "noFallthroughCasesInSwitch": true
20 |   },
21 |   "include": ["vite.config.ts"]
22 | }
23 | 
24 | 


--------------------------------------------------------------------------------
/vite.config-demo.js:
--------------------------------------------------------------------------------
 1 | import vue from '@vitejs/plugin-vue'
 2 | /** @type {import('vite').UserConfig} */
 3 | export default {
 4 |   base: '/vue-color-input/',
 5 |   build: {
 6 |     outDir: './demo',
 7 |     emptyOutDir: true
 8 |   },
 9 |   plugins: [vue()]
10 | }
11 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import vue from '@vitejs/plugin-vue'
 2 | import { libInjectCss } from 'vite-plugin-lib-inject-css'
 3 | import dts from 'vite-plugin-dts'
 4 | import { resolve } from 'path'
 5 | 
 6 | /** @type {import('vite').UserConfig} */
 7 | export default {
 8 |   logLevel: 'info',
 9 |   build: {
10 |     lib: {
11 |       entry: resolve(__dirname, 'src/entry.ts'),
12 |       fileName: 'color-input',
13 |       name: 'ColorInput',
14 |     },
15 |     rollupOptions: {
16 |       external: ['vue'],
17 |       output: {
18 |         globals: { vue: 'Vue' },
19 |       },
20 |     },
21 |   },
22 |   plugins: [
23 |     vue(),
24 |     dts({
25 |       rollupTypes: true,
26 |       tsconfigPath: resolve(__dirname, 'tsconfig.app.json'),
27 |     }), 
28 |     libInjectCss()
29 |   ]
30 | }
31 | 
32 | 


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