@gct-paas/core-web 0.1.4-dev.8 → 0.1.4-dev.9

package/es/_virtual/_plugin-vue_export-helper.mjs

@@ -0,0 +1,9 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+export { _export_sfc as default };

package/es/components/app-modal/app-modal-component.css

@@ -0,0 +1,149 @@
+@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 */
+/* 模态 start */
+/* 模态 end */
+.gct-modal {
+  --gct-modal-z-index: var(--gct-z-index-modal);
+  --gct-modal-background-color: var(--gct-color-bg-1);
+}
+.gct-modal__full-screen {
+  position: absolute;
+  top: 0;
+  right: 48px;
+  padding: 16px 8px;
+  color: #212528;
+  font-size: 16px;
+  line-height: 1;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.gct-modal.is-hidden-footer > .ant-modal-content > .ant-modal-footer {
+  display: none;
+  padding: 16px;
+}
+
+.gct-modal.is-hidden-close-btn > .ant-modal-content > .ant-modal-close {
+  display: none;
+}
+
+.gct-modal.is-hidden-cancel-btn > .ant-modal-content > .ant-modal-footer > button:first-child {
+  display: none;
+}
+
+.gct-modal.is-full-screen {
+  top: 0;
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: 100%;
+  max-height: fit-content;
+  margin: 0;
+  padding-bottom: 0;
+}
+.gct-modal.is-full-screen .ant-modal-content {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  max-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+}
+
+.gct-modal > .ant-modal-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-height: 85vh;
+}
+.gct-modal > .ant-modal-content > .ant-modal-close > .ant-modal-close-x {
+  width: auto;
+  height: auto;
+  padding: 16px;
+  color: #212528;
+  line-height: 1;
+  line-height: 22px;
+}
+.gct-modal > .ant-modal-content > .ant-modal-header {
+  border-bottom: 1px solid #e0e3ea;
+}
+.gct-modal > .ant-modal-content > .ant-modal-footer {
+  border-top: 1px solid #e0e3ea;
+}
+.gct-modal > .ant-modal-content > .ant-modal-header,
+.gct-modal > .ant-modal-content > .ant-modal-footer {
+  flex-shrink: 0;
+  padding: 16px;
+}
+.gct-modal > .ant-modal-content > .ant-modal-header .ant-modal-title {
+  color: #000;
+  font-weight: 600;
+  min-height: 22px;
+}
+.gct-modal > .ant-modal-content > .ant-modal-body {
+  flex-grow: 1;
+  padding: 0;
+  overflow: hidden auto;
+}

package/es/components/app-modal/app-modal-component.d.ts

@@ -0,0 +1,26 @@
+import { PropType, VNode } from 'vue';
+import { IModalOptions, IOverlayContainer } from '@gct-paas/core';
+export declare const AppModalComponent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    opts: {
+        type: PropType<IModalOptions>;
+        default: () => {};
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    opts: {
+        type: PropType<IModalOptions>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    opts: IModalOptions;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/**
+ * 创建模态框
+ *
+ * @author zhanghanrui
+ * @date 2024-03-19 21:03:37
+ * @export
+ * @param {() => VNode} render
+ * @param {(IModalOptions)} [opts]
+ * @return {*}  {IOverlayContainer}
+ */
+export declare function createModal(render: () => VNode, opts?: IModalOptions): IOverlayContainer;

package/es/components/app-modal/app-modal-component.mjs

@@ -0,0 +1,140 @@
+import { defineComponent, ref, provide, createVNode, h, resolveComponent, isVNode } from 'vue';
+import { ConfigProvider } from 'ant-design-vue';
+import { OverlayContainer, useNamespace, Modal } from '@gct-paas/core';
+import { DndProvider } from 'vue3-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import './app-modal-component.css';/* empty css                          */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const AppModalComponent = /* @__PURE__ */ defineComponent({
+  props: {
+    opts: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, ctx) {
+    const ns = useNamespace('modal');
+    const isShow = ref(false);
+    // 是否全屏
+    const isFullScreen = ref(props.opts.defaultFullscreen ? true : false);
+    const onFullScreen = () => {
+      isFullScreen.value = !isFullScreen.value;
+    };
+
+    // 合并options
+    const options = ref({});
+    if (props.opts) {
+      Object.assign(options.value, props.opts);
+    }
+    let data = null;
+    const modal = new Modal({
+      dismiss: result => {
+        isShow.value = false;
+        data = result;
+        ctx.emit('dismiss', data);
+      },
+      setOptions(opt) {
+        Object.assign(options.value, opt);
+      }
+    });
+    provide('modal', modal);
+    const dismiss = _data => {
+      return modal.dismiss(_data);
+    };
+    const present = () => {
+      isShow.value = true;
+    };
+    ctx.expose({
+      present,
+      dismiss
+    });
+    const isConfirmLoading = ref(false);
+    const ok = async () => {
+      if (modal.ok) {
+        try {
+          isConfirmLoading.value = true;
+          const result = await modal.ok();
+          isConfirmLoading.value = false;
+          if (result && (result.ok === true || result.close === true)) {
+            dismiss(result);
+          }
+        } finally {
+          isConfirmLoading.value = false;
+        }
+      } else {
+        console.warn('打开模态未实现ok方法');
+      }
+    };
+    const cancel = async () => {
+      if (modal.cancel) {
+        const bol = await modal.cancel();
+        if (bol === false) {
+          return;
+        }
+      }
+      dismiss();
+    };
+
+    // TODO: 需要注入 antd 的多语言，待实现
+    const locale = {
+      getAntdLocale: {
+        locale: {}
+      }
+    };
+    const {
+      getAntdLocale
+    } = locale;
+    return () => {
+      let _slot;
+      const slot = ctx.slots.default?.();
+      if (slot && slot.length > 0) {
+        slot[0].props.modal = modal;
+      }
+      return createVNode(ConfigProvider, {
+        "locale": getAntdLocale
+      }, {
+        default: () => [createVNode(DndProvider, {
+          "backend": HTML5Backend
+        }, _isSlot(_slot = h(resolveComponent('a-modal'), {
+          visible: isShow,
+          class: [ns.b(), options.value.placement && ns.m(options.value.placement), options.value.modalClass, ns.is('hidden-footer', options.value.showFooter === false), ns.is('hidden-close-btn', options.value.showCloseBtn === false), ns.is('hidden-cancel-btn', options.value.showCancelBtn === false), ns.is('full-screen', isFullScreen.value)],
+          centered: true,
+          onOk: ok,
+          confirmLoading: isConfirmLoading,
+          onCancel: cancel,
+          okText: '确认',
+          okButtonProps: {
+            disabled: modal.state.okDisabled
+          },
+          ...options.value
+        }, [options.value.canFullscreen !== false ? createVNode("div", {
+          "class": ns.e('full-screen'),
+          "onClick": onFullScreen
+        }, [createVNode("i", {
+          "class": `iconfont ${isFullScreen.value ? 'icon-tuichuquanping' : 'icon-quanping'}`
+        }, null)]) : null, slot])) ? _slot : {
+          default: () => [_slot]
+        })]
+      });
+    };
+  }
+});
+
+/**
+ * 创建模态框
+ *
+ * @author zhanghanrui
+ * @date 2024-03-19 21:03:37
+ * @export
+ * @param {() => VNode} render
+ * @param {(IModalOptions)} [opts]
+ * @return {*}  {IOverlayContainer}
+ */
+function createModal(render, opts) {
+  return new OverlayContainer(AppModalComponent, render, opts);
+}
+
+export { AppModalComponent, createModal };

package/es/components/base-button/base-button.css

@@ -0,0 +1,74 @@
+.ant-btn[data-v-5375ec2b] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ant-btn.btn-font-color[data-v-5375ec2b] {
+  color: var(--v8d035854) !important;
+}
+.ant-btn.btn-bg-style[data-v-5375ec2b] {
+  border-color: var(--e376d652) !important;
+  background: var(--v4ee5fd6d) !important;
+}
+.square[data-v-5375ec2b] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  padding: 0;
+  border-radius: 4px;
+}
+.square .icon-next[data-v-5375ec2b] {
+  margin: 0 !important;
+}
+.square .btn-title[data-v-5375ec2b] {
+  width: inherit;
+  padding: 0 8px;
+}
+.square.ant-btn-sm[data-v-5375ec2b] {
+  width: 72px;
+  height: 64px;
+  font-size: 14px;
+}
+.square.ant-btn-sm .btn-title[data-v-5375ec2b] {
+  padding: 0 4px;
+}
+.square.ant-btn-lg[data-v-5375ec2b] {
+  width: 80px;
+  height: 88px;
+}
+.squaref[data-v-5375ec2b] {
+  min-width: 72px;
+  height: 56px;
+  padding: 0;
+}
+.line[data-v-5375ec2b] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-v-5375ec2b] .group .ant-btn {
+  height: 100%;
+}
+[data-v-5375ec2b] .ant-btn-loading-icon {
+  width: 0;
+  height: 0;
+  line-height: 0;
+}
+[data-v-5375ec2b] .ant-btn-icon-only {
+  vertical-align: -2px;
+}
+.gct-text-overflow-2[data-v-5375ec2b] {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: inline-flexbox;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  box-orient: 2;
+}

package/es/components/base-button/base-button.vue.d.ts

@@ -0,0 +1,173 @@
+import { PropType } from 'vue';
+import { ButtonSize, ButtonStyle } from '@gct-paas/core';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<ButtonSize>;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    danger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    buttonStyle: {
+        type: PropType<ButtonStyle>;
+        default: string;
+    };
+    i18nConfig: {
+        type: StringConstructor;
+        default: string;
+    };
+    hidden: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    enableCustomColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<ButtonSize>;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    danger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    buttonStyle: {
+        type: PropType<ButtonStyle>;
+        default: string;
+    };
+    i18nConfig: {
+        type: StringConstructor;
+        default: string;
+    };
+    hidden: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    enableCustomColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: string;
+    title: string;
+    loading: boolean;
+    size: ButtonSize;
+    disabled: boolean;
+    block: boolean;
+    danger: boolean;
+    icon: string;
+    hidden: boolean;
+    confirm: boolean;
+    hasIcon: boolean;
+    hasText: boolean;
+    buttonStyle: ButtonStyle;
+    i18nConfig: string;
+    confirmText: string;
+    enableCustomColor: boolean;
+    backgroundColor: string;
+    fontColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/es/components/base-button/base-button.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './base-button.vue3.mjs';
+import './base-button.css';/* empty css                  */
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
+
+const baseButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5375ec2b"]]);
+
+export { baseButton as default };