@dative-gpi/foundation-shared-components 0.0.7 → 0.0.8

package/styles/components/fs_slider.scss

@@ -0,0 +1,20 @@
+.fs-slider {
+    padding: 0px !important;
+    width: 100%;
+}
+
+.fs-slider-label {
+    color: var(--fs-slider-color);
+}
+
+.fs-slider-description {
+    color: var(--fs-slider-color);
+}
+
+.v-slider-thumb__ripple {
+    display: none;
+}
+
+.v-slider-thumb__surface:after {
+    content: none;
+}

package/styles/components/fs_tag_field.scss

@@ -7,4 +7,13 @@
     &:hover {
         color: var(--fs-tag-field-dark-text) !important;
     }
+}
+
+.fs-tag-field-label {
+    color: var(--fs-tag-field-color);
+}
+
+.fs-tag-field-messages {
+    align-self: stretch;
+    color: var(--fs-tag-field-error-color);
 }

package/styles/components/fs_text_area.scss

@@ -0,0 +1,105 @@
+.fs-text-area:not(.fs-text-area-auto-grow) {
+    padding: 0px !important;
+    width: 100%;
+
+    & > .v-input__control > .v-field {
+        border: 1px solid var(--fs-text-area-border-color) !important;
+        border-radius: 4px !important;
+        padding: 0 !important;
+
+        &--error {
+            border-color: var(--fs-text-area-error-border-color) !important;
+        }
+
+        &:not(.v-field--error):focus-within {
+            border-color: var(--fs-text-area-active-border-color) !important;
+        }
+
+        & > .v-field__outline {
+            display: none;
+        }
+
+        & > .v-field__field > .v-field__input {
+            @extend .text-body;
+
+            @extend .fs-hide-y-scrollbar;
+
+            mask-image: none !important;
+            -webkit-mask-image: none !important;
+
+            padding-inline: 0 !important;
+            margin: 2px 2px 2px 0 !important;
+            cursor: var(--fs-text-area-cursor) !important;
+            min-height: var(--fs-text-area-min-height);
+            height: var(--fs-text-area-height);
+            color: var(--fs-text-area-color);
+        
+            @include web {
+                padding: 12px 0 12px 16px !important;
+            }
+        
+            @include mobile {
+                padding: 7px 0 7px 16px !important;
+            }
+        }
+    }
+}
+
+.fs-text-area-auto-grow {
+    padding: 0px !important;
+    width: 100%;
+
+    & > .v-input__control > .v-field {
+        border: 1px solid var(--fs-text-area-border-color) !important;
+        border-radius: 4px !important;
+        padding: 0 !important;
+
+        &--error {
+            border-color: var(--fs-text-area-error-border-color) !important;
+        }
+
+        &:not(.v-field--error):focus-within {
+            border-color: var(--fs-text-area-active-border-color) !important;
+        }
+
+        & > .v-field__outline {
+            display: none;
+        }
+
+        & > .v-field__field > .v-field__input {
+            @extend .text-body;
+
+            @extend .fs-hide-y-scrollbar;
+
+            mask-image: none !important;
+            -webkit-mask-image: none !important;
+
+            padding-inline: 0 !important;
+            margin: 2px 2px 2px 0 !important;
+            cursor: var(--fs-text-area-cursor) !important;
+            height: var(--fs-text-area-height);
+            color: var(--fs-text-area-color);
+        
+            @include web {
+                padding: 12px 0 12px 16px !important;
+            }
+        
+            @include mobile {
+                padding: 7px 0 7px 16px !important;
+            }
+        }
+    }
+}
+
+.fs-text-area-label {
+    color: var(--fs-text-area-color);
+}
+
+.fs-text-area-messages {
+    align-self: stretch;
+    color: var(--fs-text-area-error-color);
+}
+
+.fs-text-area-description {
+    color: var(--fs-text-area-color);
+}

package/styles/components/index.scss

@@ -1,18 +1,24 @@
 @import "fs_breadcrumbs.scss";
 @import "fs_button.scss";
+@import "fs_calendar.scss";
+@import "fs_card.scss";
 @import "fs_checkbox.scss";
 @import "fs_col.scss";
 @import "fs_color.scss";
+@import "fs_date_picker.scss";
 @import "fs_fade_out.scss";
 @import "fs_icon.scss";
 @import "fs_password_field.scss";
 @import "fs_radio.scss";
+@import "fs_rich_text_field.scss";
 @import "fs_row.scss";
+@import "fs_slider.scss";
 @import "fs_span.scss";
 @import "fs_switch.scss";
 @import "fs_tag.scss";
 @import "fs_tabs.scss";
 @import "fs_tag_field.scss";
+@import "fs_text_area.scss";
 @import "fs_text_field.scss";
 @import "fs_text.scss";
 @import "fs_wrap_group.scss";

package/utils/FSRichTextField.ts

@@ -0,0 +1,27 @@
+import { ElementNode, LexicalNode, RangeSelection, TextNode } from "lexical";
+import { $isAtNodeEnd } from "@lexical/selection";
+
+export const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  }
+  else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+  }
+}
+
+export const getAncestor = <NodeType extends LexicalNode = LexicalNode>(node: LexicalNode, predicate: (ancestor: LexicalNode) => ancestor is NodeType) => {
+  let parent = node;
+  while (parent !== null && parent.getParent() !== null && !predicate(parent)) {
+    parent = parent.getParentOrThrow();
+  }
+  return predicate(parent) ? parent : null;
+}

package/utils/index.ts

@@ -0,0 +1 @@
+export * from "./FSRichTextField";

package/composables/useTouch.ts

@@ -1,9 +0,0 @@
-export const useTouch = () => {
-    const isEnabled = (): boolean => {
-        return navigator.maxTouchPoints > 0;
-    };
-
-    return {
-        isEnabled
-    };
-}