@commercejs/ui 0.1.0 → 0.1.1
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/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 CommerceJS Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/module.json
CHANGED
|
@@ -1,16 +1,31 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
+
import { computed } from 'vue'
|
|
2
3
|
import type { Address } from '@commercejs/types'
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
* CAddressForm — Shipping/billing address form.
|
|
6
|
-
* Uses Nuxt UI form components
|
|
7
|
+
* Uses Nuxt UI form components with GCC-specific fields.
|
|
8
|
+
* Country dropdown is searchable with flag avatars.
|
|
9
|
+
* City dropdown loads cities based on selected country.
|
|
7
10
|
*/
|
|
8
11
|
|
|
12
|
+
export interface CountryItem {
|
|
13
|
+
name: string
|
|
14
|
+
flag: string | null
|
|
15
|
+
code: string
|
|
16
|
+
}
|
|
17
|
+
|
|
9
18
|
export interface AddressFormProps {
|
|
10
19
|
/** Current address values */
|
|
11
20
|
modelValue: Partial<Address>
|
|
12
21
|
/** Available countries for the dropdown */
|
|
13
|
-
countries?:
|
|
22
|
+
countries?: CountryItem[]
|
|
23
|
+
/** Cities for the selected country */
|
|
24
|
+
cities?: string[]
|
|
25
|
+
/** Whether countries are loading */
|
|
26
|
+
countriesLoading?: boolean
|
|
27
|
+
/** Whether cities are loading */
|
|
28
|
+
citiesLoading?: boolean
|
|
14
29
|
/** Whether to show GCC-specific fields (district, nationalAddress) */
|
|
15
30
|
showGccFields?: boolean
|
|
16
31
|
/** Whether the form is in loading/submitting state */
|
|
@@ -25,6 +40,9 @@ export interface AddressFormProps {
|
|
|
25
40
|
|
|
26
41
|
const props = withDefaults(defineProps<AddressFormProps>(), {
|
|
27
42
|
countries: () => [],
|
|
43
|
+
cities: () => [],
|
|
44
|
+
countriesLoading: false,
|
|
45
|
+
citiesLoading: false,
|
|
28
46
|
showGccFields: true,
|
|
29
47
|
loading: false,
|
|
30
48
|
})
|
|
@@ -42,6 +60,11 @@ function handleSubmit() {
|
|
|
42
60
|
emit('submit', props.modelValue)
|
|
43
61
|
}
|
|
44
62
|
|
|
63
|
+
/** Find the flag URL for the currently selected country */
|
|
64
|
+
const selectedCountryFlag = computed(() =>
|
|
65
|
+
props.countries.find(c => c.code === props.modelValue.country)?.flag || null,
|
|
66
|
+
)
|
|
67
|
+
|
|
45
68
|
// Resolve theme from app.config
|
|
46
69
|
const appConfig = useAppConfig()
|
|
47
70
|
const theme = computed(() => (appConfig.ui as any)?.addressForm ?? {})
|
|
@@ -67,6 +90,7 @@ const slotClasses = computed(() => {
|
|
|
67
90
|
required
|
|
68
91
|
:disabled="loading"
|
|
69
92
|
@update:model-value="update('firstName', $event)"
|
|
93
|
+
class="w-full"
|
|
70
94
|
/>
|
|
71
95
|
</UFormField>
|
|
72
96
|
<UFormField label="Last Name" :class="slotClasses.field">
|
|
@@ -76,6 +100,7 @@ const slotClasses = computed(() => {
|
|
|
76
100
|
required
|
|
77
101
|
:disabled="loading"
|
|
78
102
|
@update:model-value="update('lastName', $event)"
|
|
103
|
+
class="w-full"
|
|
79
104
|
/>
|
|
80
105
|
</UFormField>
|
|
81
106
|
</div>
|
|
@@ -88,6 +113,7 @@ const slotClasses = computed(() => {
|
|
|
88
113
|
type="tel"
|
|
89
114
|
:disabled="loading"
|
|
90
115
|
@update:model-value="update('phone', $event)"
|
|
116
|
+
class="w-full"
|
|
91
117
|
/>
|
|
92
118
|
</UFormField>
|
|
93
119
|
|
|
@@ -99,6 +125,7 @@ const slotClasses = computed(() => {
|
|
|
99
125
|
required
|
|
100
126
|
:disabled="loading"
|
|
101
127
|
@update:model-value="update('street', $event)"
|
|
128
|
+
class="w-full"
|
|
102
129
|
/>
|
|
103
130
|
</UFormField>
|
|
104
131
|
|
|
@@ -109,18 +136,23 @@ const slotClasses = computed(() => {
|
|
|
109
136
|
placeholder="Apartment, suite, etc. (optional)"
|
|
110
137
|
:disabled="loading"
|
|
111
138
|
@update:model-value="update('street2', $event)"
|
|
139
|
+
class="w-full"
|
|
112
140
|
/>
|
|
113
141
|
</UFormField>
|
|
114
142
|
|
|
115
143
|
<!-- City + State -->
|
|
116
144
|
<div :class="slotClasses.row">
|
|
117
145
|
<UFormField label="City" :class="slotClasses.field">
|
|
118
|
-
<
|
|
146
|
+
<USelectMenu
|
|
119
147
|
:model-value="modelValue.city || ''"
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
148
|
+
:items="cities"
|
|
149
|
+
placeholder="Select city"
|
|
150
|
+
searchable
|
|
151
|
+
:loading="citiesLoading"
|
|
152
|
+
:disabled="loading || !modelValue.country"
|
|
153
|
+
:ui="{ content: 'min-w-[20rem]' }"
|
|
123
154
|
@update:model-value="update('city', $event)"
|
|
155
|
+
class="w-full"
|
|
124
156
|
/>
|
|
125
157
|
</UFormField>
|
|
126
158
|
<UFormField label="State / Province" :class="slotClasses.field">
|
|
@@ -129,6 +161,7 @@ const slotClasses = computed(() => {
|
|
|
129
161
|
placeholder="State"
|
|
130
162
|
:disabled="loading"
|
|
131
163
|
@update:model-value="update('state', $event)"
|
|
164
|
+
class="w-full"
|
|
132
165
|
/>
|
|
133
166
|
</UFormField>
|
|
134
167
|
</div>
|
|
@@ -136,14 +169,46 @@ const slotClasses = computed(() => {
|
|
|
136
169
|
<!-- Country + Postal -->
|
|
137
170
|
<div :class="slotClasses.row">
|
|
138
171
|
<UFormField label="Country" :class="slotClasses.field">
|
|
139
|
-
<
|
|
172
|
+
<USelectMenu
|
|
140
173
|
:model-value="modelValue.country || ''"
|
|
141
174
|
:items="countries"
|
|
175
|
+
value-key="code"
|
|
176
|
+
label-key="name"
|
|
142
177
|
placeholder="Select country"
|
|
178
|
+
searchable
|
|
143
179
|
required
|
|
180
|
+
:loading="countriesLoading"
|
|
144
181
|
:disabled="loading"
|
|
182
|
+
:ui="{ content: 'min-w-[20rem]' }"
|
|
145
183
|
@update:model-value="update('country', $event)"
|
|
146
|
-
|
|
184
|
+
class="w-full"
|
|
185
|
+
>
|
|
186
|
+
<template #leading="{ modelValue: val, ui }">
|
|
187
|
+
<UAvatar
|
|
188
|
+
v-if="val && selectedCountryFlag"
|
|
189
|
+
:src="selectedCountryFlag"
|
|
190
|
+
size="2xs"
|
|
191
|
+
:class="ui.leadingIcon()"
|
|
192
|
+
/>
|
|
193
|
+
<UIcon
|
|
194
|
+
v-else
|
|
195
|
+
name="i-lucide-earth"
|
|
196
|
+
:class="ui.leadingIcon()"
|
|
197
|
+
/>
|
|
198
|
+
</template>
|
|
199
|
+
<template #item-leading="{ item }">
|
|
200
|
+
<UAvatar
|
|
201
|
+
v-if="item.flag"
|
|
202
|
+
:src="item.flag"
|
|
203
|
+
size="2xs"
|
|
204
|
+
/>
|
|
205
|
+
<UIcon
|
|
206
|
+
v-else
|
|
207
|
+
name="i-lucide-earth"
|
|
208
|
+
class="size-4"
|
|
209
|
+
/>
|
|
210
|
+
</template>
|
|
211
|
+
</USelectMenu>
|
|
147
212
|
</UFormField>
|
|
148
213
|
<UFormField label="Postal Code" :class="slotClasses.field">
|
|
149
214
|
<UInput
|
|
@@ -151,6 +216,7 @@ const slotClasses = computed(() => {
|
|
|
151
216
|
placeholder="Postal code"
|
|
152
217
|
:disabled="loading"
|
|
153
218
|
@update:model-value="update('postalCode', $event)"
|
|
219
|
+
class="w-full"
|
|
154
220
|
/>
|
|
155
221
|
</UFormField>
|
|
156
222
|
</div>
|
|
@@ -164,6 +230,7 @@ const slotClasses = computed(() => {
|
|
|
164
230
|
placeholder="District / Neighborhood"
|
|
165
231
|
:disabled="loading"
|
|
166
232
|
@update:model-value="update('district', $event)"
|
|
233
|
+
class="w-full"
|
|
167
234
|
/>
|
|
168
235
|
</UFormField>
|
|
169
236
|
<UFormField label="National Address (العنوان الوطني)">
|
|
@@ -172,6 +239,7 @@ const slotClasses = computed(() => {
|
|
|
172
239
|
placeholder="Saudi National Address"
|
|
173
240
|
:disabled="loading"
|
|
174
241
|
@update:model-value="update('nationalAddress', $event)"
|
|
242
|
+
class="w-full"
|
|
175
243
|
/>
|
|
176
244
|
</UFormField>
|
|
177
245
|
</slot>
|
package/package.json
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercejs/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "CommerceJS ecommerce UI components — built on Nuxt UI",
|
|
5
|
-
"repository": {
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/commerce-js/commerce.js.git",
|
|
8
|
+
"directory": "packages/ui"
|
|
9
|
+
},
|
|
6
10
|
"license": "MIT",
|
|
7
11
|
"type": "module",
|
|
8
12
|
"main": "./dist/module.mjs",
|
|
@@ -17,14 +21,8 @@
|
|
|
17
21
|
"dist",
|
|
18
22
|
"src"
|
|
19
23
|
],
|
|
20
|
-
"scripts": {
|
|
21
|
-
"build": "nuxt-module-build build",
|
|
22
|
-
"dev": "nuxi dev playground",
|
|
23
|
-
"typecheck": "nuxt-module-build build",
|
|
24
|
-
"clean": "rm -rf dist .nuxt"
|
|
25
|
-
},
|
|
26
24
|
"dependencies": {
|
|
27
|
-
"@commercejs/types": "
|
|
25
|
+
"@commercejs/types": "0.2.0"
|
|
28
26
|
},
|
|
29
27
|
"peerDependencies": {
|
|
30
28
|
"@nuxt/ui": ">=4.0.0"
|
|
@@ -37,5 +35,11 @@
|
|
|
37
35
|
"nuxt": "^4.3.1",
|
|
38
36
|
"typescript": "^5.7.0",
|
|
39
37
|
"vue": "^3.5.0"
|
|
38
|
+
},
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "nuxt-module-build build",
|
|
41
|
+
"dev": "nuxi dev playground",
|
|
42
|
+
"typecheck": "nuxt-module-build build",
|
|
43
|
+
"clean": "rm -rf dist .nuxt"
|
|
40
44
|
}
|
|
41
|
-
}
|
|
45
|
+
}
|
|
@@ -1,16 +1,31 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
+
import { computed } from 'vue'
|
|
2
3
|
import type { Address } from '@commercejs/types'
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
* CAddressForm — Shipping/billing address form.
|
|
6
|
-
* Uses Nuxt UI form components
|
|
7
|
+
* Uses Nuxt UI form components with GCC-specific fields.
|
|
8
|
+
* Country dropdown is searchable with flag avatars.
|
|
9
|
+
* City dropdown loads cities based on selected country.
|
|
7
10
|
*/
|
|
8
11
|
|
|
12
|
+
export interface CountryItem {
|
|
13
|
+
name: string
|
|
14
|
+
flag: string | null
|
|
15
|
+
code: string
|
|
16
|
+
}
|
|
17
|
+
|
|
9
18
|
export interface AddressFormProps {
|
|
10
19
|
/** Current address values */
|
|
11
20
|
modelValue: Partial<Address>
|
|
12
21
|
/** Available countries for the dropdown */
|
|
13
|
-
countries?:
|
|
22
|
+
countries?: CountryItem[]
|
|
23
|
+
/** Cities for the selected country */
|
|
24
|
+
cities?: string[]
|
|
25
|
+
/** Whether countries are loading */
|
|
26
|
+
countriesLoading?: boolean
|
|
27
|
+
/** Whether cities are loading */
|
|
28
|
+
citiesLoading?: boolean
|
|
14
29
|
/** Whether to show GCC-specific fields (district, nationalAddress) */
|
|
15
30
|
showGccFields?: boolean
|
|
16
31
|
/** Whether the form is in loading/submitting state */
|
|
@@ -25,6 +40,9 @@ export interface AddressFormProps {
|
|
|
25
40
|
|
|
26
41
|
const props = withDefaults(defineProps<AddressFormProps>(), {
|
|
27
42
|
countries: () => [],
|
|
43
|
+
cities: () => [],
|
|
44
|
+
countriesLoading: false,
|
|
45
|
+
citiesLoading: false,
|
|
28
46
|
showGccFields: true,
|
|
29
47
|
loading: false,
|
|
30
48
|
})
|
|
@@ -42,6 +60,11 @@ function handleSubmit() {
|
|
|
42
60
|
emit('submit', props.modelValue)
|
|
43
61
|
}
|
|
44
62
|
|
|
63
|
+
/** Find the flag URL for the currently selected country */
|
|
64
|
+
const selectedCountryFlag = computed(() =>
|
|
65
|
+
props.countries.find(c => c.code === props.modelValue.country)?.flag || null,
|
|
66
|
+
)
|
|
67
|
+
|
|
45
68
|
// Resolve theme from app.config
|
|
46
69
|
const appConfig = useAppConfig()
|
|
47
70
|
const theme = computed(() => (appConfig.ui as any)?.addressForm ?? {})
|
|
@@ -67,6 +90,7 @@ const slotClasses = computed(() => {
|
|
|
67
90
|
required
|
|
68
91
|
:disabled="loading"
|
|
69
92
|
@update:model-value="update('firstName', $event)"
|
|
93
|
+
class="w-full"
|
|
70
94
|
/>
|
|
71
95
|
</UFormField>
|
|
72
96
|
<UFormField label="Last Name" :class="slotClasses.field">
|
|
@@ -76,6 +100,7 @@ const slotClasses = computed(() => {
|
|
|
76
100
|
required
|
|
77
101
|
:disabled="loading"
|
|
78
102
|
@update:model-value="update('lastName', $event)"
|
|
103
|
+
class="w-full"
|
|
79
104
|
/>
|
|
80
105
|
</UFormField>
|
|
81
106
|
</div>
|
|
@@ -88,6 +113,7 @@ const slotClasses = computed(() => {
|
|
|
88
113
|
type="tel"
|
|
89
114
|
:disabled="loading"
|
|
90
115
|
@update:model-value="update('phone', $event)"
|
|
116
|
+
class="w-full"
|
|
91
117
|
/>
|
|
92
118
|
</UFormField>
|
|
93
119
|
|
|
@@ -99,6 +125,7 @@ const slotClasses = computed(() => {
|
|
|
99
125
|
required
|
|
100
126
|
:disabled="loading"
|
|
101
127
|
@update:model-value="update('street', $event)"
|
|
128
|
+
class="w-full"
|
|
102
129
|
/>
|
|
103
130
|
</UFormField>
|
|
104
131
|
|
|
@@ -109,18 +136,23 @@ const slotClasses = computed(() => {
|
|
|
109
136
|
placeholder="Apartment, suite, etc. (optional)"
|
|
110
137
|
:disabled="loading"
|
|
111
138
|
@update:model-value="update('street2', $event)"
|
|
139
|
+
class="w-full"
|
|
112
140
|
/>
|
|
113
141
|
</UFormField>
|
|
114
142
|
|
|
115
143
|
<!-- City + State -->
|
|
116
144
|
<div :class="slotClasses.row">
|
|
117
145
|
<UFormField label="City" :class="slotClasses.field">
|
|
118
|
-
<
|
|
146
|
+
<USelectMenu
|
|
119
147
|
:model-value="modelValue.city || ''"
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
148
|
+
:items="cities"
|
|
149
|
+
placeholder="Select city"
|
|
150
|
+
searchable
|
|
151
|
+
:loading="citiesLoading"
|
|
152
|
+
:disabled="loading || !modelValue.country"
|
|
153
|
+
:ui="{ content: 'min-w-[20rem]' }"
|
|
123
154
|
@update:model-value="update('city', $event)"
|
|
155
|
+
class="w-full"
|
|
124
156
|
/>
|
|
125
157
|
</UFormField>
|
|
126
158
|
<UFormField label="State / Province" :class="slotClasses.field">
|
|
@@ -129,6 +161,7 @@ const slotClasses = computed(() => {
|
|
|
129
161
|
placeholder="State"
|
|
130
162
|
:disabled="loading"
|
|
131
163
|
@update:model-value="update('state', $event)"
|
|
164
|
+
class="w-full"
|
|
132
165
|
/>
|
|
133
166
|
</UFormField>
|
|
134
167
|
</div>
|
|
@@ -136,14 +169,46 @@ const slotClasses = computed(() => {
|
|
|
136
169
|
<!-- Country + Postal -->
|
|
137
170
|
<div :class="slotClasses.row">
|
|
138
171
|
<UFormField label="Country" :class="slotClasses.field">
|
|
139
|
-
<
|
|
172
|
+
<USelectMenu
|
|
140
173
|
:model-value="modelValue.country || ''"
|
|
141
174
|
:items="countries"
|
|
175
|
+
value-key="code"
|
|
176
|
+
label-key="name"
|
|
142
177
|
placeholder="Select country"
|
|
178
|
+
searchable
|
|
143
179
|
required
|
|
180
|
+
:loading="countriesLoading"
|
|
144
181
|
:disabled="loading"
|
|
182
|
+
:ui="{ content: 'min-w-[20rem]' }"
|
|
145
183
|
@update:model-value="update('country', $event)"
|
|
146
|
-
|
|
184
|
+
class="w-full"
|
|
185
|
+
>
|
|
186
|
+
<template #leading="{ modelValue: val, ui }">
|
|
187
|
+
<UAvatar
|
|
188
|
+
v-if="val && selectedCountryFlag"
|
|
189
|
+
:src="selectedCountryFlag"
|
|
190
|
+
size="2xs"
|
|
191
|
+
:class="ui.leadingIcon()"
|
|
192
|
+
/>
|
|
193
|
+
<UIcon
|
|
194
|
+
v-else
|
|
195
|
+
name="i-lucide-earth"
|
|
196
|
+
:class="ui.leadingIcon()"
|
|
197
|
+
/>
|
|
198
|
+
</template>
|
|
199
|
+
<template #item-leading="{ item }">
|
|
200
|
+
<UAvatar
|
|
201
|
+
v-if="item.flag"
|
|
202
|
+
:src="item.flag"
|
|
203
|
+
size="2xs"
|
|
204
|
+
/>
|
|
205
|
+
<UIcon
|
|
206
|
+
v-else
|
|
207
|
+
name="i-lucide-earth"
|
|
208
|
+
class="size-4"
|
|
209
|
+
/>
|
|
210
|
+
</template>
|
|
211
|
+
</USelectMenu>
|
|
147
212
|
</UFormField>
|
|
148
213
|
<UFormField label="Postal Code" :class="slotClasses.field">
|
|
149
214
|
<UInput
|
|
@@ -151,6 +216,7 @@ const slotClasses = computed(() => {
|
|
|
151
216
|
placeholder="Postal code"
|
|
152
217
|
:disabled="loading"
|
|
153
218
|
@update:model-value="update('postalCode', $event)"
|
|
219
|
+
class="w-full"
|
|
154
220
|
/>
|
|
155
221
|
</UFormField>
|
|
156
222
|
</div>
|
|
@@ -164,6 +230,7 @@ const slotClasses = computed(() => {
|
|
|
164
230
|
placeholder="District / Neighborhood"
|
|
165
231
|
:disabled="loading"
|
|
166
232
|
@update:model-value="update('district', $event)"
|
|
233
|
+
class="w-full"
|
|
167
234
|
/>
|
|
168
235
|
</UFormField>
|
|
169
236
|
<UFormField label="National Address (العنوان الوطني)">
|
|
@@ -172,6 +239,7 @@ const slotClasses = computed(() => {
|
|
|
172
239
|
placeholder="Saudi National Address"
|
|
173
240
|
:disabled="loading"
|
|
174
241
|
@update:model-value="update('nationalAddress', $event)"
|
|
242
|
+
class="w-full"
|
|
175
243
|
/>
|
|
176
244
|
</UFormField>
|
|
177
245
|
</slot>
|