hy-dispatch-ui-v3 0.2.66 → 0.2.68

package/es/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/es/components/hyCheckboxGroup/checkboxGroup.vue.mjs

@@ -0,0 +1,119 @@
+import { defineComponent, useModel, computed, ref, watch, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, normalizeClass, renderSlot, createTextVNode, toDisplayString, mergeModels } from 'vue';
+import '../../utils/index.mjs';
+import { isArray } from '../../utils/is.mjs';
+
+import "./style/checkboxGroup.scss";
+
+const __default__ = defineComponent({
+  name: "HycheckboxGroup"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ 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__ */ mergeModels(["change"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const modelValue = useModel(__props, "modelValue");
+    const checkboxProps = computed(() => {
+      return {
+        value: "value",
+        label: "label",
+        disabled: "disabled",
+        ...props.props || {}
+      };
+    });
+    const selectedMap = ref({});
+    async function onSelectedHandler(item) {
+      if (item[checkboxProps.value.disabled] || props.disabled) return;
+      const value = item[checkboxProps.value.value];
+      let list = 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);
+    }
+    watch(
+      () => modelValue.value,
+      (list) => {
+        selectedMap.value = (list || []).reduce((obj, value) => {
+          obj[value] = true;
+          return obj;
+        }, {});
+      },
+      { deep: true, immediate: true }
+    );
+    __expose({});
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: "hy-checkbox-group",
+          style: normalizeStyle({ "grid-template-columns": `repeat(${__props.columnNum}, minmax(0, 1fr))` })
+        },
+        [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(__props.options, (item, index) => {
+              return openBlock(), createElementBlock("div", {
+                key: index,
+                class: 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)
+              }, [
+                renderSlot(_ctx.$slots, "default", {
+                  item,
+                  index
+                }, () => [
+                  createTextVNode(
+                    toDisplayString(item[checkboxProps.value.label]),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ], 10, ["onClick"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        4
+        /* STYLE */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/hyCheckboxGroup/index.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './checkboxGroup.vue.mjs';
+import '../../utils/index.mjs';
+import { withInstall } from '../../utils/handler.mjs';
+
+const HyCheckboxGroup = withInstall(_sfc_main);
+
+export { HyCheckboxGroup, HyCheckboxGroup as default };

package/es/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;
+      }
+    }
+  }
+}

package/es/components/hyConfigProvider/configProvider.vue.mjs

@@ -1,33 +1,16 @@
-import { defineComponent, unref, computed, openBlock, createBlock, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, unref, computed, watch, openBlock, createBlock, mergeProps, withCtx, renderSlot } from 'vue';
 import { ElConfigProvider } from 'element-plus';
-import * as ElementLocale from 'element-plus/es/locales.mjs';
+import zh_CN from 'element-plus/es/locale/lang/zh-cn';
+import en_US from 'element-plus/es/locale/lang/en';
 import '../../hooks/index.mjs';
 import { provideGlobalConfig, useGlobalConfig } from '../../hooks/useGlobalConfig.mjs';
+import { setLang } from '../../hooks/useLocale.mjs';
 
 const __default__ = defineComponent({
   name: "HyConfigProvider"
 });
 const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   props: {
-    locale: {
-      type: String,
-      required: false,
-      default: "zhCn"
-    },
-    api: {
-      type: [Object, Function],
-      required: false
-    },
-    userAvatarMap: {
-      type: Map,
-      required: false,
-      default: () => /* @__PURE__ */ new Map()
-    },
-    permissionMap: {
-      type: Map,
-      required: false,
-      default: () => /* @__PURE__ */ new Map()
-    },
     size: {
       type: String,
       required: false,
@@ -65,22 +48,45 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       type: Object,
       required: false
     },
-    audioPlayer: {
+    /**
+     * @param {
+     *    locale: 'zh_CN' | 'en_US'
+     *    api: object | function
+     *    userAvatarMap: Map<string, string>,
+     *    permissionMap: Map<string, boolean>,
+     *    audioPlayer: {
+            type: 'default' | 'analyse',
+            speed: 0.5 | 1.0 | 1.5 | 2.0 | 3.0,
+            playRules: 1 | 2 | 3,
+            showPlayRules: boolean,
+            showPicture: boolean,
+            showDownloadFiles: boolean,
+            downloadFn: () => void,
+          }
+     *    videoPlayer: {
+            type: 'default' | 'analyse',
+            speed: 0.5 | 1.0 | 1.5 | 2.0 | 3.0,
+            playRules: 1 | 2 | 3,
+            showPlayRules: boolean,
+            showDownloadFiles: boolean,
+            showShrink: boolean,
+            vlcProtocol: 'hyvlc',
+            vlcAddress: string,
+            downloadFn: () => void,
+          }
+     *    ensureHyIcon: (icon: string) => void
+     *    tooltip: {
+            isAlways: boolean,
+            overLine: number,
+          }
+     *    mapConfig: object
+     *    baseMainStore: function
+     *    currentBus: object
+     * } hyConfig
+     */
+    hyConfig: {
       type: Object,
-      required: false
-    },
-    videoPlayer: {
-      type: Object,
-      required: false
-    },
-    ensureHyIcon: Function,
-    tooltip: {
-      type: Object,
-      required: false
-    },
-    mapConfig: {
-      type: Object,
-      required: false
+      default: () => ({})
     }
   },
   setup(__props) {
@@ -88,7 +94,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     const globalConfig = provideGlobalConfig(props, null, !unref(useGlobalConfig()));
     const config = computed(() => {
       const {
-        locale,
         size,
         zIndex,
         button,
@@ -100,8 +105,9 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         valueOnClear,
         table
       } = globalConfig.value;
+      const locale = globalConfig.value.locale || globalConfig.value.hyConfig && globalConfig.value.hyConfig.locale || "zh_CN";
       return {
-        locale: ElementLocale[locale] || ElementLocale["zhCn"],
+        locale: locale === "en_US" ? en_US : zh_CN,
         size,
         zIndex,
         button,
@@ -114,6 +120,13 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         table
       };
     });
+    watch(
+      () => props.hyConfig.locale,
+      (lang) => {
+        setLang(lang);
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(
         unref(ElConfigProvider),