@antify/ui 1.0.0

package/dist/components/inputs/__stories/AntCheckbox.stories.js

@@ -0,0 +1,415 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.WithValidator = exports.Summary = exports.Docs = void 0;
+var _AntCheckbox = _interopRequireDefault(require("../AntCheckbox.vue"));
+var _vue = require("vue");
+var _enums = require("../../../enums");
+var _validate = require("@antify/validate");
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Inputs/Checkbox",
+  component: _AntCheckbox.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.Size)
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntCheckbox: _AntCheckbox.default
+    },
+    setup() {
+      const value = (0, _vue.computed)({
+        get() {
+          return args.modelValue;
+        },
+        set(val) {
+          args.modelValue = val;
+        }
+      });
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+      <div class="m-2">
+        <AntCheckbox v-bind="args" v-model="value"/>
+        <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
+      </div>
+    `
+  })
+};
+const WithValidator = exports.WithValidator = {
+  render: args => ({
+    components: {
+      AntCheckbox: _AntCheckbox.default
+    },
+    setup() {
+      const modelValue = (0, _vue.computed)({
+        get() {
+          return args.modelValue;
+        },
+        set(val) {
+          args.modelValue = val;
+        }
+      });
+      const validator = (0, _vue.ref)((0, _validate.useFieldValidator)(val => !val ? "Check this box!" : true));
+      return {
+        args,
+        modelValue,
+        validator,
+        InputState: _enums.InputState
+      };
+    },
+    template: `
+      <div class="m-2">
+        <AntCheckbox
+          v-bind="args"
+          v-model="modelValue"
+          :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+          :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
+          @validate="(val) => validator.validate(val)"
+        >
+          Accept some kind of document before continuing
+        </AntCheckbox>
+        <span class="text-sm text-gray-500">Reactive value: {{ modelValue }}</span>
+      </div>
+    `
+  }),
+  args: {
+    modelValue: false
+  }
+};
+const Summary = exports.Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntCheckbox: _AntCheckbox.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      const offValue = (0, _vue.ref)(false);
+      const onValue = (0, _vue.ref)(true);
+      return {
+        args,
+        offValue,
+        onValue,
+        InputState: _enums.InputState,
+        Size: _enums.Size
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>State & false</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.base"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.info"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.success"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.warning"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.danger"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>State & true</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.base"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.info"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.success"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.warning"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.danger"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Size</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="Size.lg"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="Size.lg"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="Size.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="Size.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="Size.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="Size.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="Size.xs"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="Size.xs"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="Size.xs2"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="Size.xs"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntFormGroup direction="row">
+              <AntCheckbox
+                v-model="offValue"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base"
+                disabled>
+                Value
+              </AntCheckbox>
+              <AntCheckbox
+                v-model="onValue"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base"
+                disabled>
+                Value
+              </AntCheckbox>
+            </AntFormGroup>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntFormGroup direction="row">
+              <AntCheckbox
+                v-model="offValue"
+                :readonly="true"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base">
+                Value
+              </AntCheckbox>
+              <AntCheckbox
+                v-model="onValue"
+                :readonly="true"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base">
+                Value
+              </AntCheckbox>
+            </AntFormGroup>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntCheckbox
+              v-model="offValue"
+              class="w-28"
+              label="Label"
+              description="Lorem ipsum dolor sit amet."
+              :state="InputState.base"
+              skeleton>
+              Value
+            </AntCheckbox>
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue"/>
+          <AntCheckbox v-model="onValue"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Label & label + value</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue" label="Label"/>
+          <AntCheckbox v-model="onValue" label="Label"/>
+          <AntCheckbox v-model="offValue" label="Label">
+            Value
+          </AntCheckbox>
+          <AntCheckbox v-model="onValue" label="Label">
+            Value
+          </AntCheckbox>
+        </AntFormGroup>
+        <AntFormGroupLabel>Description & description + value</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
+          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
+          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet">
+            Value
+          </AntCheckbox>
+          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet">
+            Value
+          </AntCheckbox>
+        </AntFormGroup>
+        <AntFormGroupLabel>Content</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue" class="w-28">
+            Value
+          </AntCheckbox>
+          <AntCheckbox v-model="onValue" class="w-28">
+            Value
+          </AntCheckbox>
+        </AntFormGroup>
+        <AntFormGroupLabel>Label & Description</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
+          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Label & Description & Content</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            description="Lorem ipsum dolor sit amet"
+            label="Label"
+          >
+            Value
+          </AntCheckbox>
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            description="Lorem ipsum dolor sit amet"
+            label="Label"
+          >
+            Value
+          </AntCheckbox>
+        </AntFormGroup>
+      </AntFormGroup>
+    `
+  })
+};