@typlog/ui 0.10.1 → 0.11.1

package/README.md

@@ -1,79 +1,9 @@
 # @typlog/ui
 
-> Themed components for Radix Vue.
+An open-source Vue component library optimized for fast development,
+built on top of Reka UI and Radix Colors.
 
-## Components
+## Credits
 
-```js
-import {
-  Avatar,
-  Badge,
-  Button,
-  IconButton,
-  Card,
-  Separator,
-  Inset,
-  ScrollArea,
-  SavingIndicator,
-  Tooltip,
-  Table,
-  Quota,
-  Spinner,
-  Icon,
-
-  // input
-  Checkbox,
-  CheckboxGroupRoot,
-  CheckboxGroupItem,
-  CheckboxGroupControl,
-  Radio,
-  RadioGroupRoot,
-  RadioGroupItem,
-  RadioCardsRoot,
-  RadioCardsItem,
-  SelectRoot,
-  SelectContent,
-  SelectTrigger,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectGroup,
-  Switch,
-  ColorField,
-  TextField,
-  TextArea,
-  Turnstile,
-  TabsRoot,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-  RadioTabsList,
-  RadioTabsItem,
-
-  // popper
-  AlertDialogRoot,
-  AlertDialogContent,
-  AlertDialogTrigger,
-  AlertDialogCancel,
-  AlertDialogAction,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  DialogRoot,
-  DialogContent,
-  DialogTrigger,
-  DialogClose,
-  DialogHead,
-  DialogTitle,
-  DialogDescription,
-  PopoverRoot,
-  PopoverContent,
-  PopoverTrigger,
-  PopoverClose,
-  PopoverAnchor,
-  PopoverArrow,
-  DropdownMenuRoot,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from '@typlog/ui'
-```
+- [Radix UI](https://radix-ui.com/)
+- [Reka UI](https://reka-ui.com/)

package/dist/addons.css

@@ -0,0 +1,113 @@
+
+.ui-IconifySample {
+  display: flex;
+  gap: var(--space-4);
+  padding: var(--space-2);
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  border-radius: var(--radius-3);
+  background: var(--gray-a2);
+}
+.ui-IconifySample:hover {
+  background: var(--gray-a3);
+}
+.ui-IconifySampleInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.ui-IconifySampleInfo > strong {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+}
+.ui-IconifySampleInfo > span {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  color: var(--gray-a10);
+}
+.ui-IconifySampleIcons {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-2);
+}
+
+.ui-IconifyCollection {
+  container-name: icon-collection;
+  container-type: inline-size;
+}
+.ui-IconifyCollectionForm {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  gap: var(--space-4);
+}
+.ui-IconifyCollectionForm .ui-TextField {
+  flex-grow: 1;
+}
+.ui-IconifyCollectionGroupsHead {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-8);
+  margin-bottom: var(--space-4);
+}
+@container icon-collection (min-width: 768px) {
+.ui-IconifyCollectionGroupsHead {
+    flex-direction: row;
+}
+}
+.ui-IconifyCollectionGroupsHead > h1 {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-4);
+  line-height: var(--line-height-4);
+}
+.ui-IconifyCollectionSample {
+  margin-bottom: var(--space-4);
+}
+.ui-IconifyCollectionSampleGrid {
+  margin-top: var(--space-2);
+  display: grid;
+  gap: var(--space-2);
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+@container icon-collection (min-width: 768px) {
+.ui-IconifyCollectionSampleGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+}
+@container icon-collection (min-width: 1024px) {
+.ui-IconifyCollectionSampleGrid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+}
+@container icon-collection (min-width: 1280px) {
+.ui-IconifyCollectionSampleGrid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+}
+.ui-IconifyCollectionSuffixes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  flex-grow: 1;
+  margin-top: var(--space-4);
+}
+.ui-IconifyCollectionIconGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  flex-grow: 1;
+  margin-top: var(--space-4);
+  margin-bottom: var(--space-4);
+}
+.ui-IconifyCollectionIconGrid button {
+  border: 0;
+  padding: var(--space-2);
+  border-radius: max(var(--radius-2), var(--radius-full));
+}
+.ui-IconifyCollectionIconGrid button:hover {
+  background-color: var(--gray-a4);
+}

package/dist/addons.d.ts

@@ -0,0 +1,48 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+
+export declare const IconifyCollection: DefineComponent<IconifyCollectionProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+select: (icon: string) => any;
+}, string, PublicProps, Readonly<IconifyCollectionProps> & Readonly<{
+onSelect?: ((icon: string) => any) | undefined;
+}>, {
+perpage: number;
+iconSize: string | number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare interface IconifyCollectionProps {
+    prefix?: string;
+    search?: string;
+    perpage?: number;
+    iconSize?: string | number;
+}
+
+export declare const Turnstile: DefineComponent<TurnstileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (args_0: string) => any;
+}, string, PublicProps, Readonly<TurnstileProps> & Readonly<{
+"onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+}>, {
+size: "normal" | "compact";
+resetInterval: number;
+theme: "light" | "dark" | "auto";
+action: string;
+appearance: "always" | "execute" | "interaction-only";
+renderOnMount: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+element: HTMLDivElement;
+}, HTMLDivElement>;
+
+export declare interface TurnstileProps {
+    sitekey: string;
+    modelValue?: string;
+    resetInterval?: number;
+    size?: 'normal' | 'compact';
+    theme?: 'light' | 'dark' | 'auto';
+    action?: string;
+    appearance?: 'always' | 'execute' | 'interaction-only';
+    renderOnMount?: boolean;
+}
+
+export { }

package/dist/addons.js

@@ -0,0 +1,442 @@
+import { defineComponent, createElementBlock, openBlock, createElementVNode, toDisplayString, Fragment, renderList, createVNode, unref, ref, computed, onMounted, withDirectives, createCommentVNode, withKeys, createBlock, mergeProps, withModifiers, vShow, withCtx, createTextVNode, normalizeStyle, useTemplateRef, onBeforeUnmount } from "vue";
+import { Icon } from "@iconify/vue";
+import { TextField, Button, Tooltip, Pagination } from "./components";
+const _hoisted_1$1 = {
+  type: "button",
+  class: "ui-IconifySample"
+};
+const _hoisted_2$1 = { class: "ui-IconifySampleInfo" };
+const _hoisted_3$1 = { class: "ui-IconifySampleIcons" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "IconifySample",
+  props: {
+    prefix: {},
+    category: {},
+    name: {},
+    samples: {},
+    total: {},
+    license: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_2$1, [
+          createElementVNode("strong", null, toDisplayString(props.name), 1),
+          createElementVNode("span", null, toDisplayString(props.license.title), 1),
+          createElementVNode("span", null, toDisplayString(props.total) + " icons", 1)
+        ]),
+        createElementVNode("div", _hoisted_3$1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(props.samples, (icon) => {
+            return openBlock(), createElementBlock("span", { key: icon }, [
+              createVNode(unref(Icon), {
+                icon: props.prefix + ":" + icon
+              }, null, 8, ["icon"])
+            ]);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1 = { class: "ui-IconifyCollection" };
+const _hoisted_2 = { class: "ui-IconifyCollectionGroups" };
+const _hoisted_3 = { class: "ui-IconifyCollectionGroupsHead" };
+const _hoisted_4 = { class: "ui-IconifyCollectionForm" };
+const _hoisted_5 = { class: "mb-2" };
+const _hoisted_6 = { class: "font-medium" };
+const _hoisted_7 = { class: "text-sm ml-1" };
+const _hoisted_8 = { class: "ui-IconifyCollectionSampleGrid" };
+const _hoisted_9 = {
+  key: 0,
+  class: "ui-IconifyCollectionIcons"
+};
+const _hoisted_10 = { class: "ui-IconifyCollectionForm" };
+const _hoisted_11 = {
+  key: 0,
+  class: "ui-IconifyCollectionSuffixes"
+};
+const _hoisted_12 = ["onClick"];
+const fetchCollections = async () => {
+  const apiLink = "https://api.iconify.design/collections";
+  const resp = await fetch(apiLink);
+  const data = await resp.json();
+  const cache = {};
+  Object.keys(data).forEach((prefix) => {
+    const item = data[prefix];
+    if (item.hidden) {
+      return;
+    }
+    if (!cache[item.category]) {
+      cache[item.category] = [];
+    }
+    cache[item.category].push({ ...item, prefix });
+  });
+  const collections = [];
+  Object.keys(cache).forEach((category) => {
+    collections.push({
+      category,
+      items: cache[category]
+    });
+  });
+  return collections;
+};
+const searchIcons = async (query) => {
+  const apiLink = `https://api.iconify.design/search?query=${encodeURIComponent(query)}&limit=999`;
+  const resp = await fetch(apiLink);
+  const data = await resp.json();
+  return data.icons;
+};
+const fetchCollectionIcons = async (prefix) => {
+  const apiLink = `https://api.iconify.design/collection?prefix=${encodeURIComponent(prefix)}&chars=true&aliases=true`;
+  const resp = await fetch(apiLink);
+  const data = await resp.json();
+  return data;
+};
+const filterIcons = (names, query, suffix) => {
+  return names.filter((key) => {
+    let match = true;
+    if (query && key.indexOf(query) === -1) {
+      match = false;
+    }
+    if (suffix && key.indexOf(`-${suffix}`) === -1) {
+      match = false;
+    }
+    return match;
+  });
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "IconifyCollection",
+  props: {
+    prefix: {},
+    search: {},
+    perpage: { default: 200 },
+    iconSize: { default: 20 }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const shouldDisplay = ref("all");
+    const groupCollections = ref([]);
+    const collectionFilter = ref("");
+    const page = ref(1);
+    const searchQuery = ref("");
+    const searchResultIcons = ref([]);
+    const collectionData = ref();
+    const collectionQuery = ref("");
+    const collectionSuffix = ref("");
+    const reset = () => {
+      page.value = 1;
+      searchQuery.value = "";
+      searchResultIcons.value = [];
+      collectionData.value = void 0;
+      collectionQuery.value = "";
+      collectionSuffix.value = "";
+      shouldDisplay.value = "all";
+    };
+    const onSelectIcon = (icon) => {
+      emits("select", icon);
+    };
+    const onSearch = async () => {
+      if (searchQuery.value) {
+        shouldDisplay.value = "search";
+        searchResultIcons.value = await searchIcons(searchQuery.value);
+      } else {
+        shouldDisplay.value = "all";
+      }
+    };
+    const onSelectPrefix = async (prefix) => {
+      collectionData.value = void 0;
+      collectionQuery.value = "";
+      collectionSuffix.value = "";
+      shouldDisplay.value = "collection";
+      collectionData.value = await fetchCollectionIcons(prefix);
+    };
+    const collectionCount = computed(() => {
+      let count = 0;
+      groupCollections.value.forEach((item) => {
+        count += item.items.length;
+      });
+      return count;
+    });
+    const visibleCollections = computed(() => {
+      if (!collectionFilter.value) {
+        return groupCollections.value;
+      }
+      return groupCollections.value.map((collection) => {
+        const items = collection.items.filter((item) => {
+          const key = [item.category, item.name, item.prefix].join(" ");
+          return key.toLowerCase().indexOf(collectionFilter.value) !== -1;
+        });
+        return { ...collection, items };
+      }).filter((collection) => collection.items.length !== 0);
+    });
+    const collectionIcons = computed(() => {
+      let rv = [];
+      if (!collectionData.value) {
+        return rv;
+      }
+      if (collectionData.value.uncategorized) {
+        rv = filterIcons(collectionData.value.uncategorized, collectionQuery.value, collectionSuffix.value);
+      } else if (collectionData.value.categories) {
+        Object.keys(collectionData.value.categories).forEach((category) => {
+          const icons = collectionData.value.categories[category];
+          filterIcons(icons, collectionQuery.value, collectionSuffix.value).forEach((k) => {
+            rv.push(k);
+          });
+        });
+      }
+      if (collectionQuery.value && !rv.length && collectionData.value.hidden) {
+        rv = filterIcons(collectionData.value.hidden, collectionQuery.value, collectionSuffix.value);
+      }
+      return rv.map((name) => `${collectionData.value?.prefix}:${name}`);
+    });
+    const allIcons = computed(() => {
+      if (shouldDisplay.value === "search") {
+        return searchResultIcons.value;
+      } else if (shouldDisplay.value === "collection") {
+        return collectionIcons.value;
+      } else {
+        return [];
+      }
+    });
+    const visibleIcons = computed(() => {
+      const start = (page.value - 1) * props.perpage;
+      const end = page.value * props.perpage;
+      return allIcons.value.slice(start, end);
+    });
+    const iconSize = computed(() => {
+      const size = props.iconSize.toString();
+      if (/^\d+/.test(size)) {
+        return size + "px";
+      } else {
+        return size;
+      }
+    });
+    onMounted(async () => {
+      if (props.prefix) {
+        onSelectPrefix(props.prefix);
+      } else if (props.search) {
+        searchQuery.value = props.search;
+        onSearch();
+      }
+      groupCollections.value = await fetchCollections();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        withDirectives(createElementVNode("div", _hoisted_2, [
+          createElementVNode("section", _hoisted_3, [
+            createElementVNode("h1", null, toDisplayString(collectionCount.value) + " icon sets", 1),
+            createElementVNode("div", _hoisted_4, [
+              createVNode(unref(TextField), {
+                modelValue: collectionFilter.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => collectionFilter.value = $event),
+                placeholder: "Filter icon sets..."
+              }, null, 8, ["modelValue"]),
+              createVNode(unref(TextField), {
+                modelValue: searchQuery.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
+                placeholder: "Search icons...",
+                onKeydown: withKeys(onSearch, ["enter"])
+              }, null, 8, ["modelValue"])
+            ])
+          ]),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleCollections.value, (collection) => {
+            return openBlock(), createElementBlock("section", {
+              key: collection.category,
+              class: "ui-IconifyCollectionSample"
+            }, [
+              createElementVNode("h1", _hoisted_5, [
+                createElementVNode("span", _hoisted_6, toDisplayString(collection.category), 1),
+                createElementVNode("span", _hoisted_7, "(" + toDisplayString(collection.items.length) + " icon sets)", 1)
+              ]),
+              createElementVNode("div", _hoisted_8, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(collection.items, (item) => {
+                  return openBlock(), createBlock(_sfc_main$2, mergeProps({
+                    key: item.prefix
+                  }, { ref_for: true }, item, {
+                    onClick: withModifiers(($event) => onSelectPrefix(item.prefix), ["prevent"])
+                  }), null, 16, ["onClick"]);
+                }), 128))
+              ])
+            ]);
+          }), 128))
+        ], 512), [
+          [vShow, shouldDisplay.value === "all"]
+        ]),
+        shouldDisplay.value !== "all" ? (openBlock(), createElementBlock("div", _hoisted_9, [
+          createElementVNode("div", _hoisted_10, [
+            createVNode(unref(Button), {
+              type: "button",
+              variant: "surface",
+              color: "gray",
+              onClick: withModifiers(reset, ["prevent"])
+            }, {
+              default: withCtx(() => _cache[5] || (_cache[5] = [
+                createTextVNode(" Back ")
+              ])),
+              _: 1,
+              __: [5]
+            }),
+            shouldDisplay.value === "search" ? (openBlock(), createBlock(unref(TextField), {
+              key: 0,
+              modelValue: searchQuery.value,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => searchQuery.value = $event),
+              placeholder: "Search icons...",
+              onKeydown: withKeys(onSearch, ["enter"])
+            }, null, 8, ["modelValue"])) : createCommentVNode("", true),
+            shouldDisplay.value === "collection" ? (openBlock(), createBlock(unref(TextField), {
+              key: 1,
+              modelValue: collectionQuery.value,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => collectionQuery.value = $event),
+              placeholder: "Search icons..."
+            }, null, 8, ["modelValue"])) : createCommentVNode("", true)
+          ]),
+          shouldDisplay.value === "collection" && collectionData.value?.suffixes ? (openBlock(), createElementBlock("div", _hoisted_11, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(collectionData.value.suffixes, (k, v) => {
+              return openBlock(), createBlock(unref(Button), {
+                key: v,
+                variant: collectionSuffix.value === v ? "solid" : "outline",
+                color: "gray",
+                "high-contrast": "",
+                radius: "full",
+                onClick: withModifiers(($event) => collectionSuffix.value = v, ["prevent"])
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(k), 1)
+                ]),
+                _: 2
+              }, 1032, ["variant", "onClick"]);
+            }), 128))
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: "ui-IconifyCollectionIconGrid",
+            style: normalizeStyle({ fontSize: iconSize.value })
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleIcons.value, (icon) => {
+              return openBlock(), createBlock(unref(Tooltip), {
+                key: icon,
+                as: "div",
+                content: icon
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("button", {
+                    type: "button",
+                    onClick: withModifiers(($event) => onSelectIcon(icon), ["prevent"])
+                  }, [
+                    createVNode(unref(Icon), { icon }, null, 8, ["icon"])
+                  ], 8, _hoisted_12)
+                ]),
+                _: 2
+              }, 1032, ["content"]);
+            }), 128))
+          ], 4),
+          createVNode(unref(Pagination), {
+            page: page.value,
+            "onUpdate:page": _cache[4] || (_cache[4] = ($event) => page.value = $event),
+            total: allIcons.value.length,
+            perpage: _ctx.perpage,
+            size: "2"
+          }, null, 8, ["page", "total", "perpage"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const turnstileSrc = "https://challenges.cloudflare.com/turnstile/v0/api.js";
+const turnstileLoadFunction = "cfTurnstileOnLoad";
+let turnstileState = typeof window !== "undefined" ? window.turnstile !== void 0 ? "ready" : "unloaded" : "unloaded";
+let turnstileLoad;
+let widgetId;
+let resetTimeout;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Turnstile",
+  props: {
+    sitekey: {},
+    modelValue: {},
+    resetInterval: { default: 295 * 1e3 },
+    size: { default: "normal" },
+    theme: { default: "auto" },
+    action: { default: "" },
+    appearance: { default: "always" },
+    renderOnMount: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const element = useTemplateRef("element");
+    const resetTurnstile = () => {
+      if (window.turnstile) {
+        emit("update:modelValue", "");
+        window.turnstile.reset();
+      }
+    };
+    const removeTurnstile = () => {
+      if (widgetId) {
+        window.turnstile.remove(widgetId);
+        widgetId = void 0;
+      }
+    };
+    const callbackTurnstile = (token) => {
+      emit("update:modelValue", token);
+      resetTimeout = setTimeout(() => {
+        resetTurnstile();
+      }, props.resetInterval);
+    };
+    const renderTurnstile = () => {
+      widgetId = window.turnstile.render(element.value, {
+        sitekey: props.sitekey,
+        theme: props.theme,
+        size: props.size,
+        callback: callbackTurnstile,
+        action: props.action,
+        appearance: props.appearance
+      });
+    };
+    onMounted(async () => {
+      const turnstileLoadPromise = new Promise((resolve, reject) => {
+        turnstileLoad = { resolve, reject };
+        if (turnstileState === "ready") resolve(void 0);
+      });
+      window[turnstileLoadFunction] = () => {
+        turnstileLoad.resolve();
+        turnstileState = "ready";
+      };
+      const ensureTurnstile = () => {
+        if (turnstileState === "unloaded") {
+          turnstileState = "loading";
+          const url = `${turnstileSrc}?onload=${turnstileLoadFunction}&render=explicit`;
+          const script = document.createElement("script");
+          script.src = url;
+          script.async = true;
+          script.addEventListener("error", () => {
+            turnstileLoad.reject("Failed to load Turnstile.");
+          });
+          document.head.appendChild(script);
+        }
+        return turnstileLoadPromise;
+      };
+      await ensureTurnstile();
+      if (props.renderOnMount) {
+        renderTurnstile();
+      }
+    });
+    onBeforeUnmount(() => {
+      removeTurnstile();
+      clearTimeout(resetTimeout);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "element",
+        ref: element,
+        class: "ui-Turnstile"
+      }, null, 512);
+    };
+  }
+});
+export {
+  _sfc_main$1 as IconifyCollection,
+  _sfc_main as Turnstile
+};