@functionalcms/svelte-components 2.33.2 → 2.34.2

package/dist/components/agnostic/Tooltip/Tooltip.svelte

@@ -0,0 +1,103 @@
+<style>
+.tooltip {
+  display: none;
+  position: absolute;
+  background: var(--functional-dark);
+  color: var(--functional-light);
+  padding: var(--fluid-4) var(--fluid-8);
+  border-radius: var(--fluid-4);
+  pointer-events: none;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  background: var(--functional-dark);
+  width: var(--fluid-8);
+  height: var(--fluid-8);
+  transform: rotate(45deg);
+}
+
+</style>
+<script>import {
+  computePosition,
+  flip,
+  offset as fuOffset,
+  shift,
+  arrow
+} from "@floating-ui/dom";
+export let placement = "top";
+export let offset = 6;
+let tooltipRef;
+let tooltipTargetRef;
+let tooltipArrowRef;
+const uid = () => `tip-${Date.now().toString(32)}-${Math.random().toString(16).replace(/\./g, "").toString()}`;
+const id = uid();
+const update = () => {
+  const tip = tooltipRef;
+  const target = tooltipTargetRef;
+  const arrowEl = tooltipArrowRef;
+  if (tip && target && arrowEl) {
+    computePosition(target, tip, {
+      placement,
+      middleware: [
+        fuOffset(offset),
+        flip(),
+        shift({ padding: 4 }),
+        arrow({
+          element: arrowEl,
+          // Offset from edge; fixes issue on left-start, left-end, right-start,
+          // etc., where arrow oddly overlaps the rounded corner of content box
+          padding: 10
+        })
+      ]
+    }).then(({ x, y, placement: placement2, middlewareData }) => {
+      const arrowX = middlewareData.arrow.x;
+      const arrowY = middlewareData.arrow.y;
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      }[placement2.split("-")[0]];
+      Object.assign(tip.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      Object.assign(arrowEl.style, {
+        left: typeof arrowX === "number" ? `${arrowX}px` : "",
+        top: typeof arrowY === "number" ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide]: "-4px"
+      });
+    });
+  }
+};
+const showTooltip = () => {
+  if (tooltipRef) {
+    tooltipRef.style.display = "block";
+  }
+  update();
+};
+const hideTooltip = () => {
+  if (tooltipRef) {
+    tooltipRef.style.display = "";
+  }
+};
+const tooltipClasses = "tooltip";
+const tooltipArrowClasses = "tooltip-arrow";
+</script>
+<div
+  bind:this={tooltipTargetRef}
+  aria-describedby={id}
+  on:focus={showTooltip}
+  on:mouseenter={showTooltip}
+  on:mouseleave={hideTooltip}
+  on:blur={hideTooltip}
+>
+  <slot></slot>
+</div>
+<div id={id} bind:this={tooltipRef} role="tooltip" class={tooltipClasses}>
+  <slot name="content"></slot>
+  <div id="arrow" bind:this={tooltipArrowRef} class={tooltipArrowClasses} />
+</div>

package/dist/components/agnostic/Tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { TooltipPlacement } from './api';
+declare const __propDef: {
+    props: {
+        placement?: TooltipPlacement;
+        offset?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        content: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/dist/components/agnostic/Tooltip/TooltipSlots.svelte

@@ -0,0 +1,81 @@
+<style>
+  div {
+    margin-block-end: 1rem;
+  }
+  
+  /* Hack: probably shouldn't target aria but it's just for demo purposes */
+  :global(.tooltips-container [aria-describedby^="tip-"]) {
+    width: 100px;
+    height: 100px;
+    padding: var(--fluid-6) var(--fluid-12);
+    border-radius: var(--functional-radius);
+    border: 1px solid var(--functional-gray-light);
+    display: flex;
+    align-items: center;
+    text-align: center;
+  }
+</style>
+
+<script>import Tooltip from "./Tooltip.svelte";
+</script>
+
+<div class="h4 mbs40">Tooltips</div>
+<div class="text-center tooltips-container">
+  <section class="mbs56 mbe40 flex-inline justify-between w-100">
+    <Tooltip placement="top-start">
+      Tooltip top-start
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+    <Tooltip placement="top">
+      Tooltip top
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+    <Tooltip placement="top-end">
+      Tooltip top-end
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+  </section>
+  <section
+    class="flex flex-column items-center"
+    style="gap: var(--fluid-18);"
+  >
+    <Tooltip placement="left-start">
+      Tooltip left-start
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+    <Tooltip placement="left">
+      Tooltip left
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+    <Tooltip placement="left-end">
+      Tooltip left-end
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+    <Tooltip placement="right-start">
+      Tooltip right-start
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+    <Tooltip placement="right">
+      Tooltip right
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+    <Tooltip placement="right-end">
+      Tooltip right-end
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+  </section>
+  <section class="mbs56 mbe40 flex-inline justify-between w-100">
+    <Tooltip placement="bottom-start">
+      Tooltip bottom-start
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+    <Tooltip placement="bottom">
+      Tooltip bottom
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+    <Tooltip placement="bottom-end">
+      Tooltip bottom-end
+      <div slot="content">This is the tooltip content from named slot.</div>
+    </Tooltip>
+  </section>
+</div>

package/dist/components/agnostic/Tooltip/TooltipSlots.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TooltipSlotsProps = typeof __propDef.props;
+export type TooltipSlotsEvents = typeof __propDef.events;
+export type TooltipSlotsSlots = typeof __propDef.slots;
+export default class TooltipSlots extends SvelteComponent<TooltipSlotsProps, TooltipSlotsEvents, TooltipSlotsSlots> {
+}
+export {};

package/dist/components/agnostic/Tooltip/api.d.ts

@@ -0,0 +1 @@
+export type TooltipPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";

package/dist/components/agnostic/Tooltip/api.js

@@ -0,0 +1 @@
+export {};

package/dist/components/agnostic/animation.css

@@ -0,0 +1,37 @@
+.fade-in {
+	animation: fade-in var(--functional-timing-fast) both;
+}
+
+.slide-up {
+	animation: slide-up var(--functional-timing-slow) var(--functional-timing-fast)
+		both;
+}
+
+/**
+ * Cannot use two separate CSS classes with animation: foo, bar
+ * as the later class will overwrite the first (so this combines)
+ */
+.slide-up-fade-in {
+	animation: fade-in var(--functional-timing-fast) both,
+		slide-up var(--functional-timing-slow) var(--functional-timing-fast) both;
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0%;
+	}
+}
+
+@keyframes slide-up {
+	from {
+		transform: translateY(10%);
+	}
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+	.slide-up-fade-in,
+	.fade-in,
+	.slide-up {
+		transition-duration: 0.001ms !important;
+	}
+}

package/dist/index.d.ts

@@ -26,5 +26,34 @@ export { title, suffix } from './stores/title.js';
 export { pages } from './stores/pages.js';
 export { metaDescription, metaKeywords } from './stores/meta.js';
 export { Justify, Placement, Orientation, Position, Sizes, AlignItmes } from './components/Styling.js';
-export { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
+export { default as Alert } from './components/agnostic/Alert/Alert.svelte';
+export { default as Avatar } from './components/agnostic/Avatar/Avatar.svelte';
+export { default as AvatarGroup } from './components/agnostic/Avatar/AvatarGroup.svelte';
+export { default as Breadcrumb } from './components/agnostic/Breadcrumb/Breadcrumb.svelte';
+export { default as Button } from './components/agnostic/Button/Button.svelte';
+export { default as ButtonGroup } from './components/agnostic/Button/ButtonGroup.svelte';
+export { default as Card } from './components/agnostic/Card/Card.svelte';
+export { default as ChoiceInput } from './components/agnostic/ChoiceInput/ChoiceInput.svelte';
+export { default as Close } from './components/agnostic/Close/Close.svelte';
+export { default as Dialog } from './components/agnostic/Dialog/Dialog.svelte';
+export { default as Disclose } from './components/agnostic/Disclose/Disclose.svelte';
+export { default as Divider } from './components/agnostic/Divider/Divider.svelte';
+export { default as Drawer } from './components/agnostic/Drawer/Drawer.svelte';
+export { default as EmptyState } from './components/agnostic/EmptyState/EmptyState.svelte';
+export { default as Header } from './components/agnostic/Header/Header.svelte';
+export { default as HeaderNav } from './components/agnostic/Header/HeaderNav.svelte';
+export { default as HeaderNavItem } from './components/agnostic/Header/HeaderNavItem.svelte';
+export { default as Icon } from './components/agnostic/Icon/Icon.svelte';
+export { default as Input } from './components/agnostic/Input/Input.svelte';
+export { default as InputAddonItem } from './components/agnostic/Input/InputAddonItem.svelte';
+export { default as Loader } from './components/agnostic/Loader/Loader.svelte';
+export { default as Progress } from './components/agnostic/Progress/Progress.svelte';
+export { default as Select } from './components/agnostic/Select/Select.svelte';
+export { default as Spinner } from './components/agnostic/Spinner/Spinner.svelte';
+export { default as Switch } from './components/agnostic/Switch/Switch.svelte';
+export { default as Table } from './components/agnostic/Table/Table.svelte';
+export { default as Tabs } from './components/agnostic/Tabs/Tabs.svelte';
+export { default as Tag } from './components/agnostic/Tag/Tag.svelte';
+export { default as Toasts } from './components/agnostic/Toasts/Toasts.svelte';
+export { default as Tooltip } from './components/agnostic/Tooltip/Tooltip.svelte';
 export { DatePicker, DateInput, localeFromDateFnsLocale, type Locale, } from 'date-picker-svelte';

package/dist/index.js

@@ -25,5 +25,34 @@ export { title, suffix } from './stores/title.js';
 export { pages } from './stores/pages.js';
 export { metaDescription, metaKeywords } from './stores/meta.js';
 export { Justify, Placement, Orientation, Position, Sizes, AlignItmes } from './components/Styling.js';
-export { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
+export { default as Alert } from './components/agnostic/Alert/Alert.svelte';
+export { default as Avatar } from './components/agnostic/Avatar/Avatar.svelte';
+export { default as AvatarGroup } from './components/agnostic/Avatar/AvatarGroup.svelte';
+export { default as Breadcrumb } from './components/agnostic/Breadcrumb/Breadcrumb.svelte';
+export { default as Button } from './components/agnostic/Button/Button.svelte';
+export { default as ButtonGroup } from './components/agnostic/Button/ButtonGroup.svelte';
+export { default as Card } from './components/agnostic/Card/Card.svelte';
+export { default as ChoiceInput } from './components/agnostic/ChoiceInput/ChoiceInput.svelte';
+export { default as Close } from './components/agnostic/Close/Close.svelte';
+export { default as Dialog } from './components/agnostic/Dialog/Dialog.svelte';
+export { default as Disclose } from './components/agnostic/Disclose/Disclose.svelte';
+export { default as Divider } from './components/agnostic/Divider/Divider.svelte';
+export { default as Drawer } from './components/agnostic/Drawer/Drawer.svelte';
+export { default as EmptyState } from './components/agnostic/EmptyState/EmptyState.svelte';
+export { default as Header } from './components/agnostic/Header/Header.svelte';
+export { default as HeaderNav } from './components/agnostic/Header/HeaderNav.svelte';
+export { default as HeaderNavItem } from './components/agnostic/Header/HeaderNavItem.svelte';
+export { default as Icon } from './components/agnostic/Icon/Icon.svelte';
+export { default as Input } from './components/agnostic/Input/Input.svelte';
+export { default as InputAddonItem } from './components/agnostic/Input/InputAddonItem.svelte';
+export { default as Loader } from './components/agnostic/Loader/Loader.svelte';
+export { default as Progress } from './components/agnostic/Progress/Progress.svelte';
+export { default as Select } from './components/agnostic/Select/Select.svelte';
+export { default as Spinner } from './components/agnostic/Spinner/Spinner.svelte';
+export { default as Switch } from './components/agnostic/Switch/Switch.svelte';
+export { default as Table } from './components/agnostic/Table/Table.svelte';
+export { default as Tabs } from './components/agnostic/Tabs/Tabs.svelte';
+export { default as Tag } from './components/agnostic/Tag/Tag.svelte';
+export { default as Toasts } from './components/agnostic/Toasts/Toasts.svelte';
+export { default as Tooltip } from './components/agnostic/Tooltip/Tooltip.svelte';
 export { DatePicker, DateInput, localeFromDateFnsLocale, } from 'date-picker-svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.33.2",
+	"version": "2.34.2",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -50,8 +50,6 @@
 		"@sveltejs/adapter-auto": "^3.1.0",
 		"@sveltejs/package": "^2.2.5",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"agnostic-css": "^1.0.34",
-		"agnostic-svelte": "^1.1.27",
 		"npm-watch": "^0.11.0",
 		"publint": "^0.2.7",
 		"sass": "^1.69.7",
@@ -63,7 +61,6 @@
 	},
 	"dependencies": {
 		"@splidejs/svelte-splide": "^0.2.9",
-		"agnostic-svelte": "^1.1.27",
 		"date-picker-svelte": "^2.14.1",
 		"mdsvex": "^0.11.2",
 		"node-html-parser": "^6.1.12",