frappe-ui 0.1.148 → 0.1.149

package/frappe/Help/HelpModal.vue

@@ -53,7 +53,7 @@
   </div>
 </template>
 <script setup>
-import Dropdown from '../../src/components/Dropdown.vue'
+import Dropdown from '../../src/components/Dropdown/Dropdown.vue'
 import Button from '../../src/components/Button/Button.vue'
 import StepsIcon from '../Icons/StepsIcon.vue'
 import MinimizeIcon from '../Icons/MinimizeIcon.vue'

package/frappe/HelpCenter/HelpCenter.vue

@@ -64,7 +64,7 @@
 <script setup>
 import Button from '../../src/components/Button/Button.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
-import TextInput from '../../src/components/TextInput.vue'
+import TextInput from '../../src/components/TextInput/TextInput.vue'
 import { ref, computed, onMounted } from 'vue'
 
 const props = defineProps({

package/frappe/Onboarding/IntermediateStepModal.vue

@@ -26,7 +26,7 @@
   </Dialog>
 </template>
 <script setup>
-import Dialog from '../../src/components/Dialog.vue'
+import { Dialog } from '../../src/components/Dialog'
 import { computed } from 'vue'
 
 const props = defineProps({

package/frappe/Onboarding/OnboardingSteps.vue

@@ -79,7 +79,7 @@
 import { useOnboarding } from './onboarding'
 import Tooltip from '../../src/components/Tooltip/Tooltip.vue'
 import Button from '../../src/components/Button/Button.vue'
-import Badge from '../../src/components/Badge.vue'
+import Badge from '../../src/components/Badge/Badge.vue'
 
 const props = defineProps({
   appName: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.148",
+  "version": "0.1.149",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",

package/src/components/{Alert.vue → Alert/Alert.vue}

@@ -38,11 +38,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-
-interface AlertProps {
-  title?: string
-  type?: 'warning'
-}
+import type { AlertProps } from './types'
 
 const props = withDefaults(defineProps<AlertProps>(), {
   type: 'warning',

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.vue'
+export type { AlertProps } from './types.ts'

package/src/components/Alert/types.ts

@@ -0,0 +1,4 @@
+export interface AlertProps {
+  title?: string
+  type?: 'warning'
+}

package/src/components/{Autocomplete.vue → Autocomplete/Autocomplete.vue}

@@ -206,49 +206,16 @@ import {
   ComboboxOptions,
 } from '@headlessui/vue'
 import { computed, nextTick, ref, watch } from 'vue'
-import Popover from './Popover.vue'
-import { Button } from './Button'
-import FeatherIcon from './FeatherIcon.vue'
-import LoadingIndicator from './LoadingIndicator.vue'
-
-type Option = {
-  label: string
-  value: OptionValue
-  description?: string
-  [key: string]: any
-}
-
-type OptionValue = string | number | boolean
-
-type AutocompleteOption = OptionValue | Option
-
-type AutocompleteOptionGroup = {
-  group: string
-  items: AutocompleteOption[]
-  hideLabel?: boolean
-}
-
-type AutocompleteOptions = AutocompleteOption[] | AutocompleteOptionGroup[]
-
-type AutocompleteProps = {
-  label?: string
-  options: AutocompleteOptions
-  hideSearch?: boolean
-  placeholder?: string
-  bodyClasses?: string | string[]
-  loading?: boolean
-  placement?: string
-  showFooter?: boolean
-} & (
-  | {
-      multiple: true
-      modelValue?: AutocompleteOption[] | null
-    }
-  | {
-      multiple?: false
-      modelValue?: AutocompleteOption | null
-    }
-)
+import { Popover } from '../Popover'
+import { Button } from '../Button'
+import FeatherIcon from '../FeatherIcon.vue'
+import LoadingIndicator from '../LoadingIndicator.vue'
+import type {
+  AutocompleteOptionGroup,
+  AutocompleteOption,
+  AutocompleteProps,
+  Option,
+} from './types'
 
 const props = withDefaults(defineProps<AutocompleteProps>(), {
   multiple: false,

package/src/components/Autocomplete/index.ts

@@ -0,0 +1,2 @@
+export { default as Autocomplete } from './Autocomplete.vue'
+export type { AutocompleteProps } from './types'

package/src/components/Autocomplete/types.ts

@@ -0,0 +1,38 @@
+type OptionValue = string | number | boolean
+
+export type Option = {
+  label: string
+  value: OptionValue
+  description?: string
+  [key: string]: any
+}
+
+export type AutocompleteOption = OptionValue | Option
+
+export type AutocompleteOptionGroup = {
+  group: string
+  items: AutocompleteOption[]
+  hideLabel?: boolean
+}
+
+type AutocompleteOptions = AutocompleteOption[] | AutocompleteOptionGroup[]
+
+export type AutocompleteProps = {
+  label?: string
+  options: AutocompleteOptions
+  hideSearch?: boolean
+  placeholder?: string
+  bodyClasses?: string | string[]
+  loading?: boolean
+  placement?: string
+  showFooter?: boolean
+} & (
+  | {
+      multiple: true
+      modelValue?: AutocompleteOption[] | null
+    }
+  | {
+      multiple?: false
+      modelValue?: AutocompleteOption | null
+    }
+)

package/src/components/{Avatar.vue → Avatar/Avatar.vue}

@@ -38,16 +38,10 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import type { AvatarProps } from './types'
 
 const imgFetchError = ref(false)
 
-interface AvatarProps {
-  image?: string
-  label?: string
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
-  shape?: 'circle' | 'square'
-}
-
 const props = withDefaults(defineProps<AvatarProps>(), {
   size: 'md',
   shape: 'circle',

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar.vue'
+export type { AvatarProps } from './types'

package/src/components/Avatar/types.ts

@@ -0,0 +1,6 @@
+export interface AvatarProps {
+  image?: string
+  label?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+  shape?: 'circle' | 'square'
+}

package/src/components/{Badge.vue → Badge/Badge.vue}

@@ -21,17 +21,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-
-interface Label {
-  toString(): string
-}
-
-interface BadgeProps {
-  theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'
-  size?: 'sm' | 'md' | 'lg'
-  variant?: 'solid' | 'subtle' | 'outline' | 'ghost'
-  label?: Label | string | number
-}
+import type { BadgeProps } from './types'
 
 const props = withDefaults(defineProps<BadgeProps>(), {
   theme: 'gray',

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.vue'
+export type { BadgeProps } from './types'

package/src/components/Badge/types.ts

@@ -0,0 +1,10 @@
+interface Label {
+  toString(): string
+}
+
+export interface BadgeProps {
+  theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'solid' | 'subtle' | 'outline' | 'ghost'
+  label?: Label | string | number
+}

package/src/components/{Breadcrumbs.vue → Breadcrumbs/Breadcrumbs.vue}

@@ -78,20 +78,10 @@
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
 import { computed } from 'vue'
-import { RouterLinkProps, useRouter } from 'vue-router'
-import Dropdown from '../components/Dropdown.vue'
-import { Button } from './Button'
-
-interface BreadcrumbItem {
-  label: string
-  route?: RouterLinkProps['to']
-  onClick?: () => void
-  [key: string]: any
-}
-
-interface BreadcrumbsProps {
-  items: BreadcrumbItem[]
-}
+import { useRouter } from 'vue-router'
+import { Dropdown } from '../Dropdown'
+import { Button } from '../Button'
+import type { BreadcrumbsProps } from './types'
 
 const props = defineProps<BreadcrumbsProps>()
 

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from './Breadcrumbs.vue'
+export type { BreadcrumbsProps } from './types'

package/src/components/Breadcrumbs/types.ts

@@ -0,0 +1,12 @@
+import { RouterLinkProps } from 'vue-router'
+
+interface BreadcrumbItem {
+  label: string
+  route?: RouterLinkProps['to']
+  onClick?: () => void
+  [key: string]: any
+}
+
+export interface BreadcrumbsProps {
+  items: BreadcrumbItem[]
+}

package/src/components/Button/Button.vue

@@ -52,29 +52,11 @@
   </button>
 </template>
 <script lang="ts" setup>
-import { computed, useSlots, type Component } from 'vue'
+import { computed, useSlots } from 'vue'
 import FeatherIcon from '../FeatherIcon.vue'
 import LoadingIndicator from '../LoadingIndicator.vue'
-import { useRouter, type RouteLocation } from 'vue-router'
-
-type Theme = 'gray' | 'blue' | 'green' | 'red'
-type Size = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-type Variant = 'solid' | 'subtle' | 'outline' | 'ghost'
-
-export interface ButtonProps {
-  theme?: Theme
-  size?: Size
-  variant?: Variant
-  label?: string
-  icon?: string | Component
-  iconLeft?: string | Component
-  iconRight?: string | Component
-  loading?: boolean
-  loadingText?: string
-  disabled?: boolean
-  route?: RouteLocation
-  link?: string
-}
+import { useRouter } from 'vue-router'
+import type { ButtonProps, ThemeVariant } from './types'
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   theme: 'gray',
@@ -134,7 +116,6 @@ const buttonClasses = computed(() => {
     ghost: ghostClasses,
   }[props.variant]
 
-  type ThemeVariant = `${Theme}-${Variant}`
   let themeVariant: ThemeVariant = `${props.theme}-${props.variant}`
 
   let disabledClassesMap: Record<ThemeVariant, string> = {

package/src/components/Button/index.ts

@@ -1 +1,2 @@
-export { default as Button, type ButtonProps } from './Button.vue'
+export { default as Button } from './Button.vue'
+export type { ButtonProps } from './types'

package/src/components/Button/types.ts

@@ -0,0 +1,23 @@
+import { type RouteLocation } from 'vue-router'
+import { type Component } from 'vue'
+
+type Theme = 'gray' | 'blue' | 'green' | 'red'
+type Size = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+type Variant = 'solid' | 'subtle' | 'outline' | 'ghost'
+
+export interface ButtonProps {
+  theme?: Theme
+  size?: Size
+  variant?: Variant
+  label?: string
+  icon?: string | Component
+  iconLeft?: string | Component
+  iconRight?: string | Component
+  loading?: boolean
+  loadingText?: string
+  disabled?: boolean
+  route?: RouteLocation
+  link?: string
+}
+
+export type ThemeVariant = `${Theme}-${Variant}`

package/src/components/{Calendar.story.md → Calendar/Calendar.story.md}

@@ -2,8 +2,7 @@
 
 ### events
 
-`events` is an array of objects, where each object consists of a single event.
-By default the value of events props is an empty array `[]`
+`events` is an array of objects, where each object consists of a single event. By default the value of events props is an empty array `[]`
 
 A single event can be of 2 types
 
@@ -25,9 +24,7 @@ Event object looks like:
 
 - `id` should be unique for each event.
 
-- `fromDate` and `toDate` should be in the above format or can be a date object.
-  Currently Single date event is created and it is taken from fromDate. In
-  future multiple day events will also be introduced.
+- `fromDate` and `toDate` should be in the above format or can be a date object. Currently Single date event is created and it is taken from fromDate. In future multiple day events will also be introduced.
 
 - `color` can be from a list of
 
@@ -69,31 +66,17 @@ The object for this kind of event looks like:
 
     }
 
-- `disableModes`: This is an array of strings which consists of the modes which
-  are to be disabled. The default value is an empty array. If the value is
-  ['Day'] then the Day mode will be disabled and the user will not be able to
-  switch to the Day mode. Only the Week and Month mode will be available.
+- `disableModes`: This is an array of strings which consists of the modes which are to be disabled. The default value is an empty array. If the value is ['Day'] then the Day mode will be disabled and the user will not be able to switch to the Day mode. Only the Week and Month mode will be available.
 
-- `defaultMode`: This is the default mode in which the calendar will be loaded.
-  The default value is 'Month'. It can be one of the following values:
+- `defaultMode`: This is the default mode in which the calendar will be loaded. The default value is 'Month'. It can be one of the following values:
 
       - Day
       - Week
       - Month
 
-- `isEditMode`: This is a boolean value which is used to enable or disable the
-  edit mode. The default value is false. So by default the calendar is in
-  read-only mode. If it is set to true then the user can perform actions like
-  adding, editing, and deleting the events.
+- `isEditMode`: This is a boolean value which is used to enable or disable the edit mode. The default value is false. So by default the calendar is in read-only mode. If it is set to true then the user can perform actions like adding, editing, and deleting the events.
 
-- `eventIcons`: This is an object which consists of the icons which are to be
-  displayed for the events. The default value is an empty object. This objects
-  changes the icon of the event on the basis of the type of event. If the type
-  of event is not present in the object then the default icon will be displayed.
-  `type_of_event` property can be set in the event object to display the icon.
-  The icon of the event will be taken from this object. So if your event has an
-  event type of "Call" then the icon will be taken from this object. The object
-  should be in the following format:
+- `eventIcons`: This is an object which consists of the icons which are to be displayed for the events. The default value is an empty object. This objects changes the icon of the event on the basis of the type of event. If the type of event is not present in the object then the default icon will be displayed. `type_of_event` property can be set in the event object to display the icon. The icon of the event will be taken from this object. So if your event has an event type of "Call" then the icon will be taken from this object. The object should be in the following format:
 
       {
       	'type_of_event1': 'icon_component1',
@@ -107,42 +90,27 @@ e.g.
     	'Meeting': <MeetingIcon />,
     }
 
-- `redundantCellHeight`: The height of the cell to display full day events. This
-  value is in Pixel, by default the value is `50px`.
-- `hourHeight`: The height of each cell below the full day events cell. This
-  value is in pixel, by default the value is `50px`.
-- `enableShortcuts`: Boolean value which determines whether shortcuts will be
-  enabled or not. By default the value is true i.e. shortcuts will be enabled,
-  can be disabled by setting it to false, currently the calendar supports
-  shortcuts like
-
-  - Navigating between views: By pressing M(monthly), W(weekly), D(daily), you
-    can navigate between the views.
-  - Navigating inside a view: By pressing right arrow(→) or left arrow(←) key on
-    your keyboard you can navigate inside a view.
-  - Delete: When an event is focused you can press the delete button to delete
-    the event.
-
-- `showIcon`: Boolean value which determines whether the icon will be displayed
-  or not in the Event. By default the value is true i.e. icon will be displayed,
-  can be disabled by setting it to false.
-
-- Many functional props are also there which will be discussed in the below
-  sections.
+- `redundantCellHeight`: The height of the cell to display full day events. This value is in Pixel, by default the value is `50px`.
+- `hourHeight`: The height of each cell below the full day events cell. This value is in pixel, by default the value is `50px`.
+- `enableShortcuts`: Boolean value which determines whether shortcuts will be enabled or not. By default the value is true i.e. shortcuts will be enabled, can be disabled by setting it to false, currently the calendar supports shortcuts like
+
+  - Navigating between views: By pressing M(monthly), W(weekly), D(daily), you can navigate between the views.
+  - Navigating inside a view: By pressing right arrow(→) or left arrow(←) key on your keyboard you can navigate inside a view.
+  - Delete: When an event is focused you can press the delete button to delete the event.
+
+- `showIcon`: Boolean value which determines whether the icon will be displayed or not in the Event. By default the value is true i.e. icon will be displayed, can be disabled by setting it to false.
+
+- Many functional props are also there which will be discussed in the below sections.
 
 ## Custom API Integrations
 
-To integrate the calendar with your API, you need to pass the following
-functions as emits to the Calendar component:
+To integrate the calendar with your API, you need to pass the following functions as emits to the Calendar component:
 
-- create: This function is called when a new event is created from the UI. The
-  first argument in the function is the new event created.
+- create: This function is called when a new event is created from the UI. The first argument in the function is the new event created.
 
-- update: This function is called when an existing event is updated. The first
-  argument in the function is an object which has the updated event.
+- update: This function is called when an existing event is updated. The first argument in the function is an object which has the updated event.
 
-- delete: This function is called when an existing event is deleted. The first
-  argument in the function is the id of the event to be deleted.
+- delete: This function is called when an existing event is deleted. The first argument in the function is the id of the event to be deleted.
 
 e.g.
 
@@ -154,23 +122,19 @@ e.g.
     	@delete="(eventID) => console.log('deleteEvent', eventID)"
     />
 
-In these functions, you can set up your API calls to create, update, and delete
-events.
+In these functions, you can set up your API calls to create, update, and delete events.
 
 ## Calendar Click Events
 
-1. Single Click any event to get additional data of the event via Popover,
-   edit/delete the event from the popover.
+1. Single Click any event to get additional data of the event via Popover, edit/delete the event from the popover.
 
 2. Double Click any cell to create a new event.
 
-3. Double Click any Event to edit an event. When an event is updated the update
-   function is called (mentioned above)
+3. Double Click any Event to edit an event. When an event is updated the update function is called (mentioned above)
 
 ## Custom Calendar Click Events
 
-If you wish to handle clicks on your own, the Calendar provides 3 functions to
-handle clicks via props.
+If you wish to handle clicks on your own, the Calendar provides 3 functions to handle clicks via props.
 
 <Calendar
 		:config="config"
@@ -182,8 +146,7 @@ handle clicks via props.
 
 `Note: while using custom click events, the create, update & delete prop functions will not be triggered.`
 
-- `onClick`: The function is triggered when an event is clicked. In the callback
-  function you receive an argument which is an object and it looks like this:
+- `onClick`: The function is triggered when an event is clicked. In the callback function you receive an argument which is an object and it looks like this:
 
       {
       	e:MouseEvent,
@@ -191,12 +154,9 @@ handle clicks via props.
       }
 
   - e: this key represent the MouseEvent.
-  - calendarEvent: This key is an object, the object of calendarEvent is
-    displayed above
+  - calendarEvent: This key is an object, the object of calendarEvent is displayed above
 
-- `onDblClick`: The function is triggered when an event is double clicked. In
-  the callback function you receive an argument which is an object and it looks
-  like this:
+- `onDblClick`: The function is triggered when an event is double clicked. In the callback function you receive an argument which is an object and it looks like this:
 
       {
       	e:MouseEvent,
@@ -204,12 +164,9 @@ handle clicks via props.
       }
 
   - e: this key represent the MouseEvent.
-  - calendarEvent: This key is an object, the object of calendarEvent is
-    displayed above
+  - calendarEvent: This key is an object, the object of calendarEvent is displayed above
 
-- `onCellDblClick`: The function is triggered when a cell is double clicked. In
-  the callback function you receive an argument which is an object and it looks
-  like this:
+- `onCellDblClick`: The function is triggered when a cell is double clicked. In the callback function you receive an argument which is an object and it looks like this:
 
       {
       	e:MouseEvent,
@@ -220,16 +177,12 @@ handle clicks via props.
 
   - e: this key represent the MouseEvent.
   - date: Date Object, which has the date of the cell which was double clicked.
-  - time: String, ranges from "00:00" to "23:00", where the cell was clicked in
-    the grid that time value will be displayed over here. (Note, this will be
-    empty in Month view)
+  - time: String, ranges from "00:00" to "23:00", where the cell was clicked in the grid that time value will be displayed over here. (Note, this will be empty in Month view)
   - view: String, shows the view in which the event was triggered.
 
 ## Custom Header
 
-If you wish to create your own header instead of the default header, you can use
-a slot called "header". It can be implemented in a way shown in the story with
-variant "custom-header".
+If you wish to create your own header instead of the default header, you can use a slot called "header". It can be implemented in a way shown in the story with variant "custom-header".
 
 ```
  <template #header="{ currentMonthYear, enabledModes, activeView, decrement, increment, updateActiveView }">
@@ -238,15 +191,9 @@ variant "custom-header".
 
 The header slot return 6 props:
 
-1. `currentMonthYear`: String, returns the current month and the current year.
-   e.g. August, 2024
-2. `enabledModes`: Array of Objects, returns the enabled modes which can be
-   configured using "config" prop.
-3. `decrement`: Function, returns a function which allows user to navigate to
-   previous month/week/day in the current view.
-4. `increment`: Function, returns a function which allows user to navigate to
-   next month/week/day in the current view.
-5. `activeView`: String, returns the current view of the calendar. This can be
-   used as modelValue.
-6. `updateActiveView`: Function, this function can be used to update the current
-   view of the calendar.
+1. `currentMonthYear`: String, returns the current month and the current year. e.g. August, 2024
+2. `enabledModes`: Array of Objects, returns the enabled modes which can be configured using "config" prop.
+3. `decrement`: Function, returns a function which allows user to navigate to previous month/week/day in the current view.
+4. `increment`: Function, returns a function which allows user to navigate to next month/week/day in the current view.
+5. `activeView`: String, returns the current view of the calendar. This can be used as modelValue.
+6. `updateActiveView`: Function, this function can be used to update the current view of the calendar.

package/src/components/{Calendar.story.vue → Calendar/Calendar.story.vue}

@@ -63,9 +63,9 @@
 </template>
 <script setup>
 import { ref } from 'vue'
-import Calendar from './Calendar/Calendar.vue'
+import Calendar from './Calendar.vue'
 import { logEvent } from 'histoire/client'
-import TabButtons from './TabButtons.vue'
+import { TabButtons } from '../TabButtons'
 
 const config = {
   defaultMode: 'Month',

package/src/components/Calendar/Calendar.vue

@@ -85,7 +85,7 @@
 <script setup>
 import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
 import { Button } from '../Button'
-import TabButtons from '../TabButtons.vue'
+import { TabButtons } from '../TabButtons'
 import {
   getCalendarDates,
   monthList,

package/src/components/Calendar/NewEventModal.vue

@@ -97,9 +97,9 @@
 </template>
 <script setup>
 import { computed, inject, reactive, ref } from 'vue'
-import Dialog from '../Dialog.vue'
-import FormControl from '../FormControl.vue'
-import ErrorMessage from '../ErrorMessage.vue'
+import { Dialog } from '../Dialog'
+import { FormControl } from '../FormControl'
+import { ErrorMessage } from '../ErrorMessage'
 import { Button } from '../Button'
 
 import { calculateDiff, colorMap, handleSeconds } from './calendarUtils'

package/src/components/{Checkbox.vue → Checkbox/Checkbox.vue}

@@ -28,17 +28,9 @@
 </template>
 <script lang="ts" setup>
 import { computed, useAttrs } from 'vue'
-import { useId } from '../utils/useId'
+import { useId } from '../../utils/useId'
+import type { CheckboxProps } from './types'
 
-interface CheckboxProps {
-  size?: 'sm' | 'md'
-  label?: string
-  checked?: boolean
-  disabled?: boolean
-  padding?: boolean
-  modelValue?: boolean | 1 | 0
-  id?: string
-}
 const props = withDefaults(defineProps<CheckboxProps>(), {
   size: 'sm',
   padding: false,

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox.vue'
+export type { CheckboxProps } from './types'