@opentiny/vue-renderless 3.19.5 → 3.20.1

package/color-select-panel/alpha-select/vue.js

@@ -1,55 +1,40 @@
 import "../../chunk-G2ADBYYC.js";
 import { draggable } from "../utils/use-drag";
-import { onDrag, updateThumb } from ".";
-const api = ["state", "color", "slider", "alphaWrapper", "alphaThumb"];
-const renderless = (props, context, { emit }) => {
-  const color = props.color;
-  const [rr, gg, bb] = color.getRGB();
-  const r = context.ref(rr);
-  const g = context.ref(gg);
-  const b = context.ref(bb);
-  const slider = context.ref();
-  const alphaWrapper = context.ref();
-  const alphaThumb = context.ref();
-  const alpha = context.ref(color.get("a"));
-  context.watch(
-    () => props.color,
-    () => {
-      const [rr2, gg2, bb2] = color.getRGB();
-      r.value = rr2;
-      g.value = gg2;
-      b.value = bb2;
-      alpha.value = color.get("a");
-    },
-    { deep: true }
-  );
-  context.watch(alpha, (newAlpha) => {
-    updateThumb(newAlpha, alphaThumb.value, alphaWrapper.value);
-    emit("alpha-update", alpha.value);
-  });
-  const background = context.computed(() => {
-    return `linear-gradient(to right, rgba(${r.value}, ${g.value}, ${b.value}, 0) 0%, rgba(${r.value}, ${g.value}, ${b.value}, 1) 100%)`;
-  });
-  const state = context.reactive({
-    background
+import { initState, initWatch, useEvent } from ".";
+const api = ["state", "color", "slider", "alphaWrapper", "alphaThumb", "onClick"];
+const renderless = (props, hooks, utils) => {
+  const { onMounted, ref } = hooks;
+  const { emit } = utils;
+  const slider = ref();
+  const alphaWrapper = ref();
+  const alphaThumb = ref();
+  const state = initState(hooks);
+  const { update, onClick, onDrag } = useEvent(state, slider, alphaWrapper, alphaThumb, props);
+  onMounted(() => {
+    if (!slider.value || !alphaThumb.value) {
+      return;
+    }
+    const dragConfig = {
+      drag: (event) => {
+        onDrag(event);
+      },
+      end: (event) => {
+        onDrag(event);
+      }
+    };
+    draggable(slider.value, dragConfig);
+    draggable(alphaThumb.value, dragConfig);
+    update();
+    emit("ready", update);
   });
+  initWatch(props, update, hooks);
   const api2 = {
     state,
     slider,
     alphaWrapper,
-    alphaThumb
+    alphaThumb,
+    onClick
   };
-  context.onMounted(() => {
-    updateThumb(alpha.value, alphaThumb.value, slider.value);
-    draggable(slider.value, {
-      drag(event) {
-        onDrag(event, slider, alphaThumb, alpha);
-      },
-      start(event) {
-        onDrag(event, slider, alphaThumb, alpha);
-      }
-    });
-  });
   return api2;
 };
 export {

package/color-select-panel/hue-select/index.js

@@ -1,71 +1,57 @@
 import "../../chunk-G2ADBYYC.js";
-const setPosition = (el, x, y) => {
-  el.style.top = `${y}px`;
-  el.style.left = `${x}px`;
+import { getClientXY } from "../utils/getClientXY";
+const initState = (props, { reactive, ref, computed }) => {
+  const hueValue = computed(() => props.color.get("hue"));
+  const thumbTop = ref(0);
+  const state = reactive({ hueValue, thumbTop });
+  return state;
 };
-const getXBySaturation = (s, width) => s * width / 100;
-const getYByLight = (l, height) => (100 - l) * height / 100;
-const updatePosition = (event, rect, cursor) => {
-  let x = event.clientX - rect.left;
-  let y = event.clientY - rect.top;
-  x = Math.max(0, x);
-  x = Math.min(x, rect.width);
-  y = Math.max(0, y);
-  y = Math.min(y, rect.height);
-  setPosition(cursor.value, x - 1 / 2 * cursor.value.offsetWidth, y - 1 / 2 * cursor.value.offsetWidth);
-  return { x, y };
-};
-const calcSaturation = (x, width) => x / width;
-const calcBrightness = (y, height) => 100 - y / height * 100;
-const getThumbTop = (wrapper, thumb, hue) => {
-  return Math.round(hue * (wrapper.offsetHeight - thumb.offsetHeight / 2) / 360);
-};
-const resetCursor = (s, v, wrapper, cursor, thumb, color, h) => {
-  const { width, height } = wrapper.value.getBoundingClientRect();
-  const x = getXBySaturation(s, width) - 1 / 2 * cursor.value.offsetWidth;
-  const y = getYByLight(v, height) - 1 / 2 * cursor.value.offsetWidth;
-  setPosition(cursor.value, x < 0 ? 0 : x, y < 0 ? 0 : y);
-  const thummbTop = getThumbTop(wrapper.value, thumb.value, color.get("h"));
-  thumb.value.style.top = `${thummbTop}px`;
-  h.value = color.get("h");
-};
-const updateCursor = (wrapper, cursor, emit) => {
-  return (color, event) => {
-    const rect = wrapper.value.getBoundingClientRect();
-    const { x, y } = updatePosition(event, rect, cursor);
-    color.set({
-      s: calcSaturation(x, rect.width) * 100,
-      v: calcBrightness(y, rect.height),
-      h: color.get("h")
-    });
-    emit("sv-update", {
-      s: color.get("s"),
-      v: color.get("v"),
-      h: color.get("h")
-    });
+const initDom = ({ ref }) => {
+  return {
+    thumb: ref(),
+    bar: ref(),
+    wrapper: ref()
   };
 };
-const updateThumb = (bar, thumb, h, emit) => {
-  return (event) => {
-    const e = event;
-    const rect = bar.value.getBoundingClientRect();
-    let top = e.clientY - rect.top;
+const useEvent = ({ thumb, bar }, state, props, { emit }) => {
+  const onSvReady = (update2) => {
+    emit("svReady", update2);
+  };
+  const getThumbTop = () => {
+    if (!thumb.value) {
+      return 0;
+    }
+    const hue = props.color.get("hue");
+    if (!bar.value) {
+      return 0;
+    }
+    return hue * (bar.value.offsetHeight - thumb.value.offsetHeight / 2) / 360;
+  };
+  const update = () => {
+    state.thumbTop = getThumbTop();
+  };
+  const onDrag = (event) => {
+    if (!bar.value || !thumb.value) {
+      return;
+    }
+    const el = bar.value;
+    if (!el) {
+      return;
+    }
+    const rect = el == null ? void 0 : el.getBoundingClientRect();
+    const { clientY } = getClientXY(event);
+    let top = clientY - rect.top;
     top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
     top = Math.max(thumb.value.offsetHeight / 2, top);
-    thumb.value.style.top = `${top}px`;
-    h.value = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
-    emit("hue-update", h.value);
+    const hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
+    state.thumbTop = top;
+    emit("hueUpdate", hue);
+    props.color.set("hue", hue);
   };
+  return { update, onDrag, onSvReady };
 };
 export {
-  calcBrightness,
-  calcSaturation,
-  getThumbTop,
-  getXBySaturation,
-  getYByLight,
-  resetCursor,
-  setPosition,
-  updateCursor,
-  updatePosition,
-  updateThumb
+  initDom,
+  initState,
+  useEvent
 };

package/color-select-panel/hue-select/vue.js

@@ -1,54 +1,36 @@
 import "../../chunk-G2ADBYYC.js";
 import { draggable } from "../utils/use-drag";
-import { getThumbTop, resetCursor, updateThumb, updateCursor } from "./index";
-const api = ["state", "cursor", "wrapper", "bar", "thumb"];
-const renderless = (props, context, { emit, expose }) => {
-  const cursor = context.ref();
-  const wrapper = context.ref();
-  const thumb = context.ref();
-  const bar = context.ref();
-  const color = props.color;
-  const h = context.ref(color.get("h"));
-  const background = `hsl(${h.value}deg, 100%, 50%)`;
-  const state = context.reactive({
-    background
-  });
-  const api2 = { state, cursor, wrapper, bar, thumb };
-  context.watch(
-    () => props,
-    () => {
-      h.value = color.get("h");
-      resetCursor(color.get("s"), color.get("v"), wrapper, cursor, thumb, color, h);
-    },
-    { deep: true }
-  );
-  context.watch(h, (newHue) => {
-    state.background = `hsl(${newHue}deg, 100%, 50%)`;
-  });
-  context.onMounted(() => {
-    const update = {
-      thumb: updateThumb(bar, thumb, h, emit),
-      cursor: updateCursor(wrapper, cursor, emit)
-    };
-    const thumbTop = getThumbTop(wrapper.value, thumb.value, h.value);
-    thumb.value.style.top = `${thumbTop}px`;
-    resetCursor(color.get("s"), color.get("v"), wrapper, cursor, thumb, color, h);
-    draggable(wrapper.value, {
-      drag(event) {
-        update.cursor(color, event);
+import { initDom, initState, useEvent } from ".";
+const api = ["state", "onSvReady", "bar", "thumb", "wrapper"];
+const renderless = (props, hooks, utils) => {
+  const { onMounted } = hooks;
+  const { emit } = utils;
+  const { thumb, bar, wrapper } = initDom(hooks);
+  const state = initState(props, hooks);
+  const { onSvReady, onDrag, update } = useEvent({ thumb, bar, wrapper }, state, props, utils);
+  const api2 = {
+    state,
+    onSvReady,
+    bar,
+    thumb,
+    wrapper
+  };
+  onMounted(() => {
+    if (!bar.value || !thumb.value) {
+      return;
+    }
+    const dragConfig = {
+      drag: (event) => {
+        onDrag(event);
       },
-      start(event) {
-        update.cursor(color, event);
+      end: (event) => {
+        onDrag(event);
       }
-    });
-    draggable(bar.value, {
-      drag(event) {
-        update.thumb(event);
-      },
-      start(event) {
-        update.thumb(event);
-      }
-    });
+    };
+    draggable(bar.value, dragConfig);
+    draggable(thumb.value, dragConfig);
+    emit("hueReady", update);
+    update();
   });
   return api2;
 };

package/color-select-panel/index.js

@@ -1,93 +1,243 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "../chunk-G2ADBYYC.js";
-import Color from "./utils/color";
-const onConfirm = (hex, pre, res, emit, stack, enableHistory, color) => {
-  return () => {
-    pre.value = hex.value;
-    hex.value = res.value;
-    if (enableHistory) {
-      const itemIdx = Math.max(
-        stack.value.indexOf(res.value),
-        stack.value.indexOf(res.value.toLowerCase()),
-        stack.value.indexOf(res.value.toUpperCase())
-      );
-      if (itemIdx !== -1) {
-        stack.value.splice(itemIdx, 1);
+import "../chunk-G2ADBYYC.js";
+import { Color } from "./utils/color";
+const panelRgb = (color, alpha) => {
+  const { r, g, b } = color.toRgb();
+  return alpha ? `rgba(${r},${g},${b},${color.get("alpha") / 100})` : `rgb(${r},${g},${b})`;
+};
+const updateModelValue = (value, emit) => {
+  emit("update:modelValue", value);
+};
+const triggerCancel = (value, emit) => {
+  emit("cancel");
+};
+const triggerColorUpdate = (value, emit) => {
+  emit("color-update", value);
+};
+const triggerConfirm = (value, emit) => {
+  emit("confirm", value);
+};
+const initApi = (props, state, { emit, nextTick }) => {
+  const setShowPicker = (value) => state.showPicker = value;
+  const resetColor = () => {
+    nextTick(() => {
+      if (props.modelValue) {
+        state.color.fromString(props.modelValue);
+      } else {
+        state.color.value = "";
+        nextTick(() => {
+          state.showPanel = false;
+        });
       }
-      stack.value.unshift(res.value);
-    }
-    color.value.setPrevH(color.value.get("h"));
-    emit("confirm", res.value);
-    emit("update:modelValue", res.value);
+    });
   };
-};
-const onCancel = (res, pre, emit, isShow, hex, color) => {
-  return () => {
-    if (isShow.value) {
-      res.value = pre.value;
-      hex.value = pre.value;
-      const tmpColor = new Color(pre.value);
-      color.value.set(__spreadProps(__spreadValues({}, tmpColor.getHSV()), {
-        h: color.value.get("preH")
-      }));
-      emit("cancel", color);
+  const submitValue = () => {
+    const value = state.color.value;
+    updateModelValue(value, emit);
+    triggerConfirm(value, emit);
+    setShowPicker(false);
+    nextTick(() => {
+      var _a;
+      const newColor = new Color({
+        enableAlpha: props.alpha,
+        format: (_a = state.currentFormat) != null ? _a : "",
+        value: props.modelValue
+      });
+      if (!state.color.compare(newColor)) {
+        resetColor();
+      }
+    });
+  };
+  const onConfirm = () => {
+    submitValue();
+    if (!state.enableHistory) {
+      return;
+    }
+    let index = state.stack.indexOf(state.input);
+    if (index === -1) {
+      state.stack.push(state.input);
+    } else {
+      state.stack = [state.input, ...state.stack.filter((c, i) => i !== index)];
     }
-    emit("update:modelValue", hex.value);
   };
-};
-const onColorUpdate = (color, res, emit) => {
-  res.value = color.value.getHex();
-  emit("update:modelValue", res.value);
-};
-const onHSVUpdate = (color, res, hex, emit) => {
-  return {
-    onHueUpdate: (hue) => {
-      color.value.set({ h: hue });
-      onColorUpdate(color, res, emit);
-      hex.value = color.value.getHex();
-      emit("hue-update", hue);
-    },
-    onSVUpdate: ({ s, v }) => {
-      hex.value = color.value.getHex();
-      onColorUpdate(color, res, emit);
-      emit("sv-update", { s, v });
+  const onCancel = () => {
+    resetColor();
+    close();
+    emit("cancel");
+  };
+  const clear = () => {
+    updateModelValue(null, emit);
+    triggerCancel(null, emit);
+    resetColor();
+  };
+  const onClickOutside = () => {
+    if (!state.showPicker) {
+      return;
     }
+    close();
+    resetColor();
+    emit("cancel");
+  };
+  const onHueReady = (update) => {
+    state.hue = { update };
+  };
+  const onSvReady = (update) => {
+    state.sv = { update };
+  };
+  const onAlphaReady = (update) => {
+    state.alpha = { update };
+  };
+  const open = () => {
+    setShowPicker(true);
+  };
+  const close = () => {
+    setShowPicker(false);
+  };
+  const onHistoryClick = (historyColor) => {
+    state.color.fromString(historyColor);
+  };
+  const onPredefineColorClick = (predefineColor) => {
+    state.color.fromString(predefineColor);
   };
-};
-const onAlphaUpdate = (color, res, emit) => {
   return {
-    update: (alpha) => {
-      color.value.set({ a: alpha });
-      onColorUpdate(color, res, emit);
-    }
+    open,
+    close,
+    resetColor,
+    onConfirm,
+    onCancel,
+    submitValue,
+    clear,
+    onHueReady,
+    onSvReady,
+    onAlphaReady,
+    onPredefineColorClick,
+    onHistoryClick,
+    onClickOutside
   };
 };
-const handleHistoryClick = (hex, res, color, emit) => {
-  return (history) => {
-    hex.value = history;
-    res.value = history;
-    const tmpColor = new Color(history);
-    color.value.set(__spreadValues({}, tmpColor.getHSV()));
-    emit("color-update", color);
-  };
+const initState = (props, { reactive, ref, computed }) => {
+  var _a, _b;
+  const stack = ref([...(_a = props.history) != null ? _a : []]);
+  const predefineStack = computed(() => props.predefine);
+  const hue = ref();
+  const sv = ref();
+  const alpha = ref();
+  const currentFormat = ref(props.format[0]);
+  const color = reactive(
+    new Color({
+      enableAlpha: props.alpha,
+      format: (_b = currentFormat.value) != null ? _b : "hex",
+      value: props.modelValue
+    })
+  );
+  const input = ref("");
+  const showPicker = ref(props.visible);
+  const showPanel = ref(false);
+  const panelColor = computed(() => {
+    if (!props.modelValue && !showPanel.value) {
+      return "transparent";
+    }
+    return panelRgb(color, props.alpha);
+  });
+  const currentColor = computed(() => !props.modelValue && !showPicker.value ? "" : color.value);
+  const state = reactive({
+    color,
+    input,
+    showPicker,
+    showPanel,
+    panelColor,
+    currentColor,
+    hue,
+    sv,
+    alpha,
+    stack,
+    predefineStack,
+    enablePredefineColor: computed(() => props.enablePredefineColor),
+    enableHistory: computed(() => props.enableHistory),
+    currentFormat,
+    formats: props.format
+  });
+  return state;
 };
-const handlePredefineClick = (hex, res, color, emit) => {
-  return (selectedColor) => {
-    hex.value = selectedColor;
-    res.value = selectedColor;
-    const tmpColor = new Color(selectedColor);
-    color.value.set(__spreadValues({}, tmpColor.getHSV()));
-    emit("color-update", color);
-  };
+const initWatch = (state, props, { nextTick, watch }, { emit }) => {
+  watch(
+    () => state.color,
+    () => {
+      emit("color-update", state.color);
+    }
+  );
+  watch(
+    () => props.visible,
+    () => {
+      state.showPicker = props.visible;
+    }
+  );
+  watch(
+    () => props.modelValue,
+    () => {
+      if (!props.modelValue) {
+        state.showPanel = false;
+      }
+      if (props.modelValue && props.modelValue !== state.color.value) {
+        state.color.fromString(props.modelValue);
+      }
+    }
+  );
+  watch(
+    () => [state.currentFormat, props.alpha],
+    () => {
+      state.color.enableAlpha = props.alpha;
+      state.color.format = state.currentFormat || state.color.format;
+      state.color.onChange();
+      updateModelValue(state.color.value, emit);
+    }
+  );
+  watch(
+    () => state.currentColor,
+    () => {
+      state.input = state.currentColor;
+      triggerColorUpdate(state.input, emit);
+    },
+    { flush: "sync" }
+  );
+  watch(state.color, () => {
+    if (!props.modelValue && !state.showPanel) {
+      state.showPanel = true;
+    }
+  });
+  watch(
+    () => state.showPicker,
+    () => {
+      nextTick(() => {
+        if (state.hue) {
+          state.hue.update();
+        }
+        if (state.sv) {
+          state.sv.update();
+        }
+        if (state.alpha) {
+          state.alpha.update();
+        }
+      });
+    }
+  );
+  watch(
+    () => props.history,
+    () => {
+      if (!state.enableHistory) {
+        return;
+      }
+      state.stack = props.history;
+    },
+    { deep: true }
+  );
 };
 export {
-  handleHistoryClick,
-  handlePredefineClick,
-  onAlphaUpdate,
-  onCancel,
-  onColorUpdate,
-  onConfirm,
-  onHSVUpdate
+  initApi,
+  initState,
+  initWatch,
+  panelRgb,
+  triggerCancel,
+  triggerColorUpdate,
+  triggerConfirm,
+  updateModelValue
 };

package/color-select-panel/sv-select/index.js

@@ -0,0 +1,68 @@
+import "../../chunk-G2ADBYYC.js";
+import { getClientXY } from "../utils/getClientXY";
+const initState = (props, { ref, computed, reactive }) => {
+  const cursorTop = ref(0);
+  const cursorLeft = ref(0);
+  const bg = ref("hsl(0, 100%, 50%)");
+  const colorValue = computed(() => {
+    const hue = props.color.get("hue");
+    const value = props.color.get("value");
+    return { hue, value };
+  });
+  const state = reactive({
+    colorValue,
+    bg,
+    cursorLeft,
+    cursorTop
+  });
+  return state;
+};
+const useUpdate = (state, props, wrapper) => {
+  return () => {
+    const el = wrapper.value;
+    if (!el) {
+      return;
+    }
+    const sat = props.color.get("sat");
+    const value = props.color.get("value");
+    const { clientWidth: width, clientHeight: height } = el;
+    state.cursorLeft = sat * width / 100;
+    state.cursorTop = (100 - value) * height / 100;
+    state.bg = `hsl(${props.color.get("hue")}, 100%, 50%)`;
+  };
+};
+const useDrag = (state, wrapper, props, { emit }) => {
+  return (event) => {
+    const el = wrapper.value;
+    const rect = el.getBoundingClientRect();
+    const { clientX, clientY } = getClientXY(event);
+    let left = clientX - rect.left;
+    let top = clientY - rect.top;
+    left = Math.max(0, left);
+    left = Math.min(left, rect.width);
+    top = Math.max(0, top);
+    top = Math.min(top, rect.height);
+    state.cursorLeft = Math.max(left, 0);
+    state.cursorTop = Math.max(top, 0);
+    const s = left / rect.width * 100;
+    const v = 100 - top / rect.height * 100;
+    emit("svUpdate", { s, v });
+    props.color.set({
+      sat: s,
+      value: v
+    });
+  };
+};
+const initWatch = (state, update, { watch }) => {
+  watch(
+    () => state.colorValue.value,
+    () => update(),
+    { deep: true }
+  );
+};
+export {
+  initState,
+  initWatch,
+  useDrag,
+  useUpdate
+};