@packyoung98/vcolor 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -50
- package/dist/vcolor.js +12 -12
- package/dist/vcolor.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# vcolor
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@packyoung98/vcolor)
|
|
4
|
+
[](./LICENSE)
|
|
5
|
+
|
|
6
|
+
**[Demo](https://packyoung98.github.io/vcolor/)** · **[npm](https://www.npmjs.com/package/@packyoung98/vcolor)** · **[GitHub](https://github.com/packyoung98/vcolor)**
|
|
7
|
+
|
|
3
8
|
Vue 3 전용 컬러 피커 라이브러리. 완전한 `v-model` 지원, CSS 변수 기반 커스터마이징, 그리고 13종의 피커 컴포넌트를 제공합니다.
|
|
4
9
|
|
|
5
10
|
react-color / vue-color의 컴포넌트 구성을 따르되, 내부는 `tinycolor` 같은 외부 의존성 없이 직접 구현한 색 변환 레이어 위에서 동작합니다.
|
|
@@ -23,7 +28,7 @@ react-color / vue-color의 컴포넌트 구성을 따르되, 내부는 `tinycolo
|
|
|
23
28
|
## 설치
|
|
24
29
|
|
|
25
30
|
```bash
|
|
26
|
-
npm install vcolor
|
|
31
|
+
npm install @packyoung98/vcolor
|
|
27
32
|
```
|
|
28
33
|
|
|
29
34
|
> `vue >= 3.3.0` 이 peer dependency입니다.
|
|
@@ -36,13 +41,13 @@ npm install vcolor
|
|
|
36
41
|
|
|
37
42
|
```ts
|
|
38
43
|
// main.ts
|
|
39
|
-
import "vcolor/style.css";
|
|
44
|
+
import "@packyoung98/vcolor/style.css";
|
|
40
45
|
```
|
|
41
46
|
|
|
42
47
|
```vue
|
|
43
48
|
<script setup lang="ts">
|
|
44
49
|
import { ref } from "vue";
|
|
45
|
-
import { SketchPicker } from "vcolor";
|
|
50
|
+
import { SketchPicker } from "@packyoung98/vcolor";
|
|
46
51
|
|
|
47
52
|
const color = ref("#FF5733");
|
|
48
53
|
</script>
|
|
@@ -59,7 +64,7 @@ const color = ref("#FF5733");
|
|
|
59
64
|
이름은 모두 named export로 가져옵니다.
|
|
60
65
|
|
|
61
66
|
```ts
|
|
62
|
-
import { ChromePicker, SketchPicker, HueSlider } from "vcolor";
|
|
67
|
+
import { ChromePicker, SketchPicker, HueSlider } from "@packyoung98/vcolor";
|
|
63
68
|
```
|
|
64
69
|
|
|
65
70
|
| 컴포넌트 | 카테고리 | Alpha | 설명 |
|
|
@@ -140,46 +145,36 @@ const d = ref({ h: 11, s: 100, l: 60, a: 1 }); // HSLA 객체
|
|
|
140
145
|
|
|
141
146
|
### 입력 포맷 전환 (ChromePicker)
|
|
142
147
|
|
|
143
|
-
`ChromePicker` 하단의 `▲▼`로 입력칸을 hex / rgb / hsl로 전환할 수 있습니다.
|
|
148
|
+
`ChromePicker` 하단의 `▲▼`로 입력칸을 hex / rgb / hsl로 전환할 수 있습니다.
|
|
144
149
|
|
|
145
150
|
```vue
|
|
146
151
|
<ChromePicker v-model="color" />
|
|
147
|
-
<!-- hex/rgb/hsl 전부 -->
|
|
148
152
|
<ChromePicker v-model="color" :input-formats="['hex', 'rgb']" />
|
|
149
153
|
<ChromePicker v-model="color" :input-formats="['hex']" />
|
|
150
|
-
<!-- 하나면 전환 버튼 숨김 -->
|
|
151
154
|
```
|
|
152
155
|
|
|
153
|
-
> `inputFormats`(입력칸 표시 포맷)와 `format`(emit 포맷)은 별개입니다.
|
|
154
|
-
|
|
155
156
|
### 스포이드 (EyeDropper)
|
|
156
157
|
|
|
157
|
-
`ChromePicker`는 브라우저가 지원하는 경우 미리보기 옆에 스포이드 버튼을 표시합니다.
|
|
158
|
+
`ChromePicker`는 브라우저가 지원하는 경우 미리보기 옆에 스포이드 버튼을 표시합니다.
|
|
158
159
|
|
|
159
160
|
> 네이티브 EyeDropper API 기반이라 **Chromium 계열(Chrome·Edge 등)에서만** 동작하며, 미지원 브라우저(Firefox·Safari)에서는 버튼이 자동으로 숨겨집니다.
|
|
160
161
|
|
|
161
|
-
컴포저블로 직접 사용할 수도 있습니다.
|
|
162
|
-
|
|
163
162
|
```ts
|
|
164
|
-
import { useEyeDropper } from "vcolor";
|
|
163
|
+
import { useEyeDropper } from "@packyoung98/vcolor";
|
|
165
164
|
|
|
166
165
|
const { isSupported, open } = useEyeDropper();
|
|
167
|
-
const hex = await open();
|
|
166
|
+
const hex = await open();
|
|
168
167
|
```
|
|
169
168
|
|
|
170
169
|
### 스워치 색 지정
|
|
171
170
|
|
|
172
|
-
스워치 계열 피커는 `presetColors`로 **1차원 또는 2차원(행 단위)** 배열을 받습니다.
|
|
173
|
-
|
|
174
171
|
```vue
|
|
175
|
-
<!-- 1차원 + 열 수 지정 -->
|
|
176
172
|
<CompactPicker
|
|
177
173
|
v-model="color"
|
|
178
174
|
:preset-colors="['#F00', '#0F0', '#00F']"
|
|
179
175
|
:columns="3"
|
|
180
176
|
/>
|
|
181
177
|
|
|
182
|
-
<!-- 2차원: 행 = 색조, 열 = 명암 -->
|
|
183
178
|
<SwatchesPicker
|
|
184
179
|
v-model="color"
|
|
185
180
|
:preset-colors="[
|
|
@@ -197,38 +192,28 @@ const hex = await open(); // '#rrggbb' 또는 null(미지원/취소)
|
|
|
197
192
|
|
|
198
193
|
### 1. 테마 — CSS 변수
|
|
199
194
|
|
|
200
|
-
상위 요소에 `--vc-*` 변수만 선언하면 적용됩니다.
|
|
201
|
-
|
|
202
195
|
```html
|
|
203
|
-
<div
|
|
204
|
-
style="--vc-width: 300px; --vc-border-radius: 16px; --vc-btn-apply-bg: #6c5ce7;"
|
|
205
|
-
>
|
|
196
|
+
<div style="--vc-width: 300px; --vc-border-radius: 16px;">
|
|
206
197
|
<SketchPicker v-model="color" />
|
|
207
198
|
</div>
|
|
208
199
|
```
|
|
209
200
|
|
|
210
|
-
너비·모서리·그림자·폰트부터 팔레트 높이, 슬라이더 두께, 스워치 열 수, 버튼 색까지 변수로 노출되어 있습니다.
|
|
211
|
-
|
|
212
201
|
### 2. 배치·세부 스타일 — 클래스 오버라이드
|
|
213
202
|
|
|
214
|
-
모든 컴포넌트가 `vc-` BEM 클래스를 쓰고 scoped가 아니라서, 일반 CSS로 배치까지 덮어쓸 수 있습니다.
|
|
215
|
-
|
|
216
203
|
```css
|
|
217
204
|
.vc-chrome__fields {
|
|
218
205
|
order: -1;
|
|
219
|
-
}
|
|
206
|
+
}
|
|
220
207
|
.vc-chrome__mode {
|
|
221
208
|
display: none;
|
|
222
|
-
}
|
|
209
|
+
}
|
|
223
210
|
```
|
|
224
211
|
|
|
225
212
|
### 3. 완전 자유 배치 — primitives 조립
|
|
226
213
|
|
|
227
|
-
`useColor`와 원자 컴포넌트(`Saturation`, `Hue`, `Alpha`, `Swatch`, `EditableInput`)를 직접 조립하면 배치가 100% 자유롭습니다.
|
|
228
|
-
|
|
229
214
|
```vue
|
|
230
215
|
<script setup lang="ts">
|
|
231
|
-
import { useColor, Hue, Saturation } from "vcolor";
|
|
216
|
+
import { useColor, Hue, Saturation } from "@packyoung98/vcolor";
|
|
232
217
|
const c = useColor("#FF5733");
|
|
233
218
|
</script>
|
|
234
219
|
|
|
@@ -247,8 +232,6 @@ const c = useColor("#FF5733");
|
|
|
247
232
|
|
|
248
233
|
## 색 공간 / 변환 유틸
|
|
249
234
|
|
|
250
|
-
내부 상태는 HSVA를 단일 진실로 두고 hex/rgba/hsla를 파생합니다. 변환 함수는 따로 import해서 쓸 수 있습니다.
|
|
251
|
-
|
|
252
235
|
```ts
|
|
253
236
|
import {
|
|
254
237
|
hexToRgb,
|
|
@@ -257,23 +240,14 @@ import {
|
|
|
257
240
|
rgbToHsl,
|
|
258
241
|
hslToRgb,
|
|
259
242
|
rgbToHex,
|
|
260
|
-
} from "vcolor";
|
|
243
|
+
} from "@packyoung98/vcolor";
|
|
261
244
|
```
|
|
262
245
|
|
|
263
|
-
| 포맷 | 예시 | 범위 |
|
|
264
|
-
| ---------- | ----------------------- | ------------------------------ |
|
|
265
|
-
| HEX / HEXA | `#FF5733` / `#FF573380` | 6 또는 8자리 |
|
|
266
|
-
| RGBA | `{ r, g, b, a }` | r,g,b: 0–255 / a: 0–1 |
|
|
267
|
-
| HSVA | `{ h, s, v, a }` | h: 0–360 / s,v: 0–100 / a: 0–1 |
|
|
268
|
-
| HSLA | `{ h, s, l, a }` | h: 0–360 / s,l: 0–100 / a: 0–1 |
|
|
269
|
-
|
|
270
|
-
> 변환은 내부적으로 반올림하지 않아 RGB↔HSV 왕복이 무손실입니다. 반올림은 표시/emit 시점에만 적용됩니다.
|
|
271
|
-
|
|
272
246
|
---
|
|
273
247
|
|
|
274
248
|
## Composables
|
|
275
249
|
|
|
276
|
-
|
|
250
|
+
`@packyoung98/vcolor` 에서 가져올 수 있습니다.
|
|
277
251
|
|
|
278
252
|
| 이름 | 설명 |
|
|
279
253
|
| ------------------------ | ------------------------------------------------ |
|
|
@@ -288,13 +262,11 @@ import {
|
|
|
288
262
|
|
|
289
263
|
```bash
|
|
290
264
|
npm install
|
|
291
|
-
npm run typecheck
|
|
292
|
-
npm run build
|
|
293
|
-
npx vitest run
|
|
265
|
+
npm run typecheck
|
|
266
|
+
npm run build
|
|
267
|
+
npx vitest run
|
|
294
268
|
```
|
|
295
269
|
|
|
296
|
-
데모는 `App.demo.vue`에서 13종을 한눈에 확인할 수 있습니다.
|
|
297
|
-
|
|
298
270
|
---
|
|
299
271
|
|
|
300
272
|
## 라이선스
|
package/dist/vcolor.js
CHANGED
|
@@ -264,11 +264,11 @@ var te = ["aria-valuetext"], z = /* @__PURE__ */ s({
|
|
|
264
264
|
},
|
|
265
265
|
emits: ["input", "change"],
|
|
266
266
|
setup(e, { emit: n }) {
|
|
267
|
-
let r = e, o = n, s = t(() => `hsl(${r.hue}, 100%, 50%)`), c = t(() => `${r.saturation}%`), l = t(() => `${100 - r.value}%`), {
|
|
267
|
+
let r = e, o = n, s = t(() => `hsl(${r.hue}, 100%, 50%)`), c = t(() => `${r.saturation}%`), l = t(() => `${100 - r.value}%`), { target: u, down: f } = R((e, t) => o("input", {
|
|
268
268
|
s: Math.round(e * 100),
|
|
269
269
|
v: Math.round((1 - t) * 100)
|
|
270
270
|
}), () => o("change"));
|
|
271
|
-
function
|
|
271
|
+
function m(e) {
|
|
272
272
|
let t = r.saturation, n = r.value;
|
|
273
273
|
switch (e.key) {
|
|
274
274
|
case "ArrowLeft":
|
|
@@ -294,8 +294,8 @@ var te = ["aria-valuetext"], z = /* @__PURE__ */ s({
|
|
|
294
294
|
class: "vc-saturation",
|
|
295
295
|
ref: "target",
|
|
296
296
|
style: d({ background: s.value }),
|
|
297
|
-
onPointerdown: n[0] ||= (...e) => v(
|
|
298
|
-
onKeydown:
|
|
297
|
+
onPointerdown: n[0] ||= (...e) => v(f) && v(f)(...e),
|
|
298
|
+
onKeydown: m,
|
|
299
299
|
tabindex: "0",
|
|
300
300
|
role: "slider",
|
|
301
301
|
"aria-label": "채도/명도 (saturation/value)",
|
|
@@ -317,8 +317,8 @@ var te = ["aria-valuetext"], z = /* @__PURE__ */ s({
|
|
|
317
317
|
props: { hue: {} },
|
|
318
318
|
emits: ["input", "change"],
|
|
319
319
|
setup(e, { emit: n }) {
|
|
320
|
-
let r = e, o = n, s = t(() => `${r.hue / 360 * 100}%`), {
|
|
321
|
-
function
|
|
320
|
+
let r = e, o = n, s = t(() => `${r.hue / 360 * 100}%`), { target: c, down: l } = R((e) => o("input", Math.round(e * 360)), () => o("change"));
|
|
321
|
+
function u(e) {
|
|
322
322
|
let t = r.hue;
|
|
323
323
|
switch (e.key) {
|
|
324
324
|
case "ArrowLeft":
|
|
@@ -348,8 +348,8 @@ var te = ["aria-valuetext"], z = /* @__PURE__ */ s({
|
|
|
348
348
|
return (t, n) => (p(), i("div", {
|
|
349
349
|
class: "vc-hue",
|
|
350
350
|
ref: "target",
|
|
351
|
-
onPointerdown: n[0] ||= (...e) => v(
|
|
352
|
-
onKeydown:
|
|
351
|
+
onPointerdown: n[0] ||= (...e) => v(l) && v(l)(...e),
|
|
352
|
+
onKeydown: u,
|
|
353
353
|
tabindex: "0",
|
|
354
354
|
role: "slider",
|
|
355
355
|
"aria-label": "색조 (hue)",
|
|
@@ -369,8 +369,8 @@ var te = ["aria-valuetext"], z = /* @__PURE__ */ s({
|
|
|
369
369
|
let r = e, o = n, s = t(() => {
|
|
370
370
|
let { r: e, g: t, b: n } = r.rgba;
|
|
371
371
|
return `linear-gradient(to right, rgba(${e},${t},${n},0), rgba(${e},${t},${n},1))`;
|
|
372
|
-
}), c = t(() => `${r.rgba.a * 100}%`), {
|
|
373
|
-
function
|
|
372
|
+
}), c = t(() => `${r.rgba.a * 100}%`), { target: l, down: u } = R((e) => o("input", Math.round(e * 100) / 100), () => o("change"));
|
|
373
|
+
function f(e) {
|
|
374
374
|
let t = r.rgba.a;
|
|
375
375
|
switch (e.key) {
|
|
376
376
|
case "ArrowLeft":
|
|
@@ -394,8 +394,8 @@ var te = ["aria-valuetext"], z = /* @__PURE__ */ s({
|
|
|
394
394
|
return (t, n) => (p(), i("div", {
|
|
395
395
|
class: "vc-alpha",
|
|
396
396
|
ref: "target",
|
|
397
|
-
onPointerdown: n[0] ||= (...e) => v(
|
|
398
|
-
onKeydown:
|
|
397
|
+
onPointerdown: n[0] ||= (...e) => v(u) && v(u)(...e),
|
|
398
|
+
onKeydown: f,
|
|
399
399
|
tabindex: "0",
|
|
400
400
|
role: "slider",
|
|
401
401
|
"aria-label": "투명도 (alpha)",
|
package/dist/vcolor.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VColor={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function n(e){return(e%360+360)%360}function r(e,t,n){return Math.min(n,Math.max(t,e))}function i({h:e,s:t,v:i,a}){e=n(e),t=r(t,0,100)/100,i=r(i,0,100)/100;let o=i*t,s=o*(1-Math.abs(e/60%2-1)),c=i-o,l=0,u=0,d=0;return e<60?[l,u,d]=[o,s,0]:e<120?[l,u,d]=[s,o,0]:e<180?[l,u,d]=[0,o,s]:e<240?[l,u,d]=[0,s,o]:e<300?[l,u,d]=[s,0,o]:[l,u,d]=[o,0,s],{r:Math.round((l+c)*255),g:Math.round((u+c)*255),b:Math.round((d+c)*255),a}}function a({r:e,g:t,b:r,a:i}){e/=255,t/=255,r/=255;let a=Math.max(e,t,r),o=a-Math.min(e,t,r),s=0;o!==0&&(s=a===e?(t-r)/o%6:a===t?(r-e)/o+2:(e-t)/o+4,s=n(s*60));let c=a===0?0:o/a,l=a;return{h:s,s:c*100,v:l*100,a:i}}function o({r:e,g:t,b:r,a:i}){e/=255,t/=255,r/=255;let a=Math.max(e,t,r),o=Math.min(e,t,r),s=a-o,c=0;s!==0&&(c=a===e?(t-r)/s%6:a===t?(r-e)/s+2:(e-t)/s+4,c=n(c*60));let l=(a+o)/2,u=s===0?0:s/(1-Math.abs(2*l-1));return{h:c,s:u*100,l:l*100,a:i}}function s({h:e,s:t,l:i,a}){e=n(e),t=r(t,0,100)/100,i=r(i,0,100)/100;let o=(1-Math.abs(2*i-1))*t,s=o*(1-Math.abs(e/60%2-1)),c=i-o/2,l=0,u=0,d=0;return e<60?[l,u,d]=[o,s,0]:e<120?[l,u,d]=[s,o,0]:e<180?[l,u,d]=[0,o,s]:e<240?[l,u,d]=[0,s,o]:e<300?[l,u,d]=[s,0,o]:[l,u,d]=[o,0,s],{r:Math.round((l+c)*255),g:Math.round((u+c)*255),b:Math.round((d+c)*255),a}}function c({r:e,g:t,b:n,a:i}){let a=e=>r(Math.round(e),0,255).toString(16).padStart(2,`0`),o=`#${a(e)}${a(t)}${a(n)}`;return i<1&&(o+=a(Math.round(i*255))),o.toUpperCase()}function l(e){let t=e.trim().replace(/^#/,``);(t.length===3||t.length===4)&&(t=t.split(``).map(e=>e+e).join(``));let n=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16),i=parseInt(t.slice(4,6),16),a=t.length===8?parseInt(t.slice(6,8),16)/255:1;return{r:Number.isNaN(n)?0:n,g:Number.isNaN(r)?0:r,b:Number.isNaN(i)?0:i,a:Number.isNaN(a)?1:a}}function u(e=`#000000`){let n=(0,t.ref)(a(l(e))),r=(0,t.computed)(()=>i(n.value)),u=(0,t.computed)(()=>o(r.value)),d=(0,t.computed)(()=>c(r.value));function f(e){n.value={...e}}function p(e){n.value=a(e)}function m(e){n.value=a(s(e))}function h(e){n.value=a(l(e))}function g(e){n.value={...n.value,h:e}}function _(e,t){n.value={...n.value,s:e,v:t}}function v(e){n.value={...n.value,a:e}}return{hsva:n,rgba:r,hsla:u,hex:d,setFromHsva:f,setFromRgba:p,setFromHsla:m,setFromHex:h,setHue:g,setSaturation:_,setAlpha:v}}function d(e,t,n=!1){let r=n?1:e.a,a=i({...e,a:r});if(t===`rgb`)return a;if(t===`hsl`){let e=o(a);return{h:Math.round(e.h),s:Math.round(e.s),l:Math.round(e.l),a:e.a}}return c(a)}function f(e,t){t!=null&&(typeof t==`string`?e.setFromHex(t):`v`in t?e.setFromHsva(t):`l`in t?e.setFromHsla(t):e.setFromRgba(t))}function p(e,n,r,i){let a=u(typeof e.value==`string`?e.value:`#FF5733`);f(a,e.value);function o(){return d(a.hsva.value,r(),i())}(0,t.watch)(e,e=>{JSON.stringify(e)!==JSON.stringify(o())&&f(a,e)});function s(){let t=o();e.value=t,n(`input`,t)}function c(){let t=o();e.value=t,n(`change`,t)}return{...a,output:o,input:s,change:c}}function m(){let e=(0,t.ref)(typeof window<`u`&&`EyeDropper`in window),n=(0,t.ref)(``);async function r(){if(!e.value||!window.EyeDropper)return null;try{let e=await new window.EyeDropper().open();return n.value=e.sRGBHex,e.sRGBHex}catch{return null}}return{isSupported:e,sRGBHex:n,open:r}}function h(e){return Math.min(1,Math.max(0,e))}function g(e,n){let r=(0,t.ref)(null);function i(t){let n=r.value;if(!n)return;let i=n.getBoundingClientRect();e(h((t.clientX-i.left)/i.width),h((t.clientY-i.top)/i.height))}function a(){window.removeEventListener(`pointermove`,i),window.removeEventListener(`pointerup`,a),n?.()}function o(e){e.preventDefault(),r.value?.focus?.(),i(e),window.addEventListener(`pointermove`,i),window.addEventListener(`pointerup`,a)}return(0,t.onBeforeUnmount)(a),{target:r,down:o}}var _=[`aria-valuetext`],v=(0,t.defineComponent)({__name:`Saturation`,props:{hue:{},saturation:{},value:{}},emits:[`input`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>`hsl(${r.hue}, 100%, 50%)`),o=(0,t.computed)(()=>`${r.saturation}%`),s=(0,t.computed)(()=>`${100-r.value}%`),{down:c}=g((e,t)=>i(`input`,{s:Math.round(e*100),v:Math.round((1-t)*100)}),()=>i(`change`));function l(e){let t=r.saturation,n=r.value;switch(e.key){case`ArrowLeft`:--t;break;case`ArrowRight`:t+=1;break;case`ArrowUp`:n+=1;break;case`ArrowDown`:--n;break;default:return}e.preventDefault(),i(`input`,{s:Math.min(100,Math.max(0,t)),v:Math.min(100,Math.max(0,n))}),i(`change`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-saturation`,ref:`target`,style:(0,t.normalizeStyle)({background:a.value}),onPointerdown:r[0]||=(...e)=>(0,t.unref)(c)&&(0,t.unref)(c)(...e),onKeydown:l,tabindex:`0`,role:`slider`,"aria-label":`채도/명도 (saturation/value)`,"aria-valuetext":`S ${Math.round(e.saturation)}, V ${Math.round(e.value)}`},[r[1]||=(0,t.createElementVNode)(`div`,{class:`vc-saturation__white`},null,-1),r[2]||=(0,t.createElementVNode)(`div`,{class:`vc-saturation__black`},null,-1),(0,t.createElementVNode)(`div`,{class:`vc-saturation__pointer`,style:(0,t.normalizeStyle)({left:o.value,top:s.value})},null,4)],44,_))}}),y=[`aria-valuenow`],b=(0,t.defineComponent)({__name:`Hue`,props:{hue:{}},emits:[`input`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>`${r.hue/360*100}%`),{down:o}=g(e=>i(`input`,Math.round(e*360)),()=>i(`change`));function s(e){let t=r.hue;switch(e.key){case`ArrowLeft`:case`ArrowDown`:--t;break;case`ArrowRight`:case`ArrowUp`:t+=1;break;case`PageDown`:t-=10;break;case`PageUp`:t+=10;break;case`Home`:t=0;break;case`End`:t=360;break;default:return}e.preventDefault(),i(`input`,Math.min(360,Math.max(0,t))),i(`change`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-hue`,ref:`target`,onPointerdown:r[0]||=(...e)=>(0,t.unref)(o)&&(0,t.unref)(o)(...e),onKeydown:s,tabindex:`0`,role:`slider`,"aria-label":`색조 (hue)`,"aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":Math.round(e.hue)},[(0,t.createElementVNode)(`div`,{class:`vc-hue__pointer`,style:(0,t.normalizeStyle)({left:a.value})},null,4)],40,y))}}),x=[`aria-valuenow`],S={class:`vc-alpha__track`},C=(0,t.defineComponent)({__name:`Alpha`,props:{rgba:{}},emits:[`input`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>{let{r:e,g:t,b:n}=r.rgba;return`linear-gradient(to right, rgba(${e},${t},${n},0), rgba(${e},${t},${n},1))`}),o=(0,t.computed)(()=>`${r.rgba.a*100}%`),{down:s}=g(e=>i(`input`,Math.round(e*100)/100),()=>i(`change`));function c(e){let t=r.rgba.a;switch(e.key){case`ArrowLeft`:case`ArrowDown`:t-=.05;break;case`ArrowRight`:case`ArrowUp`:t+=.05;break;case`Home`:t=0;break;case`End`:t=1;break;default:return}e.preventDefault(),t=Math.min(1,Math.max(0,Math.round(t*100)/100)),i(`input`,t),i(`change`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-alpha`,ref:`target`,onPointerdown:r[0]||=(...e)=>(0,t.unref)(s)&&(0,t.unref)(s)(...e),onKeydown:c,tabindex:`0`,role:`slider`,"aria-label":`투명도 (alpha)`,"aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":e.rgba.a},[(0,t.createElementVNode)(`div`,S,[r[1]||=(0,t.createElementVNode)(`div`,{class:`vc-alpha__checker`},null,-1),(0,t.createElementVNode)(`div`,{class:`vc-alpha__grad`,style:(0,t.normalizeStyle)({background:a.value})},null,4)]),(0,t.createElementVNode)(`div`,{class:`vc-alpha__pointer`,style:(0,t.normalizeStyle)({left:o.value})},null,4)],40,x))}}),w={class:`vc-input`},T=[`value`],E={class:`vc-input__label`},D=(0,t.defineComponent)({__name:`EditableInput`,props:{label:{},modelValue:{}},emits:[`update:modelValue`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.ref)(String(r.modelValue)),o=(0,t.ref)(!1);(0,t.watch)(()=>r.modelValue,e=>{o.value||(a.value=String(e))});function s(e){a.value=e.target.value}function c(){o.value=!0}async function l(){o.value=!1,i(`update:modelValue`,a.value),i(`change`),await(0,t.nextTick)(),a.value=String(r.modelValue)}function u(e){e.target.blur()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,w,[(0,t.createElementVNode)(`input`,{class:`vc-input__field`,value:a.value,onInput:s,onFocus:c,onBlur:l,onKeyup:(0,t.withKeys)(u,[`enter`])},null,40,T),(0,t.createElementVNode)(`span`,E,(0,t.toDisplayString)(e.label),1)]))}}),O={class:`vc-chrome__body`},k={class:`vc-chrome__sliders`},A={class:`vc-chrome__fields`},j={class:`vc-input vc-input--wide`},M={key:3,class:`vc-chrome__switch`},ee={class:`vc-chrome__mode`},te=(0,t.defineComponent)({__name:`ChromePicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`},inputFormats:{default:()=>[`hex`,`rgb`,`hsl`]}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=m();async function s(){let e=await o.open();e&&(a.setFromHex(e),a.input(),a.change())}let c=(0,t.ref)(i.inputFormats.includes(i.format)?i.format:i.inputFormats[0]??`hex`),l=(0,t.computed)(()=>i.inputFormats.length>1);function u(e){let t=i.inputFormats;c.value=t[(t.indexOf(c.value)+e+t.length)%t.length]}let d=(0,t.ref)(a.hex.value),f=(0,t.ref)(!1);(0,t.watch)(()=>a.hex.value,e=>{f.value||(d.value=e)});function h(){f.value=!1;let e=d.value.trim().replace(/[^0-9a-fA-F]/g,``).slice(0,8);a.setFromHex(`#`+e),a.input(),d.value=a.hex.value}function g(e,t){return Math.max(0,Math.min(t,Math.round(+e||0)))}function _(e,t){a.setFromRgba({...a.rgba.value,[e]:g(t,255)}),a.input()}function y(e,t){a.setFromHsla({...a.hsla.value,[e]:g(t,e===`h`?360:100)}),a.input()}function x(e){a.setAlpha(Math.max(0,Math.min(1,+e||0))),a.input()}let S=(0,t.computed)(()=>Math.round(a.rgba.value.a*100)/100),w=(0,t.computed)(()=>({h:Math.round(a.hsla.value.h),s:Math.round(a.hsla.value.s),l:Math.round(a.hsla.value.l)})),T=(0,t.computed)(()=>({background:a.hex.value}));return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-chrome`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createVNode)(v,{hue:(0,t.unref)(a).hsva.value.h,saturation:(0,t.unref)(a).hsva.value.s,value:(0,t.unref)(a).hsva.value.v,onInput:r[0]||=e=>{(0,t.unref)(a).setSaturation(e.s,e.v),(0,t.unref)(a).input()},onChange:r[1]||=e=>(0,t.unref)(a).change()},null,8,[`hue`,`saturation`,`value`]),(0,t.createElementVNode)(`div`,O,[(0,t.createElementVNode)(`div`,{class:`vc-chrome__preview`,style:(0,t.normalizeStyle)(T.value)},null,4),(0,t.unref)(o).isSupported?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,type:`button`,class:`vc-chrome__eyedropper`,"aria-label":`스포이드로 화면 색 추출`,title:`스포이드`,onClick:s},[...r[16]||=[(0,t.createElementVNode)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[(0,t.createElementVNode)(`path`,{d:`M11 7l6 6`}),(0,t.createElementVNode)(`path`,{d:`M4 16l11.7 -11.7a2.41 2.41 0 0 1 3.4 3.4l-11.7 11.7l-4 1l1 -4z`})],-1)]])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,k,[(0,t.createVNode)(b,{hue:(0,t.unref)(a).hsva.value.h,onInput:r[2]||=e=>{(0,t.unref)(a).setHue(e),(0,t.unref)(a).input()},onChange:r[3]||=e=>(0,t.unref)(a).change()},null,8,[`hue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(C,{key:0,rgba:(0,t.unref)(a).rgba.value,onInput:r[4]||=e=>{(0,t.unref)(a).setAlpha(e),(0,t.unref)(a).input()},onChange:r[5]||=e=>(0,t.unref)(a).change()},null,8,[`rgba`]))])]),(0,t.createElementVNode)(`div`,A,[c.value===`hex`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:0},[(0,t.createElementVNode)(`label`,j,[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{class:`vc-input__field`,"onUpdate:modelValue":r[6]||=e=>d.value=e,onFocus:r[7]||=e=>f.value=!0,onChange:h,onKeyup:(0,t.withKeys)(h,[`enter`])},null,544),[[t.vModelText,d.value]]),r[17]||=(0,t.createElementVNode)(`span`,{class:`vc-input__label`},`hex`,-1)]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(D,{key:0,label:`a`,modelValue:S.value,"onUpdate:modelValue":x},null,8,[`modelValue`]))],64)):c.value===`rgb`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createVNode)(D,{label:`r`,modelValue:(0,t.unref)(a).rgba.value.r,"onUpdate:modelValue":r[8]||=e=>_(`r`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`g`,modelValue:(0,t.unref)(a).rgba.value.g,"onUpdate:modelValue":r[9]||=e=>_(`g`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`b`,modelValue:(0,t.unref)(a).rgba.value.b,"onUpdate:modelValue":r[10]||=e=>_(`b`,e)},null,8,[`modelValue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(D,{key:0,label:`a`,modelValue:S.value,"onUpdate:modelValue":x},null,8,[`modelValue`]))],64)):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:2},[(0,t.createVNode)(D,{label:`h`,modelValue:w.value.h,"onUpdate:modelValue":r[11]||=e=>y(`h`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`s`,modelValue:w.value.s,"onUpdate:modelValue":r[12]||=e=>y(`s`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`l`,modelValue:w.value.l,"onUpdate:modelValue":r[13]||=e=>y(`l`,e)},null,8,[`modelValue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(D,{key:0,label:`a`,modelValue:S.value,"onUpdate:modelValue":x},null,8,[`modelValue`]))],64)),l.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,M,[(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-chrome__chev`,"aria-label":`이전 포맷`,onClick:r[14]||=e=>u(-1)},` ▲ `),(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-chrome__chev`,"aria-label":`다음 포맷`,onClick:r[15]||=e=>u(1)},` ▼ `)])):(0,t.createCommentVNode)(``,!0)]),(0,t.createElementVNode)(`div`,ee,(0,t.toDisplayString)(c.value.toUpperCase()),1)],4))}}),N=[`#D0021B`,`#F5A623`,`#F8E71C`,`#8B572A`,`#7ED321`,`#417505`,`#BD10E0`,`#9013FE`,`#4A90E2`,`#50E3C2`,`#B8E986`,`#000000`,`#4A4A4A`,`#9B9B9B`,`#FFFFFF`],P=[`#F44336`,`#E91E63`,`#9C27B0`,`#673AB7`,`#3F51B5`,`#2196F3`,`#03A9F4`,`#00BCD4`,`#009688`,`#4CAF50`,`#8BC34A`,`#CDDC39`,`#FFEB3B`,`#FFC107`,`#FF9800`,`#FF5722`,`#795548`,`#607D8B`],F=[`#4D4D4D`,`#999999`,`#FFFFFF`,`#F44E3B`,`#FE9200`,`#FCDC00`,`#DBDF00`,`#A4DD00`,`#68CCCA`,`#73D8FF`,`#AEA1FF`,`#FDA1FF`,`#333333`,`#808080`,`#CCCCCC`,`#D33115`,`#E27300`,`#FCC400`,`#B0BC00`,`#68BC00`,`#16A5A5`,`#009CE0`,`#7B64FF`,`#FA28FF`],I=[`#FF6900`,`#FCB900`,`#7BDCB5`,`#00D084`,`#8ED1FC`,`#0693E3`,`#ABB8C3`,`#EB144C`,`#F78DA7`,`#9900EF`],L=Array.from({length:15},(e,t)=>{let n=Math.round(t/14*255).toString(16).padStart(2,`0`);return`#${n}${n}${n}`.toUpperCase()}),R=[[`#FFEBEE`,`#FFCDD2`,`#E57373`,`#F44336`,`#D32F2F`,`#B71C1C`],[`#F3E5F5`,`#CE93D8`,`#AB47BC`,`#9C27B0`,`#7B1FA2`,`#4A148C`],[`#E3F2FD`,`#90CAF9`,`#42A5F5`,`#2196F3`,`#1976D2`,`#0D47A1`],[`#E0F2F1`,`#80CBC4`,`#26A69A`,`#009688`,`#00796B`,`#004D40`],[`#E8F5E9`,`#A5D6A7`,`#66BB6A`,`#4CAF50`,`#388E3C`,`#1B5E20`],[`#FFFDE7`,`#FFF59D`,`#FFEE58`,`#FFEB3B`,`#FBC02D`,`#F57F17`],[`#FFF3E0`,`#FFCC80`,`#FFA726`,`#FF9800`,`#F57C00`,`#E65100`],[`#EFEBE9`,`#BCAAA4`,`#8D6E63`,`#795548`,`#5D4037`,`#3E2723`]],z=[`aria-label`],B=(0,t.defineComponent)({__name:`Swatch`,props:{color:{},active:{type:Boolean}},emits:[`select`],setup(e,{emit:n}){let r=n;return(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{class:(0,t.normalizeClass)([`vc-swatch`,{"is-active":e.active}]),style:(0,t.normalizeStyle)({background:e.color}),type:`button`,"aria-label":e.color,onClick:i[0]||=t=>r(`select`,e.color)},null,14,z))}}),V={class:`vc-sketch__controls`},H={class:`vc-sketch__sliders`},U={class:`vc-sketch__field`},W={class:`vc-sketch__presets`},G=(0,t.defineComponent)({__name:`SketchPicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},presetColors:{default:()=>N},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=(0,t.computed)(()=>({background:a.hex.value}));function s(e){a.setFromHex(e),a.input(),a.change()}function c(e){a.setFromHex(e),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sketch`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createVNode)(v,{hue:(0,t.unref)(a).hsva.value.h,saturation:(0,t.unref)(a).hsva.value.s,value:(0,t.unref)(a).hsva.value.v,onInput:r[0]||=e=>{(0,t.unref)(a).setSaturation(e.s,e.v),(0,t.unref)(a).input()},onChange:r[1]||=e=>(0,t.unref)(a).change()},null,8,[`hue`,`saturation`,`value`]),(0,t.createElementVNode)(`div`,V,[(0,t.createElementVNode)(`div`,H,[(0,t.createVNode)(b,{hue:(0,t.unref)(a).hsva.value.h,onInput:r[2]||=e=>{(0,t.unref)(a).setHue(e),(0,t.unref)(a).input()},onChange:r[3]||=e=>(0,t.unref)(a).change()},null,8,[`hue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(C,{key:0,rgba:(0,t.unref)(a).rgba.value,onInput:r[4]||=e=>{(0,t.unref)(a).setAlpha(e),(0,t.unref)(a).input()},onChange:r[5]||=e=>(0,t.unref)(a).change()},null,8,[`rgba`]))]),(0,t.createElementVNode)(`div`,{class:`vc-sketch__preview`,style:(0,t.normalizeStyle)(o.value)},null,4)]),(0,t.createElementVNode)(`div`,U,[(0,t.createVNode)(D,{label:`hex`,modelValue:(0,t.unref)(a).hex.value,"onUpdate:modelValue":c},null,8,[`modelValue`])]),(0,t.createElementVNode)(`div`,W,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.presetColors,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,onSelect:s},null,8,[`color`]))),128))])],4))}}),K={class:`vc-ps__main`},q={class:`vc-ps__hue`},J={class:`vc-ps__side`},Y={class:`vc-ps__compare`},X=(0,t.defineComponent)({__name:`PhotoshopPicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 280px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`,`ok`,`cancel`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=n,o=p(r,a,()=>i.format,()=>i.disableAlpha),s=(0,t.ref)(c({...o.rgba.value,a:1})),l=(0,t.computed)(()=>o.hex.value);function u(){a(`ok`,o.output()),s.value=o.hex.value}function d(){o.setFromHex(s.value),o.input(),a(`cancel`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-ps`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createElementVNode)(`div`,K,[(0,t.createVNode)(v,{class:`vc-ps__sat`,hue:(0,t.unref)(o).hsva.value.h,saturation:(0,t.unref)(o).hsva.value.s,value:(0,t.unref)(o).hsva.value.v,onInput:r[0]||=e=>{(0,t.unref)(o).setSaturation(e.s,e.v),(0,t.unref)(o).input()},onChange:r[1]||=e=>(0,t.unref)(o).change()},null,8,[`hue`,`saturation`,`value`]),(0,t.createElementVNode)(`div`,q,[(0,t.createVNode)(b,{hue:(0,t.unref)(o).hsva.value.h,onInput:r[2]||=e=>{(0,t.unref)(o).setHue(e),(0,t.unref)(o).input()},onChange:r[3]||=e=>(0,t.unref)(o).change()},null,8,[`hue`])])]),(0,t.createElementVNode)(`div`,J,[(0,t.createElementVNode)(`div`,Y,[(0,t.createElementVNode)(`div`,{class:`vc-ps__swatch`,style:(0,t.normalizeStyle)({background:l.value})},[...r[4]||=[(0,t.createElementVNode)(`span`,null,`new`,-1)]],4),(0,t.createElementVNode)(`div`,{class:`vc-ps__swatch`,style:(0,t.normalizeStyle)({background:s.value})},[...r[5]||=[(0,t.createElementVNode)(`span`,null,`current`,-1)]],4)]),(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-ps__btn vc-ps__btn--ok`,onClick:u},` OK `),(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-ps__btn`,onClick:d},`Cancel`)])],4))}}),Z={class:`vc-compact__grid`},Q={class:`vc-compact__field`},ne=(0,t.defineComponent)({__name:`CompactPicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>F},columns:{},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])?i.presetColors.flat():i.presetColors);function s(e){a.setFromHex(e),a.input(),a.change()}function c(e){a.setFromHex(e),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-compact`,style:(0,t.normalizeStyle)({width:e.width,...e.columns==null?{}:{"--vc-swatch-columns":e.columns}})},[(0,t.createElementVNode)(`div`,Z,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.value,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:e.toUpperCase()===(0,t.unref)(a).hex.value.toUpperCase(),onSelect:s},null,8,[`color`,`active`]))),128))]),(0,t.createElementVNode)(`div`,Q,[(0,t.createElementVNode)(`div`,{class:`vc-compact__preview`,style:(0,t.normalizeStyle)({background:(0,t.unref)(a).hex.value})},null,4),(0,t.createVNode)(D,{label:`hex`,modelValue:(0,t.unref)(a).hex.value,"onUpdate:modelValue":c},null,8,[`modelValue`])])],4))}}),re=(0,t.defineComponent)({__name:`GrayscalePicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>L},columns:{},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])?i.presetColors.flat():i.presetColors);function s(e){a.setFromHex(e),a.input(),a.change()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-gray`,style:(0,t.normalizeStyle)({width:e.width,...e.columns==null?{}:{"--vc-swatch-columns":e.columns}})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.value,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:e.toUpperCase()===(0,t.unref)(a).hex.value.toUpperCase(),onSelect:s},null,8,[`color`,`active`]))),128))],4))}}),ie={class:`vc-material__rgb`},ae=(0,t.defineComponent)({__name:`MaterialPicker`,props:(0,t.mergeModels)({format:{default:`hex`},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0);function o(e){a.setFromHex(e),a.input()}function s(e){return Math.max(0,Math.min(255,Math.round(+e||0)))}function c(e,t){a.setFromRgba({...a.rgba.value,[e]:s(t)}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-material`,style:(0,t.normalizeStyle)({width:e.width,borderTopColor:(0,t.unref)(a).hex.value})},[(0,t.createVNode)(D,{class:`vc-material__hex`,label:`hex`,modelValue:(0,t.unref)(a).hex.value,"onUpdate:modelValue":o},null,8,[`modelValue`]),(0,t.createElementVNode)(`div`,ie,[(0,t.createVNode)(D,{label:`r`,modelValue:(0,t.unref)(a).rgba.value.r,"onUpdate:modelValue":r[0]||=e=>c(`r`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`g`,modelValue:(0,t.unref)(a).rgba.value.g,"onUpdate:modelValue":r[1]||=e=>c(`g`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`b`,modelValue:(0,t.unref)(a).rgba.value.b,"onUpdate:modelValue":r[2]||=e=>c(`b`,e)},null,8,[`modelValue`])])],4))}}),oe={class:`vc-twitter__swatches`},se={class:`vc-twitter__field`},ce=(0,t.defineComponent)({__name:`TwitterPicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>I},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])?i.presetColors.flat():i.presetColors);function s(e){a.setFromHex(e),a.input(),a.change()}function c(e){a.setFromHex(e),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-twitter`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createElementVNode)(`div`,oe,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.value,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,onSelect:s},null,8,[`color`]))),128))]),(0,t.createElementVNode)(`div`,se,[r[1]||=(0,t.createElementVNode)(`span`,{class:`vc-twitter__hash`},`#`,-1),(0,t.createVNode)(D,{label:``,modelValue:(0,t.unref)(a).hex.value.replace(`#`,``),"onUpdate:modelValue":r[0]||=e=>c(`#`+e)},null,8,[`modelValue`])])],4))}}),le={key:1,class:`vc-swatches__grid`},ue=(0,t.defineComponent)({__name:`SwatchesPicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>R},columns:{},width:{default:`var(--vc-width, 260px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])),s=(0,t.computed)(()=>o.value?i.presetColors:[]);function c(e){a.setFromHex(e),a.input(),a.change()}function l(e){return e.toUpperCase()===a.hex.value.toUpperCase()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-swatches`,style:(0,t.normalizeStyle)({width:e.width,...e.columns==null?{}:{"--vc-swatch-columns":e.columns}})},[o.value?((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,{key:0},(0,t.renderList)(s.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:`vc-swatches__row`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:l(e),onSelect:c},null,8,[`color`,`active`]))),128))]))),128)):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,le,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.presetColors,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:l(e),onSelect:c},null,8,[`color`,`active`]))),128))]))],4))}}),de=(0,t.defineComponent)({__name:`HueSlider`,props:(0,t.mergeModels)({width:{default:`var(--vc-width, 240px)`}},{modelValue:{default:0},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=n;function o(e){r.value=e,a(`input`,e)}function s(){a(`change`,r.value??0)}return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-hue-slider`,style:(0,t.normalizeStyle)({width:i.width})},[(0,t.createVNode)(b,{hue:r.value??0,onInput:o,onChange:s},null,8,[`hue`])],4))}}),fe={class:`vc-slider__row`},pe={class:`vc-slider__row`},me=[`value`],he={key:0,class:`vc-slider__row`},ge=(0,t.defineComponent)({__name:`SliderPicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha);function o(e){let t=+e.target.value;a.setFromHsla({...a.hsla.value,l:t}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-slider`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createElementVNode)(`div`,fe,[r[5]||=(0,t.createElementVNode)(`span`,{class:`vc-slider__label`},`H`,-1),(0,t.createVNode)(b,{hue:(0,t.unref)(a).hsva.value.h,onInput:r[0]||=e=>{(0,t.unref)(a).setHue(e),(0,t.unref)(a).input()},onChange:r[1]||=e=>(0,t.unref)(a).change()},null,8,[`hue`])]),(0,t.createElementVNode)(`div`,pe,[r[6]||=(0,t.createElementVNode)(`span`,{class:`vc-slider__label`},`L`,-1),(0,t.createElementVNode)(`input`,{class:`vc-slider__range`,type:`range`,min:`0`,max:`100`,value:(0,t.unref)(a).hsla.value.l,onInput:o,onChange:r[2]||=e=>(0,t.unref)(a).change()},null,40,me)]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,he,[r[7]||=(0,t.createElementVNode)(`span`,{class:`vc-slider__label`},`A`,-1),(0,t.createVNode)(C,{rgba:(0,t.unref)(a).rgba.value,onInput:r[3]||=e=>{(0,t.unref)(a).setAlpha(e),(0,t.unref)(a).input()},onChange:r[4]||=e=>(0,t.unref)(a).change()},null,8,[`rgba`])]))],4))}}),_e={class:`vc-sliders__label`},ve=[`max`,`step`,`value`,`onInput`],ye={class:`vc-sliders__value`},be=(0,t.defineComponent)({__name:`RGBASliders`,props:(0,t.mergeModels)({format:{default:`rgb`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=[{key:`r`,max:255,step:1},{key:`g`,max:255,step:1},{key:`b`,max:255,step:1},{key:`a`,max:1,step:.01}];function s(e){return a.rgba.value[e]}function c(e,t){let n=+t.target.value;a.setFromRgba({...a.rgba.value,[e]:n}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sliders`,style:(0,t.normalizeStyle)({width:e.width})},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o,n=>(0,t.withDirectives)((0,t.createElementVNode)(`div`,{class:`vc-sliders__row`,key:n.key},[(0,t.createElementVNode)(`span`,_e,(0,t.toDisplayString)(n.key.toUpperCase()),1),(0,t.createElementVNode)(`input`,{class:`vc-sliders__range`,type:`range`,min:0,max:n.max,step:n.step,value:s(n.key),onInput:e=>c(n.key,e),onChange:r[0]||=e=>(0,t.unref)(a).change()},null,40,ve),(0,t.createElementVNode)(`span`,ye,(0,t.toDisplayString)(n.key===`a`?s(n.key).toFixed(2):Math.round(s(n.key))),1)]),[[t.vShow,n.key!==`a`||!e.disableAlpha]])),64))],4))}}),$={class:`vc-sliders__label`},xe=[`max`,`step`,`value`,`onInput`],Se={class:`vc-sliders__value`},Ce=(0,t.defineComponent)({__name:`HSVSliders`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=[{key:`h`,max:360,step:1},{key:`s`,max:100,step:1},{key:`v`,max:100,step:1},{key:`a`,max:1,step:.01}];function s(e){return a.hsva.value[e]}function c(e,t){let n=+t.target.value;a.setFromHsva({...a.hsva.value,[e]:n}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sliders`,style:(0,t.normalizeStyle)({width:e.width})},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o,n=>(0,t.withDirectives)((0,t.createElementVNode)(`div`,{class:`vc-sliders__row`,key:n.key},[(0,t.createElementVNode)(`span`,$,(0,t.toDisplayString)(n.key.toUpperCase()),1),(0,t.createElementVNode)(`input`,{class:`vc-sliders__range`,type:`range`,min:0,max:n.max,step:n.step,value:s(n.key),onInput:e=>c(n.key,e),onChange:r[0]||=e=>(0,t.unref)(a).change()},null,40,xe),(0,t.createElementVNode)(`span`,Se,(0,t.toDisplayString)(n.key===`a`?s(n.key).toFixed(2):Math.round(s(n.key))),1)]),[[t.vShow,n.key!==`a`||!e.disableAlpha]])),64))],4))}}),we={class:`vc-sliders__label`},Te=[`max`,`step`,`value`,`onInput`],Ee={class:`vc-sliders__value`},De=(0,t.defineComponent)({__name:`HSLSliders`,props:(0,t.mergeModels)({format:{default:`hsl`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=[{key:`h`,max:360,step:1},{key:`s`,max:100,step:1},{key:`l`,max:100,step:1},{key:`a`,max:1,step:.01}];function s(e){return a.hsla.value[e]}function c(e,t){let n=+t.target.value;a.setFromHsla({...a.hsla.value,[e]:n}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sliders`,style:(0,t.normalizeStyle)({width:e.width})},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o,n=>(0,t.withDirectives)((0,t.createElementVNode)(`div`,{class:`vc-sliders__row`,key:n.key},[(0,t.createElementVNode)(`span`,we,(0,t.toDisplayString)(n.key.toUpperCase()),1),(0,t.createElementVNode)(`input`,{class:`vc-sliders__range`,type:`range`,min:0,max:n.max,step:n.step,value:s(n.key),onInput:e=>c(n.key,e),onChange:r[0]||=e=>(0,t.unref)(a).change()},null,40,Te),(0,t.createElementVNode)(`span`,Ee,(0,t.toDisplayString)(n.key===`a`?s(n.key).toFixed(2):Math.round(s(n.key))),1)]),[[t.vShow,n.key!==`a`||!e.disableAlpha]])),64))],4))}});function Oe(e=8){let n=(0,t.ref)([]);function r(t){let r=t.toUpperCase();n.value=[r,...n.value.filter(e=>e!==r)].slice(0,e)}function i(){n.value=[]}return{history:(0,t.readonly)(n),add:r,clear:i}}e.Alpha=C,e.COMPACT_PRESETS=F,e.ChromePicker=te,e.CompactPicker=ne,e.DEFAULT_PRESETS=N,e.EditableInput=D,e.GRAYSCALE_PRESETS=L,e.GrayscalePicker=re,e.HSLSliders=De,e.HSVSliders=Ce,e.Hue=b,e.HueSlider=de,e.MATERIAL_GRID=R,e.MATERIAL_PRESETS=P,e.MaterialPicker=ae,e.PhotoshopPicker=X,e.RGBASliders=be,e.Saturation=v,e.SketchPicker=G,e.SliderPicker=ge,e.Swatch=B,e.SwatchesPicker=ue,e.TWITTER_PRESETS=I,e.TwitterPicker=ce,e.hexToRgb=l,e.hslToRgb=s,e.hsvToRgb=i,e.rgbToHex=c,e.rgbToHsl=o,e.rgbToHsv=a,e.useColor=u,e.useColorHistory=Oe,e.useDrag=g,e.useEyeDropper=m});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VColor={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function n(e){return(e%360+360)%360}function r(e,t,n){return Math.min(n,Math.max(t,e))}function i({h:e,s:t,v:i,a}){e=n(e),t=r(t,0,100)/100,i=r(i,0,100)/100;let o=i*t,s=o*(1-Math.abs(e/60%2-1)),c=i-o,l=0,u=0,d=0;return e<60?[l,u,d]=[o,s,0]:e<120?[l,u,d]=[s,o,0]:e<180?[l,u,d]=[0,o,s]:e<240?[l,u,d]=[0,s,o]:e<300?[l,u,d]=[s,0,o]:[l,u,d]=[o,0,s],{r:Math.round((l+c)*255),g:Math.round((u+c)*255),b:Math.round((d+c)*255),a}}function a({r:e,g:t,b:r,a:i}){e/=255,t/=255,r/=255;let a=Math.max(e,t,r),o=a-Math.min(e,t,r),s=0;o!==0&&(s=a===e?(t-r)/o%6:a===t?(r-e)/o+2:(e-t)/o+4,s=n(s*60));let c=a===0?0:o/a,l=a;return{h:s,s:c*100,v:l*100,a:i}}function o({r:e,g:t,b:r,a:i}){e/=255,t/=255,r/=255;let a=Math.max(e,t,r),o=Math.min(e,t,r),s=a-o,c=0;s!==0&&(c=a===e?(t-r)/s%6:a===t?(r-e)/s+2:(e-t)/s+4,c=n(c*60));let l=(a+o)/2,u=s===0?0:s/(1-Math.abs(2*l-1));return{h:c,s:u*100,l:l*100,a:i}}function s({h:e,s:t,l:i,a}){e=n(e),t=r(t,0,100)/100,i=r(i,0,100)/100;let o=(1-Math.abs(2*i-1))*t,s=o*(1-Math.abs(e/60%2-1)),c=i-o/2,l=0,u=0,d=0;return e<60?[l,u,d]=[o,s,0]:e<120?[l,u,d]=[s,o,0]:e<180?[l,u,d]=[0,o,s]:e<240?[l,u,d]=[0,s,o]:e<300?[l,u,d]=[s,0,o]:[l,u,d]=[o,0,s],{r:Math.round((l+c)*255),g:Math.round((u+c)*255),b:Math.round((d+c)*255),a}}function c({r:e,g:t,b:n,a:i}){let a=e=>r(Math.round(e),0,255).toString(16).padStart(2,`0`),o=`#${a(e)}${a(t)}${a(n)}`;return i<1&&(o+=a(Math.round(i*255))),o.toUpperCase()}function l(e){let t=e.trim().replace(/^#/,``);(t.length===3||t.length===4)&&(t=t.split(``).map(e=>e+e).join(``));let n=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16),i=parseInt(t.slice(4,6),16),a=t.length===8?parseInt(t.slice(6,8),16)/255:1;return{r:Number.isNaN(n)?0:n,g:Number.isNaN(r)?0:r,b:Number.isNaN(i)?0:i,a:Number.isNaN(a)?1:a}}function u(e=`#000000`){let n=(0,t.ref)(a(l(e))),r=(0,t.computed)(()=>i(n.value)),u=(0,t.computed)(()=>o(r.value)),d=(0,t.computed)(()=>c(r.value));function f(e){n.value={...e}}function p(e){n.value=a(e)}function m(e){n.value=a(s(e))}function h(e){n.value=a(l(e))}function g(e){n.value={...n.value,h:e}}function _(e,t){n.value={...n.value,s:e,v:t}}function v(e){n.value={...n.value,a:e}}return{hsva:n,rgba:r,hsla:u,hex:d,setFromHsva:f,setFromRgba:p,setFromHsla:m,setFromHex:h,setHue:g,setSaturation:_,setAlpha:v}}function d(e,t,n=!1){let r=n?1:e.a,a=i({...e,a:r});if(t===`rgb`)return a;if(t===`hsl`){let e=o(a);return{h:Math.round(e.h),s:Math.round(e.s),l:Math.round(e.l),a:e.a}}return c(a)}function f(e,t){t!=null&&(typeof t==`string`?e.setFromHex(t):`v`in t?e.setFromHsva(t):`l`in t?e.setFromHsla(t):e.setFromRgba(t))}function p(e,n,r,i){let a=u(typeof e.value==`string`?e.value:`#FF5733`);f(a,e.value);function o(){return d(a.hsva.value,r(),i())}(0,t.watch)(e,e=>{JSON.stringify(e)!==JSON.stringify(o())&&f(a,e)});function s(){let t=o();e.value=t,n(`input`,t)}function c(){let t=o();e.value=t,n(`change`,t)}return{...a,output:o,input:s,change:c}}function m(){let e=(0,t.ref)(typeof window<`u`&&`EyeDropper`in window),n=(0,t.ref)(``);async function r(){if(!e.value||!window.EyeDropper)return null;try{let e=await new window.EyeDropper().open();return n.value=e.sRGBHex,e.sRGBHex}catch{return null}}return{isSupported:e,sRGBHex:n,open:r}}function h(e){return Math.min(1,Math.max(0,e))}function g(e,n){let r=(0,t.ref)(null);function i(t){let n=r.value;if(!n)return;let i=n.getBoundingClientRect();e(h((t.clientX-i.left)/i.width),h((t.clientY-i.top)/i.height))}function a(){window.removeEventListener(`pointermove`,i),window.removeEventListener(`pointerup`,a),n?.()}function o(e){e.preventDefault(),r.value?.focus?.(),i(e),window.addEventListener(`pointermove`,i),window.addEventListener(`pointerup`,a)}return(0,t.onBeforeUnmount)(a),{target:r,down:o}}var _=[`aria-valuetext`],v=(0,t.defineComponent)({__name:`Saturation`,props:{hue:{},saturation:{},value:{}},emits:[`input`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>`hsl(${r.hue}, 100%, 50%)`),o=(0,t.computed)(()=>`${r.saturation}%`),s=(0,t.computed)(()=>`${100-r.value}%`),{target:c,down:l}=g((e,t)=>i(`input`,{s:Math.round(e*100),v:Math.round((1-t)*100)}),()=>i(`change`));function u(e){let t=r.saturation,n=r.value;switch(e.key){case`ArrowLeft`:--t;break;case`ArrowRight`:t+=1;break;case`ArrowUp`:n+=1;break;case`ArrowDown`:--n;break;default:return}e.preventDefault(),i(`input`,{s:Math.min(100,Math.max(0,t)),v:Math.min(100,Math.max(0,n))}),i(`change`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-saturation`,ref:`target`,style:(0,t.normalizeStyle)({background:a.value}),onPointerdown:r[0]||=(...e)=>(0,t.unref)(l)&&(0,t.unref)(l)(...e),onKeydown:u,tabindex:`0`,role:`slider`,"aria-label":`채도/명도 (saturation/value)`,"aria-valuetext":`S ${Math.round(e.saturation)}, V ${Math.round(e.value)}`},[r[1]||=(0,t.createElementVNode)(`div`,{class:`vc-saturation__white`},null,-1),r[2]||=(0,t.createElementVNode)(`div`,{class:`vc-saturation__black`},null,-1),(0,t.createElementVNode)(`div`,{class:`vc-saturation__pointer`,style:(0,t.normalizeStyle)({left:o.value,top:s.value})},null,4)],44,_))}}),y=[`aria-valuenow`],b=(0,t.defineComponent)({__name:`Hue`,props:{hue:{}},emits:[`input`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>`${r.hue/360*100}%`),{target:o,down:s}=g(e=>i(`input`,Math.round(e*360)),()=>i(`change`));function c(e){let t=r.hue;switch(e.key){case`ArrowLeft`:case`ArrowDown`:--t;break;case`ArrowRight`:case`ArrowUp`:t+=1;break;case`PageDown`:t-=10;break;case`PageUp`:t+=10;break;case`Home`:t=0;break;case`End`:t=360;break;default:return}e.preventDefault(),i(`input`,Math.min(360,Math.max(0,t))),i(`change`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-hue`,ref:`target`,onPointerdown:r[0]||=(...e)=>(0,t.unref)(s)&&(0,t.unref)(s)(...e),onKeydown:c,tabindex:`0`,role:`slider`,"aria-label":`색조 (hue)`,"aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":Math.round(e.hue)},[(0,t.createElementVNode)(`div`,{class:`vc-hue__pointer`,style:(0,t.normalizeStyle)({left:a.value})},null,4)],40,y))}}),x=[`aria-valuenow`],S={class:`vc-alpha__track`},C=(0,t.defineComponent)({__name:`Alpha`,props:{rgba:{}},emits:[`input`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>{let{r:e,g:t,b:n}=r.rgba;return`linear-gradient(to right, rgba(${e},${t},${n},0), rgba(${e},${t},${n},1))`}),o=(0,t.computed)(()=>`${r.rgba.a*100}%`),{target:s,down:c}=g(e=>i(`input`,Math.round(e*100)/100),()=>i(`change`));function l(e){let t=r.rgba.a;switch(e.key){case`ArrowLeft`:case`ArrowDown`:t-=.05;break;case`ArrowRight`:case`ArrowUp`:t+=.05;break;case`Home`:t=0;break;case`End`:t=1;break;default:return}e.preventDefault(),t=Math.min(1,Math.max(0,Math.round(t*100)/100)),i(`input`,t),i(`change`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-alpha`,ref:`target`,onPointerdown:r[0]||=(...e)=>(0,t.unref)(c)&&(0,t.unref)(c)(...e),onKeydown:l,tabindex:`0`,role:`slider`,"aria-label":`투명도 (alpha)`,"aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":e.rgba.a},[(0,t.createElementVNode)(`div`,S,[r[1]||=(0,t.createElementVNode)(`div`,{class:`vc-alpha__checker`},null,-1),(0,t.createElementVNode)(`div`,{class:`vc-alpha__grad`,style:(0,t.normalizeStyle)({background:a.value})},null,4)]),(0,t.createElementVNode)(`div`,{class:`vc-alpha__pointer`,style:(0,t.normalizeStyle)({left:o.value})},null,4)],40,x))}}),w={class:`vc-input`},T=[`value`],E={class:`vc-input__label`},D=(0,t.defineComponent)({__name:`EditableInput`,props:{label:{},modelValue:{}},emits:[`update:modelValue`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.ref)(String(r.modelValue)),o=(0,t.ref)(!1);(0,t.watch)(()=>r.modelValue,e=>{o.value||(a.value=String(e))});function s(e){a.value=e.target.value}function c(){o.value=!0}async function l(){o.value=!1,i(`update:modelValue`,a.value),i(`change`),await(0,t.nextTick)(),a.value=String(r.modelValue)}function u(e){e.target.blur()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,w,[(0,t.createElementVNode)(`input`,{class:`vc-input__field`,value:a.value,onInput:s,onFocus:c,onBlur:l,onKeyup:(0,t.withKeys)(u,[`enter`])},null,40,T),(0,t.createElementVNode)(`span`,E,(0,t.toDisplayString)(e.label),1)]))}}),O={class:`vc-chrome__body`},k={class:`vc-chrome__sliders`},A={class:`vc-chrome__fields`},j={class:`vc-input vc-input--wide`},M={key:3,class:`vc-chrome__switch`},ee={class:`vc-chrome__mode`},te=(0,t.defineComponent)({__name:`ChromePicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`},inputFormats:{default:()=>[`hex`,`rgb`,`hsl`]}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=m();async function s(){let e=await o.open();e&&(a.setFromHex(e),a.input(),a.change())}let c=(0,t.ref)(i.inputFormats.includes(i.format)?i.format:i.inputFormats[0]??`hex`),l=(0,t.computed)(()=>i.inputFormats.length>1);function u(e){let t=i.inputFormats;c.value=t[(t.indexOf(c.value)+e+t.length)%t.length]}let d=(0,t.ref)(a.hex.value),f=(0,t.ref)(!1);(0,t.watch)(()=>a.hex.value,e=>{f.value||(d.value=e)});function h(){f.value=!1;let e=d.value.trim().replace(/[^0-9a-fA-F]/g,``).slice(0,8);a.setFromHex(`#`+e),a.input(),d.value=a.hex.value}function g(e,t){return Math.max(0,Math.min(t,Math.round(+e||0)))}function _(e,t){a.setFromRgba({...a.rgba.value,[e]:g(t,255)}),a.input()}function y(e,t){a.setFromHsla({...a.hsla.value,[e]:g(t,e===`h`?360:100)}),a.input()}function x(e){a.setAlpha(Math.max(0,Math.min(1,+e||0))),a.input()}let S=(0,t.computed)(()=>Math.round(a.rgba.value.a*100)/100),w=(0,t.computed)(()=>({h:Math.round(a.hsla.value.h),s:Math.round(a.hsla.value.s),l:Math.round(a.hsla.value.l)})),T=(0,t.computed)(()=>({background:a.hex.value}));return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-chrome`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createVNode)(v,{hue:(0,t.unref)(a).hsva.value.h,saturation:(0,t.unref)(a).hsva.value.s,value:(0,t.unref)(a).hsva.value.v,onInput:r[0]||=e=>{(0,t.unref)(a).setSaturation(e.s,e.v),(0,t.unref)(a).input()},onChange:r[1]||=e=>(0,t.unref)(a).change()},null,8,[`hue`,`saturation`,`value`]),(0,t.createElementVNode)(`div`,O,[(0,t.createElementVNode)(`div`,{class:`vc-chrome__preview`,style:(0,t.normalizeStyle)(T.value)},null,4),(0,t.unref)(o).isSupported?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,type:`button`,class:`vc-chrome__eyedropper`,"aria-label":`스포이드로 화면 색 추출`,title:`스포이드`,onClick:s},[...r[16]||=[(0,t.createElementVNode)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[(0,t.createElementVNode)(`path`,{d:`M11 7l6 6`}),(0,t.createElementVNode)(`path`,{d:`M4 16l11.7 -11.7a2.41 2.41 0 0 1 3.4 3.4l-11.7 11.7l-4 1l1 -4z`})],-1)]])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,k,[(0,t.createVNode)(b,{hue:(0,t.unref)(a).hsva.value.h,onInput:r[2]||=e=>{(0,t.unref)(a).setHue(e),(0,t.unref)(a).input()},onChange:r[3]||=e=>(0,t.unref)(a).change()},null,8,[`hue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(C,{key:0,rgba:(0,t.unref)(a).rgba.value,onInput:r[4]||=e=>{(0,t.unref)(a).setAlpha(e),(0,t.unref)(a).input()},onChange:r[5]||=e=>(0,t.unref)(a).change()},null,8,[`rgba`]))])]),(0,t.createElementVNode)(`div`,A,[c.value===`hex`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:0},[(0,t.createElementVNode)(`label`,j,[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{class:`vc-input__field`,"onUpdate:modelValue":r[6]||=e=>d.value=e,onFocus:r[7]||=e=>f.value=!0,onChange:h,onKeyup:(0,t.withKeys)(h,[`enter`])},null,544),[[t.vModelText,d.value]]),r[17]||=(0,t.createElementVNode)(`span`,{class:`vc-input__label`},`hex`,-1)]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(D,{key:0,label:`a`,modelValue:S.value,"onUpdate:modelValue":x},null,8,[`modelValue`]))],64)):c.value===`rgb`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createVNode)(D,{label:`r`,modelValue:(0,t.unref)(a).rgba.value.r,"onUpdate:modelValue":r[8]||=e=>_(`r`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`g`,modelValue:(0,t.unref)(a).rgba.value.g,"onUpdate:modelValue":r[9]||=e=>_(`g`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`b`,modelValue:(0,t.unref)(a).rgba.value.b,"onUpdate:modelValue":r[10]||=e=>_(`b`,e)},null,8,[`modelValue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(D,{key:0,label:`a`,modelValue:S.value,"onUpdate:modelValue":x},null,8,[`modelValue`]))],64)):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:2},[(0,t.createVNode)(D,{label:`h`,modelValue:w.value.h,"onUpdate:modelValue":r[11]||=e=>y(`h`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`s`,modelValue:w.value.s,"onUpdate:modelValue":r[12]||=e=>y(`s`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`l`,modelValue:w.value.l,"onUpdate:modelValue":r[13]||=e=>y(`l`,e)},null,8,[`modelValue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(D,{key:0,label:`a`,modelValue:S.value,"onUpdate:modelValue":x},null,8,[`modelValue`]))],64)),l.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,M,[(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-chrome__chev`,"aria-label":`이전 포맷`,onClick:r[14]||=e=>u(-1)},` ▲ `),(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-chrome__chev`,"aria-label":`다음 포맷`,onClick:r[15]||=e=>u(1)},` ▼ `)])):(0,t.createCommentVNode)(``,!0)]),(0,t.createElementVNode)(`div`,ee,(0,t.toDisplayString)(c.value.toUpperCase()),1)],4))}}),N=[`#D0021B`,`#F5A623`,`#F8E71C`,`#8B572A`,`#7ED321`,`#417505`,`#BD10E0`,`#9013FE`,`#4A90E2`,`#50E3C2`,`#B8E986`,`#000000`,`#4A4A4A`,`#9B9B9B`,`#FFFFFF`],P=[`#F44336`,`#E91E63`,`#9C27B0`,`#673AB7`,`#3F51B5`,`#2196F3`,`#03A9F4`,`#00BCD4`,`#009688`,`#4CAF50`,`#8BC34A`,`#CDDC39`,`#FFEB3B`,`#FFC107`,`#FF9800`,`#FF5722`,`#795548`,`#607D8B`],F=[`#4D4D4D`,`#999999`,`#FFFFFF`,`#F44E3B`,`#FE9200`,`#FCDC00`,`#DBDF00`,`#A4DD00`,`#68CCCA`,`#73D8FF`,`#AEA1FF`,`#FDA1FF`,`#333333`,`#808080`,`#CCCCCC`,`#D33115`,`#E27300`,`#FCC400`,`#B0BC00`,`#68BC00`,`#16A5A5`,`#009CE0`,`#7B64FF`,`#FA28FF`],I=[`#FF6900`,`#FCB900`,`#7BDCB5`,`#00D084`,`#8ED1FC`,`#0693E3`,`#ABB8C3`,`#EB144C`,`#F78DA7`,`#9900EF`],L=Array.from({length:15},(e,t)=>{let n=Math.round(t/14*255).toString(16).padStart(2,`0`);return`#${n}${n}${n}`.toUpperCase()}),R=[[`#FFEBEE`,`#FFCDD2`,`#E57373`,`#F44336`,`#D32F2F`,`#B71C1C`],[`#F3E5F5`,`#CE93D8`,`#AB47BC`,`#9C27B0`,`#7B1FA2`,`#4A148C`],[`#E3F2FD`,`#90CAF9`,`#42A5F5`,`#2196F3`,`#1976D2`,`#0D47A1`],[`#E0F2F1`,`#80CBC4`,`#26A69A`,`#009688`,`#00796B`,`#004D40`],[`#E8F5E9`,`#A5D6A7`,`#66BB6A`,`#4CAF50`,`#388E3C`,`#1B5E20`],[`#FFFDE7`,`#FFF59D`,`#FFEE58`,`#FFEB3B`,`#FBC02D`,`#F57F17`],[`#FFF3E0`,`#FFCC80`,`#FFA726`,`#FF9800`,`#F57C00`,`#E65100`],[`#EFEBE9`,`#BCAAA4`,`#8D6E63`,`#795548`,`#5D4037`,`#3E2723`]],z=[`aria-label`],B=(0,t.defineComponent)({__name:`Swatch`,props:{color:{},active:{type:Boolean}},emits:[`select`],setup(e,{emit:n}){let r=n;return(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{class:(0,t.normalizeClass)([`vc-swatch`,{"is-active":e.active}]),style:(0,t.normalizeStyle)({background:e.color}),type:`button`,"aria-label":e.color,onClick:i[0]||=t=>r(`select`,e.color)},null,14,z))}}),V={class:`vc-sketch__controls`},H={class:`vc-sketch__sliders`},U={class:`vc-sketch__field`},W={class:`vc-sketch__presets`},G=(0,t.defineComponent)({__name:`SketchPicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},presetColors:{default:()=>N},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=(0,t.computed)(()=>({background:a.hex.value}));function s(e){a.setFromHex(e),a.input(),a.change()}function c(e){a.setFromHex(e),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sketch`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createVNode)(v,{hue:(0,t.unref)(a).hsva.value.h,saturation:(0,t.unref)(a).hsva.value.s,value:(0,t.unref)(a).hsva.value.v,onInput:r[0]||=e=>{(0,t.unref)(a).setSaturation(e.s,e.v),(0,t.unref)(a).input()},onChange:r[1]||=e=>(0,t.unref)(a).change()},null,8,[`hue`,`saturation`,`value`]),(0,t.createElementVNode)(`div`,V,[(0,t.createElementVNode)(`div`,H,[(0,t.createVNode)(b,{hue:(0,t.unref)(a).hsva.value.h,onInput:r[2]||=e=>{(0,t.unref)(a).setHue(e),(0,t.unref)(a).input()},onChange:r[3]||=e=>(0,t.unref)(a).change()},null,8,[`hue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(C,{key:0,rgba:(0,t.unref)(a).rgba.value,onInput:r[4]||=e=>{(0,t.unref)(a).setAlpha(e),(0,t.unref)(a).input()},onChange:r[5]||=e=>(0,t.unref)(a).change()},null,8,[`rgba`]))]),(0,t.createElementVNode)(`div`,{class:`vc-sketch__preview`,style:(0,t.normalizeStyle)(o.value)},null,4)]),(0,t.createElementVNode)(`div`,U,[(0,t.createVNode)(D,{label:`hex`,modelValue:(0,t.unref)(a).hex.value,"onUpdate:modelValue":c},null,8,[`modelValue`])]),(0,t.createElementVNode)(`div`,W,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.presetColors,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,onSelect:s},null,8,[`color`]))),128))])],4))}}),K={class:`vc-ps__main`},q={class:`vc-ps__hue`},J={class:`vc-ps__side`},Y={class:`vc-ps__compare`},X=(0,t.defineComponent)({__name:`PhotoshopPicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 280px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`,`ok`,`cancel`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=n,o=p(r,a,()=>i.format,()=>i.disableAlpha),s=(0,t.ref)(c({...o.rgba.value,a:1})),l=(0,t.computed)(()=>o.hex.value);function u(){a(`ok`,o.output()),s.value=o.hex.value}function d(){o.setFromHex(s.value),o.input(),a(`cancel`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-ps`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createElementVNode)(`div`,K,[(0,t.createVNode)(v,{class:`vc-ps__sat`,hue:(0,t.unref)(o).hsva.value.h,saturation:(0,t.unref)(o).hsva.value.s,value:(0,t.unref)(o).hsva.value.v,onInput:r[0]||=e=>{(0,t.unref)(o).setSaturation(e.s,e.v),(0,t.unref)(o).input()},onChange:r[1]||=e=>(0,t.unref)(o).change()},null,8,[`hue`,`saturation`,`value`]),(0,t.createElementVNode)(`div`,q,[(0,t.createVNode)(b,{hue:(0,t.unref)(o).hsva.value.h,onInput:r[2]||=e=>{(0,t.unref)(o).setHue(e),(0,t.unref)(o).input()},onChange:r[3]||=e=>(0,t.unref)(o).change()},null,8,[`hue`])])]),(0,t.createElementVNode)(`div`,J,[(0,t.createElementVNode)(`div`,Y,[(0,t.createElementVNode)(`div`,{class:`vc-ps__swatch`,style:(0,t.normalizeStyle)({background:l.value})},[...r[4]||=[(0,t.createElementVNode)(`span`,null,`new`,-1)]],4),(0,t.createElementVNode)(`div`,{class:`vc-ps__swatch`,style:(0,t.normalizeStyle)({background:s.value})},[...r[5]||=[(0,t.createElementVNode)(`span`,null,`current`,-1)]],4)]),(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-ps__btn vc-ps__btn--ok`,onClick:u},` OK `),(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-ps__btn`,onClick:d},`Cancel`)])],4))}}),Z={class:`vc-compact__grid`},Q={class:`vc-compact__field`},ne=(0,t.defineComponent)({__name:`CompactPicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>F},columns:{},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])?i.presetColors.flat():i.presetColors);function s(e){a.setFromHex(e),a.input(),a.change()}function c(e){a.setFromHex(e),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-compact`,style:(0,t.normalizeStyle)({width:e.width,...e.columns==null?{}:{"--vc-swatch-columns":e.columns}})},[(0,t.createElementVNode)(`div`,Z,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.value,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:e.toUpperCase()===(0,t.unref)(a).hex.value.toUpperCase(),onSelect:s},null,8,[`color`,`active`]))),128))]),(0,t.createElementVNode)(`div`,Q,[(0,t.createElementVNode)(`div`,{class:`vc-compact__preview`,style:(0,t.normalizeStyle)({background:(0,t.unref)(a).hex.value})},null,4),(0,t.createVNode)(D,{label:`hex`,modelValue:(0,t.unref)(a).hex.value,"onUpdate:modelValue":c},null,8,[`modelValue`])])],4))}}),re=(0,t.defineComponent)({__name:`GrayscalePicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>L},columns:{},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])?i.presetColors.flat():i.presetColors);function s(e){a.setFromHex(e),a.input(),a.change()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-gray`,style:(0,t.normalizeStyle)({width:e.width,...e.columns==null?{}:{"--vc-swatch-columns":e.columns}})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.value,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:e.toUpperCase()===(0,t.unref)(a).hex.value.toUpperCase(),onSelect:s},null,8,[`color`,`active`]))),128))],4))}}),ie={class:`vc-material__rgb`},ae=(0,t.defineComponent)({__name:`MaterialPicker`,props:(0,t.mergeModels)({format:{default:`hex`},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0);function o(e){a.setFromHex(e),a.input()}function s(e){return Math.max(0,Math.min(255,Math.round(+e||0)))}function c(e,t){a.setFromRgba({...a.rgba.value,[e]:s(t)}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-material`,style:(0,t.normalizeStyle)({width:e.width,borderTopColor:(0,t.unref)(a).hex.value})},[(0,t.createVNode)(D,{class:`vc-material__hex`,label:`hex`,modelValue:(0,t.unref)(a).hex.value,"onUpdate:modelValue":o},null,8,[`modelValue`]),(0,t.createElementVNode)(`div`,ie,[(0,t.createVNode)(D,{label:`r`,modelValue:(0,t.unref)(a).rgba.value.r,"onUpdate:modelValue":r[0]||=e=>c(`r`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`g`,modelValue:(0,t.unref)(a).rgba.value.g,"onUpdate:modelValue":r[1]||=e=>c(`g`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`b`,modelValue:(0,t.unref)(a).rgba.value.b,"onUpdate:modelValue":r[2]||=e=>c(`b`,e)},null,8,[`modelValue`])])],4))}}),oe={class:`vc-twitter__swatches`},se={class:`vc-twitter__field`},ce=(0,t.defineComponent)({__name:`TwitterPicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>I},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])?i.presetColors.flat():i.presetColors);function s(e){a.setFromHex(e),a.input(),a.change()}function c(e){a.setFromHex(e),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-twitter`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createElementVNode)(`div`,oe,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.value,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,onSelect:s},null,8,[`color`]))),128))]),(0,t.createElementVNode)(`div`,se,[r[1]||=(0,t.createElementVNode)(`span`,{class:`vc-twitter__hash`},`#`,-1),(0,t.createVNode)(D,{label:``,modelValue:(0,t.unref)(a).hex.value.replace(`#`,``),"onUpdate:modelValue":r[0]||=e=>c(`#`+e)},null,8,[`modelValue`])])],4))}}),le={key:1,class:`vc-swatches__grid`},ue=(0,t.defineComponent)({__name:`SwatchesPicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>R},columns:{},width:{default:`var(--vc-width, 260px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])),s=(0,t.computed)(()=>o.value?i.presetColors:[]);function c(e){a.setFromHex(e),a.input(),a.change()}function l(e){return e.toUpperCase()===a.hex.value.toUpperCase()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-swatches`,style:(0,t.normalizeStyle)({width:e.width,...e.columns==null?{}:{"--vc-swatch-columns":e.columns}})},[o.value?((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,{key:0},(0,t.renderList)(s.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:`vc-swatches__row`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:l(e),onSelect:c},null,8,[`color`,`active`]))),128))]))),128)):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,le,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.presetColors,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:l(e),onSelect:c},null,8,[`color`,`active`]))),128))]))],4))}}),de=(0,t.defineComponent)({__name:`HueSlider`,props:(0,t.mergeModels)({width:{default:`var(--vc-width, 240px)`}},{modelValue:{default:0},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=n;function o(e){r.value=e,a(`input`,e)}function s(){a(`change`,r.value??0)}return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-hue-slider`,style:(0,t.normalizeStyle)({width:i.width})},[(0,t.createVNode)(b,{hue:r.value??0,onInput:o,onChange:s},null,8,[`hue`])],4))}}),fe={class:`vc-slider__row`},pe={class:`vc-slider__row`},me=[`value`],he={key:0,class:`vc-slider__row`},ge=(0,t.defineComponent)({__name:`SliderPicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha);function o(e){let t=+e.target.value;a.setFromHsla({...a.hsla.value,l:t}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-slider`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createElementVNode)(`div`,fe,[r[5]||=(0,t.createElementVNode)(`span`,{class:`vc-slider__label`},`H`,-1),(0,t.createVNode)(b,{hue:(0,t.unref)(a).hsva.value.h,onInput:r[0]||=e=>{(0,t.unref)(a).setHue(e),(0,t.unref)(a).input()},onChange:r[1]||=e=>(0,t.unref)(a).change()},null,8,[`hue`])]),(0,t.createElementVNode)(`div`,pe,[r[6]||=(0,t.createElementVNode)(`span`,{class:`vc-slider__label`},`L`,-1),(0,t.createElementVNode)(`input`,{class:`vc-slider__range`,type:`range`,min:`0`,max:`100`,value:(0,t.unref)(a).hsla.value.l,onInput:o,onChange:r[2]||=e=>(0,t.unref)(a).change()},null,40,me)]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,he,[r[7]||=(0,t.createElementVNode)(`span`,{class:`vc-slider__label`},`A`,-1),(0,t.createVNode)(C,{rgba:(0,t.unref)(a).rgba.value,onInput:r[3]||=e=>{(0,t.unref)(a).setAlpha(e),(0,t.unref)(a).input()},onChange:r[4]||=e=>(0,t.unref)(a).change()},null,8,[`rgba`])]))],4))}}),_e={class:`vc-sliders__label`},ve=[`max`,`step`,`value`,`onInput`],ye={class:`vc-sliders__value`},be=(0,t.defineComponent)({__name:`RGBASliders`,props:(0,t.mergeModels)({format:{default:`rgb`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=[{key:`r`,max:255,step:1},{key:`g`,max:255,step:1},{key:`b`,max:255,step:1},{key:`a`,max:1,step:.01}];function s(e){return a.rgba.value[e]}function c(e,t){let n=+t.target.value;a.setFromRgba({...a.rgba.value,[e]:n}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sliders`,style:(0,t.normalizeStyle)({width:e.width})},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o,n=>(0,t.withDirectives)((0,t.createElementVNode)(`div`,{class:`vc-sliders__row`,key:n.key},[(0,t.createElementVNode)(`span`,_e,(0,t.toDisplayString)(n.key.toUpperCase()),1),(0,t.createElementVNode)(`input`,{class:`vc-sliders__range`,type:`range`,min:0,max:n.max,step:n.step,value:s(n.key),onInput:e=>c(n.key,e),onChange:r[0]||=e=>(0,t.unref)(a).change()},null,40,ve),(0,t.createElementVNode)(`span`,ye,(0,t.toDisplayString)(n.key===`a`?s(n.key).toFixed(2):Math.round(s(n.key))),1)]),[[t.vShow,n.key!==`a`||!e.disableAlpha]])),64))],4))}}),$={class:`vc-sliders__label`},xe=[`max`,`step`,`value`,`onInput`],Se={class:`vc-sliders__value`},Ce=(0,t.defineComponent)({__name:`HSVSliders`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=[{key:`h`,max:360,step:1},{key:`s`,max:100,step:1},{key:`v`,max:100,step:1},{key:`a`,max:1,step:.01}];function s(e){return a.hsva.value[e]}function c(e,t){let n=+t.target.value;a.setFromHsva({...a.hsva.value,[e]:n}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sliders`,style:(0,t.normalizeStyle)({width:e.width})},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o,n=>(0,t.withDirectives)((0,t.createElementVNode)(`div`,{class:`vc-sliders__row`,key:n.key},[(0,t.createElementVNode)(`span`,$,(0,t.toDisplayString)(n.key.toUpperCase()),1),(0,t.createElementVNode)(`input`,{class:`vc-sliders__range`,type:`range`,min:0,max:n.max,step:n.step,value:s(n.key),onInput:e=>c(n.key,e),onChange:r[0]||=e=>(0,t.unref)(a).change()},null,40,xe),(0,t.createElementVNode)(`span`,Se,(0,t.toDisplayString)(n.key===`a`?s(n.key).toFixed(2):Math.round(s(n.key))),1)]),[[t.vShow,n.key!==`a`||!e.disableAlpha]])),64))],4))}}),we={class:`vc-sliders__label`},Te=[`max`,`step`,`value`,`onInput`],Ee={class:`vc-sliders__value`},De=(0,t.defineComponent)({__name:`HSLSliders`,props:(0,t.mergeModels)({format:{default:`hsl`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=[{key:`h`,max:360,step:1},{key:`s`,max:100,step:1},{key:`l`,max:100,step:1},{key:`a`,max:1,step:.01}];function s(e){return a.hsla.value[e]}function c(e,t){let n=+t.target.value;a.setFromHsla({...a.hsla.value,[e]:n}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sliders`,style:(0,t.normalizeStyle)({width:e.width})},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o,n=>(0,t.withDirectives)((0,t.createElementVNode)(`div`,{class:`vc-sliders__row`,key:n.key},[(0,t.createElementVNode)(`span`,we,(0,t.toDisplayString)(n.key.toUpperCase()),1),(0,t.createElementVNode)(`input`,{class:`vc-sliders__range`,type:`range`,min:0,max:n.max,step:n.step,value:s(n.key),onInput:e=>c(n.key,e),onChange:r[0]||=e=>(0,t.unref)(a).change()},null,40,Te),(0,t.createElementVNode)(`span`,Ee,(0,t.toDisplayString)(n.key===`a`?s(n.key).toFixed(2):Math.round(s(n.key))),1)]),[[t.vShow,n.key!==`a`||!e.disableAlpha]])),64))],4))}});function Oe(e=8){let n=(0,t.ref)([]);function r(t){let r=t.toUpperCase();n.value=[r,...n.value.filter(e=>e!==r)].slice(0,e)}function i(){n.value=[]}return{history:(0,t.readonly)(n),add:r,clear:i}}e.Alpha=C,e.COMPACT_PRESETS=F,e.ChromePicker=te,e.CompactPicker=ne,e.DEFAULT_PRESETS=N,e.EditableInput=D,e.GRAYSCALE_PRESETS=L,e.GrayscalePicker=re,e.HSLSliders=De,e.HSVSliders=Ce,e.Hue=b,e.HueSlider=de,e.MATERIAL_GRID=R,e.MATERIAL_PRESETS=P,e.MaterialPicker=ae,e.PhotoshopPicker=X,e.RGBASliders=be,e.Saturation=v,e.SketchPicker=G,e.SliderPicker=ge,e.Swatch=B,e.SwatchesPicker=ue,e.TWITTER_PRESETS=I,e.TwitterPicker=ce,e.hexToRgb=l,e.hslToRgb=s,e.hsvToRgb=i,e.rgbToHex=c,e.rgbToHsl=o,e.rgbToHsv=a,e.useColor=u,e.useColorHistory=Oe,e.useDrag=g,e.useEyeDropper=m});
|