@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/web/selectbox/selectbox.svelte

@@ -0,0 +1,704 @@
+<script context="module"></script>
+
+<script>import { onDestroy, onMount } from "svelte";
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  size as floatingSize
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+export let value = void 0;
+export let defaultValue = void 0;
+export let multiple = void 0;
+export let disableShift = void 0;
+export let menuStyle = void 0;
+export let listStyle = void 0;
+export let ui = void 0;
+export let disabled = void 0;
+export let onOpen = void 0;
+export let searchable = void 0;
+export let onClose = void 0;
+export let options = void 0;
+export let onChange = void 0;
+export let onSearch = void 0;
+export let readOnly = void 0;
+export let className = void 0;
+export let error = void 0;
+export let errorMessage = void 0;
+export let size = void 0;
+export let block = void 0;
+export let label = void 0;
+export let labelClass = void 0;
+export let id = void 0;
+export let labelStyle = void 0;
+export let required = void 0;
+export let optional = void 0;
+export let optionalText = void 0;
+export let helperText = void 0;
+export let helperTextPosition = void 0;
+export let helperTextClass = void 0;
+export let helperTextStyle = void 0;
+export let controlClass = void 0;
+export let rounded = void 0;
+export let controlStyle = void 0;
+export let loading = void 0;
+export let placeholder = void 0;
+export let clearable = void 0;
+export let menuClass = void 0;
+export let searchPlaceholder = void 0;
+export let listClass = void 0;
+export let resetText = void 0;
+export let applyText = void 0;
+export let errorMessageClass = void 0;
+export let errorMessageStyle = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+function updatePosition() {
+  if (!controlRef || !dropdownRef)
+    return;
+  computePosition(controlRef, dropdownRef, {
+    placement: "bottom-start",
+    strategy: "absolute",
+    middleware: [
+      offset(4),
+      flip({
+        padding: {
+          top: 80,
+          bottom: 16,
+          left: 16,
+          right: 16
+        }
+      }),
+      ...disableShift ? [] : [
+        shift({
+          padding: {
+            top: 80,
+            bottom: 16,
+            left: 16,
+            right: 16
+          }
+        })
+      ],
+      floatingSize({
+        apply({ rects, elements, availableHeight }) {
+          const customWidth = menuStyle?.width !== void 0 && menuStyle?.width !== null && menuStyle?.width !== "" ? typeof menuStyle.width === "number" || /^\d+(\.\d+)?$/.test(String(menuStyle.width).trim()) ? `${String(menuStyle.width).trim()}px` : String(menuStyle.width) : listStyle?.width !== void 0 && listStyle?.width !== null && listStyle?.width !== "" ? typeof listStyle.width === "number" || /^\d+(\.\d+)?$/.test(String(listStyle.width).trim()) ? `${String(listStyle.width).trim()}px` : String(listStyle.width) : ui?.dropdownWidth !== void 0 && ui?.dropdownWidth !== null && ui?.dropdownWidth !== "" ? typeof ui.dropdownWidth === "number" || /^\d+(\.\d+)?$/.test(String(ui.dropdownWidth).trim()) ? `${String(ui.dropdownWidth).trim()}px` : String(ui.dropdownWidth) : void 0;
+          Object.assign(elements.floating.style, {
+            width: customWidth || `${rects.reference.width}px`,
+            minWidth: customWidth ? customWidth : void 0,
+            maxHeight: `${Math.min(availableHeight, 360)}px`
+          });
+        },
+        padding: {
+          top: 80,
+          bottom: 16,
+          left: 16,
+          right: 16
+        }
+      })
+    ]
+  }).then(({ x, y, placement }) => {
+    if (!dropdownRef)
+      return;
+    dropdownRef.style.left = `${x}px`;
+    dropdownRef.style.top = `${y}px`;
+    dropdownRef.setAttribute("data-placement", placement);
+  });
+}
+function startFloating() {
+  stopFloating();
+  if (controlRef && dropdownRef) {
+    cleanupAutoUpdate = autoUpdate(controlRef, dropdownRef, () => {
+      updatePosition();
+    });
+  }
+}
+function stopFloating() {
+  if (typeof cleanupAutoUpdate === "function") {
+    cleanupAutoUpdate();
+    cleanupAutoUpdate = null;
+  }
+}
+function handleClickOutside(event) {
+  if (!dropdownRef)
+    return;
+  const target = event.target;
+  if (rootRef && !rootRef.contains(target) && dropdownRef && !dropdownRef.contains(target)) {
+    closeDropdown();
+  }
+}
+function onPointerDown(event) {
+  handleClickOutside(event);
+}
+function toggleDropdown() {
+  if (disabled)
+    return;
+  const nextOpen = !isOpen;
+  isOpen = nextOpen;
+  if (nextOpen) {
+    if (multiple) {
+      tempMultiValue = Array.isArray(currentValue) ? [...currentValue] : [];
+    }
+    if (onOpen)
+      onOpen();
+    setTimeout(() => {
+      startFloating();
+      if (searchable && dropdownRef) {
+        const searchInput = dropdownRef.querySelector?.(
+          ".ttdk-selectbox-search-input"
+        );
+        if (searchInput) {
+          searchInput.focus();
+        }
+      }
+    }, 0);
+  } else {
+    stopFloating();
+    searchQuery = "";
+    if (onClose)
+      onClose();
+  }
+}
+function closeDropdown() {
+  stopFloating();
+  isOpen = false;
+  searchQuery = "";
+  if (onClose)
+    onClose();
+}
+function normalizedOptions() {
+  if (!options || !Array.isArray(options))
+    return [];
+  return options.map((opt) => {
+    if (typeof opt === "object" && opt !== null) {
+      return {
+        label: String(opt.label ?? opt.value ?? ""),
+        value: opt.value ?? opt.label ?? "",
+        disabled: Boolean(opt.disabled)
+      };
+    }
+    return {
+      label: String(opt),
+      value: opt,
+      disabled: false
+    };
+  });
+}
+function filteredOptions(query, _opts) {
+  const opts = normalizedOptions();
+  const currentQ = query !== void 0 ? query : searchQuery;
+  if (!currentQ || !currentQ.trim())
+    return opts;
+  const q = currentQ.toLowerCase().trim();
+  return opts.filter((opt) => opt.label && opt.label.toLowerCase().includes(q));
+}
+function isOptionSelected(optValue, _multi, _curr) {
+  if (multiple) {
+    const list = isOpen ? tempMultiValue : Array.isArray(currentValue) ? currentValue : [];
+    return list.some((v) => String(v) === String(optValue));
+  }
+  return String(currentValue) === String(optValue);
+}
+function handleSingleSelect(opt) {
+  if (opt.disabled || disabled)
+    return;
+  currentValue = opt.value;
+  if (onChange) {
+    onChange(opt.value);
+  }
+  closeDropdown();
+}
+function handleMultiToggle(opt) {
+  if (opt.disabled || disabled)
+    return;
+  const index = tempMultiValue.findIndex(
+    (v) => String(v) === String(opt.value)
+  );
+  if (index > -1) {
+    tempMultiValue = tempMultiValue.filter((_, i) => i !== index);
+  } else {
+    tempMultiValue = [...tempMultiValue, opt.value];
+  }
+}
+function handleRemoveTag(val, event) {
+  if (event && event.stopPropagation)
+    event.stopPropagation();
+  if (disabled)
+    return;
+  if (Array.isArray(currentValue)) {
+    const next = currentValue.filter((v) => String(v) !== String(val));
+    currentValue = next;
+    tempMultiValue = [...next];
+    if (onChange) {
+      onChange(next);
+    }
+  }
+}
+function handleApply() {
+  currentValue = [...tempMultiValue];
+  if (onChange) {
+    onChange(currentValue);
+  }
+  closeDropdown();
+}
+function handleReset() {
+  tempMultiValue = [];
+  currentValue = [];
+  if (onChange) {
+    onChange([]);
+  }
+}
+function handleSearchInput(e) {
+  searchQuery = e.target.value;
+  if (onSearch) {
+    onSearch(e.target.value);
+  }
+}
+function getSingleSelectedLabel() {
+  const opts = normalizedOptions();
+  const match = opts.find(
+    (opt) => String(opt.value) === String(currentValue)
+  );
+  return match ? match.label : "";
+}
+function getMultiSelectedChips() {
+  const list = Array.isArray(currentValue) ? currentValue : [];
+  const opts = normalizedOptions();
+  return list.map((val) => {
+    const match = opts.find((o) => String(o.value) === String(val));
+    return {
+      value: val,
+      label: match ? match.label : String(val)
+    };
+  });
+}
+function hasValue() {
+  if (multiple) {
+    return Array.isArray(currentValue) && currentValue.length > 0;
+  }
+  return currentValue !== void 0 && currentValue !== "" && currentValue !== null;
+}
+function handleClear(event) {
+  if (event && event.stopPropagation)
+    event.stopPropagation();
+  if (disabled || readOnly)
+    return;
+  const emptyVal = multiple ? [] : "";
+  currentValue = emptyVal;
+  tempMultiValue = [];
+  if (onChange) {
+    onChange(emptyVal);
+  }
+}
+let rootRef;
+let controlRef;
+let dropdownRef;
+let isOpen = false;
+let searchQuery = "";
+let currentValue = value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : multiple ? [] : "";
+let tempMultiValue = [];
+let cleanupAutoUpdate = null;
+onMount(() => {
+  if (typeof document !== "undefined") {
+    document.addEventListener(
+      "pointerdown",
+      (e) => onPointerDown(e),
+      true
+    );
+  }
+});
+onDestroy(() => {
+  stopFloating();
+  if (typeof document !== "undefined") {
+    document.removeEventListener(
+      "pointerdown",
+      (e) => onPointerDown(e),
+      true
+    );
+  }
+});
+</script>
+
+<div
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    ...(ui || {}),
+    })}
+  bind:this={rootRef}
+  class={`ttdk-form-item ${className || ""}`.trim()}
+  data-disabled={disabled}
+  data-error={Boolean(error || errorMessage)}
+  data-size={size || "md"}
+  data-block={block ? "true" : undefined}
+>
+  {#if label}
+    <label
+      style={stringifyStyles({
+        ...buildUiVars(labelStyle),
+      })}
+      class={`ttdk-form-label ${labelClass || ""}`.trim()}
+      for={id}
+      ><span>{label}</span>
+      {#if required}
+        <span class="ttdk-form-required" aria-hidden="true"> * </span>
+      {/if}
+      {#if optional}
+        <span class="ttdk-form-optional">{optionalText || "(Opsional)"}</span>
+      {/if}</label
+    >
+  {/if}
+  {#if helperText && helperTextPosition === "top"}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(helperTextStyle),
+      })}
+      class={`ttdk-form-helper ${helperTextClass || ""}`.trim()}
+    >
+      {helperText}
+    </div>
+  {/if}
+  <div
+    style={stringifyStyles({
+      ...buildUiVars(controlStyle),
+    })}
+    role="combobox"
+    aria-haspopup="listbox"
+    bind:this={controlRef}
+    class={`ttdk-selectbox-control ${controlClass || ""}`.trim()}
+    {id}
+    tabIndex={disabled ? -1 : 0}
+    aria-expanded={isOpen}
+    aria-disabled={disabled}
+    aria-invalid={Boolean(error || errorMessage)}
+    data-open={isOpen ? "true" : "false"}
+    data-filled={hasValue() ? "true" : "false"}
+    data-error={Boolean(error || errorMessage)}
+    data-disabled={Boolean(disabled)}
+    data-size={size || "md"}
+    data-rounded={rounded || "md"}
+    on:click={(event) => {
+      disabled || readOnly || loading ? undefined : toggleDropdown();
+    }}
+    on:keydown={(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggleDropdown();
+      } else if (e.key === "Escape") {
+        closeDropdown();
+      }
+    }}
+  >
+    <div class="ttdk-selectbox-display">
+      {#if multiple && hasValue()}
+        <div class="ttdk-selectbox-chips">
+          {#each getMultiSelectedChips() as chip (chip.value)}
+            <span class="ttdk-select-chip"
+              ><span class="ttdk-select-chip-text">{chip.label}</span><button
+                type="button"
+                class="ttdk-select-chip-remove"
+                aria-label={`Hapus ${chip.label}`}
+                on:click={(e) => {
+                  handleRemoveTag(chip.value, e);
+                }}
+                ><svg
+                  class="ttdk-select-chip-remove-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  ><line x1="18" y1="6" x2="6" y2="18" /><line
+                    x1="6"
+                    y1="6"
+                    x2="18"
+                    y2="18"
+                  /></svg
+                ></button
+              ></span
+            >
+          {/each}
+        </div>
+      {/if}
+      {#if !multiple && hasValue()}
+        <span class="ttdk-selectbox-value">{getSingleSelectedLabel()}</span>
+      {/if}
+      {#if !hasValue()}
+        <span class="ttdk-selectbox-placeholder"
+          >{placeholder || "Pilih dropdown menu"}</span
+        >
+      {/if}
+    </div>
+    {#if clearable && hasValue() && !disabled && !readOnly && !loading}
+      <button
+        type="button"
+        class="ttdk-selectbox-clear"
+        aria-label="Hapus pilihan"
+        on:click={(e) => {
+          handleClear(e);
+        }}
+        ><svg class="ttdk-selectbox-clear-icon" viewBox="0 0 24 24" fill="none"
+          ><line x1="18" y1="6" x2="6" y2="18" /><line
+            x1="6"
+            y1="6"
+            x2="18"
+            y2="18"
+          /></svg
+        ></button
+      >
+    {/if}
+    {#if loading}
+      <span class="ttdk-selectbox-spinner" aria-hidden="true"
+        ><svg
+          class="ttdk-selectbox-spinner-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          ><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.175"
+            transform="rotate(0 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.25"
+            transform="rotate(30 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.325"
+            transform="rotate(60 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.4"
+            transform="rotate(90 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.475"
+            transform="rotate(120 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.55"
+            transform="rotate(150 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.625"
+            transform="rotate(180 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.7"
+            transform="rotate(210 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.775"
+            transform="rotate(240 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.85"
+            transform="rotate(270 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.925"
+            transform="rotate(300 12 12)"
+          /><line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="1"
+            transform="rotate(330 12 12)"
+          /></svg
+        ></span
+      >
+    {/if}
+    {#if !loading}
+      <span class="ttdk-selectbox-arrow" data-open={isOpen ? "true" : "false"}
+        ><svg class="ttdk-selectbox-arrow-icon" viewBox="0 0 24 24" fill="none"
+          ><polyline points="6 9 12 15 18 9" /></svg
+        ></span
+      >
+    {/if}
+  </div>
+  {#if isOpen && !disabled}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(menuStyle || listStyle),
+      })}
+      role="listbox"
+      bind:this={dropdownRef}
+      class={`ttdk-selectbox-dropdown ${menuClass || ""}`.trim()}
+    >
+      {#if searchable}
+        <div
+          class="ttdk-selectbox-search"
+          on:click={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <input
+            type="text"
+            class="ttdk-selectbox-search-input"
+            placeholder={searchPlaceholder || "Cari"}
+            value={searchQuery}
+            on:input={(e) => {
+              handleSearchInput(e);
+            }}
+            autoFocus={true}
+          /><span class="ttdk-selectbox-search-icon" aria-hidden="true"
+            ><svg
+              class="ttdk-selectbox-search-svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              ><circle cx="11" cy="11" r="8" /><line
+                x1="21"
+                y1="21"
+                x2="16.65"
+                y2="16.65"
+              /></svg
+            ></span
+          >
+        </div>
+      {/if}
+      <div class="ttdk-selectbox-options-list">
+        {#each filteredOptions(searchQuery, options) as opt (opt.value)}
+          <div
+            role="option"
+            class={`ttdk-selectbox-option ${listClass || ""}`.trim()}
+            aria-selected={isOptionSelected(opt.value, tempMultiValue, currentValue)}
+            aria-disabled={opt.disabled}
+            data-selected={isOptionSelected(opt.value, tempMultiValue, currentValue) ? "true" : "false"}
+            data-disabled={opt.disabled ? "true" : "false"}
+            on:click={(e) => {
+              e.stopPropagation();
+              if (multiple) {
+                handleMultiToggle(opt);
+              } else {
+                handleSingleSelect(opt);
+              }
+            }}
+          >
+            {#if multiple}
+              <span
+                class="ttdk-selectbox-checkbox"
+                data-checked={isOptionSelected(opt.value, tempMultiValue, currentValue) ? "true" : "false"}
+              >
+                {#if isOptionSelected(opt.value, tempMultiValue, currentValue)}
+                  <svg
+                    class="ttdk-selectbox-checkbox-icon"
+                    viewBox="0 0 24 24"
+                    fill="none"><polyline points="20 6 9 17 4 12" /></svg
+                  >
+                {/if}</span
+              >
+            {/if}<span class="ttdk-selectbox-option-label">{opt.label}</span>
+            {#if !multiple && isOptionSelected(opt.value, tempMultiValue, currentValue)}
+              <span class="ttdk-selectbox-check-icon" aria-hidden="true"
+                ><svg
+                  class="ttdk-selectbox-check-svg"
+                  viewBox="0 0 24 24"
+                  fill="none"><polyline points="20 6 9 17 4 12" /></svg
+                ></span
+              >
+            {/if}
+          </div>
+        {/each}
+
+        {#if filteredOptions(searchQuery, options).length === 0}
+          <div class="ttdk-selectbox-empty">Tidak ada pilihan ditemukan</div>
+        {/if}
+      </div>
+      {#if multiple}
+        <div
+          class="ttdk-selectbox-actions"
+          on:click={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <button
+            type="button"
+            class="ttdk-selectbox-btn-reset"
+            on:click={(event) => {
+              handleReset();
+            }}
+            ><svg
+              class="ttdk-selectbox-btn-reset-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              ><path
+                d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+              /><path d="M3 3v5h5" /></svg
+            ><span>{resetText || "Reset"}</span></button
+          ><button
+            type="button"
+            class="ttdk-selectbox-btn-apply"
+            on:click={(event) => {
+              handleApply();
+            }}
+            ><span>{applyText || "Terapkan"}</span><svg
+              class="ttdk-selectbox-btn-apply-icon"
+              viewBox="0 0 24 24"
+              fill="none"><polyline points="20 6 9 17 4 12" /></svg
+            ></button
+          >
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {#if helperText && helperTextPosition !== "top"}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(helperTextStyle),
+      })}
+      class={`ttdk-form-helper ${helperTextClass || ""}`.trim()}
+    >
+      {helperText}
+    </div>
+  {/if}
+  {#if errorMessage}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(errorMessageStyle),
+      })}
+      role="alert"
+      class={`ttdk-form-error ${errorMessageClass || ""}`.trim()}
+    >
+      {errorMessage}
+    </div>
+  {/if}
+</div>