@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/util/CoordinateType.vue

@@ -0,0 +1,134 @@
+<template>
+    <div
+        class='btn-group'
+        role='group'
+    >
+        <input
+            id='point-default'
+            type='radio'
+            class='btn-check'
+            name='point-type'
+            autocomplete='off'
+            :checked='config.mode === "u-d-p"'
+            @click='config.mode = "u-d-p"'
+        >
+        <label
+            v-tooltip='"Custom Point"'
+            for='point-default'
+            type='button'
+            class='btn'
+        ><IconPoint
+            title='Point Icon'
+            :size='size'
+            stroke='1'
+        /></label>
+
+        <input
+            id='point-unknown'
+            type='radio'
+            class='btn-check'
+            name='point-type'
+            autocomplete='off'
+            :checked='config.mode === "a-u-G"'
+            @click='config.mode = "a-u-G"'
+        >
+        <label
+            v-tooltip='"Unknown Point"'
+            for='point-unknown'
+            type='button'
+            class='btn'
+        ><img
+            :width='size'
+            :height='size'
+            src='/pngs/a-u-G.png'
+        ></label>
+
+        <input
+            id='point-friendly'
+            type='radio'
+            class='btn-check'
+            name='point-type'
+            autocomplete='off'
+            :checked='config.mode === "a-f-G"'
+            @click='config.mode = "a-f-G"'
+        >
+        <label
+            v-tooltip='"Friendly Point"'
+            for='point-friendly'
+            type='button'
+            class='btn'
+        ><img
+            :width='size'
+            :height='size'
+            src='/pngs/a-f-G.png'
+        ></label>
+
+        <input
+            id='point-hostile'
+            type='radio'
+            class='btn-check'
+            name='point-type'
+            autocomplete='off'
+            :checked='config.mode === "a-h-G"'
+            @click='config.mode = "a-h-G"'
+        >
+        <label
+            v-tooltip='"Hostile Point"'
+            for='point-hostile'
+            type='button'
+            class='btn'
+        ><img
+            :width='size'
+            :height='size'
+            src='/pngs/a-h-G.png'
+        ></label>
+
+        <input
+            id='point-neutral'
+            type='radio'
+            class='btn-check'
+            name='point-type'
+            autocomplete='off'
+            :checked='config.mode === "a-n-G"'
+            @click='config.mode = "a-n-G"'
+        >
+        <label
+            v-tooltip='"Neutral Point"'
+            for='point-neutral'
+            type='button'
+            class='btn'
+        ><img
+            :width='size'
+            :height='size'
+            src='/pngs/a-n-G.png'
+        ></label>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue';
+import {
+    IconPoint
+} from '@tabler/icons-vue';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        required: true,
+    },
+    size: {
+        type: Number,
+        default: 24
+    }
+});
+
+const config = ref({
+    mode: props.modelValue || 'u-d-p'
+})
+
+const emit = defineEmits([ 'update:modelValue' ])
+
+watch(config.value, () => {
+    emit('update:modelValue', config.value.mode);
+})
+</script>

package/src/components/CloudTAK/util/CopyButton.vue

@@ -0,0 +1,67 @@
+<template>
+    <TablerIconButton
+        v-if='!copied'
+        title='Copy'
+        @click.stop.prevent='copy'
+    >
+        <IconCopy
+            :size='size'
+            stroke='stroke'
+        />
+    </TablerIconButton>
+    <TablerIconButton
+        v-else
+        title='Copied'
+        @click.stop.prevent='copy'
+    >
+        <IconCopyCheck
+            :size='size'
+            :stroke='String(stroke + 1)'
+        />
+    </TablerIconButton>
+</template>
+
+<script setup lang='ts'>
+import { ref, onUnmounted } from 'vue';
+import {
+    IconCopy,
+    IconCopyCheck
+} from '@tabler/icons-vue';
+
+import {
+    TablerIconButton
+} from '@tak-ps/vue-tabler'
+
+const props = defineProps({
+    text: {
+        type: [String, Number],
+        required: true
+    },
+    size: {
+        type: Number,
+        default: 32
+    },
+    stroke: {
+        type: Number,
+        default: 1
+    }
+})
+
+const copied = ref(false);
+const timeout = ref<ReturnType<typeof setTimeout> | undefined>();
+
+onUnmounted(() => {
+    if (timeout.value) {
+        clearTimeout(timeout.value);
+    }
+});
+
+async function copy() {
+    await navigator.clipboard.writeText(String(props.text))
+    copied.value = true;
+
+    timeout.value = setTimeout(() => {
+        copied.value = false;
+    }, 1000);
+}
+</script>

package/src/components/CloudTAK/util/CopyField.vue

@@ -0,0 +1,286 @@
+<template>
+    <label
+        v-if='label'
+        class='mx-1'
+        v-text='props.label'
+    />
+
+    <div
+        v-if='editing'
+        class='position-relative rounded'
+    >
+        <TablerInput
+            v-model='text'
+            :rows='rows'
+            :autofocus='true'
+            label=''
+            :error='error'
+            @update:model-value='validUpdate(text)'
+            @blur='validUpdate(text, {
+                submit: false,
+                editing: true
+            })'
+            @submit='validUpdate(text, {
+                submit: rows > 1 ? false : true,
+                editing: rows > 1 ? true : false
+            })'
+        />
+
+        <TablerIconButton
+            v-if='!error'
+            title='Done Editing'
+            class='position-absolute'
+            style='right: 8px; top: 8px;'
+            @click.stop.prevent='validUpdate(text, {
+                submit: true,
+                editing: false
+            })'
+        >
+            <IconCheck
+                :size='24'
+                stroke='1'
+            />
+        </TablerIconButton>
+    </div>
+    <div
+        v-else
+        ref='infobox'
+        class='position-relative rounded text-truncate'
+        :style='rows === 1 ? `min-height: ${minheight}px;` : ``'
+        :class='{
+            "px-2 py-2 bg-accent": props.mode !== "pre",
+            "hover-button hover-border cursor-pointer": hover,
+        }'
+    >
+        <slot />
+
+        <template v-if='rows > 1 || mode === "pre"'>
+            <TablerMarkdown
+                v-if='mode === "text"'
+                style='min-height: 32px'
+                :markdown='markdown'
+            />
+            <pre
+                v-else
+                v-text='text'
+            />
+
+            <TablerDelete
+                v-if='props.deletable'
+                displaytype='icon'
+                style='top: 8px;'
+                :size='24'
+                :class='{
+                    "hover-button-hidden": hover,
+                }'
+                :style='{
+                    "right": props.edit ? "64px" : "32px",
+                }'
+                class='position-absolute bg-accent'
+                @delete='$emit("delete")'
+            />
+
+            <TablerIconButton
+                v-if='edit'
+                title='Edit Field'
+                class='position-absolute bg-accent'
+                :class='{
+                    "hover-button-hidden": hover,
+                }'
+                style='right: 36px; top: 8px;'
+                @click='editing = true'
+            >
+                <IconPencil
+                    :size='24'
+                    stroke='1'
+                />
+            </TablerIconButton>
+
+            <CopyButton
+                :text='text'
+                class='position-absolute bg-accent'
+                :size='24'
+                style='right: 8px; top: 8px;'
+            />
+        </template>
+        <template v-else>
+            <span v-text='text' />
+
+            <TablerDelete
+                v-if='props.deletable'
+                displaytype='icon'
+                style='top: 6px;'
+                :size='24'
+                :class='{
+                    "hover-button-hidden": hover,
+                }'
+                :style='{
+                    "right": props.edit ? "64px" : "32px",
+                }'
+                class='position-absolute bg-accent'
+                @delete='$emit("delete")'
+            />
+
+            <TablerIconButton
+                v-if='edit'
+                title='Edit'
+                class='position-absolute bg-accent'
+                :class='{
+                    "hover-button-hidden": hover,
+                }'
+                style='right: 32px; top: 6px;'
+                @click='editing = true'
+            >
+                <IconPencil
+                    :size='24'
+                    stroke='1'
+                />
+            </TablerIconButton>
+
+            <CopyButton
+                :text='text'
+                class='position-absolute'
+                :size='24'
+                style='right: 8px; top: 6px;'
+            />
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, computed, useTemplateRef } from 'vue';
+import CopyButton from './CopyButton.vue';
+import {
+    TablerInput,
+    TablerDelete,
+    TablerMarkdown,
+    TablerIconButton
+} from '@tak-ps/vue-tabler'
+import {
+    IconCheck,
+    IconPencil
+} from '@tabler/icons-vue';
+
+const emit = defineEmits([
+    'submit',
+    'delete',
+    'update:modelValue'
+]);
+
+const props = defineProps({
+    mode: {
+        type: String,
+        default: 'text' // text or pre
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    modelValue: {
+        type: [String, Number],
+        required: true
+    },
+    rows: {
+        type: Number,
+        default: 1
+    },
+    minheight: {
+        type: Number,
+        default: 32
+    },
+    validate: {
+        // (text: string | number) => false | string
+        type: Function,
+        default: undefined
+    },
+    hover: {
+        type: Boolean,
+        default: false
+    },
+    edit: {
+        type: Boolean,
+        default: false
+    },
+    deletable: {
+        type: Boolean,
+        default: false
+    },
+    size: {
+        type: Number,
+        default: 32
+    },
+    stroke: {
+        type: Number,
+        default: 1
+    }
+})
+
+const editing = ref(false);
+const text = ref(props.modelValue);
+const error = ref<string | undefined>()
+
+const infoboxRef = useTemplateRef<HTMLElement>('infobox');
+
+const markdown = computed(() => {
+    return String(props.modelValue || '')
+        .replace(/\n/g, '</br>')
+        .replace(/(http(s)?:\/\/[a-z-]+[:.].*?(?=[\s"]))/g, '[$1]($1)')
+        .trim()
+});
+
+watch(infoboxRef, () => {
+    if (infoboxRef.value) {
+        infoboxRef.value.addEventListener('click', (event: MouseEvent) => {
+            if (!props.edit) return;
+            if (event.target) {
+                const target = event.target as HTMLElement;
+                if (['A'].includes(target.tagName)) return;
+            }
+            editing.value = true;
+        });
+    }
+})
+
+watch(props, () => {
+    if (text.value !== props.modelValue && !editing.value) {
+        text.value = props.modelValue;
+    }
+})
+
+function validUpdate(
+    text: string | number,
+    opts = {
+        submit: false,
+        editing: true
+    }
+) {
+    if (typeof props.validate !== 'function') {
+        editing.value = opts.editing;
+
+        if (opts.submit) emit("submit", text);
+        emit("update:modelValue", text);
+    } else {
+        const res = props.validate(text);
+
+        if (res.length) {
+            error.value = res;
+        } else {
+            editing.value = opts.editing;
+            error.value = undefined;
+            if (opts.submit) emit("submit", text);
+            emit("update:modelValue", text);
+        }
+    }
+}
+
+</script>
+
+<style lang='scss'>
+.hover-border {
+    border: 2px solid rgba(0, 0, 0, 0);
+}
+
+.hover-border:hover {
+    border: 2px solid #83b7e8;
+}
+</style>