@gradient-ui/core 0.8.0 → 1.0.0

package/dist/components/GMenu.mjs

@@ -0,0 +1,274 @@
+import { inject, provide, defineComponent, useSlots, computed, openBlock, createElementBlock, mergeProps, unref, toHandlers, renderSlot, createCommentVNode, createElementVNode, ref, onBeforeUnmount, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, resolveComponent, Fragment, renderList } from "vue";
+import { p as propsFactory } from "../propsFactory-FM5RGbLN.js";
+import { m as makeDisabledProps, u as useDisabled } from "../disabled-CAV056h6.js";
+import { m as makeColorProps } from "../color-WJmhRKJ_.js";
+import { m as makeSelectedProps, u as useSelected } from "../selected-DPdzuMh_.js";
+import { m as makePLAProps } from "../PLA-DePtRzKl.js";
+import { u as useSurfaceColor } from "../surfaceColor-Cic675ry.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+import { G as GDropdown } from "../GDropdown-TVH93Obq.js";
+import GIcon from "./GIcon.mjs";
+const GMenuEmits = {
+  select: (_item) => !0,
+  hover: (_item) => !0
+}, makeGMenuProps = propsFactory({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  isSelected: {
+    type: Function,
+    default: void 0
+  },
+  isHighlighted: {
+    type: Function,
+    default: void 0
+  },
+  state: {
+    type: String,
+    default: void 0
+  }
+}), MenuContextSymbol = Symbol("MenuContext");
+function useMenuContext(handlers) {
+  const parent = inject(MenuContextSymbol, null);
+  if (parent) return parent;
+  const state = {
+    onSelect: (handlers == null ? void 0 : handlers.onSelect) ?? (() => {
+    }),
+    onHover: (handlers == null ? void 0 : handlers.onHover) ?? (() => {
+    })
+  };
+  return provide(MenuContextSymbol, state), state;
+}
+const makeHighlightedProps = propsFactory({
+  highlighted: Boolean
+}), makeMenuItemProps = propsFactory({
+  ...makePLAProps(),
+  ...makeColorProps(),
+  ...makeDisabledProps(),
+  ...makeHighlightedProps(),
+  ...makeSelectedProps(),
+  item: {
+    type: Object,
+    default: void 0
+  },
+  isActive: {
+    type: Function,
+    default: void 0
+  },
+  state: {
+    type: String,
+    default: void 0
+  }
+}), _hoisted_1 = {
+  key: 0,
+  class: "g-menu-item__prepend"
+}, _hoisted_2 = { class: "g-menu-item__label" }, _hoisted_3 = {
+  key: 1,
+  class: "g-menu-item__append"
+}, _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "GMenuItem",
+  props: makeMenuItemProps(),
+  setup(__props) {
+    const slots = useSlots(), props = __props, disabledClass = useDisabled(props, "g-menu-item"), selectedClass = useSelected(props, "g-menu-item"), stateClass = computed(
+      () => props.state ? `g-menu-item_${props.state}` : void 0
+    ), { colorStyles } = useSurfaceColor(props);
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("li", mergeProps({
+        class: ["g-menu-item", [unref(disabledClass), unref(selectedClass), stateClass.value]],
+        style: unref(colorStyles)
+      }, toHandlers(_ctx.$attrs, !0)), [
+        (_a = slots.prepend) != null && _a.call(slots) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          renderSlot(_ctx.$slots, "prepend", {}, void 0, !0)
+        ])) : createCommentVNode("", !0),
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, !0)
+        ]),
+        (_b = slots.append) != null && _b.call(slots) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "append", {}, void 0, !0)
+        ])) : createCommentVNode("", !0)
+      ], 16);
+    };
+  }
+}), GMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-6c5dc300"]]), _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "GSubmenu",
+  props: {
+    item: {},
+    isSelected: { type: Function },
+    highlighted: { type: Boolean },
+    state: {}
+  },
+  setup(__props) {
+    const props = __props, menuContext = useMenuContext(), hasChildren = computed(
+      () => Array.isArray(props.item.children) && props.item.children.length > 0
+    ), menuItemRef = ref(null), open = ref(!1);
+    let closeTimer = null;
+    function hasSelectedInTree(root) {
+      if (!props.isSelected) return !1;
+      const stack = [root];
+      for (; stack.length > 0; ) {
+        const current = stack.pop();
+        if (current) {
+          if (props.isSelected(current)) return !0;
+          Array.isArray(current.children) && current.children.length > 0 && stack.push(...current.children);
+        }
+      }
+      return !1;
+    }
+    const isSubmenuSelected = computed(() => hasSelectedInTree(props.item));
+    function clearCloseTimer() {
+      closeTimer && (clearTimeout(closeTimer), closeTimer = null);
+    }
+    function scheduleClose() {
+      clearCloseTimer(), closeTimer = setTimeout(() => {
+        open.value = !1;
+      }, 120);
+    }
+    function onMouseenter() {
+      clearCloseTimer(), open.value = !0, menuContext.onHover(props.item);
+    }
+    function onMouseleave() {
+      scheduleClose();
+    }
+    function onContentMouseenter() {
+      clearCloseTimer(), open.value = !0;
+    }
+    function onContentMouseleave() {
+      scheduleClose();
+    }
+    return onBeforeUnmount(() => {
+      clearCloseTimer();
+    }), (_ctx, _cache) => (openBlock(), createBlock(GMenuItem, mergeProps({
+      ref_key: "menuItemRef",
+      ref: menuItemRef,
+      item: __props.item,
+      selected: isSubmenuSelected.value,
+      state: props.state,
+      role: "option",
+      "aria-selected": isSubmenuSelected.value,
+      "data-disabled": __props.item.disabled,
+      label: __props.item.label
+    }, toHandlers(_ctx.$attrs), {
+      onMouseenter,
+      onMouseleave
+    }), {
+      append: withCtx(() => [
+        createVNode(GIcon, {
+          icon: "chevron-down",
+          size: "20"
+        }),
+        hasChildren.value ? (openBlock(), createBlock(GDropdown, {
+          key: 0,
+          modelValue: open.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+          reference: menuItemRef.value,
+          placement: "bottom",
+          "same-width": "",
+          "open-on-click": !1,
+          "open-on-focus": !1,
+          offset: 0,
+          "close-on-content-click": !1
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              onMouseenter: onContentMouseenter,
+              onMouseleave: onContentMouseleave
+            }, [
+              renderSlot(_ctx.$slots, "submenu", {}, void 0, !0)
+            ], 32)
+          ]),
+          _: 3
+        }, 8, ["modelValue", "reference"])) : createCommentVNode("", !0)
+      ]),
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "item", { item: __props.item }, () => [
+          createTextVNode(toDisplayString(__props.item.label), 1)
+        ], !0)
+      ]),
+      _: 3
+    }, 16, ["item", "selected", "state", "aria-selected", "data-disabled", "label"]));
+  }
+}), GSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-9b63fae2"]]), _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GMenu",
+  props: makeGMenuProps(),
+  emits: GMenuEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props, emit = __emit, menuContext = useMenuContext({
+      onSelect: (item) => emit("select", item),
+      onHover: (item) => emit("hover", item)
+    });
+    function hasChildren(item) {
+      return Array.isArray(item.children) && item.children.length > 0;
+    }
+    function onClick(item) {
+      item.disabled || hasChildren(item) || menuContext.onSelect(item);
+    }
+    function onMouseenter(item) {
+      menuContext.onHover(item);
+    }
+    const isItemActive = (item) => {
+      var _a;
+      return !!((_a = props.isSelected) != null && _a.call(props, item));
+    };
+    return (_ctx, _cache) => {
+      const _component_g_menu = resolveComponent("g-menu", !0);
+      return openBlock(), createElementBlock("ul", mergeProps({
+        role: "listbox",
+        class: "g-menu"
+      }, _ctx.$attrs, toHandlers(_ctx.$attrs, !0)), [
+        (openBlock(!0), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
+          var _a;
+          return openBlock(), createElementBlock(Fragment, {
+            key: item.id ?? index
+          }, [
+            hasChildren(item) ? (openBlock(), createBlock(GSubmenu, {
+              key: 0,
+              item,
+              "is-selected": props.isSelected,
+              state: props.state
+            }, {
+              item: withCtx(({ item: slotItem }) => [
+                renderSlot(_ctx.$slots, "item", { item: slotItem }, () => [
+                  createTextVNode(toDisplayString(slotItem.label), 1)
+                ], !0)
+              ]),
+              submenu: withCtx(() => [
+                createVNode(_component_g_menu, {
+                  items: item.children ?? [],
+                  "is-selected": props.isSelected,
+                  state: props.state
+                }, null, 8, ["items", "is-selected", "state"])
+              ]),
+              _: 2
+            }, 1032, ["item", "is-selected", "state"])) : (openBlock(), createBlock(GMenuItem, {
+              key: 1,
+              item,
+              selected: (_a = _ctx.isSelected) == null ? void 0 : _a.call(_ctx, item),
+              state: props.state,
+              role: "option",
+              "aria-selected": isItemActive(item),
+              disabled: item.disabled,
+              label: item.label,
+              onClick: ($event) => onClick(item),
+              onMouseenter: ($event) => onMouseenter(item)
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "item", {
+                  item,
+                  selected: isItemActive(item)
+                }, () => [
+                  createTextVNode(toDisplayString(item.label), 1)
+                ], !0)
+              ]),
+              _: 2
+            }, 1032, ["item", "selected", "state", "aria-selected", "disabled", "label", "onClick", "onMouseenter"]))
+          ], 64);
+        }), 128))
+      ], 16);
+    };
+  }
+}), GMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-31c79d6e"]]);
+export {
+  GMenu as default
+};

package/dist/components/GModal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const vue=require("vue"),GButton_vue_vue_type_style_index_0_lang=require("../GButton.vue_vue_type_style_index_0_lang-tGLnt3_R.cjs"),components_GText=require("./GText.cjs"),components_BaseOverlay=require("../BaseOverlay-DgBWbJbs.cjs"),propsFactory=require("../propsFactory-DT6-QS4L.cjs"),_pluginVue_exportHelper=require("../_plugin-vue_export-helper-D_jf5u0r.cjs"),makeModalProps=propsFactory.propsFactory({...components_BaseOverlay.makeOverlayProps({appendTo:"body",placement:"center",position:"fixed",scrim:!0,lockScroll:!0}),title:String,text:String,width:{type:[String,Number],default:560},maxWidth:{type:[String,Number],default:"min(92vw, 720px)"},fullscreen:{type:Boolean,default:!1},scrollable:{type:Boolean,default:!1},hideClose:{type:Boolean,default:!1}}),_hoisted_1={key:0,class:"g-modal__header"},_hoisted_2={class:"g-modal__heading"},_hoisted_3={class:"g-modal__body"},_hoisted_4={key:1,class:"g-modal__footer"},_hoisted_5={class:"g-modal__actions"},_sfc_main=vue.defineComponent({__name:"GModal",props:makeModalProps(),emits:["update:modelValue"],setup(__props,{emit:__emit}){const props=__props,slots=vue.useSlots(),emit=__emit;function toUnit(value,fallback){return value==null||value===""?fallback:typeof value=="number"?`${value}px`:value}const modalStyle=vue.computed(()=>({width:props.fullscreen?"calc(100vw - (var(--g-modal-fullscreen-inset) * 2))":toUnit(props.width),maxWidth:props.fullscreen?"calc(100vw - (var(--g-modal-fullscreen-inset) * 2))":toUnit(props.maxWidth),height:props.fullscreen?"calc(100vh - (var(--g-modal-fullscreen-inset) * 2))":void 0,maxHeight:props.fullscreen?"calc(100vh - (var(--g-modal-fullscreen-inset) * 2))":"min(88vh, 960px)"}));return(_ctx,_cache)=>(vue.openBlock(),vue.createBlock(vue.unref(components_BaseOverlay.BaseOverlay),vue.mergeProps(props,{"onUpdate:modelValue":_cache[0]||(_cache[0]=$event=>emit("update:modelValue",$event))}),{default:vue.withCtx(({close,dismiss})=>[vue.createElementVNode("section",{class:vue.normalizeClass(["g-modal",{"g-modal_fullscreen":props.fullscreen,"g-modal_scrollable":props.scrollable}]),style:vue.normalizeStyle(modalStyle.value),role:"dialog","aria-modal":"true"},[slots.header||slots.title||slots.text||props.title||props.text||!props.hideClose?(vue.openBlock(),vue.createElementBlock("header",_hoisted_1,[vue.createElementVNode("div",_hoisted_2,[vue.renderSlot(_ctx.$slots,"header",{close,dismiss},()=>[slots.title||props.title?(vue.openBlock(),vue.createBlock(components_GText.default,{key:0,type:"h-6",class:"g-modal__title"},{default:vue.withCtx(()=>[vue.renderSlot(_ctx.$slots,"title",{},()=>[vue.createTextVNode(vue.toDisplayString(props.title),1)],!0)]),_:3})):vue.createCommentVNode("",!0),slots.text||props.text?(vue.openBlock(),vue.createBlock(components_GText.default,{key:1,type:"subtitle-2",class:"g-modal__text"},{default:vue.withCtx(()=>[vue.renderSlot(_ctx.$slots,"text",{},()=>[vue.createTextVNode(vue.toDisplayString(props.text),1)],!0)]),_:3})):vue.createCommentVNode("",!0)],!0)]),props.hideClose?vue.createCommentVNode("",!0):(vue.openBlock(),vue.createBlock(GButton_vue_vue_type_style_index_0_lang._sfc_main,{key:0,size:"s",variant:"text",color:"blue-grey-500","icon-button":"close",class:"g-modal__close","aria-label":"Close modal",onClick:dismiss},null,8,["onClick"]))])):vue.createCommentVNode("",!0),vue.createElementVNode("div",_hoisted_3,[vue.renderSlot(_ctx.$slots,"default",{close,dismiss},void 0,!0)]),slots.footer||slots.actions?(vue.openBlock(),vue.createElementBlock("footer",_hoisted_4,[vue.renderSlot(_ctx.$slots,"footer",{close,dismiss},()=>[vue.createElementVNode("div",_hoisted_5,[vue.renderSlot(_ctx.$slots,"actions",{close,dismiss},void 0,!0)])],!0)])):vue.createCommentVNode("",!0)],6)]),_:3},16))}}),GModal=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-9d53098e"]]);exports.default=GModal;

package/dist/components/GModal.mjs

@@ -0,0 +1,141 @@
+import { defineComponent, useSlots, computed, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, normalizeStyle, normalizeClass, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { _ as _sfc_main$1 } from "../GButton.vue_vue_type_style_index_0_lang-D9qRus1m.js";
+import GText from "./GText.mjs";
+import { m as makeOverlayProps, B as BaseOverlay } from "../BaseOverlay-DzJ37TCS.js";
+import { p as propsFactory } from "../propsFactory-FM5RGbLN.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+const makeModalProps = propsFactory({
+  ...makeOverlayProps({
+    appendTo: "body",
+    placement: "center",
+    position: "fixed",
+    scrim: !0,
+    lockScroll: !0
+  }),
+  title: String,
+  text: String,
+  width: {
+    type: [String, Number],
+    default: 560
+  },
+  maxWidth: {
+    type: [String, Number],
+    default: "min(92vw, 720px)"
+  },
+  fullscreen: {
+    type: Boolean,
+    default: !1
+  },
+  scrollable: {
+    type: Boolean,
+    default: !1
+  },
+  hideClose: {
+    type: Boolean,
+    default: !1
+  }
+}), _hoisted_1 = {
+  key: 0,
+  class: "g-modal__header"
+}, _hoisted_2 = { class: "g-modal__heading" }, _hoisted_3 = { class: "g-modal__body" }, _hoisted_4 = {
+  key: 1,
+  class: "g-modal__footer"
+}, _hoisted_5 = { class: "g-modal__actions" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GModal",
+  props: makeModalProps(),
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, slots = useSlots(), emit = __emit;
+    function toUnit(value, fallback) {
+      return value == null || value === "" ? fallback : typeof value == "number" ? `${value}px` : value;
+    }
+    const modalStyle = computed(() => ({
+      width: props.fullscreen ? "calc(100vw - (var(--g-modal-fullscreen-inset) * 2))" : toUnit(props.width),
+      maxWidth: props.fullscreen ? "calc(100vw - (var(--g-modal-fullscreen-inset) * 2))" : toUnit(props.maxWidth),
+      height: props.fullscreen ? "calc(100vh - (var(--g-modal-fullscreen-inset) * 2))" : void 0,
+      maxHeight: props.fullscreen ? "calc(100vh - (var(--g-modal-fullscreen-inset) * 2))" : "min(88vh, 960px)"
+    }));
+    return (_ctx, _cache) => (openBlock(), createBlock(unref(BaseOverlay), mergeProps(props, {
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
+    }), {
+      default: withCtx(({ close, dismiss }) => [
+        createElementVNode("section", {
+          class: normalizeClass(["g-modal", {
+            "g-modal_fullscreen": props.fullscreen,
+            "g-modal_scrollable": props.scrollable
+          }]),
+          style: normalizeStyle(modalStyle.value),
+          role: "dialog",
+          "aria-modal": "true"
+        }, [
+          slots.header || slots.title || slots.text || props.title || props.text || !props.hideClose ? (openBlock(), createElementBlock("header", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              renderSlot(_ctx.$slots, "header", {
+                close,
+                dismiss
+              }, () => [
+                slots.title || props.title ? (openBlock(), createBlock(GText, {
+                  key: 0,
+                  type: "h-6",
+                  class: "g-modal__title"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "title", {}, () => [
+                      createTextVNode(toDisplayString(props.title), 1)
+                    ], !0)
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", !0),
+                slots.text || props.text ? (openBlock(), createBlock(GText, {
+                  key: 1,
+                  type: "subtitle-2",
+                  class: "g-modal__text"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "text", {}, () => [
+                      createTextVNode(toDisplayString(props.text), 1)
+                    ], !0)
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", !0)
+              ], !0)
+            ]),
+            props.hideClose ? createCommentVNode("", !0) : (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              size: "s",
+              variant: "text",
+              color: "blue-grey-500",
+              "icon-button": "close",
+              class: "g-modal__close",
+              "aria-label": "Close modal",
+              onClick: dismiss
+            }, null, 8, ["onClick"]))
+          ])) : createCommentVNode("", !0),
+          createElementVNode("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "default", {
+              close,
+              dismiss
+            }, void 0, !0)
+          ]),
+          slots.footer || slots.actions ? (openBlock(), createElementBlock("footer", _hoisted_4, [
+            renderSlot(_ctx.$slots, "footer", {
+              close,
+              dismiss
+            }, () => [
+              createElementVNode("div", _hoisted_5, [
+                renderSlot(_ctx.$slots, "actions", {
+                  close,
+                  dismiss
+                }, void 0, !0)
+              ])
+            ], !0)
+          ])) : createCommentVNode("", !0)
+        ], 6)
+      ]),
+      _: 3
+    }, 16));
+  }
+}), GModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9d53098e"]]);
+export {
+  GModal as default
+};

package/dist/components/GNavGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const vue=require("vue"),components_GIcon=require("./GIcon.cjs"),surfaceColor=require("../surfaceColor-BlDoAKoV.cjs"),types=require("../types-l8OJZAJz.cjs"),groupContext=require("../groupContext-DU6dxh4q.cjs"),_pluginVue_exportHelper=require("../_plugin-vue_export-helper-D_jf5u0r.cjs"),_hoisted_1={class:"g-nav-group__label"},_hoisted_2={key:0,class:"g-nav-group__append"},_hoisted_3={class:"g-nav-group__items"},_sfc_main=vue.defineComponent({__name:"GNavGroup",props:types.makeNavGroupProps(),setup(__props){const props=__props,slots=vue.useSlots(),nav=types.useNavListInject(),open=vue.ref(props.defaultOpen),ownedValues=new Set,selected=vue.computed(()=>{if(!nav)return!1;if(props.value!==void 0&&nav.isSelected(props.value))return!0;for(const value of ownedValues)if(nav.isSelected(value))return!0;return!1}),placement=vue.computed(()=>(nav==null?void 0:nav.placement.value)??"left"),align=vue.computed(()=>(nav==null?void 0:nav.align.value)??"start"),resolvedColor=vue.computed(()=>(selected.value?nav==null?void 0:nav.activeColor.value:nav==null?void 0:nav.color.value)??"primary"),{colorStyles}=surfaceColor.useSurfaceColor({color:()=>resolvedColor.value}),groupStyles=vue.computed(()=>colorStyles.value),slotProps=vue.computed(()=>({selected:selected.value,open:open.value,disabled:props.disabled,value:props.value,modelValue:nav==null?void 0:nav.modelValue.value,isSelected,select,toggle}));function isSelected(value){return nav?nav.isSelected(value):!1}function select(value,event){nav==null||nav.select(value,event)}function toggle(){!props.collapsible||props.disabled||(open.value=!open.value)}function registerValue(value){value!==void 0&&ownedValues.add(value)}function unregisterValue(value){value!==void 0&&ownedValues.delete(value)}return groupContext.provideNavGroup({registerValue,unregisterValue}),(_ctx,_cache)=>(vue.openBlock(),vue.createElementBlock("li",{class:vue.normalizeClass(["g-nav-group",{"g-nav-group_open":open.value,"g-nav-group_selected":selected.value,"g-nav-group_disabled":props.disabled,[`g-nav-group_${placement.value}`]:!0,[`g-nav-group_align-${align.value}`]:!0}]),style:vue.normalizeStyle(groupStyles.value),role:"none"},[props.label||slots.label||props.collapsible?(vue.openBlock(),vue.createBlock(vue.resolveDynamicComponent(props.collapsible?"button":"div"),{key:0,class:"g-nav-group__header",type:props.collapsible?"button":void 0,disabled:props.collapsible?props.disabled:void 0,onClick:toggle},{default:vue.withCtx(()=>[vue.createElementVNode("span",_hoisted_1,[vue.renderSlot(_ctx.$slots,"label",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),()=>[vue.createTextVNode(vue.toDisplayString(props.label),1)],!0)]),slots.append||props.collapsible?(vue.openBlock(),vue.createElementBlock("span",_hoisted_2,[vue.renderSlot(_ctx.$slots,"append",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),()=>[props.collapsible?(vue.openBlock(),vue.createBlock(components_GIcon.default,{key:0,icon:props.appendIcon},null,8,["icon"])):vue.createCommentVNode("",!0)],!0)])):vue.createCommentVNode("",!0)]),_:3},8,["type","disabled"])):vue.createCommentVNode("",!0),vue.withDirectives(vue.createElementVNode("div",_hoisted_3,[vue.renderSlot(_ctx.$slots,"default",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),void 0,!0)],512),[[vue.vShow,!props.collapsible||open.value]])],6))}}),GNavGroup=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-ebdaf41d"]]);exports.default=GNavGroup;

package/dist/components/GNavGroup.mjs

@@ -0,0 +1,99 @@
+import { defineComponent, useSlots, ref, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, withCtx, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode, withDirectives, vShow } from "vue";
+import GIcon from "./GIcon.mjs";
+import { u as useSurfaceColor } from "../surfaceColor-Cic675ry.js";
+import { u as useNavListInject, a as makeNavGroupProps } from "../types-Ce2Qoz6Q.js";
+import { p as provideNavGroup } from "../groupContext-vS5bHonI.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+const _hoisted_1 = { class: "g-nav-group__label" }, _hoisted_2 = {
+  key: 0,
+  class: "g-nav-group__append"
+}, _hoisted_3 = { class: "g-nav-group__items" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GNavGroup",
+  props: makeNavGroupProps(),
+  setup(__props) {
+    const props = __props, slots = useSlots(), nav = useNavListInject(), open = ref(props.defaultOpen), ownedValues = /* @__PURE__ */ new Set(), selected = computed(() => {
+      if (!nav) return !1;
+      if (props.value !== void 0 && nav.isSelected(props.value))
+        return !0;
+      for (const value of ownedValues)
+        if (nav.isSelected(value))
+          return !0;
+      return !1;
+    }), placement = computed(() => (nav == null ? void 0 : nav.placement.value) ?? "left"), align = computed(() => (nav == null ? void 0 : nav.align.value) ?? "start"), resolvedColor = computed(
+      () => (selected.value ? nav == null ? void 0 : nav.activeColor.value : nav == null ? void 0 : nav.color.value) ?? "primary"
+    ), { colorStyles } = useSurfaceColor({
+      color: () => resolvedColor.value
+    }), groupStyles = computed(() => colorStyles.value), slotProps = computed(() => ({
+      selected: selected.value,
+      open: open.value,
+      disabled: props.disabled,
+      value: props.value,
+      modelValue: nav == null ? void 0 : nav.modelValue.value,
+      isSelected,
+      select,
+      toggle
+    }));
+    function isSelected(value) {
+      return nav ? nav.isSelected(value) : !1;
+    }
+    function select(value, event) {
+      nav == null || nav.select(value, event);
+    }
+    function toggle() {
+      !props.collapsible || props.disabled || (open.value = !open.value);
+    }
+    function registerValue(value) {
+      value !== void 0 && ownedValues.add(value);
+    }
+    function unregisterValue(value) {
+      value !== void 0 && ownedValues.delete(value);
+    }
+    return provideNavGroup({
+      registerValue,
+      unregisterValue
+    }), (_ctx, _cache) => (openBlock(), createElementBlock("li", {
+      class: normalizeClass(["g-nav-group", {
+        "g-nav-group_open": open.value,
+        "g-nav-group_selected": selected.value,
+        "g-nav-group_disabled": props.disabled,
+        [`g-nav-group_${placement.value}`]: !0,
+        [`g-nav-group_align-${align.value}`]: !0
+      }]),
+      style: normalizeStyle(groupStyles.value),
+      role: "none"
+    }, [
+      props.label || slots.label || props.collapsible ? (openBlock(), createBlock(resolveDynamicComponent(props.collapsible ? "button" : "div"), {
+        key: 0,
+        class: "g-nav-group__header",
+        type: props.collapsible ? "button" : void 0,
+        disabled: props.collapsible ? props.disabled : void 0,
+        onClick: toggle
+      }, {
+        default: withCtx(() => [
+          createElementVNode("span", _hoisted_1, [
+            renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+              createTextVNode(toDisplayString(props.label), 1)
+            ], !0)
+          ]),
+          slots.append || props.collapsible ? (openBlock(), createElementBlock("span", _hoisted_2, [
+            renderSlot(_ctx.$slots, "append", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+              props.collapsible ? (openBlock(), createBlock(GIcon, {
+                key: 0,
+                icon: props.appendIcon
+              }, null, 8, ["icon"])) : createCommentVNode("", !0)
+            ], !0)
+          ])) : createCommentVNode("", !0)
+        ]),
+        _: 3
+      }, 8, ["type", "disabled"])) : createCommentVNode("", !0),
+      withDirectives(createElementVNode("div", _hoisted_3, [
+        renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), void 0, !0)
+      ], 512), [
+        [vShow, !props.collapsible || open.value]
+      ])
+    ], 6));
+  }
+}), GNavGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ebdaf41d"]]);
+export {
+  GNavGroup as default
+};

package/dist/components/GNavItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const vue=require("vue"),components_GIcon=require("./GIcon.cjs"),routerLink=require("../routerLink-BhTEISct.cjs"),surfaceColor=require("../surfaceColor-BlDoAKoV.cjs"),types=require("../types-l8OJZAJz.cjs"),groupContext=require("../groupContext-DU6dxh4q.cjs"),_pluginVue_exportHelper=require("../_plugin-vue_export-helper-D_jf5u0r.cjs"),_hoisted_1={key:0,class:"g-nav-item__prepend"},_hoisted_2={class:"g-nav-item__label"},_hoisted_3={key:1,class:"g-nav-item__append"},_sfc_main=vue.defineComponent({__name:"GNavItem",props:types.makeNavItemProps(),emits:["click"],setup(__props,{emit:__emit}){const props=__props,slots=vue.useSlots(),emit=__emit,nav=types.useNavListInject(),group=groupContext.useNavGroupInject(),RouterLink=routerLink.useOptionalRouterLink(),selected=vue.computed(()=>nav?nav.isSelected(props.value):!1),placement=vue.computed(()=>(nav==null?void 0:nav.placement.value)??"left"),align=vue.computed(()=>(nav==null?void 0:nav.align.value)??"start"),indicator=vue.computed(()=>(nav==null?void 0:nav.indicator.value)??"line"),resolvedColor=vue.computed(()=>(selected.value?nav==null?void 0:nav.activeColor.value:nav==null?void 0:nav.color.value)??"primary"),{colorStyles}=surfaceColor.useSurfaceColor({color:()=>resolvedColor.value}),itemStyles=vue.computed(()=>colorStyles.value),slotProps=vue.computed(()=>({selected:selected.value,disabled:props.disabled,value:props.value,modelValue:nav==null?void 0:nav.modelValue.value,isSelected,select})),isRouterLink=vue.computed(()=>!!RouterLink&&!!props.to&&!props.disabled),fallbackHref=vue.computed(()=>routerLink.getRouterFallbackHref(props.to)),isLink=vue.computed(()=>!!(props.href||!RouterLink&&fallbackHref.value)&&!props.disabled),actionTag=vue.computed(()=>isRouterLink.value?RouterLink:isLink.value?"a":"button"),actionAttrs=vue.computed(()=>isRouterLink.value?{to:props.to}:isLink.value?{href:props.href??fallbackHref.value,target:props.target,rel:props.rel??(props.target==="_blank"?"noopener noreferrer":void 0)}:{type:"button",disabled:props.disabled});function isSelected(value){return nav?nav.isSelected(value):!1}function select(value,event){nav==null||nav.select(value,event)}function onClick(event){if(props.disabled){event.preventDefault();return}select(props.value,event),emit("click",event)}return vue.onMounted(()=>{group==null||group.registerValue(props.value)}),vue.onBeforeUnmount(()=>{group==null||group.unregisterValue(props.value)}),vue.watch(()=>props.value,(value,oldValue)=>{group==null||group.unregisterValue(oldValue),group==null||group.registerValue(value)}),(_ctx,_cache)=>{const _directive_ripple=vue.resolveDirective("ripple");return vue.openBlock(),vue.createElementBlock("li",{class:vue.normalizeClass(["g-nav-item",{"g-nav-item_selected":selected.value,"g-nav-item_disabled":props.disabled,[`g-nav-item_${placement.value}`]:!0,[`g-nav-item_align-${align.value}`]:!0,[`g-nav-item_indicator-${indicator.value}`]:!0}]),style:vue.normalizeStyle(itemStyles.value),role:"none"},[vue.withDirectives((vue.openBlock(),vue.createBlock(vue.resolveDynamicComponent(actionTag.value),vue.mergeProps({class:"g-nav-item__action","aria-current":selected.value?"page":void 0},actionAttrs.value,{onClick}),{default:vue.withCtx(()=>[slots.prepend||props.prependIcon?(vue.openBlock(),vue.createElementBlock("span",_hoisted_1,[vue.renderSlot(_ctx.$slots,"prepend",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),()=>[props.prependIcon?(vue.openBlock(),vue.createBlock(components_GIcon.default,{key:0,icon:props.prependIcon},null,8,["icon"])):vue.createCommentVNode("",!0)],!0)])):vue.createCommentVNode("",!0),vue.createElementVNode("span",_hoisted_2,[vue.renderSlot(_ctx.$slots,"default",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),()=>[vue.createTextVNode(vue.toDisplayString(props.label),1)],!0)]),_cache[0]||(_cache[0]=vue.createElementVNode("span",{"aria-hidden":"true",class:"g-nav-item__indicator"},null,-1)),slots.append||props.appendIcon?(vue.openBlock(),vue.createElementBlock("span",_hoisted_3,[vue.renderSlot(_ctx.$slots,"append",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),()=>[props.appendIcon?(vue.openBlock(),vue.createBlock(components_GIcon.default,{key:0,icon:props.appendIcon},null,8,["icon"])):vue.createCommentVNode("",!0)],!0)])):vue.createCommentVNode("",!0)]),_:3},16,["aria-current"])),[[_directive_ripple]])],6)}}}),GNavItem=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-8b9867ad"]]);exports.default=GNavItem;

package/dist/components/GNavItem.mjs

@@ -0,0 +1,124 @@
+import { defineComponent, useSlots, computed, onMounted, onBeforeUnmount, watch, resolveDirective, openBlock, createElementBlock, normalizeStyle, normalizeClass, withDirectives, createBlock, resolveDynamicComponent, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, createElementVNode, createTextVNode, toDisplayString } from "vue";
+import GIcon from "./GIcon.mjs";
+import { u as useOptionalRouterLink, g as getRouterFallbackHref } from "../routerLink-p0fsQRNq.js";
+import { u as useSurfaceColor } from "../surfaceColor-Cic675ry.js";
+import { u as useNavListInject, b as makeNavItemProps } from "../types-Ce2Qoz6Q.js";
+import { u as useNavGroupInject } from "../groupContext-vS5bHonI.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "g-nav-item__prepend"
+}, _hoisted_2 = { class: "g-nav-item__label" }, _hoisted_3 = {
+  key: 1,
+  class: "g-nav-item__append"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GNavItem",
+  props: makeNavItemProps(),
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, slots = useSlots(), emit = __emit, nav = useNavListInject(), group = useNavGroupInject(), RouterLink = useOptionalRouterLink(), selected = computed(
+      () => nav ? nav.isSelected(props.value) : !1
+    ), placement = computed(() => (nav == null ? void 0 : nav.placement.value) ?? "left"), align = computed(() => (nav == null ? void 0 : nav.align.value) ?? "start"), indicator = computed(() => (nav == null ? void 0 : nav.indicator.value) ?? "line"), resolvedColor = computed(
+      () => (selected.value ? nav == null ? void 0 : nav.activeColor.value : nav == null ? void 0 : nav.color.value) ?? "primary"
+    ), { colorStyles } = useSurfaceColor({
+      color: () => resolvedColor.value
+    }), itemStyles = computed(() => colorStyles.value), slotProps = computed(() => ({
+      selected: selected.value,
+      disabled: props.disabled,
+      value: props.value,
+      modelValue: nav == null ? void 0 : nav.modelValue.value,
+      isSelected,
+      select
+    })), isRouterLink = computed(
+      () => !!RouterLink && !!props.to && !props.disabled
+    ), fallbackHref = computed(() => getRouterFallbackHref(props.to)), isLink = computed(
+      () => !!(props.href || !RouterLink && fallbackHref.value) && !props.disabled
+    ), actionTag = computed(() => isRouterLink.value ? RouterLink : isLink.value ? "a" : "button"), actionAttrs = computed(
+      () => isRouterLink.value ? {
+        to: props.to
+      } : isLink.value ? {
+        href: props.href ?? fallbackHref.value,
+        target: props.target,
+        rel: props.rel ?? (props.target === "_blank" ? "noopener noreferrer" : void 0)
+      } : {
+        type: "button",
+        disabled: props.disabled
+      }
+    );
+    function isSelected(value) {
+      return nav ? nav.isSelected(value) : !1;
+    }
+    function select(value, event) {
+      nav == null || nav.select(value, event);
+    }
+    function onClick(event) {
+      if (props.disabled) {
+        event.preventDefault();
+        return;
+      }
+      select(props.value, event), emit("click", event);
+    }
+    return onMounted(() => {
+      group == null || group.registerValue(props.value);
+    }), onBeforeUnmount(() => {
+      group == null || group.unregisterValue(props.value);
+    }), watch(
+      () => props.value,
+      (value, oldValue) => {
+        group == null || group.unregisterValue(oldValue), group == null || group.registerValue(value);
+      }
+    ), (_ctx, _cache) => {
+      const _directive_ripple = resolveDirective("ripple");
+      return openBlock(), createElementBlock("li", {
+        class: normalizeClass(["g-nav-item", {
+          "g-nav-item_selected": selected.value,
+          "g-nav-item_disabled": props.disabled,
+          [`g-nav-item_${placement.value}`]: !0,
+          [`g-nav-item_align-${align.value}`]: !0,
+          [`g-nav-item_indicator-${indicator.value}`]: !0
+        }]),
+        style: normalizeStyle(itemStyles.value),
+        role: "none"
+      }, [
+        withDirectives((openBlock(), createBlock(resolveDynamicComponent(actionTag.value), mergeProps({
+          class: "g-nav-item__action",
+          "aria-current": selected.value ? "page" : void 0
+        }, actionAttrs.value, { onClick }), {
+          default: withCtx(() => [
+            slots.prepend || props.prependIcon ? (openBlock(), createElementBlock("span", _hoisted_1, [
+              renderSlot(_ctx.$slots, "prepend", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+                props.prependIcon ? (openBlock(), createBlock(GIcon, {
+                  key: 0,
+                  icon: props.prependIcon
+                }, null, 8, ["icon"])) : createCommentVNode("", !0)
+              ], !0)
+            ])) : createCommentVNode("", !0),
+            createElementVNode("span", _hoisted_2, [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+                createTextVNode(toDisplayString(props.label), 1)
+              ], !0)
+            ]),
+            _cache[0] || (_cache[0] = createElementVNode("span", {
+              "aria-hidden": "true",
+              class: "g-nav-item__indicator"
+            }, null, -1)),
+            slots.append || props.appendIcon ? (openBlock(), createElementBlock("span", _hoisted_3, [
+              renderSlot(_ctx.$slots, "append", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+                props.appendIcon ? (openBlock(), createBlock(GIcon, {
+                  key: 0,
+                  icon: props.appendIcon
+                }, null, 8, ["icon"])) : createCommentVNode("", !0)
+              ], !0)
+            ])) : createCommentVNode("", !0)
+          ]),
+          _: 3
+        }, 16, ["aria-current"])), [
+          [_directive_ripple]
+        ])
+      ], 6);
+    };
+  }
+}), GNavItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8b9867ad"]]);
+export {
+  GNavItem as default
+};