@cypress-design/vue-checkbox 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @cypress-design/vue-checkbox
+
+## 0.1.0
+
+### Minor Changes
+
+- [#7](https://github.com/cypress-io/cypress-design/pull/7) [`04ae342`](https://github.com/cypress-io/cypress-design/commit/04ae342db01cf9db0eb6a3a99f8c0539d31ede04) Thanks [@elevatebart](https://github.com/elevatebart)! - Initial release of CSS:
+
+  Initial release of the following components
+
+  - Checkbox

package/Checkbox.stories.tsx

@@ -0,0 +1,12 @@
+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/Checkbox.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="relative flex items-center">
+    <div class="flex items-center h-5">
+      <input :id="id" :checked="modelValue" :aria-describedby="`${id}-description`" :name="id" type="checkbox"
+        class="border-1 rounded border-gray-200 bg-white h-4 w-4 text-indigo-500 disabled:bg-gray-100 checked:bg-indigo-500"
+        :class="{
+          'text-indigo-500 checked:border-indigo-300 checked:bg-indigo-600 checked:text-indigo-600':
+            state === 'default',
+          'checked:border-jade-300 checked:bg-jade-600 checked:text-jade-600':
+            state === 'success',
+          'checked:border-red-300 checked:bg-red-600 checked:text-red-600':
+            state === 'danger',
+        }" @click="updated()" />
+    </div>
+    <div class="ml-2 text-16px leading-normal">
+      <slot name="label">
+        <label v-if="label" :for="id" class="disabled:text-gray-500 text-gray-800 font-light select-none">
+          {{ label }}
+        </label>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+type InputState = 'success' | 'danger' | 'default';
+
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    modelValue: boolean;
+    state?: InputState;
+    label?: string;
+  }>(),
+  {
+    state: 'default',
+    label: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void;
+}>();
+
+function updated() {
+  emit('update:modelValue', !props.modelValue)
+}
+</script>

package/dist/Checkbox.vue.d.ts

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+export { default } from './Checkbox.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/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,CAAC"}

package/dist/index.es.js

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.umd.js

@@ -0,0 +1,2 @@
+(function(e,d){typeof exports=="object"&&typeof module!="undefined"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis!="undefined"?globalThis:e||self,e.Checkbox=d(e.Vue))})(this,function(e){"use strict";const d={class:"relative flex items-center"},n={class:"flex items-center h-5"},c=["id","checked","aria-describedby","name"],l={class:"ml-2 text-16px leading-normal"},o=["for"];return e.defineComponent({props:{id:null,modelValue:{type:Boolean},state:{default:"default"},label:{default:void 0}},emits:["update:modelValue"],setup(t,{emit:a}){const s=t;function r(){a("update:modelValue",!s.modelValue)}return(m,i)=>(e.openBlock(),e.createElementBlock("div",d,[e.createElementVNode("div",n,[e.createElementVNode("input",{id:t.id,checked:t.modelValue,"aria-describedby":`${t.id}-description`,name:t.id,type:"checkbox",class:e.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":t.state==="default","checked:border-jade-300 checked:bg-jade-600 checked:text-jade-600":t.state==="success","checked:border-red-300 checked:bg-red-600 checked:text-red-600":t.state==="danger"}]),onClick:i[0]||(i[0]=b=>r())},null,10,c)]),e.createElementVNode("div",l,[e.renderSlot(m.$slots,"label",{},()=>[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:t.id,class:"disabled:text-gray-500 text-gray-800 font-light select-none"},e.toDisplayString(t.label),9,o)):e.createCommentVNode("",!0)])])]))}})});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.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":"omBA4CmB,YAAA,CACZ,EAAA,oBAAqB,CAAC,EAAM,UAAU,CAC7C"}

package/index.ts

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

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@cypress-design/vue-checkbox",
+  "version": "0.1.0",
+  "files": [
+    "*"
+  ],
+  "typings": "./dist/index.d.ts",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "yarn build:module && yarn build:types",
+    "build:module": "yarn vite build",
+    "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
+  },
+  "license": "MIT"
+}

package/tsconfig.build.json

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

package/tsconfig.json

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

package/vite.config.ts

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