pimelon-ui 0.1.171 → 0.1.192

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.171",
+  "version": "0.1.192",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
@@ -35,27 +35,29 @@
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.16",
-    "@tiptap/core": "^2.11.7",
-    "@tiptap/extension-code-block": "^2.11.9",
-    "@tiptap/extension-code-block-lowlight": "^2.11.5",
-    "@tiptap/extension-color": "^2.0.3",
-    "@tiptap/extension-heading": "^2.12.0",
-    "@tiptap/extension-highlight": "^2.0.3",
-    "@tiptap/extension-image": "^2.0.3",
-    "@tiptap/extension-link": "^2.0.3",
-    "@tiptap/extension-mention": "^2.0.3",
-    "@tiptap/extension-placeholder": "^2.0.3",
-    "@tiptap/extension-table": "^2.0.3",
-    "@tiptap/extension-table-cell": "^2.0.3",
-    "@tiptap/extension-table-header": "^2.0.3",
-    "@tiptap/extension-table-row": "^2.0.3",
-    "@tiptap/extension-text-align": "^2.0.3",
-    "@tiptap/extension-text-style": "^2.0.3",
-    "@tiptap/extension-typography": "^2.0.3",
-    "@tiptap/pm": "^2.0.3",
-    "@tiptap/starter-kit": "^2.0.3",
-    "@tiptap/suggestion": "^2.0.3",
-    "@tiptap/vue-3": "^2.0.3",
+    "@tiptap/core": "^2.26.1",
+    "@tiptap/extension-code-block": "^2.26.1",
+    "@tiptap/extension-code-block-lowlight": "^2.26.1",
+    "@tiptap/extension-color": "^2.26.1",
+    "@tiptap/extension-heading": "^2.26.1",
+    "@tiptap/extension-highlight": "^2.26.1",
+    "@tiptap/extension-image": "^2.26.1",
+    "@tiptap/extension-link": "^2.26.1",
+    "@tiptap/extension-mention": "^2.26.1",
+    "@tiptap/extension-placeholder": "^2.26.1",
+    "@tiptap/extension-table": "^2.26.1",
+    "@tiptap/extension-table-cell": "^2.26.1",
+    "@tiptap/extension-table-header": "^2.26.1",
+    "@tiptap/extension-table-row": "^2.26.1",
+    "@tiptap/extension-task-item": "^2.26.1",
+    "@tiptap/extension-task-list": "^2.26.1",
+    "@tiptap/extension-text-align": "^2.26.1",
+    "@tiptap/extension-text-style": "^2.26.1",
+    "@tiptap/extension-typography": "^2.26.1",
+    "@tiptap/pm": "^2.26.1",
+    "@tiptap/starter-kit": "^2.26.1",
+    "@tiptap/suggestion": "^2.26.1",
+    "@tiptap/vue-3": "^2.26.1",
     "@vueuse/core": "^10.4.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.6",
@@ -66,18 +68,16 @@
     "husky": "^9.1.7",
     "idb-keyval": "^6.2.0",
     "lowlight": "^3.3.0",
-    "lucide-static": "^0.479.0",
+    "lucide-static": "^0.535.0",
     "marked": "^15.0.12",
     "ora": "5.4.1",
     "prettier": "^3.3.2",
-    "prosemirror-model": "^1.25.1",
-    "prosemirror-state": "^1.4.3",
-    "prosemirror-view": "^1.39.2",
     "radix-vue": "^1.5.3",
     "reka-ui": "^2.0.2",
     "socket.io-client": "^4.5.1",
     "tippy.js": "^6.3.7",
     "typescript": "^5.0.2",
+    "unplugin-auto-import": "^19.3.0",
     "unplugin-icons": "^22.1.0",
     "unplugin-vue-components": "^28.4.1"
   },
@@ -100,6 +100,12 @@
     "vue": "^3.3.0",
     "vue-router": "^4.1.6"
   },
+  "resolutions": {
+    "prosemirror-model": "1.25.2",
+    "prosemirror-state": "1.4.3",
+    "prosemirror-view": "1.40.0",
+    "prosemirror-transform": "1.10.4"
+  },
   "lint-staged": {
     "*.{js,css,md,vue}": "prettier --write"
   }

package/src/components/Button/Button.story.vue

@@ -9,6 +9,7 @@ const state = reactive({
   loadingText: null,
   disabled: false,
   link: null,
+  tooltip: 'Hover for more!',
 })
 const variants = ['solid', 'subtle', 'outline', 'ghost']
 const themes = ['gray', 'blue', 'green', 'red']

package/src/components/Button/Button.vue

@@ -1,62 +1,75 @@
 <template>
-  <button
-    v-bind="$attrs"
-    :class="buttonClasses"
-    @click="handleClick"
-    :disabled="isDisabled"
-    :ariaLabel="ariaLabel"
-  >
-    <LoadingIndicator
-      v-if="loading"
-      :class="{
-        'h-3 w-3': size == 'sm',
-        'h-[13.5px] w-[13.5px]': size == 'md',
-        'h-[15px] w-[15px]': size == 'lg',
-        'h-4.5 w-4.5': size == 'xl' || size == '2xl',
-      }"
-    />
-    <slot name="prefix" v-else-if="$slots['prefix'] || iconLeft">
-      <FeatherIcon
-        v-if="iconLeft && typeof iconLeft === 'string'"
-        :name="iconLeft"
-        :class="slotClasses"
-        aria-hidden="true"
+  <Tooltip :text="tooltip" :disabled="!tooltip?.length">
+    <button
+      v-bind="$attrs"
+      :class="buttonClasses"
+      @click="handleClick"
+      :disabled="isDisabled"
+      :ariaLabel="ariaLabel"
+      ref="rootRef"
+    >
+      <LoadingIndicator
+        v-if="loading"
+        :class="{
+          'h-3 w-3': size == 'sm',
+          'h-[13.5px] w-[13.5px]': size == 'md',
+          'h-[15px] w-[15px]': size == 'lg',
+          'h-4.5 w-4.5': size == 'xl' || size == '2xl',
+        }"
       />
-      <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 && 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 }" class="truncate">
-      <slot>{{ label }}</slot>
-    </span>
-
-    <slot name="suffix">
-      <FeatherIcon
-        v-if="iconRight && typeof iconRight === 'string'"
-        :name="iconRight"
-        :class="slotClasses"
-        aria-hidden="true"
-      />
-      <component v-else-if="iconRight" :is="iconRight" :class="slotClasses" />
-    </slot>
-  </button>
+      <slot name="prefix" v-else-if="$slots['prefix'] || iconLeft">
+        <FeatherIcon
+          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 && 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" />
+        <div v-else-if="hasLucideIconInDefaultSlot" :class="slotClasses">
+          <slot>{{ label }}</slot>
+        </div>
+      </template>
+      <span v-else :class="{ 'sr-only': isIconButton }" class="truncate">
+        <slot>{{ label }}</slot>
+      </span>
+
+      <slot name="suffix">
+        <FeatherIcon
+          v-if="iconRight && typeof iconRight === 'string'"
+          :name="iconRight"
+          :class="slotClasses"
+          aria-hidden="true"
+        />
+          <component
+            v-else-if="iconRight"
+            :is="iconRight"
+            :class="slotClasses"
+          />
+      </slot>
+    </button>
+  </Tooltip>
 </template>
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue'
+import { computed, useSlots, ref } from 'vue'
 import FeatherIcon from '../FeatherIcon.vue'
 import LoadingIndicator from '../LoadingIndicator.vue'
 import { useRouter } from 'vue-router'
 import type { ButtonProps, ThemeVariant } from './types'
+import Tooltip from '../Tooltip/Tooltip.vue'
+
+defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   theme: 'gray',
@@ -164,7 +177,7 @@ const buttonClasses = computed(() => {
   }
 
   return [
-    'inline-flex items-center justify-center gap-2 transition-colors focus:outline-none',
+    'inline-flex items-center justify-center gap-2 transition-colors focus:outline-none shrink-0',
     isDisabled.value ? disabledClasses : variantClasses,
     focusClasses,
     sizeClasses,
@@ -192,7 +205,24 @@ const ariaLabel = computed(() => {
 })
 
 const isIconButton = computed(() => {
-  return props.icon || slots.icon
+  return props.icon || slots.icon || hasLucideIconInDefaultSlot.value
+})
+
+const hasLucideIconInDefaultSlot = computed(() => {
+  if (!slots.default) return false
+
+  const slotContent = slots.default()
+  if (!Array.isArray(slotContent)) return false
+  // if the slot contains only one element and it's a lucide icon
+  // render it as an icon button
+  let firstVNode = slotContent[0]
+  if (
+    typeof firstVNode.type?.name == 'string' &&
+    firstVNode.type?.name?.startsWith('lucide-')
+  ) {
+    return true
+  }
+  return false
 })
 
 const handleClick = () => {
@@ -202,4 +232,7 @@ const handleClick = () => {
     return window.open(props.link, '_blank')
   }
 }
+
+const rootRef = ref()
+defineExpose({ rootRef })
 </script>

package/src/components/Button/types.ts

@@ -1,4 +1,4 @@
-import { type RouteLocation } from 'vue-router'
+import { type RouterLinkProps } from 'vue-router'
 import { type Component } from 'vue'
 
 type Theme = 'gray' | 'blue' | 'green' | 'red'
@@ -13,10 +13,11 @@ export interface ButtonProps {
   icon?: string | Component
   iconLeft?: string | Component
   iconRight?: string | Component
+  tooltip?: string
   loading?: boolean
   loadingText?: string
   disabled?: boolean
-  route?: RouteLocation
+  route?: RouterLinkProps['to']
   link?: string
 }
 

package/src/components/Calendar/Calendar.vue

@@ -89,9 +89,9 @@ import { TabButtons } from '../TabButtons'
 import {
   getCalendarDates,
   monthList,
-  handleSeconds,
   parseDate,
 } from './calendarUtils'
+import { dayjs } from "../../utils/dayjs"
 import CalendarMonthly from './CalendarMonthly.vue'
 import CalendarWeekly from './CalendarWeekly.vue'
 import CalendarDaily from './CalendarDaily.vue'
@@ -178,8 +178,8 @@ const parseEvents = computed(() => {
     props.events?.map((event) => {
       const { fromDate, toDate, ...rest } = event
       const date = parseDate(fromDate)
-      const from_time = new Date(fromDate).toLocaleTimeString()
-      const to_time = new Date(toDate).toLocaleTimeString()
+      const from_time = dayjs(fromDate).format("HH:mm:ss")
+      const to_time = dayjs(toDate).format("HH:mm:ss")
       if (event.isFullDay) {
         return { ...rest, date }
       }
@@ -193,14 +193,6 @@ function reloadEvents() {
   events.value = parseEvents.value
 }
 
-events.value.forEach((event) => {
-  if (!event.from_time || !event.to_time) {
-    return
-  }
-  event.from_time = handleSeconds(event.from_time)
-  event.to_time = handleSeconds(event.to_time)
-})
-
 const { showEventModal, newEvent, openNewEventModal } = useEventModal()
 
 provide('calendarActions', {

package/src/components/Charts/NumberChart.vue

@@ -3,46 +3,52 @@
     class="flex max-h-[140px] items-center gap-2 overflow-hidden bg-surface-white text-ink-gray-8 px-6 pt-5"
     :class="config.delta ? 'pb-6' : 'pb-3'"
   >
-    <div class="flex w-full flex-col">
-      <span class="truncate text-sm font-medium">
-        {{ config.title }}
-      </span>
-      <div
-        class="flex-1 flex-shrink-0 truncate text-[24px] font-semibold leading-10"
-      >
-        {{ config.prefix }}{{ formatValue(config.value, 1, true)
-        }}{{ config.suffix }}
+    <slot name="body">
+      <div class="flex w-full flex-col">
+        <slot name="title">
+          <span class="truncate text-sm font-medium text-ink-gray-5">
+            {{ config.title }}
+          </span>
+        </slot>
+        <slot name="subtitle" v-bind="{ formatValue }">
+          <div
+            class="flex-1 flex-shrink-0 truncate text-[24px] text-ink-gray-6 font-semibold leading-10"
+          >
+            {{ config.prefix }}{{ formatValue(config.value, 1, true)
+            }}{{ config.suffix }}
+          </div>
+        </slot>
+        <slot name="delta" v-bind="{ formatValue }">
+          <div
+            v-if="config.delta"
+            class="flex items-center gap-0.5 text-xs font-medium"
+            :class="[
+              config.negativeIsBetter
+                ? config.delta >= 0
+                  ? 'text-ink-red-4'
+                  : 'text-ink-green-3'
+                : config.delta >= 0
+                  ? 'text-ink-green-3'
+                  : 'text-ink-red-4',
+            ]"
+          >
+            <span class="">
+              {{ config.delta >= 0 ? '↑' : '↓' }}
+            </span>
+            <span>
+              {{ config.deltaPrefix }}{{ formatValue(config.delta, 1, true)
+              }}{{ config.deltaSuffix }}
+            </span>
+          </div>
+        </slot>
       </div>
-      <div
-        v-if="config.delta"
-        class="flex items-center gap-0.5 text-xs font-medium"
-        :class="[
-          config.negativeIsBetter
-            ? config.delta >= 0
-              ? 'text-red-500'
-              : 'text-green-500'
-            : config.delta >= 0
-              ? 'text-green-500'
-              : 'text-red-500',
-        ]"
-      >
-        <span class="">
-          {{ config.delta >= 0 ? '↑' : '↓' }}
-        </span>
-        <span>
-          {{ config.deltaPrefix }}{{ formatValue(config.delta, 1, true)
-          }}{{ config.deltaSuffix }}
-        </span>
-      </div>
-    </div>
+    </slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { formatValue } from './helpers'
 import { NumberChartConfig } from './types'
 
-const props = defineProps<{ config: NumberChartConfig }>()
-const error = ref('')
+defineProps<{ config: NumberChartConfig }>()
 </script>

package/src/components/Charts/donutChartOptions.ts

@@ -94,7 +94,7 @@ export default function useDonutChartOptions(config: DonutChartConfig) {
           },
           textStyle: {
             padding: [0, 0, 0, -5],
-            color: '#000',
+            color: 'var(--ink-gray-8)',
           },
           icon: 'circle',
           pageIcons: {
@@ -103,11 +103,11 @@ export default function useDonutChartOptions(config: DonutChartConfig) {
               'M 12 27 h -2 c -0.386 0 -0.738 -0.223 -0.904 -0.572 s -0.115 -0.762 0.13 -1.062 L 17.708 15 L 9.226 4.633 c -0.245 -0.299 -0.295 -0.712 -0.13 -1.062 S 9.614 3 10 3 h 2 c 0.3 0 0.584 0.135 0.774 0.367 l 9 11 c 0.301 0.369 0.301 0.898 0 1.267 l -9 11 C 12.584 26.865 12.3 27 12 27 Z',
             ],
           },
-          pageIconColor: '#64748B',
-          pageInactiveColor: '#C0CCDA',
+          pageIconColor: 'var(--ink-gray-6)',
+          pageInactiveColor: 'var(--ink-gray-4)',
           pageIconSize: 10,
           pageTextStyle: {
-            color: '#64748B',
+            color: 'var(--ink-gray-6)',
           },
           animationDurationUpdate: 300,
         }

package/src/components/Charts/eChartOptions.ts

@@ -110,7 +110,7 @@ export default function useEchartsOptions(config: AxisChartConfig) {
       },
       textStyle: {
         padding: [0, 0, 0, -5],
-        color: '#000',
+        color: 'var(--ink-gray-8)',
       },
       icon: 'circle',
       pageIcons: {
@@ -119,11 +119,11 @@ export default function useEchartsOptions(config: AxisChartConfig) {
           'M 12 27 h -2 c -0.386 0 -0.738 -0.223 -0.904 -0.572 s -0.115 -0.762 0.13 -1.062 L 17.708 15 L 9.226 4.633 c -0.245 -0.299 -0.295 -0.712 -0.13 -1.062 S 9.614 3 10 3 h 2 c 0.3 0 0.584 0.135 0.774 0.367 l 9 11 c 0.301 0.369 0.301 0.898 0 1.267 l -9 11 C 12.584 26.865 12.3 27 12 27 Z',
         ],
       },
-      pageIconColor: '#64748B',
-      pageInactiveColor: '#C0CCDA',
+      pageIconColor: 'var(--ink-gray-6)',
+      pageInactiveColor: 'var(--ink-gray-4)',
       pageIconSize: 10,
       pageTextStyle: {
-        color: '#64748B',
+        color: 'var(--ink-gray-6)',
       },
       animationDurationUpdate: 300,
     },
@@ -142,13 +142,13 @@ export function getTitleOptions(title: string, subtitle?: string) {
       fontSize: 14,
       fontWeight: 500,
       lineHeight: 24,
-      // color: titleColor
+      color: 'var(--ink-gray-8)',
     },
     subtextStyle: {
       fontSize: 13,
       fontWeight: 400,
       lineHeight: 20,
-      // color: subtitleColor,
+      color: 'var(--ink-gray-6)',
     },
   }
 }
@@ -169,14 +169,17 @@ function getXAxisOptions(config: AxisChartConfig) {
           align: 'right',
           verticalAlign: 'bottom',
           padding: [0, 0, 26, 0],
-          // color: '#000',
-          backgroundColor: '#fff',
-          borderColor: '#fff',
+          backgroundColor: 'var(--surface-white)',
+          borderColor: 'var(--surface-white)',
+          color: 'var(--ink-gray-8)',
           borderWidth: 4,
         },
         splitLine: {
           show: true,
           width: 1,
+          lineStyle: {
+            color: 'var(--ink-gray-3)',
+          },
         },
         axisLine: {
           show: false,
@@ -261,14 +264,17 @@ function getYAxisOptions(config: AxisChartConfig) {
           align: 'left',
           verticalAlign: 'top',
           padding: [0, 0, 0, -2],
-          // color: '#000',
-          backgroundColor: '#fff',
-          borderColor: '#fff',
+          backgroundColor: 'var(--surface-white)',
+          borderColor: 'var(--surface-white)',
+          color: 'var(--ink-gray-8)',
           borderWidth: 4,
         },
         splitLine: {
           show: true,
           width: 1,
+          lineStyle: {
+            color: 'var(--ink-gray-3)',
+          },
         },
         axisLine: {
           show: false,
@@ -308,13 +314,17 @@ function getYAxisOptions(config: AxisChartConfig) {
       align: 'right',
       verticalAlign: 'top',
       padding: [0, 5, 0, 0],
-      // color: '#000',
-      backgroundColor: '#fff',
+      backgroundColor: 'var(--surface-white)',
+      borderColor: 'var(--surface-white)',
+      color: 'var(--ink-gray-8)',
     },
     nameGap: 6,
     splitLine: {
       show: true,
       width: 1,
+      lineStyle: {
+        color: 'var(--ink-gray-3)',
+      },
     },
     axisLine: {
       show: false,

package/src/components/DatePicker/DatePicker.vue

@@ -9,7 +9,7 @@
         <label v-if="props.label" class="block text-xs text-ink-gray-5">
           {{ props.label }}
         </label>
-         <TextInput
+        <TextInput
           readonly
           type="text"
           :placeholder="placeholder"
@@ -57,7 +57,7 @@
           <TextInput
             class="text-sm"
             type="text"
-            :value="dateValue"
+            :value="dateValue && formatter ? formatter(dateValue) : dateValue"
             @change="selectDate(getDate($event.target.value))"
           />
           <Button