@sedoo/unidoo 0.1.75 → 0.2.0

package/dist/unidoo/vp-icons.css

@@ -0,0 +1 @@
+.vpi-social-github{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@sedoo/unidoo",
-  "version": "0.1.75",
+  "version": "0.2.0",
   "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
   "scripts": {
-    "build": "npm run build:unidoo && npm run build:auth",
-    "build:unidoo": "vue-cli-service build --target lib --dest dist/unidoo --name unidoo src/plugin.js",
+    "build": "npm run build:unidoo",
+    "build:unidoo": "vite build",
     "build:auth": "vue-cli-service build --target lib --dest dist/auth --name auth src/auth.js",
-    "lint": "vue-cli-service lint --fix && vue-cli-service lint dev --fix",
-    "docs:dev": "vuepress dev docs",
-    "docs:build": "vuepress build docs",
-    "publish:local": "eval $(grep '^CI_NPMJS_TOKEN' .env.local) && npm config set -- '//registry.npmjs.org/:_authToken' \"${CI_NPMJS_TOKEN}\" && npm publish --access public"
+    "lint": "vite lint --fix && vite lint dev --fix",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "publish:local": "eval $(grep '^CI_NPMJS_TOKEN' .env.local) && npm config set -- '//registry.npmjs.org/:_authToken' \"${CI_NPMJS_TOKEN}\" && npm publish --access public",
+    "docs:preview": "vitepress preview docs"
   },
   "comments": {
     "scripts": "The build and docs:build script are used in the continuous integration process. They musn't be removed."
@@ -20,47 +25,33 @@
     "src/**/*"
   ],
   "dependencies": {
+    "axios": "^1.19.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^1.3.8",
     "dompurify": "^3.2.4",
-    "keycloak-js": "^8.0.2",
+    "keycloak-js": "^26.2.3",
     "marked": "^0.8.2",
+    "mitt": "^3.0.1",
     "moment": "^2.30.1",
     "ol": "^6.15.1",
     "ol-ext": "^4.0.23",
     "v-tooltip": "^2.1.3",
-    "vue-axios": "3.2.4",
-    "vue-custom-element": "^3.3.0"
+    "vue": "^3.5.43",
+    "vue-axios": "3.6.0",
+    "vuetify": "^3.13.4"
   },
   "devDependencies": {
-    "caniuse-lite": "^1.0.30001741",
-    "@vue/cli-plugin-babel": "^4.5.19",
-    "@vue/cli-plugin-eslint": "^4.5.19",
-    "@vue/cli-service": "^4.5.19",
-    "@vue/eslint-config-standard": "5.1.2",
-    "axios": "0.21.2",
+    "@vitejs/plugin-vue": "^5.2.3",
     "babel-eslint": "10.1.0",
+    "caniuse-lite": "^1.0.30001741",
     "core-js": "3.6.5",
     "eslint": "^7.32.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-promise": "4.2.1",
-    "eslint-plugin-standard": "4.0.0",
     "eslint-plugin-vue": "7.0.1",
-    "moment-locales-webpack-plugin": "^1.2.0",
-    "sass": "1.27.0",
-    "sass-loader": "10.0.2",
-    "vue": "2.6.14",
-    "vue-cli-plugin-vuetify": "2.0.7",
+    "vite": "^6.2.4",
+    "vite-plugin-vuetify": "^2.1.3",
+    "vitepress": "^1.6.4",
     "vue-json-tree": "0.4.3",
-    "vue-json-tree-view": "2.1.6",
-    "vue-server-renderer": "2.6.14",
-    "vue-template-compiler": "2.6.14",
-    "vuepress": "1.8.2",
-    "vuetify": "2.3.13",
-    "vuetify-loader": "1.6.0",
-    "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cdn-upload-plugin": "2.0.2"
+    "vue-json-tree-view": "2.1.6"
   },
   "eslintConfig": {
     "root": true,
@@ -88,7 +79,11 @@
   ],
   "description": "Commons components to simplify vuetify based application developement",
   "exports": {
-    ".": "./index.js"
+    ".": {
+      "import": "./dist/unidoo/unidoo.es.js",
+      "require": "./dist/unidoo/unidoo.umd.js"
+    },
+    "./style.css": "./dist/unidoo/style.css"
   },
   "repository": {
     "type": "git",

package/src/components/UnidooAlert.vue

@@ -1,126 +1,175 @@
 <template>
-  <span>
-    <v-snackbar
-      v-model="snackbar"
-      :color="type"
-      :timeout="timeout"
-      :centered="position == 'centered'"
-      :top="position == 'top'"
-      :bottom="position == 'bottom'"
-    >
-      <v-container>
-        <v-row>
-          <v-progress-linear
-            absolute
-            top
-            rounded
-            rounded-bar
-            :value="progressValue"
-            :color="progressColor"
-          />
-        </v-row>
-        <v-row align="center">
-          {{ message }}
-          <v-spacer></v-spacer>
-          <v-btn dark text @click="snackbar = false">{{
-            closeButtonLabel
-          }}</v-btn>
-        </v-row>
-      </v-container>
-    </v-snackbar>
-  </span>
+  <v-snackbar
+    v-model="snackbar"
+    :color="type"
+    :timeout="timeout"
+    :location="snackbarLocation"
+  >
+    <v-container>
+      <v-row>
+        <v-progress-linear
+          absolute
+          top
+          rounded
+          rounded-bar
+          :model-value="progressValue"
+          :color="progressColor"
+        />
+      </v-row>
+
+      <v-row align="center">
+        <span>{{ message }}</span>
+
+        <v-spacer />
+
+        <v-btn
+          variant="text"
+          @click="snackbar = false"
+        >
+          {{ closeButtonLabel }}
+        </v-btn>
+      </v-row>
+    </v-container>
+  </v-snackbar>
 </template>
 
-<script>
-import Plugin from "../plugin.js";
-
-export default {
-  components: {},
-  computed: {
-    progressValue() {
-      return Math.floor(100 * (1 - this.currenttime / this.timeout));
-    },
-    progressColor() {
-      if (this.type === "success") {
-        return "#1B5E20";
-      }
-      if (this.type === "error") {
-        return "#D50000";
-      }
-      if (this.type === "warning") {
-        return "#E65100";
-      }
-      return "";
-    },
-  },
-  data() {
-    return {
-      snackbar: false,
-      message: "",
-      type: "",
-      position: "top",
-      timeout: 4000,
-      currenttime: 0,
-      closeButtonLabel: "Close",
-    };
-  },
-
-  watch: {
-    snackbar(value) {
-      this.computeProgression(value);
-    },
-  },
-
-  methods: {
-    show(params) {
-      this.currenttime = 0;
-      this.message = params.message;
-      this.position = params.position ? params.position : this.position;
-      this.timeout = params.timeout ? params.timeout : this.timeout;
-      this.type = params.type ? params.type : this.type;
-      this.closeButtonLabel = params.closeButtonLabel
-        ? params.closeButtonLabel
-        : this.closeButtonLabel;
-      this.snackbar = true;
-    },
-
-    params(params) {
-      this.position = params.position ? params.position : this.position;
-      this.timeout = params.timeout ? params.timeout : this.timeout;
-      this.type = params.type ? params.type : this.type;
-      this.closeButtonLabel = params.closeButtonLabel
-        ? params.closeButtonLabel
-        : this.closeButtonLabel;
-    },
-
-    computeProgression(value) {
-      if (value === false) {
-        if (this.timer !== null) {
-          clearInterval(this.timer);
-        }
-      } else {
-        const self = this;
-        this.timer = setInterval(() => {
-          self.currenttime += 100;
-        }, 100);
-      }
-    },
-  },
-
-  beforeMount() {
-    Plugin.EventBus.$on("unidoo-alert-show", (params) => {
-      this.show(params);
-    });
-
-    Plugin.EventBus.$on("unidoo-alert-params", (params) => {
-      this.params(params);
-    });
-  },
-};
+<script setup>
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch
+} from 'vue'
+
+const eventBus = inject('unidooEventBus')
+
+if (!eventBus) {
+  throw new Error(
+    'UnidooAlert must be used after Plugin Unidoo is installed.'
+  )
+}
+
+const defaultAlertParams = {
+  position: 'top',
+  timeout: 4000,
+  type: 'info',
+  closeButtonLabel: 'Close'
+}
+
+const snackbar = ref(false)
+const message = ref('')
+const currentTime = ref(0)
+const timer = ref(null)
+const position = ref(defaultAlertParams.position)
+const timeout = ref(defaultAlertParams.timeout)
+const type = ref(defaultAlertParams.type)
+const closeButtonLabel = ref(defaultAlertParams.closeButtonLabel)
+
+
+const progressValue = computed(() => {
+  if (!timeout.value) {
+    return 0
+  }
+
+  return Math.max(
+    0,
+    Math.floor(100 * (1 - currentTime.value / timeout.value))
+  )
+})
+
+const progressColor = computed(() => {
+  switch (type.value) {
+    case 'success':
+      return '#1B5E20'
+    case 'error':
+      return '#D50000'
+    case 'warning':
+      return '#E65100'
+    default:
+      return undefined
+  }
+})
+
+const snackbarLocation = computed(() => {
+  switch (position.value) {
+    case 'top':
+      return 'top'
+    case 'bottom':
+      return 'bottom'
+    case 'centered':
+    case 'center':
+      return 'center'
+    default:
+      return position.value
+  }
+})
+
+function show(params = {}) {
+  currentTime.value = 0
+  message.value = params.message ?? ''
+  position.value = params.position ?? defaultAlertParams.position
+  timeout.value = params.timeout ?? defaultAlertParams.timeout
+  type.value = params.type ?? defaultAlertParams.type
+  closeButtonLabel.value = params.closeButtonLabel ?? defaultAlertParams.closeButtonLabel
+
+  snackbar.value = true
+}
+
+function updateParams(params = {}) {
+  position.value = params.position ?? position.value
+  timeout.value = params.timeout ?? timeout.value
+  type.value = params.type ?? type.value
+  closeButtonLabel.value =
+    params.closeButtonLabel ?? closeButtonLabel.value
+}
+
+function stopTimer() {
+  if (timer.value !== null) {
+    clearInterval(timer.value)
+    timer.value = null
+  }
+}
+
+function startTimer() {
+  stopTimer()
+
+  if (!timeout.value) {
+    return
+  }
+
+  timer.value = setInterval(() => {
+    currentTime.value += 100
+
+    if (currentTime.value >= timeout.value) {
+      stopTimer()
+    }
+  }, 100)
+}
+
+watch(snackbar, (value) => {
+  if (value) {
+    startTimer()
+  } else {
+    stopTimer()
+  }
+})
+
+onMounted(() => {
+  eventBus.on('unidoo-alert-show', show)
+  eventBus.on('unidoo-alert-params', updateParams)
+})
+
+onBeforeUnmount(() => {
+  eventBus.off('unidoo-alert-show', show)
+  eventBus.off('unidoo-alert-params', updateParams)
+  stopTimer()
+})
 </script>
 
 <style scoped>
-.v-snack:not(.v-snack--absolute) {
+.v-snackbar {
   z-index: 2000;
 }
 </style>

package/src/components/UnidooCaptcha.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <div ref="captcha"></div>
+    <div ref="captchaRef"></div>
     <div>
       <v-text-field :label="textFieldLabel" v-model="text"></v-text-field>
       <v-btn :color="color" @click="refresh">{{ refreshButtonLabel }}</v-btn>
@@ -8,98 +8,84 @@
   </span>
 </template>
 
-<script>
-export default {
-  components: {},
+<script setup>
+import { computed, ref, watch, onMounted } from "vue";
 
-  watch: {
-    valid: function (value) {
-      this.$emit("input", value);
-    }
+const emit = defineEmits(['update:modelValue'])
+const props = defineProps({
+  size: {
+    type: String,
+    default: "6",
   },
-
-  data() {
-    return {
-      captcha: [],
-      width: 0,
-      text: ""
-    };
+  color: {
+    type: String,
+    default: "primary",
+  },
+  value: {
+    type: Boolean,
+  },
+  textFieldLabel: {
+    type: String,
+    default: "Text",
   },
-  computed: {
-    valid: function () {
-      if (this.captchaText === this.text) {
-        return true;
-      }
-      return false;
-    },
-    captchaText: function () {
-      return this.captcha.join("");
-    }
+  refreshButtonLabel: {
+    type: String,
+    default: "Refresh",
   },
-  methods: {
-    refresh() {
-      this.text = "";
-      this.generateCaptcha();
-    },
+});
 
-    generateCaptcha() {
-      if (typeof document !== "undefined") {
-        const captcha = [];
-        const charsArray =
-          "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&*";
-        const size = Number.parseInt(this.size);
-        for (var i = 0; i < size; i++) {
-          // Eviter la repetition des characters
-          var index = Math.floor(Math.random() * charsArray.length + 1);
-          if (captcha.indexOf(charsArray[index]) === -1) {
-            captcha.push(charsArray[index]);
-          } else i--;
-        }
-        this.width = 20 * captcha.length;
-        this.captcha = captcha;
+onMounted(() => {
+  generateCaptcha()
+})
 
-        var canv = document.createElement("canvas");
-        canv.id = "canvas";
-        canv.width = this.width;
-        canv.height = 50;
-        var ctx = canv.getContext("2d");
-        ctx.font = "25px Georgia";
-        ctx.strokeText(this.captcha.join(""), 0, 30);
+const captcha = ref([]);
+const captchaRef = ref(null)
+const captchaPhrase = ref("")
+const width = ref(0);
+const text = ref("");
 
-        const captchaElement = this.$refs.captcha;
+const valid = computed(() => {
+  return captchaPhrase.value === text.value;
+});
 
-        if (captchaElement != null) {
-          captchaElement.innerHTML = "";
-          captchaElement.appendChild(canv);
-        }
-      }
-    }
-  },
-  beforeMount() {},
-  mounted() {
-    this.generateCaptcha();
-  },
+watch(valid, (value) => {
+  emit('update:modelValue', value);
+})
+
+const refresh = () => {
+  text.value = "";
+  generateCaptcha();
+}
+
+const generateCaptcha = () => {
+  const captchaLocal = [];
+  const charsArray =
+    "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&*";
+  const size = Number.parseInt(props.size);
+  for (var i = 0; i < size; i++) {
+    // Eviter la repetition des characters
+    var index = Math.floor(Math.random() * charsArray.length + 1);
+    if (captchaLocal.indexOf(charsArray[index]) == -1) {
+      captchaLocal.push(charsArray[index]);
+    } else i--;
+  }
+  width.value = 20 * captchaLocal.length;
+  captcha.value = captchaLocal;
+  captchaPhrase.value = captcha.value.join("")
+
+  var canv = document.createElement("canvas");
+  canv.id = "canvas";
+  canv.width = width.value;
+  canv.height = 50;
+  var ctx = canv.getContext("2d");
+  ctx.font = "25px Georgia";
+  ctx.strokeText(captcha.value.join(""), 0, 30);
+
+  const captchaElement = captchaRef.value;
 
-  props: {
-    size: {
-      type: String,
-      default: "6"
-    },
-    color: {
-      type: String,
-      default: "primary"
-    },
-    value: {
-      type: Boolean
-    },
-    textFieldLabel: {
-      type: String,
-      default: "Text"
-    },
-    refreshButtonLabel: {
-      type: String,
-      default: "Refresh"
-    }
+  if (captchaElement != null) {
+    captchaElement.innerHTML = "";
+    captchaElement.appendChild(canv);
   }
 };
 </script>

package/src/globals.js

@@ -0,0 +1,22 @@
+/**
+ * Use globally in wordpress context
+ *
+ * @param {string} url
+ */
+function setFaviconUrl(url) {
+  let link = document.querySelector("link[rel~='icon']");
+  if (!link) {
+    link = document.createElement("link");
+    link.rel = "icon";
+    document.head.appendChild(link);
+  }
+  link.href = url;
+}
+
+/**
+ * <script src="https://unpkg.com/@sedoo/unidoo/src/globals.js"></script>
+    <ftp-main-app></ftp-main-app>
+    <script>
+    setFavicon('https://wpedu2.sedoo.fr/wp-content-omp/uploads/sites/67/2025/09/sftpFavicon.png');
+    </script>
+ */

package/src/index.js

@@ -0,0 +1,7 @@
+export { default as Unidoo } from '@/plugin.js'
+
+export { createAlertService} from '@/services/alertService.js'
+export { createUuidService } from '@/services/uuidService.js'
+
+export { default as UnidooSnackbar } from '@/components/UnidooAlert.vue'
+export { default as UnidooCaptcha } from '@/components/UnidooCaptcha.vue'