From 71e4ad2c71efea471923ea47f01bfda841387f81 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Sun, 10 Mar 2024 01:31:42 +0000
Subject: Use nuxt auto import magic

---
 components/base/Button.vue          |  82 +++++++++++++++++++
 components/base/Checkbox.vue        |  42 ++++++++++
 components/base/ItemStackForm.vue   |  50 ++++++++++++
 components/base/ItemStackModal.vue  | 159 ++++++++++++++++++++++++++++++++++++
 components/base/ItemStackPicker.vue | 100 +++++++++++++++++++++++
 components/base/Modal.vue           |  68 +++++++++++++++
 components/base/TrueFalseSwitch.vue |  54 ++++++++++++
 7 files changed, 555 insertions(+)
 create mode 100644 components/base/Button.vue
 create mode 100644 components/base/Checkbox.vue
 create mode 100644 components/base/ItemStackForm.vue
 create mode 100644 components/base/ItemStackModal.vue
 create mode 100644 components/base/ItemStackPicker.vue
 create mode 100644 components/base/Modal.vue
 create mode 100644 components/base/TrueFalseSwitch.vue

(limited to 'components/base')

diff --git a/components/base/Button.vue b/components/base/Button.vue
new file mode 100644
index 0000000..efd91c2
--- /dev/null
+++ b/components/base/Button.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+const props = defineProps({
+  type: {
+    type: String,
+    required: false,    
+    default: 'text',
+  },
+  label: String,
+  icon: Array<String>,
+  disabled: Boolean,
+});
+
+const emit = defineEmits(['click']);
+
+const onClick = (event: MouseEvent) => {
+  if (!props.disabled) {
+    emit('click', event);
+  }
+};
+</script>
+
+<template>
+  <a id="button" :class="{text: type === 'text', solid: type === 'solid', disabled: disabled}" @click.stop="onClick">
+    <font-awesome-icon :icon="icon" />
+    {{ label }}
+  </a>
+</template>
+
+<style scoped>
+#button {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  user-select: none;
+}
+    
+.text {
+  background-color: transparent;
+  color: var(--color-text-primary);
+  transition: color 0.3s;
+  font-weight: 700;
+  cursor: pointer;
+  
+  &.disabled {
+    color: var(--color-text-mute);
+    cursor: not-allowed;
+  }
+  
+  &:hover {
+    color: var(--color-primary-dark);
+  }
+  
+  &.disabled:hover {
+    color: var(--color-text-mute);
+  }
+}
+
+.solid {
+  background-color: var(--color-primary);
+  transition: background-color 0.3s;
+  color: var(--color-text);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-weight: 700;
+  cursor: pointer;
+  
+  &.disabled {
+    background-color: var(--color-border);
+    color: var(--color-text-mute);
+    cursor: not-allowed;
+  }
+  
+  &:hover {
+    background-color: var(--color-primary-dark);
+  }
+  
+  &.disabled:hover {
+    background-color: var(--color-border);
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/components/base/Checkbox.vue b/components/base/Checkbox.vue
new file mode 100644
index 0000000..e0325e7
--- /dev/null
+++ b/components/base/Checkbox.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const model = defineModel();
+
+defineProps({
+  id: String,
+  label: String,
+  description: String,
+});
+
+</script>
+
+<template>
+  <div class="checkbox">
+    <label id="wrapper" :for="id">
+      <input :id="id" type="checkbox" v-model="model" />
+      <span id="label">{{ label }}</span>
+      <span id="description">{{ description }}</span>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+#label {
+  display: block;
+  font-weight: bold;
+}
+
+#description {
+  display: block;
+  font-size: 0.8em;
+}
+
+input {
+  float: left;
+  margin: 5px 0 0 -20px;
+}
+
+.checkbox {
+  padding: 0 0 0 20px;
+}
+
+</style>
\ No newline at end of file
diff --git a/components/base/ItemStackForm.vue b/components/base/ItemStackForm.vue
new file mode 100644
index 0000000..250e8c9
--- /dev/null
+++ b/components/base/ItemStackForm.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import materials from '@/lib/materials';
+
+const model = defineModel<any>();
+
+if (typeof model.value !== 'object' || model.value === null) {
+  model.value = {};
+}
+
+const itemName = computed({
+  get() {
+    return model.value.name;
+  },
+  set(newValue: string) {
+    model.value.name = newValue;
+  },
+});
+
+const itemType = computed({
+  get() {
+    return model.value.type || model.value.material || model.value.item;
+  },
+  set(newValue: string) {
+    if (model.value.material) {
+      model.value.material = newValue;
+    } else if (model.value.item) {
+      model.value.item = newValue;
+    } else {
+      model.value.type = newValue;
+    }
+  },
+});
+</script>
+
+<template>
+  <div class="option-group">
+    <label for="itemstack-name">Name</label>
+    <input id="itemstack-name" name="itemstack-name" v-model="itemName" placeholder="Enter a display name" />
+  </div>
+
+  <div class="option-group">
+    <label for="itemstack-name">Type</label>
+    <multiselect v-model="itemType" 
+      :options="materials" :searchable="true" placeholder="Choose a material" />
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/components/base/ItemStackModal.vue b/components/base/ItemStackModal.vue
new file mode 100644
index 0000000..9a1e2b5
--- /dev/null
+++ b/components/base/ItemStackModal.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import materials from '@/lib/materials';
+
+const model = defineModel();
+
+const emit = defineEmits(['confirm']);
+
+const props = defineProps({
+  value: String,
+});
+
+//TODO unshitify
+const value = ref<any>(props.value);
+
+const isQuestItem = computed(() => {
+  return value.value?.['quest-item'] !== undefined;
+});
+const isItemStack = computed(() => {
+  return (
+    typeof value.value === 'object'
+    && (
+      value.value?.item !== undefined
+      || value.value?.type !== undefined
+      || value.value?.material !== undefined
+    ))
+});
+const isMaterial = computed(() => {
+  return typeof value.value === 'string' && materials.includes(value.value)
+});
+
+const selectedType = ref(
+  isQuestItem.value
+    ? 'questitem'
+    : isItemStack.value
+      ? 'itemstack'
+      : isMaterial.value
+        ? 'material'
+        : ''
+);
+
+const noTypeSelected = computed(() => selectedType.value === '');
+const noValue = computed(() => !isQuestItem.value && !isItemStack.value && !isMaterial.value);
+
+const setSelectedType = (type: string) => {
+  if (type === 'questitem') {
+    value.value = {};
+  } else if (type === 'itemstack') {
+    value.value = {};
+  } else if (type === 'material') {
+    value.value = '';
+  }
+  selectedType.value = type;
+};
+
+const confirm = () => {
+  emit('confirm', value.value);
+};
+</script>
+
+<template>
+  <Modal v-model="model">
+    <template v-slot:header>
+      <h2>Edit ItemStack</h2>
+    </template>
+
+    <template v-slot:body>
+      <div id="type">
+        <span class="option" @click="setSelectedType('questitem')" :class="{ selected: selectedType === 'questitem' }">
+          <span>
+            <font-awesome-icon :icon="['fas', 'fa-tag']" />
+            Quest Item
+          </span>
+          <p v-if="noTypeSelected">Re-use a quest item.</p>
+        </span>
+        <span class="option" @click="setSelectedType('itemstack')" :class="{ selected: selectedType === 'itemstack' }">
+          <span>
+            <font-awesome-icon :icon="['fas', 'fa-cube']" />
+            ItemStack
+          </span>
+          <p v-if="noTypeSelected">Define a new item stack.</p>
+        </span>
+        <span class="option" @click="setSelectedType('material')" :class="{ selected: selectedType === 'material' }">
+          <span>
+            <font-awesome-icon :icon="['fas', 'fa-apple-whole']" />
+            Material
+          </span>
+          <p v-if="noTypeSelected">Define a specific item type.</p>
+        </span>
+      </div>
+
+      <div id="material" class="option-group" v-if="selectedType === 'material'">
+        <label for="material">Material</label>
+        <multiselect v-model="value" :options="materials" :searchable="true" placeholder="Enter material name" />
+      </div>
+
+      <div id="itemstack" class="option-group" v-if="selectedType === 'itemstack'">
+        <ItemStackForm v-model="value" />
+      </div>
+
+
+      <div id="confirm" class="control-group">
+        <Button :icon="['fas', 'fa-times']" :label="'Cancel'" @click="model = false"></Button>
+        <Button type="solid" :icon="['fas', 'fa-check']" :label="'Confirm'" @click="confirm"></Button>
+        <!-- :disabled="noTypeSelected || noValue" -->
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<style scoped>
+#confirm {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+#type {
+  display: flex;
+  justify-content: space-around;
+  gap: 0.25rem;
+  user-select: none;
+  margin-bottom: 1rem;
+
+  .option {
+    border: 1px solid var(--color-border);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    flex-basis: 0;
+    flex-grow: 1;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background-color: var(--color-background-soft);
+    transition: background-color 0.3s;
+
+    span {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-weight: 700;
+    }
+
+    p {
+      text-align: center;
+      font-size: 0.8rem;
+    }
+
+    &:hover {
+      background-color: var(--color-hover);
+    }
+
+    &.selected {
+      background-color: var(--color-primary-mute);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/base/ItemStackPicker.vue b/components/base/ItemStackPicker.vue
new file mode 100644
index 0000000..d16090e
--- /dev/null
+++ b/components/base/ItemStackPicker.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import ItemStackModal from './ItemStackModal.vue';
+import materials from '@/lib/materials';
+
+const props = defineProps<{
+  value: any;
+}>();
+const emit = defineEmits(['update']);
+
+const value = ref(props.value);
+
+const showItemStackModal = ref(false);
+
+//TODO unshitify
+const empty = computed(() => {
+  return value.value === undefined 
+    || value.value === null 
+    || value.value === '' 
+    || (Array.isArray(value.value) && value.value.length === 0)
+    || (typeof value.value === 'object' && Object.keys(value.value).length === 0);
+});
+const isQuestItem = computed(() => {
+  return value.value?.['quest-item'] !== undefined;
+});
+const isItemStack = computed(() => {
+  if (typeof value.value !== 'object' || value.value === null) {
+    return false;
+  }
+
+  const key = 'item' in value.value 
+    ? 'item' 
+    : 'type' in value.value 
+      ? 'type' 
+      : 'material'
+  
+  return (!!value.value[key]);
+});
+const isMaterial = computed(() => {
+  return typeof value.value === 'string' && materials.includes(value.value)
+});
+
+const update = (newValue: any) => {
+  value.value = newValue;
+  showItemStackModal.value = false;
+  emit('update', value.value);
+};
+</script>
+
+<template>
+  <div class="itemstack" @click="showItemStackModal = true">
+    <span v-if="empty" class="empty">ItemStack...</span>
+    <span v-if="isQuestItem" class="item"><font-awesome-icon :icon="['fas', 'fa-tag']" /> Quest Item</span>
+    <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'fa-cube']" /> ItemStack of '{{ value.type || value.item || value.material }}'</span>
+    <span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'fa-apple-whole']" /> {{ value }}</span>
+    <span v-if="!empty && !isQuestItem && !isItemStack && !isMaterial" class="invalid"><font-awesome-icon :icon="['fas', 'fa-triangle-exclamation']" /> Invalid ItemStack</span>
+  </div>
+  
+  <ItemStackModal
+    v-model="showItemStackModal"
+    :value="value"
+    @confirm="update"
+    />
+</template>
+
+<style scoped>
+.itemstack {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  padding: 0.5rem;
+  user-select: none;
+  transition: background-color 0.3s;
+  background-color: var(--color-background-soft);
+  
+  span {
+    font-family: monospace;
+    font-size: 0.8rem;
+  }
+  
+  .empty {
+    color: var(--color-text-mute);
+  }
+
+  .item {
+    color: var(--color-primary);
+  }
+  
+  .invalid {
+    color: var(--color-false);
+  }
+  
+  &:hover {
+    background-color: var(--color-hover);
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/components/base/Modal.vue b/components/base/Modal.vue
new file mode 100644
index 0000000..46d5da5
--- /dev/null
+++ b/components/base/Modal.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const model = defineModel();
+
+</script>
+
+<template>
+  <div id="modal" class="modal" :class="{ 'is-active': model }">
+    <div class="modal-background" @click="model = false"></div>
+    <div class="modal-content">
+      <div class="header" v-if="$slots.header">
+        <slot name="header" />
+      </div>
+      <slot name="body" />
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#modal {
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.3s;
+  display: none;
+  overflow: visible;
+}
+
+.modal-content {
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  padding: 1rem;
+  width: 100%;
+  max-width: 600px;
+  max-height: 80%;
+  overflow-y: visible;
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.modal-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: -1;
+}
+
+.is-active {
+  opacity: 1 !important;
+  pointer-events: all !important;
+  display: flex !important;
+}
+
+.header {
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 1rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/components/base/TrueFalseSwitch.vue b/components/base/TrueFalseSwitch.vue
new file mode 100644
index 0000000..a0a3392
--- /dev/null
+++ b/components/base/TrueFalseSwitch.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{
+  value: boolean;
+}>();
+const emit = defineEmits(['update']);
+
+const value = ref(props.value);
+
+const invert = () => {
+  value.value = !value.value;
+  emit('update', value.value);
+};
+</script>
+
+<template>
+  <div class="switch" @click="invert">
+    <span v-if="value" class="true"><font-awesome-icon :icon="['fas', 'fa-check']" /> True</span>
+    <span v-else class="false"><font-awesome-icon :icon="['fas', 'fa-xmark']" /> False</span>
+  </div>
+</template>
+
+<style scoped>
+.switch {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  padding: 0.5rem;
+  user-select: none;
+  transition: background-color 0.3s;
+  background-color: var(--color-background-soft);
+  
+  span {
+    font-family: monospace;
+    font-size: 0.8rem;
+  }
+  
+  .true {
+    color: var(--color-text-primary);
+  }
+
+  .false {
+    color: var(--color-false);
+  }
+  
+  &:hover {
+    background-color: var(--color-hover);
+  }
+}
+
+</style>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2