{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "spreadsheet-editor-protection",
  "framework": "vue",
  "type": "registry:component",
  "component": "SpreadsheetEditor",
  "variant": "protection",
  "dependencies": [
    "@syncfusion/ej2-vue-spreadsheet"
  ],
  "description": "Spreadsheet editor protects sheets and ranges with configurable edit permissions.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": true,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/spreadsheet-editor-protection.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-protection/SpreadSheetEditor.vue",
      "content": "<template>\n  <div class=\"control-section\">\n    <div id=\"spreadsheet-protect-sheet\">\n        <ejs-spreadsheet  ref=\"spreadsheet\" password=\"spreadsheet\" :openUrl=\"openUrl\" :saveUrl=\"saveUrl\" :allowOpen=\"false\" :allowSave=\"false\" :created=\"created\" :beforeCellRender=\"beforeCellRender\">\n            <e-sheets>\n                <e-sheet isProtected=\"true\" name=\"EMI Calculator\">\n                    <e-rows>\n                        <e-row>\n                            <e-cells>\n                                <e-cell index=1 value=\"Home Loan Calculator\" :style=\"{ textAlign: 'center', fontWeight: 'bold' }\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                        <e-row>\n                            <e-cells>\n                                <e-cell index=1 value=\"Loan Amount:\"></e-cell>\n                                <e-cell value=\"100000\" format=\"$#,##0.00\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                        <e-row>\n                            <e-cells>\n                                <e-cell index=1 value=\"Interest Rate:\"></e-cell>\n                                <e-cell value=\"0.08\" format=\"$#,##0.00\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                        <e-row>\n                            <e-cells>\n                                <e-cell index=1 value=\"Periods (terms in year):\"></e-cell>\n                                <e-cell value=\"1\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                        <e-row>\n                            <e-cells>\n                                <e-cell index=1 value=\"Start Date:\"></e-cell>\n                                <e-cell value=\"03-03-2020\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                        <e-row>\n                            <e-cells>\n                                <e-cell index=1 value=\"Loan EMI:\"></e-cell>\n                                <e-cell value=\"8698.84\" format=\"$#,##0.00\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                        <e-row>\n                            <e-cells>\n                                <e-cell index=1 value=\"Number of Payments:\"></e-cell>\n                                <e-cell value=\"12\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                        <e-row height:45>\n                            <e-cells>\n                                <e-cell index=1 value=\"Total Repayment Amount:\"></e-cell>\n                                <e-cell value=\"104386.11\" format=\"$#,##0.00\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                        <e-row>\n                            <e-cells>\n                                <e-cell index=1 value=\"Total Interest Amount:\"></e-cell>\n                                <e-cell value=\"4386.11\" format=\"$#,##0.00\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                    </e-rows>\n                    <e-columns>\n                        <e-column index=1 :width=190></e-column>\n                        <e-column :width=100></e-column>\n                    </e-columns>\n                </e-sheet>\n                <e-sheet isProtected=\"true\" name=\"EMI Schedule\">\n                    <e-ranges>\n                        <e-range :dataSource=\"dataSource\"></e-range>\n                    </e-ranges>\n                    <e-rows>\n                        <e-row>\n                            <e-cells>\n                                <e-cell :style=\"{ textAlign: 'center', fontWeight: 'bold' }\"></e-cell>\n                                <e-cell :style=\"{ textAlign: 'center', fontWeight: 'bold' }\"></e-cell>\n                                <e-cell :style=\"{ textAlign: 'center', fontWeight: 'bold' }\"></e-cell>\n                                <e-cell :style=\"{ textAlign: 'center', fontWeight: 'bold' }\"></e-cell>\n                                <e-cell :style=\"{ textAlign: 'center', fontWeight: 'bold' }\"></e-cell>\n                                <e-cell :style=\"{ textAlign: 'center', fontWeight: 'bold' }\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                    </e-rows>\n                    <e-columns>\n                            <e-column index=1 :width=110></e-column>\n                            <e-column :width=85></e-column>\n                            <e-column :width=85></e-column>\n                            <e-column :width=80></e-column>\n                            <e-column :width=90></e-column>\n                    </e-columns>\n                </e-sheet>\n            </e-sheets>\n        </ejs-spreadsheet>\n    </div>\n\n  </div>\n</template>\n\n<script>\nimport { SpreadsheetComponent, SheetDirective, SheetsDirective, RangeDirective, RangesDirective, RowDirective, RowsDirective, CellDirective, CellsDirective, ColumnDirective, ColumnsDirective } from \"@syncfusion/ej2-vue-spreadsheet\";\n\nexport default {\n   components: {\n    'ejs-spreadsheet': SpreadsheetComponent,\n    'e-sheet': SheetDirective,\n    'e-sheets': SheetsDirective,\n    'e-range': RangeDirective,\n    'e-ranges': RangesDirective,\n    'e-cell': CellDirective,\n    'e-cells': CellsDirective,\n    'e-row': RowDirective,\n    'e-rows': RowsDirective,\n    'e-column': ColumnDirective,\n    'e-columns': ColumnsDirective\n   },\n   data: () => {\n    return {\n        dataSource: [\n            { Tenure: '1', 'Payment Date': '03-04-2020', EMI: 8698.84, Prinicpal: 8032.18, Interest: 666.67, Balance: 91967.82 },\n            { Tenure: '2', 'Payment Date': '03-05-2020', EMI: 8698.84, Prinicpal: 8085.72, Interest: 613.12, Balance: 83882.10 },\n            { Tenure: '3', 'Payment Date': '03-06-2020', EMI: 8698.84, Prinicpal: 8139.63, Interest: 559.21, Balance: 75742.47 },\n            { Tenure: '4', 'Payment Date': '03-07-2020', EMI: 8698.84, Prinicpal: 8193.89, Interest: 504.95, Balance: 67548.58 },\n            { Tenure: '5', 'Payment Date': '03-08-2020', EMI: 8698.84, Prinicpal: 8248.52, Interest: 450.32, Balance: 59300.06 }\n        ],\n        openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',\n        saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'\n    }\n  },\n  methods: {\n    created: function() {\n        var spreadsheet = this.$refs.spreadsheet;\n        spreadsheet.numberFormat('$#,##0.00', 'EMI Schedule!C2:F6');\n        spreadsheet.numberFormat('m/d/yyyy', 'EMI Calculator!C5:C5');\n        spreadsheet.numberFormat('m/d/yyyy', 'EMI Schedule!B2:B6');\n    },\n    beforeCellRender: function(args) {\n        var spreadsheet = this.$refs.spreadsheet;\n        if (args.address === \"B1\" && spreadsheet.ej2Instances.sheets[spreadsheet.ej2Instances.activeSheetIndex].name === 'EMI Calculator') {\n            (args.element).colSpan = 2;\n        }\n    }\n}\n}\n</script>"
    },
    {
      "target": "src/components/spreadsheet-editor-protection/SpreadSheetEditorView.vue",
      "content": "<template>\n  <SpreadSheetEditor />\n</template>\n\n<script setup>\nimport SpreadSheetEditor from '../components/SpreadSheetEditor.vue'\n</script>"
    },
    {
      "target": "src/components/spreadsheet-editor-protection/datasource.json",
      "content": "{\n    \"protectSheet\": [\n        {\n            \"Tenure\": \"1\",\n            \"Payment Date\": \"03-04-2020\",\n            \"EMI\": \"8698.84\",\n            \"Prinicpal\": \"8032.18\",\n            \"Interest\": \"666.67\",\n            \"Balance\": \"91967.82\"\n        },\n        {\n            \"Tenure\": \"2\",\n            \"Payment Date\": \"03-05-2020\",\n            \"EMI\": \"8698.84\",\n            \"Prinicpal\": \"8085.72\",\n            \"Interest\": \"613.12\",\n            \"Balance\": \"83882.10\"\n        },\n        {\n            \"Tenure\": \"3\",\n            \"Payment Date\": \"03-06-2020\",\n            \"EMI\": \"8698.84\",\n            \"Prinicpal\": \"8139.63\",\n            \"Interest\": \"559.21\",\n            \"Balance\": \"75742.47\"\n        },\n        {\n            \"Tenure\": \"4\",\n            \"Payment Date\": \"03-07-2020\",\n            \"EMI\": \"8698.84\",\n            \"Prinicpal\": \"8193.89\",\n            \"Interest\": \"504.95\",\n            \"Balance\": \"67548.58\"\n        },\n        {\n            \"Tenure\": \"5\",\n            \"Payment Date\": \"03-08-2020\",\n            \"EMI\": \"8698.84\",\n            \"Prinicpal\": \"8248.52\",\n            \"Interest\": \"450.32\",\n            \"Balance\": \"59300.06\"\n        },\n        {\n            \"Tenure\": \"6\",\n            \"Payment Date\": \"03-09-2020\",\n            \"EMI\": \"8698.84\",\n            \"Prinicpal\": \"8303.51\",\n            \"Interest\": \"395.33\",\n            \"Balance\": \"50996.55\"\n        }\n    ]\n}\n"
    }
  ]
}