vue-girder-slicer-cli-ui 0.0.8

package/src/components/Parameters/BaseParameter.tw.vue

@@ -0,0 +1,76 @@
+<script lang="ts">
+import { PropType, Ref, computed, defineComponent, onMounted, ref } from 'vue'
+import type { XMLBaseValue } from '../../parser/parserTypes';
+import { XMLParameters } from '../../parser/parserTypes';
+export default defineComponent({
+  props: {
+    data: {
+      type: Object as PropType<XMLParameters>,
+        required: true,
+    }
+  },
+  setup(props, { emit }) {
+    const error = computed(() => props.data.error)
+    const numberVectors = ref(['integer-vector', 'float-vector', 'double-vector', 'string-vector']);
+    const numbers = ref(['integer', 'float', 'double']);
+    const currentValue: Ref<XMLBaseValue> = ref(0);
+    onMounted(() => {
+        if (props.data.defaultValue && Array.isArray(props.data.defaultValue)) {
+            currentValue.value = props.data.defaultValue.join(',') || props.data.value || '';
+        } else {
+            currentValue.value = props.data.defaultValue || props.data.value || '';
+        }
+    })
+    const validate = (e: Event) => {
+        // Validation Logic for different types
+        const update = { ...props.data };
+        let value = (e.target as HTMLInputElement).value as XMLBaseValue;
+        if (numberVectors.value.includes(props.data.slicerType)) {
+            value = (value as string).split(',').map(parseFloat);
+        } else if (props.data.slicerType === 'string-vector') {
+            value = (value as string).split(',');
+        }
+        update.value = value;
+        currentValue.value = value;
+        emit('change', update);
+    }
+    return {
+      error,
+      numberVectors,
+      numbers,
+      currentValue,
+      validate
+    }
+  }
+})
+</script>
+<template>
+  <div>
+    <label for="parameterInput">{{ data.title }} <span
+      v-if="error"
+      class="text-red"
+    > {{ error }}</span></label>
+    <input
+      v-if="numbers.includes(data.slicerType) || data.slicerType === 'string'"
+      id="parameterInput"
+      class="gsu-input block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal"
+      :type="numbers.includes(data.slicerType) ? 'number' : 'text'"
+      :value="currentValue"
+      @change="validate($event)"
+    >
+    <input
+      v-else-if="(numberVectors.includes(data.slicerType) || data.slicerType === 'string-vector')"
+      id="parameterInput"
+      class="gsu-input block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal"
+      type="text"
+      :value="currentValue"
+      @change="validate($event)"
+    >
+    <small
+      v-if="data.description"
+      class="block mt-1 text-grey"
+    >{{ data.description }}</small>
+  </div>
+</template>
+<style scoped>
+</style>

package/src/components/Parameters/BooleanParameter.tw.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+import { PropType, Ref, computed, defineComponent, onMounted, ref } from 'vue'
+import { XMLParameters } from '../../parser/parserTypes';
+export default defineComponent({
+  props: {
+    data: {
+      type: Object as PropType<XMLParameters>,
+        required: true,
+    }
+  },
+  setup(props, { emit }) {
+    const error = computed(() => props.data.error)
+    const currentValue: Ref<boolean> = ref(false);
+    onMounted(() => {
+        currentValue.value = !!props.data.value || !!props.data.defaultValue || false;
+    })
+    const validate = (e: Event) => {
+        // Validation Logic for different types
+        const update = { ...props.data }
+        let value = (e.target as HTMLInputElement).checked as boolean;
+        update.value = value;
+        currentValue.value = value;
+        emit('change', update);
+    }
+    return {
+      error,
+      currentValue,
+      validate
+    }
+  },
+});
+</script>
+<template>
+  <div>
+    <div class="grid grid-cols-2 gap-4 pl-4">
+      <label for="parameterInput">{{ data.title }} <span
+        v-if="error"
+        class="text-red"
+      > {{ error }}</span></label>
+      <input
+        class="absolute mt-1 -ml-6"
+        type="checkbox"
+        :checked="currentValue"
+        @change="validate($event)"
+      >
+    </div>
+    <p
+        v-if="data.description"
+        class="block ml-4 text-grey text-xs"
+      >{{ data.description }}</p>
+  </div>
+</template>
+<style scoped>
+</style>

package/src/components/Parameters/ColorParameter.tw.vue

@@ -0,0 +1,58 @@
+<script  lang="ts">
+import { PropType, Ref, computed, defineComponent, onMounted, ref } from 'vue'
+import { XMLParameters } from '../../parser/parserTypes';
+import type { XMLBaseValue } from '../../parser/parserTypes';
+export default defineComponent({
+  props: {
+    data: {
+      type: Object as PropType<XMLParameters>,
+        required: true,
+    }
+  },
+  setup(props, { emit }) {
+    const currentValue: Ref<XMLBaseValue> = ref(0);
+    onMounted(() => {
+        if (props.data.defaultValue && Array.isArray(props.data.defaultValue)) {
+            currentValue.value = props.data.defaultValue.join(',') || props.data.value || '';
+        } else {
+            currentValue.value = props.data.defaultValue || props.data.value || '';
+        }
+    })
+    const error = computed(() => props.data.error)
+    const validate = (e: Event) => {
+        // Validation Logic for different types
+        const update = { ...props.data };
+        let value = (e.target as HTMLInputElement).value as XMLBaseValue;
+        update.value = value;
+        currentValue.value = value;
+        emit('change', update);
+    }
+    return {
+      currentValue,
+      error,
+      validate
+    }
+  }
+});
+</script>
+<template>
+  <div class="mb-4">
+    <label for="parameterInput">{{ data.title }} <span
+      v-if="error"
+      class="text-red"
+    > {{ error }}</span></label>
+    <input
+      id="parameterInput"
+      class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-black dark:bg-gray-600 dark:text-gray-300 text-grey-darker border border-grey rounded"
+      type="color"
+      :value="currentValue"
+      @change="validate($event)"
+    >
+    <small
+      v-if="data.description"
+      class="block mt-1 text-grey"
+    >{{ data.description }}</small>
+  </div>
+</template>
+<style scoped>
+</style>

package/src/components/Parameters/EnumerationParameters.tw.vue

@@ -0,0 +1,66 @@
+<script lang="ts">
+import { PropType, Ref, computed, defineComponent, onMounted, ref } from 'vue'
+import type { XMLBaseValue } from '../../parser/parserTypes';
+import { XMLParameters } from '../../parser/parserTypes';
+export default defineComponent({
+  props: {
+    data: {
+      type: Object as PropType<XMLParameters>,
+        required: true,
+    }
+  },
+  setup(props, { emit }) {
+    const error = computed(() => props.data.error)
+    const currentValue: Ref<XMLBaseValue> = ref(0);
+    onMounted(() => {
+        if (props.data.defaultValue && Array.isArray(props.data.defaultValue)) {
+            currentValue.value = props.data.defaultValue.join(',') || props.data.value || '';
+        } else {
+            currentValue.value = props.data.defaultValue || props.data.value || '';
+        }
+    })
+    const validate = (e: Event) => {
+        // Validation Logic for different types
+        const update = { ...props.data };
+        let value = (e.target as HTMLSelectElement).value as XMLBaseValue;
+        if (props.data.slicerType === 'number-enumeration') {
+            value = parseFloat(value as string);
+        }
+        update.value = value;
+        currentValue.value = value;
+        emit('change', update);
+    }
+    return {
+      error,
+      currentValue,
+      validate,
+    }
+  }
+});
+</script>
+<template>
+  <div>
+    <label for="parameterInput">{{ data.title }} <span
+      v-if="error"
+      class="text-red"
+    > {{ error }}</span></label>
+    <select
+      :value="data.value"
+      @change="validate($event)"
+    >
+      <option
+        v-for="item in data.values"
+        :key="`${data.title}_${item}`"
+        :value="item"
+      >
+        {{ item }}
+      </option>
+    </select>
+    <small
+      v-if="data.description"
+      class="block mt-1 text-grey"
+    >{{ data.description }}</small>
+  </div>
+</template>
+<style scoped>
+</style>

package/src/components/Parameters/FileParameter.tw.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+import { PropType, Ref, computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { XMLParameters } from '../../parser/parserTypes';
+import { mdiFolderOpen, mdiPlusThick } from '@mdi/js';
+import SvgIcon from '@jamescoyle/vue-icon';
+import DataBrowser from '../FileBrowser/DataBrowser.tw.vue';
+export default defineComponent({
+  components: {
+    SvgIcon,
+    DataBrowser,
+  },
+  props: {
+    data: {
+      type: Object as PropType<XMLParameters>,
+        required: true,
+    }
+  },
+  setup(props, { emit }) {
+    const currentValue: Ref<string |  null> = ref(null);
+    const placeHolder = ref('Choose a file...');
+    const batchload = ref(false);
+    const error = computed(() => props.data.error)
+    onMounted(() => {
+      if (props.data.slicerType === 'file') {
+        placeHolder.value = !props.data.multiple ?  'Choose a file...' : 'Choose multiple files...'
+      }
+      if (props.data.slicerType === 'multi') {
+        placeHolder.value = 'Choose multiple files...'
+      }
+      if (props.data.slicerType === 'image') {
+        placeHolder.value = !props.data.multiple ?  'Choose an image...' : 'Choose multiple images...'
+      }
+      if (props.data.slicerType === 'directory') {
+        placeHolder.value = !props.data.multiple ?  'Choose a folder...' : 'Choose multiple folders...'
+      }
+      if (['file', 'item', 'image', 'multi'].includes(props.data.slicerType) && ! props.data.multiple) {
+        batchload.value = true;
+      }
+      if (props.data.fileValue?.name) {
+        currentValue.value = props.data.fileValue.name;
+        girderId.value = props.data.fileValue.girderId;
+        parentId.value = props.data.fileValue.parentId;
+        selectedName.value = props.data.fileValue.name;
+      }
+    });
+    const showBrowser = ref(false);
+    const inputChanged = (name: string) => {
+      emit('input-selected', name);
+    }
+    const girderId: Ref<string | undefined> = ref(undefined);
+    const parentId: Ref<string | undefined> = ref(undefined);
+    const selectedName: Ref<string | undefined> = ref(undefined);
+    watch(() => props.data.fileValue, () => {
+      if (props.data.fileValue?.name) {
+        currentValue.value = props.data.fileValue.name;
+        girderId.value = props.data.fileValue.girderId;
+        parentId.value = props.data.fileValue.parentId;
+        selectedName.value = props.data.fileValue.name;
+      }
+    });
+    const acceptBrowser = ({name, girderId, parentId, regExp, fileId}: {name: string, girderId: string, parentId: string, regExp?: boolean, fileId?: string}) => {
+      showBrowser.value = false;
+      const update = { ...props.data };
+      update.fileValue = { name, girderId, parentId, regExp, fileId };
+      currentValue.value = name;
+      if (props.data.channel === 'input') {
+        inputChanged(name);
+      }
+      emit('change', update);
+    }
+    return {
+      error,
+      currentValue,
+      placeHolder,
+      showBrowser,
+      mdiFolderOpen,
+      mdiPlusThick,
+      batchload,
+      girderId,
+      parentId,
+      selectedName,
+      acceptBrowser,
+    } 
+  }
+});
+</script>
+<template>
+  <div class="pr-4">
+    <label for="parameterInput">{{ data.title }} <span
+      v-if="error"
+      class="text-red"
+    > {{ error }}</span></label>
+    <div class="relative flex items-stretch w-full">
+      <input
+        id="parameterInput"
+        class="gsu-input block border-colid border-2 border-borderColor appearance-none w-full py-1 px-2 mb-1 text-base leading-normal"
+        type="text"
+        disabled
+        :value="currentValue"
+        :placeholder="placeHolder"
+      >
+      <span class="sm:flex">
+        <button
+          type="button"
+          class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap py-2 mb-1 px-4 rounded text-base leading-normal no-underline select-btn"
+          @click="showBrowser = true"
+        >
+          <svg-icon
+            type="mdi"
+            :path="mdiFolderOpen"
+            :size="15"
+            class="gsu-icon gsu-clickable"
+          />
+        </button>
+        <button
+          v-if="!batchload"
+          type="button"
+          class="flex align-middle items-center text-center select-none border font-normal whitespace-no-wrap py-2 mb-1 px-4 rounded text-base leading-normal no-underline select-btn-multi"
+          @click="showBrowser = true"
+        >
+          <svg-icon
+            type="mdi"
+            :path="mdiFolderOpen"
+            :size="15"
+            class="gsu-icon gsu-clickable "
+          />
+          <svg-icon
+            type="mdi"
+            :path="mdiPlusThick"
+            :size="15"
+            class="gsu-icon gsu-clickable"
+          />
+        </button>
+      </span>
+    </div>
+    <small
+      v-if="data.description"
+      class="block mt-1 text-grey"
+    >{{ data.description }}</small>
+    <data-browser
+      v-if="showBrowser"
+      :type="data.type"
+      :output="data.channel === 'output' || data.type === 'new-file'"
+      :girder-id="girderId"
+      :parent-id="parentId"
+      :name="selectedName"
+      @close="showBrowser=false"
+      @submit="acceptBrowser($event)"
+    />
+  </div>
+</template>
+<style scoped>
+.icon {
+  color: var(--bs-heading-color);
+}
+.select-btn {
+  border: 1px solid gray;
+  border-radius: 0px;
+}
+.select-btn:hover {
+  border: 1px solid gray;
+  background-color: lightgray;
+}
+.select-btn-multi {
+  border: 1px solid gray;
+  border-radius: 0px 4px 4px 0px;
+}
+.select-btn-multi:hover {
+  border: 1px solid gray;
+  background-color: lightgray;
+}
+</style>

package/src/components/Parameters/RangeParameter.tw.vue

@@ -0,0 +1,74 @@
+<script lang="ts">
+import { PropType, Ref, computed, defineComponent, onMounted, ref } from 'vue'
+import type { XMLBaseValue } from '../../parser/parserTypes';
+import { XMLParameters } from '../../parser/parserTypes';
+export default defineComponent({
+  props: {
+    data: {
+      type: Object as PropType<XMLParameters>,
+        required: true,
+    }
+  },
+  setup(props, { emit }) {
+const currentValue: Ref<XMLBaseValue> = ref(0);
+    onMounted(() => {
+        if (props.data.defaultValue && Array.isArray(props.data.defaultValue)) {
+            currentValue.value = props.data.defaultValue.join(',') || props.data.value || '';
+        } else {
+            currentValue.value = props.data.defaultValue || props.data.value || '';
+        }
+    })
+    const validate = (e: Event) => {
+        // Validation Logic for different types
+        const update = { ...props.data };
+        let value = (e.target as HTMLSelectElement).value as XMLBaseValue;
+        if (props.data.slicerType === 'number-enumeration') {
+            value = parseFloat(value as string);
+        }
+        update.value = value;
+        currentValue.value = value;
+        emit('change', update);
+    }
+    const error = computed(() => props.data.error);
+    return {
+      error,
+      currentValue,
+      validate
+    }
+  }
+});
+</script>
+<template>
+  <div class="mb-4">
+    <label for="parameterInput">{{ data.title }} <span
+      v-if="error"
+      class="text-red"
+    > {{ error }}</span></label>
+    <input 
+      v-if="data.constraints && typeof data.constraints.min === 'number' && typeof data.constraints.max === 'number'"
+      id="parameterInput"
+      class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-black dark:bg-gray-600 dark:text-gray-300text-grey-darker border border-grey rounded"
+      type="range"
+      :min="data.constraints.min || 0"
+      :max="data.constraints.max || 1"
+      :value="currentValue"
+      @change="validate($event)"
+    >
+    <input 
+      v-else
+      id="parameterInput"
+      class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-black dark:bg-gray-600 dark:text-gray-300 text-grey-darker border border-grey rounded"
+      type="range"
+      min="0"
+      max="1"
+      :value="currentValue"
+      @change="validate($event)"
+    >
+    <small
+      v-if="data.description"
+      class="block mt-1 text-grey"
+    >{{ data.description }}</small>
+  </div>
+</template>
+<style scoped>
+</style>