@xihan-ui/vue 1.1.0 → 2.1.0

package/dist/components/color-picker/color-picker.d.ts

@@ -1,137 +1,121 @@
 import { PayloadOf } from "../../runtime/payload.js";
 import { PropType, SlotsType, VNode } from "vue";
-import { ColorPickerApi, ColorPickerChannel, ColorPickerFormat, ColorPickerInputChannel, ColorPickerSchema, ColorPickerTranslations } from "@xihan-ui/headless";
-import { Direction, Placement, Size } from "@xihan-ui/kernel";
+import { Direction, Placement, Size } from "@xihan-ui/core";
+import { ColorFormat, ColorPickerApi, ColorPickerInputChannel, ColorPickerSchema, ColorPickerTranslations } from "@xihan-ui/headless";
 //#region src/components/color-picker/color-picker.d.ts
 type ColorPickerProps = ColorPickerSchema['props'];
-/** 默认插槽的载荷：展开态、当前颜色的各式表示、预设色板、屏幕取色状态，以及改展开与改值两个动作。 */
-type ColorPickerRootSlotProps = Pick<ColorPickerApi, 'open' | 'value' | 'rgba' | 'hsva' | 'swatches' | 'picking' | 'eyeDropperSupported' | 'setOpen' | 'setValue'>;
+/** 默认插槽的载荷：展开态、当前颜色的各种表示、预设色板、屏幕取色状态，以及修改展开与修改值两个动作。 */
+type ColorPickerRootSlotProps = Pick<ColorPickerApi, 'open' | 'value' | 'rgba' | 'hsva' | 'swatches' | 'picking' | 'eyeDropperSupported' | 'errors' | 'setOpen' | 'setValue' | 'clearError'>;
 declare const XhColorPickerRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   value: {
     type: StringConstructor;
-    default: undefined;
   };
   defaultValue: {
     type: StringConstructor;
-    default: undefined;
   };
   format: {
-    type: PropType<ColorPickerFormat>;
-    default: undefined;
+    type: PropType<ColorFormat>;
   };
   open: {
     type: BooleanConstructor;
     default: undefined;
   };
   defaultOpen: BooleanConstructor;
-  disabled: BooleanConstructor;
-  readOnly: BooleanConstructor;
+  disabled: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  readOnly: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
   alpha: BooleanConstructor;
   swatches: {
     type: PropType<string[]>;
-    default: undefined;
   };
   name: {
     type: StringConstructor;
-    default: undefined;
   };
   size: {
     type: PropType<Size>;
-    default: undefined;
   };
   dir: {
     type: PropType<Direction>;
-    default: undefined;
   };
   placement: {
     type: PropType<Placement>;
-    default: undefined;
   };
   offset: {
     type: NumberConstructor;
-    default: undefined;
   };
   translations: {
     type: PropType<Partial<ColorPickerTranslations>>;
-    default: undefined;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
   'value-change': (_details: PayloadOf<ColorPickerProps, "onValueChange">) => true;
   'open-change': (_details: PayloadOf<ColorPickerProps, "onOpenChange">) => true;
+  'color-error': (_details: PayloadOf<ColorPickerProps, "onColorError">) => true;
   'update:value': (_value: PayloadOf<ColorPickerProps, "onValueChange">["value"]) => true;
   'update:open': (_open: PayloadOf<ColorPickerProps, "onOpenChange">["open"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   value: {
     type: StringConstructor;
-    default: undefined;
   };
   defaultValue: {
     type: StringConstructor;
-    default: undefined;
   };
   format: {
-    type: PropType<ColorPickerFormat>;
-    default: undefined;
+    type: PropType<ColorFormat>;
   };
   open: {
     type: BooleanConstructor;
     default: undefined;
   };
   defaultOpen: BooleanConstructor;
-  disabled: BooleanConstructor;
-  readOnly: BooleanConstructor;
+  disabled: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  readOnly: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
   alpha: BooleanConstructor;
   swatches: {
     type: PropType<string[]>;
-    default: undefined;
   };
   name: {
     type: StringConstructor;
-    default: undefined;
   };
   size: {
     type: PropType<Size>;
-    default: undefined;
   };
   dir: {
     type: PropType<Direction>;
-    default: undefined;
   };
   placement: {
     type: PropType<Placement>;
-    default: undefined;
   };
   offset: {
     type: NumberConstructor;
-    default: undefined;
   };
   translations: {
     type: PropType<Partial<ColorPickerTranslations>>;
-    default: undefined;
   };
 }>> & Readonly<{
   "onValue-change"?: ((_details: import("@xihan-ui/headless").ColorPickerValueChangeDetails) => any) | undefined;
   "onUpdate:value"?: ((_value: string) => any) | undefined;
   "onOpen-change"?: ((_details: import("@xihan-ui/headless").ColorPickerOpenChangeDetails) => any) | undefined;
   "onUpdate:open"?: ((_open: boolean) => any) | undefined;
+  "onColor-error"?: ((_details: import("@xihan-ui/headless").ColorPickerErrorDetails) => any) | undefined;
 }>, {
-  name: string;
-  value: string;
-  defaultValue: string;
-  dir: Direction;
-  size: Size;
   disabled: boolean;
   open: boolean;
   defaultOpen: boolean;
-  translations: Partial<ColorPickerTranslations>;
-  offset: number;
   readOnly: boolean;
-  placement: Placement;
-  swatches: string[];
   alpha: boolean;
-  format: ColorPickerFormat;
 }, SlotsType<{
   default?: (props: ColorPickerRootSlotProps) => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -150,84 +134,67 @@ declare const XhColorPickerValueText: import("vue").DefineComponent<{}, () => VN
 declare const XhColorPickerSwatch: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhColorPickerPositioner: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const XhColorPickerPositioner: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 本实例的 Portal 容器；优先于应用级配置。 */
+  container: {
+    type: PropType<Element>;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 本实例的 Portal 容器；优先于应用级配置。 */
+  container: {
+    type: PropType<Element>;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhColorPickerContent: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhColorPickerArea: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const XhColorPickerSaturationArea: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhColorPickerAreaThumb: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhColorPickerChannelSlider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  /** 这条滑杆调的是哪一路，缺省或不识别时按色相处理。 */
-  channel: {
-    type: PropType<ColorPickerChannel>;
-    default: undefined;
-  };
-}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-  [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-  /** 这条滑杆调的是哪一路，缺省或不识别时按色相处理。 */
-  channel: {
-    type: PropType<ColorPickerChannel>;
-    default: undefined;
-  };
-}>> & Readonly<{}>, {
-  channel: ColorPickerChannel;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhColorPickerChannelSliderTrack: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+/**
+ * 色相滑块的挂载点，同时充当该滑块的根节点：其中放置的是 XhColorSlider* 普通部件
+ * （control / track / thumb / label / value-text），DOM 带 data-scope="color-slider"。
+ * 未写默认插槽时铺开最简结构：一条轨道加一个拇指。
+ */
+declare const XhColorPickerHueSlider: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhColorPickerChannelSliderThumb: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+/** 透明度滑块的挂载点，同上；alpha 关闭时整条禁用。 */
+declare const XhColorPickerAlphaSlider: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhColorPickerChannelInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  /** 这个框编辑的是哪一路：hex 是整串，r/g/b 是分量，a 是透明度百分数；缺省或不识别时按 hex 处理。 */
+  /** 该输入框编辑的通道：hex 是整串，r/g/b 是分量，a 是透明度百分数；默认或无法识别时按 hex 处理。 */
   channel: {
     type: PropType<ColorPickerInputChannel>;
-    default: undefined;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-  /** 这个框编辑的是哪一路：hex 是整串，r/g/b 是分量，a 是透明度百分数；缺省或不识别时按 hex 处理。 */
+  /** 该输入框编辑的通道：hex 是整串，r/g/b 是分量，a 是透明度百分数；默认或无法识别时按 hex 处理。 */
   channel: {
     type: PropType<ColorPickerInputChannel>;
-    default: undefined;
   };
-}>> & Readonly<{}>, {
-  channel: ColorPickerInputChannel;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhColorPickerEyeDropperTrigger: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhColorPickerSwatchGroup: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+/**
+ * 预设色板的挂载点，同时充当色板的根节点（role=radiogroup、方向键与 roving tabindex 都在它上面）：
+ * 其中放置的是 XhColorSwatchPickerItem，DOM 带 data-scope="color-swatch-picker"。
+ * 未写默认插槽时按 swatches 自动铺开格子。
+ */
+declare const XhColorPickerSwatchPicker: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhColorPickerSwatchItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  /** 这一格的颜色。 */
-  value: {
-    type: StringConstructor;
-    default: string;
-  };
-}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-  [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-  /** 这一格的颜色。 */
-  value: {
-    type: StringConstructor;
-    default: string;
-  };
-}>> & Readonly<{}>, {
-  value: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhColorPickerHiddenInput: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { ColorPickerRootSlotProps, XhColorPickerArea, XhColorPickerAreaThumb, XhColorPickerChannelInput, XhColorPickerChannelSlider, XhColorPickerChannelSliderThumb, XhColorPickerChannelSliderTrack, XhColorPickerContent, XhColorPickerControl, XhColorPickerEyeDropperTrigger, XhColorPickerHiddenInput, XhColorPickerLabel, XhColorPickerPositioner, XhColorPickerRoot, XhColorPickerSwatch, XhColorPickerSwatchGroup, XhColorPickerSwatchItem, XhColorPickerTrigger, XhColorPickerValueText };
+export { ColorPickerRootSlotProps, XhColorPickerAlphaSlider, XhColorPickerAreaThumb, XhColorPickerChannelInput, XhColorPickerContent, XhColorPickerControl, XhColorPickerEyeDropperTrigger, XhColorPickerHiddenInput, XhColorPickerHueSlider, XhColorPickerLabel, XhColorPickerPositioner, XhColorPickerRoot, XhColorPickerSaturationArea, XhColorPickerSwatch, XhColorPickerSwatchPicker, XhColorPickerTrigger, XhColorPickerValueText };
 //# sourceMappingURL=color-picker.d.ts.map

package/dist/components/color-picker/color-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.d.ts","names":[],"sources":["../../../src/components/color-picker/color-picker.ts"],"mappings":";;;;;KAuBK,mBAAmB;;KAGZ,2BAA2B,KACrC;cAIW,iCAAiB,8BAAA;;;;;;;;;;IAMA,MAAA,SAAS;;;;;;;;;;;;IAMR,MAAA;;;;;;;;IAEH,MAAA,SAAS;;;;IACV,MAAA,SAAS;;;;IACH,MAAA,SAAS;;;;;;;;IAEN,MAAA,SAAS,QAAQ;;;;;;EAItB,iBAAA,UAAA,UAAU;EACX,gBAAA,UAAA,UAAU;EACX,iBAAA,QAAA,UAAU;EACZ,gBAAA,OAAA,UAAU;;;;;;;;;;;IAnBP,MAAA,SAAS;;;;;;;;;;;;IAMR,MAAA;;;;;;;;IAEH,MAAA,SAAS;;;;IACV,MAAA,SAAS;;;;IACH,MAAA,SAAS;;;;;;;;IAEN,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;EAUvC,WAAC,OAAO,6BAA6B;kCA4BjD;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAO/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAU/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAWjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAgBlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAY/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAU5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAMjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,0CAA0B,8BAAA;;;IAIR,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;;;qCAYtC;cAEW,+CAA+B,0BAAA,oBAAA,4BAAA;;8BAY1C,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,+CAA+B,0BAAA,oBAAA,4BAAA;;8BAW1C,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,8BAAA;;;IAIP,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;;;qCAQtC;cAEW,8CAA8B,0BAAA,oBAAA,4BAAA;;8BAMzC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,wCAAwB,0BAAA,oBAAA,4BAAA;;8BAMnC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,uCAAuB,8BAAA;;;;;;;;;;;;;;;;qCAclC;cAEW,wCAAwB,0BAAA,oBAAA,4BAAA;;8BAMnC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"color-picker.d.ts","names":[],"sources":["../../../src/components/color-picker/color-picker.ts"],"mappings":";;;;;KA8BK,mBAAmB;;KAGZ,2BAA2B,KACrC;cAIW,iCAAiB,8BAAA;;;;;;;;IAMA,MAAA,SAAS;;;;;;;;;;;;;;;;;IAMR,MAAA;;;;;;IAEH,MAAA,SAAS;;;IACV,MAAA,SAAS;;;IACH,MAAA,SAAS;;;;;;IAEN,MAAA,SAAS,QAAQ;;;;;EAItB,iBAAA,UAAA,UAAU;EACX,gBAAA,UAAA,UAAU;EACV,gBAAA,UAAA,UAAU;EACX,iBAAA,QAAA,UAAU;EACZ,gBAAA,OAAA,UAAU;;;;;;;;;IApBP,MAAA,SAAS;;;;;;;;;;;;;;;;;IAMR,MAAA;;;;;;IAEH,MAAA,SAAS;;;IACV,MAAA,SAAS;;;IACH,MAAA,SAAS;;;;;;IAEN,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;EAWvC,WAAC,OAAO,6BAA6B;kCAgCjD;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAO/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAU/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAWjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,uCAAuB,8BAAA;;;IAIH,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;MAgBxC,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAY/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,2CAA2B,0BAAA,oBAAA,4BAAA;;8BAUtC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAMjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;;;;;cAOW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAOjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,wCAAwB,0BAAA,oBAAA,4BAAA;;8BAOnC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAOW,yCAAyB,8BAAA;;;IAIP,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;MAQtC,oDAAA;cAEW,8CAA8B,0BAAA,oBAAA,4BAAA;;8BAMzC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;;;;;cAOW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAWpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,wCAAwB,0BAAA,oBAAA,4BAAA;;8BAMnC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/color-picker/color-picker.js

@@ -1,65 +1,48 @@
 import { withXhConfig } from "../../config/config.js";
+import { XhPortal } from "../../runtime/portal.js";
 import { useScrollbars } from "../../runtime/use-scrollbars.js";
-import { provideColorPicker, provideColorPickerChannel, useColorPickerChannelContext, useColorPickerContext } from "./context.js";
+import { useFormControlProps } from "../form/use-form-control.js";
+import { provideColorSlider } from "../color-slider/context.js";
+import { XhColorSliderControl, XhColorSliderThumb, XhColorSliderTrack } from "../color-slider/color-slider.js";
+import { provideColorSwatchPicker } from "../color-swatch-picker/context.js";
+import { XhColorSwatchPickerItem } from "../color-swatch-picker/color-swatch-picker.js";
+import { provideColorPicker, useColorPickerContext } from "./context.js";
 import { useColorPicker } from "./use-color-picker.js";
-import { Teleport, computed, defineComponent, h, mergeProps, onUnmounted } from "vue";
-import { colorPickerToChannel, colorPickerToInputChannel } from "@xihan-ui/headless";
+import { computed, defineComponent, h, mergeProps } from "vue";
+import { colorPickerToInputChannel } from "@xihan-ui/headless";
 //#region src/components/color-picker/color-picker.ts
 const XhColorPickerRoot = defineComponent({
 	name: "XhColorPickerRoot",
 	props: {
-		value: {
-			type: String,
-			default: void 0
-		},
-		defaultValue: {
-			type: String,
-			default: void 0
-		},
-		format: {
-			type: String,
-			default: void 0
-		},
+		value: { type: String },
+		defaultValue: { type: String },
+		format: { type: String },
 		open: {
 			type: Boolean,
 			default: void 0
 		},
 		defaultOpen: Boolean,
-		disabled: Boolean,
-		readOnly: Boolean,
-		alpha: Boolean,
-		swatches: {
-			type: Array,
-			default: void 0
-		},
-		name: {
-			type: String,
-			default: void 0
-		},
-		size: {
-			type: String,
-			default: void 0
-		},
-		dir: {
-			type: String,
-			default: void 0
-		},
-		placement: {
-			type: String,
+		disabled: {
+			type: Boolean,
 			default: void 0
 		},
-		offset: {
-			type: Number,
+		readOnly: {
+			type: Boolean,
 			default: void 0
 		},
-		translations: {
-			type: Object,
-			default: void 0
-		}
+		alpha: Boolean,
+		swatches: { type: Array },
+		name: { type: String },
+		size: { type: String },
+		dir: { type: String },
+		placement: { type: String },
+		offset: { type: Number },
+		translations: { type: Object }
 	},
 	emits: {
 		"value-change": (_details) => true,
 		"open-change": (_details) => true,
+		"color-error": (_details) => true,
 		"update:value": (_value) => true,
 		"update:open": (_open) => true
 	},
@@ -73,9 +56,11 @@ const XhColorPickerRoot = defineComponent({
 			emit("open-change", details);
 			emit("update:open", details.open);
 		};
-		const ctx = useColorPicker(withXhConfig("color-picker", props), {
+		const notifyColorError = (details) => emit("color-error", details);
+		const ctx = useColorPicker(withXhConfig("color-picker", useFormControlProps(props)), {
 			onValueChange: notifyValue,
-			onOpenChange: notifyOpen
+			onOpenChange: notifyOpen,
+			onColorError: notifyColorError
 		});
 		provideColorPicker(ctx);
 		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
@@ -86,8 +71,10 @@ const XhColorPickerRoot = defineComponent({
 			swatches: ctx.api.value.swatches,
 			picking: ctx.api.value.picking,
 			eyeDropperSupported: ctx.api.value.eyeDropperSupported,
+			errors: ctx.api.value.errors,
 			setOpen: ctx.api.value.setOpen,
-			setValue: ctx.api.value.setValue
+			setValue: ctx.api.value.setValue,
+			clearError: ctx.api.value.clearError
 		}));
 	}
 });
@@ -133,11 +120,20 @@ const XhColorPickerSwatch = defineComponent({
 });
 const XhColorPickerPositioner = defineComponent({
 	name: "XhColorPickerPositioner",
+	props: { 
+	/** 本实例的 Portal 容器；优先于应用级配置。 */
+container: { type: Object } },
 	inheritAttrs: false,
-	setup(_, { slots, attrs }) {
+	setup(props, { slots, attrs }) {
 		const ctx = useColorPickerContext();
-		const bars = useScrollbars({ scrollable: () => ctx.contentRef.value });
-		return () => h(Teleport, { to: ctx.portalTarget.value }, [h("div", {
+		const bars = useScrollbars({
+			scrollable: () => ctx.contentRef.value,
+			props: { size: "sm" }
+		});
+		return () => h(XhPortal, {
+			to: props.container ?? ctx.portalTarget.value,
+			source: ctx.triggerRef
+		}, () => [h("div", {
 			...mergeProps(ctx.api.value.getPositionerProps(), attrs),
 			ref: (el) => {
 				ctx.positionerRef.value = el;
@@ -158,12 +154,12 @@ const XhColorPickerContent = defineComponent({
 		}, slots.default?.());
 	}
 });
-const XhColorPickerArea = defineComponent({
-	name: "XhColorPickerArea",
+const XhColorPickerSaturationArea = defineComponent({
+	name: "XhColorPickerSaturationArea",
 	setup(_, { slots }) {
 		const ctx = useColorPickerContext();
 		return () => h("div", {
-			...ctx.api.value.getAreaProps(),
+			...ctx.api.value.getSaturationAreaProps(),
 			ref: (el) => {
 				ctx.areaRef.value = el;
 			}
@@ -177,49 +173,37 @@ const XhColorPickerAreaThumb = defineComponent({
 		return () => h("div", ctx.api.value.getAreaThumbProps(), slots.default?.());
 	}
 });
-const XhColorPickerChannelSlider = defineComponent({
-	name: "XhColorPickerChannelSlider",
-	props: { 
-	/** 这条滑杆调的是哪一路，缺省或不识别时按色相处理。 */
-channel: {
-		type: String,
-		default: void 0
-	} },
-	setup(props, { slots }) {
-		const ctx = useColorPickerContext();
-		const channel = computed(() => colorPickerToChannel(props.channel));
-		provideColorPickerChannel({ channel });
-		return () => h("div", ctx.api.value.getChannelSliderProps({ channel: channel.value }), slots.default?.());
-	}
-});
-const XhColorPickerChannelSliderTrack = defineComponent({
-	name: "XhColorPickerChannelSliderTrack",
+/**
+* 色相滑块的挂载点，同时充当该滑块的根节点：其中放置的是 XhColorSlider* 普通部件
+* （control / track / thumb / label / value-text），DOM 带 data-scope="color-slider"。
+* 未写默认插槽时铺开最简结构：一条轨道加一个拇指。
+*/
+const XhColorPickerHueSlider = defineComponent({
+	name: "XhColorPickerHueSlider",
 	setup(_, { slots }) {
 		const ctx = useColorPickerContext();
-		const { channel } = useColorPickerChannelContext();
-		onUnmounted(() => ctx.setChannelTrack(channel.value, null));
-		return () => h("div", {
-			...ctx.api.value.getChannelSliderTrackProps({ channel: channel.value }),
-			ref: (el) => ctx.setChannelTrack(channel.value, el)
-		}, slots.default?.());
+		provideColorSlider(ctx.hueSlider);
+		return () => h("div", ctx.api.value.getHueSliderProps(), slots.default?.() ?? renderSliderTree());
 	}
 });
-const XhColorPickerChannelSliderThumb = defineComponent({
-	name: "XhColorPickerChannelSliderThumb",
+/** 透明度滑块的挂载点，同上；alpha 关闭时整条禁用。 */
+const XhColorPickerAlphaSlider = defineComponent({
+	name: "XhColorPickerAlphaSlider",
 	setup(_, { slots }) {
 		const ctx = useColorPickerContext();
-		const { channel } = useColorPickerChannelContext();
-		return () => h("div", ctx.api.value.getChannelSliderThumbProps({ channel: channel.value }), slots.default?.());
+		provideColorSlider(ctx.alphaSlider);
+		return () => h("div", ctx.api.value.getAlphaSliderProps(), slots.default?.() ?? renderSliderTree());
 	}
 });
+/** 未写默认插槽时的滑块内部：control 中一条 track 与一个 thumb，与手写部件产出的 DOM 一致。 */
+function renderSliderTree() {
+	return [h(XhColorSliderControl, null, () => [h(XhColorSliderTrack), h(XhColorSliderThumb)])];
+}
 const XhColorPickerChannelInput = defineComponent({
 	name: "XhColorPickerChannelInput",
 	props: { 
-	/** 这个框编辑的是哪一路：hex 是整串，r/g/b 是分量，a 是透明度百分数；缺省或不识别时按 hex 处理。 */
-channel: {
-		type: String,
-		default: void 0
-	} },
+	/** 该输入框编辑的通道：hex 是整串，r/g/b 是分量，a 是透明度百分数；默认或无法识别时按 hex 处理。 */
+channel: { type: String } },
 	setup(props) {
 		const ctx = useColorPickerContext();
 		const channel = computed(() => colorPickerToInputChannel(props.channel));
@@ -233,24 +217,20 @@ const XhColorPickerEyeDropperTrigger = defineComponent({
 		return () => h("button", ctx.api.value.getEyeDropperTriggerProps(), slots.default?.());
 	}
 });
-const XhColorPickerSwatchGroup = defineComponent({
-	name: "XhColorPickerSwatchGroup",
+/**
+* 预设色板的挂载点，同时充当色板的根节点（role=radiogroup、方向键与 roving tabindex 都在它上面）：
+* 其中放置的是 XhColorSwatchPickerItem，DOM 带 data-scope="color-swatch-picker"。
+* 未写默认插槽时按 swatches 自动铺开格子。
+*/
+const XhColorPickerSwatchPicker = defineComponent({
+	name: "XhColorPickerSwatchPicker",
 	setup(_, { slots }) {
 		const ctx = useColorPickerContext();
-		return () => h("div", ctx.api.value.getSwatchGroupProps(), slots.default?.());
-	}
-});
-const XhColorPickerSwatchItem = defineComponent({
-	name: "XhColorPickerSwatchItem",
-	props: { 
-	/** 这一格的颜色。 */
-value: {
-		type: String,
-		default: ""
-	} },
-	setup(props, { slots }) {
-		const ctx = useColorPickerContext();
-		return () => h("button", ctx.api.value.getSwatchItemProps({ value: props.value }), slots.default?.());
+		provideColorSwatchPicker(ctx.swatchPicker);
+		return () => h("div", ctx.api.value.getSwatchPickerProps(), slots.default?.() ?? ctx.api.value.swatchPicker.swatches.map((node) => h(XhColorSwatchPickerItem, {
+			key: node.value,
+			value: node.value
+		})));
 	}
 });
 const XhColorPickerHiddenInput = defineComponent({
@@ -261,6 +241,6 @@ const XhColorPickerHiddenInput = defineComponent({
 	}
 });
 //#endregion
-export { XhColorPickerArea, XhColorPickerAreaThumb, XhColorPickerChannelInput, XhColorPickerChannelSlider, XhColorPickerChannelSliderThumb, XhColorPickerChannelSliderTrack, XhColorPickerContent, XhColorPickerControl, XhColorPickerEyeDropperTrigger, XhColorPickerHiddenInput, XhColorPickerLabel, XhColorPickerPositioner, XhColorPickerRoot, XhColorPickerSwatch, XhColorPickerSwatchGroup, XhColorPickerSwatchItem, XhColorPickerTrigger, XhColorPickerValueText };
+export { XhColorPickerAlphaSlider, XhColorPickerAreaThumb, XhColorPickerChannelInput, XhColorPickerContent, XhColorPickerControl, XhColorPickerEyeDropperTrigger, XhColorPickerHiddenInput, XhColorPickerHueSlider, XhColorPickerLabel, XhColorPickerPositioner, XhColorPickerRoot, XhColorPickerSaturationArea, XhColorPickerSwatch, XhColorPickerSwatchPicker, XhColorPickerTrigger, XhColorPickerValueText };
 
 //# sourceMappingURL=color-picker.js.map