Skip to content

Commit 37f023e

Browse files
PolymetaPolymeta
committed
update and fix lint
1 parent 4418a15 commit 37f023e

7 files changed

Lines changed: 66 additions & 50 deletions

File tree

‎packages/ui/src/components/ForgeCheckbox.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,29 @@
33
<div
44
class="d-flex"
55
data-cy="checkbox-container"
6-
@click="evt => onChange(evt, value)"
76
v-bind="{ ...$attrs }"
7+
@click="evt => onChange(evt, value)"
88
>
99
<Checkbox
1010
v-bind="{ ...props }"
11-
binary
1211
v-model="value"
12+
binary
1313
:input-id="props.name"
1414
:input-class="{ 'is-invalid': hasErrors }"
1515
:class="(props.disabled || props.readonly) ? '' : 'cursor-pointer'"
1616
/>
1717
<label
1818
:for="props.name"
19-
@click="evt => onChange(evt, !value)"
2019
:class="`${(props.disabled || props.readonly) ? 'opacity-50' : 'cursor-pointer'} ${
2120
hasErrors ? 'text-danger-dark' : ''
2221
}`"
2322
class="w-100 my-auto"
23+
@click="evt => onChange(evt, !value)"
2424
>
2525
<slot>{{ props.label }}</slot>
2626
</label>
2727
</div>
28-
<small data-cy="error" class="text-invalid" v-show="hasErrors">{{
28+
<small v-show="hasErrors" data-cy="error" class="text-invalid">{{
2929
errorMessage
3030
}}</small>
3131
</div>

‎packages/ui/src/components/ForgeFormField.vue‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
2-
<forge-checkbox :id="props.name" v-if="props.type === 'checkbox'" :label="props.fieldLabel" v-bind="$attrs"
3-
:name="props.name" v-model="model" />
4-
<div class="d-flex flex-column w-100" v-else>
2+
<forge-checkbox
3+
v-if="props.type === 'checkbox'" :id="props.name" v-bind="$attrs" v-model="model"
4+
:label="props.fieldLabel" :name="props.name" />
5+
<div v-else class="d-flex flex-column w-100">
56
<div data-cy="input-wrapper" class="d-flex" :class="props.fieldLabelPosition === 'top' ? 'flex-column' : 'flex-row'">
67
<label :for="props.name" :class="props.fieldLabelPosition === 'top' ? 'mb-1' : ('me-2 ' + props.labelWidthClass)">
78
{{ props.fieldLabel }} <span v-if="required" class="text-danger fw-600">*</span>
@@ -10,31 +11,39 @@
1011
<!-- Slot for Custom Inputs -->
1112
<slot v-bind="{ modelValue: model, updateModel: handleChange, hasErrors }">
1213
<!-- Default Inputs (if no input is provided) -->
13-
<InputNumber :id="props.name" v-if="props.type === 'number'" v-bind="$attrs"
14-
:placeholder="props.placeholder" :input-class="{'is-invalid': hasErrors }" :class="{'is-invalid': hasErrors }"
15-
@input="change" v-model="model"
14+
<InputNumber
15+
v-if="props.type === 'number'" :id="props.name" v-bind="$attrs"
16+
v-model="model" :placeholder="props.placeholder" :input-class="{'is-invalid': hasErrors }"
17+
:class="{'is-invalid': hasErrors }" @input="change"
1618
/>
17-
<Textarea :id="props.name" v-else-if="props.type === 'textarea'" v-bind="$attrs"
18-
:placeholder="props.placeholder" :class="{'is-invalid': hasErrors }"
19-
v-model="model"
19+
<Textarea
20+
v-else-if="props.type === 'textarea'" :id="props.name" v-bind="$attrs"
21+
v-model="model" :placeholder="props.placeholder"
22+
:class="{'is-invalid': hasErrors }"
2023
@input="change" @blur="handleBlur"
2124
/>
22-
<InputMask :id="props.name" v-else-if="props.type === 'mask'" v-bind="$attrs"
23-
:placeholder="props.placeholder" :mask="props.mask" :class="{'is-invalid': hasErrors }"
24-
v-model="model" @complete="change" @blur="handleBlur"
25+
<InputMask
26+
v-else-if="props.type === 'mask'" :id="props.name" v-bind="$attrs"
27+
v-model="model" :placeholder="props.placeholder" :mask="props.mask"
28+
:class="{'is-invalid': hasErrors }" @complete="change" @blur="handleBlur"
2529
/>
26-
<InputText :id="props.name" v-else-if="props.type === 'text'" v-bind="$attrs"
27-
:placeholder="props.placeholder" :class="{'is-invalid': hasErrors }"
28-
v-model="model"
30+
<InputText
31+
v-else-if="props.type === 'text'" :id="props.name" v-bind="$attrs"
32+
v-model="model" :placeholder="props.placeholder"
33+
:class="{'is-invalid': hasErrors }"
2934
@input="change" @blur="handleBlur"
3035
/>
31-
<Select v-else-if="props.type === 'select'" v-bind="{...props,...$attrs}" v-model="model"
36+
<Select
37+
v-else-if="props.type === 'select'" v-bind="{...props,...$attrs}" v-model="model"
3238
:class="{'is-invalid': hasErrors }" />
33-
<MultiSelect v-else-if="props.type === 'multiselect'" v-bind="{...props,...$attrs}" v-model="model"
39+
<MultiSelect
40+
v-else-if="props.type === 'multiselect'" v-bind="{...props,...$attrs}" v-model="model"
3441
:class="{'is-invalid': hasErrors }" />
35-
<ForgeMultiSelectPreview v-else-if="props.type === 'multiselect-preview'" v-bind="{...props,...$attrs}" v-model="model"
42+
<ForgeMultiSelectPreview
43+
v-else-if="props.type === 'multiselect-preview'" v-bind="{...props,...$attrs}" v-model="model"
3644
:class="{'is-invalid': hasErrors }" />
37-
<ForgeDatepicker v-else-if="props.type === 'datepicker'" v-bind="{...props,...$attrs}" v-model="model"
45+
<ForgeDatepicker
46+
v-else-if="props.type === 'datepicker'" v-bind="{...props,...$attrs}" v-model="model"
3847
:class="{'is-invalid': hasErrors }" />
3948
</slot>
4049

‎packages/ui/src/components/ForgeModal.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<Dialog v-bind="props" @maximize="maximise" @unmaximize="minimise" :pt="pt">
2+
<Dialog v-bind="props" :pt="pt" @maximize="maximise" @unmaximize="minimise">
33
<template #closeicon>
44
<Icon data-cy="close-icon" icon="bi:x-lg" width="18" height="18" @click="closeModal" />
55
</template>
@@ -22,11 +22,12 @@
2222
<forge-loader data-cy="loader" />
2323
</slot>
2424
</template>
25-
<template #footer v-if="showFooter">
25+
<template v-if="showFooter" #footer>
2626
<div class="d-flex w-100" data-cy="footer">
27-
<Button :label="cancelText" :class="props.cancelClass" outlined @click="closeModal" id="cancel-button" :type="props.cancelButtonType" />
28-
<Button :label="submitText" :class="props.submitClass" class="ms-auto" @click="success" id="submit-button"
29-
:type="props.submitButtonType" />
27+
<Button id="cancel-button" :label="cancelText" :class="props.cancelClass" outlined :type="props.cancelButtonType" @click="closeModal" />
28+
<Button
29+
id="submit-button" :label="submitText" :class="props.submitClass" class="ms-auto" :type="props.submitButtonType"
30+
@click="success" />
3031
</div>
3132
</template>
3233

@@ -52,7 +53,7 @@ export interface ForgeModalProps extends DialogProps {
5253
cancelText?: string,
5354
submitText?: string,
5455
showFooter?: boolean,
55-
onConfirm?: Function | null,
56+
onConfirm?: () => Promise<void> | null,
5657
submitButtonType?: 'button' | 'reset' | 'submit',
5758
cancelButtonType?: 'button' | 'reset' | 'submit',
5859
size?: Size | 'xl'

‎packages/ui/src/components/ForgeSelectButton.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<template>
22
<div class="btn-group" data-cy="forge-select-button">
3-
<ForgeToggleButton v-for="(option, index) in options" :key="index"
4-
:onLabel="option.label" :offLabel="option.label"
3+
<ForgeToggleButton
4+
v-for="(option, index) in options" :key="index"
5+
:on-label="option.label" :off-label="option.label"
56
:severity="option.severity"
6-
@change="onOptionSelected(option)" :defaultValue="isSelected(option)" :disabled="option.disabled" :data-cy="`toggle-button-${option.value}`"
7-
:invalid="invalid"
7+
:default-value="isSelected(option)" :disabled="option.disabled" :data-cy="`toggle-button-${option.value}`" :invalid="invalid"
8+
@change="onOptionSelected(option)"
89
/>
910
</div>
1011
</template>

‎packages/ui/src/components/file-uploader/components/FileInfo.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<div class="py-4 px-3 d-flex" :data-cy="`file-info-${file.name}`">
33
<div>
44
<Image
5-
v-if="isImage(file.type)" id="thumbnail-image" image-class="image-file-thumbnail border"
5+
v-if="isImage(file.type)" id="thumbnail-image" image-class="image-file-thumbnail border"
66
:src="getThumbnailUrl(file)" :alt="file.name" width="75px" preview />
77
<Icon v-else id="file-earmark" icon="bi:file-earmark" color="black" width="75px" />
88
</div>
99
<div class="ms-3 d-flex flex-column">
1010
<div>
1111
<ForgeInlineEditor
12-
v-if="editableFileName" id="edit-file-name" v-model="fileName" :rules="customFileNameRules"
12+
v-if="editableFileName" id="edit-file-name" v-model="fileName" :rules="customFileNameRules"
1313
:name="file.name" :complete-action="updateFileName" />
1414
<span v-else id="file-name">{{ fileName }}</span>
1515
</div>
@@ -19,10 +19,10 @@ v-if="editableFileName" id="edit-file-name" v-model="fileName" :rules="customFil
1919

2020
<div class="ms-auto my-auto d-flex">
2121
<UploadStatus
22-
:key="uploadStatus" :file-size="file.size" :upload-status="uploadStatus"
22+
:key="uploadStatus" :file-size="file.size" :upload-status="uploadStatus"
2323
:bytes-uploaded="bytesUploaded" :max-file-size="maxFileSize" />
2424
<Button
25-
v-if="uploadStatus === 'Not Uploaded' || uploadStatus === 'Failed' || uploadStatus === 'Duplicate' || uploadStatus === 'Aborted'" link
25+
v-if="uploadStatus === 'Not Uploaded' || uploadStatus === 'Failed' || uploadStatus === 'Duplicate' || uploadStatus === 'Aborted'" link
2626
@click="uploadBlob">
2727
<Icon
2828
:icon="uploadStatus === 'Not Uploaded' || uploadStatus === 'Duplicate' ? 'bi:upload' : 'bi:arrow-clockwise'" />

‎packages/ui/src/components/table/ForgeFilterHeader.vue‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,34 @@
11
<template>
22
<div class="d-flex position-relative">
33
<InputNumber v-if="dataType === 'numeric'" v-model.trim="modelValue" v-bind="$attrs" />
4-
<ForgeDatepicker v-else-if="dataType === 'date'" v-model="modelValue" v-bind="$attrs" :show-icon="false"
4+
<ForgeDatepicker
5+
v-else-if="dataType === 'date'" v-model="modelValue" v-bind="$attrs" :show-icon="false"
56
:show-on-focus="true" />
6-
<Select v-else-if="dataType === 'select'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
7+
<Select
8+
v-else-if="dataType === 'select'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
79
:option-value="optionValue" :option-label="optionLabel"
810
>
911
<template #value="{ value, placeholder }">
1012
<div class="d-flex w-100">
1113
<span :class="{ 'filter-placeholder': value === null }">{{ label(value, placeholder) }}</span>
12-
<Button v-if="showClearButton && modelValue !== null"
13-
@click.prevent="clear" size="small"
14-
class="bg-transparent border-0 ms-auto p-0 pe-1">
14+
<Button
15+
v-if="showClearButton && modelValue !== null"
16+
size="small" class="bg-transparent border-0 ms-auto p-0 pe-1"
17+
@click.prevent="clear">
1518
<Icon icon="bi:x" width="1rem" height="1rem" class="text-black" />
1619
</Button>
1720
</div>
1821
</template>
1922
</Select>
20-
<MultiSelect v-else-if="dataType === 'multiselect'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
21-
:showToggleAll="false" :option-label="optionLabel" :option-value="optionValue" filter >
23+
<MultiSelect
24+
v-else-if="dataType === 'multiselect'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
25+
:show-toggle-all="false" :option-label="optionLabel" :option-value="optionValue" filter >
2226
</MultiSelect>
2327
<InputText v-else v-model.trim="modelValue" v-bind="$attrs" />
24-
<Button v-if="showClearButton && modelValue !== null && dataType !== 'select' && dataType !== 'multiselect' && dataType !== 'date'"
25-
@click.prevent="clear" size="small"
26-
class="bg-transparent border-0 ms-auto p-0 pe-1 position-absolute end-0 top-0 bottom-0">
28+
<Button
29+
v-if="showClearButton && modelValue !== null && dataType !== 'select' && dataType !== 'multiselect' && dataType !== 'date'"
30+
size="small" class="bg-transparent border-0 ms-auto p-0 pe-1 position-absolute end-0 top-0 bottom-0"
31+
@click.prevent="clear">
2732
<Icon icon="bi:x" width="1rem" height="1rem" class="text-black bg-white" />
2833
</Button>
2934
</div>
@@ -42,7 +47,7 @@ export interface ForgeFilterHeaderProps {
4247
dataType: ForgeColumnDataType,
4348
dropdownOptions?: any[],
4449
showClearButton?: boolean
45-
clearFilter?: Function,
50+
clearFilter?: () => void,
4651
optionLabel?: string,
4752
optionValue?: string
4853
}
@@ -65,7 +70,7 @@ const label = (values: string[] | string | object, placeholder: string): string
6570
6671
const getLabel = (value: any): string => {
6772
const option = dropdownOptions?.find(opt =>
68-
optionValue ? opt[optionValue as string] === value : Object.keys(opt).every(key => value.hasOwnProperty(key) && opt[key] === value[key])
73+
optionValue ? opt[optionValue as string] === value : Object.keys(opt).every(key => Object.prototype.hasOwnProperty.call(value, key) && opt[key] === value[key])
6974
);
7075
7176
return optionLabel ? option[optionLabel] : option;

‎packages/ui/src/components/table/ForgeTable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="position-relative">
33
<span data-cy="above-table-slot" ><slot name="above-table" /></span>
44
<DataTable
5-
v-bind="{...props, ...$attrs }" ref="forgeTable"
5+
v-bind="{...props, ...$attrs }" ref="forgeTable"
66
class="w-100" :class="`${props.severity ? `forge-table-${props.severity}` : ''}`" :pt="pt" :rows="perPage" :total-records="total" :filter-display="props.filters ? 'row' : undefined" data-cy="table"
77
show-headers @update:filters="emitUpdateFilter" @sort="emitSort" @page="emitPage">
88
<template v-for="(_, name) in $slots as unknown as DataTableSlots" #[name]="slotProps">

0 commit comments

Comments
 (0)