Skip to content

Commit

Permalink
[TASK] control fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@SamBrishes
SamBrishes committed Apr 7, 2024
1 parent 3cee269 commit 4940a9c
Show file tree
Hide file tree
Showing 18 changed files with 399 additions and 231 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,24 @@ miru.ink / Changelog
- Add: New `body` slot on `DialogStd` component to replace inner `<article>` structure.
- Add: New `escape` property on `DialogStd` component to allow closing the modal using the ESC key.
- Add: New wobble animation when trying to close a static modal by an click outside.
- Add: `CheckCircle` / `XCircle` lucide icon components.
- Update: Change the `AvatarGroup` limit class and label when not enough space is available.
- Update: `package.json` dependencies.
- Update: Decrease height (by lower the padding) on `BadgeStd` component.
- Update: Minor styling changes on `TableStd` to support usage inside `CardStd` (using new content slot).
- Update: Change font-size and icons on `AlertMessage` component.
- Update: Change font-size on `AlertStd` component.
- Update: Apply new 32 / 40 / 56 px height system on `BallonSelector` control field.
- Update: Apply new 32 / 40 / 56 px height system on `InputField` control field.
- Update: Apply new 32 / 40 / 56 px height system on `NumberField` control field.
- Update: Apply new 32 / 40 / 56 px height system on `PasswordField` control field.
- Update: Apply new 32 / 40 / 56 px height system on `SelectField` control field.
- Fix: Add media-query based `max-width` stylings on `DialogStd` to support some space to screen-borders.
- Fix: Demo-Icons on histoire stories.
- Fix: Minor styling changes on `TooltipStd` component.
- Fix: TypeScript type issues on dts plugin / vite build process.
- Fix: Re-Using same tooltip instance resulted in broken animation on `v-tooltip` directive.
- Fix: Styling issues on lg-sized `NumberField` and `PasswordField` component.

## Version 0.0.9 - Experimental
- Add: `AlertMessage` / `AlertStd` components & basic story demonstration.
Expand Down
208 changes: 104 additions & 104 deletions package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"@rushstack/eslint-patch": "^1.10.1",
"@tailwindcss/typography": "^0.5.12",
"@tsconfig/node20": "^20.1.4",
"@types/node": "^20.12.4",
"@types/node": "^20.12.5",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/eslint-config-typescript": "^13.0.0",
"@vue/tsconfig": "^0.5.1",
Expand All @@ -63,14 +63,14 @@
"npm-run-all2": "^6.1.2",
"postcss": "^8.4.38",
"postcss-import": "^16.1.0",
"rollup": "^4.14.0",
"rollup": "^4.14.1",
"tailwindcss": "^3.4.3",
"typescript": "~5.4.4",
"vite": "^5.2.8",
"vite-plugin-dts": "^3.8.1",
"vitepress": "^1.0.2",
"vue": "^3.4.21",
"vue-tsc": "^2.0.10"
"vue-tsc": "^2.0.11"
},
"peerDependencies": {
"postcss": "^8.3.0",
Expand Down
98 changes: 53 additions & 45 deletions src/components/control/BalloonSelector.story.vue
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,116 @@
<template>
<Story title="Form/Control/BalloonSelector" :layout="{ type: 'grid', width: '800px' }">
<Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
<BalloonSelector v-bind="state" v-model="state.value" />
<div class="p-2">
<BalloonSelector v-bind="state" v-model="state.value" />
</div>
</Variant>

<Variant title="Unselectable" :init-state="stateUnselectable" v-slot="{ state }">
<BalloonSelector v-bind="state" v-model="state.value" />
<div class="p-2">
<BalloonSelector v-bind="state" v-model="state.value" />
</div>
</Variant>

<Variant title="Multiple" :init-state="stateMultiple" v-slot="{ state }">
<BalloonSelector v-bind="state" v-model="state.value" />
<div class="p-2">
<BalloonSelector v-bind="state" v-model="state.value" />
</div>
</Variant>

<Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
<div class="flex flex-col gap-4">
<BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
<BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
<BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
<div class="flex flex-col gap-4 p-2">
<div class="flex flex-row items-center gap-2">
<BalloonSelector v-bind="state" size="sm" v-model="state.valueSM" />
<BadgeStd label="32px" size="sm" class="ml-auto" />
</div>
<div class="flex flex-row items-center gap-2">
<BalloonSelector v-bind="state" v-model="state.valueMD" />
<BadgeStd label="default" size="sm" color="primary" class="ml-auto" />
<BadgeStd label="40px" size="sm" />
</div>
<div class="flex flex-row items-center gap-2">
<BalloonSelector v-bind="state" size="lg" v-model="state.valueLG" />
<BadgeStd label="56px" size="sm" class="ml-auto" />
</div>
</div>
</Variant>

<Variant title="Icons" :init-state="stateIcons" v-slot="{ state }">
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-4 p-2">
<div class="flex flex-row gap-4">
<BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
<BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
<BalloonSelector v-bind="state" size="sm" v-model="state.valueSM" />
</div>
<div class="flex flex-row gap-4">
<BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
<BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
<BalloonSelector v-bind="state" v-model="state.valueMD" />
</div>
<div class="flex flex-row gap-4">
<BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
<BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
<BalloonSelector v-bind="state" size="lg" v-model="state.valueLG" />
</div>
</div>
</Variant>

<Variant title="Connected" :init-state="stateConnected" v-slot="{ state }">
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-4 p-2">
<div class="flex flex-row gap-4">
<BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
<BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
<BalloonSelector v-bind="state" size="sm" v-model="state.valueSM" />
</div>
<div class="flex flex-row gap-4">
<BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
<BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
<BalloonSelector v-bind="state" v-model="state.valueMD" />
</div>
<div class="flex flex-row gap-4">
<BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
<BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
<BalloonSelector v-bind="state" size="lg" v-model="state.valueLG" />
</div>
</div>
</Variant>

<Variant title="Condensed" :init-state="stateCondensed" v-slot="{ state }">
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-4 p-2">
<div class="flex flex-row gap-4">
<BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
<BalloonSelector v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
<BalloonSelector v-bind="state" size="sm" v-model="state.valueSM" />
</div>
<div class="flex flex-row gap-4">
<BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
<BalloonSelector v-bind="state" placeholder="48px height" v-model="state.valueMD" />
<BalloonSelector v-bind="state" v-model="state.valueMD" />
</div>
<div class="flex flex-row gap-4">
<BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
<BalloonSelector v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
<BalloonSelector v-bind="state" size="lg" v-model="state.valueLG" />
</div>
</div>
</Variant>

<Variant title="States" :init-state="stateStates" v-slot="{ state }">
<div class="flex flex-col flex-1 gap-4">
<div class="flex flex-row items-center flex-1 gap-4">
<div class="basis-36">Default</div>
<BalloonSelector v-bind="state" v-model="state.valueNormal" />
<BadgeStd label="Default" color="primary" size="sm" class="ml-auto" />
</div>
<div class="flex flex-row items-center flex-1 gap-4">
<div class="basis-36">Selected</div>
<BalloonSelector v-bind="state" v-model="state.valueSelected" />
<BadgeStd label="Selected" size="sm" class="ml-auto" />
</div>
<div class="flex flex-row items-center flex-1 gap-4">
<div class="basis-36">Disabled</div>
<BalloonSelector v-bind="state" disabled v-model="state.valueDisabled" />
<BadgeStd label="Disabled" size="sm" class="ml-auto" />
</div>
<div class="flex flex-row items-center flex-1 gap-4">
<div class="basis-36">Disabled Selected</div>
<BalloonSelector v-bind="state" disabled v-model="state.valueDisabledSelected" />
<BadgeStd label="Disabled Selected" size="sm" class="ml-auto" />
</div>
<div class="flex flex-row items-center flex-1 gap-4">
<div class="basis-36">Valid</div>
<BalloonSelector v-bind="state" validation="valid" v-model="state.valueValid" />
<BadgeStd label="Valid" size="sm" class="ml-auto" />
</div>
<div class="flex flex-row items-center flex-1 gap-4">
<div class="basis-36">Valid Selected</div>
<BalloonSelector v-bind="state" validation="valid" v-model="state.valueValidSelected" />
<BadgeStd label="Valid Selected" size="sm" class="ml-auto" />
</div>
<div class="flex flex-row items-center flex-1 gap-4">
<div class="basis-36">Invalid</div>
<BalloonSelector v-bind="state" validation="invalid" v-model="state.valueInvalid" />
<BadgeStd label="Invalid" size="sm" class="ml-auto" />
</div>
<div class="flex flex-row items-center flex-1 gap-4">
<div class="basis-36">Invalid Selected</div>
<BalloonSelector v-bind="state" validation="invalid" v-model="state.valueInvalidSelected" />
<BadgeStd label="Invalid Selected" size="sm" class="ml-auto" />
</div>
</div>
</Variant>
Expand All @@ -112,6 +119,7 @@

<script lang="ts" setup>
import { h, ref } from 'vue';
import BadgeStd from '../badge/BadgeStd.vue';
import BalloonSelector from './BalloonSelector.vue';
Expand All @@ -120,11 +128,11 @@ const AlignLeft = {
props: {
size: Number
},
render(ctx: any) {
render(props: any) {
return h('svg', {
xmlns: "http://www.w3.org/2000/svg",
width: ctx?.props?.size ?? 16,
height: ctx?.props?.size ?? 16,
width: props?.size ?? 16,
height: props?.size ?? 16,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
Expand All @@ -145,11 +153,11 @@ const AlignCenter = {
props: {
size: Number
},
render(ctx: any) {
render(props: any) {
return h('svg', {
xmlns: "http://www.w3.org/2000/svg",
width: ctx?.props?.size ?? 16,
height: ctx?.props?.size ?? 16,
width: props?.size ?? 16,
height: props?.size ?? 16,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
Expand All @@ -170,11 +178,11 @@ const AlignRight = {
props: {
size: Number
},
render(ctx: any) {
render(props: any) {
return h('svg', {
xmlns: "http://www.w3.org/2000/svg",
width: ctx?.props?.size ?? 16,
height: ctx?.props?.size ?? 16,
width: props?.size ?? 16,
height: props?.size ?? 16,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
Expand Down
50 changes: 18 additions & 32 deletions src/components/control/BalloonSelector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,37 +282,32 @@ function onSelect(option: BalloonSelectorOptionTypes) {

<style scoped>
.field-balloon-selector {
@apply flex flex-col gap-2;
@apply h-10 flex flex-col gap-2;
@screen lg {
@apply flex-row;
}
}
.balloon-item {
@apply w-full relative cursor-pointer border border-solid;
@apply w-full relative cursor-pointer border border-solid first:rounded-t-md last:rounded-b-md;
@apply transition-colors duration-300 ease-in-out;
&:first-child {
@apply rounded-t-md;
@screen md {
@apply w-auto first:rounded-l-md first:rounded-r-none last:rounded-r-md last:rounded-l-none;
}
&:last-child {
@apply rounded-b-md;
& input {
@apply invisible absolute right-0 w-0 h-0;
}
@screen md {
@apply w-auto;
&:first-child {
@apply rounded-l-md rounded-r-none;
}
&:last-child {
@apply rounded-r-md rounded-l-none;
}
& :slotted(.item-label) {
@apply h-full inline-flex flex-row gap-2 text-sm font-semibold px-5 py-2 items-center whitespace-nowrap;
}
}
/** States */
.balloon-item {
&.item-disabled {
@apply cursor-not-allowed;
@apply bg-gray-100 border-gray-300 text-gray-400;
Expand Down Expand Up @@ -358,31 +353,22 @@ function onSelect(option: BalloonSelectorOptionTypes) {
@apply dark:bg-success-900 dark:text-success-300;
}
}
& input {
@apply invisible absolute right-0 w-0 h-0;
}
& :slotted(.item-label) {
@apply h-full inline-flex flex-row gap-2 text-sm font-semibold px-5 items-center;
padding-top: calc(0.875rem - 1px);
padding-bottom: calc(0.875rem - 1px);
}
}
/** Sizes */
.field-balloon-selector.field-sm {
@apply h-8;
& .balloon-item :slotted(.item-label) {
@apply text-xs px-3.5;
padding-top: calc(0.75rem - 1px);
padding-bottom: calc(0.75rem - 1px);
@apply px-3.5 py-1.5 text-xs;
}
}
.field-balloon-selector.field-lg {
@apply h-14;
& .balloon-item :slotted(.item-label) {
@apply text-base px-7;
padding-top: calc(1.0rem - 1px);
padding-bottom: calc(1.0rem - 1px);
@apply px-7 py-3.5 text-base;
}
}
Expand Down
30 changes: 22 additions & 8 deletions src/components/control/CalendarField.story.vue
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,45 @@
<template>
<Story title="Form/Control/CalendarField" :layout="{ type: 'grid', width: '400px' }">
<Story title="Form/Control/CalendarField" :layout="{ type: 'grid', width: '800px' }">
<Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
<CalendarField v-bind="state" v-model="state.value" />
<div class="p-2 max-w-[360px] mx-auto">
<CalendarField v-bind="state" v-model="state.value" />
</div>
</Variant>

<Variant title="Monday" :init-state="stateMonday" v-slot="{ state }">
<CalendarField v-bind="state" v-model="state.value" />
<div class="p-2 max-w-[360px] mx-auto">
<CalendarField v-bind="state" v-model="state.value" />
</div>
</Variant>

<Variant title="Week Numbers" :init-state="stateNumbers" v-slot="{ state }">
<CalendarField v-bind="state" v-model="state.value" />
<div class="p-2 max-w-[360px] mx-auto">
<CalendarField v-bind="state" v-model="state.value" />
</div>
</Variant>

<Variant title="Austrian" :init-state="stateAustrian" v-slot="{ state }">
<CalendarField v-bind="state" v-model="state.value" />
<div class="p-2 max-w-[360px] mx-auto">
<CalendarField v-bind="state" v-model="state.value" />
</div>
</Variant>

<Variant title="Min/Max Range" :init-state="stateRange" v-slot="{ state }">
<CalendarField v-bind="state" v-model="state.value" />
<div class="p-2 max-w-[360px] mx-auto">
<CalendarField v-bind="state" v-model="state.value" />
</div>
</Variant>

<Variant title="Date Ranges" :init-state="stateRanges" v-slot="{ state }">
<CalendarField v-bind="state" v-model="state.value" />
<div class="p-2 max-w-[360px] mx-auto">
<CalendarField v-bind="state" v-model="state.value" />
</div>
</Variant>

<Variant title="Time" :init-state="stateTime" v-slot="{ state }">
<CalendarField v-bind="state" v-model="state.value" />
<div class="p-2 max-w-[360px] mx-auto">
<CalendarField v-bind="state" v-model="state.value" />
</div>
</Variant>
</Story>
</template>
Expand Down
Loading

0 comments on commit 4940a9c

Please sign in to comment.