frappe-ui 0.1.196 → 0.1.198

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frappe-ui",
3
- "version": "0.1.196",
3
+ "version": "0.1.198",
4
4
  "description": "A set of components and utilities for rapid UI development",
5
5
  "main": "./src/index.ts",
6
6
  "type": "module",
@@ -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
  >
@@ -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
  {
@@ -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
@@ -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
@@ -66,7 +66,9 @@
66
66
  </template>
67
67
 
68
68
  <script setup lang="ts">
69
- import { Popover, TextInput } from 'frappe-ui'
69
+ import Popover from '../Popover/Popover.vue'
70
+ import TextInput from '../TextInput/TextInput.vue'
71
+ import FeatherIcon from '../FeatherIcon.vue'
70
72
  import { ref, computed, watch, nextTick } from 'vue'
71
73
  import type {
72
74
  Option,