frappe-ui 0.1.240 → 0.1.243

package/frappe/DataImport/UploadStep.vue

@@ -38,7 +38,7 @@
                         class="hidden"
                         @change="(e) => uploadFile(e)"
                     />
-                    <div class="leading-5">
+                    <div class="leading-5 text-ink-gray-9">
                         Drag and drop a CSV file, or upload from your 
                         <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline">Device</span> 
                         or 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.240",
+  "version": "0.1.243",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,

package/src/components/ConfirmDialog.vue

@@ -2,7 +2,11 @@
   <Dialog v-model="showDialog" :options="{ title }" @close="closeDialog">
     <template #body-content>
       <div class="space-y-4">
-        <p class="text-p-base text-gray-800" v-if="message" v-html="message" />
+        <p
+          class="text-p-base text-ink-gray-6"
+          v-if="message"
+          v-html="message"
+        />
       </div>
     </template>
     <template #actions>

package/src/components/Popover/types.ts

@@ -12,6 +12,10 @@ export interface PopoverProps {
     | 'right-end'
     | 'left-start'
     | 'left-end'
+    | 'top'
+    | 'bottom'
+    | 'right'
+    | 'left'
   popoverClass?: string | object | Array<string | object>
   transition?: 'default' | null
   hideOnBlur?: boolean

package/src/components/Select/Select.vue

@@ -70,7 +70,7 @@ const selectClasses = computed(() => {
     fontSizeClasses.value,
     paddingClasses.value,
     variantClasses,
-    'transition-colors w-full data-[state=open]:ring-2 ring-outline-gray-2 ',
+    'transition-colors w-full focus:ring-2 data-[state=open]:ring-2 ring-outline-gray-3 ',
   ]
 })
 
@@ -86,21 +86,19 @@ const selectOptions = computed(() => {
     <SelectTrigger
       class="inline-flex items-center gap-2 outline-none text-base text-ink-gray-7 data-[placeholder]:text-ink-gray-4 data-[disabled]:text-ink-gray-4"
       aria-label="Customise options"
-      :class="selectClasses"
-      :disabled="props.disabled"
+      :class="[selectClasses, $attrs.class]"
+      :disabled="disabled"
     >
       <slot name="prefix" />
-      <SelectValue :placeholder="props.placeholder" />
+      <SelectValue :placeholder="placeholder" class='truncate' />
       <slot name="suffix">
-        <LucideChevronDown class="size-4 text-ink-gray-4 ml-auto" />
+        <LucideChevronDown class="size-4 text-ink-gray-4 ml-auto shrink-0" />
       </slot>
     </SelectTrigger>
 
     <SelectPortal>
       <SelectContent
-        class="bg-surface-modal border rounded-lg shadow-lg will-change-[opacity,transform] z-[100] min-w-[--reka-select-trigger-width] max-h-[--reka-select-content-available-height] overflow-auto"
-        :side-offset="5"
-        position="popper"
+        class="bg-surface-modal border rounded-lg shadow-lg will-change-[opacity,transform] z-[100] overflow-hidden origin-center data-[state=open]:animate-[fadeInScale_150ms] data-[state=closed]:animate-[fadeOutScale_150ms]"
       >
         <SelectViewport class="p-1 flex flex-col">
           <SelectItem
@@ -109,13 +107,16 @@ const selectOptions = computed(() => {
             :key="option.value"
             :value="option.value"
             :class="[sizeClasses, paddingClasses, fontSizeClasses]"
-            class="text-base text-ink-gray-9 flex items-center relative data-[highlighted]:bg-surface-gray-2 border-0 [data-state=checked]:bg-surface-gray-2 data-[disabled]:text-ink-gray-4"
+						class="
+              text-base text-ink-gray-9 flex items-center relative
+              data-[highlighted]:bg-surface-gray-2 border-0 [data-state=checked]:bg-surface-gray-2
+              data-[disabled]:text-ink-gray-4 select-none
+            "
           >
             <SelectItemText>
               <slot name="option" v-bind="{ option }">{{ option.label }}</slot>
             </SelectItemText>
           </SelectItem>
-
           <slot name="footer" />
         </SelectViewport>
       </SelectContent>
@@ -123,39 +124,33 @@ const selectOptions = computed(() => {
   </SelectRoot>
 </template>
 
+<style scoped>
+[data-highlighted],
+[data-state='checked'] {
+  outline: none !important;
+}
+</style>
+
 <style>
-@keyframes slideDownFade {
+@keyframes fadeInScale {
   from {
     opacity: 0;
-    transform: translateY(-4px) scale(0.98);
+    transform: scale(0.90);
   }
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: scale(1);
   }
 }
 
-@keyframes slideUpFade {
+@keyframes fadeOutScale {
   from {
-    opacity: 0;
-    transform: translateY(4px) scale(0.98);
+    opacity: 1;
+    transform: scale(1);
   }
   to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+    opacity: 0;
+    transform: scale(0.95);
   }
 }
-
-[data-side='top'] {
-  animation: slideDownFade 280ms;
-}
-
-[data-side='bottom'] {
-  animation: slideUpFade 280ms;
-}
-
-[data-highlighted],
-[data-state='checked'] {
-  outline: none !important;
-}
 </style>

package/src/index.ts

@@ -1,3 +1,6 @@
+// old data-fetching: resources
+export * from './resources/index.ts'
+
 // components
 export * from './components/Alert'
 export * from './components/Autocomplete'
@@ -92,9 +95,6 @@ export * from './utils/theme'
 export * from './components/TextEditor/extensions/image'
 export * from './components/TextEditor/extensions/suggestion'
 
-// old data-fetching: resources
-export * from './resources/index.ts'
-
 export { request } from './utils/request.js'
 export { frappeRequest } from './utils/frappeRequest.js'
 export { default as initSocket } from './utils/socketio.js'