jetformbuilder
/
assets
/
src
/
admin-vuex-package
/
components
/
BoxActions
/
EditTableSwitcher.vue
ActionButton.vue
2 years ago
BoxActions.vue
2 years ago
EditTableSwitcher.vue
2 years ago
RedirectToSingle.vue
2 years ago
ShowOverflowTable.vue
2 years ago
UndoChangesTable.vue
2 years ago
EditTableSwitcher.vue
49 lines
| 1 | <template> |
| 2 | <cx-vui-switcher |
| 3 | class="jfb-cx-vui-component" |
| 4 | v-if="isEditableTable" |
| 5 | :label="__( 'Edit table', 'jet-form-builder' )" |
| 6 | :value="isEnableEdit" |
| 7 | @input="toggleEditTable" |
| 8 | ></cx-vui-switcher> |
| 9 | </template> |
| 10 | |
| 11 | <script> |
| 12 | import ScopeStoreMixin from '../../mixins/ScopeStoreMixin'; |
| 13 | |
| 14 | const { i18n } = JetFBMixins; |
| 15 | |
| 16 | export default { |
| 17 | name: 'EditTableSwitcher', |
| 18 | mixins: [ ScopeStoreMixin, i18n ], |
| 19 | computed: { |
| 20 | isEnableEdit() { |
| 21 | return this.getter( 'isEnableEdit' ); |
| 22 | }, |
| 23 | isEditableTable() { |
| 24 | return this.getter( 'isEditableTable' ); |
| 25 | }, |
| 26 | }, |
| 27 | methods: { |
| 28 | toggleEditTable() { |
| 29 | this.commit( 'toggleEditTable' ); |
| 30 | }, |
| 31 | }, |
| 32 | }; |
| 33 | </script> |
| 34 | |
| 35 | <style lang="scss"> |
| 36 | |
| 37 | .jfb-cx-vui-component { |
| 38 | |
| 39 | &.cx-vui-component { |
| 40 | column-gap: 1em; |
| 41 | flex-direction: row-reverse; |
| 42 | padding: 1.2em; |
| 43 | } |
| 44 | .cx-vui-component__label { |
| 45 | font-size: inherit; |
| 46 | } |
| 47 | } |
| 48 | |
| 49 | </style> |