@nextcloud/vue
Version: 
Nextcloud vue components
1 lines • 5.72 kB
Source Map (JSON)
{"version":3,"file":"NcSettingsInputText-DWihH7ke.cjs","sources":["../../src/components/NcSettingsInputText/NcSettingsInputText.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n⚠️ This component is deprecated and might be removed in a future version ⚠️\n\n```vue\n<template>\n\t<div>\n\t\t<NcSettingsInputText v-model=\"value\" label=\"Label\" hint=\"Hint\" />\n\t\t<NcSettingsInputText label=\"Label\" model-value=\"Value\" hint=\"Hint\" disabled />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: ''\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<form\n\t\tref=\"form\"\n\t\t:disabled=\"disabled\"\n\t\t@submit.prevent.stop=\"onSubmit\">\n\t\t<div class=\"input-wrapper\">\n\t\t\t<label :for=\"id\" class=\"action-input__label\">{{ label }}</label>\n\t\t\t<input\n\t\t\t\t:id=\"id\"\n\t\t\t\ttype=\"text\"\n\t\t\t\t:value=\"model\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@input=\"onInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<input\n\t\t\t\t:id=\"idSubmit\"\n\t\t\t\t:value=\"submitTranslated\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tclass=\"action-input__submit\">\n\t\t\t<p v-if=\"hint\" class=\"hint\">\n\t\t\t\t{{ hint }}\n\t\t\t</p>\n\t\t</div>\n\t</form>\n</template>\n\n<script>\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\n/**\n * @deprecated - This component is nolonger used and might be removed in a future version\n */\nexport default {\n\tname: 'NcSettingsInputText',\n\n\tmodel: {\n\t\tprop: 'value',\n\t\tevent: 'update:value',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * label of the select group element\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * hint of the select group input\n\t\t */\n\t\thint: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * value of the select group input\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the settings select group input\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the select group element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'settings-input-text-' + GenRandomId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t/**\n\t\t * Emitted when the inputs value changes\n\t\t *\n\t\t * @type {string}\n\t\t */\n\t\t'update:modelValue',\n\t\t/* Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t\t'input',\n\t\t'submit',\n\t\t'change',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsubmitTranslated: t('Submit'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * @return {string}\n\t\t */\n\t\tidSubmit() {\n\t\t\treturn this.id + '-submit'\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\tthis.$emit('input', event)\n\t\t\tthis.model = event.target.value\n\t\t},\n\n\t\tonSubmit(event) {\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t}\n\t\t},\n\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted on change of the input field\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n\t.input-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\twidth: 100%;\n\t\tmax-width: 400px;\n\n\t\t& .action-input__label {\n\t\t\tmargin-right: 12px;\n\t\t}\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t.hint {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin-left: 8px;\n\t\t}\n\t}\n\n</style>\n"],"names":["GenRandomId","useModelMigration","t"],"mappings":";;;;;;AAgEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,yBAAAA,wBAAA;AAAA,MACA,WAAA,CAAA,OAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,QAAAC,oCAAA,SAAA,cAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAAC,MAAAA,EAAA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,KAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA,OAAA;AACA,WAAA,MAAA,SAAA,KAAA;AACA,WAAA,QAAA,MAAA,OAAA;AAAA,IACA;AAAA,IAEA,SAAA,OAAA;AACA,UAAA,CAAA,KAAA,UAAA;AAMA,aAAA,MAAA,UAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,SAAA,OAAA;AAMA,WAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}