c0ckp1t 1.0.0

package/components/xinput2.vue

@@ -0,0 +1,101 @@
+<script setup>
+/*
+<x-input k="k" v-model="local.xInputText"></x-input>
+<x-input k="k" v-model="local.xInputTextNumber" type="Number"></x-input>
+<x-input k="k" v-model="local.xInputText" :showLabel="false"></x-input>
+<x-input k="k" v-model="local.xInputText"
+         :styleObject="{'border': '1px solid red'}"
+         :inputStyle="{'border': '1px solid green'}">
+
+</x-input>
+*/
+
+import {computed, ref} from 'vue';
+
+const props = defineProps({
+  k: String,
+  modelValue: { 
+    default: () => { "N/A" } 
+  },
+  type: {
+    type: String,
+    default: 'text'
+  },
+  showLabel: {
+    type: Boolean,
+    default: true
+  },
+  styleObject: {
+    type: Object,
+    default: {
+      'min-width': '150px'
+    }
+  },
+  inputStyle: {
+    type: String,
+    default: ""
+  }
+})
+
+const isPasswordVisible = ref(false)
+
+const emit = defineEmits(['update:modelValue'])
+const message = computed({
+           get: () => props.modelValue,
+           set: (val) => {
+               emit('update:modelValue', val)
+           }
+});
+
+const typeCheck = computed (() => {
+  if(message.value === "")  return "BLANK"
+  return "DEFAULT"
+})
+
+
+</script>
+
+
+<template >
+<div class="input-group x-input2" >
+  <span v-if="showLabel" :style="props.styleObject" class=" input-group-text label fw-bold"  > {{ k }} </span>
+
+  <input :type="type" aria-label="message" class="form-control"
+         :style="props.inputStyle" v-model.number="message" v-if="type.toUpperCase() === 'NUMBER'">
+
+  <input :type="isPasswordVisible ? 'text' : 'password'"  aria-label="message" class="form-control"
+         :style="props.inputStyle" v-model="message" v-else-if="type.toUpperCase() === 'PASSWORD'">
+
+  <input :type="type" aria-label="message" class="form-control"
+         :style="props.inputStyle" v-model="message" v-else>
+
+  <div class="input-group-text text-dark icon-container" @click="isPasswordVisible = !isPasswordVisible" v-if="type.toUpperCase() === 'PASSWORD'">
+    <i class="fa-solid fa-eye" v-if="isPasswordVisible"></i>
+    <i class="fa-solid fa-eye-slash" v-if="!isPasswordVisible"></i>
+  </div>
+  <span class="input-group-text type-check" v-if="typeCheck !== 'DEFAULT'">{{ typeCheck }}</span>
+</div>
+</template>
+
+
+<style scoped>
+
+.label:hover {
+  cursor: pointer;
+}
+
+.input-group-text {
+  min-width: 150px;
+}
+
+.type-check {
+  min-width: 50px;
+  font-size: .5rem;
+}
+
+.icon-container {
+  min-width: auto;
+  width: auto;
+  padding: 0.375rem 0.75rem;
+}
+</style>

package/components/xjson.vue

@@ -0,0 +1,95 @@
+<script setup>
+/*
+<x-json :obj="local.kv"></x-json>
+<x-json :obj="local.kv" :expanded="true"></x-json>
+
+https://www.webcomponents.org/element/@alenaksu/json-viewer
+*/
+import {computed, reactive, watch, onMounted, markRaw} from 'vue'
+
+import '/js_ext/json-viewer.bundle.js';
+
+
+const props = defineProps({
+  obj: Object,
+  expanded: {
+    type: Boolean,
+    default:  false
+  }
+})
+const emit = defineEmits(['select'])
+
+const id  = `json${Math.floor(Math.random() * 100000000)}`
+
+// ________________________________________________________________________________
+// LOCAL STATE
+// ________________________________________________________________________________
+const local = reactive({
+    id: id,
+    el: null,
+    isExpanded: props.expanded,
+})
+
+watch(
+  () => props.obj,
+  (curr, prev) => {
+    // console.log(`json watch triggered`)
+    local.el.data =  {... curr }
+  },
+  { deep: true }
+)
+
+
+// ________________________________________________________________________________
+// METHODS
+// ________________________________________________________________________________
+function expandAll() {
+    local.el.expand('**');
+}
+function collapseAll() {
+    local.el.collapse('**');
+}
+
+function toggleExpand() {
+    if(local.isExpanded) {
+        local.isExpanded = false
+        collapseAll()
+
+    } else {
+        local.isExpanded = true
+        expandAll()
+    }
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+    // document.querySelector('#json').data = { prop1: true, prop2: 'test' };
+    local.el = markRaw(document.querySelector(`#${id}`))
+    local.el.data = props.obj
+  if (local.isExpanded) {
+    setTimeout(() => {
+      expandAll()
+    }, 100)
+  }
+}
+
+onMounted(async () => { init() })
+
+// END OF SCRIPT
+
+</script>
+
+
+
+<template>
+  <div class="x-json">
+<!--     <button @click="toggleExpand">Toggle Expand</button>-->
+    <json-viewer class="p-1" :id="local.id"> </json-viewer>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/xkv.vue

@@ -0,0 +1,41 @@
+<script setup>
+/*
+<x-kv k="local" :obj="local.myMap"></x-kv>
+ */
+//________________________________________________________________________________ 
+// IMPORTS
+//________________________________________________________________________________ 
+import { computed } from 'vue';
+
+const props = defineProps({
+  obj: Object,
+  k: {
+    type: String,
+    default: () => "Default Title"
+  }
+})
+
+</script>
+
+
+<template >
+  <div class="kv">
+    <span class="ms-1 fw-bold">{{ props.k }}</span>
+    <div v-for="(v, k) in props.obj">
+      <div class="input-group g-0 ps-2">
+        <span class="fw-bold input-group-text">{{ k }}</span>
+        <span class="input-group-text">{{ v }} </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.input-group-text {
+  background-color: transparent;
+  border: none;
+  padding: 0.175rem 0.35rem;
+
+}
+</style>

package/components/xlabel.vue

@@ -0,0 +1,56 @@
+<script setup>
+/*
+<x-label k="k">my label value template</x-label>
+<x-label k="k" :isCompact="true">my label value template</x-label>
+<x-label k="k">https://example.com</x-label>
+*/
+import {computed, useSlots} from 'vue'
+
+const props = defineProps({
+  k: {
+    type: String,
+    default: () => "Default Title"
+  },
+  isCompact: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const slots = useSlots()
+const slotText = computed(() => {
+  const defaultSlot = slots.default?.()
+  if (defaultSlot && defaultSlot.length > 0) {
+    const firstChild = defaultSlot[0]
+    if (typeof firstChild.children === 'string') {
+      return firstChild.children.trim()
+    }
+  }
+  return ''
+})
+
+const isLink = computed(() => {
+  return slotText.value.includes("http://") || slotText.value.includes("https://")
+})
+
+</script>
+
+
+<template >
+<div class="input-group x-label">
+  <span class="label input-group-text" :class="{  'compact': props.isCompact }" v-if="k !== null">{{ k }}</span>
+  <span class="input-group-text">
+    <a v-if="isLink" :href="slotText" target="_blank" rel="noopener noreferrer">{{ slotText }}</a>
+    <slot v-else></slot>
+  </span>
+</div>
+</template>
+
+<style scoped>
+.label {
+  font-weight: bold;
+}
+.label:not(.compact) {
+  min-width: 150px;
+}
+</style>

package/components/xlist.vue

@@ -0,0 +1,83 @@
+<script setup>
+/*
+<x-list k="Tags" v-model="local.tags"></x-list>
+*/
+// ________________________________________________________________________________
+// IMPORT
+// ________________________________________________________________________________
+import {computed, onMounted, reactive} from 'vue';
+
+const props = defineProps({
+    k: String,
+    modelValue: {
+      default: () => {
+        "N/A"
+      }
+    },
+  }
+)
+
+const defaultValue = "default Value"
+// ________________________________________________________________________________
+// LOCAL STATE
+// ________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+  newItem: '',
+})
+
+//const emit = defineEmits(['update:modelValue'])
+//const kv = computed({
+//  get: () => props.modelValue,
+//  set: (val) => {
+//    emit('update:modelValue', val)
+//  }
+//});
+
+// ________________________________________________________________________________
+// METHODS
+// ________________________________________________________________________________
+function addItem() {
+  if (local.newItem.trim() === '') return;
+  props.modelValue.push(local.newItem.trim());
+  local.newItem = '';
+}
+
+function removeItem(index) {
+  props.modelValue.splice(index, 1);
+}
+
+</script>
+
+<template>
+  <div>
+    <form @submit.prevent="addItem">
+      <div class="input-group mb-3">
+        <label class="input-group-text mb-0 d-flex align-items-center fw-bold" id="basic-addon1" for="itemInput">{{k}}</label>
+        <input
+          type="text"
+          class="form-control"
+          aria-label="Item"
+          aria-describedby="basic-addon1"
+          placeholder="Add new item"
+          v-model="local.newItem"
+        />
+        <button class="btn btn-primary" type="submit"> Add </button>
+      </div>
+    </form>
+
+    <div class="row">
+      <div class="item col-auto"  v-for="(item, index) in  props.modelValue"   :key="index">
+        {{ item }}
+        <button
+          type="button"
+          class="btn-close"
+          aria-label="Close"
+          @click="removeItem(index)"
+        ></button>
+      </div>
+    </div>
+
+
+  </div>
+</template>

package/components/xmap.vue

@@ -0,0 +1,106 @@
+<script setup>
+/*
+<x-map k="Global KV" v-model="entity.kv"></x-map>
+*/
+
+// ________________________________________________________________________________
+// IMPORT
+// ________________________________________________________________________________
+import {computed, onMounted, reactive} from 'vue';
+
+const props = defineProps({
+      k: String,
+      modelValue: {
+        default: () => {
+          "N/A"
+        }
+      },
+    }
+)
+
+const defaultValue = "default Value"
+
+// ________________________________________________________________________________
+// LOCAL STATE
+// ________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+  textAddKey: "",
+  toggleJSON: false
+})
+
+const emit = defineEmits(['update:modelValue'])
+const kv = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit('update:modelValue', val)
+  }
+});
+
+
+// ________________________________________________________________________________
+// METHODS
+// ________________________________________________________________________________
+function removeKey(key) {
+  // console.log(`remove k=${key}`)
+  delete props.modelValue[key]
+}
+
+function addKey() {
+  // console.log(`adding ${local.textAddKey} = default value`)
+  // kv[local.textAddKey] = defaultValue
+  props.modelValue[local.textAddKey] = defaultValue
+  local.textAddKey = ''
+}
+
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+}
+
+onMounted(async () => {
+  init()
+})
+
+</script>
+
+
+<template>
+  <div class="xmap">
+
+    <div class="row menu align-items-center">
+      <div class="col-auto">
+        <span class="fw-bold  ">{{ props.k }}</span>
+      </div>
+      <div class="col-auto">
+        <x-input k="Add Item" v-model="local.textAddKey"></x-input>
+      </div>
+      <div class="col-auto">
+        <ExecButton icon="fa-circle-plus"  :callback="() => addKey()"
+                  :disabled="local.textAddKey === ''"></ExecButton>
+      </div>
+      <div class="col-auto">
+        <x-toggle k="JSON" v-model="local.toggleJSON"></x-toggle>
+      </div>
+    </div>
+
+    <div class="mt-2 mb-2" v-if="local.toggleJSON">
+      <pre class="mt-2 p-2 bg-dark text-white">{{ kv }}</pre>
+    </div>
+
+    <!-- KV -->
+    <div v-for="(v, k) in kv" class="row">
+      <div class="col">
+        <x-input :k="k" v-model="kv[k]"></x-input>
+      </div>
+
+      <div class="col-auto">
+        <ExecButton icon="fa-trash" class="me-1"  :callback=" () => removeKey(k)"
+        ></ExecButton>
+      </div>
+    </div>
+
+  </div>
+</template>