pimelon-ui 0.1.74 → 0.1.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.74",
+  "version": "0.1.75",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/Autocomplete.vue

@@ -174,7 +174,7 @@ import {
 } from '@headlessui/vue'
 import { nextTick } from 'vue'
 import Popover from './Popover.vue'
-import Button from './Button.vue'
+import { Button } from './Button'
 import FeatherIcon from './FeatherIcon.vue'
 
 export default {

package/src/components/Billing/TrialBanner.vue

@@ -22,7 +22,7 @@
 <script setup>
 import LightningIcon from './LightningIcon.vue'
 import FeatherIcon from '../FeatherIcon.vue'
-import Button from '../Button.vue'
+import { Button } from '../Button'
 import { createResource } from '../../resources'
 import { ref, computed } from 'vue'
 

package/src/components/Breadcrumbs.vue

@@ -63,7 +63,7 @@ import { useWindowSize } from '@vueuse/core'
 import { computed } from 'vue'
 import { RouterLinkProps, useRouter } from 'vue-router'
 import Dropdown from '../components/Dropdown.vue'
-import Button from '../components/Button.vue'
+import { Button } from './Button'
 
 interface BreadcrumbItem {
   label: string
@@ -90,7 +90,13 @@ const dropdownItems = computed(() => {
 
   let allExceptLastTwo = items.value.slice(0, -2)
   return allExceptLastTwo.map((item) => {
-    let onClick = item.onClick ? item.onClick : () => router.push(item.route)
+    let onClick = () => {
+      if (item.route) {
+        router.push(item.route)
+      } else if (item.onClick) {
+        item.onClick()
+      }
+    }
     return {
       ...item,
       icon: null,

package/src/components/{Button.story.vue → Button/Button.story.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import Button from './Button.vue'
+import { Button } from './index'
 const state = reactive({
   theme: 'gray',
   size: 'sm',

package/src/components/{Button.vue → Button/Button.vue}

@@ -17,21 +17,23 @@
     />
     <slot name="prefix" v-else-if="$slots['prefix'] || iconLeft">
       <FeatherIcon
-        v-if="iconLeft"
+        v-if="iconLeft && typeof iconLeft === 'string'"
         :name="iconLeft"
         :class="slotClasses"
         aria-hidden="true"
       />
+      <component v-else-if="iconLeft" :is="iconLeft" :class="slotClasses" />
     </slot>
 
     <template v-if="loading && loadingText">{{ loadingText }}</template>
     <template v-else-if="isIconButton && !loading">
       <FeatherIcon
-        v-if="icon"
+        v-if="icon && typeof icon === 'string'"
         :name="icon"
         :class="slotClasses"
         :aria-label="label"
       />
+      <component v-else-if="icon" :is="icon" :class="slotClasses" />
       <slot name="icon" v-else-if="$slots.icon" />
     </template>
     <span v-else :class="{ 'sr-only': isIconButton }">
@@ -40,21 +42,39 @@
 
     <slot name="suffix">
       <FeatherIcon
-        v-if="iconRight"
+        v-if="iconRight && typeof iconRight === 'string'"
         :name="iconRight"
         :class="slotClasses"
         aria-hidden="true"
       />
+      <component v-else-if="iconRight" :is="iconRight" :class="slotClasses" />
     </slot>
   </button>
 </template>
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue'
-import FeatherIcon from './FeatherIcon.vue'
-import LoadingIndicator from './LoadingIndicator.vue'
-import { useRouter } from 'vue-router'
-
-import type { ButtonProps } from './types/Button'
+import { computed, useSlots, type Component } from 'vue'
+import FeatherIcon from '../FeatherIcon.vue'
+import LoadingIndicator from '../LoadingIndicator.vue'
+import { useRouter, type RouteLocation } from 'vue-router'
+
+type Theme = 'gray' | 'blue' | 'green' | 'red'
+type Size = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+type Variant = 'solid' | 'subtle' | 'outline' | 'ghost'
+
+export interface ButtonProps {
+  theme?: Theme
+  size?: Size
+  variant?: Variant
+  label?: string
+  icon?: string | Component
+  iconLeft?: string | Component
+  iconRight?: string | Component
+  loading?: boolean
+  loadingText?: string
+  disabled?: boolean
+  route?: RouteLocation
+  link?: string
+}
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   theme: 'gray',
@@ -112,10 +132,12 @@ const buttonClasses = computed(() => {
     ghost: ghostClasses,
   }[props.variant]
 
-  let themeVariant = `${props.theme}-${props.variant}`
+  type ThemeVariant = `${Theme}-${Variant}`
+  let themeVariant: ThemeVariant = `${props.theme}-${props.variant}`
 
-  let disabledClassesMap = {
-    gray: 'bg-gray-100 text-gray-500',
+  let disabledClassesMap: Record<ThemeVariant, string> = {
+    'gray-solid': 'bg-gray-100 text-gray-500',
+    'gray-subtle': 'bg-gray-100 text-gray-500',
     'gray-outline': 'bg-gray-100 text-gray-500 border border-gray-300',
     'gray-ghost': 'text-gray-500',
 
@@ -124,16 +146,17 @@ const buttonClasses = computed(() => {
     'blue-outline': 'bg-blue-100 text-blue-400 border border-blue-300',
     'blue-ghost': 'text-blue-400',
 
-    green: 'bg-green-100 text-green-500',
+    'green-solid': 'bg-green-100 text-green-500',
+    'green-subtle': 'bg-green-100 text-green-500',
     'green-outline': 'bg-green-100 text-green-500 border border-green-400',
     'green-ghost': 'text-green-500',
 
-    red: 'bg-red-100 text-red-400',
+    'red-solid': 'bg-red-100 text-red-400',
+    'red-subtle': 'bg-red-100 text-red-400',
     'red-outline': 'bg-red-100 text-red-400 border border-red-300',
     'red-ghost': 'text-red-400',
   }
-  let disabledClasses =
-    disabledClassesMap[themeVariant] || disabledClassesMap[props.theme]
+  let disabledClasses = disabledClassesMap[themeVariant]
 
   let sizeClasses = {
     sm: 'h-7 text-base px-2 rounded',

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default as Button, type ButtonProps } from './Button.vue'

package/src/components/Calendar/Calendar.vue

@@ -75,7 +75,7 @@
 </template>
 <script setup>
 import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
-import Button from '../Button.vue'
+import { Button } from '../Button'
 import TabButtons from '../TabButtons.vue'
 import {
   getCalendarDates,

package/src/components/Calendar/CalendarWeekly.vue

@@ -124,7 +124,7 @@ import {
   parseDate,
 } from './calendarUtils'
 
-import Button from '../Button.vue'
+import { Button } from '../Button'
 import ShowMoreCalendarEvent from './ShowMoreCalendarEvent.vue'
 import useCalendarData from './composables/useCalendarData'
 

package/src/components/Calendar/NewEventModal.vue

@@ -100,7 +100,7 @@ import { computed, inject, reactive, ref } from 'vue'
 import Dialog from '../Dialog.vue'
 import FormControl from '../FormControl.vue'
 import ErrorMessage from '../ErrorMessage.vue'
-import Button from '../Button.vue'
+import { Button } from '../Button'
 
 import { calculateDiff, colorMap, handleSeconds } from './calendarUtils'
 const show = ref(false)

package/src/components/ConfirmDialog.vue

@@ -11,8 +11,8 @@
   </Dialog>
 </template>
 <script>
+import { Button } from './Button'
 import Dialog from './Dialog.vue'
-import Button from './Button.vue'
 
 export default {
   name: 'ConfirmDialog',

package/src/components/DatePicker.vue

@@ -125,7 +125,7 @@
 import { computed, onMounted } from 'vue'
 
 import Input from './Input.vue'
-import Button from './Button.vue'
+import { Button } from './Button'
 import Popover from './Popover.vue'
 import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'

package/src/components/DateRangePicker.vue

@@ -121,7 +121,7 @@
 import { computed, ref, onMounted } from 'vue'
 
 import Input from './Input.vue'
-import Button from './Button.vue'
+import { Button } from './Button'
 import Popover from './Popover.vue'
 import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'

package/src/components/DateTimePicker.vue

@@ -188,7 +188,7 @@
 import { ref, computed, onMounted } from 'vue'
 
 import Input from './Input.vue'
-import Button from './Button.vue'
+import { Button } from './Button'
 import Popover from './Popover.vue'
 import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'

package/src/components/Dialog.story.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Dialog from './Dialog.vue'
-import Button from './Button.vue'
+import { Button } from './Button'
 
 const dialog1 = ref(false)
 const dialog2 = ref(false)

package/src/components/Dialog.vue

@@ -148,9 +148,8 @@ import {
   TransitionRoot,
 } from '@headlessui/vue'
 import { computed, ref, watch } from 'vue'
-import Button from './Button.vue'
+import { Button, ButtonProps } from './Button'
 import FeatherIcon from './FeatherIcon.vue'
-import { ButtonProps } from './types/Button'
 
 type DialogIcon = {
   name: string

package/src/components/Dropdown.story.vue

@@ -2,7 +2,7 @@
 import { h } from 'vue'
 import Dropdown from './Dropdown.vue'
 import FeatherIcon from './FeatherIcon.vue'
-import Button from './Button.vue'
+import { Button } from './Button'
 </script>
 
 <template>

package/src/components/Dropdown.vue

@@ -74,33 +74,34 @@
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
 import Popover from './Popover.vue'
-import Button from './Button.vue'
+import { Button, ButtonProps } from './Button'
 import FeatherIcon from './FeatherIcon.vue'
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { RouterLinkProps, useRouter } from 'vue-router'
 
 const router = useRouter()
 
 type DropdownOption = {
   label: string
-  icon?: string
-  group?: string
+  icon?: string | null
   component?: any
   onClick?: () => void
-  route?: string
+  route?: RouterLinkProps['to']
   condition?: () => boolean
 }
 
-type DropdownOptions = string | DropdownOption
-
-type ButtonProps = {
-  label: string
-  icon?: string
+type DropdownGroupOption = {
+  key?: number
+  group: string
+  items: DropdownOption[]
+  hideLabel?: boolean
 }
 
+type DropdownOptions = Array<DropdownOption | DropdownGroupOption>
+
 interface DropdownProps {
   button?: ButtonProps
-  options?: DropdownOptions[]
+  options?: DropdownOptions
   placement?: string
 }
 
@@ -110,42 +111,55 @@ const props = withDefaults(defineProps<DropdownProps>(), {
 })
 
 const normalizeDropdownItem = (option: DropdownOption) => {
-  let onClick = option.onClick || null
-  if (!onClick && option.route && router) {
-    onClick = () => router.push(option.route!)
+  let onClick = () => {
+    if (option.route) {
+      router.push(option.route)
+    } else if (option.onClick) {
+      option.onClick()
+    }
   }
 
   return {
     label: option.label,
     icon: option.icon,
-    group: option.group,
     component: option.component,
     onClick,
   }
 }
 
-const filterOptions = (options: DropdownOptions) => {
+const filterOptions = (options: DropdownOption[]) => {
   return (options || [])
     .filter(Boolean)
-    .filter((option: DropdownOption) =>
-      option.condition ? option.condition() : true,
-    )
-    .map((option: DropdownOption) => normalizeDropdownItem(option))
+    .filter((option) => (option.condition ? option.condition() : true))
+    .map((option) => normalizeDropdownItem(option))
 }
 
 const groups = computed(() => {
-  let groups = props.options[0]?.group
-    ? props.options
-    : [{ group: '', items: props.options }]
-
-  return groups.map((group, i) => {
-    return {
-      key: i,
-      group: group.group,
-      hideLabel: group.hideLabel || false,
-      items: filterOptions(group.items),
+  let groups: DropdownGroupOption[] = []
+  let i = 0
+  for (let option of props.options) {
+    if (option == null) {
+      continue
+    }
+    if ('group' in option) {
+      let groupOption = {
+        key: i,
+        ...option,
+        items: filterOptions(option.items),
+      } as DropdownGroupOption
+      groups.push(groupOption)
+    } else {
+      let groupOption = {
+        key: i,
+        group: '',
+        hideLabel: true,
+        items: filterOptions([option]),
+      } as DropdownGroupOption
+      groups.push(groupOption)
     }
-  })
+    i++
+  }
+  return groups
 })
 
 const dropdownTransition = computed(() => {

package/src/components/FileUploader.story.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import FileUploader from './FileUploader.vue'
-import Button from './Button.vue'
+import { Button } from './Button'
 
 const validateFileFunction = (fileObject) => {}
 const onSuccess = (file) => {}

package/src/components/ListView/ListEmptyState.vue

@@ -18,7 +18,7 @@
 
 <script setup>
 import { inject } from 'vue'
-import Button from '../Button.vue'
+import { Button } from '../Button'
 
 const list = inject('list')
 </script>

package/src/components/ListView/ListSelectBanner.vue

@@ -70,7 +70,7 @@
 
 <script setup>
 import Checkbox from '../Checkbox.vue'
-import Button from '../Button.vue'
+import { Button } from '../Button'
 import { computed, inject } from 'vue'
 
 defineOptions({

package/src/components/ListView.story.vue

@@ -2,7 +2,7 @@
 import { reactive, h, ref } from 'vue'
 import Avatar from './Avatar.vue'
 import Badge from './Badge.vue'
-import Button from './Button.vue'
+import { Button } from './Button'
 import FeatherIcon from './FeatherIcon.vue'
 import ListHeader from './ListView/ListHeader.vue'
 import ListHeaderItem from './ListView/ListHeaderItem.vue'

package/src/components/LoadingIndicator.vue

@@ -20,8 +20,4 @@
     ></path>
   </svg>
 </template>
-<script>
-export default {
-  name: 'LoadingIndicator',
-}
-</script>
+<script setup lang="ts"></script>

package/src/components/Popover.story.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Popover from './Popover.vue'
-import Button from './Button.vue'
+import { Button } from './Button'
 </script>
 <template>
   <Story :layout="{ type: 'grid' }">

package/src/components/TextEditor/InsertImage.vue

@@ -36,7 +36,7 @@
 <script>
 import fileToBase64 from '../../utils/file-to-base64'
 import Dialog from '../Dialog.vue'
-import Button from '../Button.vue'
+import { Button } from '../Button'
 
 export default {
   name: 'InsertImage',

package/src/components/TextEditor/InsertLink.vue

@@ -26,7 +26,7 @@
 </template>
 <script>
 import Dialog from '../Dialog.vue'
-import Button from '../Button.vue'
+import { Button } from '../Button'
 import FormControl from '../FormControl.vue'
 
 export default {

package/src/components/TextEditor/InsertVideo.vue

@@ -54,7 +54,7 @@
   </Dialog>
 </template>
 <script>
-import Button from '../Button.vue'
+import { Button } from '../Button'
 import Dialog from '../Dialog.vue'
 import FileUploader from '../FileUploader.vue'
 

package/src/components/Tooltip/Tooltip.story.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Tooltip from './Tooltip.vue'
-import Button from '../Button.vue'
+import { Button } from '../Button'
 
 const placement = ref('top')
 const disabled = ref(true)

package/src/index.js

@@ -4,7 +4,7 @@ export { default as Autocomplete } from './components/Autocomplete.vue'
 export { default as Avatar } from './components/Avatar.vue'
 export { default as Badge } from './components/Badge.vue'
 export { default as Breadcrumbs } from './components/Breadcrumbs.vue'
-export { default as Button } from './components/Button.vue'
+export * from './components/Button'
 export { default as Card } from './components/Card.vue'
 export { default as Checkbox } from './components/Checkbox.vue'
 export { default as DatePicker } from './components/DatePicker.vue'

package/src/components/types/Button.ts

@@ -1,14 +0,0 @@
-export interface ButtonProps {
-  theme?: 'gray' | 'blue' | 'green' | 'red'
-  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  variant?: 'solid' | 'subtle' | 'outline' | 'ghost'
-  label?: string
-  icon?: string
-  iconLeft?: string
-  iconRight?: string
-  loading?: boolean
-  loadingText?: string
-  disabled?: boolean
-  route?: string | object
-  link?: string
-}