mine-h5-ui/es/MeColorPicker/select-mode.vue.js

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

import { defineComponent as S, useModel as D, ref as g, watch as b, openBlock as s, createElementBlock as i, createElementVNode as u, normalizeClass as k, toDisplayString as U, createVNode as n, Transition as N, withCtx as B, Fragment as $, renderList as E, unref as V, createCommentVNode as T, createBlock as h } from "vue";
import d from "./input.vue.js";
import { colorType as r } from "./enums.js";
import { setModelValue as f, rgbExtractNum as z } from "./utils.js";
import { getDefaultValue as A } from "./config.js";
import { useColorTransform as F } from "../MeComposable/useColorTransform/index.js";
const L = { class: "color-mode" }, j = { class: "color-mode__select" }, q = ["title"], G = { key: 0 }, H = { class: "child-dropdown" }, I = ["onClick"], J = { class: "color-mode__input-number" }, X = /* @__PURE__ */ S({
  __name: "select-mode",
  props: {
    modelValue: { default: A() },
    modelModifiers: {}
  },
  emits: ["update:modelValue"],
  setup(C) {
    const o = D(C, "modelValue"), t = g([0, 0, 0]), m = g(""), c = g(!1), y = (a) => {
      c.value = a;
    }, _ = ({ value: a }) => {
      if (o.value.type === a) return;
      const e = F(o.value.value, [o.value.type, a]);
      f(o, { value: e, type: a }), y(!1);
    }, w = (a) => {
      f(o, { alpha: Math.round(+a) });
    }, M = () => {
      const { value: a } = o.value, { value: e } = m;
      e.length !== 6 || a.slice(1) === m.value || f(o, { value: `#${e}` });
    };
    return b(
      t,
      ([a, e, l]) => {
        const { type: p, value: x } = o.value;
        let v = null;
        switch (p) {
          case r.rgb:
            v = `${p}(${a},${e},${l})`;
            break;
          case r.hsb:
            v = `${p}(${a},${e}%,${l}%)`;
            break;
        }
        v && x !== v && f(o, { value: v });
      },
      {
        deep: !0,
        immediate: !0
      }
    ), b(
      o,
      (a) => {
        a.type === r.hex ? m.value = `${a.value}`.replace("#", "") : t.value = z(a.value);
      },
      {
        immediate: !0,
        deep: !0
      }
    ), (a, e) => (s(), i("div", L, [
      u("div", j, [
        u("div", {
          class: "item-wrap",
          onClick: e[0] || (e[0] = (l) => y(!0))
        }, [
          u("span", {
            class: k(["text", { disabled: c.value }]),
            title: o.value.type
          }, U(o.value.type), 11, q),
          e[10] || (e[10] = u("span", { class: "iconfont icon-right1" }, null, -1))
        ]),
        n(N, { name: "fade" }, {
          default: B(() => [
            c.value ? (s(), i("div", G, [
              u("div", {
                class: "child-dropdown--mask",
                onClick: e[1] || (e[1] = (l) => y(!1))
              }),
              u("ul", H, [
                (s(!0), i($, null, E(V(r).options(), (l, p) => (s(), i("li", {
                  key: p,
                  class: k(["item", { active: o.value.type === l.value }]),
                  onClick: (x) => _(l)
                }, U(l.value), 11, I))), 128))
              ])
            ])) : T("", !0)
          ]),
          _: 1
        })
      ]),
      u("div", {
        class: k(["color-mode__input", { group: o.value.type !== V(r).hex }])
      }, [
        o.value.type === V(r).hex ? (s(), h(d, {
          key: 0,
          modelValue: m.value,
          "onUpdate:modelValue": [
            e[2] || (e[2] = (l) => m.value = l),
            M
          ],
          prefix: "#"
        }, null, 8, ["modelValue"])) : o.value.type === V(r).hsb ? (s(), i($, { key: 1 }, [
          n(d, {
            modelValue: t.value[0],
            "onUpdate:modelValue": e[3] || (e[3] = (l) => t.value[0] = l),
            range: [0, 359]
          }, null, 8, ["modelValue"]),
          n(d, {
            modelValue: t.value[1],
            "onUpdate:modelValue": e[4] || (e[4] = (l) => t.value[1] = l),
            suffix: "%",
            range: [0, 100]
          }, null, 8, ["modelValue"]),
          n(d, {
            modelValue: t.value[2],
            "onUpdate:modelValue": e[5] || (e[5] = (l) => t.value[2] = l),
            suffix: "%",
            range: [0, 100]
          }, null, 8, ["modelValue"])
        ], 64)) : (s(), i($, { key: 2 }, [
          n(d, {
            modelValue: t.value[0],
            "onUpdate:modelValue": e[6] || (e[6] = (l) => t.value[0] = l),
            range: [0, 255]
          }, null, 8, ["modelValue"]),
          n(d, {
            modelValue: t.value[1],
            "onUpdate:modelValue": e[7] || (e[7] = (l) => t.value[1] = l),
            range: [0, 255]
          }, null, 8, ["modelValue"]),
          n(d, {
            modelValue: t.value[2],
            "onUpdate:modelValue": e[8] || (e[8] = (l) => t.value[2] = l),
            range: [0, 255]
          }, null, 8, ["modelValue"])
        ], 64))
      ], 2),
      u("div", J, [
        n(d, {
          modelValue: o.value.alpha,
          "onUpdate:modelValue": [
            e[9] || (e[9] = (l) => o.value.alpha = l),
            w
          ],
          range: [0, 100],
          suffix: "%"
        }, null, 8, ["modelValue"])
      ])
    ]));
  }
});
export {
  X as default
};