"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "components/http/BodyParameters.vue" between
hoppscotch-2.0.0.tar.gz and hoppscotch-2.1.0.tar.gz

About: Hoppscotch 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

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)