-
-
diff --git a/docs/demos/table/DemoTableColumnFormatter.vue b/docs/demos/table/DemoTableColumnFormatter.vue
index 66644784..4b3545fd 100644
--- a/docs/demos/table/DemoTableColumnFormatter.vue
+++ b/docs/demos/table/DemoTableColumnFormatter.vue
@@ -1,33 +1,7 @@
-
- {{ col.name }}
+ {{ col.name }}
diff --git a/docs/demos/table/DemoTableSorting.vue b/docs/demos/table/DemoTableSorting.vue
index 864d4e34..b8d43f0c 100644
--- a/docs/demos/table/DemoTableSorting.vue
+++ b/docs/demos/table/DemoTableSorting.vue
@@ -1,35 +1,19 @@
(q, fakeDatabase, [
+ 'id',
+ 'name',
+ 'username',
+ 'email',
+ {
+ name: 'address',
+ filterBy: (val: User['address'], q: string, item: User) => {
+ const _q = q.toLocaleLowerCase()
+
+ return val.street.toLocaleLowerCase().includes(_q) || val.street.toLocaleLowerCase().includes(_q)
+ },
+ },
+ 'phone',
+ 'website',
+ {
+ name: 'company',
+ filterBy: (val: User['company'], q: string, item: User) => {
+ const _q = q.toLocaleLowerCase()
+
+ return val.name.toLocaleLowerCase().includes(_q) || val.bs.toLocaleLowerCase().includes(_q)
+ },
+ },
+ ])
+
+ // Sorting logic
+ const { results } = useSort(
+ filteredData.value,
+ (() => {
+ const colsSortBy: typeSortBy = []
+
+ sortedCols.forEach(col => {
+ if (col.sortBy !== undefined)
+ colsSortBy.push({ name: col.name, isAsc: col.sortBy === 'asc' })
+ })
+
+ return colsSortBy
+ })(),
+ )
+
+ const _currentPage = currentPage || 1
+
+ const paginatedRows = results.value.slice((_currentPage - 1) * rowsPerPage, _currentPage * rowsPerPage)
+
+ resolve({
+ data: { rows: paginatedRows, total: results.value.length },
+ })
+ }, 150)
+ })
+}
diff --git a/docs/guide/base-components/typography.md b/docs/guide/base-components/typography.md
index be2df310..7d107de4 100644
--- a/docs/guide/base-components/typography.md
+++ b/docs/guide/base-components/typography.md
@@ -4,8 +4,6 @@ import api from '@anu/component-meta/ATypography.json';
# Typography
-
-
::::card Basic
diff --git a/docs/guide/components/badge.md b/docs/guide/components/badge.md
index f7b5d223..72736b86 100644
--- a/docs/guide/components/badge.md
+++ b/docs/guide/components/badge.md
@@ -17,7 +17,7 @@ Default variant for badge is `standard`
Use the prop `content` to pass numeric values, if you want to use other data different than a number use the slot `content` instead
:::code DemoBadgeContent
-<<< @/demos/badge/DemoBadgeContent.vue{4,15,20}
+<<< @/demos/badge/DemoBadgeContent.vue{3,8}
:::
::::
diff --git a/docs/guide/components/card.md b/docs/guide/components/card.md
index dd89e25d..0db4114c 100644
--- a/docs/guide/components/card.md
+++ b/docs/guide/components/card.md
@@ -63,7 +63,7 @@ You can use `ATypography` slots to render custom content in header.
::::
:::tip
-Above demo adds content to the right of title. If you want to add content on the right of both title & subtitle use `headerRight` slot.
+Above demo adds content to the right of title. If you want to add content on the right of both title & subtitle use `header-right` slot.
:::
diff --git a/docs/guide/components/drawer.md b/docs/guide/components/drawer.md
index 6805c8bb..1b9953b6 100644
--- a/docs/guide/components/drawer.md
+++ b/docs/guide/components/drawer.md
@@ -1,5 +1,5 @@
# Drawer
@@ -31,7 +31,7 @@ You can change the position of the drawer by providing the values `left`ã`righ
::::card Width
-Use width utility classes to provide custom width to drawer. e.g. `w-[400px]`.
+Use width utility classes to provide custom width to drawer. e.g. `!w-[400px]`.
:::code DemoDrawerWidth
<<< @/demos/drawer/DemoDrawerWidth.vue{12}
diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md
index 8f063633..c4f7c459 100644
--- a/docs/guide/components/table.md
+++ b/docs/guide/components/table.md
@@ -4,35 +4,37 @@ import api from '@anu/component-meta/ATable.json';
# Table
+Anu provides two variations for table component:
+
+1. `ATable` - Use this lightweight table for simply rendering rows & columns. This also support rending custom column content via slot & allow adding extra columns.
+2. `ADataTable` - This table provide advanced features like sorting, searching & pagination. You can use this table to render the data from API. This component is build on top of `ATable` component.
+
::::card Basic
-Use `rows` prop to provide data to `ATable`. Defining columns for table is optional. When columns aren't specified, columns will get calculate from first row and all columns will be filterable and sortable.
+You can create basic table that renders the rows & columns using `ATable` component.
+
+Use `rows` prop to provide data to `ATable`. Defining columns for table is optional. When columns aren't specified via prop, columns will get calculate from first row.
:::code DemoTableBasic
-<<< @/demos/table/DemoTableBasic.vue{33}
+<<< @/demos/table/DemoTableBasic.vue{7}
:::
::::
-
-::::card Column Definition
-
-You can use `columns` prop to define columns for the table.
+:::details Demo data
+In all table demos uses data for rows from below file.
-:::code DemoTableColumnDefinition
-<<< @/demos/table/DemoTableColumnDefinition.vue{30-34,41}
+<<< @/demos/table/data.ts
:::
-::::
-
::::card Column Formatter
Use `formatter` property while defining column to format the column text.
:::code DemoTableColumnFormatter
-<<< @/demos/table/DemoTableColumnFormatter.vue{32}
+<<< @/demos/table/DemoTableColumnFormatter.vue{6}
:::
::::
@@ -45,7 +47,20 @@ Use `formatter` property while defining column to format the column text.
It also generates scoped slot based on your column name for rendering custom column. If your column name is `website` then you can use `col-website` scoped slot to render custom content in your column.
:::code DemoTableSlots
-<<< @/demos/table/DemoTableSlots.vue{35-39,42-47}
+<<< @/demos/table/DemoTableSlots.vue{8-14,16-22}
+:::
+
+::::
+
+
+::::card Extra Column
+
+Define extra column in column definition to add column to table. Later, you can use column slot `col-` to render your custom content.
+
+Moreover, you can also omit the column definition to omit rendering the specific column.
+
+:::code DemoTableExtraColumn
+<<< @/demos/table/DemoTableExtraColumn.vue{17-41}
:::
::::
@@ -58,7 +73,7 @@ Set `search` prop to `true` to enable table filtering.
Search will respect the column's `isFilterable` property to include or exclude the column from searching. If you don't specify column definition all columns will be filterable.
:::code DemoTableFiltering
-<<< @/demos/table/DemoTableFiltering.vue{35}
+<<< @/demos/table/DemoTableFiltering.vue{9}
:::
::::
@@ -73,20 +88,7 @@ To disable sorting on table use set `isSortable` prop to `false` on `ATable`.
Moreover, You can also sort multiple columns at once. You can enable it by setting `multiSort` prop to `true` on `ATable`.
:::code DemoTableSorting
-<<< @/demos/table/DemoTableSorting.vue
-:::
-
-::::
-
-
-::::card Extra Column
-
-Define extra column in column definition to add column to table. Later, you can use column slot `row-` to render your custom content.
-
-Moreover, you can also omit the column definition to omit rendering the specific column.
-
-:::code DemoTableExtraColumn
-<<< @/demos/table/DemoTableExtraColumn.vue{33,43-67}
+<<< @/demos/table/DemoTableSorting.vue{4-8,15}
:::
::::
@@ -103,21 +105,17 @@ interface rowsFunctionReturn {
}
```
-```ts{6}
+```ts{5}
const fetchRows = ({ q, currentPage, rowsPerPage, sortedCols }) => {
// You can use => q, currentPage, rowsPerPage, sortedCols
- return new Promise((resolve, reject) => {
- fetch('https://jsonplaceholder.typicode.com/users')
+ return fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
- .then(json => resolve(json))
-
- // resolve(json) => { rows: [...], total: 10 }
- })
+ .then(json => ({ rows: json, total: json.length }))
}
```
:::code DemoTableServerSideTable
-<<< @/demos/table/DemoTableServerSideTable.vue{277-334,340}
+<<< @/demos/table/DemoTableServerSideTable.vue{14,26-33,43}
:::
::::
diff --git a/docs/package.json b/docs/package.json
index 6fb67311..b95ff5ad 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -26,7 +26,7 @@
},
"dependencies": {
"@anu-vue/preset-theme-default": "workspace:*",
- "@vueuse/core": "^9.7.0",
+ "@vueuse/core": "^9.9.0",
"anu-vue": "workspace:*",
"vee-validate": "^4.7.3",
"vue": "^3.2.45"
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index a4ed93a1..9fd2d3df 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -14,7 +14,7 @@
"scripthost"
],
"paths": {
- "@anu-vue/*": [
+ "@anu/*": [
"../packages/anu-vue/*"
]
}
diff --git a/package.json b/package.json
index f76277b7..62ca514c 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,12 @@
"devDependencies": {
"@antfu/eslint-config-vue": "^0.31.1",
"@antfu/ni": "^0.18.8",
- "@types/node": "^18.11.15",
- "@typescript-eslint/eslint-plugin": "^5.46.1",
- "@typescript-eslint/parser": "^5.46.1",
+ "@types/node": "^18.11.17",
+ "@typescript-eslint/eslint-plugin": "^5.47.0",
+ "@typescript-eslint/parser": "^5.47.0",
+ "@vue-macros/volar": "^0.5.6",
"bumpp": "^8.2.1",
- "eslint": "^8.29.0",
+ "eslint": "^8.30.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-import-resolver-typescript": "^3.5.2",
"eslint-plugin-eslint-comments": "^3.2.0",
@@ -35,13 +36,15 @@
"eslint-plugin-unicorn": "^45.0.2",
"eslint-plugin-vue": "^9.8.0",
"fast-glob": "^3.2.12",
- "pnpm": "^7.18.2",
+ "fs-extra": "^11.1.0",
+ "globby": "^13.1.3",
+ "pnpm": "^7.19.0",
"rimraf": "^3.0.2",
- "taze": "^0.8.4",
+ "taze": "^0.8.5",
"tsx": "^3.12.1",
"typescript": "^4.9.4",
"unbuild": "^1.0.2",
- "vue-component-meta": "^1.0.13"
+ "vue-component-meta": "^1.0.16"
},
"packageManager": "pnpm@7.18.0"
}
diff --git a/packages/anu-nuxt/package.json b/packages/anu-nuxt/package.json
index 045db5a3..f709614d 100644
--- a/packages/anu-nuxt/package.json
+++ b/packages/anu-nuxt/package.json
@@ -37,10 +37,11 @@
"dev": "pnpm dev:prepare && nuxi dev playground",
"dev:build": "nuxi build playground",
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+ "gen-imports": "na tsx ../../scripts/update-nuxt.ts",
"prepublishOnly": "npm run build"
},
"dependencies": {
- "@css-render/vue3-ssr": "^0.15.11",
+ "@css-render/vue3-ssr": "^0.15.12",
"@nuxt/kit": "^3.0.0",
"anu-vue": "workspace:*",
"defu": "^6.1.1"
diff --git a/packages/anu-nuxt/src/module.ts b/packages/anu-nuxt/src/module.ts
index 15302a6e..e6ff484c 100644
--- a/packages/anu-nuxt/src/module.ts
+++ b/packages/anu-nuxt/src/module.ts
@@ -35,7 +35,7 @@ export default defineNuxtModule({
addPlugin({ src: resolve('./runtime/plugin') })
// Add auto-imported components
- AnuComponentNames.map(name =>
+ anuComponentNames.map(name =>
addComponent({
name,
export: name,
@@ -46,13 +46,13 @@ export default defineNuxtModule({
addImportsSources([
{
from: 'anu-vue',
- imports: [...AnuUIHooks],
+ imports: anuComposables,
},
])
},
})
-const AnuComponentNames = [
+const anuComponentNames = [
'AAlert',
'AAvatar',
'ABadge',
@@ -61,12 +61,15 @@ const AnuComponentNames = [
'ACard',
'ACheckbox',
'AChip',
+ 'ADataTable',
'ADialog',
'ADrawer',
'AInput',
'AList',
+ 'AListItem',
'AMenu',
'ARadio',
+ 'ARating',
'ASelect',
'ASwitch',
'ATable',
@@ -74,8 +77,18 @@ const AnuComponentNames = [
'ATypography',
]
-const AnuUIHooks = [
- '',
+const anuComposables = [
+ 'useConfigurable',
+ 'useDOMScrollLock',
+ 'useGroupModel',
+ 'useInternalState',
+ 'useLayer',
+ 'useProps',
+ 'useSearch',
+ 'useSort',
+ 'useSpacing',
+ 'useTeleport',
+ 'useTypography',
]
declare module '@nuxt/schema' {
diff --git a/packages/anu-vue/auto-imports.d.ts b/packages/anu-vue/auto-imports.d.ts
new file mode 100644
index 00000000..c49c81a5
--- /dev/null
+++ b/packages/anu-vue/auto-imports.d.ts
@@ -0,0 +1,261 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+ const EffectScope: typeof import('vue')['EffectScope']
+ const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+ const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+ const computed: typeof import('vue')['computed']
+ const computedAsync: typeof import('@vueuse/core')['computedAsync']
+ const computedEager: typeof import('@vueuse/core')['computedEager']
+ const computedInject: typeof import('@vueuse/core')['computedInject']
+ const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+ const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+ const controlledRef: typeof import('@vueuse/core')['controlledRef']
+ const createApp: typeof import('vue')['createApp']
+ const createEventHook: typeof import('@vueuse/core')['createEventHook']
+ const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+ const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+ const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+ const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+ const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+ const customRef: typeof import('vue')['customRef']
+ const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+ const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+ const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+ const defineComponent: typeof import('vue')['defineComponent']
+ const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+ const effectScope: typeof import('vue')['effectScope']
+ const extendRef: typeof import('@vueuse/core')['extendRef']
+ const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+ const getCurrentScope: typeof import('vue')['getCurrentScope']
+ const h: typeof import('vue')['h']
+ const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+ const inject: typeof import('vue')['inject']
+ const isDefined: typeof import('@vueuse/core')['isDefined']
+ const isProxy: typeof import('vue')['isProxy']
+ const isReactive: typeof import('vue')['isReactive']
+ const isReadonly: typeof import('vue')['isReadonly']
+ const isRef: typeof import('vue')['isRef']
+ const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+ const markRaw: typeof import('vue')['markRaw']
+ const nextTick: typeof import('vue')['nextTick']
+ const onActivated: typeof import('vue')['onActivated']
+ const onBeforeMount: typeof import('vue')['onBeforeMount']
+ const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+ const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+ const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+ const onDeactivated: typeof import('vue')['onDeactivated']
+ const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+ const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+ const onLongPress: typeof import('@vueuse/core')['onLongPress']
+ const onMounted: typeof import('vue')['onMounted']
+ const onRenderTracked: typeof import('vue')['onRenderTracked']
+ const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+ const onScopeDispose: typeof import('vue')['onScopeDispose']
+ const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+ const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+ const onUnmounted: typeof import('vue')['onUnmounted']
+ const onUpdated: typeof import('vue')['onUpdated']
+ const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+ const provide: typeof import('vue')['provide']
+ const reactify: typeof import('@vueuse/core')['reactify']
+ const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+ const reactive: typeof import('vue')['reactive']
+ const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+ const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+ const reactivePick: typeof import('@vueuse/core')['reactivePick']
+ const readonly: typeof import('vue')['readonly']
+ const ref: typeof import('vue')['ref']
+ const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+ const refDebounced: typeof import('@vueuse/core')['refDebounced']
+ const refDefault: typeof import('@vueuse/core')['refDefault']
+ const refThrottled: typeof import('@vueuse/core')['refThrottled']
+ const refWithControl: typeof import('@vueuse/core')['refWithControl']
+ const resolveComponent: typeof import('vue')['resolveComponent']
+ const resolveDirective: typeof import('vue')['resolveDirective']
+ const resolveRef: typeof import('@vueuse/core')['resolveRef']
+ const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+ const shallowReactive: typeof import('vue')['shallowReactive']
+ const shallowReadonly: typeof import('vue')['shallowReadonly']
+ const shallowRef: typeof import('vue')['shallowRef']
+ const syncRef: typeof import('@vueuse/core')['syncRef']
+ const syncRefs: typeof import('@vueuse/core')['syncRefs']
+ const templateRef: typeof import('@vueuse/core')['templateRef']
+ const throttledRef: typeof import('@vueuse/core')['throttledRef']
+ const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+ const toRaw: typeof import('vue')['toRaw']
+ const toReactive: typeof import('@vueuse/core')['toReactive']
+ const toRef: typeof import('vue')['toRef']
+ const toRefs: typeof import('vue')['toRefs']
+ const triggerRef: typeof import('vue')['triggerRef']
+ const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+ const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+ const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+ const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+ const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+ const unref: typeof import('vue')['unref']
+ const unrefElement: typeof import('@vueuse/core')['unrefElement']
+ const until: typeof import('@vueuse/core')['until']
+ const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+ const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+ const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+ const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+ const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+ const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+ const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+ const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+ const useArraySome: typeof import('@vueuse/core')['useArraySome']
+ const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+ const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+ const useAttrs: typeof import('vue')['useAttrs']
+ const useBase64: typeof import('@vueuse/core')['useBase64']
+ const useBattery: typeof import('@vueuse/core')['useBattery']
+ const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+ const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+ const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+ const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+ const useCached: typeof import('@vueuse/core')['useCached']
+ const useClipboard: typeof import('@vueuse/core')['useClipboard']
+ const useCloned: typeof import('@vueuse/core')['useCloned']
+ const useColorMode: typeof import('@vueuse/core')['useColorMode']
+ const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+ const useCounter: typeof import('@vueuse/core')['useCounter']
+ const useCssModule: typeof import('vue')['useCssModule']
+ const useCssVar: typeof import('@vueuse/core')['useCssVar']
+ const useCssVars: typeof import('vue')['useCssVars']
+ const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+ const useCycleList: typeof import('@vueuse/core')['useCycleList']
+ const useDark: typeof import('@vueuse/core')['useDark']
+ const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+ const useDebounce: typeof import('@vueuse/core')['useDebounce']
+ const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+ const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+ const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+ const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+ const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+ const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+ const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+ const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+ const useDraggable: typeof import('@vueuse/core')['useDraggable']
+ const useDropZone: typeof import('@vueuse/core')['useDropZone']
+ const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+ const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+ const useElementHover: typeof import('@vueuse/core')['useElementHover']
+ const useElementSize: typeof import('@vueuse/core')['useElementSize']
+ const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+ const useEventBus: typeof import('@vueuse/core')['useEventBus']
+ const useEventListener: typeof import('@vueuse/core')['useEventListener']
+ const useEventSource: typeof import('@vueuse/core')['useEventSource']
+ const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+ const useFavicon: typeof import('@vueuse/core')['useFavicon']
+ const useFetch: typeof import('@vueuse/core')['useFetch']
+ const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+ const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+ const useFocus: typeof import('@vueuse/core')['useFocus']
+ const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+ const useFps: typeof import('@vueuse/core')['useFps']
+ const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+ const useGamepad: typeof import('@vueuse/core')['useGamepad']
+ const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+ const useIdle: typeof import('@vueuse/core')['useIdle']
+ const useImage: typeof import('@vueuse/core')['useImage']
+ const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+ const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+ const useInterval: typeof import('@vueuse/core')['useInterval']
+ const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+ const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+ const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+ const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+ const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+ const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+ const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+ const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+ const useMemoize: typeof import('@vueuse/core')['useMemoize']
+ const useMemory: typeof import('@vueuse/core')['useMemory']
+ const useMounted: typeof import('@vueuse/core')['useMounted']
+ const useMouse: typeof import('@vueuse/core')['useMouse']
+ const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+ const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+ const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+ const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+ const useNetwork: typeof import('@vueuse/core')['useNetwork']
+ const useNow: typeof import('@vueuse/core')['useNow']
+ const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+ const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+ const useOnline: typeof import('@vueuse/core')['useOnline']
+ const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+ const useParallax: typeof import('@vueuse/core')['useParallax']
+ const usePermission: typeof import('@vueuse/core')['usePermission']
+ const usePointer: typeof import('@vueuse/core')['usePointer']
+ const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+ const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+ const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
+ const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+ const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+ const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+ const useRafFn: typeof import('@vueuse/core')['useRafFn']
+ const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+ const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+ const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+ const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+ const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+ const useScroll: typeof import('@vueuse/core')['useScroll']
+ const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+ const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+ const useShare: typeof import('@vueuse/core')['useShare']
+ const useSlots: typeof import('vue')['useSlots']
+ const useSorted: typeof import('@vueuse/core')['useSorted']
+ const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+ const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+ const useStepper: typeof import('@vueuse/core')['useStepper']
+ const useStorage: typeof import('@vueuse/core')['useStorage']
+ const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+ const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+ const useSupported: typeof import('@vueuse/core')['useSupported']
+ const useSwipe: typeof import('@vueuse/core')['useSwipe']
+ const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+ const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+ const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+ const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+ const useThrottle: typeof import('@vueuse/core')['useThrottle']
+ const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+ const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+ const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+ const useTimeout: typeof import('@vueuse/core')['useTimeout']
+ const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+ const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+ const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+ const useTitle: typeof import('@vueuse/core')['useTitle']
+ const useToNumber: typeof import('@vueuse/core')['useToNumber']
+ const useToString: typeof import('@vueuse/core')['useToString']
+ const useToggle: typeof import('@vueuse/core')['useToggle']
+ const useTransition: typeof import('@vueuse/core')['useTransition']
+ const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+ const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+ const useVModel: typeof import('@vueuse/core')['useVModel']
+ const useVModels: typeof import('@vueuse/core')['useVModels']
+ const useVibrate: typeof import('@vueuse/core')['useVibrate']
+ const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+ const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+ const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+ const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+ const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+ const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+ const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+ const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+ const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+ const watch: typeof import('vue')['watch']
+ const watchArray: typeof import('@vueuse/core')['watchArray']
+ const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+ const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+ const watchEffect: typeof import('vue')['watchEffect']
+ const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+ const watchOnce: typeof import('@vueuse/core')['watchOnce']
+ const watchPausable: typeof import('@vueuse/core')['watchPausable']
+ const watchPostEffect: typeof import('vue')['watchPostEffect']
+ const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+ const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+ const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+ const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+ const whenever: typeof import('@vueuse/core')['whenever']
+}
diff --git a/packages/anu-vue/package.json b/packages/anu-vue/package.json
index d41cb1d0..e3073ca3 100644
--- a/packages/anu-vue/package.json
+++ b/packages/anu-vue/package.json
@@ -37,15 +37,17 @@
],
"types": "./dist/types",
"scripts": {
- "dev": "pnpm gen-comp-meta && vite build --watch",
+ "dev": "vite build --watch",
"gen-comp-meta": "na tsx ../../scripts/gen-component-meta.ts",
- "build": "pnpm gen-comp-meta && vite build",
+ "gen-volar": "na tsx ../../scripts/gen-volar.ts",
+ "build": "pnpm gen-volar && pnpm gen-comp-meta && vite build && vue-tsc --declaration --emitDeclarationOnly",
"preview": "vite preview",
"lint": "eslint . --fix",
"test": "vitest"
},
"dependencies": {
"@floating-ui/dom": "^1.0.12",
+ "defu": "^6.1.1",
"vue": "^3.2.45"
},
"devDependencies": {
@@ -54,18 +56,20 @@
"@vitejs/plugin-vue": "^3.2.0",
"@vitejs/plugin-vue-jsx": "^2.1.1",
"@vue/test-utils": "^2.2.6",
- "@vueuse/core": "^9.7.0",
+ "@vueuse/core": "^9.9.0",
"jsdom": "^20.0.3",
"markdown-it": "^13.0.1",
- "sass": "^1.56.2",
+ "sass": "^1.57.1",
"typescript": "^4.9.4",
"unocss": "^0.46.5",
+ "unplugin-auto-import": "^0.12.1",
"unplugin-vue-components": "^0.22.12",
+ "unplugin-vue-define-options": "^1.1.1",
"vite": "^3.2.5",
"vite-plugin-dts": "^1.7.1",
"vitest": "^0.25.8",
"vue-router": "^4.1.6",
- "vue-tsc": "^1.0.13"
+ "vue-tsc": "^1.0.16"
},
"peerDependencies": {
"@unocss/reset": "^0.41.1",
diff --git a/packages/anu-vue/shims.d.ts b/packages/anu-vue/shims.d.ts
new file mode 100644
index 00000000..a7d471e3
--- /dev/null
+++ b/packages/anu-vue/shims.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+ import type { DefineComponent } from 'vue'
+
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
diff --git a/packages/anu-vue/src/components/alert/AAlert.tsx b/packages/anu-vue/src/components/alert/AAlert.tsx
deleted file mode 100644
index 454263b9..00000000
--- a/packages/anu-vue/src/components/alert/AAlert.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { defineComponent, ref, toRef, watch } from 'vue'
-import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
-import { spacingProp, useSpacing } from '@/composables/useSpacing'
-
-export const AAlert = defineComponent({
- name: 'AAlert',
- props: {
- spacing: spacingProp,
- ...useLayerProps({
- color: {
- default: 'primary',
- },
- variant: {
- default: 'light',
- },
- }),
-
- /**
- * prepend icon
- */
- icon: {
- type: String,
- default: undefined,
- },
-
- /**
- * append (close) icon
- */
- appendIcon: {
- type: String,
- default: undefined,
- },
-
- /**
- * Make alert dismissible using this prop. Adds close icon as appended icon.
- */
- dismissible: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Hide/Show alert based on v-model value
- */
- modelValue: {
- type: Boolean,
- default: null,
- },
- },
- emits: ['click:appendIcon', 'update:modelValue'],
- setup(props, { slots, emit }) {
- const spacing = useSpacing(toRef(props, 'spacing'))
- const { getLayerClasses } = useLayer()
- const { styles, classes } = getLayerClasses(
- toRef(props, 'color'),
- toRef(props, 'variant'),
- toRef(props, 'states'),
- )
-
- const isAlertVisible = ref(props.modelValue ?? true)
- watch(isAlertVisible, val => {
- emit('update:modelValue', val)
- })
-
- // đ Append icon
- const appendIcon = props.appendIcon || (props.dismissible ? 'i-bx-x' : null)
- const handleAppendIconClick = () => {
- // If alert is dismissible remove/close alert
- if (props.dismissible)
- isAlertVisible.value = false
-
- // Emit append icon click event
- emit('click:appendIcon')
- }
-
- // TODO: Omit writing `props.modelValue ??` multiple times
- return () => (
-
diff --git a/packages/anu-vue/src/components/alert/AAlert.vue b/packages/anu-vue/src/components/alert/AAlert.vue
new file mode 100644
index 00000000..8af03995
--- /dev/null
+++ b/packages/anu-vue/src/components/alert/AAlert.vue
@@ -0,0 +1,107 @@
+
+
+
+ 
- )
- }
-
- return props.content
- })
-
- return () => (
-
diff --git a/packages/anu-vue/src/components/avatar/AAvatar.vue b/packages/anu-vue/src/components/avatar/AAvatar.vue
new file mode 100644
index 00000000..5191e492
--- /dev/null
+++ b/packages/anu-vue/src/components/avatar/AAvatar.vue
@@ -0,0 +1,44 @@
+
+
+
+ ,
- required: false,
- default: undefined,
- },
+ icon: configurable,
/**
* Content to render inside avatar
*/
- content: {
- type: String,
- required: false,
- default: undefined,
- },
+ content: String,
/**
* Render image using this prop
*/
- src: {
- type: String,
- required: false,
- default: undefined,
- },
+ src: String,
/**
* Provide alt attribute for image given by `src` prop
*/
alt: {
type: String,
- required: false,
default: 'avatar',
},
}
-export type AvatarOnlyProps = ExtractPropTypes
+export type AvatarProps = ExtractPropTypes
diff --git a/packages/anu-vue/src/components/badge/ABadge.tsx b/packages/anu-vue/src/components/badge/ABadge.tsx
deleted file mode 100644
index 3f163a43..00000000
--- a/packages/anu-vue/src/components/badge/ABadge.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import type { PropType } from 'vue'
-import { Transition, computed, defineComponent, toRef } from 'vue'
-import { color } from '@/composables/useProps'
-import { spacingProp, useSpacing } from '@/composables/useSpacing'
-import { isNumeric } from '@/utils/helpers'
-
-export type VerticalAnchor = 'top' | 'bottom'
-export type HorizontalAnchor = 'left' | 'right'
-export type Anchor = `${VerticalAnchor} ${HorizontalAnchor}`
-
-const defaultOffset = 4
-const defaultOverlapOffset = 12
-
-export const ABadge = defineComponent({
- name: 'ABadge',
- inheritAttrs: false,
- props: {
- spacing: spacingProp,
-
- /**
- * Show/Hide badge based on v-model value
- */
- modelValue: {
- type: Boolean,
- default: true,
- },
-
- /**
- * Sets badge color
- */
- color: {
- ...color,
- default: 'primary',
- type: String as PropType,
- },
-
- /**
- * Converts badge to a dot
- */
- dot: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Adds badge border
- */
- bordered: {
- type: Boolean,
- default: true,
- },
-
- /**
- * Sets the highest possible value
- */
- max: {
- type: Number,
- default: 99,
- },
-
- /**
- * Use to pass numeric values
- */
- content: {
- type: [Number, String],
- default: undefined,
- },
-
- /**
- * Sets the badge position
- */
- anchor: {
- type: String as PropType,
- default: 'top right',
- },
-
- /**
- * Adjusts position of badge
- */
- overlap: {
- type: Boolean,
- default: true,
- },
-
- /**
- * Sets offset on x-axis
- */
- offsetX: {
- type: [Number, String],
- default: defaultOffset,
- },
-
- /**
- * Sets offset on y-axis
- */
- offsetY: {
- type: [Number, String],
- default: defaultOffset,
- },
- },
- setup(props, { slots, attrs }) {
- const spacing = useSpacing(toRef(props, 'spacing'))
- const formatMaxContent = (content: unknown) => {
- if (!isNumeric(content))
- return content
-
- const numericContent = Number(content)
- if (numericContent > props.max)
- return `${props.max}+`
-
- return numericContent
- }
-
- const badgeSlotContent = computed(() => {
- if (!props.dot && slots.content)
- return formatMaxContent(slots.content?.()[0].children)
-
- if (!props.dot && props.content)
- return formatMaxContent(props.content)
-
- return ''
- })
-
- const anchorOffset = computed(() => {
- const newOffsetY = props.overlap && defaultOffset === props.offsetY ? defaultOverlapOffset : props.offsetY
- const newOffsetX = props.overlap && defaultOffset === props.offsetX ? defaultOverlapOffset : props.offsetX
-
- return { y: newOffsetY, x: newOffsetX }
- })
-
- const positionStyles = computed(() => {
- const [anchorY, anchorX] = props.anchor.split(' ')
-
- return {
- top: anchorY === 'top' ? 'auto' : `calc(100% - ${anchorOffset.value.y}px)`,
- bottom: anchorY === 'bottom' ? 'auto' : `calc(100% - ${anchorOffset.value.y}px)`,
- left: anchorX === 'left' ? 'auto' : `calc(100% - ${anchorOffset.value.x}px)`,
- right: anchorX === 'right' ? 'auto' : `calc(100% - ${anchorOffset.value.x}px)`,
- }
- })
-
- return () =>
diff --git a/packages/anu-vue/src/components/badge/ABadge.vue b/packages/anu-vue/src/components/badge/ABadge.vue
new file mode 100644
index 00000000..2d335691
--- /dev/null
+++ b/packages/anu-vue/src/components/badge/ABadge.vue
@@ -0,0 +1,156 @@
+
+
+
+ ,
- inputContainerAttrs: Object,
- hint: String,
- error: String,
- label: String,
- prependIcon: String,
- appendIcon: String,
- prependInnerIcon: String,
- appendInnerIcon: String,
- disabled,
- readonly,
- },
- emits: ['click:inputWrapper'],
- setup(props, { attrs, slots, expose, emit }) {
- const spacing = useSpacing(toRef(props, 'spacing'))
- const iconTransition = 'transition duration-150 ease -in'
- const elementId = attrs.id || props.label ? `a-input-${attrs.id || props.label}-${Math.random().toString(36).slice(2, 7)}` : undefined
-
- const refRoot = ref()
- const refInputContainer = ref()
- expose({
- refRoot,
- refInputContainer,
- })
-
- // TODO(Enhancement): We might need to remove absolute added to html input element to retain width instead of providing min-w to below wrapper
- // TODO: We need to improve default slot implementation so that we can provide selected slot to selection component
- return () => (
-
diff --git a/packages/anu-vue/src/components/base-input/ABaseInput.vue b/packages/anu-vue/src/components/base-input/ABaseInput.vue
new file mode 100644
index 00000000..26100d74
--- /dev/null
+++ b/packages/anu-vue/src/components/base-input/ABaseInput.vue
@@ -0,0 +1,139 @@
+
+
+
+ ) => {
- const props = {
- /**
- * Disable component
- */
- disabled,
-
- /**
- * Make component read only
- */
- readonly,
- }
-
- // Add `defaults` property in `props` if it is provided via `defaults` argument
- if (propOverrides)
- Object.assign(props, propOverrides)
-
- return props
-}
diff --git a/packages/anu-vue/src/components/base-input/props.ts b/packages/anu-vue/src/components/base-input/props.ts
new file mode 100644
index 00000000..e39d1588
--- /dev/null
+++ b/packages/anu-vue/src/components/base-input/props.ts
@@ -0,0 +1,26 @@
+import type { ExtractPropTypes, HTMLAttributes, PropType } from 'vue'
+import { disabled, readonly, spacing } from '@/composables/useProps'
+
+// TODO: Provide a way to apply classes on root. Later you can target input container & wrapper.
+export const baseInputProps = {
+ spacing,
+
+ // âšī¸ If we want any type need to set `propName: { type: null }`. Using `propName: null` will omit (disable) the prop.
+ inputWrapperClasses: { type: null },
+
+ // âšī¸ If we want any type need to set `propName: { type: null }`. Using `propName: null` will omit (disable) the prop.
+ inputClasses: { type: null },
+
+ inputContainerAttrs: Object as PropType,
+ hint: String,
+ error: String,
+ label: String,
+ prependIcon: String,
+ appendIcon: String,
+ prependInnerIcon: String,
+ appendInnerIcon: String,
+ disabled,
+ readonly,
+}
+
+export type BaseInputProps = ExtractPropTypes
diff --git a/packages/anu-vue/src/components/btn/ABtn.tsx b/packages/anu-vue/src/components/btn/ABtn.tsx
deleted file mode 100644
index f939c83a..00000000
--- a/packages/anu-vue/src/components/btn/ABtn.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { defineComponent, toRef } from 'vue'
-import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
-import { disabled } from '@/composables/useProps'
-import { spacingProp, useSpacing } from '@/composables/useSpacing'
-
-export const ABtn = defineComponent({
- name: 'ABtn',
- props: {
- spacing: spacingProp,
-
- /*
- âšī¸ If we want volar to infer the correct default values for prop we need to enable below three lines because volar can't generate correct data for dynamic code
- Please refer to this gen-component-meta script's useful links for more details
- */
- // color: { default: 'primary' },
- // variant: { default: 'fill' },
- // states: { default: true },
- ...useLayerProps({
- color: {
- default: 'primary',
- },
- variant: {
- default: 'fill',
- },
- states: {
- default: true,
- },
- }),
-
- /**
- * prepend icon
- */
- icon: {
- type: String,
- default: undefined,
- },
-
- /**
- * append icon
- */
- appendIcon: {
- type: String,
- default: undefined,
- },
-
- /**
- * create icon only button
- */
- iconOnly: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Disable state of component
- */
- disabled,
- },
- setup(props, { slots, attrs: _ }) {
- const spacing = useSpacing(toRef(props, 'spacing'))
- const { getLayerClasses } = useLayer()
-
- const { styles, classes } = getLayerClasses(
- toRef(props, 'color'),
- toRef(props, 'variant'),
- toRef(props, 'states'),
- )
-
- // FIX: ABtn gets full width if placed inside flex container
- return () => (
-
- )
- },
-})
-
-export type ABtn = InstanceType
diff --git a/packages/anu-vue/src/components/btn/ABtn.vue b/packages/anu-vue/src/components/btn/ABtn.vue
new file mode 100644
index 00000000..90ad79ae
--- /dev/null
+++ b/packages/anu-vue/src/components/btn/ABtn.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/btn/index.ts b/packages/anu-vue/src/components/btn/index.ts
index ef25a1af..69b98796 100644
--- a/packages/anu-vue/src/components/btn/index.ts
+++ b/packages/anu-vue/src/components/btn/index.ts
@@ -1 +1 @@
-export { ABtn } from './ABtn'
+export { default as ABtn } from './ABtn.vue'
diff --git a/packages/anu-vue/src/components/card/ACard.tsx b/packages/anu-vue/src/components/card/ACard.tsx
deleted file mode 100644
index ea357eab..00000000
--- a/packages/anu-vue/src/components/card/ACard.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { defineComponent, toRef } from 'vue'
-import { ATypography } from '../typography'
-import type { ConfigurableValue } from '@/composables/useConfigurable'
-import { useConfigurable } from '@/composables/useConfigurable'
-import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
-import { spacingProp, useSpacing } from '@/composables/useSpacing'
-import { isTypographyUsed, useTypographyProps } from '@/composables/useTypography'
-
-export const ACard = defineComponent({
- name: 'ACard',
- props: {
- spacing: spacingProp,
- ...useLayerProps({
- variant: {
- default: 'text',
- },
- }),
- ...useTypographyProps(),
-
- /**
- * Render image at the top of the card (_above header_)
- */
- img: {
- type: String,
- default: undefined,
- },
- },
- setup(props, { slots }) {
- const spacing = useSpacing(toRef(props, 'spacing'))
- const { getLayerClasses } = useLayer()
- const { styles, classes } = getLayerClasses(
- toRef(props, 'color'),
- toRef(props, 'variant'),
- toRef(props, 'states'),
- )
-
- // TODO [v0.2.0]: Find another way to check typography component usage
- // TODO: Check => Do we need to pass toRefs(props)
- const _isTypographyUsed = isTypographyUsed(props, slots)
-
- // Modify text prop to have `text-sm`
- const _textProp = useConfigurable(toRef(props, 'text'))
- if (Array.isArray(_textProp.value.classes))
- _textProp.value.classes = [..._textProp.value.classes, 'uno-layer-base-text-sm']
- else
- _textProp.value.classes += ' uno-layer-base-text-sm'
-
- return () => (
-
diff --git a/packages/anu-vue/src/components/card/ACard.vue b/packages/anu-vue/src/components/card/ACard.vue
new file mode 100644
index 00000000..fecd9edb
--- /dev/null
+++ b/packages/anu-vue/src/components/card/ACard.vue
@@ -0,0 +1,80 @@
+
+
+
+ ) => {
- const props = {
- ...useLayerProps({
- variant: {
- default: 'light',
- },
- }),
-
- ...useTypographyProps(),
-
- /**
- * Render image at the top of the card (_above header_)
- */
- img: {
- type: String,
- default: undefined,
- },
- }
-
- // Add `defaults` property in `props` if it is provided via `defaults` argument
- if (propOverrides)
- Object.assign(props, propOverrides)
-
- return props
-}
+export { default as ACard } from './ACard.vue'
+export * from './props'
diff --git a/packages/anu-vue/src/components/card/props.ts b/packages/anu-vue/src/components/card/props.ts
new file mode 100644
index 00000000..2fdd880e
--- /dev/null
+++ b/packages/anu-vue/src/components/card/props.ts
@@ -0,0 +1,22 @@
+import type { ExtractPropTypes } from 'vue'
+import { typographyProps } from '@/components/typography/props'
+import { useProps as useLayerProps } from '@/composables/useLayer'
+import { spacing } from '@/composables/useProps'
+
+export const cardProps = {
+ ...useLayerProps(),
+ ...typographyProps,
+ spacing,
+
+ /**
+ * Render image at the top of the card (_above header_)
+ */
+ img: String,
+
+ /**
+ * `alt` attribute for image rendered via `img` prop
+ */
+ imgAlt: String,
+}
+
+export type CardProps = ExtractPropTypes
diff --git a/packages/anu-vue/src/components/checkbox/ACheckbox.tsx b/packages/anu-vue/src/components/checkbox/ACheckbox.tsx
deleted file mode 100644
index dbe8e79a..00000000
--- a/packages/anu-vue/src/components/checkbox/ACheckbox.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useVModel } from '@vueuse/core'
-import type { PropType } from 'vue'
-import { computed, defineComponent, ref, watch } from 'vue'
-import { color, disabled } from '@/composables/useProps'
-
-export const ACheckbox = defineComponent({
- name: 'ACheckbox',
- props: {
- /**
- * Checkbox color
- */
- // eslint-disable-next-line vue/require-prop-types
- color: {
- ...color,
- default: 'primary',
- },
-
- /**
- * Bind v-model value to check/uncheck the checkbox.
- */
- modelValue: {
- type: [Boolean, Array, Set] as PropType>,
- default: undefined,
- },
-
- /**
- * Label text
- */
- label: {
- type: String,
- default: undefined,
- },
-
- /**
- * Icon to render in checkbox square instead of check
- */
- icon: {
- type: String,
- default: 'i-bx-check',
- },
-
- /**
- * Disable checkbox
- */
- disabled,
- indeterminate: {
- type: Boolean,
- default: false,
- },
- },
- setup(props, { slots, attrs, emit }) {
- const elementId = `a-checkbox-${attrs.id || attrs.value}-${Math.random().toString(36).slice(2, 7)}`
- const data = useVModel(props, 'modelValue', emit)
-
- // Template refs
- const refCheckbox = ref()
-
- const icon = ref('')
-
- watch([data, () => props.indeterminate], ([checked, indeterminate], [_, prevIndeterminate]) => {
- // Set indeterminate state of HTMLInputElement
- if (refCheckbox.value)
- refCheckbox.value.indeterminate = indeterminate
-
- icon.value = !indeterminate && (!prevIndeterminate || checked) ? props.icon : 'i-bx-minus'
- }, { immediate: true })
-
- const state = computed(() => {
- return typeof data.value === 'boolean'
- ? data.value
- : Array.isArray(data.value)
- ? data.value.includes(attrs.value)
- : data.value?.has(attrs.value) // For Set type
- })
-
- return () => (
-
- )
- },
-})
-
-export type ACheckbox = InstanceType
diff --git a/packages/anu-vue/src/components/checkbox/ACheckbox.vue b/packages/anu-vue/src/components/checkbox/ACheckbox.vue
new file mode 100644
index 00000000..84e1448f
--- /dev/null
+++ b/packages/anu-vue/src/components/checkbox/ACheckbox.vue
@@ -0,0 +1,99 @@
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/checkbox/index.ts b/packages/anu-vue/src/components/checkbox/index.ts
index 38afcfef..4737b917 100644
--- a/packages/anu-vue/src/components/checkbox/index.ts
+++ b/packages/anu-vue/src/components/checkbox/index.ts
@@ -1,2 +1,2 @@
-export { ACheckbox } from './ACheckbox'
+export { default as ACheckbox } from './ACheckbox.vue'
diff --git a/packages/anu-vue/src/components/chip/AChip.tsx b/packages/anu-vue/src/components/chip/AChip.tsx
deleted file mode 100644
index 61b3c3e1..00000000
--- a/packages/anu-vue/src/components/chip/AChip.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import type { PropType } from 'vue'
-import { computed, defineComponent, toRef } from 'vue'
-import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
-import { disabled } from '@/composables/useProps'
-
-export const AChip = defineComponent({
- name: 'AChip',
- props: {
- /*
- âšī¸ If we want volar to infer the correct default values for prop we need to enable below three lines because volar can't generate correct data for dynamic code
- Please refer to this gen-component-meta script's useful links for more details
- */
- // color: { default: 'primary' },
- // variant: { default: 'fill' },
- ...useLayerProps({
- color: {
- default: 'primary',
- },
- variant: {
- default: 'light',
- },
- }),
-
- /**
- * Bind v-model value to show/hide the chip.
- */
- modelValue: {
- type: Boolean as PropType,
- default: true,
- },
-
- /**
- * Allow to close chip
- */
- closable: {
- type: Boolean,
- default: false,
- },
-
- /**
- * prepend icon
- */
- icon: {
- type: String,
- default: undefined,
- },
-
- /**
- * append icon
- */
- appendIcon: {
- type: String,
- default: undefined,
- },
-
- /**
- * Disable state of component
- */
- disabled,
- },
- emits: ['update:modelValue', 'click:close', 'click:appendIcon'],
-
- // emit on click
- setup(props, { slots, attrs, emit }) {
- const { getLayerClasses } = useLayer()
-
- const isClickable = computed(() => attrs.onClick !== undefined)
-
- const { styles, classes } = getLayerClasses(
- toRef(props, 'color'),
- toRef(props, 'variant'),
- isClickable,
- )
-
- const closeChip = () => {
- emit('update:modelValue', false)
- emit('click:close')
- }
-
- return () =>
- props.modelValue
- ?
diff --git a/packages/anu-vue/src/components/chip/AChip.vue b/packages/anu-vue/src/components/chip/AChip.vue
new file mode 100644
index 00000000..bf6dc359
--- /dev/null
+++ b/packages/anu-vue/src/components/chip/AChip.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+ {{ col.name }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/data-table/events.ts b/packages/anu-vue/src/components/data-table/events.ts
new file mode 100644
index 00000000..a379183a
--- /dev/null
+++ b/packages/anu-vue/src/components/data-table/events.ts
@@ -0,0 +1,3 @@
+import type { TableEvents } from '@/components/table'
+
+export interface DataTableEvents extends TableEvents {}
diff --git a/packages/anu-vue/src/components/data-table/index.ts b/packages/anu-vue/src/components/data-table/index.ts
new file mode 100644
index 00000000..4f8673d6
--- /dev/null
+++ b/packages/anu-vue/src/components/data-table/index.ts
@@ -0,0 +1,4 @@
+export { default as ADataTable } from './ADataTable.vue'
+export * from './events'
+export * from './props'
+
diff --git a/packages/anu-vue/src/components/data-table/props.ts b/packages/anu-vue/src/components/data-table/props.ts
new file mode 100644
index 00000000..119dfb8f
--- /dev/null
+++ b/packages/anu-vue/src/components/data-table/props.ts
@@ -0,0 +1,83 @@
+import type { PropType } from 'vue'
+import type { PropColumn as TablePropColumn } from '@/components/table'
+import { tableProps } from '@/components/table'
+import { defuProps } from '@/composables/useProps'
+import type { CustomFilter } from '@/composables/useSearch'
+import type { CustomSort } from '@/composables/useSort'
+
+export type SortBy = 'asc' | 'desc' | undefined
+
+export interface DataTablePropColumn extends TablePropColumn {
+ isSortable?: boolean
+ sortBy?: SortBy
+ isFilterable: Boolean
+ filterFunc?: CustomFilter
+ sortFunc?: CustomSort
+}
+
+export interface ItemsFunctionParams {
+ q: string
+ currentPage: number
+ rowsPerPage: number
+ sortedCols: DataTablePropColumn[]
+}
+
+export interface ItemsFunction {
+ (props: ItemsFunctionParams): Promise<{ rows: Record[]; total: number }>
+}
+
+export const dataTableProps = defuProps({
+ /**
+ * Function that returns resolves array.
+ */
+ rows: {
+ type: [Array, Function] as PropType[]>,
+ required: true,
+ },
+
+ /**
+ * By default table will infer the column definition from first row. You can also manually provide the column definition for more control.
+ */
+ cols: {
+ type: [Array] as PropType,
+ default: () => [],
+ },
+
+ /**
+ * Enable filtering/searching in table
+ */
+ search: {
+ type: [Boolean, String],
+ default: false,
+ },
+
+ /**
+ * Enable/Disable sorting table
+ */
+ isSortable: {
+ type: Boolean,
+ default: true,
+ },
+
+ /**
+ * By default you can only sort single column. You can enable sorting multiple columns at the same time using this prop.
+ */
+ multiSort: Boolean,
+
+ /**
+ * Set rows to show per page
+ */
+ pageSize: {
+ type: Number,
+ default: 10,
+ },
+
+ // âšī¸ Does anyone need prop initialPage?
+}, tableProps)
+
+export const dataTableColDefaults: Partial = {
+ isSortable: true,
+ headerClasses: (col: DataTablePropColumn) => col.isSortable && 'cursor-pointer select-none',
+ sortBy: undefined,
+ isFilterable: true,
+}
diff --git a/packages/anu-vue/src/components/dialog/ADialog.tsx b/packages/anu-vue/src/components/dialog/ADialog.tsx
deleted file mode 100644
index 571b625b..00000000
--- a/packages/anu-vue/src/components/dialog/ADialog.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { onClickOutside, useMounted } from '@vueuse/core'
-import { Teleport, Transition, defineComponent, ref, toRef } from 'vue'
-import { ACard, useCardProps } from '@/components/card'
-import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
-import { useTeleport } from '@/composables/useTeleport'
-
-export const ADialog = defineComponent({
- name: 'ADialog',
- inheritAttrs: false,
- props: {
- ...useCardProps(),
-
- /**
- * Show/Hide menu base on v-model value
- */
- modelValue: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Persistence of dialog when clicked outside of reference element
- */
- persistent: {
- type: Boolean,
- default: false,
- },
- },
- emits: ['update:modelValue'],
- setup(props, { slots, emit, attrs }) {
- const { teleportTarget } = useTeleport()
- const isMounted = useMounted()
-
- const refCard = ref()
- if (!props.persistent) {
- onClickOutside(refCard, () => {
- // If dialog is not open => Don't execute
- if (!props.modelValue)
- return
-
- emit('update:modelValue', false)
- })
- }
-
- // Lock DOM scroll when modelValue is `true`
- useDOMScrollLock(toRef(props, 'modelValue'))
-
- return () => isMounted.value
- ?
-
-
-
- : null
- },
-})
-
-export type ADialog = InstanceType
diff --git a/packages/anu-vue/src/components/dialog/ADialog.vue b/packages/anu-vue/src/components/dialog/ADialog.vue
new file mode 100644
index 00000000..679c8b03
--- /dev/null
+++ b/packages/anu-vue/src/components/dialog/ADialog.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/dialog/index.ts b/packages/anu-vue/src/components/dialog/index.ts
index 058097fe..f5e5f958 100644
--- a/packages/anu-vue/src/components/dialog/index.ts
+++ b/packages/anu-vue/src/components/dialog/index.ts
@@ -1,2 +1,2 @@
-export { ADialog } from './ADialog'
+export { default as ADialog } from './ADialog.vue'
diff --git a/packages/anu-vue/src/components/drawer/ADrawer.tsx b/packages/anu-vue/src/components/drawer/ADrawer.tsx
deleted file mode 100644
index bd688b9f..00000000
--- a/packages/anu-vue/src/components/drawer/ADrawer.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { onClickOutside, useMounted } from '@vueuse/core'
-import type { PropType } from 'vue'
-import { Teleport, Transition, defineComponent, ref, toRef } from 'vue'
-import { ACard, useCardProps } from '@/components/card'
-import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
-import { useTeleport } from '@/composables/useTeleport'
-
-export const ADrawer = defineComponent({
- name: 'ADrawer',
- props: {
- ...useCardProps(),
-
- /**
- * Show/Hide drawer base on v-model value
- */
- modelValue: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Persistence of drawer when clicked outside of reference element
- */
- persistent: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Drawer anchor/position
- */
- anchor: {
- type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
- default: 'left',
- },
- },
- emits: ['update:modelValue'],
- setup(props, { slots, emit, attrs }) {
- const { teleportTarget } = useTeleport()
- const isMounted = useMounted()
-
- const refCard = ref()
- if (!props.persistent) {
- onClickOutside(refCard, () => {
- // If drawer is not open => Don't execute
- if (!props.modelValue)
- return
-
- emit('update:modelValue', false)
- })
- }
-
- // Lock DOM scroll when modelValue is `true`
- useDOMScrollLock(toRef(props, 'modelValue'))
-
- return () => isMounted.value
- ?
-
-
-
- : null
- },
-})
-
-export type ADrawer = InstanceType
diff --git a/packages/anu-vue/src/components/drawer/ADrawer.vue b/packages/anu-vue/src/components/drawer/ADrawer.vue
new file mode 100644
index 00000000..b84e55ff
--- /dev/null
+++ b/packages/anu-vue/src/components/drawer/ADrawer.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/drawer/index.ts b/packages/anu-vue/src/components/drawer/index.ts
index a17c5aef..340ce747 100644
--- a/packages/anu-vue/src/components/drawer/index.ts
+++ b/packages/anu-vue/src/components/drawer/index.ts
@@ -1,2 +1,2 @@
-export { ADrawer } from './ADrawer'
+export { default as ADrawer } from './ADrawer.vue'
diff --git a/packages/anu-vue/src/components/index.ts b/packages/anu-vue/src/components/index.ts
index 89b9eff4..5d2359c5 100644
--- a/packages/anu-vue/src/components/index.ts
+++ b/packages/anu-vue/src/components/index.ts
@@ -1,5 +1,3 @@
-// TODO: Define emits for all components
-
export { AAlert } from './alert'
export { AAvatar } from './avatar'
export { ABadge } from './badge'
@@ -8,6 +6,7 @@ export { ABtn } from './btn'
export { ACard } from './card'
export { ACheckbox } from './checkbox'
export { AChip } from './chip'
+export { ADataTable } from './data-table'
export { ADialog } from './dialog'
export { ADrawer } from './drawer'
export { AInput } from './input'
diff --git a/packages/anu-vue/src/components/input/AInput.tsx b/packages/anu-vue/src/components/input/AInput.tsx
deleted file mode 100644
index ca152a52..00000000
--- a/packages/anu-vue/src/components/input/AInput.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { PropType } from 'vue'
-import { defineComponent, ref } from 'vue'
-import { ABaseInput, useBaseInputProp } from '@/components/base-input'
-
-export const AInput = defineComponent({
- name: 'AInput',
- props: {
- ...useBaseInputProp(),
-
- /**
- * Bind v-model value
- */
- modelValue: {
- type: [String, Number] as PropType,
- default: undefined,
- },
- },
- emits: ['input', 'update:modelValue'],
- setup(props, { slots, emit, attrs }) {
- const input = ref()
-
- const isInputTypeFile = attrs.type && attrs.type === 'file'
-
- const handleChange = (e: InputEvent) => {
- const val = (e.target as HTMLInputElement).value
- emit('input', val)
- emit('update:modelValue', val)
- }
-
- const handleInputWrapperClick = () => {
- input.value?.focus()
- }
-
- return () => (
-
- {{
- // Recursively pass down slots
- ...slots,
- default: (slotProps: any) => (
-
- ),
- }}
-
- )
- },
-})
-
-export type AInput = InstanceType
diff --git a/packages/anu-vue/src/components/input/AInput.vue b/packages/anu-vue/src/components/input/AInput.vue
new file mode 100644
index 00000000..ea6e3fd6
--- /dev/null
+++ b/packages/anu-vue/src/components/input/AInput.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/input/index.ts b/packages/anu-vue/src/components/input/index.ts
index fb0b8e0a..570bf766 100644
--- a/packages/anu-vue/src/components/input/index.ts
+++ b/packages/anu-vue/src/components/input/index.ts
@@ -1,2 +1,4 @@
-export { AInput } from './AInput'
+export { default as AInput } from './AInput.vue'
+
+// export { AInput } from './AInput'
diff --git a/packages/anu-vue/src/components/list-item/AListItem.tsx b/packages/anu-vue/src/components/list-item/AListItem.tsx
deleted file mode 100644
index ebf70e2d..00000000
--- a/packages/anu-vue/src/components/list-item/AListItem.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import type { PropType } from 'vue'
-import { computed, defineComponent, toRef } from 'vue'
-import { ATypography } from '../typography'
-import { AAvatar } from '@/components/avatar'
-import type { ConfigurableValue } from '@/composables/useConfigurable'
-import { useConfigurable } from '@/composables/useConfigurable'
-import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
-import { useTypographyProps } from '@/composables/useTypography'
-
-export const AListItem = defineComponent({
- name: 'AListItem',
- props: {
- ...useTypographyProps(),
- value: {
- required: false,
- },
-
- /**
- * List item icon
- */
- icon: {
- type: String,
- default: undefined,
- },
- disable: {
- type: Boolean,
- default: false,
- },
- avatarProps: {
- type: Object as PropType,
- default: undefined,
- },
- ...useLayerProps({
- variant: {
- default: 'text',
- },
- states: {
- default: true,
- },
- }),
-
- /**
- * By default when avatar props are used avatar is added at start. Use `avatarAppend` to render avatar at end.
- */
- avatarAppend: {
- type: Boolean,
- default: false,
- },
-
- /**
- * By default when icon props are used icon rendered at start. Use `iconAppend` to render icon at end.
- */
- iconAppend: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Set the active state of list item
- */
- isActive: {
- type: Boolean,
- default: false,
- },
- },
- emits: ['click:icon', 'click:avatar', 'click:iconAppend', 'click:avatarAppend'],
- setup(props, { slots, emit, attrs }) {
- const { getLayerClasses } = useLayer()
-
- // âšī¸ Reduce the size of title to 1rem. We did the same in ACard as well.
- const _titleProp = useConfigurable(props.title)
- if (Array.isArray(_titleProp.value.classes))
- _titleProp.value.classes = [..._titleProp.value.classes, 'uno-layer-base-text-base']
- else
- _titleProp.value.classes += ' uno-layer-base-text-base'
-
- // useLayer
- const { styles, classes } = getLayerClasses(
- computed(() => props.isActive ? props.color || 'primary' : undefined),
- computed(() => props.isActive ? props.variant || 'light' : 'text'),
- toRef(props, 'states'),
- { statesClass: 'states:10' },
- )
-
- return () => {
- return (
-
- {/* đ Slot: prepend */}
- {
-
- // If prepend slot is used => Use it
- slots.prepend
- ? slots.prepend()
-
- // If icon prop is provided and should be prepended => Render icon
- : props.icon && !props.iconAppend
- ? emit('click:icon')}
- />
-
- // If avatar props are provided/used & should be prepended => Render avatar
- : props.avatarProps && !props.avatarAppend
- ? emit('click:avatar')}
- {...props.avatarProps}
- />
-
- // If nothing is truthy => Don't render anything
- : null
- }
-
- {/* Slot: item */}
- {
- slots.item
- ? slots.item()
- : emit('click:avatarAppend')}
- {...props.avatarProps}
- />
-
- // If nothing is truthy => Don't render anything
- : null
- }
-
- )
- }
- },
-})
-
-export type AListItem = InstanceType
diff --git a/packages/anu-vue/src/components/list-item/AListItem.vue b/packages/anu-vue/src/components/list-item/AListItem.vue
new file mode 100644
index 00000000..3439d9a8
--- /dev/null
+++ b/packages/anu-vue/src/components/list-item/AListItem.vue
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/list-item/index.ts b/packages/anu-vue/src/components/list-item/index.ts
index b1bd8f52..2331b293 100644
--- a/packages/anu-vue/src/components/list-item/index.ts
+++ b/packages/anu-vue/src/components/list-item/index.ts
@@ -1,2 +1,3 @@
-export { AListItem } from './AListItem'
+export { default as AListItem } from './AListItem.vue'
+export * from './props'
diff --git a/packages/anu-vue/src/components/list-item/props.ts b/packages/anu-vue/src/components/list-item/props.ts
new file mode 100644
index 00000000..8161bd8c
--- /dev/null
+++ b/packages/anu-vue/src/components/list-item/props.ts
@@ -0,0 +1,53 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { AvatarProps } from '@/components/avatar'
+import { configurable, disabled } from '@/composables/useProps'
+
+import { typographyProps } from '@/components/typography'
+import { useProps as useLayerProps } from '@/composables/useLayer'
+
+export const listItemProps = {
+ ...useLayerProps({
+ states: {
+ default: true,
+ },
+ }),
+ ...typographyProps,
+
+ /**
+ * List item value, makes list item clickable.
+ */
+ // âšī¸ If we want any type need to set `propName: { type: null }`. Using `propName: null` will omit (disable) the prop.
+ value: { type: null },
+
+ /**
+ * List item icon
+ */
+ icon: configurable,
+
+ /**
+ * Render icon at the end instead of starting of list item
+ */
+ iconAppend: Boolean,
+
+ /**
+ * Mark list item disabled
+ */
+ disabled,
+
+ /**
+ * Props for rendering avatar.
+ */
+ avatarProps: Object as PropType,
+
+ /**
+ * Render avatar at the end instead of starting of list item
+ */
+ avatarAppend: Boolean,
+
+ /**
+ * Mark list item as active
+ */
+ isActive: Boolean,
+}
+
+export type ListItemProps = ExtractPropTypes
diff --git a/packages/anu-vue/src/components/list/AList.tsx b/packages/anu-vue/src/components/list/AList.tsx
deleted file mode 100644
index d6546ef1..00000000
--- a/packages/anu-vue/src/components/list/AList.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { PropType } from 'vue'
-import { defineComponent } from 'vue'
-import { useGroupModel } from '../../composables'
-import { isEmptyArray } from '@/utils/helpers'
-
-import { AListItem } from '@/components/list-item'
-import type { ConfigurableValue } from '@/composables/useConfigurable'
-
-// TODO: Reuse the existing props and its types. Maybe if we create AListItem component then we can reuse prop types.
-interface ListItem {
- title: ConfigurableValue
- subtitle?: ConfigurableValue
- text: ConfigurableValue
- value?: any
- disable?: boolean
- icon?: string
-
- // TODO: Improve typing
- avatarProps?: any
-
- // color: 'primary' | 'success' | 'info' | 'warning' | 'danger'
- // variant: 'fill' | 'outline' | 'light' | 'text'
- // states?: boolean
-}
-
-export const AList = defineComponent({
- name: 'AList',
- props: {
- /**
- * Items to render in list
- */
- items: {
- type: Array as PropType,
- default: () => [],
- },
-
- /**
- * Enable selecting multiple list items
- */
- multi: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Bind v-model value to selected list item
- */
- modelValue: {
- type: [String, Number, Object],
- default: undefined,
- },
-
- /**
- * By default when icon props are used icon rendered at start. Use `iconAppend` to render icon at end.
- */
- iconAppend: {
- type: Boolean,
- default: false,
- },
-
- /**
- * By default when avatar props are used avatar is added at start. Use `avatarAppend` to render avatar at end.
- */
- avatarAppend: {
- type: Boolean,
- default: false,
- },
- },
- emits: ['update:modelValue'],
- setup(props, { slots, emit }) {
- const { options, select: selectListItem, value } = useGroupModel({
- options: !isEmptyArray(props.items) && props.items[0].value
- ? props.items.map(i => i.value)
- : props.items.length,
- multi: props.multi,
- })
-
- // const isActive = computed(() => options.value[itemIndex].isSelected)
- const handleListItemClick = (item: ListItem, index: number) => {
- selectListItem(item.value || index)
- emit('update:modelValue', value.value)
- }
-
- // đ Return
- return () => (
-
diff --git a/packages/anu-vue/src/components/list/AList.vue b/packages/anu-vue/src/components/list/AList.vue
new file mode 100644
index 00000000..b9ed608e
--- /dev/null
+++ b/packages/anu-vue/src/components/list/AList.vue
@@ -0,0 +1,109 @@
+
+
+
+ ,
- default: false,
- },
-
- /**
- * Trigger event to open the menu
- */
- trigger: {
- type: String as PropType<'click' | 'hover'>,
- default: 'click',
- },
-
- /**
- * Transition to add while showing/hiding menu
- */
- transition: {
- type: String as PropType,
- default: 'slide-up',
- },
-
- // -- Floating UI based Props
-
- // https://floating-ui.com/docs/computePosition#placement
- /**
- * Placement option from Floating UI
- */
- placement: {
- type: String as PropType,
- default: 'bottom-start',
- },
-
- // https://floating-ui.com/docs/computePosition#strategy
- /**
- * Strategy option from Floating UI
- */
- strategy: {
- type: String as PropType,
- default: 'absolute',
- },
-
- // https://floating-ui.com/docs/tutorial#middleware
- /**
- * Middleware option from Floating UI
- */
- middleware: {
- type: [Function, Object] as PropType<((referenceEl: HTMLElement, floatingEl: HTMLElement) => Middleware[]) | null>,
- default: null,
- },
- },
- setup(props, { slots }) {
- const { teleportTarget } = useTeleport()
- const isMounted = useMounted()
-
- const isMenuVisible = ref(props.modelValue ?? false)
-
- // Template refs
- const refReference = ref()
- const refFloating = ref()
-
- const calculateFloatingPosition = async () => {
- /*
- âšī¸ We need to construct the internal middleware variable
-
- If user don't pass the middleware prop then prop value will be `null` which will easy to tackle with simple if condition as shown below
-
- Here, we will use user's middleware if passed via props or we will use our defaults
- */
- const _middleware = props.middleware === null
- ? [
- // âšī¸ For this we need need bridge to handle keep menu content open
- // offset(6),
-
- sameWidthMiddleware(refFloating.value.$el),
- flip(),
- shift({ padding: 10 }),
- ] as Middleware[]
- : props.middleware(refReference.value, refFloating.value.$el)
-
- // Calculate position of floating element
- const { x, y } = await computePosition(refReference.value, refFloating.value.$el, {
- strategy: props.strategy,
- placement: props.placement,
- middleware: _middleware,
- })
-
- Object.assign(refFloating.value.$el.style, {
- left: `${x}px`,
- top: `${y}px`,
- })
- }
-
- let floatingUiCleanup: Function
-
- onMounted(() => {
- const vm = getCurrentInstance()
- refReference.value = vm?.proxy?.$el?.parentNode
- })
-
- // Recalculate position if placement changes at runtime
- watch(
- [isMounted, () => props.placement],
- () => {
- nextTick(() => {
- floatingUiCleanup = autoUpdate(refReference.value, refFloating.value.$el, calculateFloatingPosition)
- })
- },
- )
- onBeforeUnmount(() => floatingUiCleanup())
-
- // đ Event listeners
- /*
- If moduleValue is provided don't attach any event to modify the visibility of menu
- props.modelValue === null => modelValue isn't provided
- */
- if (props.modelValue === null) {
- // If trigger is hover
- if (props.trigger === 'hover') {
- // Reference
- useEventListener(refReference, 'mouseenter', () => { isMenuVisible.value = true })
- useEventListener(refReference, 'mouseleave', () => { isMenuVisible.value = false })
-
- // Floating
- useEventListener(refFloating, 'mouseenter', () => { isMenuVisible.value = true })
- useEventListener(refFloating, 'mouseleave', () => { isMenuVisible.value = false })
- }
- else {
- useEventListener(refReference, 'click', () => { isMenuVisible.value = !isMenuVisible.value })
-
- if (props.persist !== true) {
- onClickOutside(
- refReference,
- _event => {
- if (isMenuVisible.value)
- isMenuVisible.value = false
- },
- {
- ignore: props.persist === 'content' ? [refFloating] : [],
- },
- )
- }
- }
- }
-
- return () => isMounted.value
- ?
- {/* âšī¸ Transition component don't accept null as value of name prop so we need `props.transition || undefined` */}
-
-
- {slots.default?.()}
-
-
-
- : null
- },
-})
-
-export type AMenu = InstanceType
diff --git a/packages/anu-vue/src/components/menu/AMenu.vue b/packages/anu-vue/src/components/menu/AMenu.vue
new file mode 100644
index 00000000..cc41debf
--- /dev/null
+++ b/packages/anu-vue/src/components/menu/AMenu.vue
@@ -0,0 +1,210 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/menu/index.ts b/packages/anu-vue/src/components/menu/index.ts
index 5e249fb2..119590c8 100644
--- a/packages/anu-vue/src/components/menu/index.ts
+++ b/packages/anu-vue/src/components/menu/index.ts
@@ -1,3 +1,3 @@
-export { AMenu } from './AMenu'
+export { default as AMenu } from './AMenu.vue'
export { sameWidth as sameWidthFloatingUIMiddleware } from './middlewares'
diff --git a/packages/anu-vue/src/components/radio/ARadio.tsx b/packages/anu-vue/src/components/radio/ARadio.tsx
deleted file mode 100644
index 5e00589f..00000000
--- a/packages/anu-vue/src/components/radio/ARadio.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { computed, defineComponent } from 'vue'
-import { color, disabled } from '@/composables/useProps'
-
-export const ARadio = defineComponent({
- name: 'ARadio',
- props: {
- /**
- * Radio color
- */
- // eslint-disable-next-line vue/require-prop-types
- color: {
- ...color,
- default: 'primary',
- },
-
- /**
- * Bind v-model value to radio
- */
- modelValue: {
- type: String,
- default: undefined,
- },
-
- /**
- * Define label text
- */
- label: {
- type: String,
- default: undefined,
- },
-
- /**
- * Disable radio
- */
- disabled,
- },
- emits: ['update:modelValue'],
- setup(props, { slots, attrs, emit }) {
- const elementId = `a-checkbox-${attrs.id || attrs.value}-${Math.random().toString(36).slice(2, 7)}`
- const isChecked = computed(() => props.modelValue === attrs.value)
-
- return () => (
-
- )
- },
-})
-
-export type ARadio = InstanceType
diff --git a/packages/anu-vue/src/components/radio/ARadio.vue b/packages/anu-vue/src/components/radio/ARadio.vue
new file mode 100644
index 00000000..19ab3e21
--- /dev/null
+++ b/packages/anu-vue/src/components/radio/ARadio.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/radio/index.ts b/packages/anu-vue/src/components/radio/index.ts
index 0d3ca18e..60a66193 100644
--- a/packages/anu-vue/src/components/radio/index.ts
+++ b/packages/anu-vue/src/components/radio/index.ts
@@ -1,2 +1,2 @@
-export { ARadio } from './ARadio'
+export { default as ARadio } from './ARadio.vue'
diff --git a/packages/anu-vue/src/components/rating/ARating.tsx b/packages/anu-vue/src/components/rating/ARating.tsx
deleted file mode 100644
index d50b7fe7..00000000
--- a/packages/anu-vue/src/components/rating/ARating.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { computed, defineComponent, ref, toRef } from 'vue'
-import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
-import { disabled, readonly } from '@/composables/useProps'
-
-export const ARating = defineComponent({
- name: 'ARating',
- props: {
- // color: { default: 'primary' },
- ...useLayerProps({
- color: {
- default: 'warning',
- },
- }),
-
- /**
- * Bind v-model value to rating
- */
- modelValue: {
- type: Number,
- default: undefined,
- },
-
- /**
- * Sets amount of rating items
- */
- length: {
- type: [Number, String],
- default: 5,
- },
-
- /**
- * Allows the award of half a point
- */
- halve: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Sets empty icon
- */
- emptyIcon: {
- type: String,
- default: 'i-bx:star',
- },
-
- /**
- * Sets half-filled icon
- */
- halfIcon: {
- type: String,
- default: 'i-bx:bxs-star-half',
- },
-
- /**
- * Sets filled icon
- */
- fullIcon: {
- type: String,
- default: 'i-bx:bxs-star',
- },
-
- /**
- * Allows to see visual changes of value on hover
- */
- noHoverHint: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Animate icon on hover
- */
- animate: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Make rating component readonly
- */
- readonly,
-
- /**
- * Disable rating selection
- */
- disabled,
- },
- emits: ['update:modelValue'],
- setup(props, { emit }) {
- const { getLayerClasses } = useLayer()
-
- const { styles, classes } = getLayerClasses(
- toRef(props, 'color'),
- ref(''),
- ref(false),
- )
-
- const rating = ref(0)
- const isHovered = ref(false)
-
- const visibleRating = computed(() =>
- !props.noHoverHint
- && !props.readonly
- && !props.disabled
- && isHovered.value
- ? rating.value
- : props.modelValue ?? 0,
- )
-
- const items = computed(() =>
- Array.from({ length: Number(props.length) }, (_, i) => i + 1).map(item =>
- item <= visibleRating.value
- ? props.fullIcon
- : item - visibleRating.value === 0.5
- ? props.halfIcon
- : props.emptyIcon,
- ),
- )
-
- const handleClick = () => {
- emit('update:modelValue', rating.value)
- }
-
- const onMouseEnter = (e: MouseEvent, index: number) => {
- isHovered.value = true
-
- const { offsetX, target } = e
- if (target instanceof HTMLElement) {
- const widthPercentage = (offsetX * 100) / target.clientWidth
- props.halve
- ? (rating.value = widthPercentage < 50 ? index + 0.5 : index + 1)
- : (rating.value = index + 1)
- }
- }
-
- const onMouseLeave = () => {
- isHovered.value = false
- }
-
- return () => (
-
diff --git a/packages/anu-vue/src/components/rating/ARating.vue b/packages/anu-vue/src/components/rating/ARating.vue
new file mode 100644
index 00000000..07a4fa11
--- /dev/null
+++ b/packages/anu-vue/src/components/rating/ARating.vue
@@ -0,0 +1,156 @@
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/rating/index.ts b/packages/anu-vue/src/components/rating/index.ts
index cbccfcc6..5b87bc12 100644
--- a/packages/anu-vue/src/components/rating/index.ts
+++ b/packages/anu-vue/src/components/rating/index.ts
@@ -1,2 +1,2 @@
-export { ARating } from './ARating'
+export { default as ARating } from './ARating.vue'
diff --git a/packages/anu-vue/src/components/select/ASelect.tsx b/packages/anu-vue/src/components/select/ASelect.tsx
deleted file mode 100644
index 721b552e..00000000
--- a/packages/anu-vue/src/components/select/ASelect.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { onClickOutside, useMounted } from '@vueuse/core'
-import type { PropType } from 'vue'
-import { Teleport, computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-import { isObject } from '@/utils/helpers'
-import { useTeleport } from '@/composables/useTeleport'
-import { ABaseInput, useBaseInputProp } from '@/components/base-input'
-
-interface ObjectOption { label: string; value: string | number }
-type SelectOption = string | number | ObjectOption
-
-export const ASelect = defineComponent({
- name: 'ASelect',
- props: {
- ...useBaseInputProp(),
-
- /**
- * Bind v-model value to select
- */
- modelValue: {
- type: [String, Number, Object] as PropType,
- default: undefined,
- },
-
- /**
- * Select options
- */
- options: {
- type: Array as PropType,
- default: undefined,
- },
-
- /**
- * When object is used as select option, enabling this prop will emit the whole object instead of value from object.
- *
- * When set to `false`: `'vue'`
- *
- * When set to `true`: `{ label: 'VueJS', value: 'vue' }`
- */
- emitObject: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Add classes to wrapper of select options (_ul tag_)
- */
- optionsWrapperClasses: {
- type: [Array, String, Object] as PropType,
- default: undefined,
- },
- },
- emits: ['input', 'update:modelValue'],
- setup(props, { slots, emit, attrs }) {
- const { teleportTarget } = useTeleport()
- const isMounted = useMounted()
-
- // SECTION Floating
- // Template refs
- const refReference = ref()
- const selectRef = ref()
- const refFloating = ref()
-
- const isObjectOption = (option: SelectOption) => isObject(option) && 'label' in option && 'value' in option
- const isOptionsVisible = ref(false)
-
- const calculateFloatingPosition = async () => {
- const { x, y } = await computePosition(refReference.value.refInputContainer, refFloating.value, {
- placement: 'bottom-start',
- middleware: [
- offset(6),
- {
- name: 'sameWidth',
- fn: ({ rects, x, y }) => {
- // Set width of reference to floating
- refFloating.value.style.width = `${rects.reference.width}px`
-
- return { x, y }
- },
- },
- flip(),
- shift({ padding: 10 }),
- ],
- })
-
- Object.assign(refFloating.value.style, {
- left: `${x}px`,
- top: `${y}px`,
- })
- }
-
- let floatingUiCleanup: Function = () => { }
- onMounted(() => {
- nextTick(() => {
- floatingUiCleanup = autoUpdate(refReference.value.refInputContainer, refFloating.value, calculateFloatingPosition)
- })
- })
- onBeforeUnmount(() => floatingUiCleanup())
-
- onClickOutside(
- refFloating,
- _event => {
- if (isOptionsVisible.value)
- isOptionsVisible.value = false
- },
- {
- ignore: [refReference],
- },
- )
-
- // !SECTION
- // TODO: You can use it as utility in another components
- // TODO: Add some style to indicate currently selected item
- const handleInputClick = () => {
- if (!(props.disabled || props.readonly)) {
- isOptionsVisible.value = !isOptionsVisible.value
- selectRef.value?.focus()
- }
- }
-
- // đ Options
- const optionClasses = 'a-select-option states before:transition-none cursor-pointer text-ellipsis overflow-hidden'
- const handleOptionClick = (option: SelectOption) => {
- const value = isObjectOption(option) && !props.emitObject ? (option as ObjectOption).value : option
- emit('input', value)
- emit('update:modelValue', value)
- }
- const closeOptions = (event: MouseEvent) => {
- if (event.target !== refFloating.value)
- isOptionsVisible.value = false
- }
-
- // đ Value
- const selectedValue = computed(() => {
- const option = props.options?.find(option => isObjectOption(option)
- ? (option as ObjectOption).value === (!props.emitObject ? props.modelValue : (props.modelValue as ObjectOption).value)
- : option === props.modelValue)
-
- return option ? isObjectOption(option) ? (option as ObjectOption).label : option : (props.modelValue as ObjectOption | undefined)?.label || ''
- })
-
- return () => <>
- {/* TODO: Make sure we don't bind input's `type` attr here */}
-
- {{
- // Recursively pass down slots
- ...slots,
- default: (slotProps: any) =>
- ,
- }}
-
- {
- isMounted.value
- ?
-
- : null
- }
-
- },
-})
-
-export type ASelect = InstanceType
diff --git a/packages/anu-vue/src/components/select/ASelect.vue b/packages/anu-vue/src/components/select/ASelect.vue
new file mode 100644
index 00000000..9545baa7
--- /dev/null
+++ b/packages/anu-vue/src/components/select/ASelect.vue
@@ -0,0 +1,187 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/select/index.ts b/packages/anu-vue/src/components/select/index.ts
index dbbbef40..c548f0ed 100644
--- a/packages/anu-vue/src/components/select/index.ts
+++ b/packages/anu-vue/src/components/select/index.ts
@@ -1,2 +1,2 @@
-export { ASelect } from './ASelect'
+export { default as ASelect } from './ASelect.vue'
diff --git a/packages/anu-vue/src/components/switch/ASwitch.tsx b/packages/anu-vue/src/components/switch/ASwitch.tsx
deleted file mode 100644
index f0ecc4f8..00000000
--- a/packages/anu-vue/src/components/switch/ASwitch.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useVModel } from '@vueuse/core'
-import { computed, defineComponent } from 'vue'
-import { color as colorProps, disabled } from '@/composables/useProps'
-
-export const ASwitch = defineComponent({
- name: 'ASwitch',
- props: {
- /**
- * Switch color
- */
- // eslint-disable-next-line vue/require-prop-types
- color: {
- ...colorProps,
- default: 'primary',
- },
-
- /**
- * Define label text
- */
- label: {
- type: String,
- default: undefined,
- },
-
- /**
- * Bind v-model value
- */
- modelValue: {
- type: [Boolean, Array],
- default: false,
- },
-
- /**
- * Icon to render when switch is on
- */
- onIcon: {
- type: String,
- default: undefined,
- },
-
- /**
- * Icon to render when switch is off
- */
- offIcon: {
- type: String,
- default: undefined,
- },
-
- /**
- * Disable switch
- */
- disabled,
- },
- emits: ['update:modelValue'],
- setup(props, { slots, attrs, emit }) {
- const elementId = `a-switch-${attrs.id || attrs.value}-${Math.random().toString(36).slice(2, 7)}`
- const data = useVModel(props, 'modelValue', emit)
-
- const dotPosition = computed(() => {
- if (!data.value)
- return { transform: 'translateX(0)' }
- else return { transform: 'translateX(calc(var(--a-switch-track-size) - 100% - (var(--a-switch-thumb-margin) *2 )))' }
- })
-
- return () => (
-
- )
- },
-})
-
-export type ASwitch = InstanceType
diff --git a/packages/anu-vue/src/components/switch/ASwitch.vue b/packages/anu-vue/src/components/switch/ASwitch.vue
new file mode 100644
index 00000000..f46deafe
--- /dev/null
+++ b/packages/anu-vue/src/components/switch/ASwitch.vue
@@ -0,0 +1,111 @@
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/switch/index.ts b/packages/anu-vue/src/components/switch/index.ts
index 5d25179f..179faf00 100644
--- a/packages/anu-vue/src/components/switch/index.ts
+++ b/packages/anu-vue/src/components/switch/index.ts
@@ -1,2 +1,2 @@
-export { ASwitch } from './ASwitch'
+export { default as ASwitch } from './ASwitch.vue'
diff --git a/packages/anu-vue/src/components/table/ATable.tsx b/packages/anu-vue/src/components/table/ATable.tsx
deleted file mode 100644
index 07828811..00000000
--- a/packages/anu-vue/src/components/table/ATable.tsx
+++ /dev/null
@@ -1,520 +0,0 @@
-import { computedEager, useOffsetPagination } from '@vueuse/core'
-import type { ComputedRef, PropType, Ref, ToRefs } from 'vue'
-import { computed, defineComponent, reactive, ref, toRaw, toRef, toRefs, watch } from 'vue'
-import { ABtn } from '@/components/btn'
-import { ACard, useCardProps } from '@/components/card'
-import { AInput } from '@/components/input'
-import { ASelect } from '@/components/select'
-import { ATypography } from '@/components/typography'
-import type { CustomFilter } from '@/composables/useSearch'
-import { useSearch } from '@/composables/useSearch'
-import type { CustomSort, typeSortBy } from '@/composables/useSort'
-import { useSort } from '@/composables/useSort'
-import { spacingProp, useSpacing } from '@/composables/useSpacing'
-
-export type ShallSortByAsc = boolean | null
-
-export interface PropColumn {
- name: string
- isFilterable?: boolean
-
- // TODO(TS): Improve typing
- filterBy?: CustomFilter
- isSortable?: boolean
- sortBy?: CustomSort
- formatter?: (val: unknown) => unknown
-}
-
-export interface TableColumn extends PropColumn {
- shallSortByAsc: ShallSortByAsc
-}
-
-export interface ItemsFunctionParams {
- q: string
- currentPage: number
- rowsPerPage: number
- sortedCols: TableColumn[]
-}
-
-export interface ItemsFunction {
- (props: ItemsFunctionParams): Promise<{ rows: unknown[]; total: number }>
-}
-
-const tableProps = {
- /**
- * Table rows. Can be static array or function that returns resolves array. Visit [Server side table](#server-side-table) demo to understand how to use function as `rows` prop.
- */
- rows: {
- type: [Array, Function] as PropType,
- required: true,
- },
-
- /**
- * By default table will infer the column definition from first row. You can also manually provide the column definition for more control.
- */
- columns: {
- type: [Array] as PropType,
- default: () => [],
- },
-
- /**
- * Enable filtering/searching in table
- */
- search: {
- type: [Boolean, String],
- default: false,
- },
-
- /**
- * Text to render when no row is available
- */
- noDataText: {
- type: String,
- default: 'No matching results found!!',
- },
-
- /**
- * Enable/Disable sorting table
- */
- isSortable: {
- type: Boolean,
- default: true,
- },
-
- /**
- * By default you can only sort single column. You can enable sorting multiple columns at the same time using this prop.
- */
- multiSort: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Set rows to show per page
- */
- pageSize: {
- type: Number,
- default: 10,
- },
-}
-
-export const ATable = defineComponent({
- name: 'ATable',
- props: {
- spacing: spacingProp,
- ...useCardProps(),
- ...tableProps,
- },
- setup(props, { slots }) {
- const spacing = useSpacing(toRef(props, 'spacing'))
-
- // âšī¸ I used destructing to extract card props from table props. Moreover,I didn't wanted to use destructured props hence I omitted them
-
- const cardProps = computed>>(() => {
- const tablePropsNames = Object.keys(tableProps)
-
- const cardPropsEntries = Object.entries(props).map(([propName, propValue]) => {
- if (!tablePropsNames.includes(propName))
- return [propName, propValue]
-
- return null
- }).filter(i => i) as [keyof typeof props, typeof props[keyof typeof props]][]
-
- return toRefs(reactive(Object.fromEntries(cardPropsEntries)))
- })
-
- // đ isSST
- const isSST = computedEager(() => !Array.isArray(props.rows))
-
- // đ _rows
- // If rows prop is array directly set it else table data comes from server hence we will assign blank array as initial rows data
- const _rows = computed(() => isSST.value ? [] : props.rows)
-
- // đ Server rows
- const _serverRows = ref([])
- const _serverTotal = ref(0)
-
- const fetchRows = () => {
- // _search.value, currentPage.value, currentPageSize.value, sortedCols.value
- if (typeof props.rows !== 'function')
- return
-
- (props.rows as ItemsFunction)({
- /* eslint-disable @typescript-eslint/no-use-before-define */
- q: _search.value,
- currentPage: currentPage.value,
- rowsPerPage: currentPageSize.value,
- sortedCols: toRaw(sortedCols.value),
- /* eslint-enable @typescript-eslint/no-use-before-define */
- })
- .then(data => {
- const { rows, total } = data
- _serverRows.value = rows as Object[]
- _serverTotal.value = total
- })
- }
-
- // đ Search
- // TODO: Check using custom input for SST
- const _search = ref('')
-
- // đ Column defaults
- const columnDefaults = {
- isFilterable: true,
- isSortable: true,
- shallSortByAsc: null,
- }
-
- // đ Paginated Rows
- const paginatedRows = ref([])
-
- // đ rowsToRender
- const rowsToRender = computed(() => isSST.value ? _serverRows.value : paginatedRows.value)
-
- // đ _columns
- // TODO: Improve _columns computation
- // If columns are provided via prop
- const _columns: Ref = computed(() => props.columns.length
-
- // Inject column defaults by iterating over each col
- ? props.columns.map(c => ({ ...columnDefaults, ...c }))
-
- // Else generate columns from first row
- : isSST.value
-
- ? (rowsToRender.value.length
- ? Object.keys(rowsToRender.value[0])
- .map(k => ({
- ...columnDefaults,
- name: k,
- }))
- : [])
- : props.rows?.length
- ? Object.keys((props.rows as Object[])[0])
- .map(k => ({
- ...columnDefaults,
- name: k,
- }))
- : [],
- )
-
- // console.log('_columns :>> ', _columns.value)
-
- // Filter out columns that is searchable based on isFilterable property
- const searchableCols = _columns.value.filter(col => col.isFilterable || col.filterBy)
-
- // đ sortedCols
- // TODO(v0.2.0) Try to use _columns for sorting
- const sortedCols = ref([])
-
- // đ Filtered Rows
- const { results: filteredRows } = useSearch(
- _search,
-
- // TODO(TS): Improve typing
- (_rows as ComputedRef),
- searchableCols
- .map(col => col.filterBy
- ? { name: col.name, filterBy: col.filterBy }
- : col.name),
- )
-
- // TODO: If we sort second col after selecting any first and set order to desc on first clicked row then its err
- // đ Sorted Rows
- const { results: sortedRows } = useSort(
- filteredRows,
- computed(() => {
- const colsSortBy: typeSortBy = []
-
- sortedCols.value.forEach(col => {
- if (col.sortBy)
- colsSortBy.push({ name: col.name, sortBy: col.sortBy })
- else if (col.shallSortByAsc !== null)
- colsSortBy.push({ name: col.name, isAsc: col.shallSortByAsc })
- })
-
- return colsSortBy
- }),
- )
-
- // TODO: Check passing toRef(props, 'pageSize') to useOffsetPagination and use returned `currentPageSize` for reactive pgeSize prop
- const currentPageSize = ref(props.pageSize)
- const paginateRows = ({ currentPage, currentPageSize }: { currentPage: number; currentPageSize: number }) => {
- const start = (currentPage - 1) * currentPageSize
- const end = currentPage * currentPageSize
-
- paginatedRows.value = sortedRows.value.slice(start, end)
- }
-
- // paginateRows({ currentPage: 1, currentPageSize: currentPageSize.value })
- const total = computed(() => isSST.value ? _serverTotal.value : sortedRows.value.length)
-
- // đ useOffsetPagination
- const {
- currentPage,
-
- // currentPageSize,
- // pageCount,
- isFirstPage,
- isLastPage,
- prev: goToPreviousPage,
- next: goToNextPage,
- } = useOffsetPagination({
- total,
- page: 1,
- pageSize: currentPageSize,
-
- // eslint-disable-next-line @typescript-eslint/no-use-before-define
- onPageChange: () => { recalculateCurrentPageData() },
- // eslint-disable-next-line @typescript-eslint/no-use-before-define
- onPageSizeChange: () => { recalculateCurrentPageData() },
- })
-
- const recalculateCurrentPageData = () => {
- if (isSST.value)
- fetchRows()
- else
- paginateRows({ currentPage: currentPage.value, currentPageSize: currentPageSize.value })
- }
-
- watch([_search, sortedCols, sortedRows], recalculateCurrentPageData, { deep: true, immediate: true })
-
- // đ onRequest
- // watch([_search, currentPage, sortedCols], fetchRows, { deep: true, immediate: true })
-
- // đ Handle header click
- const handleHeaderClick = (col: TableColumn) => {
- // If table is not sortable don't sort the table
- if (!props.isSortable)
- return
-
- const index = sortedCols.value.findIndex(c => c.name === col.name)
-
- // console.log('index :>> ', index)
-
- /*
- If col exist in arr
- if sort order is asc
- set sort order to desc
- else
- set sort order to null
- and remove the column from `sortedCols`
- else
- set sort order to asc
-
- // multi-sort
-
- if sort order is not null
- if multi-sort is not enabled
- assign above modified col as single element of array to `sortedCols`
- else
- add modified col to sorted cols
- */
-
- if (index > -1) {
- // Sorted by Asc
- if (col.shallSortByAsc) {
- col.shallSortByAsc = false
- }
-
- // Sorted by Desc
- else {
- col.shallSortByAsc = null
- sortedCols.value.splice(index, 1)
- }
- }
-
- // Not sorted
- else {
- col.shallSortByAsc = true
- }
-
- // Handle Multi sort
- if (col.shallSortByAsc !== null) {
- if (!props.multiSort)
- sortedCols.value = [col]
- else
- if (col.shallSortByAsc)
- sortedCols.value.push(col)
- else
- sortedCols.value.splice(index, 1, { ...col })
- }
- }
-
- const getShallSortByAsc = computed(() => (col: TableColumn) => {
- const _col = sortedCols.value.find(sortedCol => sortedCol.name === col.name)
-
- return !_col ? null : _col?.shallSortByAsc
- })
-
- return () => {
- // đ No Data
- const noDataTr =
-
- {slots['no-data']
- ? slots['no-data']()
- :
- {props.noDataText}
- }
-
-
-
- /*
- âšī¸ We need to assign table to const because card have default slots which render table and we also want to allow rendering
- text via default text just above the table
-
- Later on, we will merge both default slots and will pass as single slot content to card
- */
- const table = [slots.default?.(), table, tableFooter],
- headerRight: typeof props.search === 'boolean' && props.search ? searchInput : null,
- }}
- />
- )
- }
- },
-})
-
-export type ATable = InstanceType
diff --git a/packages/anu-vue/src/components/table/ATable.vue b/packages/anu-vue/src/components/table/ATable.vue
new file mode 100644
index 00000000..99ea07e1
--- /dev/null
+++ b/packages/anu-vue/src/components/table/ATable.vue
@@ -0,0 +1,125 @@
+
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/table/events.ts b/packages/anu-vue/src/components/table/events.ts
new file mode 100644
index 00000000..b0eadc20
--- /dev/null
+++ b/packages/anu-vue/src/components/table/events.ts
@@ -0,0 +1,14 @@
+/*
+ Events can't get registered if we import interface maybe due to same props import interface issue
+
+ Usage:
+
+ const emit = defineEmits<
+ TableEvents<
+ Exclude<(ExtractPropTypes)['cols'], undefined>
+ >
+>()
+*/
+export interface TableEvents {
+ (e: 'click:header', col: HeaderClickCol): void
+}
diff --git a/packages/anu-vue/src/components/table/index.ts b/packages/anu-vue/src/components/table/index.ts
index b481ddfa..fe5b498b 100644
--- a/packages/anu-vue/src/components/table/index.ts
+++ b/packages/anu-vue/src/components/table/index.ts
@@ -1,2 +1,4 @@
-export { ATable } from './ATable'
+export { default as ATable } from './ATable.vue'
+export * from './events'
+export * from './props'
diff --git a/packages/anu-vue/src/components/table/props.ts b/packages/anu-vue/src/components/table/props.ts
new file mode 100644
index 00000000..52970791
--- /dev/null
+++ b/packages/anu-vue/src/components/table/props.ts
@@ -0,0 +1,40 @@
+import type { PropType } from 'vue'
+import { spacing } from '@/composables/useProps'
+
+export interface PropColumn {
+ name: string
+ classes?: any
+ formatter?: (val: unknown) => unknown
+ headerClasses?: any
+}
+
+export const tableProps = {
+ /**
+ * Table rows
+ */
+ rows: {
+ type: Array as PropType,
+ default: () => [],
+ },
+
+ /**
+ * By default table will infer the column definition from first row. You can also manually provide the column definition for more control.
+ */
+ cols: {
+ type: [Array] as PropType,
+ default: () => [],
+ },
+
+ /**
+ * Text to render when no row is available
+ */
+ noDataText: {
+ type: String,
+ default: 'No records found!',
+ },
+
+ /**
+ * Component spacing
+ */
+ spacing,
+}
diff --git a/packages/anu-vue/src/components/table/useTable.ts b/packages/anu-vue/src/components/table/useTable.ts
new file mode 100644
index 00000000..d2214099
--- /dev/null
+++ b/packages/anu-vue/src/components/table/useTable.ts
@@ -0,0 +1,21 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { SortBy } from '@/components/data-table'
+
+export const getComputedCols = (rows: Ref[]>, cols: Ref) => {
+ return computed(() => {
+ // If custom cols are provided => Use them
+ if (cols.value.length)
+ return cols.value
+
+ // if there's no rows => Don't generate col definition
+ if (!rows.value.length)
+ return []
+
+ // Else generate cols from first row
+ return Object.keys(rows.value[0]).map(rowObjProperty => ({ name: rowObjProperty } as PropColumn))
+ })
+}
+
+export const getSortedCols = (cols: ComputedRef) => {
+ return computed(() => cols.value.filter(col => col.isSortable && col.sortBy !== undefined))
+}
diff --git a/packages/anu-vue/src/components/textarea/ATextarea.tsx b/packages/anu-vue/src/components/textarea/ATextarea.tsx
deleted file mode 100644
index fa88376c..00000000
--- a/packages/anu-vue/src/components/textarea/ATextarea.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { defineComponent, ref } from 'vue'
-import { ABaseInput, useBaseInputProp } from '@/components/base-input'
-
-export const ATextarea = defineComponent({
- name: 'ATextarea',
- props: {
- /**
- * Bind v-model value to textarea
- */
- modelValue: {
- type: String,
- default: undefined,
- },
-
- /**
- * Set textarea height.
- */
- height: {
- type: String,
- default: undefined,
- },
-
- ...useBaseInputProp(),
- },
- emits: ['update:modelValue'],
- setup(props, { slots, emit, attrs }) {
- const textarea = ref()
-
- const handleInputWrapperClick = () => {
- textarea.value?.focus()
- }
-
- return () => (
-
- {{
- // Recursively pass down slots
- ...slots,
- default: (slotProps: any) =>
-
-
diff --git a/docs/demos/table/DemoTableSlots.vue b/docs/demos/table/DemoTableSlots.vue
index add6c8f2..99179a77 100644
--- a/docs/demos/table/DemoTableSlots.vue
+++ b/docs/demos/table/DemoTableSlots.vue
@@ -1,31 +1,5 @@
@@ -33,7 +7,10 @@ const rows = [
-
diff --git a/docs/demos/table/data.ts b/docs/demos/table/data.ts
new file mode 100644
index 00000000..4008c190
--- /dev/null
+++ b/docs/demos/table/data.ts
@@ -0,0 +1,345 @@
+import type { ItemsFunctionParams, typeSortBy } from 'anu-vue'
+import { useSearch, useSort } from 'anu-vue'
+
+export const rows = [
+ {
+ name: 'Leanne Graham',
+ username: 'Bret',
+ website: 'hildegard.org',
+ },
+ {
+ name: 'Ervin Howell',
+ username: 'Antonette',
+ website: 'anastasia.net',
+ },
+ {
+ name: 'Clementine Bauch',
+ username: 'Samantha',
+ website: 'ramiro.info',
+ },
+ {
+ name: 'Patricia Lebsack',
+ username: 'Karianne',
+ website: 'kale.biz',
+ },
+ {
+ name: 'Chelsey Dietrich',
+ username: 'Kamren',
+ website: 'demarco.info',
+ },
+]
+
+// đ For Server side table
+
+export interface User {
+ id: number
+ name: string
+ username: string
+ email: string
+ address: {
+ street: string
+ suite: string
+ city: string
+ zipcode: string
+ geo: {
+ lat: string
+ lng: string
+ }
+ }
+ phone: string
+ website: string
+ company: {
+ name: string
+ catchPhrase: string
+ bs: string
+ }
+}
+
+export const fakeDatabase: User[] = [
+ {
+ id: 1,
+ name: 'Leanne Graham',
+ username: 'Bret',
+ email: 'Sincere@april.biz',
+ address: {
+ street: 'Kulas Light',
+ suite: 'Apt. 556',
+ city: 'Gwenborough',
+ zipcode: '92998-3874',
+ geo: {
+ lat: '-37.3159',
+ lng: '81.1496',
+ },
+ },
+ phone: '1-770-736-8031 x56442',
+ website: 'hildegard.org',
+ company: {
+ name: 'Romaguera-Crona',
+ catchPhrase: 'Multi-layered client-server neural-net',
+ bs: 'harness real-time e-markets',
+ },
+ },
+ {
+ id: 2,
+ name: 'Ervin Howell',
+ username: 'Antonette',
+ email: 'Shanna@melissa.tv',
+ address: {
+ street: 'Victor Plains',
+ suite: 'Suite 879',
+ city: 'Wisokyburgh',
+ zipcode: '90566-7771',
+ geo: {
+ lat: '-43.9509',
+ lng: '-34.4618',
+ },
+ },
+ phone: '010-692-6593 x09125',
+ website: 'anastasia.net',
+ company: {
+ name: 'Deckow-Crist',
+ catchPhrase: 'Proactive didactic contingency',
+ bs: 'synergize scalable supply-chains',
+ },
+ },
+ {
+ id: 3,
+ name: 'Clementine Bauch',
+ username: 'Samantha',
+ email: 'Nathan@yesenia.net',
+ address: {
+ street: 'Douglas Extension',
+ suite: 'Suite 847',
+ city: 'McKenziehaven',
+ zipcode: '59590-4157',
+ geo: {
+ lat: '-68.6102',
+ lng: '-47.0653',
+ },
+ },
+ phone: '1-463-123-4447',
+ website: 'ramiro.info',
+ company: {
+ name: 'Romaguera-Jacobson',
+ catchPhrase: 'Face to face bifurcated interface',
+ bs: 'e-enable strategic applications',
+ },
+ },
+ {
+ id: 4,
+ name: 'Patricia Lebsack',
+ username: 'Karianne',
+ email: 'Julianne.OConner@kory.org',
+ address: {
+ street: 'Hoeger Mall',
+ suite: 'Apt. 692',
+ city: 'South Elvis',
+ zipcode: '53919-4257',
+ geo: {
+ lat: '29.4572',
+ lng: '-164.2990',
+ },
+ },
+ phone: '493-170-9623 x156',
+ website: 'kale.biz',
+ company: {
+ name: 'Robel-Corkery',
+ catchPhrase: 'Multi-tiered zero tolerance productivity',
+ bs: 'transition cutting-edge web services',
+ },
+ },
+ {
+ id: 5,
+ name: 'Chelsey Dietrich',
+ username: 'Kamren',
+ email: 'Lucio_Hettinger@annie.ca',
+ address: {
+ street: 'Skiles Walks',
+ suite: 'Suite 351',
+ city: 'Roscoeview',
+ zipcode: '33263',
+ geo: {
+ lat: '-31.8129',
+ lng: '62.5342',
+ },
+ },
+ phone: '(254)954-1289',
+ website: 'demarco.info',
+ company: {
+ name: 'Keebler LLC',
+ catchPhrase: 'User-centric fault-tolerant solution',
+ bs: 'revolutionize end-to-end systems',
+ },
+ },
+ {
+ id: 6,
+ name: 'Mrs. Dennis Schulist',
+ username: 'Leopoldo_Corkery',
+ email: 'Karley_Dach@jasper.info',
+ address: {
+ street: 'Norberto Crossing',
+ suite: 'Apt. 950',
+ city: 'South Christy',
+ zipcode: '23505-1337',
+ geo: {
+ lat: '-71.4197',
+ lng: '71.7478',
+ },
+ },
+ phone: '1-477-935-8478 x6430',
+ website: 'ola.org',
+ company: {
+ name: 'Considine-Lockman',
+ catchPhrase: 'Synchronised bottom-line interface',
+ bs: 'e-enable innovative applications',
+ },
+ },
+ {
+ id: 7,
+ name: 'Kurtis Weissnat',
+ username: 'Elwyn.Skiles',
+ email: 'Telly.Hoeger@billy.biz',
+ address: {
+ street: 'Rex Trail',
+ suite: 'Suite 280',
+ city: 'Howemouth',
+ zipcode: '58804-1099',
+ geo: {
+ lat: '24.8918',
+ lng: '21.8984',
+ },
+ },
+ phone: '210.067.6132',
+ website: 'elvis.io',
+ company: {
+ name: 'Johns Group',
+ catchPhrase: 'Configurable multimedia task-force',
+ bs: 'generate enterprise e-tailers',
+ },
+ },
+ {
+ id: 8,
+ name: 'Nicholas Runolfsdottir V',
+ username: 'Maxime_Nienow',
+ email: 'Sherwood@rosamond.me',
+ address: {
+ street: 'Ellsworth Summit',
+ suite: 'Suite 729',
+ city: 'Aliyaview',
+ zipcode: '45169',
+ geo: {
+ lat: '-14.3990',
+ lng: '-120.7677',
+ },
+ },
+ phone: '586.493.6943 x140',
+ website: 'jacynthe.com',
+ company: {
+ name: 'Abernathy Group',
+ catchPhrase: 'Implemented secondary concept',
+ bs: 'e-enable extensible e-tailers',
+ },
+ },
+ {
+ id: 9,
+ name: 'Glenna Reichert',
+ username: 'Delphine',
+ email: 'Chaim_McDermott@dana.io',
+ address: {
+ street: 'Dayna Park',
+ suite: 'Suite 449',
+ city: 'Bartholomebury',
+ zipcode: '76495-3109',
+ geo: {
+ lat: '24.6463',
+ lng: '-168.8889',
+ },
+ },
+ phone: '(775)976-6794 x41206',
+ website: 'conrad.com',
+ company: {
+ name: 'Yost and Sons',
+ catchPhrase: 'Switchable contextually-based project',
+ bs: 'aggregate real-time technologies',
+ },
+ },
+ {
+ id: 10,
+ name: 'Clementina DuBuque',
+ username: 'Moriah.Stanton',
+ email: 'Rey.Padberg@karina.biz',
+ address: {
+ street: 'Kattie Turnpike',
+ suite: 'Suite 198',
+ city: 'Lebsackbury',
+ zipcode: '31428-2261',
+ geo: {
+ lat: '-38.2386',
+ lng: '57.2232',
+ },
+ },
+ phone: '024-648-3804',
+ website: 'ambrose.net',
+ company: {
+ name: 'Hoeger LLC',
+ catchPhrase: 'Centralized empowering task-force',
+ bs: 'target end-to-end models',
+ },
+ },
+]
+
+export const fakeAPICall = ({ q, currentPage, rowsPerPage, sortedCols }: ItemsFunctionParams) => {
+ return new Promise(resolve => {
+ // Added some timeout to delay the request response
+ setTimeout(() => {
+ // Search logic
+ const { results: filteredData } = useSearch
- {/* âšī¸ We need div as wrapper with span having `vertical-align: text-top` to center the icon with the text */}
- {props.icon
- ?
- )
- },
-})
-
-export type AAlert = InstanceType
-
-
- : null}
-
- {slots.default?.()}
-
- {
- appendIcon
- ?
-
-
- : null
- }
-
+
+
+
diff --git a/packages/anu-vue/src/components/alert/index.ts b/packages/anu-vue/src/components/alert/index.ts
index 53a122e7..adb877bb 100644
--- a/packages/anu-vue/src/components/alert/index.ts
+++ b/packages/anu-vue/src/components/alert/index.ts
@@ -1,2 +1 @@
-export { AAlert } from './AAlert'
-
+export { default as AAlert } from './AAlert.vue'
diff --git a/packages/anu-vue/src/components/avatar/AAvatar.tsx b/packages/anu-vue/src/components/avatar/AAvatar.tsx
deleted file mode 100644
index e2dff9ff..00000000
--- a/packages/anu-vue/src/components/avatar/AAvatar.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { computed, defineComponent, toRef } from 'vue'
-import { avatarOnlyProps } from '@/components/avatar/props'
-import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
-import { spacingProp, useSpacing } from '@/composables/useSpacing'
-
-export const AAvatar = defineComponent({
- name: 'AAvatar',
- props: {
- spacing: spacingProp,
- ...useLayerProps({
- color: {
- default: 'primary',
- },
- variant: {
- default: 'light',
- },
- }),
- ...avatarOnlyProps,
- },
- setup(props, { slots }) {
- const spacing = useSpacing(toRef(props, 'spacing'))
- const { getLayerClasses } = useLayer()
- const { styles, classes } = getLayerClasses(
- toRef(props, 'color'),
- toRef(props, 'variant'),
- toRef(props, 'states'),
- )
-
- const defaultSlotContent = computed(() => {
- if (props.icon)
- return
- if (props.src) {
- return (
-
+
+
+
+
+
+
+
+
+
+
- {
- slots.default
- ? slots.default()
- : defaultSlotContent.value
- }
-
- )
- },
-})
-
-export type AAvatar = InstanceType
+
+ ![]()
+
+ {{ props.content }}
+
+
+
diff --git a/packages/anu-vue/src/components/avatar/index.ts b/packages/anu-vue/src/components/avatar/index.ts
index b63044aa..5e2a9d7b 100644
--- a/packages/anu-vue/src/components/avatar/index.ts
+++ b/packages/anu-vue/src/components/avatar/index.ts
@@ -1,6 +1,2 @@
-// â Avatar should be exported last. However, do to format on save it comes on top
-export { AAvatar } from './AAvatar'
-
-// export { avatarOnlyProps } from './props'
-
-export const isAvatarUsed = (props: any): boolean => props.icon || props.src || props.content
+export { default as AAvatar } from './AAvatar.vue'
+export * from './props'
diff --git a/packages/anu-vue/src/components/avatar/props.ts b/packages/anu-vue/src/components/avatar/props.ts
index b518c540..9cd5b174 100644
--- a/packages/anu-vue/src/components/avatar/props.ts
+++ b/packages/anu-vue/src/components/avatar/props.ts
@@ -1,42 +1,41 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import type { ConfigurableValue } from '@/composables/useConfigurable'
+import type { ExtractPropTypes } from 'vue'
+import { useProps as useLayerProps } from '@/composables/useLayer'
+import { configurable, spacing } from '@/composables/useProps'
+
+export const avatarProps = {
+ spacing,
+
+ ...useLayerProps({
+ color: {
+ default: 'primary',
+ },
+ variant: {
+ default: 'light',
+ },
+ }),
-export const avatarOnlyProps = {
/**
* Icon to render in avatar
*/
- icon: {
- type: [Array, String] as PropType
- {slots.default?.()}
-
-
-
- },
-})
-
-export type ABadge = InstanceType
- {badgeSlotContent.value}
-
-
+
+
+
+
diff --git a/packages/anu-vue/src/components/badge/index.ts b/packages/anu-vue/src/components/badge/index.ts
index 353e76fd..43d49f60 100644
--- a/packages/anu-vue/src/components/badge/index.ts
+++ b/packages/anu-vue/src/components/badge/index.ts
@@ -1,2 +1,2 @@
-export { ABadge } from './ABadge'
+export { default as ABadge } from './ABadge.vue'
diff --git a/packages/anu-vue/src/components/base-input/ABaseInput.tsx b/packages/anu-vue/src/components/base-input/ABaseInput.tsx
deleted file mode 100644
index 914bd166..00000000
--- a/packages/anu-vue/src/components/base-input/ABaseInput.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import type { PropType } from 'vue'
-import { defineComponent, ref, toRef } from 'vue'
-import { disabled, readonly } from '@/composables/useProps'
-import { spacingProp, useSpacing } from '@/composables/useSpacing'
-import TransitionExpand from '@/transitions/TransitionExpand.vue'
-
-export const ABaseInput = defineComponent({
- name: 'ABaseInput',
- inheritAttrs: false,
- props: {
- spacing: spacingProp,
- inputWrapperClasses: [Array, String, Object] as PropType
+
+
+ {{ formatMaxContent($slots.content()[0].children) }}
+
+
+ {{ formatMaxContent(props.content) }}
+
+
+
+
- {/* đ Label */}
- {
- slots.label
- ? slots.label?.()
- : props.label
- ?
- : null
- }
-
-
-
- }
-
- )
- },
-})
-
-export type ABaseInput = InstanceType
- {/* đ Slot: Prepend */}
- {
- slots.prepend
- ? slots.prepend?.()
- : props.prependIcon
- ?
- : null
- }
-
- {/* SECTION Input wrapper */}
-
- {/* đ Slot: Bottom */}
- {
- slots.bottom
- ? slots.bottom?.()
- : { emit('click:inputWrapper') }}
- >
-
- {/* đ Slot: Prepend Inner */}
- {
- slots['prepend-inner']
- ? slots['prepend-inner']?.()
- : props.prependInnerIcon
- ?
- : null
- }
-
- {/* đ Slot: Default */}
- {slots.default?.({
- ...attrs,
- class: [
- 'a-base-input-child w-full h-full inset-0 rounded-inherit bg-transparent',
- slots['prepend-inner'] || props.prependInnerIcon ? 'a-base-input-w-prepend-inner' : 'a-base-input-wo-prepend-inner',
- slots['append-inner'] || props.appendInnerIcon ? 'a-base-input-w-append-inner' : 'a-base-input-wo-append-inner',
- ],
- id: elementId,
- })}
-
- {/* đ Slot: Append Inner */}
- {
- slots['append-inner']
- ? slots['append-inner']?.()
- : props.appendInnerIcon
- ?
- : null
- }
-
- {/* !SECTION */}
-
- {/* đ Slot: Append */}
- {
- slots.append
- ? slots.append?.()
- : props.appendIcon
- ?
- : null
- }
-
-
- {props.error || props.hint}
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/base-input/index.ts b/packages/anu-vue/src/components/base-input/index.ts
index 1b1a05be..3ef32437 100644
--- a/packages/anu-vue/src/components/base-input/index.ts
+++ b/packages/anu-vue/src/components/base-input/index.ts
@@ -1,23 +1,3 @@
-import type { ComponentObjectPropsOptions } from 'vue'
-import { disabled, readonly } from '@/composables/useProps'
-export { ABaseInput } from './ABaseInput'
+export { default as ABaseInput } from './ABaseInput.vue'
+export * from './props'
-export const useBaseInputProp = (propOverrides?: Partial
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ props.error || props.hint }}
+
+
- {/* đ Image */}
- {props.img
- ? 
- : null}
-
- {/* đ Typography */}
- {
- _isTypographyUsed
- ?
- )
- },
-})
-
-export type ACard = InstanceType
-
- {{ ...slots, default: null }}
-
-
- : null
- }
-
- {/* đ Default slot */}
- {slots.default?.()}
-
+
+ ![]()
+
+
+
+
diff --git a/packages/anu-vue/src/components/card/index.ts b/packages/anu-vue/src/components/card/index.ts
index b263cda5..d880cb98 100644
--- a/packages/anu-vue/src/components/card/index.ts
+++ b/packages/anu-vue/src/components/card/index.ts
@@ -1,31 +1,2 @@
-import type { ComponentObjectPropsOptions } from 'vue'
-import { useProps as useLayerProps } from '@/composables/useLayer'
-import { useTypographyProps } from '@/composables/useTypography'
-export { ACard } from './ACard'
-
-// TODO: Use this card props in component as well
-export const useCardProps = (propOverrides?: Partial
+
+
+
+
+
+
+
+
+
- { props.icon ? : null }
- { slots.default?.() }
- { props.appendIcon ? : null }
- { props.closable
- ?
- : null }
-
- : null
- },
-})
-
-export type AChip = InstanceType
+
+
+
+
+
+
diff --git a/packages/anu-vue/src/components/chip/index.ts b/packages/anu-vue/src/components/chip/index.ts
index 29808505..f13ba50f 100644
--- a/packages/anu-vue/src/components/chip/index.ts
+++ b/packages/anu-vue/src/components/chip/index.ts
@@ -1,2 +1,2 @@
-export { AChip } from './AChip'
+export { default as AChip } from './AChip.vue'
diff --git a/packages/anu-vue/src/components/data-table/ADataTable.vue b/packages/anu-vue/src/components/data-table/ADataTable.vue
new file mode 100644
index 00000000..8c8fcd29
--- /dev/null
+++ b/packages/anu-vue/src/components/data-table/ADataTable.vue
@@ -0,0 +1,353 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- {{ ...slots }}
-
-
-
-
-
-
- {{ ...slots }}
-
-
-
- -
- {/* đ before slot */}
- {
- slots.before
- ?
- - {slots.before?.()} - - : null - } - - {/* đ List items */} - {slots.default - ? slots.default({ handleListItemClick }) - : props.items.map((item, index) => ( -
- - {slots.after?.()} - - : null - } -
-
+
+
-
+
+
+
+
+ -
+
+
+
-
- {items.value.map((icon, i) => {
- return onMouseEnter(event, i))}
- onMouseleave={onMouseLeave}/>
- })}
-
- )
- },
-})
-
-export type ARating = InstanceType-
- {
- slots.default
- ? slots.default({
- attrs: {
- class: optionClasses,
- },
- })
- : props.options?.map(option => (
-
- handleOptionClick(option)} - > - {isObjectOption(option) ? (option as ObjectOption).label : option} - - )) - } -
-
- {/* đ thead */}
-
-
-
-
- const searchInput = () => (
- | handleHeaderClick(col)}
- >
-
- {
- slots[`header-${col.name}`]
- ? slots[`header-${col.name}`]?.({ col })
- :
- {col.name}
-
- }
-
-
-
- | ,
- )}
-
|---|
| - { - slots[`col-${col.name}`] - ? slots[`col-${col.name}`]?.({ row }) - : col.formatter - ? - {col.formatter?.(row)} - - - // TODO(TS): Improve typing - : - {row[col.name as keyof Object]} - - } - | , - ) - } -
+
+
+
+
+
+ |
+ |
+
|---|
|
+ |
+
| + {{ props.noDataText }} + | +