@scalar/api-client 2.38.3 → 2.38.4

package/dist/{EnvironmentModal-CcyqnPc2.js.map → EnvironmentModal-C0lYytkh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentModal-CcyqnPc2.js","names":[],"sources":["../src/views/Environment/EnvironmentColors.vue","../src/views/Environment/EnvironmentColors.vue","../src/views/Environment/EnvironmentColorModal.vue","../src/views/Environment/EnvironmentColorModal.vue","../src/views/Environment/EnvironmentModal.vue","../src/views/Environment/EnvironmentModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    activeColor: string\n    selector?: boolean\n  }>(),\n  {\n    selector: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\nconst colorOptions = [\n  { color: '#FFFFFF' },\n  { color: '#EF0006' },\n  { color: '#EDBE20' },\n  { color: '#069061' },\n  { color: '#FB892C' },\n  { color: '#0082D0' },\n  { color: '#5203D1' },\n  { color: '#FFC0CB' },\n]\n\nconst backgroundStyle = computed(() => {\n  return (props.activeColor &&\n    !colorOptions.some((option) => option.color === props.activeColor)) ||\n    customColor.value\n    ? `background-color: ${props.activeColor || customColor.value};`\n    : 'background: linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));'\n})\n\nconst handleClick = () => {\n  showCustomInput.value = !showCustomInput.value\n  if (props.selector) {\n    showSelector.value = false\n  }\n  nextTick(() => {\n    if (customColorInputRef.value) {\n      customColorInputRef.value.focus()\n    }\n  })\n}\n\nwatch(customColor, (newColor) => {\n  if (newColor && !newColor.startsWith('#')) {\n    customColor.value = `#${newColor}`\n  }\n  showCustomInput.value = true\n})\n\nconst handleSelectorClick = () => {\n  if (props.selector) {\n    showSelector.value = !showSelector.value\n  }\n}\n\nconst selectColor = (color: string) => {\n  emit('select', color)\n  if (props.selector) {\n    showSelector.value = false\n  }\n}\n</script>\n<template>\n  <div>\n    <template v-if=\"!showCustomInput\">\n      <div\n        v-if=\"props.selector && !showSelector\"\n        class=\"flex cursor-pointer items-center justify-center rounded-full\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n        :style=\"{ backgroundColor: activeColor }\"\n        @click=\"handleSelectorClick\">\n        <ScalarIcon\n          v-if=\"activeColor\"\n          class=\"text-c-btn\"\n          :class=\"props.selector && 'p-0.5'\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n      <div\n        v-if=\"showSelector || !props.selector\"\n        class=\"color-selector flex flex-row items-center justify-between gap-1.5 space-x-1\"\n        :class=\"props.selector ? 'h-4' : 'min-h-10 min-w-[296px]'\">\n        <div\n          v-for=\"option in colorOptions\"\n          :key=\"option.color\"\n          class=\"flex cursor-pointer items-center justify-center rounded-full\"\n          :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n          :style=\"{ backgroundColor: option.color }\"\n          @click=\"selectColor(option.color)\">\n          <ScalarIcon\n            v-if=\"activeColor === option.color && !customColor\"\n            class=\"text-c-btn\"\n            :class=\"props.selector && 'p-0.5'\"\n            icon=\"Checkmark\"\n            size=\"xs\" />\n        </div>\n        <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n        <label\n          class=\"z-10 flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n          :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n          :style=\"backgroundStyle\"\n          @click=\"handleClick\">\n          <ScalarIcon\n            v-if=\"\n              !showCustomInput &&\n              (activeColor === customColor ||\n                (activeColor &&\n                  !colorOptions.some((option) => option.color === activeColor)))\n            \"\n            class=\"text-c-btn\"\n            icon=\"Checkmark\"\n            size=\"xs\" />\n        </label>\n      </div>\n    </template>\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex flex-1 items-center gap-2 rounded\"\n      :class=\"props.selector ? 'h-4' : 'min-h-10'\">\n      <span\n        class=\"absolute rounded-full border border-dashed\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\" />\n      <span\n        class=\"z-[1] rounded-full\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n        :style=\"backgroundStyle\">\n      </span>\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"selectColor(customColor)\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"handleClick\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    activeColor: string\n    selector?: boolean\n  }>(),\n  {\n    selector: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\nconst colorOptions = [\n  { color: '#FFFFFF' },\n  { color: '#EF0006' },\n  { color: '#EDBE20' },\n  { color: '#069061' },\n  { color: '#FB892C' },\n  { color: '#0082D0' },\n  { color: '#5203D1' },\n  { color: '#FFC0CB' },\n]\n\nconst backgroundStyle = computed(() => {\n  return (props.activeColor &&\n    !colorOptions.some((option) => option.color === props.activeColor)) ||\n    customColor.value\n    ? `background-color: ${props.activeColor || customColor.value};`\n    : 'background: linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));'\n})\n\nconst handleClick = () => {\n  showCustomInput.value = !showCustomInput.value\n  if (props.selector) {\n    showSelector.value = false\n  }\n  nextTick(() => {\n    if (customColorInputRef.value) {\n      customColorInputRef.value.focus()\n    }\n  })\n}\n\nwatch(customColor, (newColor) => {\n  if (newColor && !newColor.startsWith('#')) {\n    customColor.value = `#${newColor}`\n  }\n  showCustomInput.value = true\n})\n\nconst handleSelectorClick = () => {\n  if (props.selector) {\n    showSelector.value = !showSelector.value\n  }\n}\n\nconst selectColor = (color: string) => {\n  emit('select', color)\n  if (props.selector) {\n    showSelector.value = false\n  }\n}\n</script>\n<template>\n  <div>\n    <template v-if=\"!showCustomInput\">\n      <div\n        v-if=\"props.selector && !showSelector\"\n        class=\"flex cursor-pointer items-center justify-center rounded-full\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n        :style=\"{ backgroundColor: activeColor }\"\n        @click=\"handleSelectorClick\">\n        <ScalarIcon\n          v-if=\"activeColor\"\n          class=\"text-c-btn\"\n          :class=\"props.selector && 'p-0.5'\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n      <div\n        v-if=\"showSelector || !props.selector\"\n        class=\"color-selector flex flex-row items-center justify-between gap-1.5 space-x-1\"\n        :class=\"props.selector ? 'h-4' : 'min-h-10 min-w-[296px]'\">\n        <div\n          v-for=\"option in colorOptions\"\n          :key=\"option.color\"\n          class=\"flex cursor-pointer items-center justify-center rounded-full\"\n          :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n          :style=\"{ backgroundColor: option.color }\"\n          @click=\"selectColor(option.color)\">\n          <ScalarIcon\n            v-if=\"activeColor === option.color && !customColor\"\n            class=\"text-c-btn\"\n            :class=\"props.selector && 'p-0.5'\"\n            icon=\"Checkmark\"\n            size=\"xs\" />\n        </div>\n        <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n        <label\n          class=\"z-10 flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n          :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n          :style=\"backgroundStyle\"\n          @click=\"handleClick\">\n          <ScalarIcon\n            v-if=\"\n              !showCustomInput &&\n              (activeColor === customColor ||\n                (activeColor &&\n                  !colorOptions.some((option) => option.color === activeColor)))\n            \"\n            class=\"text-c-btn\"\n            icon=\"Checkmark\"\n            size=\"xs\" />\n        </label>\n      </div>\n    </template>\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex flex-1 items-center gap-2 rounded\"\n      :class=\"props.selector ? 'h-4' : 'min-h-10'\">\n      <span\n        class=\"absolute rounded-full border border-dashed\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\" />\n      <span\n        class=\"z-[1] rounded-full\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n        :style=\"backgroundStyle\">\n      </span>\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"selectColor(customColor)\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"handleClick\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components'\nimport { ref } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  selectedColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit', color: string): void\n}>()\n\nconst newColor = ref('')\n\nconst handleColorSelect = (color: string) => {\n  newColor.value = color\n}\n\nconst handleSubmit = () => {\n  emit('submit', newColor.value)\n  newColor.value = ''\n}\n</script>\n<template>\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"state\"\n    title=\"Edit Environment Color\">\n    <div class=\"flex flex-col gap-4\">\n      <EnvironmentColors\n        :activeColor=\"newColor || props.selectedColor\"\n        class=\"w-full p-1\"\n        @select=\"handleColorSelect\" />\n      <SidebarListElementForm\n        @cancel=\"emit('cancel')\"\n        @submit=\"handleSubmit\">\n      </SidebarListElementForm>\n    </div>\n  </ScalarModal>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components'\nimport { ref } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  selectedColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit', color: string): void\n}>()\n\nconst newColor = ref('')\n\nconst handleColorSelect = (color: string) => {\n  newColor.value = color\n}\n\nconst handleSubmit = () => {\n  emit('submit', newColor.value)\n  newColor.value = ''\n}\n</script>\n<template>\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"state\"\n    title=\"Edit Environment Color\">\n    <div class=\"flex flex-col gap-4\">\n      <EnvironmentColors\n        :activeColor=\"newColor || props.selectedColor\"\n        class=\"w-full p-1\"\n        @select=\"handleColorSelect\" />\n      <SidebarListElementForm\n        @cancel=\"emit('cancel')\"\n        @submit=\"handleSubmit\">\n      </SidebarListElementForm>\n    </div>\n  </ScalarModal>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarListbox,\n  ScalarModal,\n  type ModalState,\n} from '@scalar/components'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useToasts } from '@scalar/use-toasts'\nimport { computed, ref, watch } from 'vue'\n\nimport CommandActionForm from '@/components/CommandPalette/CommandActionForm.vue'\nimport CommandActionInput from '@/components/CommandPalette/CommandActionInput.vue'\nimport { useWorkspace } from '@/store'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  activeWorkspaceCollections: Collection[]\n  collectionId: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (\n    event: 'submit',\n    environment: {\n      name: string\n      color: string\n      type: string\n      collectionId: Collection['uid'] | undefined\n    },\n  ): void\n}>()\n\nconst { events } = useWorkspace()\n\nconst environmentName = ref('')\nconst selectedColor = ref('#FFFFFF')\n\nconst collections = computed(() => [\n  ...props.activeWorkspaceCollections\n    .filter((collection) => collection.info?.title !== 'Drafts')\n    .map((collection) => ({\n      id: collection.uid,\n      label: collection.info?.title ?? 'Untitled Collection',\n    })),\n])\n\nconst selectedEnvironment = ref(\n  collections.value.find((collection) => collection.id === props.collectionId),\n)\n\nconst { toast } = useToasts()\n\nconst handleColorSelect = (color: string) => {\n  selectedColor.value = color\n}\n\n// Reset environment name and selected color\nwatch(\n  () => props.state.open,\n  (isOpen) => {\n    if (isOpen) {\n      environmentName.value = ''\n      selectedColor.value = '#FFFFFF'\n      if (props.collectionId) {\n        selectedEnvironment.value = collections.value.find(\n          (collection) => collection.id === props.collectionId,\n        )\n      } else {\n        selectedEnvironment.value = undefined\n      }\n    }\n  },\n)\n\nconst handleSubmit = () => {\n  if (!environmentName.value.trim()) {\n    toast('Please enter a name before adding an environment.', 'error')\n    return\n  }\n  if (!selectedEnvironment.value?.id) {\n    toast('Please select a collection before adding an environment.', 'error')\n    return\n  }\n  emit('submit', {\n    name: environmentName.value,\n    color: selectedColor.value,\n    type: selectedEnvironment.value?.id === 'global' ? 'global' : 'collection',\n    collectionId:\n      selectedEnvironment.value?.id !== 'global'\n        ? selectedEnvironment.value?.id\n        : undefined,\n  })\n}\n\nconst redirectToCreateCollection = () => {\n  props.state.hide()\n  events.commandPalette.emit({ commandName: 'Create Collection' })\n}\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!selectedEnvironment || !environmentName.trim()\"\n      @cancel=\"emit('cancel')\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          selector\n          @select=\"handleColorSelect\" />\n        <CommandActionInput\n          v-model=\"environmentName\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n      <template #options>\n        <ScalarListbox\n          v-model=\"selectedEnvironment\"\n          :options=\"collections\"\n          placeholder=\"Select Type\">\n          <ScalarButton\n            v-if=\"collections.length > 0\"\n            class=\"hover:bg-b-2 max-h-8 w-fit justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\">\n            <span :class=\"selectedEnvironment ? 'text-c-1' : 'text-c-3'\">{{\n              selectedEnvironment\n                ? selectedEnvironment.label\n                : 'Select Collection'\n            }}</span>\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"ChevronDown\"\n              size=\"xs\" />\n          </ScalarButton>\n          <ScalarButton\n            v-else\n            class=\"hover:bg-b-2 max-h-8 justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\"\n            @click=\"redirectToCreateCollection\">\n            <span class=\"text-c-1\">Create Collection</span>\n          </ScalarButton>\n        </ScalarListbox>\n      </template>\n      <template #submit> Add Environment </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarListbox,\n  ScalarModal,\n  type ModalState,\n} from '@scalar/components'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useToasts } from '@scalar/use-toasts'\nimport { computed, ref, watch } from 'vue'\n\nimport CommandActionForm from '@/components/CommandPalette/CommandActionForm.vue'\nimport CommandActionInput from '@/components/CommandPalette/CommandActionInput.vue'\nimport { useWorkspace } from '@/store'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  activeWorkspaceCollections: Collection[]\n  collectionId: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (\n    event: 'submit',\n    environment: {\n      name: string\n      color: string\n      type: string\n      collectionId: Collection['uid'] | undefined\n    },\n  ): void\n}>()\n\nconst { events } = useWorkspace()\n\nconst environmentName = ref('')\nconst selectedColor = ref('#FFFFFF')\n\nconst collections = computed(() => [\n  ...props.activeWorkspaceCollections\n    .filter((collection) => collection.info?.title !== 'Drafts')\n    .map((collection) => ({\n      id: collection.uid,\n      label: collection.info?.title ?? 'Untitled Collection',\n    })),\n])\n\nconst selectedEnvironment = ref(\n  collections.value.find((collection) => collection.id === props.collectionId),\n)\n\nconst { toast } = useToasts()\n\nconst handleColorSelect = (color: string) => {\n  selectedColor.value = color\n}\n\n// Reset environment name and selected color\nwatch(\n  () => props.state.open,\n  (isOpen) => {\n    if (isOpen) {\n      environmentName.value = ''\n      selectedColor.value = '#FFFFFF'\n      if (props.collectionId) {\n        selectedEnvironment.value = collections.value.find(\n          (collection) => collection.id === props.collectionId,\n        )\n      } else {\n        selectedEnvironment.value = undefined\n      }\n    }\n  },\n)\n\nconst handleSubmit = () => {\n  if (!environmentName.value.trim()) {\n    toast('Please enter a name before adding an environment.', 'error')\n    return\n  }\n  if (!selectedEnvironment.value?.id) {\n    toast('Please select a collection before adding an environment.', 'error')\n    return\n  }\n  emit('submit', {\n    name: environmentName.value,\n    color: selectedColor.value,\n    type: selectedEnvironment.value?.id === 'global' ? 'global' : 'collection',\n    collectionId:\n      selectedEnvironment.value?.id !== 'global'\n        ? selectedEnvironment.value?.id\n        : undefined,\n  })\n}\n\nconst redirectToCreateCollection = () => {\n  props.state.hide()\n  events.commandPalette.emit({ commandName: 'Create Collection' })\n}\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!selectedEnvironment || !environmentName.trim()\"\n      @cancel=\"emit('cancel')\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          selector\n          @select=\"handleColorSelect\" />\n        <CommandActionInput\n          v-model=\"environmentName\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n      <template #options>\n        <ScalarListbox\n          v-model=\"selectedEnvironment\"\n          :options=\"collections\"\n          placeholder=\"Select Type\">\n          <ScalarButton\n            v-if=\"collections.length > 0\"\n            class=\"hover:bg-b-2 max-h-8 w-fit justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\">\n            <span :class=\"selectedEnvironment ? 'text-c-1' : 'text-c-3'\">{{\n              selectedEnvironment\n                ? selectedEnvironment.label\n                : 'Select Collection'\n            }}</span>\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"ChevronDown\"\n              size=\"xs\" />\n          </ScalarButton>\n          <ScalarButton\n            v-else\n            class=\"hover:bg-b-2 max-h-8 justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\"\n            @click=\"redirectToCreateCollection\">\n            <span class=\"text-c-1\">Create Collection</span>\n          </ScalarButton>\n        </ScalarListbox>\n      </template>\n      <template #submit> Add Environment </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"EnvironmentModal-C0lYytkh.js","names":[],"sources":["../src/views/Environment/EnvironmentColors.vue","../src/views/Environment/EnvironmentColors.vue","../src/views/Environment/EnvironmentColorModal.vue","../src/views/Environment/EnvironmentColorModal.vue","../src/views/Environment/EnvironmentModal.vue","../src/views/Environment/EnvironmentModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    activeColor: string\n    selector?: boolean\n  }>(),\n  {\n    selector: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\nconst colorOptions = [\n  { color: '#FFFFFF' },\n  { color: '#EF0006' },\n  { color: '#EDBE20' },\n  { color: '#069061' },\n  { color: '#FB892C' },\n  { color: '#0082D0' },\n  { color: '#5203D1' },\n  { color: '#FFC0CB' },\n]\n\nconst backgroundStyle = computed(() => {\n  return (props.activeColor &&\n    !colorOptions.some((option) => option.color === props.activeColor)) ||\n    customColor.value\n    ? `background-color: ${props.activeColor || customColor.value};`\n    : 'background: linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));'\n})\n\nconst handleClick = () => {\n  showCustomInput.value = !showCustomInput.value\n  if (props.selector) {\n    showSelector.value = false\n  }\n  nextTick(() => {\n    if (customColorInputRef.value) {\n      customColorInputRef.value.focus()\n    }\n  })\n}\n\nwatch(customColor, (newColor) => {\n  if (newColor && !newColor.startsWith('#')) {\n    customColor.value = `#${newColor}`\n  }\n  showCustomInput.value = true\n})\n\nconst handleSelectorClick = () => {\n  if (props.selector) {\n    showSelector.value = !showSelector.value\n  }\n}\n\nconst selectColor = (color: string) => {\n  emit('select', color)\n  if (props.selector) {\n    showSelector.value = false\n  }\n}\n</script>\n<template>\n  <div>\n    <template v-if=\"!showCustomInput\">\n      <div\n        v-if=\"props.selector && !showSelector\"\n        class=\"flex cursor-pointer items-center justify-center rounded-full\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n        :style=\"{ backgroundColor: activeColor }\"\n        @click=\"handleSelectorClick\">\n        <ScalarIcon\n          v-if=\"activeColor\"\n          class=\"text-c-btn\"\n          :class=\"props.selector && 'p-0.5'\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n      <div\n        v-if=\"showSelector || !props.selector\"\n        class=\"color-selector flex flex-row items-center justify-between gap-1.5 space-x-1\"\n        :class=\"props.selector ? 'h-4' : 'min-h-10 min-w-[296px]'\">\n        <div\n          v-for=\"option in colorOptions\"\n          :key=\"option.color\"\n          class=\"flex cursor-pointer items-center justify-center rounded-full\"\n          :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n          :style=\"{ backgroundColor: option.color }\"\n          @click=\"selectColor(option.color)\">\n          <ScalarIcon\n            v-if=\"activeColor === option.color && !customColor\"\n            class=\"text-c-btn\"\n            :class=\"props.selector && 'p-0.5'\"\n            icon=\"Checkmark\"\n            size=\"xs\" />\n        </div>\n        <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n        <label\n          class=\"z-10 flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n          :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n          :style=\"backgroundStyle\"\n          @click=\"handleClick\">\n          <ScalarIcon\n            v-if=\"\n              !showCustomInput &&\n              (activeColor === customColor ||\n                (activeColor &&\n                  !colorOptions.some((option) => option.color === activeColor)))\n            \"\n            class=\"text-c-btn\"\n            icon=\"Checkmark\"\n            size=\"xs\" />\n        </label>\n      </div>\n    </template>\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex flex-1 items-center gap-2 rounded\"\n      :class=\"props.selector ? 'h-4' : 'min-h-10'\">\n      <span\n        class=\"absolute rounded-full border border-dashed\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\" />\n      <span\n        class=\"z-[1] rounded-full\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n        :style=\"backgroundStyle\">\n      </span>\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"selectColor(customColor)\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"handleClick\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    activeColor: string\n    selector?: boolean\n  }>(),\n  {\n    selector: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\nconst colorOptions = [\n  { color: '#FFFFFF' },\n  { color: '#EF0006' },\n  { color: '#EDBE20' },\n  { color: '#069061' },\n  { color: '#FB892C' },\n  { color: '#0082D0' },\n  { color: '#5203D1' },\n  { color: '#FFC0CB' },\n]\n\nconst backgroundStyle = computed(() => {\n  return (props.activeColor &&\n    !colorOptions.some((option) => option.color === props.activeColor)) ||\n    customColor.value\n    ? `background-color: ${props.activeColor || customColor.value};`\n    : 'background: linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));'\n})\n\nconst handleClick = () => {\n  showCustomInput.value = !showCustomInput.value\n  if (props.selector) {\n    showSelector.value = false\n  }\n  nextTick(() => {\n    if (customColorInputRef.value) {\n      customColorInputRef.value.focus()\n    }\n  })\n}\n\nwatch(customColor, (newColor) => {\n  if (newColor && !newColor.startsWith('#')) {\n    customColor.value = `#${newColor}`\n  }\n  showCustomInput.value = true\n})\n\nconst handleSelectorClick = () => {\n  if (props.selector) {\n    showSelector.value = !showSelector.value\n  }\n}\n\nconst selectColor = (color: string) => {\n  emit('select', color)\n  if (props.selector) {\n    showSelector.value = false\n  }\n}\n</script>\n<template>\n  <div>\n    <template v-if=\"!showCustomInput\">\n      <div\n        v-if=\"props.selector && !showSelector\"\n        class=\"flex cursor-pointer items-center justify-center rounded-full\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n        :style=\"{ backgroundColor: activeColor }\"\n        @click=\"handleSelectorClick\">\n        <ScalarIcon\n          v-if=\"activeColor\"\n          class=\"text-c-btn\"\n          :class=\"props.selector && 'p-0.5'\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n      <div\n        v-if=\"showSelector || !props.selector\"\n        class=\"color-selector flex flex-row items-center justify-between gap-1.5 space-x-1\"\n        :class=\"props.selector ? 'h-4' : 'min-h-10 min-w-[296px]'\">\n        <div\n          v-for=\"option in colorOptions\"\n          :key=\"option.color\"\n          class=\"flex cursor-pointer items-center justify-center rounded-full\"\n          :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n          :style=\"{ backgroundColor: option.color }\"\n          @click=\"selectColor(option.color)\">\n          <ScalarIcon\n            v-if=\"activeColor === option.color && !customColor\"\n            class=\"text-c-btn\"\n            :class=\"props.selector && 'p-0.5'\"\n            icon=\"Checkmark\"\n            size=\"xs\" />\n        </div>\n        <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n        <label\n          class=\"z-10 flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n          :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n          :style=\"backgroundStyle\"\n          @click=\"handleClick\">\n          <ScalarIcon\n            v-if=\"\n              !showCustomInput &&\n              (activeColor === customColor ||\n                (activeColor &&\n                  !colorOptions.some((option) => option.color === activeColor)))\n            \"\n            class=\"text-c-btn\"\n            icon=\"Checkmark\"\n            size=\"xs\" />\n        </label>\n      </div>\n    </template>\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex flex-1 items-center gap-2 rounded\"\n      :class=\"props.selector ? 'h-4' : 'min-h-10'\">\n      <span\n        class=\"absolute rounded-full border border-dashed\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\" />\n      <span\n        class=\"z-[1] rounded-full\"\n        :class=\"props.selector ? 'h-4 w-4' : 'h-5 w-5'\"\n        :style=\"backgroundStyle\">\n      </span>\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"selectColor(customColor)\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"handleClick\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components'\nimport { ref } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  selectedColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit', color: string): void\n}>()\n\nconst newColor = ref('')\n\nconst handleColorSelect = (color: string) => {\n  newColor.value = color\n}\n\nconst handleSubmit = () => {\n  emit('submit', newColor.value)\n  newColor.value = ''\n}\n</script>\n<template>\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"state\"\n    title=\"Edit Environment Color\">\n    <div class=\"flex flex-col gap-4\">\n      <EnvironmentColors\n        :activeColor=\"newColor || props.selectedColor\"\n        class=\"w-full p-1\"\n        @select=\"handleColorSelect\" />\n      <SidebarListElementForm\n        @cancel=\"emit('cancel')\"\n        @submit=\"handleSubmit\">\n      </SidebarListElementForm>\n    </div>\n  </ScalarModal>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components'\nimport { ref } from 'vue'\n\nimport SidebarListElementForm from '@/components/Sidebar/Actions/SidebarListElementForm.vue'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  selectedColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit', color: string): void\n}>()\n\nconst newColor = ref('')\n\nconst handleColorSelect = (color: string) => {\n  newColor.value = color\n}\n\nconst handleSubmit = () => {\n  emit('submit', newColor.value)\n  newColor.value = ''\n}\n</script>\n<template>\n  <ScalarModal\n    size=\"xxs\"\n    :state=\"state\"\n    title=\"Edit Environment Color\">\n    <div class=\"flex flex-col gap-4\">\n      <EnvironmentColors\n        :activeColor=\"newColor || props.selectedColor\"\n        class=\"w-full p-1\"\n        @select=\"handleColorSelect\" />\n      <SidebarListElementForm\n        @cancel=\"emit('cancel')\"\n        @submit=\"handleSubmit\">\n      </SidebarListElementForm>\n    </div>\n  </ScalarModal>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarListbox,\n  ScalarModal,\n  type ModalState,\n} from '@scalar/components'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useToasts } from '@scalar/use-toasts'\nimport { computed, ref, watch } from 'vue'\n\nimport CommandActionForm from '@/components/CommandPalette/CommandActionForm.vue'\nimport CommandActionInput from '@/components/CommandPalette/CommandActionInput.vue'\nimport { useWorkspace } from '@/store'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  activeWorkspaceCollections: Collection[]\n  collectionId: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (\n    event: 'submit',\n    environment: {\n      name: string\n      color: string\n      type: string\n      collectionId: Collection['uid'] | undefined\n    },\n  ): void\n}>()\n\nconst { events } = useWorkspace()\n\nconst environmentName = ref('')\nconst selectedColor = ref('#FFFFFF')\n\nconst collections = computed(() => [\n  ...props.activeWorkspaceCollections\n    .filter((collection) => collection.info?.title !== 'Drafts')\n    .map((collection) => ({\n      id: collection.uid,\n      label: collection.info?.title ?? 'Untitled Collection',\n    })),\n])\n\nconst selectedEnvironment = ref(\n  collections.value.find((collection) => collection.id === props.collectionId),\n)\n\nconst { toast } = useToasts()\n\nconst handleColorSelect = (color: string) => {\n  selectedColor.value = color\n}\n\n// Reset environment name and selected color\nwatch(\n  () => props.state.open,\n  (isOpen) => {\n    if (isOpen) {\n      environmentName.value = ''\n      selectedColor.value = '#FFFFFF'\n      if (props.collectionId) {\n        selectedEnvironment.value = collections.value.find(\n          (collection) => collection.id === props.collectionId,\n        )\n      } else {\n        selectedEnvironment.value = undefined\n      }\n    }\n  },\n)\n\nconst handleSubmit = () => {\n  if (!environmentName.value.trim()) {\n    toast('Please enter a name before adding an environment.', 'error')\n    return\n  }\n  if (!selectedEnvironment.value?.id) {\n    toast('Please select a collection before adding an environment.', 'error')\n    return\n  }\n  emit('submit', {\n    name: environmentName.value,\n    color: selectedColor.value,\n    type: selectedEnvironment.value?.id === 'global' ? 'global' : 'collection',\n    collectionId:\n      selectedEnvironment.value?.id !== 'global'\n        ? selectedEnvironment.value?.id\n        : undefined,\n  })\n}\n\nconst redirectToCreateCollection = () => {\n  props.state.hide()\n  events.commandPalette.emit({ commandName: 'Create Collection' })\n}\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!selectedEnvironment || !environmentName.trim()\"\n      @cancel=\"emit('cancel')\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          selector\n          @select=\"handleColorSelect\" />\n        <CommandActionInput\n          v-model=\"environmentName\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n      <template #options>\n        <ScalarListbox\n          v-model=\"selectedEnvironment\"\n          :options=\"collections\"\n          placeholder=\"Select Type\">\n          <ScalarButton\n            v-if=\"collections.length > 0\"\n            class=\"hover:bg-b-2 max-h-8 w-fit justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\">\n            <span :class=\"selectedEnvironment ? 'text-c-1' : 'text-c-3'\">{{\n              selectedEnvironment\n                ? selectedEnvironment.label\n                : 'Select Collection'\n            }}</span>\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"ChevronDown\"\n              size=\"xs\" />\n          </ScalarButton>\n          <ScalarButton\n            v-else\n            class=\"hover:bg-b-2 max-h-8 justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\"\n            @click=\"redirectToCreateCollection\">\n            <span class=\"text-c-1\">Create Collection</span>\n          </ScalarButton>\n        </ScalarListbox>\n      </template>\n      <template #submit> Add Environment </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarListbox,\n  ScalarModal,\n  type ModalState,\n} from '@scalar/components'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useToasts } from '@scalar/use-toasts'\nimport { computed, ref, watch } from 'vue'\n\nimport CommandActionForm from '@/components/CommandPalette/CommandActionForm.vue'\nimport CommandActionInput from '@/components/CommandPalette/CommandActionInput.vue'\nimport { useWorkspace } from '@/store'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst props = defineProps<{\n  state: ModalState\n  activeWorkspaceCollections: Collection[]\n  collectionId: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (\n    event: 'submit',\n    environment: {\n      name: string\n      color: string\n      type: string\n      collectionId: Collection['uid'] | undefined\n    },\n  ): void\n}>()\n\nconst { events } = useWorkspace()\n\nconst environmentName = ref('')\nconst selectedColor = ref('#FFFFFF')\n\nconst collections = computed(() => [\n  ...props.activeWorkspaceCollections\n    .filter((collection) => collection.info?.title !== 'Drafts')\n    .map((collection) => ({\n      id: collection.uid,\n      label: collection.info?.title ?? 'Untitled Collection',\n    })),\n])\n\nconst selectedEnvironment = ref(\n  collections.value.find((collection) => collection.id === props.collectionId),\n)\n\nconst { toast } = useToasts()\n\nconst handleColorSelect = (color: string) => {\n  selectedColor.value = color\n}\n\n// Reset environment name and selected color\nwatch(\n  () => props.state.open,\n  (isOpen) => {\n    if (isOpen) {\n      environmentName.value = ''\n      selectedColor.value = '#FFFFFF'\n      if (props.collectionId) {\n        selectedEnvironment.value = collections.value.find(\n          (collection) => collection.id === props.collectionId,\n        )\n      } else {\n        selectedEnvironment.value = undefined\n      }\n    }\n  },\n)\n\nconst handleSubmit = () => {\n  if (!environmentName.value.trim()) {\n    toast('Please enter a name before adding an environment.', 'error')\n    return\n  }\n  if (!selectedEnvironment.value?.id) {\n    toast('Please select a collection before adding an environment.', 'error')\n    return\n  }\n  emit('submit', {\n    name: environmentName.value,\n    color: selectedColor.value,\n    type: selectedEnvironment.value?.id === 'global' ? 'global' : 'collection',\n    collectionId:\n      selectedEnvironment.value?.id !== 'global'\n        ? selectedEnvironment.value?.id\n        : undefined,\n  })\n}\n\nconst redirectToCreateCollection = () => {\n  props.state.hide()\n  events.commandPalette.emit({ commandName: 'Create Collection' })\n}\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!selectedEnvironment || !environmentName.trim()\"\n      @cancel=\"emit('cancel')\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          selector\n          @select=\"handleColorSelect\" />\n        <CommandActionInput\n          v-model=\"environmentName\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n      <template #options>\n        <ScalarListbox\n          v-model=\"selectedEnvironment\"\n          :options=\"collections\"\n          placeholder=\"Select Type\">\n          <ScalarButton\n            v-if=\"collections.length > 0\"\n            class=\"hover:bg-b-2 max-h-8 w-fit justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\">\n            <span :class=\"selectedEnvironment ? 'text-c-1' : 'text-c-3'\">{{\n              selectedEnvironment\n                ? selectedEnvironment.label\n                : 'Select Collection'\n            }}</span>\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"ChevronDown\"\n              size=\"xs\" />\n          </ScalarButton>\n          <ScalarButton\n            v-else\n            class=\"hover:bg-b-2 max-h-8 justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\"\n            @click=\"redirectToCreateCollection\">\n            <span class=\"text-c-1\">Create Collection</span>\n          </ScalarButton>\n        </ScalarListbox>\n      </template>\n      <template #submit> Add Environment </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":"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"}

package/dist/{Form-bA4bV_oA.js → Form-KFcdRQp1.js}

@@ -1,6 +1,6 @@
-import { w as useActiveEntities } from "./store-DaPoVtIS.js";
+import { w as useActiveEntities } from "./store-DnlAQK5d.js";
 import { r as DataTable_default, t as DataTableRow_default } from "./DataTableRow-c3XveEUO.js";
-import { t as DataTableInput_default } from "./DataTableInput-SkIUPlrB.js";
+import { t as DataTableInput_default } from "./DataTableInput-RydMDjn2.js";
 import { t as ViewLayoutSection_default } from "./ViewLayoutSection-mUqKbQry.js";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
 import { ScalarIcon } from "@scalar/components";
@@ -80,4 +80,4 @@ var Form_default = /* @__PURE__ */ defineComponent({
 //#endregion
 export { Form_default as t };
 
-//# sourceMappingURL=Form-bA4bV_oA.js.map
+//# sourceMappingURL=Form-KFcdRQp1.js.map

package/dist/{Form-bA4bV_oA.js.map → Form-KFcdRQp1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Form-bA4bV_oA.js","names":["$slots"],"sources":["../src/components/Form/Form.vue","../src/components/Form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport type { Cookie } from '@scalar/oas-utils/entities/cookie'\nimport type { Path, PathValue } from '@scalar/object-utils/nested'\nimport { useId } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableInput from '@/components/DataTable/DataTableInput.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { useActiveEntities } from '@/store/active-entities'\n\ndefineProps<{\n  title?: string\n  options: {\n    key: string\n    label: string\n    placeholder: string\n  }[]\n  data: Record<string, any>\n  onUpdate: <P extends Path<Cookie>>(\n    key: P,\n    value: NonNullable<PathValue<Cookie, P>>,\n  ) => void\n}>()\n\nconst { activeEnvVariables, activeEnvironment, activeWorkspace } =\n  useActiveEntities()\nconst id = useId()\n</script>\n<template>\n  <ViewLayoutSection class=\"last:rounded-b-lg\">\n    <template\n      v-if=\"title || $slots.title\"\n      #title>\n      <span v-if=\"title\">{{ title }}</span>\n      <slot\n        v-else\n        name=\"title\" />\n    </template>\n    <div class=\"flex flex-1 flex-col gap-1.5\">\n      <DataTable\n        v-if=\"Object.keys(data).length > 0 && activeWorkspace\"\n        :columns=\"['']\"\n        class=\"rounded-b-lg\">\n        <DataTableRow\n          v-for=\"(option, index) in options\"\n          :key=\"index\"\n          :class=\"{ 'border-t': index === 0 }\">\n          <DataTableInput\n            class=\"pr-9\"\n            lineWrapping\n            :id=\"id\"\n            :envVariables=\"activeEnvVariables\"\n            :environment=\"activeEnvironment\"\n            :modelValue=\"data[option.key] ?? ''\"\n            :placeholder=\"option.placeholder\"\n            :workspace=\"activeWorkspace\"\n            @update:modelValue=\"onUpdate(option.key as Path<Cookie>, $event)\">\n            <template #default>\n              <label :for=\"id\">\n                {{ option.label }}\n              </label>\n            </template>\n            <template\n              v-if=\"option.key === 'description'\"\n              #icon>\n              <div\n                class=\"centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5\">\n                <ScalarIcon\n                  icon=\"Markdown\"\n                  size=\"lg\" />\n              </div>\n            </template>\n          </DataTableInput>\n        </DataTableRow>\n      </DataTable>\n    </div>\n  </ViewLayoutSection>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport type { Cookie } from '@scalar/oas-utils/entities/cookie'\nimport type { Path, PathValue } from '@scalar/object-utils/nested'\nimport { useId } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableInput from '@/components/DataTable/DataTableInput.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { useActiveEntities } from '@/store/active-entities'\n\ndefineProps<{\n  title?: string\n  options: {\n    key: string\n    label: string\n    placeholder: string\n  }[]\n  data: Record<string, any>\n  onUpdate: <P extends Path<Cookie>>(\n    key: P,\n    value: NonNullable<PathValue<Cookie, P>>,\n  ) => void\n}>()\n\nconst { activeEnvVariables, activeEnvironment, activeWorkspace } =\n  useActiveEntities()\nconst id = useId()\n</script>\n<template>\n  <ViewLayoutSection class=\"last:rounded-b-lg\">\n    <template\n      v-if=\"title || $slots.title\"\n      #title>\n      <span v-if=\"title\">{{ title }}</span>\n      <slot\n        v-else\n        name=\"title\" />\n    </template>\n    <div class=\"flex flex-1 flex-col gap-1.5\">\n      <DataTable\n        v-if=\"Object.keys(data).length > 0 && activeWorkspace\"\n        :columns=\"['']\"\n        class=\"rounded-b-lg\">\n        <DataTableRow\n          v-for=\"(option, index) in options\"\n          :key=\"index\"\n          :class=\"{ 'border-t': index === 0 }\">\n          <DataTableInput\n            class=\"pr-9\"\n            lineWrapping\n            :id=\"id\"\n            :envVariables=\"activeEnvVariables\"\n            :environment=\"activeEnvironment\"\n            :modelValue=\"data[option.key] ?? ''\"\n            :placeholder=\"option.placeholder\"\n            :workspace=\"activeWorkspace\"\n            @update:modelValue=\"onUpdate(option.key as Path<Cookie>, $event)\">\n            <template #default>\n              <label :for=\"id\">\n                {{ option.label }}\n              </label>\n            </template>\n            <template\n              v-if=\"option.key === 'description'\"\n              #icon>\n              <div\n                class=\"centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5\">\n                <ScalarIcon\n                  icon=\"Markdown\"\n                  size=\"lg\" />\n              </div>\n            </template>\n          </DataTableInput>\n        </DataTableRow>\n      </DataTable>\n    </div>\n  </ViewLayoutSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EC0BA,MAAM,EAAE,oBAAoB,mBAAmB,oBAC7C,mBAAkB;EACpB,MAAM,KAAK,OAAM;;uBAGf,YA+CoB,2BAAA,EA/CD,OAAM,qBAAmB,EAAA,YAAA;2BA8CpC,CArCN,mBAqCM,OArCN,YAqCM,CAnCI,OAAO,KAAK,QAAA,KAAI,CAAE,SAAM,KAAQ,MAAA,gBAAe,IAAA,WAAA,EADvD,YAmCY,mBAAA;;KAjCT,SAAS,CAAA,GAAI;KACd,OAAM;;4BAE8B,EAAA,UAAA,KAAA,EADpC,mBA8Be,UAAA,MAAA,WA7Ba,QAAA,UAAlB,QAAQ,UAAK;0BADvB,YA8Be,sBAAA;OA5BZ,KAAK;OACL,OAAK,eAAA,EAAA,YAAgB,UAAK,GAAA,CAAA;;8BA0BV,CAzBjB,YAyBiB,wBAAA;QAxBf,OAAM;QACN,cAAA;QACC,IAAI,MAAA,GAAE;QACN,cAAc,MAAA,mBAAkB;QAChC,aAAa,MAAA,kBAAiB;QAC9B,YAAY,QAAA,KAAK,OAAO,QAAG;QAC3B,aAAa,OAAO;QACpB,WAAW,MAAA,gBAAe;QAC1B,wBAAiB,WAAE,QAAA,SAAS,OAAO,KAAqB,OAAM;;QACpD,SAAO,cAGR,CAFR,mBAEQ,SAAA,EAFA,KAAK,MAAA,GAAE,EAAA,EAAA,gBACV,OAAO,MAAK,EAAA,GAAA,WAAA,CAAA,CAAA;;WAIX,OAAO,QAAG,gBAAA;cACf;0BAMK,CALN,mBAKM,OALN,YAKM,CAHJ,YAEc,MAAA,WAAA,EAAA;SADZ,MAAK;SACL,MAAK;;;;;;;;;;;;;;;;;;OAtCX,QAAA,SAASA,KAAAA,OAAO,QAAA;UACrB;sBACoC,CAAzB,QAAA,SAAA,WAAA,EAAZ,mBAAqC,QAAA,YAAA,gBAAf,QAAA,MAAK,EAAA,EAAA,IAC3B,WAEiB,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"Form-KFcdRQp1.js","names":["$slots"],"sources":["../src/components/Form/Form.vue","../src/components/Form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport type { Cookie } from '@scalar/oas-utils/entities/cookie'\nimport type { Path, PathValue } from '@scalar/object-utils/nested'\nimport { useId } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableInput from '@/components/DataTable/DataTableInput.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { useActiveEntities } from '@/store/active-entities'\n\ndefineProps<{\n  title?: string\n  options: {\n    key: string\n    label: string\n    placeholder: string\n  }[]\n  data: Record<string, any>\n  onUpdate: <P extends Path<Cookie>>(\n    key: P,\n    value: NonNullable<PathValue<Cookie, P>>,\n  ) => void\n}>()\n\nconst { activeEnvVariables, activeEnvironment, activeWorkspace } =\n  useActiveEntities()\nconst id = useId()\n</script>\n<template>\n  <ViewLayoutSection class=\"last:rounded-b-lg\">\n    <template\n      v-if=\"title || $slots.title\"\n      #title>\n      <span v-if=\"title\">{{ title }}</span>\n      <slot\n        v-else\n        name=\"title\" />\n    </template>\n    <div class=\"flex flex-1 flex-col gap-1.5\">\n      <DataTable\n        v-if=\"Object.keys(data).length > 0 && activeWorkspace\"\n        :columns=\"['']\"\n        class=\"rounded-b-lg\">\n        <DataTableRow\n          v-for=\"(option, index) in options\"\n          :key=\"index\"\n          :class=\"{ 'border-t': index === 0 }\">\n          <DataTableInput\n            class=\"pr-9\"\n            lineWrapping\n            :id=\"id\"\n            :envVariables=\"activeEnvVariables\"\n            :environment=\"activeEnvironment\"\n            :modelValue=\"data[option.key] ?? ''\"\n            :placeholder=\"option.placeholder\"\n            :workspace=\"activeWorkspace\"\n            @update:modelValue=\"onUpdate(option.key as Path<Cookie>, $event)\">\n            <template #default>\n              <label :for=\"id\">\n                {{ option.label }}\n              </label>\n            </template>\n            <template\n              v-if=\"option.key === 'description'\"\n              #icon>\n              <div\n                class=\"centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5\">\n                <ScalarIcon\n                  icon=\"Markdown\"\n                  size=\"lg\" />\n              </div>\n            </template>\n          </DataTableInput>\n        </DataTableRow>\n      </DataTable>\n    </div>\n  </ViewLayoutSection>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport type { Cookie } from '@scalar/oas-utils/entities/cookie'\nimport type { Path, PathValue } from '@scalar/object-utils/nested'\nimport { useId } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableInput from '@/components/DataTable/DataTableInput.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { useActiveEntities } from '@/store/active-entities'\n\ndefineProps<{\n  title?: string\n  options: {\n    key: string\n    label: string\n    placeholder: string\n  }[]\n  data: Record<string, any>\n  onUpdate: <P extends Path<Cookie>>(\n    key: P,\n    value: NonNullable<PathValue<Cookie, P>>,\n  ) => void\n}>()\n\nconst { activeEnvVariables, activeEnvironment, activeWorkspace } =\n  useActiveEntities()\nconst id = useId()\n</script>\n<template>\n  <ViewLayoutSection class=\"last:rounded-b-lg\">\n    <template\n      v-if=\"title || $slots.title\"\n      #title>\n      <span v-if=\"title\">{{ title }}</span>\n      <slot\n        v-else\n        name=\"title\" />\n    </template>\n    <div class=\"flex flex-1 flex-col gap-1.5\">\n      <DataTable\n        v-if=\"Object.keys(data).length > 0 && activeWorkspace\"\n        :columns=\"['']\"\n        class=\"rounded-b-lg\">\n        <DataTableRow\n          v-for=\"(option, index) in options\"\n          :key=\"index\"\n          :class=\"{ 'border-t': index === 0 }\">\n          <DataTableInput\n            class=\"pr-9\"\n            lineWrapping\n            :id=\"id\"\n            :envVariables=\"activeEnvVariables\"\n            :environment=\"activeEnvironment\"\n            :modelValue=\"data[option.key] ?? ''\"\n            :placeholder=\"option.placeholder\"\n            :workspace=\"activeWorkspace\"\n            @update:modelValue=\"onUpdate(option.key as Path<Cookie>, $event)\">\n            <template #default>\n              <label :for=\"id\">\n                {{ option.label }}\n              </label>\n            </template>\n            <template\n              v-if=\"option.key === 'description'\"\n              #icon>\n              <div\n                class=\"centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5\">\n                <ScalarIcon\n                  icon=\"Markdown\"\n                  size=\"lg\" />\n              </div>\n            </template>\n          </DataTableInput>\n        </DataTableRow>\n      </DataTable>\n    </div>\n  </ViewLayoutSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EC0BA,MAAM,EAAE,oBAAoB,mBAAmB,oBAC7C,mBAAkB;EACpB,MAAM,KAAK,OAAM;;uBAGf,YA+CoB,2BAAA,EA/CD,OAAM,qBAAmB,EAAA,YAAA;2BA8CpC,CArCN,mBAqCM,OArCN,YAqCM,CAnCI,OAAO,KAAK,QAAA,KAAI,CAAE,SAAM,KAAQ,MAAA,gBAAe,IAAA,WAAA,EADvD,YAmCY,mBAAA;;KAjCT,SAAS,CAAA,GAAI;KACd,OAAM;;4BAE8B,EAAA,UAAA,KAAA,EADpC,mBA8Be,UAAA,MAAA,WA7Ba,QAAA,UAAlB,QAAQ,UAAK;0BADvB,YA8Be,sBAAA;OA5BZ,KAAK;OACL,OAAK,eAAA,EAAA,YAAgB,UAAK,GAAA,CAAA;;8BA0BV,CAzBjB,YAyBiB,wBAAA;QAxBf,OAAM;QACN,cAAA;QACC,IAAI,MAAA,GAAE;QACN,cAAc,MAAA,mBAAkB;QAChC,aAAa,MAAA,kBAAiB;QAC9B,YAAY,QAAA,KAAK,OAAO,QAAG;QAC3B,aAAa,OAAO;QACpB,WAAW,MAAA,gBAAe;QAC1B,wBAAiB,WAAE,QAAA,SAAS,OAAO,KAAqB,OAAM;;QACpD,SAAO,cAGR,CAFR,mBAEQ,SAAA,EAFA,KAAK,MAAA,GAAE,EAAA,EAAA,gBACV,OAAO,MAAK,EAAA,GAAA,WAAA,CAAA,CAAA;;WAIX,OAAO,QAAG,gBAAA;cACf;0BAMK,CALN,mBAKM,OALN,YAKM,CAHJ,YAEc,MAAA,WAAA,EAAA;SADZ,MAAK;SACL,MAAK;;;;;;;;;;;;;;;;;;OAtCX,QAAA,SAASA,KAAAA,OAAO,QAAA;UACrB;sBACoC,CAAzB,QAAA,SAAA,WAAA,EAAZ,mBAAqC,QAAA,YAAA,gBAAf,QAAA,MAAK,EAAA,EAAA,IAC3B,WAEiB,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/{ImportCollection-BIYMxB9Q.js → ImportCollection-CGjySEzP.js}

@@ -1,4 +1,4 @@
-import { m as isUrl$1, r as useWorkspace, w as useActiveEntities } from "./store-DaPoVtIS.js";
+import { m as isUrl$1, r as useWorkspace, w as useActiveEntities } from "./store-DnlAQK5d.js";
 import { t as WatchModeToggle_default } from "./WatchModeToggle-D_eAiTWJ.js";
 import { t as IntegrationLogo_default } from "./IntegrationLogo-B9EDW8db.js";
 import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onBeforeUnmount, onMounted, onUnmounted, openBlock, reactive, ref, renderList, renderSlot, toDisplayString, unref, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
@@ -801,4 +801,4 @@ var ImportCollectionListener_default = /* @__PURE__ */ defineComponent({
 //#endregion
 export { ImportCollectionListener_default as t };
 
-//# sourceMappingURL=ImportCollection-BIYMxB9Q.js.map
+//# sourceMappingURL=ImportCollection-CGjySEzP.js.map