diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 75dc30d6c160532409759886057ebf414d873f83..98e3e4dc8041455ce1ea93e190d0b38f9fc8bc1d 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -83,6 +83,10 @@ export default defineConfig({ text: '实时时间', link: '/guide/screen-real-time', }, + { + text: '面板按钮', + link: '/guide/custom-btn', + }, ], }, ], diff --git a/docs/guide/custom-btn.md b/docs/guide/custom-btn.md new file mode 100644 index 0000000000000000000000000000000000000000..2b21109a1a3927812cfd3835603816890d810ab7 --- /dev/null +++ b/docs/guide/custom-btn.md @@ -0,0 +1,63 @@ +# 大屏按钮 + +大屏按钮插件主要是用于在大屏模式下对布局面板里面的按钮进行样式优化，通过配置参数，可以得到多种外观的按钮。 + +## 效果呈现 + +通过配置按钮参数buttonName，展现不同样式的按钮。buttonName的值与效果图如下： + +* CustomButton1 + + ![image-20240813200412990](../public/img/custombtn1.png) + +* CustomButton2 + + ![image-20240813200256106](../public/img/custombtn2.png) + +* CustomButton3 + + ![image-20240813200412990](../public/img/custombtn3.png) + +* CustomButton4 + + ![image-20240813200412990](../public/img/custombtn4.png) + +* CustomButton5 + + ![image-20240813200412990](../public/img/custombtn5.png) + +* CustomButton6 + + ![image-20240813200412990](../public/img/custombtn6.png) + + +## 插件 + +该插件隶属于自定义部件插件（基于面板按钮进行扩展），下方数据导入应用即可使用 + +::: details 点我查看代码 + +```json +[ + { + "plugintype": "CUSTOM", + "codename": "UsrPFPlugin0813816947", + "plugintag": "CUSTOM_BTN", + "pssyspfpluginname": "自定义按钮" + } +] +``` + +::: + +## 配置 + +| 参数 | 值 | 说明 | +| ----------- | ----------------- | ---------------------- | +| buttonName | CustomButton[1~6] | 用来确定按钮的主要形状 | +| borderColor | string | 用来确定按钮的边框色 | +| color | string | 用来确定按钮的文字颜色 | +| bgColor | string | 用来确定按钮的背景颜色 | + +*注：未设置的颜色则使用默认主题颜色* + diff --git a/docs/public/img/custombtn1.png b/docs/public/img/custombtn1.png new file mode 100644 index 0000000000000000000000000000000000000000..ad3b02db4c91047df0661589b769aa43028c10a6 Binary files /dev/null and b/docs/public/img/custombtn1.png differ diff --git a/docs/public/img/custombtn2.png b/docs/public/img/custombtn2.png new file mode 100644 index 0000000000000000000000000000000000000000..1db8c68c6c7319fad651347709faa6a967986d96 Binary files /dev/null and b/docs/public/img/custombtn2.png differ diff --git a/docs/public/img/custombtn3.png b/docs/public/img/custombtn3.png new file mode 100644 index 0000000000000000000000000000000000000000..c62d50d47f9f0054395dcdfc6998699ed8b74413 Binary files /dev/null and b/docs/public/img/custombtn3.png differ diff --git a/docs/public/img/custombtn4.png b/docs/public/img/custombtn4.png new file mode 100644 index 0000000000000000000000000000000000000000..860f3be9a2f6dd399aa16522d5bbfbbe7ad036a0 Binary files /dev/null and b/docs/public/img/custombtn4.png differ diff --git a/docs/public/img/custombtn5.png b/docs/public/img/custombtn5.png new file mode 100644 index 0000000000000000000000000000000000000000..90e8bce0008473187673beb7e42203b0e75cea3b Binary files /dev/null and b/docs/public/img/custombtn5.png differ diff --git a/docs/public/img/custombtn6.png b/docs/public/img/custombtn6.png new file mode 100644 index 0000000000000000000000000000000000000000..9b72fe3fe3ed56fc21240d09d3c6f52da41820ec Binary files /dev/null and b/docs/public/img/custombtn6.png differ diff --git a/src/custom-button/component/custom-button1.tsx b/src/custom-button/component/custom-button1.tsx new file mode 100644 index 0000000000000000000000000000000000000000..aa38f0ccd1123d4ddbe52172d9a345396991253b --- /dev/null +++ b/src/custom-button/component/custom-button1.tsx @@ -0,0 +1,30 @@ +import { defineComponent } from 'vue'; + +export const CustomButton1 = defineComponent({ + name: 'CustomButton1', + render() { + return ( + + + + + + + + + ); + }, +}); diff --git a/src/custom-button/component/custom-button2.tsx b/src/custom-button/component/custom-button2.tsx new file mode 100644 index 0000000000000000000000000000000000000000..e53f939ada2caf520d242cff9165b0d5ffe7fbf7 --- /dev/null +++ b/src/custom-button/component/custom-button2.tsx @@ -0,0 +1,45 @@ +import { defineComponent } from 'vue'; + +export const CustomButton2 = defineComponent({ + name: 'CustomButton2', + render() { + return ( + + + + + + + + + + + + ); + }, +}); diff --git a/src/custom-button/component/custom-button3.tsx b/src/custom-button/component/custom-button3.tsx new file mode 100644 index 0000000000000000000000000000000000000000..7542ea9142809c40cd00648d30d2c4dd89d6a58c --- /dev/null +++ b/src/custom-button/component/custom-button3.tsx @@ -0,0 +1,65 @@ +import { defineComponent } from 'vue'; + +export const CustomButton3 = defineComponent({ + name: 'CustomButton3', + render() { + return ( + + + + + + + + + + + + + + + + ); + }, +}); diff --git a/src/custom-button/component/custom-button4.tsx b/src/custom-button/component/custom-button4.tsx new file mode 100644 index 0000000000000000000000000000000000000000..3eaa976ba27a4bd93c71a37f0865f15a238184ab --- /dev/null +++ b/src/custom-button/component/custom-button4.tsx @@ -0,0 +1,35 @@ +import { defineComponent } from 'vue'; + +export const CustomButton4 = defineComponent({ + name: 'CustomButton4', + render() { + return ( + + + + + + + + + + ); + }, +}); diff --git a/src/custom-button/component/custom-button5.tsx b/src/custom-button/component/custom-button5.tsx new file mode 100644 index 0000000000000000000000000000000000000000..6e7815f3fa90583132df9e28863e48ff869226ce --- /dev/null +++ b/src/custom-button/component/custom-button5.tsx @@ -0,0 +1,35 @@ +import { defineComponent } from 'vue'; + +export const CustomButton5 = defineComponent({ + name: 'CustomButton5', + render() { + return ( + + + + + + + + + + ); + }, +}); diff --git a/src/custom-button/component/custom-button6.tsx b/src/custom-button/component/custom-button6.tsx new file mode 100644 index 0000000000000000000000000000000000000000..dec9d2191c4329d70d5d52c2cd1d3a71ec94d51b --- /dev/null +++ b/src/custom-button/component/custom-button6.tsx @@ -0,0 +1,65 @@ +import { defineComponent } from 'vue'; + +export const CustomButton6 = defineComponent({ + name: 'CustomButton6', + render() { + return ( + + + + + + + + + + + + + + + + ); + }, +}); diff --git a/src/custom-button/component/index.ts b/src/custom-button/component/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..bea17cb0addde874d305bc7be0d6cb96970e91f8 --- /dev/null +++ b/src/custom-button/component/index.ts @@ -0,0 +1,6 @@ +export { CustomButton1 } from './custom-button1'; +export { CustomButton2 } from './custom-button2'; +export { CustomButton3 } from './custom-button3'; +export { CustomButton4 } from './custom-button4'; +export { CustomButton5 } from './custom-button5'; +export { CustomButton6 } from './custom-button6'; diff --git a/src/custom-button/custom-button.controller.ts b/src/custom-button/custom-button.controller.ts new file mode 100644 index 0000000000000000000000000000000000000000..eb2f5d94509dc9d8b609a3d966e8732d3e0e5cc3 --- /dev/null +++ b/src/custom-button/custom-button.controller.ts @@ -0,0 +1,164 @@ +import { + PanelController, + PanelItemController, + PanelNotifyState, + UIActionButtonState, + UIActionUtil, + ViewLayoutPanelController, +} from '@ibiz-template/runtime'; +import { IPanelButton } from '@ibiz/model-core'; +import { CustomButtonState } from './custom-button.state'; + +export class CustomBtnController extends PanelItemController { + declare state: CustomButtonState; + + protected createState(): CustomButtonState { + return new CustomButtonState(this.parent?.state); + } + + /** + * 面板控制器 + * + * @type {ViewLayoutPanelController} + * @memberof PanelButtonController + */ + declare panel: ViewLayoutPanelController; + + /** + * 父容器数据对象数据 + * @author lxm + * @date 2023-07-15 01:33:58 + * @readonly + * @type {IData} + */ + get data(): IData { + return this.dataParent.data; + } + + /** + * Creates an instance of PanelButtonController. + * @param {IPanelButton} model + * @param {PanelController} panel + * @param {PanelItemController} [parent] + * @memberof PanelButtonController + */ + constructor( + model: IPanelButton, + panel: PanelController, + parent?: PanelItemController, + ) { + super(model, panel, parent); + this.state.uiActionState = this.createUIActionState(); + } + + /** + * 初始化 + * + * @return {*} {Promise} + * @memberof PanelButtonController + */ + async onInit(): Promise { + await super.onInit(); + this.updateButtonState(); + } + + /** + * 创建界面行为状态对象 + * + * @protected + * @return {*} {PanelButtonState} + * @memberof PanelButtonController + */ + protected createUIActionState(): UIActionButtonState { + const { uiactionId, name } = this.model; + return new UIActionButtonState( + name!, + this.panel.context.srfappid!, + uiactionId, + ); + } + + /** + * 面板数据变更通知(由面板控制器调用) + * + * @param {string[]} names + * @memberof PanelButtonController + */ + async dataChangeNotify(names: string[]): Promise { + await this.updateButtonState(); + super.dataChangeNotify(names); + } + + /** + * 面板状态变更通知 + * + * @param {PanelNotifyState} _state + * @memberof PanelButtonController + */ + async panelStateNotify(_state: PanelNotifyState): Promise { + await this.updateButtonState(); + super.panelStateNotify(_state); + } + + /** + * 更新按钮权限状态 + * + * @memberof PanelButtonController + */ + async updateButtonState(): Promise { + await this.state.uiActionState.update( + this.panel.context, + this.data, + this.panel.model.appDataEntityId, + ); + } + + /** + * 行为点击 + * - 在行为参数中传递panelDataParent(面板项数据父容器标识) + * @param {MouseEvent} event + * @return {*} {Promise} + * @memberof PanelButtonController + */ + async onActionClick(event: MouseEvent): Promise { + const { uiactionId, actionType } = this.model; + if (actionType === 'NONE') { + return; + } + event.stopPropagation(); + event.preventDefault(); + await UIActionUtil.execAndResolved( + uiactionId!, + { + context: this.panel.context, + params: { + panelDataParent: this.dataParent.model.id!, + ...this.panel.params, + }, + data: [this.data], + view: this.panel.view, + event, + noWaitRoute: true, + }, + this.model.appId, + ); + } + + calcItemVisible(data: IData): void { + // 权限不显示时就一定不显示 + if (this.state.uiActionState.visible === false) { + this.state.visible = false; + return; + } + super.calcItemVisible(data); + } + + calcItemDisabled(data: IData): void { + // 权限不显示时就一定禁用 + if (this.state.uiActionState.disabled === true) { + this.state.disabled = true; + return; + } + super.calcItemDisabled(data); + } +} diff --git a/src/custom-button/custom-button.provider.ts b/src/custom-button/custom-button.provider.ts new file mode 100644 index 0000000000000000000000000000000000000000..d357692ab8d1a8d4da6f1ac9a290ab8b69916d56 --- /dev/null +++ b/src/custom-button/custom-button.provider.ts @@ -0,0 +1,21 @@ +import { + IPanelItemProvider, + PanelController, + PanelItemController, +} from '@ibiz-template/runtime'; +import { IPanelItem } from '@ibiz/model-core'; +import { CustomBtnController } from './custom-button.controller'; + +export class CustomBtnProvider implements IPanelItemProvider { + component: string = 'CustomButton'; + + async createController( + panelItem: IPanelItem, + panel: PanelController, + parent: PanelItemController | undefined, + ): Promise { + const c = new CustomBtnController(panelItem, panel, parent); + await c.init(); + return c; + } +} diff --git a/src/custom-button/custom-button.scss b/src/custom-button/custom-button.scss new file mode 100644 index 0000000000000000000000000000000000000000..dff5b86f2caf1167448d32f43f1e2b4ff0b2275c --- /dev/null +++ b/src/custom-button/custom-button.scss @@ -0,0 +1,44 @@ +/* stylelint-disable custom-property-pattern */ +@include b('panel-button'){ + @include when('custon-btn'){ + padding: 0; + } + } + @include b('panel-button-custon-btn'){ + position:relative; + width: 100%; + height: 100%; + padding: getCssVar(spacing-tight); + color: var(--svgColor,getCssVar(screen-dashboard,text-color)); + text-align: center; + cursor: pointer; + + >svg{ + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + + .dv-button-svg { + display: block; + flex: 1 1 0%; + width: 100%; + height: 100%; + filter: drop-shadow(var(--svgBorderColor, getCssVar(screen-dashboard,primary-color)) 0 0 2px); + } + + .dv-button-svg-bg { + opacity: var(--svgBgOpacity); + fill: var(--svgBgColor,getCssVar(screen-dashboard,primary-color)); + stroke: transparent; + stroke-width: 0; + } + + .dv-button-svg-line { + fill: transparent; + stroke: var(--svgColor,getCssVar(screen-dashboard,primary-color)); + stroke-width: 2; + vector-effect: non-scaling-stroke; + } + } \ No newline at end of file diff --git a/src/custom-button/custom-button.state.ts b/src/custom-button/custom-button.state.ts new file mode 100644 index 0000000000000000000000000000000000000000..9e0c15eba2a254c5a5d4da46b3557166691b306c --- /dev/null +++ b/src/custom-button/custom-button.state.ts @@ -0,0 +1,19 @@ +import { PanelItemState, UIActionButtonState } from '@ibiz-template/runtime'; + +export class CustomButtonState extends PanelItemState { + /** + * 加载中 + * @author lxm + * @date 2023-07-21 10:11:21 + * @type {boolean} + */ + loading: boolean = false; + + /** + * 界面行为状态 + * @author lxm + * @date 2023-07-21 03:34:27 + * @type {UIActionButtonState} + */ + uiActionState!: UIActionButtonState; +} diff --git a/src/custom-button/custom-button.tsx b/src/custom-button/custom-button.tsx new file mode 100644 index 0000000000000000000000000000000000000000..50828f7ab99fceb1b2e0730130bba954322f7f90 --- /dev/null +++ b/src/custom-button/custom-button.tsx @@ -0,0 +1,185 @@ +import { useNamespace } from '@ibiz-template/vue3-util'; +import { IPanelButton } from '@ibiz/model-core'; +import { + PropType, + computed, + defineComponent, + h, + ref, + resolveComponent, +} from 'vue'; +import { + CustomButton1, + CustomButton2, + CustomButton3, + CustomButton4, + CustomButton5, + CustomButton6, +} from './component'; +import { CustomBtnController } from './custom-button.controller'; +import { showTitle } from '@ibiz-template/core'; +import './custom-button.scss' + +export const CustomButton = defineComponent({ + name: 'CustomButton', + components: { + CustomButton1, + CustomButton2, + CustomButton3, + CustomButton4, + CustomButton5, + CustomButton6, + }, + props: { + modelData: { + type: Object as PropType, + required: true, + }, + controller: { + type: CustomBtnController, + required: true, + }, + }, + setup(props) { + const ns = useNamespace('panel-button'); + + const { + caption, + captionItemName, + renderMode, + showCaption, + sysImage, + codeName, + itemStyle, + tooltip, + buttonCssStyle, + } = props.modelData; + + const { panel, state } = props.controller; + + const tempStyle = ref(''); + const svgStyle = ref({}); + + if (buttonCssStyle) { + tempStyle.value = buttonCssStyle; + } + + // 由于模型里参数没有，这里先写死,总共4个参数 + // 边框形状，border颜色，背景颜色，文字颜色，未设置时使用主题色 + const svgColor = ref('lightblue'); + const svgBorderColor = ref(); + const svgShape = ref('CustomButton5'); + const svgBgColor = ref(''); + const svgBgOpacity = ref(0.6); + + Object.assign(svgStyle.value, { + '--svgBorderColor': svgBorderColor.value, + '--svgColor': svgColor.value, + '--svgBgColor': svgBgColor.value, + '--svgBgOpacity': svgBgOpacity.value, + }); + + const captionText = computed(() => { + if (captionItemName && panel.data) { + return panel.data[captionItemName.toLowerCase()]; + } + return caption; + }); + + let isText = false; + if (Object.is(renderMode, 'LINK')) { + isText = true; + } + + const buttonType = computed(() => { + if (Object.is(renderMode, 'LINK')) { + return null; + } + switch (itemStyle) { + case 'PRIMARY': + return 'primary'; + case 'SUCCESS': + return 'success'; + case 'INFO': + return 'info'; + case 'WARNING': + return 'warning'; + case 'DANGER': + return 'danger'; + case 'INVERSE': + return 'info'; + default: + return null; + } + }); + + const handleButtonClick = async (event: MouseEvent): Promise => { + try { + state.loading = true; + await props.controller.onActionClick(event); + props.controller.onClick(); + } finally { + state.loading = false; + } + }; + + return { + ns, + isText, + captionText, + buttonType, + showCaption, + sysImage, + codeName, + state, + tooltip, + handleButtonClick, + buttonCssStyle, + svgShape, + tempStyle, + svgStyle, + itemStyle, + }; + }, + render() { + if (this.state.visible) { + const buttonName = resolveComponent(this.svgShape); + return ( +
+
+ {buttonName && h(buttonName)} +
+
+ + {this.showCaption ? ( + + {this.captionText} + + ) : ( + '' + )} +
+
+
+
+ ); + } + return null; + }, +}); diff --git a/src/custom-button/index.ts b/src/custom-button/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..4b37d46cda2b839a2f2b6f8357a57db4c55d20f4 --- /dev/null +++ b/src/custom-button/index.ts @@ -0,0 +1,10 @@ +import { withInstall } from '@ibiz-template/vue3-util'; +import { App } from 'vue'; +import { registerPanelItemProvider } from '@ibiz-template/runtime'; +import { CustomButton } from './custom-button'; +import { CustomBtnProvider } from './custom-button.provider'; + +export const IBizCustomButton = withInstall(CustomButton, function (v: App) { + v.component(CustomButton.name, CustomButton); + registerPanelItemProvider('CUSTOM_CUSTOM_BTN', () => new CustomBtnProvider()); +}); diff --git a/src/index.ts b/src/index.ts index dee0f00d680237a738d15866df12912515b5c1f1..04ce235b09f75bf53b19ec3fe77b389614cbd5d9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,7 +7,8 @@ import { IBizScreenRealTime } from './screen-real-time/index'; import { IBizScreenPanelContainer } from './screen-panel-container/index'; import { IBizCarouselList } from './carousel-list'; import { IBizCarouselGrid } from './carousel-grid'; -import { IBizRawItemSlider } from './rawitem-slider'; +import { IBizPercentPond } from './percent-pond'; +import { IBizCustomButton } from './custom-button'; // 自定义边框 import { @@ -42,7 +43,8 @@ export default { _app.use(IBizScreenPanelContainer); _app.use(IBizCarouselList); _app.use(IBizCarouselGrid); - _app.use(IBizRawItemSlider); + _app.use(IBizPercentPond); + _app.use(IBizCustomButton); // 自定义边框 _app.use(IBizCustomDV1); diff --git a/src/rawitem-slider/index.ts b/src/percent-pond/index.ts similarity index 44% rename from src/rawitem-slider/index.ts rename to src/percent-pond/index.ts index 538a6cd05470dfc889d16b971d91f89c11cda603..43aad4f4015c9834d782a9bbc87e2436f33e85cb 100644 --- a/src/rawitem-slider/index.ts +++ b/src/percent-pond/index.ts @@ -1,13 +1,13 @@ import { App } from 'vue'; import { withInstall } from '@ibiz-template/vue3-util'; import { registerEditorProvider } from '@ibiz-template/runtime'; -import { RawItemSlider } from './rawitem-slider'; -import { RawItemSliderProvider } from './rawitem-slider.provider'; +import { PercentPond } from './percent-pond'; +import { PercentPondProvider } from './percent-pond.provider'; -export const IBizRawItemSlider = withInstall(RawItemSlider, function (v: App) { - v.component(RawItemSlider.name, RawItemSlider); +export const IBizPercentPond = withInstall(PercentPond, function (v: App) { + v.component(PercentPond.name, PercentPond); registerEditorProvider( 'EDITOR_CUSTOMSTYLE_SCREEN_PROGRESS', - () => new RawItemSliderProvider(), + () => new PercentPondProvider(), ); }); diff --git a/src/rawitem-slider/rawitem-slider.controller.ts b/src/percent-pond/percent-pond.controller.ts similarity index 76% rename from src/rawitem-slider/rawitem-slider.controller.ts rename to src/percent-pond/percent-pond.controller.ts index 2a1692b7e0cce8578a7cfdf4c1ba00a2a723ddc1..72a1c769a94fff21969272d3ba492e61114077c2 100644 --- a/src/rawitem-slider/rawitem-slider.controller.ts +++ b/src/percent-pond/percent-pond.controller.ts @@ -1,12 +1,12 @@ import { EditorController } from '@ibiz-template/runtime'; import { ISlider } from '@ibiz/model-core'; -export class RawItemSliderController extends EditorController { +export class PercentPondController extends EditorController { /** * 总数属性 * * @type {string} - * @memberof RawItemSliderController + * @memberof PercentPondController */ public totalField: string = ''; @@ -15,7 +15,7 @@ export class RawItemSliderController extends EditorController { * * @protected * @return {*} {Promise} - * @memberof RawItemSliderController + * @memberof PercentPondController */ protected async onInit(): Promise { super.onInit(); diff --git a/src/rawitem-slider/rawitem-slider.provider.ts b/src/percent-pond/percent-pond.provider.ts similarity index 45% rename from src/rawitem-slider/rawitem-slider.provider.ts rename to src/percent-pond/percent-pond.provider.ts index 9276c8be48e17df8b23dda86c31ae5404c33b293..2a0eac1ffb30e247b8e5bc5644c806d93bae99c2 100644 --- a/src/rawitem-slider/rawitem-slider.provider.ts +++ b/src/percent-pond/percent-pond.provider.ts @@ -3,18 +3,18 @@ import { IEditorProvider, } from '@ibiz-template/runtime'; import { ISlider } from '@ibiz/model-core'; -import { RawItemSliderController } from './rawitem-slider.controller'; +import { PercentPondController } from './percent-pond.controller'; -export class RawItemSliderProvider implements IEditorProvider { - formEditor: string = 'RawItemSlider'; +export class PercentPondProvider implements IEditorProvider { + formEditor: string = 'PercentPond'; - gridEditor: string = 'RawItemSlider'; + gridEditor: string = 'PercentPond'; async createController( editorModel: ISlider, parentController: IEditorContainerController, - ): Promise { - const c = new RawItemSliderController(editorModel, parentController); + ): Promise { + const c = new PercentPondController(editorModel, parentController); await c.init(); return c; } diff --git a/src/rawitem-slider/rawitem-slider.scss b/src/percent-pond/percent-pond.scss similarity index 98% rename from src/rawitem-slider/rawitem-slider.scss rename to src/percent-pond/percent-pond.scss index 4196c5666a3ed3ac88d2d30319cb6c7d6be237b1..348063a9b70f1c5fdfbe2d0a4c1f193ed2d8556e 100644 --- a/src/rawitem-slider/rawitem-slider.scss +++ b/src/percent-pond/percent-pond.scss @@ -1,4 +1,4 @@ -@include b('rawitem-slider'){ +@include b('percent-pond'){ display: flex; gap: 10px; align-items: end; diff --git a/src/rawitem-slider/rawitem-slider.tsx b/src/percent-pond/percent-pond.tsx similarity index 84% rename from src/rawitem-slider/rawitem-slider.tsx rename to src/percent-pond/percent-pond.tsx index 4fbc229e19fb112defdf53632ec96671bba7cd9b..66bc0e95046f73133a7b3c39f44261f5914fa1a8 100644 --- a/src/rawitem-slider/rawitem-slider.tsx +++ b/src/percent-pond/percent-pond.tsx @@ -1,13 +1,13 @@ import { defineComponent, ref, watch } from 'vue'; import { useNamespace, getSliderProps } from '@ibiz-template/vue3-util'; -import './rawitem-slider.scss'; -import { RawItemSliderController } from './rawitem-slider.controller'; +import './percent-pond.scss'; +import { PercentPondController } from './percent-pond.controller'; -export const RawItemSlider = defineComponent({ - name: 'RawItemSlider', - props: getSliderProps(), +export const PercentPond = defineComponent({ + name: 'PercentPond', + props: getSliderProps(), setup(props) { - const ns = useNamespace('rawitem-slider'); + const ns = useNamespace('percent-pond'); const c = props.controller; const total = ref(0);