@tekkare/romulus 0.1.0 → 0.1.5

package/dist/runtime/components/Sidebar.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+export interface RmSidebarMenuItem {
+  /** Display label */
+  label: string
+  /** Phosphor icon name (e.g. "ChartBar", "Flask") */
+  icon: string
+  /** Navigation path (if no children) */
+  to?: string
+  /** Sub-menu items */
+  children?: RmSidebarMenuItem[]
+}
+
+export interface RmSidebarProps {
+  /** Application name displayed in the header */
+  name: string
+  /** Menu items */
+  menus: RmSidebarMenuItem[]
+  /** Whether the sidebar is open */
+  open?: boolean
+}
+
+const props = withDefaults(defineProps<RmSidebarProps>(), {
+  open: true,
+})
+
+defineEmits<{
+  toggle: []
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const expandedMenu = ref<string | null>(null)
+
+function onSubmenuEnter(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = '0'
+  element.style.overflow = 'hidden'
+  element.offsetHeight // force reflow
+  element.style.transition = 'height 250ms ease, opacity 250ms ease'
+  element.style.opacity = '0'
+  element.style.height = element.scrollHeight + 'px'
+  element.style.opacity = '1'
+}
+
+function onSubmenuAfterEnter(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = ''
+  element.style.overflow = ''
+  element.style.transition = ''
+  element.style.opacity = ''
+}
+
+function onSubmenuLeave(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = element.scrollHeight + 'px'
+  element.style.overflow = 'hidden'
+  element.offsetHeight // force reflow
+  element.style.transition = 'height 200ms ease, opacity 200ms ease'
+  element.style.height = '0'
+  element.style.opacity = '0'
+}
+
+function onSubmenuAfterLeave(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = ''
+  element.style.overflow = ''
+  element.style.transition = ''
+  element.style.opacity = ''
+}
+
+function isActive(item: RmSidebarMenuItem): boolean {
+  if (item.to) return route.path === item.to
+  return item.children?.some(c => isActive(c)) ?? false
+}
+
+function handleClick(item: RmSidebarMenuItem) {
+  if (item.children) {
+    expandedMenu.value = expandedMenu.value === item.label ? null : item.label
+  }
+  else if (item.to) {
+    router.push(item.to)
+  }
+}
+</script>
+
+<template>
+  <aside class="rm-sidebar" :class="{ 'rm-sidebar--collapsed': !open }">
+    <div class="rm-sidebar__header">
+      <div v-if="open" class="rm-sidebar__brand">
+        <RmIcon name="DiamondsFour" :size="22" weight="duotone" class="rm-sidebar__logo" />
+        <span class="rm-sidebar__name">{{ name }}</span>
+      </div>
+      <button class="rm-sidebar__toggle" @click="$emit('toggle')">
+        <RmIcon name="SidebarSimple" :size="20" />
+      </button>
+    </div>
+
+    <nav class="rm-sidebar__nav">
+      <template v-for="item in menus" :key="item.label">
+        <RmNavLink
+          :icon="item.icon"
+          :label="open ? item.label : ''"
+          :active="isActive(item)"
+          :caret="item.children && open ? 'expand' : 'none'"
+          :expanded="expandedMenu === item.label"
+          @click="handleClick(item)"
+        />
+
+        <Transition
+          @enter="onSubmenuEnter"
+          @after-enter="onSubmenuAfterEnter"
+          @leave="onSubmenuLeave"
+          @after-leave="onSubmenuAfterLeave"
+        >
+          <div
+            v-if="open && item.children && expandedMenu === item.label"
+            class="rm-sidebar__submenu"
+          >
+            <RmNavLink
+              v-for="(child, idx) in item.children"
+              :key="child.label"
+              :icon="child.icon"
+              :label="child.label"
+              :active="isActive(child)"
+              :expandable="false"
+              :style="{ animationDelay: `${idx * 50}ms` }"
+              class="rm-sidebar__submenu-item"
+              @click="child.to && router.push(child.to)"
+            />
+          </div>
+        </Transition>
+      </template>
+    </nav>
+
+    <div v-if="$slots.footer" class="rm-sidebar__footer">
+      <slot name="footer" />
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.rm-sidebar{background-color:var(--r-color-white);border-right:1px solid var(--r-color-gray-200);bottom:0;display:flex;flex-direction:column;left:0;overflow-y:auto;position:fixed;top:0;transition:width var(--r-transition-base);width:240px;z-index:50}.rm-sidebar--collapsed{width:64px}.rm-sidebar__header{align-items:center;border-bottom:1px solid var(--r-color-gray-200);display:flex;justify-content:space-between;min-height:64px;padding:0 16px}.rm-sidebar__brand{align-items:center;display:flex;gap:8px}.rm-sidebar__logo{color:var(--r-color-primary-600)}.rm-sidebar__name{color:var(--r-color-gray-900);font-family:var(--r-font-family);font-size:16px;font-weight:700;white-space:nowrap}.rm-sidebar__toggle{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-500);cursor:pointer;display:flex;justify-content:center;padding:4px}.rm-sidebar__toggle:hover{background-color:var(--r-color-gray-100)}.rm-sidebar__nav{display:flex;flex:1;flex-direction:column;gap:6px;padding:8px}.rm-sidebar__submenu{display:flex;flex-direction:column;gap:6px;padding-left:20px}.rm-sidebar__submenu-item{animation:rm-submenu-fade-in .25s ease both}@keyframes rm-submenu-fade-in{0%{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}.rm-sidebar__footer{border-top:1px solid var(--r-color-gray-200);padding:12px}
+</style>

package/dist/runtime/components/Tabs.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+export interface RmTabsProps {
+  /** Tab labels */
+  tabs: string[]
+  /** Active tab index */
+  modelValue?: number
+  /** Color variant */
+  variant?: 'default' | 'pharma' | 'discovery' | 'databank'
+}
+
+const props = withDefaults(defineProps<RmTabsProps>(), {
+  modelValue: 0,
+  variant: 'default',
+})
+
+const defaultColors = { color: '#4164EE', bg: 'rgba(65, 100, 238, 0.05)' }
+
+const variantColors: Record<string, { color: string; bg: string }> = {
+  default: defaultColors,
+  pharma: { color: '#F7520E', bg: 'rgba(247, 82, 14, 0.05)' },
+  discovery: { color: '#07816F', bg: 'rgba(7, 129, 111, 0.05)' },
+  databank: { color: '#E04380', bg: 'rgba(224, 67, 128, 0.05)' },
+}
+
+const currentColors = computed((): { color: string; bg: string } => variantColors[props.variant] ?? defaultColors)
+
+const emit = defineEmits<{
+  'update:modelValue': [index: number]
+}>()
+
+const route = useRoute()
+const router = useRouter()
+
+const tabRefs = ref<HTMLElement[]>([])
+const indicatorStyle = ref<Record<string, string>>({})
+
+function slugify(name: string): string {
+  return name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '')
+}
+
+function updateIndicator(index: number) {
+  nextTick(() => {
+    const tab = tabRefs.value[index]
+    if (tab) {
+      indicatorStyle.value = {
+        width: `${tab.offsetWidth}px`,
+        transform: `translateX(${tab.offsetLeft}px)`,
+      }
+    }
+  })
+}
+
+function selectTab(index: number) {
+  emit('update:modelValue', index)
+  updateIndicator(index)
+
+  const tabSlug = slugify(props.tabs[index] ?? '')
+  router.replace({ query: { ...route.query, tab: tabSlug } })
+}
+
+onMounted(() => {
+  if (route.query.tab) {
+    const tabParam = route.query.tab as string
+    const index = props.tabs.findIndex(t => slugify(t) === tabParam)
+    if (index >= 0) {
+      emit('update:modelValue', index)
+      updateIndicator(index)
+      return
+    }
+  }
+  updateIndicator(props.modelValue)
+})
+
+watch(() => props.modelValue, (val) => updateIndicator(val))
+</script>
+
+<template>
+  <div class="rm-tabs">
+    <div class="rm-tabs__list">
+      <button
+        v-for="(tab, idx) in tabs"
+        :key="idx"
+        :ref="(el) => { if (el) tabRefs[idx] = el as HTMLElement }"
+        class="rm-tabs__tab"
+        :class="{ 'rm-tabs__tab--active': modelValue === idx }"
+        :style="{
+          '--tab-active-color': currentColors.color,
+          '--tab-active-bg': currentColors.bg,
+          ...(modelValue === idx ? { color: currentColors.color, background: currentColors.bg } : {}),
+        }"
+        @click="selectTab(idx)"
+      >
+        {{ tab }}
+      </button>
+      <span
+        class="rm-tabs__indicator"
+        :style="{ ...indicatorStyle, backgroundColor: currentColors.color }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-tabs{background-color:var(--r-color-white);border-bottom:1px solid var(--r-color-gray-200)}.rm-tabs__list{display:flex;padding:8px 20px 0;position:relative}.rm-tabs__tab{background:none;border:none;border-radius:4px 4px 0 0;color:var(--r-color-gray-500);cursor:pointer;font-family:var(--r-font-family);font-size:14px;font-weight:400;padding:12px 16px;position:relative;transition:color var(--r-transition-fast),background var(--r-transition-fast);white-space:nowrap}.rm-tabs__tab:hover{background:var(--tab-active-bg);color:var(--r-color-gray-700)}.rm-tabs__tab--active{font-weight:500}.rm-tabs__indicator{border-radius:2px 2px 0 0;bottom:0;height:2px;left:0;position:absolute;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
+</style>

package/dist/runtime/components/ToolbarFilter.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { PhCaretDown, PhCheck } from '@phosphor-icons/vue'
+import type { Component } from 'vue'
+
+export interface FilterOption {
+  label: string
+  value: string
+}
+
+const props = withDefaults(defineProps<{
+  icon?: Component
+  label: string
+  prefix?: string
+  options: FilterOption[]
+  variant?: 'default' | 'primary' | 'secondary' | 'pharma' | 'discovery' | 'databank'
+  multiple?: boolean
+}>(), {
+  icon: undefined,
+  prefix: undefined,
+  variant: 'default',
+  multiple: true,
+})
+
+const selected = defineModel<string[]>({ default: () => [] })
+
+const isOpen = ref(false)
+const filterRef = ref<HTMLElement>()
+const hasUserChanged = ref(false)
+
+// Initialise avec la première option par défaut (synchrone pour éviter hydration mismatch)
+if (selected.value.length === 0 && props.options.length > 0) {
+  selected.value = [props.options[0]!.value]
+}
+
+const isActive = computed(() => hasUserChanged.value && selected.value.length > 0)
+
+const pillLabel = computed(() => {
+  if (props.prefix) {
+    if (selected.value.length === 0) return `${props.prefix} ${props.label}`
+    const option = props.options.find(o => o.value === selected.value[0])
+    return `${props.prefix} ${option ? option.label : props.label}`
+  }
+  if (selected.value.length === 0) return props.label
+  if (selected.value.length === 1) {
+    const option = props.options.find(o => o.value === selected.value[0])
+    return option ? option.label : props.label
+  }
+  return `${props.label} (${selected.value.length})`
+})
+
+const pillVariant = computed(() => {
+  if (props.prefix) return props.variant
+  if (isActive.value) return props.variant === 'default' ? 'primary' : props.variant
+  return 'default'
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function toggleOption(value: string) {
+  hasUserChanged.value = true
+  if (props.multiple) {
+    const index = selected.value.indexOf(value)
+    if (index === -1) {
+      selected.value = [...selected.value, value]
+    } else {
+      selected.value = selected.value.filter(v => v !== value)
+    }
+  } else {
+    selected.value = [value]
+    isOpen.value = false
+  }
+}
+
+function isSelected(value: string) {
+  return selected.value.includes(value)
+}
+
+function onClickOutside(e: Event) {
+  if (filterRef.value && !filterRef.value.contains(e.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
+</script>
+
+<template>
+  <div ref="filterRef" class="toolbar-filter">
+    <RmPill
+      :icon="icon"
+      :label="pillLabel"
+      :active="isActive && variant === 'default'"
+      :variant="pillVariant"
+      @click="toggle"
+    >
+      <template #default>
+        <PhCaretDown
+          :size="12"
+          class="toolbar-filter__caret"
+          :class="{ 'toolbar-filter__caret--open': isOpen }"
+        />
+      </template>
+    </RmPill>
+
+    <Transition name="dropdown">
+      <div v-if="isOpen" class="toolbar-filter__dropdown">
+        <button
+          v-for="option in options"
+          :key="option.value"
+          class="toolbar-filter__option"
+          :class="{ 'toolbar-filter__option--selected': isSelected(option.value) }"
+          @click="toggleOption(option.value)"
+        >
+          <span
+            :class="[
+              multiple ? 'toolbar-filter__checkbox' : 'toolbar-filter__radio',
+              isSelected(option.value) && (multiple ? 'toolbar-filter__checkbox--checked' : 'toolbar-filter__radio--checked'),
+            ]"
+          >
+            <PhCheck v-if="multiple && isSelected(option.value)" :size="10" weight="bold" />
+          </span>
+          <span>{{ option.label }}</span>
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.toolbar-filter{position:relative}.toolbar-filter__caret{opacity:.6;transition:transform var(--r-transition-fast)}.toolbar-filter__caret--open{transform:rotate(180deg)}.toolbar-filter__dropdown{background-color:var(--r-color-white);border:1px solid var(--r-color-gray-200);border-radius:var(--r-radius-lg);box-shadow:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);left:0;max-height:260px;min-width:200px;overflow-y:auto;padding:var(--r-space-1);position:absolute;top:calc(100% + var(--r-space-2));z-index:50}.toolbar-filter__option{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-700);cursor:pointer;display:flex;font-family:inherit;font-size:var(--r-text-sm);gap:var(--r-space-2);padding:var(--r-space-2) var(--r-space-3);text-align:left;transition:background-color var(--r-transition-fast);width:100%}.toolbar-filter__option:hover{background-color:var(--r-color-gray-50)}.toolbar-filter__option--selected{color:var(--r-color-gray-900);font-weight:var(--r-font-weight-medium)}.toolbar-filter__checkbox{align-items:center;border:1.5px solid var(--r-color-gray-300);border-radius:var(--r-radius-sm);display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--r-transition-fast);width:16px}.toolbar-filter__checkbox--checked{background-color:var(--r-color-primary-600);border-color:var(--r-color-primary-600);color:var(--r-color-white)}.toolbar-filter__radio{align-items:center;border:1.5px solid var(--r-color-gray-300);border-radius:var(--r-radius-full);display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--r-transition-fast);width:16px}.toolbar-filter__radio--checked{border-color:var(--r-color-primary-600)}.toolbar-filter__radio--checked:after{background-color:var(--r-color-primary-600);border-radius:var(--r-radius-full);content:"";height:8px;width:8px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--r-transition-fast),transform var(--r-transition-fast)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.0",
+  "version": "0.1.5",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -23,10 +23,11 @@
   "scripts": {
     "build": "nuxt-module-build build",
     "dev": "nuxi dev playground",
-"typecheck": "nuxi typecheck"
+    "typecheck": "nuxi typecheck"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.16.0"
+    "@nuxt/kit": "^3.16.0",
+    "@phosphor-icons/vue": "^2.2.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.4",