@citizenplane/pimp 8.11.2 → 8.12.0

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>

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

@@ -1,120 +0,0 @@
-<template>
-  <section-container section-title="Selects" class="sectionSelects">
-    <div class="sectionSelects__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSelects__title">Default</cp-heading>
-      <div class="sectionSelects__selects">
-        <cp-select v-model="selects.default" label="Default select" :options="selects.options" />
-      </div>
-    </div>
-    <div class="sectionSelects__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSelects__title">Sizes</cp-heading>
-      <div class="sectionSelects__selects">
-        <cp-select
-          v-model="selects.sizes"
-          label="Select 18px font-sized"
-          :options="selects.options"
-          style="font-size: 18px"
-        />
-        <cp-select v-model="selects.sizes" label="Select 16px font-sized" :options="selects.options" />
-        <cp-select
-          v-model="selects.sizes"
-          label="Select 14px font-sized"
-          :options="selects.options"
-          style="font-size: 14px"
-        />
-        <cp-select
-          v-model="selects.sizes"
-          label="Select 12px font-sized"
-          :options="selects.options"
-          style="font-size: 12px"
-        />
-      </div>
-    </div>
-    <div class="sectionSelects__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSelects__title">Disabled</cp-heading>
-      <div class="sectionSelects__selects">
-        <cp-select v-model="selects.disabled" disabled label="Disabled select" :options="selects.options" />
-      </div>
-    </div>
-    <div class="sectionSelects__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSelects__title">With error</cp-heading>
-      <div class="sectionSelects__selects">
-        <cp-select v-model="selects.disabled" label="Select with error" :options="selects.options" is-invalid />
-        <cp-select
-          v-model="selects.disabled"
-          label="Select with error message"
-          :options="selects.options"
-          is-invalid
-          error-message="This select has an error message"
-        />
-        <cp-select
-          v-model="selects.disabled"
-          disabled
-          label="Disabled select with error"
-          :options="selects.options"
-          is-invalid
-          error-message="This select has an error message"
-        />
-      </div>
-    </div>
-    <div class="sectionSelects__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSelects__title">Large</cp-heading>
-      <div class="sectionSelects__selects">
-        <cp-select v-model="selects.large" is-large label="Select with error" :options="selects.options" is-invalid />
-      </div>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from './SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      selects: {
-        default: '',
-        sizes: '',
-        disabled: '',
-        large: '',
-        error: '',
-        options: [
-          {
-            label: 'very very long option 1',
-            value: 'first_option',
-          },
-          {
-            label: 'option 2',
-            value: 'second_option',
-          },
-          {
-            label: 'option 3',
-            value: 'third_option',
-          },
-        ],
-      },
-    }
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionSelects {
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-
-  &__selects {
-    display: flex;
-    align-items: flex-end;
-    flex-wrap: wrap;
-
-    > * {
-      margin: 0 sp.$space-lg sp.$space-lg 0;
-    }
-  }
-}
-</style>