@cypress-design/vue-checkbox 0.1.0 → 0.1.1

package/dist/vue/Checkbox.vue.d.ts

@@ -0,0 +1,212 @@
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            id: string;
+            color: 'red' | 'indigo' | 'jade';
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+            /**
+             * A unique identifier for the checkbox on the whole page.
+             * It will be used to give match label with input for a11y.
+             */
+            id?: string | undefined;
+            /**
+             * Name attribute of the <input type="checkbox"/>.
+             */
+            name?: string | undefined;
+            /**
+             * Is the checkbox checked when it is first rendered.
+             */
+            checked?: boolean | undefined;
+            /**
+             * The color of the background in the checkbox.
+             * The checkmark will always be white.
+             */
+            color?: "indigo" | "red" | "jade" | undefined;
+            /**
+             * If the checkbox is disabled, it will not be clickable.
+             */
+            disabled?: boolean | undefined;
+            modelValue?: boolean | undefined;
+            /**
+             * Label for the checkbox.
+             * It is very important to set this to make the checkbox accessible.
+             */
+            label?: string | undefined;
+        }>, {
+            id: () => string;
+            color: string;
+        }>>> & {
+            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "id" | "color">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "update:modelValue", value: boolean) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+            /**
+             * A unique identifier for the checkbox on the whole page.
+             * It will be used to give match label with input for a11y.
+             */
+            id?: string | undefined;
+            /**
+             * Name attribute of the <input type="checkbox"/>.
+             */
+            name?: string | undefined;
+            /**
+             * Is the checkbox checked when it is first rendered.
+             */
+            checked?: boolean | undefined;
+            /**
+             * The color of the background in the checkbox.
+             * The checkmark will always be white.
+             */
+            color?: "indigo" | "red" | "jade" | undefined;
+            /**
+             * If the checkbox is disabled, it will not be clickable.
+             */
+            disabled?: boolean | undefined;
+            modelValue?: boolean | undefined;
+            /**
+             * Label for the checkbox.
+             * It is very important to set this to make the checkbox accessible.
+             */
+            label?: string | undefined;
+        }>, {
+            id: () => string;
+            color: string;
+        }>>> & {
+            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (value: boolean) => void;
+        }, string, {
+            id: string;
+            color: 'red' | 'indigo' | 'jade';
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+        /**
+         * A unique identifier for the checkbox on the whole page.
+         * It will be used to give match label with input for a11y.
+         */
+        id?: string | undefined;
+        /**
+         * Name attribute of the <input type="checkbox"/>.
+         */
+        name?: string | undefined;
+        /**
+         * Is the checkbox checked when it is first rendered.
+         */
+        checked?: boolean | undefined;
+        /**
+         * The color of the background in the checkbox.
+         * The checkmark will always be white.
+         */
+        color?: "indigo" | "red" | "jade" | undefined;
+        /**
+         * If the checkbox is disabled, it will not be clickable.
+         */
+        disabled?: boolean | undefined;
+        modelValue?: boolean | undefined;
+        /**
+         * Label for the checkbox.
+         * It is very important to set this to make the checkbox accessible.
+         */
+        label?: string | undefined;
+    }>, {
+        id: () => string;
+        color: string;
+    }>>> & {
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * A unique identifier for the checkbox on the whole page.
+     * It will be used to give match label with input for a11y.
+     */
+    id?: string | undefined;
+    /**
+     * Name attribute of the <input type="checkbox"/>.
+     */
+    name?: string | undefined;
+    /**
+     * Is the checkbox checked when it is first rendered.
+     */
+    checked?: boolean | undefined;
+    /**
+     * The color of the background in the checkbox.
+     * The checkmark will always be white.
+     */
+    color?: "indigo" | "red" | "jade" | undefined;
+    /**
+     * If the checkbox is disabled, it will not be clickable.
+     */
+    disabled?: boolean | undefined;
+    modelValue?: boolean | undefined;
+    /**
+     * Label for the checkbox.
+     * It is very important to set this to make the checkbox accessible.
+     */
+    label?: string | undefined;
+}>, {
+    id: () => string;
+    color: string;
+}>>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => void;
+}, string, {
+    id: string;
+    color: 'red' | 'indigo' | 'jade';
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        label: (_: {}) => any;
+    };
+});
+export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+//# sourceMappingURL=Checkbox.vue.d.ts.map

package/dist/vue/Checkbox.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../../Checkbox.vue.ts"],"names":[],"mappings":";;;;;gBA8ES,MAAM;mBAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;YAjBjC;;;eAGG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;;eAGG;;YAEH;;eAEG;;;YAGH;;;eAGG;;;;;;;;;;;;;;;;;;;;;;YA1BH;;;eAGG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;;eAGG;;YAEH;;eAEG;;;YAGH;;;eAGG;;;;;;;;;;gBAtBE,MAAM;mBAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;;;;;;;;;;;;;;;;;;;;;QAjBjC;;;WAGG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;;WAGG;;QAEH;;WAEG;;;QAGH;;;WAGG;;;;;;;;;;;;IA1BH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;;;QAtBE,MAAM;WAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;;;;;AA/ErC,wBA2GK;AACL,aAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,aAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,aAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE3B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC"}

package/dist/vue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}

package/index.ts

@@ -1 +1 @@
-export { default } from './Checkbox.vue';
+export { default } from './Checkbox.vue'

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@cypress-design/vue-checkbox",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "files": [
     "*"
   ],
-  "typings": "./dist/index.d.ts",
+  "typings": "./dist/vue/index.d.ts",
+  "module": "./dist/index.es.mjs",
   "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
+      "import": "./dist/index.es.mjs",
       "require": "./dist/index.umd.js"
     }
   },

package/tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../../tsconfig.vue.json",
-  "include": ["./*.vue", "./index.ts"],
+  "include": ["./*.vue", "./index.ts", "../constants.ts"],
   "compilerOptions": {
-    "outDir": "dist",
+    "outDir": "dist"
   }
 }

package/tsconfig.json

@@ -1,4 +1,10 @@
 {
   "extends": "../../../tsconfig.vue.json",
-  "include": ["*.vue", "*.ts", "*.tsx"]
+  "include": [
+    "*.vue",
+    "*.ts",
+    "*.tsx",
+    "../*.ts",
+    "../../../cypress/support/*.ts"
+  ]
 }

package/vite.config.ts

@@ -1,7 +1,7 @@
-import * as path from 'path';
-import generateViteConfig from '../../root.vite.config';
+import * as path from 'path'
+import generateViteConfig from '../../root.vite.config'
 
 export default generateViteConfig({
   entry: path.resolve(__dirname, './index.ts'),
   name: 'Checkbox',
-});
+})

package/Checkbox.stories.tsx

@@ -1,12 +0,0 @@
-import Checkbox from './Checkbox.vue';
-
-export default {
-  title: 'Checkbox',
-  component: Checkbox,
-};
-
-export const Sample = () => (
-  <div class="p-4">
-    <Checkbox label="Sample" id="sample" modelValue={true} />
-  </div>
-);

package/dist/Checkbox.vue.d.ts

@@ -1,40 +0,0 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id: string;
-    modelValue: boolean;
-    state?: ("default" | "success" | "danger") | undefined;
-    label?: string | undefined;
-}>, {
-    state: string;
-    label: undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id: string;
-    modelValue: boolean;
-    state?: ("default" | "success" | "danger") | undefined;
-    label?: string | undefined;
-}>, {
-    state: string;
-    label: undefined;
-}>>> & {
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}, {
-    state: "default" | "success" | "danger";
-    label: string;
-}>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};
-//# sourceMappingURL=Checkbox.vue.d.ts.map

package/dist/Checkbox.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";QA8BQ,MAAM;gBACE,OAAO;;;;;;;;;QADf,MAAM;gBACE,OAAO;;;;;;;;;;;;AA9BvB,wBAwFK;AACL,aAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,aAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,aAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE5B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC"}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.es.js

@@ -1,51 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, renderSlot, toDisplayString, createCommentVNode } from "vue";
-const _hoisted_1 = { class: "relative flex items-center" };
-const _hoisted_2 = { class: "flex items-center h-5" };
-const _hoisted_3 = ["id", "checked", "aria-describedby", "name"];
-const _hoisted_4 = { class: "ml-2 text-16px leading-normal" };
-const _hoisted_5 = ["for"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  props: {
-    id: null,
-    modelValue: { type: Boolean },
-    state: { default: "default" },
-    label: { default: void 0 }
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit }) {
-    const props = __props;
-    function updated() {
-      emit("update:modelValue", !props.modelValue);
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("input", {
-            id: __props.id,
-            checked: __props.modelValue,
-            "aria-describedby": `${__props.id}-description`,
-            name: __props.id,
-            type: "checkbox",
-            class: normalizeClass(["border-1 rounded border-gray-200 bg-white h-4 w-4 text-indigo-500 disabled:bg-gray-100 checked:bg-indigo-500", {
-              "text-indigo-500 checked:border-indigo-300 checked:bg-indigo-600 checked:text-indigo-600": __props.state === "default",
-              "checked:border-jade-300 checked:bg-jade-600 checked:text-jade-600": __props.state === "success",
-              "checked:border-red-300 checked:bg-red-600 checked:text-red-600": __props.state === "danger"
-            }]),
-            onClick: _cache[0] || (_cache[0] = ($event) => updated())
-          }, null, 10, _hoisted_3)
-        ]),
-        createElementVNode("div", _hoisted_4, [
-          renderSlot(_ctx.$slots, "label", {}, () => [
-            __props.label ? (openBlock(), createElementBlock("label", {
-              key: 0,
-              for: __props.id,
-              class: "disabled:text-gray-500 text-gray-800 font-light select-none"
-            }, toDisplayString(__props.label), 9, _hoisted_5)) : createCommentVNode("", true)
-          ])
-        ])
-      ]);
-    };
-  }
-});
-export { _sfc_main as default };
-//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","sources":["../Checkbox.vue"],"sourcesContent":["<template>\n  <div class=\"relative flex items-center\">\n    <div class=\"flex items-center h-5\">\n      <input :id=\"id\" :checked=\"modelValue\" :aria-describedby=\"`${id}-description`\" :name=\"id\" type=\"checkbox\"\n        class=\"border-1 rounded border-gray-200 bg-white h-4 w-4 text-indigo-500 disabled:bg-gray-100 checked:bg-indigo-500\"\n        :class=\"{\n          'text-indigo-500 checked:border-indigo-300 checked:bg-indigo-600 checked:text-indigo-600':\n            state === 'default',\n          'checked:border-jade-300 checked:bg-jade-600 checked:text-jade-600':\n            state === 'success',\n          'checked:border-red-300 checked:bg-red-600 checked:text-red-600':\n            state === 'danger',\n        }\" @click=\"updated()\" />\n    </div>\n    <div class=\"ml-2 text-16px leading-normal\">\n      <slot name=\"label\">\n        <label v-if=\"label\" :for=\"id\" class=\"disabled:text-gray-500 text-gray-800 font-light select-none\">\n          {{ label }}\n        </label>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\ntype InputState = 'success' | 'danger' | 'default';\n\nconst props = withDefaults(\n  defineProps<{\n    id: string;\n    modelValue: boolean;\n    state?: InputState;\n    label?: string;\n  }>(),\n  {\n    state: 'default',\n    label: undefined,\n  }\n);\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: boolean): void;\n}>();\n\nfunction updated() {\n  emit('update:modelValue', !props.modelValue)\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA4CmB,uBAAA;AACZ,WAAA,qBAAqB,CAAC,MAAM,UAAU;AAAA,IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}