diff --git a/packages/ui-vue/components/according/index.ts b/packages/ui-vue/components/according/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..2da9accddf3fa80dade9b120f8f4e9bc782c08da --- /dev/null +++ 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 0000000000000000000000000000000000000000..ac2dac505e544957a82f47470a5c6d36289820bc --- /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 new file mode 100644 index 0000000000000000000000000000000000000000..b3f8b6820cf82494b9797dfc1250a702a51c72f4 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..7c7c38399beb5a90280a1c3aa6c839609c756ac0 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..401f932b27f4c33d5911789baad03dcbf57995b2 --- /dev/null +++ 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/according/src/composition/types.ts b/packages/ui-vue/components/according/src/composition/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/packages/ui-vue/components/avatar/src/avatar.props.ts b/packages/ui-vue/components/avatar/src/avatar.props.ts index dec75615415ff603bf3e19966b7005127d4fbc77..2c77616f1c3fc8d66dac6f16aad8d2e3b09e6cae 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; diff --git a/packages/ui-vue/components/switch/index.ts b/packages/ui-vue/components/switch/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..422cec6c8c22686f666ef9261a02ed38ecf39941 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..5631a4bd5847e12807b767cafc90b09aa3403d25 --- /dev/null +++ b/packages/ui-vue/components/switch/src/switch.props.ts @@ -0,0 +1,22 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +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; diff --git a/packages/ui-vue/components/text/index.ts b/packages/ui-vue/components/text/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..1931075f3240750c650da12fd6671fbf37b3e699 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..5b15174bb8d82a410e26062a270495e65e5ee621 --- /dev/null +++ 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; 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 baef12d7ebf0c1356ccba274961c0027375af921..0000000000000000000000000000000000000000 --- 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; - } -} diff --git a/packages/ui-vue/components/tooltip/src/tooltip.component.tsx b/packages/ui-vue/components/tooltip/src/tooltip.component.tsx index c273934116afc80c3c3170aa23155c302a058cc2..892b4f67ef924bcf0495e7856a60af030bc6a36d 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 0000000000000000000000000000000000000000..4d2ad56de5e8aebc81abc84190d67660a0cab267 --- /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%; +}