pimelon-ui 0.1.135 → 0.1.155

package/melon/Help/HelpModal.vue

@@ -53,7 +53,7 @@
   </div>
 </template>
 <script setup>
-import Dropdown from '../../src/components/Dropdown.vue'
+import Dropdown from '../../src/components/Dropdown/Dropdown.vue'
 import Button from '../../src/components/Button/Button.vue'
 import StepsIcon from '../Icons/StepsIcon.vue'
 import MinimizeIcon from '../Icons/MinimizeIcon.vue'

package/melon/HelpCenter/HelpCenter.vue

@@ -64,7 +64,7 @@
 <script setup>
 import Button from '../../src/components/Button/Button.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
-import TextInput from '../../src/components/TextInput.vue'
+import TextInput from '../../src/components/TextInput/TextInput.vue'
 import { ref, computed, onMounted } from 'vue'
 
 const props = defineProps({

package/melon/Onboarding/IntermediateStepModal.vue

@@ -7,7 +7,13 @@
       <slot>
         <div class="flex flex-col gap-2 text-ink-gray-9 text-base">
           <div v-if="currentStep.message">{{ currentStep.message }}</div>
-          <video v-if="currentStep.videoURL" class="w-full rounded" controls>
+          <video
+            v-if="currentStep.videoURL"
+            class="w-full rounded"
+            controls
+            autoplay
+            muted
+          >
             <source :src="currentStep.videoURL" type="video/mp4" />
             Your browser does not support the video tag.
           </video>
@@ -20,7 +26,7 @@
   </Dialog>
 </template>
 <script setup>
-import Dialog from '../../src/components/Dialog.vue'
+import { Dialog } from '../../src/components/Dialog'
 import { computed } from 'vue'
 
 const props = defineProps({

package/melon/Onboarding/OnboardingSteps.vue

@@ -35,25 +35,38 @@
         v-for="step in steps"
         :key="step.title"
         class="group w-full flex gap-2 justify-between items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
-        @click.stop="() => !step.completed && step.onClick()"
+        @click.stop="
+          () => !step.completed && !isDependent(step) && step.onClick()
+        "
       >
-        <div
-          class="flex gap-2 items-center"
-          :class="[step.completed ? 'text-ink-gray-5' : 'text-ink-gray-8']"
+        <component
+          :is="isDependent(step) ? Tooltip : 'div'"
+          :text="dependsOnTooltip(step)"
         >
-          <component :is="step.icon" class="h-4" />
-          <div class="text-base" :class="{ 'line-through': step.completed }">
-            {{ step.title }}
+          <div
+            class="flex gap-2 items-center"
+            :class="[
+              step.completed
+                ? 'text-ink-gray-5'
+                : isDependent(step)
+                  ? 'text-ink-gray-4'
+                  : 'text-ink-gray-8',
+            ]"
+          >
+            <component :is="step.icon" class="h-4" />
+            <div class="text-base" :class="{ 'line-through': step.completed }">
+              {{ step.title }}
+            </div>
           </div>
-        </div>
+        </component>
         <Button
-          v-if="!step.completed"
+          v-if="!step.completed && !isDependent(step)"
           :label="'Skip'"
           class="!h-4 text-xs !text-ink-gray-6 hidden group-hover:flex"
           @click="() => skip(step.name, afterSkip)"
         />
         <Button
-          v-else
+          v-else-if="!isDependent(step)"
           :label="'Reset'"
           class="!h-4 text-xs !text-ink-gray-6 hidden group-hover:flex"
           @click.stop="() => reset(step.name, afterReset)"
@@ -64,8 +77,9 @@
 </template>
 <script setup>
 import { useOnboarding } from './onboarding'
+import Tooltip from '../../src/components/Tooltip/Tooltip.vue'
 import Button from '../../src/components/Button/Button.vue'
-import Badge from '../../src/components/Badge.vue'
+import Badge from '../../src/components/Badge/Badge.vue'
 
 const props = defineProps({
   appName: {
@@ -98,6 +112,26 @@ const props = defineProps({
   },
 })
 
+function isDependent(step) {
+  if (step.dependsOn && !step.completed) {
+    const dependsOnStep = steps.find((s) => s.name === step.dependsOn)
+    if (dependsOnStep && !dependsOnStep.completed) {
+      return true
+    }
+  }
+  return false
+}
+
+function dependsOnTooltip(step) {
+  if (step.dependsOn && !step.completed) {
+    const dependsOnStep = steps.find((s) => s.name === step.dependsOn)
+    if (dependsOnStep && !dependsOnStep.completed) {
+      return `You need to complete "${dependsOnStep.title}" first.`
+    }
+  }
+  return ''
+}
+
 const {
   steps,
   stepsCompleted,

package/melon/Onboarding/onboarding.js

@@ -1,6 +1,7 @@
 import call from '../../src/utils/call'
 import { createResource } from '../../src/resources'
-import { minimize } from '../Help/help'
+import { minimize, showHelpModal } from '../Help/help'
+import { sessionUser } from '../session'
 import { useStorage } from '@vueuse/core'
 import { computed, reactive } from 'vue'
 
@@ -8,13 +9,18 @@ const onboardings = reactive({})
 const onboardingStatus = useStorage('onboardingStatus', {})
 
 export function useOnboarding(appName) {
+  const user = sessionUser()
+
+  if (!user || user === 'Guest') return
+
   const isOnboardingStepsCompleted = useStorage(
-    'isOnboardingStepsCompleted' + appName,
+    'isOnboardingStepsCompleted' + appName + user,
     false,
   )
 
   const onboardingSteps = computed(
-    () => onboardingStatus.value?.[appName + '_onboarding_status'] || [],
+    () =>
+      onboardingStatus.value?.[user]?.[appName + '_onboarding_status'] || [],
   )
 
   if (!onboardingSteps.value.length && !isOnboardingStepsCompleted.value) {
@@ -23,7 +29,7 @@ export function useOnboarding(appName) {
       cache: 'onboarding_status',
       auto: true,
       onSuccess: (data) => {
-        onboardingStatus.value = data
+        onboardingStatus.value[user] = data
         syncStatus()
       },
     })
@@ -63,11 +69,13 @@ export function useOnboarding(appName) {
     if (isOnboardingStepsCompleted.value) return
 
     if (!onboardingSteps.value.length) {
-      onboardingStatus.value[appName + '_onboarding_status'] = onboardings[
-        appName
-      ].map((s) => {
-        return { name: s.name, completed: false }
-      })
+      if (!onboardingStatus.value[user]) {
+        onboardingStatus.value[user] = {}
+      }
+      onboardingStatus.value[user][appName + '_onboarding_status'] =
+        onboardings[appName].map((s) => {
+          return { name: s.name, completed: false }
+        })
     }
 
     let index = onboardingSteps.value.findIndex((s) => s.name === step)
@@ -87,11 +95,14 @@ export function useOnboarding(appName) {
     if (isOnboardingStepsCompleted.value && value) return
 
     if (!onboardingSteps.value.length) {
-      onboardingStatus.value[appName + '_onboarding_status'] = onboardings[
-        appName
-      ].map((s) => {
-        return { name: s.name, completed: value }
-      })
+      if (!onboardingStatus.value[user]) {
+        onboardingStatus.value[user] = {}
+      }
+
+      onboardingStatus.value[user][appName + '_onboarding_status'] =
+        onboardings[appName].map((s) => {
+          return { name: s.name, completed: value }
+        })
     } else {
       onboardingSteps.value.forEach((step) => {
         step.completed = value
@@ -129,6 +140,8 @@ export function useOnboarding(appName) {
   }
 
   function setUp(steps) {
+    showHelpModal.value = !isOnboardingStepsCompleted.value
+
     if (onboardings[appName]) return
 
     onboardings[appName] = steps

package/melon/session.js

@@ -0,0 +1,8 @@
+export function sessionUser() {
+  let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
+  let _sessionUser = cookies.get('user_id')
+  if (_sessionUser === 'Guest') {
+    _sessionUser = null
+  }
+  return _sessionUser
+}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.135",
+  "version": "0.1.155",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
+  "type": "module",
   "scripts": {
     "test": "vitest",
     "prettier": "yarn prettier -w ./src",
@@ -27,12 +28,16 @@
   "author": "Alphamonak Solutions",
   "license": "MIT",
   "dependencies": {
+    "@floating-ui/vue": "^1.1.6",
     "@headlessui/vue": "^1.7.14",
     "@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",
@@ -53,12 +58,16 @@
     "dayjs": "^1.11.13",
     "echarts": "^5.6.0",
     "feather-icons": "^4.28.0",
+    "highlight.js": "^11.11.1",
     "husky": "^9.1.7",
     "idb-keyval": "^6.2.0",
     "lowlight": "^3.3.0",
     "lucide-static": "^0.479.0",
     "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",
     "showdown": "^2.1.0",

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

@@ -38,11 +38,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-
-interface AlertProps {
-  title?: string
-  type?: 'warning'
-}
+import type { AlertProps } from './types'
 
 const props = withDefaults(defineProps<AlertProps>(), {
   type: 'warning',

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.vue'
+export type { AlertProps } from './types.ts'

package/src/components/Alert/types.ts

@@ -0,0 +1,4 @@
+export interface AlertProps {
+  title?: string
+  type?: 'warning'
+}

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

@@ -206,49 +206,16 @@ import {
   ComboboxOptions,
 } from '@headlessui/vue'
 import { computed, nextTick, ref, watch } from 'vue'
-import Popover from './Popover.vue'
-import { Button } from './Button'
-import FeatherIcon from './FeatherIcon.vue'
-import LoadingIndicator from './LoadingIndicator.vue'
-
-type Option = {
-  label: string
-  value: OptionValue
-  description?: string
-  [key: string]: any
-}
-
-type OptionValue = string | number | boolean
-
-type AutocompleteOption = OptionValue | Option
-
-type AutocompleteOptionGroup = {
-  group: string
-  items: AutocompleteOption[]
-  hideLabel?: boolean
-}
-
-type AutocompleteOptions = AutocompleteOption[] | AutocompleteOptionGroup[]
-
-type AutocompleteProps = {
-  label?: string
-  options: AutocompleteOptions
-  hideSearch?: boolean
-  placeholder?: string
-  bodyClasses?: string | string[]
-  loading?: boolean
-  placement?: string
-  showFooter?: boolean
-} & (
-  | {
-      multiple: true
-      modelValue?: AutocompleteOption[] | null
-    }
-  | {
-      multiple?: false
-      modelValue?: AutocompleteOption | null
-    }
-)
+import { Popover } from '../Popover'
+import { Button } from '../Button'
+import FeatherIcon from '../FeatherIcon.vue'
+import LoadingIndicator from '../LoadingIndicator.vue'
+import type {
+  AutocompleteOptionGroup,
+  AutocompleteOption,
+  AutocompleteProps,
+  Option,
+} from './types'
 
 const props = withDefaults(defineProps<AutocompleteProps>(), {
   multiple: false,

package/src/components/Autocomplete/index.ts

@@ -0,0 +1,2 @@
+export { default as Autocomplete } from './Autocomplete.vue'
+export type { AutocompleteProps } from './types'

package/src/components/Autocomplete/types.ts

@@ -0,0 +1,38 @@
+type OptionValue = string | number | boolean
+
+export type Option = {
+  label: string
+  value: OptionValue
+  description?: string
+  [key: string]: any
+}
+
+export type AutocompleteOption = OptionValue | Option
+
+export type AutocompleteOptionGroup = {
+  group: string
+  items: AutocompleteOption[]
+  hideLabel?: boolean
+}
+
+type AutocompleteOptions = AutocompleteOption[] | AutocompleteOptionGroup[]
+
+export type AutocompleteProps = {
+  label?: string
+  options: AutocompleteOptions
+  hideSearch?: boolean
+  placeholder?: string
+  bodyClasses?: string | string[]
+  loading?: boolean
+  placement?: string
+  showFooter?: boolean
+} & (
+  | {
+      multiple: true
+      modelValue?: AutocompleteOption[] | null
+    }
+  | {
+      multiple?: false
+      modelValue?: AutocompleteOption | null
+    }
+)

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

@@ -12,7 +12,7 @@
     />
     <div
       v-else
-      class="flex h-full w-full items-center justify-center bg-surface-gray-2 uppercase text-ink-gray-5"
+      class="flex h-full w-full items-center justify-center bg-surface-gray-2 uppercase text-ink-gray-5 select-none"
       :class="[labelClasses, shapeClasses]"
     >
       <div :class="iconClasses" v-if="$slots.default">
@@ -38,16 +38,10 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import type { AvatarProps } from './types'
 
 const imgFetchError = ref(false)
 
-interface AvatarProps {
-  image?: string
-  label?: string
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
-  shape?: 'circle' | 'square'
-}
-
 const props = withDefaults(defineProps<AvatarProps>(), {
   size: 'md',
   shape: 'circle',

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar.vue'
+export type { AvatarProps } from './types'

package/src/components/Avatar/types.ts

@@ -0,0 +1,6 @@
+export interface AvatarProps {
+  image?: string
+  label?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+  shape?: 'circle' | 'square'
+}

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

@@ -21,17 +21,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-
-interface Label {
-  toString(): string
-}
-
-interface BadgeProps {
-  theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'
-  size?: 'sm' | 'md' | 'lg'
-  variant?: 'solid' | 'subtle' | 'outline' | 'ghost'
-  label?: Label | string | number
-}
+import type { BadgeProps } from './types'
 
 const props = withDefaults(defineProps<BadgeProps>(), {
   theme: 'gray',

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.vue'
+export type { BadgeProps } from './types'

package/src/components/Badge/types.ts

@@ -0,0 +1,10 @@
+interface Label {
+  toString(): string
+}
+
+export interface BadgeProps {
+  theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'solid' | 'subtle' | 'outline' | 'ghost'
+  label?: Label | string | number
+}

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

@@ -78,20 +78,10 @@
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
 import { computed } from 'vue'
-import { RouterLinkProps, useRouter } from 'vue-router'
-import Dropdown from '../components/Dropdown.vue'
-import { Button } from './Button'
-
-interface BreadcrumbItem {
-  label: string
-  route?: RouterLinkProps['to']
-  onClick?: () => void
-  [key: string]: any
-}
-
-interface BreadcrumbsProps {
-  items: BreadcrumbItem[]
-}
+import { useRouter } from 'vue-router'
+import { Dropdown } from '../Dropdown'
+import { Button } from '../Button'
+import type { BreadcrumbsProps } from './types'
 
 const props = defineProps<BreadcrumbsProps>()
 

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from './Breadcrumbs.vue'
+export type { BreadcrumbsProps } from './types'

package/src/components/Breadcrumbs/types.ts

@@ -0,0 +1,12 @@
+import { RouterLinkProps } from 'vue-router'
+
+interface BreadcrumbItem {
+  label: string
+  route?: RouterLinkProps['to']
+  onClick?: () => void
+  [key: string]: any
+}
+
+export interface BreadcrumbsProps {
+  items: BreadcrumbItem[]
+}

package/src/components/Button/Button.vue

@@ -36,7 +36,7 @@
       <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 }">
+    <span v-else :class="{ 'sr-only': isIconButton }" class="truncate">
       <slot>{{ label }}</slot>
     </span>
 
@@ -52,29 +52,11 @@
   </button>
 </template>
 <script lang="ts" setup>
-import { computed, useSlots, type Component } from 'vue'
+import { computed, useSlots } 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
-}
+import { useRouter } from 'vue-router'
+import type { ButtonProps, ThemeVariant } from './types'
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   theme: 'gray',
@@ -134,7 +116,6 @@ const buttonClasses = computed(() => {
     ghost: ghostClasses,
   }[props.variant]
 
-  type ThemeVariant = `${Theme}-${Variant}`
   let themeVariant: ThemeVariant = `${props.theme}-${props.variant}`
 
   let disabledClassesMap: Record<ThemeVariant, string> = {

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -0,0 +1,23 @@
+import { type RouteLocation } from 'vue-router'
+import { type Component } from 'vue'
+
+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
+}
+
+export type ThemeVariant = `${Theme}-${Variant}`