Merge pull request #28 from flavorly/next

Datatable Release

packages/vanilla-components/package.json

@@ -57,6 +57,7 @@
     "fuse.js": "^6.6.2",
     "libphonenumber-js": "^1.10.14",
     "lodash": "^4.17.21",
+    "unplugin-vue-define-options": "^0.12.8",
     "vue": "^3.2.45"
   },
   "peerDependencies": {

packages/vanilla-components/src/components/avatar/avatar.vue

@@ -86,6 +86,11 @@
       photoPreview.value = null
     }
   })
+
+  defineOptions({
+    name: 'VanillaAvatar',
+    inheritAttrs: false,
+  })
 </script>
 
 <template>
@@ -131,9 +136,9 @@
             >
             <span
               v-else
-              :class="configuration.classesList.avatarPlaceholder"
+              :class="configuration.classesList.avatarPlaceholderText"
             >
-              <span :class="configuration.classesList.avatarPlaceholderText">{{ avatarInitials }}</span>
+              <span :class="configuration.classesList.avatarPlaceholder">{{ avatarInitials }}</span>
             </span>
           </div>
         </slot>

packages/vanilla-components/src/components/button/button.vue

@@ -66,6 +66,11 @@ onMounted(() => {
     }
   }
 })
+
+defineOptions({
+  name: 'VanillaButton',
+  inheritAttrs: true,
+})
 </script>
 
 <template>

packages/vanilla-components/src/components/card/card-empty.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { useInjectsClassesList } from '@/core/use'
 const classesList = useInjectsClassesList()!
+
+defineOptions({
+  name: 'VanillaCardEmptyPlaceholder',
+  inheritAttrs: true,
+})
 </script>
 
 <template>

packages/vanilla-components/src/components/card/card-footer.vue

@@ -34,6 +34,11 @@ const props = defineProps({
 })
 
 const classesList = useInjectsClassesList()!
+
+defineOptions({
+  name: 'VanillaCardFooter',
+  inheritAttrs: true,
+})
 </script>
 
 <template>

packages/vanilla-components/src/components/card/card.vue

@@ -41,6 +41,11 @@ const props = defineProps({
 
 const { configuration } = useConfiguration<CardProps>(cardConfig, 'Card')
 provide('configuration_vanilla', configuration)
+
+defineOptions({
+  name: 'VanillaCard',
+  inheritAttrs: true,
+})
 </script>
 
 <template>

packages/vanilla-components/src/components/checkbox/checkbox-group.vue

@@ -52,6 +52,11 @@ const { normalizedOptions } = useMultipleOptions(
   computed(() => props.valueAttribute),
   computed(() => props.normalizeOptions!),
 )
+
+defineOptions({
+  name: 'VanillaCheckboxGroup',
+  inheritAttrs: false,
+})
 </script>
 
 <template>

packages/vanilla-components/src/components/checkbox/checkbox.vue

@@ -99,6 +99,11 @@ const isChecked = computed(() => {
   }
   return localValue.value === props.checkedValue
 })
+
+defineOptions({
+  name: 'VanillaCheckbox',
+  inheritAttrs: false,
+})
 </script>
 
 <template>

packages/vanilla-components/src/components/country-input/country-input-option.vue

@@ -65,6 +65,11 @@ const nameLabel = computed(() => {
 
   return props.country.label
 })
+
+defineOptions({
+  name: 'VanillaCountryInputOption',
+  inheritAttrs: false,
+})
 </script>
 
 <template>

packages/vanilla-components/src/components/country-input/country-input.vue

@@ -110,6 +110,11 @@ const { configuration, errors, hasErrors, variant } = useConfiguration<CountryIn
 
 // Rebind Attributes
 const bindAttributes = useAttributesAndProps()
+
+defineOptions({
+  name: 'VanillaCountryInput',
+  inheritAttrs: true,
+})
 </script>
 
 <template>

packages/vanilla-components/src/components/datatable/config.ts

@@ -12,7 +12,7 @@ export const datatableConfig = {
 
     genericForbidden: 'cursor-not-allowed',
     genericPointer: 'cursor-pointer',
-    genericFormsContentContainer: 'flex items-center justify-center space-x-1 text-xs select-none cursor-pointer',
+    genericFormsContentContainer: 'flex items-center justify-center space-x-1 text-xs select-none cursor-pointer dark:text-white',
     genericFormsContentLink: 'underline flex items-center justify-center space-x-1',
     genericFormsContentIcons: 'h-4 w-4',
 
@@ -30,6 +30,7 @@ export const datatableConfig = {
     headerSettingsRefreshIcon: 'h-4 h-4',
     headerSettingsRefreshIconAnimation: 'animate-spin',
     headerSettingsEditIcon: 'h-4 h-4',
+    headerSettingsSearchIcon: 'h-4 h-4',
 
     searchContainer: 'px-5 mt-3 mb-3',
     searchInputVariant: 'compact',
@@ -58,7 +59,8 @@ export const datatableConfig = {
     emptyStateResetFiltersButtonVariant: 'primary',
     emptyStateResetFiltersButtonIcon: 'h-4 w-4',
 
-    tableContainer: 'datatable overflow-x-auto border-t dark:border-gray-700',
+    tableContainer: 'datatable overflow-x-auto dark:border-gray-700',
+    tableContainerBorder: 'border-t',
     tableClass: 'min-w-full m-0 table-fixed',
     tableBody: 'divide-y bg-gray-50 dark:bg-gray-800 divide-gray-200 dark:divide-gray-700/90',
     tableRow: '',
@@ -135,13 +137,16 @@ export declare interface DatatableUserSettings {
 
 export declare interface DatatableOptions {
   selectable?: boolean
+  allSelectable?: boolean
   searchable?: boolean
+  isSearchHidden?: boolean
   refreshable?: boolean
   manageSettings?: boolean
   showTotalItems?: boolean
   showPages?: boolean
   compact?: boolean
   striped?: boolean
+  filtersHashingMethod?: string
 }
 
 export declare interface DatatablePooling {
@@ -157,7 +162,7 @@ export declare interface DatatableFilter {
   layout?: string
   component: string
   placeholder?: string
-  value?: string | undefined | null | number
+  value?: string | undefined | null | number | boolean
   defaultValue?: string | undefined | null | number
   options?: undefined | InputOptions | NormalizedOption[] | NormalizedOptions
   rules?: undefined | string[]
@@ -207,6 +212,7 @@ export declare interface DatatableTranslations {
   filtersReset?: string
   filtersResetOr?: string
   filtersCopy?: string
+  filtersCopied?: string
   filtersSaveAndClose?: string
   filtersRemove?: string
 
@@ -372,6 +378,7 @@ export declare interface DatatableConfiguration {
   fetchData?: DatatableFetchDataFunction
   fetchEndpoint?: string
   fetchMethod?: string | 'GET' | 'POST' | 'PUT' | 'DELETE'
+  originUrl?: string | undefined
 
   actionsEndpoint?: string
   actionsMethod?: string | 'GET' | 'POST' | 'PUT' | 'DELETE'