aboutsummaryrefslogtreecommitdiffstats
path: root/components/Control
diff options
context:
space:
mode:
Diffstat (limited to 'components/Control')
-rw-r--r--components/Control/Button.vue82
-rw-r--r--components/Control/Checkbox.vue42
-rw-r--r--components/Control/ItemStackForm.vue50
-rw-r--r--components/Control/ItemStackModal.vue172
-rw-r--r--components/Control/ItemStackPicker.vue100
-rw-r--r--components/Control/Modal.vue68
-rw-r--r--components/Control/TrueFalseSwitch.vue54
7 files changed, 0 insertions, 568 deletions
diff --git a/components/Control/Button.vue b/components/Control/Button.vue
deleted file mode 100644
index efd91c2..0000000
--- a/components/Control/Button.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<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/Control/Checkbox.vue b/components/Control/Checkbox.vue
deleted file mode 100644
index e0325e7..0000000
--- a/components/Control/Checkbox.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<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/Control/ItemStackForm.vue b/components/Control/ItemStackForm.vue
deleted file mode 100644
index 250e8c9..0000000
--- a/components/Control/ItemStackForm.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<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/Control/ItemStackModal.vue b/components/Control/ItemStackModal.vue
deleted file mode 100644
index 642c5f9..0000000
--- a/components/Control/ItemStackModal.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script setup lang="ts">
-import Modal from '@/components/Control/Modal.vue';
-import Button from '@/components/Control/Button.vue';
-import { computed, ref } from 'vue';
-import materials from '@/lib/materials';
-import ItemStackForm from './ItemStackForm.vue';
-
-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/Control/ItemStackPicker.vue b/components/Control/ItemStackPicker.vue
deleted file mode 100644
index d16090e..0000000
--- a/components/Control/ItemStackPicker.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<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/Control/Modal.vue b/components/Control/Modal.vue
deleted file mode 100644
index 46d5da5..0000000
--- a/components/Control/Modal.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<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/Control/TrueFalseSwitch.vue b/components/Control/TrueFalseSwitch.vue
deleted file mode 100644
index a0a3392..0000000
--- a/components/Control/TrueFalseSwitch.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<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
generated by cgit v1.2.3-70-g09d2 (git 2.51.2) at 2025-11-25 11:58:19 +0000