frappe-ui 0.1.143 → 0.1.145

package/frappe/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>

package/frappe/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,6 +77,7 @@
 </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'
 
@@ -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/frappe/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/frappe/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,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.143",
+  "version": "0.1.145",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",

package/src/components/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">

package/src/components/Charts/eChartOptions.ts

@@ -284,6 +284,8 @@ function getYAxisOptions(config: AxisChartConfig) {
             return formatValue(value, 1, true)
           },
         },
+        min: config.yAxis.yMin,
+        max: config.yAxis.yMax,
       }
 
   const secondaryYAxisOptions = {
@@ -324,6 +326,8 @@ function getYAxisOptions(config: AxisChartConfig) {
       },
       // color: '#000',
     },
+    min: config.y2Axis?.yMin,
+    max: config.y2Axis?.yMax,
   }
 
   return config.swapXY

package/src/components/DatePicker/DatePicker.vue

@@ -8,14 +8,15 @@
       <TextInput
         readonly
         type="text"
-        icon-left="calendar"
         :placeholder="placeholder"
         :value="dateValue && formatter ? formatter(dateValue) : dateValue"
         @focus="!readonly ? togglePopover() : null"
         class="w-full"
         :class="inputClass"
         v-bind="$attrs"
-      />
+      >
+        <template #prefix><LucideCalendar class="size-4" /></template>
+      </TextInput>
     </template>
 
     <template #body="{ togglePopover }">

package/src/components/DatePicker/DateTimePicker.vue

@@ -15,7 +15,9 @@
         class="w-full"
         :class="inputClass"
         v-bind="$attrs"
-      />
+      >
+        <template #prefix><LucideCalendar class="size-4" /></template>
+      </TextInput>
     </template>
 
     <template #body="{ togglePopover }">

package/vite/lucideIcons.js

@@ -30,7 +30,7 @@ function getIcons() {
     let iconSvg = LucideIcons[icon]
 
     // set stroke-width to 1.5
-    if (iconSvg && iconSvg.includes('stroke-width')) {
+    if (typeof iconSvg === 'string' && iconSvg.includes('stroke-width')) {
       iconSvg = iconSvg.replace(/stroke-width="2"/g, 'stroke-width="1.5"')
     }
     icons[icon] = iconSvg