@citizenplane/pimp 8.21.0 → 8.22.0

package/src/constants/src/CpCustomIcons.ts

@@ -0,0 +1,69 @@
+import { defineAsyncComponent } from 'vue'
+
+export default {
+  'accompanied-minor-each': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorEach.vue')),
+  'accompanied-minor-none': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorNone.vue')),
+  'accompanied-minor-one': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorOne.vue')),
+  'add-receipt': defineAsyncComponent(() => import('@/components/icons/IconAddReceipt.vue')),
+  airline: defineAsyncComponent(() => import('@/components/icons/IconAirline.vue')),
+  'airport-terminal': defineAsyncComponent(() => import('@/components/icons/IconAirportTerminal.vue')),
+  arrival: defineAsyncComponent(() => import('@/components/icons/IconArrival.vue')),
+  broadcast: defineAsyncComponent(() => import('@/components/icons/IconBroadcast.vue')),
+  'cabin-bag': defineAsyncComponent(() => import('@/components/icons/IconCabinBag.vue')),
+  'checked-baggage': defineAsyncComponent(() => import('@/components/icons/IconCheckedBaggage.vue')),
+  'checked-baggage-20': defineAsyncComponent(() => import('@/components/icons/IconCheckedBaggage20.vue')),
+  'checked-baggage-30': defineAsyncComponent(() => import('@/components/icons/IconCheckedBaggage30.vue')),
+  'check-list': defineAsyncComponent(() => import('@/components/icons/IconCheckList.vue')),
+  child: defineAsyncComponent(() => import('@/components/icons/IconChild.vue')),
+  collapse: defineAsyncComponent(() => import('@/components/icons/IconCollapse.vue')),
+  contact: defineAsyncComponent(() => import('@/components/icons/IconContact.vue')),
+  departure: defineAsyncComponent(() => import('@/components/icons/IconDeparture.vue')),
+  distribution: defineAsyncComponent(() => import('@/components/icons/IconDistribution.vue')),
+  'distribution-closed': defineAsyncComponent(() => import('@/components/icons/IconDistributionClosed.vue')),
+  'distribution-exclusive-pair': defineAsyncComponent(
+    () => import('@/components/icons/IconDistributionExclusivePair.vue'),
+  ),
+  'distribution-sided': defineAsyncComponent(() => import('@/components/icons/IconDistributionSided.vue')),
+  'distribution-supply-sided': defineAsyncComponent(() => import('@/components/icons/IconDistributionSupplySided.vue')),
+  'dynamic-content': defineAsyncComponent(() => import('@/components/icons/IconDynamicContent.vue')),
+  expand: defineAsyncComponent(() => import('@/components/icons/IconExpand.vue')),
+  fares: defineAsyncComponent(() => import('@/components/icons/IconFares.vue')),
+  'fares-outlined': defineAsyncComponent(() => import('@/components/icons/IconFaresOutlined.vue')),
+  female: defineAsyncComponent(() => import('@/components/icons/IconFemale.vue')),
+  'find-conversation': defineAsyncComponent(() => import('@/components/icons/IconFindConversation.vue')),
+  fire: defineAsyncComponent(() => import('@/components/icons/IconFire.vue')),
+  flight: defineAsyncComponent(() => import('@/components/icons/IconFlight.vue')),
+  'flight-return': defineAsyncComponent(() => import('@/components/icons/IconFlightReturn.vue')),
+  'group-by': defineAsyncComponent(() => import('@/components/icons/IconGroupBy.vue')),
+  'hand-heart': defineAsyncComponent(() => import('@/components/icons/IconHandHeart.vue')),
+  history: defineAsyncComponent(() => import('@/components/icons/IconHistory.vue')),
+  hourglass: defineAsyncComponent(() => import('@/components/icons/IconHourGlass.vue')),
+  'id-card': defineAsyncComponent(() => import('@/components/icons/IconIdCard.vue')),
+  infant: defineAsyncComponent(() => import('@/components/icons/IconInfant.vue')),
+  male: defineAsyncComponent(() => import('@/components/icons/IconMale.vue')),
+  'multi-segments': defineAsyncComponent(() => import('@/components/icons/IconMultiSegments.vue')),
+  'no-refund': defineAsyncComponent(() => import('@/components/icons/IconNoRefund.vue')),
+  notion: defineAsyncComponent(() => import('@/components/icons/IconNotion.vue')),
+  offline: defineAsyncComponent(() => import('@/components/icons/IconOffline.vue')),
+  ota: defineAsyncComponent(() => import('@/components/icons/IconOta.vue')),
+  paid: defineAsyncComponent(() => import('@/components/icons/IconPaid.vue')),
+  passport: defineAsyncComponent(() => import('@/components/icons/IconPassport.vue')),
+  payout: defineAsyncComponent(() => import('@/components/icons/IconPayout.vue')),
+  receipt: defineAsyncComponent(() => import('@/components/icons/IconReceipt.vue')),
+  recurrence: defineAsyncComponent(() => import('@/components/icons/IconRecurrence.vue')),
+  refund: defineAsyncComponent(() => import('@/components/icons/IconRefund.vue')),
+  'round-trip': defineAsyncComponent(() => import('@/components/icons/IconRoundTrip.vue')),
+  'route-no-stop': defineAsyncComponent(() => import('@/components/icons/IconRouteNoStop.vue')),
+  'route-one-stop': defineAsyncComponent(() => import('@/components/icons/IconRouteOneStop.vue')),
+  'schedule-change': defineAsyncComponent(() => import('@/components/icons/IconScheduleChange.vue')),
+  'seat-empty': defineAsyncComponent(() => import('@/components/icons/IconSeatEmpty.vue')),
+  'seat-sold': defineAsyncComponent(() => import('@/components/icons/IconSeatSold.vue')),
+  'seat-total': defineAsyncComponent(() => import('@/components/icons/IconSeatTotal.vue')),
+  supplier: defineAsyncComponent(() => import('@/components/icons/IconSupplier.vue')),
+  template: defineAsyncComponent(() => import('@/components/icons/IconTemplate.vue')),
+  'third-party': defineAsyncComponent(() => import('@/components/icons/IconThirdParty.vue')),
+  ticket: defineAsyncComponent(() => import('@/components/icons/IconTicket.vue')),
+  timer: defineAsyncComponent(() => import('@/components/icons/IconTimer.vue')),
+  tooltip: defineAsyncComponent(() => import('@/components/icons/IconTooltip.vue')),
+  'traffic-control': defineAsyncComponent(() => import('@/components/icons/IconTrafficControl.vue')),
+}

package/src/constants/src/colors/{ToggleColors.js → ToggleColors.ts}

@@ -1,4 +1,4 @@
-import { Colors } from '@/constants'
+import Colors from './Colors'
 
 export default {
   BLUE: Colors.BLUE,

package/src/libs/CoreDatepicker.vue

@@ -454,7 +454,8 @@ export default {
       this.viewportWidth = window.innerWidth + 'px'
 
       this._handleWindowResizeEvent = this.debounce(() => {
-        this.inline ? this.openDatepicker() : this.closeDatepicker()
+        if (this.inline) this.openDatepicker()
+        else this.closeDatepicker()
         this.$emit('is-inline', this.inline)
         this.positionDatepicker()
         this.setStartDates()
@@ -502,6 +503,8 @@ export default {
       let timeout
 
       return function () {
+        // Unexpected aliasing of 'this' to local variable  @typescript-eslint/no-this-alias
+        // eslint-disable-next-line
         const context = this
         const args = arguments
 

package/src/stories/CpIcon.stories.ts

@@ -1,5 +1,30 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import CpIcon from '@/components/visual/CpIcon.vue'
+import { CustomCpIcons } from '@/constants'
+
+const iconsOptions = [
+  ...Object.keys(CustomCpIcons),
+  'activity',
+  'alert-circle',
+  'arrow-down',
+  'arrow-left',
+  'arrow-right',
+  'arrow-up',
+  'bell',
+  'calendar',
+  'check',
+  'check-circle',
+  'chevron-down',
+  'chevron-left',
+  'chevron-right',
+  'chevron-up',
+  'edit',
+  'home',
+  'search',
+  'settings',
+  'user',
+  'x',
+].sort()
 
 const meta = {
   title: 'CpIcon',
@@ -7,28 +32,7 @@ const meta = {
   argTypes: {
     type: {
       control: 'select',
-      options: [
-        'activity',
-        'alert-circle',
-        'arrow-down',
-        'arrow-left',
-        'arrow-right',
-        'arrow-up',
-        'bell',
-        'calendar',
-        'check',
-        'check-circle',
-        'chevron-down',
-        'chevron-left',
-        'chevron-right',
-        'chevron-up',
-        'edit',
-        'home',
-        'search',
-        'settings',
-        'user',
-        'x',
-      ],
+      options: iconsOptions,
       description: 'Type of icon to display',
     },
     size: {
@@ -39,6 +43,13 @@ const meta = {
       control: 'text',
       description: 'HTML tag to use for the icon wrapper',
     },
+    weight: {
+      control: 'number',
+      description: 'Weight for specific icons like checked-baggage',
+      table: {
+        defaultValue: { summary: 0 },
+      },
+    },
   },
 } satisfies Meta<typeof CpIcon>
 
@@ -65,14 +76,36 @@ export const Default: Story = {
 }
 
 export const DifferentSizes: Story = {
-  render: () => ({
+  args: {
+    type: 'check',
+  },
+  render: (args) => ({
     components: { CpIcon },
+    setup() {
+      return { args }
+    },
     template: `
       <div style="padding: 20px; display: flex; align-items: center; gap: 16px;">
-        <CpIcon type="check" size="16" />
-        <CpIcon type="check" size="24" />
-        <CpIcon type="check" size="32" />
-        <CpIcon type="check" size="48" />
+        <CpIcon v-bind="{ ...args, size: 16 }" />
+        <CpIcon v-bind="{ ...args, size: 24 }" />
+        <CpIcon v-bind="{ ...args, size: 32 }" />
+        <CpIcon v-bind="{ ...args, size: 48 }" />
+      </div>
+    `,
+  }),
+}
+
+export const AllIcons: Story = {
+  render: () => ({
+    components: { CpIcon },
+    setup() {
+      return { icons: iconsOptions }
+    },
+    template: `
+      <div style="padding: 20px; display: grid; grid-template-columns: repeat(4, minmax(100px, 3fr)); gap: 16px;">
+        <div v-for="icon in icons" style="display: flex;align-items: center;justify-content: center;border: 1px solid #eee;border-radius: 4px;padding: 2px 0;">
+          <CpIcon :key="icon" :type="icon" />
+        </div>
       </div>
     `,
   }),

package/src/stories/CpSelectMenu.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import CpSelectMenu from '@/components/selects/CpSelectMenu.vue'
 
 const meta = {

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "isolatedModules": true,
+    "strict": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "storybook-static", "dist", "build"]
+}