npm - dou-ui - Versions diffs - 0.1.0-alpha.2 → 0.1.0-alpha.3 - Mend

dou-ui 0.1.0-alpha.2 → 0.1.0-alpha.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.

Files changed (386) hide show

package/dist/components/collapse/collapse-item.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useNamespace } from "../../utils/namespace.js";
-import { CollapseTransition } from "./collapse-transition.js";
+import { DouCollapseTransition } from "./collapse-transition.js";
 import { collapseKey } from "./collapse.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useId, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
 import { ChevronRightIcon } from "@dou-ui/icons";
@@ -57,7 +57,7 @@ var collapse_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			}, [createVNode(unref(ChevronRightIcon), { class: normalizeClass(unref(ns).e("arrow")) }, null, 8, ["class"]), createElementVNode("span", { class: normalizeClass(unref(ns).e("title")) }, [renderSlot(_ctx.$slots, "title", { open: open.value }, () => [createTextVNode(toDisplayString(__props.title ?? __props.value), 1)])], 2)], 10, _hoisted_2), slots.extra ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(unref(ns).e("extra"))
-			}, [renderSlot(_ctx.$slots, "extra")], 2)) : createCommentVNode("", true)], 10, _hoisted_1), createVNode(unref(CollapseTransition), null, {
+			}, [renderSlot(_ctx.$slots, "extra")], 2)) : createCommentVNode("", true)], 10, _hoisted_1), createVNode(unref(DouCollapseTransition), null, {
 				default: withCtx(() => [withDirectives(createElementVNode("div", {
 					id: `${unref(id)}-panel`,
 					role: "region",

package/dist/components/collapse/collapse-item.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collapse-item.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_withCtx","_withDirectives","_vShow"],"sources":["../../../src/components/collapse/collapse-item.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ChevronRightIcon } from '@dou-ui/icons'\nimport { computed, inject, ref, useId, watch } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { collapseKey } from './collapse'\nimport { CollapseTransition } from './collapse-transition'\nimport type { CollapseItemProps, CollapseItemSlots } from './collapse'\n\ndefineOptions({ name: 'DouCollapseItem' })\n\nconst props = withDefaults(defineProps<CollapseItemProps>(), { disabled: false })\nconst slots = defineSlots<CollapseItemSlots>()\n\nconst ns = useNamespace('collapse')\nconst collapse = inject(collapseKey, undefined)\nconst id = useId()\n\nconst open = computed(() => !!collapse?.open.value.includes(props.value))\n\n// Render the content the first time the item opens, then keep it.\nconst visited = ref(open.value)\nwatch(open, (value) => {\n if (value) visited.value = true\n})\n\nfunction toggle() {\n if (!props.disabled) collapse?.toggle(props.value)\n}\n</script>\n\n<template>\n <div :class=\"[ns.e('item'), ns.is('open', open), ns.is('disabled', disabled)]\">\n <div role=\"heading\" :aria-level=\"collapse?.headingLevel.value ?? 3\" :class=\"ns.e('header')\">\n <button\n :id=\"`${id}-header`\"\n type=\"button\"\n :class=\"ns.e('trigger')\"\n :aria-expanded=\"open\"\n :aria-controls=\"`${id}-panel`\"\n :aria-disabled=\"disabled \|\| undefined\"\n @click=\"toggle\"\n >\n <ChevronRightIcon :class=\"ns.e('arrow')\" />\n <span :class=\"ns.e('title')\">\n <slot name=\"title\" :open=\"open\">{{ title ?? value }}</slot>\n </span>\n </button>\n <div v-if=\"slots.extra\" :class=\"ns.e('extra')\"><slot name=\"extra\" /></div>\n </div>\n <CollapseTransition>\n <div\n v-show=\"open\"\n :id=\"`${id}-panel`\"\n role=\"region\"\n :class=\"ns.e('panel')\"\n :aria-labelledby=\"`${id}-header`\"\n >\n <div :class=\"ns.e('content')\"><slot v-if=\"visited\" /></div>\n </div>\n </CollapseTransition>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EACd,MAAM,QAAQA,SAAA;EAEd,MAAM,KAAK,aAAa,UAAU;EAClC,MAAM,WAAW,OAAO,aAAa,KAAA,CAAS;EAC9C,MAAM,KAAK,MAAM;EAEjB,MAAM,OAAO,eAAe,CAAC,CAAC,UAAU,KAAK,MAAM,SAAS,MAAM,KAAK,CAAC;EAGxE,MAAM,UAAU,IAAI,KAAK,KAAK;EAC9B,MAAM,OAAO,UAAU;GACrB,IAAI,OAAO,QAAQ,QAAQ;EAC7B,CAAC;EAED,SAAS,SAAS;GAChB,IAAI,CAAC,MAAM,UAAU,UAAU,OAAO,MAAM,KAAK;EACnD;;GAIE,OAAAC,UAAA,GAAAC,mBA6BM,OAAA,EA7BA,OAAKC,eAAA;IAAGC,MAAA,EAAA,CAAE,CAAC,EAAC,MAAA;IAAUA,MAAA,EAAA,CAAE,CAAC,GAAE,QAAS,KAAA,KAAI;IAAGA,MAAA,EAAA,CAAE,CAAC,GAAE,YAAa,QAAA,QAAQ;GAAA,CAAA,E,IACzEC,mBAgBM,OAAA;IAhBD,MAAK;IAAW,cAAYD,MAAA,QAAA,CAAQ,EAAE,aAAa,SAAK;IAAQ,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,QAAA,CAAA;G,IAC9EC,mBAaS,UAAA;IAZN,IAAE,GAAKD,MAAA,EAAA,EAAE;IACV,MAAK;IACJ,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,SAAA,CAAA;IACX,iBAAe,KAAA;IACf,iBAAa,GAAKA,MAAA,EAAA,EAAE;IACpB,iBAAe,QAAA,YAAY,KAAA;IAC3B,SAAO;G,IAERE,YAA2CF,MAAA,gBAAA,GAAA,EAAxB,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA,E,wBAC9BC,mBAEO,QAAA,EAFA,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA,E,IAChBG,WAA2D,KAAA,QAAA,SAAA,EAAvC,MAAM,KAAA,MAAI,SAA6B,CAAxBC,gBAAAC,gBAAA,QAAA,SAAS,QAAA,KAAK,GAAA,CAAA,C,2BAG1C,MAAM,SAAjBR,UAAA,GAAAC,mBAA0E,OAAA;;IAAjD,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA;G,IAAWG,WAAqB,KAAA,QAAA,OAAA,C,yDAEtED,YAUqBF,~~MAAA~~,~~kBAAA~~,GAAA,MAAA;IATnB,~~SAAAO~~,cAQM,CARNC,~~eAAAP~~,mBAQM,OAAA;KANH,IAAE,GAAKD,MAAA,EAAA,EAAE;KACV,MAAK;KACJ,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA;KACX,mBAAe,GAAKA,MAAA,EAAA,EAAE;I,IAEvBC,mBAA2D,OAAA,EAArD,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,SAAA,CAAA,E,IAAyB,QAAA,QAAZG,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,I,sDAN7C,~~CAAAM~~,OAAA,KAAA,KAAI,C"}
1	+ {"version":3,"file":"collapse-item.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","CollapseTransition","_withCtx","_withDirectives","_vShow"],"sources":["../../../src/components/collapse/collapse-item.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ChevronRightIcon } from '@dou-ui/icons'\nimport { computed, inject, ref, useId, watch } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { collapseKey } from './collapse'\nimport { DouCollapseTransition as CollapseTransition } from './collapse-transition'\nimport type { CollapseItemProps, CollapseItemSlots } from './collapse'\n\ndefineOptions({ name: 'DouCollapseItem' })\n\nconst props = withDefaults(defineProps<CollapseItemProps>(), { disabled: false })\nconst slots = defineSlots<CollapseItemSlots>()\n\nconst ns = useNamespace('collapse')\nconst collapse = inject(collapseKey, undefined)\nconst id = useId()\n\nconst open = computed(() => !!collapse?.open.value.includes(props.value))\n\n// Render the content the first time the item opens, then keep it.\nconst visited = ref(open.value)\nwatch(open, (value) => {\n if (value) visited.value = true\n})\n\nfunction toggle() {\n if (!props.disabled) collapse?.toggle(props.value)\n}\n</script>\n\n<template>\n <div :class=\"[ns.e('item'), ns.is('open', open), ns.is('disabled', disabled)]\">\n <div role=\"heading\" :aria-level=\"collapse?.headingLevel.value ?? 3\" :class=\"ns.e('header')\">\n <button\n :id=\"`${id}-header`\"\n type=\"button\"\n :class=\"ns.e('trigger')\"\n :aria-expanded=\"open\"\n :aria-controls=\"`${id}-panel`\"\n :aria-disabled=\"disabled \|\| undefined\"\n @click=\"toggle\"\n >\n <ChevronRightIcon :class=\"ns.e('arrow')\" />\n <span :class=\"ns.e('title')\">\n <slot name=\"title\" :open=\"open\">{{ title ?? value }}</slot>\n </span>\n </button>\n <div v-if=\"slots.extra\" :class=\"ns.e('extra')\"><slot name=\"extra\" /></div>\n </div>\n <CollapseTransition>\n <div\n v-show=\"open\"\n :id=\"`${id}-panel`\"\n role=\"region\"\n :class=\"ns.e('panel')\"\n :aria-labelledby=\"`${id}-header`\"\n >\n <div :class=\"ns.e('content')\"><slot v-if=\"visited\" /></div>\n </div>\n </CollapseTransition>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EACd,MAAM,QAAQA,SAAA;EAEd,MAAM,KAAK,aAAa,UAAU;EAClC,MAAM,WAAW,OAAO,aAAa,KAAA,CAAS;EAC9C,MAAM,KAAK,MAAM;EAEjB,MAAM,OAAO,eAAe,CAAC,CAAC,UAAU,KAAK,MAAM,SAAS,MAAM,KAAK,CAAC;EAGxE,MAAM,UAAU,IAAI,KAAK,KAAK;EAC9B,MAAM,OAAO,UAAU;GACrB,IAAI,OAAO,QAAQ,QAAQ;EAC7B,CAAC;EAED,SAAS,SAAS;GAChB,IAAI,CAAC,MAAM,UAAU,UAAU,OAAO,MAAM,KAAK;EACnD;;GAIE,OAAAC,UAAA,GAAAC,mBA6BM,OAAA,EA7BA,OAAKC,eAAA;IAAGC,MAAA,EAAA,CAAE,CAAC,EAAC,MAAA;IAAUA,MAAA,EAAA,CAAE,CAAC,GAAE,QAAS,KAAA,KAAI;IAAGA,MAAA,EAAA,CAAE,CAAC,GAAE,YAAa,QAAA,QAAQ;GAAA,CAAA,E,IACzEC,mBAgBM,OAAA;IAhBD,MAAK;IAAW,cAAYD,MAAA,QAAA,CAAQ,EAAE,aAAa,SAAK;IAAQ,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,QAAA,CAAA;G,IAC9EC,mBAaS,UAAA;IAZN,IAAE,GAAKD,MAAA,EAAA,EAAE;IACV,MAAK;IACJ,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,SAAA,CAAA;IACX,iBAAe,KAAA;IACf,iBAAa,GAAKA,MAAA,EAAA,EAAE;IACpB,iBAAe,QAAA,YAAY,KAAA;IAC3B,SAAO;G,IAERE,YAA2CF,MAAA,gBAAA,GAAA,EAAxB,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA,E,wBAC9BC,mBAEO,QAAA,EAFA,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA,E,IAChBG,WAA2D,KAAA,QAAA,SAAA,EAAvC,MAAM,KAAA,MAAI,SAA6B,CAAxBC,gBAAAC,gBAAA,QAAA,SAAS,QAAA,KAAK,GAAA,CAAA,C,2BAG1C,MAAM,SAAjBR,UAAA,GAAAC,mBAA0E,OAAA;;IAAjD,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA;G,IAAWG,WAAqB,KAAA,QAAA,OAAA,C,yDAEtED,YAUqBF,MAAAO,qBAAA,GAAA,MAAA;IATnB,SAAAC,cAQM,CARNC,eAAAR,mBAQM,OAAA;KANH,IAAE,GAAKD,MAAA,EAAA,EAAE;KACV,MAAK;KACJ,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA;KACX,mBAAe,GAAKA,MAAA,EAAA,EAAE;I,IAEvBC,mBAA2D,OAAA,EAArD,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,EAAC,SAAA,CAAA,E,IAAyB,QAAA,QAAZG,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,I,sDAN7C,CAAAO,OAAA,KAAA,KAAI,C"}

package/dist/components/collapse/collapse-transition.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { withInstall } from "../../utils/install.js";
 import { Transition, defineComponent, h } from "vue";
 // src/components/collapse/collapse-transition.ts
 var reset = (el) => {
@@ -37,6 +38,7 @@ var CollapseTransition = defineComponent({
 		onLeaveCancelled: reset
 	}, slots)
 });
-export { CollapseTransition };
+var DouCollapseTransition = withInstall(CollapseTransition);
+export { DouCollapseTransition };
 //# sourceMappingURL=collapse-transition.js.map

package/dist/components/collapse/collapse-transition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collapse-transition.js","names":[],"sources":["../../../src/components/collapse/collapse-transition.ts"],"sourcesContent":["import { Transition, defineComponent, h } from 'vue'\n\nconst reset = (el: Element) => {\n const style = (el as HTMLElement).style\n style.height = ''\n style.overflow = ''\n}\n\n/*\n Animate an element's height between zero and its natural size. Used by\n * every disclosure (collapse items, menu submenus) so they move alike, and\n * exported as `DouCollapseTransition` for content of your own.\n */\~~nexport~~ ~~const~~ CollapseTransition = defineComponent({\n name: 'DouCollapseTransition',\n setup:\n (_, { slots }) =>\n () =>\n h(\n Transition,\n {\n name: 'dou-collapse',\n onBeforeEnter(el) {\n const style = (el as HTMLElement).style\n style.height = '0'\n style.overflow = 'hidden'\n },\n onEnter(el) {\n ;(el as HTMLElement).style.height = `${el.scrollHeight}px`\n },\n onAfterEnter: reset,\n onEnterCancelled: reset,\n onBeforeLeave(el) {\n const style = (el as HTMLElement).style\n style.height = `${el.scrollHeight}px`\n style.overflow = 'hidden'\n },\n onLeave(el) {\n // read layout so the browser starts from the measured height\n void (el as HTMLElement).offsetHeight\n ;(el as HTMLElement).style.height = '0'\n },\n onAfterLeave: reset,\n onLeaveCancelled: reset,\n },\n slots,\n ),\n})\n"],"mappings":"~~;;AAEA~~,IAAM,SAAS,OAAgB;CAC7B,MAAM,QAAS,GAAmB;CAClC,MAAM,SAAS;CACf,MAAM,WAAW;AACnB;;;;;;AAOA,~~IAAa~~,qBAAqB,gBAAgB;~~CAChD~~,MAAM;CACN,QACG,GAAG,EAAE,kBAEJ,EACE,YACA;EACE,MAAM;EACN,cAAc,IAAI;GAChB,MAAM,QAAS,GAAmB;GAClC,MAAM,SAAS;GACf,MAAM,WAAW;EACnB;EACA,QAAQ,IAAI;GACT,GAAoB,MAAM,SAAS,GAAG,GAAG,aAAa;EACzD;EACA,cAAc;EACd,kBAAkB;EAClB,cAAc,IAAI;GAChB,MAAM,QAAS,GAAmB;GAClC,MAAM,SAAS,GAAG,GAAG,aAAa;GAClC,MAAM,WAAW;EACnB;EACA,QAAQ,IAAI;GAEV,GAAyB;GACxB,GAAoB,MAAM,SAAS;EACtC;EACA,cAAc;EACd,kBAAkB;CACpB,GACA,KACF;AACN,CAAC"}
1	+ {"version":3,"file":"collapse-transition.js","names":[],"sources":["../../../src/components/collapse/collapse-transition.ts"],"sourcesContent":["import { Transition, defineComponent, h } from 'vue'\nimport { withInstall } from '../../utils/install'\n\nconst reset = (el: Element) => {\n const style = (el as HTMLElement).style\n style.height = ''\n style.overflow = ''\n}\n\n/*\n Animate an element's height between zero and its natural size. Used by\n * every disclosure (collapse items, menu submenus) so they move alike, and\n * exported as `DouCollapseTransition` for content of your own.\n */\nconst CollapseTransition = defineComponent({\n name: 'DouCollapseTransition',\n setup:\n (_, { slots }) =>\n () =>\n h(\n Transition,\n {\n name: 'dou-collapse',\n onBeforeEnter(el) {\n const style = (el as HTMLElement).style\n style.height = '0'\n style.overflow = 'hidden'\n },\n onEnter(el) {\n ;(el as HTMLElement).style.height = `${el.scrollHeight}px`\n },\n onAfterEnter: reset,\n onEnterCancelled: reset,\n onBeforeLeave(el) {\n const style = (el as HTMLElement).style\n style.height = `${el.scrollHeight}px`\n style.overflow = 'hidden'\n },\n onLeave(el) {\n // read layout so the browser starts from the measured height\n void (el as HTMLElement).offsetHeight\n ;(el as HTMLElement).style.height = '0'\n },\n onAfterLeave: reset,\n onLeaveCancelled: reset,\n },\n slots,\n ),\n})\n\n// 在这里包装而不是在 index 里：别的组件直接从这个模块取，按需引入时也能读到默认值\nexport const DouCollapseTransition = withInstall(CollapseTransition)\n"],"mappings":";;;AAGA,IAAM,SAAS,OAAgB;CAC7B,MAAM,QAAS,GAAmB;CAClC,MAAM,SAAS;CACf,MAAM,WAAW;AACnB;;;;;;AAOA,IAAM,qBAAqB,gBAAgB;CACzC,MAAM;CACN,QACG,GAAG,EAAE,kBAEJ,EACE,YACA;EACE,MAAM;EACN,cAAc,IAAI;GAChB,MAAM,QAAS,GAAmB;GAClC,MAAM,SAAS;GACf,MAAM,WAAW;EACnB;EACA,QAAQ,IAAI;GACT,GAAoB,MAAM,SAAS,GAAG,GAAG,aAAa;EACzD;EACA,cAAc;EACd,kBAAkB;EAClB,cAAc,IAAI;GAChB,MAAM,QAAS,GAAmB;GAClC,MAAM,SAAS,GAAG,GAAG,aAAa;GAClC,MAAM,WAAW;EACnB;EACA,QAAQ,IAAI;GAEV,GAAyB;GACxB,GAAoB,MAAM,SAAS;EACtC;EACA,cAAc;EACd,kBAAkB;CACpB,GACA,KACF;AACN,CAAC;AAGD,IAAa,wBAAwB,YAAY,kBAAkB"}

package/dist/components/collapse/index.js CHANGED Viewed

@@ -1,11 +1,10 @@
 import { withInstall } from "../../utils/install.js";
-import { CollapseTransition } from "./collapse-transition.js";
+import { DouCollapseTransition } from "./collapse-transition.js";
 import collapse_default from "./collapse2.js";
 import collapse_item_default from "./collapse-item.js";
 // src/components/collapse/index.ts
 var DouCollapse = withInstall(collapse_default);
 var DouCollapseItem = withInstall(collapse_item_default);
-var DouCollapseTransition = withInstall(CollapseTransition);
 export { DouCollapse, DouCollapse as default, DouCollapseItem, DouCollapseTransition };
 //# sourceMappingURL=index.js.map

package/dist/components/collapse/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["Collapse","CollapseItem"],"sources":["../../../src/components/collapse/index.ts"],"sourcesContent":["import { withInstall } from '../../utils/install'\nimport Collapse from './collapse.vue'\nimport CollapseItem from './collapse-item.vue'\nimport { ~~CollapseTransition~~ } from './collapse-transition'\n\nexport const DouCollapse = withInstall(Collapse)\nexport const DouCollapseItem = withInstall(CollapseItem)\nexport ~~const~~ DouCollapseTransition ~~= withInstall(CollapseTransition)~~\nexport default DouCollapse\n\nexport type * from './collapse'\nexport type CollapseInstance = InstanceType<typeof Collapse>\nexport type CollapseItemInstance = InstanceType<typeof CollapseItem>\n\ndeclare module 'vue' {\n export interface GlobalComponents {\n DouCollapse: typeof DouCollapse\n DouCollapseItem: typeof DouCollapseItem\n DouCollapseTransition: typeof DouCollapseTransition\n }\n}\n"],"mappings":";;;;;AAKA,IAAa,cAAc,YAAYA,gBAAQ;AAC/C,IAAa,kBAAkB,YAAYC,qBAAY~~;AACvD,IAAa,wBAAwB,YAAY,kBAAkB~~"}
1	+ {"version":3,"file":"index.js","names":["Collapse","CollapseItem"],"sources":["../../../src/components/collapse/index.ts"],"sourcesContent":["import { withInstall } from '../../utils/install'\nimport Collapse from './collapse.vue'\nimport CollapseItem from './collapse-item.vue'\nimport { DouCollapseTransition } from './collapse-transition'\n\nexport const DouCollapse = withInstall(Collapse)\nexport const DouCollapseItem = withInstall(CollapseItem)\nexport { DouCollapseTransition }\nexport default DouCollapse\n\nexport type * from './collapse'\nexport type CollapseInstance = InstanceType<typeof Collapse>\nexport type CollapseItemInstance = InstanceType<typeof CollapseItem>\n\ndeclare module 'vue' {\n export interface GlobalComponents {\n DouCollapse: typeof DouCollapse\n DouCollapseItem: typeof DouCollapseItem\n DouCollapseTransition: typeof DouCollapseTransition\n }\n}\n"],"mappings":";;;;;AAKA,IAAa,cAAc,YAAYA,gBAAQ;AAC/C,IAAa,kBAAkB,YAAYC,qBAAY"}

package/dist/components/color-mode/color-mode-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-mode-button.js","names":["_sfc_main"],"sources":["../../../src/components/color-mode/color-mode-button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MoonIcon, SunIcon } from '@dou-ui/icons'\nimport { onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport DouButton from '../button~~/button.vue~~'\nimport { useLocale } from '../config-provider/use-config'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorModeButtonProps } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeButton' })\n\nwithDefaults(defineProps<ColorModeButtonProps>(), { variant: 'ghost' })\n\nconst ns = useNamespace('color-mode-button')\nconst { t } = useLocale()\nconst { isDark } = useColorMode()\n\n// The server cannot know the mode, so the icon waits for the browser.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n</script>\n\n<template>\n <DouButton\n :class=\"[ns.b(), ns.is('pending', !mounted)]\"\n :size=\"size\"\n :variant=\"variant\"\n :aria-label=\"t(mounted && isDark ? 'colorMode.toLight' : 'colorMode.toDark')\"\n @click=\"isDark = !isDark\"\n >\n <template #leading>\n <span :class=\"ns.e('icon')\" aria-hidden=\"true\">\n <MoonIcon v-if=\"mounted && isDark\" />\n <SunIcon v-else-if=\"mounted\" />\n </span>\n </template>\n </DouButton>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"color-mode-button.js","names":["_sfc_main"],"sources":["../../../src/components/color-mode/color-mode-button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MoonIcon, SunIcon } from '@dou-ui/icons'\nimport { onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { DouButton } from '../button'\nimport { useLocale } from '../config-provider/use-config'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorModeButtonProps } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeButton' })\n\nwithDefaults(defineProps<ColorModeButtonProps>(), { variant: 'ghost' })\n\nconst ns = useNamespace('color-mode-button')\nconst { t } = useLocale()\nconst { isDark } = useColorMode()\n\n// The server cannot know the mode, so the icon waits for the browser.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n</script>\n\n<template>\n <DouButton\n :class=\"[ns.b(), ns.is('pending', !mounted)]\"\n :size=\"size\"\n :variant=\"variant\"\n :aria-label=\"t(mounted && isDark ? 'colorMode.toLight' : 'colorMode.toDark')\"\n @click=\"isDark = !isDark\"\n >\n <template #leading>\n <span :class=\"ns.e('icon')\" aria-hidden=\"true\">\n <MoonIcon v-if=\"mounted && isDark\" />\n <SunIcon v-else-if=\"mounted\" />\n </span>\n </template>\n </DouButton>\n</template>\n"],"mappings":""}

package/dist/components/color-mode/color-mode-button.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useNamespace } from "../../utils/namespace.js";
 import { useLocale } from "../config-provider/use-config.js";
-import button_default from "../button/button.js";
+import { DouButton } from "../button/index.js";
 import { useColorMode } from "./use-color-mode.js";
 import { createBlock, createCommentVNode, createElementVNode, defineComponent, normalizeClass, onMounted, openBlock, ref, unref, withCtx } from "vue";
 import { MoonIcon, SunIcon } from "@dou-ui/icons";
@@ -19,7 +19,7 @@ var color_mode_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const mounted = ref(false);
 		onMounted(() => mounted.value = true);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(button_default, {
+			return openBlock(), createBlock(unref(DouButton), {
 				class: normalizeClass([unref(ns).b(), unref(ns).is("pending", !mounted.value)]),
 				size: __props.size,
 				variant: __props.variant,

package/dist/components/color-mode/color-mode-button.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-mode-button.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","~~DouButton~~","_normalizeClass","~~_unref","~~_withCtx","_createElementVNode","_createCommentVNode"],"sources":["../../../src/components/color-mode/color-mode-button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MoonIcon, SunIcon } from '@dou-ui/icons'\nimport { onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport DouButton from '../button~~/button.vue~~'\nimport { useLocale } from '../config-provider/use-config'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorModeButtonProps } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeButton' })\n\nwithDefaults(defineProps<ColorModeButtonProps>(), { variant: 'ghost' })\n\nconst ns = useNamespace('color-mode-button')\nconst { t } = useLocale()\nconst { isDark } = useColorMode()\n\n// The server cannot know the mode, so the icon waits for the browser.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n</script>\n\n<template>\n <DouButton\n :class=\"[ns.b(), ns.is('pending', !mounted)]\"\n :size=\"size\"\n :variant=\"variant\"\n :aria-label=\"t(mounted && isDark ? 'colorMode.toLight' : 'colorMode.toDark')\"\n @click=\"isDark = !isDark\"\n >\n <template #leading>\n <span :class=\"ns.e('icon')\" aria-hidden=\"true\">\n <MoonIcon v-if=\"mounted && isDark\" />\n <SunIcon v-else-if=\"mounted\" />\n </span>\n </template>\n </DouButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAaA,MAAM,KAAK,aAAa,mBAAmB;EAC3C,MAAM,EAAE,MAAM,UAAU;EACxB,MAAM,EAAE,WAAW,aAAa;EAGhC,MAAM,UAAU,IAAI,KAAK;EACzB,gBAAiB,QAAQ,QAAQ,IAAK;;GAIpC,OAAAA,UAAA,GAAAC,YAaYC,~~gBAAA~~;IAZT,OAAKC,eAAA,~~CAAGC~~,MAAA,EAAA,CAAE,CAAC,EAAC,GAAIA,MAAA,EAAA,CAAE,CAAC,GAAE,WAAA,CAAa,QAAA,KAAO,CAAA,CAAA;IACzC,MAAM,QAAA;IACN,SAAS,QAAA;IACT,cAAYA,MAAA,CAAA,CAAC,CAAC,QAAA,SAAWA,MAAA,MAAA,IAAM,sBAAA,kBAAA;IAC/B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAM,CAAIA,MAAA,MAAA;;IAEP,~~SAAOC~~,cAIT,CAHPC,mBAGO,QAAA;KAHA,~~OAAKH~~,~~eAAEC~~,MAAA,EAAA,CAAE,CAAC,EAAC,MAAA,CAAA;KAAU,eAAY;I,IACtB,QAAA,SAAWA,MAAA,MAAA,~~KAA3BJ~~,UAAA,GAAAC,~~YAAqCG~~,MAAA,QAAA,GAAA,EAAA,KAAA,EAAA,CAAA,KACjB,QAAA,~~SAApBJ~~,UAAA,GAAAC,YAA+BG,MAAA,OAAA,GAAA,EAAA,KAAA,EAAA,CAAA,K"}
1	+ {"version":3,"file":"color-mode-button.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createElementVNode","_createCommentVNode"],"sources":["../../../src/components/color-mode/color-mode-button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MoonIcon, SunIcon } from '@dou-ui/icons'\nimport { onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { DouButton } from '../button'\nimport { useLocale } from '../config-provider/use-config'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorModeButtonProps } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeButton' })\n\nwithDefaults(defineProps<ColorModeButtonProps>(), { variant: 'ghost' })\n\nconst ns = useNamespace('color-mode-button')\nconst { t } = useLocale()\nconst { isDark } = useColorMode()\n\n// The server cannot know the mode, so the icon waits for the browser.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n</script>\n\n<template>\n <DouButton\n :class=\"[ns.b(), ns.is('pending', !mounted)]\"\n :size=\"size\"\n :variant=\"variant\"\n :aria-label=\"t(mounted && isDark ? 'colorMode.toLight' : 'colorMode.toDark')\"\n @click=\"isDark = !isDark\"\n >\n <template #leading>\n <span :class=\"ns.e('icon')\" aria-hidden=\"true\">\n <MoonIcon v-if=\"mounted && isDark\" />\n <SunIcon v-else-if=\"mounted\" />\n </span>\n </template>\n </DouButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAaA,MAAM,KAAK,aAAa,mBAAmB;EAC3C,MAAM,EAAE,MAAM,UAAU;EACxB,MAAM,EAAE,WAAW,aAAa;EAGhC,MAAM,UAAU,IAAI,KAAK;EACzB,gBAAiB,QAAQ,QAAQ,IAAK;;GAIpC,OAAAA,UAAA,GAAAC,YAaYC,MAAA,SAAA,GAAA;IAZT,OAAKC,eAAA,CAAGD,MAAA,EAAA,CAAE,CAAC,EAAC,GAAIA,MAAA,EAAA,CAAE,CAAC,GAAE,WAAA,CAAa,QAAA,KAAO,CAAA,CAAA;IACzC,MAAM,QAAA;IACN,SAAS,QAAA;IACT,cAAYA,MAAA,CAAA,CAAC,CAAC,QAAA,SAAWA,MAAA,MAAA,IAAM,sBAAA,kBAAA;IAC/B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAM,CAAIA,MAAA,MAAA;;IAEP,SAAOE,cAIT,CAHPC,mBAGO,QAAA;KAHA,OAAKF,eAAED,MAAA,EAAA,CAAE,CAAC,EAAC,MAAA,CAAA;KAAU,eAAY;I,IACtB,QAAA,SAAWA,MAAA,MAAA,KAA3BF,UAAA,GAAAC,YAAqCC,MAAA,QAAA,GAAA,EAAA,KAAA,EAAA,CAAA,KACjB,QAAA,SAApBF,UAAA,GAAAC,YAA+BC,MAAA,OAAA,GAAA,EAAA,KAAA,EAAA,CAAA,K"}

package/dist/components/color-mode/color-mode-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-mode-select.js","names":["_sfc_main"],"sources":["../../../src/components/color-mode/color-mode-select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MonitorIcon, MoonIcon, SunIcon } from '@dou-ui/icons'\nimport { computed, onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { useLocale } from '../config-provider/use-config'\nimport DouSelect from '../select~~/select.vue~~'\nimport type { SelectValue } from '../select/select'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorMode, ColorModeSelectProps } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeSelect' })\n\ndefineProps<ColorModeSelectProps>()\n\nconst ns = useNamespace('color-mode-select')\nconst { t } = useLocale()\nconst { mode } = useColorMode()\n\nconst icons = { light: SunIcon, dark: MoonIcon, system: MonitorIcon }\nconst options = computed(() =>\n (['light', 'dark', 'system'] as const).map((value) => ({\n value,\n label: t(`colorMode.${value}`),\n })),\n)\n\n// The server renders the initial mode; the browser's choice shows once mounted.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\nconst shown = computed<ColorMode \| undefined>(() => (mounted.value ? mode.value : undefined))\n\nfunction onChange(value: SelectValue \| SelectValue[] \| null \| undefined) {\n if (value === 'light' \|\| value === 'dark' \|\| value === 'system') mode.value = value\n}\n</script>\n\n<template>\n <DouSelect\n :class=\"ns.b()\"\n :model-value=\"shown\"\n :options=\"options\"\n :size=\"size\"\n :disabled=\"disabled\"\n :placeholder=\"t('colorMode.label')\"\n :aria-label=\"t('colorMode.label')\"\n @update:model-value=\"onChange\"\n >\n <template #prefix>\n <component :is=\"icons[shown ?? 'system']\" :class=\"ns.e('icon')\" />\n </template>\n <template #option=\"{ option }\">\n <span :class=\"ns.e('option')\">\n <component :is=\"icons[option.value as ColorMode]\" :class=\"ns.e('icon')\" />\n <span :class=\"ns.e('label')\">{{ option.label }}</span>\n </span>\n </template>\n </DouSelect>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"color-mode-select.js","names":["_sfc_main"],"sources":["../../../src/components/color-mode/color-mode-select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MonitorIcon, MoonIcon, SunIcon } from '@dou-ui/icons'\nimport { computed, onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { useLocale } from '../config-provider/use-config'\nimport { DouSelect } from '../select'\nimport type { SelectValue } from '../select/select'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorMode, ColorModeSelectProps } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeSelect' })\n\ndefineProps<ColorModeSelectProps>()\n\nconst ns = useNamespace('color-mode-select')\nconst { t } = useLocale()\nconst { mode } = useColorMode()\n\nconst icons = { light: SunIcon, dark: MoonIcon, system: MonitorIcon }\nconst options = computed(() =>\n (['light', 'dark', 'system'] as const).map((value) => ({\n value,\n label: t(`colorMode.${value}`),\n })),\n)\n\n// The server renders the initial mode; the browser's choice shows once mounted.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\nconst shown = computed<ColorMode \| undefined>(() => (mounted.value ? mode.value : undefined))\n\nfunction onChange(value: SelectValue \| SelectValue[] \| null \| undefined) {\n if (value === 'light' \|\| value === 'dark' \|\| value === 'system') mode.value = value\n}\n</script>\n\n<template>\n <DouSelect\n :class=\"ns.b()\"\n :model-value=\"shown\"\n :options=\"options\"\n :size=\"size\"\n :disabled=\"disabled\"\n :placeholder=\"t('colorMode.label')\"\n :aria-label=\"t('colorMode.label')\"\n @update:model-value=\"onChange\"\n >\n <template #prefix>\n <component :is=\"icons[shown ?? 'system']\" :class=\"ns.e('icon')\" />\n </template>\n <template #option=\"{ option }\">\n <span :class=\"ns.e('option')\">\n <component :is=\"icons[option.value as ColorMode]\" :class=\"ns.e('icon')\" />\n <span :class=\"ns.e('label')\">{{ option.label }}</span>\n </span>\n </template>\n </DouSelect>\n</template>\n"],"mappings":""}

package/dist/components/color-mode/color-mode-select.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useNamespace } from "../../utils/namespace.js";
 import { useLocale } from "../config-provider/use-config.js";
 import { useColorMode } from "./use-color-mode.js";
-import select_default from "../select/select.js";
+import { DouSelect } from "../select/index.js";
 import { computed, createBlock, createElementVNode, defineComponent, normalizeClass, onMounted, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
 import { MonitorIcon, MoonIcon, SunIcon } from "@dou-ui/icons";
 // src/components/color-mode/color-mode-select.vue?vue&type=script&setup=true&lang.ts
@@ -36,7 +36,7 @@ var color_mode_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			if (value === "light" || value === "dark" || value === "system") mode.value = value;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(select_default, {
+			return openBlock(), createBlock(unref(DouSelect), {
 				class: normalizeClass(unref(ns).b()),
 				"model-value": shown.value,
 				options: options.value,

package/dist/components/color-mode/color-mode-select.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-mode-select.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","~~DouSelect~~","_normalizeClass","~~_unref","~~_withCtx","_resolveDynamicComponent","_createElementVNode","_toDisplayString"],"sources":["../../../src/components/color-mode/color-mode-select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MonitorIcon, MoonIcon, SunIcon } from '@dou-ui/icons'\nimport { computed, onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { useLocale } from '../config-provider/use-config'\nimport DouSelect from '../select~~/select.vue~~'\nimport type { SelectValue } from '../select/select'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorMode, ColorModeSelectProps } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeSelect' })\n\ndefineProps<ColorModeSelectProps>()\n\nconst ns = useNamespace('color-mode-select')\nconst { t } = useLocale()\nconst { mode } = useColorMode()\n\nconst icons = { light: SunIcon, dark: MoonIcon, system: MonitorIcon }\nconst options = computed(() =>\n (['light', 'dark', 'system'] as const).map((value) => ({\n value,\n label: t(`colorMode.${value}`),\n })),\n)\n\n// The server renders the initial mode; the browser's choice shows once mounted.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\nconst shown = computed<ColorMode \| undefined>(() => (mounted.value ? mode.value : undefined))\n\nfunction onChange(value: SelectValue \| SelectValue[] \| null \| undefined) {\n if (value === 'light' \|\| value === 'dark' \|\| value === 'system') mode.value = value\n}\n</script>\n\n<template>\n <DouSelect\n :class=\"ns.b()\"\n :model-value=\"shown\"\n :options=\"options\"\n :size=\"size\"\n :disabled=\"disabled\"\n :placeholder=\"t('colorMode.label')\"\n :aria-label=\"t('colorMode.label')\"\n @update:model-value=\"onChange\"\n >\n <template #prefix>\n <component :is=\"icons[shown ?? 'system']\" :class=\"ns.e('icon')\" />\n </template>\n <template #option=\"{ option }\">\n <span :class=\"ns.e('option')\">\n <component :is=\"icons[option.value as ColorMode]\" :class=\"ns.e('icon')\" />\n <span :class=\"ns.e('label')\">{{ option.label }}</span>\n </span>\n </template>\n </DouSelect>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAcA,MAAM,KAAK,aAAa,mBAAmB;EAC3C,MAAM,EAAE,MAAM,UAAU;EACxB,MAAM,EAAE,SAAS,aAAa;EAE9B,MAAM,QAAQ;GAAE,OAAO;GAAS,MAAM;GAAU,QAAQ;EAAY;EACpE,MAAM,UAAU,eACb;GAAC;GAAS;GAAQ;EAAQ,CAAC,CAAW,KAAK,WAAW;GACrD;GACA,OAAO,EAAE,aAAa,OAAO;EAC/B,EAAE,CACJ;EAGA,MAAM,UAAU,IAAI,KAAK;EACzB,gBAAiB,QAAQ,QAAQ,IAAK;EACtC,MAAM,QAAQ,eAAuC,QAAQ,QAAQ,KAAK,QAAQ,KAAA,CAAU;EAE5F,SAAS,SAAS,OAAuD;GACvE,IAAI,UAAU,WAAW,UAAU,UAAU,UAAU,UAAU,KAAK,QAAQ;EAChF;;GAIE,OAAAA,UAAA,GAAAC,YAmBYC,~~gBAAA~~;IAlBT,OAAKC,~~eAAEC~~,MAAA,EAAA,CAAE,CAAC,EAAC,CAAA;IACX,eAAa,MAAA;IACb,SAAS,QAAA;IACT,MAAM,QAAA;IACN,UAAU,QAAA;IACV,aAAaA,MAAA,CAAA,CAAC,CAAA,iBAAA;IACd,cAAYA,MAAA,CAAA,CAAC,CAAA,iBAAA;IACb,uBAAoB;;IAEV,~~QAAMC~~,cACmD,~~EAAlEL~~,UAAA,GAAAC,~~YAAkEK~~,wBAAlD,MAAM,MAAA,SAAK,SAAA,GAAA,EAAgB,~~OAAKH~~,~~eAAEC~~,MAAA,EAAA,CAAE,CAAC,EAAC,MAAA,CAAA,E;IAE7C,~~QAAMC~~,SAIR,EAJY,aAAM,CACzBE,mBAGO,QAAA,EAHA,~~OAAKJ~~,~~eAAEC~~,MAAA,EAAA,CAAE,CAAC,EAAC,QAAA,CAAA,E,~~KAChBJ~~,UAAA,GAAAC,~~YAA0EK~~,wBAA1D,MAAM,OAAO,MAAK,GAAA,EAAiB,~~OAAKH~~,~~eAAEC~~,MAAA,EAAA,CAAE,CAAC,EAAC,MAAA,CAAA,E,~~yBAC9DG~~,mBAAsD,QAAA,EAA/C,~~OAAKJ~~,~~eAAEC~~,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA,EAAc,~~GAAAI~~,gBAAA,OAAO,KAAK,GAAA,CAAA,C"}
1	+ {"version":3,"file":"color-mode-select.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_resolveDynamicComponent","_createElementVNode","_toDisplayString"],"sources":["../../../src/components/color-mode/color-mode-select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MonitorIcon, MoonIcon, SunIcon } from '@dou-ui/icons'\nimport { computed, onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { useLocale } from '../config-provider/use-config'\nimport { DouSelect } from '../select'\nimport type { SelectValue } from '../select/select'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorMode, ColorModeSelectProps } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeSelect' })\n\ndefineProps<ColorModeSelectProps>()\n\nconst ns = useNamespace('color-mode-select')\nconst { t } = useLocale()\nconst { mode } = useColorMode()\n\nconst icons = { light: SunIcon, dark: MoonIcon, system: MonitorIcon }\nconst options = computed(() =>\n (['light', 'dark', 'system'] as const).map((value) => ({\n value,\n label: t(`colorMode.${value}`),\n })),\n)\n\n// The server renders the initial mode; the browser's choice shows once mounted.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\nconst shown = computed<ColorMode \| undefined>(() => (mounted.value ? mode.value : undefined))\n\nfunction onChange(value: SelectValue \| SelectValue[] \| null \| undefined) {\n if (value === 'light' \|\| value === 'dark' \|\| value === 'system') mode.value = value\n}\n</script>\n\n<template>\n <DouSelect\n :class=\"ns.b()\"\n :model-value=\"shown\"\n :options=\"options\"\n :size=\"size\"\n :disabled=\"disabled\"\n :placeholder=\"t('colorMode.label')\"\n :aria-label=\"t('colorMode.label')\"\n @update:model-value=\"onChange\"\n >\n <template #prefix>\n <component :is=\"icons[shown ?? 'system']\" :class=\"ns.e('icon')\" />\n </template>\n <template #option=\"{ option }\">\n <span :class=\"ns.e('option')\">\n <component :is=\"icons[option.value as ColorMode]\" :class=\"ns.e('icon')\" />\n <span :class=\"ns.e('label')\">{{ option.label }}</span>\n </span>\n </template>\n </DouSelect>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAcA,MAAM,KAAK,aAAa,mBAAmB;EAC3C,MAAM,EAAE,MAAM,UAAU;EACxB,MAAM,EAAE,SAAS,aAAa;EAE9B,MAAM,QAAQ;GAAE,OAAO;GAAS,MAAM;GAAU,QAAQ;EAAY;EACpE,MAAM,UAAU,eACb;GAAC;GAAS;GAAQ;EAAQ,CAAC,CAAW,KAAK,WAAW;GACrD;GACA,OAAO,EAAE,aAAa,OAAO;EAC/B,EAAE,CACJ;EAGA,MAAM,UAAU,IAAI,KAAK;EACzB,gBAAiB,QAAQ,QAAQ,IAAK;EACtC,MAAM,QAAQ,eAAuC,QAAQ,QAAQ,KAAK,QAAQ,KAAA,CAAU;EAE5F,SAAS,SAAS,OAAuD;GACvE,IAAI,UAAU,WAAW,UAAU,UAAU,UAAU,UAAU,KAAK,QAAQ;EAChF;;GAIE,OAAAA,UAAA,GAAAC,YAmBYC,MAAA,SAAA,GAAA;IAlBT,OAAKC,eAAED,MAAA,EAAA,CAAE,CAAC,EAAC,CAAA;IACX,eAAa,MAAA;IACb,SAAS,QAAA;IACT,MAAM,QAAA;IACN,UAAU,QAAA;IACV,aAAaA,MAAA,CAAA,CAAC,CAAA,iBAAA;IACd,cAAYA,MAAA,CAAA,CAAC,CAAA,iBAAA;IACb,uBAAoB;;IAEV,QAAME,cACmD,EAAlEJ,UAAA,GAAAC,YAAkEI,wBAAlD,MAAM,MAAA,SAAK,SAAA,GAAA,EAAgB,OAAKF,eAAED,MAAA,EAAA,CAAE,CAAC,EAAC,MAAA,CAAA,E;IAE7C,QAAME,SAIR,EAJY,aAAM,CACzBE,mBAGO,QAAA,EAHA,OAAKH,eAAED,MAAA,EAAA,CAAE,CAAC,EAAC,QAAA,CAAA,E,KAChBF,UAAA,GAAAC,YAA0EI,wBAA1D,MAAM,OAAO,MAAK,GAAA,EAAiB,OAAKF,eAAED,MAAA,EAAA,CAAE,CAAC,EAAC,MAAA,CAAA,E,yBAC9DI,mBAAsD,QAAA,EAA/C,OAAKH,eAAED,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA,EAAc,GAAAK,gBAAA,OAAO,KAAK,GAAA,CAAA,C"}

package/dist/components/color-mode/color-mode-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-mode-switch.js","names":["_sfc_main"],"sources":["../../../src/components/color-mode/color-mode-switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { useLocale } from '../config-provider/use-config'\nimport DouSwitch from '../switch~~/switch.vue~~'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorModeSwitchProps, ColorModeSwitchSlots } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeSwitch' })\n\ndefineProps<ColorModeSwitchProps>()\nconst slots = defineSlots<ColorModeSwitchSlots>()\n\nconst ns = useNamespace('color-mode-switch')\nconst { t } = useLocale()\nconst { isDark } = useColorMode()\n\n// Off on the server and in the first client render, then the real mode.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n</script>\n\n<template>\n <DouSwitch\n :class=\"ns.b()\"\n :model-value=\"mounted && isDark\"\n :size=\"size\"\n :disabled=\"disabled\"\n :aria-label=\"t('colorMode.dark')\"\n @update:model-value=\"isDark = $event\"\n >\n <template v-if=\"slots.default\" #default><slot /></template>\n </DouSwitch>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"color-mode-switch.js","names":["_sfc_main"],"sources":["../../../src/components/color-mode/color-mode-switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { useLocale } from '../config-provider/use-config'\nimport { DouSwitch } from '../switch'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorModeSwitchProps, ColorModeSwitchSlots } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeSwitch' })\n\ndefineProps<ColorModeSwitchProps>()\nconst slots = defineSlots<ColorModeSwitchSlots>()\n\nconst ns = useNamespace('color-mode-switch')\nconst { t } = useLocale()\nconst { isDark } = useColorMode()\n\n// Off on the server and in the first client render, then the real mode.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n</script>\n\n<template>\n <DouSwitch\n :class=\"ns.b()\"\n :model-value=\"mounted && isDark\"\n :size=\"size\"\n :disabled=\"disabled\"\n :aria-label=\"t('colorMode.dark')\"\n @update:model-value=\"isDark = $event\"\n >\n <template v-if=\"slots.default\" #default><slot /></template>\n </DouSwitch>\n</template>\n"],"mappings":""}

package/dist/components/color-mode/color-mode-switch.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useNamespace } from "../../utils/namespace.js";
 import { useLocale } from "../config-provider/use-config.js";
 import { useColorMode } from "./use-color-mode.js";
-import switch_default from "../switch/switch.js";
+import { DouSwitch } from "../switch/index.js";
 import { createBlock, createSlots, defineComponent, normalizeClass, onMounted, openBlock, ref, renderSlot, unref, useSlots, withCtx } from "vue";
 // src/components/color-mode/color-mode-switch.vue?vue&type=script&setup=true&lang.ts
 var color_mode_switch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -19,7 +19,7 @@ var color_mode_switch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const mounted = ref(false);
 		onMounted(() => mounted.value = true);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(switch_default, {
+			return openBlock(), createBlock(unref(DouSwitch), {
 				class: normalizeClass(unref(ns).b()),
 				"model-value": mounted.value && unref(isDark),
 				size: __props.size,

package/dist/components/color-mode/color-mode-switch.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-mode-switch.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createBlock","~~DouSwitch~~","_normalizeClass","~~_unref","~~_createSlots","_withCtx","_renderSlot"],"sources":["../../../src/components/color-mode/color-mode-switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { useLocale } from '../config-provider/use-config'\nimport DouSwitch from '../switch~~/switch.vue~~'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorModeSwitchProps, ColorModeSwitchSlots } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeSwitch' })\n\ndefineProps<ColorModeSwitchProps>()\nconst slots = defineSlots<ColorModeSwitchSlots>()\n\nconst ns = useNamespace('color-mode-switch')\nconst { t } = useLocale()\nconst { isDark } = useColorMode()\n\n// Off on the server and in the first client render, then the real mode.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n</script>\n\n<template>\n <DouSwitch\n :class=\"ns.b()\"\n :model-value=\"mounted && isDark\"\n :size=\"size\"\n :disabled=\"disabled\"\n :aria-label=\"t('colorMode.dark')\"\n @update:model-value=\"isDark = $event\"\n >\n <template v-if=\"slots.default\" #default><slot /></template>\n </DouSwitch>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAWA,MAAM,QAAQA,SAAA;EAEd,MAAM,KAAK,aAAa,mBAAmB;EAC3C,MAAM,EAAE,MAAM,UAAU;EACxB,MAAM,EAAE,WAAW,aAAa;EAGhC,MAAM,UAAU,IAAI,KAAK;EACzB,gBAAiB,QAAQ,QAAQ,IAAK;;GAIpC,OAAAC,UAAA,GAAAC,YASYC,~~gBAAA~~;IART,OAAKC,~~eAAEC~~,MAAA,EAAA,CAAE,CAAC,EAAC,CAAA;IACX,eAAa,QAAA,SAAWA,MAAA,MAAA;IACxB,MAAM,QAAA;IACN,UAAU,QAAA;IACV,cAAYA,MAAA,CAAA,CAAC,CAAA,gBAAA;IACb,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAS;G,0BAEd,MAAM,U;IAAU,MAAA;IAAQ,~~IAAAE~~,cAAQ,CAARC,WAAQ,KAAA,QAAA,SAAA,C"}
1	+ {"version":3,"file":"color-mode-switch.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createBlock","_unref","_normalizeClass","_createSlots","_withCtx","_renderSlot"],"sources":["../../../src/components/color-mode/color-mode-switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { useLocale } from '../config-provider/use-config'\nimport { DouSwitch } from '../switch'\nimport { useColorMode } from './use-color-mode'\nimport type { ColorModeSwitchProps, ColorModeSwitchSlots } from './color-mode'\n\ndefineOptions({ name: 'DouColorModeSwitch' })\n\ndefineProps<ColorModeSwitchProps>()\nconst slots = defineSlots<ColorModeSwitchSlots>()\n\nconst ns = useNamespace('color-mode-switch')\nconst { t } = useLocale()\nconst { isDark } = useColorMode()\n\n// Off on the server and in the first client render, then the real mode.\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n</script>\n\n<template>\n <DouSwitch\n :class=\"ns.b()\"\n :model-value=\"mounted && isDark\"\n :size=\"size\"\n :disabled=\"disabled\"\n :aria-label=\"t('colorMode.dark')\"\n @update:model-value=\"isDark = $event\"\n >\n <template v-if=\"slots.default\" #default><slot /></template>\n </DouSwitch>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAWA,MAAM,QAAQA,SAAA;EAEd,MAAM,KAAK,aAAa,mBAAmB;EAC3C,MAAM,EAAE,MAAM,UAAU;EACxB,MAAM,EAAE,WAAW,aAAa;EAGhC,MAAM,UAAU,IAAI,KAAK;EACzB,gBAAiB,QAAQ,QAAQ,IAAK;;GAIpC,OAAAC,UAAA,GAAAC,YASYC,MAAA,SAAA,GAAA;IART,OAAKC,eAAED,MAAA,EAAA,CAAE,CAAC,EAAC,CAAA;IACX,eAAa,QAAA,SAAWA,MAAA,MAAA;IACxB,MAAM,QAAA;IACN,UAAU,QAAA;IACV,cAAYA,MAAA,CAAA,CAAC,CAAA,gBAAA;IACb,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,QAAS;G,0BAEd,MAAM,U;IAAU,MAAA;IAAQ,IAAAG,cAAQ,CAARC,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/color-panel/color-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-panel.js","names":["_sfc_main"],"sources":["../../../src/components/color-panel/color-panel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useTemplateRef, watch } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { useLocale } from '../config-provider/use-config'\nimport { DouFieldGroup } from '../field-group'\nimport { useFormDisabled, useFormItem } from '../form/use-form-item'\nimport DouInputComponent from '../input/input.vue'\nimport type { InputHTMLAttributes } from 'vue'\nimport type { WithAttributes } from '../../utils/install'\nimport DouSelect from '../select/select.vue'\nimport { ALPHA, CHANNELS, formatLabel } from '../color-picker/channels'\nimport type { Channel } from '../color-picker/channels'\nimport {\n COLOR_FORMATS,\n clamp,\n coordsIn,\n formatColor,\n hueIndex,\n hueOf,\n isAchromatic,\n parseColor,\n toCss,\n} from '../color-picker/color'\nimport type { Color, ColorFormat, ColorSpace, Coords } from '../color-picker/color'\nimport type { ColorPanelExpose, ColorPanelMode, ColorPanelProps } from './color-panel'\n\n// 让模板里也能写这个组件转交的原生属性\nconst DouInput = DouInputComponent as WithAttributes<typeof DouInputComponent, InputHTMLAttributes>\n\ndefineOptions({ name: 'DouColorPanel' })\n\nconst props = withDefaults(defineProps<ColorPanelProps>(), {\n format: 'hex',\n panel: 'square',\n gamut: 'srgb',\n showAlpha: false,\n presets: () => [],\n showInput: true,\n bordered: true,\n disabled: false,\n})\nconst model = defineModel<string \| null>()\nconst emit = defineEmits<{ change: [value: string \| null] }>()\n\nconst ns = useNamespace('color-panel')\nconst { t } = useLocale()\nconst { formItem } = useFormItem()\nconst disabled = useFormDisabled(() => props.disabled)\nconst rootRef = useTemplateRef<HTMLElement>('root')\n\n/* the panels /\n\nconst panels = computed<ColorPanelMode[]>(() => {\n const list = Array.isArray(props.panel) ? props.panel : [props.panel]\n return list.length ? [...new Set(list)] : ['square']\n})\nconst active = ref<ColorPanelMode>(panels.value[0]!)\nwatch(panels, (list) => {\n if (!list.includes(active.value)) active.value = list[0]!\n})\n/* The space the active panel edits in: the square and the wheel are HSV. /\nconst space = computed<ColorSpace>(() =>\n active.value === 'square' \|\| active.value === 'wheel' ? 'hsv' : active.value,\n)\nconst panelLabel = (panel: ColorPanelMode) =>\n panel === 'square'\n ? t('colorPicker.panelSquare')\n : panel === 'wheel'\n ? t('colorPicker.panelWheel')\n : formatLabel(panel)\n\n/ the color /\n\nconst options = computed(() => ({ alpha: props.showAlpha, gamut: props.gamut }))\nconst print = (value: Color, format: ColorFormat = props.format) =>\n formatColor(value, format, options.value)\n\n// The panel keeps the color in the space it edits in, so a channel the\n// value cannot show (the hue of a gray, the chroma the gamut mapping\n// cuts) stays where the user put it.\nconst fallback = (): Color => ({ space: 'hsv', coords: [0, 0, 0], alpha: 1 })\nconst color = ref<Color>(fallback())\n\n/* Bring a color into the panel's space, keeping the current hue for a gray. /\nfunction adopt(next: Color, hue = hueOf(color.value)): Color {\n const target = space.value\n if (next.space === target) return { ...next, coords: [...next.coords] }\n const coords = coordsIn(next, target, props.gamut)\n const index = hueIndex(target)\n const result: Color = { space: target, coords: [...coords], alpha: next.alpha }\n if (index !== undefined && hue !== undefined && isAchromatic(result)) result.coords[index] = hue\n return result\n}\n\ncolor.value = adopt(parseColor(model.value ?? '') ?? fallback())\nwatch(model, (value) => {\n const parsed = value ? parseColor(value) : null\n if (!parsed \|\| print(parsed) === print(color.value)) return\n color.value = adopt(parsed)\n})\nwatch(space, () => (color.value = adopt(color.value)))\n\nfunction set(next: Color) {\n color.value = props.showAlpha ? next : { ...next, alpha: 1 }\n model.value = print(color.value)\n}\nfunction setCoord(index: number, value: number) {\n const coords: Coords = [...color.value.coords]\n coords[index] = value\n set({ ...color.value, coords })\n}\nconst setAlpha = (alpha: number) => set({ ...color.value, alpha: clamp(alpha) })\n\nconst opaque = computed(() => toCss({ ...color.value, alpha: 1 }, props.gamut))\nconst current = computed(() => toCss(color.value, props.gamut, props.showAlpha))\n\n/* The color settled: tell the listeners and the form. /\nfunction settle() {\n emit('change', print(color.value))\n formItem?.trigger('change')\n}\n\n/ dragging /\n\n/* Follow the pointer, passing its position within the target as 0–1 (unclamped). /\nfunction drag(event: PointerEvent, apply: (x: number, y: number) => void) {\n if (event.button !== 0) return\n const target = event.currentTarget as HTMLElement\n const rect = target.getBoundingClientRect()\n const at = (e: PointerEvent) =>\n apply((e.clientX - rect.left) / (rect.width \|\| 1), (e.clientY - rect.top) / (rect.height \|\| 1))\n at(event)\n target.focus()\n target.setPointerCapture?.(event.pointerId)\n const move = (e: PointerEvent) => at(e)\n const up = () => {\n settle()\n target.removeEventListener('pointermove', move)\n target.removeEventListener('pointerup', up)\n target.removeEventListener('pointercancel', up)\n }\n target.addEventListener('pointermove', move)\n target.addEventListener('pointerup', up)\n target.addEventListener('pointercancel', up)\n}\n\nconst hsv = computed(() => color.value.coords)\nconst onAreaDown = (event: PointerEvent) =>\n drag(event, (x, y) => set({ ...color.value, coords: [hsv.value[0], clamp(x), clamp(1 - y)] }))\nconst onWheelDown = (event: PointerEvent) =>\n drag(event, (x, y) => {\n const [dx, dy] = [x - 0.5, y - 0.5]\n const h = ((Math.atan2(dy, dx) 180) / Math.PI + 360) % 360\n set({ ...color.value, coords: [h, clamp(Math.hypot(dx, dy) * 2), hsv.value[2]] })\n })\nconst onChannelDown = (event: PointerEvent, index: number, channel: Channel) =>\n drag(event, (x) => setCoord(index, channel.min + clamp(x) * (channel.max - channel.min)))\nconst onAlphaDown = (event: PointerEvent) => drag(event, (x) => setAlpha(clamp(x)))\n\n/** The direction an arrow key moves a value, and how far: 1%, or 10% with Shift. /\nfunction arrow(event: KeyboardEvent) {\n const dx = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0\n const dy = event.key === 'ArrowUp' ? 1 : event.key === 'ArrowDown' ? -1 : 0\n if (dx \|\| dy) event.preventDefault()\n return { dx, dy, step: (event.shiftKey ? 10 : 1) / 100 }\n}\n\nfunction onAreaKeydown(event: KeyboardEvent) {\n const { dx, dy, step } = arrow(event)\n if (!dx && !dy) return\n const [h, s, v] = hsv.value\n set({ ...color.value, coords: [h, clamp(s + dx step), clamp(v + dy * step)] })\n settle()\n}\nfunction onWheelKeydown(event: KeyboardEvent) {\n const { dx, dy, step } = arrow(event)\n if (!dx && !dy) return\n const [h, s, v] = hsv.value\n set({ ...color.value, coords: [(h + dx * step * 360 + 360) % 360, clamp(s + dy * step), v] })\n settle()\n}\nfunction onChannelKeydown(event: KeyboardEvent, index: number, channel: Channel) {\n const { dx, dy, step } = arrow(event)\n if (!dx && !dy) return\n const next = color.value.coords[index]! + (dx \|\| dy) * step * (channel.max - channel.min)\n setCoord(index, clamp(next, channel.min, channel.max))\n settle()\n}\nfunction onAlphaKeydown(event: KeyboardEvent) {\n const { dx, dy, step } = arrow(event)\n if (!dx && !dy) return\n setAlpha(color.value.alpha + (dx \|\| dy) * step)\n settle()\n}\n\n/* what the panels draw /\n\nconst percent = (value: number) => Math.round(value 100)\nconst position = (value: number, channel: Channel) =>\n `${((value - channel.min) / (channel.max - channel.min)) * 100}%`\nconst pure = computed(() => toCss({ space: 'hsv', coords: [hsv.value[0], 1, 1], alpha: 1 }))\nconst bright = computed(() =>\n toCss({ space: 'hsv', coords: [hsv.value[0], hsv.value[1], 1], alpha: 1 }),\n)\nconst wheelThumb = computed(() => {\n const [h, s] = hsv.value\n const rad = (h * Math.PI) / 180\n return { left: `${50 + 50 * s * Math.cos(rad)}%`, top: `${50 + 50 * s * Math.sin(rad)}%` }\n})\n\nconst channels = computed(() => CHANNELS[space.value])\n/** Each channel's track: the color as that channel runs its range, the others held. /\nconst tracks = computed(() =>\n channels.value.map((channel, index) => {\n const isHue = channel.name === 'hue'\n const steps = space.value === 'rgb' ? 1 : isHue ? 12 : 16\n const stops = Array.from({ length: steps + 1 }, (_, k) => {\n const coords: Coords = [...color.value.coords]\n coords[index] = channel.min + ((channel.max - channel.min) k) / steps\n return toCss({ space: space.value, coords, alpha: 1 }, props.gamut)\n })\n return `linear-gradient(to right, ${stops.join(', ')})`\n }),\n)\n\nconst display = (value: number, channel: Channel) =>\n String(Number((value * channel.scale).toFixed(channel.digits)) \|\| 0)\nconst valueText = (value: number, channel: Channel) =>\n `${display(value, channel)}${channel.unit ?? ''}`\n\nfunction onChannelInput(event: Event, index: number, channel: Channel) {\n const input = event.target as HTMLInputElement\n const next = parseFloat(input.value)\n if (Number.isFinite(next)) {\n const coord = clamp(next / channel.scale, channel.min, channel.max)\n if (index < 0) setAlpha(coord)\n else setCoord(index, coord)\n settle()\n }\n input.value = display(index < 0 ? color.value.alpha : color.value.coords[index]!, channel)\n}\n\n/* the text box /\n\n// The text box can show the color in any format; it starts at `format`.\nconst textFormat = ref<ColorFormat>(props.format)\nconst formatOptions = COLOR_FORMATS.map((format) => ({ value: format, label: formatLabel(format) }))\nwatch(\n () => props.format,\n (format) => (textFormat.value = format),\n)\n/* The format's arguments only: the menu in front of the box names the format. /\nconst shown = computed(() => {\n const full = print(color.value, textFormat.value)\n return textFormat.value === 'hex' ? full : full.slice(full.indexOf('(') + 1, -1)\n})\nconst text = ref('')\nwatch(shown, (value) => (text.value = value), { immediate: true })\nfunction onTextCommit() {\n const typed = text.value.trim()\n const parsed =\n parseColor(typed) ??\n (textFormat.value === 'hex' ? null : parseColor(`${textFormat.value}(${typed})`))\n if (!parsed) {\n text.value = shown.value\n return\n }\n const before = print(color.value)\n set(adopt(parsed, hueOf(parsed) ?? hueOf(color.value)))\n if (print(color.value) !== before) settle()\n}\n\nfunction pickPreset(preset: string) {\n const parsed = parseColor(preset)\n if (!parsed) return\n set(adopt(parsed))\n settle()\n}\nconst presetValue = (preset: string) => {\n const parsed = parseColor(preset)\n return parsed ? print(parsed) : preset\n}\nconst presetCss = (preset: string) => {\n const parsed = parseColor(preset)\n return parsed ? toCss(parsed, props.gamut, true) : undefined\n}\n\nconst printed = computed(() => {\n const parsed = model.value ? parseColor(model.value) : null\n return parsed ? print(parsed) : ''\n})\n\nfunction focus() {\n rootRef.value?.querySelector<HTMLElement>('[role=\"slider\"]')?.focus()\n}\n\ndefineExpose<ColorPanelExpose>({ focus })\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"[ns.b(), ns.is('bordered', bordered), ns.is('disabled', disabled)]\"\n :inert=\"disabled \|\| undefined\"\n :aria-disabled=\"disabled \|\| undefined\"\n >\n <div\n v-if=\"panels.length > 1\"\n :class=\"ns.e('tabs')\"\n role=\"group\"\n :aria-label=\"t('colorPicker.panels')\"\n >\n <button\n v-for=\"item in panels\"\n :key=\"item\"\n type=\"button\"\n :class=\"[ns.e('tab'), ns.is('active', item === active)]\"\n :aria-pressed=\"item === active\"\n @click=\"active = item\"\n >\n {{ panelLabel(item) }}\n </button>\n </div>\n\n <template v-if=\"active === 'square'\">\n <div\n role=\"slider\"\n tabindex=\"0\"\n :class=\"ns.e('area')\"\n :style=\"{ backgroundColor: pure }\"\n :aria-label=\"t('colorPicker.area')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-valuenow=\"percent(hsv[1])\"\n :aria-valuetext=\"t('colorPicker.areaValue', { s: percent(hsv[1]), v: percent(hsv[2]) })\"\n @pointerdown=\"onAreaDown\"\n @keydown=\"onAreaKeydown\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{\n left: `${hsv[1] 100}%`,\n top: `${(1 - hsv[2]) * 100}%`,\n backgroundColor: opaque,\n }\"\n />\n </div>\n </template>\n\n <template v-else-if=\"active === 'wheel'\">\n <div\n role=\"slider\"\n tabindex=\"0\"\n :class=\"ns.e('wheel')\"\n :style=\"{ '--dou-color-panel-dim': 1 - hsv[2] }\"\n :aria-label=\"t('colorPicker.wheel')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"360\"\n :aria-valuenow=\"Math.round(hsv[0])\"\n :aria-valuetext=\"t('colorPicker.wheelValue', { h: Math.round(hsv[0]), s: percent(hsv[1]) })\"\n @pointerdown=\"onWheelDown\"\n @keydown=\"onWheelKeydown\"\n >\n <span :class=\"ns.e('thumb')\" :style=\"{ ...wheelThumb, backgroundColor: opaque }\" />\n </div>\n </template>\n\n <template v-else>\n <span :class=\"[ns.e('swatch'), ns.e('bar')]\" aria-hidden=\"true\">\n <span :style=\"{ backgroundColor: current }\" />\n </span>\n <div :class=\"ns.e('channels')\">\n <div\n v-for=\"(channel, index) in channels\"\n :key=\"`${space}-${index}`\"\n :class=\"ns.e('channel')\"\n >\n <span :class=\"ns.e('label')\" aria-hidden=\"true\">{{ channel.label }}</span>\n <div\n role=\"slider\"\n tabindex=\"0\"\n :class=\"ns.e('track')\"\n :style=\"{ '--dou-color-panel-track': tracks[index] }\"\n :aria-label=\"t(`colorPicker.${channel.name}`)\"\n :aria-valuemin=\"display(channel.min, channel)\"\n :aria-valuemax=\"display(channel.max, channel)\"\n :aria-valuenow=\"display(color.coords[index]!, channel)\"\n :aria-valuetext=\"valueText(color.coords[index]!, channel)\"\n @pointerdown=\"onChannelDown($event, index, channel)\"\n @keydown=\"onChannelKeydown($event, index, channel)\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{\n left: position(color.coords[index]!, channel),\n backgroundColor: opaque,\n }\"\n />\n </div>\n <input\n :class=\"ns.e('number')\"\n type=\"text\"\n inputmode=\"decimal\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n tabindex=\"-1\"\n :aria-label=\"t(`colorPicker.${channel.name}`)\"\n :value=\"display(color.coords[index]!, channel)\"\n @change=\"onChannelInput($event, index, channel)\"\n @keydown.enter.prevent=\"onChannelInput($event, index, channel)\"\n @keydown.up.down=\"onChannelKeydown($event, index, channel)\"\n />\n </div>\n <div v-if=\"showAlpha\" :class=\"ns.e('channel')\">\n <span :class=\"ns.e('label')\" aria-hidden=\"true\">{{ ALPHA.label }}</span>\n <div\n role=\"slider\"\n tabindex=\"0\"\n :class=\"[ns.e('track'), ns.e('alpha')]\"\n :style=\"{ '--dou-color-panel-opaque': opaque }\"\n :aria-label=\"t('colorPicker.alpha')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-valuenow=\"percent(color.alpha)\"\n :aria-valuetext=\"`${percent(color.alpha)}%`\"\n @pointerdown=\"onAlphaDown\"\n @keydown=\"onAlphaKeydown\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{ left: `${color.alpha * 100}%`, backgroundColor: current }\"\n />\n </div>\n <input\n :class=\"ns.e('number')\"\n type=\"text\"\n inputmode=\"decimal\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n tabindex=\"-1\"\n :aria-label=\"t('colorPicker.alpha')\"\n :value=\"display(color.alpha, ALPHA)\"\n @change=\"onChannelInput($event, -1, ALPHA)\"\n @keydown.enter.prevent=\"onChannelInput($event, -1, ALPHA)\"\n @keydown.up.down=\"onAlphaKeydown\"\n />\n </div>\n </div>\n </template>\n\n <div v-if=\"active === 'square' \|\| active === 'wheel'\" :class=\"ns.e('controls')\">\n <div :class=\"ns.e('sliders')\">\n <div\n v-if=\"active === 'square'\"\n role=\"slider\"\n tabindex=\"0\"\n :class=\"[ns.e('track'), ns.e('hue')]\"\n :aria-label=\"t('colorPicker.hue')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"360\"\n :aria-valuenow=\"Math.round(hsv[0])\"\n @pointerdown=\"onChannelDown($event, 0, CHANNELS.hsv[0])\"\n @keydown=\"onChannelKeydown($event, 0, CHANNELS.hsv[0])\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{ left: `${(hsv[0] / 360) * 100}%`, backgroundColor: pure }\"\n />\n </div>\n <div\n v-else\n role=\"slider\"\n tabindex=\"0\"\n :class=\"[ns.e('track'), ns.e('value')]\"\n :style=\"{ '--dou-color-panel-bright': bright }\"\n :aria-label=\"t('colorPicker.brightness')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-valuenow=\"percent(hsv[2])\"\n :aria-valuetext=\"`${percent(hsv[2])}%`\"\n @pointerdown=\"onChannelDown($event, 2, CHANNELS.hsv[2])\"\n @keydown=\"onChannelKeydown($event, 2, CHANNELS.hsv[2])\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{ left: `${hsv[2] * 100}%`, backgroundColor: opaque }\"\n />\n </div>\n <div\n v-if=\"showAlpha\"\n role=\"slider\"\n tabindex=\"0\"\n :class=\"[ns.e('track'), ns.e('alpha')]\"\n :style=\"{ '--dou-color-panel-opaque': opaque }\"\n :aria-label=\"t('colorPicker.alpha')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-valuenow=\"percent(color.alpha)\"\n :aria-valuetext=\"`${percent(color.alpha)}%`\"\n @pointerdown=\"onAlphaDown\"\n @keydown=\"onAlphaKeydown\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{ left: `${color.alpha * 100}%`, backgroundColor: current }\"\n />\n </div>\n </div>\n <span :class=\"[ns.e('swatch'), ns.e('preview')]\" aria-hidden=\"true\">\n <span :style=\"{ backgroundColor: current }\" />\n </span>\n </div>\n\n <DouFieldGroup v-if=\"showInput\" :class=\"ns.e('entry')\" size=\"sm\" block>\n <DouSelect\n :model-value=\"textFormat\"\n :class=\"ns.e('format')\"\n :options=\"formatOptions\"\n :aria-label=\"t('colorPicker.format')\"\n @update:model-value=\"textFormat = $event as ColorFormat\"\n />\n <DouInput\n v-model=\"text\"\n :class=\"[ns.e('text'), ns.is('hex', textFormat === 'hex')]\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n :aria-label=\"t('colorPicker.text')\"\n @change=\"onTextCommit\"\n @keydown.enter.prevent=\"onTextCommit\"\n />\n </DouFieldGroup>\n <div\n v-if=\"presets.length\"\n :class=\"ns.e('presets')\"\n role=\"group\"\n :aria-label=\"t('colorPicker.presets')\"\n >\n <button\n v-for=\"preset in presets\"\n :key=\"preset\"\n type=\"button\"\n :class=\"[ns.e('preset'), ns.is('selected', presetValue(preset) === printed)]\"\n :aria-label=\"preset\"\n :aria-pressed=\"presetValue(preset) === printed\"\n @click=\"pickPreset(preset)\"\n >\n <span :style=\"{ backgroundColor: presetCss(preset) }\" />\n </button>\n </div>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"color-panel.js","names":["_sfc_main"],"sources":["../../../src/components/color-panel/color-panel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useTemplateRef, watch } from 'vue'\nimport { useNamespace } from '../../utils/namespace'\nimport { useLocale } from '../config-provider/use-config'\nimport { DouFieldGroup } from '../field-group'\nimport { useFormDisabled, useFormItem } from '../form/use-form-item'\nimport { DouInput as DouInputComponent } from '../input'\nimport type { InputHTMLAttributes } from 'vue'\nimport type { WithAttributes } from '../../utils/install'\nimport { DouSelect } from '../select'\nimport { ALPHA, CHANNELS, formatLabel } from '../color-picker/channels'\nimport type { Channel } from '../color-picker/channels'\nimport {\n COLOR_FORMATS,\n clamp,\n coordsIn,\n formatColor,\n hueIndex,\n hueOf,\n isAchromatic,\n parseColor,\n toCss,\n} from '../color-picker/color'\nimport type { Color, ColorFormat, ColorSpace, Coords } from '../color-picker/color'\nimport type { ColorPanelExpose, ColorPanelMode, ColorPanelProps } from './color-panel'\n\n// 让模板里也能写这个组件转交的原生属性\nconst DouInput = DouInputComponent as WithAttributes<typeof DouInputComponent, InputHTMLAttributes>\n\ndefineOptions({ name: 'DouColorPanel' })\n\nconst props = withDefaults(defineProps<ColorPanelProps>(), {\n format: 'hex',\n panel: 'square',\n gamut: 'srgb',\n showAlpha: false,\n presets: () => [],\n showInput: true,\n bordered: true,\n disabled: false,\n})\nconst model = defineModel<string \| null>()\nconst emit = defineEmits<{ change: [value: string \| null] }>()\n\nconst ns = useNamespace('color-panel')\nconst { t } = useLocale()\nconst { formItem } = useFormItem()\nconst disabled = useFormDisabled(() => props.disabled)\nconst rootRef = useTemplateRef<HTMLElement>('root')\n\n/* the panels /\n\nconst panels = computed<ColorPanelMode[]>(() => {\n const list = Array.isArray(props.panel) ? props.panel : [props.panel]\n return list.length ? [...new Set(list)] : ['square']\n})\nconst active = ref<ColorPanelMode>(panels.value[0]!)\nwatch(panels, (list) => {\n if (!list.includes(active.value)) active.value = list[0]!\n})\n/* The space the active panel edits in: the square and the wheel are HSV. /\nconst space = computed<ColorSpace>(() =>\n active.value === 'square' \|\| active.value === 'wheel' ? 'hsv' : active.value,\n)\nconst panelLabel = (panel: ColorPanelMode) =>\n panel === 'square'\n ? t('colorPicker.panelSquare')\n : panel === 'wheel'\n ? t('colorPicker.panelWheel')\n : formatLabel(panel)\n\n/ the color /\n\nconst options = computed(() => ({ alpha: props.showAlpha, gamut: props.gamut }))\nconst print = (value: Color, format: ColorFormat = props.format) =>\n formatColor(value, format, options.value)\n\n// The panel keeps the color in the space it edits in, so a channel the\n// value cannot show (the hue of a gray, the chroma the gamut mapping\n// cuts) stays where the user put it.\nconst fallback = (): Color => ({ space: 'hsv', coords: [0, 0, 0], alpha: 1 })\nconst color = ref<Color>(fallback())\n\n/* Bring a color into the panel's space, keeping the current hue for a gray. /\nfunction adopt(next: Color, hue = hueOf(color.value)): Color {\n const target = space.value\n if (next.space === target) return { ...next, coords: [...next.coords] }\n const coords = coordsIn(next, target, props.gamut)\n const index = hueIndex(target)\n const result: Color = { space: target, coords: [...coords], alpha: next.alpha }\n if (index !== undefined && hue !== undefined && isAchromatic(result)) result.coords[index] = hue\n return result\n}\n\ncolor.value = adopt(parseColor(model.value ?? '') ?? fallback())\nwatch(model, (value) => {\n const parsed = value ? parseColor(value) : null\n if (!parsed \|\| print(parsed) === print(color.value)) return\n color.value = adopt(parsed)\n})\nwatch(space, () => (color.value = adopt(color.value)))\n\nfunction set(next: Color) {\n color.value = props.showAlpha ? next : { ...next, alpha: 1 }\n model.value = print(color.value)\n}\nfunction setCoord(index: number, value: number) {\n const coords: Coords = [...color.value.coords]\n coords[index] = value\n set({ ...color.value, coords })\n}\nconst setAlpha = (alpha: number) => set({ ...color.value, alpha: clamp(alpha) })\n\nconst opaque = computed(() => toCss({ ...color.value, alpha: 1 }, props.gamut))\nconst current = computed(() => toCss(color.value, props.gamut, props.showAlpha))\n\n/* The color settled: tell the listeners and the form. /\nfunction settle() {\n emit('change', print(color.value))\n formItem?.trigger('change')\n}\n\n/ dragging /\n\n/* Follow the pointer, passing its position within the target as 0–1 (unclamped). /\nfunction drag(event: PointerEvent, apply: (x: number, y: number) => void) {\n if (event.button !== 0) return\n const target = event.currentTarget as HTMLElement\n const rect = target.getBoundingClientRect()\n const at = (e: PointerEvent) =>\n apply((e.clientX - rect.left) / (rect.width \|\| 1), (e.clientY - rect.top) / (rect.height \|\| 1))\n at(event)\n target.focus()\n target.setPointerCapture?.(event.pointerId)\n const move = (e: PointerEvent) => at(e)\n const up = () => {\n settle()\n target.removeEventListener('pointermove', move)\n target.removeEventListener('pointerup', up)\n target.removeEventListener('pointercancel', up)\n }\n target.addEventListener('pointermove', move)\n target.addEventListener('pointerup', up)\n target.addEventListener('pointercancel', up)\n}\n\nconst hsv = computed(() => color.value.coords)\nconst onAreaDown = (event: PointerEvent) =>\n drag(event, (x, y) => set({ ...color.value, coords: [hsv.value[0], clamp(x), clamp(1 - y)] }))\nconst onWheelDown = (event: PointerEvent) =>\n drag(event, (x, y) => {\n const [dx, dy] = [x - 0.5, y - 0.5]\n const h = ((Math.atan2(dy, dx) 180) / Math.PI + 360) % 360\n set({ ...color.value, coords: [h, clamp(Math.hypot(dx, dy) * 2), hsv.value[2]] })\n })\nconst onChannelDown = (event: PointerEvent, index: number, channel: Channel) =>\n drag(event, (x) => setCoord(index, channel.min + clamp(x) * (channel.max - channel.min)))\nconst onAlphaDown = (event: PointerEvent) => drag(event, (x) => setAlpha(clamp(x)))\n\n/** The direction an arrow key moves a value, and how far: 1%, or 10% with Shift. /\nfunction arrow(event: KeyboardEvent) {\n const dx = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0\n const dy = event.key === 'ArrowUp' ? 1 : event.key === 'ArrowDown' ? -1 : 0\n if (dx \|\| dy) event.preventDefault()\n return { dx, dy, step: (event.shiftKey ? 10 : 1) / 100 }\n}\n\nfunction onAreaKeydown(event: KeyboardEvent) {\n const { dx, dy, step } = arrow(event)\n if (!dx && !dy) return\n const [h, s, v] = hsv.value\n set({ ...color.value, coords: [h, clamp(s + dx step), clamp(v + dy * step)] })\n settle()\n}\nfunction onWheelKeydown(event: KeyboardEvent) {\n const { dx, dy, step } = arrow(event)\n if (!dx && !dy) return\n const [h, s, v] = hsv.value\n set({ ...color.value, coords: [(h + dx * step * 360 + 360) % 360, clamp(s + dy * step), v] })\n settle()\n}\nfunction onChannelKeydown(event: KeyboardEvent, index: number, channel: Channel) {\n const { dx, dy, step } = arrow(event)\n if (!dx && !dy) return\n const next = color.value.coords[index]! + (dx \|\| dy) * step * (channel.max - channel.min)\n setCoord(index, clamp(next, channel.min, channel.max))\n settle()\n}\nfunction onAlphaKeydown(event: KeyboardEvent) {\n const { dx, dy, step } = arrow(event)\n if (!dx && !dy) return\n setAlpha(color.value.alpha + (dx \|\| dy) * step)\n settle()\n}\n\n/* what the panels draw /\n\nconst percent = (value: number) => Math.round(value 100)\nconst position = (value: number, channel: Channel) =>\n `${((value - channel.min) / (channel.max - channel.min)) * 100}%`\nconst pure = computed(() => toCss({ space: 'hsv', coords: [hsv.value[0], 1, 1], alpha: 1 }))\nconst bright = computed(() =>\n toCss({ space: 'hsv', coords: [hsv.value[0], hsv.value[1], 1], alpha: 1 }),\n)\nconst wheelThumb = computed(() => {\n const [h, s] = hsv.value\n const rad = (h * Math.PI) / 180\n return { left: `${50 + 50 * s * Math.cos(rad)}%`, top: `${50 + 50 * s * Math.sin(rad)}%` }\n})\n\nconst channels = computed(() => CHANNELS[space.value])\n/** Each channel's track: the color as that channel runs its range, the others held. /\nconst tracks = computed(() =>\n channels.value.map((channel, index) => {\n const isHue = channel.name === 'hue'\n const steps = space.value === 'rgb' ? 1 : isHue ? 12 : 16\n const stops = Array.from({ length: steps + 1 }, (_, k) => {\n const coords: Coords = [...color.value.coords]\n coords[index] = channel.min + ((channel.max - channel.min) k) / steps\n return toCss({ space: space.value, coords, alpha: 1 }, props.gamut)\n })\n return `linear-gradient(to right, ${stops.join(', ')})`\n }),\n)\n\nconst display = (value: number, channel: Channel) =>\n String(Number((value * channel.scale).toFixed(channel.digits)) \|\| 0)\nconst valueText = (value: number, channel: Channel) =>\n `${display(value, channel)}${channel.unit ?? ''}`\n\nfunction onChannelInput(event: Event, index: number, channel: Channel) {\n const input = event.target as HTMLInputElement\n const next = parseFloat(input.value)\n if (Number.isFinite(next)) {\n const coord = clamp(next / channel.scale, channel.min, channel.max)\n if (index < 0) setAlpha(coord)\n else setCoord(index, coord)\n settle()\n }\n input.value = display(index < 0 ? color.value.alpha : color.value.coords[index]!, channel)\n}\n\n/* the text box /\n\n// The text box can show the color in any format; it starts at `format`.\nconst textFormat = ref<ColorFormat>(props.format)\nconst formatOptions = COLOR_FORMATS.map((format) => ({ value: format, label: formatLabel(format) }))\nwatch(\n () => props.format,\n (format) => (textFormat.value = format),\n)\n/* The format's arguments only: the menu in front of the box names the format. /\nconst shown = computed(() => {\n const full = print(color.value, textFormat.value)\n return textFormat.value === 'hex' ? full : full.slice(full.indexOf('(') + 1, -1)\n})\nconst text = ref('')\nwatch(shown, (value) => (text.value = value), { immediate: true })\nfunction onTextCommit() {\n const typed = text.value.trim()\n const parsed =\n parseColor(typed) ??\n (textFormat.value === 'hex' ? null : parseColor(`${textFormat.value}(${typed})`))\n if (!parsed) {\n text.value = shown.value\n return\n }\n const before = print(color.value)\n set(adopt(parsed, hueOf(parsed) ?? hueOf(color.value)))\n if (print(color.value) !== before) settle()\n}\n\nfunction pickPreset(preset: string) {\n const parsed = parseColor(preset)\n if (!parsed) return\n set(adopt(parsed))\n settle()\n}\nconst presetValue = (preset: string) => {\n const parsed = parseColor(preset)\n return parsed ? print(parsed) : preset\n}\nconst presetCss = (preset: string) => {\n const parsed = parseColor(preset)\n return parsed ? toCss(parsed, props.gamut, true) : undefined\n}\n\nconst printed = computed(() => {\n const parsed = model.value ? parseColor(model.value) : null\n return parsed ? print(parsed) : ''\n})\n\nfunction focus() {\n rootRef.value?.querySelector<HTMLElement>('[role=\"slider\"]')?.focus()\n}\n\ndefineExpose<ColorPanelExpose>({ focus })\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"[ns.b(), ns.is('bordered', bordered), ns.is('disabled', disabled)]\"\n :inert=\"disabled \|\| undefined\"\n :aria-disabled=\"disabled \|\| undefined\"\n >\n <div\n v-if=\"panels.length > 1\"\n :class=\"ns.e('tabs')\"\n role=\"group\"\n :aria-label=\"t('colorPicker.panels')\"\n >\n <button\n v-for=\"item in panels\"\n :key=\"item\"\n type=\"button\"\n :class=\"[ns.e('tab'), ns.is('active', item === active)]\"\n :aria-pressed=\"item === active\"\n @click=\"active = item\"\n >\n {{ panelLabel(item) }}\n </button>\n </div>\n\n <template v-if=\"active === 'square'\">\n <div\n role=\"slider\"\n tabindex=\"0\"\n :class=\"ns.e('area')\"\n :style=\"{ backgroundColor: pure }\"\n :aria-label=\"t('colorPicker.area')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-valuenow=\"percent(hsv[1])\"\n :aria-valuetext=\"t('colorPicker.areaValue', { s: percent(hsv[1]), v: percent(hsv[2]) })\"\n @pointerdown=\"onAreaDown\"\n @keydown=\"onAreaKeydown\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{\n left: `${hsv[1] 100}%`,\n top: `${(1 - hsv[2]) * 100}%`,\n backgroundColor: opaque,\n }\"\n />\n </div>\n </template>\n\n <template v-else-if=\"active === 'wheel'\">\n <div\n role=\"slider\"\n tabindex=\"0\"\n :class=\"ns.e('wheel')\"\n :style=\"{ '--dou-color-panel-dim': 1 - hsv[2] }\"\n :aria-label=\"t('colorPicker.wheel')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"360\"\n :aria-valuenow=\"Math.round(hsv[0])\"\n :aria-valuetext=\"t('colorPicker.wheelValue', { h: Math.round(hsv[0]), s: percent(hsv[1]) })\"\n @pointerdown=\"onWheelDown\"\n @keydown=\"onWheelKeydown\"\n >\n <span :class=\"ns.e('thumb')\" :style=\"{ ...wheelThumb, backgroundColor: opaque }\" />\n </div>\n </template>\n\n <template v-else>\n <span :class=\"[ns.e('swatch'), ns.e('bar')]\" aria-hidden=\"true\">\n <span :style=\"{ backgroundColor: current }\" />\n </span>\n <div :class=\"ns.e('channels')\">\n <div\n v-for=\"(channel, index) in channels\"\n :key=\"`${space}-${index}`\"\n :class=\"ns.e('channel')\"\n >\n <span :class=\"ns.e('label')\" aria-hidden=\"true\">{{ channel.label }}</span>\n <div\n role=\"slider\"\n tabindex=\"0\"\n :class=\"ns.e('track')\"\n :style=\"{ '--dou-color-panel-track': tracks[index] }\"\n :aria-label=\"t(`colorPicker.${channel.name}`)\"\n :aria-valuemin=\"display(channel.min, channel)\"\n :aria-valuemax=\"display(channel.max, channel)\"\n :aria-valuenow=\"display(color.coords[index]!, channel)\"\n :aria-valuetext=\"valueText(color.coords[index]!, channel)\"\n @pointerdown=\"onChannelDown($event, index, channel)\"\n @keydown=\"onChannelKeydown($event, index, channel)\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{\n left: position(color.coords[index]!, channel),\n backgroundColor: opaque,\n }\"\n />\n </div>\n <input\n :class=\"ns.e('number')\"\n type=\"text\"\n inputmode=\"decimal\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n tabindex=\"-1\"\n :aria-label=\"t(`colorPicker.${channel.name}`)\"\n :value=\"display(color.coords[index]!, channel)\"\n @change=\"onChannelInput($event, index, channel)\"\n @keydown.enter.prevent=\"onChannelInput($event, index, channel)\"\n @keydown.up.down=\"onChannelKeydown($event, index, channel)\"\n />\n </div>\n <div v-if=\"showAlpha\" :class=\"ns.e('channel')\">\n <span :class=\"ns.e('label')\" aria-hidden=\"true\">{{ ALPHA.label }}</span>\n <div\n role=\"slider\"\n tabindex=\"0\"\n :class=\"[ns.e('track'), ns.e('alpha')]\"\n :style=\"{ '--dou-color-panel-opaque': opaque }\"\n :aria-label=\"t('colorPicker.alpha')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-valuenow=\"percent(color.alpha)\"\n :aria-valuetext=\"`${percent(color.alpha)}%`\"\n @pointerdown=\"onAlphaDown\"\n @keydown=\"onAlphaKeydown\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{ left: `${color.alpha * 100}%`, backgroundColor: current }\"\n />\n </div>\n <input\n :class=\"ns.e('number')\"\n type=\"text\"\n inputmode=\"decimal\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n tabindex=\"-1\"\n :aria-label=\"t('colorPicker.alpha')\"\n :value=\"display(color.alpha, ALPHA)\"\n @change=\"onChannelInput($event, -1, ALPHA)\"\n @keydown.enter.prevent=\"onChannelInput($event, -1, ALPHA)\"\n @keydown.up.down=\"onAlphaKeydown\"\n />\n </div>\n </div>\n </template>\n\n <div v-if=\"active === 'square' \|\| active === 'wheel'\" :class=\"ns.e('controls')\">\n <div :class=\"ns.e('sliders')\">\n <div\n v-if=\"active === 'square'\"\n role=\"slider\"\n tabindex=\"0\"\n :class=\"[ns.e('track'), ns.e('hue')]\"\n :aria-label=\"t('colorPicker.hue')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"360\"\n :aria-valuenow=\"Math.round(hsv[0])\"\n @pointerdown=\"onChannelDown($event, 0, CHANNELS.hsv[0])\"\n @keydown=\"onChannelKeydown($event, 0, CHANNELS.hsv[0])\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{ left: `${(hsv[0] / 360) * 100}%`, backgroundColor: pure }\"\n />\n </div>\n <div\n v-else\n role=\"slider\"\n tabindex=\"0\"\n :class=\"[ns.e('track'), ns.e('value')]\"\n :style=\"{ '--dou-color-panel-bright': bright }\"\n :aria-label=\"t('colorPicker.brightness')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-valuenow=\"percent(hsv[2])\"\n :aria-valuetext=\"`${percent(hsv[2])}%`\"\n @pointerdown=\"onChannelDown($event, 2, CHANNELS.hsv[2])\"\n @keydown=\"onChannelKeydown($event, 2, CHANNELS.hsv[2])\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{ left: `${hsv[2] * 100}%`, backgroundColor: opaque }\"\n />\n </div>\n <div\n v-if=\"showAlpha\"\n role=\"slider\"\n tabindex=\"0\"\n :class=\"[ns.e('track'), ns.e('alpha')]\"\n :style=\"{ '--dou-color-panel-opaque': opaque }\"\n :aria-label=\"t('colorPicker.alpha')\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-valuenow=\"percent(color.alpha)\"\n :aria-valuetext=\"`${percent(color.alpha)}%`\"\n @pointerdown=\"onAlphaDown\"\n @keydown=\"onAlphaKeydown\"\n >\n <span\n :class=\"ns.e('thumb')\"\n :style=\"{ left: `${color.alpha * 100}%`, backgroundColor: current }\"\n />\n </div>\n </div>\n <span :class=\"[ns.e('swatch'), ns.e('preview')]\" aria-hidden=\"true\">\n <span :style=\"{ backgroundColor: current }\" />\n </span>\n </div>\n\n <DouFieldGroup v-if=\"showInput\" :class=\"ns.e('entry')\" size=\"sm\" block>\n <DouSelect\n :model-value=\"textFormat\"\n :class=\"ns.e('format')\"\n :options=\"formatOptions\"\n :aria-label=\"t('colorPicker.format')\"\n @update:model-value=\"textFormat = $event as ColorFormat\"\n />\n <DouInput\n v-model=\"text\"\n :class=\"[ns.e('text'), ns.is('hex', textFormat === 'hex')]\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n :aria-label=\"t('colorPicker.text')\"\n @change=\"onTextCommit\"\n @keydown.enter.prevent=\"onTextCommit\"\n />\n </DouFieldGroup>\n <div\n v-if=\"presets.length\"\n :class=\"ns.e('presets')\"\n role=\"group\"\n :aria-label=\"t('colorPicker.presets')\"\n >\n <button\n v-for=\"preset in presets\"\n :key=\"preset\"\n type=\"button\"\n :class=\"[ns.e('preset'), ns.is('selected', presetValue(preset) === printed)]\"\n :aria-label=\"preset\"\n :aria-pressed=\"presetValue(preset) === printed\"\n @click=\"pickPreset(preset)\"\n >\n <span :style=\"{ backgroundColor: presetCss(preset) }\" />\n </button>\n </div>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/color-panel/color-panel.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { useNamespace } from "../../utils/namespace.js";
 import { useLocale } from "../config-provider/use-config.js";
 import { useFormDisabled, useFormItem } from "../form/use-form-item.js";
-import input_default from "../input/input.js";
-import select_default from "../select/select.js";
+import { DouInput } from "../input/index.js";
+import { DouSelect } from "../select/index.js";
 import { DouFieldGroup } from "../field-group/index.js";
 import { ALPHA, CHANNELS, formatLabel } from "../color-picker/channels.js";
 import { COLOR_FORMATS, clamp, coordsIn, formatColor, hueIndex, hueOf, isAchromatic, parseColor, toCss } from "../color-picker/color.js";
@@ -90,7 +90,7 @@ var color_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	}),
 	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
-		const DouInput = input_default;
+		const DouInput$1 = DouInput;
 		const props = __props;
 		const model = useModel(__props, "modelValue");
 		const emit = __emit;
@@ -597,7 +597,7 @@ var color_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					size: "sm",
 					block: ""
 				}, {
-					default: withCtx(() => [createVNode(select_default, {
+					default: withCtx(() => [createVNode(unref(DouSelect), {
 						"model-value": textFormat.value,
 						class: normalizeClass(unref(ns).e("format")),
 						options: unref(formatOptions),
@@ -608,7 +608,7 @@ var color_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 						"class",
 						"options",
 						"aria-label"
-					]), createVNode(unref(DouInput), {
+					]), createVNode(unref(DouInput$1), {
 						modelValue: text.value,
 						"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => text.value = $event),
 						class: normalizeClass([unref(ns).e("text"), unref(ns).is("hex", textFormat.value === "hex")]),