fix(accordion): fix accordion name

packages/ui-vue/components/according/index.ts

@@ -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);
-    }
-};

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);
+    }
+};

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',
+    name: 'FAccordion',
-    props: accordingProps,
+    props: accordionProps,
     emits: [],
-    setup(props: AccordingProps, context: SetupContext) {
+    setup(props: AccordionProps, context: SetupContext) {
-        const accordingStyle = computed(() => ({
+        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<Record<string, unknown>>((classObject, classString) => {
                 classObject[classString] = true;
                 return classObject;
-            }, accordingClassObject);
+            }, accordionClassObject);
-            return accordingClassObject;
+            return accordionClassObject;
         });
 
         return () => {
             return (
-                <div class={accordingClass.value} style={accordingStyle.value}>
+                <div class={accordionClass.value} style={accordionStyle.value}>
                     {context.slots.default && context.slots.default()}
                 </div>
             );

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<string>, default: [] },
     height: { type: Number },
     width: { type: Number },
     enableFold: { type: Boolean, default: true },
     expanded: { type: Boolean, default: false }
 };
-export type AccordingProps = ExtractPropTypes<typeof accordingProps>;
+export type AccordionProps = ExtractPropTypes<typeof accordionProps>;

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',
+    name: 'FAccordionItem',
-    props: accordingItemProps,
+    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-accordion-collapse': !isActive.value,
-            'f-according-expand': isActive.value
+            'f-accordion-expand': isActive.value
         }));
 
         return () => {
             return (
-                <div class={accordingItemClass.value}>
+                <div class={accordionItemClass.value}>
                     <div class="card-header" onClick={onClick}>
                         <div class="panel-item-title">
                             {shouldShowHeader.value && <span>{title.value}</span>}

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<typeof accordingItemProps>;
+export type AccordionItemProps = ExtractPropTypes<typeof accordionItemProps>;

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 (
-                <>
+                <div>
                     <div class="popover-arrow arrow"></div>
                     {shouldShowTitle.value && <h3 class="popover-title popover-header">{props.title}</h3>}
                     <div class={popoverContainerClass.value}>{context.slots.default && context.slots?.default()}</div>
-                </>
+                </div>
             );
         };
     }

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);
+}

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);
     <Switch></Switch>
     <Section></Section>
     <Notify></Notify>
-    <According></According>
+    <Accordion></Accordion>
 </template>
 
 <style scoped>

packages/ui-vue/src/components/according.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import According from '../../components/according/src/according.component';
-import AccordingItem from '../../components/according/src/components/according-item.component';
-</script>
-
-<template>
-    <According>
-        <AccordingItem title="According Panel One"></AccordingItem>
-        <AccordingItem title="According Panel Two"></AccordingItem>
-    </According>
-</template>

packages/ui-vue/src/components/accordion.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Accordion from '../../components/accordion/src/accordion.component';
+import AccordionItem from '../../components/accordion/src/components/accordion-item.component';
+</script>
+
+<template>
+    <Accordion>
+        <AccordionItem title="According Panel One"></AccordionItem>
+        <AccordionItem title="According Panel Two"></AccordionItem>
+    </Accordion>
+</template>