✨ feat (rbac): implement role-based access control

app/components/pub/form/block.vue

@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="`mb-5 flex-wrap md:flex ${classValExt || ''}`">
+  <div :class="`m-3 mb-5 flex-wrap md:flex ${classValExt || ''}`">
     <slot />
   </div>
 </template>

app/components/pub/form/field-group.vue

@@ -34,7 +34,15 @@ const classVal = computed(() => {
 </script>
 
 <template>
-  <div :class="classVal">
+  <div
+    :class="[
+      column === 1 ? 'w-full' : column === 2 ? 'pe-4 md:w-1/2' : 'pe-4 md:w-1/3',
+      density === 'dense' ? '' : 'mb-2 md:mb-2.5 xl:mb-3',
+      side !== 'break' ? 'md:flex' : '',
+      position === 'dynamic' ? 'ps-4' : '',
+      props.class,
+    ]"
+  >
     <slot />
   </div>
 </template>

app/components/pub/form/label.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    size?: 'default' | 'narrow' | 'wide'
+    height?: 'default' | 'compact'
+    position?: 'default' | 'dynamic'
+    class?: string
+  }>(),
+  {
+    size: 'default',
+    height: 'default',
+    position: 'default',
+    class: '',
+  },
+)
+
+const classVal = computed(() => {
+  let val = ''
+
+  if (props.size === 'narrow') val += 'size-narrow '
+  else if (props.size === 'wide') val += 'size-wide '
+  else val += 'size-default '
+
+  if (props.height === 'compact') val += 'height-compact '
+  else val += 'height-default '
+
+  if (props.position === 'dynamic') val += 'position-dynamic '
+  else val += 'position-default '
+
+  return (val + (props.class || '')).trim()
+})
+</script>
+
+<template>
+  <div class="label" :class="classVal">
+    <label>
+      <slot />
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.label {
+  @apply block flex-shrink-0 shrink-0;
+}
+
+.size-default {
+  @apply w-28 2xl:w-36;
+}
+.size-narrow {
+  @apply w-24 2xl:w-28;
+}
+.size-wide {
+  @apply w-44 2xl:w-48;
+}
+
+.height-default {
+  @apply pt-2 2xl:pt-2.5;
+}
+
+.height-compact {
+  line-height: 14pt;
+}
+
+.position-default {
+  @apply pe-2 text-start;
+}
+
+.position-dynamic > * {
+  @apply block pe-2.5 md:text-end;
+}
+</style>