pimelon-ui 0.0.19 → 0.0.57

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "pimelon-ui",
-  "version": "0.0.19",
+  "version": "0.0.57",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
     "test": "npx prettier --check ./src",
-    "prettier": "npx prettier -w ./src"
+    "prettier": "npx prettier -w ./src",
+    "prepare": "husky install",
+    "bump-and-release": "yarn version --patch && git push && git push --tags"
   },
   "files": [
     "src"
@@ -15,19 +17,37 @@
     "url": "https://github.com/amonak/pimelon-ui.git"
   },
   "author": "Alphamonak Solutions",
+  "license": "MIT",
   "dependencies": {
     "@headlessui/vue": "^1.5.0",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",
-    "@tiptap/extension-image": "^2.0.0-beta.27",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.48",
-    "@tiptap/starter-kit": "^2.0.0-beta.183",
-    "@tiptap/vue-3": "^2.0.0-beta.90",
+    "@tiptap/extension-image": "^2.0.0-beta.30",
+    "@tiptap/extension-link": "^2.0.0-beta.43",
+    "@tiptap/extension-mention": "^2.0.0-beta.102",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.53",
+    "@tiptap/extension-table": "^2.0.0-beta.54",
+    "@tiptap/extension-table-cell": "^2.0.0-beta.23",
+    "@tiptap/extension-table-header": "^2.0.0-beta.25",
+    "@tiptap/extension-table-row": "^2.0.0-beta.22",
+    "@tiptap/extension-text-align": "^2.0.0-beta.31",
+    "@tiptap/starter-kit": "^2.0.0-beta.191",
+    "@tiptap/vue-3": "^2.0.0-beta.96",
     "autoprefixer": "^10.4.2",
     "feather-icons": "^4.28.0",
     "postcss": "^8.4.5",
-    "socket.io-client": "^2.4.0",
-    "tailwindcss": "^3.0.12"
+    "socket.io-client": "^4.5.1",
+    "tailwindcss": "^3.0.12",
+    "tippy.js": "^6.3.7"
+  },
+  "devDependencies": {
+    "husky": "^8.0.3",
+    "lint-staged": ">=10",
+    "prettier": "2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13"
+  },
+  "lint-staged": {
+    "*.{js,css,md,vue}": "prettier --write"
   }
 }

package/src/components/Alert.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="block w-full">
     <div
-      class="items-start px-4 md:px-5 py-3.5 text-base rounded-md flex"
+      class="flex items-start rounded-md px-4 py-3.5 text-base md:px-5"
       :class="classes"
     >
       <svg
@@ -19,8 +19,8 @@
           fill="#318AD8"
         />
       </svg>
-      <div class="w-full ml-2">
-        <div class="flex flex-col md:items-baseline md:flex-row">
+      <div class="ml-2 w-full">
+        <div class="flex flex-col md:flex-row md:items-baseline">
           <h3 class="text-lg font-medium text-gray-900" v-if="title">
             {{ title }}
           </h3>

package/src/components/Autocomplete.vue

@@ -0,0 +1,146 @@
+<template>
+  <Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
+    <Popover class="w-full">
+      <template #target="{ open: openPopover }">
+        <div class="w-full">
+          <ComboboxButton
+            class="flex w-full items-center justify-between rounded-md bg-gray-100 py-1.5 pl-3 pr-2"
+            :class="{ 'rounded-b-none': isComboboxOpen }"
+            @click="
+              () => {
+                openPopover()
+              }
+            "
+          >
+            <span
+              class="overflow-hidden text-ellipsis text-base"
+              v-if="selectedValue"
+            >
+              {{ displayValue(selectedValue) }}
+            </span>
+            <span class="text-base text-gray-500" v-else>
+              {{ placeholder || '' }}
+            </span>
+            <FeatherIcon
+              name="chevron-down"
+              class="h-4 w-4 text-gray-500"
+              aria-hidden="true"
+            />
+          </ComboboxButton>
+        </div>
+      </template>
+      <template #body>
+        <ComboboxOptions
+          class="max-h-[11rem] overflow-y-auto rounded-md rounded-t-none bg-white px-1.5 pb-1.5 shadow-md"
+          static
+          v-show="isComboboxOpen"
+        >
+          <div
+            class="items-st sticky top-0 mb-1.5 flex items-stretch space-x-1.5 bg-white pt-1.5"
+          >
+            <ComboboxInput
+              class="form-input w-full placeholder-gray-500"
+              type="text"
+              @change="
+                (e) => {
+                  query = e.target.value
+                }
+              "
+              :value="query"
+              autocomplete="off"
+              placeholder="Search by keyword"
+            />
+            <Button icon="x" @click="selectedValue = null" />
+          </div>
+          <ComboboxOption
+            as="template"
+            v-for="option in filteredOptions"
+            :key="option.value"
+            :value="option"
+            v-slot="{ active, selected }"
+          >
+            <li
+              :class="[
+                'rounded-md px-2.5 py-1.5 text-base',
+                { 'bg-gray-100': active },
+              ]"
+            >
+              {{ option.label }}
+            </li>
+          </ComboboxOption>
+          <li
+            v-if="filteredOptions.length == 0"
+            class="rounded-md px-2.5 py-1.5 text-base text-gray-600"
+          >
+            No results found
+          </li>
+        </ComboboxOptions>
+      </template>
+    </Popover>
+  </Combobox>
+</template>
+<script>
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+  ComboboxButton,
+} from '@headlessui/vue'
+import Popover from './Popover.vue'
+
+export default {
+  name: 'Autocomplete',
+  props: ['modelValue', 'options', 'placeholder'],
+  emits: ['update:modelValue', 'change'],
+  components: {
+    Popover,
+    Combobox,
+    ComboboxInput,
+    ComboboxOptions,
+    ComboboxOption,
+    ComboboxButton,
+  },
+  data() {
+    return {
+      query: '',
+    }
+  },
+  computed: {
+    valuePropPassed() {
+      return 'value' in this.$attrs
+    },
+    selectedValue: {
+      get() {
+        return this.valuePropPassed ? this.$attrs.value : this.modelValue
+      },
+      set(val) {
+        this.query = ''
+        this.$emit(this.valuePropPassed ? 'change' : 'update:modelValue', val)
+      },
+    },
+    filteredOptions() {
+      if (!this.query) {
+        return this.options
+      }
+      return this.options.filter((option) => {
+        let searchTexts = [option.label, option.value]
+        return searchTexts.some((text) =>
+          (text || '')
+            .toString()
+            .toLowerCase()
+            .includes(this.query.toLowerCase())
+        )
+      })
+    },
+  },
+  methods: {
+    displayValue(option) {
+      if (typeof option === 'string') {
+        return option
+      }
+      return option?.label
+    },
+  },
+}
+</script>

package/src/components/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-hidden" :class="styleClasses">
+  <div class="shrink-0 overflow-hidden" :class="styleClasses">
     <img
       v-if="imageURL"
       :src="imageURL"
@@ -8,7 +8,7 @@
     />
     <div
       v-else
-      class="flex items-center justify-center w-full h-full text-gray-600 uppercase bg-gray-200"
+      class="flex h-full w-full items-center justify-center bg-gray-200 uppercase text-gray-600"
       :class="{ sm: 'text-xs', md: 'text-base', lg: 'text-lg' }[size]"
     >
       {{ label && label[0] }}

package/src/components/Badge.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="inline-block px-3 py-1 text-xs font-medium rounded-md cursor-default"
+    class="inline-block cursor-default rounded-md px-3 py-1 text-xs font-medium"
     :class="classes"
   >
     <slot>{{ status }}</slot>
@@ -9,31 +9,50 @@
 <script>
 export default {
   name: 'Badge',
-  props: ['color', 'status'],
+  props: ['color', 'status', 'colorMap'],
+  data: {
+    defaultColorMap: {
+      Pending: 'yellow',
+      Running: 'yellow',
+      Success: 'green',
+      Failure: 'red',
+      Active: 'green',
+      Broken: 'red',
+      Updating: 'blue',
+      Rejected: 'red',
+      Published: 'green',
+      Approved: 'green',
+    },
+  },
   computed: {
     classes() {
-      let color = this.color
-      if (!color && this.status) {
-        color = {
-          Pending: 'yellow',
-          Running: 'yellow',
-          Success: 'green',
-          Failure: 'red',
-          Active: 'green',
-          Broken: 'red',
-          Updating: 'blue',
-          Rejected: 'red',
-          Published: 'green',
-          Approved: 'green',
-        }[this.status]
-      }
-      return {
+      let color = this.getBadgeColor()
+
+      let cssClasses = {
         gray: 'text-gray-700 bg-gray-50',
         green: 'text-green-700 bg-green-50',
         red: 'text-red-700 bg-red-50',
         yellow: 'text-yellow-700 bg-yellow-50',
         blue: 'text-blue-700 bg-blue-50',
-      }[color || 'gray']
+      }[color]
+
+      return cssClasses
+    },
+  },
+  methods: {
+    getBadgeColor() {
+      let color = this.color
+      if (color) {
+        return color
+      }
+
+      let statusColorMap = Object.assign(
+        this.defaultColorMap,
+        this.colorMap || {}
+      )
+      color = statusColorMap[this.status] || 'gray'
+
+      return color
     },
   },
 }

package/src/components/Button.vue

@@ -7,23 +7,26 @@
   >
     <LoadingIndicator
       v-if="loading"
+      class="mr-2 -ml-1 h-3 w-3"
       :class="{
         'text-white': appearance == 'primary',
         'text-gray-600': appearance == 'secondary',
         'text-red-200': appearance == 'danger',
+        'text-green-200': appearance == 'success',
+        'text-yellow-200': appearance == 'warning',
       }"
     />
     <FeatherIcon
       v-else-if="iconLeft"
       :name="iconLeft"
-      class="w-4 h-4 mr-1.5"
+      class="mr-1.5 h-4 w-4"
       aria-hidden="true"
     />
     <template v-if="loading && loadingText">{{ loadingText }}</template>
     <template v-else-if="icon">
-      <FeatherIcon :name="icon" class="w-4 h-4" :aria-label="label" />
+      <FeatherIcon :name="icon" class="h-4 w-4" :aria-label="label" />
     </template>
-    <span :class="icon ? 'sr-only' : ''">
+    <span v-else :class="icon ? 'sr-only' : ''">
       <slot>
         {{ label }}
       </slot>
@@ -31,7 +34,7 @@
     <FeatherIcon
       v-if="iconRight"
       :name="iconRight"
-      class="w-4 h-4 ml-2"
+      class="ml-2 h-4 w-4"
       aria-hidden="true"
     />
   </button>
@@ -40,7 +43,15 @@
 import FeatherIcon from './FeatherIcon.vue'
 import LoadingIndicator from './LoadingIndicator.vue'
 
-const ValidAppearances = ['primary', 'secondary', 'danger', 'white', 'minimal']
+const ValidAppearances = [
+  'primary',
+  'secondary',
+  'danger',
+  'success',
+  'warning',
+  'white',
+  'minimal',
+]
 
 export default {
   name: 'Button',
@@ -98,19 +109,23 @@ export default {
     buttonClasses() {
       let appearanceClasses = {
         primary:
-          'bg-blue-500 hover:bg-blue-600 text-white focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
+          'bg-blue-500 hover:bg-blue-600 border-transparent text-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500',
         secondary:
-          'bg-gray-100 hover:bg-gray-200 text-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-gray-500',
+          'bg-gray-100 hover:bg-gray-200 border-transparent text-gray-900 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500',
         danger:
-          'bg-red-500 hover:bg-red-400 text-white focus:ring-2 focus:ring-offset-2 focus:ring-red-500',
+          'bg-red-500 hover:bg-red-400 border-transparent text-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-500',
+        success:
+          'bg-green-500 hover:bg-green-400 border-transparent text-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-green-500',
+        warning:
+          'bg-yellow-500 hover:bg-yellow-400 border-transparent text-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-yellow-500',
         white:
-          'bg-white text-gray-900 border hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400',
-        minimal: `active:bg-gray-200 focus:bg-gray-200 text-gray-900 ${
+          'bg-white text-gray-900 border-gray-200 hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-400',
+        minimal: `active:bg-gray-200 border-transparent focus:bg-gray-200 text-gray-900 ${
           this.active ? 'bg-gray-200' : 'bg-transparent hover:bg-gray-200'
         }`,
       }
       return [
-        'inline-flex items-center justify-center text-base leading-5 rounded-md transition-colors focus:outline-none',
+        'inline-flex items-center justify-center text-base leading-5 rounded-md border transition-colors focus:outline-none',
         this.icon ? 'p-1.5' : 'px-3 py-1',
         this.isDisabled
           ? 'opacity-50 cursor-not-allowed pointer-events-none'

package/src/components/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col px-6 py-5 bg-white border rounded-lg shadow">
+  <div class="flex flex-col rounded-lg border bg-white px-6 py-5 shadow">
     <div class="flex items-baseline justify-between">
       <div class="flex items-baseline space-x-2">
         <div class="flex items-center space-x-2" v-if="$slots['actions-left']">
@@ -11,16 +11,16 @@
         <slot name="actions"></slot>
       </div>
     </div>
-    <p class="text-base text-gray-600 mt-1.5" v-if="subtitle">
+    <p class="mt-1.5 text-base text-gray-600" v-if="subtitle">
       {{ subtitle }}
     </p>
     <div
       v-if="loading"
-      class="flex flex-col items-center justify-center flex-auto mt-4 rounded-md"
+      class="mt-4 flex flex-auto flex-col items-center justify-center rounded-md"
     >
       <LoadingText />
     </div>
-    <div class="flex-auto mt-4 overflow-auto" v-else-if="$slots['default']">
+    <div class="mt-4 flex-auto overflow-auto" v-else-if="$slots['default']">
       <slot></slot>
     </div>
   </div>

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="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 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>