frappe-ui 0.1.60 → 0.1.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.60",
+  "version": "0.1.61",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -50,6 +50,7 @@
     "@vueuse/core": "^10.4.1",
     "feather-icons": "^4.28.0",
     "idb-keyval": "^6.2.0",
+    "prettier": "^3.3.2",
     "radix-vue": "^1.5.3",
     "showdown": "^2.1.0",
     "socket.io-client": "^4.5.1",
@@ -68,7 +69,7 @@
     "husky": ">=6",
     "lint-staged": ">=10",
     "postcss": "^8.4.21",
-    "prettier": "2.7.1",
+    "prettier": "3.3.2",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.7",
     "typescript": "^5.0.2",

package/src/components/Checkbox.vue

@@ -15,7 +15,10 @@
       :disabled="disabled"
       :id="htmlId"
       :checked="Boolean(modelValue)"
-      @change="(e) => $emit('update:modelValue', (e.target as HTMLInputElement).checked)"
+      @change="
+        (e) =>
+          $emit('update:modelValue', (e.target as HTMLInputElement).checked)
+      "
       v-bind="attrs"
     />
     <label class="block" :class="labelClasses" v-if="label" :for="htmlId">
@@ -64,8 +67,8 @@ const inputClasses = computed(() => {
   let interactionClasses = props.disabled
     ? ''
     : props.padding
-    ? 'focus:ring-0'
-    : 'hover:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 active:bg-gray-100'
+      ? 'focus:ring-0'
+      : 'hover:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 active:bg-gray-100'
 
   let sizeClasses = {
     sm: 'w-3.5 h-3.5',

package/src/components/DatePicker.story.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import DatePicker from './DatePicker.vue'
+import DateTimePicker from './DateTimePicker.vue'
+import DateRangePicker from './DateRangePicker.vue'
+
+const state = reactive({
+  variant: 'subtle',
+  placeholder: 'Placeholder',
+  disabled: false,
+  label: 'Label',
+})
+const dateValue = ref('')
+const dateTimeValue = ref('')
+const dateRangeValue = ref('')
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant title="Date">
+      <div class="p-2">
+        <DatePicker v-model="dateValue" v-bind="state" />
+      </div>
+    </Variant>
+    <Variant title="Date Time">
+      <div class="p-2">
+        <DateTimePicker v-model="dateTimeValue" v-bind="state" />
+      </div>
+    </Variant>
+    <Variant title="Date Range">
+      <div class="p-2">
+        <DateRangePicker v-model="dateRangeValue" v-bind="state" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/DatePicker.vue

@@ -1,91 +1,109 @@
 <template>
-  <Popover @open="selectCurrentMonthYear" transition="default">
+  <Popover
+    @open="selectCurrentMonthYear"
+    class="flex w-full [&>div:first-child]:w-full"
+  >
     <template #target="{ togglePopover }">
       <Input
+        readonly
         type="text"
         icon-left="calendar"
-        :class="inputClass"
-        :value="
-          modelValue && formatValue ? formatValue(modelValue) : modelValue || ''
-        "
         :placeholder="placeholder"
+        :value="dateValue && formatter ? formatter(dateValue) : dateValue"
         @focus="!readonly ? togglePopover() : null"
-        readonly
+        class="w-full"
+        :class="inputClass"
+        v-bind="$attrs"
       />
     </template>
-    <template #body-main="{ togglePopover }">
-      <div class="mt-1 select-none p-3 text-left">
-        <div class="flex items-center justify-between">
-          <span class="text-base font-medium text-blue-500">
+    <template #body="{ togglePopover }">
+      <div
+        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+      >
+        <div class="flex items-center p-1 text-gray-500">
+          <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
+            <FeatherIcon
+              :stroke-width="2"
+              name="chevron-left"
+              class="h-4 w-4"
+            />
+          </Button>
+          <div class="flex-1 text-center text-base font-medium text-gray-700">
             {{ formatMonth }}
-          </span>
-          <span class="flex">
-            <div
-              class="grid h-5 w-5 cursor-pointer place-items-center rounded-md hover:bg-gray-100"
-            >
-              <FeatherIcon
-                @click="prevMonth"
-                name="chevron-left"
-                class="h-4 w-4"
-              />
-            </div>
-            <div
-              class="ml-2 grid h-5 w-5 cursor-pointer place-items-center rounded-md hover:bg-gray-100"
-            >
-              <FeatherIcon
-                @click="nextMonth"
-                name="chevron-right"
-                class="h-4 w-4"
-              />
-            </div>
-          </span>
+          </div>
+          <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
+            <FeatherIcon
+              :stroke-width="2"
+              name="chevron-right"
+              class="h-4 w-4"
+            />
+          </Button>
         </div>
-        <div class="mt-2 text-sm">
-          <div class="grid w-full grid-cols-7 place-items-center text-gray-600">
+        <div class="flex items-center justify-center gap-1 p-1">
+          <TextInput
+            class="text-sm"
+            type="text"
+            :value="dateValue"
+            @change="
+              selectDate(getDate($event.target.value)) || togglePopover()
+            "
+          />
+          <Button
+            :label="'Today'"
+            class="text-sm"
+            @click="selectDate(getDate()) || togglePopover()"
+          />
+        </div>
+        <div
+          class="flex flex-col items-center justify-center p-1 text-gray-800"
+        >
+          <div class="flex items-center text-xs uppercase">
             <div
-              class="grid h-6 w-6 place-items-center gap-1 text-center"
-              v-for="(d, i) in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
+              class="flex h-6 w-8 items-center justify-center text-center"
+              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
               :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 place-items-center gap-1">
-              <div
-                v-for="date in week"
-                :key="toValue(date)"
-                class="grid h-6 w-6 cursor-pointer place-items-center rounded-md 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
+            class="flex items-center"
+            v-for="(week, i) in datesAsWeeks"
+            :key="i"
+          >
+            <div
+              v-for="date in week"
+              :key="toValue(date)"
+              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
+              :class="{
+                'text-gray-400': date.getMonth() !== currentMonth - 1,
+                'font-extrabold text-gray-900':
+                  toValue(date) === toValue(today),
+                'bg-gray-800 text-white hover:bg-gray-800':
+                  toValue(date) === dateValue,
+              }"
+              @click="
+                () => {
+                  selectDate(date)
+                  togglePopover()
+                }
+              "
+            >
+              {{ date.getDate() }}
             </div>
           </div>
         </div>
-        <div class="mt-2 flex w-full justify-end">
-          <div
-            class="cursor-pointer rounded-md px-2 py-1 text-sm hover:bg-gray-100"
+        <div class="flex justify-end p-1">
+          <Button
+            :label="'Clear'"
+            class="text-sm"
             @click="
               () => {
                 selectDate('')
                 togglePopover()
               }
             "
-          >
-            Clear
-          </div>
+          />
         </div>
       </div>
     </template>
@@ -94,17 +112,27 @@
 
 <script>
 import Input from './Input.vue'
-import FeatherIcon from './FeatherIcon.vue'
+import Button from './Button.vue'
 import Popover from './Popover.vue'
-
+import FeatherIcon from './FeatherIcon.vue'
+import TextInput from './TextInput.vue'
 export default {
   name: 'DatePicker',
-  props: ['modelValue', 'placeholder', 'readonly', 'formatValue', 'inputClass'],
-  emits: ['update:modelValue'],
+  props: [
+    'value',
+    'modelValue',
+    'placeholder',
+    'formatter',
+    'readonly',
+    'inputClass',
+  ],
+  emits: ['update:modelValue', 'change'],
   components: {
+    Popover,
     Input,
+    Button,
     FeatherIcon,
-    Popover,
+    TextInput,
   },
   data() {
     return {
@@ -159,17 +187,25 @@ export default {
     },
     formatMonth() {
       let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
-      return date.toLocaleString('en-US', { month: 'short', year: 'numeric' })
+      let month = date.toLocaleString('en-US', {
+        month: 'long',
+      })
+      return `${month}, ${date.getFullYear()}`
+    },
+    dateValue() {
+      return this.value ? this.value : this.modelValue
     },
   },
   methods: {
     selectDate(date) {
+      this.$emit('change', this.toValue(date))
       this.$emit('update:modelValue', this.toValue(date))
     },
     selectCurrentMonthYear() {
-      let date = this.modelValue
-        ? this.getDate(this.modelValue)
-        : this.getDate()
+      let date = this.dateValue ? this.getDate(this.dateValue) : this.getDate()
+      if (date === 'Invalid Date') {
+        date = this.getDate()
+      }
       this.currentYear = date.getFullYear()
       this.currentMonth = date.getMonth() + 1
     },
@@ -201,7 +237,7 @@ export default {
         date = this.getDate(
           date.getFullYear(),
           date.getMonth(),
-          date.getDate() + incrementer
+          date.getDate() + incrementer,
         )
         dates.push(date)
         count--

package/src/components/DateRangePicker.vue

@@ -0,0 +1,326 @@
+<template>
+  <Popover
+    @open="selectCurrentMonthYear"
+    class="flex w-full [&>div:first-child]:w-full"
+  >
+    <template #target="{ togglePopover }">
+      <Input
+        readonly
+        type="text"
+        icon-left="calendar"
+        :placeholder="placeholder"
+        :value="dateValue && formatter ? formatDates(dateValue) : dateValue"
+        @focus="!readonly ? togglePopover() : null"
+        class="w-full"
+        :class="inputClass"
+        v-bind="$attrs"
+      />
+    </template>
+    <template #body="{ togglePopover }">
+      <div
+        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+      >
+        <div class="flex items-center p-1 text-gray-500">
+          <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
+            <FeatherIcon
+              :stroke-width="2"
+              name="chevron-left"
+              class="h-4 w-4"
+            />
+          </Button>
+          <div class="flex-1 text-center text-base font-medium text-gray-700">
+            {{ formatMonth }}
+          </div>
+          <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
+            <FeatherIcon
+              :stroke-width="2"
+              name="chevron-right"
+              class="h-4 w-4"
+            />
+          </Button>
+        </div>
+        <div class="flex items-center justify-center gap-1 p-1">
+          <TextInput class="w-28 text-sm" type="text" v-model="fromDate" />
+          <TextInput class="w-28 text-sm" type="text" v-model="toDate" />
+        </div>
+        <div
+          class="flex flex-col items-center justify-center p-1 text-gray-800"
+        >
+          <div class="flex items-center text-xs uppercase">
+            <div
+              class="flex h-6 w-8 items-center justify-center text-center"
+              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
+              :key="i"
+            >
+              {{ d }}
+            </div>
+          </div>
+          <div
+            class="flex items-center"
+            v-for="(week, i) in datesAsWeeks"
+            :key="i"
+          >
+            <div
+              v-for="date in week"
+              :key="toValue(date)"
+              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
+              :class="{
+                'text-gray-400': date.getMonth() !== currentMonth - 1,
+                'text-gray-900': date.getMonth() === currentMonth - 1,
+                'font-extrabold text-gray-900':
+                  toValue(date) === toValue(today),
+                'rounded-none bg-gray-100': isInRange(date),
+                'rounded-l-md rounded-r-none bg-gray-800 text-white hover:bg-gray-800':
+                  fromDate && toValue(date) === toValue(fromDate),
+                'rounded-r-md bg-gray-800 text-white hover:bg-gray-800':
+                  toDate && toValue(date) === toValue(toDate),
+              }"
+              @click="() => handleDateClick(date)"
+            >
+              {{ date.getDate() }}
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-end space-x-1 p-1">
+          <Button
+            :label="'Clear'"
+            @click="() => clearDates() | togglePopover()"
+            :disabled="!fromDate || !toDate"
+          />
+          <Button
+            variant="solid"
+            :label="'Apply'"
+            :disabled="!fromDate || !toDate"
+            @click="() => selectDates() | togglePopover()"
+          />
+        </div>
+      </div>
+    </template>
+  </Popover>
+</template>
+
+<script>
+import Input from './Input.vue'
+import Button from './Button.vue'
+import Popover from './Popover.vue'
+import FeatherIcon from './FeatherIcon.vue'
+import TextInput from './TextInput.vue'
+export default {
+  name: 'DateRangePicker',
+  props: ['modelValue', 'placeholder', 'formatter', 'readonly', 'inputClass'],
+  emits: ['update:modelValue', 'change'],
+  components: {
+    Popover,
+    Input,
+    Button,
+    FeatherIcon,
+    TextInput,
+  },
+  data() {
+    const fromDate = this.dateValue ? this.dateValue[0] : ''
+    const toDate = this.dateValue ? this.dateValue[1] : ''
+    return {
+      currentYear: null,
+      currentMonth: null,
+      fromDate,
+      toDate,
+    }
+  },
+  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)
+      let month = date.toLocaleString('en-US', {
+        month: 'long',
+      })
+      return `${month}, ${date.getFullYear()}`
+    },
+    dateValue() {
+      return this.value ? this.value : this.modelValue
+    },
+  },
+  methods: {
+    handleDateClick(date) {
+      if (this.fromDate && this.toDate) {
+        this.fromDate = this.toValue(date)
+        this.toDate = ''
+      } else if (this.fromDate && !this.toDate) {
+        this.toDate = this.toValue(date)
+      } else {
+        this.fromDate = this.toValue(date)
+      }
+      this.swapDatesIfNecessary()
+    },
+    selectDates() {
+      let val = `${this.fromDate},${this.toDate}`
+      if (!this.fromDate && !this.toDate) {
+        val = ''
+      }
+      this.$emit('change', val)
+      this.$emit('update:modelValue', val)
+    },
+    swapDatesIfNecessary() {
+      if (!this.fromDate || !this.toDate) {
+        return
+      }
+      // if fromDate is greater than toDate, swap them
+      let fromDate = this.getDate(this.fromDate)
+      let toDate = this.getDate(this.toDate)
+      if (fromDate > toDate) {
+        let temp = fromDate
+        fromDate = toDate
+        toDate = temp
+      }
+      this.fromDate = this.toValue(fromDate)
+      this.toDate = this.toValue(toDate)
+    },
+    selectCurrentMonthYear() {
+      let date = this.toDate ? this.getDate(this.toDate) : this.today
+      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 ''
+      }
+      if (typeof date === 'string') {
+        return date
+      }
+
+      // 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
+    },
+
+    isInRange(date) {
+      if (!this.fromDate || !this.toDate) {
+        return false
+      }
+      return (
+        date >= this.getDate(this.fromDate) && date <= this.getDate(this.toDate)
+      )
+    },
+
+    formatDates(value) {
+      if (!value) {
+        return ''
+      }
+      const values = value.split(',')
+      return this.formatter(values[0]) + ' to ' + this.formatter(values[1])
+    },
+    clearDates() {
+      this.fromDate = ''
+      this.toDate = ''
+      this.selectDates()
+    },
+  },
+}
+</script>