diff --git a/packages/ui-vue/components/according/index.ts b/packages/ui-vue/components/according/index.ts deleted file mode 100644 index 2f855cb..0000000 --- a/packages/ui-vue/components/according/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { App } from 'vue'; -import According from './src/according.component'; -import AccordingItem from './src/components/according-item.component'; - -export * from './src/according.props'; -export * from './src/components/according-item.props'; - -export { According, AccordingItem }; - -export default { - install(app: App): void { - app.component(According.name, According); - app.component(AccordingItem.name, AccordingItem); - } -}; diff --git a/packages/ui-vue/components/accordion/index.ts b/packages/ui-vue/components/accordion/index.ts new file mode 100644 index 0000000..96406bc --- /dev/null +++ b/packages/ui-vue/components/accordion/index.ts @@ -0,0 +1,15 @@ +import type { App } from 'vue'; +import Accordion from './src/accordion.component'; +import AccordionItem from './src/components/accordion-item.component'; + +export * from './src/accordion.props'; +export * from './src/components/accordion-item.props'; + +export { Accordion, AccordionItem }; + +export default { + install(app: App): void { + app.component(Accordion.name, Accordion); + app.component(AccordionItem.name, AccordionItem); + } +}; diff --git a/packages/ui-vue/components/according/src/according.component.tsx b/packages/ui-vue/components/accordion/src/accordion.component.tsx similarity index 61% rename from packages/ui-vue/components/according/src/according.component.tsx rename to packages/ui-vue/components/accordion/src/accordion.component.tsx index ac19fae..bea759d 100644 --- a/packages/ui-vue/components/according/src/according.component.tsx +++ b/packages/ui-vue/components/accordion/src/accordion.component.tsx @@ -1,35 +1,35 @@ import { isContext } from 'vm'; import { computed, defineComponent, SetupContext } from 'vue'; -import { AccordingProps, accordingProps } from './according.props'; +import { AccordionProps, accordionProps } from './accordion.props'; -import './according.css'; +import './accordion.css'; export default defineComponent({ - name: 'FAccording', - props: accordingProps, + name: 'FAccordion', + props: accordionProps, emits: [], - setup(props: AccordingProps, context: SetupContext) { - const accordingStyle = computed(() => ({ + setup(props: AccordionProps, context: SetupContext) { + const accordionStyle = computed(() => ({ height: props.height ? `${props.height}px` : '', width: props.width ? `${props.width}px` : '' })); - const accordingClass = computed(() => { + const accordionClass = computed(() => { const customClassArray = props.customClass; - const accordingClassObject = { + const accordionClassObject = { 'farris-panel': true, according: true }; customClassArray.reduce>((classObject, classString) => { classObject[classString] = true; return classObject; - }, accordingClassObject); - return accordingClassObject; + }, accordionClassObject); + return accordionClassObject; }); return () => { return ( -
+
{context.slots.default && context.slots.default()}
); diff --git a/packages/ui-vue/components/according/src/according.css b/packages/ui-vue/components/accordion/src/accordion.css similarity index 100% rename from packages/ui-vue/components/according/src/according.css rename to packages/ui-vue/components/accordion/src/accordion.css diff --git a/packages/ui-vue/components/according/src/according.props.ts b/packages/ui-vue/components/accordion/src/accordion.props.ts similarity index 73% rename from packages/ui-vue/components/according/src/according.props.ts rename to packages/ui-vue/components/accordion/src/accordion.props.ts index 54e5a99..3537620 100644 --- a/packages/ui-vue/components/according/src/according.props.ts +++ b/packages/ui-vue/components/accordion/src/accordion.props.ts @@ -1,10 +1,10 @@ import { ExtractPropTypes } from 'vue'; -export const accordingProps = { +export const accordionProps = { customClass: { type: Array, default: [] }, height: { type: Number }, width: { type: Number }, enableFold: { type: Boolean, default: true }, expanded: { type: Boolean, default: false } }; -export type AccordingProps = ExtractPropTypes; +export type AccordionProps = ExtractPropTypes; diff --git a/packages/ui-vue/components/according/src/components/according-item.component.tsx b/packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx similarity index 75% rename from packages/ui-vue/components/according/src/components/according-item.component.tsx rename to packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx index 4e9f43b..045c2a2 100644 --- a/packages/ui-vue/components/according/src/components/according-item.component.tsx +++ b/packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx @@ -1,24 +1,24 @@ import { computed, defineComponent, ref, SetupContext } from 'vue'; -import { accordingItemProps, AccordingItemProps } from './according-item.props'; +import { accordionItemProps, AccordionItemProps } from './accordion-item.props'; -import './according-item.scss'; +import './accordion-item.scss'; export default defineComponent({ - name: 'FAccordingItem', - props: accordingItemProps, + name: 'FAccordionItem', + props: accordionItemProps, emits: [], - setup(props: AccordingItemProps, context: SetupContext) { + setup(props: AccordionItemProps, context: SetupContext) { const title = ref(props.title); const isActive = ref(false); const isDisabled = ref(false); - function selectAccordingItem() {} + function selectAccordionItem() {} function onClick($event: Event) { - selectAccordingItem(); + selectAccordionItem(); } - const accordingItemClass = computed(() => ({ + const accordionItemClass = computed(() => ({ 'f-state-disable': isDisabled.value, card: true, 'farris-panel-item': true, @@ -35,13 +35,13 @@ export default defineComponent({ const headIconClass = computed(() => ({ 'f-icon': true, - 'f-according-collapse': !isActive.value, - 'f-according-expand': isActive.value + 'f-accordion-collapse': !isActive.value, + 'f-accordion-expand': isActive.value })); return () => { return ( -
+
{shouldShowHeader.value && {title.value}} diff --git a/packages/ui-vue/components/according/src/components/according-item.props.ts b/packages/ui-vue/components/accordion/src/components/accordion-item.props.ts similarity index 62% rename from packages/ui-vue/components/according/src/components/according-item.props.ts rename to packages/ui-vue/components/accordion/src/components/accordion-item.props.ts index 04f84dd..34b3143 100644 --- a/packages/ui-vue/components/according/src/components/according-item.props.ts +++ b/packages/ui-vue/components/accordion/src/components/accordion-item.props.ts @@ -1,9 +1,9 @@ import { ExtractPropTypes } from 'vue'; -export const accordingItemProps = { +export const accordionItemProps = { width: { type: Number }, height: { type: Number }, title: { type: String, default: '' }, disable: { type: Boolean, default: false } }; -export type AccordingItemProps = ExtractPropTypes; +export type AccordionItemProps = ExtractPropTypes; diff --git a/packages/ui-vue/components/according/src/components/according-item.scss b/packages/ui-vue/components/accordion/src/components/accordion-item.scss similarity index 100% rename from packages/ui-vue/components/according/src/components/according-item.scss rename to packages/ui-vue/components/accordion/src/components/accordion-item.scss diff --git a/packages/ui-vue/components/according/src/composition/types.ts b/packages/ui-vue/components/accordion/src/composition/types.ts similarity index 100% rename from packages/ui-vue/components/according/src/composition/types.ts rename to packages/ui-vue/components/accordion/src/composition/types.ts diff --git a/packages/ui-vue/components/popover/src/popover.component.tsx b/packages/ui-vue/components/popover/src/popover.component.tsx index 37de210..b7c84ae 100644 --- a/packages/ui-vue/components/popover/src/popover.component.tsx +++ b/packages/ui-vue/components/popover/src/popover.component.tsx @@ -1,13 +1,33 @@ -import { computed, defineComponent, SetupContext } from 'vue'; +import { computed, defineComponent, ref, SetupContext } from 'vue'; import { PopoverProps, popoverProps } from './popover.props'; +import './popover.scss'; + export default defineComponent({ name: 'FPopover', props: popoverProps, emits: [], setup(props: PopoverProps, context: SetupContext) { + + const position = ref(props.position); + const shouldShowTitle = computed(() => !!props.title); + const popoverClass = computed(()=>{ + const originPopover = `popover in popover-${position.value}`; + const bsPopover = `bs-popover-${position.value}` + const popoverClassObject = { + 'popover in pop' + }; + + '[class]': + '"popover in popover-" + placement + " " + "bs-popover-" + placement + " " + placement + " " + containerClass', + '[class.show]': '!isBs3', + '[class.bs3]': 'isBs3', + role: 'tooltip', + style: 'display:block;' + }) + const popoverContainerClass = computed(() => ({ 'popover-content': true, 'popover-body': true @@ -15,11 +35,11 @@ export default defineComponent({ return () => { return ( - <> +
{shouldShowTitle.value &&

{props.title}

}
{context.slots.default && context.slots?.default()}
- +
); }; } diff --git a/packages/ui-vue/components/popover/src/popover.scss b/packages/ui-vue/components/popover/src/popover.scss new file mode 100644 index 0000000..726a542 --- /dev/null +++ b/packages/ui-vue/components/popover/src/popover.scss @@ -0,0 +1,22 @@ +.bs3.popover-top { + margin-bottom: 10px; +} +.bs3.popover.top > .arrow { + margin-left: -2px; +} +.bs3.popover.top { + margin-bottom: 10px; +} +.popover.bottom > .arrow { + margin-left: -4px; +} +.bs3.bs-popover-left { + margin-right: 0.5rem; +} +.bs3.bs-popover-right .arrow, +.bs3.bs-popover-left .arrow { + margin: 0.3rem 0; +} +.arrow-left .arrow { + left: calc(50% - 10px); +} diff --git a/packages/ui-vue/src/App.vue b/packages/ui-vue/src/App.vue index 5836b92..b156b91 100644 --- a/packages/ui-vue/src/App.vue +++ b/packages/ui-vue/src/App.vue @@ -9,7 +9,7 @@ import FButton from '../components/button/src/button.component'; import Switch from './components/switch.vue'; import Section from './components/section.vue'; import Notify from './components/notify.vue'; -import According from './components/according.vue'; +import Accordion from './components/accordion.vue'; const canEdit = ref(true); const disable = ref(false); @@ -39,7 +39,7 @@ const canAutoComplete = ref(false);
- +