@citizenplane/pimp 6.4.0 → 7.0.4

package/src/libs/CoreDatepicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="asd__fade">
+  <transition :name="transitionName">
     <div
       v-show="showDatepicker"
       :id="wrapperId"
@@ -7,6 +7,7 @@
       class="asd__wrapper"
       :class="wrapperClasses"
       :style="showFullscreen ? undefined : wrapperStyles"
+      @keydown.esc="closeDatepicker"
     >
       <div v-if="showFullscreen" class="asd__mobile-header asd__mobile-only">
         <button class="asd__mobile-close" type="button" @click="closeDatepicker">
@@ -16,12 +17,20 @@
         <h3>{{ mobileHeader || mobileHeaderFallback }}</h3>
       </div>
       <div class="asd__datepicker-header">
-        <div class="asd__change-month-button asd__change-month-button--previous">
-          <chevron-left-icon @click="previousMonth"></chevron-left-icon>
-        </div>
-        <div class="asd__change-month-button asd__change-month-button--next">
-          <chevron-right-icon @click="nextMonth"></chevron-right-icon>
-        </div>
+        <button
+          class="asd__change-month-button asd__change-month-button--previous"
+          aria-label="previous month"
+          @click="previousMonth"
+        >
+          <cp-icon type="chevron-left" />
+        </button>
+        <button
+          class="asd__change-month-button asd__change-month-button--next"
+          aria-label="next month"
+          @click="nextMonth"
+        >
+          <cp-icon type="chevron-right" />
+        </button>
         <div
           v-for="(month, index) in showMonths"
           :key="month"
@@ -89,13 +98,8 @@
                     :ref="`date-${dayDate}`"
                     class="asd__day"
                     :data-date="dayDate"
-                    :tabindex="isDateVisible(dayDate) && isSameDate(focusedDate, dayDate) ? 0 : -1"
-                    :class="getDayClasses(dayDate)"
-                    @mouseover="
-                      () => {
-                        setHoverDate(dayDate)
-                      }
-                    "
+                    :class="getDayClasses(dayNumber, dayDate)"
+                    @mouseover="setHoverDate(dayDate)"
                   >
                     <button
                       v-if="dayNumber"
@@ -121,23 +125,19 @@
 </template>
 
 <script>
-import vClickOutside from 'v-click-outside'
-import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
 import { DateTime, Info } from 'luxon'
 
 import { randomString } from '@/helpers'
 import ResizeSelect from '@/directives/ResizeSelect'
 
-const MOBILE_SIZE = 768
+import CpIcon from '@/components/visual/CpIcon.vue'
 
 export default {
   name: 'CoreDatepicker',
   components: {
-    ChevronRightIcon,
-    ChevronLeftIcon,
+    CpIcon,
   },
   directives: {
-    clickOutside: vClickOutside.directive,
     resizeSelect: ResizeSelect,
   },
   props: {
@@ -241,6 +241,17 @@ export default {
       default: () => process.env.NODE_ENV === 'test',
     },
   },
+  emits: [
+    'date-one-selected',
+    'date-two-selected',
+    'is-inline',
+    'previous-month',
+    'next-month',
+    'opened',
+    'cancelled',
+    'closed',
+    'apply',
+  ],
   data() {
     return {
       wrapperId: 'datepicker-wrapper-' + randomString(5),
@@ -281,22 +292,27 @@ export default {
       viewportWidth: undefined,
       isMobile: undefined,
       triggerElement: undefined,
-      isInline: this.inline || false,
     }
   },
   computed: {
+    transitionName() {
+      return this.inline ? '' : 'asd__fade'
+    },
     wrapperClasses() {
-      return {
-        'asd__wrapper--datepicker-open': this.showDatepicker,
-        'asd__wrapper--full-screen': this.showFullscreen,
-        'asd__wrapper--isInline': this.isInline,
-        'asd__wrapper--showOneMonth': this.monthsToShow === 1,
-      }
+      return [
+        this.$attrs.class,
+        {
+          'asd__wrapper--datepicker-open': this.showDatepicker,
+          'asd__wrapper--full-screen': this.showFullscreen,
+          'asd__wrapper--isInline': this.inline,
+          'asd__wrapper--showOneMonth': this.monthsToShow === 1,
+        },
+      ]
     },
     wrapperStyles() {
       return {
         width: this.width * this.showMonths + 'px',
-        zIndex: this.isInline ? '' : '100',
+        zIndex: this.inline ? '' : '100',
       }
     },
     innerStyles() {
@@ -362,7 +378,6 @@ export default {
     },
     selectedDate2(newValue) {
       const newDate = !newValue || newValue === '' ? '' : newValue
-      if (newValue && this.selectedDate1 && !this.isDateVisible(newDate)) this.nextMonth()
       this.$emit('date-two-selected', newDate)
     },
     mode() {
@@ -415,13 +430,13 @@ export default {
     this.generateMonths()
     this.generateYears()
 
-    if (this.startOpen || this.isInline) {
+    if (this.startOpen || this.inline) {
       this.openDatepicker()
     }
 
     this.triggerElement.addEventListener('click', this._handleWindowClickEvent)
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener('resize', this._handleWindowResizeEvent)
     window.removeEventListener('click', this._handleWindowClickEvent)
     this.triggerElement.removeEventListener('click', this._handleWindowClickEvent)
@@ -429,17 +444,10 @@ export default {
   methods: {
     handleDatepickerSizing() {
       this.viewportWidth = window.innerWidth + 'px'
-      this._isWindowLessThan = (width) => {
-        return window.innerWidth <= width || screen.width <= width
-      }
-
-      this.isInline = this.inline || this._isWindowLessThan(MOBILE_SIZE)
-      this.$emit('is-inline', this.isInline)
 
       this._handleWindowResizeEvent = this.debounce(() => {
-        this.isInline = this.inline || this._isWindowLessThan(MOBILE_SIZE)
-        this.isInline ? this.openDatepicker() : this.closeDatepicker()
-        this.$emit('is-inline', this.isInline)
+        this.inline ? this.openDatepicker() : this.closeDatepicker()
+        this.$emit('is-inline', this.inline)
         this.positionDatepicker()
         this.setStartDates()
       }, 200)
@@ -453,11 +461,11 @@ export default {
       }
       window.addEventListener('resize', this._handleWindowResizeEvent)
     },
-    getDayClasses(dayDate) {
+    getDayClasses(dayNumber, dayDate) {
       return [
         {
-          'asd__day--enabled': this.dayNumber !== 0,
-          'asd__day--empty': this.dayNumber === 0,
+          'asd__day--enabled': dayNumber !== 0,
+          'asd__day--empty': dayNumber === 0,
           'asd__day--disabled': this.isDisabled(dayDate),
           'asd__day--selected':
             dayDate && (this.selectedDate1 === dayDate || this.selectedDate2 === dayDate) && !this.isRecurrent,
@@ -518,7 +526,7 @@ export default {
       return null
     },
     handleClickOutside(event) {
-      if (event.target.id === this.triggerElementId || !this.showDatepicker || this.isInline || this.isRecurrent) {
+      if (event.target.id === this.triggerElementId || !this.showDatepicker || this.inline || this.isRecurrent) {
         return
       }
       this.closeDatepicker()
@@ -586,6 +594,12 @@ export default {
       }
     },
     setStartDates() {
+      // Set dates if initialized
+      if (this.mode === 'range') {
+        if (this.dateOne) this.selectDate(this.dateOne)
+        if (this.dateTwo) this.selectDate(this.dateTwo)
+      }
+
       let startDate = this.dateOne ? DateTime.fromISO(this.dateOne) : DateTime.local()
       const minDate = DateTime.fromISO(this.minDate)
 
@@ -722,20 +736,12 @@ export default {
         const targetMonth = DateTime.fromISO(this.visibleMonths[visibleMonthIdx])
         const monthIdx = targetMonth.month
         const year = targetMonth.year
-        this.focusedDate = DateTime.fromISO(this.focusedDate).set({ month: monthIdx }).set({ year }).toISODate()
+        this.focusedDate = DateTime.fromISO(this.focusedDate).set({ month: monthIdx, year }).toISODate()
       }
     },
     isToday(date) {
       return DateTime.local().toISODate() === date
     },
-    isSameDate(date1, date2) {
-      if (!date1) {
-        return false
-      }
-      const dtDate1 = typeof date1 === 'object' ? DateTime.fromJSDate(date1) : DateTime.fromISO(date1)
-
-      return dtDate1.toISODate() === date2
-    },
     isSelected(date) {
       if (!date) {
         return
@@ -909,7 +915,7 @@ export default {
       this.initialDate2 = this.dateTwo
       this.$emit('opened')
       this.$nextTick(() => {
-        if (!this.isInline) this.setFocusedDate(this.focusedDate)
+        if (!this.inline) this.setFocusedDate(this.focusedDate)
       })
     },
     closeDatepickerCancel() {
@@ -921,7 +927,7 @@ export default {
       }
     },
     closeDatepicker() {
-      if (this.isInline) {
+      if (this.inline) {
         return
       }
       this.showDatepicker = false
@@ -944,6 +950,7 @@ export default {
 
       const viewportWidth = document.documentElement.clientWidth || window.innerWidth
       this.viewportWidth = viewportWidth + 'px'
+
       this.isMobile = viewportWidth < 768
 
       if (this.isMobile) {
@@ -970,8 +977,11 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+@include popover-desktop('asd__fade');
+</style>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
 $tablet = 768px
 
 $background-grey-color = #f7f7f7
@@ -986,16 +996,8 @@ degrade()
   position absolute
   z-index -1
 
-// fade in
-.asd__fade-enter-active,
-.asd__fade-leave-active
-  transition all 0.2s ease
-
-.asd__fade-enter,
-.asd__fade-leave-active
-  opacity 0
 // datepicker
-.asd__list-complete-enter,
+.asd__list-complete-enter-from,
 .asd__list-complete-leave-to
   opacity 0
   transform translateY(30px)
@@ -1006,8 +1008,6 @@ degrade()
 
 .asd
   &__wrapper
-    left: 50%;
-    transform: translateX(-50%);
     border-radius 10px
     white-space nowrap
     text-align center
@@ -1015,25 +1015,13 @@ degrade()
     overflow hidden
 
     &:not(&--isInline) {
-      box-shadow 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2)
-    }
-
-    @media (min-width: $tablet) {
-      position absolute
-      margin-top 10px
+      box-shadow 0 9px 24px rgba(62, 62, 91, 20%), 0 4px 4px rgba(62, 62, 91, 10%);
     }
 
     &--isInline {
-      position relative
-      margin-top 16px
+      position relative !important
     }
 
-    @media (max-width: $tablet) {
-      position relative
-      margin-top 16px
-    }
-
-
     &:before
       // Line between the two months
       @media (min-width: $tablet)
@@ -1045,7 +1033,7 @@ degrade()
         bottom 0
         margin auto
         width 1px
-        background $neutral-dark-5
+        background $neutral-dark-4
         z-index -1
 
     &--showOneMonth {
@@ -1073,41 +1061,58 @@ degrade()
   &__change-month-button
     position absolute
     z-index 10
+    top 16px
+    border-radius: 100%;
+
+    &:focus-visible {
+      outline: 2px solid $secondary-color;
+      outline-offset: 2px;
+    }
+
+    i
+      color $neutral-dark
 
     svg
       cursor pointer
       stroke-width 1.2px
-      stroke black
 
     @media (min-width: $tablet)
       top 22px
 
-    &--previous
-      left 0
+    &--previous {
+      left 16px
 
-      @media (min-width: $tablet)
-        padding-left 24px
+      @media (min-width: $tablet) {
+        left 24px
+      }
+    }
 
-    &--next
-      right 0
+    &--next {
+      right 16px
 
-      @media (min-width: $tablet)
-        padding-right 24px
+      @media (min-width: $tablet) {
+        right 24px
+      }
+    }
 
-  &__days-legend
+  &__days-legend {
     position absolute
     font-size 12px
     line-height 15px
     user-select none
 
-    @media (min-width: $tablet)
-      top 60px
+    @media (min-width: $tablet) {
       padding 0 24px
+      top 60px
+    }
 
-    @media (max-width: $tablet)
-      top 36px
+    @media (max-width: $tablet - 1px) {
+      top 56px
+      padding: 0 16px;
+    }
+  }
 
-  &__day-title
+  &__day-title {
     display inline-block
     width percentage(1 / 7)
     text-align center
@@ -1115,23 +1120,38 @@ degrade()
     font-size 14px
     line-height 18px
     margin-left -1px
+  }
 
-  &__month-table
+  &__month-table {
     border-spacing 0 6px
     width 100%
     max-width 100%
+  }
+
+  &__wrapper:not(&__wrapper--isInline) &__month {
+    padding-left: 16px;
+    padding-right: 16px;
+
+    @media (min-width: $tablet) {
+      padding-left: 24px;
+      padding-right: 24px;
+    }
+  }
 
-  &__month
+  &__month {
     transition all $transition-time ease
     display inline-block
+    padding 16px 16px 8px
 
-    @media (min-width: $tablet)
-      padding 24px
-      padding-bottom 12px
+    @media (min-width: $tablet) {
+      padding 24px 24px 12px;
+    }
 
-    &--hidden
+    &--hidden {
       height 275px
       visibility hidden
+    }
+  }
 
   &__month-name
     font-size 16px
@@ -1188,8 +1208,8 @@ degrade()
 
     &--hovered
       .asd__day--end-week
-      border-top-right-radius 5px
-      border-bottom-right-radius 5px
+        border-top-right-radius 5px
+        border-bottom-right-radius 5px
 
       .asd__day--start-week
         border-top-left-radius 5px
@@ -1266,8 +1286,8 @@ degrade()
     &--empty .asd__day-number
       color $neutral-dark-3 !important
 
-      button
-        cursor default
+    &--disabled *
+      cursor not-allowed !important
 
     &--today .asd__day-button .asd__day-number
       color $primary-color
@@ -1306,7 +1326,6 @@ degrade()
     width 35px
     height 35px
     border none
-    cursor pointer
     user-select none
     font-size 14px
 
@@ -1315,31 +1334,6 @@ degrade()
       position relative
       color $neutral-dark
 
-  &__action-buttons
-    min-height 50px
-    padding-top 10px
-    margin-bottom 12px
-
-    button
-      display block
-      position relative
-      background transparent
-      border none
-      font-weight bold
-      font-size 15px
-      cursor pointer
-
-      &:hover
-        text-decoration underline
-
-      &:nth-child(1)
-        float left
-        left 15px
-
-      &:nth-child(2)
-        float right
-        right 15px
-
   &__mobile-header
     border-bottom $border-normal
     position relative

package/src/main.js

@@ -1,15 +1,21 @@
-import Vue from 'vue'
-import PortalVue from 'portal-vue'
-import Pimp from './components'
+import { createApp } from 'vue'
 
 import App from './App.vue'
-import './components'
+const app = createApp(App)
+
+// Plugins
+import Pimp from './components'
+app.use(Pimp)
+
+import Toaster from './plugins/toaster'
+app.use(Toaster)
 
-Vue.use(PortalVue)
-Vue.use(Pimp)
+import Maska from 'maska'
+app.use(Maska)
 
-Vue.config.productionTip = false
+// Directives
+import ClickOutside from './directives/ClickOutside'
+app.directive('click-outside', ClickOutside)
 
-new Vue({
-  render: (h) => h(App),
-}).$mount('#app')
+// Mount
+app.mount('#app')

package/src/plugins/toaster.js

@@ -0,0 +1,69 @@
+import CpToaster from '@/components/feedback-indicators/CpToaster.vue'
+import { Intent } from '@/utils/constants'
+
+import { h, render } from 'vue'
+
+const createElement = () => typeof document !== 'undefined' && document.createElement('div')
+
+const mount = (component, { props, children, element, app } = {}) => {
+  let el = element ? element : createElement()
+
+  let vNode = h(component, props, children)
+  if (app && app._context) {
+    vNode.appContext = app._context
+  }
+
+  render(vNode, el)
+
+  const destroy = () => {
+    if (el) {
+      render(null, el)
+    }
+    el = null
+    vNode = null
+  }
+
+  return { vNode, destroy, el }
+}
+
+const createToaster = (globalOptions = {}) => {
+  return {
+    show(options = {}) {
+      let localOptions = { ...options }
+
+      mount(CpToaster, {
+        props: { ...globalOptions, ...localOptions },
+      })
+    },
+    unique(options = {}) {
+      options.isUnique = true
+      return this.show(options)
+    },
+    success(options = {}) {
+      options.type = Intent.SUCCESS.value
+      return this.show(options)
+    },
+    critical(options = {}) {
+      options.type = Intent.CRITICAL.value
+      return this.show(options)
+    },
+    info(options = {}) {
+      options.type = Intent.INFO.value
+      return this.show(options)
+    },
+    warning(options = {}) {
+      options.type = Intent.WARNING.value
+      return this.show(options)
+    },
+  }
+}
+
+export default {
+  install(app, options) {
+    app.component('CpToaster', CpToaster)
+
+    let methods = createToaster(options)
+    app.$toaster = methods
+    app.config.globalProperties.$toaster = methods
+  },
+}

package/src/utils/constants/src/Intent.js

@@ -1,18 +1,18 @@
 export default {
   SUCCESS: {
     value: 'success',
-    icon: 'CheckCircleIcon',
+    icon: 'check-circle',
   },
   CRITICAL: {
     value: 'critical',
-    icon: 'AlertOctagonIcon',
+    icon: 'alert-octagon',
   },
   WARNING: {
     value: 'warning',
-    icon: 'AlertTriangleIcon',
+    icon: 'alert-triangle',
   },
   INFO: {
     value: 'info',
-    icon: 'InfoIcon',
+    icon: 'info',
   },
 }

package/vite.config.js

@@ -0,0 +1,45 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '/src'),
+    },
+  },
+  server: {
+    port: 8080,
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/assets/styles/main.scss";`,
+      },
+      stylus: {
+        imports: [path.resolve(__dirname, `src/assets/styl/colors.styl`)],
+      },
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/components/index.js'),
+      name: 'Pimp',
+      fileName: (format) => `pimp.${format}.js`,
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+})

package/dist/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>pimp demo</title>
-<script src="./pimp.umd.js"></script>
-
-<link rel="stylesheet" href="./pimp.css">
-
-
-<script>
-console.log(pimp)
-</script>

package/dist/img/chevron-down-icon.dd31db33.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M6 9.68298L12 15.683L18 9.68298" stroke="#3E3E5B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>