pimelon-ui 0.1.262 → 0.1.267

package/melon/DataImport/UploadStep.vue

@@ -153,7 +153,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import type { DataImports, DataImport, DocField } from './types'
+import type { DataImports, DataImport, DocField, DocType } from './types'
 import { toast } from "../../src/components/Toast/index"
 import { fieldsToIgnore, getChildTableName, getBadgeColor } from './dataImport'
 import Badge from '../../src/components/Badge/Badge.vue'
@@ -327,20 +327,39 @@ const getExportFields = (type: 'mandatory' | 'all') => {
 }
 
 const getMandatoryFields = () => {
-    let parentDoctype = props.fields.data?.docs.find((doc: any) => doc.name == props.doctype)
-    let exportableFields = parentDoctype.fields.filter((field: DocField) => {
+    let exportableFields: Record<string, string[]> = {}
+    let docs = props.fields.data?.docs || []
+    let referenceDoctype = props.doctype || props.data?.reference_doctype as string
+    let parentDoctype = docs.find((doc: DocType) => doc.name == referenceDoctype)
+
+    let parentFields = parentDoctype.fields.filter((field: DocField) => {
         return !fieldsToIgnore.includes(field.fieldtype) && field.reqd
     }).map((field: DocField) => field.fieldname)
-    exportableFields.unshift('name')
-    return {
-        [props.doctype || props.data?.reference_doctype as string]: exportableFields
-    }
+    parentFields.unshift('name')
+    exportableFields[referenceDoctype] = parentFields
+
+    let childDoctypes = parentDoctype.fields.filter((field: DocField) => {
+        return (field.fieldtype === 'Table' || field.fieldtype === 'Table MultiSelect') && field.reqd
+    })
+
+    childDoctypes.forEach((field: DocField) => {
+        let childDoctype = docs.find((doc: DocType) => doc.name == field.options)
+        if (childDoctype) {
+            let childFields = childDoctype.fields.filter((f: DocField) => {
+                return !fieldsToIgnore.includes(f.fieldtype) && f.reqd
+            }).map((f: DocField) => f.fieldname)
+            childFields.unshift('name')
+            exportableFields[field.fieldname] = childFields
+        }
+    })
+
+    return exportableFields
 }
 
 const getAllFields = () => {
     let doctypeMap: Record<string, string[]> = {}
     let docs = props.fields.data?.docs || []
-    docs.forEach((doc: any) => {
+    docs.forEach((doc: DocType) => {
         let exportableFields = doc.fields.filter((field: DocField) => {
             return !fieldsToIgnore.includes(field.fieldtype)
         }).map((field: DocField) => field.fieldname)

package/melon/DataImport/types.ts

@@ -35,6 +35,12 @@ export interface DocField {
   fieldname: string
   reqd: 0 | 1
   fieldtype: string
+  options?: string
+}
+
+export interface DocType {
+  name: string
+  fields: DocField[]
 }
 
 export interface File {

package/melon/drive/components/RenameDialog.vue

@@ -49,7 +49,7 @@ const open = ref(true)
 const newTitle = ref('')
 const file_ext = ref('')
 
-if (props.entity.is_group || props.entity.document) {
+if (props.entity.is_group || props.entity.doc) {
   newTitle.value = props.entity.title
 } else {
   const parts = props.entity.title.split('.')

package/melon/drive/components/ShareDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <Dialog v-model="open" :options="{ size: 'lg' }">
     <template #body-main>
-      <div class="p-4 sm:px-6">
+      <div class="p-4">
         <!-- Header -->
         <div class="flex w-full justify-between gap-x-2 mb-4">
           <div class="font-semibold text-2xl flex text-nowrap overflow-hidden">
@@ -180,7 +180,7 @@
                 v-if="usersToAdd.length"
                 label="Invite"
                 variant="solid"
-                @click="addPermissions"
+                @click="inviteUsers"
               />
             </div>
           </div>
@@ -338,17 +338,20 @@ watch(
   { immediate: true },
 )
 
-const addPermissions = () => {
+const inviteUsers = () => {
   const access = getAccess(accessToAdd.value)
-  for (const user of usersToAdd.value) {
+  for (let user of usersToAdd.value) {
     const r = {
       entity_name: props.entity.name,
       user,
       ...access,
     }
     props.updateAccess.submit(r)
+    const userObj = filteredUsers.value.find((k) => k.value === user)
+    // For new records
+    if (!userObj.email) userObj.email = userObj.label
     props.usersWithAccess.data.push({
-      ...filteredUsers.value.find((k) => k.value === user),
+      ...userObj,
       ...access,
     })
   }

package/melon/drive/components/TagInput/TagInput.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import {
   TagsInputRoot,
+  TagsInputInput,
   TagsInputItem,
   TagsInputItemText,
   TagsInputItemDelete,
@@ -10,11 +11,13 @@ import Combobox from '../../../../src/components/Combobox/Combobox.vue'
 import { getLabel, getIcon, RenderIcon, getValue } from './utils'
 import { type SimpleOption } from '../../../../src/components/Combobox/types'
 import { TagInputProps } from './types'
+import LucideX from '~icons/lucide/x'
 
 const props = defineProps<TagInputProps>()
-const search = ref('')
 const options = defineModel<SimpleOption[]>('options', { default: [] })
 const modelValue = defineModel<SimpleOption[]>({ default: [] })
+const rerenderCombobox = ref(0)
+
 const optionsWithIcons = computed(() => {
   if (!props.renderIcon) return options.value
   return options.value.map((k) =>
@@ -64,7 +67,7 @@ const filteredOptions = computed(() => {
 function addTag(tag: string) {
   if (!tag) return
   if (!modelValue.value.includes(tag)) modelValue.value.push(tag)
-  search.value = ''
+  rerenderCombobox.value += 1
 }
 
 function removeTag(tag: string) {
@@ -81,33 +84,43 @@ function removeTag(tag: string) {
       v-for="item in selectedTags"
       :key="getValue(item)"
       :value="getValue(item)"
-      class="shadow-sm m-0.25 mr-0 p-1.5 text-sm bg-white flex items-center justify-center gap-1.5 rounded p-0.5 ring-1 ring-outline-gray-1 shadow-xs"
+      class="shadow-sm m-0.25 mr-0 p-1.5 text-sm bg-white flex items-center justify-center gap-1.5 rounded p-0.5 ring-1 ring-outline-gray-2 shadow-xs"
     >
       <RenderIcon :icon="getIcon(item)" />
       <TagsInputItemText class="text-xs text-ink-gray-8">{{
         getLabel(item)
       }}</TagsInputItemText>
       <TagsInputItemDelete
-        class="p-0.5 rounded bg-transparent hover:bg-blackA4"
+        class="p-0.5 rounded-sm bg-transparent hover:bg-surface-gray-1"
         @click="removeTag(getValue(item))"
       >
         <LucideX class="size-3 text-ink-gray-6" />
       </TagsInputItemDelete>
     </TagsInputItem>
-    <!-- fix: keyboard navigation doesn't work -->
-    <Combobox
-      :options="filteredOptions"
-      v-model="search"
-      :placeholder
-      class="flex-1 min-w-[100px] text-xs focus:outline-none"
-      @update:modelValue="addTag"
-      :open-on-click="true"
-      variant="ghost"
-      :hide-trigger="true"
-    >
-      <template #add-email="{ searchTerm }">
-        {{ searchTerm }}
-      </template>
-    </Combobox>
+    <TagsInputInput :as-child="true">
+      <!-- Explicitly set unset type as TagInput passes it in -->
+      <Combobox
+        :key="rerenderCombobox"
+        :options="filteredOptions"
+        type=""
+        :placeholder
+        class="flex-1 min-w-[100px] text-xs focus:outline-none"
+        @update:modelValue="addTag"
+        :open-on-click="true"
+        variant="ghost"
+      >
+        <template #add-email="{ searchTerm }">
+          {{ searchTerm }}
+        </template>
+      </Combobox>
+    </TagsInputInput>
   </TagsInputRoot>
 </template>
+<style>
+[data-state='active'] {
+  background: var(--surface-gray-1);
+}
+[aria-label='Show popup'] {
+  display: none;
+}
+</style>

package/melon/drive/js/resources.js

@@ -68,7 +68,7 @@ export const usersWithAccess = createResource({
 })
 
 export const updateAccess = createResource({
-  url: 'drive.api.files.call_controller_method',
+  url: 'drive.api.files.update_access',
   makeParams: (params) => ({ ...params, method: params.method || 'share' }),
   onError: (error) => toast.error(error.messages[0]),
 })
@@ -96,11 +96,10 @@ export const getTeam = createResource({
 })
 
 export const rename = createResource({
-  url: 'drive.api.files.call_controller_method',
+  url: 'drive.api.files.rename',
   method: 'POST',
   makeParams: (data) => {
     return {
-      method: 'rename',
       ...data,
     }
   },

package/melon/drive/js/utils.js

@@ -52,7 +52,7 @@ function slugger(title) {
   })
 }
 
-const copyToClipboard = (str) => {
+export const copyToClipboard = (str) => {
   if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
     return navigator.clipboard.writeText(str)
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.262",
+  "version": "0.1.267",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,
@@ -111,7 +111,7 @@
     "husky": "^9.1.7",
     "idb-keyval": "^6.2.0",
     "lowlight": "^3.3.0",
-    "lucide-static": "^0.543.0",
+    "lucide-static": "^0.545.0",
     "marked": "^15.0.12",
     "ora": "5.4.1",
     "prettier": "^3.3.2",
@@ -133,6 +133,8 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
+    "cypress": "^15.8.2",
+    "cypress-split": "^1.24.28",
     "jsdom": "^27.4.0",
     "lint-staged": ">=10",
     "msw": "^2.7.0",

package/src/components/Alert/Alert.cy.ts

@@ -0,0 +1,64 @@
+import Alert from './Alert.vue'
+import { h } from 'vue'
+
+const titleTxt = 'some title'
+const description = 'some description'
+const el = '[role="alert"]'
+const themes = ['blue', 'red', 'green']
+
+const TestIcon = {
+  render() {
+    return h('svg', { 'data-cy': 'prefix-icon' })
+  },
+}
+
+describe('Alert', () => {
+  it('Test text', () => {
+    cy.mount(Alert, {
+      props: {
+        title: titleTxt,
+        description: description,
+      },
+    })
+
+    cy.get(`${el} span`).should('have.text', titleTxt)
+    cy.get(`${el} p`).should('have.text', description)
+  })
+
+  it('Themes', () => {
+    themes.forEach((x) => {
+      cy.mount(Alert, {
+        props: { theme: x, title: titleTxt, description: description },
+      })
+
+      cy.get(el).should('have.class', `bg-surface-${x}-2`)
+    })
+  })
+
+  it('Dismiss', () => {
+    cy.mount(Alert)
+    cy.get(el).should('exist')
+    cy.get(`${el} button`).click()
+    cy.get(el).should('not.exist')
+  })
+
+  it('Non Dismissable', () => {
+    cy.mount(Alert, { props: { dismissable: false } })
+    cy.get(`${el} button`).should('not.exist')
+  })
+
+  it('Icon slot', () => {
+    cy.mount(Alert, {
+      slots: { icon: TestIcon },
+    })
+    cy.get('[data-cy="prefix-icon"]').should('exist')
+  })
+
+  it('Footer slot', () => {
+    cy.mount(Alert, {
+      slots: { footer: h('div', { id: 'footer' }, 'some footer') },
+    })
+
+    cy.get(`${el} #footer`).should('exist')
+  })
+})

package/src/components/Avatar/Avatar.cy.ts

@@ -0,0 +1,47 @@
+import Avatar from './Avatar.vue'
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
+
+const sizeHeights = {
+  xs: '4',
+  sm: '5',
+  md: '6',
+  lg: '7',
+  xl: '8',
+  '2xl': '10',
+  '3xl': '11.5',
+}
+
+const defaultProps = {
+  'data-cy': 'avatar',
+  image: 'https://avatars.githubusercontent.com/u/499550',
+  label: 'Abc',
+}
+
+describe('Avatar', () => {
+  it('Renders', () => {
+    cy.mount(Avatar, {
+      props: defaultProps,
+    })
+
+    cy.get('[data-cy="avatar"]').should('exist')
+  })
+
+  it('Sizes', () => {
+    sizes.forEach((x) => {
+      cy.mount(Avatar, {
+        props: { ...defaultProps, size: x },
+      })
+
+      cy.get('[data-cy="avatar"]').should('have.class', 'h-' + sizeHeights[x])
+    })
+  })
+
+  it('Name', () => {
+    cy.mount(Avatar, {
+      props: { 'data-cy': 'avatar', label: 'Abc' },
+    })
+
+    cy.get('[data-cy="avatar"]').should('have.text', 'A')
+  })
+})

package/src/components/Badge/Badge.cy.ts

@@ -0,0 +1,273 @@
+import Badge from './Badge.vue'
+import { h } from 'vue'
+
+describe('<Badge />', () => {
+  it('renders default badge', () => {
+    cy.mount(Badge, {
+      slots: {
+        default: 'Default',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('contain.text', 'Default')
+    // Default theme is gray, variant is subtle
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-2')
+  })
+
+  it('renders label prop', () => {
+    cy.mount(Badge, {
+      props: {
+        label: 'Badge Label',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.text', 'Badge Label')
+  })
+
+  it('renders different themes with subtle variant', () => {
+    // Gray (default)
+    cy.mount(Badge, {
+      props: {
+        theme: 'gray',
+        label: 'Gray',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-2')
+
+    // Blue
+    cy.mount(Badge, {
+      props: {
+        theme: 'blue',
+        label: 'Blue',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-blue-2')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-blue-2')
+
+    // Green
+    cy.mount(Badge, {
+      props: {
+        theme: 'green',
+        label: 'Green',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-green-3')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-green-2')
+
+    // Orange
+    cy.mount(Badge, {
+      props: {
+        theme: 'orange',
+        label: 'Orange',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-3')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-1')
+
+    // Red
+    cy.mount(Badge, {
+      props: {
+        theme: 'red',
+        label: 'Red',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-red-4')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-red-2')
+  })
+
+  it('renders different variants with gray theme', () => {
+    // Solid
+    cy.mount(Badge, {
+      props: {
+        variant: 'solid',
+        label: 'Solid',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-white')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-7')
+
+    // Subtle (default)
+    cy.mount(Badge, {
+      props: {
+        variant: 'subtle',
+        label: 'Subtle',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-2')
+
+    // Outline
+    cy.mount(Badge, {
+      props: {
+        variant: 'outline',
+        label: 'Outline',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-transparent')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'border-outline-gray-1')
+
+    // Ghost
+    cy.mount(Badge, {
+      props: {
+        variant: 'ghost',
+        label: 'Ghost',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-transparent')
+  })
+
+  it('renders different sizes', () => {
+    // Small
+    cy.mount(Badge, {
+      props: {
+        size: 'sm',
+        label: 'Small',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'h-4')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-xs')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'px-1.5')
+
+    // Medium (default)
+    cy.mount(Badge, {
+      props: {
+        size: 'md',
+        label: 'Medium',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'h-5')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-xs')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'px-1.5')
+
+    // Large
+    cy.mount(Badge, {
+      props: {
+        size: 'lg',
+        label: 'Large',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'h-6')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-sm')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'px-2')
+  })
+
+  it('renders prefix slot', () => {
+    const TestIcon = {
+      render() {
+        return h('svg', { 'data-cy': 'prefix-icon' })
+      },
+    }
+
+    cy.mount(Badge, {
+      props: { label: 'With Icon' },
+      slots: {
+        prefix: () => h(TestIcon),
+      },
+    })
+
+    cy.get('[data-cy="prefix-icon"]').should('exist')
+    cy.get('.inline-flex.rounded-full').should('contain.text', 'With Icon')
+  })
+
+  it('renders suffix slot', () => {
+    const TestIcon = {
+      render() {
+        return h('svg', { 'data-cy': 'suffix-icon' })
+      },
+    }
+
+    cy.mount(Badge, {
+      props: { label: 'With Icon' },
+      slots: {
+        suffix: () => h(TestIcon),
+      },
+    })
+
+    cy.get('[data-cy="suffix-icon"]').should('exist')
+    cy.get('.inline-flex.rounded-full').should('contain.text', 'With Icon')
+  })
+
+  it('renders both prefix and suffix slots', () => {
+    const PrefixIcon = {
+      render() {
+        return h('svg', { 'data-cy': 'prefix-icon' })
+      },
+    }
+
+    const SuffixIcon = {
+      render() {
+        return h('svg', { 'data-cy': 'suffix-icon' })
+      },
+    }
+
+    cy.mount(Badge, {
+      props: { label: 'With Icons' },
+      slots: {
+        prefix: () => h(PrefixIcon),
+        suffix: () => h(SuffixIcon),
+      },
+    })
+
+    cy.get('[data-cy="prefix-icon"]').should('exist')
+    cy.get('[data-cy="suffix-icon"]').should('exist')
+    cy.get('.inline-flex.rounded-full').should('contain.text', 'With Icons')
+  })
+
+  it('supports numeric label', () => {
+    cy.mount(Badge, {
+      props: {
+        label: 42,
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.text', '42')
+  })
+
+  it('has correct layout classes', () => {
+    cy.mount(Badge, {
+      props: {
+        label: 'Test',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'inline-flex')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'items-center')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'rounded-full')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'whitespace-nowrap')
+  })
+
+  it('renders prefix slot with correct size constraints', () => {
+    const TestIcon = {
+      render() {
+        return h('svg', { 'data-cy': 'prefix-icon', class: 'w-4 h-4' })
+      },
+    }
+
+    // Test with sm size
+    cy.mount(Badge, {
+      props: { label: 'SM', size: 'sm' },
+      slots: {
+        prefix: () => h(TestIcon),
+      },
+    })
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-4')
+
+    // Test with md size (default)
+    cy.mount(Badge, {
+      props: { label: 'MD', size: 'md' },
+      slots: {
+        prefix: () => h(TestIcon),
+      },
+    })
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-4')
+
+    // Test with lg size
+    cy.mount(Badge, {
+      props: { label: 'LG', size: 'lg' },
+      slots: {
+        prefix: () => h(TestIcon),
+      },
+    })
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-6')
+  })
+})