[6.x] User Groups create / edit

packages/craftcms-cp/scripts/generate-vue-wrappers.js

@@ -230,15 +230,26 @@ function generateValueWrapper(component) {
   });
 
   const model = defineModel<${component.modelType}>();
+
+  defineProps<{
+    error?: null | string
+  }>()
 </script>
 
 <template>
   <${component.tagName}
     v-bind="$attrs"
     .modelValue="model"
     @model-value-changed="model = ($event.target as ${component.className})?.modelValue"
+    :has-feedback-for="error ? 'error' : ''"
   >
     <slot></slot>
+
+    <div slot="feedback">
+      <ul class="error-list" v-if="error">
+        <li>{{ error }}</li>
+      </ul>
+    </div>
   </${component.tagName}>
 </template>
 `;

packages/craftcms-cp/src/components/checkbox/checkbox.ts

@@ -8,9 +8,10 @@ export default class CraftCheckbox extends LionCheckbox {
       css`
         /* same as radio, potentially consolidate */
         :host {
+          --_gap-x: var(--gap-x, --c-spacing-md);
           display: grid;
           align-items: center;
-          gap: 0 var(--c-spacing-md);
+          gap: 0 var(--_gap-x);
           grid-template-areas: 'input label' '. help-text';
           grid-template-columns: auto 1fr;
           grid-template-rows: repeat(2, auto);
@@ -36,6 +37,8 @@ export default class CraftCheckbox extends LionCheckbox {
             var(--c-form-control-border-color)
           );
           border-radius: var(--c-input-radius, var(--c-radius-sm));
+          width: var(--c-size-control-2xs);
+          height: var(--c-size-control-2xs);
         }
 
         .choice-field__help-text {

packages/craftcms-cp/src/styles/shared/tokens.css

@@ -137,6 +137,7 @@
   --c-size-icon-lg: calc(22rem / 16);
   --c-size-icon-xl: calc(30rem / 16);
 
+  --c-size-control-2xs: calc(14rem / 16);
   --c-size-control-xs: calc(16rem / 16);
   --c-size-control-sm: calc(24rem / 16);
   --c-size-control-md: calc(34rem / 16);

resources/js/components/ActionMenu.vue

@@ -30,16 +30,18 @@
 
 <template>
   <craft-action-menu>
-    <craft-button
-      type="button"
-      slot="invoker"
-      icon
-      size="small"
-      variant="inherit"
-      appearance="plain"
-    >
-      <craft-icon :name="icon" :label="label"></craft-icon>
-    </craft-button>
+    <slot name="invoker" :label="label">
+      <craft-button
+        type="button"
+        slot="invoker"
+        icon
+        size="small"
+        variant="inherit"
+        appearance="plain"
+      >
+        <craft-icon :name="icon" :label="label"></craft-icon>
+      </craft-button>
+    </slot>
 
     <div slot="content" class="m-sm">
       <craft-action-item
@@ -48,18 +50,27 @@
         :key="`safe-${idx}`"
         :icon="action.icon"
         @click="action.onClick"
-        >{{ action.label }}</craft-action-item
-      >
-      <hr class="m-0" />
-      <craft-action-item
-        v-for="(action, idx) in dangerousActions"
-        :id="action.id"
-        :key="`dangerous-${idx}`"
-        :icon="action.icon"
-        :variant="action.variant"
-        @click="action.onClick"
-        >{{ action.label }}</craft-action-item
-      >
+        >{{ action.label }}
+        <craft-shortcut slot="suffix" class="ml-2" v-if="action.shortcut">{{
+          action.shortcut
+        }}</craft-shortcut>
+      </craft-action-item>
+
+      <template v-if="dangerousActions.length">
+        <hr class="m-0" />
+        <craft-action-item
+          v-for="(action, idx) in dangerousActions"
+          :id="action.id"
+          :key="`dangerous-${idx}`"
+          :icon="action.icon"
+          :variant="action.variant"
+          @click="action.onClick"
+          >{{ action.label }}
+          <craft-shortcut slot="suffix" class="ml-2" v-if="action.shortcut">{{
+            action.shortcut
+          }}</craft-shortcut>
+        </craft-action-item>
+      </template>
     </div>
   </craft-action-menu>
 </template>

resources/js/components/InlineFlash.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import TransitionFade from '@/components/TransitionFade.vue';
+  import {useFlash} from '@/composables/useFlash';
+
+  withDefaults(
+    defineProps<{
+      isActive?: boolean;
+    }>(),
+    {isActive: false}
+  );
+
+  const {successFlash, errorFlash} = useFlash();
+</script>
+
+<template>
+  <TransitionFade>
+    <template v-if="isActive && successFlash">
+      <craft-callout
+        variant="success"
+        appearance="plain"
+        icon="circle-check"
+        inline
+        class="p-0"
+        >{{ successFlash }}</craft-callout
+      >
+    </template>
+    <template v-if="isActive && errorFlash">
+      <craft-callout
+        variant="danger"
+        appearance="plain"
+        icon="triangle-exclamation"
+        inline
+        class="p-0"
+      >
+        {{ errorFlash }}
+      </craft-callout>
+    </template>
+  </TransitionFade>
+</template>
+
+<style scoped lang="scss"></style>

resources/js/components/PermissionList.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+  import {
+    getNestedKeys,
+    hasNested,
+    type PermissionItem,
+  } from '@/utils/permissions';
+  import CraftCheckbox from '@craftcms/cp/vue/CraftCheckbox.vue';
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: Array<string>): void;
+  }>();
+  const props = withDefaults(
+    defineProps<{
+      modelValue: Array<string>;
+      permissions?: Record<string, PermissionItem>;
+      disabled?: boolean;
+      level?: number;
+    }>(),
+    {permissions: () => ({}), modelValue: () => [], disabled: false, level: 0}
+  );
+
+  function toggleItem(key: string) {
+    const lowerKey = key.toLowerCase();
+    const index = props.modelValue.indexOf(lowerKey);
+    if (index === -1) {
+      emit('update:modelValue', [...props.modelValue, lowerKey]);
+    } else {
+      const keysToRemove = new Set([
+        lowerKey,
+        ...getNestedKeys(props.permissions[key]),
+      ]);
+      emit(
+        'update:modelValue',
+        props.modelValue.filter((v) => !keysToRemove.has(v))
+      );
+    }
+  }
+</script>
+
+<template>
+  <ul
+    class="group"
+    v-for="(item, key) in permissions"
+    :key="key"
+    :style="{
+      '--gap-x': `calc((${level} * 1lh) + var(--c-spacing-md))`,
+    }"
+  >
+    <li>
+      <CraftCheckbox
+        :label="item.label"
+        :model-value="modelValue.includes(key.toLowerCase())"
+        :value="key"
+        :disabled="disabled"
+        @update:model-value="toggleItem(key)"
+        :class="{
+          'cp-checkbox-indentation': level! > 0,
+        }"
+      >
+        <div v-if="item.info || item.warning" slot="help-text">
+          <template v-if="item.info">
+            {{ item.info }}
+          </template>
+
+          <template v-if="item.warning">
+            <div class="flex gap-1 items-center" data-color="warning">
+              <craft-icon name="triangle-exclamation"></craft-icon>
+              {{ item.warning }}
+            </div>
+          </template>
+        </div>
+      </CraftCheckbox>
+
+      <PermissionList
+        v-if="hasNested(item)"
+        :permissions="item.nested"
+        :model-value="modelValue"
+        :disabled="disabled || !modelValue.includes(item.key.toLowerCase())"
+        @update:model-value="emit('update:modelValue', $event)"
+        :level="level! + 1"
+      />
+    </li>
+  </ul>
+</template>
+
+<style scoped lang="scss">
+  .label {
+    display: flex;
+  }
+
+  .group {
+    margin-block: var(--c-spacing-sm);
+  }
+
+  .cp-checkbox-indentation {
+    position: relative;
+  }
+
+  .cp-checkbox-indentation::before {
+    content: '';
+    position: absolute;
+    // Position the indicator halfway from the top of the checkbox
+    inset-block-start: calc(1lh / 2);
+    inset-inline-start: calc(
+      var(--c-size-control-2xs) + (var(--c-spacing) * 2)
+    );
+    width: calc(var(--gap-x) - (var(--c-spacing) * 3.5));
+    height: 1px;
+    background-color: var(--c-color-neutral-border-quiet);
+  }
+</style>