fix(accordion): fix accordion name
This commit is contained in:
parent
5a12dbfa65
commit
cee96c5503
|
@ -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);
|
|
||||||
}
|
|
||||||
};
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
};
|
|
@ -1,35 +1,35 @@
|
||||||
import { isContext } from 'vm';
|
import { isContext } from 'vm';
|
||||||
import { computed, defineComponent, SetupContext } from 'vue';
|
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({
|
export default defineComponent({
|
||||||
name: 'FAccording',
|
name: 'FAccordion',
|
||||||
props: accordingProps,
|
props: accordionProps,
|
||||||
emits: [],
|
emits: [],
|
||||||
setup(props: AccordingProps, context: SetupContext) {
|
setup(props: AccordionProps, context: SetupContext) {
|
||||||
const accordingStyle = computed(() => ({
|
const accordionStyle = computed(() => ({
|
||||||
height: props.height ? `${props.height}px` : '',
|
height: props.height ? `${props.height}px` : '',
|
||||||
width: props.width ? `${props.width}px` : ''
|
width: props.width ? `${props.width}px` : ''
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const accordingClass = computed(() => {
|
const accordionClass = computed(() => {
|
||||||
const customClassArray = props.customClass;
|
const customClassArray = props.customClass;
|
||||||
const accordingClassObject = {
|
const accordionClassObject = {
|
||||||
'farris-panel': true,
|
'farris-panel': true,
|
||||||
according: true
|
according: true
|
||||||
};
|
};
|
||||||
customClassArray.reduce<Record<string, unknown>>((classObject, classString) => {
|
customClassArray.reduce<Record<string, unknown>>((classObject, classString) => {
|
||||||
classObject[classString] = true;
|
classObject[classString] = true;
|
||||||
return classObject;
|
return classObject;
|
||||||
}, accordingClassObject);
|
}, accordionClassObject);
|
||||||
return accordingClassObject;
|
return accordionClassObject;
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
return (
|
return (
|
||||||
<div class={accordingClass.value} style={accordingStyle.value}>
|
<div class={accordionClass.value} style={accordionStyle.value}>
|
||||||
{context.slots.default && context.slots.default()}
|
{context.slots.default && context.slots.default()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
|
@ -1,10 +1,10 @@
|
||||||
import { ExtractPropTypes } from 'vue';
|
import { ExtractPropTypes } from 'vue';
|
||||||
|
|
||||||
export const accordingProps = {
|
export const accordionProps = {
|
||||||
customClass: { type: Array<string>, default: [] },
|
customClass: { type: Array<string>, default: [] },
|
||||||
height: { type: Number },
|
height: { type: Number },
|
||||||
width: { type: Number },
|
width: { type: Number },
|
||||||
enableFold: { type: Boolean, default: true },
|
enableFold: { type: Boolean, default: true },
|
||||||
expanded: { type: Boolean, default: false }
|
expanded: { type: Boolean, default: false }
|
||||||
};
|
};
|
||||||
export type AccordingProps = ExtractPropTypes<typeof accordingProps>;
|
export type AccordionProps = ExtractPropTypes<typeof accordionProps>;
|
|
@ -1,24 +1,24 @@
|
||||||
import { computed, defineComponent, ref, SetupContext } from 'vue';
|
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({
|
export default defineComponent({
|
||||||
name: 'FAccordingItem',
|
name: 'FAccordionItem',
|
||||||
props: accordingItemProps,
|
props: accordionItemProps,
|
||||||
emits: [],
|
emits: [],
|
||||||
setup(props: AccordingItemProps, context: SetupContext) {
|
setup(props: AccordionItemProps, context: SetupContext) {
|
||||||
const title = ref(props.title);
|
const title = ref(props.title);
|
||||||
const isActive = ref(false);
|
const isActive = ref(false);
|
||||||
const isDisabled = ref(false);
|
const isDisabled = ref(false);
|
||||||
|
|
||||||
function selectAccordingItem() {}
|
function selectAccordionItem() {}
|
||||||
|
|
||||||
function onClick($event: Event) {
|
function onClick($event: Event) {
|
||||||
selectAccordingItem();
|
selectAccordionItem();
|
||||||
}
|
}
|
||||||
|
|
||||||
const accordingItemClass = computed(() => ({
|
const accordionItemClass = computed(() => ({
|
||||||
'f-state-disable': isDisabled.value,
|
'f-state-disable': isDisabled.value,
|
||||||
card: true,
|
card: true,
|
||||||
'farris-panel-item': true,
|
'farris-panel-item': true,
|
||||||
|
@ -35,13 +35,13 @@ export default defineComponent({
|
||||||
|
|
||||||
const headIconClass = computed(() => ({
|
const headIconClass = computed(() => ({
|
||||||
'f-icon': true,
|
'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 () => {
|
||||||
return (
|
return (
|
||||||
<div class={accordingItemClass.value}>
|
<div class={accordionItemClass.value}>
|
||||||
<div class="card-header" onClick={onClick}>
|
<div class="card-header" onClick={onClick}>
|
||||||
<div class="panel-item-title">
|
<div class="panel-item-title">
|
||||||
{shouldShowHeader.value && <span>{title.value}</span>}
|
{shouldShowHeader.value && <span>{title.value}</span>}
|
|
@ -1,9 +1,9 @@
|
||||||
import { ExtractPropTypes } from 'vue';
|
import { ExtractPropTypes } from 'vue';
|
||||||
|
|
||||||
export const accordingItemProps = {
|
export const accordionItemProps = {
|
||||||
width: { type: Number },
|
width: { type: Number },
|
||||||
height: { type: Number },
|
height: { type: Number },
|
||||||
title: { type: String, default: '' },
|
title: { type: String, default: '' },
|
||||||
disable: { type: Boolean, default: false }
|
disable: { type: Boolean, default: false }
|
||||||
};
|
};
|
||||||
export type AccordingItemProps = ExtractPropTypes<typeof accordingItemProps>;
|
export type AccordionItemProps = ExtractPropTypes<typeof accordionItemProps>;
|
|
@ -1,13 +1,33 @@
|
||||||
import { computed, defineComponent, SetupContext } from 'vue';
|
import { computed, defineComponent, ref, SetupContext } from 'vue';
|
||||||
import { PopoverProps, popoverProps } from './popover.props';
|
import { PopoverProps, popoverProps } from './popover.props';
|
||||||
|
|
||||||
|
import './popover.scss';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'FPopover',
|
name: 'FPopover',
|
||||||
props: popoverProps,
|
props: popoverProps,
|
||||||
emits: [],
|
emits: [],
|
||||||
setup(props: PopoverProps, context: SetupContext) {
|
setup(props: PopoverProps, context: SetupContext) {
|
||||||
|
|
||||||
|
const position = ref(props.position);
|
||||||
|
|
||||||
const shouldShowTitle = computed(() => !!props.title);
|
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(() => ({
|
const popoverContainerClass = computed(() => ({
|
||||||
'popover-content': true,
|
'popover-content': true,
|
||||||
'popover-body': true
|
'popover-body': true
|
||||||
|
@ -15,11 +35,11 @@ export default defineComponent({
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div>
|
||||||
<div class="popover-arrow arrow"></div>
|
<div class="popover-arrow arrow"></div>
|
||||||
{shouldShowTitle.value && <h3 class="popover-title popover-header">{props.title}</h3>}
|
{shouldShowTitle.value && <h3 class="popover-title popover-header">{props.title}</h3>}
|
||||||
<div class={popoverContainerClass.value}>{context.slots.default && context.slots?.default()}</div>
|
<div class={popoverContainerClass.value}>{context.slots.default && context.slots?.default()}</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
|
@ -9,7 +9,7 @@ import FButton from '../components/button/src/button.component';
|
||||||
import Switch from './components/switch.vue';
|
import Switch from './components/switch.vue';
|
||||||
import Section from './components/section.vue';
|
import Section from './components/section.vue';
|
||||||
import Notify from './components/notify.vue';
|
import Notify from './components/notify.vue';
|
||||||
import According from './components/according.vue';
|
import Accordion from './components/accordion.vue';
|
||||||
|
|
||||||
const canEdit = ref(true);
|
const canEdit = ref(true);
|
||||||
const disable = ref(false);
|
const disable = ref(false);
|
||||||
|
@ -39,7 +39,7 @@ const canAutoComplete = ref(false);
|
||||||
<Switch></Switch>
|
<Switch></Switch>
|
||||||
<Section></Section>
|
<Section></Section>
|
||||||
<Notify></Notify>
|
<Notify></Notify>
|
||||||
<According></According>
|
<Accordion></Accordion>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
Loading…
Reference in New Issue