frappe-ui 0.1.76 → 0.1.78

package/package.json

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

package/src/components/Badge.vue

@@ -41,37 +41,35 @@ const props = withDefaults(defineProps<BadgeProps>(), {
 
 const classes = computed(() => {
   let solidClasses = {
-    gray: 'text-text-icons-white bg-surface-gray-7',
-    blue: 'text-text-icons-blue-1 bg-surface-blue-2',
-    green: 'text-text-icons-green-1 bg-surface-green-3',
-    orange: 'text-text-icons-amber-1 bg-surface-amber-2',
-    red: 'text-text-icons-red-1 bg-surface-red-4',
+    gray: 'text-ink-white bg-surface-gray-7',
+    blue: 'text-ink-blue-1 bg-surface-blue-2',
+    green: 'text-ink-green-1 bg-surface-green-3',
+    orange: 'text-ink-amber-1 bg-surface-amber-2',
+    red: 'text-ink-red-1 bg-surface-red-4',
   }[props.theme]
 
   let subtleClasses = {
-    gray: 'text-text-icons-gray-6 bg-surface-gray-2',
-    blue: 'text-text-icons-blue-2 bg-surface-blue-1',
-    green: 'text-text-icons-green-3 bg-surface-green-2',
-    orange: 'text-text-icons-amber-3 bg-surface-amber-1',
-    red: 'text-text-icons-red-4 bg-surface-red-1',
+    gray: 'text-ink-gray-6 bg-surface-gray-2',
+    blue: 'text-ink-blue-2 bg-surface-blue-1',
+    green: 'text-ink-green-3 bg-surface-green-2',
+    orange: 'text-ink-amber-3 bg-surface-amber-1',
+    red: 'text-ink-red-4 bg-surface-red-1',
   }[props.theme]
 
   let outlineClasses = {
-    gray: 'text-text-icons-gray-6 bg-transparent border border-outline-gray-1',
-    blue: 'text-text-icons-blue-2 bg-transparent border border-outline-blue-1',
-    green:
-      'text-text-icons-green-3 bg-transparent border border-outline-green-2',
-    orange:
-      'text-text-icons-amber-3 bg-transparent border border-outline-amber-2',
-    red: 'text-text-icons-red-4 bg-transparent border border-outline-red-2',
+    gray: 'text-ink-gray-6 bg-transparent border border-outline-gray-1',
+    blue: 'text-ink-blue-2 bg-transparent border border-outline-blue-1',
+    green: 'text-ink-green-3 bg-transparent border border-outline-green-2',
+    orange: 'text-ink-amber-3 bg-transparent border border-outline-amber-2',
+    red: 'text-ink-red-4 bg-transparent border border-outline-red-2',
   }[props.theme]
 
   let ghostClasses = {
-    gray: 'text-text-icons-gray-6 bg-transparent',
-    blue: 'text-text-icons-blue-2 bg-transparent',
-    green: 'text-text-icons-green-3 bg-transparent',
-    orange: 'text-text-icons-amber-3 bg-transparent',
-    red: 'text-text-icons-red-4 bg-transparent',
+    gray: 'text-ink-gray-6 bg-transparent',
+    blue: 'text-ink-blue-2 bg-transparent',
+    green: 'text-ink-green-3 bg-transparent',
+    orange: 'text-ink-amber-3 bg-transparent',
+    red: 'text-ink-red-4 bg-transparent',
   }[props.theme]
 
   let variantClasses = {

package/src/components/Dialog.story.vue

@@ -5,6 +5,12 @@ import { Button } from './Button'
 
 const dialog1 = ref(false)
 const dialog2 = ref(false)
+
+const createPromise = () => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 2000)
+  })
+}
 </script>
 <template>
   <Story :layout="{ width: 500, type: 'grid' }">
@@ -15,7 +21,15 @@ const dialog2 = ref(false)
           title: 'Confirm',
           message: 'Are you sure you want to confirm this action?',
           size: 'xl',
-          actions: [{ label: 'Confirm', variant: 'solid', onClick: () => {} }],
+          actions: [
+            {
+              label: 'Confirm',
+              variant: 'solid',
+              onClick: () => {
+                return createPromise()
+              },
+            },
+          ],
         }"
         v-model="dialog1"
       />

package/src/components/Dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <TransitionRoot
     as="template"
-    :show="open"
+    :show="isOpen"
     @after-leave="$emit('after-leave')"
   >
     <HDialog
@@ -116,13 +116,13 @@
               </slot>
               <div
                 class="px-4 pb-7 pt-4 sm:px-6"
-                v-if="dialogActions.length || $slots.actions"
+                v-if="actions.length || $slots.actions"
               >
                 <slot name="actions" v-bind="{ close }">
                   <div class="space-y-2">
                     <Button
                       class="w-full"
-                      v-for="action in dialogActions"
+                      v-for="action in actions"
                       :key="action.label"
                       v-bind="action"
                     >
@@ -147,7 +147,7 @@ import {
   TransitionChild,
   TransitionRoot,
 } from '@headlessui/vue'
-import { computed, ref, watch } from 'vue'
+import { computed, reactive } from 'vue'
 import { Button, ButtonProps } from './Button'
 import FeatherIcon from './FeatherIcon.vue'
 
@@ -178,8 +178,11 @@ type DialogOptions = {
   position?: 'top' | 'center'
 }
 
+type DialogActionContext = {
+  close: () => void
+}
 type DialogAction = ButtonProps & {
-  onClick?: (close: () => void) => Promise<void> | void
+  onClick?: (context: DialogActionContext) => void | Promise<void>
 }
 
 interface DialogProps {
@@ -199,37 +202,41 @@ const emit = defineEmits<{
   (event: 'after-leave'): void
 }>()
 
-const dialogActions = ref<Array<DialogAction>>([])
-watch(
-  () => props.options.actions,
-  (actions) => {
-    if (!actions?.length) return
+const actions = computed(() => {
+  let actions = props.options.actions
+  if (!actions?.length) return []
 
-    dialogActions.value = actions.map((action) => {
-      let loading = ref(false)
-      return {
-        ...action,
-        loading,
-        onClick: !action.onClick
-          ? close
-          : async () => {
-              loading.value = true
-              try {
-                if (action.onClick) {
-                  // pass close function to action
-                  await action.onClick(close)
+  return actions.map((action) => {
+    let _action = reactive({
+      ...action,
+      loading: false,
+      onClick: !action.onClick
+        ? close
+        : async () => {
+            _action.loading = true
+            try {
+              if (action.onClick) {
+                // deprecated: uncomment this when we remove the backwards compatibility
+                // let context: DialogActionContext = { close }
+                let backwardsCompatibleContext = function () {
+                  console.warn(
+                    'Value passed to onClick is a context object. Please use context.close() instead of context() to close the dialog.',
+                  )
+                  close()
                 }
-              } finally {
-                loading.value = false
+                backwardsCompatibleContext.close = close
+                await action.onClick(backwardsCompatibleContext)
               }
-            },
-      }
+            } finally {
+              _action.loading = false
+            }
+          },
     })
-  },
-  { immediate: true },
-)
+    return _action
+  })
+})
 
-const open = computed({
+const isOpen = computed({
   get() {
     return props.modelValue
   },
@@ -242,7 +249,7 @@ const open = computed({
 })
 
 function close() {
-  open.value = false
+  isOpen.value = false
 }
 
 const icon = computed(() => {

package/src/components/Dropdown.vue

@@ -26,7 +26,7 @@
           <div v-for="group in groups" :key="group.key" class="p-1.5">
             <div
               v-if="group.group && !group.hideLabel"
-              class="flex h-7 items-center px-2 text-sm font-medium text-text-icons-gray-6"
+              class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-6"
             >
               {{ group.group }}
             </div>
@@ -43,7 +43,7 @@
               <button
                 v-else
                 :class="[
-                  active ? 'bg-gray-100' : 'text-text-icons-gray-6',
+                  active ? 'bg-gray-100' : 'text-ink-gray-6',
                   'group flex h-7 w-full items-center rounded px-2 text-base',
                 ]"
                 @click="item.onClick"
@@ -51,11 +51,11 @@
                 <FeatherIcon
                   v-if="item.icon && typeof item.icon === 'string'"
                   :name="item.icon"
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-text-icons-gray-6"
+                  class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
                   aria-hidden="true"
                 />
                 <component
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-text-icons-gray-6"
+                  class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
                   v-else-if="item.icon"
                   :is="item.icon"
                 />

package/src/components/Rating/Rating.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-1">
-    <label class="block text-xs text-text-icons-gray-5" v-if="label">
+    <label class="block text-xs text-ink-gray-5" v-if="label">
       {{ label }}
     </label>
     <div class="flex text-center">
@@ -12,7 +12,7 @@
       >
         <FeatherIcon
           name="star"
-          class="fill-gray-400 text-text-icons-gray-1 stroke-1 mr-1"
+          class="fill-gray-400 text-ink-gray-1 stroke-1 mr-1"
           :class="iconClasses(index)"
           @click="markRating(index)"
         />

package/src/components/Tabs.story.md

@@ -10,12 +10,6 @@ It is an array of objects which contains the following attributes:
 3. You can add more attributes which can be used for custom rendering in the tab
    header or content.
 
-### Options
-
-Currently, it has only one option `indicatorLeft` which is used to set the left
-position of the indicator in case of custom rendering. It is optional and
-default value is `20`.
-
 ## v-model
 
 It is used to set the active tab or change the active tab. It is required.

package/src/components/Tabs.vue

@@ -1,13 +1,15 @@
 <template>
   <TabGroup
     as="div"
-    class="flex flex-1 flex-col"
+    class="flex flex-1 flex-col overflow-y-hidden"
+    :style="`height: calc(100vh - ${tabListRef?.$el.offsetTop}px)`"
     :defaultIndex="changedIndex"
     :selectedIndex="changedIndex"
     @change="(idx) => (changedIndex = idx)"
   >
     <TabList
-      class="relative flex items-center gap-7.5 overflow-x-auto border-b pl-5"
+      ref="tabListRef"
+      class="relative flex items-center gap-7.5 overflow-x-auto border-b px-5"
       :class="tablistClass"
     >
       <Tab
@@ -30,9 +32,8 @@
       </Tab>
       <div
         ref="indicator"
-        class="absolute bottom-0 h-px bg-gray-900"
+        class="tab-indicator absolute bottom-0 h-px bg-gray-900"
         :class="transitionClass"
-        :style="{ left: `${indicatorLeft}px` }"
       />
     </TabList>
     <TabPanels class="flex flex-1 overflow-hidden" :class="tabPanelClass">
@@ -68,12 +69,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  options: {
-    type: Object,
-    default: () => ({
-      indicatorLeft: 20,
-    }),
-  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -83,11 +78,11 @@ const changedIndex = computed({
   set: (index) => emit('update:modelValue', index),
 })
 
+const tabListRef = ref(null)
 const tabRef = ref([])
 const indicator = ref(null)
 const tabsLength = computed(() => props.tabs?.length)
 
-const indicatorLeft = ref(props.options?.indicatorLeft)
 const transitionClass = ref('')
 
 function moveIndicator(index) {
@@ -96,20 +91,20 @@ function moveIndicator(index) {
   }
   const selectedTab = tabRef.value[index].el
   indicator.value.style.width = `${selectedTab.offsetWidth}px`
-  indicatorLeft.value = selectedTab.offsetLeft
+  indicator.value.style.left = `${selectedTab.offsetLeft}px`
 }
 
 watch(changedIndex, (index) => {
   if (index >= tabsLength.value) {
     changedIndex.value = tabsLength.value - 1
   }
+  transitionClass.value = 'transition-all duration-300 ease-in-out'
   nextTick(() => moveIndicator(index))
 })
 
 onMounted(() => {
-  moveIndicator(changedIndex.value)
-  nextTick(() => {
-    transitionClass.value = 'transition-all duration-300 ease-in-out'
-  })
+  nextTick(() => moveIndicator(changedIndex.value))
+  // Fix for indicator not moving on initial load
+  setTimeout(() => moveIndicator(changedIndex.value), 100)
 })
 </script>

package/src/components/TextInput.vue

@@ -51,6 +51,10 @@ interface TextInputProps {
   debounce?: number
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<TextInputProps>(), {
   type: 'text',
   size: 'sm',

package/src/style.css

@@ -1,37 +1,5 @@
 @import './fonts/Inter/inter.css';
-@import './espressoColors.css';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  html,
-  body,
-  button,
-  p,
-  span,
-  div {
-    font-variation-settings: 'opsz' 24;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  select {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%237C7C7C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" aria-hidden="true" viewBox="0 0 24 24" ><path d="m6 9 6 6 6-6" /></svg>');
-    background-size: 1.13em;
-    background-position: right 0.44rem center;
-  }
-}
-
-@layer components {
-  .form-input,
-  .form-textarea,
-  .form-select {
-    @apply h-7 rounded border border-gray-100 bg-gray-100 py-1.5 pl-2 pr-2 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400;
-  }
-
-  .form-checkbox {
-    @apply rounded-md bg-gray-100 text-blue-500 focus:ring-0 focus-visible:ring-1;
-  }
-}