frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/FileUploader/FileUploader.cy.ts

@@ -0,0 +1,66 @@
+import { h } from 'vue'
+import FileUploader from './FileUploader.vue'
+
+const testFile = {
+  contents: Cypress.Buffer.from('hello'),
+  fileName: 'hello.txt',
+  mimeType: 'text/plain',
+}
+
+describe('FileUploader', () => {
+  it('uploads selected files as private by default', () => {
+    cy.intercept('POST', '/api/method/upload_file', (req) => {
+      expect(String(req.body)).to.include('name="is_private"')
+      expect(String(req.body)).to.include('1')
+      req.reply({ message: { file_url: '/files/hello.txt' } })
+    }).as('upload')
+
+    cy.mount(FileUploader, {
+      props: {
+        onSuccess: cy.spy().as('onSuccess'),
+      },
+    })
+
+    cy.get('input[type=file]').selectFile(testFile, { force: true })
+    cy.wait('@upload')
+    cy.get('@onSuccess').should('have.been.calledOnce')
+  })
+
+  it('lets uploadArgs override the private default', () => {
+    cy.intercept('POST', '/api/method/upload_file', (req) => {
+      expect(String(req.body)).to.include('name="is_private"')
+      expect(String(req.body)).to.include('0')
+      req.reply({ message: { file_url: '/files/hello.txt' } })
+    }).as('upload')
+
+    cy.mount(FileUploader, {
+      props: {
+        uploadArgs: { private: false },
+      },
+    })
+
+    cy.get('input[type=file]').selectFile(testFile, { force: true })
+    cy.wait('@upload')
+  })
+
+  it('blocks upload when validation returns an error message', () => {
+    cy.intercept('POST', '/api/method/upload_file').as('upload')
+
+    cy.mount(FileUploader, {
+      props: {
+        validateFile: () => 'Only PDFs are allowed',
+      },
+      slots: {
+        default: ({ error, openFileSelector }: any) =>
+          h('div', [
+            h('button', { onClick: openFileSelector }, 'Upload'),
+            error ? h('p', { 'data-cy': 'error' }, String(error)) : null,
+          ]),
+      },
+    })
+
+    cy.get('input[type=file]').selectFile(testFile, { force: true })
+    cy.get('[data-cy=error]').should('have.text', 'Only PDFs are allowed')
+    cy.get('@upload.all').should('have.length', 0)
+  })
+})

package/src/components/FileUploader/FileUploader.md

@@ -1,5 +1,8 @@
 # FileUploader
 
-Allows users to upload files with ease. Supports drag-and-drop and provides clear feedback on upload status.
+Allows users to upload files with ease. Supports drag-and-drop and provides
+clear feedback on upload status. Uploads are private by default
+(`is_private=1`). Pass `uploadArgs.private = false` only for intentionally
+public files.
 
 <ComponentPreview name="FileUploader-Examples" />

package/src/components/FileUploader/FileUploader.vue

@@ -3,7 +3,7 @@
     <input
       ref="input"
       type="file"
-      :accept="fileTypes"
+      :accept="acceptedFileTypes"
       class="hidden"
       @change="onFileAdd"
     />
@@ -27,114 +27,155 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
 import { Button } from '../Button'
 import FileUploadHandler from '../../utils/fileUploadHandler'
+import type {
+  FileUploaderEmits,
+  FileUploaderProps,
+  FileUploaderSlotProps,
+  FileUploaderValidationResult,
+} from './types'
+import type { UploadOptions } from '../../utils/useFileUpload'
 
-export default {
+defineOptions({
   name: 'FileUploader',
-  props: {
-    fileTypes: {
-      type: [String, Array],
-    },
-    uploadArgs: {
-      type: Object,
-    },
-    validateFile: {
-      type: Function,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      uploader: null,
-      uploading: false,
-      uploaded: 0,
-      error: null,
-      message: '',
-      total: 0,
-      file: null,
-      finishedUploading: false,
-    }
-  },
-  computed: {
-    progress() {
-      let value = Math.floor((this.uploaded / this.total) * 100)
-      return isNaN(value) ? 0 : value
-    },
-    success() {
-      return this.finishedUploading && !this.error
-    },
-  },
-  methods: {
-    inputRef() {
-      return this.$refs['input']
-    },
-    openFileSelector() {
-      this.$refs['input'].click()
-    },
-    async onFileAdd(e) {
-      this.error = null
-      this.file = e.target.files[0]
-
-      if (this.file && this.validateFile) {
-        try {
-          let message = await this.validateFile(this.file)
-          if (message) {
-            this.error = message
-          }
-        } catch (error) {
-          this.error = error
-        }
-      }
-
-      if (!this.error) {
-        this.uploadFile(this.file)
-      }
-    },
-    async uploadFile(file) {
-      this.error = null
-      this.uploaded = 0
-      this.total = 0
-
-      this.uploader = new FileUploadHandler()
-      this.uploader.on('start', () => {
-        this.uploading = true
-      })
-      this.uploader.on('progress', (data) => {
-        this.uploaded = data.uploaded
-        this.total = data.total
-      })
-      this.uploader.on('error', () => {
-        this.uploading = false
-        this.error = 'Error Uploading File'
-      })
-      this.uploader.on('finish', () => {
-        this.uploading = false
-        this.finishedUploading = true
-      })
-      this.uploader
-        .upload(file, this.uploadArgs || {})
-        .then((data) => {
-          this.$emit('success', data)
-        })
-        .catch((error) => {
-          this.uploading = false
-          let errorMessage = 'Error Uploading File'
-          if (error?.message) {
-            errorMessage = error.message
-          } else if (error?._server_messages) {
-            errorMessage = JSON.parse(
-              JSON.parse(error._server_messages)[0],
-            ).message
-          } else if (error?.exc) {
-            errorMessage = JSON.parse(error.exc)[0].split('\n').slice(-2, -1)[0]
-          }
-          this.error = errorMessage
-          this.$emit('failure', error)
-        })
-    },
-  },
-  expose: ['inputRef'],
+})
+
+const props = withDefaults(defineProps<FileUploaderProps>(), {
+  uploadArgs: undefined,
+  validateFile: undefined,
+})
+
+const emit = defineEmits<FileUploaderEmits>()
+defineSlots<{
+  default(props: FileUploaderSlotProps): unknown
+}>()
+
+const input = ref<HTMLInputElement | null>(null)
+const uploader = ref<FileUploadHandler | null>(null)
+const uploading = ref(false)
+const uploaded = ref(0)
+const total = ref(0)
+const error = ref<unknown>(null)
+const message = ref('')
+const file = ref<File | null>(null)
+const finishedUploading = ref(false)
+
+const acceptedFileTypes = computed(() => {
+  return Array.isArray(props.fileTypes)
+    ? props.fileTypes.join(',')
+    : props.fileTypes
+})
+
+const progress = computed(() => {
+  const value = Math.floor((uploaded.value / total.value) * 100)
+  return Number.isNaN(value) ? 0 : value
+})
+
+const success = computed(() => {
+  return finishedUploading.value && !error.value
+})
+
+const uploadOptions = computed<UploadOptions>(() => {
+  const uploadArgs = props.uploadArgs || {}
+  if (uploadArgs.private !== undefined || uploadArgs.is_private !== undefined) {
+    return uploadArgs
+  }
+  return { ...uploadArgs, private: true }
+})
+
+function inputRef() {
+  return input.value
+}
+
+function openFileSelector() {
+  input.value?.click()
 }
+
+async function onFileAdd(event: Event) {
+  error.value = null
+
+  const target = event.target as HTMLInputElement
+  const selectedFile = target.files?.[0] || null
+  file.value = selectedFile
+
+  if (!selectedFile) return
+
+  const validationError = await validateSelectedFile(selectedFile)
+  if (validationError) {
+    error.value = validationError
+    return
+  }
+
+  await uploadFile(selectedFile)
+}
+
+async function validateSelectedFile(
+  selectedFile: File,
+): Promise<FileUploaderValidationResult> {
+  if (!props.validateFile) return null
+
+  try {
+    return await props.validateFile(selectedFile)
+  } catch (validationError) {
+    return validationError as Error
+  }
+}
+
+async function uploadFile(selectedFile: File) {
+  error.value = null
+  uploaded.value = 0
+  total.value = 0
+  finishedUploading.value = false
+
+  uploader.value = new FileUploadHandler()
+  uploader.value.on('start', () => {
+    uploading.value = true
+  })
+  uploader.value.on('progress', (data: { uploaded: number; total: number }) => {
+    uploaded.value = data.uploaded
+    total.value = data.total
+  })
+  uploader.value.on('error', () => {
+    uploading.value = false
+    error.value = 'Error Uploading File'
+  })
+  uploader.value.on('finish', () => {
+    uploading.value = false
+    finishedUploading.value = true
+  })
+
+  try {
+    const data = await uploader.value.upload(selectedFile, uploadOptions.value)
+    emit('success', data)
+  } catch (uploadError) {
+    uploading.value = false
+    error.value = getUploadErrorMessage(uploadError)
+    emit('failure', uploadError)
+  }
+}
+
+function getUploadErrorMessage(uploadError: unknown) {
+  if (uploadError instanceof Error && uploadError.message) {
+    return uploadError.message
+  }
+
+  const errorResponse = uploadError as {
+    message?: string
+    _server_messages?: string
+    exc?: string
+  }
+  if (errorResponse?.message) return errorResponse.message
+  if (errorResponse?._server_messages) {
+    return JSON.parse(JSON.parse(errorResponse._server_messages)[0]).message
+  }
+  if (errorResponse?.exc) {
+    return JSON.parse(errorResponse.exc)[0].split('\n').slice(-2, -1)[0]
+  }
+  return 'Error Uploading File'
+}
+
+defineExpose({ inputRef })
 </script>

package/src/components/FileUploader/index.ts

@@ -1 +1,7 @@
 export { default as FileUploader } from './FileUploader.vue'
+export type {
+  FileUploaderEmits,
+  FileUploaderProps,
+  FileUploaderSlotProps,
+  FileUploaderValidationResult,
+} from './types'

package/src/components/FileUploader/types.ts

@@ -0,0 +1,43 @@
+import type { UploadOptions } from '../../utils/useFileUpload'
+
+export type FileUploaderValidationResult =
+  | string
+  | Error
+  | null
+  | undefined
+  | void
+
+export interface FileUploaderProps {
+  /** Accepted file types passed to the native file input. */
+  fileTypes?: string | string[]
+
+  /**
+   * Additional upload options passed to Frappe's upload endpoint.
+   * `private` / `is_private` override the component's `isPrivate` default.
+   */
+  uploadArgs?: UploadOptions
+
+  /** Optional validation hook. Return a message or Error to block upload. */
+  validateFile?: (
+    file: File,
+  ) => FileUploaderValidationResult | Promise<FileUploaderValidationResult>
+}
+
+export interface FileUploaderEmits {
+  /** @deprecated Kept for compatibility through v1.x. */
+  success: [data: any]
+  /** @deprecated Kept for compatibility through v1.x. */
+  failure: [error: any]
+}
+
+export interface FileUploaderSlotProps {
+  file: File | null
+  uploading: boolean
+  progress: number
+  uploaded: number
+  total: number
+  message: string
+  error: unknown
+  success: boolean
+  openFileSelector: () => void
+}

package/src/components/FormControl/FormControl.api.md

@@ -27,7 +27,7 @@
     name: 'type',
     description: 'Type of input to render. FormControl is a thin dispatcher — it forwards\n`label`/`description`/`error`/`required`/`size`/`variant` plus all\nremaining attrs/listeners to the resolved child component. Type-specific\nprops (e.g. `options` for select/combobox, `min`/`max`/`formatter` for\ndate pickers, `:options` for multiselect) and the `v-model` value shape\nfollow the underlying component — see that component\'s docs/types for\nthe full surface. Slots are forwarded by name; only slot names declared\non FormControl get IDE typing, others pass through at runtime.',
     required: false,
-    type: '"select" | TextInputTypes | "textarea" | "checkbox" | "autocomplete" | "combobox" | "multiselect" | "daterange" | "datetime"',
+    type: '"select" | "textarea" | TextInputTypes | "checkbox" | "autocomplete" | "combobox" | "multiselect" | "daterange" | "datetime"',
     default: '"text"'
   },
   {
@@ -87,7 +87,6 @@
 </script>
 ## API Reference
 
-<PropsTable name="FormControl" :data="propsData"/> 
-
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="FormControl" :data="propsData"/>
 
+<SlotsTable :data="slotsData"/>

package/src/components/FormControl/FormControl.md

@@ -2,6 +2,10 @@
 
 A uniform wrapper for form inputs. `FormControl` picks an underlying control from its `type` prop and threads `label`, `description`, `error`, `required`, `size`, and `variant` down to it. Use it when you want one consistent shape for every field in a form.
 
+## Playground
+
+<ClientOnly><FormControlBuilder /></ClientOnly>
+
 ## Example
 
 A create-account form using every control type.

package/src/components/FormControl/stories/RealForm.vue

@@ -88,7 +88,7 @@ function reset() {
     @submit.prevent="submit"
   >
     <div class="space-y-1">
-      <h2 class="text-lg font-semibold text-ink-gray-9">Create account</h2>
+      <h2 class="text-lg-semibold text-ink-gray-9">Create account</h2>
       <p class="text-p-sm text-ink-gray-6">
         Every <code>FormControl</code> type rendered together. Submit to see
         validation light up.
@@ -184,7 +184,7 @@ function reset() {
       type="checkbox"
       label="I accept the terms and privacy policy"
     />
-    <p v-if="errors.acceptTerms" class="text-p-sm text-ink-red-3">
+    <p v-if="errors.acceptTerms" class="text-p-sm text-ink-red-6">
       {{ errors.acceptTerms }}
     </p>
 
@@ -193,7 +193,7 @@ function reset() {
       <Button variant="ghost" type="button" @click="reset">Reset</Button>
       <span
         v-if="submitted && isValid"
-        class="ml-auto text-p-sm text-ink-green-3"
+        class="ml-auto text-p-sm text-ink-green-6"
       >
         Looks good!
       </span>

package/src/components/FormLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <label class="block" :class="labelClasses" :for="id">
+  <label class="block text-ink-gray-5" :class="labelClasses" :for="id">
     {{ label }}
     <RequiredIndicator :required="required" />
   </label>
@@ -20,12 +20,9 @@ const props = withDefaults(defineProps<FormLabelProps>(), {
 })
 
 const labelClasses = computed(() => {
-  return [
-    {
-      sm: 'text-xs',
-      md: 'text-base',
-    }[props.size],
-    'text-ink-gray-5',
-  ]
+  return {
+    sm: 'text-xs',
+    md: 'text-base',
+  }[props.size]
 })
 </script>

package/src/components/HoverCard/HoverCard.api.md

@@ -0,0 +1,100 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const propsData = [
+  {
+    name: 'side',
+    description: 'Side of the trigger the card is placed on.',
+    required: false,
+    type: '"left" | "right" | "bottom" | "top"',
+    default: '"bottom"'
+  },
+  {
+    name: 'align',
+    description: 'Alignment of the card relative to the trigger.',
+    required: false,
+    type: '"start" | "center" | "end"',
+    default: '"start"'
+  },
+  {
+    name: 'offset',
+    description: 'Distance in pixels between the card and the trigger.',
+    required: false,
+    type: 'number',
+    default: '4'
+  },
+  {
+    name: 'portalTo',
+    description: 'Where the card is teleported to in the DOM.',
+    required: false,
+    type: 'string | HTMLElement',
+    default: '"body"'
+  },
+  {
+    name: 'collisionPadding',
+    description: 'Padding (in pixels) kept between the card and the viewport edges when\nrepositioning to avoid collisions.',
+    required: false,
+    type: 'number',
+    default: '10'
+  },
+  {
+    name: 'hoverDelay',
+    description: 'Delay (in seconds) from when the pointer enters the trigger until the card\nopens. Matches the Tooltip convention of using seconds.',
+    required: false,
+    type: 'number',
+    default: '0.3'
+  },
+  {
+    name: 'leaveDelay',
+    description: 'Delay (in seconds) from when the pointer leaves the trigger or card until\nthe card closes.',
+    required: false,
+    type: 'number',
+    default: '0.3'
+  },
+  {
+    name: 'arrow',
+    description: 'Render a small arrow pointing at the trigger. Styled to match the panel\nsurface.',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'open',
+    description: '',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'trigger',
+    description: 'Trigger element. Rendered as-child so hover/focus a11y is auto-wired.',
+    type: '{ open: boolean; }'
+  },
+  {
+    name: 'default',
+    description: 'Card contents, rendered inside the standard PopoverPanel shell.',
+    type: 'any'
+  }
+]
+
+  const emitsData = [
+  {
+    name: 'update:open',
+    description: 'Fired when the open state changes.',
+    type: '[value: boolean]'
+  }
+]
+</script>
+## API Reference
+
+<PropsTable name="HoverCard" :data="propsData"/>
+
+<SlotsTable :data="slotsData"/>
+
+<EmitsTable :data="emitsData"/>

package/src/components/HoverCard/HoverCard.cy.ts

@@ -0,0 +1,103 @@
+import { defineComponent, h, ref } from 'vue'
+import HoverCard from './HoverCard.vue'
+import Button from '../Button/Button.vue'
+
+const Slots = {
+  trigger: () => h(Button, { 'data-cy': 'trigger' }, () => 'Hover me'),
+  default: () => h('div', { 'data-cy': 'content' }, 'Card content'),
+}
+
+describe('HoverCard', () => {
+  it('opens on hover after the hoverDelay and renders inside the panel shell', () => {
+    cy.clock()
+    cy.mount(HoverCard, {
+      slots: Slots,
+      props: { hoverDelay: 0.5, leaveDelay: 0.3 },
+    })
+
+    cy.get('[data-slot="content"]').should('not.exist')
+    cy.get('[data-cy="trigger"]').trigger('pointerenter')
+
+    // Still closed before the delay elapses.
+    cy.get('[data-slot="content"]').should('not.exist')
+    cy.tick(500)
+
+    cy.get('[data-slot="content"]').should('exist')
+    cy.get('[data-slot="content"]')
+      .find('[data-slot="content-body"]')
+      .find('[data-cy="content"]')
+      .should('have.text', 'Card content')
+  })
+
+  it('closes when the open model is set back to false', () => {
+    // reka owns the leave-delay timing internally; here we verify the wrapper's
+    // two-way open binding tears the card down when the parent closes it.
+    const Harness = defineComponent({
+      setup() {
+        const open = ref(false)
+        return () =>
+          h('div', [
+            h(
+              Button,
+              {
+                'data-cy': 'toggle',
+                onClick: () => (open.value = !open.value),
+              },
+              () => 'Toggle',
+            ),
+            h(
+              HoverCard,
+              {
+                open: open.value,
+                'onUpdate:open': (value: boolean) => (open.value = value),
+                hoverDelay: 0,
+              },
+              Slots,
+            ),
+          ])
+      },
+    })
+
+    cy.mount(Harness)
+    cy.get('[data-cy="toggle"]').click()
+    cy.get('[data-slot="content"]').should('exist')
+    cy.get('[data-cy="toggle"]').click()
+    cy.get('[data-slot="content"]').should('not.exist')
+  })
+
+  it('positions the card via side + align', () => {
+    cy.clock()
+    cy.mount(HoverCard, {
+      slots: Slots,
+      props: { hoverDelay: 0, side: 'right', align: 'end' },
+    })
+
+    cy.get('[data-cy="trigger"]').trigger('pointerenter')
+    cy.tick(0)
+    cy.get('[data-slot="content"]')
+      .should('have.attr', 'data-side', 'right')
+      .and('have.attr', 'data-align', 'end')
+  })
+
+  it('renders an arrow when arrow is set', () => {
+    cy.clock()
+    cy.mount(HoverCard, { slots: Slots, props: { hoverDelay: 0, arrow: true } })
+
+    cy.get('[data-cy="trigger"]').trigger('pointerenter')
+    cy.tick(0)
+    cy.get('[data-slot="content"]').find('[data-slot="arrow"]').should('exist')
+  })
+
+  it('always uses animated motion for hover opens', () => {
+    cy.clock()
+    cy.mount(HoverCard, { slots: Slots, props: { hoverDelay: 0 } })
+
+    cy.get('[data-cy="trigger"]').trigger('pointerenter')
+    cy.tick(0)
+    cy.get('[data-slot="content-body"]').should(
+      'have.attr',
+      'data-motion',
+      'animated',
+    )
+  })
+})