pimelon-ui 0.0.19

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "pimelon-ui",
+  "version": "0.0.19",
+  "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"
+  },
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/amonak/pimelon-ui.git"
+  },
+  "author": "Alphamonak Solutions",
+  "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",
+    "autoprefixer": "^10.4.2",
+    "feather-icons": "^4.28.0",
+    "postcss": "^8.4.5",
+    "socket.io-client": "^2.4.0",
+    "tailwindcss": "^3.0.12"
+  }
+}

package/src/components/Alert.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="block w-full">
+    <div
+      class="items-start px-4 md:px-5 py-3.5 text-base rounded-md flex"
+      :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="w-full ml-2">
+        <div class="flex flex-col md:items-baseline md:flex-row">
+          <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/Avatar.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="overflow-hidden" :class="styleClasses">
+    <img
+      v-if="imageURL"
+      :src="imageURL"
+      class="object-cover"
+      :class="styleClasses"
+    />
+    <div
+      v-else
+      class="flex items-center justify-center w-full h-full text-gray-600 uppercase bg-gray-200"
+      :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,40 @@
+<template>
+  <span
+    class="inline-block px-3 py-1 text-xs font-medium rounded-md cursor-default"
+    :class="classes"
+  >
+    <slot>{{ status }}</slot>
+  </span>
+</template>
+<script>
+export default {
+  name: 'Badge',
+  props: ['color', 'status'],
+  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 {
+        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']
+    },
+  },
+}
+</script>

package/src/components/Button.vue

@@ -0,0 +1,134 @@
+<template>
+  <button
+    v-bind="$attrs"
+    :class="buttonClasses"
+    @click="handleClick"
+    :disabled="isDisabled"
+  >
+    <LoadingIndicator
+      v-if="loading"
+      :class="{
+        'text-white': appearance == 'primary',
+        'text-gray-600': appearance == 'secondary',
+        'text-red-200': appearance == 'danger',
+      }"
+    />
+    <FeatherIcon
+      v-else-if="iconLeft"
+      :name="iconLeft"
+      class="w-4 h-4 mr-1.5"
+      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" />
+    </template>
+    <span :class="icon ? 'sr-only' : ''">
+      <slot>
+        {{ label }}
+      </slot>
+    </span>
+    <FeatherIcon
+      v-if="iconRight"
+      :name="iconRight"
+      class="w-4 h-4 ml-2"
+      aria-hidden="true"
+    />
+  </button>
+</template>
+<script>
+import FeatherIcon from './FeatherIcon.vue'
+import LoadingIndicator from './LoadingIndicator.vue'
+
+const ValidAppearances = ['primary', 'secondary', 'danger', '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 text-white focus:ring-2 focus:ring-offset-2 focus: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',
+        danger:
+          'bg-red-500 hover:bg-red-400 text-white focus:ring-2 focus:ring-offset-2 focus:ring-red-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 ${
+          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',
+        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
+    },
+  },
+  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 px-6 py-5 bg-white border rounded-lg 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="text-base text-gray-600 mt-1.5" v-if="subtitle">
+      {{ subtitle }}
+    </p>
+    <div
+      v-if="loading"
+      class="flex flex-col items-center justify-center flex-auto mt-4 rounded-md"
+    >
+      <LoadingText />
+    </div>
+    <div class="flex-auto mt-4 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>

package/src/components/Dialog.vue

@@ -0,0 +1,195 @@
+<template>
+  <TransitionRoot as="template" :show="open">
+    <HDialog
+      as="div"
+      class="fixed inset-0 z-10 overflow-y-auto"
+      @close="open = false"
+    >
+      <div
+        class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+      >
+        <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 transition-opacity bg-gray-500 bg-opacity-75"
+          />
+        </TransitionChild>
+
+        <!-- This element is to trick the browser into centering the modal contents. -->
+        <span
+          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+        <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="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+          >
+            <slot name="body">
+              <slot name="body-main">
+                <div class="px-4 py-5 bg-white sm:p-6">
+                  <div class="flex flex-col sm:flex-row">
+                    <div
+                      v-if="icon"
+                      class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto mb-3 rounded-full sm:mx-0 sm:h-9 sm:w-9 sm:mb-0 sm:mr-4"
+                      :class="{
+                        '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="w-6 h-6 text-red-600 sm:w-5 sm:h-5"
+                        :class="{
+                          '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 text-center sm:text-left">
+                      <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-sm text-gray-600" v-if="options.message">
+                          {{ options.message }}
+                        </p>
+                      </slot>
+                    </div>
+                  </div>
+                </div>
+              </slot>
+              <div
+                class="px-4 py-3 space-y-2 sm:space-x-reverse sm:space-x-3 sm:space-y-0 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse"
+                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, FeatherIcon } from 'pimelon-ui'
+
+export default {
+  name: 'Dialog',
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    options: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  emits: ['update:modelValue', 'close'],
+  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,
+          type: 'info',
+        }
+      }
+      return icon
+    },
+  },
+}
+</script>

package/src/components/Dropdown.vue

@@ -0,0 +1,113 @@
+<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>
+
+    <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="absolute z-10 mt-2 bg-white divide-y divide-gray-100 rounded-md shadow-lg min-w-40 ring-1 ring-black ring-opacity-5 focus:outline-none"
+        :class="
+          placement === 'left'
+            ? 'left-0 origin-top-left'
+            : 'right-0 origin-top-right'
+        "
+      >
+        <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 tracking-wider text-gray-500 uppercase"
+          >
+            {{ 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 rounded-md items-center w-full px-2 py-2 text-sm',
+              ]"
+              @click="item.onClick"
+            >
+              <FeatherIcon
+                v-if="item.icon"
+                :name="item.icon"
+                class="flex-shrink-0 w-4 h-4 mr-2 text-gray-500"
+                aria-hidden="true"
+              />
+              <span class="whitespace-nowrap">
+                {{ item.label }}
+              </span>
+            </button>
+          </MenuItem>
+        </div>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>
+
+<script>
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+import { FeatherIcon } from 'pimelon-ui'
+
+export default {
+  name: 'NewDropdown',
+  props: ['button', 'options', 'placement'],
+  components: {
+    Menu,
+    MenuButton,
+    MenuItems,
+    MenuItem,
+    FeatherIcon,
+  },
+  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,
+        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),
+        }
+      })
+    },
+  },
+}
+</script>

package/src/components/ErrorMessage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div
+    v-if="message"
+    class="text-sm text-red-600 whitespace-pre-line"
+    role="alert"
+    v-html="message"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorMessage',
+  props: ['message'],
+}
+</script>