@realmorg/ui 0.0.0-stage → 2.0.0-alpha.2

package/components/radio-group.html

@@ -0,0 +1,114 @@
+<custom-element name="ui-radio-group" form-associated>
+  <script>
+    const props = defineProps({
+      value: prop.string(),
+      orientation: prop.enum(["vertical", "horizontal"]).default("vertical"),
+      disabled: prop.boolean(),
+      required: prop.boolean(),
+    });
+
+    const options = useChildren("option", ["value", "label", "disabled"]);
+    const group = useState({
+      get options() {
+        return options.map((option, index) => ({
+          id: `${index}:${option.value}`,
+          value: option.value,
+          label: option.label,
+          disabled: props.disabled || option.disabled,
+          checked: option.value === props.value,
+        }));
+      },
+    });
+
+    function choose(option) {
+      props.value = option.value;
+      dispatch("change");
+    }
+
+    onConnected(() => {
+      internals.role = "radiogroup";
+    });
+
+    observe(() => {
+      const missing = props.required && !props.value;
+      const anchor = refs.list?.querySelector("input:not(:disabled)") ?? undefined;
+      internals.setValidity(missing ? { valueMissing: true } : {}, missing ? "Please select an option." : "", anchor);
+    });
+  </script>
+
+  <style>
+    :host {
+      display: grid;
+      gap: calc(var(--spacing) * 3);
+    }
+    :host(:state(attr-orientation-is-horizontal)) {
+      grid-auto-flow: column;
+      justify-content: start;
+    }
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      cursor: pointer;
+    }
+    input {
+      appearance: none;
+      display: grid;
+      place-content: center;
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      margin: 0;
+      border: 1px solid var(--input);
+      border-radius: var(--radius-full);
+      box-shadow: var(--shadow-xs);
+      cursor: pointer;
+      outline: none;
+    }
+    input::before {
+      content: "";
+      width: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 2);
+      border-radius: var(--radius-full);
+      background: var(--primary);
+      transform: scale(0);
+      transition: transform 0.1s;
+    }
+    input:checked::before {
+      transform: scale(1);
+    }
+    input:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input:disabled,
+    input:disabled + span {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    .list {
+      display: contents;
+    }
+    .options {
+      display: none;
+    }
+  </style>
+
+  <div class="list" ref="list">
+    <repeat-list of="#group.options" as="option" key="id">
+      <label part="item">
+        <input
+          type="radio"
+          name="group"
+          part="control"
+          _value="#option.value"
+          _checked="#option.checked"
+          _disabled="#option.disabled"
+          onchange="choose(option)">
+        <span><slot name="#option.label"></slot></span>
+      </label>
+    </repeat-list>
+  </div>
+  <div class="options"><slot></slot></div>
+</custom-element>

package/components/resizable.html

@@ -0,0 +1,156 @@
+<custom-element name="ui-resizable">
+  <script>
+    defineProps({
+      direction: prop.enum(["horizontal", "vertical"]).default("horizontal"),
+      variant: prop.enum(["default", "outline"]).default("default"),
+    });
+  </script>
+
+  <style>
+    :host {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    :host(:state(attr-height)) {
+      height: calc(var(--spacing) * var(--attr-height));
+    }
+    :host(:state(attr-variant-is-outline)) {
+      box-sizing: border-box;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+    }
+    :host(:state(attr-direction-is-vertical)) {
+      flex-direction: column;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-resizable-panel">
+  <script>
+    defineProps({ size: prop.number().min(0).max(100).default(50), min: prop.number().min(0).default(10) });
+  </script>
+
+  <style>
+    :host {
+      display: block;
+      flex: var(--attr-size) 1 0;
+      min-width: 0;
+      min-height: 0;
+      overflow: auto;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-resizable-handle" role="separator">
+  <script>
+    const props = defineProps({ handle: prop.boolean() });
+
+    const drag = useState({ active: false });
+    const KEYS = { ArrowLeft: -5, ArrowUp: -5, ArrowRight: 5, ArrowDown: 5 };
+
+    function vertical() {
+      return host.parentElement?.getAttribute("direction") === "vertical";
+    }
+
+    function resize(delta) {
+      const before = host.previousElementSibling;
+      const after = host.nextElementSibling;
+      if (!before || !after) return;
+      const total = before.size + after.size;
+      const size = Math.min(Math.max(before.size + delta, before.min), total - after.min);
+      before.size = size;
+      after.size = total - size;
+      internals.ariaValueNow = String(Math.round(size));
+    }
+
+    function start(event) {
+      drag.active = true;
+      if (event.isTrusted) host.setPointerCapture(event.pointerId);
+    }
+
+    function move(event) {
+      if (!drag.active) return;
+      const parent = host.parentElement.getBoundingClientRect();
+      const length = vertical() ? parent.height : parent.width;
+      const pixels = vertical() ? event.movementY : event.movementX;
+      const before = host.previousElementSibling;
+      const after = host.nextElementSibling;
+      resize(((before.size + after.size) * pixels) / length);
+    }
+
+    function stop() {
+      drag.active = false;
+    }
+
+    function keys(event) {
+      const step = KEYS[event.key];
+      if (!step) return;
+      event.preventDefault();
+      resize(step);
+    }
+
+    attrs.tabindex ??= 0;
+    listen("pointerdown", start);
+    listen("pointermove", move);
+    listen("pointerup", stop);
+    listen("keydown", keys);
+
+    onConnected(() => {
+      if (vertical()) internals.states.add("vertical");
+      internals.ariaOrientation = vertical() ? "horizontal" : "vertical";
+      internals.ariaValueMin = "0";
+      internals.ariaValueMax = "100";
+    });
+  </script>
+
+  <style>
+    :host {
+      position: relative;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 1px;
+      background: var(--border);
+      cursor: col-resize;
+      outline: none;
+      touch-action: none;
+    }
+    :host(:state(vertical)) {
+      width: auto;
+      height: 1px;
+      cursor: row-resize;
+    }
+    :host(:state(vertical))::after {
+      inset: calc(var(--spacing) * -1) 0;
+    }
+    :host::after {
+      content: "";
+      position: absolute;
+      inset: 0 calc(var(--spacing) * -1);
+    }
+    :host(:focus-visible) {
+      box-shadow: 0 0 0 1px var(--ring);
+    }
+    .grip {
+      display: none;
+      z-index: 1;
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 4);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-xs);
+      background: var(--border);
+    }
+    :host(:state(attr-handle)) .grip {
+      display: block;
+    }
+  </style>
+
+  <div class="grip" part="grip"></div>
+</custom-element>

package/components/scroll-area.html

@@ -0,0 +1,50 @@
+<custom-element name="ui-scroll-area">
+  <script>
+    defineProps({
+      orientation: prop.enum(["vertical", "horizontal", "both"]).default("vertical"),
+      variant: prop.enum(["default", "outline"]).default("default"),
+    });
+  </script>
+
+  <style>
+    :host {
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      overflow: hidden;
+      border-radius: inherit;
+    }
+    :host(:state(attr-width)) {
+      width: calc(var(--spacing) * var(--attr-width));
+    }
+    :host(:state(attr-height)) {
+      height: calc(var(--spacing) * var(--attr-height));
+    }
+    :host(:state(attr-variant-is-outline)) {
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+    }
+    .viewport {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      scrollbar-width: thin;
+      scrollbar-color: var(--border) transparent;
+      border-radius: inherit;
+      outline: none;
+    }
+    :host(:state(attr-orientation-is-horizontal)) .viewport {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+    :host(:state(attr-orientation-is-both)) .viewport {
+      overflow: auto;
+    }
+    .viewport:focus-visible {
+      box-shadow: var(--focus-ring);
+    }
+  </style>
+
+  <div class="viewport" part="viewport" tabindex="0"><slot></slot></div>
+</custom-element>

package/components/select.html

@@ -0,0 +1,91 @@
+<custom-element name="ui-select" form-associated delegates-focus>
+  <script>
+    const props = defineProps({
+      value: prop.string().default(""),
+      placeholder: prop.string(),
+      size: prop.enum(["default", "sm"]).default("default"),
+      disabled: prop.boolean(),
+      required: prop.boolean(),
+      label: prop.string().attribute("aria-label"),
+    });
+
+    const options = useChildren("option", ["value", "label", "disabled", "selected"]);
+    const menu = useState({
+      get empty() {
+        return !props.value;
+      },
+      get options() {
+        return options.map((option, index) => ({
+          id: `${index}:${option.value}`,
+          value: option.value,
+          label: option.label,
+          disabled: option.disabled,
+          selected: option.value === props.value,
+        }));
+      },
+    });
+
+    observe(() => {
+      if (props.placeholder || !options.length || menu.options.some((option) => option.selected)) return;
+      props.value = (options.find((option) => option.hasAttribute("selected")) ?? options[0]).value;
+    });
+  </script>
+
+  <style>
+    :host {
+      display: block;
+      min-width: calc(var(--spacing) * 32);
+    }
+    :host(:state(attr-width)) {
+      width: calc(var(--spacing) * var(--attr-width));
+    }
+    select {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(var(--spacing) * 9);
+      padding: 0 calc(var(--spacing) * 8) 0 calc(var(--spacing) * 3);
+      border: 1px solid var(--input);
+      border-radius: var(--radius-md);
+      background: transparent
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+        no-repeat right calc(var(--spacing) * 2) center;
+      color: inherit;
+      font: inherit;
+      font-size: var(--text-sm);
+      box-shadow: var(--shadow-xs);
+      appearance: none;
+      outline: none;
+      cursor: pointer;
+    }
+    :host(:state(attr-size-is-sm)) select {
+      height: calc(var(--spacing) * 8);
+    }
+    select:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    select:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    option {
+      background: var(--popover);
+      color: var(--popover-foreground);
+    }
+    .source {
+      display: none;
+    }
+  </style>
+
+  <select
+    ref="control"
+    _aria-label="@label"
+    part="control"
+    _disabled="@disabled"
+    _required="@required"
+>
+    <option value="" disabled _hidden="!@placeholder" _label="@placeholder" _selected="#menu.empty"></option>
+    <option repeat="#menu.options" as="option" key="id" _value="#option.value" _label="#option.label" _selected="#option.selected" _disabled="#option.disabled"></option>
+  </select>
+  <div class="source"><slot></slot></div>
+</custom-element>

package/components/separator.html

@@ -0,0 +1,25 @@
+<custom-element name="ui-separator" role="separator">
+  <script>
+    const props = defineProps({
+      orientation: prop.enum(["horizontal", "vertical"]).default("horizontal"),
+    });
+    observe(() => {
+      internals.ariaOrientation = props.orientation;
+    });
+  </script>
+
+  <style>
+    :host {
+      display: block;
+      flex-shrink: 0;
+      height: 1px;
+      width: 100%;
+      background: var(--border);
+    }
+    :host(:state(attr-orientation-is-vertical)) {
+      height: auto;
+      width: 1px;
+      align-self: stretch;
+    }
+  </style>
+</custom-element>

package/components/sheet.html

@@ -0,0 +1,143 @@
+<import-element from="./dialog.html"></import-element>
+
+<custom-element name="ui-sheet">
+  <script>
+    const props = defineProps({
+      open: prop.boolean().reflect(),
+      side: prop.enum(["top", "right", "bottom", "left"]).default("right"),
+    });
+
+    const parts = useChildren("ui-sheet-header, ui-sheet-title, ui-sheet-description");
+    const sheet = useState({
+      get label() {
+        return text("ui-sheet-title");
+      },
+      get description() {
+        return text("ui-sheet-description");
+      },
+    });
+
+    function text(selector) {
+      const found = parts.flatMap((part) => (part.matches(selector) ? [part] : [...part.querySelectorAll(selector)]));
+      return found.map((part) => part.textContent.trim()).join(" ") || null;
+    }
+
+    function show() {
+      props.open = true;
+    }
+
+    function showFrom(trigger) {
+      trigger.firstElementChild?.focus();
+      show();
+    }
+
+    function close() {
+      props.open = false;
+    }
+
+    function requestClose() {
+      refs.dialog.requestClose();
+    }
+
+    function closed() {
+      props.open = false;
+      dispatch("close", undefined, { bubbles: false, composed: false });
+    }
+
+    const COMMANDS = { "show-modal": show, close, "request-close": requestClose };
+
+    defineMethods({ showModal: show, show, close, requestClose });
+
+    listen("command", (event) => COMMANDS[event.command.replace(/^--/, "")]?.());
+  </script>
+
+  <style>
+    :host {
+      display: contents;
+    }
+  </style>
+
+  <slot name="trigger"></slot>
+  <ui-dialog ref="dialog" part="dialog" _side="@side" _open="@open" _label="#sheet.label" _description="#sheet.description" onclose="closed()">
+    <slot name="header" slot="header"></slot>
+    <slot></slot>
+    <slot name="footer" slot="footer"></slot>
+  </ui-dialog>
+</custom-element>
+
+<custom-element name="ui-sheet-trigger" slot="trigger">
+  <style>
+    :host,
+    span {
+      display: contents;
+    }
+  </style>
+
+  <span part="trigger" onclick="showFrom(host)"><slot></slot></span>
+</custom-element>
+
+<custom-element name="ui-sheet-close">
+  <style>
+    :host,
+    span {
+      display: contents;
+    }
+  </style>
+
+  <span part="close" onclick="close()"><slot></slot></span>
+</custom-element>
+
+<custom-element name="ui-sheet-header" slot="header">
+  <style>
+    :host {
+      display: grid;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-sheet-title">
+  <style>
+    :host {
+      display: block;
+    }
+    h2 {
+      margin: 0;
+      font-size: var(--text-lg);
+      font-weight: var(--font-weight-semibold);
+      line-height: 1;
+    }
+  </style>
+
+  <h2 part="title"><slot></slot></h2>
+</custom-element>
+
+<custom-element name="ui-sheet-description">
+  <style>
+    :host {
+      display: block;
+    }
+    p {
+      margin: 0;
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+    }
+  </style>
+
+  <p part="description"><slot></slot></p>
+</custom-element>
+
+<custom-element name="ui-sheet-footer" slot="footer">
+  <style>
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>