@citizenplane/pimp 8.11.3 → 8.13.0

package/src/components/core/playground-sections/SectionDatePickers.vue

@@ -1,160 +0,0 @@
-<template>
-  <section-container section-title="Date picker" class="sectionDatePickers">
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
-        Default date input: {{ cpDate }}
-      </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-date
-          v-model="cpDate"
-          label="default date input"
-          class="sectionDatePickers__date"
-          :is-invalid="false"
-          locale="fr"
-        />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
-        Default datepicker: {{ date }}
-      </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker label="Simple datepicker" :init-date-one="date" @dates="setDate" />
-        <cp-button class="sectionDatePickers__button" @click="resetDate">Reset date</cp-button>
-      </div>
-      <div class="sectionDatePickers__datepickers">
-        <div class="sectionDatePickers__wrapper">
-          <cp-input id="datepicker-trigger" label="CoreDatepicker" placeholder="CoreDatepicker" />
-          <cp-core-datepicker
-            class="sectionDatePickers__custom"
-            mode="range"
-            close-after-select
-            is-inline
-            @opened="() => (isDepartureDatepickerOpen = true)"
-            @closed="() => (isDepartureDatepickerOpen = false)"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
-        Simple inline datepicker: {{ date }}
-      </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker label="Range datepicker" single-month is-inline :init-date-one="date" @dates="setDate" />
-        <cp-datepicker label="Range datepicker" is-inline :init-date-one="date" @dates="setDate" />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title"> Range datepicker </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker label="Range datepicker" mode="range" min-date="2020-10-10" />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
-        Simple datepicker with custom placeholder
-      </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker
-          label="Simple datepicker with custom placeholder"
-          :init-date-one="date"
-          placeholder="Custom placeholder"
-          @dates="setDate"
-        />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
-        Datepicker with set minDate & maxDate (2021-01-01 / 2021-01-10)
-      </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker
-          label="Datepicker with set minDate & maxDate"
-          min-date="2022-01-01"
-          max-date="2022-01-10"
-          placeholder="Custom placeholder"
-          @dates="setDate"
-        />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title"> Allow-past-dates </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker label="Allow past dates" allow-past-dates placeholder="Custom placeholder" @dates="setDate" />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title"> Default CpCalendar </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-calendar label="Calendar" />
-      </div>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      cpDate: '',
-      date: null,
-      isDepartureDatepickerOpen: false,
-    }
-  },
-  methods: {
-    setDate(newValue) {
-      this.date = newValue[0]
-    },
-    resetDate() {
-      this.date = null
-    },
-  },
-}
-</script>
-<style lang="scss">
-.sectionDatePickers {
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-
-  &__datepickers {
-    display: flex;
-    align-items: flex-end;
-    flex-wrap: wrap;
-
-    > * {
-      margin: 0 sp.$space-lg sp.$space-lg 0;
-    }
-  }
-
-  &__date {
-    width: min(100%, 450px);
-  }
-
-  &__item {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-  }
-
-  &__button {
-    margin-left: sp.$space-lg;
-  }
-
-  &__wrapper {
-    position: relative;
-  }
-
-  &__custom {
-    position: absolute;
-    top: calc(100% + 16px);
-    left: 0;
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionDialog.vue

@@ -1,47 +0,0 @@
-<template>
-  <section-container section-title="Dialog" class="sectionDialog">
-    <cp-dialog-wrapper>
-      <cp-dialog v-if="isDialogVisible" @close="toggleDialog">
-        <template #header>
-          <h3 class="sectionDialog__header">Some dialog header...</h3>
-        </template>
-        <template #content>
-          <p class="sectionDialog__content">Some dialog content...</p>
-        </template>
-        <template #footer>
-          <div class="sectionDialog__footer">
-            <cp-button @click="toggleDialog">Close</cp-button>
-          </div>
-        </template>
-      </cp-dialog>
-    </cp-dialog-wrapper>
-    <cp-button @click="toggleDialog">Show dialog</cp-button>
-  </section-container>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-import CpDialogWrapper from '@/components/atomic-elements/CpDialogWrapper.vue'
-import CpDialog from '@/components/atomic-elements/CpDialog.vue'
-
-const isDialogVisible = ref(false)
-
-const toggleDialog = () => (isDialogVisible.value = !isDialogVisible.value)
-</script>
-
-<style lang="scss">
-.sectionDialog {
-  &__header,
-  &__content {
-    padding: sp.$space-xl;
-  }
-
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionFeedbackIndicators.vue

@@ -1,47 +0,0 @@
-<template>
-  <section-container section-title="Feedback Indicators" class="sectionFeedbackIndicators">
-    <div class="sectionFeedbackIndicators__alertMessage">
-      <cp-heading heading-level="h3" :size="600" class="sectionFeedbackIndicators__title">Alert message</cp-heading>
-      <cp-alert
-        v-for="(alert, alertIndex) in alertMessages"
-        :key="alertIndex"
-        :intent="alert"
-        :title="`Alert intent: ${alert}`"
-        is-closable
-      >
-        The quick, brown fox jumps over a lazy dog.
-      </cp-alert>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      alertMessages: ['info', 'success', 'warning', 'critical'],
-    }
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionFeedbackIndicators {
-  &__alertMessage {
-    width: 100%;
-
-    > *:not(:last-of-type) {
-      margin-bottom: sp.$space;
-    }
-  }
-
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionInputs.vue

@@ -1,46 +0,0 @@
-<template>
-  <section-container section-title="Inputs" class="sectionInputs">
-    <div class="sectionInputs__section">
-      <cp-heading heading-level="h3" :size="600" class="sectionInputs__title">Simple inputs</cp-heading>
-      <section-simple-inputs />
-    </div>
-    <div class="sectionInputs__section">
-      <cp-heading heading-level="h3" :size="600" class="sectionInputs__title">Textarea</cp-heading>
-      <cp-textarea
-        v-model="textarea"
-        label="Textarea label"
-        placeholder="The quick, brown fox jumps over a lazy dog."
-      />
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-import SectionSimpleInputs from '@/components/core/playground-sections/SectionSimpleInputs.vue'
-import CpTextarea from '@/components/inputs/CpTextarea.vue'
-
-export default {
-  components: {
-    CpTextarea,
-    SectionContainer,
-    SectionSimpleInputs,
-  },
-  data() {
-    return {
-      textarea: '',
-    }
-  },
-}
-</script>
-<style lang="scss">
-.sectionInputs {
-  &__section:not(:last-of-type) {
-    margin-bottom: sp.$space-lg;
-  }
-
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionListsAndTables.vue

@@ -1,268 +0,0 @@
-<template>
-  <section-container section-title="List and tables" class="sectionListAndTables">
-    <div class="sectionListAndTables">
-      <cp-table
-        :caption="caption"
-        :data="computedRows"
-        :columns="computedColumns"
-        class="tableExample__table"
-        :pagination="computedPagination"
-        :is-loading="isLoading"
-        enable-row-options
-        are-rows-clickable
-        @on-row-right-click="handleRightClick"
-      >
-        <template #row-quick-actions>
-          <button @click.stop="testAlert">
-            <cp-icon type="download" />
-          </button>
-        </template>
-      </cp-table>
-      <ul ref="menu" class="sectionListAndTables__menu hidden">
-        <li>First option</li>
-        <li>Second option</li>
-        <li>Third option</li>
-      </ul>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      objectColumns: [
-        {
-          name: 'Line number (300px width)',
-          id: 'line_number',
-          width: 300,
-        },
-        'name',
-        {
-          name: 'Firstname (right aligned)',
-          id: 'firstname',
-          textAlign: 'right',
-        },
-        {
-          name: 'Job title',
-          id: 'job_title',
-        },
-        {
-          name: 'Username (center aligned, 400px width)',
-          id: 'username',
-          width: 400,
-          textAlign: 'center',
-        },
-        'email',
-        {
-          name: 'Address (300px width)',
-          id: 'address',
-          width: 300,
-        },
-        'zip code',
-        {
-          name: 'City',
-          id: 'city',
-        },
-        {
-          name: 'State',
-          id: 'state',
-        },
-        {
-          name: 'Country',
-          id: 'country',
-        },
-        {
-          name: 'Phone number',
-          id: 'phone_number',
-        },
-      ],
-      caption: 'Table caption',
-      pagination: {
-        enabled: true,
-        limit: this.rowsPerPage,
-      },
-      rowsPerPage: 4,
-      numberOfColumns: 12,
-      rowData: '',
-      cellData: '',
-      isLoading: false,
-    }
-  },
-  computed: {
-    objectRows() {
-      return [
-        {
-          groupBy: 'January',
-          rows: [
-            {
-              line_number: '0',
-              firstname: 'Vincent',
-              job_title: 'software engineer',
-              username: 'pseudodeVincent',
-              address: '34 rue de la Solidarité',
-              state: 'Nevada',
-            },
-            [
-              '1',
-              'Ohayon',
-              'Alexis',
-              'CTO',
-              'aloha',
-              'alexis@citizenplane.com',
-              '23 rue de Cléry',
-              '75002',
-              'Paris',
-              'Ile de France',
-              'France',
-              '0101010110',
-            ],
-          ],
-        },
-        {
-          groupBy: 'February',
-          rows: [
-            {
-              line_number: '0',
-              firstname: 'Vincent',
-              job_title: 'software engineer',
-              username: 'pseudodeVincent',
-              address: '34 rue de la Solidarité',
-              state: 'Nevada',
-            },
-            [
-              '1',
-              'Ohayon',
-              'Alexis',
-              'CTO',
-              'aloha',
-              'alexis@citizenplane.com',
-              '23 rue de Cléry',
-              '75002',
-              'Paris',
-              'Ile de France',
-              'France',
-              '0101010110',
-            ],
-          ],
-        },
-        {
-          groupBy: 'March',
-          rows: [
-            {
-              line_number: '0',
-              firstname: 'Vincent',
-              job_title: 'software engineer',
-              username: 'pseudodeVincent',
-              address: '34 rue de la Solidarité',
-              state: 'Nevada',
-            },
-            [
-              '1',
-              'Ohayon',
-              'Alexis',
-              'CTO',
-              'aloha',
-              'alexis@citizenplane.com',
-              '23 rue de Cléry',
-              '75002',
-              'Paris',
-              'Ile de France',
-              'France',
-              '0101010110',
-            ],
-          ],
-        },
-      ]
-    },
-    computedPagination() {
-      return {
-        enabled: true,
-        limit: Number(this.rowsPerPage),
-      }
-    },
-    computedColumns() {
-      return this.objectColumns.slice(0, this.numberOfColumns)
-    },
-    computedRows() {
-      return this.objectRows
-    },
-  },
-  methods: {
-    testAlert() {
-      this.$toaster.success({ title: 'Custom action on option row click' })
-    },
-    handleRightClick({ event }) {
-      // Prevent event default here to hide default contextual menu
-      // when right-click is not used, default menu is displayed
-      event.preventDefault()
-
-      document.addEventListener('click', this.documentClickHandler)
-
-      const viewportWidth = window.innerWidth
-      const mouseClickXPosition = event.clientX
-      const mouseClickYPosition = event.clientY
-      const isMenuDisplayable = mouseClickXPosition + 250 <= viewportWidth
-      const computedXPosition = isMenuDisplayable ? event.clientX : event.clientX - 250
-
-      // Set the position for menu
-      this.$refs.menu.style.top = `${mouseClickYPosition}px`
-      this.$refs.menu.style.left = `${computedXPosition}px`
-
-      // Show the menu
-      this.$refs.menu.classList.remove('hidden')
-    },
-    documentClickHandler(event) {
-      const isClickedInside = this.$refs?.menu.contains(event.target)
-      if (isClickedInside) return
-
-      // Hide the menu
-      this.$refs.menu.classList.add('hidden')
-
-      // Remove the event handler
-      document.removeEventListener('click', this.documentClickHandler)
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionListAndTables {
-  &__alertMessage {
-    width: 100%;
-
-    > *:not(:last-of-type) {
-      margin-bottom: sp.$space;
-    }
-  }
-
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-
-  &__menu {
-    position: absolute;
-    box-shadow:
-      0 9px 24px rgba(colors.$neutral-dark, 0.2),
-      0 4px 4px rgba(colors.$neutral-dark, 0.1);
-    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-    border-radius: fn.px-to-rem(10);
-    background-color: colors.$neutral-light;
-    padding: sp.$space 0;
-    min-width: 250px;
-
-    li {
-      padding: sp.$space sp.$space-md;
-    }
-  }
-
-  .hidden {
-    display: none;
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionSelectMenus.vue

@@ -1,98 +0,0 @@
-<template>
-  <section-container section-title="Select menu">
-    <div class="item">
-      <h3>Simple select menu without filter</h3>
-      <span>selected value: {{ firstMenuSelectedValue }}</span>
-      <cp-select-menu
-        v-model:selected-value="firstMenuSelectedValue"
-        :values="firstMenuSelectMenuValues"
-        :selected-value="firstMenuSelectedValue"
-      />
-    </div>
-    <div class="item">
-      <h3>Select menu with title and filter</h3>
-      <span>selected value: {{ secondMenuSelectedValue }}</span>
-      <cp-select-menu
-        v-model:selected-value="secondMenuSelectedValue"
-        :values="secondMenuFilteredList"
-        :selected-value="secondMenuSelectedValue"
-        :has-filter="true"
-        dropdown-title="Select value"
-        dropdown-filter-placeholder="Search value..."
-        dropdown-list-placeholder="No option found"
-        @on-filter-change="filterValues"
-      />
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      firstMenuSelectedValue: {
-        label: 'Banana',
-        value: 'first_value',
-      },
-      firstMenuSelectMenuValues: [
-        {
-          label: 'Banana',
-          value: 'first_value',
-        },
-        {
-          label: 'Kiwi',
-          value: 'second_value',
-        },
-        {
-          label: 'Orange',
-          value: 'third_value',
-        },
-        {
-          label: 'Pineapple',
-          value: 'fourth_value',
-        },
-      ],
-      secondMenuSelectedValue: {
-        label: 'Dog',
-        value: 'first_value',
-      },
-      secondMenuSelectMenuValues: [
-        {
-          label: 'Dog',
-          value: 'first_value',
-        },
-        {
-          label: 'Cat',
-          value: 'second_value',
-        },
-        {
-          label: 'Snake',
-          value: 'third_value',
-        },
-        {
-          label: 'Dragon',
-          value: 'fourth_value',
-        },
-      ],
-      secondMenuFilterValue: '',
-    }
-  },
-  computed: {
-    secondMenuFilteredList() {
-      return this.secondMenuSelectMenuValues.filter((menuValue) => {
-        return menuValue.label.toLowerCase().includes(this.secondMenuFilterValue.toLowerCase())
-      })
-    },
-  },
-  methods: {
-    filterValues(inputValue) {
-      this.secondMenuFilterValue = inputValue
-    },
-  },
-}
-</script>