@open-commune/web 0.1.3

package/components/forms/inputs/input-location.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="relative">
+    <div class="relative">
+      <input-text
+        :auto-complete="'street-address'"
+        :label="label"
+        :name="name"
+        :place-holder="placeHolder"
+        :value="search || selection.address"
+        @change="search = $event"
+      />
+      <transition
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="display && places.length"
+          ref="dropdown"
+          class="absolute mt-1 w-full rounded-md bg-white shadow-lg z-50"
+        >
+          <ul tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-item-3" class="max-h-60 rounded-md py-1 text-base ring-1 ring-black/5 overflow-auto focus:outline-none sm:text-sm">
+            <li
+              v-for="({ id, place }, i) in places"
+              :id="`listbox-item-${i}`"
+              :key="id"
+              class="cursor-default select-none relative py-2 pl-4 pr-4 hover:text-white hover:bg-indigo-600 text-gray-900"
+              role="option"
+              @click="_select(id)"
+            >
+              <span class="font-normal block truncate">
+                {{ place }}
+              </span>
+            </li>
+          </ul>
+        </div>
+      </transition>
+    </div>
+    <div class="w-full mt-2 border border-gray-200 rounded-md" style="min-height: 18rem;">
+      <div id="map" class="w-full h-full" style="min-height: 18rem;" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onClickOutside, useDebounceFn } from '@vueuse/core'
+import axios from 'axios'
+import mapbox, { Map, Marker } from 'mapbox-gl'
+import inputText from '~/components/forms/inputs/input-text'
+
+// Prepare composable
+const $config = useRuntimeConfig()
+
+// Prepare $emitters
+const $emitters = defineEmits(['change'])
+
+// Prepare props
+const $props = defineProps({
+  name: {
+    type: String,
+    default: ''
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  placeHolder: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// Prepare constant
+const MAPBOX_CLIENT = axios.create({ baseURL: 'https://api.mapbox.com/geocoding/v5/mapbox.places' })
+
+// Prepare data
+const dropdown = ref(undefined)
+const map = ref(undefined)
+const marker = ref(undefined)
+const search = ref('')
+const list = ref([])
+const selection = ref({})
+const display = ref(false)
+const isLoading = ref(false)
+
+// Prepare computed
+const places = computed(() => list.value.map(({ id, place_name_fr: place, center }) => ({ id, place, center })))
+
+// Prepare methods
+const _createMap = () => {
+  mapbox.accessToken = $config.public.mapBoxToken
+  map.value = new Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/light-v11?optimized=true',
+    zoom: 13,
+    center: selection.value?.coordinates,
+    attributionControl: false,
+    interactive: true
+  })
+  map.value.on('load', _updateMarker)
+}
+const _updateMarker = () => {
+  if (selection.value?.coordinates?.length) {
+    marker.value = new Marker({ color: '#000' })
+      .setLngLat(selection.value?.coordinates)
+      .addTo(map.value)
+    map.value.flyTo({ center: selection.value.coordinates })
+  }
+}
+const _findLocation = useDebounceFn(async () => {
+  if (!isLoading.value && search.value) {
+    isLoading.value = true
+    try {
+      const { data: { features } } = await MAPBOX_CLIENT.get(
+        `/${search.value}.json?access_token=${$config.public.mapBoxToken}&types=postcode,district,place,locality,neighborhood,address,poi&autocomplete=true&country=fr&language=fr`
+      )
+      list.value = [...features]
+    } catch (err) {
+      console.log(err)
+    } finally {
+      isLoading.value = false
+    }
+  }
+}, 300)
+const _select = (id) => {
+  const { place_name_fr: address, center: coordinates } = list.value.find(({ id: check }) => check === id) || {}
+  if (address && coordinates) {
+    selection.value = {
+      address,
+      coordinates
+    }
+    _updateMarker()
+    _close()
+    $emitters('change', selection.value)
+  }
+}
+const _toggle = () => {
+  display.value = !display.value
+}
+const _close = () => {
+  search.value = ''
+  display.value = false
+}
+
+// Prepare watchers
+watch(
+  search,
+  (newValue) => {
+    if (newValue && newValue !== selection.value?.address) {
+      if (!display.value) {
+        _toggle()
+      }
+      _findLocation(newValue)
+    } else {
+      _close()
+    }
+  }
+)
+watch(
+  () => $props.value,
+  (newValue) => {
+    if (newValue.address && newValue.coordinates) {
+      selection.value = {
+        address: newValue.address,
+        coordinates: newValue.coordinates,
+      }
+    }
+  },
+  { immediate: true }
+)
+
+// Prepare lifecycle hooks
+onMounted(_createMap)
+onClickOutside(dropdown, _close)
+</script>

package/components/forms/inputs/input-text-area.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <label
+      :for="name"
+      class="block text-2xs font-light tracking-wider text-gray-500 uppercase"
+    >
+      {{ label }}
+    </label>
+    <textarea
+      :id="name"
+      v-model="data"
+      :name="name"
+      :class="{ 'mt-1':!!label }"
+      :placeholder="placeHolder"
+      :disabled="readOnly"
+      rows="3"
+      class="w-full rounded-md py-2 px-3 shadow-xs border border-gray-200 focus:outline-none focus:ring-gray-50 focus:border-black sm:text-sm disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200"
+    />
+  </div>
+</template>
+
+<script setup>
+// Prepare $emitters
+const $emitters = defineEmits(['keyup.enter', 'change'])
+
+// Prepare $props
+const $props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: String,
+    default: 'input'
+  },
+  placeHolder: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: String,
+    default: ''
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Prepare reactive data
+const data = ref('')
+
+// Prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    data.value = newValue
+  },
+  { immediate: true }
+)
+watch(
+  data,
+  (newValue) => $emitters('change', newValue)
+)
+</script>

package/components/forms/inputs/input-text.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <label
+      :for="name"
+      class="block text-2xs font-light tracking-wider text-gray-500 uppercase"
+    >
+      {{ label }}
+    </label>
+    <div :class="{ 'mt-1':!!label }" class="relative block w-full">
+      <div v-if="icon" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5 text-gray-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            :d="icon"
+          />
+        </svg>
+      </div>
+      <input
+        :id="name"
+        v-model="inputValue"
+        :name="name"
+        :autocomplete="autoComplete"
+        :placeholder="placeHolder"
+        :class="{ 'pl-10':!!icon }"
+        :type="type"
+        :required="required"
+        :disabled="readOnly"
+        class="w-full rounded-md shadow-xs border border-gray-200 sm:text-sm py-2 px-3 focus:outline-none focus:ring-gray-50 focus:border-black disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200"
+        @keyup.enter="$emitters('enter')"
+      >
+      <!-- <p v-show="slugPreview" class="mt-1 ml-3 text-sm font-light text-gray-500">
+        Aperçu dans l'url {{ slugifyValue(data) }}
+      </p> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+// import slugify from 'slugify'
+// const slugifyOptions = {
+//   replacement: '-',
+//   lower: true,
+//   locale: 'fr',
+//   trim: true
+// }
+
+// Prepare $props
+const $props = defineProps({
+  autoComplete: {
+    type: String,
+    default: 'given-name'
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: String,
+    default: 'input'
+  },
+  type: {
+    type: String,
+    default: 'text'
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  placeHolder: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: String,
+    default: ''
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  slugPreview: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Prepare $emitters
+const $emitters = defineEmits(['keyup.enter', 'change'])
+
+// Prepare reactive $data
+const inputValue = ref('')
+
+// Prepare $watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    if (newValue !== inputValue.value) {
+      inputValue.value = newValue
+    }
+  },
+  { immediate: true }
+)
+watch(
+  inputValue,
+  (newValue) => $emitters('change', newValue)
+)
+
+// Prepare methods
+// const _slugify = (value) => slugify(value, slugifyOptions)
+</script>

package/components/forms/inputs/input-toggle.vue

@@ -0,0 +1,125 @@
+<template>
+  <li class="py-1 flex items-center justify-start">
+    <button
+      :class="{
+        '!bg-black': selected,
+        '!h-3 !w-6': small
+      }"
+      type="button"
+      class="bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
+      :aria-pressed="selected"
+      :aria-labelledby="`${name}-option-label`"
+      :aria-describedby="`${name}-option-description`"
+      @click="_toggle"
+    >
+      <span class="sr-only">{{ name }} setting</span>
+      <span
+        :class="{
+          'translate-x-5': selected && !small,
+          'translate-x-3 !-mr-0.5': selected && small,
+          '!-ml-0.5': !selected && small,
+          '!h-3 !w-3 -my-0.5': small
+        }"
+        aria-hidden="true"
+        class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+      >
+        <span
+          v-if="icon"
+          :class="selected ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200'"
+          class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+          aria-hidden="true"
+        >
+          <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+            <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </span>
+        <!-- Enabled: "", Not Enabled: "" -->
+        <span
+          v-if="icon"
+          :class="{
+            '!opacity-100 !ease-in !duration-200': selected,
+          }"
+          class="opacity-0 ease-out duration-100 absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+          aria-hidden="true"
+        >
+          <svg class="h-3 w-3 text-black" fill="currentColor" viewBox="0 0 12 12">
+            <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
+          </svg>
+        </span>
+      </span>
+    </button>
+    <div v-if="label || description" class="ml-4 text-left">
+      <p v-if="label" :id="`${name}-option-label`" class="block text-2xs font-light tracking-wider text-gray-500 uppercase">
+        {{ label }}
+      </p>
+      <p v-if="description" :id="`${name}-option-description`" class="text-sm text-gray-900">
+        {{ description }}
+      </p>
+    </div>
+  </li>
+</template>
+
+<script setup>
+// Prepare $emitters
+const $emitters = defineEmits(['keyup.enter', 'change'])
+
+// Prepare $props
+const $props = defineProps({
+  icon: {
+    type: Boolean,
+    default: true
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: String,
+    default: 'input'
+  },
+  defaultValue: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: [Boolean, Object],
+    default: undefined
+  },
+  small: {
+    type: Boolean,
+    default: false
+  },
+})
+
+// Prepare reactive data
+const selected = ref(false)
+
+// Prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    selected.value = newValue
+  },
+  { immediate: true }
+)
+watch(
+  selected,
+  (newValue) => $emitters('change', newValue)
+)
+
+// Prepare methods
+const _toggle = () => {
+  selected.value = !selected.value
+}
+
+// Prepare lifecycle methods
+onMounted(() => {
+  if (typeof $props.value === 'undefined') {
+    selected.value = $props.defaultValue
+  }
+})
+</script>

package/components/forms/inputs/media-section/media-editor.vue

@@ -0,0 +1,95 @@
+<template>
+  <li class="relative group">
+    <div
+      class="h-48 min-h-full w-full border border-gray-100 rounded-md shadow hover:border-gray-300"
+    >
+      <div v-if="!readOnly" class="absolute flex items-center justify-center right-0 top-0 p-1 mr-2 mt-2 rounded hover:bg-gray-300">
+        <dots-dropdown class="w-full h-full" :options="DOTS_ACTIONS" @action="_remove" />
+      </div>
+      <media-image v-if="media && mime.includes('image')" :media-id="value" class="object-cover object-center w-full h-full pointer-events-none !m-0" />
+      <p class="h-full w-full flex items-center justify-center text-gray-500" v-else>
+        {{ media?.originalName || 'Média non trouvé' }}
+      </p>
+    </div>
+    <!-- <div
+      v-else
+      class="flex items-center w-full h-full bg-gray-100 border border-gray-400 rounded text-center group-hover:border-black focus:outline-none"
+    >
+      <div v-if="!readOnly" class="absolute flex items-center justify-center right-0 top-0 p-1 mr-2 mt-2 rounded hover:bg-gray-300">
+        <dots-dropdown class="w-full h-full" :options="DOTS_ACTIONS" @remove="_remove" />
+      </div>
+      <media-image v-if="mime.includes('image')" :media-id="value" class="object-none object-center w-48 h-24 pointer-events-none !m-" />
+      <span class="pl-4 text-xs text-gray-900">
+        {{ name }}
+      </span>
+    </div> -->
+  </li>
+</template>
+
+<script setup>
+// import { Icon } from '@iconify/vue2'
+import dotsDropdown from '@/components/elements/dropdowns/dots'
+import mediaImage from '@/components/elements/media/image'
+
+const { Media } = useModels()
+
+// Prepare constants
+const DOTS_ACTIONS = [
+  {
+    label: 'Supprimer',
+    action: 'remove'
+  }
+]
+
+// Prepare
+const $emitters = defineEmits(['remove'])
+
+// Prepare props
+const $props = defineProps({
+  value: {
+    type: String,
+    default: ''
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Prepare reactive data
+const media = ref(undefined)
+
+// Prepare computed
+const mime = computed(() => media.value?.mime)
+
+// Prepare methods
+const _getMediaRecord = async (_id) => {
+  let data
+  [data] = Media.repo.query().where('_id', _id).get()
+  if (!data) {
+    (data = await Media.read(_id))
+  }
+  media.value = data
+}
+// TODO: refactor here to handle media edition
+const _remove = (action) => {
+  if (action === 'remove') {
+    $emitters('remove')
+  }
+}
+
+// Prepare watchers
+watch(
+  () => $props.value,
+  async (newValue) => {
+    if (newValue) {
+      await _getMediaRecord(newValue)
+    }
+  },
+  { immediate: true }
+)
+</script>