@open-commune/web 0.1.3

package/components/data/lists/data-lists-table.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="w-full">
+    <table class="table-auto w-full h-12">
+      <thead
+        v-if="displayHeader"
+        class="bg-gray-50 border border-gray-200 rounded-md"
+      >
+        <tr>
+          <th
+            v-for="({ title, property, alignRight = false }) in headers"
+            :key="property"
+            scope="col"
+            class="px-4 py-4 text-left text-xs font-light text-gray-500 uppercase tracking-wider"
+            :class="alignRight ? 'text-right' : 'text-left'"
+          >
+            {{ title }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        <tr
+          v-for="(item, i) in items"
+          :key="i"
+          class="hover:bg-gray-50"
+        >
+          <td
+            v-for="({ property, component, componentOptions, nestedValue = true, alignRight = false }) in headers"
+            :key="property"
+            :class="alignRight ? 'text-right' : 'text-left'"
+            class="flex-row items-center px-4 py-3"
+          >
+            <data-badge
+              v-if="component === 'data-badge'"
+              v-bind="componentOptions"
+              :value="nestedValue ? item[property] : item"
+              @click="$emitters('update', item)"
+            />
+            <data-label
+              v-if="component === 'data-label'"
+              v-bind="componentOptions"
+              :value="nestedValue ? item[property] : item"
+              @click="$emitters('update', item)"
+            />
+            <data-last-update
+              v-if="component === 'data-last-update'"
+              v-bind="componentOptions"
+              :value="nestedValue ? item[property] : item"
+              @click="$emitters('update', item)"
+            />
+            <data-text
+              v-if="component === 'data-text'"
+              v-bind="componentOptions"
+              :value="nestedValue ? item[property] : item"
+              @click="$emitters('update', item)"
+            />
+            <!-- <data-color
+              v-if="component === 'data-color'"
+              v-bind="componentOptions"
+              :value="nestedValue ? item[property] : item"
+              class="hidden lg:block"
+              @click="$emitters('update', item)"
+            />
+            -->
+            <data-summary
+              v-if="component === 'data-summary'"
+              v-bind="componentOptions"
+              :value="nestedValue ? item[property] : item"
+              @click="$emitters('update', item)"
+            />
+            <data-toggle
+              v-if="component === 'data-toggle'"
+              v-bind="componentOptions"
+              :value="nestedValue ? item[property] : item"
+              @change="$emit(property, { ...item, [property]: $event })"
+            />
+            <dropdown-dots
+              v-else-if="component === 'actions' && enabledActions.length"
+              :options="enabledActions"
+              @action="$emitters($event, item)"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <button-secondary
+      v-if="displayPaginationButton"
+      class="w-full mt-2"
+      label="Plus de résultats"
+      @click="_displayMoreItem"
+    />
+  </div>
+</template>
+
+<script setup>
+import dataBadge from '~/components/data/display/row/data-badge'
+// import dataColor from '~/components/data/display/row/data-color'
+import dropdownDots from '~/components/elements/dropdowns/dots'
+import dataLabel from '~/components/data/display/row/data-label'
+import dataLastUpdate from '~/components/data/display/row/data-last-update'
+import dataSummary from '~/components/data/display/row/data-summary'
+import dataText from '~/components/data/display/row/data-text'
+import dataToggle from '~/components/data/display/row/data-toggle'
+import buttonSecondary from '~/components/elements/buttons/secondary'
+
+// Prepare constants
+const DOTS_OPTIONS = [
+  { label: 'Modifier', action: 'update' },
+  { label: 'Supprimer', action: 'remove' }
+]
+
+// Prepare emitters
+const $emitters = defineEmits(['update', 'remove', 'fetch-more', 'usage'])
+
+// Prepare props
+const $props = defineProps({
+  displayHeader: {
+    type: Boolean,
+    default: false
+  },
+  headers: {
+    type: Array,
+    default: () => []
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  actions: {
+    type: Array,
+    default: () => []
+  },
+  paginationSize: {
+    type: Number,
+    default: 10
+  },
+  paginatedContent: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Prepare reactive data
+const pagination = ref(1)
+
+// Prepare computed
+const enabledActions = computed(() => $props.actions.map(name => DOTS_OPTIONS.find(({ action }) => action === name)))
+const paginatedItems = computed(() =>  $props.paginatedContent ? $props.items.slice(0, $props.paginationSize * pagination.value) : $props.items)
+const displayPaginationButton = computed(() => $props.paginatedContent && pagination.value * $props.paginationSize <= paginatedItems.value.length)
+
+// Prepare methods
+const _displayMoreItem = async () => {
+  $emitters('fetch-more', pagination.value * $props.paginationSize)
+  pagination.value++
+}
+</script>

package/components/elements/avatars/avatar-circular.vue

@@ -0,0 +1,68 @@
+<template>
+  <span
+    class="relative inline-flex items-center justify-center rounded-full focus:outline-none border border-gray-100 text-white bg-black"
+    :class="containerSize"
+  >
+    <media-image v-if="media" :media-id="media" :organization="organization" class="inline-block w-full h-full rounded-full" />
+    <span v-else :class="textSize" class="leading-none">
+      {{ initials }}
+    </span>
+  </span>
+</template>
+
+<script setup>
+import mediaImage from '@/components/elements/media/image'
+
+// Prepare props
+const $props = defineProps({
+  organization: {
+    type: String,
+    default: ''
+  },
+  media: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: 'xs'
+  },
+  placeHolder: {
+    type: String,
+    default: ''
+  }
+})
+
+// Prepare computed data
+const containerSize = computed(() => {
+  const sizes = {
+    xs: 'h-6 w-6',
+    sm: 'h-8 w-8',
+    md: 'h-10 w-10',
+    lg: 'h-12 w-12',
+    xl: 'h-14 w-14',
+    '2xl': 'h-16 w-16',
+    '3xl': 'h-20 w-20',
+    '4xl': 'h-24 w-24',
+    '5xl': 'h-28 w-28',
+    '6xl': 'h-32 w-32'
+  }
+  return sizes[$props.size]
+})
+const textSize = computed(() => {
+  const sizes = {
+    xs: 'text-2xs',
+    sm: 'text-8',
+    md: 'text-10',
+    lg: 'text-12',
+    xl: 'text-14',
+    '2xl': 'text-16',
+    '3xl': 'text-20',
+    '4xl': 'text-24',
+    '5xl': 'text-28',
+    '6xl': 'text-32'
+  }
+  return sizes[$props.size]
+})
+const initials = computed(() => $props.placeHolder.match(/(\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase())
+</script>

package/components/elements/avatars/avatar-with-text.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="inline-flex items-center justify-start rounded-md hover:bg-gray-100 p-1"
+    @click="$emitters('click')"
+  >
+    <avatar-circular
+      v-if="!noAvatar"
+      :size="'xs'"
+      :place-holder="fullName"
+      :media="avatar"
+    />
+    <div class="text-sm truncate">
+      {{ prefix }}{{ fullName }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import avatarCircular from '~/components/elements/avatars/avatar-circular'
+
+// Prepare emitters
+const $emitters = defineEmits(['click'])
+
+// Prepare props
+const $props = defineProps({
+  prefix: {
+    type: String,
+    default: ''
+  },
+  noAvatar: {
+    type: Boolean,
+    default: false
+  },
+  user: {
+    type: Object,
+    default: () => ({})
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Prepare computed
+const fullName = computed(() => [$props.user?.firstName, $props.user?.lastName].join(' '))
+const avatar = computed(() => $props.user?.avatar)
+</script>

package/components/elements/badges/badge.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    :style="border ? `border-color: ${background};` : `background-color: ${background}; color: ${_textColor(background)};`"
+    class="relative inline-flex items-center text-xs h-6 font-light px-2 py-0.5 rounded-full text-gray-900 border border-white"
+    :class="{ 'pl-5':dot }"
+    @click="$emitters('click', title)"
+  >
+    <span
+      v-show="dot"
+      class="absolute h-2 w-2 left-2 rounded-full"
+      :style="`background-color: ${background}`"
+    />
+    <icon
+      v-show="icon"
+      :icon="icon"
+      class="h-4 w-4 mr-2"
+    />
+    {{ title }}
+  </div>
+</template>
+
+<script setup>
+import { Icon } from '@iconify/vue'
+
+const $emitters = defineEmits(['click'])
+
+// Prepare props
+const $props = defineProps({
+  dot: {
+    type: Boolean,
+    default: false
+  },
+  border: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: ''
+  }
+})
+
+// Thématique sans couleur (ou blanche) : repli sur un gris neutre lisible au
+// lieu d'une pastille blanche invisible (upgrade-admin-nuxt4).
+const FALLBACK_COLOR = '#e5e7eb'
+const background = computed(() => {
+  const color = ($props.color || '').trim()
+  return !color || ['#ffffff', '#fff', 'white'].includes(color.toLowerCase())
+    ? FALLBACK_COLOR
+    : color
+})
+
+// prepare methods
+const _textColor = (backgroundColor) => {
+  // hex (#rgb / #rrggbb) OU rgb() — l'ancien parseur ne lisait que rgb() et
+  // rendait du texte illisible sur les couleurs claires exprimées en hex.
+  let rgb
+  const hex = backgroundColor?.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i)?.[1]
+  if (hex) {
+    const full = hex.length === 3 ? hex.split('').map((c) => c + c).join('') : hex
+    rgb = [full.slice(0, 2), full.slice(2, 4), full.slice(4, 6)].map((part) => parseInt(part, 16))
+  } else {
+    rgb = backgroundColor?.match(/\d+/g)?.map(Number)
+  }
+
+  if (!rgb || rgb.length < 3) {
+    return '#000'
+  }
+
+  // Calculate the relative luminance using the formula
+  // (source: https://www.w3.org/TR/WCAG20/#relativeluminancedef)
+  const luminance = (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) / 255;
+
+  // Return white (#fff) or black (#000) based on the contrast ratio
+  return luminance > 0.5 ? '#000' : '#fff';
+}
+</script>

package/components/elements/buttons/primary.vue

@@ -0,0 +1,32 @@
+<template>
+  <button
+    :type="type"
+    :disabled="loading"
+    class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm text-white dark:text-black bg-black dark:bg-white hover:bg-white dark:hover:bg-gray-950 hover:text-black dark:hover:text-white focus:outline-none hover:border-black dark:hover:border-gray-700 disabled:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400"
+    @click="$emit('click')"
+  >
+    <icon v-if="loading" icon="ei:spinner-2" class="animate-spin h-6 w-6 mr-1" />
+    {{ label }}
+  </button>
+</template>
+
+<script setup>
+import { Icon } from '@iconify/vue'
+
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'button'
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const $emit = defineEmits(['click'])
+</script>

package/components/elements/buttons/secondary.vue

@@ -0,0 +1,35 @@
+<template>
+  <button
+    :type="type"
+    class="px-4 py-2 border border-gray-200 shadow-xs rounded-md text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"
+    @click="$emit('click')"
+  >
+    <icon
+      v-show="icon"
+      :icon="icon"
+      class="h-5 w-5 text-gray-700"
+    />
+    {{ label }}
+  </button>
+</template>
+
+<script setup>
+import { Icon } from '@iconify/vue'
+
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'button'
+  },
+  icon: {
+    type: String,
+    default: ''
+  }
+})
+
+const $emit = defineEmits(['click'])
+</script>

package/components/elements/buttons/tertiary.vue

@@ -0,0 +1,25 @@
+<template>
+  <button
+    type="button"
+    class="px-4 py-2 border border-transparent rounded-md text-sm text-gray-500 bg-white hover:underline hover:bg-white hover:text-black focus:outline-none"
+    @click="$emit('click')"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'button'
+  }
+})
+
+const $emit = defineEmits(['click'])
+</script>
+

package/components/elements/dropdowns/dots.vue

@@ -0,0 +1,75 @@
+<template>
+  <div v-if="options.length" class="relative inline-block text-left">
+    <button
+      id="options-menu"
+      class="rounded-full flex items-center focus:outline-none cursor-pointer"
+      aria-haspopup="true"
+      aria-expanded="true"
+      @click.prevent="_toggle"
+    >
+      <span class="sr-only">Open options</span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
+      </svg>
+    </button>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="display"
+        ref="dropdownDots"
+        class="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 z-10"
+      >
+        <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+          <div
+            v-for="({ label, action }) in options"
+            :key="action"
+            class="block px-4 pr-16 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer"
+            role="menuitem"
+            @click="_select(action)"
+          >
+            {{ label }}
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { onClickOutside } from '@vueuse/core'
+
+defineProps({
+  options: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Prepare dynamic emitters
+const $emitters = defineEmits(['action'])
+
+// Prepare reactive data
+const dropdownDots = ref(null)
+const display = ref(false)
+
+// Prepare methods
+const _toggle = () => {
+  display.value = !display.value
+}
+const _close = () => {
+  display.value = false
+}
+const _select = (action) => {
+  _close()
+  $emitters('action', action)
+}
+
+// Prepare directives
+onClickOutside(dropdownDots, _close)
+</script>

package/components/elements/media/image.vue

@@ -0,0 +1,82 @@
+<template>
+  <img
+    :src="originalUrl"
+    :srcset="srcSetUrls"
+    :alt="name"
+  >
+</template>
+
+<script setup>
+// import { Icon } from '@iconify/vue2'
+import { computedAsync } from '@vueuse/core'
+import axios from 'axios'
+
+const { Media } = useModels()
+
+// Prepare props
+const $props = defineProps({
+  organization: {
+    type: String,
+    default: ''
+  },
+  mediaId: {
+    type: String,
+    default: ''
+  }
+})
+
+// Prepare reactive data
+const media = ref(undefined)
+
+// Prepare computed
+const name = computed(() => media.value?.name)
+const originalUrl = computed(() => media.value?.objects?.original)
+const srcSetUrls = computedAsync(async () => {
+  const filteredUrls = [];
+  const objects = media.value?.objects || {};
+
+  for (const [key, url] of Object.entries(objects)) {
+    if (!key.includes('original') && !key.includes('thumb')) {
+      try {
+        // Perform a GET request on the URL to ensure file exist
+        await axios({
+          method: 'GET',
+          url,
+          headers: {
+            'Range': 'bytes=0-0'
+          }
+        })
+
+        const [, width] = key.split('-');
+        filteredUrls.push(`${url} ${width}w`)
+      } catch (err) {
+        console.log('Media thumb does not exist yet.')
+      }
+    }
+  }
+
+  return filteredUrls.join(', ');
+});
+
+// Prepare methods
+const _getMediaRecord = async (_id) => {
+  let data
+  [data] = Media.repo.query().where('_id', _id).get()
+  console.log(data)
+  if (!data) {
+    (data = await Media.read(_id, undefined, $props.organization))
+  }
+  media.value = data
+}
+
+// Prepare watchers
+watch(
+  () => $props.mediaId,
+  async (newValue) => {
+    if (newValue) {
+      await _getMediaRecord(newValue)
+    }
+  },
+  { immediate: true }
+)
+</script>

package/components/elements/notifications/default.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="relative w-full pointer-events-auto p-4 bg-black text-white rounded-md shadow-xs ring-1 ring-gray-200 dark:ring-gray-800">
+    <div class="flex flex-row items-start">
+      <icon v-if="icon" :icon="icon" class="h-6 w-6 mr-1" />
+      <p>
+        {{ title }}
+      </p>
+    </div>
+    <div class="absolute bottom-0 w-full end-0 start-0 bg-gray-800 rounded-b-md">
+      <div v-if="timeout" class="h-1 bg-white rounded-bl-md" :style="progressStyle" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon } from '@iconify/vue'
+import useTimer from '~/composables/use-timer'
+
+// Prepare props
+const $props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    enum: ['default', 'info', 'warn', 'error'],
+    default: 'default'
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  closeButton: {
+    type: Boolean,
+    default: false
+  },
+  timeout: {
+    type: Number,
+    default: 6000
+  },
+  loader: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Prepare emitters
+const $emitters = defineEmits(['close'])
+
+// Prepare reactive data
+let timer = null
+const remaining = ref($props.timeout)
+
+// Prepare computed
+const progressStyle = computed(() => {
+  const remainingPercent = remaining.value / $props.timeout * 100
+
+  return { width: `${remainingPercent || 0}%` }
+})
+
+// Prepare methods
+const _onClose = () => {
+  if (timer) {
+    timer.stop()
+  }
+  $emitters('close')
+}
+
+// Prepare lifecycly hooks
+onMounted(() => {
+  if ($props.timeout) {
+    timer = useTimer(_onClose, $props.timeout)
+
+    watchEffect(() => {
+      remaining.value = timer.remaining.value
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (timer) {
+    timer.stop()
+  }
+})
+</script>