eco-vue-js 0.26.4 → 0.26.5

package/dist/components/Button/WButton.vue_vue_type_script_setup_true_lang.js

@@ -104,7 +104,7 @@ var WButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				} : {}
 			}, {
 				ref: "container",
-				class: ["relative isolate flex min-h---button-height items-center justify-center rounded-(--w-button-rounded,1rem) [border-width:var(--w-button-border,1px)] px-(--w-button-padding) font-medium whitespace-nowrap select-none w-ripple-rounded-[calc(var(--w-button-rounded,1rem)-var(--w-button-border,1px))]", {
+				class: ["relative isolate flex min-h---button-height items-center justify-center rounded-(--w-button-rounded,1rem) [border-width:var(--w-button-border,1px)] px-(--w-button-padding) font-medium whitespace-nowrap select-none w-ripple-border-(--w-button-border,1px)", {
 					[unref(semanticTypeButtonBackgroundMap)[__props.semanticType] ?? unref(semanticTypeBackgroundMap)[__props.semanticType]]: !__props.outline,
 					"before:text-tone-fill": __props.outline,
 					[unref(semanticTypeBorderMap)[__props.semanticType]]: true,

package/dist/components/Button/WButtonInput.vue.d.ts

@@ -12,6 +12,8 @@ type __VLS_Props = {
     skeleton?: boolean;
     /** Grays the button out and ignores clicks. */
     disabled?: boolean;
+    /** Highlights the button, such as while the menu it opens is shown. */
+    active?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     click: (value: MouseEvent) => any;

package/dist/components/Button/WButtonInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WButtonInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonInput.vue"],"names":[],"mappings":"AA0CA;AAwEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAO5C,KAAK,WAAW,GAAG;IACjB,0BAA0B;IAC1B,IAAI,EAAE,YAAY,CAAA;IAClB,sFAAsF;IACtF,EAAE,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAA;IACpB,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAiKF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"WButtonInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonInput.vue"],"names":[],"mappings":"AA2CA;AA2EA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAO5C,KAAK,WAAW,GAAG;IACjB,0BAA0B;IAC1B,IAAI,EAAE,YAAY,CAAA;IAClB,sFAAsF;IACtF,EAAE,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAA;IACpB,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAuKF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/Button/WButtonInput.vue_vue_type_script_setup_true_lang.js

@@ -12,7 +12,8 @@ var WButtonInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		tooltipText: {},
 		loading: { type: Boolean },
 		skeleton: { type: Boolean },
-		disabled: { type: Boolean }
+		disabled: { type: Boolean },
+		active: { type: Boolean }
 	},
 	emits: ["click"],
 	setup(__props) {
@@ -21,10 +22,11 @@ var WButtonInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				key: 0,
 				class: "square---w-input-height w-skeleton-rounded-(--w-input-rounded,0.75rem)"
 			})) : (openBlock(), createBlock(resolveDynamicComponent(__props.to ? WRouterLink_default : "button"), mergeProps({ key: 1 }, __props.to ? { to: __props.to } : void 0, {
-				class: ["square---w-input-height bg-surface relative flex select-none items-center justify-center rounded-(--w-input-rounded,0.75rem) border border-solid border-line-subtle", {
+				class: ["square---w-input-height bg-surface relative flex select-none items-center justify-center rounded-(--w-input-rounded,0.75rem) border border-solid border-line-subtle w-ripple-border", {
 					"cursor-not-allowed opacity-50": __props.disabled,
 					"w-ripple w-ripple-hover cursor-pointer": !__props.disabled,
-					"cursor-progress": __props.loading
+					"cursor-progress": __props.loading,
+					"tone-primary text-tone border-tone-line": __props.active
 				}],
 				disabled: __props.disabled,
 				"aria-label": __props.tooltipText,

package/dist/components/Button/WButtonMore.vue.d.ts

@@ -13,6 +13,17 @@ type __VLS_Slots = {
      * A confirm opened from an item with `useOverlay` takes the menu's place at the same anchor.
      */
     default?: () => void;
+    /**
+     * Replaces the three-dots button, such as with WButtonInput: call `toggle` on click, bind `attrs` to the button
+     * and `active` to its highlight — `active` stays off while the menu is open at a custom anchor.
+     */
+    toggle?: (props: {
+        toggle: () => void;
+        active: boolean;
+        attrs: {
+            'aria-expanded': boolean;
+        };
+    }) => void;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     open: (anchor?: OverlayAnchor) => void;

package/dist/components/Button/WButtonMore.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WButtonMore.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonMore.vue"],"names":[],"mappings":"AA8BA;AAyIA,OAAO,EAAC,KAAK,aAAa,EAAa,MAAM,iBAAiB,CAAA;AAE9D,KAAK,WAAW,GAAG;IACjB,kDAAkD;IAClD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sIAAsI;IACtI,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB,CAAC;AASF,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AA+IF,QAAA,MAAM,UAAU;oBAxHO,aAAa,KAAG,IAAI;iBA8BzB,IAAI;;IAepB,wDAAwD;;;;;;kFA+ExD,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WButtonMore.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonMore.vue"],"names":[],"mappings":"AA6CA;AA6JA,OAAO,EAAC,KAAK,aAAa,EAAa,MAAM,iBAAiB,CAAA;AAE9D,KAAK,WAAW,GAAG;IACjB,kDAAkD;IAClD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sIAAsI;IACtI,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB,CAAC;AASF,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,MAAM,EAAE,MAAM,IAAI,CAAC;QAAC,MAAM,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE;YAAC,eAAe,EAAE,OAAO,CAAA;SAAC,CAAA;KAAC,KAAK,IAAI,CAAA;CACnG,CAAC;AA+JF,QAAA,MAAM,UAAU;oBAxIO,aAAa,KAAG,IAAI;iBA8BzB,IAAI;;IAepB,wDAAwD;;;;;;kFA+FxD,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Button/WButtonMore.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { hasAnchorLayer } from "../Modal/models/overlayRegistry.js";
 import { useOverlay } from "../../utils/Overlay.js";
 import IconMore_default from "../../assets/icons/IconMore.js";
-import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, markRaw, mergeProps, normalizeClass, openBlock, ref, resolveDynamicComponent, shallowRef, unref, useSlots, useTemplateRef } from "vue";
+import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, markRaw, mergeProps, normalizeClass, openBlock, ref, renderSlot, resolveDynamicComponent, shallowRef, unref, useSlots, useTemplateRef } from "vue";
 //#region src/components/Button/WButtonMore.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"disabled",
@@ -20,7 +20,7 @@ var WButtonMore_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const renderSlot = markRaw(() => slots.default?.());
+		const renderSlot$1 = markRaw(() => slots.default?.());
 		const buttonRef = useTemplateRef("button");
 		const overlay = useOverlay();
 		let closeMenu = null;
@@ -36,7 +36,7 @@ var WButtonMore_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			const value = overlay.open({
 				present: "dropdown",
 				anchor: opened,
-				content: renderSlot,
+				content: renderSlot$1,
 				dropdown: {
 					cornered: target !== void 0,
 					closeOnClick: true
@@ -69,7 +69,14 @@ var WButtonMore_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			isActive
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", mergeProps(_ctx.$attrs, {
+			return _ctx.$slots.toggle ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, _ctx.$attrs, {
+				ref: "button",
+				class: "inline-flex"
+			}), [renderSlot(_ctx.$slots, "toggle", {
+				toggle,
+				active: isOpen.value && !isCustomAnchor.value,
+				attrs: { "aria-expanded": isOpen.value }
+			})], 16)) : (openBlock(), createElementBlock("button", mergeProps({ key: 1 }, _ctx.$attrs, {
 				ref: "button",
 				disabled: __props.disabled,
 				class: [{
@@ -84,7 +91,7 @@ var WButtonMore_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				"w-hover-circle": !__props.disabled,
 				"text-description": !isOpen.value || isCustomAnchor.value,
 				"tone-primary text-tone": isOpen.value && !isCustomAnchor.value
-			}]) }, [(openBlock(), createBlock(resolveDynamicComponent(__props.icon ?? unref(IconMore_default)), { class: "square-[1.125em]" }))], 2)], 16, _hoisted_1);
+			}]) }, [(openBlock(), createBlock(resolveDynamicComponent(__props.icon ?? unref(IconMore_default)), { class: "square-[1.125em]" }))], 2)], 16, _hoisted_1));
 		};
 	}
 });

package/dist/components/Checkbox/WCheckbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/WCheckbox.vue"],"names":[],"mappings":"AAkGA;AAkJA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAA;AAiC1C,KAAK,WAAW,GAAG;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AAwPF,QAAA,MAAM,UAAU;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/WCheckbox.vue"],"names":[],"mappings":"AAkGA;AAkJA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAA;AAiC1C,KAAK,WAAW,GAAG;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AAyPF,QAAA,MAAM,UAAU;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Checkbox/WCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -80,7 +80,7 @@ var WCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					"text-tone-on": __props.modelValue && !unref(isDisabled) && !unref(isSkeleton),
 					"tone-primary text-tone": !__props.modelValue && !unref(isDisabled) && !unref(isSkeleton),
 					"text-subtle": !__props.modelValue && unref(isDisabled) && !unref(isSkeleton),
-					"w-ripple w-hover-circle before:text-accent after:text-accent": !unref(isDisabled) && !unref(isReadonly) && !unref(isSkeleton),
+					"w-ripple w-ripple-border w-hover-circle before:text-accent after:text-accent": !unref(isDisabled) && !unref(isReadonly) && !unref(isSkeleton),
 					"rounded-full": __props.radio,
 					"rounded-md": !__props.radio,
 					"border-line": unref(isDisabled) || unref(isSkeleton),

package/docs/components/button.md

@@ -224,6 +224,7 @@ import WButtonInput from 'eco-vue-js/dist/components/Button/WButtonInput.vue'
 | `loading` | `boolean` | — | Shows a spinner instead of the icon and ignores clicks. |
 | `skeleton` | `boolean` | — | Shows a placeholder instead of the button. |
 | `disabled` | `boolean` | — | Grays the button out and ignores clicks. |
+| `active` | `boolean` | — | Highlights the button, such as while the menu it opens is shown. |
 
 #### Events
 

package/docs/components/dropdown-menu.md

@@ -4,7 +4,7 @@ For a menu of actions, use a ready-made button. For anything else anchored to an
 
 ## Action menus
 
-- `WButtonMore` is the "⋯" button: its default slot is the menu, and any click closes it. Only one menu is open at a time, and on phones it opens as a bottom sheet. The menu is rendered by `WModal` at the app root, with the slot keeping its context, and a confirm opened from an item with `useOverlay` takes its place — see [Anchored confirm](./modal.md#anchored-confirm).
+- `WButtonMore` is the "⋯" button: its default slot is the menu, and any click closes it. Only one menu is open at a time, and on phones it opens as a bottom sheet. The menu is rendered by `WModal` at the app root, with the slot keeping its context, and a confirm opened from an item with `useOverlay` takes its place — see [Anchored confirm](./modal.md#anchored-confirm). The `toggle` slot swaps the "⋯" for another button, such as a `WButtonInput`: it gets `toggle` for the click, `attrs` for the button and `active` for its highlight.
 - `WButtonDropdown` is a button with an arrow next to it: the `button` slot holds the main action and the `content` slot the others. The `content` slot gets `close`.
 
 Menu items are `WButtonMoreItem`s: a `text` (or the default slot), an `icon`, and `to` or `href` to make the item a link. A disabled item can explain itself with `tooltipText`. `semanticType` colors an item, like the red Delete below.
@@ -61,6 +61,28 @@ Menu items are `WButtonMoreItem`s: a `text` (or the default slot), an `icon`, an
         />
       </template>
     </WButtonDropdown>
+
+    <WButtonMore>
+      <template #toggle="{toggle, active, attrs}">
+        <WButtonInput
+          :icon="markRaw(IconSort)"
+          tooltip-text="Sort beds"
+          :active="active"
+          v-bind="attrs"
+          @click="toggle"
+        />
+      </template>
+
+      <WButtonMoreItem
+        text="Sort by name"
+        @click="action = 'Sort by name'"
+      />
+
+      <WButtonMoreItem
+        text="Sort by planting date"
+        @click="action = 'Sort by planting date'"
+      />
+    </WButtonMore>
   </div>
 
   <p class="text-description mt-4 text-sm">
@@ -75,12 +97,14 @@ import {SemanticType} from 'eco-vue-js/dist/utils/SemanticType'
 
 import WButton from 'eco-vue-js/dist/components/Button/WButton.vue'
 import WButtonDropdown from 'eco-vue-js/dist/components/Button/WButtonDropdown.vue'
+import WButtonInput from 'eco-vue-js/dist/components/Button/WButtonInput.vue'
 import WButtonMore from 'eco-vue-js/dist/components/Button/WButtonMore.vue'
 import WButtonMoreItem from 'eco-vue-js/dist/components/Button/WButtonMoreItem.vue'
 
 import IconArchiveBook from 'eco-vue-js/dist/assets/icons/IconArchiveBook'
 import IconCopy from 'eco-vue-js/dist/assets/icons/IconCopy'
 import IconEdit from 'eco-vue-js/dist/assets/icons/IconEdit'
+import IconSort from 'eco-vue-js/dist/assets/icons/IconSort'
 import IconTrash from 'eco-vue-js/dist/assets/icons/IconTrash'
 
 const action = ref<string>()
@@ -250,6 +274,7 @@ import WButtonMore from 'eco-vue-js/dist/components/Button/WButtonMore.vue'
 | Slot | Props | Description |
 | --- | --- | --- |
 | `default` | — | Menu items, usually WButtonMoreItem. A click inside closes the menu. Only one menu is open at a time, and on phones it is a bottom sheet. A confirm opened from an item with `useOverlay` takes the menu's place at the same anchor. |
+| `toggle` | `{ toggle: () => void; active: boolean; attrs: { 'aria-expanded': boolean; }; }` | Replaces the three-dots button, such as with WButtonInput: call `toggle` on click, bind `attrs` to the button and `active` to its highlight — `active` stays off while the menu is open at a custom anchor. |
 
 ### WButtonDropdown
 

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eco-vue-js
 
-> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.4, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
+> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.5, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
 
 Release notes, for what changed between versions: https://github.com/rsmple/eco-vue-js/releases. The docs site, with live demos: https://rsmple.github.io/eco-vue-js/
 

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.26.4",
+  "version": "0.26.5",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",

package/tailwind-base/css/internal-variables.css

@@ -231,6 +231,15 @@
   --w-ripple-rounded: --value(--radius-*, --w-radius-*, [*]);
 }
 
+@utility w-ripple-border {
+  --w-ripple-border: 1px;
+}
+
+@utility w-ripple-border-* {
+  --w-ripple-border: calc(--value(integer) * 1px);
+  --w-ripple-border: --value([length], [*]);
+}
+
 @utility w-list-rounded-* {
   --w-list-rounded: --value(--radius-*, --w-radius-*, [*]);
 }

package/tailwind-base/plugins/w-ripple.ts

@@ -6,10 +6,7 @@ const pluginRipple = plugin(function ({matchUtilities, addUtilities, addBase}) {
       '&::before': {
         content: '""',
         position: 'absolute',
-        top: '0',
-        left: '0',
-        height: '100%',
-        width: '100%',
+        inset: 'calc(var(--w-ripple-border, 0px) * -1)',
         'border-radius': 'var(--w-ripple-rounded,inherit)',
         'background-color': 'currentColor',
         'pointer-events': 'none',