@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/components/ColorPicker.vue

@@ -0,0 +1,216 @@
+<script>
+import theme from "#build/ui/color-picker";
+function HSLtoHSV(hsl) {
+  const x = hsl.S * (hsl.L < 50 ? hsl.L : 100 - hsl.L);
+  const v = hsl.L + x / 100;
+  return {
+    h: hsl.H,
+    s: hsl.L === 0 ? hsl.S : 2 * x / v,
+    v
+  };
+}
+function HSVtoHSL(hsv) {
+  const x = (200 - hsv.s) * hsv.v / 100;
+  return {
+    H: hsv.h,
+    S: x === 0 || x === 200 ? 0 : Math.round(hsv.s * hsv.v / (x <= 100 ? x : 200 - x)),
+    L: Math.round(x / 2)
+  };
+}
+</script>
+
+<script setup>
+import { ref, nextTick, computed, toValue } from "vue";
+import { Primitive } from "reka-ui";
+import { useEventListener, useElementBounding, watchThrottled, watchPausable } from "@vueuse/core";
+import { isClient } from "@vueuse/shared";
+import { ColorTranslator } from "colortranslator";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  throttle: { type: Number, required: false, default: 50 },
+  disabled: { type: Boolean, required: false },
+  defaultValue: { type: String, required: false, default: "#FFFFFF" },
+  format: { type: String, required: false, default: "hex" },
+  size: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const modelValue = defineModel({ type: String, ...void 0 });
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.colorPicker || {} })({
+  size: props.size
+}));
+const pickedColor = computed({
+  get() {
+    try {
+      const color = new ColorTranslator(modelValue.value || props.defaultValue);
+      return HSLtoHSV(color.HSLObject);
+    } catch (_) {
+      return { h: 0, s: 0, v: 100 };
+    }
+  },
+  set(value) {
+    const color = new ColorTranslator(HSVtoHSL(value), {
+      decimals: 2,
+      labUnit: "percent",
+      cmykUnit: "percent",
+      cmykFunction: "cmyk"
+    });
+    switch (props.format) {
+      case "rgb":
+        modelValue.value = color.RGB;
+        break;
+      case "hsl":
+        modelValue.value = color.HSL;
+        break;
+      case "cmyk":
+        modelValue.value = color.CMYK;
+        break;
+      case "lab":
+        modelValue.value = color.CIELab;
+        break;
+      case "hex":
+      default:
+        modelValue.value = color.HEX;
+    }
+  }
+});
+function useColorDraggable(targetElement, containerElement, axis = "both", initialPosition = { x: 0, y: 0 }, disabled2) {
+  const position = ref(initialPosition);
+  const pressedDelta = ref();
+  const targetRect = useElementBounding(targetElement);
+  const containerRect = useElementBounding(containerElement);
+  function start(event) {
+    if (toValue(disabled2)) return event.preventDefault();
+    const container = toValue(containerElement);
+    pressedDelta.value = {
+      x: event.clientX - (container ? event.clientX - containerRect.left.value + container.scrollLeft : targetRect.left.value),
+      y: event.clientY - (container ? event.clientY - containerRect.top.value + container.scrollTop : targetRect.top.value)
+    };
+    move(event);
+  }
+  function move(event) {
+    if (!pressedDelta.value) return;
+    const container = toValue(containerElement);
+    let { x, y } = position.value;
+    if (container && (axis === "x" || axis === "both")) {
+      x = Math.min(Math.max(0, (event.clientX - pressedDelta.value.x) / container.scrollWidth * 100), 100);
+    }
+    if (container && (axis === "y" || axis === "both")) {
+      y = Math.min(Math.max(0, (event.clientY - pressedDelta.value.y) / container.scrollHeight * 100), 100);
+    }
+    position.value = { x, y };
+  }
+  function end() {
+    if (!pressedDelta.value) {
+      return;
+    }
+    pressedDelta.value = void 0;
+  }
+  if (isClient) {
+    useEventListener(containerElement, "pointerdown", start);
+    useEventListener(window, "pointermove", move);
+    useEventListener(window, "pointerup", end);
+  }
+  return {
+    position
+  };
+}
+function normalizeHue(hue, dir = "left") {
+  if (dir === "right") {
+    return hue * 100 / 360;
+  }
+  return hue / 100 * 360;
+}
+function normalizeBrightness(brightness) {
+  return 100 - brightness;
+}
+const selectorRef = ref(null);
+const selectorThumbRef = ref(null);
+const trackRef = ref(null);
+const trackThumbRef = ref(null);
+const disabled = computed(() => props.disabled);
+const { position: selectorThumbPosition } = useColorDraggable(selectorThumbRef, selectorRef, "both", {
+  x: pickedColor.value.s,
+  y: normalizeBrightness(pickedColor.value.v)
+}, disabled);
+const { position: trackThumbPosition } = useColorDraggable(trackThumbRef, trackRef, "y", {
+  x: 0,
+  y: normalizeHue(pickedColor.value.h, "right")
+}, disabled);
+const { pause: pauseWatchColor, resume: resumeWatchColor } = watchPausable(pickedColor, (hsb) => {
+  selectorThumbPosition.value = {
+    x: hsb.s,
+    y: normalizeBrightness(hsb.v)
+  };
+  trackThumbPosition.value = {
+    x: 0,
+    y: normalizeHue(hsb.h, "right")
+  };
+});
+watchThrottled([selectorThumbPosition, trackThumbPosition], () => {
+  pauseWatchColor();
+  pickedColor.value = {
+    h: normalizeHue(trackThumbPosition.value.y),
+    s: selectorThumbPosition.value.x,
+    v: normalizeBrightness(selectorThumbPosition.value.y)
+  };
+  nextTick(resumeWatchColor);
+}, { throttle: () => props.throttle });
+const trackThumbColor = computed(() => new ColorTranslator(HSVtoHSL({
+  h: normalizeHue(trackThumbPosition.value.y),
+  s: 100,
+  v: 100
+})).HEX);
+const selectorStyle = computed(() => ({
+  backgroundColor: trackThumbColor.value
+}));
+const selectorThumbStyle = computed(() => ({
+  backgroundColor: new ColorTranslator(modelValue.value || props.defaultValue).HEX,
+  left: `${selectorThumbPosition.value.x}%`,
+  top: `${selectorThumbPosition.value.y}%`
+}));
+const trackThumbStyle = computed(() => ({
+  backgroundColor: trackThumbColor.value,
+  top: `${trackThumbPosition.value.y}%`
+}));
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
+    <div :class="ui.picker({ class: props.ui?.picker })">
+      <div
+        ref="selectorRef"
+        :class="ui.selector({ class: props.ui?.selector })"
+        :style="selectorStyle"
+      >
+        <div :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
+          <div
+            ref="selectorThumbRef"
+            :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
+            :style="selectorThumbStyle"
+            :data-disabled="disabled ? true : void 0"
+          />
+        </div>
+      </div>
+      <div
+        ref="trackRef"
+        :class="ui.track({ class: props.ui?.track })"
+        data-color-picker-track
+      >
+        <div
+          ref="trackThumbRef"
+          :class="ui.trackThumb({ class: props.ui?.trackThumb })"
+          :style="trackThumbStyle"
+          :data-disabled="disabled ? true : void 0"
+        />
+      </div>
+    </div>
+  </Primitive>
+</template>
+
+<style scoped>
+[data-color-picker-background]{background-image:linear-gradient(0deg,#000 0,transparent),linear-gradient(90deg,#fff 0,hsla(0,0%,100%,0))}[data-color-picker-track]{background-image:linear-gradient(0deg,red,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red)}
+</style>

package/dist/runtime/components/ColorPicker.vue.d.ts

@@ -0,0 +1,48 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/color-picker';
+import type { ComponentConfig } from '../types/utils';
+type ColorPicker = ComponentConfig<typeof theme, AppConfig, 'colorPicker'>;
+export type ColorPickerProps = {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * Throttle time in ms for the color picker
+     */
+    throttle?: number;
+    /**
+     * Disable the color picker
+     */
+    disabled?: boolean;
+    /**
+     * The default value of the color picker
+     */
+    defaultValue?: string;
+    /**
+     * Format of the color
+     * @defaultValue 'hex'
+     */
+    format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab';
+    /**
+     * @defaultValue 'md'
+     */
+    size?: ColorPicker['variants']['size'];
+    class?: any;
+    ui?: ColorPicker['slots'];
+};
+declare const _default: import("vue").DefineComponent<ColorPickerProps & {
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<ColorPickerProps & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    format: "hex" | "rgb" | "hsl" | "cmyk" | "lab";
+    defaultValue: string;
+    throttle: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/CommandPalette.vue

@@ -0,0 +1,275 @@
+<script>
+import theme from "#build/ui/command-palette";
+</script>
+
+<script setup>
+import { computed, ref, useTemplateRef } from "vue";
+import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from "reka-ui";
+import { defu } from "defu";
+import { reactivePick } from "@vueuse/core";
+import { useFuse } from "@vueuse/integrations/useFuse";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { omit, get } from "../utils";
+import { tv } from "../utils/tv";
+import { highlight } from "../utils/fuse";
+import { pickLinkProps } from "../utils/link";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+import UButton from "./Button.vue";
+import UChip from "./Chip.vue";
+import ULinkBase from "./LinkBase.vue";
+import ULink from "./Link.vue";
+import UInput from "./Input.vue";
+import UKbd from "./Kbd.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  icon: { type: String, required: false },
+  selectedIcon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  autofocus: { type: Boolean, required: false, default: true },
+  close: { type: [Boolean, Object], required: false },
+  closeIcon: { type: String, required: false },
+  back: { type: [Boolean, Object], required: false, default: true },
+  backIcon: { type: String, required: false },
+  groups: { type: Array, required: false },
+  fuse: { type: Object, required: false },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  modelValue: { type: null, required: false, default: "" },
+  defaultValue: { type: null, required: false },
+  highlightOnHover: { type: Boolean, required: false },
+  selectionBehavior: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: String, required: false }
+});
+const emits = defineEmits(["update:modelValue", "highlight", "entryFocus", "leave", "update:open"]);
+const slots = defineSlots();
+const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover", "selectionBehavior"), emits);
+const inputProps = useForwardProps(reactivePick(props, "loading", "loadingIcon"));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} })());
+const fuse = computed(() => defu({}, props.fuse, {
+  fuseOptions: {
+    ignoreLocation: true,
+    threshold: 0.1,
+    keys: [props.labelKey, "suffix"]
+  },
+  resultLimit: 12,
+  matchAllWhenSearchEmpty: true
+}));
+const history = ref([]);
+const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t("commandPalette.placeholder"));
+const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1]] : props.groups);
+const items = computed(() => groups.value?.filter((group) => {
+  if (!group.id) {
+    console.warn(`[@eslamdevui/ui] CommandPalette group is missing an \`id\` property`);
+    return false;
+  }
+  if (group.ignoreFilter) {
+    return false;
+  }
+  return true;
+})?.flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
+const { results: fuseResults } = useFuse(searchTerm, items, fuse);
+function getGroupWithItems(group, items2) {
+  if (group?.postFilter && typeof group.postFilter === "function") {
+    items2 = group.postFilter(searchTerm.value, items2);
+  }
+  return {
+    ...group,
+    items: items2.slice(0, fuse.value.resultLimit).map((item) => {
+      return {
+        ...item,
+        labelHtml: highlight(item, searchTerm.value, props.labelKey),
+        suffixHtml: highlight(item, searchTerm.value, void 0, [props.labelKey])
+      };
+    })
+  };
+}
+const filteredGroups = computed(() => {
+  const groupsById = fuseResults.value.reduce((acc, result) => {
+    const { item, matches } = result;
+    if (!item.group) {
+      return acc;
+    }
+    acc[item.group] ||= [];
+    acc[item.group]?.push({ ...item, matches });
+    return acc;
+  }, {});
+  const fuseGroups = Object.entries(groupsById).map(([id, items2]) => {
+    const group = groups.value?.find((group2) => group2.id === id);
+    if (!group) {
+      return;
+    }
+    return getGroupWithItems(group, items2);
+  }).filter((group) => !!group);
+  const nonFuseGroups = groups.value?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || [];
+  return nonFuseGroups.reduce((acc, group) => {
+    acc.splice(group.index, 0, group);
+    return acc;
+  }, [...fuseGroups]);
+});
+const listboxRootRef = useTemplateRef("listboxRootRef");
+function navigate(item) {
+  if (!item.children?.length) {
+    return;
+  }
+  history.value.push({
+    id: `history-${history.value.length}`,
+    label: item.label,
+    slot: item.slot,
+    placeholder: item.placeholder,
+    items: item.children
+  });
+  searchTerm.value = "";
+  listboxRootRef.value?.highlightFirstItem();
+}
+function navigateBack() {
+  if (!history.value.length) {
+    return;
+  }
+  history.value.pop();
+  searchTerm.value = "";
+  listboxRootRef.value?.highlightFirstItem();
+}
+function onBackspace() {
+  if (!searchTerm.value) {
+    navigateBack();
+  }
+}
+function onSelect(e, item) {
+  if (item.children?.length) {
+    e.preventDefault();
+    navigate(item);
+  } else {
+    item.onSelect?.(e);
+  }
+}
+</script>
+
+<template>
+  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ListboxFilter v-model="searchTerm" as-child>
+      <UInput
+        :placeholder="placeholder"
+        variant="none"
+        :autofocus="autofocus"
+        v-bind="inputProps"
+        :icon="icon || appConfig.ui.icons.search"
+        :class="ui.input({ class: props.ui?.input })"
+        @keydown.backspace="onBackspace"
+      >
+        <template v-if="history?.length && (back || !!slots.back)" #leading>
+          <slot name="back" :ui="ui">
+            <UButton
+              :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              color="neutral"
+              variant="link"
+              :aria-label="t('commandPalette.back')"
+              v-bind="typeof back === 'object' ? back : {}"
+              :class="ui.back({ class: props.ui?.back })"
+              @click="navigateBack"
+            />
+          </slot>
+        </template>
+
+        <template v-if="close || !!slots.close" #trailing>
+          <slot name="close" :ui="ui">
+            <UButton
+              v-if="close"
+              :icon="closeIcon || appConfig.ui.icons.close"
+              color="neutral"
+              variant="ghost"
+              :aria-label="t('commandPalette.close')"
+              v-bind="typeof close === 'object' ? close : {}"
+              :class="ui.close({ class: props.ui?.close })"
+              @click="emits('update:open', false)"
+            />
+          </slot>
+        </template>
+      </UInput>
+    </ListboxFilter>
+
+    <ListboxContent :class="ui.content({ class: props.ui?.content })">
+      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
+          <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="ui.label({ class: props.ui?.label })">
+            {{ get(group, props.labelKey) }}
+          </ListboxGroupLabel>
+
+          <ListboxItem
+            v-for="(item, index) in group.items"
+            :key="`group-${group.id}-${index}`"
+            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
+            :disabled="item.disabled"
+            as-child
+            @select="onSelect($event, item)"
+          >
+            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
+                <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
+                  <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
+                    <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
+                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
+                    <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
+                    <UChip
+                      v-else-if="item.chip"
+                      :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+                      inset
+                      standalone
+                      v-bind="item.chip"
+                      :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
+                    />
+                  </slot>
+
+                  <span v-if="item.labelHtml || get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
+                    <slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
+                      <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+
+                      <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey)" />
+
+                      <span :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
+                    </slot>
+                  </span>
+
+                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
+                    <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
+                      <UIcon
+                        v-if="item.children && item.children.length > 0"
+                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
+                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                      />
+
+                      <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                        <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+                      </span>
+
+                      <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
+                    </slot>
+
+                    <ListboxItemIndicator v-if="!item.children?.length" as-child>
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+                    </ListboxItemIndicator>
+                  </span>
+                </slot>
+              </ULinkBase>
+            </ULink>
+          </ListboxItem>
+        </ListboxGroup>
+      </div>
+
+      <div v-else :class="ui.empty({ class: props.ui?.empty })">
+        <slot name="empty" :search-term="searchTerm">
+          {{ searchTerm ? t("commandPalette.noMatch", { searchTerm }) : t("commandPalette.noData") }}
+        </slot>
+      </div>
+    </ListboxContent>
+  </ListboxRoot>
+</template>