@threadlabs/looma 0.2.5 → 0.2.6

package/vue/chunk-ROMBQS2L.js

@@ -1,352 +0,0 @@
-// src/index.ts
-import "@threadlabs/looma/layout";
-import "@threadlabs/looma/core";
-
-// src/adapter.ts
-import {
-  cloneVNode,
-  defineComponent,
-  h,
-  isVNode,
-  shallowRef,
-  watchEffect
-} from "vue";
-var BASE_EVENT_BINDINGS = [
-  ["open", "onOpen"],
-  ["close", "onClose"],
-  ["select", "onSelect"],
-  ["change", "onChange"],
-  ["input", "onInput"],
-  ["dismiss", "onDismiss"]
-];
-function toHTMLElement(value) {
-  if (!value) return null;
-  if (value instanceof HTMLElement) return value;
-  return null;
-}
-function createAdapterComponent(tagName, displayName, additionalEventBindings = [], defaultHydrationMismatch = "class", propertyBindings = []) {
-  const eventBindings = [...BASE_EVENT_BINDINGS, ...additionalEventBindings];
-  const callbackAttrs = new Set(eventBindings.map(([, callbackAttr]) => callbackAttr));
-  const propertyAttrs = new Set(propertyBindings);
-  return defineComponent({
-    name: displayName,
-    inheritAttrs: false,
-    setup(_props, { attrs, slots }) {
-      const elementRef = shallowRef(null);
-      const componentReady = shallowRef(false);
-      watchEffect((onCleanup) => {
-        const element = elementRef.value;
-        if (!element) return;
-        componentReady.value = element.classList.contains("hydrated") || Boolean(element.shadowRoot);
-        const adapterAttrs = attrs;
-        const propertyTarget = element;
-        for (const propertyName of propertyBindings) {
-          if (propertyTarget[propertyName] !== adapterAttrs[propertyName]) {
-            propertyTarget[propertyName] = adapterAttrs[propertyName];
-          }
-        }
-        const handlers = eventBindings.map(
-          ([eventName, callbackAttr]) => {
-            const callback = adapterAttrs[callbackAttr];
-            return [
-              eventName,
-              typeof callback === "function" ? (event) => callback(event.detail) : void 0
-            ];
-          }
-        );
-        for (const [eventName, handler] of handlers) {
-          if (handler) element.addEventListener(eventName, handler);
-        }
-        onCleanup(() => {
-          for (const [eventName, handler] of handlers) {
-            if (handler) element.removeEventListener(eventName, handler);
-          }
-        });
-      });
-      return () => {
-        const forwardedAttrs = Object.fromEntries(
-          Object.entries(attrs).filter(
-            ([name]) => !callbackAttrs.has(name) && !propertyAttrs.has(name)
-          )
-        );
-        const children = Object.entries(slots).flatMap(([slotName, slotFn]) => {
-          if (!slotFn) return [];
-          return slotFn().map((node) => {
-            if (slotName === "default") return node;
-            if (isVNode(node)) return cloneVNode(node, { slot: slotName });
-            return h("span", { slot: slotName }, node);
-          });
-        });
-        return h(
-          tagName,
-          {
-            "data-allow-mismatch": forwardedAttrs["data-allow-mismatch"] ?? defaultHydrationMismatch,
-            ...forwardedAttrs,
-            class: [forwardedAttrs.class, componentReady.value && "hydrated"],
-            ref: (value) => {
-              elementRef.value = toHTMLElement(value);
-            }
-          },
-          children.length > 0 ? children : void 0
-        );
-      };
-    }
-  });
-}
-
-// src/Combobox.ts
-import { defineComponent as defineComponent2, h as h2, shallowRef as shallowRef2, watch, watchEffect as watchEffect2 } from "vue";
-var Combobox = defineComponent2({
-  name: "Combobox",
-  inheritAttrs: false,
-  props: {
-    label: { type: String, required: true },
-    modelValue: { type: [String, Array, null], default: void 0 },
-    query: { type: String, default: void 0 },
-    defaultValue: String,
-    defaultQuery: String,
-    config: { type: Object, default: () => ({}) },
-    placeholder: String,
-    name: String,
-    size: { type: String, default: "md" },
-    labelVisibility: { type: String, default: "visible" },
-    disabled: Boolean,
-    readOnly: Boolean,
-    required: Boolean,
-    disclosure: Boolean,
-    clearable: Boolean,
-    help: String,
-    // Multiple mode: `modelValue` holds the selected item list and chips render before the cursor.
-    multiple: Boolean,
-    tokenSeparators: { type: Array, default: () => [] }
-  },
-  emits: {
-    // Typed for single mode (v-model of `string | null`); multiple mode writes the
-    // item array through the same channel (cast at the emit site below).
-    "update:modelValue": (_value) => true,
-    "update:query": (_query) => true,
-    queryChange: (_detail) => true,
-    valueChange: (_detail) => true,
-    freeEntry: (_detail) => true,
-    createEntry: (_detail) => true,
-    dependencyInvalidate: (_detail) => true,
-    validationChange: (_detail) => true,
-    // Multiple mode item events.
-    addItem: (_detail) => true,
-    removeItem: (_detail) => true,
-    createItem: (_detail) => true,
-    optionsChange: (_detail) => true
-  },
-  slots: Object,
-  setup(props, { attrs, slots, emit, expose }) {
-    const element = shallowRef2();
-    const rows = shallowRef2(props.config.options ?? []);
-    const currentQuery = shallowRef2(props.query ?? props.defaultQuery ?? "");
-    watch(() => props.query, (query) => {
-      if (query !== void 0) currentQuery.value = query;
-    });
-    watchEffect2(() => {
-      if (!element.value) return;
-      element.value.config = props.config;
-      element.value.value = props.modelValue;
-      element.value.query = props.query;
-      element.value.multiple = props.multiple;
-      element.value.tokenSeparators = props.tokenSeparators;
-    });
-    expose({ validate: () => element.value.validate() });
-    const items = () => props.multiple && Array.isArray(props.modelValue) ? props.modelValue : [];
-    return () => h2("ui-combobox", {
-      ...attrs,
-      ...Object.fromEntries(Object.entries(props).filter(([key]) => !["modelValue", "config", "query", "tokenSeparators"].includes(key))),
-      // Property binding is explicit for non-serializable config; strings remain
-      // SSR-compatible attributes until the element upgrades.
-      value: props.modelValue,
-      query: props.query,
-      tokenSeparators: props.tokenSeparators,
-      "data-allow-mismatch": "class",
-      ref: element,
-      class: [attrs.class, element.value?.shadowRoot && "hydrated"],
-      "onOptions-change": (event) => {
-        rows.value = event.detail;
-        emit("optionsChange", event.detail);
-      },
-      "onQuery-change": (event) => {
-        currentQuery.value = event.detail.query;
-        emit("update:query", event.detail.query);
-        emit("queryChange", event.detail);
-      },
-      "onValue-change": (event) => {
-        emit("update:modelValue", props.multiple ? event.detail : event.detail.value);
-        emit("valueChange", event.detail);
-      },
-      "onFree-entry": (event) => emit("freeEntry", event.detail),
-      "onCreate-entry": (event) => emit("createEntry", event.detail),
-      "onDependency-invalidate": (event) => emit("dependencyInvalidate", event.detail),
-      "onValidation-change": (event) => emit("validationChange", event.detail),
-      "onAdd-item": (event) => emit("addItem", event.detail),
-      "onRemove-item": (event) => emit("removeItem", event.detail),
-      "onCreate-item": (event) => emit("createItem", event.detail)
-    }, [
-      h2("label", { slot: "fallback" }, [props.label, h2("input", {
-        value: props.query ?? props.defaultQuery ?? "",
-        disabled: props.disabled,
-        readonly: props.readOnly,
-        required: props.required
-      })]),
-      ...slots.option ? rows.value.map((option) => h2("div", { slot: `option-${option.id}`, key: option.id }, slots.option({ option }))) : [],
-      ...props.multiple && slots.item ? items().map((item) => h2("span", { slot: `item-${item.id}`, key: item.id }, slots.item({ item }))) : [],
-      ...slots.create ? [h2("span", { slot: "create" }, slots.create({ query: currentQuery.value }))] : [],
-      ...["start", "footer", "loading", "empty", "error"].flatMap((name) => slots[name] ? [h2("div", { slot: name }, slots[name]({}))] : [])
-    ]);
-  }
-});
-
-// src/index.ts
-var Combobox2 = Combobox;
-var Stack = createAdapterComponent("ui-stack", "Stack");
-var Inline = createAdapterComponent("ui-inline", "Inline");
-var Cluster = createAdapterComponent("ui-cluster", "Cluster");
-var Grid = createAdapterComponent("ui-grid", "Grid");
-var Center = createAdapterComponent("ui-center", "Center");
-var Switcher = createAdapterComponent("ui-switcher", "Switcher");
-var Sidebar = createAdapterComponent("ui-sidebar", "Sidebar", [], "");
-var Reel = createAdapterComponent("ui-reel", "Reel");
-var Separator = createAdapterComponent("ui-separator", "Separator");
-var Disclosure = createAdapterComponent("ui-disclosure", "Disclosure", [], "class", ["open"]);
-var Editable = createAdapterComponent("ui-editable", "Editable", [["edit-change", "onEditChange"]], "class", ["edit"]);
-var Tabs = createAdapterComponent("ui-tabs", "Tabs", [], "class", ["value"]);
-var Dialog = createAdapterComponent("ui-dialog", "Dialog", [], "class", ["open"]);
-var Popover = createAdapterComponent("ui-popover", "Popover", [], "class", ["open"]);
-var Menu = createAdapterComponent("ui-menu", "Menu", [], "class", ["open"]);
-var MenuItem = createAdapterComponent("ui-menu-item", "MenuItem");
-var ContextMenu = createAdapterComponent("ui-context-menu", "ContextMenu", [], "class", ["open"]);
-var AffordanceScope = createAdapterComponent("ui-affordance-scope", "AffordanceScope");
-var Button = createAdapterComponent("ui-button", "Button");
-var IconButton = createAdapterComponent("ui-icon-button", "IconButton");
-var Input = createAdapterComponent("ui-input", "Input", [], "class", ["value"]);
-var Select = createAdapterComponent("ui-select", "Select", [], "class", ["value"]);
-var Textarea = createAdapterComponent("ui-textarea", "Textarea", [], "class", ["value"]);
-var FormField = createAdapterComponent("ui-form-field", "FormField");
-var Tooltip = createAdapterComponent("ui-tooltip", "Tooltip", [], "class", ["open"]);
-var ToastRegion = createAdapterComponent("ui-toast-region", "ToastRegion", [], "class", ["open"]);
-var Checkbox = createAdapterComponent("ui-checkbox", "Checkbox", [], "class", ["checked"]);
-var Switch = createAdapterComponent("ui-switch", "Switch", [], "class", ["checked"]);
-var RadioGroup = createAdapterComponent("ui-radio-group", "RadioGroup", [], "class", ["value"]);
-var Radio = createAdapterComponent("ui-radio", "Radio", [], "class", ["checked"]);
-var Badge = createAdapterComponent("ui-badge", "Badge");
-var Chip = createAdapterComponent("ui-chip", "Chip");
-var Callout = createAdapterComponent("ui-callout", "Callout");
-var Avatar = createAdapterComponent("ui-avatar", "Avatar");
-var AvatarGroup = createAdapterComponent("ui-avatar-group", "AvatarGroup");
-var FloatingActionButton = createAdapterComponent(
-  "ui-floating-action-button",
-  "FloatingActionButton"
-);
-var SearchShell = createAdapterComponent("ui-search-shell", "SearchShell");
-var SearchResultRow = createAdapterComponent("ui-search-result-row", "SearchResultRow");
-var TopBar = createAdapterComponent("ui-top-bar", "TopBar");
-var Tree = createAdapterComponent("ui-tree", "Tree", [
-  ["reorder", "onReorder"],
-  ["reorder-rejected", "onReorderRejected"]
-]);
-var TreeItem = createAdapterComponent(
-  "ui-tree-item",
-  "TreeItem",
-  [["expand", "onExpand"]],
-  "class",
-  ["expanded"]
-);
-var ADAPTER_COMPONENT_TAG_MAP = {
-  Combobox: "ui-combobox",
-  Stack: "ui-stack",
-  Inline: "ui-inline",
-  Cluster: "ui-cluster",
-  Grid: "ui-grid",
-  Center: "ui-center",
-  Switcher: "ui-switcher",
-  Sidebar: "ui-sidebar",
-  Reel: "ui-reel",
-  Separator: "ui-separator",
-  Disclosure: "ui-disclosure",
-  Editable: "ui-editable",
-  Tabs: "ui-tabs",
-  Dialog: "ui-dialog",
-  Popover: "ui-popover",
-  Menu: "ui-menu",
-  MenuItem: "ui-menu-item",
-  ContextMenu: "ui-context-menu",
-  AffordanceScope: "ui-affordance-scope",
-  Button: "ui-button",
-  IconButton: "ui-icon-button",
-  Input: "ui-input",
-  Select: "ui-select",
-  Textarea: "ui-textarea",
-  FormField: "ui-form-field",
-  Tooltip: "ui-tooltip",
-  ToastRegion: "ui-toast-region",
-  Checkbox: "ui-checkbox",
-  Switch: "ui-switch",
-  RadioGroup: "ui-radio-group",
-  Radio: "ui-radio",
-  Badge: "ui-badge",
-  Chip: "ui-chip",
-  Callout: "ui-callout",
-  Avatar: "ui-avatar",
-  AvatarGroup: "ui-avatar-group",
-  FloatingActionButton: "ui-floating-action-button",
-  SearchShell: "ui-search-shell",
-  SearchResultRow: "ui-search-result-row",
-  TopBar: "ui-top-bar",
-  Tree: "ui-tree",
-  TreeItem: "ui-tree-item"
-};
-var VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custom elements and DOM events map to typed callbacks.";
-
-export {
-  toHTMLElement,
-  createAdapterComponent,
-  Combobox2 as Combobox,
-  Stack,
-  Inline,
-  Cluster,
-  Grid,
-  Center,
-  Switcher,
-  Sidebar,
-  Reel,
-  Separator,
-  Disclosure,
-  Editable,
-  Tabs,
-  Dialog,
-  Popover,
-  Menu,
-  MenuItem,
-  ContextMenu,
-  AffordanceScope,
-  Button,
-  IconButton,
-  Input,
-  Select,
-  Textarea,
-  FormField,
-  Tooltip,
-  ToastRegion,
-  Checkbox,
-  Switch,
-  RadioGroup,
-  Radio,
-  Badge,
-  Chip,
-  Callout,
-  Avatar,
-  AvatarGroup,
-  FloatingActionButton,
-  SearchShell,
-  SearchResultRow,
-  TopBar,
-  Tree,
-  TreeItem,
-  ADAPTER_COMPONENT_TAG_MAP,
-  VUE_ADAPTER_NOTE
-};