@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/models/magicFields.ts

@@ -0,0 +1,9 @@
+export enum MagicFieldType {
+  None          = 0,
+  NumberField   = 1,
+  Switch        = 2,
+  TextField     = 3,
+  DateTimeField = 4,
+  IconField     = 5,
+  TimeField     = 6,
+}

package/models/map.ts

@@ -0,0 +1,18 @@
+import { type Layer } from "leaflet";
+
+import { type Address } from "@dative-gpi/foundation-shared-domain/models";
+
+export interface MapLayer {
+  name : string;
+  label: string;
+  image: string;
+  layer: Layer;
+}
+
+export interface FSLocation {
+  id: string;
+  label: string;
+  icon: string;
+  address: Address;
+  color: string;
+}

package/models/richTextVariable.ts

@@ -0,0 +1,5 @@
+export interface RichTextVariable {
+  label: string;
+  code: string;
+  defaultValue: string;
+}

package/models/rules.ts

@@ -13,11 +13,14 @@ export const TextRules = {
     min: (min: number, message: string | undefined = undefined) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
     max: (max: number, message: string | undefined = undefined) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
     email: (message: string | undefined = undefined) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
-    phone: (message: string | undefined = undefined) => (value: string) => /^[+]?([0-9]+[ -]?)+$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
+    phone: (message: string | undefined = undefined) => (value: string) => /^[+]?([0-9]+[ -]?){7,}$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
     digit: (message: string | undefined = undefined) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
     uppercase: (message: string | undefined = undefined) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
     lowercase: (message: string | undefined = undefined) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),
-    special: (message: string | undefined = undefined) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? $tr("ui.rules.text-special-character", "Must contain a special character"))
+    special: (message: string | undefined = undefined) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? $tr("ui.rules.text-special-character", "Must contain a special character")),
+    different: (original: string, message: string | undefined = undefined) => (value: string) => value != original || (message ?? $tr("ui.rules.text-different", "Must be different from original")),
+    outside: (values: string[], message: string | undefined = undefined) => (value: string) => !values.includes(value) || (message ?? $tr("ui.rules.text-outside", "Must be different from others")),
+    inside: (values: string[], message: string | undefined = undefined) => (value: string) => values.includes(value) || (message ?? $tr("ui.rules.text-inside", "Must be one of the options")),
 };
 
 export const TagRules = {
@@ -64,4 +67,10 @@ export const TimeRules = {
 
 export const ToggleRules = {
     required: (message: string | undefined = undefined) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
+};
+
+export const TreeViewRules = {
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: string[]) => { console.log(value); return (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.tree-view-min", "Must select at least {0} elements", min.toString())); },
+    max: (max: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.tree-view-max", "Must select at most {0} elements", max.toString()))
 };

package/models/tables.ts

@@ -1,33 +1,42 @@
 export interface FSDataTableColumn {
-    [key: string]: any;
-    text?: string | null;
-    value?: string | null;
-    index: number;
-    hidden: boolean;
-    width?: string | number | null;
+  [key: string]: any;
+  text?: string | null;
+  value?: string | null;
+  index: number;
+  hidden: boolean;
+  width?: string | number | null;
 
-    sortable?: boolean | null;
-    sort?: ((a: any, b: any) => number) | null;
+  sortable?: boolean | null;
+  sort?: ((a: any, b: any) => number) | null;
 
-    filterable?: boolean | null;
-    fixedFilters?: { value: any, text: string }[] | null;
-    methodFilter?: ((value: any, item: any) => boolean) | null;
-    filter?: ((value: any, search: string, item: any) => boolean) | null;
+  filterable?: boolean | null;
+  fixedFilters?: { value: any, text: string }[] | null;
+  methodFilter?: ((value: any, item: any) => boolean) | null;
+  filter?: ((value: any, search: string, item: any) => boolean) | null;
 
-    innerValue?: ((value: any) => any) | null;
+  innerValue?: ((value: any) => any) | null;
 
-    // Should not be set directly !
-    slotName?: string | null;
+  // Should not be set directly !
+  slotName?: string | null;
 }
 
 export interface FSDataTableFilter {
-    text: string;
-    value: string;
-    hidden: boolean;
-    filter?: ((value: any, property: any, item: any) => boolean) | null;
+  text: string;
+  value: string;
+  hidden: boolean;
+  filter?: ((value: any, property: any, item: any) => boolean) | null;
 }
 
 export interface FSDataTableOrder {
-    key: string | null;
-    order: "asc" | "desc" | null;
+  key: string | null;
+  order: "asc" | "desc" | null;
+}
+
+export interface FSDataTable {
+  headers: FSDataTableColumn[];
+  sortBy: FSDataTableOrder | null;
+  mode: "table" | "iterator";
+  rowsPerPage: -1 | 10 | 30;
+  filters: { [key: string]: FSDataTableFilter[] };
+  page: number;
 }

package/models/variableNode.ts

@@ -0,0 +1,104 @@
+import { type LexicalNode, DecoratorNode, type SerializedLexicalNode, type Spread, type EditorConfig, type LexicalEditor } from "lexical";
+
+import { type RichTextVariable } from "./richTextVariable";
+
+export type SerializedVariableNode = Spread<
+  {
+    type: "variable";
+    code: string;
+    defaultValue: string;
+  },
+  SerializedLexicalNode
+>;
+
+export class VariableNode extends DecoratorNode<Element> {
+  __code: string;
+  __defaultValue: string;
+  readonlyMode: boolean;
+
+  static getType() {
+    return "variable";
+  }
+
+  static clone(node: VariableNode) {
+    return new VariableNode(node.__code, node.__defaultValue, node.__key);
+  }
+
+  constructor(code: string, defaultValue: string, key?: string) {
+    super(key);
+    this.__code = code;
+    this.__defaultValue = defaultValue;
+    this.readonlyMode = false;
+  }
+
+  getValue(editorElement: HTMLElement): any {
+    const variableValues = editorElement.dataset.variableValues;
+    if (!variableValues) {
+      return this.__defaultValue;
+    }
+    const values = JSON.parse(variableValues);
+    return values[this.__code] ?? this.__defaultValue;
+  }
+
+  createDOM(_config: EditorConfig, _editor: LexicalEditor) {
+    const readonlyMode = _editor._rootElement?.dataset.readonly === "true" || false;
+
+    const container = document.createElement("span");
+    container.classList.add("fs-richtextfield-node-variable");
+
+    const content = document.createElement("span");
+    if (readonlyMode) {
+      content.classList.add("fs-rich-text-field-node-variable-value");
+      if (_editor._rootElement) {
+        content.textContent = this.getValue(_editor._rootElement);
+      }
+      else {
+        content.textContent = this.__defaultValue;
+      }
+    }
+    else {
+      content.classList.add("fs-rich-text-field-node-variable-code");
+      content.textContent = `{${this.__code}}`
+    }
+    container.appendChild(content);
+    return container;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  exportJSON(): SerializedVariableNode {
+    return {
+      type: "variable",
+      version: 1,
+      code: this.__code,
+      defaultValue: this.__defaultValue
+    };
+  }
+
+  decorate(editor: LexicalEditor, config: EditorConfig): Element {
+    return this.createDOM(config, editor);
+  }
+
+  static importJSON(serializedNode: SerializedVariableNode): VariableNode {
+    return new VariableNode(
+      serializedNode.code,
+      serializedNode.defaultValue
+    );
+  }
+}
+
+export function $createVariableNode(code: string, defaultValue: string): VariableNode {
+  return new VariableNode(code, defaultValue);
+}
+
+export function $modifyVariableNode(node: VariableNode, newValue: RichTextVariable): VariableNode {
+  node.__code = newValue.code;
+  node.__defaultValue = newValue.defaultValue;
+  return node;
+}
+
+export function $isVariableNode(node: LexicalNode | null | undefined): node is VariableNode {
+  return node instanceof VariableNode;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.1.120",
+  "version": "1.0.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,27 +10,30 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.1.120",
-    "@dative-gpi/foundation-shared-services": "0.1.120",
+    "@dative-gpi/foundation-shared-domain": "1.0.0",
+    "@dative-gpi/foundation-shared-services": "1.0.0"
+  },
+  "peerDependencies": {
+    "@dative-gpi/bones-ui": "^0.0.75",
     "@fontsource/montserrat": "^5.0.16",
-    "@lexical/clipboard": "^0.12.5",
-    "@lexical/history": "^0.12.5",
-    "@lexical/link": "^0.12.5",
-    "@lexical/plain-text": "^0.12.5",
-    "@lexical/rich-text": "^0.12.5",
-    "@lexical/selection": "^0.12.5",
-    "@lexical/text": "^0.12.5",
-    "@lexical/utils": "^0.12.5",
+    "@lexical/clipboard": "0.12.5",
+    "@lexical/history": "0.12.5",
+    "@lexical/link": "0.12.5",
+    "@lexical/plain-text": "0.12.5",
+    "@lexical/rich-text": "0.12.5",
+    "@lexical/selection": "0.12.5",
+    "@lexical/text": "0.12.5",
+    "@lexical/utils": "0.12.5",
     "@mdi/font": "^7.4.47",
-    "blurhash": "^2.0.5",
+    "blurhash": "2.0.5",
     "color": "^4.2.3",
-    "lexical": "^0.12.5",
-    "vue": "^3.4.23"
+    "leaflet": "1.9.4",
+    "leaflet.markercluster": "1.5.3"
   },
   "devDependencies": {
-    "@types/color": "^3.0.6",
-    "sass": "^1.69.5",
-    "sass-loader": "^13.3.2"
+    "@types/color": "3.0.6",
+    "sass": "1.71.1",
+    "sass-loader": "13.3.2"
   },
-  "gitHead": "ea777a3a70e01d2b96981b2cb2e3da7b3af5f59c"
+  "gitHead": "93365f65d39d6c9cc3821ffb48cba187200deaf9"
 }

package/plugins/colorPlugin.ts

@@ -1,7 +1,7 @@
-import { DefineComponent, Plugin } from "vue";
+import type { DefineComponent, Plugin } from "vue";
 import { useTheme } from "vuetify";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
 
 export const ColorPlugin: Plugin = {
     install: (app) => {

package/plugins/index.ts

@@ -1 +1,2 @@
-export * from "./colorPlugin";
+export * from "./colorPlugin";
+export * from "./mapsPlugin";

package/plugins/mapsPlugin.ts

@@ -0,0 +1,37 @@
+import type { Plugin } from "vue";
+
+export const MapsPlugin: Plugin = {
+  install: (_app, options: MapsOptions) => {
+    if(window?.initMap) {
+      return;
+    }
+    const key = options?.key ?? import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+    const maps = document.createElement("script");
+    maps.setAttribute(
+      "src",
+      `https://maps.googleapis.com/maps/api/js?key=${key}&loading=async&libraries=geometry,places,geocoding`
+    );
+
+    let resolvePromise: (value: void) => void;
+
+    const promise = new Promise<void>((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    window.initMap = promise;
+
+    maps.onload = () => {
+      resolvePromise();
+    };
+
+    document.head.appendChild(maps);
+
+    const autocomplete = document.createElement("div");
+    autocomplete.id = "places";
+    document.body.appendChild(autocomplete);
+  }
+}
+
+export interface MapsOptions {
+  key?: string;
+}

package/shims-plugin.d.ts

@@ -1,6 +1,6 @@
-import Vue from "vue";
+import Vue from "vue"; // eslint-disable-line
 
-import { ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 declare module "vue" {
     interface ComponentCustomProperties {

package/shims-window.d.ts

@@ -0,0 +1,3 @@
+declare interface Window {
+  initMap?: Promise<void>;
+}

package/styles/components/fs_button.scss

@@ -11,4 +11,9 @@
     &:has(.fs-button-load) {
         cursor: default !important;
     }
+
+    & > a, a:hover, a:visited, a:active {
+        color: inherit;
+        text-decoration: none;
+    }
 }

package/styles/components/fs_card.scss

@@ -1,6 +1,5 @@
 .fs-card {
     border: var(--fs-card-border-size) var(--fs-card-border-style);
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: var(--fs-card-border-radius);
     padding: var(--fs-card-padding);
     height: var(--fs-card-height);

package/styles/components/fs_col.scss

@@ -1,6 +1,7 @@
 .fs-col {
     display: flex;
     flex-direction: column;
+    overflow-y: var(--fs-col-overflow);
     padding: var(--fs-col-padding);
     gap: var(--fs-col-gap);
     max-width: 100%;

package/styles/components/fs_color_field.scss

@@ -1,4 +1,14 @@
-.fs-color-field .v-field__prepend-inner > .v-icon {
+.fs-color-field .fs-card {
+  cursor: var(--fs-color-field-cursor) !important;
+  border-color: var(--fs-color-field-border-color) !important;
+  .fs-text {
+    color: var(--fs-color-field-color) !important;
+  }
+}
+
+.fs-color-field .v-icon {
+  background-color: var(--fs-color-field-colorvalue) !important;
+  border-radius: 100%;
   opacity: 1 !important;
 }
 
@@ -9,5 +19,5 @@
 }
 
 .fs-color-field-description {
-    color: var(--fs-color-field-color);
+  color: var(--fs-color-field-color);
 }

package/styles/components/fs_data_iterator_item.scss

@@ -1,4 +1,5 @@
 .fs-data-iterator-item {
+    cursor: var(--fs-data-iterator-item-cursor);
     position: relative;
     min-height: 36px;
     flex: 1 0 0;
@@ -6,15 +7,27 @@
     & > .fs-col > .fs-row:first-of-type > :last-child {
         padding-right: 32px;
     }
+
+    &:hover::after {
+        content: "";
+        background-color: black;
+        pointer-events: none;
+        position: absolute;
+        opacity: 0.04;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+    }
 }
 
 .fs-data-iterator-item-checkbox {
-    border-radius: 4px;
-    position: absolute;
-    align-items: center;
     justify-content: center;
-    top: 1px;
-    right: 1px;
-    width: 32px;
+    align-items: center;
+    position: absolute;
+    border-radius: 4px;
     height: 32px;
+    width: 32px;
+    right: 1px;
+    top: 1px;
 }

package/styles/components/fs_dialog.scss

@@ -1,28 +1,18 @@
-.v-overlay__scrim:has(.v-overlay__content:has(.fs-dialog-mobile)) {
-    display: flex;
-}
-
-.v-overlay__content:has(.fs-dialog-mobile) {
-    justify-content: flex-end;
+.fs-dialog-mobile {
+  & > .v-overlay__content {
+    max-height: calc(100% - 40px) !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    margin: 0 !important;
     align-self: flex-end;
-    margin-top: 40px !important;
-    width: 100vw !important;
-    margin: 0px !important;
-}
-
-.v-overlay__content:has(.fs-dialog) {
-    max-height: calc(100vh - 40px) !important;
-    width: var(--fs-dialog-width) !important;
-    min-width: 35vw !important;
+  }
 }
 
 .fs-dialog {
-    max-height: calc(100vh - 40px) !important;
-    width: var(--fs-dialog-width) !important;
+  & > .v-overlay__content {
+    max-height: calc(100% - 40px) !important;
+    max-width: calc(100% - 40px) !important;
     min-width: 35vw !important;
-}
-
-.fs-dialog-mobile {
-    max-height: calc(100vh - 40px) !important;
-    width: 100vw !important;
+    width: fit-content !important;
+  }
 }

package/styles/components/fs_gradient_field.scss

@@ -0,0 +1,16 @@
+
+.fs-gradient-select-field .v-select__selection {
+  width: 100%;
+
+  
+}
+
+.fs-gradient-field-preview {
+  padding: 13px 20px;
+  > span {
+    height: 12px;
+    background: var(--fs-gradient-field-background) !important;
+    width: 100%;
+  }
+}
+

package/styles/components/fs_image_card.scss

@@ -0,0 +1,18 @@
+.fs-image-card {
+  > .fs-card {
+    background-image: var(--fs-image-card-background);
+    background-size: 100%;
+    background-position: center;
+  }
+
+  .fs-image-card-label {
+    background-color: #0000009d;
+    color: white;
+  }
+}
+
+.fs-image-card:hover {
+  > .fs-card {
+    background-size: 105%;
+  }
+}

package/styles/components/fs_magic_config_field.scss

@@ -0,0 +1,13 @@
+.fs-row > .fs-col:has(.v-switch) {
+    margin: 0 0 8px 0;
+    align-self: end;
+}
+
+.fs-magic-config-field-value {
+    min-width: 15%;
+}
+
+.fs-magic-config-field-actions {
+    margin: 0 0 8px 0;
+    align-self: end;
+}

package/styles/components/fs_map.scss

@@ -0,0 +1,129 @@
+@import 'leaflet/dist/leaflet.css';
+
+.fs-map {
+  position: relative;
+
+  .fs-leaflet-container {
+    width: 100%;
+    height: var(--fs-map-leaflet-container-height);
+    filter: grayscale(var(--fs-map-container-grayscale));
+  }
+
+  .fs-map-overlay-edit-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 960;
+    margin: 8px;
+  }
+
+  .fs-map-overlay-right-top {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 4px 8px;
+  }
+
+  .fs-map-overlay-right-bottom {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 1000;
+    margin: 4px 8px;
+    width: calc(100% - 16px);
+
+
+    .fs-map-zoom-overlay {
+      position: absolute;
+      bottom: 100%;
+      right: 0;
+      z-index: 1001;
+      margin-bottom: calc(var(--fs-map-leaflet-bottom-overlay-margin) + 8px);
+
+      button.fs-map-zoom-plus > * {
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+      }
+
+      button.fs-map-zoom-minus > * {
+        margin-top: 1px;
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+
+        border-top: solid 1px var(--fs-card-border-color) !important;
+      }
+    }
+  }
+
+  .fs-map-mylocation {
+    border: 3px solid white;
+    background-color: var(--fs-map-mylocation-pin-color);
+    border-radius: 100%;
+    animation: fs-map-shadow-mylocation 1.4s linear infinite;
+
+    @keyframes fs-map-shadow-mylocation {
+      0% {
+        box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
+      }
+
+      50% {
+        box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
+      }
+
+      100% {
+        box-shadow: 0 0 0px 20px transparent;
+      }
+    }
+  }
+
+  .fs-map-location > div {
+    display: flex;
+    height: 100%;
+    color: var(--fs-map-location-pin-color);
+    border-radius: 50%;
+    background-color: white;
+    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
+
+      > * {
+        transform: scale(1.15);
+      }
+    }
+  }
+
+  .fs-map-location-full > div {
+    background-color: var(--fs-map-location-pin-color);
+    color: white;
+  }
+
+  .fs-map-location-selected > div {
+    animation: fs-map-shadow-location 1.4s linear infinite;
+
+    @keyframes fs-map-shadow-location {
+      0% {
+        box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
+      }
+
+      50% {
+        box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
+      }
+
+      100% {
+        box-shadow: 0 0 0px 20px transparent;
+      }
+    }
+  }
+
+  .fs-map-site {
+    opacity: 0.6;
+    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}