{"version":3,"sources":["webpack:///./src/interfaces/checkboxes/input.vue?d98f","webpack:///src/interfaces/checkboxes/input.vue","webpack:///./src/interfaces/checkboxes/input.vue?9cec","webpack:///./src/interfaces/checkboxes/input.vue","webpack:///./src/interfaces/checkboxes/input.vue?d2b0","webpack:///./node_modules/@directus/extension-toolkit/mixins/interface.js"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","subgrid","options","single","attrs","readonly","model","value","callback","$$v","choices","expression","_l","choice","index","key","id","_e","on","$event","checked","directives","name","rawName","$t","domProps","target","composing","$set","addCustom","_v","_s","staticRenderFns","component","module","exports","props","type","String","required","default","length","Number","Boolean","collection","primaryKey","Object","newItem","relation","fields","values","width","val","includes"],"mappings":"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","file":"js/chunk-2d50aa6f.3d3e5073.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('draggable',{staticClass:\"interface-checkboxes\",class:{ subgrid: !_vm.options.single },attrs:{\"element\":\"div\",\"disabled\":_vm.readonly},model:{value:(_vm.choices),callback:function ($$v) {_vm.choices=$$v},expression:\"choices\"}},[_vm._l((_vm.choices),function(choice,index){return _c('div',{key:choice.id,staticClass:\"choice\"},[(_vm.options.draggable)?_c('v-icon',{staticClass:\"drag-handle\",attrs:{\"name\":\"drag_indicator\"}}):_vm._e(),(choice.custom)?[_c('button',{on:{\"click\":function($event){_vm.choices[index].checked = !_vm.choices[index].checked}}},[_c('v-icon',{attrs:{\"color\":\"--blue-grey-800\",\"name\":choice.checked ? 'check_box' : 'check_box_outline_blank'}})],1),_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.choices[index].key),expression:\"choices[index].key\"}],attrs:{\"placeholder\":_vm.$t('other') + '...'},domProps:{\"value\":(_vm.choices[index].key)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.$set(_vm.choices[index], \"key\", $event.target.value)}}})]:_c('v-checkbox',{directives:[{name:\"tooltip\",rawName:\"v-tooltip\",value:(choice.value),expression:\"choice.value\"}],attrs:{\"id\":choice.id,\"name\":\"list-sorting\",\"value\":choice.key,\"disabled\":_vm.readonly,\"label\":choice.value,\"inputValue\":choice.checked},on:{\"change\":function($event){_vm.choices[index].checked = !_vm.choices[index].checked}}})],2)}),(_vm.options.allow_other)?_c('button',{on:{\"click\":_vm.addCustom}},[_vm._v(_vm._s(_vm.$t('add_new'))+\"...\")]):_vm._e()],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<draggable\n\t\tv-model=\"choices\"\n\t\telement=\"div\"\n\t\tclass=\"interface-checkboxes\"\n\t\t:class=\"{ subgrid: !options.single }\"\n\t\t:disabled=\"readonly\"\n\t>\n\t\t<div v-for=\"(choice, index) in choices\" :key=\"choice.id\" class=\"choice\">\n\t\t\t<v-icon v-if=\"options.draggable\" class=\"drag-handle\" name=\"drag_indicator\" />\n\n\t\t\t<template v-if=\"choice.custom\">\n\t\t\t\t<button @click=\"choices[index].checked = !choices[index].checked\">\n\t\t\t\t\t<v-icon\n\t\t\t\t\t\tcolor=\"--blue-grey-800\"\n\t\t\t\t\t\t:name=\"choice.checked ? 'check_box' : 'check_box_outline_blank'\"\n\t\t\t\t\t/>\n\t\t\t\t</button>\n\t\t\t\t<input v-model=\"choices[index].key\" :placeholder=\"$t('other') + '...'\" />\n\t\t\t</template>\n\n\t\t\t<v-checkbox\n\t\t\t\tv-else\n\t\t\t\t:id=\"choice.id\"\n\t\t\t\tv-tooltip=\"choice.value\"\n\t\t\t\tname=\"list-sorting\"\n\t\t\t\t:value=\"choice.key\"\n\t\t\t\t:disabled=\"readonly\"\n\t\t\t\t:label=\"choice.value\"\n\t\t\t\t:inputValue=\"choice.checked\"\n\t\t\t\t@change=\"choices[index].checked = !choices[index].checked\"\n\t\t\t/>\n\t\t</div>\n\t\t<button v-if=\"options.allow_other\" @click=\"addCustom\">{{ $t('add_new') }}...</button>\n\t</draggable>\n</template>\n\n<script>\nimport mixin from '@directus/extension-toolkit/mixins/interface';\nimport shortid from 'shortid';\nimport { isEqual, clone } from 'lodash';\n\nexport default {\n\tname: 'InterfaceCheckboxes',\n\tmixins: [mixin],\n\tdata() {\n\t\treturn {\n\t\t\tchoices: []\n\t\t};\n\t},\n\twatch: {\n\t\tchoices: {\n\t\t\tdeep: true,\n\t\t\thandler(val) {\n\t\t\t\tif (this.initialized !== true) return;\n\t\t\t\tlet newValue = val.filter(choice => choice.checked).map(choice => choice.key);\n\n\t\t\t\tif (isEqual(this.value, newValue)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif (this.options.wrap) {\n\t\t\t\t\tnewValue = ['', ...newValue, ''];\n\t\t\t\t}\n\n\t\t\t\tthis.$emit('input', newValue);\n\t\t\t}\n\t\t}\n\t},\n\tcreated() {\n\t\tthis.initChoices();\n\t},\n\tmethods: {\n\t\tinitChoices() {\n\t\t\tconst optionChoices = clone(this.options.choices || []);\n\t\t\tconst initialValues = this.value ? this.value : [];\n\t\t\tlet choices = initialValues\n\t\t\t\t.filter(key => key) // filter out empty strings\n\t\t\t\t.map(key => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: shortid.generate(),\n\t\t\t\t\t\tkey: key,\n\t\t\t\t\t\tvalue: optionChoices[key],\n\t\t\t\t\t\tcustom: optionChoices.hasOwnProperty(key) === false,\n\t\t\t\t\t\tchecked: true\n\t\t\t\t\t};\n\t\t\t\t});\n\n\t\t\t// Remove custom values if \"allow_other\" is not enabled\n\t\t\tif (!this.options.allow_other) {\n\t\t\t\tchoices = choices.filter(function(obj) {\n\t\t\t\t\treturn obj.custom !== true;\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tconst nonChecked = Object.keys(optionChoices)\n\t\t\t\t.filter(key => {\n\t\t\t\t\treturn initialValues.includes(key) === false;\n\t\t\t\t})\n\t\t\t\t.map(key => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: shortid.generate(),\n\t\t\t\t\t\tkey: key,\n\t\t\t\t\t\tvalue: optionChoices[key],\n\t\t\t\t\t\tcustom: false,\n\t\t\t\t\t\tchecked: false\n\t\t\t\t\t};\n\t\t\t\t});\n\n\t\t\tchoices = [...choices, ...nonChecked];\n\n\t\t\tthis.choices = choices;\n\t\t\tthis.initialized = true;\n\t\t},\n\t\taddCustom() {\n\t\t\tthis.choices = [\n\t\t\t\t...this.choices,\n\t\t\t\t{\n\t\t\t\t\tid: shortid.generate(),\n\t\t\t\t\tkey: '',\n\t\t\t\t\tcustom: true,\n\t\t\t\t\tchecked: true\n\t\t\t\t}\n\t\t\t];\n\t\t}\n\t}\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.interface-checkboxes {\n\tpadding-top: calc(\n\t\t(var(--input-height) - 24px) / 2\n\t); // [input height] - 24px (icon height) / 2 (top padding)\n}\n\n.drag-handle {\n\tcolor: var(--input-border-color);\n\tcursor: grab;\n}\n\n.choice {\n\tdisplay: flex;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tfont-size: var(--input-font-size);\n\n\t.form-checkbox {\n\t\twidth: 100%;\n\t}\n\n\tinput {\n\t\tborder: 0;\n\t\tborder-bottom: 1px solid var(--blue-grey-400);\n\t\twidth: 100%;\n\t\tmargin-left: 4px;\n\t\twidth: 100%;\n\t\tmax-width: max-content;\n\t}\n\n\tinput:hover {\n\t\tborder-color: var(--blue-grey-800);\n\t}\n\n\tinput:focus {\n\t\tborder-color: var(--blue-grey-900);\n\t}\n\n\tinput::placeholder {\n\t\tcolor: var(--blue-grey-300);\n\t}\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./input.vue?vue&type=template&id=0a923946&scoped=true&\"\nimport script from \"./input.vue?vue&type=script&lang=js&\"\nexport * from \"./input.vue?vue&type=script&lang=js&\"\nimport style0 from \"./input.vue?vue&type=style&index=0&id=0a923946&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"0a923946\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=style&index=0&id=0a923946&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=style&index=0&id=0a923946&lang=scss&scoped=true&\"","module.exports = {\n  props: {\n    // Unique id for this interface. Should be added to the lower level \n    // HTML input element if applicable. This ID will be used in the label's\n    // `for` attribute\n    id: {\n      type: String,\n      required: true\n    },\n    // Name of the field\n    name: {\n      type: String,\n      required: true\n    },\n    // The current value. This can either be the default value, the saved database\n    // value or the current state after the user made an edit\n    value: {\n      type: null,\n      default: null\n    },\n    // Type of the field, eg `string`, `hash`, or `array`\n    type: {\n      type: String,\n      required: true\n    },\n    // Max length\n    length: {\n      type: [String, Number],\n      default: null\n    },\n    // If the field is readonly or not\n    readonly: {\n      type: Boolean,\n      default: false\n    },\n    // Name of the collection\n    collection: {\n      type: String,\n      default: null\n    },\n    // Primary key of the item you're editing in this context\n    primaryKey: {\n      type: [Number, String],\n      default: null\n    },\n    // If the field is required or not\n    required: {\n      type: Boolean,\n      default: false\n    },\n    // Field options. A json object based on the interface's meta.json file\n    options: {\n      type: Object,\n      default: () => ({})\n    },\n    // If the item that's currently being edited is new\n    newItem: {\n      type: Boolean,\n      default: false\n    },\n    // The relation of the current field. Will contain information on the related\n    // collection and field(s)\n    relation: {\n      type: Object,\n      default: null\n    },\n    // The other fields in the current edit page\n    fields: {\n      type: Object,\n      default: null\n    },\n    // The values of the other fields on the edit page. Can be used for things like\n    // automatically generating a slug based on another field\n    values: {\n      type: Object,\n      default: null\n    },\n    width: {\n      type: String,\n      default: null,\n      validator(val) {\n        return [\n          'half',\n          'half-left',\n          'half-right',\n          'full',\n          'fill'\n        ].includes(val);\n      }\n    }\n  }\n};\n"],"sourceRoot":""}