mine-h5-ui/es/MeColorPicker/dropdown.vue.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { defineComponent as F, useModel as S, computed as G, ref as h, watch as H, openBlock as X, createBlock as I, Transition as J, withCtx as L, createElementBlock as O, unref as n, normalizeClass as E, createElementVNode as b, withModifiers as Q, normalizeStyle as R, createVNode as y, createCommentVNode as Z, mergeModels as ee } from "vue";
import Y from "./slide.vue.js";
import oe from "./select-mode.vue.js";
import { name as D, getDefaultValue as te } from "./config.js";
import { colorType as x, hsbKey as p } from "./enums.js";
import { rgbExtractNum as le, hsbToRect as m, rgbToRgba as ae, setModelValue as P } from "./utils.js";
import re from "./color-panel.vue.js";
import { useSameTarget as se } from "../MeComposable/useSameTarget/index.js";
import { useColorTransform as w } from "../MeComposable/useColorTransform/index.js";
const ne = { class: "progress-box" }, ue = { class: "progress-box__group" }, $ = 10, A = 10, fe = /* @__PURE__ */ F({
  __name: "dropdown",
  props: /* @__PURE__ */ ee({
    duration: { default: 400 },
    rect: { default: () => ({
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }) }
  }, {
    visible: { type: Boolean, default: !1 },
    visibleModifiers: {},
    modelValue: { default: te() },
    modelModifiers: {}
  }),
  emits: ["update:visible", "update:modelValue"],
  setup(f) {
    const K = f, k = S(f, "visible"), r = S(f, "modelValue"), s = { width: 260, height: 260 }, V = screen.width - s.width, W = G(() => {
      const { width: l, height: e, x: o, y: i } = K.rect;
      let a = o, u = i + e + A;
      const g = 0, v = screen.width - l, q = screen.height - s.height;
      let z = 45;
      a < g ? a = g : a > v && (a = v), a > V && (a = V);
      let d = ~~((l - $) / 2 + (o - a)), N = -5;
      return d += $ / 2, u > q && (u -= s.height + e + A * 2, N = s.height + 5, z = 225), d < 0 ? d = 0 : d > s.width && (d = s.width), `left:${a}px;top:${u}px;width:${s.width}px;height:${s.height}px;--arrow-x:${d}px;--arrow-y:${N}px;--arrow-size:${$}px;--arrow-deg:rotate(${z}deg);`;
    }), _ = () => {
      k.value = !1;
    }, { onClick: B, onMousedown: M, onMouseup: C } = se(_), t = h({
      entity: {
        value: 0,
        bg: "linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
        dotBg: ""
      },
      opacity: {
        value: 100,
        bg: "",
        dotBg: ""
      }
    }), T = h(""), c = h({
      x: 0,
      y: 0
    }), U = () => {
      const { x: l, y: e } = c.value, o = m({ value: t.value.entity.value, type: p.h }), i = m({ value: l, type: p.s }), a = m({ value: e, type: p.b }), u = w(`hsb(${o},${i}%,${a}%)`, [x.hsb, r.value.type]);
      P(r, { value: u });
    };
    H(
      r,
      (l) => {
        const e = w(l.value, [l.type, x.rgb]), o = w(l.value, [l.type, x.hsb]), [i, a, u] = le(o, !0), g = m({ value: a, type: p.s, reverse: !0 }), v = m({ value: u, type: p.b, reverse: !0 });
        c.value = { x: g, y: v }, t.value.entity.value = m({ value: i, type: p.h, reverse: !0 }), t.value.entity.dotBg = `hsl(${i},100%,50%)`, t.value.opacity.value = l.alpha, t.value.opacity.dotBg = ae(e, t.value.opacity.value), t.value.opacity.bg = `linear-gradient(90deg, transparent 0%, ${e} 100%)`, T.value = e.replace(")", `,${l.alpha / 100}`);
      },
      { immediate: !0, deep: !0 }
    );
    const j = (l) => P(r, { alpha: Math.round(+l) });
    return (l, e) => (X(), I(J, { name: "fade" }, {
      default: L(() => [
        k.value ? (X(), O("div", {
          key: 0,
          class: E(`${n(D)}-mask`),
          onClick: e[5] || (e[5] = //@ts-ignore
          (...o) => n(B) && n(B)(...o)),
          onMousedown: e[6] || (e[6] = //@ts-ignore
          (...o) => n(M) && n(M)(...o)),
          onMouseup: e[7] || (e[7] = //@ts-ignore
          (...o) => n(C) && n(C)(...o))
        }, [
          b("div", {
            class: E(`${n(D)}-dropdown`),
            style: R(W.value),
            onClick: e[4] || (e[4] = Q(() => {
            }, ["stop"]))
          }, [
            y(re, {
              modelValue: c.value,
              "onUpdate:modelValue": [
                e[0] || (e[0] = (o) => c.value = o),
                U
              ],
              background: t.value.entity.dotBg
            }, null, 8, ["modelValue", "background"]),
            b("div", ne, [
              b("div", ue, [
                y(Y, {
                  modelValue: t.value.entity.value,
                  "onUpdate:modelValue": [
                    e[1] || (e[1] = (o) => t.value.entity.value = o),
                    U
                  ],
                  color: t.value.entity.dotBg,
                  opacity: "",
                  background: t.value.entity.bg
                }, null, 8, ["modelValue", "color", "background"]),
                y(Y, {
                  modelValue: r.value.alpha,
                  "onUpdate:modelValue": [
                    e[2] || (e[2] = (o) => r.value.alpha = o),
                    j
                  ],
                  color: t.value.opacity.dotBg,
                  opacity: "",
                  background: t.value.opacity.bg
                }, null, 8, ["modelValue", "color", "background"])
              ]),
              b("div", {
                class: "progress-box__block",
                style: R({ backgroundColor: T.value })
              }, null, 4)
            ]),
            y(oe, {
              modelValue: r.value,
              "onUpdate:modelValue": e[3] || (e[3] = (o) => r.value = o)
            }, null, 8, ["modelValue"])
          ], 6)
        ], 34)) : Z("", !0)
      ]),
      _: 1
    }));
  }
});
export {
  fe as default
};