frappe-ui 0.1.197 → 0.1.199

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/src/components/Combobox/Combobox.vue +1 -1
  3. package/src/components/Combobox/types.ts +1 -0
  4. package/src/components/Dialog/Dialog.vue +2 -2
  5. package/src/components/Dropdown/Dropdown.story.vue +1 -0
  6. package/src/components/Dropdown/Dropdown.vue +60 -15
  7. package/src/components/Dropdown/types.ts +1 -0
  8. package/src/components/ListView/ListEmptyState.vue +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frappe-ui",
3
- "version": "0.1.197",
3
+ "version": "0.1.199",
4
4
  "description": "A set of components and utilities for rapid UI development",
5
5
  "main": "./src/index.ts",
6
6
  "type": "module",
package/src/components/Combobox/Combobox.vue CHANGED
@@ -311,7 +311,7 @@ defineExpose({
311
311
  position="popper"
312
312
  @openAutoFocus.prevent
313
313
  @closeAutoFocus.prevent
314
- :align="'start'"
314
+ :align="props.placement || 'start'"
315
315
  >
316
316
  <ComboboxViewport
317
317
  class="max-h-60 overflow-auto pb-1.5"
package/src/components/Combobox/types.ts CHANGED
@@ -32,4 +32,5 @@ export interface ComboboxProps {
32
32
  disabled?: boolean
33
33
  openOnFocus?: boolean
34
34
  openOnClick?: boolean
35
+ placement?: 'start' | 'center' | 'end'
35
36
  }
package/src/components/Dialog/Dialog.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <DialogRoot v-model:open="isOpen" @update:open="handleOpenChange">
3
3
  <DialogPortal>
4
4
  <DialogOverlay
5
- class="fixed inset-0 bg-black-overlay-200 backdrop-filter backdrop-blur-[12px] overflow-y-auto dialog-overlay"
5
+ class="fixed inset-0 bg-black-overlay-200 backdrop-filter backdrop-blur-[12px] overflow-y-auto dialog-overlay outline-none"
6
6
  :data-dialog="options.title"
7
7
  @after-leave="$emit('after-leave')"
8
8
  >
@@ -11,7 +11,7 @@
11
11
  :class="dialogPositionClasses"
12
12
  >
13
13
  <DialogContent
14
- class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl dialog-content"
14
+ class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl dialog-content focus-visible:outline-none"
15
15
  :class="{
16
16
  'max-w-7xl': options.size === '7xl',
17
17
  'max-w-6xl': options.size === '6xl',
package/src/components/Dropdown/Dropdown.story.vue CHANGED
@@ -173,6 +173,7 @@ const switchActions = [
173
173
  label: 'Lock',
174
174
  icon: 'lock',
175
175
  switch: true,
176
+ switchValue: true,
176
177
  onClick: (val) => console.log('Lock switch value:', val),
177
178
  },
178
179
  {
package/src/components/Dropdown/Dropdown.vue CHANGED
@@ -31,14 +31,28 @@
31
31
  </DropdownMenuLabel>
32
32
 
33
33
  <template v-for="item in group.items" :key="item.label">
34
- <Switch
35
- v-if="item.switch"
36
- class="!px-2 !py-0 h-7"
37
- :label="item.label"
38
- label-classes="font-normal cursor-pointer"
39
- :icon="item.icon"
40
- @change="item.onClick?.($event)"
41
- />
34
+ <div v-if="item.switch" :class="cssClasses.itemButton">
35
+ <FeatherIcon
36
+ v-if="item.icon && typeof item.icon === 'string'"
37
+ :name="item.icon"
38
+ :class="[cssClasses.itemIcon, getIconColor(item)]"
39
+ aria-hidden="true"
40
+ />
41
+ <component
42
+ :class="[cssClasses.itemIcon, getIconColor(item)]"
43
+ v-else-if="item.icon"
44
+ :is="item.icon"
45
+ />
46
+ <span :class="[cssClasses.itemLabel, getTextColor(item)]">
47
+ {{ item.label }}
48
+ </span>
49
+ <Switch
50
+ class="ml-auto"
51
+ label-classes="font-normal cursor-pointer"
52
+ @change="item.onClick?.($event)"
53
+ :model-value="item.switchValue || false"
54
+ />
55
+ </div>
42
56
  <DropdownMenuItem v-else as-child @select="item.onClick">
43
57
  <slot v-if="$slots.item" name="item" v-bind="{ item, close }" />
44
58
  <component
@@ -100,14 +114,45 @@
100
114
  v-for="subItem in submenuGroup.items"
101
115
  :key="subItem.label"
102
116
  >
103
- <Switch
117
+ <div
104
118
  v-if="subItem.switch"
105
- class="!px-2 !py-0 h-7"
106
- :label="subItem.label"
107
- label-classes="font-normal cursor-pointer"
108
- :icon="subItem.icon"
109
- @change="subItem.onClick?.($event)"
110
- />
119
+ :class="cssClasses.itemButton"
120
+ >
121
+ <FeatherIcon
122
+ v-if="
123
+ subItem.icon && typeof subItem.icon === 'string'
124
+ "
125
+ :name="subItem.icon"
126
+ :class="[
127
+ cssClasses.itemIcon,
128
+ getIconColor(subItem),
129
+ ]"
130
+ aria-hidden="true"
131
+ />
132
+ <component
133
+ :class="[
134
+ cssClasses.itemIcon,
135
+ getIconColor(subItem),
136
+ ]"
137
+ v-else-if="subItem.icon"
138
+ :is="subItem.icon"
139
+ />
140
+ <span
141
+ :class="[
142
+ cssClasses.itemLabel,
143
+ getTextColor(subItem),
144
+ ]"
145
+ >
146
+ {{ subItem.label }}
147
+ </span>
148
+ <Switch
149
+ class="ml-auto"
150
+ label-classes="font-normal cursor-pointer"
151
+ @change="subItem.onClick?.($event)"
152
+ :model-value="subItem.switchValue || false"
153
+ />
154
+ </div>
155
+
111
156
  <DropdownMenuItem
112
157
  v-else
113
158
  as-child
package/src/components/Dropdown/types.ts CHANGED
@@ -6,6 +6,7 @@ export type DropdownOption = {
6
6
  label: string
7
7
  icon?: string | Component | null
8
8
  switch?: boolean
9
+ switchValue?: boolean
9
10
  theme?: 'gray' | 'red'
10
11
  component?: any
11
12
  onClick?: (val: any) => void
package/src/components/ListView/ListEmptyState.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  class="flex h-full w-full flex-col items-center justify-center text-base"
4
4
  >
5
5
  <slot>
6
- <div class="text-xl font-medium">{{ list.options.emptyState.title }}</div>
6
+ <div class="text-xl font-medium text-ink-gray-8 mt-6">{{ list.options.emptyState.title }}</div>
7
7
  <div class="mt-1 text-base text-ink-gray-5">
8
8
  {{ list.options.emptyState.description }}
9
9
  </div>