From c89e0598d20ed10e2e49af71888216747cc26b9b Mon Sep 17 00:00:00 2001 From: Sagi Date: Tue, 27 Sep 2022 23:01:28 +0800 Subject: [PATCH 1/7] feature: add tooltip css --- .../ui-vue/components/tooltip/src/tooltip.component.tsx | 2 ++ packages/ui-vue/components/tooltip/src/tooltip.css | 8 ++++++++ 2 files changed, 10 insertions(+) create mode 100644 packages/ui-vue/components/tooltip/src/tooltip.css diff --git a/packages/ui-vue/components/tooltip/src/tooltip.component.tsx b/packages/ui-vue/components/tooltip/src/tooltip.component.tsx index c273934116a..892b4f67ef9 100644 --- a/packages/ui-vue/components/tooltip/src/tooltip.component.tsx +++ b/packages/ui-vue/components/tooltip/src/tooltip.component.tsx @@ -1,6 +1,8 @@ import { computed, defineComponent, ref, SetupContext } from 'vue'; import { TooltipProps, tooltipProps } from './tooltip.props'; +import './tooltip.css'; + export default defineComponent({ name: 'FTooltip', props: tooltipProps, diff --git a/packages/ui-vue/components/tooltip/src/tooltip.css b/packages/ui-vue/components/tooltip/src/tooltip.css new file mode 100644 index 00000000000..4d2ad56de5e --- /dev/null +++ b/packages/ui-vue/components/tooltip/src/tooltip.css @@ -0,0 +1,8 @@ +.f-tooltip-bottom .arrow, +.f-tooltip-top .arrow { + left: 50%; +} +.f-tooltip-left .arrow, +.f-tooltip-right .arrow { + top: 25%; +} -- Gitee From 6b3dd2282131f3276119f745f63af34e2f12f857 Mon Sep 17 00:00:00 2001 From: Sagi Date: Wed, 28 Sep 2022 14:07:39 +0800 Subject: [PATCH 2/7] feature: add according component --- packages/ui-vue/components/according/index.ts | 0 packages/ui-vue/components/according/src/according.component.tsx | 0 packages/ui-vue/components/according/src/according.props.ts | 0 .../according/src/components/according-item.component.tsx | 0 .../components/according/src/components/according-item.props.ts | 0 packages/ui-vue/components/according/src/composition/types.ts | 0 6 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 packages/ui-vue/components/according/index.ts create mode 100644 packages/ui-vue/components/according/src/according.component.tsx create mode 100644 packages/ui-vue/components/according/src/according.props.ts create mode 100644 packages/ui-vue/components/according/src/components/according-item.component.tsx create mode 100644 packages/ui-vue/components/according/src/components/according-item.props.ts create mode 100644 packages/ui-vue/components/according/src/composition/types.ts diff --git a/packages/ui-vue/components/according/index.ts b/packages/ui-vue/components/according/index.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/according/src/according.component.tsx b/packages/ui-vue/components/according/src/according.component.tsx new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/according/src/according.props.ts b/packages/ui-vue/components/according/src/according.props.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/according/src/components/according-item.component.tsx b/packages/ui-vue/components/according/src/components/according-item.component.tsx new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/according/src/components/according-item.props.ts b/packages/ui-vue/components/according/src/components/according-item.props.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/according/src/composition/types.ts b/packages/ui-vue/components/according/src/composition/types.ts new file mode 100644 index 00000000000..e69de29bb2d -- Gitee From 431239b8a4379649f6aab1aecb984d813eb0bc87 Mon Sep 17 00:00:00 2001 From: Sagi Date: Wed, 28 Sep 2022 17:31:55 +0800 Subject: [PATCH 3/7] feature: implement according component --- .../according/src/according.component.tsx | 25 ++++++++ .../components/according/src/according.css | 4 ++ .../according/src/according.props.ts | 10 +++ .../components/according-item.component.tsx | 58 +++++++++++++++++ .../src/components/according-item.props.ts | 10 +++ .../components/avatar/src/avatar.props.ts | 64 +++++++++---------- 6 files changed, 139 insertions(+), 32 deletions(-) create mode 100644 packages/ui-vue/components/according/src/according.css diff --git a/packages/ui-vue/components/according/src/according.component.tsx b/packages/ui-vue/components/according/src/according.component.tsx index e69de29bb2d..2da9accddf3 100644 --- a/packages/ui-vue/components/according/src/according.component.tsx +++ b/packages/ui-vue/components/according/src/according.component.tsx @@ -0,0 +1,25 @@ +import { isContext } from 'vm'; +import { computed, defineComponent, SetupContext } from 'vue'; +import { AccordingProps, accordingProps } from './according.props'; + +import './according.css'; + +export default defineComponent({ + name: 'FAccording', + props: accordingProps, + emits: [], + setup(props: AccordingProps, context: SetupContext) { + const accordingStyle = computed(() => ({ + height: props.height ? `${props.height}px` : '', + width: props.width ? `${props.width}px` : '', + })); + + return () => { + return ( +
+ {context.slots.default && context.slots.default()} +
+ ); + }; + }, +}); diff --git a/packages/ui-vue/components/according/src/according.css b/packages/ui-vue/components/according/src/according.css new file mode 100644 index 00000000000..ac2dac505e5 --- /dev/null +++ b/packages/ui-vue/components/according/src/according.css @@ -0,0 +1,4 @@ +/* 很重要 */ +.farris-panel { + border: 1px solid rgba(0, 0, 0, .125) +} diff --git a/packages/ui-vue/components/according/src/according.props.ts b/packages/ui-vue/components/according/src/according.props.ts index e69de29bb2d..b3f8b6820cf 100644 --- a/packages/ui-vue/components/according/src/according.props.ts +++ b/packages/ui-vue/components/according/src/according.props.ts @@ -0,0 +1,10 @@ +import { ExtractPropTypes } from 'vue'; + +export const accordingProps = { + customClass: { type: Array, default: [] }, + height: { type: Number }, + width: { type: Number }, + enableFold: { type: Boolean, default: true }, + expanded: { type: Boolean, default: false }, +}; +export type AccordingProps = ExtractPropTypes; diff --git a/packages/ui-vue/components/according/src/components/according-item.component.tsx b/packages/ui-vue/components/according/src/components/according-item.component.tsx index e69de29bb2d..7c7c38399be 100644 --- a/packages/ui-vue/components/according/src/components/according-item.component.tsx +++ b/packages/ui-vue/components/according/src/components/according-item.component.tsx @@ -0,0 +1,58 @@ +import { computed, defineComponent, ref, SetupContext } from 'vue'; + +export default defineComponent({ + name: 'FAccordingItem', + props: {}, + emits: [], + setup(props, context: SetupContext) { + const title = ref(''); + const isActive = ref(false); + const isDisabled = ref(false); + + function selectAccordingItem() {} + + function onClick($event: Event) { + selectAccordingItem(); + } + + const accordingItemClass = computed(() => ({ + 'f-state-disable': isDisabled.value, + card: true, + 'farris-panel-item': true, + 'f-state-selected': isActive.value, + })); + + const shouldShowHeader = computed(() => { + return true; + }); + + const shouldShowCustomHeader = computed(() => { + return false; + }); + + const headIconClass = computed(() => ({ + 'f-icon': true, + 'f-according-collapse': !isActive.value, + 'f-according-expand': isActive.value, + })); + + return () => { + return ( +
+
+
+ {shouldShowHeader.value && {title.value}} + {shouldShowCustomHeader.value && context.slots.head && context.slots.head()} + +
+
{context.slots.toolbar && context.slots.toolbar()}
+
+
+
+
{context.slots.content && context.slots.content()}
+
+
+ ); + }; + }, +}); diff --git a/packages/ui-vue/components/according/src/components/according-item.props.ts b/packages/ui-vue/components/according/src/components/according-item.props.ts index e69de29bb2d..401f932b27f 100644 --- a/packages/ui-vue/components/according/src/components/according-item.props.ts +++ b/packages/ui-vue/components/according/src/components/according-item.props.ts @@ -0,0 +1,10 @@ +import { ExtractPropTypes } from 'vue'; + +export const accordingItemProps = { + width:{type:Number}, + height:{type:Number}, + title:{type:String,default:''}, + disable:{type:Boolean,default:false} +}; +export type AccordingItemProps = ExtractPropTypes; + diff --git a/packages/ui-vue/components/avatar/src/avatar.props.ts b/packages/ui-vue/components/avatar/src/avatar.props.ts index dec75615415..2c77616f1c3 100644 --- a/packages/ui-vue/components/avatar/src/avatar.props.ts +++ b/packages/ui-vue/components/avatar/src/avatar.props.ts @@ -3,38 +3,38 @@ import { ExtractPropTypes, PropType } from 'vue'; type AvatarShap = 'square' | 'circle'; export const avatarProps = { - /** - * 头像宽度 - */ - avatarWidth: { type: Number, default: 100 }, - /** - * 头像高度 - */ - avatarHeight: { type: Number, default: 100 }, - /** - * 组件标识 - */ - cover: { type: String }, - /** - * 只读 - */ - readonly: { type: Boolean, default: false }, - /** - * 头像形状 - */ - shape: { type: String as PropType, default: 'circle' }, - /** - * 头像最大尺寸, 单位MB - */ - maxSize: { type: Number, default: 1 }, - /** - * 头像标题 - */ - tile: { type: String, default: '' }, - /** - * 支持的头像类型 - */ - type: { type: Array, default: [] }, + /** + * 头像宽度 + */ + avatarWidth: { type: Number, default: 100 }, + /** + * 头像高度 + */ + avatarHeight: { type: Number, default: 100 }, + /** + * 组件标识 + */ + cover: { type: String }, + /** + * 只读 + */ + readonly: { type: Boolean, default: false }, + /** + * 头像形状 + */ + shape: { type: String as PropType, default: 'circle' }, + /** + * 头像最大尺寸, 单位MB + */ + maxSize: { type: Number, default: 1 }, + /** + * 头像标题 + */ + tile: { type: String, default: '' }, + /** + * 支持的头像类型 + */ + type: { type: Array, default: [] }, }; export type AvatarProps = ExtractPropTypes; -- Gitee From bf0090858be8e30090f562c2eae58cb753b587ac Mon Sep 17 00:00:00 2001 From: Sagi Date: Wed, 28 Sep 2022 17:40:27 +0800 Subject: [PATCH 4/7] feature: add text component --- packages/ui-vue/components/text/index.ts | 0 .../components/text/src/composition/types.ts | 0 .../components/text/src/text.component.tsx | 0 .../ui-vue/components/text/src/text.props.ts | 0 .../tooltip/src/tooltip.component.ts | 336 ------------------ 5 files changed, 336 deletions(-) create mode 100644 packages/ui-vue/components/text/index.ts create mode 100644 packages/ui-vue/components/text/src/composition/types.ts create mode 100644 packages/ui-vue/components/text/src/text.component.tsx create mode 100644 packages/ui-vue/components/text/src/text.props.ts delete mode 100644 packages/ui-vue/components/tooltip/src/tooltip.component.ts diff --git a/packages/ui-vue/components/text/index.ts b/packages/ui-vue/components/text/index.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/text/src/composition/types.ts b/packages/ui-vue/components/text/src/composition/types.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/text/src/text.component.tsx b/packages/ui-vue/components/text/src/text.component.tsx new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/text/src/text.props.ts b/packages/ui-vue/components/text/src/text.props.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/tooltip/src/tooltip.component.ts b/packages/ui-vue/components/tooltip/src/tooltip.component.ts deleted file mode 100644 index baef12d7ebf..00000000000 --- a/packages/ui-vue/components/tooltip/src/tooltip.component.ts +++ /dev/null @@ -1,336 +0,0 @@ -import { - Component, Input, TemplateRef, ElementRef, OnInit, - ViewChild, ViewContainerRef, HostBinding, ViewEncapsulation, SimpleChanges, Renderer2, NgZone -} from '@angular/core'; -import { AfterViewInit } from '@angular/core'; -@Component({ - selector: 'farris-tooltip', - templateUrl: './tooltip.component.html', - styleUrls: ['./tooltip.component.scss'], - encapsulation: ViewEncapsulation.None -}) - -export class TooltipComponent implements OnInit, AfterViewInit { - - @ViewChild('contentViewf', { read: ViewContainerRef }) contentViewf: ViewContainerRef; - - @ViewChild('tooltipEle', { read: ElementRef }) tooltipNode: ElementRef; - @ViewChild('arrowEle', { read: ElementRef }) arrowNode: ElementRef; - @ViewChild('innerEle', { read: ElementRef }) innerNode: ElementRef; - - contentIsString = true; - /* 普通文本内容 */ - @Input() - set content(value: string | TemplateRef) { - if (value instanceof TemplateRef) { - this.contentIsString = false; - this.contentViewf.createEmbeddedView(value); - } else { - this.contentIsString = true; - this.nfContent = value; - } - } - get content() { - return this.nfContent; - } - private _tipWidth = ''; - /**因为表单生成没有排除factory,不能使用模板 */ - @Input() - set tipWidth(value) { - if (value != this._tipWidth) { - if (value) { - this.render.setStyle(this.innerNode.nativeElement, 'width', value); - this.render.setStyle(this.innerNode.nativeElement, 'max-width', 'none'); - } else { - this.render.removeStyle(this.innerNode.nativeElement, 'width'); - this.render.removeStyle(this.innerNode.nativeElement, 'max-width'); - } - this._tipWidth = value; - } - } - get tipWidth() { - return this._tipWidth; - } - private _tipCls = ''; - @Input() - set tipCls(value) { - if (value != this._tipCls) { - //移除旧样式 - this._tipCls && this.render.removeClass(this.el.nativeElement, this._tipCls); - //追加新样式 - value && this.render.addClass(this.el.nativeElement, value); - this._tipCls = value; - } - } - get tipCls() { - return this._tipCls; - } - /* 位置 */ - @Input() placement = 'top'; - private rectifyPlacement = 'top'; - // 箭头位置参照 - hostBoundingClientRect: any; - // 边界位置参照 - referenceBoundingRect: any; - private rectifyGutter = 20; - - nfContent: string | TemplateRef; - - /* 位置样式 */ - positionStyle = {}; - - constructor( - public el: ElementRef, - private render: Renderer2 - ) { - } - - ngOnInit() { - } - ngAfterViewInit() { - if (this.hostBoundingClientRect) { - this.judgeWidth(); - this.autoRectifyDirection(); - this.calculatePosition(this.hostBoundingClientRect); - } - } - /** - * 规则判断默认样式下出现滚动条，尺寸从默认变成大号 - */ - judgeWidth() { - if (this.innerNode.nativeElement.scrollHeight > this.innerNode.nativeElement.clientHeight) { - this.render.addClass(this.innerNode.nativeElement, 'tooltip-inner-lg'); - } - } - // 自动纠正方向 - private autoRectifyDirection() { - // 标记默认值 - this.rectifyPlacement = this.placement; - // 整个提示位置 - const tooltipSize = this.tooltipNode.nativeElement.getBoundingClientRect(); - const arrowSize = this.arrowNode.nativeElement.getBoundingClientRect(); - /*不考虑，提示框太大的情况,只考虑一次转换位置， - 太复杂的场景，实际项目中不会出现，简化处理此问题 - if(this.referenceBoundingRect.width>tooltipSize){ - }*/ - switch (this.placement) { - case 'top': - case 'top-left': - case 'top-right': - if (Math.abs(this.hostBoundingClientRect.top - this.referenceBoundingRect.top) < tooltipSize.height + arrowSize.height) { - // 高度放不开，转向 - this.rectifyPlacement = this.rectifyPlacement.replace('top', 'bottom'); - } - break; - case 'bottom': - case 'bottom-left': - case 'bottom-right': - if (Math.abs(this.hostBoundingClientRect.bottom - this.referenceBoundingRect.bottom) < tooltipSize.height + arrowSize.height) { - // 高度放不开，转向 - this.rectifyPlacement = this.rectifyPlacement.replace('bottom', 'top'); - } - break; - case 'right': - case 'right-top': - case 'right-bottom': - if (Math.abs(this.hostBoundingClientRect.right - this.referenceBoundingRect.right) < tooltipSize.width + arrowSize.width) { - // 宽度放不开，转向 - this.rectifyPlacement = this.rectifyPlacement.replace('right', 'left'); - } - break; - case 'left': - case 'left-top': - case 'left-bottom': - if (Math.abs(this.hostBoundingClientRect.left - this.referenceBoundingRect.left) < tooltipSize.width + arrowSize.width) { - // 宽度放不开，转向 - this.rectifyPlacement = this.rectifyPlacement.replace('left', 'right'); - } - break; - - } - if (this.rectifyPlacement != this.placement) { - this.tooltipNode.nativeElement.classList.remove('bs-tooltip-' + this.offsetDirection(this.placement)); - this.tooltipNode.nativeElement.classList.add('bs-tooltip-' + this.offsetDirection(this.rectifyPlacement)); - } - } - /** - * 判断是否超出边界 - */ - private isOverBounding(rect, value) { - let isOver = false; - let newValue = 0; - switch (rect) { - case 'left': - if (value <= this.referenceBoundingRect.left) { - isOver = true; - newValue = this.referenceBoundingRect.left + this.rectifyGutter; - } - break; - case 'right': - if (value >= this.referenceBoundingRect.right) { - isOver = true; - newValue = this.referenceBoundingRect.right - this.rectifyGutter; - } - break; - case 'top': - if (value <= this.referenceBoundingRect.top) { - isOver = true; - newValue = this.referenceBoundingRect.top + this.rectifyGutter; - } - break; - case 'bottom': - if (value >= this.referenceBoundingRect.bottom) { - isOver = true; - newValue = this.referenceBoundingRect.bottom - this.rectifyGutter; - } - break; - } - return { isOver, newValue }; - } - - private containsEl(datas, specialEl = '') { - if (!specialEl) { - specialEl = this.rectifyPlacement; - } - for (var i = 0; i < datas.length; i++) { - if (datas[i] == specialEl) - return true; - } - return false; - } - - /* 计算tooltip最新位置 */ - calculatePosition(hostPosition: any) { - let top = 0; - let left = 0; - let right = 0; - let bottom = 0; - // 整个提示位置 - const tooltipSize = this.tooltipNode.nativeElement.getBoundingClientRect(); - const arrowSize = this.arrowNode.nativeElement.getBoundingClientRect(); - - switch (this.rectifyPlacement) { - case 'top': - top = hostPosition.top - tooltipSize.height - 2; - left = hostPosition.left + (hostPosition.width - tooltipSize.width) / 2; - right = left + tooltipSize.width; - break; - case 'left': - top = hostPosition.top + (hostPosition.height - tooltipSize.height) / 2; - left = hostPosition.left - tooltipSize.width - 2; - break; - case 'right': - top = hostPosition.top + (hostPosition.height - tooltipSize.height) / 2; - left = hostPosition.right + 2; - break; - case 'bottom': - top = hostPosition.bottom + arrowSize.height + 2; - left = hostPosition.left + (hostPosition.width - tooltipSize.width) / 2; - right = left + tooltipSize.width; - break; - case 'top-left': - top = hostPosition.top - tooltipSize.height - 2; - left = hostPosition.left; - right = left + tooltipSize.width; - break; - case 'top-right': - top = hostPosition.top - tooltipSize.height - 2; - left = hostPosition.right - tooltipSize.width; - right = hostPosition.right; - break; - case 'right-top': - top = hostPosition.top; - left = hostPosition.right + 2; - this.arrowNode.nativeElement.style.top = '10%'; - break; - case 'right-bottom': - top = hostPosition.bottom - tooltipSize.height; - left = hostPosition.right + 2; - this.arrowNode.nativeElement.style.bottom = '10%'; - break; - case 'bottom-left': - top = hostPosition.bottom + arrowSize.height + 2; - left = hostPosition.left; - right = left + tooltipSize.width; - break; - case 'bottom-right': - top = hostPosition.bottom + arrowSize.height + 2; - left = hostPosition.right - tooltipSize.width; - right = hostPosition.right; - break; - case 'left-top': - top = hostPosition.top; - left = hostPosition.left - tooltipSize.width - 2; - this.arrowNode.nativeElement.style.top = '10%'; - break; - case 'left-bottom': - top = hostPosition.bottom - tooltipSize.height; - left = hostPosition.left - tooltipSize.width - 2; - this.arrowNode.nativeElement.style.bottom = '10%'; - } - let overResult; - let arrowLeft = 0; - let arrowTop = 0 - switch (this.rectifyPlacement) { - case 'top': - case 'top-left': - case 'top-right': - case 'bottom': - case 'bottom-left': - case 'bottom-right': - overResult = this.isOverBounding('left', left); - if (overResult.isOver) { - left = overResult.newValue; - } else { - overResult = this.isOverBounding('right', right); - if (overResult.isOver) { - left = overResult.newValue - tooltipSize.width; - } - } - arrowLeft = left - hostPosition.left - hostPosition.width * 0.5 + arrowSize.width * 0.5; - if (this.rectifyPlacement.indexOf('-left') > 0) { - arrowLeft += hostPosition.width * 0.4; - } else if (this.rectifyPlacement.indexOf('-right') > 0) { - arrowLeft -= hostPosition.width * 0.4; - } - this.arrowNode.nativeElement.style.left = Math.abs(arrowLeft) + 'px'; - break; - default: - overResult = this.isOverBounding('top', top); - - if (overResult.isOver) { - top = overResult.newValue; - } else { - overResult = this.isOverBounding('bottom', bottom); - if (overResult.isOver) { - top = overResult.newValue - tooltipSize.height; - } - } - arrowTop = top - hostPosition.top - hostPosition.height * 0.5 + arrowSize.height * 0.5;; - if (this.rectifyPlacement.indexOf('-top') > 0) { - arrowTop += hostPosition.height * 0.4; - } else if (this.rectifyPlacement.indexOf('-bottom') > 0) { - arrowTop -= hostPosition.height * 0.4; - } - this.arrowNode.nativeElement.style.top = Math.abs(arrowTop) + 'px'; - } - this.tooltipNode.nativeElement.style.top = top + 'px'; - this.tooltipNode.nativeElement.style.left = left + 'px'; - - } - - /* - *12个位置名解析 - * 因表单生成没有排除factory,而且使用了[class],只能在此处变更 - */ - offsetDirection(tplacement = '') { - if (!tplacement) { - tplacement = this.placement; - } - if (tplacement.indexOf('-') !== -1) { - const index = tplacement.indexOf('-'); - return tplacement.substring(0, index); - } - return tplacement; - } -} -- Gitee From 4dc7ac3e834e36d6e3899667f588b0e502dea872 Mon Sep 17 00:00:00 2001 From: Sagi Date: Wed, 28 Sep 2022 18:01:52 +0800 Subject: [PATCH 5/7] feature: implement text component --- .../components/text/src/text.component.tsx | 41 +++++++++++++++++++ .../ui-vue/components/text/src/text.props.ts | 4 ++ 2 files changed, 45 insertions(+) diff --git a/packages/ui-vue/components/text/src/text.component.tsx b/packages/ui-vue/components/text/src/text.component.tsx index e69de29bb2d..1931075f324 100644 --- a/packages/ui-vue/components/text/src/text.component.tsx +++ b/packages/ui-vue/components/text/src/text.component.tsx @@ -0,0 +1,41 @@ +import { computed, defineComponent, ref, SetupContext } from 'vue'; +import { TextProps, textProps } from './text.props'; + +export default defineComponent({ + name: 'FText', + props: textProps, + emits: [], + setup(props: TextProps, context: SetupContext) { + const isTextArea = ref(true); + const autoSize = ref(true); + const textAlginment = ref(''); + const height = ref(0); + const maxHeight = ref(0); + + const textClass = computed(() => ({ + 'f-form-control-text': !isTextArea.value, + 'f-form-context-textarea': isTextArea, + 'f-component-text-auto-size': autoSize.value, + })); + + const textStyle = computed(() => ({ + textalign: textAlginment.value, + height: !autoSize.value && height.value > 0 ? `${height.value}px` : '', + 'min-height': !autoSize.value && height.value > 0 ? `${height.value}px` : '', + 'max-height': !autoSize.value && maxHeight.value > 0 ? `${maxHeight.value}px` : '', + })); + + const text = computed(() => { + // text && text.length > 0 ? text : control + return ''; + }); + + return () => { + return ( + + {text.value} + + ); + }; + }, +}); diff --git a/packages/ui-vue/components/text/src/text.props.ts b/packages/ui-vue/components/text/src/text.props.ts index e69de29bb2d..5b15174bb8d 100644 --- a/packages/ui-vue/components/text/src/text.props.ts +++ b/packages/ui-vue/components/text/src/text.props.ts @@ -0,0 +1,4 @@ +import { ExtractPropTypes } from 'vue'; + +export const textProps = {}; +export type TextProps = ExtractPropTypes; -- Gitee From c64c47218f1c2b57a7e8cc0b812e6d8eab2f977d Mon Sep 17 00:00:00 2001 From: Sagi Date: Wed, 28 Sep 2022 19:52:28 +0800 Subject: [PATCH 6/7] feature: add switch component --- packages/ui-vue/components/switch/index.ts | 0 packages/ui-vue/components/switch/src/composition/types.ts | 0 packages/ui-vue/components/switch/src/switch.component.tsx | 0 packages/ui-vue/components/switch/src/switch.props.ts | 4 ++++ 4 files changed, 4 insertions(+) create mode 100644 packages/ui-vue/components/switch/index.ts create mode 100644 packages/ui-vue/components/switch/src/composition/types.ts create mode 100644 packages/ui-vue/components/switch/src/switch.component.tsx create mode 100644 packages/ui-vue/components/switch/src/switch.props.ts diff --git a/packages/ui-vue/components/switch/index.ts b/packages/ui-vue/components/switch/index.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/switch/src/composition/types.ts b/packages/ui-vue/components/switch/src/composition/types.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/switch/src/switch.component.tsx b/packages/ui-vue/components/switch/src/switch.component.tsx new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/ui-vue/components/switch/src/switch.props.ts b/packages/ui-vue/components/switch/src/switch.props.ts new file mode 100644 index 00000000000..f8e59b81241 --- /dev/null +++ b/packages/ui-vue/components/switch/src/switch.props.ts @@ -0,0 +1,4 @@ +import { ExtractPropTypes } from 'vue'; + +export const switchProps = {}; +export type SwtichProps = ExtractPropTypes; -- Gitee From 11b96cc482578fadd193debd8d70dddce9f1392c Mon Sep 17 00:00:00 2001 From: Sagi Date: Wed, 28 Sep 2022 21:06:25 +0800 Subject: [PATCH 7/7] feature: implement switch component --- .../switch/src/switch.component.tsx | 94 +++++++++++++++++++ .../components/switch/src/switch.props.ts | 24 ++++- 2 files changed, 115 insertions(+), 3 deletions(-) diff --git a/packages/ui-vue/components/switch/src/switch.component.tsx b/packages/ui-vue/components/switch/src/switch.component.tsx index e69de29bb2d..422cec6c8c2 100644 --- a/packages/ui-vue/components/switch/src/switch.component.tsx +++ b/packages/ui-vue/components/switch/src/switch.component.tsx @@ -0,0 +1,94 @@ +import { computed, defineComponent, ref, SetupContext } from 'vue'; +import { switchProps, SwitchProps, SwitchType } from './switch.props'; + +export default defineComponent({ + name: 'FSwitch', + props: switchProps, + emits: [], + setup(props: SwitchProps, context: SetupContext) { + const checked = ref(false); + + const disable = ref(false); + + const editable = ref(false); + + const squire = ref(false); + + const size = ref(props.size); + + const checkedLabel = ref(''); + + const uncheckedLabel = ref(''); + + function getColor(flag = '') { + if (flag === 'borderColor') { + return this.defaultBoColor; + } + if (flag === 'switchColor') { + if (this.reverse) { + return !this.checked ? this.switchColor : this.switchOffColor || this.switchColor; + } + return this.checked ? this.switchColor : this.switchOffColor || this.switchColor; + } + if (this.reverse) { + return !this.checked ? this.color : this.defaultBgColor; + } + return this.checked ? this.color : this.defaultBgColor; + } + + function getBackgroundColor() { + return ''; + } + + function getBorderColor() { + return ''; + } + + function getSwitchColor() { + return ''; + } + + const switchContainerClass = computed(() => ({ + switch: true, + 'f-cmp-switch': true, + checked: checked.value, + disabled: disable.value || !editable.value, + squire: squire.value, + 'switch-large': size.value === 'large', + 'switch-medium': size.value === 'medium', + 'switch-small': size.value === 'small', + })); + + const switchContainerStyle = computed(() => ({ + outline: 'none', + 'backgroud-color': getBackgroundColor(), + 'border-color': getBorderColor(), + })); + + const smallStyle = computed(() => ({ + background: getSwitchColor(), + })); + + const shouldShowSwitch = computed(() => { + // checkedLabel || uncheckedLabel + return checkedLabel.value || uncheckedLabel.value; + }); + + return () => { + return ( + <> + + {shouldShowSwitch.value && ( + + {checkedLabel.value} + {uncheckedLabel.value} + + )} + + {context.slots.default && context.slots.default()} + + + ); + }; + }, +}); diff --git a/packages/ui-vue/components/switch/src/switch.props.ts b/packages/ui-vue/components/switch/src/switch.props.ts index f8e59b81241..5631a4bd584 100644 --- a/packages/ui-vue/components/switch/src/switch.props.ts +++ b/packages/ui-vue/components/switch/src/switch.props.ts @@ -1,4 +1,22 @@ -import { ExtractPropTypes } from 'vue'; +import { ExtractPropTypes, PropType } from 'vue'; -export const switchProps = {}; -export type SwtichProps = ExtractPropTypes; +export type SwitchType = 'small' | 'medium' | 'large'; + +export const switchProps = { + square: { type: Boolean, default: false }, + size: { type: String as PropType, default: 'medium' }, + switchOffColor: { type: String }, + switchColor: { type: String }, + defaultBackgroundColor: { type: String }, + defaultBorderColor: { type: String }, + checkedLabel: { type: String }, + uncheckedLabel: { type: String }, + checked: { type: Boolean }, + readonly: { type: Boolean }, + disable: { type: Boolean }, + editable: { type: Boolean, default: true }, + reverse: { type: Boolean }, + trueValue: { type: Object, default: true }, + falseValue: { type: Object, default: false }, +}; +export type SwitchProps = ExtractPropTypes; -- Gitee