Merge pull request #1145 from ThornWalli/feature/updates

update
ThornWalli · Dec 29, 2024 · 0d68e10 · 0d68e10
2 parents 92c8220 + 5d43c86
commit 0d68e10
Show file tree

Hide file tree

Showing 29 changed files with 672 additions and 548 deletions.
diff --git a/.certs/README.md b/.certs/README.md
diff --git a/packages/core/classes/Theme.js b/packages/core/classes/Theme.js
@@ -174,7 +174,7 @@ function getDefaultColors(colors) {
       thumbBackground: colors[0]
     },
 
-    textbox: {
+    textfield: {
       text: colors[0],
       background: colors[3],
       border: colors[3],

diff --git a/packages/core/classes/modules/Files/commands/index.js b/packages/core/classes/modules/Files/commands/index.js
@@ -41,14 +41,14 @@ async function saveFile(core, path, data) {
   return core.executeCommand(command.join(' '));
 }
 
-// async function readFile(core, path) {
-//   const fsItem = await core.modules.files.fs.get(path);
-//   const value = await core.executeCommand(`readfile "${path}"`);
-//   return {
-//     fsItem,
-//     value
-//   };
-// }
+async function readFile(core, path) {
+  const fsItem = await core.modules.files.fs.get(path);
+  const value = await core.executeCommand(`readfile "${path}"`);
+  return {
+    fsItem,
+    value
+  };
+}
 
 export default ({ module, core }) => {
   const windowsModule = core.modules.windows;
@@ -164,8 +164,9 @@ export default ({ module, core }) => {
             scrollY: false
           }
         });
-        // eslint-disable-next-line no-unused-vars
-        let { value } = await window.awaitClose();
+
+        let { value: path } = await window.awaitClose();
+        return readFile(core, path);
       }
     },
 

diff --git a/packages/core/components/SymbolWrapper.vue b/packages/core/components/SymbolWrapper.vue
@@ -139,7 +139,6 @@ export default {
       if (this.parentScrollable) {
         vars.push(this.size.toCSSVars('symbol-wrapper-size'));
       } else {
-        // debugger;
         vars.push(this.layout.size.toCSSVars('symbol-wrapper-size'));
       }
       return vars;

diff --git a/packages/core/components/Window.vue b/packages/core/components/Window.vue
@@ -42,7 +42,6 @@
               :options="componentOptions"
               :parent-layout="contentLayout"
               :set-trigger-refresh="triggerRefresh"
-              :window-options="options"
               @refresh="onRefreshComponent"
               @close="onCloseComponent"
               @freeze="onFreeze"

diff --git a/packages/core/components/atoms/SymbolWrapper/Item.vue b/packages/core/components/atoms/SymbolWrapper/Item.vue
@@ -223,7 +223,6 @@ export default {
         if (this.symbolsModule.getSelectedItems().length > 0) {
           this.symbolsModule.clearSelectedItems();
         }
-        // debugger;
         this.wrapper.selectItem(id);
       }
 

diff --git a/packages/core/components/atoms/formField/ItemSelect.vue b/packages/core/components/atoms/formField/ItemSelect.vue
@@ -4,62 +4,70 @@
       {{ title }}
     </div>
     <ul>
-      <li v-for="(item, index) in items" :key="index">
-        <wb-env-atom-form-field-field-item-select-item
-          v-bind="item"
-          :name="item.name || name"
-          :model="model"
+      <li v-for="({ label, value, ...item }, index) in items" :key="index">
+        <wb-core-form-field-item-select-item
+          :label="label"
+          :value="value"
+          :name="name || item.name"
+          :model-value="modelValue"
+          :can-unselect="canUnselect"
           :multiple="multiple"
           :readonly="item.readonly || readonly"
-          :disabled="item.disabled || disabled" />
+          :disabled="item.disabled || disabled"
+          @update:model-value="onUpdateModelValue" />
       </li>
     </ul>
   </div>
 </template>
 
-<script>
-import WbEnvAtomFormFieldFieldItemSelectItem from './itemSelect/Item';
+<script setup>
+import WbCoreFormFieldItemSelectItem from './itemSelect/Item';
 
-export default {
-  components: { WbEnvAtomFormFieldFieldItemSelectItem },
-  props: {
-    title: {
-      type: String,
-      default: 'Item Select Title'
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    name: {
-      type: String,
-      default: 'value'
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    model: {
-      type: Object,
-      default() {
-        return { value: {} };
-      }
-    },
-    items: {
-      type: Array,
-      required: false,
-      default() {
-        return [
-          { label: 'Item 1', value: 'item-1' },
-          { label: 'Item 2', value: 'item-2' }
-        ];
-      }
+defineProps({
+  name: {
+    type: String,
+    default: null
+  },
+  title: {
+    type: String,
+    default: 'Item Select Title'
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  modelValue: {
+    type: [Object, Array, String, Number],
+    default: null
+  },
+  canUnselect: {
+    type: Boolean,
+    default: false
+  },
+  items: {
+    type: Array,
+    required: false,
+    default() {
+      return [
+        { label: 'Item 1', value: 'item-1' },
+        { label: 'Item 2', value: 'item-2' }
+      ];
     }
   }
+});
+
+const $emit = defineEmits(['update:model-value']);
+
+const onUpdateModelValue = value => {
+  $emit('update:model-value', value);
 };
 </script>
 

diff --git a/...re/components/atoms/formField/Textbox.vue → .../components/atoms/formField/Textfield.vue b/...re/components/atoms/formField/Textbox.vue → .../components/atoms/formField/Textfield.vue
@@ -1,7 +1,7 @@
 <template>
   <wb-env-atom-form-field
     tag="div"
-    class="wb-env-atom-form-textbox"
+    class="wb-env-atom-form-textfield"
     v-bind="$attrs"
     :class="styleClasses">
     <template #default>
@@ -122,21 +122,21 @@ const onInput = e => {
 </script>
 
 <style lang="postcss" scoped>
-.wb-env-atom-form-textbox {
-  --color-text: var(--color-textbox-text, #fff);
-  --color-background: var(--color-textbox-background, #05a);
-  --color-border: var(--color-textbox-border, #05a);
-  --color-outline: var(--color-textbox-outline, #fff);
-  --color-dialog-text: var(--color-textbox-dialog-text, #05a);
-  --color-dialog-background: var(--color-textbox-dialog-background, #fff);
-  --color-dialog-border: var(--color-textbox-dialog-border, #fff);
-  --color-dialog-outline: var(--color-textbox-dialog-outline, #05a);
+.wb-env-atom-form-textfield {
+  --color-text: var(--color-textfield-text, #fff);
+  --color-background: var(--color-textfield-background, #05a);
+  --color-border: var(--color-textfield-border, #05a);
+  --color-outline: var(--color-textfield-outline, #fff);
+  --color-dialog-text: var(--color-textfield-dialog-text, #05a);
+  --color-dialog-background: var(--color-textfield-dialog-background, #fff);
+  --color-dialog-border: var(--color-textfield-dialog-border, #fff);
+  --color-dialog-outline: var(--color-textfield-dialog-outline, #05a);
   --color-disabled-readonly-text: var(
-    --color-textbox-disabled-readonly-text,
+    --color-textfield-disabled-readonly-text,
     #05a
   );
   --color-disabled-readonly-background: var(
-    --color-textbox-disabled-readonly-background,
+    --color-textfield-disabled-readonly-background,
     #fff
   );
 

diff --git a/packages/core/components/atoms/formField/itemSelect/Item.vue b/packages/core/components/atoms/formField/itemSelect/Item.vue
@@ -1,68 +1,115 @@
 <template>
-  <label class="wb-env-atom-form-field-item-select-item">
-    <input v-model="currentModel" v-bind="input" :value="value" />
+  <label class="wb-env-atom-form-field-item-select-item" @click="onClick">
+    <input v-bind="inputData" @input="onUpdateModelValue()" />
     <span class="label" v-html="label || '&nbsp;'" />
   </label>
 </template>
 
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: 'Item Label'
-    },
-    model: {
-      type: Object,
-      default() {
-        return {
-          value: null
-        };
-      }
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    value: {
-      type: [String, Number],
-      default: null
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
+<script setup>
+import { computed } from 'vue';
+
+const onClick = e => {
+  if (isChecked.value) {
+    onUpdateModelValue(true);
+    e.preventDefault();
+  }
+};
+
+const $props = defineProps({
+  modelValue: {
+    type: [Object, Array, String, Number],
+    default: null
+  },
+  label: {
+    type: String,
+    default: 'Item Label'
+  },
+  name: {
+    type: String,
+    default: null
+  },
+  value: {
+    type: [String, Number],
+    default: null
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
   },
-  computed: {
-    currentModel: {
-      get() {
-        return this.name ? this.model[this.name] : this.model.value;
-      },
-      set(value) {
-        if (this.name) {
-          this.model[this.name] = value;
-        } else {
-          this.model.value = value;
-        }
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  canUnselect: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const $emit = defineEmits(['update:model-value']);
+
+const isChecked = computed(() => {
+  if ($props.multiple) {
+    if (Array.isArray($props.modelValue)) {
+      return ($props.modelValue || []).includes($props.value);
+    } else if ($props.value) {
+      return $props.modelValue[$props.name] === $props.value;
+    } else {
+      return $props.modelValue[$props.name];
+    }
+  }
+  return $props.modelValue === $props.value;
+});
+
+const inputData = computed(() => {
+  return {
+    checked: isChecked.value,
+    value: $props.value,
+    name: $props.name,
+    readonly: $props.readonly,
+    disabled: $props.disabled,
+    type: $props.multiple ? 'checkbox' : 'radio'
+  };
+});
+
+const onUpdateModelValue = checked => {
+  if (checked === undefined) {
+    checked = isChecked.value;
+  }
+  let value;
+  if ($props.multiple) {
+    if (Array.isArray($props.modelValue)) {
+      if (checked) {
+        value = $props.modelValue.filter(v => v !== $props.value);
+      } else {
+        value = [...$props.modelValue, $props.value];
+      }
+    } else if (checked) {
+      if ($props.value) {
+        value = {
+          ...$props.modelValue,
+          [$props.name]: null
+        };
+      } else {
+        value = {
+          ...$props.modelValue,
+          [$props.name]: false
+        };
       }
-    },
-    input() {
-      return {
-        name: this.name,
-        readonly: this.readonly,
-        disabled: this.disabled,
-        type: this.multiple ? 'checkbox' : 'radio'
+    } else {
+      value = {
+        ...$props.modelValue,
+        [$props.name]: $props.value ? $props.value : true
       };
     }
+  } else {
+    value = checked.value ? null : $props.value;
   }
+  $emit('update:model-value', value);
 };
 </script>