frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/ListView/ListView.api.md

@@ -4,7 +4,7 @@
   import SlotsTable from '@/components/Docs/SlotsTable.vue'
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 
-  const propsData = [
+  const listViewProps = [
   {
     name: 'options',
     description: '',
@@ -34,7 +34,7 @@
   }
 ]
 
-  const slotsData = [
+  const listViewSlots = [
   {
     name: 'default',
     description: '',
@@ -42,7 +42,7 @@
   }
 ]
 
-  const emitsData = [
+  const listViewEmits = [
   {
     name: 'update:selections',
     description: 'Fired when the selections changes.',
@@ -54,12 +54,328 @@
     type: 'any[]'
   }
 ]
+
+  const listEmptyStateSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  }
+]
+
+  const listFooterProps = [
+  {
+    name: 'modelValue',
+    description: '',
+    required: false,
+    type: 'number',
+    default: '20'
+  },
+  {
+    name: 'options',
+    description: '',
+    required: false,
+    type: 'Record<string, any>',
+    default: '{\n    rowCount: 0,\n    totalCount: 0,\n    pageLengthOptions: [20, 50, 100],\n}'
+  }
+]
+
+  const listFooterSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  },
+  {
+    name: 'left',
+    description: '',
+    type: '{}'
+  },
+  {
+    name: 'right',
+    description: '',
+    type: '{}'
+  }
+]
+
+  const listFooterEmits = [
+  {
+    name: 'update:modelValue',
+    description: 'Fired when the model value changes.',
+    type: 'any[]'
+  },
+  {
+    name: 'loadMore',
+    description: '',
+    type: 'any[]'
+  }
+]
+
+  const listGroupHeaderProps = [
+  {
+    name: 'group',
+    description: '',
+    required: true,
+    type: 'Record<string, any>'
+  }
+]
+
+  const listGroupHeaderSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  }
+]
+
+  const listGroupRowsProps = [
+  {
+    name: 'group',
+    description: '',
+    required: true,
+    type: 'Record<string, any>'
+  }
+]
+
+  const listGroupRowsSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  }
+]
+
+  const listGroupsSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  },
+  {
+    name: 'group-header',
+    description: '',
+    type: '{ group: any; }'
+  }
+]
+
+  const listHeaderSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  }
+]
+
+  const listHeaderEmits = [
+  {
+    name: 'columnWidthUpdated',
+    description: '',
+    type: 'any[]'
+  }
+]
+
+  const listHeaderItemProps = [
+  {
+    name: 'debounce',
+    description: '',
+    required: false,
+    type: 'number',
+    default: '1000'
+  },
+  {
+    name: 'item',
+    description: '',
+    required: true,
+    type: 'Record<string, any>'
+  }
+]
+
+  const listHeaderItemSlots = [
+  {
+    name: 'prefix',
+    description: '',
+    type: '{ item: Record<string, any>; }'
+  },
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  },
+  {
+    name: 'suffix',
+    description: '',
+    type: '{ item: Record<string, any>; }'
+  },
+  {
+    name: 'resizer',
+    description: '',
+    type: '{ item: Record<string, any>; }'
+  }
+]
+
+  const listHeaderItemEmits = [
+  {
+    name: 'columnWidthUpdated',
+    description: '',
+    type: 'any[]'
+  }
+]
+
+  const listRowProps = [
+  {
+    name: 'row',
+    description: '',
+    required: true,
+    type: 'Record<string, any>'
+  }
+]
+
+  const listRowSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{ idx: any; column: any; item: any; isActive: any; }'
+  }
+]
+
+  const listRowItemProps = [
+  {
+    name: 'align',
+    description: '',
+    required: false,
+    type: 'string',
+    default: '\'left\''
+  },
+  {
+    name: 'item',
+    description: '',
+    required: false,
+    type: 'string | number | Record<string, any>',
+    default: '\'\''
+  },
+  {
+    name: 'row',
+    description: '',
+    required: false,
+    type: 'Record<string, any>',
+    default: '{}'
+  },
+  {
+    name: 'column',
+    description: '',
+    required: false,
+    type: 'Record<string, any>',
+    default: '{}'
+  }
+]
+
+  const listRowItemSlots = [
+  {
+    name: 'prefix',
+    description: '',
+    type: '{}'
+  },
+  {
+    name: 'default',
+    description: '',
+    type: '{ label: any; }'
+  },
+  {
+    name: 'suffix',
+    description: '',
+    type: '{}'
+  }
+]
+
+  const listRowsSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  }
+]
+
+  const listSelectBannerSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{ selections: any; allRowsSelected: any; selectAll: () => any; unselectAll: () => any; }'
+  },
+  {
+    name: 'actions',
+    description: '',
+    type: '{ selections: any; allRowsSelected: any; selectAll: () => any; unselectAll: () => any; }'
+  }
+]
 </script>
 ## API Reference
 
-<PropsTable name="ListView" :data="propsData"/> 
+### ListView
+
+<PropsTable name="ListView" :data="listViewProps"/>
+
+<SlotsTable :data="listViewSlots"/>
+
+<EmitsTable :data="listViewEmits"/>
+
+### ListEmptyState
+
+<SlotsTable :data="listEmptyStateSlots"/>
+
+### ListFooter
+
+<PropsTable folder="ListView" name="ListFooter" :data="listFooterProps"/>
+
+<SlotsTable :data="listFooterSlots"/>
+
+<EmitsTable :data="listFooterEmits"/>
+
+### ListGroupHeader
+
+<PropsTable folder="ListView" name="ListGroupHeader" :data="listGroupHeaderProps"/>
+
+<SlotsTable :data="listGroupHeaderSlots"/>
+
+### ListGroupRows
+
+<PropsTable folder="ListView" name="ListGroupRows" :data="listGroupRowsProps"/>
+
+<SlotsTable :data="listGroupRowsSlots"/>
+
+### ListGroups
+
+<SlotsTable :data="listGroupsSlots"/>
+
+### ListHeader
+
+<SlotsTable :data="listHeaderSlots"/>
+
+<EmitsTable :data="listHeaderEmits"/>
+
+### ListHeaderItem
+
+<PropsTable folder="ListView" name="ListHeaderItem" :data="listHeaderItemProps"/>
+
+<SlotsTable :data="listHeaderItemSlots"/>
+
+<EmitsTable :data="listHeaderItemEmits"/>
+
+### ListRow
+
+<PropsTable folder="ListView" name="ListRow" :data="listRowProps"/>
+
+<SlotsTable :data="listRowSlots"/>
+
+### ListRowItem
+
+<PropsTable folder="ListView" name="ListRowItem" :data="listRowItemProps"/>
+
+<SlotsTable :data="listRowItemSlots"/>
+
+### ListRows
 
-<SlotsTable :data="slotsData"/> 
+<SlotsTable :data="listRowsSlots"/>
 
-<EmitsTable :data="emitsData"/> 
+### ListSelectBanner
 
+<SlotsTable :data="listSelectBannerSlots"/>

package/src/components/ListView/index.ts

@@ -0,0 +1,25 @@
+// Legacy ListView family. Do not deprecate until `frappe-ui/list` reaches parity.
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListEmptyState } from './ListEmptyState.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListFooter } from './ListFooter.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListGroupHeader } from './ListGroupHeader.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListGroupRows } from './ListGroupRows.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListGroups } from './ListGroups.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListHeader } from './ListHeader.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListHeaderItem } from './ListHeaderItem.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListRow } from './ListRow.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListRowItem } from './ListRowItem.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListRows } from './ListRows.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as ListSelectBanner } from './ListSelectBanner.vue'
+// @ts-expect-error Legacy JS SFC kept until `frappe-ui/list` reaches parity.
+export { default as List, default as ListView } from './ListView.vue'

package/src/components/ListView/stories/CustomList.vue

@@ -39,7 +39,7 @@ const custom_rows = [
       image: 'https://avatars.githubusercontent.com/u/499120',
     },
     email: 'jane@doe.com',
-    status: { label: 'Inactive', bg_color: 'bg-surface-red-5' },
+    status: { label: 'Inactive', bg_color: 'bg-surface-red-7' },
     role: { label: 'HR', color: 'red' },
   },
 ]

package/src/components/ListView/stories/GroupedRows.vue

@@ -144,7 +144,7 @@ const grouped_rows = ref([
     row-key="id"
   >
     <template #group-header="{ group }">
-      <span class="text-base font-medium leading-6 text-ink-gray-9">
+      <span class="text-base-medium leading-6 text-ink-gray-9">
         {{ group.group }} ({{ group.rows.length }})
       </span>
     </template>

package/src/components/LoadingIndicator.vue

@@ -1,26 +1,17 @@
 <template>
-  <svg
-    class="max-w-xs animate-spin"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    :style="`scale: ${scale}%;`"
-    viewBox="0 0 24 24"
-  >
-    <circle
-      class="opacity-25"
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      stroke-width="4"
-    ></circle>
-    <path
-      class="opacity-75"
-      fill="currentColor"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    ></path>
-  </svg>
+  <Spinner :style="scaleStyle" />
 </template>
+
 <script setup lang="ts">
-defineProps({ scale: { required: false, default: 100 } })
+import { computed } from 'vue'
+import Spinner from './Spinner/Spinner.vue'
+
+// Thin wrapper kept for backward compatibility: it forwards sizing/color
+// classes through to the new Spinner. Size and color come from the
+// width/height and text-color classes the caller passes.
+const props = withDefaults(defineProps<{ scale?: number }>(), { scale: 100 })
+
+const scaleStyle = computed(() =>
+  props.scale === 100 ? undefined : { scale: `${props.scale}%` },
+)
 </script>

package/src/components/LoadingText.vue

@@ -3,19 +3,9 @@
     <LoadingIndicator class="-ml-1 mr-2 h-3 w-3" /> {{ text }}
   </div>
 </template>
-<script>
+
+<script setup lang="ts">
 import LoadingIndicator from './LoadingIndicator.vue'
 
-export default {
-  name: 'Loading',
-  props: {
-    text: {
-      type: String,
-      default: 'Loading...',
-    },
-  },
-  components: {
-    LoadingIndicator,
-  },
-}
+withDefaults(defineProps<{ text?: string }>(), { text: 'Loading...' })
 </script>