pimelon-ui 0.0.98

package/src/components/DatePicker.vue

@@ -0,0 +1,252 @@
+<template>
+  <Popover @open="selectCurrentMonthYear" transition="default">
+    <template #target="{ togglePopover }">
+      <Input
+        type="text"
+        icon-left="calendar"
+        :class="inputClass"
+        :value="
+          modelValue && formatValue ? formatValue(modelValue) : modelValue || ''
+        "
+        :placeholder="placeholder"
+        @focus="!readonly ? togglePopover() : null"
+        readonly
+      />
+    </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">
+            {{ 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>
+        <div class="mt-2 text-sm">
+          <div class="grid w-full grid-cols-7 place-items-center text-gray-600">
+            <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']"
+              :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>
+          </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"
+            @click="
+              () => {
+                selectDate('')
+                togglePopover()
+              }
+            "
+          >
+            Clear
+          </div>
+        </div>
+      </div>
+    </template>
+  </Popover>
+</template>
+
+<script>
+import Input from './Input.vue'
+import FeatherIcon from './FeatherIcon.vue'
+import Popover from './Popover.vue'
+
+export default {
+  name: 'DatePicker',
+  props: ['modelValue', 'placeholder', 'readonly', 'formatValue', 'inputClass'],
+  emits: ['update:modelValue'],
+  components: {
+    Input,
+    FeatherIcon,
+    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/Dialog.vue

@@ -0,0 +1,216 @@
+<template>
+  <TransitionRoot
+    as="template"
+    :show="open"
+    @after-leave="$emit('after-leave')"
+  >
+    <HDialog
+      as="div"
+      class="fixed inset-0 z-10 overflow-y-auto"
+      @close="open = false"
+    >
+      <div
+        class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
+        :class="dialogPositionClasses"
+      >
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogOverlay
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0 translate-y-4 sm:-translate-y-12 sm:scale-95"
+          enter-to="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100 translate-y-0 sm:scale-100"
+          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div
+            class="my-8 inline-block w-full transform overflow-hidden rounded-lg bg-white text-left align-middle shadow-xl transition-all"
+            :class="{
+              'max-w-7xl': options.size === '7xl',
+              'max-w-6xl': options.size === '6xl',
+              'max-w-5xl': options.size === '5xl',
+              'max-w-4xl': options.size === '4xl',
+              'max-w-3xl': options.size === '3xl',
+              'max-w-2xl': options.size === '2xl',
+              'max-w-xl': options.size === 'xl',
+              'max-w-lg': options.size === 'lg' || !options.size,
+              'max-w-md': options.size === 'md',
+              'max-w-sm': options.size === 'sm',
+              'max-w-xs': options.size === 'xs',
+            }"
+          >
+            <slot name="body">
+              <slot name="body-main">
+                <div class="bg-white px-4 py-5 sm:p-6">
+                  <div class="flex flex-col sm:flex-row">
+                    <div
+                      v-if="icon"
+                      class="mx-auto mb-3 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:mb-0 sm:mr-4 sm:h-9 sm:w-9"
+                      :class="{
+                        'bg-gray-100': !icon.appearance,
+                        'bg-yellow-100': icon.appearance === 'warning',
+                        'bg-blue-100': icon.appearance === 'info',
+                        'bg-red-100': icon.appearance === 'danger',
+                        'bg-green-100': icon.appearance === 'success',
+                      }"
+                    >
+                      <FeatherIcon
+                        :name="icon.name"
+                        class="h-6 w-6 sm:h-5 sm:w-5"
+                        :class="{
+                          'text-gray-600': !icon.appearance,
+                          'text-yellow-600': icon.appearance === 'warning',
+                          'text-blue-600': icon.appearance === 'info',
+                          'text-red-600': icon.appearance === 'danger',
+                          'text-green-600': icon.appearance === 'success',
+                        }"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div class="flex-1">
+                      <DialogTitle as="header">
+                        <slot name="body-title">
+                          <h3
+                            class="mb-2 text-lg font-medium leading-6 text-gray-900"
+                          >
+                            {{ options.title || 'Untitled' }}
+                          </h3>
+                        </slot>
+                      </DialogTitle>
+
+                      <slot name="body-content">
+                        <p
+                          class="text-base text-gray-600"
+                          v-if="options.message"
+                        >
+                          {{ options.message }}
+                        </p>
+                      </slot>
+                    </div>
+                  </div>
+                </div>
+              </slot>
+              <div
+                class="space-y-2 bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:space-x-3 sm:space-y-0 sm:space-x-reverse sm:px-6"
+                v-if="options?.actions || $slots.actions"
+              >
+                <slot name="actions" v-bind="{ close: () => (open = false) }">
+                  <Button
+                    class="w-full sm:w-max"
+                    v-for="action in options.actions"
+                    :key="action.label"
+                    :loading="action.loading"
+                    v-bind="action"
+                    @click="handleAction(action)"
+                  >
+                    {{ action.label }}
+                  </Button>
+                </slot>
+              </div>
+            </slot>
+          </div>
+        </TransitionChild>
+      </div>
+    </HDialog>
+  </TransitionRoot>
+</template>
+
+<script>
+import { computed } from 'vue'
+import {
+  Dialog as HDialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue'
+import Button from './Button.vue'
+import FeatherIcon from './FeatherIcon.vue'
+
+export default {
+  name: 'Dialog',
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    options: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  emits: ['update:modelValue', 'close', 'after-leave'],
+  components: {
+    HDialog,
+    DialogOverlay,
+    DialogTitle,
+    TransitionChild,
+    TransitionRoot,
+    Button,
+    FeatherIcon,
+  },
+  setup(props, { emit }) {
+    let open = computed({
+      get: () => props.modelValue,
+      set: (val) => {
+        emit('update:modelValue', val)
+        if (!val) {
+          emit('close')
+        }
+      },
+    })
+    return {
+      open,
+    }
+  },
+  methods: {
+    handleAction(action) {
+      let close = () => (this.open = false)
+      if (action.handler && typeof action.handler === 'function') {
+        action.loading = true
+        let result = action.handler({ close })
+        if (result && result.then) {
+          result.then(() => (action.loading = false))
+        } else {
+          action.loading = false
+        }
+      } else {
+        close()
+      }
+    },
+  },
+  computed: {
+    icon() {
+      if (!this.options?.icon) return null
+
+      let icon = this.options.icon
+      if (typeof icon === 'string') {
+        icon = { name: icon }
+      }
+      return icon
+    },
+    dialogPositionClasses() {
+      let position = this.options?.position || 'center'
+      return {
+        'justify-center': position === 'center',
+        'pt-[20vh]': position === 'top',
+      }
+    },
+  },
+}
+</script>

package/src/components/Dropdown.vue

@@ -0,0 +1,145 @@
+<template>
+  <Menu as="div" class="relative inline-block text-left" v-slot="{ open }">
+    <Popover :transition="dropdownTransition" :show="open">
+      <template #target>
+        <MenuButton as="div">
+          <slot v-if="$slots.default" v-bind="{ open }" />
+          <Button v-else :active="open" v-bind="button">
+            {{ button ? button?.label || null : 'Options' }}
+          </Button>
+        </MenuButton>
+      </template>
+
+      <template #body>
+        <MenuItems
+          class="min-w-40 mt-2 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+          :class="{
+            'left-0 origin-top-left': placement == 'left',
+            'right-0 origin-top-right': placement == 'right',
+            'inset-x-0 origin-top': placement == 'center',
+          }"
+        >
+          <div v-for="group in groups" :key="group.key" class="px-1 py-1">
+            <div
+              v-if="group.group && !group.hideLabel"
+              class="px-2 py-1 text-xs font-semibold uppercase tracking-wider text-gray-500"
+            >
+              {{ group.group }}
+            </div>
+            <MenuItem
+              v-for="item in group.items"
+              :key="item.label"
+              v-slot="{ active }"
+            >
+              <component
+                v-if="item.component"
+                :is="item.component"
+                :active="active"
+              />
+              <button
+                v-else
+                :class="[
+                  active ? 'bg-gray-100' : 'text-gray-900',
+                  'group flex w-full items-center rounded-md px-2 py-2 text-sm',
+                ]"
+                @click="item.onClick"
+              >
+                <FeatherIcon
+                  v-if="item.icon"
+                  :name="item.icon"
+                  class="mr-2 h-4 w-4 flex-shrink-0 text-gray-500"
+                  aria-hidden="true"
+                />
+                <span class="whitespace-nowrap">
+                  {{ item.label }}
+                </span>
+              </button>
+            </MenuItem>
+          </div>
+        </MenuItems>
+      </template>
+    </Popover>
+  </Menu>
+</template>
+
+<script>
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+import Popover from './Popover.vue'
+import Button from './Button.vue'
+import FeatherIcon from './FeatherIcon.vue'
+
+export default {
+  name: 'Dropdown',
+  props: {
+    button: {
+      type: Object,
+      default: null,
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    placement: {
+      type: String,
+      default: 'left',
+    },
+  },
+  components: {
+    Menu,
+    MenuButton,
+    MenuItems,
+    MenuItem,
+    Button,
+    FeatherIcon,
+    Popover,
+  },
+  methods: {
+    normalizeDropdownItem(option) {
+      let onClick = option.handler || null
+      if (!onClick && option.route && this.$router) {
+        onClick = () => this.$router.push(option.route)
+      }
+
+      return {
+        label: option.label,
+        icon: option.icon,
+        group: option.group,
+        component: option.component,
+        onClick,
+      }
+    },
+    filterOptions(options) {
+      return (options || [])
+        .filter(Boolean)
+        .filter((option) => (option.condition ? option.condition() : true))
+        .map((option) => this.normalizeDropdownItem(option))
+    },
+  },
+  computed: {
+    groups() {
+      let groups = this.options[0]?.group
+        ? this.options
+        : [{ group: '', items: this.options }]
+
+      return groups.map((group, i) => {
+        return {
+          key: i,
+          group: group.group,
+          hideLabel: group.hideLabel || false,
+          items: this.filterOptions(group.items),
+        }
+      })
+    },
+    dropdownTransition() {
+      return {
+        enterActiveClass: 'transition duration-100 ease-out',
+        enterFromClass: 'transform scale-95 opacity-0',
+        enterToClass: 'transform scale-100 opacity-100',
+        leaveActiveClass: 'transition duration-75 ease-in',
+        leaveFromClass: 'transform scale-100 opacity-100',
+        leaveToClass: 'transform scale-95 opacity-0',
+      }
+    },
+  },
+}
+</script>

package/src/components/ErrorMessage.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    v-if="message"
+    class="whitespace-pre-line text-sm text-red-600"
+    role="alert"
+    v-html="errorMessage"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorMessage',
+  props: ['message'],
+  computed: {
+    errorMessage() {
+      if (!this.message) return ''
+      if (this.message instanceof Error) {
+        return this.message.messages || this.message.message
+      }
+      return this.message
+    },
+  },
+}
+</script>

package/src/components/FeatherIcon.vue

@@ -0,0 +1,59 @@
+<script>
+import { h, mergeProps } from 'vue'
+import feather from 'feather-icons'
+
+const validIcons = Object.keys(feather.icons)
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+      validator(value) {
+        const valid = validIcons.includes(value)
+        if (!valid) {
+          console.groupCollapsed(
+            '[pimelon-ui] name property for feather-icon must be one of '
+          )
+          console.dir(validIcons)
+          console.groupEnd()
+        }
+        return valid
+      },
+    },
+    color: {
+      type: String,
+      default: null,
+    },
+    strokeWidth: {
+      type: Number,
+      default: 1.5,
+    },
+  },
+  render() {
+    let icon = feather.icons[this.name]
+    if (!icon) {
+      icon = feather.icons['circle']
+    }
+    return h(
+      'svg',
+      mergeProps(
+        icon.attrs,
+        {
+          fill: 'none',
+          stroke: 'currentColor',
+          color: this.color,
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          'stroke-width': this.strokeWidth,
+          width: null,
+          height: null,
+          class: [icon.attrs.class, 'shrink-0'],
+          innerHTML: icon.contents,
+        },
+        this.$attrs
+      )
+    )
+  },
+}
+</script>