@threadlabs/looma 0.16.1 → 0.16.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/vue/UiText.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  type __VLS_Props = {
2
2
  align?: 'start' | 'center';
3
- as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'label';
3
+ as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'label' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
4
4
  size?: 'inherit' | 'xs' | 'sm' | 'md' | 'lg';
5
5
  tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success' | 'info' | 'warning';
6
6
  truncate?: boolean;
7
7
  variant?: 'body' | 'eyebrow' | 'code';
8
8
  weight?: 'inherit' | 'normal' | 'medium' | 'semibold';
9
9
  };
10
- declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
10
+ declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
11
11
  type __VLS_Slots = {} & {
12
12
  default?: (props: typeof __VLS_1) => any;
13
13
  } & {
@@ -20,13 +20,23 @@ type __VLS_Slots = {} & {
20
20
  default?: (props: typeof __VLS_9) => any;
21
21
  } & {
22
22
  default?: (props: typeof __VLS_11) => any;
23
+ } & {
24
+ default?: (props: typeof __VLS_13) => any;
25
+ } & {
26
+ default?: (props: typeof __VLS_15) => any;
27
+ } & {
28
+ default?: (props: typeof __VLS_17) => any;
29
+ } & {
30
+ default?: (props: typeof __VLS_19) => any;
31
+ } & {
32
+ default?: (props: typeof __VLS_21) => any;
23
33
  };
24
34
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
25
35
  size: "inherit" | "xs" | "sm" | "md" | "lg";
26
36
  tone: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning";
27
37
  variant: "body" | "eyebrow" | "code";
28
38
  align: "start" | "center";
29
- as: "p" | "span" | "div" | "small" | "strong" | "label";
39
+ as: "p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6";
30
40
  truncate: boolean;
31
41
  weight: "inherit" | "normal" | "medium" | "semibold";
32
42
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
package/vue/UiText.vue CHANGED
@@ -7,7 +7,7 @@ defineOptions({ inheritAttrs: false })
7
7
  const props = withDefaults(
8
8
  defineProps<{
9
9
  align?: 'start' | 'center'
10
- as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'label'
10
+ as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'label' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
11
11
  size?: 'inherit' | 'xs' | 'sm' | 'md' | 'lg'
12
12
  tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success' | 'info' | 'warning'
13
13
  truncate?: boolean
@@ -71,6 +71,46 @@ const hostState = computed(() =>
71
71
  v-bind="$attrs"
72
72
  :data-ui-text-state="hostState || undefined"
73
73
  ><slot /></label>
74
+ <h2
75
+ v-else-if="as === 'h2'"
76
+ data-component="ui-text"
77
+ v-bind="$attrs"
78
+ :data-ui-text-state="hostState || undefined"
79
+ >
80
+ <slot />
81
+ </h2>
82
+ <h3
83
+ v-else-if="as === 'h3'"
84
+ data-component="ui-text"
85
+ v-bind="$attrs"
86
+ :data-ui-text-state="hostState || undefined"
87
+ >
88
+ <slot />
89
+ </h3>
90
+ <h4
91
+ v-else-if="as === 'h4'"
92
+ data-component="ui-text"
93
+ v-bind="$attrs"
94
+ :data-ui-text-state="hostState || undefined"
95
+ >
96
+ <slot />
97
+ </h4>
98
+ <h5
99
+ v-else-if="as === 'h5'"
100
+ data-component="ui-text"
101
+ v-bind="$attrs"
102
+ :data-ui-text-state="hostState || undefined"
103
+ >
104
+ <slot />
105
+ </h5>
106
+ <h6
107
+ v-else-if="as === 'h6'"
108
+ data-component="ui-text"
109
+ v-bind="$attrs"
110
+ :data-ui-text-state="hostState || undefined"
111
+ >
112
+ <slot />
113
+ </h6>
74
114
  <p v-else data-component="ui-text" v-bind="$attrs" :data-ui-text-state="hostState || undefined">
75
115
  <slot />
76
116
  </p>
@@ -78,7 +118,8 @@ const hostState = computed(() =>
78
118
 
79
119
  <style scoped>
80
120
  /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
81
- text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */
121
+ text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
122
+ heading. */
82
123
  [data-component~="ui-text"] {
83
124
  margin: 0;
84
125
  min-inline-size: 0;
@@ -86,6 +127,13 @@ const hostState = computed(() =>
86
127
  text-align: start;
87
128
  }
88
129
 
130
+ /* A heading drops the browser's heading size and weight, so size and weight set it as they set
131
+ any text, and inherit keeps the text around it. */
132
+ [data-component~="ui-text"]:is(h2, h3, h4, h5, h6) {
133
+ font-size: inherit;
134
+ font-weight: inherit;
135
+ }
136
+
89
137
  [data-component~="ui-text"][data-ui-text-state~="size=xs"] {
90
138
  font-size: var(--ui-font-size-xs);
91
139
  line-height: var(--ui-line-height);
@@ -134,6 +134,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
134
134
  })) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_2));
135
135
  };
136
136
  }
137
- }), [["__scopeId", "data-v-3f3120c8"]]);
137
+ }), [["__scopeId", "data-v-2d967790"]]);
138
138
  //#endregion
139
139
  export { UiButton_default as t };
@@ -51,6 +51,6 @@ var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
51
51
  ], 16, _hoisted_1);
52
52
  };
53
53
  }
54
- }), [["__scopeId", "data-v-453329c8"]]);
54
+ }), [["__scopeId", "data-v-60c91d56"]]);
55
55
  //#endregion
56
56
  export { UiFormField_default as t };
@@ -66,6 +66,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
66
66
  }), null, 16, _hoisted_1)), [[vModelDynamic, model.value]]);
67
67
  };
68
68
  }
69
- }), [["__scopeId", "data-v-35d265bd"]]);
69
+ }), [["__scopeId", "data-v-aa3c35f4"]]);
70
70
  //#endregion
71
71
  export { UiInput_default as t };
@@ -106,6 +106,6 @@ var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
106
106
  ], 16, _hoisted_6));
107
107
  };
108
108
  }
109
- }), [["__scopeId", "data-v-369595b1"]]);
109
+ }), [["__scopeId", "data-v-7f1c22fc"]]);
110
110
  //#endregion
111
111
  export { UiNavItem_default as t };
@@ -60,6 +60,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
60
60
  }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
61
61
  };
62
62
  }
63
- }), [["__scopeId", "data-v-981584d4"]]);
63
+ }), [["__scopeId", "data-v-3f68a24f"]]);
64
64
  //#endregion
65
65
  export { UiSelect_default as t };
@@ -7,6 +7,11 @@ var _hoisted_3 = ["data-ui-text-state"];
7
7
  var _hoisted_4 = ["data-ui-text-state"];
8
8
  var _hoisted_5 = ["data-ui-text-state"];
9
9
  var _hoisted_6 = ["data-ui-text-state"];
10
+ var _hoisted_7 = ["data-ui-text-state"];
11
+ var _hoisted_8 = ["data-ui-text-state"];
12
+ var _hoisted_9 = ["data-ui-text-state"];
13
+ var _hoisted_10 = ["data-ui-text-state"];
14
+ var _hoisted_11 = ["data-ui-text-state"];
10
15
  //#endregion
11
16
  //#region .build/vue/UiText.vue
12
17
  var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -51,12 +56,27 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
51
56
  }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_4)) : __props.as === "label" ? (openBlock(), createElementBlock("label", mergeProps({
52
57
  key: 4,
53
58
  "data-component": "ui-text"
54
- }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_5)) : (openBlock(), createElementBlock("p", mergeProps({
59
+ }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_5)) : __props.as === "h2" ? (openBlock(), createElementBlock("h2", mergeProps({
55
60
  key: 5,
56
61
  "data-component": "ui-text"
57
- }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_6));
62
+ }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_6)) : __props.as === "h3" ? (openBlock(), createElementBlock("h3", mergeProps({
63
+ key: 6,
64
+ "data-component": "ui-text"
65
+ }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_7)) : __props.as === "h4" ? (openBlock(), createElementBlock("h4", mergeProps({
66
+ key: 7,
67
+ "data-component": "ui-text"
68
+ }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_8)) : __props.as === "h5" ? (openBlock(), createElementBlock("h5", mergeProps({
69
+ key: 8,
70
+ "data-component": "ui-text"
71
+ }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_9)) : __props.as === "h6" ? (openBlock(), createElementBlock("h6", mergeProps({
72
+ key: 9,
73
+ "data-component": "ui-text"
74
+ }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_10)) : (openBlock(), createElementBlock("p", mergeProps({
75
+ key: 10,
76
+ "data-component": "ui-text"
77
+ }, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_11));
58
78
  };
59
79
  }
60
- }), [["__scopeId", "data-v-f6cb02e5"]]);
80
+ }), [["__scopeId", "data-v-80b3e712"]]);
61
81
  //#endregion
62
82
  export { UiText_default as t };