@wishbone-media/spark 0.35.0 → 0.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .spark-address-google-container{--gmpx-color-surface: white;--gmpx-color-on-surface: #111827;--gmpx-color-on-surface-variant: #6b7280;--gmpx-font-family-base: inherit;--gmpx-font-size-base: .875rem}.spark-address-google-container gmp-place-autocomplete{width:100%}.spark-table-pagination-per-page[data-v-9ef8544b]{@apply flex items-center;}.spark-table-search[data-v-976170dc]{@apply relative flex items-center;}.spark-table-filter-select[data-v-642dbc69],.spark-table-filter-buttons[data-v-01a49899]{@apply flex items-center gap-2;}.spark-table-filter-buttons-label[data-v-01a49899]{@apply text-sm font-medium text-gray-700;}.spark-table-date-picker[data-v-44ef9cb8]{@apply flex items-center gap-2;}.spark-table-reset[data-v-0894e3bf]{@apply flex items-center;}
1
+ .spark-table-pagination-per-page[data-v-9ef8544b]{@apply flex items-center;}.spark-table-search[data-v-976170dc]{@apply relative flex items-center;}.spark-table-filter-select[data-v-642dbc69],.spark-table-filter-buttons[data-v-01a49899]{@apply flex items-center gap-2;}.spark-table-filter-buttons-label[data-v-01a49899]{@apply text-sm font-medium text-gray-700;}.spark-table-date-picker[data-v-44ef9cb8]{@apply flex items-center gap-2;}.spark-table-reset[data-v-0894e3bf]{@apply flex items-center;}
package/dist/index.js CHANGED
@@ -278,7 +278,7 @@ const Ws = { class: "spark-address-input" }, Ks = ["disabled"], Gs = ["selected"
278
278
  "onUpdate:modelValue": x[3] || (x[3] = (_) => c.street = _),
279
279
  type: "text",
280
280
  placeholder: "Street",
281
- class: "col-span-2 rounded border border-gray-300 px-2 py-1.5 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none",
281
+ class: "rounded border border-gray-300 px-2 py-1.5 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none",
282
282
  disabled: e.disabled,
283
283
  onInput: b
284
284
  }, null, 40, oa), [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wishbone-media/spark",
3
- "version": "0.35.0",
3
+ "version": "0.36.0",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -0,0 +1,67 @@
1
+ /*
2
+ * SparkAddressInput styles
3
+ *
4
+ * Import in consuming app:
5
+ * @import '@wishbone-media/spark/assets/css/spark-address-input.css';
6
+ */
7
+
8
+ .spark-address-google-container {
9
+ --gmpx-color-surface: white;
10
+ --gmpx-color-on-surface: #111827;
11
+ --gmpx-color-on-surface-variant: #6b7280;
12
+ --gmpx-font-family-base: inherit;
13
+ --gmpx-font-size-base: 0.875rem;
14
+ }
15
+
16
+ .spark-address-google-container gmp-place-autocomplete {
17
+ width: 100%;
18
+ }
19
+
20
+ /*
21
+ * Google PlaceAutocompleteElement styling via ::part() selectors.
22
+ * Adjust these to match your app's FormKit text input appearance.
23
+ *
24
+ * Available ::part() targets:
25
+ * ::part(input) — the autocomplete text input
26
+ * ::part(prediction-list) — the suggestions dropdown container
27
+ * ::part(prediction-item) — each suggestion row
28
+ * ::part(prediction-item-icon) — the pin/location icon in each row
29
+ * ::part(prediction-item-main-text) — the bold matched text
30
+ * ::part(prediction-item-match) — the highlighted matching characters
31
+ * ::part(prediction-item-selected) — the hovered/focused suggestion
32
+ */
33
+
34
+ /* Autocomplete text input */
35
+ gmp-place-autocomplete::part(input) {
36
+ font-size: 0.875rem;
37
+ line-height: 1.25rem;
38
+ padding: 0.375rem 0.5rem;
39
+ border: 1px solid #d1d5db; /* gray-300 */
40
+ border-radius: 0.25rem;
41
+ outline: none;
42
+ width: 100%;
43
+ }
44
+
45
+ gmp-place-autocomplete::part(input):focus {
46
+ border-color: #3b82f6; /* blue-500 */
47
+ box-shadow: 0 0 0 1px #3b82f6;
48
+ }
49
+
50
+ /* Suggestions dropdown */
51
+ gmp-place-autocomplete::part(prediction-list) {
52
+ border: 1px solid #e5e7eb; /* gray-200 */
53
+ border-radius: 0.375rem;
54
+ margin-top: 0.25rem;
55
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
56
+ }
57
+
58
+ /* Individual suggestion row */
59
+ gmp-place-autocomplete::part(prediction-item) {
60
+ font-size: 0.875rem;
61
+ padding: 0.5rem 0.75rem;
62
+ }
63
+
64
+ /* Hovered/focused suggestion */
65
+ gmp-place-autocomplete::part(prediction-item-selected) {
66
+ background-color: #f3f4f6; /* gray-100 */
67
+ }
@@ -68,7 +68,7 @@
68
68
  v-model.trim="localAddress.street"
69
69
  type="text"
70
70
  placeholder="Street"
71
- class="col-span-2 rounded border border-gray-300 px-2 py-1.5 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
71
+ class="rounded border border-gray-300 px-2 py-1.5 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
72
72
  :disabled="disabled"
73
73
  @input="onManualInput"
74
74
  />
@@ -393,16 +393,4 @@ onUnmounted(() => {
393
393
  })
394
394
  </script>
395
395
 
396
- <style>
397
- .spark-address-google-container {
398
- --gmpx-color-surface: white;
399
- --gmpx-color-on-surface: #111827;
400
- --gmpx-color-on-surface-variant: #6b7280;
401
- --gmpx-font-family-base: inherit;
402
- --gmpx-font-size-base: 0.875rem;
403
- }
404
-
405
- .spark-address-google-container gmp-place-autocomplete {
406
- width: 100%;
407
- }
408
- </style>
396
+ <!-- Styles are in src/assets/css/spark-address-input.css (imported by consuming app) -->