@threadlabs/looma 0.14.0 → 0.14.2

package/vue/UiMeter.vue

@@ -0,0 +1,194 @@
+<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    max?: number
+    size?: 'sm' | 'md'
+    tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
+    value?: number
+    valueText?: string
+  }>(),
+  {
+    label: '',
+    max: 1,
+    size: 'md',
+    tone: 'neutral',
+    value: 0,
+    valueText: '',
+  },
+)
+
+const amount = computed(() => Math.min(Math.max(0, props.value), props.max))
+const percent = computed(() =>
+  ({
+    true: number(
+            number(amount.value) === undefined || number(props.max) === undefined
+              ? undefined
+              : number(amount.value)! / number(props.max)!,
+          ) === undefined || number(100) === undefined
+      ? undefined
+      : number(
+        number(amount.value) === undefined || number(props.max) === undefined
+          ? undefined
+          : number(amount.value)! / number(props.max)!,
+      )! * number(100)!,
+    false: 0,
+  })[`${props.max > 0}`]
+)
+const whole = computed(
+  () => (number(
+          number(percent.value) === undefined || number(0.5) === undefined
+            ? undefined
+            : number(percent.value)! + number(0.5)!,
+        ) === undefined
+      || number(
+          number(
+                number(percent.value) === undefined || number(0.5) === undefined
+                  ? undefined
+                  : number(percent.value)! + number(0.5)!,
+              ) === undefined || number(1) === undefined
+            ? undefined
+            : number(
+              number(percent.value) === undefined || number(0.5) === undefined
+                ? undefined
+                : number(percent.value)! + number(0.5)!,
+            )! % number(1)!,
+        ) === undefined
+    ? undefined
+    : number(
+      number(percent.value) === undefined || number(0.5) === undefined
+        ? undefined
+        : number(percent.value)! + number(0.5)!,
+    )! - number(
+      number(
+            number(percent.value) === undefined || number(0.5) === undefined
+              ? undefined
+              : number(percent.value)! + number(0.5)!,
+          ) === undefined || number(1) === undefined
+        ? undefined
+        : number(
+          number(percent.value) === undefined || number(0.5) === undefined
+            ? undefined
+            : number(percent.value)! + number(0.5)!,
+        )! % number(1)!,
+    )!)
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+    props.tone && `tone tone=${props.tone}`,
+  ].filter(Boolean).join(' ')
+)
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
+
+function number(value: unknown): number | undefined {
+  return typeof value === 'number' && !Number.isNaN(value) ? value : undefined
+}
+</script>
+
+<template>
+  <span
+    data-component="ui-meter"
+    role="meter"
+    aria-valuemin="0"
+    v-bind="$attrs"
+    :aria-valuemax="max"
+    :aria-valuenow="amount"
+    :aria-valuetext="typeof (({ true: valueText, false: `${whole ?? ''}%` })[`${valueText !== ''}`]) === 'boolean'
+    ? String(({ true: valueText, false: `${whole ?? ''}%` })[`${valueText !== ''}`])
+    : attribute(({ true: valueText, false: `${whole ?? ''}%` })[`${valueText !== ''}`])"
+    :aria-label="typeof (({ true: label, false: null })[`${label !== ''}`]) === 'boolean'
+    ? String(({ true: label, false: null })[`${label !== ''}`])
+    : attribute(({ true: label, false: null })[`${label !== ''}`])"
+    :data-ui-meter-state="hostState || undefined"
+  ><span class="fill" :style="{ 'inline-size': `${text(percent)}%` }"></span></span>
+</template>
+
+<style scoped>
+/* How far along something is: a track, filled from the start in the tone's colour. The track is a
+       quiet border colour, so an empty meter still shows; every tone's fill keeps 3:1 against the
+       track and the page. */
+@property --ui-meter-inline-size {
+  syntax: "*";
+  inherits: false;
+}
+
+[data-component~="ui-meter"] {
+  --_meter-fill: var(--ui-text-muted);
+
+  display: inline-block;
+  flex: none;
+  vertical-align: middle;
+  inline-size: var(--ui-meter-inline-size, 8rem);
+  max-inline-size: 100%;
+  block-size: var(--ui-space-2);
+  overflow: hidden;
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-border);
+  /* Unseen until forced colours draw it, where the track's own colour is gone. */
+  outline: 1px solid transparent;
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="size=sm"] {
+  inline-size: var(--ui-meter-inline-size, 5rem);
+  block-size: var(--ui-space-1);
+}
+
+.fill {
+  display: block;
+  block-size: 100%;
+  background: var(--_meter-fill);
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"] {
+  --_meter-fill: var(--ui-accent-solid);
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="tone=info"] {
+  --_meter-fill: var(--ui-info-solid);
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="tone=success"] {
+  --_meter-fill: var(--ui-success-solid);
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"] {
+  --_meter-fill: var(--ui-warning-solid);
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"] {
+  --_meter-fill: var(--ui-danger-solid);
+}
+
+/* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
+@media (forced-colors: active) {
+  .fill {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-meter"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiTable.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    density?: 'comfortable' | 'compact';
+    stickyHeader?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    density: "comfortable" | "compact";
+    stickyHeader: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiTable.js

@@ -0,0 +1,2 @@
+import { t as UiTable_default } from "./chunks/UiTable.js";
+export { UiTable_default as default };

package/vue/UiTable.vue

@@ -0,0 +1,172 @@
+<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import * as controllerModule from '../components/ui-table/ui-table.js'
+import { createDispatch, useComponentHost } from './host'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    density?: 'comfortable' | 'compact'
+    stickyHeader?: boolean
+  }>(),
+  {
+    density: 'comfortable',
+    stickyHeader: false,
+  },
+)
+
+const root = ref<HTMLElement | null>(null)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.density && `density density=${props.density}`,
+    props.stickyHeader && 'stickyHeader',
+  ].filter(Boolean).join(' ')
+)
+
+const dispatch = createDispatch(root)
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+})
+</script>
+
+<template>
+  <div
+    data-component="ui-table"
+    v-bind="$attrs"
+    :data-ui-table-state="hostState || undefined"
+    ref="root"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* Styles an authored <table> (caption, thead, tbody, th scope) without replacing it: the table is
+       meaningful before JavaScript, and a screen reader reads it as a table. The root scrolls a table
+       wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
+       keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
+       content along the row, such as end for a column of figures. */
+[data-component~="ui-table"] {
+  --_pad-block: var(--ui-space-1);
+  --_pad-inline: var(--ui-space-3);
+  --_row-size: var(--ui-control-size);
+  display: block;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior-inline: contain;
+  /* The sideways scroll fade every Looma scroller uses (see ui-scroll-area). Only the inline edges
+     fade, so a sticky header never fades. */
+  --_ui-scroll-fade-direction: to right;
+  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+  mask-image: linear-gradient(
+    var(--_ui-scroll-fade-direction),
+    transparent,
+    #000 var(--_ui-scroll-fade-start),
+    #000 calc(100% - var(--_ui-scroll-fade-end)),
+    transparent
+  );
+  animation:
+    ui-scroll-fade-start linear,
+    ui-scroll-fade-start-hold linear,
+    ui-scroll-fade-end-hold linear,
+    ui-scroll-fade-end linear;
+  animation-timeline: scroll(self inline);
+  animation-range:
+    0 var(--_ui-scroll-fade-size),
+    var(--_ui-scroll-fade-size) calc(100% + 1px),
+    -1px calc(100% - var(--_ui-scroll-fade-size)),
+    calc(100% - var(--_ui-scroll-fade-size)) 100%;
+}
+
+[data-component~="ui-table"]:dir(rtl) {
+  --_ui-scroll-fade-direction: to left;
+}
+
+[data-component~="ui-table"]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: -2px;
+}
+
+[data-component~="ui-table"][data-ui-table-state~="density=compact"] {
+  --_pad-block: var(--ui-space-0-5);
+  --_pad-inline: var(--ui-space-2);
+  --_row-size: var(--ui-control-size-sm);
+}
+
+/* Separate borders stay on their cells when a sticky header scrolls; collapsed ones stay behind. */
+:slotted(table) {
+  inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+  font-variant-numeric: tabular-nums;
+}
+
+:slotted(caption) {
+  padding-block-end: var(--ui-space-2);
+  color: var(--ui-text-secondary);
+  font-weight: var(--ui-font-medium);
+  text-align: start;
+}
+
+/* Every row is at least one control tall, so a row holding a checkbox, select, or input keeps the
+   rhythm of the rows around it. A cell's height is its minimum. */
+:slotted(th),
+:slotted(td) {
+  block-size: var(--_row-size);
+  padding: var(--_pad-block) var(--_pad-inline);
+  border-block-end: 1px solid var(--ui-border-subtle);
+  text-align: start;
+  vertical-align: middle;
+}
+
+:slotted(thead th) {
+  block-size: auto;
+  padding-block: var(--ui-space-2);
+  border-block-end-color: var(--ui-border-default);
+  background: var(--ui-surface);
+  color: var(--ui-text-muted);
+  font-weight: var(--ui-font-medium);
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
+:slotted(tbody th) {
+  font-weight: var(--ui-font-medium);
+}
+
+:slotted(tbody tr:last-child > *) {
+  border-block-end-width: 0;
+}
+
+:slotted([data-ui-align="center"]) {
+  text-align: center;
+}
+
+:slotted([data-ui-align="end"]) {
+  text-align: end;
+}
+
+[data-component~="ui-table"][data-ui-table-state~="stickyHeader"] :slotted(thead th) {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-table"][hidden] {
+  display: none;
+}
+</style>

package/vue/chunks/UiDescriptionList.js

@@ -7,15 +7,23 @@ var _hoisted_1 = ["data-ui-description-list-state"];
 var UiDescriptionList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiDescriptionList",
-	props: { layout: { default: "rows" } },
+	props: {
+		columns: {},
+		density: { default: "comfortable" },
+		layout: { default: "rows" }
+	},
 	setup(__props) {
 		const props = __props;
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.layout && `layout layout=${props.layout}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			props.layout && `layout layout=${props.layout}`,
+			props.columns && `columns columns=${props.columns}`,
+			props.density && `density density=${props.density}`
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("dl", mergeProps({ "data-component": "ui-description-list" }, _ctx.$attrs, { "data-ui-description-list-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a4548235"]]);
+}), [["__scopeId", "data-v-640c2332"]]);
 //#endregion
 export { UiDescriptionList_default as t };

package/vue/chunks/UiMeter.js

@@ -0,0 +1,82 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock } from "vue";
+//#region .build/vue/UiMeter.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-label",
+	"data-ui-meter-state"
+];
+//#endregion
+//#region .build/vue/UiMeter.vue
+var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiMeter",
+	props: {
+		label: { default: "" },
+		max: { default: 1 },
+		size: { default: "md" },
+		tone: { default: "neutral" },
+		value: { default: 0 },
+		valueText: { default: "" }
+	},
+	setup(__props) {
+		const props = __props;
+		const amount = computed(() => Math.min(Math.max(0, props.value), props.max));
+		const percent = computed(() => ({
+			true: number(number(amount.value) === void 0 || number(props.max) === void 0 ? void 0 : number(amount.value) / number(props.max)) === void 0 || number(100) === void 0 ? void 0 : number(number(amount.value) === void 0 || number(props.max) === void 0 ? void 0 : number(amount.value) / number(props.max)) * number(100),
+			false: 0
+		})[`${props.max > 0}`]);
+		const whole = computed(() => number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(1) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) % number(1)) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) - number(number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(1) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) % number(1)));
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.size && `size size=${props.size}`, props.tone && `tone tone=${props.tone}`].filter(Boolean).join(" "));
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
+		}
+		function attribute(value) {
+			if (value === null || value === void 0 || value === false || typeof value === "object" && !Array.isArray(value)) return void 0;
+			return value === true ? "" : text(value);
+		}
+		function number(value) {
+			return typeof value === "number" && !Number.isNaN(value) ? value : void 0;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps({
+				"data-component": "ui-meter",
+				role: "meter",
+				"aria-valuemin": "0"
+			}, _ctx.$attrs, {
+				"aria-valuemax": __props.max,
+				"aria-valuenow": amount.value,
+				"aria-valuetext": typeof {
+					true: __props.valueText,
+					false: `${whole.value ?? ""}%`
+				}[`${__props.valueText !== ""}`] === "boolean" ? String({
+					true: __props.valueText,
+					false: `${whole.value ?? ""}%`
+				}[`${__props.valueText !== ""}`]) : attribute({
+					true: __props.valueText,
+					false: `${whole.value ?? ""}%`
+				}[`${__props.valueText !== ""}`]),
+				"aria-label": typeof {
+					true: __props.label,
+					false: null
+				}[`${__props.label !== ""}`] === "boolean" ? String({
+					true: __props.label,
+					false: null
+				}[`${__props.label !== ""}`]) : attribute({
+					true: __props.label,
+					false: null
+				}[`${__props.label !== ""}`]),
+				"data-ui-meter-state": hostState.value || void 0
+			}), [createElementVNode("span", {
+				class: "fill",
+				style: normalizeStyle({ "inline-size": `${text(percent.value)}%` })
+			}, null, 4)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-f716cd47"]]);
+//#endregion
+export { UiMeter_default as t };

package/vue/chunks/UiTable.js

@@ -0,0 +1,40 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as useComponentHost, t as createDispatch } from "./host.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
+import * as controllerModule from "@threadlabs/looma/components/ui-table/ui-table.js";
+//#region .build/vue/UiTable.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-table-state"];
+//#endregion
+//#region .build/vue/UiTable.vue
+var UiTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiTable",
+	props: {
+		density: { default: "comfortable" },
+		stickyHeader: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const root = ref(null);
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.density && `density density=${props.density}`, props.stickyHeader && "stickyHeader"].filter(Boolean).join(" "));
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-table" }, _ctx.$attrs, {
+				"data-ui-table-state": hostState.value || void 0,
+				ref_key: "root",
+				ref: root
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-9980d203"]]);
+//#endregion
+export { UiTable_default as t };