@gradient-ui/core 0.8.0 → 2.0.0

package/dist/components/GNavList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const vue=require("vue"),surfaceColor=require("../surfaceColor-BlDoAKoV.cjs"),glass=require("../glass-CZEblMo2.cjs"),types=require("../types-l8OJZAJz.cjs"),_pluginVue_exportHelper=require("../_plugin-vue_export-helper-D_jf5u0r.cjs"),_hoisted_1=["aria-label"],_hoisted_2={key:0,class:"g-nav-list__header"},_hoisted_3={class:"g-nav-list__items"},_hoisted_4={key:1,class:"g-nav-list__footer"},_sfc_main=vue.defineComponent({__name:"GNavList",props:types.makeNavListProps({color:"primary"}),emits:["update:modelValue","select"],setup(__props,{emit:__emit}){const props=__props,slots=vue.useSlots(),emit=__emit,localValue=vue.ref(props.defaultValue),isControlled=vue.computed(()=>props.modelValue!==void 0),model=vue.computed({get(){return isControlled.value?props.modelValue:localValue.value},set(value){isControlled.value||(localValue.value=value),emit("update:modelValue",value)}}),resolvedActiveColor=vue.computed(()=>props.activeColor??props.color),{colorStyles,resolvedGradient}=surfaceColor.useSurfaceColor({color:()=>resolvedActiveColor.value}),{glassStyles}=glass.useGlass(props),navLayoutStyles=vue.computed(()=>({"--g-nav-list-active-gradient":resolvedGradient.value,"--g-nav-list-width":toUnit(props.width,"100%")})),navStyles=vue.computed(()=>[colorStyles.value,glassStyles.value,navLayoutStyles.value]),navClasses=vue.computed(()=>({[`g-nav-list_${props.placement}`]:!0,[`g-nav-list_align-${props.align}`]:!0,[`g-nav-list_${props.surface}`]:!0})),slotProps=vue.computed(()=>({modelValue:model.value,select}));function toUnit(value,fallback){return value==null||value===""?fallback:typeof value=="number"?`${value}px`:value}function isSelected(value){return value!==void 0&&Object.is(model.value,value)}function select(value,event){value!==void 0&&(model.value=value,emit("select",value,event))}return types.provideNavList({modelValue:model,color:vue.computed(()=>props.color),activeColor:resolvedActiveColor,placement:vue.computed(()=>props.placement),align:vue.computed(()=>props.align),indicator:vue.computed(()=>props.indicator),isSelected,select}),(_ctx,_cache)=>(vue.openBlock(),vue.createElementBlock("nav",{class:vue.normalizeClass(["g-nav-list",navClasses.value]),style:vue.normalizeStyle(navStyles.value),"aria-label":props.ariaLabel||"Navigation list"},[slots.header?(vue.openBlock(),vue.createElementBlock("div",_hoisted_2,[vue.renderSlot(_ctx.$slots,"header",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),void 0,!0)])):vue.createCommentVNode("",!0),vue.createElementVNode("ul",_hoisted_3,[vue.renderSlot(_ctx.$slots,"default",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),void 0,!0)]),slots.footer?(vue.openBlock(),vue.createElementBlock("div",_hoisted_4,[vue.renderSlot(_ctx.$slots,"footer",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),void 0,!0)])):vue.createCommentVNode("",!0)],14,_hoisted_1))}}),GNavList=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-64ccc1a6"]]);exports.default=GNavList;

package/dist/components/GNavList.mjs

@@ -0,0 +1,82 @@
+import { defineComponent, useSlots, ref, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, createElementVNode } from "vue";
+import { u as useSurfaceColor } from "../surfaceColor-Cic675ry.js";
+import { u as useGlass } from "../glass-CJjbKWWO.js";
+import { p as provideNavList, m as makeNavListProps } from "../types-Ce2Qoz6Q.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+const _hoisted_1 = ["aria-label"], _hoisted_2 = {
+  key: 0,
+  class: "g-nav-list__header"
+}, _hoisted_3 = { class: "g-nav-list__items" }, _hoisted_4 = {
+  key: 1,
+  class: "g-nav-list__footer"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GNavList",
+  props: makeNavListProps({ color: "primary" }),
+  emits: ["update:modelValue", "select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, slots = useSlots(), emit = __emit, localValue = ref(props.defaultValue), isControlled = computed(() => props.modelValue !== void 0), model = computed({
+      get() {
+        return isControlled.value ? props.modelValue : localValue.value;
+      },
+      set(value) {
+        isControlled.value || (localValue.value = value), emit("update:modelValue", value);
+      }
+    }), resolvedActiveColor = computed(
+      () => props.activeColor ?? props.color
+    ), { colorStyles, resolvedGradient } = useSurfaceColor({
+      color: () => resolvedActiveColor.value
+    }), { glassStyles } = useGlass(props), navLayoutStyles = computed(
+      () => ({
+        "--g-nav-list-active-gradient": resolvedGradient.value,
+        "--g-nav-list-width": toUnit(props.width, "100%")
+      })
+    ), navStyles = computed(() => [
+      colorStyles.value,
+      glassStyles.value,
+      navLayoutStyles.value
+    ]), navClasses = computed(() => ({
+      [`g-nav-list_${props.placement}`]: !0,
+      [`g-nav-list_align-${props.align}`]: !0,
+      [`g-nav-list_${props.surface}`]: !0
+    })), slotProps = computed(() => ({
+      modelValue: model.value,
+      select
+    }));
+    function toUnit(value, fallback) {
+      return value == null || value === "" ? fallback : typeof value == "number" ? `${value}px` : value;
+    }
+    function isSelected(value) {
+      return value !== void 0 && Object.is(model.value, value);
+    }
+    function select(value, event) {
+      value !== void 0 && (model.value = value, emit("select", value, event));
+    }
+    return provideNavList({
+      modelValue: model,
+      color: computed(() => props.color),
+      activeColor: resolvedActiveColor,
+      placement: computed(() => props.placement),
+      align: computed(() => props.align),
+      indicator: computed(() => props.indicator),
+      isSelected,
+      select
+    }), (_ctx, _cache) => (openBlock(), createElementBlock("nav", {
+      class: normalizeClass(["g-nav-list", navClasses.value]),
+      style: normalizeStyle(navStyles.value),
+      "aria-label": props.ariaLabel || "Navigation list"
+    }, [
+      slots.header ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(slotProps.value)), void 0, !0)
+      ])) : createCommentVNode("", !0),
+      createElementVNode("ul", _hoisted_3, [
+        renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), void 0, !0)
+      ]),
+      slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4, [
+        renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(slotProps.value)), void 0, !0)
+      ])) : createCommentVNode("", !0)
+    ], 14, _hoisted_1));
+  }
+}), GNavList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-64ccc1a6"]]);
+export {
+  GNavList as default
+};

package/dist/components/GNavbar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const vue=require("vue"),surfaceColor=require("../surfaceColor-BlDoAKoV.cjs"),types=require("../types-DsVDdHxP.cjs"),_pluginVue_exportHelper=require("../_plugin-vue_export-helper-D_jf5u0r.cjs"),_hoisted_1=["aria-label"],_hoisted_2={key:0,class:"g-navbar__prepend"},_hoisted_3={key:1,class:"g-navbar__append"},scrollThreshold=8,topRevealOffset=16,_sfc_main=vue.defineComponent({__name:"GNavbar",props:types.makeNavbarProps({color:"primary"}),emits:["update:modelValue","select"],setup(__props,{emit:__emit}){const props=__props,slots=vue.useSlots(),emit=__emit,rootRef=vue.ref(null),itemsRef=vue.ref(null),localValue=vue.ref(props.defaultValue),hidden=vue.ref(!1),lastScrollY=vue.ref(0);let scrollRaf=0,indicatorRaf=0,resizeObserver;const registry=new Map,indicator=vue.ref({left:0,width:0,visible:!1}),isControlled=vue.computed(()=>props.modelValue!==void 0),model=vue.computed({get(){return isControlled.value?props.modelValue:localValue.value},set(value){isControlled.value||(localValue.value=value),emit("update:modelValue",value)}}),resolvedActiveColor=vue.computed(()=>props.activeColor??props.color),{colorStyles,resolvedGradient}=surfaceColor.useSurfaceColor({color:()=>resolvedActiveColor.value}),navbarIndicatorStyles=vue.computed(()=>({"--g-navbar-indicator-gradient":resolvedGradient.value,"--g-navbar-indicator-left":`${indicator.value.left}px`,"--g-navbar-indicator-width":`${indicator.value.width}px`})),navbarStyles=vue.computed(()=>[colorStyles.value,navbarIndicatorStyles.value]),navbarClasses=vue.computed(()=>({[`g-navbar_${props.density}`]:!0,"g-navbar_hidden":hidden.value,"g-navbar_elevated":props.elevated,"g-navbar_indicator-visible":indicator.value.visible})),slotProps=vue.computed(()=>({modelValue:model.value,select}));function isSelected(value){return value!==void 0&&Object.is(model.value,value)}function isElementSelected(el){var _a;const value=model.value;return value===void 0||!el?!1:((_a=registry.get(value))==null?void 0:_a.has(el))??!1}function register(value,el){if(value===void 0)return;const bucket=registry.get(value)??new Set;bucket.add(el),registry.set(value,bucket),resizeObserver==null||resizeObserver.observe(el),queueIndicatorRefresh()}function unregister(value,el){const bucket=registry.get(value);bucket&&(bucket.delete(el),resizeObserver==null||resizeObserver.unobserve(el),bucket.size||registry.delete(value),queueIndicatorRefresh())}function unregisterElement(el){for(const[value,bucket]of registry)bucket.delete(el),resizeObserver==null||resizeObserver.unobserve(el),bucket.size||registry.delete(value);queueIndicatorRefresh()}function select(value,event){value!==void 0&&(model.value=value,emit("select",value,event),queueIndicatorRefresh())}function queueIndicatorRefresh(){vue.nextTick(()=>{indicatorRaf&&window.cancelAnimationFrame(indicatorRaf),indicatorRaf=window.requestAnimationFrame(()=>{indicatorRaf=0,refreshIndicator()})})}function refreshIndicator(){var _a;const value=model.value,container=itemsRef.value,item=value===void 0||(_a=registry.get(value))==null?void 0:_a.values().next().value;if(!container||!item){indicator.value={left:0,width:0,visible:!1};return}const containerRect=container.getBoundingClientRect(),itemRect=item.getBoundingClientRect();indicator.value={left:itemRect.left-containerRect.left+container.scrollLeft,width:itemRect.width,visible:!0}}function updateScrollState(){if(scrollRaf=0,!props.hideOnScroll){hidden.value=!1,lastScrollY.value=Math.max(0,window.scrollY);return}const currentY=Math.max(0,window.scrollY),delta=currentY-lastScrollY.value;if(currentY<=topRevealOffset){hidden.value=!1,lastScrollY.value=currentY;return}Math.abs(delta)>=scrollThreshold&&(hidden.value=delta>0,lastScrollY.value=currentY)}function onScroll(){scrollRaf||(scrollRaf=window.requestAnimationFrame(updateScrollState))}return types.provideNavbar({modelValue:model,color:vue.toRef(props,"color"),activeColor:vue.computed(()=>props.activeColor),isSelected,isElementSelected,register,unregister,unregisterElement,select,refreshIndicator:queueIndicatorRefresh}),vue.watch(()=>model.value,()=>queueIndicatorRefresh()),vue.onMounted(()=>{var _a;lastScrollY.value=window.scrollY,resizeObserver=new ResizeObserver(queueIndicatorRefresh),itemsRef.value&&resizeObserver.observe(itemsRef.value);for(const bucket of registry.values())for(const item of bucket)resizeObserver.observe(item);queueIndicatorRefresh(),window.setTimeout(queueIndicatorRefresh,60),window.setTimeout(queueIndicatorRefresh,240),(_a=document.fonts)==null||_a.ready.then(queueIndicatorRefresh),window.addEventListener("resize",queueIndicatorRefresh),window.addEventListener("scroll",onScroll,{passive:!0})}),vue.onBeforeUnmount(()=>{scrollRaf&&window.cancelAnimationFrame(scrollRaf),indicatorRaf&&window.cancelAnimationFrame(indicatorRaf),resizeObserver==null||resizeObserver.disconnect(),window.removeEventListener("resize",queueIndicatorRefresh),window.removeEventListener("scroll",onScroll)}),(_ctx,_cache)=>(vue.openBlock(),vue.createElementBlock("header",{ref_key:"rootRef",ref:rootRef,class:vue.normalizeClass(["g-navbar",navbarClasses.value]),style:vue.normalizeStyle(navbarStyles.value)},[vue.createElementVNode("nav",{class:"g-navbar__nav","aria-label":props.ariaLabel||"Primary navigation"},[slots.prepend?(vue.openBlock(),vue.createElementBlock("div",_hoisted_2,[vue.renderSlot(_ctx.$slots,"prepend",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),void 0,!0)])):vue.createCommentVNode("",!0),vue.createElementVNode("ul",{ref_key:"itemsRef",ref:itemsRef,class:"g-navbar__items"},[_cache[0]||(_cache[0]=vue.createElementVNode("li",{"aria-hidden":"true",class:"g-navbar__indicator"},null,-1)),vue.renderSlot(_ctx.$slots,"default",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),void 0,!0)],512),slots.append?(vue.openBlock(),vue.createElementBlock("div",_hoisted_3,[vue.renderSlot(_ctx.$slots,"append",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),void 0,!0)])):vue.createCommentVNode("",!0)],8,_hoisted_1)],6))}}),GNavbar=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-4e4b305f"]]);exports.default=GNavbar;

package/dist/components/GNavbar.mjs

@@ -0,0 +1,172 @@
+import { defineComponent, useSlots, ref, computed, nextTick, toRef, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode } from "vue";
+import { u as useSurfaceColor } from "../surfaceColor-Cic675ry.js";
+import { p as provideNavbar, m as makeNavbarProps } from "../types-DmWFHzOk.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+const _hoisted_1 = ["aria-label"], _hoisted_2 = {
+  key: 0,
+  class: "g-navbar__prepend"
+}, _hoisted_3 = {
+  key: 1,
+  class: "g-navbar__append"
+}, scrollThreshold = 8, topRevealOffset = 16, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GNavbar",
+  props: makeNavbarProps({ color: "primary" }),
+  emits: ["update:modelValue", "select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, slots = useSlots(), emit = __emit, rootRef = ref(null), itemsRef = ref(null), localValue = ref(props.defaultValue), hidden = ref(!1), lastScrollY = ref(0);
+    let scrollRaf = 0, indicatorRaf = 0, resizeObserver;
+    const registry = /* @__PURE__ */ new Map(), indicator = ref({
+      left: 0,
+      width: 0,
+      visible: !1
+    }), isControlled = computed(() => props.modelValue !== void 0), model = computed({
+      get() {
+        return isControlled.value ? props.modelValue : localValue.value;
+      },
+      set(value) {
+        isControlled.value || (localValue.value = value), emit("update:modelValue", value);
+      }
+    }), resolvedActiveColor = computed(
+      () => props.activeColor ?? props.color
+    ), { colorStyles, resolvedGradient } = useSurfaceColor({
+      color: () => resolvedActiveColor.value
+    }), navbarIndicatorStyles = computed(
+      () => ({
+        "--g-navbar-indicator-gradient": resolvedGradient.value,
+        "--g-navbar-indicator-left": `${indicator.value.left}px`,
+        "--g-navbar-indicator-width": `${indicator.value.width}px`
+      })
+    ), navbarStyles = computed(() => [
+      colorStyles.value,
+      navbarIndicatorStyles.value
+    ]), navbarClasses = computed(() => ({
+      [`g-navbar_${props.density}`]: !0,
+      "g-navbar_hidden": hidden.value,
+      "g-navbar_elevated": props.elevated,
+      "g-navbar_indicator-visible": indicator.value.visible
+    })), slotProps = computed(() => ({
+      modelValue: model.value,
+      select
+    }));
+    function isSelected(value) {
+      return value !== void 0 && Object.is(model.value, value);
+    }
+    function isElementSelected(el) {
+      var _a;
+      const value = model.value;
+      return value === void 0 || !el ? !1 : ((_a = registry.get(value)) == null ? void 0 : _a.has(el)) ?? !1;
+    }
+    function register(value, el) {
+      if (value === void 0) return;
+      const bucket = registry.get(value) ?? /* @__PURE__ */ new Set();
+      bucket.add(el), registry.set(value, bucket), resizeObserver == null || resizeObserver.observe(el), queueIndicatorRefresh();
+    }
+    function unregister(value, el) {
+      const bucket = registry.get(value);
+      bucket && (bucket.delete(el), resizeObserver == null || resizeObserver.unobserve(el), bucket.size || registry.delete(value), queueIndicatorRefresh());
+    }
+    function unregisterElement(el) {
+      for (const [value, bucket] of registry)
+        bucket.delete(el), resizeObserver == null || resizeObserver.unobserve(el), bucket.size || registry.delete(value);
+      queueIndicatorRefresh();
+    }
+    function select(value, event) {
+      value !== void 0 && (model.value = value, emit("select", value, event), queueIndicatorRefresh());
+    }
+    function queueIndicatorRefresh() {
+      nextTick(() => {
+        indicatorRaf && window.cancelAnimationFrame(indicatorRaf), indicatorRaf = window.requestAnimationFrame(() => {
+          indicatorRaf = 0, refreshIndicator();
+        });
+      });
+    }
+    function refreshIndicator() {
+      var _a;
+      const value = model.value, container = itemsRef.value, item = value === void 0 || (_a = registry.get(value)) == null ? void 0 : _a.values().next().value;
+      if (!container || !item) {
+        indicator.value = {
+          left: 0,
+          width: 0,
+          visible: !1
+        };
+        return;
+      }
+      const containerRect = container.getBoundingClientRect(), itemRect = item.getBoundingClientRect();
+      indicator.value = {
+        left: itemRect.left - containerRect.left + container.scrollLeft,
+        width: itemRect.width,
+        visible: !0
+      };
+    }
+    function updateScrollState() {
+      if (scrollRaf = 0, !props.hideOnScroll) {
+        hidden.value = !1, lastScrollY.value = Math.max(0, window.scrollY);
+        return;
+      }
+      const currentY = Math.max(0, window.scrollY), delta = currentY - lastScrollY.value;
+      if (currentY <= topRevealOffset) {
+        hidden.value = !1, lastScrollY.value = currentY;
+        return;
+      }
+      Math.abs(delta) >= scrollThreshold && (hidden.value = delta > 0, lastScrollY.value = currentY);
+    }
+    function onScroll() {
+      scrollRaf || (scrollRaf = window.requestAnimationFrame(updateScrollState));
+    }
+    return provideNavbar({
+      modelValue: model,
+      color: toRef(props, "color"),
+      activeColor: computed(() => props.activeColor),
+      isSelected,
+      isElementSelected,
+      register,
+      unregister,
+      unregisterElement,
+      select,
+      refreshIndicator: queueIndicatorRefresh
+    }), watch(
+      () => model.value,
+      () => queueIndicatorRefresh()
+    ), onMounted(() => {
+      var _a;
+      lastScrollY.value = window.scrollY, resizeObserver = new ResizeObserver(queueIndicatorRefresh), itemsRef.value && resizeObserver.observe(itemsRef.value);
+      for (const bucket of registry.values())
+        for (const item of bucket)
+          resizeObserver.observe(item);
+      queueIndicatorRefresh(), window.setTimeout(queueIndicatorRefresh, 60), window.setTimeout(queueIndicatorRefresh, 240), (_a = document.fonts) == null || _a.ready.then(queueIndicatorRefresh), window.addEventListener("resize", queueIndicatorRefresh), window.addEventListener("scroll", onScroll, { passive: !0 });
+    }), onBeforeUnmount(() => {
+      scrollRaf && window.cancelAnimationFrame(scrollRaf), indicatorRaf && window.cancelAnimationFrame(indicatorRaf), resizeObserver == null || resizeObserver.disconnect(), window.removeEventListener("resize", queueIndicatorRefresh), window.removeEventListener("scroll", onScroll);
+    }), (_ctx, _cache) => (openBlock(), createElementBlock("header", {
+      ref_key: "rootRef",
+      ref: rootRef,
+      class: normalizeClass(["g-navbar", navbarClasses.value]),
+      style: normalizeStyle(navbarStyles.value)
+    }, [
+      createElementVNode("nav", {
+        class: "g-navbar__nav",
+        "aria-label": props.ariaLabel || "Primary navigation"
+      }, [
+        slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "prepend", normalizeProps(guardReactiveProps(slotProps.value)), void 0, !0)
+        ])) : createCommentVNode("", !0),
+        createElementVNode("ul", {
+          ref_key: "itemsRef",
+          ref: itemsRef,
+          class: "g-navbar__items"
+        }, [
+          _cache[0] || (_cache[0] = createElementVNode("li", {
+            "aria-hidden": "true",
+            class: "g-navbar__indicator"
+          }, null, -1)),
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), void 0, !0)
+        ], 512),
+        slots.append ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "append", normalizeProps(guardReactiveProps(slotProps.value)), void 0, !0)
+        ])) : createCommentVNode("", !0)
+      ], 8, _hoisted_1)
+    ], 6));
+  }
+}), GNavbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4e4b305f"]]);
+export {
+  GNavbar as default
+};

package/dist/components/GNavbarItem.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-DsVDdHxP.cjs"),_pluginVue_exportHelper=require("../_plugin-vue_export-helper-D_jf5u0r.cjs"),_hoisted_1={key:0,class:"g-navbar-item__prepend"},_hoisted_2={class:"g-navbar-item__label"},_hoisted_3={key:1,class:"g-navbar-item__append"},_sfc_main=vue.defineComponent({__name:"GNavbarItem",props:types.makeNavbarItemProps(),emits:["click"],setup(__props,{emit:__emit}){const props=__props,slots=vue.useSlots(),emit=__emit,navbar=types.useNavbarInject(),rootRef=vue.ref(null),actionRef=vue.ref(null),selected=vue.computed(()=>navbar?navbar.isSelected(props.value)||navbar.isElementSelected(actionRef.value):!1),resolvedColor=vue.computed(()=>(selected.value?navbar==null?void 0:navbar.activeColor.value:navbar==null?void 0:navbar.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:navbar==null?void 0:navbar.modelValue.value,isSelected,select,closeDropdown})),isLink=vue.computed(()=>!!props.href&&!props.disabled),actionTag=vue.computed(()=>isLink.value?"a":"button"),actionAttrs=vue.computed(()=>isLink.value?{href:props.href,target:props.target,rel:props.rel??(props.target==="_blank"?"noopener noreferrer":void 0)}:{type:"button",disabled:props.disabled});function register(){!navbar||!actionRef.value||navbar.register(props.value,actionRef.value)}function unregister(){!navbar||!actionRef.value||navbar.unregisterElement(actionRef.value)}function refresh(){navbar==null||navbar.refreshIndicator()}function isSelected(value){return navbar?navbar.isSelected(value):!1}function closeDropdown(){}function select(value,event){navbar==null||navbar.select(value,event),refresh()}function onClick(event){if(props.disabled){event.preventDefault();return}select(props.value,event),emit("click",event)}return vue.onMounted(register),vue.onBeforeUnmount(unregister),vue.watch(()=>props.value,(_value,oldValue)=>{navbar&&actionRef.value&&navbar.unregister(oldValue,actionRef.value),register()}),vue.watch(resolvedColor,refresh),(_ctx,_cache)=>{const _directive_ripple=vue.resolveDirective("ripple");return vue.openBlock(),vue.createElementBlock("li",{ref_key:"rootRef",ref:rootRef,class:vue.normalizeClass(["g-navbar-item",{"g-navbar-item_selected":selected.value,"g-navbar-item_disabled":props.disabled}]),style:vue.normalizeStyle(itemStyles.value),role:"none"},[vue.withDirectives((vue.openBlock(),vue.createBlock(vue.resolveDynamicComponent(actionTag.value),vue.mergeProps({ref_key:"actionRef",ref:actionRef,class:"g-navbar-item__action",role:"menuitem","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)),()=>[vue.createVNode(components_GIcon.default,{icon:props.prependIcon},null,8,["icon"])],!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)]),slots.append||props.appendIcon?(vue.openBlock(),vue.createElementBlock("span",_hoisted_3,[vue.renderSlot(_ctx.$slots,"append",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),()=>[vue.createVNode(components_GIcon.default,{icon:props.appendIcon},null,8,["icon"])],!0)])):vue.createCommentVNode("",!0)]),_:3},16,["aria-current"])),[[_directive_ripple]])],6)}}}),GNavbarItem=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-421cea8b"]]);exports.default=GNavbarItem;

package/dist/components/GNavbarItem.mjs

@@ -0,0 +1,120 @@
+import { defineComponent, useSlots, ref, computed, onMounted, onBeforeUnmount, watch, resolveDirective, openBlock, createElementBlock, normalizeStyle, normalizeClass, withDirectives, createBlock, resolveDynamicComponent, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode, createCommentVNode, createElementVNode, createTextVNode, toDisplayString } from "vue";
+import GIcon from "./GIcon.mjs";
+import { u as useSurfaceColor } from "../surfaceColor-Cic675ry.js";
+import { u as useNavbarInject, a as makeNavbarItemProps } from "../types-DmWFHzOk.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "g-navbar-item__prepend"
+}, _hoisted_2 = { class: "g-navbar-item__label" }, _hoisted_3 = {
+  key: 1,
+  class: "g-navbar-item__append"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GNavbarItem",
+  props: makeNavbarItemProps(),
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, slots = useSlots(), emit = __emit, navbar = useNavbarInject(), rootRef = ref(null), actionRef = ref(null), selected = computed(
+      () => navbar ? navbar.isSelected(props.value) || navbar.isElementSelected(actionRef.value) : !1
+    ), resolvedColor = computed(
+      () => (selected.value ? navbar == null ? void 0 : navbar.activeColor.value : navbar == null ? void 0 : navbar.color.value) ?? "primary"
+    ), { colorStyles } = useSurfaceColor({
+      color: () => resolvedColor.value
+    }), itemStyles = computed(() => colorStyles.value), slotProps = computed(() => ({
+      selected: selected.value,
+      disabled: props.disabled,
+      value: props.value,
+      modelValue: navbar == null ? void 0 : navbar.modelValue.value,
+      isSelected,
+      select,
+      closeDropdown
+    })), isLink = computed(() => !!props.href && !props.disabled), actionTag = computed(() => isLink.value ? "a" : "button"), actionAttrs = computed(
+      () => isLink.value ? {
+        href: props.href,
+        target: props.target,
+        rel: props.rel ?? (props.target === "_blank" ? "noopener noreferrer" : void 0)
+      } : {
+        type: "button",
+        disabled: props.disabled
+      }
+    );
+    function register() {
+      !navbar || !actionRef.value || navbar.register(props.value, actionRef.value);
+    }
+    function unregister() {
+      !navbar || !actionRef.value || navbar.unregisterElement(actionRef.value);
+    }
+    function refresh() {
+      navbar == null || navbar.refreshIndicator();
+    }
+    function isSelected(value) {
+      return navbar ? navbar.isSelected(value) : !1;
+    }
+    function closeDropdown() {
+    }
+    function select(value, event) {
+      navbar == null || navbar.select(value, event), refresh();
+    }
+    function onClick(event) {
+      if (props.disabled) {
+        event.preventDefault();
+        return;
+      }
+      select(props.value, event), emit("click", event);
+    }
+    return onMounted(register), onBeforeUnmount(unregister), watch(
+      () => props.value,
+      (_value, oldValue) => {
+        navbar && actionRef.value && navbar.unregister(oldValue, actionRef.value), register();
+      }
+    ), watch(resolvedColor, refresh), (_ctx, _cache) => {
+      const _directive_ripple = resolveDirective("ripple");
+      return openBlock(), createElementBlock("li", {
+        ref_key: "rootRef",
+        ref: rootRef,
+        class: normalizeClass(["g-navbar-item", {
+          "g-navbar-item_selected": selected.value,
+          "g-navbar-item_disabled": props.disabled
+        }]),
+        style: normalizeStyle(itemStyles.value),
+        role: "none"
+      }, [
+        withDirectives((openBlock(), createBlock(resolveDynamicComponent(actionTag.value), mergeProps({
+          ref_key: "actionRef",
+          ref: actionRef,
+          class: "g-navbar-item__action",
+          role: "menuitem",
+          "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)), () => [
+                createVNode(GIcon, {
+                  icon: props.prependIcon
+                }, null, 8, ["icon"])
+              ], !0)
+            ])) : createCommentVNode("", !0),
+            createElementVNode("span", _hoisted_2, [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+                createTextVNode(toDisplayString(props.label), 1)
+              ], !0)
+            ]),
+            slots.append || props.appendIcon ? (openBlock(), createElementBlock("span", _hoisted_3, [
+              renderSlot(_ctx.$slots, "append", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+                createVNode(GIcon, {
+                  icon: props.appendIcon
+                }, null, 8, ["icon"])
+              ], !0)
+            ])) : createCommentVNode("", !0)
+          ]),
+          _: 3
+        }, 16, ["aria-current"])), [
+          [_directive_ripple]
+        ])
+      ], 6);
+    };
+  }
+}), GNavbarItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-421cea8b"]]);
+export {
+  GNavbarItem as default
+};

package/dist/components/GNavbarMenu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const vue=require("vue"),GDropdown=require("../GDropdown-CmBNk0jK.cjs"),components_GIcon=require("./GIcon.cjs"),surfaceColor=require("../surfaceColor-BlDoAKoV.cjs"),menuContext=require("../menuContext-DqTLm_y8.cjs"),types=require("../types-DsVDdHxP.cjs"),environment=require("../environment-Dr5kpq3D.cjs"),_pluginVue_exportHelper=require("../_plugin-vue_export-helper-D_jf5u0r.cjs"),_hoisted_1=["aria-current","aria-expanded","disabled"],_hoisted_2={key:0,class:"g-navbar-menu__prepend"},_hoisted_3={class:"g-navbar-menu__label"},_hoisted_4={class:"g-navbar-menu__append"},_hoisted_5={class:"g-navbar-menu__dropdown"},_sfc_main=vue.defineComponent({__name:"GNavbarMenu",props:types.makeNavbarMenuProps(),emits:["click"],setup(__props,{emit:__emit}){const props=__props,slots=vue.useSlots(),emit=__emit,navbar=types.useNavbarInject(),actionRef=vue.ref(null),dropdownOpen=vue.ref(!1),ownedValues=new Set,selected=vue.computed(()=>navbar?navbar.isSelected(props.value)||navbar.isElementSelected(actionRef.value):!1),resolvedColor=vue.computed(()=>(selected.value?navbar==null?void 0:navbar.activeColor.value:navbar==null?void 0:navbar.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:navbar==null?void 0:navbar.modelValue.value,isSelected,select,closeDropdown})),actionIcon=vue.computed(()=>dropdownOpen.value?props.openedIcon:props.closedIcon);function registerOwnValue(value){!navbar||!actionRef.value||value===void 0||(ownedValues.add(value),navbar.register(value,actionRef.value))}function unregisterOwnValue(value){!navbar||!actionRef.value||value===void 0||(ownedValues.delete(value),navbar.unregister(value,actionRef.value))}function register(){registerOwnValue(props.value)}function unregister(){!navbar||!actionRef.value||(navbar.unregisterElement(actionRef.value),ownedValues.clear())}function refresh(){navbar==null||navbar.refreshIndicator()}function isSelected(value){return navbar?navbar.isSelected(value):!1}function closeDropdown(){dropdownOpen.value=!1}function select(value,event){registerOwnValue(value),navbar==null||navbar.select(value,event),props.closeOnSelect&&closeDropdown(),vue.nextTick(refresh)}function onClick(event){if(props.disabled){event.preventDefault();return}select(props.value,event),emit("click",event)}function setActionElement(el,setActivatorRef){setActivatorRef(el),actionRef.value=environment.isClientHTMLElement(el)?el:null}return menuContext.provideNavbarMenu({registerValue:registerOwnValue,unregisterValue:unregisterOwnValue,select,isSelected}),vue.onMounted(register),vue.onBeforeUnmount(unregister),vue.watch(()=>props.value,(_value,oldValue)=>{unregisterOwnValue(oldValue),register()}),vue.watch(resolvedColor,refresh),(_ctx,_cache)=>{const _directive_ripple=vue.resolveDirective("ripple");return vue.openBlock(),vue.createElementBlock("li",{class:vue.normalizeClass(["g-navbar-menu",{"g-navbar-menu_selected":selected.value,"g-navbar-menu_disabled":props.disabled,"g-navbar-menu_open":dropdownOpen.value}]),style:vue.normalizeStyle(itemStyles.value),role:"none"},[vue.createVNode(GDropdown.GDropdown,{modelValue:dropdownOpen.value,"onUpdate:modelValue":_cache[0]||(_cache[0]=$event=>dropdownOpen.value=$event),"close-on-content-click":"","append-to":"body","open-on-hover":"","open-on-focus":"","open-on-click":!1,offset:0,placement:"bottom-start"},{activator:vue.withCtx(({activatorAttrs,activatorRef})=>[vue.withDirectives((vue.openBlock(),vue.createElementBlock("button",vue.mergeProps({ref:el=>setActionElement(el,activatorRef),class:"g-navbar-menu__action",type:"button",role:"menuitem","aria-current":selected.value?"page":void 0,"aria-haspopup":!0,"aria-expanded":dropdownOpen.value,disabled:props.disabled},activatorAttrs,{onClick}),[slots.prepend||props.prependIcon?(vue.openBlock(),vue.createElementBlock("span",_hoisted_2,[vue.renderSlot(_ctx.$slots,"prepend",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),()=>[vue.createVNode(components_GIcon.default,{icon:props.prependIcon},null,8,["icon"])],!0)])):vue.createCommentVNode("",!0),vue.createElementVNode("span",_hoisted_3,[vue.renderSlot(_ctx.$slots,"default",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),()=>[vue.createTextVNode(vue.toDisplayString(props.label),1)],!0)]),vue.createElementVNode("span",_hoisted_4,[vue.renderSlot(_ctx.$slots,"append",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),()=>[vue.createVNode(components_GIcon.default,{icon:props.appendIcon??actionIcon.value},null,8,["icon"])],!0)])],16,_hoisted_1)),[[_directive_ripple]])]),default:vue.withCtx(()=>[vue.createElementVNode("div",_hoisted_5,[vue.renderSlot(_ctx.$slots,"dropdown",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),void 0,!0)])]),_:3},8,["modelValue"])],6)}}}),GNavbarMenu=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-7e32eb51"]]);exports.default=GNavbarMenu;

package/dist/components/GNavbarMenu.mjs

@@ -0,0 +1,147 @@
+import { defineComponent, useSlots, ref, computed, nextTick, onMounted, onBeforeUnmount, watch, resolveDirective, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, withCtx, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, mergeProps, createCommentVNode, createTextVNode, toDisplayString } from "vue";
+import { G as GDropdown } from "../GDropdown-TVH93Obq.js";
+import GIcon from "./GIcon.mjs";
+import { u as useSurfaceColor } from "../surfaceColor-Cic675ry.js";
+import { p as provideNavbarMenu } from "../menuContext-COshJAv-.js";
+import { u as useNavbarInject, b as makeNavbarMenuProps } from "../types-DmWFHzOk.js";
+import { d as isClientHTMLElement } from "../environment-o0e-UUbv.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+const _hoisted_1 = ["aria-current", "aria-expanded", "disabled"], _hoisted_2 = {
+  key: 0,
+  class: "g-navbar-menu__prepend"
+}, _hoisted_3 = { class: "g-navbar-menu__label" }, _hoisted_4 = { class: "g-navbar-menu__append" }, _hoisted_5 = { class: "g-navbar-menu__dropdown" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GNavbarMenu",
+  props: makeNavbarMenuProps(),
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, slots = useSlots(), emit = __emit, navbar = useNavbarInject(), actionRef = ref(null), dropdownOpen = ref(!1), ownedValues = /* @__PURE__ */ new Set(), selected = computed(
+      () => navbar ? navbar.isSelected(props.value) || navbar.isElementSelected(actionRef.value) : !1
+    ), resolvedColor = computed(
+      () => (selected.value ? navbar == null ? void 0 : navbar.activeColor.value : navbar == null ? void 0 : navbar.color.value) ?? "primary"
+    ), { colorStyles } = useSurfaceColor({
+      color: () => resolvedColor.value
+    }), itemStyles = computed(() => colorStyles.value), slotProps = computed(() => ({
+      selected: selected.value,
+      disabled: props.disabled,
+      value: props.value,
+      modelValue: navbar == null ? void 0 : navbar.modelValue.value,
+      isSelected,
+      select,
+      closeDropdown
+    })), actionIcon = computed(
+      () => dropdownOpen.value ? props.openedIcon : props.closedIcon
+    );
+    function registerOwnValue(value) {
+      !navbar || !actionRef.value || value === void 0 || (ownedValues.add(value), navbar.register(value, actionRef.value));
+    }
+    function unregisterOwnValue(value) {
+      !navbar || !actionRef.value || value === void 0 || (ownedValues.delete(value), navbar.unregister(value, actionRef.value));
+    }
+    function register() {
+      registerOwnValue(props.value);
+    }
+    function unregister() {
+      !navbar || !actionRef.value || (navbar.unregisterElement(actionRef.value), ownedValues.clear());
+    }
+    function refresh() {
+      navbar == null || navbar.refreshIndicator();
+    }
+    function isSelected(value) {
+      return navbar ? navbar.isSelected(value) : !1;
+    }
+    function closeDropdown() {
+      dropdownOpen.value = !1;
+    }
+    function select(value, event) {
+      registerOwnValue(value), navbar == null || navbar.select(value, event), props.closeOnSelect && closeDropdown(), nextTick(refresh);
+    }
+    function onClick(event) {
+      if (props.disabled) {
+        event.preventDefault();
+        return;
+      }
+      select(props.value, event), emit("click", event);
+    }
+    function setActionElement(el, setActivatorRef) {
+      setActivatorRef(el), actionRef.value = isClientHTMLElement(el) ? el : null;
+    }
+    return provideNavbarMenu({
+      registerValue: registerOwnValue,
+      unregisterValue: unregisterOwnValue,
+      select,
+      isSelected
+    }), onMounted(register), onBeforeUnmount(unregister), watch(
+      () => props.value,
+      (_value, oldValue) => {
+        unregisterOwnValue(oldValue), register();
+      }
+    ), watch(resolvedColor, refresh), (_ctx, _cache) => {
+      const _directive_ripple = resolveDirective("ripple");
+      return openBlock(), createElementBlock("li", {
+        class: normalizeClass(["g-navbar-menu", {
+          "g-navbar-menu_selected": selected.value,
+          "g-navbar-menu_disabled": props.disabled,
+          "g-navbar-menu_open": dropdownOpen.value
+        }]),
+        style: normalizeStyle(itemStyles.value),
+        role: "none"
+      }, [
+        createVNode(GDropdown, {
+          modelValue: dropdownOpen.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => dropdownOpen.value = $event),
+          "close-on-content-click": "",
+          "append-to": "body",
+          "open-on-hover": "",
+          "open-on-focus": "",
+          "open-on-click": !1,
+          offset: 0,
+          placement: "bottom-start"
+        }, {
+          activator: withCtx(({ activatorAttrs, activatorRef }) => [
+            withDirectives((openBlock(), createElementBlock("button", mergeProps({
+              ref: (el) => setActionElement(el, activatorRef),
+              class: "g-navbar-menu__action",
+              type: "button",
+              role: "menuitem",
+              "aria-current": selected.value ? "page" : void 0,
+              "aria-haspopup": !0,
+              "aria-expanded": dropdownOpen.value,
+              disabled: props.disabled
+            }, activatorAttrs, { onClick }), [
+              slots.prepend || props.prependIcon ? (openBlock(), createElementBlock("span", _hoisted_2, [
+                renderSlot(_ctx.$slots, "prepend", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+                  createVNode(GIcon, {
+                    icon: props.prependIcon
+                  }, null, 8, ["icon"])
+                ], !0)
+              ])) : createCommentVNode("", !0),
+              createElementVNode("span", _hoisted_3, [
+                renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+                  createTextVNode(toDisplayString(props.label), 1)
+                ], !0)
+              ]),
+              createElementVNode("span", _hoisted_4, [
+                renderSlot(_ctx.$slots, "append", normalizeProps(guardReactiveProps(slotProps.value)), () => [
+                  createVNode(GIcon, {
+                    icon: props.appendIcon ?? actionIcon.value
+                  }, null, 8, ["icon"])
+                ], !0)
+              ])
+            ], 16, _hoisted_1)), [
+              [_directive_ripple]
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_5, [
+              renderSlot(_ctx.$slots, "dropdown", normalizeProps(guardReactiveProps(slotProps.value)), void 0, !0)
+            ])
+          ]),
+          _: 3
+        }, 8, ["modelValue"])
+      ], 6);
+    };
+  }
+}), GNavbarMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7e32eb51"]]);
+export {
+  GNavbarMenu as default
+};

package/dist/components/GNavbarSubItem.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-DsVDdHxP.cjs"),menuContext=require("../menuContext-DqTLm_y8.cjs"),_pluginVue_exportHelper=require("../_plugin-vue_export-helper-D_jf5u0r.cjs"),_hoisted_1={key:0,class:"g-navbar-sub-item__prepend"},_hoisted_2={class:"g-navbar-sub-item__label"},_hoisted_3={key:1,class:"g-navbar-sub-item__append"},_sfc_main=vue.defineComponent({__name:"GNavbarSubItem",props:types.makeNavbarSubItemProps(),setup(__props){const props=__props,slots=vue.useSlots(),navbar=types.useNavbarInject(),menu=menuContext.useNavbarMenuInject(),selected=vue.computed(()=>menu?menu.isSelected(props.value):!1),{colorStyles}=surfaceColor.useSurfaceColor({color:()=>(selected.value?navbar==null?void 0:navbar.activeColor.value:navbar==null?void 0:navbar.color.value)??"primary"}),slotProps=vue.computed(()=>({selected:selected.value,disabled:props.disabled,value:props.value,modelValue:navbar==null?void 0:navbar.modelValue.value,isSelected:value=>(menu==null?void 0:menu.isSelected(value))??!1,select:(value,event)=>menu==null?void 0:menu.select(value,event),closeDropdown:()=>menu==null?void 0:menu.select(void 0)})),isLink=vue.computed(()=>!!props.href&&!props.disabled),actionTag=vue.computed(()=>isLink.value?"a":"button"),actionAttrs=vue.computed(()=>isLink.value?{href:props.href,target:props.target,rel:props.rel??(props.target==="_blank"?"noopener noreferrer":void 0)}:{type:"button",disabled:props.disabled});function onClick(event){if(props.disabled){event.preventDefault();return}menu==null||menu.select(props.value,event)}return vue.onMounted(()=>{menu==null||menu.registerValue(props.value)}),vue.onBeforeUnmount(()=>{menu==null||menu.unregisterValue(props.value)}),(_ctx,_cache)=>{const _directive_ripple=vue.resolveDirective("ripple");return vue.openBlock(),vue.createElementBlock("li",{class:vue.normalizeClass(["g-navbar-sub-item",{"g-navbar-sub-item_selected":selected.value,"g-navbar-sub-item_disabled":props.disabled}]),style:vue.normalizeStyle(vue.unref(colorStyles)),role:"none"},[vue.withDirectives((vue.openBlock(),vue.createBlock(vue.resolveDynamicComponent(actionTag.value),vue.mergeProps({class:"g-navbar-sub-item__action",role:"menuitem","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)),()=>[vue.createVNode(components_GIcon.default,{icon:props.prependIcon},null,8,["icon"])],!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)]),slots.append||props.appendIcon?(vue.openBlock(),vue.createElementBlock("span",_hoisted_3,[vue.renderSlot(_ctx.$slots,"append",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),()=>[vue.createVNode(components_GIcon.default,{icon:props.appendIcon},null,8,["icon"])],!0)])):vue.createCommentVNode("",!0)]),_:3},16,["aria-current"])),[[_directive_ripple]])],6)}}}),GNavbarSubItem=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-f4a3a4ba"]]);exports.default=GNavbarSubItem;