frappe-ui 0.0.27 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.27",
+  "version": "0.0.30",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/DatePicker.vue

@@ -0,0 +1,247 @@
+<template>
+  <Popover @open="selectCurrentMonthYear" transition="default">
+    <template #target="{ togglePopover }">
+      <Input
+        type="text"
+        :class="inputClass"
+        :value="
+          modelValue && formatValue ? formatValue(modelValue) : modelValue || ''
+        "
+        :placeholder="placeholder"
+        @focus="!readonly ? togglePopover() : null"
+        readonly
+      />
+    </template>
+    <template #body-main="{ togglePopover }">
+      <div class="p-3 mt-1 text-left select-none">
+        <div class="flex items-center justify-between">
+          <span class="text-base font-medium text-blue-500">
+            {{ formatMonth }}
+          </span>
+          <span class="flex">
+            <div
+              class="grid w-5 h-5 rounded-md cursor-pointer hover:bg-gray-100 place-items-center"
+            >
+              <FeatherIcon
+                @click="prevMonth"
+                name="chevron-left"
+                class="w-4 h-4"
+              />
+            </div>
+            <div
+              class="grid w-5 h-5 ml-2 rounded-md cursor-pointer hover:bg-gray-100 place-items-center"
+            >
+              <FeatherIcon
+                @click="nextMonth"
+                name="chevron-right"
+                class="w-4 h-4"
+              />
+            </div>
+          </span>
+        </div>
+        <div class="mt-2 text-sm">
+          <div class="grid w-full grid-cols-7 text-gray-600 place-items-center">
+            <div
+              class="grid w-6 h-6 gap-1 text-center place-items-center"
+              v-for="(d, i) in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
+              :key="i"
+            >
+              {{ d }}
+            </div>
+          </div>
+          <div v-for="(week, i) in datesAsWeeks" :key="i" class="mt-1">
+            <div class="grid w-full grid-cols-7 gap-1 place-items-center">
+              <div
+                v-for="date in week"
+                :key="toValue(date)"
+                class="grid w-6 h-6 rounded-md cursor-pointer place-items-center hover:bg-blue-100 hover:text-blue-700"
+                :class="{
+                  'text-gray-600': date.getMonth() !== currentMonth - 1,
+                  'text-blue-500': toValue(date) === toValue(today),
+                  'bg-blue-100 font-semibold text-blue-500':
+                    toValue(date) === modelValue,
+                }"
+                @click="
+                  () => {
+                    selectDate(date)
+                    togglePopover()
+                  }
+                "
+              >
+                {{ date.getDate() }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-end w-full mt-2">
+          <div
+            class="px-2 py-1 text-sm rounded-md cursor-pointer hover:bg-gray-100"
+            @click="
+              () => {
+                selectDate('')
+                togglePopover()
+              }
+            "
+          >
+            Clear
+          </div>
+        </div>
+      </div>
+    </template>
+  </Popover>
+</template>
+
+<script>
+import Popover from './Popover.vue'
+
+export default {
+  name: 'DatePicker',
+  props: ['modelValue', 'placeholder', 'readonly', 'formatValue', 'inputClass'],
+  emits: ['update:modelValue'],
+  components: {
+    Popover,
+  },
+  data() {
+    return {
+      currentYear: null,
+      currentMonth: null,
+    }
+  },
+  created() {
+    this.selectCurrentMonthYear()
+  },
+  computed: {
+    today() {
+      return this.getDate()
+    },
+    datesAsWeeks() {
+      let datesAsWeeks = []
+      let dates = this.dates.slice()
+      while (dates.length) {
+        let week = dates.splice(0, 7)
+        datesAsWeeks.push(week)
+      }
+      return datesAsWeeks
+    },
+    dates() {
+      if (!(this.currentYear && this.currentMonth)) {
+        return []
+      }
+      let monthIndex = this.currentMonth - 1
+      let year = this.currentYear
+
+      let firstDayOfMonth = this.getDate(year, monthIndex, 1)
+      let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
+      let leftPaddingCount = firstDayOfMonth.getDay()
+      let rightPaddingCount = 6 - lastDayOfMonth.getDay()
+
+      let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
+      let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
+      let daysInMonth = this.getDaysInMonth(monthIndex, year)
+      let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
+
+      let dates = [
+        ...leftPadding,
+        firstDayOfMonth,
+        ...datesInMonth,
+        ...rightPadding,
+      ]
+      if (dates.length < 42) {
+        const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
+        dates = dates.concat(...finalPadding)
+      }
+      return dates
+    },
+    formatMonth() {
+      let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
+      return date.toLocaleString('en-US', { month: 'short', year: 'numeric' })
+    },
+  },
+  methods: {
+    selectDate(date) {
+      this.$emit('update:modelValue', this.toValue(date))
+    },
+    selectCurrentMonthYear() {
+      let date = this.modelValue
+        ? this.getDate(this.modelValue)
+        : this.getDate()
+      this.currentYear = date.getFullYear()
+      this.currentMonth = date.getMonth() + 1
+    },
+    prevMonth() {
+      this.changeMonth(-1)
+    },
+    nextMonth() {
+      this.changeMonth(1)
+    },
+    changeMonth(adder) {
+      this.currentMonth = this.currentMonth + adder
+      if (this.currentMonth < 1) {
+        this.currentMonth = 12
+        this.currentYear = this.currentYear - 1
+      }
+      if (this.currentMonth > 12) {
+        this.currentMonth = 1
+        this.currentYear = this.currentYear + 1
+      }
+    },
+    getDatesAfter(date, count) {
+      let incrementer = 1
+      if (count < 0) {
+        incrementer = -1
+        count = Math.abs(count)
+      }
+      let dates = []
+      while (count) {
+        date = this.getDate(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate() + incrementer
+        )
+        dates.push(date)
+        count--
+      }
+      if (incrementer === -1) {
+        return dates.reverse()
+      }
+      return dates
+    },
+
+    getDaysInMonth(monthIndex, year) {
+      let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+      let daysInMonth = daysInMonthMap[monthIndex]
+      if (monthIndex === 1 && this.isLeapYear(year)) {
+        return 29
+      }
+      return daysInMonth
+    },
+
+    isLeapYear(year) {
+      if (year % 400 === 0) return true
+      if (year % 100 === 0) return false
+      if (year % 4 === 0) return true
+      return false
+    },
+
+    toValue(date) {
+      if (!date) {
+        return ''
+      }
+
+      // toISOString is buggy and reduces the day by one
+      // this is because it considers the UTC timestamp
+      // in order to circumvent that we need to use luxon/moment
+      // but that refactor could take some time, so fixing the time difference
+      // as suggested in this answer.
+      // https://stackoverflow.com/a/16084846/3541205
+      date.setHours(0, -date.getTimezoneOffset(), 0, 0)
+      return date.toISOString().slice(0, 10)
+    },
+
+    getDate(...args) {
+      let d = new Date(...args)
+      return d
+    },
+  },
+}
+</script>

package/src/components/Popover.vue

@@ -1,16 +1,18 @@
 <template>
   <div ref="reference">
     <div
-      class="h-full"
       ref="target"
+      class="inline-block"
       @click="updatePosition"
       @focusin="updatePosition"
       @keydown="updatePosition"
+      @mouseover="onMouseover"
+      @mouseleave="onMouseleave"
     >
       <slot
         name="target"
         v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
-      ></slot>
+      />
     </div>
     <teleport to="#frappeui-popper-root">
       <div
@@ -20,17 +22,25 @@
         :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
         v-show="isOpen"
       >
-        <transition v-bind="transition">
+        <transition v-bind="popupTransition">
           <div v-show="isOpen">
-            <div
-              v-if="!hideArrow"
-              class="popover-arrow"
-              ref="popover-arrow"
-            ></div>
             <slot
-              name="content"
+              name="body"
               v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
-            ></slot>
+            >
+              <div class="bg-white border border-gray-100 rounded-lg shadow-xl">
+                <slot
+                  name="body-main"
+                  v-bind="{
+                    togglePopover,
+                    updatePosition,
+                    open,
+                    close,
+                    isOpen,
+                  }"
+                />
+              </div>
+            </slot>
           </div>
         </transition>
       </div>
@@ -44,12 +54,16 @@ import { createPopper } from '@popperjs/core'
 export default {
   name: 'Popover',
   props: {
-    hideArrow: {
-      type: Boolean,
-      default: true,
-    },
     show: {
-      default: null,
+      default: undefined,
+    },
+    trigger: {
+      type: String,
+      default: 'click', // click, hover
+    },
+    hoverDelay: {
+      type: Number,
+      default: 0,
     },
     right: Boolean,
     placement: {
@@ -58,29 +72,25 @@ export default {
     },
     popoverClass: [String, Object, Array],
     transition: {
-      type: Object,
       default: null,
     },
   },
-  emits: ['init', 'open', 'close'],
-  watch: {
-    show: {
-      immediate: true,
-      handler(val) {
-        if (val) {
-          this.open()
-        } else {
-          this.close()
-        }
-      },
-    },
-  },
+  emits: ['open', 'close', 'update:show'],
   data() {
     return {
-      isOpen: false,
+      showPopup: false,
       targetWidth: null,
     }
   },
+  watch: {
+    show(val) {
+      if (val) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+  },
   created() {
     if (!document.getElementById('frappeui-popper-root')) {
       const root = document.createElement('div')
@@ -99,7 +109,7 @@ export default {
       }
       this.close()
     }
-    if (this.show == null) {
+    if (!this.showPropPassed) {
       document.addEventListener('click', this.listener)
     }
     this.$nextTick(() => {
@@ -110,37 +120,65 @@ export default {
     this.popper && this.popper.destroy()
     document.removeEventListener('click', this.listener)
   },
+  computed: {
+    showPropPassed() {
+      return this.show != null
+    },
+    isOpen: {
+      get() {
+        if (this.showPropPassed) {
+          return this.show
+        }
+        return this.showPopup
+      },
+      set(val) {
+        val = Boolean(val)
+        if (this.showPropPassed) {
+          this.$emit('update:show', val)
+        } else {
+          this.showPopup = val
+        }
+        if (val === false) {
+          this.$emit('close')
+        } else if (val === true) {
+          this.$emit('open')
+        }
+      },
+    },
+    popupTransition() {
+      let templates = {
+        default: {
+          enterActiveClass: 'transition duration-200 ease-out',
+          enterFromClass: 'translate-y-1 opacity-0',
+          enterToClass: 'translate-y-0 opacity-100',
+          leaveActiveClass: 'transition duration-150 ease-in',
+          leaveFromClass: 'translate-y-0 opacity-100',
+          leaveToClass: 'translate-y-1 opacity-0',
+        },
+      }
+      if (typeof this.transition === 'string') {
+        return templates[this.transition]
+      }
+      return this.transition
+    },
+  },
   methods: {
     setupPopper() {
       if (!this.popper) {
         this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
           placement: this.placement,
-          modifiers: !this.hideArrow
-            ? [
-                {
-                  name: 'arrow',
-                  options: {
-                    element: this.$refs['popover-arrow'],
-                  },
-                },
-                {
-                  name: 'offset',
-                  options: {
-                    offset: [0, 10],
-                  },
-                },
-              ]
-            : [],
         })
       } else {
         this.updatePosition()
       }
-      this.$emit('init')
     },
     updatePosition() {
       this.popper && this.popper.update()
     },
     togglePopover(flag) {
+      if (flag instanceof Event) {
+        flag = null
+      }
       if (flag == null) {
         flag = !this.isOpen
       }
@@ -157,49 +195,32 @@ export default {
       }
       this.isOpen = true
       this.$nextTick(() => this.setupPopper())
-      this.$emit('open')
     },
     close() {
       if (!this.isOpen) {
         return
       }
       this.isOpen = false
-      this.$emit('close')
+    },
+    onMouseover() {
+      if (this.trigger === 'hover') {
+        if (this.hoverDelay) {
+          this.hoverTimer = setTimeout(() => {
+            this.open()
+          }, Number(this.hoverDelay) * 1000)
+        } else {
+          this.open()
+        }
+      }
+    },
+    onMouseleave() {
+      if (this.hoverTimer) {
+        clearTimeout(this.hoverTimer)
+      }
+      if (this.trigger === 'hover') {
+        this.close()
+      }
     },
   },
 }
 </script>
-<style scoped>
-.popover-arrow,
-.popover-arrow::after {
-  position: absolute;
-  width: theme('spacing.4');
-  height: theme('spacing.4');
-  z-index: -1;
-}
-
-.popover-arrow::after {
-  content: '';
-  background: white;
-  transform: rotate(45deg);
-  border-top: 1px solid theme('borderColor.gray.400');
-  border-left: 1px solid theme('borderColor.gray.400');
-  border-top-left-radius: 6px;
-}
-
-.popover-container[data-popper-placement^='top'] > .popover-arrow {
-  bottom: calc(theme('spacing.2') * -1);
-}
-
-.popover-container[data-popper-placement^='bottom'] > .popover-arrow {
-  top: calc(theme('spacing.2') * -1);
-}
-
-.popover-container[data-popper-placement^='left'] > .popover-arrow {
-  right: calc(theme('spacing.2') * -1);
-}
-
-.popover-container[data-popper-placement^='right'] > .popover-arrow {
-  left: calc(theme('spacing.2') * -1);
-}
-</style>

package/src/index.js

@@ -4,6 +4,7 @@ export { default as Avatar } from './components/Avatar.vue'
 export { default as Badge } from './components/Badge.vue'
 export { default as Button } from './components/Button.vue'
 export { default as Card } from './components/Card.vue'
+export { default as DatePicker } from './components/DatePicker.vue'
 export { default as Dialog } from './components/Dialog.vue'
 export { default as Dropdown } from './components/Dropdown.vue'
 export { default as ErrorMessage } from './components/ErrorMessage.vue'
@@ -29,6 +30,7 @@ export { default as onOutsideClickDirective } from './directives/onOutsideClick.
 export { default as call, createCall } from './utils/call.js'
 export { default as debounce } from './utils/debounce.js'
 export { createResource } from './utils/resources.js'
+export { default as pageMeta } from './utils/pageMeta.js'
 
 // plugin
 export { default as FrappeUI } from './utils/plugin.js'

package/src/utils/pageMeta.js

@@ -0,0 +1,47 @@
+import { watch } from 'vue'
+
+export default {
+  install(app) {
+    app.mixin(createMixin())
+  },
+}
+
+function createMixin() {
+  let faviconRef = document.querySelector('link[rel="icon"]')
+  let defaultFavIcon = faviconRef.href
+
+  return {
+    created() {
+      if (this.$options.pageMeta) {
+        watch(
+          () => {
+            try {
+              return this.$options.pageMeta.call(this)
+            } catch (error) {
+              console.warn('Failed to parse pageMeta\n\n', error)
+              return null
+            }
+          },
+          (pageMeta) => {
+            if (!pageMeta) return
+            if (pageMeta.title) {
+              document.title = pageMeta.title
+            }
+            if (pageMeta.emoji) {
+              let href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${pageMeta.emoji}</text></svg>`
+              faviconRef.href = href
+            } else if (pageMeta.icon) {
+              faviconRef.href = pageMeta.icon
+            } else {
+              faviconRef.href = defaultFavIcon
+            }
+          },
+          {
+            immediate: true,
+            deep: true,
+          }
+        )
+      }
+    },
+  }
+}