@citizenplane/pimp 13.0.0 → 14.0.0

package/src/components/CpTransitionListItems.vue

@@ -0,0 +1,41 @@
+<template>
+  <transition-group :name="dynamicTransitionName">
+    <slot />
+  </transition-group>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+interface Props {
+  disableOnLoad?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), { disableOnLoad: false })
+
+const isDisabled = ref<boolean>(props.disableOnLoad)
+
+const dynamicTransitionName = computed<string>(() => (isDisabled.value ? '' : 'list-items'))
+
+onMounted(() => (isDisabled.value = false))
+</script>
+
+<style lang="scss">
+.list-items-move,
+.list-items-enter-active,
+.list-items-leave-active {
+  transition:
+    transform 400ms ease,
+    opacity 200ms ease;
+}
+
+.list-items-enter-from,
+.list-items-leave-to {
+  opacity: 0;
+  transform: translate3d(fn.px-to-rem(30), 0, 0);
+}
+
+.list-items-leave-active {
+  position: absolute;
+}
+</style>

package/src/components/CpTransitionSize.vue

@@ -0,0 +1,88 @@
+<template>
+  <div :id="transitionId" ref="slotWrapper" class="cpTransitionSize" :class="componentDynamicClass">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount, useId, nextTick } from 'vue'
+
+interface Props {
+  type?: 'width' | 'height'
+}
+
+const props = withDefaults(defineProps<Props>(), { type: 'width' })
+
+const slotWrapper = ref()
+const slotContent = computed<HTMLElement | null>(() => slotWrapper.value?.children[0])
+
+const isHeight = computed<boolean>(() => props.type === 'height')
+
+const componentDynamicClass = computed(() => {
+  return { 'cpTransitionSize--isHeight': isHeight.value }
+})
+
+const transitionId = useId()
+
+const updateWrapperSize = async () => {
+  if (!slotContent.value) return
+
+  const size = slotContent.value[isHeight.value ? 'clientHeight' : 'clientWidth']
+  const property = isHeight.value ? 'min-height' : 'width'
+
+  slotWrapper.value.style[property] = `${size}px`
+
+  const transitionItem = document.getElementById(transitionId)
+  if (!transitionItem || !isHeight.value) return
+
+  slotWrapper.value.style.height = 0
+
+  await nextTick()
+
+  transitionItem.addEventListener(
+    'transitionend',
+    () => {
+      if (slotWrapper.value) {
+        slotWrapper.value.style.height = 'auto'
+      }
+    },
+    { once: true },
+  )
+}
+
+const observer = ref<MutationObserver>()
+
+const initObserver = () => {
+  observer.value = new MutationObserver(updateWrapperSize)
+  observer.value.observe(slotContent.value as HTMLElement, { childList: true, subtree: false })
+
+  updateWrapperSize()
+}
+
+onMounted(() => {
+  if (slotContent.value) {
+    initObserver()
+  }
+})
+
+onBeforeUnmount(() => {
+  if (observer.value) observer.value.disconnect()
+})
+</script>
+
+<style lang="scss">
+.cpTransitionSize {
+  display: inline-flex;
+  overflow: hidden;
+  transition-duration: 350ms;
+  transition-property: width;
+  transition-timing-function: var(--cp-easing-elastic);
+  white-space: nowrap;
+
+  &--isHeight {
+    display: block;
+    transition-property: min-height;
+    transition-timing-function: ease;
+  }
+}
+</style>

package/src/components/CpTransitionSlide.vue

@@ -0,0 +1,44 @@
+<template>
+  <transition :mode="mode" :name="formattedTransitionName">
+    <slot />
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  mode?: 'in-out' | 'out-in' | 'default'
+  slideTo?: 'top' | 'left'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  slideTo: 'top',
+  mode: 'out-in',
+})
+
+const formattedTransitionName = computed(() => `slide-${props.slideTo}`)
+</script>
+
+<style lang="scss">
+.slide-top-enter-active,
+.slide-top-leave-active,
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition:
+    transform 300ms ease,
+    opacity 300ms ease;
+}
+
+.slide-top-enter-from,
+.slide-top-leave-to {
+  opacity: 0;
+  transform: scale3d(0.8, 0.8, 1) translate3d(0, fn.px-to-rem(10), 0);
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: scale3d(0.8, 0.8, 1) translate3d(fn.px-to-rem(10), 0, 0);
+}
+</style>

package/src/components/CpTransitionTabContent.vue

@@ -0,0 +1,70 @@
+<template>
+  <transition :duration="duration" mode="out-in" :name="formattedTransitionName" @after-enter="emit('onAfterEnter')">
+    <slot />
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type Direction = 'forward' | 'backward'
+
+type EmitType = {
+  (event: 'onAfterEnter'): void
+}
+
+interface Props {
+  direction?: Direction
+  duration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: 'forward',
+  duration: 300,
+})
+
+const emit = defineEmits<EmitType>()
+
+const formattedTransitionName = computed(() => `tab-content-${props.direction}`)
+</script>
+
+<style lang="scss">
+.tab-content-backward,
+.tab-content-forward {
+  &-enter-active,
+  &-leave-active {
+    transition:
+      transform 300ms ease,
+      opacity 300ms ease;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.tab-content-forward {
+  &-enter-from {
+    transform: translate3d(10vw, 0, 0);
+  }
+
+  &-leave-to {
+    transform: translate3d(-10vw, 0, 0);
+  }
+}
+
+.tab-content-backward {
+  &-enter-from {
+    transform: translate3d(-10vw, 0, 0);
+  }
+
+  &-leave-to {
+    transform: translate3d(10vw, 0, 0);
+  }
+}
+</style>

package/src/components/index.ts

@@ -14,6 +14,8 @@ import VueTelInput from 'vue-tel-input'
 
 import ClickOutside from '../directives/ClickOutside'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
+import CpAccordion from './CpAccordion.vue'
+import CpAccordionGroup from './CpAccordionGroup.vue'
 import CpAirlineLogo from './CpAirlineLogo.vue'
 import CpAlert from './CpAlert.vue'
 import CpBadge from './CpBadge.vue'
@@ -45,7 +47,13 @@ import CpTelInput from './CpTelInput.vue'
 import CpTextarea from './CpTextarea.vue'
 import CpToast from './CpToast.vue'
 import CpTooltip from './CpTooltip.vue'
+import CpTransitionCounter from './CpTransitionCounter.vue'
 import CpTransitionDialog from './CpTransitionDialog.vue'
+import CpTransitionExpand from './CpTransitionExpand.vue'
+import CpTransitionListItems from './CpTransitionListItems.vue'
+import CpTransitionSize from './CpTransitionSize.vue'
+import CpTransitionSlide from './CpTransitionSlide.vue'
+import CpTransitionTabContent from './CpTransitionTabContent.vue'
 import IconAirline from './icons/IconAirline.vue'
 import IconCheckList from './icons/IconCheckList.vue'
 import IconCollapse from './icons/IconCollapse.vue'
@@ -55,9 +63,10 @@ import IconOta from './icons/IconOta.vue'
 import IconSupplier from './icons/IconSupplier.vue'
 import IconThirdParty from './icons/IconThirdParty.vue'
 import IconTooltip from './icons/IconTooltip.vue'
-import TransitionExpand from './TransitionExpand.vue'
 
 const Components = {
+  CpAccordion,
+  CpAccordionGroup,
   CpToast,
   CpBadge,
   CpTabs,
@@ -100,7 +109,12 @@ const Components = {
   IconExpand,
   IconCheckList,
   CpTransitionDialog,
-  TransitionExpand,
+  CpTransitionExpand,
+  CpTransitionSize,
+  CpTransitionCounter,
+  CpTransitionListItems,
+  CpTransitionSlide,
+  CpTransitionTabContent,
 }
 
 const Pimp = {

package/src/constants/Sizes.ts

@@ -1,11 +1 @@
-export enum Sizes {
-  XXS = '2xs',
-  XS = 'xs',
-  SM = 'sm',
-  MD = 'md',
-  LG = 'lg',
-  XL = 'xl',
-  XXL = '2xl',
-  XXXL = '3xl',
-  XXXXL = '4xl',
-}
+export type Sizes = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'

package/src/constants/index.ts

@@ -3,7 +3,7 @@ export { Position } from './Position'
 export type { ToggleColors } from './colors/ToggleColors'
 export { HeadingLevels } from './Heading'
 export { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
-export { Sizes } from './Sizes'
+export type { Sizes } from './Sizes'
 export { PartnerTypes } from './PartnerTypes'
 
 export { CustomCpIcons } from './CpCustomIcons'

package/src/stories/BaseInputLabel.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
 const meta = {
-  title: 'BaseInputLabel',
+  title: 'Form/BaseInputLabel',
   component: BaseInputLabel,
   argTypes: {
     isInvalid: {

package/src/stories/CpAccordion.stories.ts

@@ -0,0 +1,282 @@
+import { computed } from 'vue'
+
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { MenuItem } from 'primevue/menuitem'
+
+import type { CpAccordionBaseProps } from '@/components/CpAccordion.vue'
+import CpAccordion from '@/components/CpAccordion.vue'
+
+import {
+  docCellStyle,
+  docLabelStyle,
+  docPageStyle,
+  docRowColumnStyle,
+  docSectionStyle,
+  docTitleStyle,
+} from '@/stories/documentationStyles'
+
+/** Storybook controls: component props remain a discriminated union in `CpAccordion.vue`. */
+type CpAccordionStoryArgs = CpAccordionBaseProps & {
+  actions?: MenuItem[]
+  hideActionTrigger?: boolean
+  iconPosition?: 'leading' | 'trailing'
+}
+
+const defaultStoryActions: MenuItem[] = [
+  {
+    icon: 'copy',
+    label: 'Duplicate',
+    command: () => {},
+  },
+  {
+    icon: 'trash-2',
+    label: 'Delete',
+    command: () => {},
+    isCritical: true,
+  },
+]
+
+const meta = {
+  title: 'Navigation/CpAccordion',
+  component: CpAccordion,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Accordion header title',
+    },
+    defaultOpenState: {
+      control: 'boolean',
+      description: 'Initial open state when the accordion is rendered',
+    },
+    hideActionTrigger: {
+      control: 'boolean',
+      description: 'Whether to hide the action trigger',
+    },
+    iconPosition: {
+      control: 'select',
+      options: ['leading', 'trailing'],
+      description: 'Chevron icon position',
+    },
+    quickOptionsLimit: {
+      control: 'number',
+      description: 'Number of quick options to display',
+    },
+    actions: {
+      control: 'object',
+      description:
+        'MenuItem[] (leading only). Editing as JSON drops `command` functions; use Reset to restore working actions.',
+    },
+  },
+} as Meta<CpAccordionStoryArgs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleContentStyle =
+  'padding: 16px; font-size: 13px; color: #374151; background: repeating-linear-gradient(45deg, #fff9c4, #fff9c4 4px, #fffde7 4px, #fffde7 8px);'
+const highlightedSlotStyle = 'background: #fff9c4;'
+
+const defaultRender = (args: Args) => ({
+  components: { CpAccordion },
+  setup() {
+    const accordionArgs = computed(() => {
+      if (args.iconPosition === 'trailing') {
+        const a = args as CpAccordionStoryArgs & Args
+        return {
+          defaultOpenState: a.defaultOpenState,
+          iconPosition: 'trailing' as const,
+          quickOptionsLimit: a.quickOptionsLimit,
+          title: a.title,
+        }
+      }
+
+      return args
+    })
+
+    return { accordionArgs, sampleContentStyle }
+  },
+  template: `
+    <div style="box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; width: 500px;">
+      <CpAccordion v-bind="accordionArgs">
+        <div :style="sampleContentStyle" />
+      </CpAccordion>
+    </div>
+  `,
+})
+
+export const Documentation: Story = {
+  args: {
+    title: 'I have title.',
+  },
+  render: () => ({
+    components: { CpAccordion },
+    setup: () => ({
+      docPageStyle,
+      docSectionStyle,
+      docTitleStyle,
+      docRowColumnStyle,
+      docCellStyle,
+      docLabelStyle,
+      sampleContentStyle,
+      highlightedSlotStyle,
+      actions: defaultStoryActions,
+    }),
+    template: `
+      <div :style="docPageStyle">
+        <h1 style="margin: 0 0 24px 0; font-size: 28px; font-weight: 700; color: #111827;">CpAccordion</h1>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Is Open</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">false</span>
+              <CpAccordion title="I have title." :default-open-state="false" icon-position="trailing">
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">true</span>
+              <CpAccordion title="I have title." :default-open-state="true" icon-position="trailing">
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+          </div>
+        </section>
+
+        <h2 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: #111827;">
+          Unpublished Base: <span style="font-weight: 700;">Accordion Header</span>
+        </h2>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Style</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Leading Chevron</span>
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="leading">
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Trailing Chevron</span>
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="trailing">
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+          </div>
+        </section>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Actions</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Default</span>
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="leading" :actions="actions" :quick-options-limit="3">
+                <template #trailing-slot>
+                  This is a trailing slot
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Hover</span>
+              <CpAccordion
+                title="DIDA TRAVEL"
+                :default-open-state="false"
+                icon-position="leading"
+                style="background: var(--cp-background-primary-hover);"
+                :actions="actions"
+                :quick-options-limit="3"
+              >
+                <template #trailing-slot>
+                  This is a trailing slot
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Hide Action Trigger</span>
+              <CpAccordion
+                title="DIDA TRAVEL"
+                :default-open-state="false"
+                icon-position="leading"
+                style="background: var(--cp-background-primary-hover);"
+                :actions="actions"
+                :quick-options-limit="3"
+                hide-action-trigger
+              >
+                <template #trailing-slot>
+                  This is a trailing slot
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+          </div>
+        </section>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Has Leading Slot</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="leading" :actions="actions" :quick-options-limit="3">
+                <template #leading-slot>
+                  <span :style="highlightedSlotStyle">I have text.</span>
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+            <div :style="docCellStyle">
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="trailing">
+                <template #leading-slot>
+                  <span :style="highlightedSlotStyle">I have text.</span>
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+          </div>
+        </section>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Has Trailing Slot</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="leading">
+                <template #trailing-slot>
+                  <span :style="highlightedSlotStyle">I have text.</span>
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+             <div :style="docCellStyle">
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="trailing">
+                <template #trailing-slot>
+                  <span :style="highlightedSlotStyle">I have text.</span>
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: {
+        code: null,
+      },
+    },
+  },
+}
+
+export const Default: Story = {
+  args: {
+    title: 'I have title.',
+    defaultOpenState: true,
+    iconPosition: 'leading',
+    quickOptionsLimit: 2,
+    hideActionTrigger: false,
+    actions: defaultStoryActions,
+  },
+  render: defaultRender,
+}