pxd 0.0.6 → 0.0.7

package/README.md

@@ -4,15 +4,25 @@ A universal UI component library for Vue2&3
 ## Contribution
 
 ### Dev
+
 ```shell
 pnpm install
 
-pnpm dev:lib
-
 pnpm dev
+
+pnpm dev:docs
 ```
 
 ### Build
+
+#### Core
+
 ```shell
 pnpm build
 ```
+
+#### Docs
+
+```shell
+pnpm build:docs
+```

package/dist/components/button/index.vue

@@ -1,75 +1,55 @@
-<script lang="ts" setup>
-import { useConfigProvider } from '../../composables/useConfigProvider'
-import { computed } from 'vue'
-
-interface Props {
-  variant?: keyof typeof VARIANTS
-  size?: keyof typeof SIZES
-  disabled?: boolean
-  block?: boolean
-  href?: string
-  shape?: 'square' | 'rounded'
-}
-
+<script setup>
+import { computed } from "vue";
+import { useConfigProvider } from "../../composables/useConfigProviderContext";
 defineOptions({
-  name: 'PButton',
-})
-
-const props = withDefaults(
-  defineProps<Props>(),
-  {
-    variant: 'outline',
-  },
-)
-
-const config = useConfigProvider()
-
+  name: "PButton"
+});
+const props = defineProps({
+  variant: { type: null, required: false, default: "outline" },
+  size: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  href: { type: String, required: false },
+  shape: { type: String, required: false }
+});
+const config = useConfigProvider();
 const SIZES = {
-  xs: 'px-1 rounded-md h-6 text-sm ',
-  sm: 'px-1.5 rounded-md h-7 text-sm ',
-  md: 'px-2.5 rounded-md h-8 text-sm ',
-  lg: 'px-3.5 rounded-lg h-9 text-base ',
-}
-
+  xs: "px-1 rounded-md h-6 text-sm ",
+  sm: "px-1.5 rounded-md h-7 text-sm ",
+  md: "px-2.5 rounded-md h-8 text-sm ",
+  lg: "px-3.5 rounded-lg h-9 text-base "
+};
 const VARIANTS = {
-  outline: 'bg-background text-foreground hover:bg-background-hover active:bg-background-active border border-input ',
-  ghost: 'bg-transparent text-foreground hover:bg-gray-alpha-200 active:bg-gray-alpha-300 ',
-  primary: 'bg-foreground text-background hover:bg-foreground/80 active:bg-foreground ',
-  error: 'bg-red-800 text-white  hover:bg-red-700 active:bg-red-800 ',
-  warning: 'bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-800 ',
-  success: 'bg-green-800 text-white hover:bg-green-700 active:bg-green-800 ',
-}
-
-const DISABLED_CLASS_NAMES = 'disabled:bg-gray-100 !text-gray-700 border-none shadow-[0_0_0_1px_hsl(var(--gray-200-value))] !cursor-not-allowed '
-
+  outline: "bg-background text-foreground hover:bg-background-hover active:bg-background-active border-input ",
+  ghost: "bg-transparent text-foreground hover:bg-gray-alpha-200 active:bg-gray-alpha-300 border-transparent ",
+  primary: "bg-foreground text-background hover:bg-foreground/80 active:bg-foreground border-transparent ",
+  error: "bg-red-800 text-white  hover:bg-red-700 active:bg-red-800 border-transparent ",
+  warning: "bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-800 border-transparent ",
+  success: "bg-green-800 text-white hover:bg-green-700 active:bg-green-800 border-transparent "
+};
+const DISABLED_CLASS_NAMES = "disabled:bg-gray-100 !text-gray-700 border-none shadow-[0_0_0_1px_hsl(var(--gray-200-value))] !cursor-not-allowed ";
 const computedClassNames = computed(() => {
-  let classNames = 'cursor-pointer transition-colors items-center justify-center '
-
-  classNames += VARIANTS[props.variant]
-
-  classNames += SIZES[props.size || config.size]
-
-  classNames += props.block ? 'flex ' : 'inline-flex '
-
+  let classNames = "";
+  classNames += VARIANTS[props.variant] || VARIANTS.outline;
+  classNames += SIZES[props.size || config.size];
+  classNames += props.block ? "flex " : "inline-flex ";
   if (props.disabled) {
-    classNames += DISABLED_CLASS_NAMES
+    classNames += DISABLED_CLASS_NAMES;
   }
-
-  if (props.shape === 'square') {
-    classNames += '!rounded-none '
-  }
-  else if (props.shape === 'rounded') {
-    classNames += '!rounded-full '
+  if (props.shape === "square") {
+    classNames += "!rounded-none ";
+  } else if (props.shape === "rounded") {
+    classNames += "!rounded-full ";
   }
-
-  return classNames
-})
+  return classNames;
+});
 </script>
 
 <template>
   <Component
     :is="props.href ? 'router-link' : 'button'"
-    class="pxd-button" :class="computedClassNames"
+    class="pxd-button cursor-pointer transition-colors items-center justify-center border"
+    :class="computedClassNames"
     :disabled="disabled"
     :to="href"
   >

package/dist/components/config-provider/index.vue

@@ -1,26 +1,17 @@
-<script lang="ts" setup>
-import type { VNode } from 'vue'
-import { provideConfigProvider, type ComponentSize } from '../../composables/useConfigProvider'
-
-interface Props {
-  as?: keyof HTMLElementTagNameMap | VNode
-  size?: ComponentSize
-}
-
-const props = withDefaults(
-  defineProps<Props>(),
-  { as: 'div', size: 'md' },
-)
-
+<script setup>
+import { defaultConfig, provideConfigProvider } from "../../composables/useConfigProviderContext";
 defineOptions({
-  name: 'PConfigProvider',
-})
-
-provideConfigProvider(props)
+  name: "PConfigProvider"
+});
+const props = defineProps(/* @__PURE__ */ _mergeDefaults({
+  as: { type: null, required: false },
+  size: { type: String, required: false }
+}, { as: "div", ...defaultConfig }));
+provideConfigProvider(props);
 </script>
 
 <template>
-  <component :is="as">
+  <component :is="as" class="pxd-config-provider">
     <slot />
   </component>
 </template>

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

@@ -0,0 +1,72 @@
+<script setup>
+import { shallowRef } from "vue";
+import Button from "../button/index.vue";
+defineProps({
+  scale: { type: Boolean, required: false, default: true },
+  durations: { type: [Number, String], required: false, default: 2 },
+  maskColor: { type: String, required: false, default: "hsl(var(--red-600-value))" }
+});
+const emits = defineEmits(["trigger", "confirm"]);
+let isPointerDown = true;
+const isConfirm = shallowRef(false);
+function onPointerDown() {
+  isPointerDown = true;
+  isConfirm.value = false;
+}
+function onTransitionEnd(ev) {
+  const targetElement = ev.target;
+  const styleValue = getComputedStyle(targetElement).getPropertyValue(ev.propertyName);
+  if (isPointerDown && styleValue === "inset(0px)") {
+    emits("trigger");
+    isPointerDown = false;
+    isConfirm.value = true;
+  }
+}
+function onPointerUp() {
+  emits("confirm", isConfirm.value);
+  isPointerDown = false;
+  isConfirm.value = false;
+}
+</script>
+
+<template>
+  <Button class="pxd-hold-button relative !transition-all" :class="{ scale }" @pointerdown="onPointerDown" @pointerup="onPointerUp">
+    <template #prefix>
+      <slot name="prefix" />
+    </template>
+
+    <slot />
+
+    <template #suffix>
+      <slot name="suffix" />
+      <div
+        class="pxd-hold-button--overlay absolute -inset-px bg-(--mc) rounded-[inherit] pointer-events-none"
+        :class="{ confirm: isConfirm }"
+        :style="`--ds:${durations}s;--mc:${maskColor}`"
+        @transitionend="onTransitionEnd"
+      />
+    </template>
+  </Button>
+</template>
+
+<style lang="postcss">
+.pxd-hold-button--overlay {
+  --opacity: .48;
+  opacity: var(--opacity);
+  clip-path: inset(0 100% 0 0);
+  transition: clip-path .1s ease-out, opacity 0s linear;
+
+  &.confirm {
+    --opacity: .72;
+  }
+}
+
+.pxd-hold-button.scale:active {
+  transform: scale(.97);
+}
+
+.pxd-hold-button:active .pxd-hold-button--overlay {
+  clip-path: inset(0);
+  transition: clip-path var(--ds) ease-out, opacity .2s ease-out;
+}
+</style>

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './button/index.vue';
+export { default as ConfigProvider } from './config-provider/index.vue';
+export { default as HoldButton } from './hold-button/index.vue';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { default as Button } from "./button/index.vue";
+export { default as ConfigProvider } from "./config-provider/index.vue";
+export { default as HoldButton } from "./hold-button/index.vue";

package/dist/index.d.ts

@@ -1,5 +1,3 @@
 import type { App } from 'vue';
-import Button from './components/button/index.vue';
-import ConfigProvider from './components/config-provider/index.vue';
+export * from './components/index';
 export default function install(app: App): void;
-export { Button, ConfigProvider, };

package/dist/index.js

@@ -1,12 +1,7 @@
-import Button from "./components/button/index.vue";
-import ConfigProvider from "./components/config-provider/index.vue";
-const components = [Button, ConfigProvider];
+import * as components from "./components/index.js";
+export * from "./components/index.js";
 export default function install(app) {
-  components.forEach((component) => {
-    app.component(component.name, component);
+  Object.entries(components).forEach(([key, component]) => {
+    app.component(key, component);
   });
 }
-export {
-  Button,
-  ConfigProvider
-};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "pxd",
   "type": "module",
-  "version": "0.0.6",
-  "description": "Vue component library based on radix-vue and Geist Design System.",
+  "version": "0.0.7",
+  "description": "A universal UI component library for Vue2&3.",
   "author": "libondev <bon.li@outlook.com>",
   "license": "MIT",
   "homepage": "https://github.com/libondev/pxd#readme",
@@ -20,26 +20,29 @@
     "component library"
   ],
   "sideEffects": false,
-  "imports": {
-    "#/*": "./src/*",
-    "#types": "./src/types",
-    "#types/*": "./src/types/*",
-    "#utils/*": "./src/components/_utils/*"
-  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./nuxt": "./dist/plugins/nuxt.js",
-    "./components/*": "./dist/components/*/index.vue",
-    "./resolver": "./dist/plugins/resolver.js",
-    "./tokens.css": "./dist/tokens.css"
+    "./nuxt": {
+      "types": "./dist/plugins/nuxt.d.ts",
+      "default": "./dist/plugins/nuxt.js"
+    },
+    "./resolver": {
+      "types": "./dist/plugins/resolver.d.ts",
+      "default": "./dist/plugins/resolver.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./tw.css": "./dist/styles/tw.css",
+    "./components/*": "./dist/components/*/index.vue"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "style": "./dist/tokens.css",
   "typesVersions": {
     "*": {
       "*": [
@@ -54,19 +57,18 @@
     "dist"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "predev": "unbuild --stub",
-    "dev": "pnpm dev:docs",
+    "dev": "unbuild --stub",
     "dev:docs": "pnpm --filter docs dev",
-    "dev:vue2": "pnpm predev && pnpm --filter vue2 dev",
-    "prebuild": "node scripts/update-exports.js && unbuild",
-    "build": "pnpm build:docs",
-    "build:docs": "pnpm prebuild && pnpm --filter docs build",
-    "build:vue2": "pnpm prebuild && pnpm --filter vue2 build",
-    "preview": "pnpm --filter docs preview",
-    "preview:vue2": "pnpm --filter vue2 preview",
+    "build": "run-s typecheck update-exports build:lib",
+    "build:lib": "unbuild",
+    "build:docs": "pnpm build && pnpm --filter docs build",
+    "preview:docs": "pnpm --filter docs preview",
+    "update-exports": "node scripts/update-exports.js",
+    "prepublishOnly": "pnpm build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
@@ -86,6 +88,7 @@
     "eslint": "catalog:",
     "jsdom": "catalog:",
     "mkdist": "catalog:",
+    "npm-run-all2": "catalog:",
     "tailwindcss": "catalog:",
     "tinyglobby": "catalog:",
     "typescript": "catalog:",
@@ -94,6 +97,7 @@
     "unplugin-vue-components": "catalog:",
     "vitest": "catalog:",
     "vue": "catalog:",
+    "vue-sfc-transformer": "catalog:",
     "vue-tsc": "catalog:"
   }
 }