@wfrog/vc-ui 1.3.0 → 1.4.0

package/dist/es/components/explorer-tools/index.css

@@ -0,0 +1,60 @@
+/* source: src/components/explorer-tools/components/column-setter.vue,src/components/explorer-tools/explorer-tools.vue */
+.el-radio-button{--el-radio-button-checked-bg-color:var(--el-color-primary);--el-radio-button-checked-text-color:var(--el-color-white);--el-radio-button-checked-border-color:var(--el-color-primary);--el-radio-button-disabled-checked-fill:var(--el-border-color-extra-light);display:inline-block;outline:none;position:relative}.el-radio-button__inner{-webkit-appearance:none;background:var(--el-button-bg-color,var(--el-fill-color-blank));border-radius:0;box-sizing:border-box;color:var(--el-button-text-color,var(--el-text-color-regular));cursor:pointer;display:inline-block;font-size:var(--el-font-size-base);font-weight:var(--el-button-font-weight,var(--el-font-weight-primary));line-height:1;margin:0;outline:var(--el-border);padding:8px 15px;position:relative;text-align:center;transition:var(--el-transition-all);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.el-radio-button__inner.is-round{padding:8px 15px}.el-radio-button__inner:hover{color:var(--el-color-primary)}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button:first-child .el-radio-button__inner{border-radius:var(--el-border-radius-base) 0 0 var(--el-border-radius-base);box-shadow:none!important}.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner{background-color:var(--el-radio-button-checked-bg-color,var(--el-color-primary));border-color:var(--el-radio-button-checked-border-color,var(--el-color-primary));box-shadow:-1px 0 0 0 var(--el-radio-button-checked-border-color,var(--el-color-primary));color:var(--el-radio-button-checked-text-color,var(--el-color-white))}.el-radio-button__original-radio{opacity:0;outline:none;position:absolute;z-index:-1}.el-radio-button__original-radio:focus-visible+.el-radio-button__inner{border-left:var(--el-border);border-left-color:var(--el-radio-button-checked-border-color,var(--el-color-primary));border-radius:var(--el-border-radius-base);box-shadow:none;outline:2px solid var(--el-radio-button-checked-border-color);outline-offset:1px;z-index:2}.el-radio-button__original-radio:disabled+.el-radio-button__inner{background-color:var(--el-button-disabled-bg-color,var(--el-fill-color-blank));background-image:none;border-color:var(--el-button-disabled-border-color,var(--el-border-color-light));box-shadow:none;color:var(--el-disabled-text-color);cursor:not-allowed}.el-radio-button__original-radio:disabled:checked+.el-radio-button__inner{background-color:var(--el-radio-button-disabled-checked-fill)}.el-radio-button:last-child .el-radio-button__inner{border-radius:0 var(--el-border-radius-base) var(--el-border-radius-base) 0}.el-radio-button:first-child:last-child .el-radio-button__inner{border-radius:var(--el-border-radius-base)}.el-radio-button--large .el-radio-button__inner{border-radius:0;font-size:var(--el-font-size-base);padding:12px 19px}.el-radio-button--large .el-radio-button__inner.is-round{padding:12px 19px}.el-radio-button--small .el-radio-button__inner{border-radius:0;font-size:12px;padding:5px 11px}.el-radio-button--small .el-radio-button__inner.is-round{padding:5px 11px}.el-segmented--vertical{flex-direction:column}.el-segmented--vertical .el-segmented__item{padding:11px}.el-segmented{--el-segmented-color:var(--el-text-color-regular);--el-segmented-bg-color:var(--el-fill-color-light);--el-segmented-padding:2px;--el-segmented-item-selected-color:var(--el-color-white);--el-segmented-item-selected-bg-color:var(--el-color-primary);--el-segmented-item-selected-disabled-bg-color:var(--el-color-primary-light-5);--el-segmented-item-hover-color:var(--el-text-color-primary);--el-segmented-item-hover-bg-color:var(--el-fill-color-dark);--el-segmented-item-active-bg-color:var(--el-fill-color-darker);--el-segmented-item-disabled-color:var(--el-text-color-placeholder);align-items:stretch;background:var(--el-segmented-bg-color);border-radius:var(--el-border-radius-base);box-sizing:border-box;color:var(--el-segmented-color);display:inline-flex;font-size:14px;min-height:32px;padding:var(--el-segmented-padding)}.el-segmented__group{align-items:stretch;display:flex;position:relative;width:100%}.el-segmented__item-selected{background:var(--el-segmented-item-selected-bg-color);border-radius:calc(var(--el-border-radius-base) - 2px);height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:all .3s;width:10px}.el-segmented__item-selected.is-disabled{background:var(--el-segmented-item-selected-disabled-bg-color)}.el-segmented__item-selected.is-focus-visible:before{border-radius:inherit;bottom:0;content:"";left:0;outline:2px solid var(--el-segmented-item-selected-bg-color);outline-offset:1px;position:absolute;right:0;top:0}.el-segmented__item{align-items:center;border-radius:calc(var(--el-border-radius-base) - 2px);cursor:pointer;display:flex;flex:1;padding:0 11px}.el-segmented__item:not(.is-disabled):not(.is-selected):hover{background:var(--el-segmented-item-hover-bg-color);color:var(--el-segmented-item-hover-color)}.el-segmented__item:not(.is-disabled):not(.is-selected):active{background:var(--el-segmented-item-active-bg-color)}.el-segmented__item.is-selected,.el-segmented__item.is-selected.is-disabled{color:var(--el-segmented-item-selected-color)}.el-segmented__item.is-disabled{color:var(--el-segmented-item-disabled-color);cursor:not-allowed}.el-segmented__item-input{height:0;margin:0;opacity:0;pointer-events:none;position:absolute;width:0}.el-segmented__item-label{flex:1;line-height:normal;overflow:hidden;text-align:center;text-overflow:ellipsis;transition:color .3s;white-space:nowrap;z-index:1}.el-segmented.is-block{display:flex}.el-segmented.is-block .el-segmented__item{min-width:0}.el-segmented--large{border-radius:var(--el-border-radius-base);font-size:16px;min-height:40px}.el-segmented--large .el-segmented__item-selected{border-radius:calc(var(--el-border-radius-base) - 2px)}.el-segmented--large .el-segmented--vertical .el-segmented__item{padding:11px}.el-segmented--large .el-segmented__item{border-radius:calc(var(--el-border-radius-base) - 2px);padding:0 11px}.el-segmented--small{border-radius:calc(var(--el-border-radius-base) - 1px);font-size:14px;min-height:24px}.el-segmented--small .el-segmented__item-selected{border-radius:calc(var(--el-border-radius-base) - 3px)}.el-segmented--small .el-segmented--vertical .el-segmented__item{padding:7px}.el-segmented--small .el-segmented__item{border-radius:calc(var(--el-border-radius-base) - 3px);padding:0 7px}._header_971vy_1 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+._mode-wrapper_971vy_7 {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+._segmented_971vy_13 .el-segmented__item-label {
+  line-height: 1;
+}
+._reset_971vy_17 {
+  height: 28px;
+}
+._divider_971vy_21 {
+  margin: 8px 0;
+}._explorer-tools_1hb33_1 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+  flex-wrap: wrap;
+  row-gap: 8px;
+}
+._buttons_1hb33_10 {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+._buttons_1hb33_10 button {
+  margin-left: 0 !important;
+}
+._tools_1hb33_19 {
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+}
+._tools_1hb33_19 > button {
+  padding: 4px;
+  font-size: 18px;
+  margin-left: 0 !important;
+}
+._layout_1hb33_30 .el-radio-button__inner {
+  padding: 6px 8px;
+  font-size: 18px;
+}
+._fullscreen_1hb33_35 {
+  position: fixed !important;
+  background-color: var(--el-bg-color) !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  z-index: 9999 !important;
+}

package/dist/es/components/explorer-tools/index.d.ts

@@ -0,0 +1,4 @@
+import { SFCWithInstall } from '../../utils/typescript';
+import { default as Component } from './explorer-tools.vue';
+export declare const VcExplorerTools: SFCWithInstall<typeof Component>;
+export default VcExplorerTools;

package/dist/es/components/explorer-tools/index.mjs

@@ -0,0 +1,6 @@
+import { w as withInstall } from '../../chunk/ClZGuAIb.mjs';
+import { C as Component } from './explorer-tools.mjs';
+
+const VcExplorerTools = withInstall(Component);
+
+export { VcExplorerTools, VcExplorerTools as default };

package/dist/es/components/explorer-tree/explorer-tree.d.ts

@@ -0,0 +1,22 @@
+import { TreeComponentProps } from 'element-plus';
+import { default as Node } from 'element-plus/lib/components/tree/src/model/node';
+import { ComponentInternalInstance } from 'vue';
+import { IButtonProps } from '../button/button';
+export interface IExplorerTreeProps {
+    data?: TreeComponentProps['data'];
+    actions?: ('create' | 'modify' | 'remove')[];
+    treeProps?: TreeComponentProps;
+    emptyText?: string;
+    defaultExpandAll?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    confirmParams?: (node: Node) => IButtonProps['confirm'];
+    filterMethod?: TreeComponentProps['filterNodeMethod'];
+    highlightCurrent?: boolean;
+}
+export interface IExplorerTreeEmits {
+    (e: 'nodeClick', value: string | number, node: Node, instance: ComponentInternalInstance | null, event: MouseEvent): void;
+    (e: 'create', value: string | number, node: Node): void;
+    (e: 'modify', value: string | number, node: Node): void;
+    (e: 'remove', value: string | number, node: Node): void;
+}

package/dist/es/components/explorer-tree/explorer-tree.mjs

@@ -0,0 +1,174 @@
+import './index.css'
+import '../../chunk/By7FMB3I.mjs';
+import { E as ElTree } from '../../chunk/DYKOYbzT.mjs';
+import '../../chunk/DSt2uDNE.mjs';
+import '../../chunk/DTbnchOm.mjs';
+import { defineComponent, useTemplateRef, computed, watch, createBlock, openBlock, withCtx, withDirectives, createElementBlock, createCommentVNode, createVNode, mergeProps, unref, createElementVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, vShow } from 'vue';
+import { Loading } from '@element-plus/icons-vue';
+import { C as Component$3 } from '../button/button.mjs';
+import { i as injectExplorerPanelState } from '../explorer-panel/explorer-panel2.mjs';
+import { C as Component$2 } from '../iconify-icon/iconify-icon.mjs';
+import { C as Component$1 } from '../scrollbar/scrollbar.mjs';
+import { E as ElIcon } from '../../chunk/D1MHFKtN.mjs';
+import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "explorer-tree",
+  props: {
+    data: {},
+    actions: { default: () => [] },
+    treeProps: {},
+    emptyText: { default: "没有数据" },
+    defaultExpandAll: { type: Boolean, default: true },
+    loading: { type: Boolean },
+    loadingText: { default: "数据加载中..." },
+    confirmParams: { type: Function, default: (node) => {
+      return { msg: `确定要删除 ${node.data.label} 吗？` };
+    } },
+    filterMethod: {},
+    highlightCurrent: { type: Boolean, default: true }
+  },
+  emits: ["nodeClick", "create", "modify", "remove"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const treeRef = useTemplateRef("treeRef");
+    const { filterKeyword } = injectExplorerPanelState();
+    const treeProps = computed(() => ({
+      data: props.data,
+      emptyText: props.emptyText,
+      defaultExpandAll: props.defaultExpandAll,
+      expandOnClickNode: false,
+      highlightCurrent: props.highlightCurrent,
+      filterNodeMethod: props.filterMethod,
+      nodeKey: "value",
+      ...props.treeProps
+    }));
+    function filterNode(value, data) {
+      if (!value || !filterKeyword.value) {
+        return true;
+      }
+      return data.label?.toLowerCase().includes(value.toLowerCase()) ?? false;
+    }
+    function handleNodeClick(data, node, instance, event) {
+      emits("nodeClick", data.value, node, instance, event);
+    }
+    watch(filterKeyword, (value) => {
+      treeRef.value?.filter(value);
+    });
+    return (_ctx, _cache) => {
+      const _component_ElTree = ElTree;
+      const _component_ElIcon = ElIcon;
+      return openBlock(), createBlock(Component$1, { always: "" }, {
+        default: withCtx(() => [
+          withDirectives(createVNode(_component_ElTree, mergeProps({
+            ref_key: "treeRef",
+            ref: treeRef
+          }, { ..._ctx.$attrs, ...unref(treeProps) }, {
+            class: _ctx.$style.tree,
+            "filter-node-method": filterNode,
+            onNodeClick: handleNodeClick
+          }), {
+            default: withCtx(({ node }) => [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style.node)
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.$style.label)
+                }, [
+                  renderSlot(_ctx.$slots, "default", {
+                    data: node.data,
+                    index: node.index
+                  }, () => [
+                    node.data.icon ? (openBlock(), createBlock(Component$2, {
+                      key: 0,
+                      name: node.data.icon,
+                      class: normalizeClass(_ctx.$style.icon)
+                    }, null, 8, ["name", "class"])) : createCommentVNode("", true),
+                    createTextVNode(toDisplayString(node.data.label), 1)
+                  ])
+                ], 2),
+                __props.actions.length ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass(["vc-actions", [_ctx.$style.actions]])
+                }, [
+                  __props.actions.includes("create") ? (openBlock(), createBlock(Component$3, {
+                    key: 0,
+                    title: "新增",
+                    type: "success",
+                    link: "",
+                    icon: { type: "el", name: "Plus" },
+                    stop: "",
+                    onClick: ($event) => emits("create", node.data.value, node)
+                  }, null, 8, ["onClick"])) : createCommentVNode("", true),
+                  __props.actions.includes("modify") ? (openBlock(), createBlock(Component$3, {
+                    key: 1,
+                    title: "修改",
+                    type: "primary",
+                    link: "",
+                    icon: { type: "el", name: "Edit" },
+                    stop: "",
+                    onClick: ($event) => emits("modify", node.data.value, node)
+                  }, null, 8, ["onClick"])) : createCommentVNode("", true),
+                  __props.actions.includes("remove") ? (openBlock(), createBlock(Component$3, {
+                    key: 2,
+                    confirm: __props.confirmParams(node),
+                    title: "删除",
+                    type: "danger",
+                    link: "",
+                    icon: { type: "el", name: "Delete" },
+                    stop: "",
+                    onClick: ($event) => emits("remove", node.data.value, node)
+                  }, null, 8, ["confirm", "onClick"])) : createCommentVNode("", true)
+                ], 2)) : createCommentVNode("", true)
+              ], 2)
+            ]),
+            _: 3
+          }, 16, ["class"]), [
+            [vShow, !__props.loading]
+          ]),
+          __props.loading ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.loading)
+          }, [
+            createVNode(_component_ElIcon, { class: "is-loading" }, {
+              default: withCtx(() => [
+                createVNode(unref(Loading))
+              ]),
+              _: 1
+            }),
+            createTextVNode(toDisplayString(__props.loadingText), 1)
+          ], 2)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const tree = "_tree_16vc1_1";
+const node = "_node_16vc1_24";
+const label = "_label_16vc1_34";
+const icon = "_icon_16vc1_40";
+const actions = "_actions_16vc1_44";
+const loading = "_loading_16vc1_53";
+const style0 = {
+	tree: tree,
+	node: node,
+	label: label,
+	icon: icon,
+	actions: actions,
+	loading: loading
+};
+
+const cssModules = {
+  "$style": style0
+};
+const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+
+const __vite_glob_0_28 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: Component
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Component as C, __vite_glob_0_28 as _ };