rogee
321c61aaae
Copy the Chatwoot (v4.14.0) frontend runnable subset into frontend/ for customization: - app/javascript/ (Vue SPA: dashboard, widget, sdk, portal, superadmin) - app/views/ (ERB templates for vite-plugin-ruby entrypoint resolution) - app/helpers/, app/assets/ (Rails view helpers, static assets) - enterprise/ (Enterprise edition frontend overlay) - config/vite.json, vite.config.ts, bin/vite (Vite-Rails toolchain) - package.json, pnpm-lock.yaml, tailwind/postcss/eslint configs - Gemfile, Gemfile.lock (vite_rails gem for bin/vite binstub) Excluded Rails backend: controllers, models, services, jobs, mailers, policies, db, lib, spec, public, node_modules. Update references to the new frontend location: - .gitignore: exclude frontend build artifacts (node_modules, tmp, packs), keep frontend/bin/ and frontend/vendor/ via negation - backend/scripts/parity_frontend_smoke.sh: CHATWOOT_DIR default reference/chatwoot -> ../frontend - backend/scripts/parity_frontend_browser_smoke.mjs: same default update - AGENTS.md: add frontend section with Rails/Vite coupling notes - README: architecture tree includes frontend/
97 lines
2.3 KiB
Vue
97 lines
2.3 KiB
Vue
<script setup>
|
|
import { ref, useTemplateRef, provide, computed, watch } from 'vue';
|
|
import { useElementSize } from '@vueuse/core';
|
|
|
|
const props = defineProps({
|
|
index: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['change']);
|
|
|
|
const tabsContainer = useTemplateRef('tabsContainer');
|
|
const tabsList = useTemplateRef('tabsList');
|
|
|
|
const { width: containerWidth } = useElementSize(tabsContainer);
|
|
const { width: listWidth } = useElementSize(tabsList);
|
|
|
|
const hasScroll = ref(false);
|
|
|
|
const activeIndex = computed({
|
|
get: () => props.index,
|
|
set: newValue => {
|
|
emit('change', newValue);
|
|
},
|
|
});
|
|
|
|
provide('activeIndex', activeIndex);
|
|
provide('updateActiveIndex', index => {
|
|
activeIndex.value = index;
|
|
});
|
|
|
|
const computeScrollWidth = () => {
|
|
if (tabsContainer.value && tabsList.value) {
|
|
hasScroll.value = tabsList.value.scrollWidth > tabsList.value.clientWidth;
|
|
}
|
|
};
|
|
|
|
const onScrollClick = direction => {
|
|
if (tabsContainer.value && tabsList.value) {
|
|
let scrollPosition = tabsList.value.scrollLeft;
|
|
scrollPosition += direction === 'left' ? -100 : 100;
|
|
tabsList.value.scrollTo({
|
|
top: 0,
|
|
left: scrollPosition,
|
|
behavior: 'smooth',
|
|
});
|
|
}
|
|
};
|
|
|
|
// Watch for changes in element sizes with immediate execution
|
|
watch(
|
|
[containerWidth, listWidth],
|
|
() => {
|
|
computeScrollWidth();
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
ref="tabsContainer"
|
|
class="flex"
|
|
:class="[border && 'border-b border-b-n-weak']"
|
|
>
|
|
<button
|
|
v-if="hasScroll"
|
|
class="items-center rounded-none cursor-pointer flex h-auto justify-center min-w-8"
|
|
@click="onScrollClick('left')"
|
|
>
|
|
<fluent-icon icon="chevron-left" :size="16" />
|
|
</button>
|
|
<ul
|
|
ref="tabsList"
|
|
class="border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0"
|
|
:class="
|
|
hasScroll ? 'overflow-hidden py-0 px-1 max-w-[calc(100%-64px)]' : ''
|
|
"
|
|
>
|
|
<slot />
|
|
</ul>
|
|
<button
|
|
v-if="hasScroll"
|
|
class="items-center rounded-none cursor-pointer flex h-auto justify-center min-w-8"
|
|
@click="onScrollClick('right')"
|
|
>
|
|
<fluent-icon icon="chevron-right" :size="16" />
|
|
</button>
|
|
</div>
|
|
</template>
|