@wishbone-media/spark 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/plugins/SparkTableDatePicker.vue

@@ -69,6 +69,7 @@ import { ref, watch } from 'vue'
  * @property {string} [param] - Custom query param (defaults to filter[key])
  * @property {string} [position='header-left'] - Toolbar position
  * @property {Object} [formkitProps] - Additional FormKit props to pass through
+ * @property {string} [initialValue] - Initial date value in YYYY-MM-DD format to apply on mount
  */
 
 const props = defineProps({
@@ -92,8 +93,18 @@ const label = props.config.label || null
 const param = props.config.param || `filter[${props.config.key}]`
 const componentKey = ref(`${param}-0`)
 
-// Initialize from existing params
-selectedDate.value = props.sparkTable.params[param] || null
+// Initialize from existing params or use initialValue
+if (props.sparkTable.params[param]) {
+  selectedDate.value = props.sparkTable.params[param]
+} else if (props.config.initialValue) {
+  selectedDate.value = props.config.initialValue
+  // Apply initial value to params on mount
+  props.sparkTable.methods.applyParams({
+    [param]: props.config.initialValue,
+  })
+} else {
+  selectedDate.value = null
+}
 
 // Watch for date changes
 watch(selectedDate, (newValue) => {

package/src/components/plugins/SparkTableFilterButtons.vue

@@ -49,6 +49,7 @@ import SparkButtonGroup from '@/components/SparkButtonGroup.vue'
  * @property {string} [label] - Label displayed before the button group
  * @property {string} [param] - Custom query param (defaults to filter[key])
  * @property {Array<{label: string, value: any}>} options - Button options (including "All" option with value: null)
+ * @property {string|number} [initialValue] - Initial value to apply on mount (must match an option's value)
  */
 
 const props = defineProps({
@@ -71,9 +72,17 @@ const selectedValue = ref(null)
 const label = props.config.label || null
 const paramKey = props.config.param || `filter[${props.config.key}]`
 
-// Initialize from existing params
+// Initialize from existing params or use initialValue
 if (props.sparkTable.params[paramKey] !== undefined) {
   selectedValue.value = props.sparkTable.params[paramKey]
+} else if (props.config.initialValue !== undefined) {
+  selectedValue.value = props.config.initialValue
+  // Apply initial value to params on mount (only if not null/undefined)
+  if (props.config.initialValue !== null) {
+    props.sparkTable.methods.applyParams({
+      [paramKey]: props.config.initialValue,
+    })
+  }
 }
 
 const isSelected = (value) => {

package/src/components/plugins/SparkTableFilterSelect.vue

@@ -50,6 +50,7 @@ import { ref, computed, watch } from 'vue'
  * @property {string} [placeholder='All'] - Placeholder for empty option
  * @property {string} [param] - Custom query parameter name (defaults to filter[key])
  * @property {string} [position='header-left'] - Toolbar position
+ * @property {string|number} [initialValue] - Initial value to apply on mount (must match an option's value)
  */
 
 const props = defineProps({
@@ -69,11 +70,17 @@ const props = defineProps({
 })
 
 const selectedValue = ref('')
-
-// Initialize from existing params
 const paramKey = props.config.param || `filter[${props.config.key}]`
+
+// Initialize from existing params or use initialValue
 if (props.sparkTable.params[paramKey]) {
   selectedValue.value = props.sparkTable.params[paramKey]
+} else if (props.config.initialValue !== undefined && props.config.initialValue !== null) {
+  selectedValue.value = props.config.initialValue
+  // Apply initial value to params on mount
+  props.sparkTable.methods.applyParams({
+    [paramKey]: props.config.initialValue,
+  })
 }
 
 const label = props.config.label || null

package/src/components/plugins/SparkTableSearch.vue

@@ -39,6 +39,7 @@ import { useDebounceFn } from '@vueuse/core'
  * @property {string} [param='search'] - Query parameter name for search
  * @property {number} [debounce=300] - Debounce delay in milliseconds
  * @property {string} [position='header-left'] - Toolbar position
+ * @property {string} [initialValue] - Initial search value to apply on mount
  */
 
 const props = defineProps({
@@ -59,15 +60,22 @@ const props = defineProps({
 })
 
 const searchValue = ref('')
+const paramKey = props.config.param || 'search'
 
-// Initialize from existing params
-if (props.sparkTable.params[props.config.param]) {
-  searchValue.value = props.sparkTable.params[props.config.param]
+// Initialize from existing params or use initialValue
+if (props.sparkTable.params[paramKey]) {
+  searchValue.value = props.sparkTable.params[paramKey]
+} else if (props.config.initialValue) {
+  searchValue.value = props.config.initialValue
+  // Apply initial value to params on mount
+  props.sparkTable.methods.applyParams({
+    [paramKey]: props.config.initialValue,
+  })
 }
 
 const clearSearch = () => {
   searchValue.value = ''
-  props.sparkTable.methods.removeParam(props.config.param)
+  props.sparkTable.methods.removeParam(paramKey)
 }
 
 // Watch searchValue and apply debounced search
@@ -75,10 +83,10 @@ const debouncedSearch = useDebounceFn((value) => {
   if (value) {
     props.sparkTable.methods.applyParams({
       page: 1,
-      [props.config.param]: value,
+      [paramKey]: value,
     })
   } else {
-    props.sparkTable.methods.removeParam(props.config.param)
+    props.sparkTable.methods.removeParam(paramKey)
   }
 }, props.config.debounce || 300)
 
@@ -91,7 +99,7 @@ const placeholder = props.config.placeholder || 'Search...'
 
 // Watch for external param changes
 watch(
-  () => props.sparkTable.params[props.config.param],
+  () => props.sparkTable.params[paramKey],
   (newValue) => {
     if (!newValue && searchValue.value) {
       searchValue.value = ''