@gct-paas/design 0.1.4-dev.7 → 0.1.4-dev.8

package/es/components/design-icon-button/design-icon-button.css

@@ -0,0 +1,101 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-design-icon-button {
+  --gct-design-icon-button-size: 30px;
+  --gct-design-icon-button-color: var(--gct-color-text-5);
+  --gct-design-icon-button-bg-color: transparent;
+  --gct-design-icon-button-hover-color: var(--gct-color-primary);
+  --gct-design-icon-button-hover-bg-color: color-mix(in srgb, var(--gct-color-primary) 8%, transparent);
+  --gct-design-icon-button-active-color: var(--gct-color-primary);
+  --gct-design-icon-button-active-bg-color: color-mix(in srgb, var(--gct-color-primary) 8%, transparent);
+  --gct-design-icon-button-disabled-color: #d1d2d3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: var(--gct-design-icon-button-color);
+  background-color: var(--gct-design-icon-button-bg-color);
+  width: var(--gct-design-icon-button-size);
+  height: var(--gct-design-icon-button-size);
+  border-radius: var(--gct-border-radius-s);
+  cursor: pointer;
+}
+.gct-design-icon-button:hover {
+  color: var(--gct-design-icon-button-hover-color) !important;
+  background-color: var(--gct-design-icon-button-hover-bg-color) !important;
+}
+.gct-design-icon-button.is-active {
+  color: var(--gct-design-icon-button-active-color);
+  background-color: var(--gct-design-icon-button-active-bg-color);
+}
+
+.gct-design-icon-button.is-disabled {
+  color: var(--gct-design-icon-button-disabled-color) !important;
+  background-color: transparent !important;
+  cursor: not-allowed;
+}
+.gct-design-icon-button.is-disabled .iconfont {
+  color: var(--gct-design-icon-button-disabled-color) !important;
+}

package/es/components/design-icon-button/design-icon-button.d.ts

@@ -0,0 +1,106 @@
+import { PropType, VNode } from 'vue';
+export declare const DesignIconButton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+    };
+    defaultActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: PropType<VNode>;
+        required: true;
+    };
+    activeIcon: {
+        type: PropType<VNode>;
+    };
+    tip: {
+        type: StringConstructor;
+        required: true;
+    };
+    activeTip: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: StringConstructor;
+    };
+    color: {
+        type: StringConstructor;
+    };
+    bgColor: {
+        type: StringConstructor;
+    };
+    hoverColor: {
+        type: StringConstructor;
+    };
+    hoverBgColor: {
+        type: StringConstructor;
+    };
+    activeColor: {
+        type: StringConstructor;
+    };
+    activeBgColor: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "click" | "update:active" | "activate" | "deactivate")[], "change" | "click" | "update:active" | "activate" | "deactivate", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+    };
+    defaultActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: PropType<VNode>;
+        required: true;
+    };
+    activeIcon: {
+        type: PropType<VNode>;
+    };
+    tip: {
+        type: StringConstructor;
+        required: true;
+    };
+    activeTip: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: StringConstructor;
+    };
+    color: {
+        type: StringConstructor;
+    };
+    bgColor: {
+        type: StringConstructor;
+    };
+    hoverColor: {
+        type: StringConstructor;
+    };
+    hoverBgColor: {
+        type: StringConstructor;
+    };
+    activeColor: {
+        type: StringConstructor;
+    };
+    activeBgColor: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+    "onUpdate:active"?: ((...args: any[]) => any) | undefined;
+    onActivate?: ((...args: any[]) => any) | undefined;
+    onDeactivate?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    active: boolean;
+    defaultActive: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design-icon-button/design-icon-button.mjs

@@ -0,0 +1,151 @@
+import { defineComponent, ref, computed, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './design-icon-button.css';/* empty css                         */
+
+const DesignIconButton = /* @__PURE__ */ defineComponent({
+  name: 'DesignIconButton',
+  props: {
+    // 是否激活，支持双向绑定。也可以不给予，由内部自行管理状态
+    active: {
+      type: Boolean
+    },
+    // 内部自行管理状态下的，是否默认激活默认值
+    defaultActive: {
+      type: Boolean,
+      default: false
+    },
+    // 默认显示图标
+    icon: {
+      type: Object,
+      required: true
+    },
+    // 激活状态显示的图标，在没有给予的情况下，还是显示 icon
+    activeIcon: {
+      type: Object
+    },
+    // 悬浮 tip 提示内容
+    tip: {
+      type: String,
+      required: true
+    },
+    // 激活状态下的 tip 提示内容，在没有给予的情况下，还是显示 tip
+    activeTip: {
+      type: String
+    },
+    // 悬浮提示位置
+    placement: {
+      type: String
+    },
+    color: {
+      type: String
+    },
+    bgColor: {
+      type: String
+    },
+    hoverColor: {
+      type: String
+    },
+    hoverBgColor: {
+      type: String
+    },
+    activeColor: {
+      type: String
+    },
+    activeBgColor: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:active', 'change', 'activate', 'deactivate', 'click'],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const ns = useNamespace('design-icon-button');
+    let isActive = ref(props.defaultActive);
+    if (props.active != null) {
+      // eslint-disable-next-line vue/no-ref-as-operand
+      isActive = computed({
+        set(val) {
+          // 只有和本地不一致时才出发相关逻辑，避免重复发送事件
+          if (props.active !== val) {
+            emit('update:active', val);
+            emit('change', val);
+            if (val === true) {
+              emit('activate');
+            } else {
+              emit('deactivate');
+            }
+          }
+        },
+        get() {
+          return props.active;
+        }
+      });
+    }
+
+    // 触发状态变更
+    function handleClick(e) {
+      // 禁用时不处理点击事件
+      if (props.disabled) {
+        return;
+      }
+      e.stopPropagation();
+      isActive.value = !isActive.value;
+      emit('click', e);
+    }
+
+    // 动态设置计算图标呈现 style 属性，用来覆盖主题下的呈现
+    const style = computed(() => {
+      const obj = {};
+      if (props.color) {
+        obj['color'] = props.color;
+      }
+      if (props.bgColor) {
+        obj['bg-color'] = props.bgColor;
+      }
+      if (props.hoverColor) {
+        obj['hover-color'] = props.hoverColor;
+      }
+      if (props.hoverBgColor) {
+        obj['hover-bg-color'] = props.hoverBgColor;
+      }
+      if (props.activeColor) {
+        obj['active-color'] = props.activeColor;
+      }
+      if (props.activeBgColor) {
+        obj['active-bg-color'] = props.activeBgColor;
+      }
+      return ns.cssVarBlock(obj);
+    });
+    const activeTitle = computed(() => {
+      return isActive.value ? props.activeTip ?? props.tip : props.tip;
+    });
+    const activeIcon = computed(() => {
+      if (isActive.value) {
+        if (slots.activeIcon) {
+          return slots.activeIcon();
+        }
+        return props.activeIcon ?? props.icon;
+      }
+      return slots.icon ? slots.icon() : props.icon;
+    });
+    return () => {
+      return createVNode("div", {
+        "class": [ns.b(), ns.is('active', isActive.value), ns.is('disabled', props.disabled)],
+        "style": style.value
+      }, [createVNode(resolveComponent("a-tooltip"), {
+        "placement": props.placement,
+        "title": activeTitle.value,
+        "onClick": handleClick
+      }, {
+        default: () => [activeIcon.value]
+      })]);
+    };
+  }
+});
+
+export { DesignIconButton };

package/es/components/design-save-tip/design-save-tip.css

@@ -0,0 +1,107 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-design-save-tip {
+  position: relative;
+  padding: var(--gct-padding-7);
+  padding-left: 38px;
+  width: 316px;
+  height: 140px;
+}
+.gct-design-save-tip__tip-icon {
+  position: absolute;
+  top: 17px;
+  left: 16px;
+  font-size: 16px;
+}
+
+.gct-design-save-tip__header {
+  font-size: 14px;
+  font-weight: bold;
+  color: #1A1D23;
+}
+
+.gct-design-save-tip__content {
+  font-size: 14px;
+  margin-top: 2px;
+  color: var(--gct-color-text-4);
+}
+
+.gct-design-save-tip__footer {
+  margin-top: 16px;
+}
+.gct-design-save-tip__footer .ant-btn-link {
+  padding-left: 0;
+  padding-right: 0;
+  margin-right: 40px;
+}
+
+.gct-design-save-tip__cancel-btn {
+  width: 62px;
+  margin-right: 12px;
+}
+
+.gct-design-save-tip__save-exit {
+  width: 90px;
+}

package/es/components/design-save-tip/design-save-tip.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+import { IModal } from '@gct-paas/core';
+export declare const DesignSaveTip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    content: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    exit: {
+        type: PropType<() => void>;
+    };
+    saveAndExit: {
+        type: PropType<() => void>;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    content: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    exit: {
+        type: PropType<() => void>;
+    };
+    saveAndExit: {
+        type: PropType<() => void>;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    content: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design-save-tip/design-save-tip.mjs

@@ -0,0 +1,107 @@
+import { defineComponent, createVNode, resolveComponent, isVNode } from 'vue';
+import { useNamespace, t } from '@gct-paas/core';
+import './design-save-tip.css';/* empty css                      */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const DesignSaveTip = /* @__PURE__ */ defineComponent({
+  name: 'DesignSaveTip',
+  props: {
+    modal: {
+      type: Object,
+      required: true
+    },
+    title: {
+      type: String,
+      default: () => {
+        return t('sys.cardDesign.back_info.title');
+      }
+    },
+    content: {
+      type: String,
+      default: () => {
+        return t('sys.cardDesign.back_info.content');
+      }
+    },
+    exit: {
+      type: Function
+    },
+    saveAndExit: {
+      type: Function
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('design-save-tip');
+
+    /**
+     * 继续编辑
+     */
+    function onContinue() {
+      props.modal.dismiss({
+        ok: false
+      });
+    }
+
+    /**
+     * 不保存并退出
+     *
+     */
+    function onNotSave() {
+      if (props.exit) {
+        props.exit();
+      }
+      props.modal.dismiss({
+        ok: true
+      });
+    }
+
+    /**
+     * 保存并退出
+     */
+    function onSaveAndExit() {
+      if (props.saveAndExit) {
+        props.saveAndExit();
+      }
+      props.modal.dismiss({
+        ok: true
+      });
+    }
+    return () => {
+      let _slot, _slot2, _slot3;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode("div", {
+        "class": ns.e('tip-icon')
+      }, [createVNode(resolveComponent("svg-icon"), {
+        "src": "/assets/design-view/exclamation-circle.svg"
+      }, null)]), createVNode("div", {
+        "class": ns.e('header')
+      }, [props.title]), createVNode("div", {
+        "class": ns.e('content')
+      }, [props.content]), createVNode("div", {
+        "class": ns.e('footer')
+      }, [createVNode(resolveComponent("a-button"), {
+        "type": "link",
+        "onClick": onContinue
+      }, _isSlot(_slot = t('sys.app.continueEdit')) ? _slot : {
+        default: () => [_slot]
+      }), createVNode(resolveComponent("a-button"), {
+        "class": ns.e('cancel-btn'),
+        "size": "small",
+        "onClick": onNotSave
+      }, _isSlot(_slot2 = t('sys.cardDesign.back_info.notSave')) ? _slot2 : {
+        default: () => [_slot2]
+      }), createVNode(resolveComponent("a-button"), {
+        "class": ns.e('save-exit'),
+        "type": "primary",
+        "size": "small",
+        "onClick": onSaveAndExit
+      }, _isSlot(_slot3 = t('sys.cardDesign.back_info.saveAndExit')) ? _slot3 : {
+        default: () => [_slot3]
+      })])]);
+    };
+  }
+});
+
+export { DesignSaveTip };