@gct-paas/core-web 0.1.4-dev.10 → 0.1.4-dev.11

package/es/modules/gct-form/editor/gct-form-pixel-config/gct-form-pixel-config.css

@@ -0,0 +1,103 @@
+@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-form-pixel-config__select.ant-select {
+  width: 97px !important;
+  height: 28px;
+}
+.gct-form-pixel-config__select.ant-select .ant-select-selector {
+  height: 26px;
+  padding: 0 8px;
+}
+.gct-form-pixel-config__select.ant-select .ant-select-selection-search {
+  height: 26px;
+}
+.gct-form-pixel-config__select.ant-select .ant-select-selection-item {
+  height: 26px;
+  display: flex;
+  align-items: center;
+}
+.gct-form-pixel-config__select.ant-select .ant-select-selection-item::after {
+  height: 26px;
+}
+.gct-form-pixel-config__select.ant-select .ant-select-selection-search-input {
+  height: 26px !important;
+}
+
+.gct-form-pixel-config__input.ant-input-number-group-wrapper {
+  width: calc(100% - 97px) !important;
+  height: 26px;
+}
+.gct-form-pixel-config__input.ant-input-number-group-wrapper .ant-input-number-group-addon {
+  height: 26px;
+  width: 30px;
+  padding: 0 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.gct-form-pixel-config__input.ant-input-number-group-wrapper .ant-input-number {
+  height: 26px;
+  width: calc(100% - 30px) !important;
+}

package/es/modules/gct-form/editor/gct-form-pixel-config/gct-form-pixel-config.d.ts

@@ -0,0 +1,29 @@
+import { PropType } from 'vue';
+import { ITextEditor } from '../../interface';
+export declare const GctFormPixelConfig: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<ITextEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<ITextEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    value: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/modules/gct-form/editor/gct-form-pixel-config/gct-form-pixel-config.mjs

@@ -0,0 +1,69 @@
+import { defineComponent, computed, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+import './gct-form-pixel-config.css';/* empty css                            */
+
+const GctFormPixelConfig = /* @__PURE__ */ defineComponent({
+  name: 'GctFormPixelConfig',
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String
+    }
+  },
+  setup() {
+    const ns = useNamespace('form-pixel-config');
+    const mode = useGctFormValue('label_mode');
+    const val = useGctFormValue();
+    const options = [{
+      label: '百分比',
+      value: 'percent'
+    }, {
+      label: '固定',
+      value: 'fixed'
+    }];
+    const addonAfter = computed(() => {
+      return mode.value === 'fixed' ? 'px' : '%';
+    });
+    function onSelectChange(_val) {
+      mode.value = _val;
+      if (_val === 'fixed') {
+        val.value = 100;
+      } else {
+        val.value = 30;
+      }
+    }
+    return () => {
+      return createVNode(resolveComponent("a-input-group"), {
+        "compact": true,
+        "class": ns.b()
+      }, {
+        default: () => [createVNode(resolveComponent("a-select"), {
+          "class": ns.e('select'),
+          "value": mode.value,
+          "onUpdate:value": $event => mode.value = $event,
+          "options": options,
+          "onChange": onSelectChange
+        }, null), createVNode(resolveComponent("a-input-number"), {
+          "class": ns.e('input'),
+          "value": val.value,
+          "onUpdate:value": $event => val.value = $event,
+          "min": 0,
+          "placeholder": "\u8BF7\u8F93\u5165",
+          "size": "small",
+          "max": mode.value === 'fixed' ? 500 : 100,
+          "addonAfter": addonAfter.value
+        }, null)]
+      });
+    };
+  }
+});
+
+export { GctFormPixelConfig };

package/es/modules/gct-form/editor/gct-form-pixel-config/index.d.ts

@@ -0,0 +1,8 @@
+import { IEditorProvider } from '../../interface';
+export declare class Provider implements IEditorProvider {
+    component: string;
+}
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/modules/gct-form/editor/gct-form-pixel-config/index.mjs

@@ -0,0 +1,14 @@
+import { EditorType } from '../../constants/editor-type/editor-type.mjs';
+import { widthEditorInstall } from '../../utils/width-install/width-install.mjs';
+import { GctFormPixelConfig as GctFormPixelConfig$1 } from './gct-form-pixel-config.mjs';
+
+class Provider {
+  component = "gct-form-pixel-config";
+}
+const GctFormPixelConfig = widthEditorInstall(
+  EditorType.PIXEL_CONFIG,
+  () => new Provider(),
+  GctFormPixelConfig$1
+);
+
+export { Provider, GctFormPixelConfig as default };

package/es/modules/gct-form/editor/gct-form-radio/gct-form-radio.css

@@ -0,0 +1,205 @@
+@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-gct-form-radio {
+  position: relative;
+}
+.gct-gct-form-radio--radio.ant-radio-group {
+  display: flex;
+  align-items: center;
+}
+.gct-gct-form-radio--radio .ant-radio-wrapper {
+  --gct-color-primary: #bac5d0;
+}
+.gct-gct-form-radio--radio .ant-radio-wrapper.ant-radio-wrapper-checked {
+  --gct-color-primary: var(--ant-primary-color);
+  color: color-mix(in srgb, var(--gct-color-primary), 30%) !important;
+}
+.gct-gct-form-radio--radio .ant-radio-wrapper.ant-radio-wrapper-disabled {
+  cursor: default;
+}
+
+.gct-gct-form-radio__item span:last-child {
+  display: flex;
+  align-items: center;
+}
+.gct-gct-form-radio__item.ant-radio-wrapper.ant-radio-wrapper-disabled + span {
+  cursor: default !important;
+}
+.gct-gct-form-radio__item .ant-radio-disabled + span {
+  cursor: default !important;
+}
+.gct-gct-form-radio__item .ant-radio-inner {
+  cursor: default !important;
+}
+.gct-gct-form-radio__item--pos-top {
+  position: relative;
+  margin-right: 16px;
+  --color-primary: var(--gct-color-border);
+}
+.gct-gct-form-radio__item--pos-top > span:last-child {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.gct-gct-form-radio__item--pos-top .ant-radio {
+  position: absolute;
+  top: unset;
+  left: 2px;
+  bottom: 0;
+  height: 14px;
+  width: 14px;
+}
+.gct-gct-form-radio__item--pos-top .gct-gct-form-radio__item-icon {
+  border: 1px solid var(--color-primary);
+  overflow: hidden;
+  font-size: 104px;
+  border-radius: var(--gct-border-radius-s);
+  margin-right: 0;
+  cursor: default;
+}
+.gct-gct-form-radio__item--pos-top .gct-gct-form-radio__item-icon:hover {
+  --gct-color-primary: var(--ant-primary-color);
+  border-color: var(--gct-color-primary);
+}
+.gct-gct-form-radio__item--pos-top .gct-gct-form-radio__item-label {
+  cursor: default;
+  margin-top: 8px;
+  padding-left: 22px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gct-gct-form-radio__item--pos-top.ant-radio-wrapper-checked {
+  --color-primary: var(--gct-color-primary);
+}
+.gct-gct-form-radio__item--pos-top.ant-radio-wrapper-checked .gct-gct-form-radio__item-icon {
+  border-color: var(--color-primary);
+}
+
+.gct-gct-form-radio__item-icon {
+  font-size: 14px;
+  margin-right: 8px;
+  color: var(--color-primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.gct-gct-form-radio__item-icon .gct-iconfont {
+  font-size: inherit;
+}
+
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group {
+  width: 100%;
+  padding: 2px;
+  border-radius: 4px;
+  background-color: #f2f4f7;
+  display: inline-block;
+  display: flex;
+}
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group .ant-radio-button-wrapper {
+  border: 0;
+  background-color: transparent;
+  color: #212528;
+  border-radius: 2px;
+  padding: 0;
+  flex: 1;
+  text-align: center;
+}
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group .ant-radio-button-wrapper:not(:first-child)::before {
+  width: 0;
+}
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group .ant-radio-button-wrapper span:last-child {
+  padding: 4px;
+  border-radius: 2px;
+  display: inline-flex;
+  line-height: 1;
+  vertical-align: -1px;
+}
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group .ant-radio-button-wrapper span:last-child:hover {
+  background-color: #e6e9ef;
+}
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
+  background-color: #fff;
+}
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked span:last-child:hover {
+  background-color: transparent;
+}
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-disabled {
+  cursor: default;
+}
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+  box-shadow: 0 0 0 0;
+}
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
+  color: #212528;
+  cursor: pointer;
+}
+.gct-gct-form-radio.gct-gct-form-radio--button.ant-radio-group.ant-radio-group-small .ant-radio-button-wrapper {
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+}

package/es/{editor → modules/gct-form/editor}/gct-form-radio/gct-form-radio.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IFormItemController, IRadioEditor } from '@gct-paas/core';
+import { IFormItemController, IRadioEditor } from '../../interface';
 export declare const GctFormRadio: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormItemController>;
@@ -13,6 +13,9 @@ export declare const GctFormRadio: import('vue').DefineComponent<import('vue').E
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: PropType<"default" | "small" | "large">;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     val: import('vue').WritableComputedRef<any, any>;
@@ -29,6 +32,9 @@ export declare const GctFormRadio: import('vue').DefineComponent<import('vue').E
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: PropType<"default" | "small" | "large">;
+    };
 }>> & Readonly<{
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }>, {

package/es/modules/gct-form/editor/gct-form-radio/gct-form-radio.mjs

@@ -0,0 +1,95 @@
+import { defineComponent, createVNode, mergeProps, resolveComponent, isVNode } from 'vue';
+import { RadioGroup, RadioButton, Radio } from 'ant-design-vue';
+import { useNamespace } from '@gct-paas/core';
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+import './gct-form-radio.css';/* empty css                     */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const GctFormRadio = /* @__PURE__ */ defineComponent({
+  name: 'GctFormRadio',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String
+    }
+  },
+  emits: ['update:value'],
+  setup() {
+    const ns = useNamespace('gct-form-radio');
+    const val = useGctFormValue();
+    return {
+      ns,
+      val
+    };
+  },
+  render() {
+    let _slot2;
+    const attrs = {
+      ...(this.model.props || {}),
+      allowClear: true,
+      disabled: this.c.state.disabled
+    };
+    if (this.model.buttonMode) {
+      let _slot;
+      return createVNode(RadioGroup, mergeProps({
+        "class": [this.ns.b(), this.ns.m('button')],
+        "value": this.val,
+        "onUpdate:value": $event => this.val = $event,
+        "size": "small",
+        "button-style": "solid"
+      }, attrs), _isSlot(_slot = this.c.state.options.map(option => {
+        return createVNode(RadioButton, {
+          "key": option.value,
+          "value": option.value
+        }, {
+          default: () => [option.label]
+        });
+      })) ? _slot : {
+        default: () => [_slot]
+      });
+    }
+    return createVNode(RadioGroup, mergeProps({
+      "class": [this.ns.b(), this.ns.m('radio')],
+      "value": this.val,
+      "onUpdate:value": $event => this.val = $event,
+      "size": this.size
+    }, attrs), _isSlot(_slot2 = this.c.state.options.map(option => {
+      return createVNode(Radio, {
+        "class": [this.ns.e('item'), this.ns.em('item', 'pos-' + (this.model.icon?.pos || 'left'))],
+        "key": option.value,
+        "value": option.value,
+        "disabled": option.disabled
+      }, {
+        default: () => [option.icon ? createVNode("span", {
+          "class": this.ns.e('item-icon'),
+          "style": {
+            width: this.model.icon?.width,
+            height: this.model.icon?.height,
+            fontSize: this.model.icon?.fontSize
+          }
+        }, [typeof option.icon === 'string' && option.icon.endsWith('.svg') ? createVNode(resolveComponent("svg-icon"), {
+          "src": option.icon
+        }, null) : option.icon]) : null, createVNode("span", {
+          "class": this.ns.e('item-label')
+        }, [option.label])]
+      });
+    })) ? _slot2 : {
+      default: () => [_slot2]
+    });
+  }
+});
+
+export { GctFormRadio };

package/es/modules/gct-form/editor/gct-form-radio/index.d.ts

@@ -0,0 +1,8 @@
+import { IEditorProvider } from '../../interface';
+export declare class Provider implements IEditorProvider {
+    component: string;
+}
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/modules/gct-form/editor/gct-form-radio/index.mjs

@@ -0,0 +1,14 @@
+import { EditorType } from '../../constants/editor-type/editor-type.mjs';
+import { widthEditorInstall } from '../../utils/width-install/width-install.mjs';
+import { GctFormRadio as GctFormRadio$1 } from './gct-form-radio.mjs';
+
+class Provider {
+  component = "gct-form-radio";
+}
+const GctFormRadio = widthEditorInstall(
+  EditorType.RADIO,
+  () => new Provider(),
+  GctFormRadio$1
+);
+
+export { Provider, GctFormRadio as default };

package/es/modules/gct-form/editor/gct-form-select/gct-form-select.css

@@ -0,0 +1,83 @@
+@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-gct-form-select {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.gct-gct-form-select__before-text {
+  flex-shrink: 0;
+  padding-right: var(--gct-padding-4);
+}
+
+.gct-gct-form-select__after-text {
+  flex-shrink: 0;
+  padding-left: var(--gct-padding-4);
+}
+
+.gct-gct-form-select__content {
+  flex-grow: 1;
+  width: 100%;
+}