srcdev-nuxt-forms 2.1.13 → 2.1.14

package/components/forms/input-text/variants/stories/InputPasswordWithLabel.mdx

@@ -0,0 +1,8 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as InputPasswordWithLabelStories from './InputPasswordWithLabel.stories'
+
+<Meta of={InputPasswordWithLabelStories} />
+
+<Canvas of={InputPasswordWithLabelStories.Primary} />
+
+<Controls of={InputPasswordWithLabelStories.Primary} />

package/components/forms/input-text/variants/stories/InputPasswordWithLabel.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryFn } from '@nuxtjs/storybook';
+import InputPasswordWithLabel from '../InputPasswordWithLabel.vue';
+import propValidators from '../../../c12/prop-validators';
+
+export default {
+  title: 'Components/Forms/Input/Text/InputPasswordWithLabel',
+  component: InputPasswordWithLabel,
+  argTypes: {
+    type: {
+      options: propValidators.inputTypesText,
+      control: { type: 'select' },
+    },
+    inputMode: {
+      options: propValidators.inputMode,
+      control: { type: 'select' },
+    },
+    theme: {
+      options: propValidators.theme,
+      control: { type: 'select' },
+      default: 'primary',
+    },
+  },
+} as Meta<typeof InputPasswordWithLabel>;
+
+const Template: StoryFn<typeof InputPasswordWithLabel> = (args) => ({
+  components: { InputPasswordWithLabel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <Suspense>
+      <template #default>
+        <InputPasswordWithLabel v-bind="args">
+          <template v-if="${'iconOnly' in args}" v-slot:iconOnly>${args.iconOnly}</template>
+        </InputPasswordWithLabel>
+      </template>
+      <template #fallback>
+        <div>Loading...</div>
+      </template>
+    </Suspense>
+  `,
+  // template: '<InputPasswordWithLabel v-bind="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  type: 'password',
+  maxlength: 255,
+  id: 'testId',
+  name: 'testName',
+  placeholder: 'Input placeholder text',
+  label: 'Input label text',
+  errorMessage: 'This is an error message',
+  fieldHasError: false,
+  required: true,
+  styleClassPassthrough: ['testClass1', 'testClass2'],
+  theme: 'primary',
+  modelValue: 'This is the model value',
+  iconOnly: `<Icon name="radix-icons:eye-none" class="icon" />`,
+};

package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -10,7 +10,7 @@
         <slot name="right"></slot>
       </template>
     </InputTextareaCore>
-    <InputError :errorMessage :fieldHasError :id :isDetached="false" />
+    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="false" />
   </div>
 </template>
 

package/nuxt.config.ts

@@ -1,17 +1,24 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-// import { createResolver } from '@nuxt/kit';
-// const { resolve } = createResolver(import.meta.url);
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  // css: [resolve('./assets/styles/main.css')],
   css: ['modern-normalize', './assets/styles/main.css'],
-  modules: ['@nuxt/icon'],
+  modules: ['@nuxt/icon', '@nuxt/test-utils/module', '@nuxtjs/storybook'],
+  typescript: {
+    tsConfig: {
+      compilerOptions: {
+        types: ['vitest/globals'], // TypeScript support for globals
+      },
+    },
+  },
   components: [
     {
       path: './components',
       pathPrefix: false,
     },
   ],
+  vue: {
+    runtimeCompiler: true,
+  },
   compatibilityDate: '2024-07-13',
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.13",
+  "version": "2.1.14",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -12,7 +12,9 @@
     "preview": "nuxt preview .playground",
     "lint": "eslint .",
     "postinstall": "nuxt prepare .playground",
-    "release": "release-it"
+    "release": "release-it",
+    "storybook": "storybook dev --port 6006 --config-dir .storybook",
+    "test": "vitest"
   },
   "files": [
     "assets/",
@@ -23,9 +25,21 @@
   "devDependencies": {
     "@nuxt/eslint-config": "0.6.1",
     "@nuxt/icon": "1.7.5",
+    "@nuxt/test-utils": "3.14.4",
+    "@nuxtjs/storybook": "8.3.2",
+    "@storybook/addon-essentials": "8.4.6",
+    "@storybook/addon-interactions": "8.4.6",
+    "@storybook/addon-links": "8.4.6",
+    "@storybook/vue3": "8.4.6",
+    "@vue/test-utils": "2.4.6",
     "eslint": "9.15.0",
+    "happy-dom": "15.11.6",
+    "http-proxy-middleware": "3.0.3",
+    "nuxt": "3.14.1592",
     "release-it": "17.10.0",
-    "typescript": "5.6.3"
+    "typescript": "5.6.3",
+    "vitest": "2.1.5",
+    "vue": "3.5.13"
   },
   "dependencies": {
     "@iconify-json/carbon": "1.2.4",
@@ -34,7 +48,6 @@
     "@iconify-json/radix-icons": "1.2.1",
     "@iconify-json/ri": "1.2.3",
     "modern-normalize": "3.0.1",
-    "nuxt": "3.14.159",
     "zod": "3.23.8"
   },
   "release-it": {

package/components/forms/input-radio/InputRadiobuttonCore.vue

@@ -1,170 +0,0 @@
-<template>
-  <div class="input-radiobutton-wrapper" :data-form-theme="formTheme" :class="[size, { error: fieldHasError }]">
-    <slot name="checkedIcon" v-if="isChecked">
-      <Icon name="material-symbols:circle" class="input-checked-icon" />
-    </slot>
-    <input
-      type="radio"
-      :true-value="trueValue"
-      :false-value="falseValue"
-      :id
-      :name
-      :required="required && !multipleOptions"
-      :value="trueValue"
-      class="input-radiobutton-core"
-      :class="[size, { error: fieldHasError }]"
-      v-model="modelValue"
-      ref="inputField"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, fieldHasError } = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    value: false,
-  },
-  trueValue: {
-    type: [String, Number, Boolean],
-    default: true,
-  },
-  falseValue: {
-    type: [String, Number, Boolean],
-    default: false,
-  },
-  multipleOptions: {
-    type: Boolean,
-    default: false,
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  fieldHasError: {
-    type: Boolean,
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const slots = useSlots();
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = computed(() => slots.right !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
-
-const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
-});
-
-const modelValue = defineModel<any>();
-
-const inputField = ref<HTMLInputElement | null>(null);
-
-const isArray = Array.isArray(modelValue.value);
-
-const isChecked = computed(() => {
-  if (isArray) {
-    return modelValue.value.indexOf(trueValue) > -1;
-  } else {
-    return modelValue.value === trueValue;
-  }
-});
-</script>
-
-<style lang="css">
-.input-radiobutton-wrapper {
-  --_checkbox-size: initial;
-  --_outline-width: var(--input-outline-width-thin);
-  --_border-width: var(--input-border-width-default);
-  --_border-color: var(--theme-form-radio-border);
-  --_outline-color: var(--theme-form-radio-outline);
-  --_box-shadow: none;
-
-  display: grid;
-  grid-template-areas: 'element-stack';
-  /* place-content: center; */
-
-  background-color: var(--theme-form-radio-bg);
-  border-radius: 50%;
-  border: var(--_border-width) solid var(--_border-color);
-  outline: 1px solid var(--_outline-color);
-  box-shadow: var(--_box-shadow);
-
-  height: var(--_checkbox-size);
-  width: var(--_checkbox-size);
-
-  &:has(.input-radiobutton-core:focus-visible) {
-    --_box-shadow: var(--theme-form-focus-box-shadow);
-  }
-
-  /* Sizes */
-  &.x-small {
-    --_checkbox-size: 20px;
-  }
-  &.small {
-    --_checkbox-size: 24px;
-  }
-  &.normal {
-    --_checkbox-size: 34px;
-  }
-  &.medium {
-    --_checkbox-size: 40px;
-  }
-  &.large {
-    --_checkbox-size: 44px;
-  }
-
-  .input-checked-icon {
-    --_checked-size: calc(var(--_checkbox-size) * 0.65);
-    grid-area: element-stack;
-    align-self: center;
-    justify-self: center;
-    color: var(--theme-form-radio-symbol);
-    height: var(--_checked-size);
-    width: var(--_checked-size);
-    translate: -2px -2px;
-  }
-
-  .input-radiobutton-core {
-    grid-area: element-stack;
-    appearance: none;
-    margin: 0;
-    overflow: hidden;
-    opacity: 0;
-
-    height: var(--_checkbox-size);
-    width: var(--_checkbox-size);
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:focus-visible {
-      --_box-shadow: var(--theme-form-focus-box-shadow);
-    }
-  }
-}
-</style>

package/components/forms/input-radio/InputRadiobuttonWithLabel.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="input-radiobutton-with-label" :class="[elementClasses, { error: fieldHasError }]">
-    <InputRadiobuttonCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme>
-      <template #checkedIcon>
-        <slot name="checkedIcon"></slot>
-      </template>
-    </InputRadiobuttonCore>
-    <label v-if="hasLabelContent" class="input-radiobutton-label body-normal" :for="id">
-      <slot name="labelContent"></slot>
-    </label>
-    <label v-else class="input-radiobutton-label body-normal-semibold" :for="id">{{ label }}</label>
-  </div>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-
-const { id, name, label, required, fieldHasError, trueValue, falseValue, size, styleClassPassthrough, theme } = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  fieldHasError: {
-    type: Boolean,
-    default: false,
-  },
-  trueValue: {
-    type: [String, Number, Boolean],
-    default: true,
-  },
-  falseValue: {
-    type: [String, Number, Boolean],
-    default: false,
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasLabelContent = computed(() => slots.labelContent !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
-
-const modelValue = defineModel();
-</script>
-
-<style lang="css">
-.input-radiobutton-with-label {
-  display: grid;
-  align-items: center;
-  grid-template-columns: auto 1fr;
-
-  .input-radiobutton-label {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    margin-block: 8px;
-    padding-inline: 8px;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-</style>