@oinone/kunlun-vue-admin-base 6.3.9 → 6.4.1

package/src/container/block/DefaultContainers.vue

@@ -1,13 +1,11 @@
 <script lang="ts">
-import { DslDefinition } from '@oinone/kunlun-dsl';
-import { CastHelper, CSSStyle, StringHelper } from '@oinone/kunlun-shared';
+import { CastHelper, CSSStyle } from '@oinone/kunlun-shared';
 import {
   FlexDirection,
   FormLayout,
   OioRow,
   OioRowProps,
   PropRecordHelper,
-  StyleHelper,
   useOioFormLayoutContext
 } from '@oinone/kunlun-vue-ui-antd';
 import { onAllMounted } from '@oinone/kunlun-vue-widget';
@@ -22,9 +20,6 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ...OioRowProps,
-    template: {
-      type: Object as PropType<DslDefinition>
-    },
     invisible: {
       type: Boolean,
       default: false
@@ -121,7 +116,6 @@ export default defineComponent({
       const borderStyle = `${props.borderSize} ${props.borderStyle} ${props.borderColor}`;
 
       const style: CSSStyle = {
-        ...CastHelper.cast(StyleHelper.parse(props.template?.style) || {}),
         flexDirection: props.flexDirection || '',
         padding: props.padding,
         margin: props.margin,
@@ -156,17 +150,13 @@ export default defineComponent({
     };
   },
   render() {
-    const { $attrs, $slots, template, invisible, style } = this;
+    const { $attrs, $slots, invisible, style } = this;
     return withDirectives(
       createVNode(
         OioRow,
         {
           ...PropRecordHelper.convert(OioRowProps, CastHelper.cast(this)),
-          ...PropRecordHelper.collectionBasicProps(
-            $attrs,
-            StringHelper.append([], CastHelper.cast(template?.class)),
-            style
-          ),
+          ...PropRecordHelper.collectionBasicProps($attrs, ['default-containers'], style),
           gutter: []
         },
         PropRecordHelper.collectionSlots($slots, [{ origin: 'default', isNotNull: true }])

package/src/container/block/DefaultRow.vue

@@ -1,13 +1,11 @@
 <script lang="ts">
-import { DslDefinition } from '@oinone/kunlun-dsl';
-import { CastHelper, CSSStyle, StringHelper } from '@oinone/kunlun-shared';
+import { CastHelper, CSSStyle } from '@oinone/kunlun-shared';
 import {
   FlexDirection,
   FormLayout,
   OioRow,
   OioRowProps,
   PropRecordHelper,
-  StyleHelper,
   useOioFormLayoutContext
 } from '@oinone/kunlun-vue-ui-antd';
 import { onAllMounted } from '@oinone/kunlun-vue-widget';
@@ -22,9 +20,6 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ...OioRowProps,
-    template: {
-      type: Object as PropType<DslDefinition>
-    },
     invisible: {
       type: Boolean,
       default: false
@@ -59,8 +54,8 @@ export default defineComponent({
     return {};
   },
   render() {
-    const { $attrs, $slots, template, invisible, flexDirection } = this;
-    const style: CSSStyle = CastHelper.cast(StyleHelper.parse(template?.style) || {});
+    const { $attrs, $slots, invisible, flexDirection } = this;
+    const style = {} as CSSStyle;
     if (!style.flexDirection && flexDirection) {
       style.flexDirection = flexDirection;
     }
@@ -69,11 +64,7 @@ export default defineComponent({
         OioRow,
         {
           ...PropRecordHelper.convert(OioRowProps, CastHelper.cast(this)),
-          ...PropRecordHelper.collectionBasicProps(
-            $attrs,
-            StringHelper.append([], CastHelper.cast(template?.class)),
-            style
-          )
+          ...PropRecordHelper.collectionBasicProps($attrs, ['default-row'], style)
         },
         PropRecordHelper.collectionSlots($slots, [{ origin: 'default', isNotNull: true }])
       ),

package/src/container/collapse/DefaultCollapse.vue

@@ -1,15 +1,12 @@
 <script lang="ts">
-import { DslDefinition } from '@oinone/kunlun-dsl';
 import {
-  CastHelper,
   OioBaseContainerProps,
   OioCollapse,
   OioCollapseExpandIconPosition,
   OioCollapseInstance,
   OioCollapseMethod,
   OioCollapseType,
-  PropRecordHelper,
-  StringHelper
+  PropRecordHelper
 } from '@oinone/kunlun-vue-ui-antd';
 import { createVNode, defineComponent, onMounted, PropType, ref } from 'vue';
 
@@ -20,9 +17,6 @@ export default defineComponent({
   },
   props: {
     ...OioBaseContainerProps,
-    template: {
-      type: Object as PropType<DslDefinition>
-    },
     activeKey: {
       type: [String, Array] as PropType<string | string[]>
     },
@@ -80,11 +74,7 @@ export default defineComponent({
       OioCollapse,
       {
         ref: 'origin',
-        ...PropRecordHelper.collectionBasicProps(
-          this.$attrs,
-          StringHelper.append(['oio-default-collapse'], CastHelper.cast(this.template?.class)),
-          CastHelper.cast(this.template?.style)
-        ),
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, ['oio-default-collapse']),
         activeKey: this.activeKey,
         onActiveKeyChange: this.onActiveKeyChange,
         type: this.type,

package/src/container/collapse/DefaultCollapsePanelWidget.ts

@@ -63,6 +63,8 @@ export class DefaultCollapsePanelWidget extends BasePackWidget {
       widgetComponent,
       {
         key: this.currentTabKey,
+        class: this.class,
+        style: this.style,
         header: translateValueByKey(this.title),
         invisible: this.invisible,
         disabled: this.disabled,

package/src/container/collapse/DefaultCollapseWidget.ts

@@ -75,7 +75,7 @@ export class DefaultCollapseWidget extends BasePackWidget {
 
   @Widget.Reactive()
   protected get expandIconPosition() {
-    return this.getDsl()?.expandIconPosition?.toLowerCase() || OioCollapseExpandIconPosition.right;
+    return this.getDsl().expandIconPosition?.toLowerCase() || OioCollapseExpandIconPosition.right;
   }
 
   @Widget.Method()

package/src/container/group/DefaultGroup.vue

@@ -1,14 +1,8 @@
 <script lang="ts">
 import { DslDefinition } from '@oinone/kunlun-dsl';
 import { translateValueByKey } from '@oinone/kunlun-engine';
-import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
-import {
-  FormLayout,
-  OioGroup,
-  PropRecordHelper,
-  StyleHelper,
-  useOioFormLayoutContext
-} from '@oinone/kunlun-vue-ui-antd';
+import { CSSStyle } from '@oinone/kunlun-shared';
+import { FormLayout, OioGroup, PropRecordHelper, useOioFormLayoutContext } from '@oinone/kunlun-vue-ui-antd';
 import { createVNode, defineComponent, PropType, Slot, vShow, withDirectives } from 'vue';
 import { defaultFlexResolve } from '../../tags/resolve/helper';
 import DefaultGroupTitleToolbar from './DefaultGroupTitleToolbar.vue';
@@ -48,6 +42,21 @@ export default defineComponent({
     border: {
       type: Boolean,
       default: true
+    },
+    bizStyle: {
+      type: String
+    },
+    wrapperClassName: {
+      type: [String, Array] as PropType<string | string[]>
+    },
+    wrapperStyle: {
+      type: [String, Object] as PropType<string | CSSStyle>
+    },
+    toolbarClassName: {
+      type: [String, Array] as PropType<string | string[]>
+    },
+    toolbarStyle: {
+      type: [String, Object] as PropType<string | CSSStyle>
     }
   },
   setup(props) {
@@ -56,7 +65,22 @@ export default defineComponent({
     return {};
   },
   render() {
-    const { $attrs, $slots, template, title, description, help, invisible, titleToolbarInvisible, border } = this;
+    const {
+      $attrs,
+      $slots,
+      template,
+      title,
+      description,
+      help,
+      invisible,
+      titleToolbarInvisible,
+      border,
+      bizStyle,
+      wrapperClassName,
+      wrapperStyle,
+      toolbarClassName,
+      toolbarStyle
+    } = this;
     const { default: defaultSlot, titleToolbar: titleToolbarSlot } = PropRecordHelper.collectionSlots($slots, [
       { origin: 'default', isNotNull: true },
       'titleToolbar'
@@ -72,18 +96,15 @@ export default defineComponent({
       createVNode(
         OioGroup,
         {
-          ...PropRecordHelper.collectionBasicProps(
-            $attrs,
-            StringHelper.append(['oio-default-group'], CastHelper.cast(template?.class)),
-            CastHelper.cast(template?.style)
-          ),
+          ...PropRecordHelper.collectionBasicProps($attrs, ['oio-default-group']),
           title: !title && titleToolbarInvisible ? false : title,
+          bizStyle,
           description,
           border,
-          wrapperClassName: StringHelper.append([], CastHelper.cast(template?.wrapperClassName)),
-          wrapperStyle: StyleHelper.parse(template?.wrapperStyle),
-          toolbarClassName: StringHelper.append([], CastHelper.cast(template?.toolbarClassName)),
-          toolbarStyle: StyleHelper.parse(template?.toolbarStyle),
+          wrapperClassName,
+          wrapperStyle,
+          toolbarClassName,
+          toolbarStyle,
           help
         },
         children

package/src/container/group/DefaultGroupTitleToolbar.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { useInjectMetaContext, useProviderMetaContext } from '@oinone/kunlun-vue-widget';
 import { computed, defineComponent } from 'vue';
-import { useInjectMetaContext, useProviderMetaContext } from '../../tags';
 
 export default defineComponent({
   name: 'DefaultGroupTitleToolbar',

package/src/container/group/DefaultGroupWidget.ts

@@ -1,6 +1,8 @@
 import { DEFAULT_SLOT_NAME } from '@oinone/kunlun-dsl';
-import { BooleanHelper } from '@oinone/kunlun-shared';
+import { isMinimalismTheme } from '@oinone/kunlun-engine';
+import { BooleanHelper, CSSClass, CSSStyle } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
+import { GroupStyle } from '@oinone/kunlun-vue-ui-antd';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { isNil, isString } from 'lodash-es';
 import { BasePackWidget } from '../../basic';
@@ -10,16 +12,6 @@ const TITLE_TOOLBAR_SLOT_NAME = 'titleToolbar';
 
 @SPI.ClassFactory(BasePackWidget.Token({}))
 export class DefaultGroupWidget extends BasePackWidget {
-  /**
-   * @deprecated 不允许通过api设置title
-   */
-  public setTitle(title: string) {
-    const dsl = this.getDsl();
-    if (dsl) {
-      dsl.title = title;
-    }
-  }
-
   public initialize(props) {
     if (!props.slotNames) {
       props.slotNames = [DEFAULT_SLOT_NAME, TITLE_TOOLBAR_SLOT_NAME];
@@ -35,6 +27,18 @@ export class DefaultGroupWidget extends BasePackWidget {
     return this.executeLabelExpression(title as string);
   }
 
+  @Widget.Reactive()
+  public get bizStyle(): string | undefined {
+    const { bizStyle } = this.getDsl();
+    if (bizStyle) {
+      return bizStyle;
+    }
+    if (isMinimalismTheme()) {
+      return GroupStyle.style1;
+    }
+    return GroupStyle.style2;
+  }
+
   @Widget.Reactive()
   public get description(): string {
     return this.getDsl().desc || '';
@@ -49,6 +53,26 @@ export class DefaultGroupWidget extends BasePackWidget {
     return border;
   }
 
+  @Widget.Reactive()
+  public get wrapperClassName(): CSSClass | undefined {
+    return this.getDsl().wrapperClassName;
+  }
+
+  @Widget.Reactive()
+  public get wrapperStyle(): string | Partial<CSSStyle> | undefined {
+    return this.getDsl().wrapperStyle;
+  }
+
+  @Widget.Reactive()
+  public get toolbarClassName(): CSSClass | undefined {
+    return this.getDsl().toolbarClassName;
+  }
+
+  @Widget.Reactive()
+  public get toolbarStyle(): string | Partial<CSSStyle> | undefined {
+    return this.getDsl().toolbarStyle;
+  }
+
   @Widget.Reactive()
   public get help() {
     return this.executeExpression(this.getDsl().help as string, this.getDsl().help);
@@ -62,4 +86,14 @@ export class DefaultGroupWidget extends BasePackWidget {
     }
     return undefined;
   }
+
+  /**
+   * @deprecated 不允许通过api设置title
+   */
+  public setTitle(title: string) {
+    const dsl = this.getDsl();
+    if (dsl) {
+      dsl.title = title;
+    }
+  }
 }

package/src/container/media/icon/DefaultIcon.vue

@@ -1,14 +1,17 @@
 <template>
-  <div class="default-icon">
+  <div v-bind="basicProps">
     <oio-icon :icon="icon" :size="size" :color="color" />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { OioIcon } from '@oinone/kunlun-vue-ui-common';
+import { OioIcon, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { computed, defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'DefaultIcon',
+  components: {
+    OioIcon
+  },
   props: {
     icon: {
       type: String
@@ -20,10 +23,15 @@ export default defineComponent({
       type: String
     }
   },
-  components: {
-    OioIcon
-  },
-  setup(props) {}
+  setup(props, { attrs }) {
+    const basicProps = computed(() => {
+      return PropRecordHelper.collectionBasicProps(attrs, ['default-icon']);
+    });
+
+    return {
+      basicProps
+    };
+  }
 });
 </script>
 <style lang="scss">

package/src/container/media/paragraph/DefaultParagraph.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="media-paragraph" :style="colStyle || {}">
+  <div v-bind="basicProps">
     <div v-html="realContent" class="paragraph-content" :class="[borderClassName]" />
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, PropType, CSSProperties } from 'vue';
+import { CSSStyle } from '@oinone/kunlun-shared';
+import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { computed, defineComponent, PropType } from 'vue';
 
 export default defineComponent({
   name: 'DefaultParagraph',
@@ -16,16 +18,21 @@ export default defineComponent({
       type: String
     },
     colStyle: {
-      type: Object as PropType<CSSProperties>
+      type: [String, Object] as PropType<string | CSSStyle>
     }
   },
-  setup(props) {
+  setup(props, { attrs }) {
+    const basicProps = computed(() => {
+      return PropRecordHelper.collectionBasicProps(attrs, ['media-paragraph'], props.colStyle);
+    });
+
     const borderClassName = computed(() => {
       if (props.borderMode) {
         return `border-${props.borderMode.toLowerCase()}`;
       }
       return 'border-none';
     });
+
     const realContent = computed(() => {
       try {
         return decodeURI(props.content || '');
@@ -33,7 +40,9 @@ export default defineComponent({
         return props.content || '';
       }
     });
+
     return {
+      basicProps,
       realContent,
       borderClassName
     };

package/src/container/media/picture/DefaultPicture.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="default-picture">
+  <div v-bind="basicProps">
     <a-image :width="width" :height="height" :src="url" />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { Image as AImage } from 'ant-design-vue';
+import { computed, defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'DefaultPicture',
+  components: {
+    AImage
+  },
   props: {
     url: {
       type: String
@@ -19,7 +24,15 @@ export default defineComponent({
       type: String
     }
   },
-  setup(props) {}
+  setup(props, { attrs }) {
+    const basicProps = computed(() => {
+      return PropRecordHelper.collectionBasicProps(attrs, ['default-picture']);
+    });
+
+    return {
+      basicProps
+    };
+  }
 });
 </script>
 <style lang="scss">

package/src/container/media/text-info/DefaultTextInfo.vue

@@ -1,10 +1,12 @@
 <script lang="ts">
+import { StringHelper } from '@oinone/kunlun-shared';
+import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
 import { createVNode, defineComponent, PropType, VNode } from 'vue';
-import { TextInfoJustifyContent, TextInfoMediaType, TextInfoTemplateType } from './typing';
-import DefaultTextInfoValue from './DefaultTextInfoValue.vue';
-import DefaultTextInfoLabel from './DefaultTextInfoLabel.vue';
 import Icon from '../../../tags/Icon.vue';
 import Picture from '../../../tags/Picture.vue';
+import DefaultTextInfoLabel from './DefaultTextInfoLabel.vue';
+import DefaultTextInfoValue from './DefaultTextInfoValue.vue';
+import { TextInfoJustifyContent, TextInfoMediaType, TextInfoTemplateType } from './typing';
 
 export default defineComponent({
   name: 'DefaultTextInfo',
@@ -40,6 +42,7 @@ export default defineComponent({
     }
   },
   render() {
+    const { $attrs } = this;
     const picIconProperties = this.picIconWidget;
     const childrenVNode = [] as VNode[];
     let picIconVNode;
@@ -92,7 +95,12 @@ export default defineComponent({
         childrenVNode.push(createVNode('div', { class: 'runtime-val-highlight-label' }, [labelVNode]));
       } else if (this.templateType === TextInfoTemplateType.PIC_HIGHLIGHT) {
         childrenVNode.push(picIconVNode);
-        childrenVNode.push(createVNode('div', { class: 'runtime-picture-highlight' }, [labelVNode, valueVNode]));
+        childrenVNode.push(
+          createVNode('div', { class: StringHelper.append(['runtime-picture-highlight'], this.fieldWidget?.class) }, [
+            labelVNode,
+            valueVNode
+          ])
+        );
       } else if (this.templateType === TextInfoTemplateType.PIC_VAL_HIGHLIGHT) {
         childrenVNode.push(
           createVNode('div', { class: 'runtime-pic-val-highlight' }, [
@@ -108,8 +116,7 @@ export default defineComponent({
         ])
       );
     }
-
-    return createVNode('div', {}, childrenVNode);
+    return createVNode('div', PropRecordHelper.collectionBasicProps($attrs, ['default-text-info']), childrenVNode);
   }
 });
 </script>
@@ -120,6 +127,7 @@ export default defineComponent({
   align-items: center;
   width: $width;
 }
+
 .runtime-picture-highlight {
   display: flex;
 

package/src/container/spin/DefaultSpin.vue

@@ -1,9 +1,7 @@
 <script lang="ts">
 import { DslDefinition } from '@oinone/kunlun-dsl';
-import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
 import {
   FormLayout,
-  OioGroup,
   OioSpin,
   OioSpinProps,
   PropRecordHelper,
@@ -72,11 +70,7 @@ export default defineComponent({
       createVNode(
         OioSpin,
         {
-          ...PropRecordHelper.collectionBasicProps(
-            $attrs,
-            StringHelper.append(['oio-default-spin'], CastHelper.cast(template?.class)),
-            CastHelper.cast(template?.style)
-          ),
+          ...PropRecordHelper.collectionBasicProps($attrs, ['oio-default-spin']),
           loading,
           loadingIndicator,
           wrapperClassName,

package/src/container/tabs/DefaultTab.vue

@@ -65,6 +65,7 @@ export default defineComponent({
     };
   },
   render() {
+    const { $attrs } = this;
     const slots = PropRecordHelper.collectionSlots(this.$slots, [
       {
         origin: 'default',
@@ -84,7 +85,10 @@ export default defineComponent({
             createVNode('div', { class: 'oio-tab' }, [
               createVNode(
                 'div',
-                { class: ['oio-tab-content', `oio-tab-${this.tabPosition}-content`] },
+                PropRecordHelper.collectionBasicProps($attrs, [
+                  'oio-tab-content',
+                  `oio-tab-${this.tabPosition}-content`
+                ]),
                 {
                   default: () => [
                     DslRender.render({

package/src/container/tabs/DefaultTabWidget.ts

@@ -84,6 +84,8 @@ export class DefaultTabWidget extends BasePackWidget {
       widgetComponent,
       {
         key: this.currentTabKey,
+        class: this.class,
+        style: this.style,
         invisible: this.invisible,
         disabled: this.disabled,
         forceRender: this.forceRender

package/src/container/tabs/DefaultTabs.vue

@@ -4,6 +4,7 @@ import {
   OioTabAlign,
   OioTabPosition,
   OioTabs,
+  OioTabsBizStyle,
   PropRecordHelper
 } from '@oinone/kunlun-vue-ui-antd';
 import { computed, createVNode, defineComponent, PropType } from 'vue';
@@ -32,6 +33,9 @@ export default defineComponent({
     tabAlign: {
       type: String as PropType<OioTabAlign>,
       default: OioTabAlign.LEFT
+    },
+    bizStyle: {
+      type: String as PropType<OioTabsBizStyle>
     }
   },
   setup(props) {
@@ -52,14 +56,16 @@ export default defineComponent({
     };
   },
   render() {
+    const { $attrs } = this;
     return createVNode(
       OioTabs,
       {
-        class: ['oio-default-tabs', this.tabAlignClass],
+        ...PropRecordHelper.collectionBasicProps($attrs, ['oio-default-tabs', this.tabAlignClass]),
         id: this.currentHandle,
         activeKey: this.activeKey,
         tabPosition: this.tabPosition,
         verticalHeight: 264,
+        bizStyle: this.bizStyle,
         layout: this.layout,
         invisible: this.invisible,
         disabled: this.disabled,

package/src/container/tabs/DefaultTabsWidget.ts

@@ -57,6 +57,11 @@ export class DefaultTabsWidget extends BasePackWidget {
     return undefined;
   }
 
+  @Widget.Reactive()
+  public get bizStyle(): string | undefined {
+    return this.getDsl().bizStyle;
+  }
+
   @Widget.Reactive()
   protected get defaultActiveIndex(): number | undefined {
     const { defaultActiveIndex } = this.getDsl();

package/src/field/cascader/DefaultCascader.vue

@@ -10,10 +10,11 @@ import {
   defaultLabelsSeparator,
   OioCascader,
   OioTreeNode,
-  SelectMode
+  SelectMode,
+  useInjectOioDefaultFormContext
 } from '@oinone/kunlun-vue-ui-antd';
 import { computed, createVNode, defineComponent, PropType, VNode, vShow, withDirectives, withModifiers } from 'vue';
-import { OioCommonProps, OioMetadataProps, useInjectOioDefaultFormContext } from '../../basic';
+import { OioCommonProps, OioMetadataProps } from '../../basic';
 import { TreeData } from '../../typing';
 
 /**

package/src/field/cascader/FormCascaderFieldWidget.ts

@@ -1,6 +1,6 @@
 import { ActiveRecord, ActiveRecords, RuntimeRelationField } from '@oinone/kunlun-engine';
-import { BooleanHelper, ObjectUtils } from '@oinone/kunlun-shared';
-import { CascaderCheckedStrategy, CascaderItem, OioTreeNode, SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { BooleanHelper, ObjectUtils, OioTreeNode } from '@oinone/kunlun-shared';
+import { CascaderCheckedStrategy, CascaderItem, SelectMode } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { isBoolean } from 'lodash-es';
 import { FormComplexFieldProps } from '../../basic';

package/src/field/detail/date/range/ReadonlyDateTimeRangePicker.vue

@@ -1,5 +1,7 @@
 <template>
   <default-form-item
+    :class="$attrs.class"
+    :style="$attrs.style"
     :name="itemName"
     :invisible="invisible"
     :colon="colon"