c0ckp1t 1.0.0

package/components/vue3-ace-editor.vue

@@ -0,0 +1,331 @@
+<script setup>
+/*
+ <v-ace-editor v-model="local.resultText" lang="kotlin" theme="twilight"
+    style="height: 800px"></v-ace-editor>
+*/
+
+import {ref, reactive, markRaw, onMounted, onBeforeUnmount, watch} from 'vue';
+
+const root = ref("");
+
+// Available themes (extracted from /public/js_ext/ace-editor/theme-*.js)
+const themes = [
+    'ambiance', 'chaos', 'chrome', 'cloud9_day', 'cloud9_night', 'cloud9_night_low_color',
+    'cloud_editor', 'cloud_editor_dark', 'clouds', 'clouds_midnight', 'cobalt', 'crimson_editor',
+    'dawn', 'dracula', 'dreamweaver', 'eclipse', 'github', 'github_dark', 'github_light_default',
+    'gob', 'gruvbox', 'gruvbox_dark_hard', 'gruvbox_light_hard', 'idle_fingers', 'iplastic',
+    'katzenmilch', 'kr_theme', 'kuroir', 'merbivore', 'merbivore_soft', 'mono_industrial',
+    'monokai', 'nord_dark', 'one_dark', 'pastel_on_dark', 'solarized_dark', 'solarized_light',
+    'sqlserver', 'terminal', 'textmate', 'tomorrow', 'tomorrow_night', 'tomorrow_night_blue',
+    'tomorrow_night_bright', 'tomorrow_night_eighties', 'twilight', 'vibrant_ink', 'xcode'
+].sort();
+
+// Available languages/modes (extracted from /public/js_ext/ace-editor/mode-*.js)
+const langs = [
+    'abap', 'abc', 'actionscript', 'ada', 'apache_conf', 'apex', 'aql', 'asciidoc',
+    'assembly_arm32', 'assembly_x86', 'basic', 'batchfile', 'c9search', 'cirru', 'coffee',
+    'coldfusion', 'crystal', 'csound_score', 'csv', 'd', 'dockerfile', 'dot', 'edifact',
+    'elm', 'erlang', 'flix', 'forth', 'fortran', 'fsharp', 'gitignore', 'gobstones',
+    'golang', 'groovy', 'haml', 'haskell', 'hjson', 'html_elixir', 'ini', 'io', 'ion',
+    'java', 'javascript', 'json', 'jsoniq', 'jsx', 'julia', 'kotlin', 'latte', 'liquid',
+    'livescript', 'logtalk', 'lsl', 'lucene', 'markdown', 'mask', 'matlab', 'mips',
+    'mysql', 'nasal', 'nginx', 'nix', 'nsis', 'nunjucks', 'ocaml', 'partiql', 'perl',
+    'php_laravel_blade', 'powershell', 'prql', 'puppet', 'qml', 'r', 'raku', 'rdoc',
+    'red', 'rhtml', 'robot', 'rst', 'ruby', 'sass', 'scala', 'scad', 'sh', 'sjs',
+    'snippets', 'soy_template', 'sparql', 'terraform', 'text', 'textile', 'toml',
+    'tsx', 'turtle', 'vala', 'vbscript', 'velocity', 'vhdl', 'vue', 'wollok', 'xml',
+    'xquery', 'zeek'
+].sort();
+
+// Local reactive state for debug controls
+const local = reactive({
+    currentTheme: '',
+    currentLang: '',
+    currentWrap: false,
+    currentShowPrintMargin: true,
+    currentShowGutter: true,
+    currentRelativeLineNumbers: false,
+});
+
+const props = defineProps({
+      modelValue: {
+        type: String,
+        required: true,
+      },
+      lang: {
+        type: String,
+        default: 'sh',
+      },
+      theme: {
+        type: String,
+        default: 'chrome',
+      },
+      fontSize: {
+        type: Number,
+        default: 14,
+      },
+      height: {
+        type: String,
+        default: '300px',
+      },
+      debug: {
+        type: Boolean,
+        default: false,
+      },
+      options: Object,
+      placeholder: String,
+      readonly: Boolean,
+      wrap: Boolean,
+      printMargin: {
+        type: [Boolean, Number],
+        default: true,
+      },
+      minLines: Number,
+      maxLines: Number,
+    }
+)
+
+const emit = defineEmits(['update:modelValue', 'init', ...[
+  'blur',
+  'input',
+  'change',
+  'changeSelectionStyle',
+  'changeSession',
+  'copy',
+  'focus',
+  'paste',
+]])
+
+let _editor = undefined
+let _ro = undefined
+let _contentBackup = undefined;
+let _isSettingContent = false;
+
+
+watch(() => props.modelValue, (first, second) => {
+  value(first)
+});
+
+// Watchers for debug controls - update editor when local state changes
+watch(() => local.currentTheme, (val) => {
+  if (_editor && val) _editor.setTheme('ace/theme/' + val);
+});
+
+watch(() => local.currentLang, (val) => {
+  if (_editor && val) _editor.setOption('mode', 'ace/mode/' + val);
+});
+
+watch(() => local.currentWrap, (val) => {
+  if (_editor) _editor.setOption('wrap', val);
+});
+
+watch(() => local.currentShowPrintMargin, (val) => {
+  if (_editor) _editor.setShowPrintMargin(val);
+});
+
+watch(() => local.currentShowGutter, (val) => {
+  if (_editor) _editor.setOption('showGutter', val);
+});
+
+watch(() => local.currentRelativeLineNumbers, (val) => {
+  if (_editor) _editor.setOption('relativeLineNumbers', val);
+});
+
+onMounted(() => {
+  if (typeof ace === 'undefined') {
+    console.error('Ace editor not loaded')
+    return
+  }
+  ace.config.set('basePath', '/js_ext/ace-editor');
+  _editor = markRaw(ace.edit(root.value, {
+    mode: 'ace/mode/' + props.lang,
+    theme: 'ace/theme/' + props.theme,
+    placeholder: props.placeholder,
+    readOnly: props.readonly,
+    wrap: props.wrap,
+    printMargin: props.printMargin,
+    useWorker: false,
+    minLines: props.minLines,
+    maxLines: props.maxLines,
+    ...props.options,
+  }));
+
+  _editor.setFontSize(props.fontSize)
+
+  _editor.on('change', () => {
+    if (_isSettingContent) return;
+    const content = _editor.getValue();
+    _contentBackup = content;
+    emit('update:modelValue', content);
+  });
+
+  // Initialize local state from props
+  local.currentTheme = props.theme;
+  local.currentLang = props.lang;
+  local.currentWrap = props.wrap || false;
+  local.currentShowPrintMargin = props.printMargin !== false;
+  local.currentShowGutter = true;
+  local.currentRelativeLineNumbers = false;
+
+  value(props.modelValue)
+  _ro = new ResizeObserver(() => _editor.resize());
+  _ro.observe(root.value);
+  emit('init', _editor);
+})
+
+onBeforeUnmount(() => {
+  var _a, _b;
+  (_a = _ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+  (_b = _editor) === null || _b === void 0 ? void 0 : _b.destroy();
+})
+
+function focus() {
+  _editor.focus();
+}
+
+function blur() {
+  _editor.blur();
+}
+
+function selectAll() {
+  _editor.selectAll();
+}
+
+function value(val) {
+  if (_contentBackup !== val) {
+    try {
+      _isSettingContent = true;
+      _editor.setValue(val, 1);
+    } finally {
+      _isSettingContent = false;
+    }
+    _contentBackup = val;
+  }
+}
+
+function theme(val) {
+  _editor.setTheme('ace/theme/' + val);
+}
+
+function options(val) {
+  _editor.setOptions(val);
+}
+
+function readonly(val) {
+  _editor.setReadOnly(val);
+}
+
+function placeholder(val) {
+  _editor.setOption('placeholder', val);
+}
+
+function wrap(val) {
+  _editor.setWrapBehavioursEnabled(val);
+}
+
+function printMargin(val) {
+  _editor.setOption('printMargin', val);
+}
+
+function lang(val) {
+  _editor.setOption('mode', 'ace/mode/' + val);
+}
+
+function minLines(val) {
+  _editor.setOption('minLines', val);
+}
+
+function maxLines(val) {
+  _editor.setOption('maxLines', val);
+}
+
+
+</script>
+
+<template>
+  <div class="ace-editor" style="display: flex; flex-direction: column;" :style="{ height: props.height }">
+    <div class="debug-toolbar" v-if="props.debug">
+      <label>
+        Theme:
+        <select v-model="local.currentTheme">
+          <option v-for="t in themes" :key="t" :value="t">{{ t }}</option>
+        </select>
+      </label>
+      <label>
+        Lang:
+        <select v-model="local.currentLang">
+          <option v-for="l in langs" :key="l" :value="l">{{ l }}</option>
+        </select>
+      </label>
+      <label class="toggle-label">
+        <input type="checkbox" v-model="local.currentWrap" />
+        Wrap
+      </label>
+      <label class="toggle-label">
+        <input type="checkbox" v-model="local.currentShowPrintMargin" />
+        Print Margin
+      </label>
+      <label class="toggle-label">
+        <input type="checkbox" v-model="local.currentShowGutter" />
+        Gutter
+      </label>
+      <label class="toggle-label">
+        <input type="checkbox" v-model="local.currentRelativeLineNumbers" />
+        Relative Lines
+      </label>
+    </div>
+    <div ref="root" style="flex: 1; min-height: 0;"></div>
+  </div>
+</template>
+
+<style scoped>
+/* vue3-ace-editor.vue */
+
+.ace-editor {
+  resize: vertical;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.debug-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 4px 8px;
+  background: #2d2d2d;
+  border-bottom: 1px solid #444;
+  font-size: 12px;
+  color: #ccc;
+  align-items: center;
+}
+
+.debug-toolbar label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.debug-toolbar select {
+  font-size: 12px;
+  padding: 2px 4px;
+  background: #3c3c3c;
+  color: #ccc;
+  border: 1px solid #555;
+  border-radius: 3px;
+}
+
+.debug-toolbar select:focus {
+  outline: none;
+  border-color: #007acc;
+}
+
+.debug-toolbar .toggle-label {
+  cursor: pointer;
+  user-select: none;
+}
+
+.debug-toolbar input[type="checkbox"] {
+  margin: 0;
+  cursor: pointer;
+}
+</style>

package/components/xbutton.vue

@@ -0,0 +1,45 @@
+<script setup>
+/*
+    Usage:
+
+    <x-button :isLoading="local.isLoading" @callback="callback"></x-button>
+
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import { ref } from 'vue'
+
+const props = defineProps({
+    isLoading: Boolean,
+    icon: {
+        type: String,
+        default: "fa-file",
+    },
+    extras: {
+        type: String,
+        default: "btn-dark"
+    }
+})
+
+// fa-floppy-disk
+// fa-arrows-rotate
+// fa-trash
+
+const emit = defineEmits(['callback'])
+
+function buttonClick() {
+    emit('callback')
+}
+
+</script>
+
+<template >
+    <button class="btn" :class="props.extras" @click.stop="buttonClick()">
+        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" v-if="isLoading"></span>
+        <span class="icon" v-if="!props.isLoading"> <i class="fa-solid" :class="props.icon"></i> </span>
+        <slot></slot>
+    </button>
+</template>
+
+<style scoped></style>

package/components/xcard-h.vue

@@ -0,0 +1,175 @@
+<script setup>
+/*
+<x-card-h k="Title" date="2024-01-01" :tags="['vue', 'js']">Content here</x-card-h>
+<x-card-h k="Title" img-src="/path/to/image.png">Content here</x-card-h>
+<x-card-h k="Title" :no-image="true">Content here</x-card-h>
+*/
+
+import {ref} from 'vue';
+
+const props = defineProps({
+  k: String,
+  date: {
+    type: String,
+    default: ''
+  },
+  author: {
+    type: String,
+    default: ''
+  },
+  tags: {
+    type: Array,
+    default: () => []
+  },
+  imgSrc: {
+    type: String,
+    default: null
+  },
+  imgAlt: {
+    type: String,
+    default: 'Card image'
+  },
+  noImage: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const imageError = ref(false)
+
+function handleImageError() {
+  imageError.value = true
+}
+
+</script>
+
+
+<template>
+  <div class="card-h-wrapper">
+    <div class="card w-100">
+      <div class="row g-0 align-items-center">
+
+        <div class="col-md-2 col-sm-3 image-col" v-if="!noImage">
+          <!-- Show image if imgSrc is provided and no error -->
+          <img 
+            v-if="imgSrc && !imageError" 
+            :src="imgSrc" 
+            class="card-img" 
+            :alt="imgAlt"
+            @error="handleImageError"
+          >
+          <!-- Show placeholder if no imgSrc or image failed to load -->
+          <div v-else class="card-img-placeholder"></div>
+        </div>
+
+        <div :class="noImage ? 'col-12' : 'col-md-10 col-sm-9'">
+          <div class="card-body text-start">
+            <div class="row align-items-center">
+              <div class="col">
+                <h5 class="card-title text-warning fw-bold mb-0">{{ k }}</h5>
+              </div>
+              <div class="col-auto" v-if="date">
+                <span class="badge-pill date-badge">{{ date }}</span>
+              </div>
+              <div class="col-auto" v-if="author">
+                <span class="badge-pill author-badge">{{ author }}</span>
+              </div>
+            </div>
+            <p class="card-text mt-2 mb-2">
+              <slot></slot>
+            </p>
+            <div v-if="tags && tags.length > 0">
+              <span v-for="tag in tags" :key="tag" class="tag-tab">{{ tag }}</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.card-h-wrapper {
+  display: block;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.card {
+  background-color: var(--bs-dark);
+  color: var(--bs-light);
+  border: 1px solid var(--bs-border-color);
+}
+
+.card:hover {
+  background-color: var(--bs-secondary-bg, #2d2d2d);
+  color: var(--bs-light);
+  border: 1px solid var(--bs-primary);
+  box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.3);
+}
+
+.image-col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+.card-img {
+  max-width: 100%;
+  max-height: 120px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.card-img-placeholder {
+  width: 100%;
+  max-width: 120px;
+  height: 100px;
+  background-color: var(--bs-secondary-bg, #2d2d2d);
+  border: 1px dashed var(--bs-border-color, #444);
+  border-radius: 4px;
+}
+
+.tag-tab {
+  display: inline-block;
+  font-size: 0.75rem;
+  padding: 0.2em 0.8em;
+  background: var(--bs-secondary-bg, #2d2d2d);
+  color: var(--bs-info);
+  border-radius: 1em;
+  border: 1px solid var(--bs-info);
+  margin-right: 0.25em;
+  margin-bottom: 0.2em;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.tag-tab:hover {
+  background: var(--bs-info);
+  color: var(--bs-dark);
+}
+
+.badge-pill {
+  display: inline-block;
+  font-size: 0.75rem;
+  padding: 0.2em 0.8em;
+  border-radius: 1em;
+  margin-right: 0.25em;
+  margin-bottom: 0.2em;
+}
+
+.date-badge {
+  background: var(--bs-secondary-bg, #2d2d2d);
+  color: var(--bs-info);
+  border: 1px solid var(--bs-info);
+}
+
+.author-badge {
+  background: var(--bs-secondary-bg, #2d2d2d);
+  color: var(--bs-warning);
+  border: 1px solid var(--bs-warning);
+}
+</style>

package/components/xcard.vue

@@ -0,0 +1,76 @@
+<script setup>
+/*
+<x-card k="Title">Content here</x-card>
+<x-card k="Title" img-src="/path/to/image.png">Content here</x-card>
+<x-card k="Title" :no-image="true">Content here</x-card>
+*/
+
+const props = defineProps({
+  k: String,
+  imgSrc: {
+    type: String,
+    default: null
+  },
+  imgAlt: {
+    type: String,
+    default: 'Card image'
+  },
+  noImage: {
+    type: Boolean,
+    default: false
+  }
+})
+
+</script>
+
+
+<template>
+  <div class="card h-100">
+    <!-- Show image if imgSrc is provided -->
+    <img :src="imgSrc" class="card-img-top" :alt="imgAlt" v-if="imgSrc">
+    <!-- Show placeholder if no imgSrc and noImage is false -->
+    <div class="card-img-placeholder" v-else-if="!noImage"></div>
+    <div class="card-body text-center">
+      <h5 class="card-title text-warning fw-bold">{{ k }}</h5>
+      <p class="card-text">
+        <slot></slot>
+      </p>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.card-img-top {
+  max-width: 200px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 1rem;
+}
+
+.card-img-placeholder {
+  width: 200px;
+  height: 150px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1rem;
+  background-color: var(--bs-secondary-bg, #e9ecef);
+  border: 1px dashed var(--bs-border-color, #dee2e6);
+  border-radius: 4px;
+}
+
+.card {
+  background-color: var(--bs-dark);
+  color: var(--bs-light);
+  border: 1px solid var(--bs-border-color);
+}
+
+.card:hover {
+  background-color: var(--bs-secondary-bg, #2d2d2d);
+  color: var(--bs-light);
+  border: 1px solid var(--bs-primary);
+  box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.3);
+}
+</style>

package/components/xcheck.vue

@@ -0,0 +1,35 @@
+<script setup>
+/*
+Output Only, used as an indicator.
+<x-check k="My Check Box" :v="local.myCheckBox"></x-check>
+*/
+
+import {reactive, computed} from 'vue'
+
+const props = defineProps({
+  v: Boolean,
+})
+
+const emit = defineEmits(['click'])
+
+function onClick() {
+  emit("click", props.v)
+}
+
+</script>
+
+
+<template >
+  <button class="btn btn-sm"
+          :class="{'btn-dark': !(props.v), 'btn-success': (props.v)}"
+          @click="onClick()" >
+            <span class="icon">
+                <i class="fa-solid fa-check" v-if="props.v"></i>
+                <i class="fa-solid fa-x" v-else></i>
+            </span>
+  </button>
+</template>
+
+<style scoped>
+</style>
+