c0ckp1t 1.0.0

package/components/xsound.vue

@@ -0,0 +1,251 @@
+<script setup>
+import { reactive, computed, markRaw, onMounted, onBeforeUnmount } from 'vue'
+import XDropdown2 from '/components/xdropdown2.vue'
+
+// https://wavesurfer-js.org/docs/
+// NOTE: streaming not supported?
+import WaveSurfer from '/js_ext/wavesurfer.esm.mjs'
+
+const STATE = {
+    INIT: "INIT",
+    LOADING: "LOADING",
+    READY: "READY",
+    PLAYING: "PLAYING",
+    PAUSED: "PAUSED",
+}
+
+//--------------------------------------------------------------------------------------
+// PROPERTIES
+//--------------------------------------------------------------------------------------
+const props = defineProps({
+    url: String,
+    id: String,
+    autoLoad: Boolean
+})
+
+// ________________________________________________________________________________
+// LOCAL STATE
+// ________________________________________________________________________________
+const local = reactive({
+    state: STATE.INIT,
+    loadingProgress: 0,
+    wavesurfer: null,
+    currentTime: 0,
+    duration: 0,
+    playbackRate: '1',
+})
+
+// Playback rate options for dropdown
+const playbackRateOptions = [
+    { k: '0.5x', v: '0.5' },
+    { k: '0.75x', v: '0.75' },
+    { k: '1x', v: '1' },
+    { k: '1.25x', v: '1.25' },
+    { k: '1.5x', v: '1.5' },
+    { k: '2x', v: '2' },
+]
+
+// ________________________________________________________________________________
+// COMPUTED
+// ________________________________________________________________________________
+const buttonText = computed(() => {
+    if (local.state === STATE.INIT) return "LOAD"
+    if (local.state === STATE.LOADING) return "LOADING..."
+    if (local.state === STATE.PLAYING) return "PAUSE"
+    return "PLAY"
+})
+
+const buttonIcon = computed(() => {
+    if (local.state === STATE.INIT) return "fa-download"
+    if (local.state === STATE.LOADING) return "fa-spinner fa-spin"
+    if (local.state === STATE.PLAYING) return "fa-pause"
+    return "fa-play"
+})
+
+const formattedCurrentTime = computed(() => formatTime(local.currentTime))
+const formattedDuration = computed(() => formatTime(local.duration))
+
+// ________________________________________________________________________________
+// HELPER FUNCTIONS
+// ________________________________________________________________________________
+function formatTime(seconds) {
+    if (!seconds || isNaN(seconds)) return "0:00"
+    const mins = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+//--------------------------------------------------------------------------------------
+// WAVE SURFER
+//--------------------------------------------------------------------------------------
+
+// must be created after mounted
+async function buildDOMForWaveSurfer() {
+  const rootStyles = getComputedStyle(document.documentElement)
+  const waveColor = rootStyles.getPropertyValue('--bs-secondary').trim() || '#6c757d'
+  const progressColor = rootStyles.getPropertyValue('--bs-info').trim() || '#0dcaf0'
+
+  const wavesurfer = WaveSurfer.create({
+        container: `#waveId${props.id}`,
+        waveColor: waveColor,
+        progressColor: progressColor,
+        hideScrollbar: true,
+        height: 48,
+        barWidth: 2,
+        barGap: 1,
+        barRadius: 2,
+        xhr: {
+            mode: "cors",
+        }
+    });
+    local.wavesurfer = markRaw(wavesurfer)
+
+    // Event listeners
+    wavesurfer.on("finish", function () {
+        local.state = STATE.PAUSED
+    })
+
+    wavesurfer.on("error", function (error) {
+        console.error("WaveSurfer ERROR:", error)
+        local.state = STATE.INIT
+    })
+
+    wavesurfer.on('loading', function (progress) {
+        local.loadingProgress = progress
+    })
+
+    wavesurfer.on('ready', function () {
+        local.state = STATE.PAUSED
+        local.duration = wavesurfer.getDuration()
+    })
+
+    wavesurfer.on('play', function () {
+        local.state = STATE.PLAYING
+    })
+
+    wavesurfer.on('pause', function () {
+        local.state = STATE.PAUSED
+    })
+
+    wavesurfer.on('timeupdate', function (currentTime) {
+        local.currentTime = currentTime
+    })
+}
+
+// ________________________________________________________________________________
+// METHODS
+// ________________________________________________________________________________
+function loadFromURL() {
+    local.wavesurfer.load(props.url)
+}
+
+function clickPlayPause() {
+    if (local.state === STATE.INIT) {
+        loadFromURL()
+        local.state = STATE.LOADING
+    } else {
+        local.wavesurfer.playPause()
+    }
+}
+
+function onPlaybackRateChange(value) {
+    if (value && local.wavesurfer) {
+        const rate = parseFloat(value)
+        local.wavesurfer.setPlaybackRate(rate, true) // true = preserve pitch
+    }
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+    await buildDOMForWaveSurfer()
+    if (props.autoLoad === true) { loadFromURL() }
+}
+
+onMounted(async () => { init() })
+onBeforeUnmount(() => {
+    if (local.wavesurfer) {
+        local.wavesurfer.destroy()
+    }
+})
+</script>
+
+
+<template>
+    <div class="xsound-player" v-if="id">
+        <!-- Waveform -->
+        <div class="waveform-container">
+            <div :id="'waveId' + props.id"></div>
+        </div>
+        
+        <!-- Controls Row -->
+        <div class="controls-row d-flex align-items-center justify-content-between">
+            <!-- Play/Pause Button -->
+            <button 
+                @click="clickPlayPause" 
+                class="btn btn-outline-secondary btn-xs"
+                :disabled="local.state === STATE.LOADING"
+            >
+                <i class="fa-solid" :class="buttonIcon"></i>
+                <span class="ms-1">{{ buttonText }}</span>
+            </button>
+            
+            <!-- Time Display -->
+            <div class="time-display small mx-2">
+                <span class="font-monospace">{{ formattedCurrentTime }} / {{ formattedDuration }}</span>
+            </div>
+            
+            <!-- Playback Rate -->
+            <XDropdown2
+                v-model="local.playbackRate"
+                :items="playbackRateOptions"
+                :on-change="onPlaybackRateChange"
+                default-label="Speed"
+                k=""
+                max-width="80px"
+            />
+        </div>
+    </div>
+</template>
+
+
+<!-- ________________________________________________________________________________ -->
+<!-- STYLE -->
+<!-- ________________________________________________________________________________ -->
+<style scoped>
+.xsound-player {
+    border: 1px solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    background-color: var(--bs-body-bg);
+}
+
+.waveform-container {
+    min-height: 48px;
+    padding: 0.25rem 0.5rem;
+}
+
+.controls-row {
+    padding: 0.25rem 0.5rem;
+    border-top: 1px solid var(--bs-border-color);
+    gap: 0.5rem;
+}
+
+.btn-xs {
+    padding: 0.1rem 0.4rem;
+    font-size: 0.75rem;
+    line-height: 1.2;
+    min-width: 70px;
+}
+
+.time-display {
+    flex-shrink: 0;
+    font-size: 0.75rem;
+}
+
+:deep(.xdropdown2 .form-select) {
+    padding: 0.1rem 1.5rem 0.1rem 0.4rem;
+    font-size: 0.75rem;
+    line-height: 1.2;
+}
+</style>

package/components/xtable-open.vue

@@ -0,0 +1,179 @@
+<script setup>
+/*
+      <x-table-open :exclude="[]" :arr="local.myTableData" v-slot="slotProps">
+        {{ local.myTableData[slotProps.v] }}
+      </x-table-open>
+
+<div v-if="local.myTableData.length === 0">
+   <h3>No Items</h3>
+ </div>
+
+      <x-table-open :exclude="[]" :arr="local.myTableData" >
+
+        <template v-slot:name="props">
+          <span style="font-weight: bold">{{props}}</span>
+        </template>
+
+        <template v-slot:default="slotProps">
+          <span > {{slotProps}}</span>
+        </template>
+
+      </x-table-open>
+
+*/
+
+// ________________________________________________________________________________
+// IMPORT
+// ________________________________________________________________________________
+import {computed, onMounted, reactive, watch} from 'vue';
+
+const props = defineProps({
+  // expect an array of Objects
+  arr: {
+    type: Array,
+    default: []
+  },
+  idField: {
+    type: String,
+    default: "id"
+  },
+  exclude: {
+    type: Array,
+    default: []
+  },
+  // slots: {
+  //   type: Array,
+  //   default: []
+  // },
+  noOpen: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['select'])
+
+// ________________________________________________________________________________
+// LOCAL STATE
+// ________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+  id: "xtable-open",
+
+  componentKey: 0,
+  selectedId: null,
+  // namedSlots: new Set(props.slots)
+})
+
+watch(() => props.arr.length, (newArr) => {
+  local.selectedId = null
+}, { deep: true })
+
+const partA = computed(() => {
+  // console.log(`part A slicing ${local.selectedId}`)
+  const id = local.selectedId
+  if (id === null) {
+    return props.arr
+  } else {
+    return props.arr.slice(0, id+1);
+  }
+})
+
+const partB = computed(() => {
+  // console.log(`part B slicing ${local.selectedId}`)
+  const id = local.selectedId
+  if (id === null) {
+    return [];
+  } else {
+    return props.arr.slice(id+1);
+  }
+})
+
+function rowSelect(id) {
+  if(props.noOpen === true) return
+  // console.log(`[${local.id}] - selected - ${id}`)
+  if (local.selectedId === id) {
+    local.selectedId = null
+  } else {
+    local.selectedId = id
+  }
+  emit('select', local.selectedId)
+}
+
+// Get keys from the first element of arr
+const keys = computed(() => {
+  if (props.arr !== null && props.arr !== undefined && props.arr.length > 0) {
+    return Object.keys(props.arr[0]).filter (key => !props.exclude.includes(key))
+  } else {
+    return []
+  }
+})
+
+
+// ________________________________________________________________________________
+// METHODS
+// ________________________________________________________________________________
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+}
+
+onMounted(async () => {
+  init()
+})
+
+</script>
+
+
+<template>
+  <div >
+
+    <table class="table table-hover">
+      <thead>
+      <tr>
+        <th scope="col" v-for="k in keys">{{ k }}</th>
+      </tr>
+      </thead>
+
+      <tbody>
+      <tr v-for="(item, i) in partA" :key="item.id" @click.prevent="rowSelect(i)"
+          :class="{'table-active': local.selectedId === i}">
+
+        <td v-for="k in keys" >
+          <span v-if="Object.keys($slots).includes(k)">
+            <slot :idx="i" :v="item[k]" :name="k" :rowId="item[props.idField]">N/A</slot>
+          </span>
+          <span v-else>
+          {{ item[k] }}
+          </span>
+        </td>
+      </tr>
+
+      <tr  v-if="local.selectedId !== null">
+        <td  :colspan="keys.length">
+          <slot  :v="local.selectedId" :rowId="props.arr[local.selectedId][props.idField]"></slot>
+        </td>
+      </tr>
+
+      <tr  v-for="(item,i) in partB" :key="item.id" @click.prevent="rowSelect(local.selectedId + 1 + i)"
+          :class="{'table-active': local.selectedId === i}">
+
+        <td v-for="k in keys" >
+          <span v-if="Object.keys($slots).includes(k)">
+            <slot :idx="i" :v="item[k]" :name="k" :rowId="item[props.idField]">N/A</slot>
+          </span>
+          <span v-else>
+          {{ item[k] }}
+          </span>
+        </td>
+
+      </tr>
+
+
+      </tbody>
+    </table>
+
+  </div>
+</template>

package/components/xtabs.vue

@@ -0,0 +1,72 @@
+<script setup>
+/*
+      <x-tabs>
+
+        <template #header>
+          <h1>Header</h1>
+        </template>
+
+        <template #footer>
+          <h4>Footer</h4>
+        </template>
+
+      </x-tabs>
+ */
+import {ref, getCurrentInstance, computed} from 'vue'
+
+const activeTab = ref(0)
+const instance = getCurrentInstance()
+// Automatically gather slot names and titles
+const tabs = computed(() => {
+  if (!instance?.slots) return []
+  return Object.entries(instance.slots)
+      .filter(([slotName]) => slotName !== 'default') // Ignore default slot (i.e only consider named slots)
+      .map(([name, slotFn]) => {
+        const vnodes = slotFn() // Render the slot to get children VNodes
+        const firstVNode = vnodes.find(vn => typeof vn.type !== 'symbol') // Ignore text/comments
+        // Extract title if present in the first element
+        const title = firstVNode?.props?.title || name
+        return { name, title }
+      })
+})
+</script>
+
+<template>
+  <div class="x-tabs">
+
+    <ul class="nav nav-tabs" role="tablist">
+      <li v-for="(tab, index) in tabs" :key="tab.name" class="nav-item" role="presentation">
+        <a
+            class="nav-link"
+            :class="{ active: activeTab === index }"
+            :href="`#${tab.name}`"
+            data-bs-toggle="tab"
+            :aria-selected="activeTab === index"
+            :tabindex="activeTab === index ? undefined : -1"
+            role="tab"
+            @click.prevent="activeTab = index"
+        >
+          {{ tab.title }}
+        </a>
+      </li>
+    </ul>
+
+    <div class="tab-content p-3 border-top-0 border">
+      <div
+          v-for="(tab, index) in tabs"
+          :key="tab.name"
+          :id="tab.name"
+          class="tab-pane fade"
+          :class="{ 'show active': activeTab === index }"
+          role="tabpanel"
+      >
+        <slot :name="tab.name"></slot>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>