@cypress-design/vue-checkbox 0.2.1 → 0.3.1

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@cypress-design/vue-checkbox",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "files": [
     "*"
   ],
   "typings": "./dist/index.d.ts",
+  "module": "./dist/index.es.mjs",
   "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "import": "./dist/index.es.mjs",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
@@ -19,7 +20,11 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@cypress-design/vue-icon": "*"
+    "@cypress-design/constants-checkbox": "*",
+    "@cypress-design/react-icon": "*"
+  },
+  "devDependencies": {
+    "@cypress-design/css": "*"
   },
   "license": "MIT"
 }

package/tsconfig.build.json

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

package/tsconfig.json

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

package/Checkbox.stories.mdx

@@ -1,75 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
-import { version } from "./package.json"
-import changelog from "./CHANGELOG.md?raw"
-
-import Checkbox from './Checkbox.vue'
-
-<h1>Checkbox<span className="text-lg font-normal"> - v{version}</span></h1>
-
-<Meta title="Checkbox" component={Checkbox}
-  argTypes={{
-    color: {
-      options: ['indigo', 'red', 'jade'],
-      control: {
-        type: 'select',
-      },
-    },
-  }}
-  parameters={{
-    design: {
-      type: "figma",
-      url: 'https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System?node-id=1027%3A9825',
-    }
-  }} />
-
-<Canvas withSource="none">
-  <Story name="Checkbox">
-    {({ color }) => ({ 
-      template: `
-        <Checkbox checked label="Checked" :color="color"/>
-        <br />
-        <Checkbox label="Unchecked" :color="color"/>
-        <br />
-        <Checkbox chedked disabled label="Disabled & checked" :color="color"/>
-        <br />
-        <Checkbox disabled label="Disabled & unchecked" :color="color"/>
-      `,
-      components: { Checkbox },
-      data: () => ({
-        color
-      })
-    })}
-  </Story>
-</Canvas>
-
-<ArgsTable />
-
-## Usage
-
-Install the component
-
-```
-yarn add @cypress-design/vue-checkbox
-```
-
-In the script, import the component
-
-```js
-import Checkbox from '@cypress-design/vue-checkbox'
-```
-
-then in the template, use it
-
-```html
-<Checkbox checked label="Checked" color="indigo"/>
-```
-
-or with the v-model
-
-```html
-<Checkbox v-model="checked" label="Checked" color="indigo"/>
-```
-
-<Description>
-  {changelog.replace(/^# .+/, '## Changelog')}
-</Description>

package/dist/index.es.js

@@ -1,102 +0,0 @@
-import { h, defineComponent, ref, computed, openBlock, createElementBlock, createElementVNode, createBlock, unref, createCommentVNode, normalizeClass, renderSlot, toDisplayString } from "vue";
-import * as iconsRegistry from "@cypress-design/icon-registry";
-const compileVueIconProperties = ({
-  body,
-  compiledClasses,
-  size,
-  class: className,
-  interactiveColorsOnGroup,
-  ...attributes
-}) => {
-  Object.keys(attributes).forEach((key) => {
-    if (key.toLowerCase().endsWith("color")) {
-      delete attributes[key];
-    }
-  });
-  const componentProps = {
-    width: size,
-    height: size,
-    fill: "none",
-    innerHTML: body,
-    ...attributes
-  };
-  if (compiledClasses.length) {
-    componentProps.class = compiledClasses.join(" ");
-  }
-  return componentProps;
-};
-const IconCheckmarkSmall = (props) => {
-  const { sizeWithDefault: size, compiledClasses } = iconsRegistry.getComponentAttributes({ ...props, availableSizes: ["16"] });
-  const iconBodies = {
-    "16": '<path d="M5 8.5 7.5 11 11 5" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
-  };
-  const body = iconBodies[size];
-  if (!body) {
-    throw Error(`Icon "checkmark-small" is not available in size ${size}`);
-  }
-  return h("svg", compileVueIconProperties({
-    ...props,
-    size,
-    body,
-    compiledClasses
-  }));
-};
-const _hoisted_1 = { class: "relative flex items-center" };
-const _hoisted_2 = ["id", "name", "disabled", "checked"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Checkbox",
-  props: {
-    id: { default: crypto.randomUUID() },
-    modelValue: { type: Boolean },
-    color: { default: "indigo" },
-    label: null,
-    disabled: { type: Boolean },
-    checked: { type: Boolean }
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const localChecked = ref(props.modelValue || props.checked);
-    function updated() {
-      localChecked.value = !localChecked.value;
-      emit("update:modelValue", localChecked.value);
-    }
-    const checkboxClasses = computed(() => [
-      "block border-1 rounded h-16px w-16px",
-      props.disabled ? "border-gray-200 bg-gray-100" : localChecked.value ? {
-        "border-indigo-500 bg-indigo-400": props.color === "indigo",
-        "border-jade-500 bg-jade-400": props.color === "jade",
-        "border-red-500 bg-red-400": props.color === "red"
-      } : "border-gray-200 bg-white"
-    ]);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1, [
-        createElementVNode("input", {
-          id: __props.id,
-          class: "absolute inset-0 w-0 h-0 opacity-0",
-          name: __props.id,
-          type: "checkbox",
-          onChange: updated,
-          disabled: props.disabled,
-          checked: localChecked.value
-        }, null, 40, _hoisted_2),
-        localChecked.value ? (openBlock(), createBlock(unref(IconCheckmarkSmall), {
-          key: 0,
-          strokeColor: "white",
-          class: "absolute"
-        })) : createCommentVNode("", true),
-        createElementVNode("span", {
-          class: normalizeClass(unref(checkboxClasses))
-        }, null, 2),
-        renderSlot(_ctx.$slots, "label", {}, () => [
-          __props.label ? (openBlock(), createElementBlock("span", {
-            key: 0,
-            class: normalizeClass(["block ml-2 text-16px leading-normal font-light select-none", __props.disabled ? "text-gray-500" : "text-gray-800"])
-          }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
-        ])
-      ]);
-    };
-  }
-});
-export { _sfc_main as default };
-//# sourceMappingURL=index.es.js.map