pxd 0.0.5 → 0.0.7

package/README.md

@@ -1,84 +1,28 @@
 # PXD
-Vue component library based on radix-vue and geist design system. Everything is just right.
+A universal UI component library for Vue2&3
 
-> [!IMPORTANT]
-> The library is still under development and may undergo major changes at any time.
+## Contribution
 
-> [!IMPORTANT]
-> This is a COMMUNITY PROJECT, not associated with Vercel, originating from [Vercel design system](https://vercel.com/geist/introduction). Did not strictly follow its implementation, and added some personal ideas.
+### Dev
 
-## Install
+```shell
+pnpm install
 
-```bash
-pnpm i pxd
-```
-
-## Usage
-
-### Styles
-```js
-// tailwind.config.js
-
-export default {
-  content: [
-    './src/**/*.{ts,tsx,vue}',
-    './node_modules/pxd/dist/components/**/*.js',
-  ]
-}
-```
-
-### vars.css
+pnpm dev
 
-```js
-// main.ts
-import 'pxd/vars.css'
+pnpm dev:docs
 ```
 
-### Auto import
+### Build
 
-```js
-// vite.config.js
-import PxResolver from 'pxd/resolver'
-import VueComponents from 'unplugin-vue-components/vite'
-import { defineConfig } from 'vite'
+#### Core
 
-export default defineConfig({
-  plugins: [
-    VueComponents({
-      resolvers: [
-        PxResolver()
-      ]
-    })
-  ]
-})
+```shell
+pnpm build
 ```
 
-### Global import
-We strongly recommend using automatic import because it can significantly reduce the package size.
+#### Docs
 
-## Manual Import
-```js
-// main.ts
-
-// All components only need to import this style file.
-import 'pxd/vars.css'
-```
-
-```vue
-<script setup>
-import Button from 'pxd/components/button/index.js'
-</script>
-
-<template>
-  <Button>
-    Button
-  </Button>
-</template>
+```shell
+pnpm build:docs
 ```
-
-## Acknowledgement
-rankings are in no particular order, they are all very important to this project.
-
-- Vite: https://vitejs.dev/
-- Iconify: https://iconify.design/
-- Geist Design System: https://vercel.com/geist/introduction

package/dist/components/button/index.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from "vue";
+import { useConfigProvider } from "../../composables/useConfigProviderContext";
+defineOptions({
+  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 "
+};
+const VARIANTS = {
+  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 = "";
+  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;
+  }
+  if (props.shape === "square") {
+    classNames += "!rounded-none ";
+  } else if (props.shape === "rounded") {
+    classNames += "!rounded-full ";
+  }
+  return classNames;
+});
+</script>
+
+<template>
+  <Component
+    :is="props.href ? 'router-link' : 'button'"
+    class="pxd-button cursor-pointer transition-colors items-center justify-center border"
+    :class="computedClassNames"
+    :disabled="disabled"
+    :to="href"
+  >
+    <slot name="prefix" />
+
+    <span class="px-1 inline-flex truncate">
+      <slot />
+    </span>
+
+    <slot name="suffix" />
+  </Component>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup>
+import { defaultConfig, provideConfigProvider } from "../../composables/useConfigProviderContext";
+defineOptions({
+  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" 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/composables/useConfigProviderContext.d.ts

@@ -0,0 +1,8 @@
+export declare const injectionKey = "configProvider";
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface ConfigProviderProps {
+    size?: ComponentSize;
+}
+export declare const defaultConfig: Required<ConfigProviderProps>;
+export declare function provideConfigProvider(configProvider: ConfigProviderProps): void;
+export declare function useConfigProvider(): Required<ConfigProviderProps>;

package/dist/composables/useConfigProviderContext.js

@@ -0,0 +1,11 @@
+import { inject, provide } from "vue";
+export const injectionKey = "configProvider";
+export const defaultConfig = {
+  size: "md"
+};
+export function provideConfigProvider(configProvider) {
+  provide(injectionKey, configProvider);
+}
+export function useConfigProvider() {
+  return inject(injectionKey, defaultConfig);
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,7 @@
+import * as components from "./components/index.js";
+export * from "./components/index.js";
+export default function install(app) {
+  Object.entries(components).forEach(([key, component]) => {
+    app.component(key, component);
+  });
+}

package/dist/plugins/nuxt.d.ts

@@ -0,0 +1,5 @@
+export interface ModuleOptions {
+    prefix: string;
+}
+declare const _default: import("@nuxt/schema").NuxtModule<ModuleOptions, ModuleOptions, false>;
+export default _default;

package/dist/plugins/nuxt.js

@@ -0,0 +1,24 @@
+import { addComponent, defineNuxtModule } from "@nuxt/kit";
+import * as components from "../index.js";
+import { name } from "../../package.json";
+export default defineNuxtModule({
+  meta: {
+    name: "pxd",
+    configKey: "pxd",
+    compatibility: {
+      nuxt: ">=3.0.0"
+    }
+  },
+  defaults: {
+    prefix: ""
+  },
+  async setup(options) {
+    for (const component in components) {
+      addComponent({
+        name: `${options.prefix}${component}`,
+        export: component,
+        filePath: name
+      });
+    }
+  }
+});

package/dist/plugins/resolver.d.ts

@@ -1,3 +1,3 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-declare function PxdResolver(): ComponentResolver;
-export default PxdResolver;
+import type { ComponentResolver } from 'unplugin-vue-components';
+declare function resolver(): ComponentResolver;
+export default resolver;

package/dist/plugins/resolver.js

@@ -1 +1,19 @@
-const c="pxd",s=c[0].toUpperCase();let n=c;const r={"code-block":["pxd/code-block.css"]},p=(()=>{const e=".js";return t=>`${n}/components/${t}/index${e}`})();function a(){return{type:"component",resolve:e=>{const t=new RegExp(`^${s}[A-Z]`);if(!e.match(t))return;const o=e.replace(new RegExp(s,"i"),"").replace(/([A-Z])/g,"-$1").toLowerCase().slice(1);return{importName:e,from:p(o),sideEffects:r[o]||[]}}}}export{a as default};
+const LIBRARY_NAME = "pxd";
+const NAMESPACE = LIBRARY_NAME[0].toUpperCase();
+function resolver() {
+  const prefixRegex = /^P[A-Z]/;
+  return {
+    type: "component",
+    resolve(name) {
+      if (!prefixRegex.test(name)) {
+        return;
+      }
+      const partialName = name.replace(new RegExp(NAMESPACE, "i"), "").replace(/([A-Z])/g, "-$1").toLowerCase().slice(1);
+      return {
+        importName: name,
+        from: `pxd/components/${partialName}`
+      };
+    }
+  };
+}
+export default resolver;