cnhis-design-vue 3.1.13-beta.2 → 3.1.13-beta.5

package/es/packages/shortcut-setter/src/ShortcutSetterItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,125 @@
+import { defineComponent, computed, ref, openBlock, createElementBlock, createVNode, unref, withModifiers, createElementVNode, withCtx, createTextVNode, toDisplayString } from 'vue';
+import { debounce, isString } from 'lodash-es';
+import { useMessage, NInput, NButton, NPopconfirm } from 'naive-ui';
+import { useShortcuts } from '../../../packages/shortcut-provider';
+import { transformKey2DisplaySignature, getDisplaySignature } from '../../../packages/shortcut-provider/src/utils';
+import { ShortcutInputState } from '../../../packages/shortcut-setter/constant';
+
+const _hoisted_1 = { class: "shortcut-setter-item__wrapper" };
+const _hoisted_2 = { class: "shortcut-setter-item__operation" };
+const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u91CD\u7F6E");
+const _hoisted_4 = /* @__PURE__ */ createTextVNode(" \u786E\u8BA4\u91CD\u7F6E\u5FEB\u6377\u952E\u5417 ");
+var script = /* @__PURE__ */ defineComponent({
+  __name: "ShortcutSetterItem",
+  props: {
+    glob: { type: Boolean, required: false },
+    value: { type: null, required: true },
+    onChange: { type: null, required: true },
+    onFocus: { type: null, required: true },
+    fieldItem: { type: null, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const { query, update, updateState } = useShortcuts(props.glob);
+    const shortcutItem = computed(() => {
+      return query(props.fieldItem.val_key);
+    });
+    const disabledState = computed(() => {
+      var _a;
+      return !!((_a = shortcutItem.value) == null ? void 0 : _a.disabled);
+    });
+    const currentSetShortcut = computed(() => {
+      var _a, _b;
+      return transformKey2DisplaySignature((_b = (_a = shortcutItem.value) == null ? void 0 : _a.currentKeySignature) != null ? _b : "");
+    });
+    const state = ref(ShortcutInputState.STATIC);
+    const currentEditShortcut = ref("");
+    const showContent = computed(() => {
+      return state.value === ShortcutInputState.STATIC ? currentSetShortcut.value : currentEditShortcut.value;
+    });
+    function onInputFocus() {
+      state.value = ShortcutInputState.EDIT;
+    }
+    const inputRef = ref();
+    function onInputBlur() {
+      var _a;
+      state.value = ShortcutInputState.STATIC;
+      currentEditShortcut.value = "";
+      (_a = inputRef.value) == null ? void 0 : _a.blur();
+    }
+    const onInputKeyDown = debounce((event) => {
+      currentEditShortcut.value = getDisplaySignature(event);
+    }, 200, { leading: true, trailing: false });
+    const $message = useMessage();
+    function updateDecorator(fn, afterUpdate) {
+      try {
+        fn();
+      } catch (e) {
+        isString(e) && $message.error(e);
+        currentEditShortcut.value = "";
+      } finally {
+        afterUpdate == null ? void 0 : afterUpdate();
+      }
+    }
+    const onInputKeyUp = debounce((event) => {
+      updateDecorator(() => update(props.fieldItem.val_key, event), () => event.target.blur());
+    }, 200, { leading: true, trailing: false });
+    function onStop() {
+      if (!shortcutItem.value)
+        return;
+      updateDecorator(() => updateState(props.fieldItem.val_key, !disabledState.value), onInputBlur);
+    }
+    function onReset() {
+      if (!shortcutItem.value)
+        return;
+      updateDecorator(() => update(props.fieldItem.val_key, shortcutItem.value.defaultShortcut), onInputBlur);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", _hoisted_1, [
+        createVNode(unref(NInput), {
+          ref_key: "inputRef",
+          ref: inputRef,
+          disabled: unref(disabledState),
+          value: unref(showContent),
+          onFocus: onInputFocus,
+          onBlur: onInputBlur,
+          onKeydown: withModifiers(unref(onInputKeyDown), ["prevent", "stop"]),
+          onKeyup: withModifiers(unref(onInputKeyUp), ["prevent", "stop"])
+        }, null, 8, ["disabled", "value", "onKeydown", "onKeyup"]),
+        createElementVNode("section", _hoisted_2, [
+          createVNode(unref(NButton), {
+            text: "",
+            onClick: onStop,
+            type: unref(disabledState) ? "info" : "warning"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(disabledState) ? "\u542F\u7528" : "\u7981\u7528"), 1)
+            ]),
+            _: 1
+          }, 8, ["type"]),
+          createVNode(unref(NPopconfirm), { onPositiveClick: onReset }, {
+            trigger: withCtx(() => [
+              createVNode(unref(NButton), {
+                disabled: unref(disabledState),
+                text: "",
+                onClick: onInputBlur,
+                type: "info"
+              }, {
+                default: withCtx(() => [
+                  _hoisted_3
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            default: withCtx(() => [
+              _hoisted_4
+            ]),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+
+export { script as default };

package/es/packages/shortcut-setter/style/index.css

@@ -0,0 +1,8 @@
+.shortcut-setter-item__wrapper {
+  display: flex;
+}
+.shortcut-setter-item__operation {
+  margin-left: 12px;
+  display: flex;
+  gap: 12px;
+}

package/es/src/types/index.d.ts

@@ -7,3 +7,4 @@ export declare type Func<T extends Array<any> = any[], P = any> = (...args: T) =
 export declare type WithNull<T> = T | null;
 export declare type WithUndefined<T> = T | undefined;
 export declare type ArrayAble<T> = T | T[];
+export declare type MapValue<T> = T extends Map<any, infer P> ? P : any;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "cnhis-design-vue",
 	"private": false,
-	"version": "3.1.13-beta.2",
+	"version": "3.1.13-beta.5",
 	"license": "ISC",
 	"module": "es/packages/index.js",
 	"main": "es/packages/index.js",

package/test.ts

@@ -1,326 +0,0 @@
-import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = {
-  class: "markdown"
-};
-
-const _hoisted_2 = /*#__PURE__*/_createElementVNode("p", null, null, -1
-  /* HOISTED */
-);
-
-const _hoisted_3 = /*#__PURE__*/_createElementVNode("h1", null, "信息展示头(CInfoHeader)", -1
-  /* HOISTED */
-);
-
-const _hoisted_4 = ["innerHTML"];
-
-const _hoisted_5 = /*#__PURE__*/_createElementVNode("h2", null, "Props", -1
-  /* HOISTED */
-);
-
-const _hoisted_6 = /*#__PURE__*/_createElementVNode("h2", null, "Emits", -1
-  /* HOISTED */
-);
-
-const _hoisted_7 = /*#__PURE__*/_createElementVNode("h2", null, "Slots", -1
-  /* HOISTED */
-);
-
-const _hoisted_8 = /*#__PURE__*/_createElementVNode("h2", null, "Expose", -1
-  /* HOISTED */
-);
-
-export function render(_ctx, _cache) {
-  const _component_Component0 = _resolveComponent("Component0");
-
-  const _component_demo_collapse = _resolveComponent("demo-collapse");
-
-  const _component_n_data_table = _resolveComponent("n-data-table");
-
-  const _component_anchor_list = _resolveComponent("anchor-list");
-
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createVNode(_component_anchor_list, null, {
-    default: _withCtx(() => [_hoisted_2, _hoisted_3, _createElementVNode("p", null, [_createVNode(_component_demo_collapse, null, {
-      source: _withCtx(() => [_createElementVNode("pre", null, [_createElementVNode("code", {
-          class: "hljs",
-          innerHTML: _ctx.code__Component0
-        }, null, 8
-        /* PROPS */
-        , _hoisted_4)])]),
-      default: _withCtx(() => [_createVNode(_component_Component0)]),
-      _: 1
-      /* STABLE */
-
-    })]), _hoisted_5, _createVNode(_component_n_data_table, {
-        striped: "",
-        size: "small",
-        data: [{
-          [`name`]: `compact`,
-          [`type`]: `Boolean`,
-          [`defaultValue`]: `-`,
-          [`description`]: ` 是否为紧凑模式`
-        }, {
-          [`name`]: `separator`,
-          [`type`]: `String`,
-          [`defaultValue`]: `':'`,
-          [`description`]: ` info区域分隔符`
-        }, {
-          [`name`]: `patientInfo`,
-          [`type`]: `Object`,
-          [`defaultValue`]: `() => ({})`,
-          [`description`]: ` 患者信息`
-        }, {
-          [`name`]: `infoList`,
-          [`type`]: `Array`,
-          [`defaultValue`]: `-`,
-          [`description`]: ` info区数据源`
-        }, {
-          [`name`]: `labelField`,
-          [`type`]: `String`,
-          [`defaultValue`]: `'label'`,
-          [`description`]: ` info区数据源label字段`
-        }, {
-          [`name`]: `valueField`,
-          [`type`]: `String`,
-          [`defaultValue`]: `'value'`,
-          [`description`]: ` info区数据源value字段`
-        }, {
-          [`name`]: `minColumnWidth`,
-          [`type`]: `[String, Number]`,
-          [`defaultValue`]: `240`,
-          [`description`]: ` info区列最小宽度`
-        }, {
-          [`name`]: `rowHeight`,
-          [`type`]: `[String, Number]`,
-          [`defaultValue`]: `32`,
-          [`description`]: ` info区行高`
-        }],
-        columns: [{
-          [`title`]: `属性`,
-          [`key`]: `name`
-        }, {
-          [`title`]: `类型`,
-          [`key`]: `type`
-        }, {
-          [`title`]: `默认值`,
-          [`key`]: `defaultValue`
-        }, {
-          [`title`]: `描述`,
-          [`key`]: `description`
-        }]
-      }, null, 8
-      /* PROPS */
-      , ["data"]), _hoisted_6, _createVNode(_component_n_data_table, {
-      striped: "",
-      size: "small",
-      data: [{
-        [`name`]: `openPatientInfo`,
-        [`description`]: ` 点击患者信息图标回调`
-      }, {
-        [`name`]: `fieldSet`,
-        [`description`]: ` 点击修改field图标回调`
-      }, {
-        [`name`]: `update:compact`,
-        [`description`]: ` 点击模式切换按钮回调`
-      }],
-      columns: [{
-        [`title`]: `事件名`,
-        [`key`]: `name`
-      }, {
-        [`title`]: `描述`,
-        [`key`]: `description`
-      }]
-    }), _hoisted_7, _createVNode(_component_n_data_table, {
-      striped: "",
-      size: "small",
-      data: [{
-        [`name`]: `operation`,
-        [`description`]: `-`
-      }, {
-        [`name`]: `patientModule`,
-        [`description`]: `-`
-      }, {
-        [`name`]: `avatar`,
-        [`description`]: `-`
-      }, {
-        [`name`]: `avatarInfo`,
-        [`description`]: `-`
-      }, {
-        [`name`]: `info`,
-        [`description`]: `-`
-      }, {
-        [`name`]: `setting`,
-        [`description`]: `-`
-      }, {
-        [`name`]: `patientInfoIcon`,
-        [`description`]: `-`
-      }, {
-        [`name`]: `fieldSetIcon`,
-        [`description`]: `-`
-      }, {
-        [`name`]: `compactIcon`,
-        [`description`]: `-`
-      }],
-      columns: [{
-        [`title`]: `属性`,
-        [`key`]: `name`
-      }, {
-        [`title`]: `描述`,
-        [`key`]: `description`
-      }]
-    }), _hoisted_8, _createVNode(_component_n_data_table, {
-      striped: "",
-      size: "small",
-      data: [{
-        [`name`]: `update`,
-        [`params`]: `-`,
-        [`description`]: ` 手动触发info区域宽度重新计算`
-      }],
-      columns: [{
-        [`title`]: `属性`,
-        [`key`]: `name`
-      }, {
-        [`title`]: `参数`,
-        [`key`]: `params`
-      }, {
-        [`title`]: `描述`,
-        [`key`]: `description`
-      }]
-    })]),
-    _: 1
-    /* STABLE */
-
-  })]);
-}
-import { defineComponent } from 'vue';
-import Component0 from "examples/views/6-info-header/demo/index.demo.vue";
-import hljs from 'highlight.js';
-import { NDataTable } from 'naive-ui';
-
-const __script = defineComponent({
-  components: {
-    Component0,
-    NDataTable
-  },
-
-  setup() {
-    const code__Component0 = hljs.highlight(`<!-- 整个组件从左到右分为 操作区 患者信息区 基本信息区 设置区 4个区域 -->
-<template>
-  <!-- compact 表示组件是否为收缩状态 -->
-  <!-- patientInfo 表示患者基本信息 -->
-  <!-- infoList
-  1.表示基本信息区描述列表数据, 如果需要在描述列表的内容中使用插槽, 那么在单项中传入slot字段即可
-  2.同时, 组件会对label中包含 电话｜身份证 的项进行特殊处理(点击眼睛图标隐藏)
-  3如果需要自己实现info区的内容, 使用info插槽即可
-  -->
-  <c-info-header
-    v-model:compact="compact"
-    :patientInfo="patientInfo"
-    :infoList="infoList"
-    min-column-width="180"
-    @open-patient-info="onOpenPatientInfo"
-    @field-set="onFieldSet"
-  >
-    <!-- 操作区插槽, 需要全量使用插槽实现   -->
-    <template #operation>
-      <div>operation1</div>
-      <!-- 为组件中的元素添加 compact-hidden 属性后, 该元素将自动在紧凑模式下隐藏-->
-      <div compact-hidden>operation2</div>
-    </template>
-
-    <!--  患者信息区的头像插槽 -->
-    <template #avatar>avatar</template>
-
-    <!-- 患者信息区的底部描述插槽-->
-    <template #avatarInfo>
-      <div compact-hidden>avatarInfo</div>
-    </template>
-
-    <!-- 患者信息插槽, 需要自己实现整个患者信息区时使用, 一般情况不需要   -->
-    <template #patientModule></template>
-
-    <!-- 基本信息区插槽, 一般情况不需要   -->
-    <template #info></template>
-
-    <!--  设置区插槽, 一般情况不需要  -->
-    <!-- <template #setting></template>-->
-
-    <!--  信息区医师插槽,插槽名称由infoList中的配置指定,一般情况不需要  -->
-    <template #doctor="{item,style,width}">
-      <div :style="{color:'red',width:width+'px',maxWidth:width+'px',...style}">{{ item.value || '-' }}</div>
-    </template>
-  </c-info-header>
-</template>
-
-&#60;script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  setup() {
-    import { ref, h } from 'vue';
-
-    const compact = ref(false);
-
-    const patientInfo = ref({
-      name: '患者',
-      sex: '男',
-      age: '12',
-      ageUnit: '月',
-      tagList: [{ type: 'warning', content: '自费' }]
-    });
-
-    const infoList = ref([
-      { "label": "电话", "value": "15625635269" },
-      { "label": "门诊号", "value": "MZ103570", /* 指定内容区样式 */contentStyle: { color: 'red' } },
-      { "label": "就诊号", "value": "R0000200658" },
-      { "label": "医师", "value": "王烁", /* 指定该项的内容使用doctor插槽 */ slot: 'doctor' },
-      { "label": "所在科室", "value": "社康(全科)" },
-      {
-        "label": "过敏史", "value": undefined,
-        /**
-         *
-         * @param {Object} item --当前item
-         * @param {number} width --组件计算所得的当前项的最大宽度,使用插槽后,需要自行实现ellipsis逻辑,否则宽度过长时会导致错位
-         * @returns {VNode}
-         */
-        slot({ item, width }) {
-          return h('div', { style: { color: 'red', width: width + 'px', maxWidth: width + 'px' } }, item.value);
-        }
-      },
-      { "label": "血压", "value": null },
-      { "label": "基本余额", "value": null },
-      { "label": "积分", "value": null }
-    ]);
-
-    function onOpenPatientInfo() {
-      // ...
-    }
-
-    function onFieldSet() {
-      // ...
-    }
-
-    return { compact, onFieldSet, onOpenPatientInfo, patientInfo, infoList };
-  }
-});
-&#60;/script>
-`.replace(/&#60;/g, '<'), {
-      language: 'xml'
-    }).value;
-    return {
-      code__Component0
-    };
-  }
-
-});
-
-__script.render = render;
-export default __script;
-__script.__hmrId = "75d252c3";
-
-__VUE_HMR_RUNTIME__.createRecord("75d252c3", __script);
-
-import.meta.hot.accept(({
-                          default: __default
-                        }) => {
-  __VUE_HMR_RUNTIME__.reload("75d252c3", __default);
-});