pimelon-ui 0.1.155 → 0.1.168

package/melon/Billing/TrialBanner.vue

@@ -61,8 +61,7 @@ createResource({
     trialEndDays.value = calculateTrialEndDays(data.trial_end_date)
     baseEndpoint.value = data.base_url
     siteName.value = data.site_name
-    showBanner.value =
-      data.setup_complete && data.plan.is_trial_plan && trialEndDays.value > 0
+    showBanner.value = data.plan.is_trial_plan && trialEndDays.value > 0
   },
 })
 

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.155",
+  "version": "0.1.168",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
   "scripts": {
-    "test": "vitest",
+    "test": "vitest --run",
+    "type-check": "tsc --noEmit",
     "prettier": "yarn prettier -w ./src",
-    "bump-and-release": "yarn vitest && git pull --rebase origin main && yarn version --patch && git push && git push --tags",
+    "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
+    "release-patch": "yarn version --patch && git push && git push --tags",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
@@ -56,6 +58,7 @@
     "@tiptap/vue-3": "^2.0.3",
     "@vueuse/core": "^10.4.1",
     "dayjs": "^1.11.13",
+    "dompurify": "^3.2.6",
     "echarts": "^5.6.0",
     "feather-icons": "^4.28.0",
     "highlight.js": "^11.11.1",
@@ -63,6 +66,7 @@
     "idb-keyval": "^6.2.0",
     "lowlight": "^3.3.0",
     "lucide-static": "^0.479.0",
+    "marked": "^15.0.12",
     "ora": "5.4.1",
     "prettier": "^3.3.2",
     "prosemirror-model": "^1.25.1",
@@ -70,7 +74,6 @@
     "prosemirror-view": "^1.39.2",
     "radix-vue": "^1.5.3",
     "reka-ui": "^2.0.2",
-    "showdown": "^2.1.0",
     "socket.io-client": "^4.5.1",
     "tippy.js": "^6.3.7",
     "typescript": "^5.0.2",

package/readme.md

@@ -1 +0,0 @@
-## Pimelon UI

package/src/components/Autocomplete/Autocomplete.vue

@@ -322,7 +322,7 @@ const makeOption = (option: AutocompleteOption) => {
 
 const getLabel = (option: AutocompleteOption) => {
   if (isOption(option)) {
-    return option?.label || option?.value || 'No label'
+    return option?.label || option?.value
   }
   return option
 }

package/src/components/Charts/ECharts.vue

@@ -52,7 +52,7 @@ watch(
   <div
     ref="chartDiv"
     v-show="!error"
-    class="h-full w-full min-w-[400px] min-h-[300px] px-4 py-2"
+    class="h-full w-full min-w-[300px] md:min-w-[400px] min-h-[300px] px-4 py-2"
   ></div>
   <div
     v-show="error"

package/src/components/Charts/axisChartOptions.ts

@@ -118,6 +118,7 @@ function getLineSeriesOptions(
 ) {
   const showSymbol = series.showDataPoints || series.showDataLabels
   return {
+    connectNulls: true,
     symbol: 'circle',
     symbolSize: 7,
     showSymbol: showSymbol,

package/src/components/Combobox/Combobox.story.vue

@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import Combobox from './Combobox.vue'
+
+const simpleValue = ref('')
+const objectValue = ref('')
+const iconValue = ref('')
+const groupedValue = ref('')
+const disabledValue = ref('')
+const preselectedValue = ref('john-doe')
+const multipleSimpleValue = ref([])
+const multipleObjectValue = ref([])
+const multipleGroupedValue = ref(['apple', 'carrot'])
+const complexObjectValue = ref(null)
+const selectedOption = ref(null)
+
+// Complex objects for displayValue demo
+const complexObjects = [
+  {
+    label: 'John Doe (Admin)',
+    value: 'john-doe',
+    email: 'john@example.com',
+    role: 'Admin',
+  },
+  {
+    label: 'Jane Smith (User)',
+    value: 'jane-smith',
+    email: 'jane@example.com',
+    role: 'User',
+  },
+  {
+    label: 'Bob Johnson (Manager)',
+    value: 'bob-johnson',
+    email: 'bob@example.com',
+    role: 'Manager',
+  },
+  {
+    label: 'Alice Brown (User)',
+    value: 'alice-brown',
+    email: 'alice@example.com',
+    role: 'User',
+  },
+]
+
+const simpleOptions = [
+  'John Doe',
+  'Jane Doe',
+  'John Smith',
+  'Jane Smith',
+  'John Wayne',
+  'Jane Wayne',
+  'Alice Johnson',
+  'Bob Wilson',
+  'Charlie Brown',
+  'Diana Prince',
+]
+
+const objectOptions = [
+  { label: 'John Doe', value: 'john-doe' },
+  { label: 'Jane Doe', value: 'jane-doe' },
+  { label: 'John Smith', value: 'john-smith' },
+  { label: 'Jane Smith', value: 'jane-smith', disabled: true },
+  { label: 'John Wayne', value: 'john-wayne' },
+  { label: 'Jane Wayne', value: 'jane-wayne' },
+  { label: 'Alice Johnson', value: 'alice-johnson' },
+  { label: 'Bob Wilson', value: 'bob-wilson' },
+]
+
+const optionsWithIcons = [
+  { label: 'Dashboard', value: 'dashboard', icon: '📊' },
+  { label: 'Projects', value: 'projects', icon: '📁' },
+  { label: 'Tasks', value: 'tasks', icon: '✅' },
+  { label: 'Calendar', value: 'calendar', icon: '📅' },
+  { label: 'Reports', value: 'reports', icon: '📈' },
+  { label: 'Settings', value: 'settings', icon: '⚙️' },
+]
+
+const groupedOptions = [
+  {
+    group: 'Fruits',
+    options: [
+      { label: 'Apple', value: 'apple', icon: '🍎' },
+      { label: 'Banana', value: 'banana', icon: '🍌' },
+      { label: 'Orange', value: 'orange', icon: '🍊' },
+      { label: 'Grape', value: 'grape', icon: '🍇' },
+    ],
+  },
+  {
+    group: 'Vegetables',
+    options: [
+      { label: 'Carrot', value: 'carrot', icon: '🥕' },
+      { label: 'Broccoli', value: 'broccoli', icon: '🥦' },
+      { label: 'Tomato', value: 'tomato', icon: '🍅' },
+      { label: 'Lettuce', value: 'lettuce', icon: '🥬' },
+    ],
+  },
+  {
+    group: 'Proteins',
+    options: [
+      { label: 'Chicken', value: 'chicken', icon: '🍗' },
+      { label: 'Fish', value: 'fish', icon: '🐟' },
+      { label: 'Beef', value: 'beef', icon: '🥩' },
+      { label: 'Tofu', value: 'tofu', icon: '🪤', disabled: true },
+    ],
+  },
+]
+
+const state = reactive({
+  disabled: false,
+  placeholder: 'Select an option...',
+  showCancel: true,
+})
+</script>
+
+<template>
+  <Story title="Combobox" :layout="{ type: 'grid', width: 400 }">
+    <Variant title="Simple String Options">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Simple Options</label>
+        <Combobox
+          :options="simpleOptions"
+          v-model="simpleValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :show-cancel="state.showCancel"
+          @update:selectedOption="selectedOption = $event"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ simpleValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Object Options">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Object Options</label>
+        <Combobox
+          :options="objectOptions"
+          v-model="objectValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :show-cancel="state.showCancel"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ objectValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Options with Icons">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Options with Icons</label>
+        <Combobox
+          :options="optionsWithIcons"
+          v-model="iconValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ iconValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Grouped Options">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Grouped Options</label>
+        <Combobox
+          :options="groupedOptions"
+          v-model="groupedValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ groupedValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled State">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Disabled Combobox</label>
+        <Combobox
+          :options="simpleOptions"
+          v-model="disabledValue"
+          placeholder="This is disabled"
+          :disabled="true"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Pre-selected Value">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Pre-selected Value</label>
+        <Combobox
+          :options="objectOptions"
+          v-model="preselectedValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ preselectedValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Selection - Simple">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2"
+          >Multiple Simple Options</label
+        >
+        <Combobox
+          :options="simpleOptions"
+          v-model="multipleSimpleValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :show-cancel="state.showCancel"
+          :multiple="true"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected:
+          {{
+            multipleSimpleValue.length > 0
+              ? multipleSimpleValue.join(', ')
+              : 'None'
+          }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Selection - Objects">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2"
+          >Multiple Object Options</label
+        >
+        <Combobox
+          :options="objectOptions"
+          v-model="multipleObjectValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :multiple="true"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected:
+          {{
+            multipleObjectValue.length > 0
+              ? multipleObjectValue.join(', ')
+              : 'None'
+          }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Selection - Grouped">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2"
+          >Multiple Grouped Options</label
+        >
+        <Combobox
+          :options="groupedOptions"
+          v-model="multipleGroupedValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :multiple="true"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected:
+          {{
+            multipleGroupedValue.length > 0
+              ? multipleGroupedValue.join(', ')
+              : 'None'
+          }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Complex Objects with Display Value">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Complex Objects</label>
+        <Combobox
+          :options="complexObjects"
+          v-model="complexObjectValue"
+          :display-value="(obj) => (obj ? `${obj.label} - ${obj.email}` : '')"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :show-cancel="state.showCancel"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ complexObjectValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <template #controls>
+      <HstText v-model="state.placeholder" title="Placeholder" />
+      <HstCheckbox v-model="state.disabled" title="Disabled" />
+      <HstCheckbox v-model="state.showCancel" title="Show Cancel Button" />
+    </template>
+  </Story>
+</template>

package/src/components/Combobox/Combobox.vue

@@ -44,7 +44,12 @@ interface ComboboxProps {
 }
 
 const props = defineProps<ComboboxProps>()
-const emit = defineEmits(['update:modelValue', 'update:selectedOption'])
+const emit = defineEmits([
+  'update:modelValue',
+  'update:selectedOption',
+  'focus',
+  'blur',
+])
 
 const searchTerm = ref(getDisplayValue(props.modelValue))
 const internalModelValue = ref(props.modelValue)
@@ -196,6 +201,14 @@ const handleOpenChange = (open: boolean) => {
     userHasTyped.value = false
   }
 }
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
 </script>
 
 <template>
@@ -215,6 +228,8 @@ const handleOpenChange = (open: boolean) => {
           <ComboboxInput
             :value="searchTerm"
             @input="handleInputChange"
+            @focus="handleFocus"
+            @blur="handleBlur"
             class="bg-transparent p-0 focus:outline-0 border-0 focus:border-0 focus:ring-0 text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full"
             :placeholder="placeholder || ''"
             :disabled="disabled"

package/src/components/DatePicker/DatePicker.vue

@@ -15,7 +15,9 @@
         :class="inputClass"
         v-bind="$attrs"
       >
-        <template v-if="!hideIcon" #prefix><LucideCalendar class="size-4" /></template>
+        <template #prefix v-if="$slots.prefix">
+          <slot name="prefix" />
+        </template>
       </TextInput>
     </template>
 
@@ -128,16 +130,15 @@
 import { computed, onMounted } from 'vue'
 
 import { Button } from '../Button'
-import { Popover } from '../Popover'
 import FeatherIcon from '../FeatherIcon.vue'
+import { Popover } from '../Popover'
 import { TextInput } from '../TextInput'
-import LucideCalendar from '~icons/lucide/calendar'
 
-import { getDate, getDateValue } from './utils'
-import { useDatePicker } from './useDatePicker'
 import { dayjsLocal } from '../../utils/dayjs'
+import { useDatePicker } from './useDatePicker'
+import { getDate, getDateValue } from './utils'
 
-import type { DatePickerProps, DatePickerEmits } from './types'
+import type { DatePickerEmits, DatePickerProps } from './types'
 
 const props = defineProps<DatePickerProps>()
 const emit = defineEmits<DatePickerEmits>()

package/src/components/DatePicker/DateRangePicker.vue

@@ -1,5 +1,6 @@
 <template>
   <Popover
+    ref="popoverRef"
     @open="selectCurrentMonthYear"
     class="flex w-full [&>div:first-child]:w-full"
     :placement="placement"
@@ -8,14 +9,17 @@
       <TextInput
         readonly
         type="text"
-        icon-left="calendar"
         :placeholder="placeholder"
         :value="dateValue && formatter ? formatDates(dateValue) : dateValue"
         @focus="!readonly ? togglePopover() : null"
         class="w-full"
         :class="inputClass"
         v-bind="$attrs"
-      />
+      >
+        <template #prefix v-if="$slots.prefix">
+          <slot name="prefix" />
+        </template>
+      </TextInput>
     </template>
 
     <template #body="{ togglePopover }">
@@ -120,15 +124,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
-import { Button } from '../Button'
 import { Popover } from '../Popover'
-import FeatherIcon from '../FeatherIcon.vue'
 import { TextInput } from '../TextInput'
 
-import { getDate, getDateValue } from './utils'
 import { useDatePicker } from './useDatePicker'
+import { getDate, getDateValue } from './utils'
 
 import type { DatePickerEmits, DatePickerProps } from './types'
 
@@ -161,8 +163,8 @@ const dateValue = computed(() => {
   return props.value ? props.value : props.modelValue
 })
 
-const fromDate = ref<string>(dateValue.value ? dateValue.value[0] : '')
-const toDate = ref<string>(dateValue.value ? dateValue.value[1] : '')
+const fromDate = ref<string>('')
+const toDate = ref<string>('')
 
 function handleDateClick(date: Date) {
   if (fromDate.value && toDate.value) {
@@ -215,13 +217,15 @@ function isInRange(date: Date) {
   return date >= getDate(fromDate.value) && date <= getDate(toDate.value)
 }
 
-function formatDates(value: string) {
-  if (!value) {
-    return ''
+function formatDates(value: string | string[]) {
+  if (!value) return ''
+
+  if (typeof value === 'string') {
+    value = value.split(',')
   }
-  const values = value.split(',')
+
   return props.formatter
-    ? props.formatter(values[0]) + ' to ' + props.formatter(values[1])
+    ? props.formatter(value[0]) + ' to ' + props.formatter(value[1])
     : value
 }
 
@@ -231,5 +235,22 @@ function clearDates() {
   selectDates()
 }
 
-onMounted(() => selectCurrentMonthYear())
+const popoverRef = ref<InstanceType<typeof Popover>>()
+
+onMounted(() => {
+  let dates: string | string[] | undefined =
+    typeof dateValue?.value === 'string'
+      ? dateValue.value.split(',')
+      : dateValue.value
+  fromDate.value = dates?.[0] || ''
+  toDate.value = dates?.[1] || ''
+
+  selectCurrentMonthYear()
+})
+
+defineExpose({
+  open: () => {
+    popoverRef.value?.open()
+  },
+})
 </script>

package/src/components/DatePicker/DateTimePicker.vue

@@ -8,7 +8,6 @@
       <TextInput
         readonly
         type="text"
-        icon-left="calendar"
         :placeholder="placeholder"
         :value="dateValue && formatter ? formatter(dateValue) : dateValue"
         @focus="!readonly ? togglePopover() : null"
@@ -16,7 +15,9 @@
         :class="inputClass"
         v-bind="$attrs"
       >
-        <template v-if="!hideIcon" #prefix><LucideCalendar class="size-4" /></template>
+        <template #prefix v-if="$slots.prefix">
+          <slot name="prefix" />
+        </template>
       </TextInput>
     </template>
 
@@ -189,17 +190,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import { Button } from '../Button'
-import { Popover } from '../Popover'
 import FeatherIcon from '../FeatherIcon.vue'
+import { Popover } from '../Popover'
 import { TextInput } from '../TextInput'
-import LucideCalendar from '~icons/lucide/calendar'
 
-import { getDate } from './utils'
-import { useDatePicker } from './useDatePicker'
 import { dayjs, dayjsLocal, dayjsSystem } from '../../utils/dayjs'
+import { useDatePicker } from './useDatePicker'
+import { getDate } from './utils'
 
 import type { DatePickerEmits, DatePickerProps } from './types'
 

package/src/components/DatePicker/types.ts

@@ -1,12 +1,11 @@
 export interface DatePickerProps {
-  value?: string
-  modelValue?: string
+  value?: string | string[] // format: "YYYY-MM-DD,YYYY-MM-DD" or ["YYYY-MM-DD","YYYY-MM-DD"]
+  modelValue?: string | string[] // format: "YYYY-MM-DD,YYYY-MM-DD" or ["YYYY-MM-DD","YYYY-MM-DD"]
   placeholder?: string
   formatter?: (date: string) => string
   readonly?: boolean
   inputClass?: string | Array<string> | Record<string, boolean>
-  placement?: string,
-  hideIcon?: boolean
+  placement?: string
 }
 
 export type DatePickerEmits = {

package/src/components/FormControl/FormControl.vue

@@ -15,7 +15,6 @@
       v-if="type === 'select'"
       :id="id"
       v-bind="{ ...controlAttrs, size, variant }"
-      v-model="model"
     >
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
@@ -24,7 +23,6 @@
     <Autocomplete
       v-else-if="type === 'autocomplete'"
       v-bind="{ ...controlAttrs }"
-      v-model="model"
     >
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
@@ -37,13 +35,11 @@
       v-else-if="type === 'textarea'"
       :id="id"
       v-bind="{ ...controlAttrs, size, variant }"
-      v-model="model"
     />
     <TextInput
       v-else
       :id="id"
       v-bind="{ ...controlAttrs, type, size, variant, required }"
-      v-model="model"
     >
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
@@ -60,7 +56,6 @@
     v-else
     :id="id"
     v-bind="{ ...controlAttrs, label, size, class: attrs.class }"
-    v-model="model"
   />
 </template>
 <script setup lang="ts">
@@ -81,8 +76,6 @@ const props = withDefaults(defineProps<FormControlProps>(), {
   variant: 'subtle',
 })
 
-const model = defineModel()
-
 const attrs = useAttrs()
 const controlAttrs = computed(() => {
   // pass everything except class and style

package/src/components/Select/types.ts

@@ -12,7 +12,6 @@ export interface SelectProps {
   placeholder?: string
   disabled?: boolean
   id?: string
-  value?: string | number
   modelValue?: string | number
   options?: SelectOption[]
 }