c0ckp1t 1.0.0

package/components/xcheckbox.vue

@@ -0,0 +1,52 @@
+<script setup>
+/*
+<x-checkbox k="My Check Box" v-model="local.myCheckBox"></x-checkbox>
+<x-checkbox k="My Check Box" v-model="local.myCheckBox" inline></x-checkbox>
+<x-checkbox k="My Check Box" v-model="local.myCheckBox" disabled></x-checkbox>
+*/
+
+import { ref, computed } from 'vue'
+import { generateRandomId } from "JsUtils"
+
+const props = defineProps({
+  modelValue: { 
+    type: Boolean,
+    default: false
+  },
+  k: {
+    type: String,
+    default: "Check Box"
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const id = ref(`id${generateRandomId()}`)
+
+const emit = defineEmits(['update:modelValue'])
+const v = computed({
+           get: () => props.modelValue,
+           set: (val) => {
+               emit('update:modelValue', val)
+           }
+});
+
+
+</script>
+
+
+<template>
+  <span :class="['form-check', { 'form-check-inline': inline }]" class="x-checkbox">
+    <input class="form-check-input" type="checkbox" v-model="v" :id="id" :disabled="disabled">
+    <label class="form-check-label" :for="id">{{ k }}</label>
+  </span>
+</template>
+
+<style scoped></style>
+

package/components/xcode.vue

@@ -0,0 +1,139 @@
+<script setup>
+import {computed,  reactive, onMounted} from 'vue'
+
+import {store as storeMain, api as apiMain} from '@/GlobalStore.mjs'
+import {getLogger} from "../core/Logging.mjs"
+
+const props = defineProps({
+  url: {type: String, required: true},
+  lang: {type: String, default: 'text'},
+  startLine: {type: Number, default: null}, // note: start line is 0 indexed, most editors are 1 indexed
+  endLine: {type: Number, default: null},
+})
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'xcode.vue'
+const logger = getLogger(LOG_HEADER)
+logger.debug("INIT")
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+const local = reactive({
+  id: "xcode.vue",
+  isLoading: false,
+// !# C0CKP1T_START local
+  code: "Not Available",
+  lang: props.lang,
+  fullCode: "N/A",
+  fullView: false
+// !# C0CKP1T_END local
+})
+
+
+const HTML_ESCAPE_TEST_RE = /[&<>"]/
+const HTML_ESCAPE_REPLACE_RE = /[&<>"]/g
+const HTML_REPLACEMENTS = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;'
+}
+
+function replaceUnsafeChar(ch) {
+  return HTML_REPLACEMENTS[ch]
+}
+
+function escapeHtml(str) {
+  if (HTML_ESCAPE_TEST_RE.test(str)) {
+    return str.replace(HTML_ESCAPE_REPLACE_RE, replaceUnsafeChar)
+  }
+  return str
+}
+
+async function findCode() {
+  if (typeof props.url !== 'string' || props.url.length < 3) {
+    local.fullCode = `[INVALID_URL] - problem with props.url\n\n`
+  }
+
+  const resp = await apiMain.fetchText(props.url)
+  logger.debug(resp)
+  if (!resp.isOk) {
+    if (resp.result.includes('File does not exist')) {
+    } else {
+      logger.error(resp)
+      return
+    }
+  }
+  local.fullCode = resp.result
+}
+
+// // Highlighter function. Should return escaped HTML
+const html = computed(() => {
+  console.log("Recomputing HTML")
+  console.log(props)
+  // Handle line range if specified
+  let code = local.fullCode
+  if (local.fullCode && local.fullView === false) {
+    const lines = local.fullCode.split('\n')
+    const start = props.startLine != null ? props.startLine : 0
+    const end = props.endLine != null ? props.endLine + 1 : lines.length // +1 because slice excludes end
+
+    // Extract only the lines we want
+    code = lines.slice(start, end).join('\n')
+  }
+
+  if (local.lang && hljs.getLanguage(local.lang)) {
+    try {
+      return '<pre class="hljs"><code>' +
+          hljs.highlight(code, {language: props.lang, ignoreIllegals: true}).value +
+          '</code></pre>';
+    } catch (__) {
+    }
+  }
+
+  return '<pre class="hljs"><code>' + escapeHtml(local.code) + '</code></pre>';
+})
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+onMounted(() => {
+  findCode()
+})
+
+</script>
+
+<template>
+  <div class="code-item">
+    <div class="row mb-2">
+      <div class="col-auto">
+        <x-label :isCompact="true" k="File:">{{ props.url ?? 'INVALID' }}</x-label>
+      </div>
+      <div class="col">
+      </div>
+      <div class="col-auto">
+        <x-label :isCompact="true" k="Lang:">{{ local.lang }}</x-label>
+      </div>
+      <div class="col-auto" v-if="props.startLine && props.endLine">
+        <x-label :isCompact="true" k="Lines:">{{ props.startLine}}-{{props.endLine}}</x-label>
+      </div>
+      <div class="col-auto">
+        <ExecButton icon="fa-rotate-right" :callback="() => findCode()"></ExecButton>
+      </div>
+      <div class="col-auto">
+        <x-toggle k="Full" v-model="local.fullView"></x-toggle>
+      </div>
+    </div>
+    <div v-html="html"></div>
+  </div>
+</template>
+
+<style scoped>
+.code-item {
+  border: 1px solid black;
+  padding: 2px;
+}
+
+</style>

package/components/xcollapse.vue

@@ -0,0 +1,52 @@
+<script setup>
+/*
+<x-collapse k="Services" v-model="local.myToggle">Body of collapse</x-collapse>
+<x-collapse style="border: 1px solid green" k="Services" v-model="local.myToggle">Body of collapse</x-collapse>
+
+use modelValue="true"  for input only
+*/
+import { ref, watch, computed } from 'vue';
+
+const props = defineProps({
+    k: String,
+    modelValue: {
+      type: Boolean,
+      default: false
+    }
+})
+
+const isOpenRef = ref(props.modelValue)
+const emit = defineEmits(['update:modelValue']);
+
+// Watch for external changes to modelValue and update isOpenRef accordingly
+watch(() => props.modelValue, (newVal) => {
+  isOpenRef.value = newVal;
+});
+
+// Emit changes when isOpenRef changes, to update the parent's v-model binding if used
+watch(isOpenRef, (newVal) => {
+  emit('update:modelValue', newVal);
+});
+
+
+function clickEvent() {
+  isOpenRef.value = !isOpenRef.value; // This will also emit the update:modelValue event
+}
+
+</script>
+
+
+<template >
+    <div>
+        <button @click="clickEvent" class="btn btn-light w-100" type="button">
+            <span v-if="isOpenRef"><i class="fa-solid fa-minus"></i> {{ k }}</span>
+            <span v-if="!isOpenRef"><i class="fa-solid fa-plus"></i> {{ k }}</span>
+        </button>
+        <div class="" v-if="isOpenRef">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+
+<style scoped></style>

package/components/xcolor.vue

@@ -0,0 +1,84 @@
+<script setup>
+/*
+Usage:
+
+ */
+import {computed} from 'vue'
+
+const props = defineProps({
+  colorName: {type: String, required: true},
+  colorLabel: {type: String, required: true},
+  disabled: {type: Boolean, default: false},
+  modelValue: {
+    default: () => { "N/A"}
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+const colorValue = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit('update:modelValue', val)
+  }
+});
+
+</script>
+
+<template>
+  <label :for="`color-${colorName}`" class="color-label">{{ colorLabel }}</label>
+  <div class="color-input-wrapper">
+    <input
+        type="color"
+        :id="`color-${colorName}`"
+        v-model="colorValue"
+        class="color-input"
+        :disabled="props.disabled"
+    >
+    <input
+        type="text"
+        v-model="colorValue"
+        class="hex-input form-control"
+        maxlength="7"
+        :disabled="props.disabled"
+    >
+  </div>
+</template>
+
+<style scoped>
+.color-label {
+  font-weight: 600;
+  color: var(--bs-body-color);
+  margin-bottom: 0;
+}
+
+.color-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.color-input {
+  width: 50px;
+  height: 40px;
+  border: 2px solid var(--bs-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 2px;
+  background: var(--bs-body-bg);
+}
+
+.color-input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.color-input::-webkit-color-swatch {
+  border: none;
+  border-radius: 4px;
+}
+
+.hex-input {
+  width: 100px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+}
+</style>

package/components/xdropdown.vue

@@ -0,0 +1,104 @@
+<script setup>
+/*
+  types: [
+    {k: "STRING", v: "STRING"},
+    {k: "JSON", v: "JSON"},
+    {k: "NUMBER", v: "NUMBER"},
+  ]
+<x-drop-down k="Route Type: " :items="['STATIC', 'SIMPLE']" v-model="local.routeType"></x-drop-down>
+
+*/
+import {computed, reactive, onMounted} from 'vue'
+
+const props = defineProps({
+// [{k: 'item1key', v: 'item1'}, {k: 'item2key', v: 'item2'}]
+  items: {
+    type: Array,
+    default: []
+  }, 
+  k: String,
+  modelValue: { 
+    default: () => { "N/A" } 
+  },
+})
+
+// ________________________________________________________________________________
+// LOCAL STATE 
+// ________________________________________________________________________________
+const local = reactive({
+    visible: false
+})
+
+const emit = defineEmits(['update:modelValue'])
+const selection = computed({
+           get: () => valueToKeyMap(props.modelValue),
+           set: (val) => {
+               emit('update:modelValue', keyToValueMap(val))
+           }
+});
+
+function valueToKeyMap(v) {
+  const obj = props.items.filter( obj => { 
+    return (obj.v === v) 
+  })
+  if(obj.length === 1) {
+    return obj[0].k
+  }
+  return `Select Item (value=${v} not found)`
+}
+
+function keyToValueMap(k) {
+
+  const obj = props.items.filter( obj => { 
+    return (obj.k === k) 
+  })
+  if(obj.length === 1) {
+    return obj[0].v
+  }
+  throw `key=${k} not found`
+}
+
+// ________________________________________________________________________________
+// METHODS
+// ________________________________________________________________________________
+function toggleVisible() {
+  local.visible = !local.visible
+}
+
+function select(item) {
+  local.visible = false
+  selection.value = item.k
+}
+
+
+// ________________________________________________________________________________ 
+// INIT
+// ________________________________________________________________________________ 
+async function init() {
+}
+
+onMounted(async () => { init() })
+
+// END OF SCRIPT
+</script>
+
+
+<template >
+
+<div class="dropdown">
+  <span class="pe-4 fw-bold" v-if="props.k"> {{ props.k }} </span>
+  <button class="btn btn-sm btn-secondary dropdown-toggle" @click="toggleVisible()" type="button" id="dropdownMenuButton1" data-bs-auto-close="true" data-bs-toggle="dropdown" aria-expanded="false">
+    {{ selection === "" ? "Select Item" : selection}}
+  </button>
+  <ul class="dropdown-menu" :class="{show: local.visible}" aria-labelledby="dropdownMenuButton1">
+    <li v-for="obj in props.items">
+      <a class="dropdown-item" @click="select(obj)">{{obj.k}}</a>
+    </li>
+  </ul>
+</div>
+
+
+</template>
+
+<style scoped>
+</style>

package/components/xdropdown2.vue

@@ -0,0 +1,140 @@
+<script setup>
+/*
+  xdropdown2 - Native select dropdown with optgroup support
+
+      <!-- With v-model only -->
+     <xdropdown2
+       v-model="selectedValue"
+       :items="[{k: 'Option 1', v: 'opt1'}, {k: 'Option 2', v: 'opt2'}]"
+       default-label="Choose..."
+     />
+
+     <!-- With callback only -->
+     <xdropdown2
+       :items="items"
+       :on-change="(value) => handleSelection(value)"
+       default-label="Select an option"
+       group-label="Available Options"
+     />
+
+     <!-- With both v-model and callback -->
+     <xdropdown2
+       v-model="selectedTheme"
+       :items="themeItems"
+       :on-change="loadTheme"
+       default-label="Custom Editor"
+       group-label="Themes"
+       k="Theme:"
+     />
+
+
+  Props:
+    - items: Array of {k: 'label', v: 'value'} objects
+    - k: Optional label displayed before the select
+    - modelValue: The selected value (for v-model)
+    - defaultLabel: Label for the default null option (default: "Select...")
+    - groupLabel: Label for the optgroup (optional)
+    - onChange: Callback function called with the selected value
+    - maxWidth: Max width of select (default: '250px')
+*/
+import {computed, onMounted} from 'vue'
+
+const props = defineProps({
+  // [{k: 'item1key', v: 'item1'}, {k: 'item2key', v: 'item2'}]
+  items: {
+    type: Array,
+    default: () => []
+  }, 
+  k: String,
+  modelValue: { 
+    default: null 
+  },
+  defaultLabel: {
+    type: String,
+    default: 'Select...'
+  },
+  groupLabel: {
+    type: String,
+    default: null
+  },
+  onChange: {
+    type: Function,
+    default: null
+  },
+  maxWidth: {
+    type: String,
+    default: '350px'
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// ________________________________________________________________________________
+// METHODS
+// ________________________________________________________________________________
+function handleChange(event) {
+  const rawValue = event.target.value
+  // Convert empty string back to null for the default option
+  const value = rawValue === '' ? null : rawValue
+  
+  // Emit for v-model support
+  emit('update:modelValue', value)
+  
+  // Call the onChange callback if provided
+  if (props.onChange) {
+    props.onChange(value)
+  }
+}
+
+// ________________________________________________________________________________ 
+// INIT
+// ________________________________________________________________________________ 
+async function init() {
+}
+
+onMounted(async () => { init() })
+
+// END OF SCRIPT
+</script>
+
+
+<template>
+
+<div class="xdropdown2">
+  <span class="pe-2 fw-bold" v-if="props.k">{{ props.k }}</span>
+  <select 
+    class="form-select" 
+    :style="{ maxWidth: props.maxWidth }"
+    :value="props.modelValue ?? ''"
+    @change="handleChange"
+  >
+    <option value="">{{ props.defaultLabel }}</option>
+    <optgroup v-if="props.groupLabel" :label="props.groupLabel">
+      <option 
+        v-for="obj in props.items" 
+        :key="obj.v" 
+        :value="obj.v"
+      >
+        {{ obj.k }}
+      </option>
+    </optgroup>
+    <template v-else>
+      <option 
+        v-for="obj in props.items" 
+        :key="obj.v" 
+        :value="obj.v"
+      >
+        {{ obj.k }}
+      </option>
+    </template>
+  </select>
+</div>
+
+</template>
+
+<style scoped>
+.xdropdown2 {
+  display: inline-flex;
+  align-items: center;
+}
+</style>

package/components/xhidden.vue

@@ -0,0 +1,30 @@
+<script setup>
+
+/*
+  Usage:
+    <x-hidden :k="`Services (${props.v.services.length})`" >
+      This is hidden text
+    </x-hidden>
+*/
+import { ref, watch, computed, useSlots } from 'vue';
+
+const props = defineProps({
+    k: String
+})
+
+// const slots = useSlots();
+// const children = slots.default()[0].children;
+
+</script>
+
+
+<template >
+  <details>
+    <summary><span data-key>{{k}}</span><span data-value></span></summary>
+    <slot></slot>
+
+  </details>
+</template>
+
+
+<style scoped></style>

package/components/xinput.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-input" >
+  <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>