pimelon-ui 0.0.98

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "pimelon-ui",
+  "version": "0.0.98",
+  "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",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs"
+  },
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/amonak/pimelon-ui.git"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.5.0",
+    "@popperjs/core": "^2.11.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.0",
+    "@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.2",
+    "lint-staged": ">=10",
+    "prettier": "2.7.1",
+    "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/Alert.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="block w-full">
+    <div
+      class="flex items-start rounded-md px-4 py-3.5 text-base md:px-5"
+      :class="classes"
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          opacity="0.8"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 10.5C12.5523 10.5 13 10.9477 13 11.5V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11.5C11 10.9477 11.4477 10.5 12 10.5ZM13 7.99976C13 7.44747 12.5523 6.99976 12 6.99976C11.4477 6.99976 11 7.44747 11 7.99976V8.1C11 8.65228 11.4477 9.1 12 9.1C12.5523 9.1 13 8.65228 13 8.1V7.99976Z"
+          fill="#318AD8"
+        />
+      </svg>
+      <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>
+          <div class="mt-1 md:mt-0 md:ml-2">
+            <slot></slot>
+          </div>
+          <div class="mt-3 md:mt-0 md:ml-auto">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Alert',
+  props: {
+    title: String,
+    type: {
+      type: String,
+      default: 'warning',
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        warning: 'text-gray-700 bg-blue-50',
+      }[this.type]
+    },
+  },
+}
+</script>

package/src/components/Autocomplete.vue

@@ -0,0 +1,176 @@
+<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 pl-3 pr-2"
+            :class="{ 'rounded-b-none': isComboboxOpen }"
+            @click="() => openPopover()"
+          >
+            <span
+              class="overflow-hidden text-ellipsis text-base leading-5"
+              v-if="selectedValue"
+            >
+              {{ displayValue(selectedValue) }}
+            </span>
+            <span class="text-base leading-5 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-[15rem] 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>
+          <div
+            v-for="group in groups"
+            :key="group.key"
+            v-show="group.items.length > 0"
+          >
+            <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>
+            <ComboboxOption
+              as="template"
+              v-for="option in group.items"
+              :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>
+          </div>
+          <li
+            v-if="groups.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'
+import Button from './Button.vue'
+import FeatherIcon from './FeatherIcon.vue'
+
+export default {
+  name: 'Autocomplete',
+  props: ['modelValue', 'options', 'placeholder'],
+  emits: ['update:modelValue', 'change'],
+  components: {
+    Popover,
+    Button,
+    FeatherIcon,
+    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)
+      },
+    },
+    groups() {
+      if (!this.options || this.options.length == 0) return []
+
+      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),
+          }
+        })
+        .filter((group) => group.items.length > 0)
+    },
+  },
+  methods: {
+    filterOptions(options) {
+      if (!this.query) {
+        return options
+      }
+      return options.filter((option) => {
+        let searchTexts = [option.label, option.value]
+        return searchTexts.some((text) =>
+          (text || '')
+            .toString()
+            .toLowerCase()
+            .includes(this.query.toLowerCase())
+        )
+      })
+    },
+    displayValue(option) {
+      if (typeof option === 'string') {
+        return option
+      }
+      return option?.label
+    },
+  },
+}
+</script>

package/src/components/Avatar.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="shrink-0 overflow-hidden" :class="styleClasses">
+    <img
+      v-if="imageURL"
+      :src="imageURL"
+      class="object-cover"
+      :class="styleClasses"
+      loading="lazy"
+    />
+    <div
+      v-else
+      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] }}
+    </div>
+  </div>
+</template>
+
+<script>
+const validShapes = ['square', 'circle']
+
+export default {
+  name: 'Avatar',
+  props: {
+    imageURL: String,
+    label: String,
+    size: {
+      default: 'md',
+    },
+    shape: {
+      default: 'circle',
+      validator(value) {
+        const valid = validShapes.includes(value)
+        if (!valid) {
+          console.warn(
+            `shape property for <Avatar /> must be one of `,
+            validShapes
+          )
+        }
+        return valid
+      },
+    },
+  },
+  computed: {
+    styleClasses() {
+      const sizeClasses = {
+        sm: 'w-5 h-5',
+        md: 'w-8 h-8',
+        lg: 'w-12 h-12',
+      }[this.size]
+
+      const shapeClass = {
+        circle: 'rounded-full',
+        square: 'rounded-lg',
+      }[this.shape]
+
+      return `${shapeClass} ${sizeClasses}`
+    },
+  },
+}
+</script>

package/src/components/Badge.vue

@@ -0,0 +1,42 @@
+<template>
+  <span
+    class="inline-block cursor-default rounded-md px-3 py-1 text-xs font-medium"
+    :class="classes"
+  >
+    <slot>{{ label }}</slot>
+  </span>
+</template>
+<script>
+let validColors = ['gray', 'red', 'yellow', 'green', 'blue']
+export default {
+  name: 'Badge',
+  props: ['color', 'label', 'colorMap'],
+  computed: {
+    classes() {
+      let color = this.getBadgeColor()
+
+      let cssClasses = {
+        gray: 'text-gray-700 bg-gray-100',
+        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]
+
+      return cssClasses
+    },
+  },
+  methods: {
+    getBadgeColor() {
+      let color = this.color
+      if (this.colorMap) {
+        color = this.colorMap[this.label]
+      }
+      if (!color || !validColors.includes(color)) {
+        color = 'gray'
+      }
+      return color
+    },
+  },
+}
+</script>

package/src/components/Button.vue

@@ -0,0 +1,155 @@
+<template>
+  <button
+    v-bind="$attrs"
+    :class="buttonClasses"
+    @click="handleClick"
+    :disabled="isDisabled"
+    :aria-label="ariaLabel"
+  >
+    <LoadingIndicator
+      v-if="loading"
+      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',
+        'text-green-200': appearance == 'success',
+        'text-yellow-200': appearance == 'warning',
+      }"
+    />
+    <FeatherIcon
+      v-else-if="iconLeft"
+      :name="iconLeft"
+      class="mr-1.5 h-4 w-4"
+      aria-hidden="true"
+    />
+    <template v-if="loading && loadingText">{{ loadingText }}</template>
+    <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' : ''">
+      <slot>
+        {{ label }}
+      </slot>
+    </span>
+    <FeatherIcon
+      v-if="iconRight"
+      :name="iconRight"
+      class="ml-2 h-4 w-4"
+      aria-hidden="true"
+    />
+  </button>
+</template>
+<script>
+import FeatherIcon from './FeatherIcon.vue'
+import LoadingIndicator from './LoadingIndicator.vue'
+
+const ValidAppearances = [
+  'primary',
+  'secondary',
+  'danger',
+  'success',
+  'warning',
+  'white',
+  'minimal',
+]
+
+export default {
+  name: 'Button',
+  components: {
+    FeatherIcon,
+    LoadingIndicator,
+  },
+  props: {
+    label: {
+      type: String,
+      default: null,
+    },
+    appearance: {
+      type: String,
+      default: 'secondary',
+      validator: (value) => {
+        return ValidAppearances.includes(value)
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    iconLeft: {
+      type: String,
+      default: null,
+    },
+    iconRight: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    loadingText: {
+      type: String,
+      default: null,
+    },
+    route: {},
+    link: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    buttonClasses() {
+      let appearanceClasses = {
+        primary:
+          '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 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 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-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 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'
+          : '',
+        appearanceClasses[this.appearance],
+      ]
+    },
+    isDisabled() {
+      return this.disabled || this.loading
+    },
+    ariaLabel() {
+      return this.icon ? this.label : null
+    },
+  },
+  methods: {
+    handleClick() {
+      if (this.route && this.$router) {
+        this.route && this.$router.push(this.route)
+      }
+      this.link ? window.open(this.link, '_blank') : null
+    },
+  },
+}
+</script>

package/src/components/Card.vue

@@ -0,0 +1,37 @@
+<template>
+  <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']">
+          <slot name="actions-left"></slot>
+        </div>
+        <h2 class="text-xl font-semibold">{{ title }}</h2>
+      </div>
+      <div class="flex items-center space-x-2" v-if="$slots['actions']">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+    <p class="mt-1.5 text-base text-gray-600" v-if="subtitle">
+      {{ subtitle }}
+    </p>
+    <div
+      v-if="loading"
+      class="mt-4 flex flex-auto flex-col items-center justify-center rounded-md"
+    >
+      <LoadingText />
+    </div>
+    <div class="mt-4 flex-auto overflow-auto" v-else-if="$slots['default']">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import LoadingText from './LoadingText.vue'
+export default {
+  name: 'Card',
+  props: ['title', 'subtitle', 'loading'],
+  components: {
+    LoadingText,
+  },
+}
+</script>