@opentinyvue/vue-color-select-panel 3.24.0 → 3.26.0

package/lib/pc.js

@@ -4,12 +4,10 @@ import { renderless as renderless$3, api as api$3 } from '@opentinyvue/vue-rende
 import { defineComponent, setup, props, directive } from '@opentinyvue/vue-common';
 import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-renderless/color-select-panel/hue-select/vue';
 import { api, renderless } from '@opentinyvue/vue-renderless/color-select-panel/sv-select/vue';
-import { openBlock, createElementBlock, normalizeStyle, createElementVNode, resolveComponent, createVNode, resolveDirective, withDirectives, withModifiers, createBlock, createCommentVNode, withCtx, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, normalizeStyle, createElementVNode, resolveComponent, createVNode, resolveDirective, withDirectives, withModifiers, createBlock, createCommentVNode, withCtx, Fragment, renderList, toDisplayString, createTextVNode } from 'vue';
 import { renderless as renderless$2, api as api$2 } from '@opentinyvue/vue-renderless/color-select-panel/alpha-select/vue';
 import '@opentinyvue/vue-theme/color-select-panel/index.css';
 import { Clickoutside } from '@opentinyvue/vue-directive';
-import Collapse from '@opentinyvue/vue-collapse';
-import CollapseItem from '@opentinyvue/vue-collapse-item';
 import Select from '@opentinyvue/vue-select';
 import Option from '@opentinyvue/vue-option';
 
@@ -153,12 +151,24 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
       "div",
       {
         ref: "thumb",
+        class: "tiny-color-select-panel__inner__hue-select-thumb",
         style: normalizeStyle({
-          top: _ctx.state.thumbTop + "px",
-          transform: "translateY(-50%)"
+          left: _ctx.state.thumbLeft + "px",
+          transform: "translateX(-50%)"
         })
       },
-      null,
+      [createElementVNode(
+        "div",
+        {
+          class: "tiny-color-select-panel__inner__hue-select-thumb-heart",
+          style: normalizeStyle({
+            background: _ctx.color.value
+          })
+        },
+        null,
+        4
+        /* STYLE */
+      )],
       4
       /* STYLE */
     )],
@@ -211,13 +221,24 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       {
         class: "tiny-color-select-panel__alpha__thumb",
         style: normalizeStyle({
-          top: 0,
+          top: "-2px",
           left: _ctx.state.left + "px",
           transform: "translateX(-50%)"
         }),
         ref: "alphaThumb"
       },
-      null,
+      [createElementVNode(
+        "div",
+        {
+          class: "tiny-color-select-panel__inner__hue-select-thumb-heart",
+          style: normalizeStyle({
+            background: _ctx.color.value
+          })
+        },
+        null,
+        4
+        /* STYLE */
+      )],
       4
       /* STYLE */
     )],
@@ -234,8 +255,6 @@ var _sfc_main = defineComponent({
     AlphaSelect,
     TinyButton: Button,
     TinyInput: Input,
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
     TinySelect: Select,
     TinyOption: Option
   },
@@ -252,30 +271,46 @@ var _sfc_main = defineComponent({
   }
 });
 var _hoisted_1 = {
-  class: "tiny-color-select-panel__tools"
+  key: 1,
+  class: "tiny-color-select-panel__no-alpha"
 };
 var _hoisted_2 = {
-  key: 0,
-  class: "tiny-color-select-panel__tools__format-select"
+  class: "tiny-color-select-panel__tools"
 };
 var _hoisted_3 = {
-  class: "tiny-color-select-panel__tools-btns"
+  key: 0,
+  class: "tiny-color-select-panel__tools__format-select"
 };
 var _hoisted_4 = {
+  class: "tiny-color-select-panel__tools-style"
+};
+var _hoisted_5 = {
   key: 0,
-  class: "tiny-color-select-panel__history"
+  class: "tiny-color-select-panel__tools-hex"
 };
-var _hoisted_5 = ["onClick"];
 var _hoisted_6 = {
-  key: 1
+  key: 1,
+  class: "tiny-color-select-panel__tools-hex"
 };
 var _hoisted_7 = {
+  key: 2
+};
+var _hoisted_8 = {
   key: 0,
+  class: "tiny-color-select-panel__history"
+};
+var _hoisted_9 = ["onClick"];
+var _hoisted_10 = {
+  key: 3,
+  class: "tiny-color-select-panel__predefine-title"
+};
+var _hoisted_11 = {
+  key: 4,
   class: "tiny-color-select-panel__predefine"
 };
-var _hoisted_8 = ["onClick"];
-var _hoisted_9 = {
-  key: 1
+var _hoisted_12 = ["onClick"];
+var _hoisted_13 = {
+  class: "tiny-color-select-panel__tools-btns"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_hue_select = resolveComponent("hue-select");
@@ -284,13 +319,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_tiny_select = resolveComponent("tiny-select");
   var _component_tiny_input = resolveComponent("tiny-input");
   var _component_tiny_button = resolveComponent("tiny-button");
-  var _component_tiny_collapse_item = resolveComponent("tiny-collapse-item");
-  var _component_tiny_collapse = resolveComponent("tiny-collapse");
   var _directive_clickoutside = resolveDirective("clickoutside");
   return _ctx.state.showPicker ? withDirectives((openBlock(), createElementBlock("div", {
     key: 0,
     class: "tiny-color-select-panel",
-    onClick: _cache[2] || (_cache[2] = withModifiers(function() {
+    onClick: _cache[6] || (_cache[6] = withModifiers(function() {
     }, ["stop"]))
   }, [createVNode(_component_hue_select, {
     color: _ctx.state.color,
@@ -300,11 +333,23 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     color: _ctx.state.color,
     onReady: _ctx.onAlphaReady
-  }, null, 8, ["color", "onReady"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_1, [_ctx.state.formats.length ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_component_tiny_select, {
+  }, null, 8, ["color", "onReady"])) : createCommentVNode("v-if", true), !_ctx.alpha ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("v-if", true), createElementVNode(
+    "div",
+    {
+      class: "tiny-color-select-panel__display",
+      style: normalizeStyle({
+        background: _ctx.state.color.value
+      })
+    },
+    null,
+    4
+    /* STYLE */
+  ), createElementVNode("div", _hoisted_2, [_ctx.state.formats.length ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(_component_tiny_select, {
     modelValue: _ctx.state.currentFormat,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function($event) {
       return _ctx.state.currentFormat = $event;
-    })
+    }),
+    size: "small"
   }, {
     default: withCtx(function() {
       return [(openBlock(true), createElementBlock(
@@ -323,28 +368,79 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     _: 1
     /* STABLE */
-  }, 8, ["modelValue"])])) : createCommentVNode("v-if", true), createVNode(_component_tiny_input, {
+  }, 8, ["modelValue"])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_4, [_ctx.state.currentFormat === "hex" || _ctx.state.currentFormat === "css" || !_ctx.state.currentFormat ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(_component_tiny_input, {
+    class: "tiny-color-select-panel__tools-hex1",
     modelValue: _ctx.state.input,
     "onUpdate:modelValue": _cache[1] || (_cache[1] = function($event) {
       return _ctx.state.input = $event;
+    })
+  }, null, 8, ["modelValue"])])) : (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_tiny_input, {
+    class: "tiny-color-select-panel__tools-hex4",
+    modelValue: _ctx.state.hexInput4,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = function($event) {
+      return _ctx.state.hexInput4 = $event;
+    })
+  }, null, 8, ["modelValue"]), createVNode(_component_tiny_input, {
+    class: "tiny-color-select-panel__tools-hex5",
+    modelValue: _ctx.state.hexInput5,
+    "onUpdate:modelValue": _cache[3] || (_cache[3] = function($event) {
+      return _ctx.state.hexInput5 = $event;
+    })
+  }, null, 8, ["modelValue"]), createVNode(_component_tiny_input, {
+    class: "tiny-color-select-panel__tools-hex6",
+    modelValue: _ctx.state.hexInput6,
+    "onUpdate:modelValue": _cache[4] || (_cache[4] = function($event) {
+      return _ctx.state.hexInput6 = $event;
+    })
+  }, null, 8, ["modelValue"]), createVNode(_component_tiny_input, {
+    class: "tiny-color-select-panel__tools-hex7",
+    modelValue: _ctx.state.hexInput7,
+    "onUpdate:modelValue": _cache[5] || (_cache[5] = function($event) {
+      return _ctx.state.hexInput7 = $event;
+    })
+  }, null, 8, ["modelValue"])]))])]), _ctx.state.enableHistory ? (openBlock(), createElementBlock("div", _hoisted_7, [_ctx.state.enableHistory && _ctx.state.stack.length ? (openBlock(), createElementBlock("div", _hoisted_8, [(openBlock(true), createElementBlock(
+    Fragment,
+    null,
+    renderList(_ctx.state.stack, function(color, key) {
+      return openBlock(), createElementBlock("div", {
+        class: "tiny-color-select-panel__history__color-block",
+        key,
+        style: normalizeStyle({
+          background: color
+        }),
+        onClick: function onClick() {
+          return _ctx.onHistoryClick(color);
+        }
+      }, null, 12, _hoisted_9);
     }),
-    size: "small"
-  }, null, 8, ["modelValue"]), createElementVNode("div", _hoisted_3, [createVNode(_component_tiny_button, {
-    size: "small",
-    onClick: _ctx.onCancel
-  }, {
-    default: withCtx(function() {
-      return [createTextVNode(
-        toDisplayString(_ctx.t("ui.colorSelectPanel.cancel")),
-        1
-        /* TEXT */
-      )];
+    128
+    /* KEYED_FRAGMENT */
+  ))])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), _ctx.state.enablePredefineColor ? (openBlock(), createElementBlock(
+    "div",
+    _hoisted_10,
+    toDisplayString(_ctx.t("ui.colorSelectPanel.predefine")),
+    1
+    /* TEXT */
+  )) : createCommentVNode("v-if", true), _ctx.state.enablePredefineColor && _ctx.state.predefineStack.length ? (openBlock(), createElementBlock("div", _hoisted_11, [(openBlock(true), createElementBlock(
+    Fragment,
+    null,
+    renderList(_ctx.state.predefineStack, function(color, key) {
+      return openBlock(), createElementBlock("div", {
+        class: "tiny-color-select-panel__predefine__color-block",
+        key,
+        style: normalizeStyle({
+          background: color
+        }),
+        onClick: function onClick() {
+          return _ctx.onPredefineColorClick(color);
+        }
+      }, null, 12, _hoisted_12);
     }),
-    _: 1
-    /* STABLE */
-  }, 8, ["onClick"]), createVNode(_component_tiny_button, {
-    type: "primary",
+    128
+    /* KEYED_FRAGMENT */
+  ))])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_13, [createVNode(_component_tiny_button, {
     size: "small",
+    type: "primary",
     onClick: _ctx.onConfirm
   }, {
     default: withCtx(function() {
@@ -356,79 +452,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     _: 1
     /* STABLE */
-  }, 8, ["onClick"])])]), createVNode(_component_tiny_collapse, null, {
-    default: withCtx(function() {
-      return [_ctx.state.enableHistory ? (openBlock(), createBlock(_component_tiny_collapse_item, {
-        key: 0,
-        title: _ctx.t("ui.colorSelectPanel.history"),
-        name: "history"
-      }, {
-        default: withCtx(function() {
-          return [_ctx.state.stack.length ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(
-            Fragment,
-            null,
-            renderList(_ctx.state.stack, function(color, key) {
-              return openBlock(), createElementBlock("div", {
-                class: "tiny-color-select-panel__history__color-block",
-                key,
-                style: normalizeStyle({
-                  background: color
-                }),
-                onClick: function onClick() {
-                  return _ctx.onHistoryClick(color);
-                }
-              }, null, 12, _hoisted_5);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          ))])) : createCommentVNode("v-if", true), !_ctx.state.stack.length ? (openBlock(), createElementBlock(
-            "div",
-            _hoisted_6,
-            toDisplayString(_ctx.t("ui.colorSelectPanel.empty")),
-            1
-            /* TEXT */
-          )) : createCommentVNode("v-if", true)];
-        }),
-        _: 1
-        /* STABLE */
-      }, 8, ["title"])) : createCommentVNode("v-if", true), _ctx.state.enablePredefineColor ? (openBlock(), createBlock(_component_tiny_collapse_item, {
-        key: 1,
-        title: _ctx.t("ui.colorSelectPanel.predefine"),
-        name: "predefine"
-      }, {
-        default: withCtx(function() {
-          return [_ctx.state.predefineStack.length ? (openBlock(), createElementBlock("div", _hoisted_7, [(openBlock(true), createElementBlock(
-            Fragment,
-            null,
-            renderList(_ctx.state.predefineStack, function(color, key) {
-              return openBlock(), createElementBlock("div", {
-                class: "tiny-color-select-panel__predefine__color-block",
-                key,
-                style: normalizeStyle({
-                  background: color
-                }),
-                onClick: function onClick() {
-                  return _ctx.onPredefineColorClick(color);
-                }
-              }, null, 12, _hoisted_8);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          ))])) : createCommentVNode("v-if", true), !_ctx.state.predefineStack.length ? (openBlock(), createElementBlock(
-            "div",
-            _hoisted_9,
-            toDisplayString(_ctx.t("ui.colorSelectPanel.empty")),
-            1
-            /* TEXT */
-          )) : createCommentVNode("v-if", true)];
-        }),
-        _: 1
-        /* STABLE */
-      }, 8, ["title"])) : createCommentVNode("v-if", true)];
-    }),
-    _: 1
-    /* STABLE */
-  })])), [[_directive_clickoutside, _ctx.onClickOutside]]) : createCommentVNode("v-if", true);
+  }, 8, ["onClick"]), createVNode(_component_tiny_button, {
+    type: "text",
+    text: _ctx.t("ui.colorSelectPanel.cancel"),
+    size: "small",
+    onClick: _ctx.onCancel
+  }, null, 8, ["text", "onClick"])])])), [[_directive_clickoutside, _ctx.onClickOutside]]) : createCommentVNode("v-if", true);
 }
 var pc = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@opentinyvue/vue-color-select-panel",
   "type": "module",
-  "version": "3.24.0",
+  "version": "3.26.0",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "dependencies": {
-    "@opentinyvue/vue-button": "~3.24.0",
-    "@opentinyvue/vue-collapse": "~3.24.0",
-    "@opentinyvue/vue-collapse-item": "~3.24.0",
-    "@opentinyvue/vue-common": "~3.24.0",
-    "@opentinyvue/vue-directive": "~3.24.0",
-    "@opentinyvue/vue-input": "~3.24.0",
-    "@opentinyvue/vue-option": "~3.24.0",
-    "@opentinyvue/vue-renderless": "~3.24.0",
-    "@opentinyvue/vue-select": "~3.24.0",
-    "@opentinyvue/vue-theme": "~3.24.0"
+    "@opentinyvue/vue-button": "~3.26.0",
+    "@opentinyvue/vue-collapse": "~3.26.0",
+    "@opentinyvue/vue-collapse-item": "~3.26.0",
+    "@opentinyvue/vue-common": "~3.26.0",
+    "@opentinyvue/vue-directive": "~3.26.0",
+    "@opentinyvue/vue-input": "~3.26.0",
+    "@opentinyvue/vue-option": "~3.26.0",
+    "@opentinyvue/vue-renderless": "~3.26.0",
+    "@opentinyvue/vue-select": "~3.26.0",
+    "@opentinyvue/vue-theme": "~3.26.0"
   },
   "types": "index.d.ts"
 }