yakovenko_arina/library_components
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cjange some files

Browse Source
This commit is contained in:
Arina Yakovenko
2024-07-08 09:34:20 +02:00
parent d53cc77d45
commit a1ac3de862
38 changed files with 48 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/Ml/Accordion/MlAccordionBase.vue
View File

@ -1,53 +0,0 @@
<template>
<div :class="classes">
<slot />
</div>
</template>
<script lang="ts" setup>
import type { AccordionProps, tAccordionStates } from './types';
import { twMerge } from 'tailwind-merge';
const props = withDefaults(defineProps<AccordionProps>(), {
alwaysOpen: true,
openFirstItem: true,
flush: false,
mode: 'single'
});
const classes = computed(() => twMerge('', props.class));
const state = ref({
options: { ...props },
panels: {},
initialized: false
} as tAccordionStates);
const openCloseEvent = (panelId: number): void => {
let isanyopened = false;
if (props.mode == 'single') {
for (const i in state.value.panels) {
if (parseInt(i) == panelId) {
state.value.panels[i].isOpen = !state.value.panels[i].isOpen;
} else {
state.value.panels[i].isOpen = false;
}
}
} else {
state.value.panels[panelId].isOpen = !state.value.panels[panelId].isOpen;
}
if (props.alwaysOpen) {
for (const i in state.value.panels) {
if (state.value.panels[i].isOpen) {
isanyopened = true;
}
}
if (!isanyopened) {
state.value.panels[panelId].isOpen = true;
}
}
};
provide('accordionState', state);
provide('openCloseEvent', openCloseEvent);
</script>

30
components/Ml/Accordion/MlAccordionContent.vue
View File

@ -1,30 +0,0 @@
<template>
<div v-show="isOpen" :class="contentClasses">
<!-- <MaalTransitionFade :delay="0" :duration="500"> -->
<slot />
<!-- </MaalTransitionFade> -->
</div>
</template>
<script lang="ts" setup>
import type { tAccordionStates } from './types';
const panelId = inject('panelId') as Ref<number>;
if (panelId == undefined) {
throw {
message: 'Looks that you are trying to use component AccordionContent without AccordionPanel as parent',
statusCode: 507
};
}
const accordionState = inject('accordionState') as Ref<tAccordionStates>;
if (accordionState == undefined) {
throw {
message: 'Looks that you are trying to use component AccordionContent without AccordionPanel as parent',
statusCode: 507
};
}
const contentClasses = 'p-6';
const isOpen = computed(() => accordionState.value.panels[panelId.value].isOpen);
</script>

50
components/Ml/Accordion/MlAccordionHeader.vue
View File

@ -1,50 +0,0 @@
<template>
<div :class="wrapperClasses">
<button
type="button"
:class="[headerClasses]"
@click="
useRipple($event, props.ripple);
openCloseEvent(panelId);
"
>
<span class="w-full">
<slot />
</span>
</button>
</div>
</template>
<script lang="ts" setup>
import type { tAccordionStates, AccordionHeaderProps } from './types';
const panelId = inject('panelId') as Ref<number>;
if (panelId == undefined) {
throw {
message: 'Looks that you are trying to use component AccordionHeader without AccordionPanel as parent',
statusCode: 507
};
}
const accordionState = inject('accordionState') as Ref<tAccordionStates>;
if (accordionState == undefined) {
throw {
message: 'Looks that you are trying to use component AccordionHeader without AccordionPanel as parent',
statusCode: 507
};
}
const openCloseEvent = inject('openCloseEvent') as Function;
if (openCloseEvent == undefined) {
throw {
message: 'Looks that you are trying to use component AccordionHeader without AccordionPanel or Accordion as parent',
statusCode: 507
};
}
const headerClasses = `flex items-center justify-between w-full px-6 py-4 font-medium rtl:text-right gap-3 text-left`;
const wrapperClasses = '';
const props = withDefaults(defineProps<AccordionHeaderProps>(), {
ripple: true
});
</script>

32
components/Ml/Accordion/MlAccordionPanel.vue
View File

@ -1,32 +0,0 @@
<template>
<div class="md:flex last:border-b-0">
<slot name="header" />
<slot name="content" />
</div>
</template>
<script lang="ts" setup>
import type { AccordionPanelProps, tAccordionStates } from './types';
withDefaults(defineProps<AccordionPanelProps>(), {});
const accordionState = inject('accordionState') as Ref<tAccordionStates>;
if (accordionState == undefined) {
throw {
message: 'Looks that you are trying to use component AccordionPanel without Accordion as parent',
statusCode: 507
};
}
const panelId = ref(Object.keys(accordionState.value.panels).length);
// inject state of this panel
accordionState.value.panels[panelId.value] = {
isOpen: ((): boolean => {
if (accordionState.value.options.openFirstItem && panelId.value == 0) {
return true;
}
return false;
})()
};
provide('panelId', panelId);
</script>

41
components/Ml/Accordion/types.ts
View File

@ -1,41 +0,0 @@
export type tAccordionMode = 'flush' | 'alwaysOpen' | 'default';
export type tAccordionPanel = {
isOpen: boolean;
};
type tAccordionPanels = {
[key: string]: tAccordionPanel;
};
type tStateElement = {
id: string;
flush: boolean;
alwaysOpen: boolean;
openFirstItem: boolean;
panels: tAccordionPanels;
};
export type tState = {
[key: string]: tStateElement;
};
//////////////
export interface AccordionHeaderProps {
ripple?: boolean;
}
export interface AccordionProps {
openFirstItem?: boolean;
alwaysOpen?: boolean;
mode?: 'single' | 'multi';
class?: string | string[];
}
export type tAccordionStates = {
options: AccordionProps;
initialized: boolean;
panels: { [key: number]: tAccordionPanel };
};
export type AccordionPanelProps = {};