@pantograph/pattern-vue 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -0
- package/dist/ComponentMap-BDQ8ar3z.js +6 -0
- package/dist/ComponentMap-CTyWVtmA.js +1 -0
- package/dist/ComponentMap.d.ts +3 -0
- package/dist/components/InputPassword/InputPassword.d.ts +91 -0
- package/dist/components/InputPassword/index.d.ts +8 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +6 -0
- package/dist/index.umd.cjs +1 -0
- package/dist/nuxt/index.js +34 -0
- package/dist/nuxt/index.umd.cjs +1 -0
- package/dist/plugins/nuxt.d.ts +9 -0
- package/dist/plugins/resolver.d.ts +17 -0
- package/dist/plugins/use.d.ts +14 -0
- package/dist/resolver/index.js +33 -0
- package/dist/resolver/index.umd.cjs +1 -0
- package/dist/use/index.js +154 -0
- package/dist/use/index.umd.cjs +1 -0
- package/package.json +75 -0
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="./public/logo.svg" alt="Pantograph Logo" width="160" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
# @pantograph/pattern-vue
|
|
6
|
+
|
|
7
|
+
Pantograph's Vue 3 component library, built with TypeScript and token-based design. Ready to use in your apps with light/dark token switching and simple, consistent APIs.
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
```bash
|
|
11
|
+
npm i @pantograph/pattern-vue
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Quick usage
|
|
15
|
+
```vue
|
|
16
|
+
<script setup>
|
|
17
|
+
import { ref } from 'vue'
|
|
18
|
+
import { InputPassword } from '@pantograph/pattern-vue'
|
|
19
|
+
import '@pantograph/styles'
|
|
20
|
+
|
|
21
|
+
const password = ref('')
|
|
22
|
+
const isVisible = ref(false)
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<template>
|
|
26
|
+
<InputPassword
|
|
27
|
+
v-model="password"
|
|
28
|
+
v-model:visible="isVisible"
|
|
29
|
+
placeholder="Enter your password"
|
|
30
|
+
/>
|
|
31
|
+
</template>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Components
|
|
35
|
+
|
|
36
|
+
### InputPassword
|
|
37
|
+
|
|
38
|
+
A password input component with built-in visibility toggle functionality.
|
|
39
|
+
|
|
40
|
+
**Features:**
|
|
41
|
+
- Built-in eye icon to toggle password visibility
|
|
42
|
+
- Dual v-model support (`v-model` for value, `v-model:visible` for visibility state)
|
|
43
|
+
- All Input component props, slots, and events are supported
|
|
44
|
+
- Accessible with proper ARIA labels
|
|
45
|
+
|
|
46
|
+
**Usage:**
|
|
47
|
+
```vue
|
|
48
|
+
<script setup>
|
|
49
|
+
import { ref } from 'vue'
|
|
50
|
+
import { InputPassword } from '@pantograph/pattern-vue'
|
|
51
|
+
|
|
52
|
+
const password = ref('')
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<template>
|
|
56
|
+
<InputPassword
|
|
57
|
+
v-model="password"
|
|
58
|
+
placeholder="Enter your password"
|
|
59
|
+
allowClear
|
|
60
|
+
/>
|
|
61
|
+
</template>
|
|
62
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const s=["InputPassword"];exports.components=s;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { InputExtendsEmits, InputExtendsProps, InputNotExtendsEmits, InputNotExtendsProps, InputSlots } from '@pantograph/vue';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the InputPassword component
|
|
4
|
+
*
|
|
5
|
+
* Important:
|
|
6
|
+
* - When a component wants to reuse and extend another component's prop type in
|
|
7
|
+
* Vue macros (`defineProps<T>()`), do NOT import a single "final" props type.
|
|
8
|
+
* - Instead, import the split pair (`InputExtendsProps` + `InputNotExtendsProps`)
|
|
9
|
+
* and compose them with intersections (`&`).
|
|
10
|
+
*
|
|
11
|
+
* Extends all `Input` props and adds `visible` for password visibility control.
|
|
12
|
+
*/
|
|
13
|
+
export type InputPasswordProps = InputExtendsProps & InputNotExtendsProps & {
|
|
14
|
+
/**
|
|
15
|
+
* Whether the password is visible (v-model)
|
|
16
|
+
*/
|
|
17
|
+
visible?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Icon to display when the password is visible.
|
|
20
|
+
* @default 'tabler:eye-off'
|
|
21
|
+
*/
|
|
22
|
+
visibleIcon?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Icon to display when the password is hidden.
|
|
25
|
+
* @default 'tabler:eye'
|
|
26
|
+
*/
|
|
27
|
+
invisibleIcon?: string;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Slots for the InputPassword component
|
|
31
|
+
*
|
|
32
|
+
* Extends all `Input` slots. The `trailing` slot is still supported; when it is
|
|
33
|
+
* empty we render a default visibility toggle icon.
|
|
34
|
+
*/
|
|
35
|
+
export type InputPasswordSlots = InputSlots;
|
|
36
|
+
/**
|
|
37
|
+
* Emits for the InputPassword component
|
|
38
|
+
*
|
|
39
|
+
* Important:
|
|
40
|
+
* - Same rule as props: use split emit types (`InputExtendsEmits` + `InputNotExtendsEmits`)
|
|
41
|
+
* when composing emits for `defineEmits<T>()`.
|
|
42
|
+
*
|
|
43
|
+
* Extends all `Input` emits and adds visible state update.
|
|
44
|
+
*/
|
|
45
|
+
export type InputPasswordEmits = InputExtendsEmits & InputNotExtendsEmits & {
|
|
46
|
+
/**
|
|
47
|
+
* Emitted when the visible state is updated
|
|
48
|
+
*/
|
|
49
|
+
'update:visible': [value: boolean];
|
|
50
|
+
};
|
|
51
|
+
/**
|
|
52
|
+
* Default props for the InputPassword component
|
|
53
|
+
*/
|
|
54
|
+
export declare const INPUT_PASSWORD_DEFAULT_PROPS: {
|
|
55
|
+
readonly visibleIcon: "tabler:eye-off";
|
|
56
|
+
readonly invisibleIcon: "tabler:eye";
|
|
57
|
+
readonly readonly: undefined;
|
|
58
|
+
readonly disabled: undefined;
|
|
59
|
+
readonly bordered: true;
|
|
60
|
+
readonly clearIcon: "tabler:circle-x";
|
|
61
|
+
};
|
|
62
|
+
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<InputPasswordProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
63
|
+
blur: (event: InputEvent) => any;
|
|
64
|
+
change: (value?: string | null | undefined) => any;
|
|
65
|
+
focus: (event: InputEvent) => any;
|
|
66
|
+
pointerdown: (event: PointerEvent) => any;
|
|
67
|
+
clear: () => any;
|
|
68
|
+
"update:modelValue": (value?: string | null | undefined) => any;
|
|
69
|
+
"update:visible": (value: boolean) => any;
|
|
70
|
+
}, string, import('vue').PublicProps, Readonly<InputPasswordProps> & Readonly<{
|
|
71
|
+
onBlur?: ((event: InputEvent) => any) | undefined;
|
|
72
|
+
onChange?: ((value?: string | null | undefined) => any) | undefined;
|
|
73
|
+
onFocus?: ((event: InputEvent) => any) | undefined;
|
|
74
|
+
onPointerdown?: ((event: PointerEvent) => any) | undefined;
|
|
75
|
+
onClear?: (() => any) | undefined;
|
|
76
|
+
"onUpdate:modelValue"?: ((value?: string | null | undefined) => any) | undefined;
|
|
77
|
+
"onUpdate:visible"?: ((value: boolean) => any) | undefined;
|
|
78
|
+
}>, {
|
|
79
|
+
readonly: boolean;
|
|
80
|
+
disabled: boolean;
|
|
81
|
+
clearIcon: string;
|
|
82
|
+
bordered: boolean;
|
|
83
|
+
visibleIcon: string;
|
|
84
|
+
invisibleIcon: string;
|
|
85
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<import('@pantograph/vue').InputExtendsSlots> & import('@pantograph/vue').InputExtendsSlots>;
|
|
86
|
+
export default _default;
|
|
87
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
88
|
+
new (): {
|
|
89
|
+
$slots: S;
|
|
90
|
+
};
|
|
91
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { DefineComponent } from '@pantograph/utils-vue';
|
|
2
|
+
import { default as InputPassword, InputPasswordSlots, InputPasswordEmits, InputPasswordProps, INPUT_PASSWORD_DEFAULT_PROPS } from './InputPassword';
|
|
3
|
+
export { InputPassword, type InputPasswordProps, type InputPasswordSlots, type InputPasswordEmits, INPUT_PASSWORD_DEFAULT_PROPS, };
|
|
4
|
+
declare module 'vue' {
|
|
5
|
+
interface GlobalComponents {
|
|
6
|
+
InputPassword: DefineComponent<InputPasswordProps, InputPasswordSlots, InputPasswordEmits>;
|
|
7
|
+
}
|
|
8
|
+
}
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./use/index.umd.cjs");exports.INPUT_PASSWORD_DEFAULT_PROPS=e.INPUT_PASSWORD_DEFAULT_PROPS;exports.InputPassword=e._sfc_main;exports.default=e.default;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { c as a } from "../ComponentMap-BDQ8ar3z.js";
|
|
2
|
+
import { defineNuxtModule as r, addComponent as f } from "@nuxt/kit";
|
|
3
|
+
const u = r({
|
|
4
|
+
meta: {
|
|
5
|
+
name: "@pantograph/pattern-vue/nuxt",
|
|
6
|
+
configKey: "@pantograph/pattern-vue",
|
|
7
|
+
compatibility: {
|
|
8
|
+
nuxt: ">=3.0.0"
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
defaults: {
|
|
12
|
+
prefix: "",
|
|
13
|
+
components: !0,
|
|
14
|
+
cssInJs: !0,
|
|
15
|
+
loadFonts: !1
|
|
16
|
+
},
|
|
17
|
+
setup(e, o) {
|
|
18
|
+
const { prefix: p, components: s, cssInJs: n = !0, loadFonts: i = !1 } = e;
|
|
19
|
+
if (s !== !1) {
|
|
20
|
+
o.options.runtimeConfig || (o.options.runtimeConfig = {}), o.options.runtimeConfig.public || (o.options.runtimeConfig.public = {}), o.options.runtimeConfig.public.pantograph = {
|
|
21
|
+
cssInJs: n ?? !0
|
|
22
|
+
}, n || (o.options.css || (o.options.css = []), o.options.css.push("@pantograph/styles/index.css")), i && (o.options.css || (o.options.css = []), o.options.css.push("@pantograph/tokens/style/index.css"));
|
|
23
|
+
for (const t of a)
|
|
24
|
+
(s === !0 || typeof s == "object" && s[t]) && f({
|
|
25
|
+
name: `${p}${t}`,
|
|
26
|
+
export: t,
|
|
27
|
+
filePath: "@pantograph/pattern-vue"
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
export {
|
|
33
|
+
u as default
|
|
34
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const a=require("../ComponentMap-CTyWVtmA.js"),n=require("@nuxt/kit"),c=n.defineNuxtModule({meta:{name:"@pantograph/pattern-vue/nuxt",configKey:"@pantograph/pattern-vue",compatibility:{nuxt:">=3.0.0"}},defaults:{prefix:"",components:!0,cssInJs:!0,loadFonts:!1},setup(i,o){const{prefix:p,components:s,cssInJs:e=!0,loadFonts:r=!1}=i;if(s!==!1){o.options.runtimeConfig||(o.options.runtimeConfig={}),o.options.runtimeConfig.public||(o.options.runtimeConfig.public={}),o.options.runtimeConfig.public.pantograph={cssInJs:e??!0},e||(o.options.css||(o.options.css=[]),o.options.css.push("@pantograph/styles/index.css")),r&&(o.options.css||(o.options.css=[]),o.options.css.push("@pantograph/tokens/style/index.css"));for(const t of a.components)(s===!0||typeof s=="object"&&s[t])&&n.addComponent({name:`${p}${t}`,export:t,filePath:"@pantograph/pattern-vue"})}}});module.exports=c;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Components } from '../ComponentMap';
|
|
2
|
+
export interface ModuleOptions {
|
|
3
|
+
components: Partial<Record<Components, boolean>> | boolean;
|
|
4
|
+
prefix: string;
|
|
5
|
+
cssInJs?: boolean;
|
|
6
|
+
loadFonts?: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare const _default: any;
|
|
9
|
+
export default _default;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ComponentResolver } from 'unplugin-vue-components';
|
|
2
|
+
export interface ResolverOptions {
|
|
3
|
+
/**
|
|
4
|
+
* prefix for components used in templates
|
|
5
|
+
*
|
|
6
|
+
* @defaultValue ""
|
|
7
|
+
*/
|
|
8
|
+
prefix?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Whether to use CSS-in-JS (JIT style loading) instead of CSS imports
|
|
11
|
+
*
|
|
12
|
+
* @defaultValue false
|
|
13
|
+
*/
|
|
14
|
+
cssInJs?: boolean;
|
|
15
|
+
}
|
|
16
|
+
declare const PantographResolver: (options?: ResolverOptions) => ComponentResolver;
|
|
17
|
+
export default PantographResolver;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { App } from 'vue';
|
|
2
|
+
export interface PantographPluginOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Whether to use CSS-in-JS (JIT style loading) instead of CSS imports
|
|
5
|
+
*
|
|
6
|
+
* @defaultValue false
|
|
7
|
+
*/
|
|
8
|
+
cssInJs?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const _default: {
|
|
11
|
+
version: string;
|
|
12
|
+
install: (app: App<any>, options?: PantographPluginOptions) => App<any>;
|
|
13
|
+
};
|
|
14
|
+
export default _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { c as r } from "../ComponentMap-BDQ8ar3z.js";
|
|
2
|
+
function a(o, e = !1) {
|
|
3
|
+
const t = ["@pantograph/tokens/style/index.css"];
|
|
4
|
+
return e ? t : [...t, "@pantograph/styles/index.css"];
|
|
5
|
+
}
|
|
6
|
+
const i = (o = {}) => {
|
|
7
|
+
const { prefix: e = "", cssInJs: t = !1 } = o;
|
|
8
|
+
return {
|
|
9
|
+
type: "component",
|
|
10
|
+
resolve: (s) => {
|
|
11
|
+
if (e) {
|
|
12
|
+
const f = e.toLowerCase();
|
|
13
|
+
if (s.toLowerCase().startsWith(f)) {
|
|
14
|
+
const n = s.substring(e.length);
|
|
15
|
+
if (r.includes(n))
|
|
16
|
+
return {
|
|
17
|
+
name: n,
|
|
18
|
+
from: "@pantograph/pattern-vue",
|
|
19
|
+
sideEffects: a(n, t)
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
} else if (r.includes(s))
|
|
23
|
+
return {
|
|
24
|
+
name: s,
|
|
25
|
+
from: "@pantograph/pattern-vue",
|
|
26
|
+
sideEffects: a(s, t)
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export {
|
|
32
|
+
i as default
|
|
33
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const r=require("../ComponentMap-CTyWVtmA.js");function c(o,e=!1){const t=["@pantograph/tokens/style/index.css"];return e?t:[...t,"@pantograph/styles/index.css"]}const a=(o={})=>{const{prefix:e="",cssInJs:t=!1}=o;return{type:"component",resolve:s=>{if(e){const p=e.toLowerCase();if(s.toLowerCase().startsWith(p)){const n=s.substring(e.length);if(r.components.includes(n))return{name:n,from:"@pantograph/pattern-vue",sideEffects:c(n,t)}}}else if(r.components.includes(s))return{name:s,from:"@pantograph/pattern-vue",sideEffects:c(s,t)}}}};module.exports=a;
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { useVModel as O, isEmptyElement as S, installComponent as w } from "@pantograph/utils-vue";
|
|
2
|
+
import { getCurrentInstance as g, toHandlerKey as C, camelize as m, toRef as h, computed as a, defineComponent as A, mergeDefaults as j, useSlots as E, useAttrs as N, createBlock as T, openBlock as F, h as y } from "vue";
|
|
3
|
+
import { getComponentOptions as V, getBemElement as U, normCls as k } from "@pantograph/utils";
|
|
4
|
+
import { INPUT_DEFAULT_PROPS as D, inputPrefix as R, Input as x, Icon as z } from "@pantograph/vue";
|
|
5
|
+
const L = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
6
|
+
__proto__: null,
|
|
7
|
+
get INPUT_PASSWORD_DEFAULT_PROPS() {
|
|
8
|
+
return P;
|
|
9
|
+
},
|
|
10
|
+
get InputPassword() {
|
|
11
|
+
return u;
|
|
12
|
+
},
|
|
13
|
+
get default() {
|
|
14
|
+
return G;
|
|
15
|
+
}
|
|
16
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
17
|
+
function H(s, e) {
|
|
18
|
+
const t = { ...s };
|
|
19
|
+
for (let o = 0; o < e.length; o++) {
|
|
20
|
+
const r = e[o];
|
|
21
|
+
delete t[r];
|
|
22
|
+
}
|
|
23
|
+
return t;
|
|
24
|
+
}
|
|
25
|
+
function J(s) {
|
|
26
|
+
const e = g(), t = e == null ? void 0 : e.type.emits, o = {};
|
|
27
|
+
return t != null && t.length || console.warn(`No emitted event found. Please check component: ${e == null ? void 0 : e.type.__name}`), t == null || t.forEach((r) => {
|
|
28
|
+
o[C(m(r))] = (...l) => s(r, ...l);
|
|
29
|
+
}), o;
|
|
30
|
+
}
|
|
31
|
+
function M(s) {
|
|
32
|
+
const e = g(), t = Object.keys((e == null ? void 0 : e.type.props) ?? {}).reduce((r, l) => {
|
|
33
|
+
const n = (e == null ? void 0 : e.type.props[l]).default;
|
|
34
|
+
return n !== void 0 && (r[l] = n), r;
|
|
35
|
+
}, {}), o = h(s);
|
|
36
|
+
return a(() => {
|
|
37
|
+
const r = {}, l = (e == null ? void 0 : e.vnode.props) ?? {};
|
|
38
|
+
return Object.keys(l).forEach((n) => {
|
|
39
|
+
r[m(n)] = l[n];
|
|
40
|
+
}), Object.keys({
|
|
41
|
+
...t,
|
|
42
|
+
...r
|
|
43
|
+
}).reduce((n, i) => (o.value[i] !== void 0 && (n[i] = o.value[i]), n), {});
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
function W(s, e) {
|
|
47
|
+
const t = M(s), o = e ? J(e) : {};
|
|
48
|
+
return a(() => ({
|
|
49
|
+
...t.value,
|
|
50
|
+
...o
|
|
51
|
+
}));
|
|
52
|
+
}
|
|
53
|
+
const P = {
|
|
54
|
+
...D,
|
|
55
|
+
visibleIcon: "tabler:eye-off",
|
|
56
|
+
invisibleIcon: "tabler:eye"
|
|
57
|
+
}, u = /* @__PURE__ */ A({
|
|
58
|
+
...V("InputPassword"),
|
|
59
|
+
__name: "InputPassword",
|
|
60
|
+
props: /* @__PURE__ */ j({
|
|
61
|
+
readonly: { type: Boolean },
|
|
62
|
+
disabled: { type: Boolean },
|
|
63
|
+
autoFocus: { type: Boolean },
|
|
64
|
+
leading: {},
|
|
65
|
+
trailing: {},
|
|
66
|
+
clearIcon: {},
|
|
67
|
+
trailingCls: { type: [Array, Object, String, Number, null, Boolean] },
|
|
68
|
+
clearIconCls: { type: [Array, Object, String, Number, null, Boolean] },
|
|
69
|
+
dividerCls: { type: [Array, Object, String, Number, null, Boolean] },
|
|
70
|
+
leadingCls: { type: [Array, Object, String, Number, null, Boolean] },
|
|
71
|
+
class: { type: [Array, Object, String, Number, null, Boolean] },
|
|
72
|
+
allowClear: { type: Boolean },
|
|
73
|
+
bordered: { type: Boolean },
|
|
74
|
+
simple: { type: Boolean },
|
|
75
|
+
size: {},
|
|
76
|
+
status: {},
|
|
77
|
+
steps: { type: Boolean },
|
|
78
|
+
contentFit: { type: Boolean },
|
|
79
|
+
outsideFgColor: { type: Boolean },
|
|
80
|
+
id: {},
|
|
81
|
+
maxlength: {},
|
|
82
|
+
type: {},
|
|
83
|
+
placeholder: {},
|
|
84
|
+
required: { type: Boolean },
|
|
85
|
+
modelValue: {},
|
|
86
|
+
defaultValue: {},
|
|
87
|
+
visible: { type: Boolean },
|
|
88
|
+
visibleIcon: {},
|
|
89
|
+
invisibleIcon: {}
|
|
90
|
+
}, P),
|
|
91
|
+
emits: ["blur", "focus", "clear", "pointerdown", "update:modelValue", "change", "update:visible"],
|
|
92
|
+
setup(s, { emit: e }) {
|
|
93
|
+
const t = s, o = E(), r = e, l = U(R, "password_type"), n = O(
|
|
94
|
+
t,
|
|
95
|
+
"visible",
|
|
96
|
+
r,
|
|
97
|
+
{
|
|
98
|
+
defaultValue: !1,
|
|
99
|
+
passive: t.visible === void 0
|
|
100
|
+
}
|
|
101
|
+
), i = a(() => n.value ? "text" : "password"), I = () => {
|
|
102
|
+
n.value = !n.value;
|
|
103
|
+
}, v = W(t, r), _ = N(), p = a(
|
|
104
|
+
() => H({ ..._, ...v.value }, [
|
|
105
|
+
"visible",
|
|
106
|
+
"onUpdate:visible",
|
|
107
|
+
"invisibleIcon",
|
|
108
|
+
"visibleIcon"
|
|
109
|
+
])
|
|
110
|
+
), B = () => {
|
|
111
|
+
const d = (c) => {
|
|
112
|
+
var b;
|
|
113
|
+
const f = (b = o.trailing) == null ? void 0 : b.call(o, c);
|
|
114
|
+
return S(f) ? y(z, {
|
|
115
|
+
size: c.iconSize,
|
|
116
|
+
icon: n.value ? t.visibleIcon : t.invisibleIcon,
|
|
117
|
+
onClick: I,
|
|
118
|
+
"aria-label": n.value ? "Hide password" : "Show password"
|
|
119
|
+
}) : f;
|
|
120
|
+
};
|
|
121
|
+
return y(
|
|
122
|
+
x,
|
|
123
|
+
{
|
|
124
|
+
...p.value,
|
|
125
|
+
type: i.value,
|
|
126
|
+
trailingCls: k(
|
|
127
|
+
l,
|
|
128
|
+
p.value.trailingCls
|
|
129
|
+
)
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
...o,
|
|
133
|
+
trailing: d
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
};
|
|
137
|
+
return (d, c) => (F(), T(B));
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
Object.assign(u, w(u, "InputPassword"));
|
|
141
|
+
const $ = "0.0.0", q = function(s, e = {}) {
|
|
142
|
+
const { cssInJs: t } = e;
|
|
143
|
+
return s.config.globalProperties.$pantographCssInJs = t, import("@pantograph/tokens/style/index.css"), t || import("@pantograph/styles/index.css"), Object.values(L).forEach((o) => {
|
|
144
|
+
o.install && s.use(o);
|
|
145
|
+
}), s;
|
|
146
|
+
}, G = {
|
|
147
|
+
version: $,
|
|
148
|
+
install: q
|
|
149
|
+
};
|
|
150
|
+
export {
|
|
151
|
+
P as I,
|
|
152
|
+
u as _,
|
|
153
|
+
G as default
|
|
154
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var C=Object.create;var _=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var T=(o,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of h(e))!E.call(o,s)&&s!==t&&_(o,s,{get:()=>e[s],enumerable:!(n=A(e,s))||n.enumerable});return o};var v=(o,e,t)=>(t=o!=null?C(j(o)):{},T(e||!o||!o.__esModule?_(t,"default",{value:o,enumerable:!0}):t,o));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("@pantograph/utils-vue"),r=require("vue"),d=require("@pantograph/utils"),u=require("@pantograph/vue"),N=Object.freeze(Object.defineProperty({__proto__:null,get INPUT_PASSWORD_DEFAULT_PROPS(){return y},get InputPassword(){return c},get default(){return I}},Symbol.toStringTag,{value:"Module"}));function F(o,e){const t={...o};for(let n=0;n<e.length;n++){const s=e[n];delete t[s]}return t}function U(o){const e=r.getCurrentInstance(),t=e==null?void 0:e.type.emits,n={};return t!=null&&t.length||console.warn(`No emitted event found. Please check component: ${e==null?void 0:e.type.__name}`),t==null||t.forEach(s=>{n[r.toHandlerKey(r.camelize(s))]=(...i)=>o(s,...i)}),n}function V(o){const e=r.getCurrentInstance(),t=Object.keys((e==null?void 0:e.type.props)??{}).reduce((s,i)=>{const l=(e==null?void 0:e.type.props[i]).default;return l!==void 0&&(s[i]=l),s},{}),n=r.toRef(o);return r.computed(()=>{const s={},i=(e==null?void 0:e.vnode.props)??{};return Object.keys(i).forEach(l=>{s[r.camelize(l)]=i[l]}),Object.keys({...t,...s}).reduce((l,a)=>(n.value[a]!==void 0&&(l[a]=n.value[a]),l),{})})}function D(o,e){const t=V(o),n=e?U(e):{};return r.computed(()=>({...t.value,...n}))}const y={...u.INPUT_DEFAULT_PROPS,visibleIcon:"tabler:eye-off",invisibleIcon:"tabler:eye"},c=r.defineComponent({...d.getComponentOptions("InputPassword"),__name:"InputPassword",props:r.mergeDefaults({readonly:{type:Boolean},disabled:{type:Boolean},autoFocus:{type:Boolean},leading:{},trailing:{},clearIcon:{},trailingCls:{type:[Array,Object,String,Number,null,Boolean]},clearIconCls:{type:[Array,Object,String,Number,null,Boolean]},dividerCls:{type:[Array,Object,String,Number,null,Boolean]},leadingCls:{type:[Array,Object,String,Number,null,Boolean]},class:{type:[Array,Object,String,Number,null,Boolean]},allowClear:{type:Boolean},bordered:{type:Boolean},simple:{type:Boolean},size:{},status:{},steps:{type:Boolean},contentFit:{type:Boolean},outsideFgColor:{type:Boolean},id:{},maxlength:{},type:{},placeholder:{},required:{type:Boolean},modelValue:{},defaultValue:{},visible:{type:Boolean},visibleIcon:{},invisibleIcon:{}},y),emits:["blur","focus","clear","pointerdown","update:modelValue","change","update:visible"],setup(o,{emit:e}){const t=o,n=r.useSlots(),s=e,i=d.getBemElement(u.inputPrefix,"password_type"),l=b.useVModel(t,"visible",s,{defaultValue:!1,passive:t.visible===void 0}),a=r.computed(()=>l.value?"text":"password"),S=()=>{l.value=!l.value},O=D(t,s),B=r.useAttrs(),f=r.computed(()=>F({...B,...O.value},["visible","onUpdate:visible","invisibleIcon","visibleIcon"])),w=()=>{const g=p=>{var P;const m=(P=n.trailing)==null?void 0:P.call(n,p);return b.isEmptyElement(m)?r.h(u.Icon,{size:p.iconSize,icon:l.value?t.visibleIcon:t.invisibleIcon,onClick:S,"aria-label":l.value?"Hide password":"Show password"}):m};return r.h(u.Input,{...f.value,type:a.value,trailingCls:d.normCls(i,f.value.trailingCls)},{...n,trailing:g})};return(g,p)=>(r.openBlock(),r.createBlock(w))}});Object.assign(c,b.installComponent(c,"InputPassword"));const R="0.0.0",k=function(o,e={}){const{cssInJs:t}=e;return o.config.globalProperties.$pantographCssInJs=t,import("@pantograph/tokens/style/index.css"),t||import("@pantograph/styles/index.css"),Object.values(N).forEach(n=>{n.install&&o.use(n)}),o},I={version:R,install:k};exports.INPUT_PASSWORD_DEFAULT_PROPS=y;exports._sfc_main=c;exports.default=I;
|
package/package.json
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@pantograph/pattern-vue",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"id": "pattern-vue",
|
|
5
|
+
"private": false,
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"ui",
|
|
9
|
+
"vue",
|
|
10
|
+
"components"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"preBuild": "turbo run lint && turbo run format",
|
|
14
|
+
"build": "vite build",
|
|
15
|
+
"release": "node ../../scripts/release.cjs",
|
|
16
|
+
"lint": "eslint . --fix",
|
|
17
|
+
"format": "prettier --write src/"
|
|
18
|
+
},
|
|
19
|
+
"type": "module",
|
|
20
|
+
"author": {
|
|
21
|
+
"name": "sedmedgh",
|
|
22
|
+
"email": "sedmedgh@gmail.com"
|
|
23
|
+
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@pantograph/vue": ">=0.34.5",
|
|
26
|
+
"@pantograph/styles": ">=0.0.10",
|
|
27
|
+
"@pantograph/tokens": ">=1.0.11",
|
|
28
|
+
"@pantograph/utils": ">=0.0.36",
|
|
29
|
+
"@pantograph/utils-vue": ">=0.0.15"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@vitejs/plugin-vue": "6.0.0",
|
|
33
|
+
"eslint-config-custom": "*",
|
|
34
|
+
"npm-run-all2": "8.0.4",
|
|
35
|
+
"tsconfig": "*",
|
|
36
|
+
"unplugin-vue-components": "29.1.0",
|
|
37
|
+
"vue-tsc": "3.1.8"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"vue": ">=3.5.14",
|
|
41
|
+
"nuxt": ">=3.0.0"
|
|
42
|
+
},
|
|
43
|
+
"peerDependenciesMeta": {
|
|
44
|
+
"vue": {
|
|
45
|
+
"optional": false
|
|
46
|
+
},
|
|
47
|
+
"@nuxt/kit": {
|
|
48
|
+
"optional": true
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
"exports": {
|
|
52
|
+
".": {
|
|
53
|
+
"types": "./dist/index.d.ts",
|
|
54
|
+
"import": "./dist/index.js",
|
|
55
|
+
"require": "./dist/index.umd.cjs"
|
|
56
|
+
},
|
|
57
|
+
"./nuxt": {
|
|
58
|
+
"types": "./dist/plugins/nuxt.d.ts",
|
|
59
|
+
"import": "./dist/nuxt/index.js",
|
|
60
|
+
"require": "./dist/nuxt/index.umd.cjs"
|
|
61
|
+
},
|
|
62
|
+
"./resolver": {
|
|
63
|
+
"types": "./dist/plugins/resolver.d.ts",
|
|
64
|
+
"import": "./dist/resolver/index.js",
|
|
65
|
+
"require": "./dist/resolver/index.umd.cjs"
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
"main": "./dist/index.umd.cjs",
|
|
69
|
+
"module": "./dist/index.js",
|
|
70
|
+
"types": "./dist/index.d.ts",
|
|
71
|
+
"typings": "./dist/index.d.ts",
|
|
72
|
+
"files": [
|
|
73
|
+
"./dist"
|
|
74
|
+
]
|
|
75
|
+
}
|