vueless 0.0.277 → 0.0.279

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.277",
+  "version": "0.0.279",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-checkbox/index.vue

@@ -1,11 +1,11 @@
 <template>
   <ULabel
     :for="id"
-    :size="checkboxSize"
     :label="label"
+    :error="error"
+    :size="checkboxSize"
     :align="labelAlign"
     :disabled="disabled"
-    :error="error"
     :description="description"
     v-bind="labelAttrs"
     :data-cy="`${dataCy}-label`"

package/ui.form-checkbox-group/index.stories.js

@@ -3,6 +3,7 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storyboo
 import UCheckboxGroup from "../ui.form-checkbox-group";
 import UCheckbox from "../ui.form-checkbox";
 import UAlert from "../ui.text-alert";
+import UCol from "../ui.container-col";
 import URow from "../ui.container-row";
 
 /**
@@ -27,7 +28,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UCheckboxGroup, UCheckbox, UAlert, URow },
+  components: { UCheckboxGroup, UCheckbox, UAlert, URow, UCol },
   setup() {
     const slots = getSlotNames(UCheckboxGroup.name);
 
@@ -39,22 +40,22 @@ const DefaultTemplate = (args) => ({
     };
   },
   template: `
-    <URow class="!flex-col">
+    <UCol>
       <UCheckboxGroup v-bind="args" v-model="value">
         ${args.slotTemplate || getSlotsFragment()}
       </UCheckboxGroup>
 
       <URow>
-        <UAlert size="sm" color="blue">
+        <UAlert size="sm" color="gray">
           <p>Selected value: {{ value }}</p>
         </UAlert>
       </URow>
-    </URow>
+    </UCol>
   `,
 });
 
 const EnumVariantTemplate = (args, { argTypes } = {}) => ({
-  components: { UCheckboxGroup, URow },
+  components: { UCheckboxGroup, UCol },
   setup() {
     return { args };
   },
@@ -65,10 +66,10 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <URow class="!flex-col">
+    <UCol>
       <UCheckboxGroup
         v-for="(option, index) in options"
-        :key="option"
+        :key="index"
         v-bind="args"
         v-model="value"
         :label="option"
@@ -76,7 +77,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
         :options="args.options"
         name="option"
       />
-    </URow>
+    </UCol>
   `,
 });
 

package/ui.form-color-picker/configs/default.config.js

@@ -15,11 +15,14 @@ export default /*tw*/ {
   unselectedIconName: "close",
   unselectedRadio: {
     component: "{URadio}",
-    radio: "checked:text-white !border-gray-400",
+    radio: "checked:text-white !border-gray-300",
   },
   radio: {
     component: "{URadio}",
-    radio: "bg-{color}-500 border-{color}-500 hover:border-{color}-500 disabled:border-{color}-400 disabled:bg-{color}-400",
+    radio: `
+      bg-{color}-600 border-{color}-600 hover:border-{color}-600 active:bg-{color}-800
+      disabled:border-{color}-400 disabled:bg-{color}-400
+    `,
   },
   defaultVariants: {
     size: "md",
@@ -46,9 +49,10 @@ export default /*tw*/ {
     ],
   },
   safelist: (colors) => [
-    { pattern: `bg-(${colors})-500` },
-    { pattern: `border-(${colors})-500` },
     { pattern: `bg-(${colors})-400`, variants: ["disabled"] },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `bg-(${colors})-800`, variants: ["active"] },
     { pattern: `border-(${colors})-400`, variants: ["disabled"] },
+    { pattern: `border-(${colors})-600`, variants: ["hover"] },
   ],
 };

package/ui.form-color-picker/index.stories.js

@@ -55,16 +55,16 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = { name: "Default" };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
+Sizes.args = { name: "Sizes", enum: "size" };
 
 export const Description = DefaultTemplate.bind({});
-Description.args = { description: "Description" };
+Description.args = { name: "Description", description: "Description" };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "some error" };
+Error.args = { name: "Error", error: "some error" };
 
 export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
+Disabled.args = { name: "Disabled", disabled: true };

package/ui.form-radio/index.vue

@@ -2,28 +2,26 @@
   <ULabel
     :for="id"
     :label="label"
+    :error="error"
     :size="radioSize"
     :align="labelAlign"
-    :error="error"
-    :description="description"
     :disabled="disabled"
+    :description="description"
     v-bind="labelAttrs"
     :data-cy="`${dataCy}-label`"
   >
     <input
       :id="id"
       type="radio"
-      :disabled="disabled"
-      :name="radioName"
       :value="radioValue"
+      :name="radioName"
       :checked="checked || isChecked"
+      :disabled="disabled"
       v-bind="radioAttrs"
       :data-cy="dataCy"
       @change="onChange"
     />
 
-    <slot />
-
     <template #footer>
       <slot name="footer" />
     </template>

package/ui.form-radio-group/index.stories.js

@@ -3,7 +3,6 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storyboo
 import URadioGroup from "../ui.form-radio-group";
 import URadio from "../ui.form-radio";
 import UAlert from "../ui.text-alert";
-import URow from "../ui.container-row";
 import UCol from "../ui.container-col";
 
 /**
@@ -14,41 +13,40 @@ export default {
   title: "Form Inputs & Controls / Radio Group",
   component: URadioGroup,
   args: {
+    label: "Radio Group",
     modelValue: "One",
+    options: [
+      { label: "Boolean", value: false },
+      { label: "String", value: "One" },
+      { label: "Number", value: 3 },
+      { label: "Object", value: { key: "value" } },
+      { label: "Array", value: ["Array", 1] },
+    ],
   },
   argTypes: {
     ...getArgTypes(URadioGroup.name),
   },
 };
 
-const defaultRadios = [
-  { name: "slotValues", label: "Boolean", value: false },
-  { name: "slotValues", label: "String", value: "One" },
-  { name: "slotValues", label: "Number", value: 3 },
-  { name: "slotValues", label: "Object", value: { key: "value" } },
-  { name: "slotValues", label: "Array", value: ["Array", 1] },
-];
-
 const DefaultTemplate = (args) => ({
-  components: { URadioGroup, URadio, UAlert, URow, UCol },
+  components: { URadioGroup, URadio, UAlert, UCol },
   setup() {
     const slots = getSlotNames(URadioGroup.name);
 
-    const radios = args.radios ? args.radios : defaultRadios;
-
-    return { args, slots, radios };
+    return { args, slots };
   },
   template: `
     <UCol gap="2xl">
       <URadioGroup v-bind="args" v-model="args.modelValue">
         <URadio
-          v-for="(radio, index) in radios"
+          v-for="(radio, index) in args.options"
           :key="index"
           v-bind="radio"
         >
           ${args.slotTemplate || getSlotsFragment()}
         </URadio>
       </URadioGroup>
+
       <UAlert color="gray" size="xs">
         <code>Selected value: <b>{{ args.modelValue }}</b></code>
       </UAlert>
@@ -57,18 +55,15 @@ const DefaultTemplate = (args) => ({
 });
 
 const EnumVariantTemplate = (args, { argTypes } = {}) => ({
-  components: { URadioGroup, URow },
+  components: { URadioGroup, UCol },
   setup() {
-    const radios = defaultRadios;
-
     return {
       args,
       options: argTypes[args.enum].options,
-      radios,
     };
   },
   template: `
-    <URow class="!flex-col">
+    <UCol>
       <URadioGroup
         v-for="(option, index) in options"
         :key="index"
@@ -76,10 +71,10 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
         v-model="args.modelValue"
         :[args.enum]="option"
         :label="option"
-        :options="radios"
+        :options="args.options"
         :name="option"
       />
-    </URow>
+    </UCol>
   `,
 });
 
@@ -91,12 +86,13 @@ Default.args = {
 export const Options = DefaultTemplate.bind({});
 Options.args = {
   name: "Options",
-  radios: [
-    { name: "radioValues", label: "Boolean", value: false },
-    { name: "radioValues", label: "String", value: "Custom string value" },
-    { name: "radioValues", label: "Number", value: 4 },
-    { name: "radioValues", label: "Object", value: { key: "Custom object value" } },
-    { name: "radioValues", label: "Array", value: ["Custom array value", 2] },
+  modelValue: "Custom string value",
+  options: [
+    { label: "Boolean", value: false },
+    { label: "String", value: "Custom string value" },
+    { label: "Number", value: 4 },
+    { label: "Object", value: { key: "Custom object value" } },
+    { label: "Array", value: ["Custom array value", 2] },
   ],
 };
 

package/ui.image-icon/configs/default.config.js

@@ -84,9 +84,9 @@ export default /*tw*/ {
     pill: false,
   },
   safelist: (colors) => [
+    { pattern: `bg-(${colors})-600` },
     { pattern: `text-(${colors})-400` },
-    { pattern: `text-(${colors})-500` },
-    { pattern: `text-(${colors})-700` },
-    { pattern: `bg-(${colors})-500` },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `text-(${colors})-800` },
   ],
 };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.277",
+  "version": "0.0.279",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6629,9 +6629,6 @@
             }
           ],
           "slots": [
-            {
-              "name": "default"
-            },
             {
               "name": "footer"
             }