@movk/nuxt 1.2.0 → 1.3.0

package/dist/runtime/components/ColorChooser.vue

@@ -1,51 +1,328 @@
 <script setup>
-import { UPopover, UButton, UColorPicker, UIcon } from "#components";
-import { computed } from "vue";
+import { computed, ref, useAttrs, watch } from "vue";
+import { useClipboard } from "@vueuse/core";
+import { ColorTranslator } from "colortranslator";
+import { UPopover, UButton, UColorPicker, UIcon, UInput } from "#components";
+import { useAppConfig } from "#imports";
+import { useExtendedTv } from "../utils/extend-theme";
+import { useFieldControl } from "../utils/form-control";
+import theme from "#build/movk-ui/color-chooser";
+import popoverTheme from "#build/ui/popover";
+import PillGroup from "./PillGroup.vue";
 const props = defineProps({
-  popoverProps: { type: Object, required: false },
-  buttonProps: { type: Object, required: false }
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  format: { type: String, required: false, default: "hex" },
+  formats: { type: Array, required: false, default: () => ["hex"] },
+  swatches: { type: Array, required: false },
+  closeOnSwatch: { type: Boolean, required: false, default: true },
+  clearable: { type: Boolean, required: false },
+  copyable: { type: Boolean, required: false },
+  trigger: { type: String, required: false, default: "button" },
+  label: { type: String, required: false },
+  placeholder: { type: String, required: false, default: "\u9009\u62E9\u989C\u8272" },
+  size: { type: void 0, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "subtle" },
+  disabled: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  icon: { type: null, required: false, default: "i-lucide-palette" },
+  colorPickerProps: { type: Object, required: false },
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["close:prevent", "update:open"]);
-defineOptions({ inheritAttrs: false });
 const modelValue = defineModel({ type: String });
-const label = computed(() => {
-  return modelValue.value || props.buttonProps?.label || "\u9009\u62E9\u989C\u8272";
+const emits = defineEmits(["update:modelValue", "update:open", "change", "clear", "copy", "format-change"]);
+const slots = defineSlots();
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
+const {
+  id,
+  name,
+  size: effectiveSize,
+  color: effectiveColor,
+  highlight,
+  disabled: effectiveDisabled,
+  ariaAttrs,
+  emitFormBlur,
+  emitFormChange,
+  emitFormFocus,
+  emitFormInput
+} = useFieldControl(props);
+const FORMAT_KEY = {
+  hex: "HEX",
+  rgb: "RGB",
+  hsl: "HSL",
+  cmyk: "CMYK",
+  lab: "CIELab"
+};
+function convertColor(value, fmt) {
+  if (!value) return value;
+  try {
+    const key = FORMAT_KEY[fmt];
+    if (!key) return value;
+    return new ColorTranslator(value)[key];
+  } catch {
+    return value;
+  }
+}
+const openState = ref(false);
+const currentFormat = ref(props.formats?.[0] ?? props.format ?? "hex");
+const inputDraft = ref(modelValue.value ?? "");
+watch(modelValue, (val) => {
+  inputDraft.value = val ?? "";
+});
+watch(() => props.format, (val) => {
+  if (val) currentFormat.value = val;
 });
-const chipStyle = computed(() => ({
-  backgroundColor: modelValue.value || ""
+const showFormatTabs = computed(() => (props.formats?.length ?? 0) >= 2);
+const formatItems = computed(
+  () => (props.formats ?? []).map((f) => ({ label: f.toUpperCase(), value: f }))
+);
+const swatchRows = computed(() => {
+  const sw = props.swatches;
+  if (!sw || sw.length === 0) return [];
+  return Array.isArray(sw[0]) ? sw : [sw];
+});
+const hasSwatches = computed(() => swatchRows.value.length > 0);
+const { baseUi, extraUi } = useExtendedTv(
+  popoverTheme,
+  theme,
+  () => appConfig.movk?.colorChooser,
+  () => ({
+    ui: props.ui,
+    variants: {
+      size: effectiveSize.value,
+      trigger: props.trigger,
+      disabled: effectiveDisabled.value
+    }
+  })
+);
+const triggerButtonAttrs = computed(() => ({
+  color: effectiveColor.value,
+  variant: props.variant,
+  size: effectiveSize.value,
+  disabled: effectiveDisabled.value,
+  square: props.trigger === "chip"
+}));
+const triggerLabel = computed(() => props.label ?? modelValue.value ?? props.placeholder);
+const colorPickerAttrs = computed(() => ({
+  ...props.colorPickerProps ?? {},
+  format: currentFormat.value,
+  disabled: effectiveDisabled.value
 }));
+const { copy, isSupported: clipboardSupported } = useClipboard();
+function selectFormat(fmt) {
+  if (fmt === currentFormat.value) return;
+  currentFormat.value = fmt;
+  const converted = convertColor(modelValue.value, fmt);
+  if (converted !== modelValue.value) {
+    commitValue(converted);
+  }
+  emits("format-change", fmt);
+}
+function selectSwatch(c) {
+  commitValue(c);
+  if (props.closeOnSwatch) openState.value = false;
+}
+function handleCopy() {
+  const v = modelValue.value;
+  if (!v) return;
+  if (clipboardSupported.value) copy(v);
+  emits("copy", v);
+}
+function handleClear() {
+  commitValue(void 0);
+  emits("clear");
+}
+function handlePickerUpdate(v) {
+  commitValue(v);
+}
+function handleInputBlur() {
+  emitFormBlur();
+  const v = inputDraft.value.trim();
+  if (!v) {
+    commitValue(void 0);
+    return;
+  }
+  const normalized = convertColor(v, currentFormat.value);
+  const hexInvalid = currentFormat.value === "hex" && !/^#?(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(v);
+  if (!normalized || normalized === v && hexInvalid) {
+    inputDraft.value = modelValue.value ?? "";
+    return;
+  }
+  commitValue(normalized);
+}
+function handleOpenUpdate(val) {
+  if (val && effectiveDisabled.value) return;
+  openState.value = val;
+  emits("update:open", val);
+}
+function toggleOpen() {
+  if (effectiveDisabled.value) return;
+  handleOpenUpdate(!openState.value);
+}
+function handleInputFocus() {
+  emitFormFocus();
+  if (effectiveDisabled.value) return;
+  if (!openState.value) handleOpenUpdate(true);
+}
+function commitValue(value) {
+  modelValue.value = value;
+  emits("change", value);
+  emitFormInput();
+  emitFormChange();
+}
 </script>
 
 <template>
-  <UPopover v-bind="props.popoverProps" @close:prevent="emit('close:prevent')" @update:open="emit('update:open', $event)">
-    <template #default="defaultSlotProps">
-      <slot v-bind="defaultSlotProps">
+  <UPopover v-bind="attrs" :open="openState" :ui="baseUi" @update:open="handleOpenUpdate">
+    <template v-if="props.trigger !== 'input'" #default="{ open }">
+      <slot :open="open" :value="modelValue">
+        <UButton
+          v-if="props.trigger === 'chip'"
+          :id="id"
+          :name="name"
+          v-bind="{ ...triggerButtonAttrs, ...ariaAttrs }"
+          :aria-label="modelValue || props.placeholder"
+          @blur="emitFormBlur"
+          @focus="emitFormFocus"
+        >
+          <span :class="extraUi.triggerChip" :style="{ backgroundColor: modelValue || 'transparent' }">
+            <UIcon v-if="!modelValue" :name="props.icon" :class="extraUi.triggerIcon" />
+          </span>
+        </UButton>
+
         <UButton
-          color="neutral"
-          variant="subtle"
-          class="w-full"
-          v-bind="props.buttonProps"
-          :label="label"
+          v-else
+          :id="id"
+          :name="name"
+          v-bind="{ ...triggerButtonAttrs, ...ariaAttrs }"
+          @blur="emitFormBlur"
+          @focus="emitFormFocus"
         >
-          <template #leading="leading">
-            <slot name="leading" v-bind="leading">
-              <span v-if="modelValue" :style="chipStyle" class="size-3 rounded-full" />
-              <UIcon v-else name="i-lucide-palette" class="size-3" />
+          <template #leading>
+            <slot name="leading" :value="modelValue">
+              <span v-if="modelValue" :class="extraUi.triggerChip" :style="{ backgroundColor: modelValue }" />
+              <UIcon v-else :name="props.icon" />
             </slot>
           </template>
-          <template v-if="$slots.trailing" #trailing="trailing">
-            <slot name="trailing" v-bind="trailing" />
+          <span :class="extraUi.triggerLabel">{{ triggerLabel }}</span>
+          <template v-if="!!slots.trailing" #trailing>
+            <slot name="trailing" :value="modelValue" />
           </template>
         </UButton>
       </slot>
     </template>
 
-    <template v-if="$slots.anchor" #anchor="anchor">
-      <slot name="anchor" v-bind="anchor" />
+    <template v-if="props.trigger === 'input'" #anchor>
+      <UInput
+        :id="id"
+        v-model="inputDraft"
+        :name="name"
+        :size="effectiveSize"
+        :color="effectiveColor"
+        :highlight="highlight"
+        :placeholder="props.placeholder"
+        :disabled="effectiveDisabled"
+        v-bind="ariaAttrs"
+        @blur="handleInputBlur"
+        @focus="handleInputFocus"
+        @keydown.enter="$event.target.blur()"
+      >
+        <template #leading>
+          <slot name="leading" :value="modelValue">
+            <button
+              type="button"
+              :disabled="effectiveDisabled"
+              :aria-label="modelValue || props.placeholder"
+              class="inline-flex items-center justify-center cursor-pointer focus:outline-none disabled:cursor-not-allowed"
+              @mousedown.prevent
+              @click="toggleOpen"
+            >
+              <span
+                v-if="modelValue"
+                :class="extraUi.triggerChip"
+                :style="{ backgroundColor: modelValue }"
+              />
+              <UIcon
+                v-else
+                :name="props.icon"
+                :class="extraUi.triggerIcon"
+              />
+            </button>
+          </slot>
+        </template>
+        <template v-if="!!slots.trailing" #trailing>
+          <slot name="trailing" :value="modelValue" />
+        </template>
+      </UInput>
     </template>
 
     <template #content>
-      <UColorPicker v-model="modelValue" class="p-2" v-bind="$attrs" />
+      <div :class="extraUi.body">
+        <div v-if="showFormatTabs" :class="extraUi.header">
+          <PillGroup
+            :model-value="currentFormat"
+            :items="formatItems"
+            value-key="value"
+            size="xs"
+            color="neutral"
+            @update:model-value="(v) => selectFormat(v)"
+          />
+        </div>
+
+        <UColorPicker
+          :model-value="modelValue ?? '#000000'"
+          v-bind="colorPickerAttrs"
+          @update:model-value="handlePickerUpdate"
+        />
+
+        <div v-if="hasSwatches || !!slots.swatches" :class="extraUi.section">
+          <slot name="swatches" :swatches="swatchRows" :select="selectSwatch">
+            <div v-for="(row, idx) in swatchRows" :key="idx" :class="extraUi.swatches">
+              <button
+                v-for="c in row"
+                :key="c"
+                type="button"
+                :aria-selected="modelValue === c"
+                :aria-label="c"
+                :class="extraUi.swatch"
+                :style="{ backgroundColor: c }"
+                @click="selectSwatch(c)"
+              />
+            </div>
+          </slot>
+        </div>
+
+        <div v-if="props.copyable || props.clearable || !!slots.actions" :class="extraUi.actions">
+          <slot name="actions" :value="modelValue" :copy="handleCopy" :clear="handleClear">
+            <span :class="extraUi.actionsValue">
+              {{ modelValue || "\u2014" }}
+            </span>
+            <div :class="extraUi.actionsButtons">
+              <UButton
+                v-if="props.copyable"
+                icon="i-lucide-copy"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                :disabled="!modelValue"
+                @click="handleCopy"
+              />
+              <UButton
+                v-if="props.clearable"
+                icon="i-lucide-x"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                :disabled="!modelValue"
+                @click="handleClear"
+              />
+            </div>
+          </slot>
+        </div>
+      </div>
     </template>
   </UPopover>
 </template>

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

@@ -1,30 +1,29 @@
-import type { ButtonProps, ColorPickerProps, PopoverProps } from '@nuxt/ui';
-export interface ColorChooserProps<P extends 'click' | 'hover' = 'click'> extends /** @vue-ignore */ ColorPickerProps {
-    /** 弹出层组件属性 */
-    popoverProps?: PopoverProps<P>;
-    /** 按钮组件属性 */
-    buttonProps?: ButtonProps;
-}
-declare const __VLS_export: <P extends "click" | "hover" = "click">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(ColorChooserProps<P> & {
+import type { ComponentConfig } from '@nuxt/ui';
+import type { AppConfig } from 'nuxt/schema';
+import theme from '#build/movk-ui/color-chooser';
+import popoverTheme from '#build/ui/popover';
+import type { ColorChooserProps, ColorChooserSlots, ColorFormat } from '../types/components/color-chooser';
+declare const __VLS_export: <M extends "click" | "hover">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(ColorChooserProps<M> & {
+        size?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "colorChooser">["variants"]["size"];
+        trigger?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "colorChooser">["variants"]["trigger"];
+        ui?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "colorChooser">["slots"];
+    } & {
         modelValue?: string;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onChange?: ((value: string | undefined) => any) | undefined;
+        onCopy?: ((value: string) => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+        "onFormat-change"?: ((format: ColorFormat) => any) | undefined;
     }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P_1;
-    } ? P_1 : {});
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {
-        default?: (props: any) => any;
-    } & {
-        leading?: (props: any) => any;
-    } & {
-        trailing?: (props: any) => any;
-    } & {
-        anchor?: (props: any) => any;
-    };
-    emit: any & ((event: "update:modelValue", value: string | undefined) => void);
+    slots: ColorChooserSlots;
+    emit: (((evt: "clear") => void) & ((evt: "change", value: string | undefined) => void) & ((evt: "copy", value: string) => void) & ((evt: "update:open", open: boolean) => void) & ((evt: "update:modelValue", value: string | undefined) => void) & ((evt: "format-change", format: ColorFormat) => void)) & ((event: "update:modelValue", value: string | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -0,0 +1,57 @@
+import type { ColumnPinningState, ColumnSizingState, ExpandedState, PaginationState, RowPinningState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/vue-table';
+import type { TableData } from '@nuxt/ui';
+import type { DataTableExposed, DataTableProps, DataTableSlots } from '../types/data-table/component';
+import type { DataTablePaginationUi } from '../types/data-table/pagination';
+declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(DataTableProps<T> & {
+        ui?: {
+            [x: string]: import("tailwind-variants").ClassValue;
+        };
+        paginationUi?: DataTablePaginationUi & {
+            ui?: {
+                [x: string]: import("tailwind-variants").ClassValue;
+            };
+        };
+    } & {
+        pagination?: PaginationState;
+        columnVisibility?: VisibilityState;
+        columnPinning?: ColumnPinningState;
+        columnSizing?: ColumnSizingState;
+        rowSelection?: RowSelectionState;
+        rowPinning?: RowPinningState;
+        sorting?: SortingState;
+        expanded?: ExpandedState;
+        columnVisibilityKeys?: string[];
+        columnVisibilityExcludeKeys?: string[];
+        rowSelectionKeys?: string[];
+        expandedKeys?: string[];
+    }) & {
+        "onUpdate:pagination"?: ((value: PaginationState | undefined) => any) | undefined;
+        "onUpdate:columnVisibility"?: ((value: VisibilityState | undefined) => any) | undefined;
+        "onUpdate:columnPinning"?: ((value: ColumnPinningState | undefined) => any) | undefined;
+        "onUpdate:columnSizing"?: ((value: ColumnSizingState | undefined) => any) | undefined;
+        "onUpdate:rowSelection"?: ((value: RowSelectionState | undefined) => any) | undefined;
+        "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
+        "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
+        "onUpdate:expanded"?: ((value: ExpandedState | undefined) => any) | undefined;
+        "onUpdate:columnVisibilityKeys"?: ((value: string[] | undefined) => any) | undefined;
+        "onUpdate:columnVisibilityExcludeKeys"?: ((value: string[] | undefined) => any) | undefined;
+        "onUpdate:rowSelectionKeys"?: ((value: string[] | undefined) => any) | undefined;
+        "onUpdate:expandedKeys"?: ((value: string[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<DataTableExposed<T>>) => void;
+    attrs: any;
+    slots: DataTableSlots<T>;
+    emit: ((event: "update:pagination", value: PaginationState | undefined) => void) & ((event: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((event: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((event: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((event: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((event: "update:rowPinning", value: RowPinningState) => void) & ((event: "update:sorting", value: SortingState) => void) & ((event: "update:expanded", value: ExpandedState | undefined) => void) & ((event: "update:columnVisibilityKeys", value: string[] | undefined) => void) & ((event: "update:columnVisibilityExcludeKeys", value: string[] | undefined) => void) & ((event: "update:rowSelectionKeys", value: string[] | undefined) => void) & ((event: "update:expandedKeys", value: string[] | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};