added color picker to modal

app/web/src/components/AssetDetailsPanel.vue

@@ -238,6 +238,7 @@ import {
   VButton,
   VormInput,
   Icon,
+  ColorPicker,
 } from "@si/vue-lib/design-system";
 import * as _ from "lodash-es";
 import { useToast } from "vue-toastification";
@@ -264,7 +265,6 @@ import {
 } from "@/api/sdf/dal/schema";
 import { useFuncStore } from "@/store/func/funcs.store";
 import { PropId } from "@/api/sdf/dal/prop";
-import ColorPicker from "./ColorPicker.vue";
 import AssetFuncAttachModal from "./AssetFuncAttachModal.vue";
 import AssetNameModal from "./AssetNameModal.vue";
 import AssetDetailIntrinsicInput from "./AssetDetailIntrinsicInput.vue";

app/web/src/components/ModelingView/TemplateSelectionModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" title="Extract Template" size="xl">
+  <Modal ref="modalRef" title="Extract Template" size="xl" noAutoFocus>
     <div class="flex flex-col gap-sm max-h-[70vh]">
       <div class="flex-none">
         This will create a new template function based on
@@ -19,6 +19,20 @@
       </div>
 
       <div class="flex flex-col flex-none">
+        <VormInput
+          compact
+          compactWide
+          required
+          label="Asset Color"
+          type="container"
+        >
+          <ColorPicker
+            id="asset-color"
+            v-model="assetColor"
+            insideModal
+            @change="null"
+          />
+        </VormInput>
         <VormInput
           v-model="assetName"
           compact
@@ -54,7 +68,13 @@
 
 <script setup lang="ts">
 import * as _ from "lodash-es";
-import { Modal, useModal, VButton, VormInput } from "@si/vue-lib/design-system";
+import {
+  ColorPicker,
+  Modal,
+  useModal,
+  VButton,
+  VormInput,
+} from "@si/vue-lib/design-system";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { storeToRefs } from "pinia";
 import { useComponentsStore } from "@/store/components.store";
@@ -77,6 +97,18 @@ const { selectedComponents, restorableSelectedComponents } =
 const modalRef = ref<InstanceType<typeof Modal>>();
 const { open: openModal, close } = useModal(modalRef);
 
+const randomDefaultColor = () => {
+  return `#${_.sample([
+    "ff0000",
+    "00ff00",
+    "0000ff",
+    "ffff00",
+    "ff00ff",
+    "00ffff",
+  ])}`;
+};
+
+const assetColor = ref(randomDefaultColor());
 const assetName = ref("");
 const funcName = ref("");
 
@@ -100,6 +132,7 @@ const open = () => {
     return;
   }
 
+  assetColor.value = randomDefaultColor();
   assetName.value = "";
   funcName.value = "";
   openModal();
@@ -117,6 +150,7 @@ const onCreateTemplate = () => {
   if (!readyToSubmit.value || !validSelectedComponents.value) return;
 
   const templateData = {
+    assetColor: assetColor.value,
     assetName: assetName.value,
     funcName: funcName.value,
     components: selectedComponents.value as Array<

app/web/src/store/components.store.ts

@@ -1163,6 +1163,7 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
           },
 
           async CREATE_TEMPLATE_FUNC_FROM_COMPONENTS(templateData: {
+            assetColor: string;
             assetName: string;
             funcName: string;
             components: Array<DiagramNodeData | DiagramGroupData>;

lib/vue-lib/package.json

@@ -62,6 +62,7 @@
     "posthog-js": "^1.57.2",
     "tailwindcss-capsize": "^3.0.3",
     "ulid": "^2.3.0",
+    "vanilla-picker": "^2.12.1",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5",
     "vue-safe-teleport": "^0.1.2"

app/web/src/components/ColorPicker.vue → lib/vue-lib/src/design-system/forms/ColorPicker.vue

@@ -7,8 +7,9 @@
         :aria-required="required ?? false"
         :class="
           clsx(
-            'absolute z-80 h-7 px-2xs flex flex-row gap-xs items-center dark:hover:text-action-300 hover:text-action-500',
+            'absolute h-7 px-2xs flex flex-row gap-xs items-center dark:hover:text-action-300 hover:text-action-500',
             !disabled && 'cursor-pointer',
+            insideModal ? 'z-100' : 'z-80',
           )
         "
       >
@@ -32,6 +33,7 @@ const props = defineProps<{
   required?: boolean;
   modelValue: string;
   disabled?: boolean;
+  insideModal?: boolean;
 }>();
 
 const emit = defineEmits<{

lib/vue-lib/src/design-system/index.ts

@@ -1,6 +1,7 @@
 // ./forms
 export { default as VormInput } from "./forms/VormInput.vue";
 export { default as VormInputOption } from "./forms/VormInputOption.vue";
+export { default as ColorPicker } from "./forms/ColorPicker.vue";
 export * from "./forms/helpers/form-disabling";
 export * from "./forms/helpers/form-validation";
 

lib/vue-lib/src/design-system/modals/Modal.vue

@@ -62,6 +62,13 @@
                 )
               "
             >
+              <!-- fake input to prevent initial focus... only way to stop headless UI -->
+              <input
+                v-if="noAutoFocus"
+                ref="noAutoFocusTrapRef"
+                class="absolute w-0 h-0"
+              />
+
               <div
                 :class="
                   clsx(
@@ -191,9 +198,7 @@ const isOpen = ref(props.beginOpen);
 function open() {
   hideFocusTrap.value = false;
   isOpen.value = true;
-  if (!props.noAutoFocus) {
-    setTimeout(fixAutoFocusElement);
-  }
+  setTimeout(fixAutoFocusElement);
 }
 function close() {
   emit("close");
@@ -202,13 +207,20 @@ function close() {
 
 const focusTrapRef = ref();
 const hideFocusTrap = ref(false);
+const noAutoFocusTrapRef = ref<HTMLInputElement>();
 
 const exitButtonRef = ref();
 function fixAutoFocusElement() {
   // Headless UI automatically traps focus within the modal and focuses on the first focusable element it finds.
   // While focusing on an input (if there is one) feels good, focusing on an "OK" button or the close/X button
   // feels a bit agressive and looks strange
-  const focusedEl = document.activeElement;
+  const focusedEl = document.activeElement as HTMLElement;
+
+  if (props.noAutoFocus) {
+    focusedEl.blur();
+    noAutoFocusTrapRef.value?.classList.add("hidden");
+  }
+
   if (
     focusedEl?.classList.contains("modal-close-button") ||
     focusedEl?.classList.contains("vbutton") ||