hy-dispatch-ui-v3 0.2.66 → 0.2.68

package/lib/components/hyButton/style/button.scss

@@ -10,6 +10,7 @@
   font-size: 14px;
   box-sizing: border-box;
   border-radius: 4px;
+  position: relative;
 
   &:disabled,
   &.is-disabled {
@@ -36,7 +37,7 @@
     background: rgba(94, 157, 180, 0.32);
     border: 1px solid rgba(94, 157, 180, 1);
     box-shadow: 0px 0px 0px 2px rgba(94, 157, 180, 0.5);
-  
+
     .hy-button__border {
       background: linear-gradient(
         90deg,
@@ -45,27 +46,22 @@
         rgba(94, 157, 180, 0.4) 100%
       );
     }
-  
+
     .hy-button__inner {
       background: #003a48;
       box-shadow:
         inset 0 0 5px 1px rgba(0, 138, 157, 0.5),
         inset 0 0 2px 0 rgba(0, 147, 157, 0.5);
     }
-  
+
     .hy-button__text {
       color: #fff;
     }
-  
+
     .hy-button__mask {
-      background: radial-gradient(
-        ellipse at center bottom,
-        #7ebbd2 0%,
-        rgb(17, 108, 114) 30%,
-        transparent 60%
-      );
+      background: radial-gradient(ellipse at center bottom, #7ebbd2 0%, rgb(17, 108, 114) 30%, transparent 60%);
     }
-  
+
     &:hover .hy-button__inner {
       box-shadow:
         inset 0 0 5px 1px rgba(0, 138, 157, 0.5),
@@ -73,7 +69,7 @@
         inset 0 0 5px 1px rgba(0, 138, 157, 0.5),
         inset 0 0 2px 0 rgba(0, 147, 157, 0.5);
     }
-  
+
     &:disabled .hy-button__border,
     &.is-disabled .hy-button__border {
       background: linear-gradient(
@@ -83,7 +79,7 @@
         rgba(94, 157, 180, 0.18) 100%
       );
     }
-  
+
     &:disabled .hy-button__inner,
     &.is-disabled .hy-button__inner {
       background: #3e5a64;
@@ -91,18 +87,18 @@
         inset 0 0 4px 1px rgba(0, 138, 157, 0.2),
         inset 0 0 2px 0 rgba(0, 147, 157, 0.16);
     }
-  
+
     &:disabled .hy-button__text,
     &.is-disabled .hy-button__text {
       color: rgba(255, 255, 255, 0.68);
     }
   }
-  
+
   &.hy-button_function {
     background: rgba(45, 242, 255, 0.32);
     border: 1px solid rgba(45, 242, 255, 1);
     box-shadow: 0px 0px 0px 2px rgba(45, 242, 255, 0.5);
-  
+
     .hy-button__border {
       background: linear-gradient(
         90deg,
@@ -111,27 +107,22 @@
         rgba(45, 242, 255, 0.4) 100%
       );
     }
-  
+
     .hy-button__inner {
       background: #003a48;
       box-shadow:
         inset 0 0 5px 1px rgba(97, 248, 255, 0.5),
         inset 0 0 2px 0 rgba(159, 248, 255, 0.5);
     }
-  
+
     .hy-button__text {
       color: #fff;
     }
-  
+
     .hy-button__mask {
-      background: radial-gradient(
-        ellipse at center bottom,
-        #2df2ff 0%,
-        #1798a1 30%,
-        transparent 60%
-      );
+      background: radial-gradient(ellipse at center bottom, #2df2ff 0%, #1798a1 30%, transparent 60%);
     }
-  
+
     &:hover .hy-button__inner {
       box-shadow:
         inset 0 0 5px 1px rgba(97, 248, 255, 0.5),
@@ -139,7 +130,7 @@
         inset 0 0 5px 1px rgba(97, 248, 255, 0.5),
         inset 0 0 2px 0 rgba(159, 248, 255, 0.5);
     }
-  
+
     &:disabled .hy-button__border,
     &.is-disabled .hy-button__border {
       background: linear-gradient(
@@ -149,7 +140,7 @@
         rgba(45, 242, 255, 0.18) 100%
       );
     }
-  
+
     &:disabled .hy-button__inner,
     &.is-disabled .hy-button__inner {
       background: #10575c;
@@ -157,18 +148,18 @@
         inset 0 0 4px 1px rgba(97, 248, 255, 0.2),
         inset 0 0 2px 0 rgba(159, 248, 255, 0.16);
     }
-  
+
     &:disabled .hy-button__text,
     &.is-disabled .hy-button__text {
       color: rgba(255, 255, 255, 0.68);
     }
   }
-  
+
   &.hy-button_addTo {
     background: rgba(44, 232, 152, 0.32);
     border: 1px solid rgba(44, 232, 152, 1);
     box-shadow: 0px 0px 0px 2px rgba(44, 232, 152, 0.5);
-  
+
     .hy-button__border {
       background: linear-gradient(
         90deg,
@@ -177,27 +168,22 @@
         rgba(171, 255, 185, 0.4) 100%
       );
     }
-  
+
     .hy-button__inner {
       background: #004823;
       box-shadow:
         inset 0 0 5px 1px rgba(97, 255, 179, 0.5),
         inset 0 0 2px 0 rgba(159, 255, 209, 0.5);
     }
-  
+
     .hy-button__text {
       color: #fff;
     }
-  
+
     .hy-button__mask {
-      background: radial-gradient(
-        ellipse at center bottom,
-        #20e080 0%,
-        #109060 30%,
-        transparent 60%
-      );
+      background: radial-gradient(ellipse at center bottom, #20e080 0%, #109060 30%, transparent 60%);
     }
-  
+
     &:hover .hy-button__inner {
       box-shadow:
         inset 0 0 5px 1px rgba(97, 255, 179, 0.5),
@@ -205,7 +191,7 @@
         inset 0 0 5px 1px rgba(97, 255, 179, 0.5),
         inset 0 0 2px 0 rgba(159, 255, 209, 0.5);
     }
-  
+
     &:disabled .hy-button__border,
     &.is-disabled .hy-button__border {
       background: linear-gradient(
@@ -215,7 +201,7 @@
         rgba(171, 255, 185, 0.18) 100%
       );
     }
-  
+
     &:disabled .hy-button__inner,
     &.is-disabled .hy-button__inner {
       background: #1d3d2d;
@@ -223,18 +209,18 @@
         inset 0 0 4px 1px rgba(97, 255, 179, 0.2),
         inset 0 0 2px 0 rgba(159, 255, 209, 0.16);
     }
-  
+
     &:disabled .hy-button__text,
     &.is-disabled .hy-button__text {
       color: rgba(255, 255, 255, 0.68);
     }
   }
-  
+
   &.hy-button_delete {
     background: rgba(255, 77, 77, 0.32);
     border: 1px solid rgba(255, 77, 77, 1);
     box-shadow: 0px 0px 0px 2px rgba(255, 77, 77, 0.5);
-  
+
     .hy-button__border {
       background: linear-gradient(
         90deg,
@@ -243,27 +229,22 @@
         rgba(255, 77, 77, 0.4) 100%
       );
     }
-  
+
     .hy-button__inner {
       background: #4f0000;
       box-shadow:
         inset 0 0 5px 1px rgba(255, 97, 97, 0.5),
         inset 0 0 2px 0 rgba(255, 159, 159, 0.5);
     }
-  
+
     .hy-button__text {
       color: #fff;
     }
-  
+
     .hy-button__mask {
-      background: radial-gradient(
-        ellipse at center bottom,
-        #ff0000 0%,
-        #b41414 30%,
-        transparent 60%
-      );
+      background: radial-gradient(ellipse at center bottom, #ff0000 0%, #b41414 30%, transparent 60%);
     }
-  
+
     &:hover .hy-button__inner {
       box-shadow:
         inset 0 0 5px 1px rgba(255, 97, 97, 0.5),
@@ -271,7 +252,7 @@
         inset 0 0 5px 1px rgba(255, 97, 97, 0.5),
         inset 0 0 2px 0 rgba(255, 159, 159, 0.5);
     }
-  
+
     &:disabled .hy-button__border,
     &.is-disabled .hy-button__border {
       background: linear-gradient(
@@ -281,7 +262,7 @@
         rgba(255, 77, 77, 0.18) 100%
       );
     }
-  
+
     &:disabled .hy-button__inner,
     &.is-disabled .hy-button__inner {
       background: #4b0c0c;
@@ -289,7 +270,7 @@
         inset 0 0 4px 1px rgba(255, 97, 97, 0.2),
         inset 0 0 2px 0 rgba(255, 159, 159, 0.16);
     }
-  
+
     &:disabled .hy-button__text,
     &.is-disabled .hy-button__text {
       color: rgba(255, 255, 255, 0.68);
@@ -300,7 +281,7 @@
     background: rgba(45, 255, 211, 0.32);
     border: 1px solid rgba(45, 255, 211, 1);
     box-shadow: 0px 0px 0px 2px rgba(45, 255, 211, 0.5);
-  
+
     .hy-button__border {
       background: linear-gradient(
         90deg,
@@ -309,27 +290,22 @@
         rgba(45, 255, 211, 0.4) 100%
       );
     }
-  
+
     .hy-button__inner {
       background: #002932;
       box-shadow:
         inset 0 0 5px 1px rgba(45, 255, 211, 0.5),
         inset 0 0 2px 0 rgba(45, 255, 211, 0.5);
     }
-  
+
     .hy-button__text {
       color: #fff;
     }
-  
+
     .hy-button__mask {
-      background: radial-gradient(
-        ellipse at center bottom,
-        #2DFFD3 0%,
-        #189177 30%,
-        transparent 60%
-      );
+      background: radial-gradient(ellipse at center bottom, #2dffd3 0%, #189177 30%, transparent 60%);
     }
-  
+
     &:hover .hy-button__inner {
       box-shadow:
         inset 0 0 5px 1px rgba(45, 255, 211, 0.5),
@@ -337,7 +313,7 @@
         inset 0 0 5px 1px rgba(45, 255, 211, 0.5),
         inset 0 0 2px 0 rgba(45, 255, 211, 0.5);
     }
-  
+
     &:disabled .hy-button__border,
     &.is-disabled .hy-button__border {
       background: linear-gradient(
@@ -347,7 +323,7 @@
         rgba(45, 255, 211, 0.18) 100%
       );
     }
-  
+
     &:disabled .hy-button__inner,
     &.is-disabled .hy-button__inner {
       background: #4b0c0c;
@@ -355,7 +331,7 @@
         inset 0 0 4px 1px rgba(45, 255, 211, 0.2),
         inset 0 0 2px 0 rgba(24, 145, 119, 0.16);
     }
-  
+
     &:disabled .hy-button__text,
     &.is-disabled .hy-button__text {
       color: rgba(255, 255, 255, 0.68);
@@ -363,7 +339,6 @@
   }
 }
 
-
 .hy-button-text {
   --hy-button-text-color: rgba(var(--hy-auxiliary));
   --hy-button-font-size: 14px;
@@ -376,6 +351,7 @@
   background: none;
   border: none;
   cursor: pointer;
+  position: relative;
 
   &:not(.is-disabled) {
     &:active {

package/lib/components/hyCheckboxGroup/checkboxGroup.vue.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+require('../../utils/index.js');
+var is = require('../../utils/is.js');
+
+import "./style/checkboxGroup.scss";
+
+const __default__ = vue.defineComponent({
+  name: "HycheckboxGroup"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ vue.mergeModels({
+    options: {
+      type: Array,
+      default: () => []
+    },
+    props: {
+      type: Object,
+      default: () => ({})
+    },
+    size: {
+      type: String,
+      default: "default"
+    },
+    columnNum: {
+      type: Number,
+      default: 4
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  }, {
+    "modelValue": { type: Array, default: [] },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const checkboxProps = vue.computed(() => {
+      return {
+        value: "value",
+        label: "label",
+        disabled: "disabled",
+        ...props.props || {}
+      };
+    });
+    const selectedMap = vue.ref({});
+    async function onSelectedHandler(item) {
+      if (item[checkboxProps.value.disabled] || props.disabled) return;
+      const value = item[checkboxProps.value.value];
+      let list = is.isArray(modelValue.value) ? [...modelValue.value] : [];
+      if (selectedMap.value[value]) {
+        list = list.filter((v) => v !== value);
+      } else {
+        list.push(value);
+      }
+      modelValue.value = [...list];
+      emits("change", list);
+    }
+    vue.watch(
+      () => modelValue.value,
+      (list) => {
+        selectedMap.value = (list || []).reduce((obj, value) => {
+          obj[value] = true;
+          return obj;
+        }, {});
+      },
+      { deep: true, immediate: true }
+    );
+    __expose({});
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          class: "hy-checkbox-group",
+          style: vue.normalizeStyle({ "grid-template-columns": `repeat(${__props.columnNum}, minmax(0, 1fr))` })
+        },
+        [
+          (vue.openBlock(true), vue.createElementBlock(
+            vue.Fragment,
+            null,
+            vue.renderList(__props.options, (item, index) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: index,
+                class: vue.normalizeClass(["hy-checkbox-item", [
+                  __props.size === "large" ? "hy-checkbox-item-large" : __props.size === "small" ? "hy-checkbox-item-small" : "hy-checkbox-item-default",
+                  {
+                    "is-selected": selectedMap.value[item[checkboxProps.value.value]],
+                    "opacity-90 !cursor-not-allowed": item[checkboxProps.value.disabled] || __props.disabled
+                  }
+                ]]),
+                onClick: ($event) => onSelectedHandler(item)
+              }, [
+                vue.renderSlot(_ctx.$slots, "default", {
+                  item,
+                  index
+                }, () => [
+                  vue.createTextVNode(
+                    vue.toDisplayString(item[checkboxProps.value.label]),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ], 10, ["onClick"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        4
+        /* STYLE */
+      );
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/hyCheckboxGroup/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var checkboxGroup = require('./checkboxGroup.vue.js');
+require('../../utils/index.js');
+var handler = require('../../utils/handler.js');
+
+const HyCheckboxGroup = handler.withInstall(checkboxGroup.default);
+
+exports.HyCheckboxGroup = HyCheckboxGroup;
+exports.default = HyCheckboxGroup;

package/lib/components/hyCheckboxGroup/style/checkboxGroup.scss

@@ -0,0 +1,58 @@
+.hy-checkbox-group {
+  width: 100%;
+  display: grid;
+  flex-wrap: wrap;
+  row-gap: 4px;
+  column-gap: 4px;
+  font-size: 12px;
+  line-height: 1;
+  border: 1px solid rgba(var(--hy-border));
+  border-radius: 4px;
+  padding: 3px;
+  box-sizing: border-box;
+  .hy-checkbox-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(var(--hy-auxiliary));
+    border: 1px solid transparent;
+    border-radius: 2px;
+    background-color: rgba(var(--hy-background-2));
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    overflow: hidden;
+
+    &.hy-checkbox-item-large {
+      height: 40px;
+      font-size: 14px;
+    }
+    &.hy-checkbox-item-small {
+      height: 24px;
+      font-size: 12px;
+    }
+    &.hy-checkbox-item-default {
+      height: 28px;
+      font-size: 12px;
+    }
+    &.is-selected {
+      font-weight: bold;
+      color: rgba(var(--hy-theme));
+      border: 1px solid rgba(var(--hy-theme));
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 0;
+        height: 0;
+        border-top: 6px solid rgba(var(--hy-theme));
+        border-left: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+        text-align: center;
+      }
+    }
+  }
+}