@gct-paas/design-web 0.1.4-dev.1 → 0.1.4-dev.10

package/es/components/I18nSelect/src/i18n-select-btn.vue2.mjs

@@ -0,0 +1,138 @@
+import { defineComponent, ref, reactive, computed, watch, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createVNode, mergeProps, createElementVNode, toDisplayString, createElementBlock, Fragment, renderList } from 'vue';
+import { isEmpty } from 'lodash-es';
+import { useI18nSelect } from './useI18nSelect.mjs';
+
+const _hoisted_1 = { class: "i18n-tooltip-title" };
+const _hoisted_2 = { style: { "margin-left": "4px" } };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "i18n-select-btn",
+  props: {
+    i18nValue: {},
+    buttonExtraProps: {},
+    size: {},
+    i18nModalKey: {},
+    simpleBtn: { type: Boolean },
+    btnHeight: {},
+    btnWidth: {}
+  },
+  emits: ["on-select-i18n", "closed"],
+  setup(__props, { emit: __emit }) {
+    const getEnableLocaleList = ref();
+    const i18nInstance = useI18nSelect();
+    const props = __props;
+    const emit = __emit;
+    const i18nMap = reactive({});
+    const isHighlight = computed(() => {
+      return !isEmpty(props.i18nValue);
+    });
+    const getTableData = async (keyword) => {
+      const result = await _api.apaas.i18NInfo.getPageList({
+        pageNo: 1,
+        pageSize: 20,
+        searchKey: keyword
+      });
+      if (result && result.data) {
+        const row = result.data.find((item) => item.key === props.i18nValue);
+        if (row) {
+          Object.assign(
+            i18nMap,
+            Object.fromEntries(
+              Object.entries(JSON.parse(row.info)).map(([_, item]) => [
+                item.locale,
+                item.info
+              ])
+            )
+          );
+        }
+      }
+    };
+    watch(
+      () => props.i18nValue,
+      () => {
+        if (!isEmpty(props.i18nValue)) {
+          getTableData(props.i18nValue);
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    const handleOpenI18nSelectModal = () => {
+      i18nInstance.open({
+        i18nModalKey: props.i18nModalKey,
+        saveCallback: (params) => {
+          emit("on-select-i18n", { ...params });
+        },
+        destroyCallback: () => {
+          emit("closed");
+        }
+      });
+    };
+    return (_ctx, _cache) => {
+      const _component_Icon = resolveComponent("Icon");
+      const _component_a_button = resolveComponent("a-button");
+      const _component_a_tooltip = resolveComponent("a-tooltip");
+      return __props.simpleBtn ? (openBlock(), createBlock(_component_Icon, {
+        key: 0,
+        class: normalizeClass(["i18n-icon simple-btn", { "is-highlight": isHighlight.value }]),
+        icon: "ion:language",
+        onClick: handleOpenI18nSelectModal
+      }, null, 8, ["class"])) : isHighlight.value ? (openBlock(), createBlock(_component_a_tooltip, {
+        key: 1,
+        color: "#fff",
+        placement: "topRight"
+      }, {
+        title: withCtx(() => [
+          createElementVNode("div", _hoisted_1, "语言标识：" + toDisplayString(__props.i18nValue), 1),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(getEnableLocaleList.value, (item) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.id,
+              class: "i18n-tooltip-item"
+            }, [
+              createElementVNode("strong", null, toDisplayString(item.language) + ": ", 1),
+              createElementVNode("span", _hoisted_2, toDisplayString(i18nMap[item.languageTag]), 1)
+            ]);
+          }), 128))
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_a_button, mergeProps(__props.buttonExtraProps, {
+            class: { "is-highlight": isHighlight.value },
+            style: {
+              "--btn-width": __props.btnWidth,
+              "--btn-height": __props.btnHeight
+            },
+            size: __props.size,
+            onClick: handleOpenI18nSelectModal
+          }), {
+            icon: withCtx(() => [
+              createVNode(_component_Icon, {
+                class: "i18n-icon",
+                icon: "ion:language"
+              })
+            ]),
+            _: 1
+          }, 16, ["class", "style", "size"])
+        ]),
+        _: 1
+      })) : (openBlock(), createBlock(_component_a_button, mergeProps({ key: 2 }, __props.buttonExtraProps, {
+        class: { "is-highlight": isHighlight.value },
+        style: {
+          "--btn-width": __props.btnWidth,
+          "--btn-height": __props.btnHeight
+        },
+        size: __props.size,
+        onClick: handleOpenI18nSelectModal
+      }), {
+        icon: withCtx(() => [
+          createVNode(_component_Icon, {
+            class: "i18n-icon",
+            icon: "ion:language"
+          })
+        ]),
+        _: 1
+      }, 16, ["class", "style", "size"]));
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/I18nSelect/src/i18n-select-container.css

@@ -0,0 +1,6 @@
+.i18n-select-container[data-v-0160ed5e] {
+  padding: 4px;
+}
+[data-v-0160ed5e] .ant-form-horizontal .ant-form-item {
+  flex-direction: row;
+}

package/es/components/I18nSelect/src/i18n-select-container.vue.d.ts

@@ -0,0 +1,10 @@
+export interface Prop {
+    i18nModalKey?: string;
+    destroyCallback?: () => void;
+    saveCallback?: (params: IObject) => void;
+}
+declare const _default: import('vue').DefineComponent<Prop, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Prop> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    formRef: unknown;
+    tableRef: unknown;
+}, any>;
+export default _default;

package/es/components/I18nSelect/src/i18n-select-container.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './i18n-select-container.vue2.mjs';
+import './i18n-select-container.css';/* empty css                            */
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const I18nSelectContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0160ed5e"]]);
+
+export { I18nSelectContainer as default };

package/es/components/I18nSelect/src/i18n-select-container.vue2.mjs

@@ -0,0 +1,250 @@
+import { defineComponent, ref, reactive, computed, onMounted, resolveComponent, openBlock, createBlock, mergeProps, unref, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString } from 'vue';
+import { SearchOutlined } from '@ant-design/icons-vue';
+import _sfc_main$1 from './i18n-modal.vue.mjs';
+import { t } from '@gct-paas/core';
+import { useModalInner, useModal } from '@gct-paas/core-web';
+
+const _hoisted_1 = { class: "i18n-select-container" };
+const _hoisted_2 = { class: "table-wrap" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "i18n-select-container",
+  props: {
+    i18nModalKey: {},
+    destroyCallback: { type: Function },
+    saveCallback: { type: Function }
+  },
+  setup(__props) {
+    const [registerInner, { closeModal }] = useModalInner();
+    const [userRegister, { openModal }] = useModal();
+    const props = __props;
+    const getContainer = () => document.querySelector(`#${props.i18nModalKey}`);
+    const formRef = ref();
+    const formState = reactive({ keywords: "" });
+    const pagination = reactive({
+      current: 1,
+      pageSize: 5,
+      total: 0,
+      size: "small",
+      showTotal: (total) => t("sys.component.table.total", { total })
+    });
+    const tableData = ref([]);
+    const selectRows = ref();
+    const rowSelection = ref({
+      type: "radio",
+      hideSelectAll: true,
+      selectedRowKeys: [],
+      onChange: handleRowChange
+    });
+    const loading = ref(false);
+    const columns = computed(() => {
+      return [];
+    });
+    const getTableData = async (keyword, current) => {
+      loading.value = true;
+      const result = await _api.apaas.i18NInfo.getPageList({
+        pageNo: current ?? pagination.current,
+        pageSize: pagination.pageSize,
+        searchKey: keyword
+      });
+      loading.value = false;
+      if (result && result.data) {
+        const rows = result.data.map((item) => {
+          const infos = JSON.parse(item?.info);
+          return {
+            key: item.key,
+            type: item.type,
+            ...Object.fromEntries(infos.map((i) => [i.locale, i.info]))
+          };
+        });
+        pagination.total = result.totalCount;
+        tableData.value = rows;
+      }
+    };
+    onMounted(getTableData);
+    const handleSearch = () => {
+      formRef.value?.validate().then(async () => {
+        await getTableData(formState.keywords, 1);
+      });
+    };
+    const handleTableChange = (paginationInfo) => {
+      const { current, total, pageSize } = paginationInfo;
+      pagination.current = current;
+      pagination.total = total;
+      pagination.pageSize = pageSize;
+      getTableData();
+    };
+    const handleAddI18n = () => {
+      openModal();
+    };
+    const handleModalOk = async (data, isEdit) => {
+      const langInfos = columns.value.map((item) => {
+        return {
+          locale: item.dataIndex,
+          info: data[item.dataIndex]
+        };
+      });
+      loading.value = true;
+      try {
+        if (isEdit) {
+          await _api.apaas.i18NInfo.putKey(
+            { key: data.id },
+            { info: JSON.stringify(langInfos) }
+          );
+        } else {
+          await _api.apaas.i18NInfo.post({
+            info: JSON.stringify(langInfos),
+            key: data.id
+          });
+        }
+        getTableData();
+        handleRowChange([data.id], [reactive(data)]);
+      } catch (error) {
+        loading.value = false;
+      }
+    };
+    function handleRowChange(selectedRowKeys, selectedRows) {
+      rowSelection.value.selectedRowKeys = selectedRowKeys;
+      selectRows.value = selectedRows;
+    }
+    const handleClose = () => {
+      if (props.destroyCallback && typeof props.destroyCallback === "function") {
+        props.destroyCallback();
+      }
+    };
+    const handleOk = async () => {
+      if (props.saveCallback && typeof props.saveCallback === "function") {
+        const selectRowKey = rowSelection.value.selectedRowKeys;
+        const params = {};
+        if (selectRowKey && selectRowKey[0]) {
+          const selectRow = selectRows.value?.[0];
+          console.log("selectRow", selectRow);
+          Object.assign(params, {
+            i18nKey: selectRowKey[0]
+            // i18nTitle: selectRow[getLocale],
+          });
+        }
+        props.saveCallback(params);
+      }
+      closeModal();
+    };
+    return (_ctx, _cache) => {
+      const _component_a_input = resolveComponent("a-input");
+      const _component_a_form_item = resolveComponent("a-form-item");
+      const _component_a_col = resolveComponent("a-col");
+      const _component_a_button = resolveComponent("a-button");
+      const _component_plus_outlined = resolveComponent("plus-outlined");
+      const _component_a_row = resolveComponent("a-row");
+      const _component_a_form = resolveComponent("a-form");
+      const _component_a_table = resolveComponent("a-table");
+      const _component_basic_modal = resolveComponent("basic-modal");
+      return openBlock(), createBlock(_component_basic_modal, mergeProps(_ctx.$attrs, {
+        "min-height": 40,
+        title: unref(t)("sys.i18n.i18nConfig"),
+        centered: "",
+        width: "640px",
+        "can-fullscreen": false,
+        "mask-closable": false,
+        "after-close": handleClose,
+        "get-container": getContainer,
+        onRegister: unref(registerInner),
+        onOk: handleOk
+      }), {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_component_a_form, {
+              ref_key: "formRef",
+              ref: formRef,
+              model: formState,
+              autocomplete: "off",
+              layout: "horizontal"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_a_row, null, {
+                  default: withCtx(() => [
+                    createVNode(_component_a_col, { span: 12 }, {
+                      default: withCtx(() => [
+                        createVNode(_component_a_form_item, {
+                          name: "keywords",
+                          label: unref(t)("sys.keywords")
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_component_a_input, {
+                              value: formState.keywords,
+                              "onUpdate:value": _cache[0] || (_cache[0] = ($event) => formState.keywords = $event),
+                              placeholder: unref(t)("sys.keywordsPlaceholder"),
+                              style: { "display": "inline-flex" }
+                            }, null, 8, ["value", "placeholder"])
+                          ]),
+                          _: 1
+                        }, 8, ["label"])
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(_component_a_col, {
+                      span: 12,
+                      style: { "text-align": "right" }
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_a_button, {
+                          type: "primary",
+                          onClick: handleSearch
+                        }, {
+                          icon: withCtx(() => [
+                            createVNode(unref(SearchOutlined))
+                          ]),
+                          default: withCtx(() => [
+                            createTextVNode(" " + toDisplayString(unref(t)("sys.queryText")), 1)
+                          ]),
+                          _: 1
+                        }),
+                        createVNode(_component_a_button, {
+                          style: { "margin": "0 8px" },
+                          type: "primary",
+                          onClick: handleAddI18n
+                        }, {
+                          icon: withCtx(() => [
+                            createVNode(_component_plus_outlined)
+                          ]),
+                          default: withCtx(() => [
+                            createTextVNode(" " + toDisplayString(unref(t)("sys.new")), 1)
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["model"]),
+            createElementVNode("div", _hoisted_2, [
+              createVNode(_component_a_table, {
+                ref: "tableRef",
+                "data-source": tableData.value,
+                columns: columns.value,
+                "show-index-column": false,
+                pagination,
+                striped: false,
+                bordered: true,
+                "row-selection": rowSelection.value,
+                loading: loading.value,
+                onChange: handleTableChange
+              }, null, 8, ["data-source", "columns", "pagination", "row-selection", "loading"]),
+              createVNode(_sfc_main$1, {
+                lang: columns.value,
+                "get-container": getContainer,
+                onRegister: unref(userRegister),
+                onOk: handleModalOk
+              }, null, 8, ["lang", "onRegister"])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 16, ["title", "onRegister"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/I18nSelect/src/i18n-select-input-form.vue.d.ts

@@ -0,0 +1,15 @@
+import { FormInstance, FormItemProps, InputProps } from 'ant-design-vue';
+interface Props {
+    formItemName: string | string[];
+    fromItemExtraProps?: FormItemProps;
+    inputExtraProps?: InputProps;
+    i18nConfig?: string;
+    text?: string;
+    formRef?: FormInstance;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:text": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:text"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/I18nSelect/src/i18n-select-input-form.vue.mjs

@@ -0,0 +1,57 @@
+import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, mergeProps, withCtx, createElementVNode, toDisplayString } from 'vue';
+import I18nSelectInput from './i18n-select-input.vue.mjs';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "i18n-select-input-form",
+  props: {
+    formItemName: {},
+    fromItemExtraProps: {},
+    inputExtraProps: {},
+    i18nConfig: {},
+    text: {},
+    formRef: {}
+  },
+  emits: ["update:text"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const i18nText = computed({
+      get() {
+        return props.text ?? "";
+      },
+      set(value) {
+        emit("update:text", value);
+        props.formRef?.validateFields([props.formItemName]);
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_a_form_item = resolveComponent("a-form-item");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_component_a_form_item, mergeProps({ name: __props.formItemName }, __props.fromItemExtraProps), {
+          default: withCtx(() => [
+            createVNode(I18nSelectInput, mergeProps(_ctx.$attrs, {
+              "i18n-text": i18nText.value,
+              "onUpdate:i18nText": _cache[0] || (_cache[0] = ($event) => i18nText.value = $event),
+              "input-extra-props": __props.inputExtraProps,
+              "i18n-config": __props.i18nConfig,
+              attr: Array.isArray(__props.formItemName) ? __props.formItemName.join(".") : __props.formItemName,
+              "placeholder-text": _ctx.$t("sys.inputText")
+            }), null, 16, ["i18n-text", "input-extra-props", "i18n-config", "attr", "placeholder-text"])
+          ]),
+          _: 1
+        }, 16, ["name"]),
+        createVNode(_component_a_form_item, {
+          name: "i18nConfig",
+          hidden: ""
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", null, toDisplayString(__props.i18nConfig), 1)
+          ]),
+          _: 1
+        })
+      ], 64);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/I18nSelect/src/i18n-select-input-form.vue2.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from './i18n-select-input-form.vue.mjs';
+
+
+
+export { _sfc_main as default };

package/es/components/I18nSelect/src/i18n-select-input.css

@@ -0,0 +1,3 @@
+[data-v-412e1309] .ant-form-item-has-error .ant-btn {
+  border-color: var(--ant-error-color) !important;
+}

package/es/components/I18nSelect/src/i18n-select-input.vue.d.ts

@@ -0,0 +1,51 @@
+import { InputProps } from 'ant-design-vue';
+import { ButtonSize } from '@gct-paas/core';
+interface Props {
+    attr: string | IObject;
+    inputExtraProps?: InputProps;
+    i18nConfig?: string | Record<string, string>;
+    i18nText?: string;
+    placeholderText?: string;
+    size?: ButtonSize;
+    i18nModalKey?: string;
+    forceUpdate?: boolean;
+    btnHeight?: string;
+    btnWidth?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'i18n-input'?(_: {}): any;
+    };
+    refs: {
+        i18nInputGroup: unknown;
+        inputRef: unknown;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:i18nText": (...args: any[]) => void;
+    "update:i18nConfig": (...args: any[]) => void;
+    "on-i18n-select": (...args: any[]) => void;
+    clickOutside: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
+    blur: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:i18nText"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:i18nConfig"?: ((...args: any[]) => any) | undefined;
+    "onOn-i18n-select"?: ((...args: any[]) => any) | undefined;
+    onClickOutside?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    i18nInputGroup: unknown;
+    inputRef: unknown;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/components/I18nSelect/src/i18n-select-input.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './i18n-select-input.vue2.mjs';
+import './i18n-select-input.css';/* empty css                        */
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const I18nSelectInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-412e1309"]]);
+
+export { I18nSelectInput as default };