frappe-ui 0.1.220 → 0.1.223

package/frappe/Link/Link.vue

@@ -9,6 +9,7 @@
       @focus="() => loadOptions('')"
       :open-on-focus="true"
       v-bind="attrsWithoutClassStyle"
+      :variant="props.variant"
     >
       <template #create-new="{ searchTerm }">
         <LucidePlus class="size-4 mr-2" />
@@ -32,6 +33,7 @@ import LucidePlus from '~icons/lucide/plus'
 const props = withDefaults(defineProps<LinkProps>(), {
   label: '',
   filters: () => ({}),
+  variant: 'subtle',
 })
 const model = defineModel<string | null>({ default: '' })
 const emit = defineEmits<{

package/frappe/Link/types.ts

@@ -1,5 +1,8 @@
+import { ComboboxVariant } from '../../src/components/Combobox/types'
+
 export interface LinkProps {
   doctype: string
+  variant?: ComboboxVariant
   label?: string
   placeholder?: string
   filters?: Record<string, string | [string, string]>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.220",
+  "version": "0.1.223",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,
@@ -38,7 +38,10 @@
     "./style.css": {
       "import": "./src/style.css"
     },
-    "./tsconfig.base.json": "./tsconfig.base.json"
+    "./tsconfig.base.json": {
+      "default": "./tsconfig.base.json",
+      "types": "./tsconfig.base.json"
+    }
   },
   "files": [
     "frappe",

package/src/components/Combobox/Combobox.vue

@@ -281,9 +281,13 @@ const reset = () => {
 }
 
 const variantClasses = computed(() => {
+  const borderCss =
+    'border focus-within:border-outline-gray-4 focus-within:ring-2 focus-within:ring-outline-gray-3'
+
   return {
-    subtle: 'bg-surface-gray-2 hover:bg-surface-gray-3 border-transparent',
-    outline: 'border-outline-gray-2',
+    subtle: `${borderCss} bg-surface-gray-2 hover:bg-surface-gray-3 border-transparent`,
+    outline: `${borderCss} border-outline-gray-2`,
+    ghost: '',
   }[props.variant]
 })
 
@@ -302,7 +306,7 @@ defineExpose({
       :open="isOpen"
     >
       <ComboboxAnchor
-        class="flex h-7 w-full items-center justify-between gap-2 rounded px-2 py-1 transition-colors border focus-within:border-outline-gray-4 focus-within:ring-2 focus-within:ring-outline-gray-3"
+        class="flex h-7 w-full items-center justify-between gap-2 rounded px-2 py-1 transition-colors"
         :class="{
           'opacity-50 pointer-events-none': disabled,
           [variantClasses]: true,

package/src/components/Combobox/types.ts

@@ -1,5 +1,7 @@
 import type { Component, VNode } from 'vue'
 
+export type ComboboxVariant = 'subtle' | 'outline' | 'ghost'
+
 export type SelectableOption = {
   type?: 'option'
   label: string
@@ -26,7 +28,7 @@ export type GroupedOption = { group: string; options: SimpleOption[] }
 export type ComboboxOption = SimpleOption | GroupedOption
 
 export interface ComboboxProps {
-  variant?: 'subtle' | 'outline'
+  variant?: ComboboxVariant
   options: Array<ComboboxOption>
   modelValue?: string | null
   placeholder?: string

package/src/components/Select/Select.vue

@@ -77,7 +77,7 @@ const selectClasses = computed(() => {
 const selectOptions = computed(() => {
   const str = typeof props.options?.[0] == 'string'
   const tmp = props.options?.map((x) => ({ label: x, value: x }))
-  return (str ? tmp : props.options)?.filter(Boolean) || []
+  return (str ? tmp : props.options)?.filter((x) => x && x.value) || []
 })
 </script>