diff options
Diffstat (limited to 'src/tools/chmod-calculator/chmod-calculator.vue')
-rw-r--r-- | src/tools/chmod-calculator/chmod-calculator.vue | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/src/tools/chmod-calculator/chmod-calculator.vue b/src/tools/chmod-calculator/chmod-calculator.vue new file mode 100644 index 0000000..31f8b9f --- /dev/null +++ b/src/tools/chmod-calculator/chmod-calculator.vue @@ -0,0 +1,83 @@ +<template> + <div> + <n-table :bordered="false" :bottom-bordered="false" single-column class="permission-table"> + <thead> + <tr> + <th class="text-center" scope="col"></th> + <th class="text-center" scope="col">Owner (u)</th> + <th class="text-center" scope="col">Group (g)</th> + <th class="text-center" scope="col">Public (o)</th> + </tr> + </thead> + <tbody> + <tr v-for="{ scope, title } of scopes" :key="scope"> + <td class="line-header">{{ title }}</td> + <td v-for="group of groups" :key="group" class="text-center"> + <!-- <n-switch v-model:value="permissions[group][scope]" /> --> + <n-checkbox v-model:checked="permissions[group][scope]" size="large" /> + </td> + </tr> + </tbody> + </n-table> + + <div class="octal-result"> + {{ octal }} + </div> + + <input-copyable :value="`chmod ${octal} path`" readonly style="margin-bottom: 5px" /> + </div> +</template> + +<script setup lang="ts"> +import { useThemeVars } from 'naive-ui'; +import { computed, ref } from 'vue'; +import { computeChmodOctalRepresentation } from './chmod-calculator.service'; +import InputCopyable from '../../components/InputCopyable.vue'; + +import type { Group, Scope } from './chmod-calculator.types'; + +const themeVars = useThemeVars(); + +const scopes: { scope: Scope; title: string }[] = [ + { scope: 'read', title: 'Read (4)' }, + { scope: 'write', title: 'Write (2)' }, + { scope: 'execute', title: 'Execute (1)' }, +]; +const groups: Group[] = ['owner', 'group', 'public']; + +const permissions = ref({ + owner: { read: false, write: false, execute: false }, + group: { read: false, write: false, execute: false }, + public: { read: false, write: false, execute: false }, +}); + +const octal = computed(() => computeChmodOctalRepresentation({ permissions: permissions.value })); +</script> + +<style lang="less" scoped> +.octal-result { + text-align: center; + font-size: 50px; + font-family: monospace; + color: v-bind('themeVars.primaryColor'); + margin: 20px 0; +} +.permission-table { + td, + th { + padding: 15px; + + @media screen and (max-width: 600px) { + padding: 5px; + } + } +} +.line-header { + font-weight: bold; + text-align: right; + max-width: 80px; +} +.text-center { + text-align: center; +} +</style> |