pxd 0.0.64 → 0.1.3

package/dist/components/modal/index.vue

@@ -1,88 +1,148 @@
 <script setup>
+import CrossIcon from "@gdsicon/vue/cross";
 import { computed, shallowRef, watch } from "vue";
-import { useFocusTrap } from "../../composables/use-focus-trap";
-import { useModelValue } from "../../composables/use-model-value";
-import { getCssUnitValue, isTruthyProp } from "../../utils/format";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useOverlayDialog } from "../../composables/_internal/use-overlay-dialog.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getCssUnitValue } from "../../utils/format.js";
+import PLoadingMask from "../_internal/loading-mask.vue";
+import PButton from "../button/index.vue";
 import POverlay from "../overlay/index.vue";
 defineOptions({
-  name: "PModal",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PModal",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  zIndex: { type: Number, required: false },
-  title: { type: [String, Number, Array, null], required: false },
-  subtitle: { type: [String, Number, Array, null], required: false },
-  width: { type: [String, Number], required: false },
-  loading: { type: Boolean, required: false },
-  modelValue: { type: Boolean, required: false, default: false },
-  appendToBody: { type: Boolean, required: false, default: true },
-  wrapperClass: { type: [String, Array, Object], required: false },
-  contentClass: { type: [String, Array, Object], required: false },
-  autoFocusElement: { type: [String, Boolean], required: false, default: false },
-  defaultHeaderStyle: { type: Boolean, required: false, default: false },
-  defaultFooterStyle: { type: Boolean, required: false, default: true },
-  closeOnPressEscape: { type: Boolean, required: false, default: false },
-  closeOnClickOverlay: { type: Boolean, required: false, default: false }
+	zIndex: {
+		type: Number,
+		required: false
+	},
+	title: {
+		type: null,
+		required: false
+	},
+	subtitle: {
+		type: null,
+		required: false
+	},
+	width: {
+		type: [String, Number],
+		required: false
+	},
+	loading: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	loadingText: {
+		type: String,
+		required: false
+	},
+	wrapperClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	contentClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	autoFocusElement: {
+		type: [String, Boolean],
+		required: false,
+		default: false
+	},
+	defaultHeaderStyle: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	defaultFooterStyle: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeOnClickOverlay: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeable: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
 });
-const emits = defineEmits(["show", "hide", "change", "outside-click", "visible-change", "update:modelValue"]);
+const emits = defineEmits([
+	"show",
+	"hide",
+	"change",
+	"outside-click",
+	"visible-change",
+	"update:modelValue"
+]);
 const modalRef = shallowRef();
-const isVisible = useModelValue(props, emits);
 const computedStyle = computed(() => {
-  return {
-    "--modal-index": props.zIndex,
-    "--modal-width": getCssUnitValue(props.width)
-  };
+	return {
+		"--modal-index": props.zIndex,
+		"--modal-width": getCssUnitValue(props.width)
+	};
 });
 const defaultStyles = computed(() => ({
-  headerClass: props.defaultHeaderStyle ? "pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100" : "",
-  footerClass: props.defaultFooterStyle ? "border-t pt-4 bg-background-200 dark:bg-background-100" : ""
-}));
-const focusTrapOptions = computed(() => ({
-  autoFocusElement: props.autoFocusElement,
-  escapeDeactivates: props.closeOnPressEscape,
-  clickOutsideDeactivates: props.closeOnClickOverlay
+	headerClass: props.defaultHeaderStyle ? "pbe-4 sm:pbe-6 border-b bg-background-200 dark:bg-background-100" : "",
+	footerClass: props.defaultFooterStyle ? "border-t pbs-4 bg-background-200 dark:bg-background-100" : ""
 }));
-useFocusTrap(modalRef, focusTrapOptions);
-function closeOverlayIfNeed() {
-  if (isTruthyProp(props.loading)) {
-    return;
-  }
-  isVisible.value = false;
-}
-function onOverlayClick(ev) {
-  emits("outside-click", ev);
-  if (!isTruthyProp(props.closeOnClickOverlay)) {
-    return;
-  }
-  closeOverlayIfNeed();
-}
-watch(
-  () => isVisible.value,
-  (visible) => {
-    emits("visible-change", visible);
-    if (visible) {
-      emits("show");
-      return;
-    }
-    emits("hide");
-  }
-);
+const isVisible = useModelValue(props, emits);
+const configProvider = useConfigProvider();
+const { closeOverlayIfNeed, onOverlayClick } = useOverlayDialog({
+	props,
+	emits,
+	elementRef: modalRef,
+	onClose: () => {
+		isVisible.value = false;
+	}
+});
+watch(() => isVisible.value, (visible) => {
+	emits("visible-change", visible);
+	if (visible) {
+		emits("show");
+		return;
+	}
+	emits("hide");
+});
 </script>
 
 <template>
   <POverlay
     :model-value="isVisible"
-    :append-to-body="appendToBody"
+    :z-index="zIndex"
     :close-on-press-escape="closeOnPressEscape"
     @escape="closeOverlayIfNeed"
     @click="onOverlayClick"
   >
     <Transition name="pxd-transition--modal" mode="out-in" appear>
       <div
+        data-modal
         v-if="isVisible"
         ref="modalRef"
         role="dialog"
@@ -92,11 +152,13 @@ watch(
         class="pxd-modal group/modal left-0 translate-z-0 sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:[--o:0] sm:[--t:scale(0.98)] sm:w-(--modal-width) max-sm:bottom-0 pointer-events-auto fixed z-(--modal-index) flex w-full max-w-full flex-col overflow-hidden rounded-t-lg bg-background-100 shadow-border-modal outline-none motion-safe:transition-appearance dark:bg-background-200"
         :class="wrapperClass"
         :style="computedStyle"
+        :data-enter-motion="configProvider.enterMotion"
+        :data-leave-motion="configProvider.leaveMotion"
         v-bind="$attrs"
       >
         <header
-          class="pxd-modal--header px-6 pt-4 sm:pt-6 empty:py-3 relative shrink-0"
-          :class="defaultStyles.headerClass"
+          class="pxd-modal--header px-6 pbs-4 sm:pbs-6 relative shrink-0 empty:hidden"
+          :class="[defaultStyles.headerClass, { 'pe-15': closeable }]"
         >
           <slot name="header">
             <h3
@@ -108,12 +170,25 @@ watch(
               </slot>
             </h3>
 
-            <div v-if="$slots.subtitle || subtitle" class="mt-4 text-sm text-muted-foreground">
+            <div v-if="$slots.subtitle || subtitle" class="mbs-4 text-sm text-muted-foreground">
               <slot name="subtitle">
                 {{ subtitle }}
               </slot>
             </div>
           </slot>
+
+          <PButton
+            v-if="closeable"
+            variant="ghost"
+            size="sm"
+            icon
+            class="top-4 right-6 sm:top-6 size-7 absolute"
+            :aria-label="configProvider.locale.interaction.close"
+            :title="configProvider.locale.interaction.close"
+            @click="closeOverlayIfNeed"
+          >
+            <CrossIcon class="size-3" aria-hidden="true" />
+          </PButton>
         </header>
 
         <div
@@ -125,11 +200,13 @@ watch(
 
         <footer
           v-if="$slots.footer"
-          class="pxd-modal--footer px-4 pb-4 gap-2 relative flex shrink-0 items-center justify-between"
+          class="pxd-modal--footer px-4 pbe-4 gap-2 relative flex shrink-0 items-center justify-between"
           :class="defaultStyles.footerClass"
         >
           <slot name="footer" />
         </footer>
+
+        <PLoadingMask v-if="loading" :text="loadingText" />
       </div>
     </Transition>
   </POverlay>

package/dist/components/modal/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentClass, ComponentLabel } from '../../types/shared'
+import type { ComponentClass, ComponentLabel } from '../../types/shared/props'
 
 export interface ModalProps {
   zIndex?: number
@@ -7,17 +7,15 @@ export interface ModalProps {
   width?: string | number
   loading?: boolean
   modelValue?: boolean
-  appendToBody?: boolean
+  loadingText?: string
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
-  /**
-   * Whether to automatically focus on the first or specified element.
-   */
   autoFocusElement?: string | boolean
   defaultHeaderStyle?: boolean
   defaultFooterStyle?: boolean
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
+  closeable?: boolean
 }
 
 export interface ModalEmits {

package/dist/components/more-button/index.vue

@@ -1,35 +1,47 @@
 <script setup>
 import ChevronDownIcon from "@gdsicon/vue/chevron-down";
-import { useModelValue } from "../../composables/use-model-value";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
 import PButton from "../button/index.vue";
 defineOptions({
-  name: "PMoreButton",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PMoreButton",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  moreText: { type: String, required: false, default: "Show More" },
-  lessText: { type: String, required: false, default: "Show Less" },
-  modelValue: { type: Boolean, required: false, default: false }
+	moreText: {
+		type: String,
+		required: false,
+		default: "Show More"
+	},
+	lessText: {
+		type: String,
+		required: false,
+		default: "Show Less"
+	},
+	modelValue: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const isExpanded = useModelValue(props, emits);
 function onToggleExpand() {
-  isExpanded.value = !isExpanded.value;
+	isExpanded.value = !isExpanded.value;
 }
 </script>
 
 <template>
-  <div class="pxd-more-button px-4 mt-4 flex w-full items-center">
+  <div data-more-button class="pxd-more-button px-4 mbs-4 flex w-full items-center">
     <PButton class="relative z-1" shape="rounded" v-bind="$attrs" @click="onToggleExpand">
       {{ isExpanded ? lessText : moreText }}
 
       <template #suffix>
         <ChevronDownIcon
-          class="-ml-0.5 motion-safe:transition-transform motion-safe:duration-200"
+          class="-ms-0.5 motion-safe:transition-transform"
           :class="{ 'rotate-180': isExpanded }"
         />
       </template>

package/dist/components/noise-background/index.d.vue.ts

@@ -1,16 +0,0 @@
-import type { NoiseBackgroundProps } from './types';
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<NoiseBackgroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NoiseBackgroundProps> & Readonly<{}>, {
-    as: import("../../types/shared").ComponentAs;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/noise-background/index.vue

@@ -1,19 +1,80 @@
 <script setup>
+import { computed } from "vue";
+import { getUniqueId } from "../../utils/helper.js";
 defineOptions({
-  name: "PNoiseBackground",
-  inheritAttrs: false
+	name: "PNoiseBackground",
+	inheritAttrs: false
 });
-defineProps({
-  as: { type: [String, Object], required: false, default: "div" }
+const props = defineProps({
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "div"
+	},
+	blendMode: {
+		type: undefined,
+		required: false,
+		default: "normal"
+	},
+	color: {
+		type: String,
+		required: false,
+		default: "currentColor"
+	},
+	opacity: {
+		type: Number,
+		required: false,
+		default: .05
+	}
 });
+const filterId = getUniqueId();
+const noiseStyle = computed(() => ({
+	mixBlendMode: props.blendMode,
+	opacity: props.opacity
+}));
 </script>
 
 <template>
-  <Component :is="as" class="pxd-noise-background relative" v-bind="$attrs">
+  <Component
+    data-noise-background
+    :is="as"
+    class="pxd-noise-background relative isolate"
+    v-bind="$attrs"
+  >
     <slot />
+
+    <svg
+      aria-hidden="true"
+      class="pxd-noise-background--noise inset-0 pointer-events-none absolute size-full rounded-[inherit]"
+      preserveAspectRatio="none"
+      :style="noiseStyle"
+    >
+      <filter
+        :id="filterId"
+        x="0%"
+        y="0%"
+        width="100%"
+        height="100%"
+        color-interpolation-filters="sRGB"
+      >
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.8"
+          numOctaves="4"
+          stitchTiles="stitch"
+          result="turbulence"
+        />
+        <feColorMatrix in="turbulence" type="luminanceToAlpha" result="alpha" />
+        <feColorMatrix
+          in="alpha"
+          type="matrix"
+          values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 18 -8"
+          result="contrast"
+        />
+        <feFlood :flood-color="color" result="flood" />
+        <feComposite in="flood" in2="contrast" operator="in" />
+      </filter>
+      <rect width="100%" height="100%" fill="transparent" :filter="`url(#${filterId})`" />
+    </svg>
   </Component>
 </template>
-
-<style>
-.pxd-noise-background:after{background-image:url("data:image/png;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////2wBDAf//////////////////////////////////////////////////////////////////////////////////////wAARCACAAIADASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEC/8QAJxAAAQIFBAIDAQEBAAAAAAAAAREhADFBUWFxgZHwobHB0eHxEkL/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AtWIVxypWrvitIpeoxpWfwNYXA3mFPbQOZIVZuXT+VeAMfKydfUyQiVgDjfXSuwiLZVXP1rTaxlGlFLBwo/cikBdyxo/3VWdjpCp+2dBb3KdTFkU1+MWoKPEfvxmqE7zgCjCWZh+GCNbG0ssKPkLD2mcz5sIvrpt3xAQ+uBLzb6aB2SSfFbWWJNXzVjcNptYGLr8sjztlMUYIovswGJ3mHYJFCkP6P549NF7qvhesIkmNd9aS0FbwBUU8V/MosjCU0FZo5/nSAYMZtWZaJ6ClXA9PrWAD35MmlyquphMKtNF1bl7RcMyVthBiUKXI80lr6gFTI9UEvw1Fg4coPmWRm14BA1UNM9TECTRP7wozfQwEWSU+KMSt+Jzg7AcioQ9XzQVltWUtTLHKQ1FKler/AGkBa/PG3FofGOHJ77iqJaVxpW8JSE9vnVEwFrAXa3zTF/cH88dP8SJOcxcXlrzAMnrYyyJPQcgqZVuB9Lf8hRv1VTFcha2hdPp0G62xW0oGGtAiXvzhkgLIJUD80o1qxKCiekqqVpS7xZu/NHRhyrJzCg2ndPCIp+TAQWrlb62dC4Ji13bqhcM03nC5LXUMn6yzkkRXSxNqSTqu0AcVQn2vmaLRBFo0xNv4NTIQQMQHwlZ9fEBo+nzq8zzAF3vKgGg11mIMZdCpbHRBn/Z678WSH6ge8ztQpbQAobnshe9II96K1HoicKDiBntRVrbHUm6ZvPh38GAhKB1WWZCUm+YuSeWTxpSdYN43XTcdEPjzL3o3Cgr1KocInXhqSM9CTwuaQabWJFLdO4htxpIogMtJUSAvui+dMRDSf8ex2RLQeTVVtDLT6nAWnd81ykBd/X1WR3jK5oPaZa7yi7qq+PrUPaCFcH6k/MsQB17qj38VnDmSsr7/AGHiBXE/HjVa0pFwh13219UgB13Jk70YU8JDRxa5G3FMVgOuSJ6b6QlZ80I0dwdYAk8NI4y8JXKVLhzqpPaw/XatlfflobhRw5+NnpKAEo5xj3L9SFjdt6KKwZdBhAMzdZpvEWkgBwB5WWEWsBVAJEi1ClHntA2ktmkZ1AunzCTfTHTA4FYMqJPAw3hfUAnygebqbOx9qYJ+ec5t+HpS+9inKQH4GBK1kbz1pAHS03bdXusV/nTHuukZZ7Pu3eAyCCCwHHV1lQwFml70WoTbeIg75HNgGaKvflG8KtBAbCn6JpppSAHepqMdfZ4SrgKWnPpxaCvKnkkBPE/yL2mvdbvAShUULprmSdeCI9pSZthtCdKf9PeqnfSIbPKWPsWVC1YCtVKJeSbI78PDjbeduvOCNW8hbM5/dTE1VnM9nQVtNIC/fS4+ZQrIrKj1co2MwGpUk5RLfXhIIi+JoKdErQAbfnz3WCHrU0FVpXaHxsrKGg4TZStBjejXaAasmUEyN9JQlK96DVJcIqvNPr8fcsRfLTp8DtIB7dPvyFpaJKeVsFc39u0Ga/kD+f14iI+1ZNVKCuywF9Nqq9X+xJIgNFDefk4ijgUQbnD9eFBIYTstpWgFddKDnP5Es6pQKZpyN6JeLPbVjdD7ptCTTfONnLzCLAD5szjca3gxFM8V8RfzVz47KJKlAKydk21eAcIr8aJUDSBZzKciyXQ7qZRDQ3Pw2SPNs6Mr6X/svcBJm3272/kpQsV+iot/WERAQric0u6r84zFMsNaxVaD7tAQBCBZFT3WbA8miXTE6fea5BhwCa8T/OYLJZpt9bwCvfM18bmSwX2KJNd03zBcern5UxAUwDdFk17VoIA5WWWI86fEWoRi7TKLXDre0MNJfQdG4gflf5V+SplAQKgqAm/CyrOTXi0VHa3CqaGbTvBj8LR5htNkWJZAqBDKbJWfVaApszzKYeyS6kRNp08sacl4vPL9ojyhQnVHrJn1+IA7AGj1+suN4JmmXT91tWGzlbT2/cwZJLVGn9+YA0iMOZyPv1tDCvdtEsrpD/WyyaplJk84g2F6/sDakAsu9u2+ICjlZUzvRoiNVEueEDs14rB38/3qwBTdfz3amtYPt62n/UzBKIdZW91CDxDkqofV/OIA11eTX74FoTF1/apdemI0gL3Z1F9kYxX2S59I2iaCAOVo9p7vX8g6hTTcn8bhYX6NZTFlfiG2XvxrLFIBWxShnzZ/iLOujOh74ESokvKJspUtPSJuWptmszJXgLS42XvXiy7fv7GU8E6kbGqrwsKFfktPXpk5gLvOR19ve86xRz9Pi/5ECpmdUn6xCkneWeglavSAmqGdHk9lUzuu0Wrovuvh+ViYIUgKwF5S/dYspDZrvLHu8BHBRQdf7bqmKDu86JcUHKJJJQlNy3i3nGkRih5COmjsuviA1d/y3WiKb+CzLj1BGu3hAnq03gW2pmdXN1FisAC4XAmnfM4UQLJuGdE/cQqfEn/hfeIxAF5lrLzXmABUkgBqLIZLvVItfn1XRfYiBA8wAxqzd+iALJkVedxXbiAfWQ+Hk5lzC2fCgy/CPLxRYTTi1WO3MVyEkt9lbe+NAUyKAptpp7ECiBZFq9pOBGxtdpTkUh974S7nCWgFSnqVd74lWDsjSE1bRU+Ybay18TnWUoSdN2XdDAf/2Q==");background-position:50%;background-size:96px 96px;border-radius:inherit;content:"";inset:0;opacity:.035;pointer-events:none;position:absolute}
-</style>

package/dist/components/noise-background/types.d.ts

@@ -1,5 +1,9 @@
-import type { ComponentAs } from '../../types/shared'
+import type { ComponentAs } from '../../types/shared/props'
+import type { CSSProperties } from 'vue'
 
 export interface NoiseBackgroundProps {
   as?: ComponentAs
+  blendMode?: CSSProperties['mixBlendMode']
+  color?: string
+  opacity?: number
 }

package/dist/components/note/index.d.vue.ts

@@ -8,7 +8,7 @@ type __VLS_Slots = {} & {
     action?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NoteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NoteProps> & Readonly<{}>, {
-    label: boolean | import("../../types/shared").ComponentLabel;
+    label: string | number | boolean | null;
     variant: import("./types").NoteVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;