pimelon-ui 0.0.84 → 0.0.97

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "pimelon-ui",
-  "version": "0.0.84",
+  "version": "0.0.97",
   "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",
     "prepare": "husky install",
-    "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags"
+    "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs"
   },
   "files": [
     "src"
@@ -21,34 +24,52 @@
   "dependencies": {
     "@headlessui/vue": "^1.5.0",
     "@popperjs/core": "^2.11.2",
-    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.0",
-    "@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/suggestion": "^2.0.0-beta.195",
-    "@tiptap/vue-3": "^2.0.0-beta.96",
+    "@tiptap/extension-color": "^2.0.0-beta.205",
+    "@tiptap/extension-highlight": "^2.0.0-beta.205",
+    "@tiptap/extension-image": "^2.0.0-beta.205",
+    "@tiptap/extension-link": "^2.0.0-beta.205",
+    "@tiptap/extension-mention": "^2.0.0-beta.205",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.205",
+    "@tiptap/extension-table": "^2.0.0-beta.205",
+    "@tiptap/extension-table-cell": "^2.0.0-beta.205",
+    "@tiptap/extension-table-header": "^2.0.0-beta.205",
+    "@tiptap/extension-table-row": "^2.0.0-beta.205",
+    "@tiptap/extension-text-align": "^2.0.0-beta.205",
+    "@tiptap/extension-text-style": "^2.0.0-beta.205",
+    "@tiptap/extension-typography": "^2.0.0-beta.205",
+    "@tiptap/prosemirror-tables": "^1.1.3",
+    "@tiptap/starter-kit": "^2.0.0-beta.205",
+    "@tiptap/suggestion": "^2.0.0-beta.205",
+    "@tiptap/vue-3": "^2.0.0-beta.205",
     "autoprefixer": "^10.4.2",
     "feather-icons": "^4.28.0",
     "idb-keyval": "^6.2.0",
     "postcss": "^8.4.5",
+    "prosemirror-commands": "^1.5.0",
+    "prosemirror-dropcursor": "1.5.0",
+    "prosemirror-gapcursor": "^1.3.1",
+    "prosemirror-history": "^1.3.0",
+    "prosemirror-keymap": "^1.2.0",
+    "prosemirror-model": "^1.18.3",
+    "prosemirror-schema-list": "^1.2.2",
+    "prosemirror-state": "^1.4.2",
+    "prosemirror-transform": "^1.7.0",
+    "prosemirror-view": "^1.29.1",
     "showdown": "^2.1.0",
     "socket.io-client": "^4.5.1",
     "tailwindcss": "^3.0.12",
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
+    "cross-fetch": "^3.1.5",
     "husky": "^8.0.3",
     "lint-staged": ">=10",
     "prettier": "2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.13"
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "vitepress": "^1.0.0-alpha.29",
+    "vue": "^3.2.45"
   },
   "lint-staged": {
     "*.{js,css,md,vue}": "prettier --write"

package/src/components/Autocomplete.vue

@@ -6,11 +6,7 @@
           <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()
-              }
-            "
+            @click="() => openPopover()"
           >
             <span
               class="overflow-hidden text-ellipsis text-base"
@@ -100,6 +96,8 @@ import {
   ComboboxButton,
 } from '@headlessui/vue'
 import Popover from './Popover.vue'
+import Button from './Button.vue'
+import FeatherIcon from './FeatherIcon.vue'
 
 export default {
   name: 'Autocomplete',
@@ -107,6 +105,8 @@ export default {
   emits: ['update:modelValue', 'change'],
   components: {
     Popover,
+    Button,
+    FeatherIcon,
     Combobox,
     ComboboxInput,
     ComboboxOptions,

package/src/components/Badge.vue

@@ -3,26 +3,14 @@
     class="inline-block cursor-default rounded-md px-3 py-1 text-xs font-medium"
     :class="classes"
   >
-    <slot>{{ status }}</slot>
+    <slot>{{ label }}</slot>
   </span>
 </template>
 <script>
-const DEFAULT_COLOR_MAP = {
-  Pending: 'yellow',
-  Running: 'yellow',
-  Success: 'green',
-  Failure: 'red',
-  Active: 'green',
-  Broken: 'red',
-  Updating: 'blue',
-  Rejected: 'red',
-  Published: 'green',
-  Approved: 'green',
-}
-
+let validColors = ['gray', 'red', 'yellow', 'green', 'blue']
 export default {
   name: 'Badge',
-  props: ['color', 'status', 'colorMap'],
+  props: ['color', 'label', 'colorMap'],
   computed: {
     classes() {
       let color = this.getBadgeColor()
@@ -41,13 +29,12 @@ export default {
   methods: {
     getBadgeColor() {
       let color = this.color
-      if (color) {
-        return color
+      if (this.colorMap) {
+        color = this.colorMap[this.label]
+      }
+      if (!color || !validColors.includes(color)) {
+        color = 'gray'
       }
-
-      let statusColorMap = Object.assign(DEFAULT_COLOR_MAP, this.colorMap || {})
-      color = statusColorMap[this.status] || 'gray'
-
       return color
     },
   },

package/src/components/Button.vue

@@ -8,8 +8,10 @@
   >
     <LoadingIndicator
       v-if="loading"
-      class="mr-2 -ml-1 h-3 w-3"
+      class="h-3 w-3"
       :class="{
+        'mr-2 -ml-1': !icon,
+        'm-0.5': icon,
         'text-white': appearance == 'primary',
         'text-gray-600': appearance == 'secondary',
         'text-red-200': appearance == 'danger',
@@ -24,7 +26,7 @@
       aria-hidden="true"
     />
     <template v-if="loading && loadingText">{{ loadingText }}</template>
-    <template v-else-if="icon">
+    <template v-else-if="icon && !loading">
       <FeatherIcon :name="icon" class="h-4 w-4" :aria-label="label" />
     </template>
     <span v-else :class="icon ? 'sr-only' : ''">

package/src/components/DatePicker.vue

@@ -3,6 +3,7 @@
     <template #target="{ togglePopover }">
       <Input
         type="text"
+        icon-left="calendar"
         :class="inputClass"
         :value="
           modelValue && formatValue ? formatValue(modelValue) : modelValue || ''
@@ -92,6 +93,8 @@
 </template>
 
 <script>
+import Input from './Input.vue'
+import FeatherIcon from './FeatherIcon.vue'
 import Popover from './Popover.vue'
 
 export default {
@@ -99,6 +102,8 @@ export default {
   props: ['modelValue', 'placeholder', 'readonly', 'formatValue', 'inputClass'],
   emits: ['update:modelValue'],
   components: {
+    Input,
+    FeatherIcon,
     Popover,
   },
   data() {

package/src/components/Dialog.vue

@@ -10,7 +10,7 @@
       @close="open = false"
     >
       <div
-        class="flex min-h-screen flex-col items-center px-4 pt-4 pb-20 text-center"
+        class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
         :class="dialogPositionClasses"
       >
         <TransitionChild
@@ -46,8 +46,8 @@
               'max-w-3xl': options.size === '3xl',
               'max-w-2xl': options.size === '2xl',
               'max-w-xl': options.size === 'xl',
-              'max-w-md': options.size === 'md',
               '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',
             }"
@@ -60,6 +60,7 @@
                       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',
@@ -68,8 +69,9 @@
                     >
                       <FeatherIcon
                         :name="icon.name"
-                        class="h-6 w-6 text-red-600 sm:h-5 sm:w-5"
+                        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',
@@ -198,10 +200,7 @@ export default {
 
       let icon = this.options.icon
       if (typeof icon === 'string') {
-        icon = {
-          name: icon,
-          type: 'info',
-        }
+        icon = { name: icon }
       }
       return icon
     },

package/src/components/Dropdown.vue

@@ -1,49 +1,49 @@
 <template>
   <Menu as="div" class="relative inline-block text-left" v-slot="{ open }">
-    <MenuButton as="div">
-      <slot v-if="$slots.default" v-bind="{ open }"></slot>
-      <Button v-else v-bind="button" :active="open">
-        {{ button ? button?.label || null : 'Options' }}
-      </Button>
-    </MenuButton>
+    <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>
 
-    <transition
-      enter-active-class="transition duration-100 ease-out"
-      enter-from-class="transform scale-95 opacity-0"
-      enter-to-class="transform scale-100 opacity-100"
-      leave-active-class="transition duration-75 ease-in"
-      leave-from-class="transform scale-100 opacity-100"
-      leave-to-class="transform scale-95 opacity-0"
-    >
-      <MenuItems
-        class="min-w-40 absolute z-10 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 }"
-          >
-            <button
-              :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"
+      <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 :is="item.component" v-if="item.component" />
-              <template v-else>
+              <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"
@@ -53,28 +53,45 @@
                 <span class="whitespace-nowrap">
                   {{ item.label }}
                 </span>
-              </template>
-            </button>
-          </MenuItem>
-        </div>
-      </MenuItems>
-    </transition>
+              </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: 'NewDropdown',
-  props: ['button', 'options', 'placement'],
+  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) {
@@ -113,6 +130,16 @@ export default {
         }
       })
     },
+    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/FileUploader.vue

@@ -130,7 +130,7 @@ class FileUploader {
 
 export default {
   name: 'FileUploader',
-  props: ['fileTypes', 'uploadArgs', 'type', 'validateFile'],
+  props: ['fileTypes', 'uploadArgs', 'validateFile'],
   data() {
     return {
       uploader: null,
@@ -204,11 +204,11 @@ export default {
         .catch((error) => {
           this.uploading = false
           let errorMessage = 'Error Uploading File'
-          if (error._server_messages) {
+          if (error?._server_messages) {
             errorMessage = JSON.parse(
               JSON.parse(error._server_messages)[0]
             ).message
-          } else if (error.exc) {
+          } else if (error?.exc) {
             errorMessage = JSON.parse(error.exc)[0].split('\n').slice(-2, -1)[0]
           }
           this.error = errorMessage

package/src/components/Input.vue

@@ -49,7 +49,7 @@
         ref="input"
         :value="passedInputValue"
         :disabled="disabled"
-        :rows="rows || 3"
+        :rows="rows"
       ></textarea>
       <select
         v-if="type === 'select'"
@@ -80,7 +80,7 @@
 </template>
 
 <script>
-import { debounce } from 'pimelon-ui'
+import { debounce } from '../index'
 import FeatherIcon from './FeatherIcon.vue'
 
 export default {
@@ -129,6 +129,7 @@ export default {
     },
     rows: {
       type: Number,
+      default: 3,
     },
     placeholder: {
       type: String,

package/src/components/LoadingIndicator.vue

@@ -1,12 +1,27 @@
 <template>
-  <Spinner class="max-w-xs" />
+  <svg
+    class="max-w-xs animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
 </template>
 <script>
-import Spinner from './Spinner.vue'
 export default {
   name: 'LoadingIndicator',
-  components: {
-    Spinner,
-  },
 }
 </script>

package/src/components/Popover.vue

@@ -20,7 +20,8 @@
         :class="popoverClass"
         class="popover-container relative z-[100]"
         :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
-        v-show="isOpen"
+        @mouseover="pointerOverTargetOrPopup = true"
+        @mouseleave="onMouseleave"
       >
         <transition v-bind="popupTransition">
           <div v-show="isOpen">
@@ -66,7 +67,10 @@ export default {
       type: Number,
       default: 0,
     },
-    right: Boolean,
+    leaveDelay: {
+      type: Number,
+      default: 0,
+    },
     placement: {
       type: String,
       default: 'bottom-start',
@@ -85,6 +89,7 @@ export default {
     return {
       showPopup: false,
       targetWidth: null,
+      pointerOverTargetOrPopup: false,
     }
   },
   watch: {
@@ -97,6 +102,7 @@ export default {
     },
   },
   created() {
+    if (typeof window === 'undefined') return
     if (!document.getElementById('melonui-popper-root')) {
       const root = document.createElement('div')
       root.id = 'melonui-popper-root'
@@ -195,24 +201,22 @@ export default {
       }
     },
     open() {
-      if (this.isOpen) {
-        return
-      }
       this.isOpen = true
       this.$nextTick(() => this.setupPopper())
     },
     close() {
-      if (!this.isOpen) {
-        return
-      }
       this.isOpen = false
     },
     onMouseover() {
-      this.mouseover = true
+      this.pointerOverTargetOrPopup = true
+      if (this.leaveTimer) {
+        clearTimeout(this.leaveTimer)
+        this.leaveTimer = null
+      }
       if (this.trigger === 'hover') {
         if (this.hoverDelay) {
           this.hoverTimer = setTimeout(() => {
-            if (this.mouseover) {
+            if (this.pointerOverTargetOrPopup) {
               this.open()
             }
           }, Number(this.hoverDelay) * 1000)
@@ -221,13 +225,27 @@ export default {
         }
       }
     },
-    onMouseleave() {
-      this.mouseover = false
+    onMouseleave(e) {
+      this.pointerOverTargetOrPopup = false
       if (this.hoverTimer) {
         clearTimeout(this.hoverTimer)
+        this.hoverTimer = null
       }
       if (this.trigger === 'hover') {
-        this.close()
+        if (this.leaveTimer) {
+          clearTimeout(this.leaveTimer)
+        }
+        if (this.leaveDelay) {
+          this.leaveTimer = setTimeout(() => {
+            if (!this.pointerOverTargetOrPopup) {
+              this.close()
+            }
+          }, Number(this.leaveDelay) * 1000)
+        } else {
+          if (!this.pointerOverTargetOrPopup) {
+            this.close()
+          }
+        }
       }
     },
   },