srcdev-nuxt-components 9.6.7 → 9.6.9

package/app/components/05.forms/input-range/InputRangeCore.vue

@@ -1,169 +0,0 @@
-<template>
-  <div class="input-range-wrapper" :data-theme="theme">
-    <div v-if="slots.left" class="slot left">
-      <slot name="left"></slot>
-    </div>
-
-    <div class="input-range-container">
-      <slot v-if="slots.markers" name="markers"></slot>
-
-      <input
-        :id
-        ref="inputRange"
-        v-model="modelValue"
-        type="range"
-        :name
-        :required
-        :min
-        :max
-        :step
-        :list="slots.datalist ? name + '-datalist' : ''"
-        :class="['input-range-core', `input-range--${weight}`, styleClassPassthrough, { 'has-markers': slots.markers }]"
-        :aria-describedby
-      />
-
-      <slot v-if="slots.datalist" name="datalist"></slot>
-    </div>
-    <div v-if="slots.right" class="slot right">
-      <slot name="right"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { FormUiTheme, FormWeight } from "~/types/forms/types.forms";
-
-interface Props {
-  id: string;
-  name: string;
-  min: number;
-  max: number;
-  step?: number;
-  placeholder?: string;
-  required?: boolean;
-  theme?: FormUiTheme;
-  weight?: FormWeight;
-  fieldHasError?: boolean;
-  styleClassPassthrough?: string | string[];
-  ariaDescribedby?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-  step: 1,
-  placeholder: "",
-  required: false,
-  theme: "default",
-  weight: "normal",
-  fieldHasError: false,
-  styleClassPassthrough: () => [],
-  ariaDescribedby: "",
-});
-
-const slots = useSlots();
-
-const modelValue = defineModel<number>({
-  required: true,
-});
-</script>
-
-<style lang="css">
-@layer components {
-  .input-range-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-
-    .slot {
-      align-self: flex-start;
-
-      .input-button {
-        border-radius: var(--form-input-border-radius);
-        width: var(--input-range-button-size);
-        height: var(--input-range-button-size);
-
-        .btn-icon {
-          margin: initial;
-        }
-      }
-    }
-
-    .input-range-container {
-      flex-grow: 1;
-
-      display: grid;
-      grid-template-areas: "element-stack";
-
-      .input-range-markers {
-        grid-area: element-stack;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        z-index: 2;
-
-        .marker {
-          background-color: var(--input-range-marker-background-colour, hsl(0, 29%, 3%));
-          padding: var(--input-range-marker-padding, 0.5rem);
-          border-radius: var(--input-range-marker-border-radius, 50%);
-          overflow: hidden;
-          outline: var(--input-range-marker-outline-width, 0.1rem) solid
-            var(--input-range-marker-outline-colour, var(--slate-04));
-
-          &:hover {
-            cursor: pointer;
-          }
-
-          .marker-icon {
-            font-size: var(--input-range-marker-icon-size, 2rem);
-            display: block;
-            color: var(--input-range-marker-icon-colour, var(--input-range-accent-colour, var(--theme-accent)));
-          }
-        }
-      }
-
-      .input-range-core {
-        grid-area: element-stack;
-
-        accent-color: var(--input-range-accent-colour, var(--theme-accent));
-        height: var(--input-range-button-size);
-        margin: 0;
-        width: 100%;
-
-        &:focus-visible {
-          box-shadow: var(--form-focus-box-shadow);
-        }
-
-        &.has-markers {
-          accent-color: var(--input-range-accent-colour, var(--theme-accent));
-          height: 0.2rem;
-          z-index: 2;
-          translate: 0 1.3rem;
-
-          &::-webkit-slider-thumb {
-            opacity: 0;
-            &:hover {
-              cursor: pointer;
-            }
-          }
-        }
-      }
-
-      .input-range-datalist {
-        display: flex;
-        flex-direction: column;
-        font-family: var(--font-family);
-        font-size: var(--input-range-datalist-font-size, 1.4rem);
-        font-weight: var(--input-range-datalist-font-weight, 500);
-        justify-content: space-between;
-        writing-mode: vertical-lr;
-        width: 100%;
-
-        option {
-          padding: 0;
-        }
-      }
-    }
-  }
-}
-</style>

package/app/components/05.forms/input-range/stories/InputRangeCore.stories.ts

@@ -1,126 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
-import StorybookComponent from "../InputRangeCore.vue";
-
-interface InputRangeCoreStoryArgs {
-  id: string;
-  name: string;
-  min: number;
-  max: number;
-  step: number;
-  required: boolean;
-  fieldHasError: boolean;
-  weight: string;
-}
-
-export default {
-  title: "Components/Forms/Input Range/InputRangeCore",
-  component: StorybookComponent,
-  argTypes: {
-    id: { control: "text", table: { category: "Basic" } },
-    name: { control: "text", table: { category: "Basic" } },
-    min: { control: "number", table: { category: "Basic" } },
-    max: { control: "number", table: { category: "Basic" } },
-    step: { control: "number", table: { category: "Basic" } },
-    required: { control: "boolean", table: { category: "Basic" } },
-    fieldHasError: { control: "boolean", table: { category: "States" } },
-    weight: { control: "text", table: { category: "Styling" } },
-  },
-  args: {
-    id: "range-default",
-    name: "rangeDefault",
-    min: 0,
-    max: 100,
-    step: 1,
-    required: false,
-    fieldHasError: false,
-    weight: "normal",
-  },
-} as Meta<InputRangeCoreStoryArgs>;
-
-const Template: StoryFn<InputRangeCoreStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(50);
-    return { args, modelValue };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue" />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const ErrorState = Template.bind({});
-ErrorState.args = { fieldHasError: true };
-
-const WithStepButtonsTemplate: StoryFn<InputRangeCoreStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(50);
-    return { args, modelValue };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue">
-        <template #left>
-          <button type="button" @click="modelValue = Math.max(args.min, modelValue - args.step)">−</button>
-        </template>
-        <template #right>
-          <button type="button" @click="modelValue = Math.min(args.max, modelValue + args.step)">+</button>
-        </template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const WithStepButtons = WithStepButtonsTemplate.bind({});
-
-const WithMarkersTemplate: StoryFn<InputRangeCoreStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(50);
-    return { args, modelValue };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue">
-        <template #markers>
-          <div class="input-range-markers">
-            <div class="marker"><span class="marker-icon">😀</span></div>
-            <div class="marker"><span class="marker-icon">🙂</span></div>
-            <div class="marker"><span class="marker-icon">😐</span></div>
-          </div>
-        </template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const WithMarkers = WithMarkersTemplate.bind({});
-WithMarkers.args = { min: 0, max: 2, step: 1 };
-
-const WithDatalistTemplate: StoryFn<InputRangeCoreStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(50);
-    return { args, modelValue };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue">
-        <template #datalist>
-          <datalist :id="\`\${args.name}-datalist\`" class="input-range-datalist">
-            <option value="0" label="Low"></option>
-            <option value="50" label="Medium"></option>
-            <option value="100" label="High"></option>
-          </datalist>
-        </template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const WithDatalist = WithDatalistTemplate.bind({});

package/app/components/05.forms/input-range/stories/InputRangeDefault.stories.ts

@@ -1,108 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import StorybookComponent from "../InputRangeDefault.vue";
-import type { FormUiTheme } from "~/types/forms/types.forms.d";
-
-interface InputRangeDefaultStoryArgs {
-  modelValue: number;
-  name: string;
-  label: string;
-  min: number;
-  max: number;
-  step: number;
-  errorMessage: string;
-  fieldHasError: boolean;
-  required: boolean;
-  theme: FormUiTheme;
-  stepDownLabel: string;
-  stepUpLabel: string;
-  useStepButtons: boolean;
-}
-
-export default {
-  title: "Components/Forms/Input Range/InputRangeDefault",
-  component: StorybookComponent,
-  argTypes: {
-    modelValue: { control: "number", table: { category: "Model" } },
-    name: { control: "text", table: { category: "Basic" } },
-    label: { control: "text", table: { category: "Basic" } },
-    min: { control: "number", table: { category: "Basic" } },
-    max: { control: "number", table: { category: "Basic" } },
-    step: { control: "number", table: { category: "Basic" } },
-    errorMessage: { control: "text", table: { category: "Validation" } },
-    fieldHasError: { control: "boolean", table: { category: "Validation" } },
-    required: { control: "boolean", table: { category: "Validation" } },
-    theme: {
-      control: { type: "select" },
-      options: ["default", "success", "error", "warning"],
-      table: { category: "Styling" },
-    },
-    stepDownLabel: { control: "text", description: "Localisation override for the step-down button", table: { category: "Accessibility" } },
-    stepUpLabel: { control: "text", description: "Localisation override for the step-up button", table: { category: "Accessibility" } },
-    useStepButtons: { control: "boolean", description: "Render +/- step buttons via left/right slots", table: { category: "Slots" } },
-  },
-  args: {
-    modelValue: 50,
-    name: "priceRange",
-    label: "Price range",
-    min: 0,
-    max: 100,
-    step: 1,
-    errorMessage: "",
-    fieldHasError: false,
-    required: false,
-    theme: "default",
-    stepDownLabel: "Step down",
-    stepUpLabel: "Step up",
-    useStepButtons: false,
-  },
-} as Meta<InputRangeDefaultStoryArgs>;
-
-const Template: StoryFn<InputRangeDefaultStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent
-        v-model="args.modelValue"
-        :name="args.name"
-        :label="args.label"
-        :min="args.min"
-        :max="args.max"
-        :step="args.step"
-        :error-message="args.errorMessage"
-        :field-has-error="args.fieldHasError"
-        :required="args.required"
-        :theme="args.theme"
-        :step-down-label="args.stepDownLabel"
-        :step-up-label="args.stepUpLabel"
-      >
-        <template v-if="args.useStepButtons" #left><span>−</span></template>
-        <template v-if="args.useStepButtons" #right><span>+</span></template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const WithStepButtons = Template.bind({});
-WithStepButtons.args = { useStepButtons: true };
-
-export const WithError = Template.bind({});
-WithError.args = {
-  fieldHasError: true,
-  errorMessage: "Please choose a value within the allowed range",
-  theme: "error",
-};
-
-export const Required = Template.bind({});
-Required.args = { required: true };
-
-export const LocalisedLabels = Template.bind({});
-LocalisedLabels.args = {
-  useStepButtons: true,
-  stepDownLabel: "Diminuer",
-  stepUpLabel: "Augmenter",
-};

package/app/components/05.forms/input-select/InputSelectCore.vue

@@ -1,188 +0,0 @@
-<template>
-  <div
-    class="input-select-wrapper"
-    :data-theme="theme"
-    :data-invalid="fieldHasError ? '' : null"
-    :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
-  >
-    <select
-      :id
-      v-model="modelValue"
-      :aria-invalid="fieldHasError ? 'true' : undefined"
-      :class="['input-select-core', elementClasses]"
-      :name
-      :title
-      :required
-      :aria-describedby="ariaDescribedby"
-      @focusin="isActive = true"
-      @focusout="isActive = false"
-      @change="isDirty = true"
-    >
-      <option v-if="placeholder" value="" disabled :selected="!modelValue" class="input-select-core-option placeholder">
-        {{ placeholder }}
-      </option>
-      <option
-        v-for="item in fieldData.data"
-        :key="item.id"
-        :value="item.value"
-        :selected="String(item.value) === String(modelValue)"
-        class="input-select-core-option"
-      >
-        <Icon
-          v-if="item.icon"
-          :name="item.icon"
-          class="input-select-core-option-decorator-icon"
-          aria-hidden="true"
-          focusable="false"
-        />
-        {{ item.label }}
-      </option>
-    </select>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IFormMultipleOptions, FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
-
-interface Props {
-  id: string;
-  name: string;
-  placeholder?: string;
-  title?: string;
-  required?: boolean;
-  fieldHasError?: boolean;
-  styleClassPassthrough?: string | string[];
-  theme?: FormUiTheme;
-  inputVariant?: InputUiVariant;
-  ariaDescribedby?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: "",
-  title: "Please select an option",
-  required: false,
-  fieldHasError: false,
-  styleClassPassthrough: () => [],
-  theme: "default",
-  inputVariant: "normal",
-  ariaDescribedby: "",
-});
-
-const modelValue = defineModel<string | number | readonly number[]>({ required: true });
-const isDirty = defineModel<boolean>("isDirty");
-const isActive = defineModel<boolean>("isActive");
-const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-@layer components {
-.input-select-wrapper {
-  /* Public --input-select-* tokens, inline-fallback to the shared --theme-* tokens (see
-     theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
-     input/control that also reads --theme-input-surface/--theme-border. --_border is the one
-     genuinely reused value (border, underlined border-bottom, open-picker border); the rest of
-     this component's tokens are used at exactly one point each, so they're inlined directly
-     rather than wrapped in a private var with no composition or state-swap behind it (see
-     pitfall #20 in CLAUDE.md). */
-  --_border: var(--input-select-border, var(--theme-border));
-  /* Split so hover (mouse) and :focus-visible (keyboard/assistive) can diverge — both default to
-     the same --theme-border-focus today, identical appearance to before this token existed, but
-     each now has its own override point. */
-  --_border-focus: var(--input-select-border-focus, var(--theme-border-focus));
-
-  background-color: var(--input-select-surface, var(--theme-input-surface));
-  overflow: hidden;
-
-  z-index: 2;
-  position: relative;
-  transition: all var(--theme-form-transition-duration) ease-in-out;
-
-  &.normal {
-    border: var(--form-element-border-width) solid var(--_border);
-    border-radius: var(--form-input-border-radius);
-    outline: var(--form-element-outline-width) solid transparent;
-  }
-
-  &.underlined {
-    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
-  }
-
-  &:has(:hover) {
-    outline: var(--form-element-outline-width-focus) solid
-      var(--input-select-border-hover, var(--theme-border-focus));
-    outline-offset: var(--form-element-outline-offset-focus);
-  }
-
-  &:has(select:focus-visible) {
-    outline: var(--form-element-outline-width-focus) solid var(--_border-focus);
-    outline-offset: var(--form-element-outline-offset-focus);
-  }
-
-  .input-select-core {
-    appearance: none;
-    background-color: transparent;
-    display: flex;
-    align-items: center;
-
-    /* Start modern Select CSS */
-    &,
-    &::picker(select) {
-      appearance: base-select;
-    }
-
-    &::picker(select) {
-      transition:
-        display allow-discrete var(--theme-form-transition-duration),
-        opacity var(--theme-form-transition-duration),
-        overlay var(--theme-form-transition-duration) allow-discrete;
-    }
-
-    &:not(:open)::picker(select) {
-      opacity: 0;
-    }
-
-    &:open::picker(select) {
-      opacity: 1;
-      border: var(--form-element-border-width) solid var(--_border);
-      outline: var(--form-element-outline-width) solid var(--_border-focus);
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-
-    border: none;
-    outline: none;
-    border-radius: 0;
-    width: 100%;
-
-    /* END modern Select CSS */
-
-    font-family: var(--font-family);
-    font-size: var(--input-font-size);
-    /* line-height: var(--input-element-line-height); */
-    padding-block: var(--input-padding-block);
-    padding-inline: var(--input-padding-inline);
-    min-height: var(--input-min-height);
-
-    .input-select-core-option {
-      min-height: var(--input-select-option-min-height);
-      gap: 1.5rem;
-      transition: all var(--theme-form-transition-duration) ease-in-out;
-
-      &:hover {
-        background-color: var(--input-select-surface-hover, var(--theme-input-surface-hover));
-      }
-
-      .input-select-core-option-decorator-icon {
-        display: inline-block;
-        width: 1.5rem;
-        height: 1.5rem;
-      }
-    }
-  }
-}
-}
-</style>