frappe-ui 0.1.239 → 0.1.242

package/frappe/DataImport/MappingStep.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-[85%] lg:w-[700px] mx-auto py-12 space-y-8">
+    <div class="w-[85%] lg:w-[700px] mx-auto py-12 space-y-8 text-base">
        <div class="flex justify-between">
             <div class="space-y-2">
                 <div class="text-lg font-semibold text-ink-gray-9">
@@ -10,7 +10,7 @@
                         {{ data?.status }}
                     </Badge>
                 </div>
-                <div class="leading-5">
+                <div class="leading-5 text-ink-gray-7">
                     Change the mapping of columns from your file to fields in the system
                 </div>
             </div>

package/frappe/DataImport/PreviewStep.vue

@@ -17,7 +17,7 @@
                     variant="solid" @click="startImport" />
                 <Button v-else-if="listRoute" label="Done" @click="redirectToList()" />
             </div>
-            <div class="leading-5">
+            <div class="leading-5 text-ink-gray-7">
                 Verify the data before starting the import process
             </div>
         </div>
@@ -26,7 +26,7 @@
             <div class="text-ink-gray-5 text-sm">
                 Column Mapping
             </div>
-            <div class="border rounded-md bg-surface-gray-2 p-4 space-y-4 text-sm">
+            <div class="border rounded-md bg-surface-gray-2 p-4 space-y-4 text-sm text-ink-gray-7">
                 <div v-for="map in mapping" class="grid grid-cols-[40%,10%,40%] lg:grid-cols-3 space-x-3 items-center">
                     <div class="">
                         {{ map[0] }}
@@ -48,7 +48,7 @@
             <div class="rounded-md bg-surface-amber-2 p-2 space-y-2 text-xs">
                 <div v-for="warning in warnings" class="flex items-center space-x-2">
                     <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-3" />
-                    <div v-html="warning.message" class=""></div>
+                    <div v-html="warning.message" class="text-ink-amber-3"></div>
                 </div>
             </div>
         </div>

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 
@@ -67,7 +67,7 @@
             <div v-else-if="importFile" class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
                 <div class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center">
                     <div class="space-y-2">
-                        <div class="font-medium leading-5">
+                        <div class="font-medium leading-5 text-ink-gray-9">
                             {{ importFile.file_name || importFile.split("/").pop() }}
                         </div>
                         <div v-if="importFile.file_size" class="text-ink-gray-6">

package/package.json

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

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 ',
   ]
 })
 
@@ -84,23 +84,21 @@ const selectOptions = computed(() => {
 <template>
   <SelectRoot v-model="model">
     <SelectTrigger
-      class="inline-flex items-center gap-2 outline-none text-base data-[placeholder]:text-ink-gray-4 data-[disabled]:text-ink-gray-4"
+      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'