| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- import { inject, ref, computed, unref } from 'vue';
- import { collapseContextKey } from './constants.mjs';
- import { useIdInjection } from '../../../hooks/use-id/index.mjs';
- import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
- const useCollapseItem = (props) => {
- const collapse = inject(collapseContextKey);
- const { namespace } = useNamespace("collapse");
- const focusing = ref(false);
- const isClick = ref(false);
- const idInjection = useIdInjection();
- const id = computed(() => idInjection.current++);
- const name = computed(() => {
- var _a;
- return (_a = props.name) != null ? _a : `${namespace.value}-id-${idInjection.prefix}-${unref(id)}`;
- });
- const isActive = computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(unref(name)));
- const handleFocus = () => {
- setTimeout(() => {
- if (!isClick.value) {
- focusing.value = true;
- } else {
- isClick.value = false;
- }
- }, 50);
- };
- const handleHeaderClick = (e) => {
- if (props.disabled)
- return;
- const target = e.target;
- if (target == null ? void 0 : target.closest("input, textarea, select"))
- return;
- collapse == null ? void 0 : collapse.handleItemClick(unref(name));
- focusing.value = false;
- isClick.value = true;
- };
- const handleEnterClick = (e) => {
- const target = e.target;
- if (target == null ? void 0 : target.closest("input, textarea, select"))
- return;
- e.preventDefault();
- collapse == null ? void 0 : collapse.handleItemClick(unref(name));
- };
- return {
- focusing,
- id,
- isActive,
- handleFocus,
- handleHeaderClick,
- handleEnterClick
- };
- };
- const useCollapseItemDOM = (props, { focusing, isActive, id }) => {
- const ns = useNamespace("collapse");
- const rootKls = computed(() => [
- ns.b("item"),
- ns.is("active", unref(isActive)),
- ns.is("disabled", props.disabled)
- ]);
- const headKls = computed(() => [
- ns.be("item", "header"),
- ns.is("active", unref(isActive)),
- { focusing: unref(focusing) && !props.disabled }
- ]);
- const arrowKls = computed(() => [
- ns.be("item", "arrow"),
- ns.is("active", unref(isActive))
- ]);
- const itemTitleKls = computed(() => [ns.be("item", "title")]);
- const itemWrapperKls = computed(() => ns.be("item", "wrap"));
- const itemContentKls = computed(() => ns.be("item", "content"));
- const scopedContentId = computed(() => ns.b(`content-${unref(id)}`));
- const scopedHeadId = computed(() => ns.b(`head-${unref(id)}`));
- return {
- itemTitleKls,
- arrowKls,
- headKls,
- rootKls,
- itemWrapperKls,
- itemContentKls,
- scopedContentId,
- scopedHeadId
- };
- };
- export { useCollapseItem, useCollapseItemDOM };
- //# sourceMappingURL=use-collapse-item.mjs.map
|