is a light-weight, web based API development suite.
| BodyParameters.vue (hoppscotch-2.0.0) | : | BodyParameters.vue (hoppscotch-2.1.0) |
|---|
| | |
| skipping to change at line 25 | | skipping to change at line 25 |
|---|
| > | | > |
| <label class="font-semibold text-secondaryLight"> | | <label class="font-semibold text-secondaryLight"> |
| {{ $t("request.body") }} | | {{ $t("request.body") }} |
| </label> | | </label> |
| <div class="flex"> | | <div class="flex"> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| to="https://docs.hoppscotch.io/features/body" | | to="https://docs.hoppscotch.io/features/body" |
| blank | | blank |
| :title="$t('app.wiki')" | | :title="$t('app.wiki')" |
|
| icon="help_outline" | | svg="help-circle" |
| /> | | /> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title="$t('action.clear_all')" | | :title="$t('action.clear_all')" |
|
| icon="clear_all" | | svg="trash-2" |
| @click.native="clearContent" | | @click.native="clearContent" |
| /> | | /> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title="$t('add.new')" | | :title="$t('add.new')" |
|
| icon="add" | | svg="plus" |
| @click.native="addBodyParam" | | @click.native="addBodyParam" |
| /> | | /> |
| </div> | | </div> |
| </div> | | </div> |
| <div | | <div |
| v-for="(param, index) in bodyParams" | | v-for="(param, index) in bodyParams" |
| :key="`param-${index}`" | | :key="`param-${index}`" |
| class="divide-x divide-dividerLight border-b border-dividerLight flex" | | class="divide-x divide-dividerLight border-b border-dividerLight flex" |
| > | | > |
| <SmartEnvInput | | <SmartEnvInput |
|
| v-if="EXPERIMENTAL_URL_BAR_ENABLED" | | |
| v-model="param.key" | | v-model="param.key" |
|
| :placeholder="$t('count.parameter', { count: index + 1 })" | | :placeholder="`${$t('count.parameter', { count: index + 1 })}`" |
| styles=" | | styles=" |
| bg-transparent | | bg-transparent |
| flex | | flex |
| flex-1 | | flex-1 |
| py-1 | | py-1 |
| px-4 | | px-4 |
| " | | " |
| @change=" | | @change=" |
| updateBodyParam(index, { | | updateBodyParam(index, { |
| key: $event, | | key: $event, |
| value: param.value, | | value: param.value, |
| active: param.active, | | active: param.active, |
| isFile: param.isFile, | | isFile: param.isFile, |
| }) | | }) |
| " | | " |
| /> | | /> |
|
| <input | | |
| v-else | | |
| class="bg-transparent flex flex-1 py-2 px-4" | | |
| :placeholder="$t('count.parameter', { count: index + 1 })" | | |
| :name="'param' + index" | | |
| :value="param.key" | | |
| autofocus | | |
| @change=" | | |
| updateBodyParam(index, { | | |
| key: $event.target.value, | | |
| value: param.value, | | |
| active: param.active, | | |
| isFile: param.isFile, | | |
| }) | | |
| " | | |
| /> | | |
| <div v-if="param.isFile" class="file-chips-container hide-scrollbar"> | | <div v-if="param.isFile" class="file-chips-container hide-scrollbar"> |
| <div class="space-x-2 file-chips-wrapper"> | | <div class="space-x-2 file-chips-wrapper"> |
| <SmartDeletableChip | | <SmartDeletableChip |
| v-for="(file, fileIndex) in param.value" | | v-for="(file, fileIndex) in param.value" |
| :key="`param-${index}-file-${fileIndex}`" | | :key="`param-${index}-file-${fileIndex}`" |
| @chip-delete="chipDelete(index, fileIndex)" | | @chip-delete="chipDelete(index, fileIndex)" |
| > | | > |
| {{ file.name }} | | {{ file.name }} |
| </SmartDeletableChip> | | </SmartDeletableChip> |
| </div> | | </div> |
| </div> | | </div> |
| <span v-else class="flex flex-1"> | | <span v-else class="flex flex-1"> |
| <SmartEnvInput | | <SmartEnvInput |
|
| v-if="EXPERIMENTAL_URL_BAR_ENABLED" | | |
| v-model="param.value" | | v-model="param.value" |
|
| :placeholder="$t('count.value', { count: index + 1 })" | | :placeholder="`${$t('count.value', { count: index + 1 })}`" |
| styles=" | | styles=" |
| bg-transparent | | bg-transparent |
| flex | | flex |
| flex-1 | | flex-1 |
| py-1 | | py-1 |
| px-4 | | px-4 |
| " | | " |
| @change=" | | @change=" |
| updateBodyParam(index, { | | updateBodyParam(index, { |
| key: param.key, | | key: param.key, |
| value: $event, | | value: $event, |
| active: param.active, | | active: param.active, |
| isFile: param.isFile, | | isFile: param.isFile, |
| }) | | }) |
| " | | " |
| /> | | /> |
|
| <input | | |
| v-else | | |
| class="bg-transparent flex flex-1 py-2 px-4" | | |
| :placeholder="$t('count.value', { count: index + 1 })" | | |
| :name="'value' + index" | | |
| :value="param.value" | | |
| @change=" | | |
| updateBodyParam(index, { | | |
| key: param.key, | | |
| value: $event.target.value, | | |
| active: param.active, | | |
| isFile: param.isFile, | | |
| }) | | |
| " | | |
| /> | | |
| </span> | | </span> |
| <span> | | <span> |
| <label for="attachment" class="p-0"> | | <label for="attachment" class="p-0"> |
| <ButtonSecondary | | <ButtonSecondary |
| class="w-full" | | class="w-full" |
|
| icon="attach_file" | | svg="paperclip" |
| @click.native="$refs.attachment[index].click()" | | @click.native="$refs.attachment[index].click()" |
| /> | | /> |
| </label> | | </label> |
| <input | | <input |
| ref="attachment" | | ref="attachment" |
| class="input" | | class="input" |
| name="attachment" | | name="attachment" |
| type="file" | | type="file" |
| multiple | | multiple |
| @change="setRequestAttachment(index, param, $event)" | | @change="setRequestAttachment(index, param, $event)" |
| | |
| skipping to change at line 157 | | skipping to change at line 124 |
|---|
| <span> | | <span> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title=" | | :title=" |
| param.hasOwnProperty('active') | | param.hasOwnProperty('active') |
| ? param.active | | ? param.active |
| ? $t('action.turn_off') | | ? $t('action.turn_off') |
| : $t('action.turn_on') | | : $t('action.turn_on') |
| : $t('action.turn_off') | | : $t('action.turn_off') |
| " | | " |
|
| :icon=" | | :svg=" |
| param.hasOwnProperty('active') | | param.hasOwnProperty('active') |
| ? param.active | | ? param.active |
|
| ? 'check_circle_outline' | | ? 'check-circle' |
| : 'radio_button_unchecked' | | : 'circle' |
| : 'check_circle_outline' | | : 'check-circle' |
| " | | " |
| color="green" | | color="green" |
| @click.native=" | | @click.native=" |
| updateBodyParam(index, { | | updateBodyParam(index, { |
| key: param.key, | | key: param.key, |
| value: param.value, | | value: param.value, |
| active: param.hasOwnProperty('active') ? !param.active : false, | | active: param.hasOwnProperty('active') ? !param.active : false, |
| isFile: param.isFile, | | isFile: param.isFile, |
| }) | | }) |
| " | | " |
| /> | | /> |
| </span> | | </span> |
| <span> | | <span> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title="$t('action.remove')" | | :title="$t('action.remove')" |
|
| icon="remove_circle_outline" | | svg="trash" |
| color="red" | | color="red" |
| @click.native="deleteBodyParam(index)" | | @click.native="deleteBodyParam(index)" |
| /> | | /> |
| </span> | | </span> |
| </div> | | </div> |
| <div | | <div |
| v-if="bodyParams.length === 0" | | v-if="bodyParams.length === 0" |
| class="flex flex-col text-secondaryLight p-4 items-center justify-center" | | class="flex flex-col text-secondaryLight p-4 items-center justify-center" |
| > | | > |
|
| | <img |
| | :src="`/images/states/${$colorMode.value}/upload_single_file.svg`" |
| | loading="lazy" |
| | class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex" |
| | /> |
| <span class="text-center pb-4"> | | <span class="text-center pb-4"> |
| {{ $t("empty.body") }} | | {{ $t("empty.body") }} |
| </span> | | </span> |
| <ButtonSecondary | | <ButtonSecondary |
|
| :label="$t('add.new')" | | :label="`${$t('add.new')}`" |
| filled | | filled |
|
| icon="add" | | svg="plus" |
| @click.native="addBodyParam" | | @click.native="addBodyParam" |
| /> | | /> |
| </div> | | </div> |
| </AppSection> | | </AppSection> |
| </template> | | </template> |
| | |
| <script lang="ts"> | | <script lang="ts"> |
| import { defineComponent, onMounted, Ref, watch } from "@nuxtjs/composition-api" | | import { defineComponent, onMounted, Ref, watch } from "@nuxtjs/composition-api" |
| import { FormDataKeyValue } from "~/helpers/types/HoppRESTRequest" | | import { FormDataKeyValue } from "~/helpers/types/HoppRESTRequest" |
| import { pluckRef } from "~/helpers/utils/composables" | | import { pluckRef } from "~/helpers/utils/composables" |
| import { | | import { |
| addFormDataEntry, | | addFormDataEntry, |
| deleteAllFormDataEntries, | | deleteAllFormDataEntries, |
| deleteFormDataEntry, | | deleteFormDataEntry, |
| updateFormDataEntry, | | updateFormDataEntry, |
| useRESTRequestBody, | | useRESTRequestBody, |
| } from "~/newstore/RESTSession" | | } from "~/newstore/RESTSession" |
|
| import { useSetting } from "~/newstore/settings" | | |
| | |
| export default defineComponent({ | | export default defineComponent({ |
| setup() { | | setup() { |
| const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref< | | const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref< |
| FormDataKeyValue[] | | FormDataKeyValue[] |
| > | | > |
| | |
| const addBodyParam = () => { | | const addBodyParam = () => { |
| addFormDataEntry({ key: "", value: "", active: true, isFile: false }) | | addFormDataEntry({ key: "", value: "", active: true, isFile: false }) |
| } | | } |
| | |
| skipping to change at line 294 | | skipping to change at line 265 |
|---|
| }) | | }) |
| | |
| return { | | return { |
| bodyParams, | | bodyParams, |
| addBodyParam, | | addBodyParam, |
| updateBodyParam, | | updateBodyParam, |
| deleteBodyParam, | | deleteBodyParam, |
| clearContent, | | clearContent, |
| setRequestAttachment, | | setRequestAttachment, |
| chipDelete, | | chipDelete, |
|
| EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"), | | |
| } | | } |
| }, | | }, |
| }) | | }) |
| </script> | | </script> |
| | |
| <style scoped lang="scss"> | | <style scoped lang="scss"> |
| .file-chips-container { | | .file-chips-container { |
| @apply flex flex-1; | | @apply flex flex-1; |
| @apply whitespace-nowrap; | | @apply whitespace-nowrap; |
| @apply overflow-auto; | | @apply overflow-auto; |
| | | |
| End of changes. 18 change blocks. |
|---|
| 48 lines changed or deleted | | 18 lines changed or added |
|---|
"Fossies" - the Fresh Open Source Software Archive 